/**
 * Reviews.
 *
 * Rules, same as every other sheet here:
 *  1. Tokens only. No literal colour, anywhere, ever (ADR-001).
 *  2. Mobile-first: the base rules are the 320px layout, media queries only add.
 *  3. No JavaScript. The report control is a native <details>.
 *
 * The visual grammar carries the separation the data model enforces. A Squarespell rating is
 * set in the page's own ink on the page's own ground. Anything from somewhere else sits
 * inside a bordered container with its source named in the corner, and a testimonial sits
 * inside that on a tinted ground with a label above it. A reader should be able to tell what
 * they are looking at with the text blurred.
 *
 * Stars are never the only signal: every score is printed as a number with its scale, so a
 * reader who cannot distinguish a filled star from an empty one loses nothing.
 */

/* ─── Shared: stars ─────────────────────────────────────────────────────────
   Decorative by construction — every component that draws them also writes the
   score in text, and the sprite is aria-hidden. Colour is the caution token
   rather than a bespoke gold so dark mode gets a legible amber for free. */

.sgp-rv-stars {
	display: inline-flex;
	gap: 2px;
	flex: none;
}

.sgp-rv-star {
	inline-size: 14px;
	block-size: 14px;
	color: var(--sq-line);
}

.sgp-rv-star.is-on,
.sgp-rv-star.is-half { color: var(--sq-caution); }
.sgp-rv-star.is-on   { fill: currentColor; }

/* ─── Affiliate disclosure ─────────────────────────────────────────────────
   Quiet, but never smaller than the body's smallest readable size. A disclosure
   set below 12px is a disclosure designed not to be read. */

.sgp-rv-disclosure {
	margin: 12px 0 0;
	max-inline-size: 68ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
}

/* ─── Listing-card badge ───────────────────────────────────────────────────
   Sits inside the image frame, bottom-left. Every card type spends its top
   corners already — flags top-left, save top-right — so this is the corner
   that was free on all three without moving anything.

   It is a LINK, so it needs a real hit area and a real focus ring; and it sits
   on photography, so it carries its own surface rather than trusting whatever
   pixel happens to be behind it. `backdrop-filter` is progressive: without it
   the surface is still opaque enough to read. */

.sgp-rv-badge {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-inline-size: calc(100% - 20px);
	padding: 4px 9px;
	border: 1px solid color-mix(in srgb, var(--sq-ink) 10%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--sq-sheet) 94%, transparent);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--sq-ink) 14%, transparent);
	color: var(--sq-ink);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-eyebrow);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	transition: background var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

@supports (backdrop-filter: blur(6px)) {
	.sgp-rv-badge { backdrop-filter: blur(6px); }
}

.sgp-rv-badge:hover { background: var(--sq-sheet); border-color: color-mix(in srgb, var(--sq-ink) 24%, transparent); }

.sgp-rv-badge:focus-visible {
	outline: 2px solid var(--sq-ink);
	outline-offset: 2px;
}

.sgp-rv-badge__icon { inline-size: 13px; block-size: 13px; flex: none; }
.sgp-rv-badge__text { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.sgp-rv-badge__score { font-weight: var(--sq-w-bold); }
.sgp-rv-badge__count,
.sgp-rv-badge__sep { color: var(--sq-muted); font-weight: var(--sq-w-medium); }

/* The source name is the difference between "we rate this 4.8" and "G2 does",
   so it is never the part that gets truncated away. */
.sgp-rv-badge__src { font-weight: var(--sq-w-semibold); flex: none; }

/* A native rating is the only one that earns the amber star. */
.sgp-rv-badge--native .sgp-rv-badge__icon { color: var(--sq-caution); fill: currentColor; }

/* Everything else is deliberately quieter than our own score. */
.sgp-rv-badge--external .sgp-rv-badge__icon,
.sgp-rv-badge--testimonial .sgp-rv-badge__icon,
.sgp-rv-badge--creator_rating .sgp-rv-badge__icon,
.sgp-rv-badge--creator_feedback .sgp-rv-badge__icon { color: var(--sq-muted); }

/* Creator-level badges are visibly not product ratings: muted ground, muted ink. */
.sgp-rv-badge--creator_rating,
.sgp-rv-badge--creator_feedback {
	background: color-mix(in srgb, var(--sq-soft) 94%, transparent);
	color: var(--sq-muted);
	font-weight: var(--sq-w-semibold);
}

.sgp-rv-badge--creator_rating .sgp-rv-badge__src,
.sgp-rv-badge--creator_feedback .sgp-rv-badge__src { color: var(--sq-muted); }
.sgp-rv-badge--creator_rating .sgp-rv-badge__score { color: var(--sq-ink); }

/* Compact rails and carousels give the frame less room. */
.sgp-rv-badge--ctx-compact {
	inset-block-end: 7px;
	inset-inline-start: 7px;
	padding: 3px 7px;
	font-size: var(--sq-t-eyebrow);
	max-inline-size: calc(100% - 14px);
}

@media (max-width: 480px) {
	.sgp-rv-badge { font-size: var(--sq-t-eyebrow); padding: 3px 8px; }
}

/* ─── Product-page summary link ────────────────────────────────────────────
   Sits with the title and price. A link, so it gets a hit area and a focus
   ring; quiet, so it does not compete with the buy button beside it. */

.sgp-rv-summary {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-block-start: 8px;
	padding: 5px 10px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	color: var(--sq-ink);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-eyebrow);
	text-decoration: none;
}

.sgp-rv-summary:hover { border-color: var(--sq-ink); }
.sgp-rv-summary:focus-visible { outline: 2px solid var(--sq-ink); outline-offset: 2px; }
.sgp-rv-summary__icon { inline-size: 14px; block-size: 14px; flex: none; color: var(--sq-muted); }
.sgp-rv-summary__text { font-weight: var(--sq-w-semibold); }
.sgp-rv-summary__go { color: var(--sq-muted); text-decoration: underline; }

/* A summary that is only about the creator must not read as a product score. */
.sgp-rv-summary--creator_rating,
.sgp-rv-summary--creator_feedback { color: var(--sq-muted); }
.sgp-rv-summary--creator_rating .sgp-rv-summary__text,
.sgp-rv-summary--creator_feedback .sgp-rv-summary__text { font-weight: var(--sq-w-semibold); }

/* ─── The section ──────────────────────────────────────────────────────────── */

.sgp-rv-reviews { margin-block-start: var(--wp--custom--shell--section); }
.sgp-rv-reviews__head { margin-block-end: var(--wp--custom--shell--gap); }

.sgp-rv-reviews__creatorlink {
	margin: 16px 0 0;
	max-inline-size: 72ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

.sgp-rv-reviews__write { margin-block-start: 18px; }
.sgp-rv-reviews__write-icon { inline-size: 15px; block-size: 15px; }

/* ─── Headline ─────────────────────────────────────────────────────────────
   The Google/Trustpilot shape: one large number, its stars, its population,
   and the distribution beside it. Every element here is unreachable without a
   real numeric rating — there is no code path that draws an empty bar or a
   nought, because that is what a reader mistakes for a bad score. */

.sgp-rv-headline {
	display: grid;
	gap: 18px;
	padding: 20px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-paper);
}

@media (min-width: 720px) {
	.sgp-rv-headline:has(.sgp-rv-dist) { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; gap: 28px; }
}

.sgp-rv-headline__big {
	margin: 0;
	font-size: var(--sq-t-h1);
	font-weight: var(--sq-w-bold);
	line-height: var(--sq-lh-h1);
	letter-spacing: var(--sq-ls-h2);
	color: var(--sq-ink);
}

.sgp-rv-headline__of {
	margin: 6px 0 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sgp-rv-headline__score .sgp-rv-stars { margin-block-start: 6px; }
.sgp-rv-headline__score .sgp-rv-star { inline-size: 17px; block-size: 17px; }

/* The honest empty state: words, no number, no stars, no bars. */
.sgp-rv-headline__nonetitle {
	margin: 0;
	font-size: var(--sq-t-p1);
	font-weight: var(--sq-w-semibold);
	color: var(--sq-ink);
}

.sgp-rv-headline__aside {
	margin: 6px 0 0;
	max-inline-size: 64ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

/* ─── Distribution ─────────────────────────────────────────────────────────── */

.sgp-rv-dist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

.sgp-rv-dist__row {
	display: grid;
	grid-template-columns: 1ch minmax(0, 1fr) 4ch;
	align-items: center;
	gap: 10px;
	font-size: var(--sq-t-eyebrow);
	color: var(--sq-muted);
}

.sgp-rv-dist__track {
	block-size: 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	overflow: hidden;
}

.sgp-rv-dist__fill {
	display: block;
	block-size: 100%;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-caution);
}

.sgp-rv-dist__pct { text-align: end; font-variant-numeric: tabular-nums; }

/* ─── Bands: the three populations ─────────────────────────────────────────
   Each band is a container with its own heading and its own standing note, so
   a reader can tell which population they are reading without parsing the
   text. The testimonial band is tinted and ruled so it can never be mistaken
   for the independent one directly above it. */

.sgp-rv-band {
	margin-block-start: var(--wp--custom--shell--gap);
	padding: 18px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-paper);
}

.sgp-rv-band--independent { background: var(--sq-soft); }

.sgp-rv-band--testimonial {
	background: var(--sq-soft);
	border-inline-start: 3px solid var(--sq-caution);
}

.sgp-rv-band__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}

.sgp-rv-band__title {
	margin: 0;
	font-size: var(--sq-type-h4);
	line-height: var(--sq-lh-ui);
}

.sgp-rv-band__count {
	display: inline-flex;
	align-items: center;
	min-inline-size: 22px;
	justify-content: center;
	padding: 1px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-badge);
	color: var(--sq-ink);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
}

.sgp-rv-band__note {
	margin: 8px 0 0;
	max-inline-size: 74ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

/* ─── Per-source line ──────────────────────────────────────────────────────
   One row per platform, each with its own scale and its own count. There is
   deliberately no element here that could hold a combined figure. */

.sgp-rv-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.sgp-rv-source {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-paper);
	font-size: var(--sq-t-eyebrow);
}

.sgp-rv-source__icon { inline-size: 13px; block-size: 13px; flex: none; color: var(--sq-muted); }
.sgp-rv-source__name { font-weight: var(--sq-w-semibold); color: var(--sq-ink); }
.sgp-rv-source__score { font-weight: var(--sq-w-semibold); }
.sgp-rv-source__count { color: var(--sq-muted); }

/* ─── One review ───────────────────────────────────────────────────────────── */

.sgp-rv-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.sgp-rv-item {
	padding: 16px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-paper);
}

/* A testimonial is marketing the creator chose to publish. It is set apart from
   an independent review by ground, by a left rule and by a label above it —
   three signals, because one of them is a colour and colour is never alone. */
.sgp-rv-item--testimonial {
	border-inline-start: 3px solid var(--sq-caution);
	background: var(--sq-sheet);
}

.sgp-rv-item__label {
	margin: 0 0 8px;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-body);
	text-transform: uppercase;
}

.sgp-rv-item__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 4px 10px;
}

/* Initials, not a borrowed photograph. We do not hold avatars for people who
   reviewed on somebody else's platform, and fetching one from that platform
   would be taking a second thing we were not licensed to take. */
.sgp-rv-item__avatar {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-badge);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-body);
}

.sgp-rv-item__rating { grid-column: 1 / -1; }

@media (min-width: 620px) {
	.sgp-rv-item__head { grid-template-columns: auto minmax(0, 1fr) auto; }
	.sgp-rv-item__rating { grid-column: auto; justify-self: end; }
}

.sgp-rv-item__ctx--verified { color: var(--sq-good); font-weight: var(--sq-w-semibold); }

.sgp-rv-item__srcicon { inline-size: 12px; block-size: 12px; flex: none; }
.sgp-rv-item__src { display: inline-flex; align-items: center; gap: 5px; }

.sgp-rv-item__author {
	font-size: var(--sq-t-p3);
	color: var(--sq-ink);
}

.sgp-rv-item__ctx {
	display: block;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-eyebrow);
}

.sgp-rv-item__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.sgp-rv-item__score {
	font-size: var(--sq-t-eyebrow);
	color: var(--sq-muted);
}

.sgp-rv-item__body {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
}

.sgp-rv-item__body p {
	margin: 0;
	max-inline-size: 72ch;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

.sgp-rv-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 10px 0 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
}

.sgp-rv-item__src { font-weight: var(--sq-w-semibold); }

/* "The source states no date" is a fact, not an error. It reads as ordinary
   muted metadata rather than as a warning. */
.sgp-rv-item__date--none { font-style: italic; }

.sgp-rv-item__attrib {
	margin: 8px 0 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
}

.sgp-rv-item__response {
	margin-block-start: 12px;
	padding: 12px 14px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-soft);
}

.sgp-rv-item__response p {
	margin: 0;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sgp-rv-item__response-label {
	margin: 0 0 4px !important;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow) !important;
	font-weight: var(--sq-w-semibold);
}

.sgp-rv-item__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 12px 0 0;
	font-size: var(--sq-t-eyebrow);
}

.sgp-rv-item__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: var(--sq-w-semibold);
}

/* ─── Report control ───────────────────────────────────────────────────────
   Native <details>. The marker is removed but the summary keeps a real focus
   ring and a 44px tap target on touch, because it is the only control on the
   card besides the outbound link. */

.sgp-rv-report { display: inline-block; }

.sgp-rv-report__toggle {
	cursor: pointer;
	color: var(--sq-muted);
	list-style: none;
	min-block-size: 24px;
	display: inline-flex;
	align-items: center;
}

.sgp-rv-report__toggle::-webkit-details-marker { display: none; }
.sgp-rv-report__toggle:hover { color: var(--sq-ink); }

.sgp-rv-report__toggle:focus-visible {
	outline: 2px solid var(--sq-ink);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

.sgp-rv-report__form {
	display: grid;
	gap: 6px;
	margin-block-start: 8px;
	padding: 12px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-paper);
	max-inline-size: 44ch;
}

.sgp-rv-report__form label {
	font-size: var(--sq-t-eyebrow);
	color: var(--sq-muted);
}

.sgp-rv-report__form textarea {
	inline-size: 100%;
	font: inherit;
	font-size: var(--sq-t-p3);
	color: var(--sq-ink);
	background: var(--sq-paper);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm);
	padding: 8px;
}

.sgp-rv-report__form button { justify-self: start; }

/* ─── Creator listing card ─────────────────────────────────────────────────
   Wraps to its own line under the product count. The verified mark is a
   separate element from the rating and can never be read as part of it. */

.sgp-rv-creator {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-block-start: 6px;
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-eyebrow);
}

.sgp-rv-creator__rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sgp-rv-creator__score { font-weight: var(--sq-w-semibold); color: var(--sq-ink); }
.sgp-rv-creator__count,
.sgp-rv-creator__none  { color: var(--sq-muted); }

.sgp-rv-creator__id {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sq-good);
	font-weight: var(--sq-w-semibold);
}

.sgp-rv-creator__id-icon {
	inline-size: 13px;
	block-size: 13px;
	flex: none;
}

/* ─── Creator profile: reputation ──────────────────────────────────────────── */

.sgp-rv-reputation { margin-block-start: var(--wp--custom--shell--section); }

.sgp-rv-reputation__scope {
	margin: 10px 0 0;
	max-inline-size: 72ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

/* One column at 320px. The two panels only sit side by side once each has room
   for its explanatory sentence without setting it four words to a line. */
.sgp-rv-reputation__summary {
	display: grid;
	gap: 14px;
	margin-block-start: 18px;
}

@media (min-width: 720px) {
	.sgp-rv-reputation__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sgp-rv-reputation__native,
.sgp-rv-reputation__identity {
	padding: 18px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-paper);
}

.sgp-rv-reputation__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: var(--sq-type-h4);
}

.sgp-rv-reputation__none,
.sgp-rv-reputation__unverified {
	margin: 8px 0 0;
	color: var(--sq-ink);
	font-size: var(--sq-t-p1);
	font-weight: var(--sq-w-semibold);
}

.sgp-rv-reputation__count {
	margin: 6px 0 0;
	max-inline-size: 56ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-supporting);
}

.sgp-rv-reputation__verified {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 0;
	color: var(--sq-good);
	font-size: var(--sq-t-p1);
}

.sgp-rv-reputation__icon {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
}

.sgp-rv-list--native { margin-block-start: 18px; }

/* ─── Creator controls ─────────────────────────────────────────────────────── */

.sgp-rv-controls {
	margin-block-start: 18px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--sq-line);
}

.sgp-rv-controls__list {
	display: grid;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.sgp-rv-controls__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sgp-rv-controls__link {
	display: inline-block;
	font-weight: var(--sq-w-semibold);
	font-size: var(--sq-t-p3);
}

.sgp-rv-controls__help {
	display: block;
	margin-block-start: 2px;
	max-inline-size: 46ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

/* ─── Motion ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.sgp-rv-report__toggle { transition: none; }
}

/* The showcase layout's purchase card sets its own rhythm; the disclosure joins it
   rather than importing the catalogue layout's spacing. */
.sqsw-licences__affiliate {
	margin-block-start: 8px;
	padding-block-start: 8px;
	border-block-start: 1px solid var(--sq-line);
}

/* ─── Creator profile: hero strip ──────────────────────────────────────────
   The reputation answer beside the name, jumping to the section rather than
   repeating it. */

.sgp-rv-herostrip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 12px 0 0;
	font-size: var(--sq-t-p3);
}

.sgp-rv-herostrip__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-paper);
	color: var(--sq-ink);
	font-weight: var(--sq-w-semibold);
	text-decoration: none;
}

a.sgp-rv-herostrip__item:hover { border-color: var(--sq-ink); }
a.sgp-rv-herostrip__item:focus-visible { outline: 2px solid var(--sq-ink); outline-offset: 2px; }
.sgp-rv-herostrip__item--quiet { color: var(--sq-muted); font-weight: var(--sq-w-semibold); }

/* Identity, visibly not a score — no surface, no border, its own colour. */
.sgp-rv-herostrip__id {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sq-good);
	font-weight: var(--sq-w-semibold);
}

.sgp-rv-herostrip__icon { inline-size: 15px; block-size: 15px; flex: none; }

/* What the verified mark does NOT assert, spelled out under it. */
.sgp-rv-reputation__nots {
	margin: 8px 0 0;
	padding: 0 0 0 18px;
	list-style: disc;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-body);
}

.sgp-rv-reputation__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
}

/* ─── Writing a review ─────────────────────────────────────────────────────
   A native <details> so the form is closed by default without JavaScript, and
   the summary is a real button-shaped control with a real focus ring. */

.sgp-rvf { margin-block-start: 16px; }

.sgp-rvf__open { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.sgp-rvf__open::-webkit-details-marker { display: none; }
.sgp-rvf__open:focus-visible { outline: 2px solid var(--sq-ink); outline-offset: 2px; }
.sgp-rvf__open-icon { inline-size: 15px; block-size: 15px; }

.sgp-rvf__signin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.sgp-rvf__signin-note,
.sgp-rvf__help { color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); }
.sgp-rvf__help { display: block; margin-block-start: 4px; }

.sgp-rvf__form {
	display: grid;
	gap: 16px;
	margin-block-start: 14px;
	padding: 18px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-paper);
	max-inline-size: 56ch;
}

.sgp-rvf__editnote {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-soft);
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
}

.sgp-rvf__field { margin: 0; display: grid; gap: 5px; }
.sgp-rvf__field label,
.sgp-rvf__form legend { font-weight: var(--sq-w-semibold); font-size: var(--sq-t-p3); }

.sgp-rvf__field input[type="text"],
.sgp-rvf__field textarea {
	inline-size: 100%;
	font: inherit;
	font-size: var(--sq-t-p3);
	color: var(--sq-ink);
	background: var(--sq-paper);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm);
	padding: 9px 10px;
}

.sgp-rvf__field input:focus-visible,
.sgp-rvf__field textarea:focus-visible,
.sgp-rvf__form input[type="radio"]:focus-visible {
	outline: 2px solid var(--sq-ink);
	outline-offset: 1px;
}

.sgp-rvf__rating,
.sgp-rvf__conflict { margin: 0; padding: 0; border: 0; }

/* Real radios, drawn as stars. They keep arrow-key operation and are announced
   as "3 stars" without a line of script; the visual mark is decorative. */
.sgp-rvf__stars { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 6px; }
.sgp-rvf__star { position: relative; display: inline-flex; }
.sgp-rvf__star input {
	position: absolute; inset-block-start: 0; inset-inline-start: 0;
	inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.sgp-rvf__star-mark {
	display: grid; place-items: center;
	inline-size: 44px; block-size: 44px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-paper);
	color: var(--sq-line);
}
.sgp-rvf__star-icon { inline-size: 20px; block-size: 20px; }
.sgp-rvf__star-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sgp-rvf__star input:checked ~ .sgp-rvf__star-mark,
.sgp-rvf__star:hover .sgp-rvf__star-mark { color: var(--sq-caution); border-color: var(--sq-caution); }
.sgp-rvf__star input:checked ~ .sgp-rvf__star-mark .sgp-rvf__star-icon { fill: currentColor; }
.sgp-rvf__star input:focus-visible ~ .sgp-rvf__star-mark { outline: 2px solid var(--sq-ink); outline-offset: 2px; }

.sgp-rvf__radio { display: flex; align-items: start; gap: 8px; margin-block-start: 8px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); }
.sgp-rvf__radio input { margin-block-start: 3px; flex: none; }

/* Off-screen, not display:none — a bot reading the DOM should still find it. */
.sgp-rvf__trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.sgp-rvf__submit { margin: 0; display: grid; gap: 6px; justify-items: start; }

.sgp-rvf__notice {
	margin: 0 0 14px;
	padding: 11px 14px;
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	max-inline-size: 72ch;
}
.sgp-rvf__notice--ok   { background: var(--wp--preset--color--verified-bg); color: var(--wp--preset--color--verified); }
.sgp-rvf__notice--warn { background: var(--wp--preset--color--caution-bg);  color: var(--wp--preset--color--caution); }

/* ─── Native review card additions ─────────────────────────────────────────── */

.sgp-rv-item__title { margin: 10px 0 0; font-size: var(--sq-t-p1); font-weight: var(--sq-w-semibold); color: var(--sq-ink); }

/* The honest line about what we do and do not know. Muted, because it is the
   normal state of every review here — not a warning about this one. */
.sgp-rv-item__purchase {
	display: flex; align-items: start; gap: 6px;
	margin: 10px 0 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
}
.sgp-rv-item__purchase-icon { inline-size: 13px; block-size: 13px; flex: none; margin-block-start: 2px; }

/* A declared relationship IS a warning, and says what was done about it. */
.sgp-rv-item__conflict {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px;
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--caution-bg);
	color: var(--wp--preset--color--caution);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
}
.sgp-rv-item__conflict-icon { inline-size: 13px; block-size: 13px; flex: none; }

.sgp-rv-item--excluded { border-inline-start: 3px solid var(--sq-caution); }
.sgp-rv-item__edited { font-style: italic; }

/* ─── Account: my reviews ─────────────────────────────────────────────────── */

.sgp-acct-reviews { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.sgp-acct-review {
	padding: 14px 16px;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-paper);
}

.sgp-acct-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.sgp-acct-review__state { font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-semibold); }
.sgp-acct-review--ok   .sgp-acct-review__state { color: var(--sq-good); }
.sgp-acct-review--wait .sgp-acct-review__state { color: var(--sq-caution); }
.sgp-acct-review--warn .sgp-acct-review__state { color: var(--sq-critical); }
.sgp-acct-review--off  .sgp-acct-review__state { color: var(--sq-muted); }
.sgp-acct-review__title { margin: 4px 0 0; font-size: var(--sq-t-p3); color: var(--sq-ink); }
.sgp-acct-review__reason { margin: 6px 0 0; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); line-height: var(--sq-lh-supporting); }
.sgp-acct-review__withdraw { margin: 10px 0 0; }

@media (max-width: 480px) {
	.sgp-rvf__form { padding: 14px; }
	.sgp-rvf__star-mark { inline-size: 46px; block-size: 46px; }
}

/* ─── Etsy-style star row, in the card body ────────────────────────────────
   Between the title/creator and the price. Small, high-contrast, and a link
   to the reviews — the one place on a card that looks like an ordinary
   marketplace rating, so it only ever carries one. */

.sgp-rv-cardstars {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-block-start: 6px;
	text-decoration: none;
	color: var(--sq-ink);
	line-height: 1;
}

.sgp-rv-cardstars .sgp-rv-star { inline-size: 15px; block-size: 15px; }
.sgp-rv-cardstars__count { font-size: 13px; font-weight: 600; color: var(--sq-muted); }
.sgp-rv-cardstars:hover .sgp-rv-cardstars__count { color: var(--sq-ink); }
.sgp-rv-cardstars:focus-visible { outline: 2px solid var(--sq-ink); outline-offset: 3px; border-radius: var(--wp--custom--radius--sm); }

/* ─── Review carousel ──────────────────────────────────────────────────────
   A scroll-snap rail, no JavaScript. The container is focusable so the
   arrow keys scroll it, which is what a keyboard user expects from a
   horizontally scrollable region and what a custom arrow-button carousel
   usually takes away.

   Cards keep a fixed width so the rail always shows part of the next one —
   the only honest affordance that there IS a next one, and one that survives
   with scrollbars hidden. */

/* `min-inline-size: 0` is load-bearing, not defensive. A grid with
   `grid-auto-flow: column` has an intrinsic width equal to the sum of its
   columns; without this the rail refuses to shrink below that, the overflow
   never engages, and the whole PAGE scrolls sideways instead of the rail —
   which measured as 248px of horizontal document overflow at 1180px. */
.sgp-rv-rail {
	margin-block-start: 14px;
	min-inline-size: 0;
	max-inline-size: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--sq-line) transparent;

	/* `overflow-x: auto` alone does not stop the rail's off-screen columns being counted in
	   the DOCUMENT's scrollWidth: at 375px this measured 342px of phantom page overflow that
	   no ancestor rule removed — narrowing the rail to 100px did not shift it, and neither
	   did clipping the band. Paint containment does, because it makes the browser treat the
	   rail's subtree as unable to affect anything outside its padding box, which is exactly
	   what a scroll container should already have meant. The rail's own focus ring is
	   unaffected: an element's outline is not clipped by its own containment. */
	contain: paint;
}

.sgp-rv-rail:focus-visible {
	outline: 2px solid var(--sq-ink);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--md);
}

.sgp-rv-rail::-webkit-scrollbar { block-size: 8px; }
.sgp-rv-rail::-webkit-scrollbar-track { background: transparent; }
.sgp-rv-rail::-webkit-scrollbar-thumb { background: var(--sq-line); border-radius: var(--wp--custom--radius--pill); }
.sgp-rv-rail:hover::-webkit-scrollbar-thumb { background: var(--sq-muted); }

.sgp-rv-list--rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(310px, 82vw), 1fr);
	gap: 14px;
	margin: 0;
	padding-block-end: 12px;
	align-items: stretch;
}

.sgp-rv-list--rail > .sgp-rv-item {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

/* The body takes the slack so every card in a row ends level, whatever the
   review length — a rail of ragged-bottom cards reads as broken rather than
   as varied. */
.sgp-rv-list--rail > .sgp-rv-item > .sgp-rv-item__body { flex: 1 1 auto; }

.sgp-rv-rail__hint {
	margin: 8px 0 0;
	color: var(--sq-muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
	.sgp-rv-rail { scroll-behavior: smooth; }
}

/* Wide screens fit three comfortably; there is no reason to make somebody
   scroll for the third when it already fits. */
@media (min-width: 1000px) {
	.sgp-rv-list--rail { grid-auto-columns: minmax(320px, 1fr); }
}

/* Every ancestor between the rail and the section has to allow shrinking, or the
   rail's constraint never takes effect. */
.sgp-rv-band,
.sgp-rv-reviews,
.sgp-rv-reputation { min-inline-size: 0; }
/* `clip` rather than `hidden`: it stops the rail's off-screen cards inflating
   the document's reported scrollWidth, without turning the band into a scroll
   container — which `hidden` does, and which would crop the focus ring on the
   rail and on every control inside a card. */
.sgp-rv-band { overflow-x: clip; }