/*
 * Squarespell Questions.
 *
 * Loaded only on the Questions pages and on a product page that carries the "Ask about this
 * product" section, so a catalogue page never pays for a stylesheet it cannot use.
 *
 * COLOUR
 *
 * Every colour here is one of the `--sq-*` semantic aliases, which are remapped wholesale by
 * `html[data-sq-theme="dark"]` in components.css. That is why there is almost no dark-mode
 * block at the bottom of this file: the two themes are the same rules reading different
 * tokens, rather than two sets of rules that have to be kept in step.
 *
 * The three places that do need a dark rule are the ones using `accent`, which has no dark
 * counterpart in the palette — a deep ink-indigo on a near-black ground fails contrast.
 *
 * TYPE
 *
 * Interface voice throughout: `--sq-font-sans` for everything, `--sq-font-mono` for code and
 * for the counts on chips. The display face is for editorial pages and a question is not one.
 *
 * LAYOUT
 *
 * One column until 900px, then a 1fr/320px split with the sidebar second in the DOM so a
 * screen reader and a phone both get the answers before the recommendations. Intrinsic sizing
 * everywhere else, so there are no further breakpoints to maintain.
 */

.sgq {
	--sgq-gap: var(--wp--preset--spacing--40);
	--sgq-radius: var(--wp--custom--radius--md);

	max-inline-size: 1320px;
	margin-inline: auto;
	padding-inline: var(--wp--custom--shell--gutter);
	padding-block-end: var(--wp--preset--spacing--80);
	color: var(--sq-ink);
	font-family: var(--sq-font-sans);
}

/* Nothing in here may push the page sideways on a phone. */
.sgq * { min-inline-size: 0; }

/*
 * Every sprite icon needs a size.
 *
 * `Icons::use()` emits `<svg><use/></svg>` with no width or height attributes and no
 * viewBox on the outer element, so an unsized one is a replaced element with no intrinsic
 * size — which a flex or grid parent will happily stretch to fill. That is how the primary
 * button rendered as a black slab with a 200px plus sign in it.
 *
 * Written with `:where()` so it carries the specificity of a bare element selector. Every
 * per-component size below it wins on a single class, which is what makes this a floor
 * rather than something to fight.
 */
:where(.sgq, .sgq-product) svg {
	inline-size: 16px;
	block-size: 16px;
	flex: 0 0 auto;
}

/* ─── Buttons ───────────────────────────────────────────────────────────────
   `.sgp-btn` already carries the shape; ghost is the quiet variant the rest of
   the marketplace uses, defined here rather than globally so this feature
   cannot change a button anywhere else. */

.sgq .sgp-btn--ghost {
	background: transparent;
	border-color: var(--sq-line);
	color: var(--sq-ink);
}
.sgq .sgp-btn--ghost:hover { border-color: var(--sq-ink); }

/* ─── Hero ─────────────────────────────────────────────────────────────────*/

.sgq-hero {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--sq-line);
}

.sgq-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--brand);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
	line-height: var(--sq-lh-eyebrow);
	text-transform: uppercase;
}

.sgq-hero__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--sq-t-h2);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h2);
	letter-spacing: var(--sq-ls-h2);
	text-wrap: balance;
	max-inline-size: 22ch;
}

.sgq-hero__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-inline-size: 62ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-body);
}

.sgq-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.sgq-hero__note,
.sgq-hero__count {
	margin: 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sgq-hero__count { margin-block-start: var(--wp--preset--spacing--30); }

.sgq-hero__link {
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	text-underline-offset: 3px;
}

/* ─── Search ───────────────────────────────────────────────────────────────*/

.sgq-search { margin-block: var(--wp--preset--spacing--40); max-inline-size: 46rem; }

.sgq-search__label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
}

.sgq-search__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

/*
 * Centred on the input, not on the row.
 *
 * The row wraps on a phone — input on one line, button on the next — and `top: 50%` then
 * centres the glyph on both lines together, which put it in the gap underneath the field.
 * Half the input's own height is the right offset at every width, wrapped or not.
 */
.sgq-search__icon {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-start: 24px;
	inline-size: 18px;
	block-size: 18px;
	translate: 0 -50%;
	color: var(--sq-muted);
	pointer-events: none;
}

.sgq-search__input {
	flex: 1 1 16rem;
	min-block-size: 48px;
	padding-inline: 42px var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-p2);
}

.sgq-search__submit { flex: 0 0 auto; }

/* ─── Platform rail ────────────────────────────────────────────────────────
   Horizontally scrollable on a phone rather than wrapping to five rows, and
   it scrolls inside itself so the page body never does. */

.sgq-rail {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--20);
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.sgq-rail__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	flex: 0 0 auto;
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--wp--custom--transition--fast);
}

.sgq-rail__chip:hover { border-color: var(--sq-ink); }

.sgq-rail__chip.is-on {
	background: var(--sq-ink);
	border-color: var(--sq-ink);
	color: var(--sq-paper);
}

.sgq-rail__count {
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
	color: var(--sq-muted);
}

.sgq-rail__chip.is-on .sgq-rail__count { color: var(--sq-paper); opacity: 0.75; }

/* ─── Toolbar ──────────────────────────────────────────────────────────────*/

.sgq-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--sq-line);
}

.sgq-toolbar__count {
	margin: 0;
	margin-inline-start: auto;
	color: var(--sq-muted);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
}

.sgq-facet { position: relative; }

.sgq-facet__summary {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	cursor: pointer;
	list-style: none;
}

.sgq-facet__summary::-webkit-details-marker { display: none; }

.sgq-facet__badge {
	min-inline-size: 20px;
	padding-inline: 6px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-ink);
	color: var(--sq-paper);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
	text-align: center;
}

.sgq-facet__body {
	display: grid;
	gap: 2px;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	background: var(--sq-sheet);
}

.sgq-facet__option {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}

.sgq-facet__option:hover { background: var(--sq-soft); }
.sgq-facet__option.is-on { font-weight: var(--sq-w-semibold); }
.sgq-facet__tick { inline-size: 15px; block-size: 15px; color: var(--sq-good); }

.sgq-views,
.sgq-sort { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); }

.sgq-views__item,
.sgq-sort__item {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}

.sgq-views__item:hover,
.sgq-sort__item:hover { background: var(--sq-soft); color: var(--sq-ink); }

.sgq-views__item.is-on,
.sgq-sort__item.is-on {
	background: var(--sq-soft);
	color: var(--sq-ink);
	font-weight: var(--sq-w-semibold);
}

.sgq-sort { margin-inline-start: var(--wp--preset--spacing--20); }

/* ─── Cards ────────────────────────────────────────────────────────────────*/

.sgq-list {
	list-style: none;
	display: grid;
	gap: var(--sgq-gap);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
}

.sgq-card {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}

.sgq-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--30);
}

.sgq-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 26px;
	padding-inline: var(--wp--preset--spacing--20);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	letter-spacing: var(--sq-ls-eyebrow);
	text-decoration: none;
}

a.sgq-chip:hover { color: var(--sq-ink); border-color: var(--sq-ink); }

.sgq-chip--platform {
	background: transparent;
	border-color: var(--sq-badge);
	color: var(--sq-ink);
	font-weight: var(--sq-w-semibold);
}

/* An editorial seed is labelled, and looks unlike a member's question on purpose. */
.sgq-chip--editorial {
	background: transparent;
	border-style: dashed;
	border-color: var(--sq-badge);
	color: var(--sq-muted);
}

.sgq-card__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h4);
	letter-spacing: var(--sq-ls-h4);
}

.sgq-card__title a { color: var(--sq-ink); text-decoration: none; }
.sgq-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sgq-card__excerpt {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
	max-inline-size: 78ch;
}

.sgq-card__product {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--sq-t-p3);
}

.sgq-card__product svg { inline-size: 15px; block-size: 15px; color: var(--sq-muted); }

.sgq-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--sq-line);
}

.sgq-card__stats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	color: var(--sq-muted);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
}

.sgq-card__stat.is-zero { color: var(--sq-badge); }

/* ─── Status pills ─────────────────────────────────────────────────────────
   Symbol plus the written label, always. Colour is never the only signal. */

.sgq-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-block-size: 26px;
	padding-inline: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
}

.sgq-pill svg { inline-size: 14px; block-size: 14px; }

.sgq-pill--accepted { background: var(--wp--preset--color--verified-bg); color: var(--sq-good); }
.sgq-pill--answered { background: var(--sq-soft); color: var(--sq-ink); }
.sgq-pill--open { background: var(--sq-soft); color: var(--sq-muted); }
.sgq-pill--closed { background: var(--wp--preset--color--stale-bg); color: var(--sq-stale); }
.sgq-pill--pending { background: var(--wp--preset--color--caution-bg); color: var(--sq-caution); }

/* ─── Author line and badges ───────────────────────────────────────────────*/

.sgq-author { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }

.sgq-avatar {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sq-soft);
}

/* The image fills the circle exactly, so no face is ever cropped off-centre. */
.sgq-avatar img,
.sgq-avatar .sgq-avatar__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.sgq-avatar--letter {
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
}

.sgq-author__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sgq-author__name { font-weight: var(--sq-w-semibold); }

.sgq-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-inline: var(--wp--preset--spacing--20);
	min-block-size: 24px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
}

.sgq-badge svg { inline-size: 13px; block-size: 13px; }

.sgq-badge--staff { background: var(--sq-ink); color: var(--sq-paper); }
.sgq-badge--creator { background: var(--wp--preset--color--verified-bg); color: var(--sq-good); }
.sgq-badge--expert { background: var(--wp--preset--color--stale-bg); color: var(--sq-stale); }

.sgq-author__expertise,
.sgq-author__maker {
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
}

.sgq-author__maker { font-weight: var(--sq-w-semibold); color: var(--sq-ink); }

/* ─── Empty and notice states ──────────────────────────────────────────────*/

.sgq-empty {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border: 1px dashed var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-soft);
}

.sgq-empty--page { margin-block: var(--wp--preset--spacing--80); }
.sgq-empty--inline { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }

.sgq-empty__icon { inline-size: 26px; block-size: 26px; color: var(--sq-muted); }

.sgq-empty__title {
	margin: 0;
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h4);
}

.sgq-empty__lead {
	margin: 0;
	max-inline-size: 62ch;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

.sgq-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.sgq-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

.sgq-notice svg { inline-size: 17px; block-size: 17px; flex: 0 0 17px; margin-block-start: 2px; }

.sgq-notice--ok { background: var(--wp--preset--color--verified-bg); border-color: var(--sq-good); color: var(--sq-good); }
.sgq-notice--bad { background: var(--wp--preset--color--critical-bg); border-color: var(--sq-critical); color: var(--sq-critical); }
.sgq-notice--pending { background: var(--wp--preset--color--caution-bg); border-color: var(--sq-caution); color: var(--sq-caution); }

.sgq-disclaimer {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--sq-line);
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

.sgq-disclaimer p { margin: 0 0 var(--wp--preset--spacing--20); max-inline-size: 78ch; }
.sgq-disclaimer svg { inline-size: 15px; block-size: 15px; margin-inline-end: 6px; vertical-align: -2px; }

/* ─── Pagination ───────────────────────────────────────────────────────────*/

.sgq-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

.sgq-pages__step {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-decoration: none;
}

.sgq-pages__step:hover { border-color: var(--sq-ink); }
.sgq-pages__step svg { inline-size: 15px; block-size: 15px; }
.sgq-pages__of { color: var(--sq-muted); font-family: var(--sq-font-mono); font-size: var(--sq-t-eyebrow); }

/* ─── Single question ──────────────────────────────────────────────────────*/

.sgq-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
}

.sgq-crumbs a { color: var(--sq-muted); text-decoration: none; }
.sgq-crumbs a:hover { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 3px; }
.sgq-crumbs svg { inline-size: 13px; block-size: 13px; }

.sgq-single__head { padding-block-end: var(--wp--preset--spacing--40); }

.sgq-single__title {
	margin: var(--wp--preset--spacing--30) 0;
	font-size: var(--sq-t-h2);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h2);
	letter-spacing: var(--sq-ls-h2);
	text-wrap: balance;
	max-inline-size: 28ch;
}

.sgq-single__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--sq-line);
}

.sgq-single__dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	color: var(--sq-muted);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
}

.sgq-single__layout { display: grid; gap: var(--wp--preset--spacing--60); }

/* ─── Body copy ────────────────────────────────────────────────────────────*/

.sgq-body {
	margin-block: var(--wp--preset--spacing--40);
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-body);
}

.sgq-body p { margin: 0 0 var(--wp--preset--spacing--30); max-inline-size: 72ch; }
.sgq-body a { color: var(--wp--preset--color--brand); text-underline-offset: 3px; }

.sgq-body code {
	padding: 2px 5px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-soft);
	font-family: var(--sq-font-mono);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

/*
 * A code block scrolls inside its own box. A long line of CSS must never be the reason a
 * phone can be swiped sideways.
 */
.sgq-code {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	background: var(--sq-soft);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sgq-code code {
	padding: 0;
	background: transparent;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	white-space: pre;
	tab-size: 2;
}

.sgq-mention { color: var(--wp--preset--color--brand); font-weight: var(--sq-w-medium); }

.sgq-detail {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	background: var(--sq-soft);
}

.sgq-detail dt {
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
}

.sgq-detail dd { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }
.sgq-detail dd:last-child { margin-block-end: 0; }

.sgq-body__site { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); font-size: var(--sq-t-p3); }
.sgq-body__site svg { inline-size: 15px; block-size: 15px; color: var(--sq-muted); }

.sgq-shots {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}

.sgq-shots img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
}

.sgq-closed {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-stale);
	border-radius: var(--sgq-radius);
	background: var(--wp--preset--color--stale-bg);
	color: var(--sq-stale);
}

.sgq-closed svg { inline-size: 18px; block-size: 18px; flex: 0 0 18px; }
.sgq-closed p { margin: 0 0 var(--wp--preset--spacing--10); font-size: var(--sq-t-p3); }
.sgq-closed__title { font-weight: var(--sq-w-semibold); }
.sgq-closed a { color: inherit; }

/* ─── Actions ──────────────────────────────────────────────────────────────*/

.sgq-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--sq-line);
}

.sgq-actions__note { margin: 0; color: var(--sq-muted); font-size: var(--sq-t-p3); }

.sgq-action {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	cursor: pointer;
	list-style: none;
}

.sgq-action::-webkit-details-marker { display: none; }
.sgq-action:hover { border-color: var(--sq-ink); }
.sgq-action svg { inline-size: 15px; block-size: 15px; }
.sgq-action.is-on { background: var(--sq-ink); border-color: var(--sq-ink); color: var(--sq-paper); }
.sgq-action--accept { border-color: var(--sq-good); color: var(--sq-good); }
.sgq-action--report { color: var(--sq-muted); }
.sgq-action__count { font-family: var(--sq-font-mono); font-size: var(--sq-t-eyebrow); }

.sgq-inline { display: inline-block; }
.sgq-inline .sgq-form--inline { margin-block-start: var(--wp--preset--spacing--20); }

/* ─── Answers ──────────────────────────────────────────────────────────────*/

.sgq-answers { margin-block-start: var(--wp--preset--spacing--50); }

.sgq-answers__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--sq-t-h3);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h3);
}

.sgq-answers__list { list-style: none; display: grid; gap: var(--sgq-gap); margin: 0; padding: 0; }

.sgq-answer {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}

.sgq-answer.is-accepted { border-color: var(--sq-good); border-inline-start-width: 3px; }

.sgq-answer__accepted {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--sq-good);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
}

.sgq-answer__accepted svg { inline-size: 16px; block-size: 16px; }

.sgq-answer__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.sgq-answer__dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	color: var(--sq-muted);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
}

.sgq-answer__edited,
.sgq-answer__staff { color: var(--sq-ink); font-weight: var(--sq-w-semibold); }

.sgq-answer__disclosure {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-caution);
	border-radius: var(--sgq-radius);
	background: var(--wp--preset--color--caution-bg);
	color: var(--sq-caution);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sgq-answer__disclosure svg { inline-size: 16px; block-size: 16px; flex: 0 0 16px; margin-block-start: 1px; }

.sgq-answer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--sq-line);
}

.sgq-answer__helpful { margin: 0; color: var(--sq-muted); font-size: var(--sq-t-p3); }

/* ─── Forms ────────────────────────────────────────────────────────────────*/

.sgq-ask__head { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40); }

.sgq-form { display: grid; gap: var(--wp--preset--spacing--40); max-inline-size: 46rem; }
.sgq-form--inline { max-inline-size: 34rem; gap: var(--wp--preset--spacing--20); }

.sgq-form__context {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	background: var(--sq-soft);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
}

.sgq-form__context svg { inline-size: 16px; block-size: 16px; flex: 0 0 16px; margin-block-start: 2px; }

.sgq-row { display: grid; gap: var(--wp--preset--spacing--40); }

.sgq-field { display: grid; gap: var(--wp--preset--spacing--20); }

.sgq-field__label { font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); }

.sgq-field__help {
	margin: 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
	max-inline-size: 62ch;
}

.sgq-field__error { margin: 0; color: var(--sq-critical); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-semibold); }

.sgq-input {
	inline-size: 100%;
	min-block-size: 46px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

.sgq-textarea { min-block-size: 9rem; resize: vertical; }

.sgq-field.has-error .sgq-input,
.sgq-check.has-error { border-color: var(--sq-critical); }

.sgq-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--wp--preset--spacing--20); }

.sgq-check {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	min-block-size: 44px;
	padding: var(--wp--preset--spacing--20);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	cursor: pointer;
}

.sgq-check input { margin-block-start: 3px; inline-size: 18px; block-size: 18px; flex: 0 0 18px; }

.sgq-consent { display: grid; gap: var(--wp--preset--spacing--20); }

.sgq-more summary {
	min-block-size: 44px;
	display: flex;
	align-items: center;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	cursor: pointer;
}

.sgq-more[open] summary { color: var(--sq-ink); font-weight: var(--sq-w-semibold); }

.sgq-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); margin: 0; }
.sgq-form__note { color: var(--sq-muted); font-size: var(--sq-t-eyebrow); max-inline-size: 40ch; }

/* The decoy. Off-screen rather than display:none, which some bots skip. */
.sgq-trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sgq-answerbox {
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-soft);
}

.sgq-answerbox--closed { padding: var(--wp--preset--spacing--40); }
.sgq-answerbox--closed p { margin: 0; color: var(--sq-muted); font-size: var(--sq-t-p3); }

.sgq-answerbox__title { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--sq-t-h4); font-weight: var(--sq-w-semibold); }
.sgq-answerbox__lead { margin: 0 0 var(--wp--preset--spacing--40); color: var(--sq-muted); font-size: var(--sq-t-p3); max-inline-size: 62ch; }

/* ─── Duplicate suggestions ────────────────────────────────────────────────*/

.sgq-suggest {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-caution);
	border-radius: var(--sgq-radius);
	background: var(--wp--preset--color--caution-bg);
}

.sgq-suggest__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--sq-caution);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
}

.sgq-suggest__title svg { inline-size: 16px; block-size: 16px; }

.sgq-suggest__list { list-style: none; display: grid; gap: var(--wp--preset--spacing--20); margin: 0 0 var(--wp--preset--spacing--30); padding: 0; }

.sgq-suggest__list a {
	display: block;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
	text-underline-offset: 3px;
}

.sgq-suggest__meta { display: block; color: var(--sq-caution); font-family: var(--sq-font-mono); font-size: var(--sq-t-eyebrow); }
.sgq-suggest__note { margin: 0; color: var(--sq-caution); font-size: var(--sq-t-eyebrow); }

/* ─── Sidebar ──────────────────────────────────────────────────────────────*/

.sgq-single__side { display: grid; gap: var(--sgq-gap); align-content: start; }

.sgq-side {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}

.sgq-side--experts { background: var(--sq-soft); }

.sgq-side__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--sq-t-p2);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h4);
}

.sgq-side__lead { margin: 0 0 var(--wp--preset--spacing--30); color: var(--sq-muted); font-size: var(--sq-t-p3); }

.sgq-side__list { list-style: none; display: grid; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; }

.sgq-side__link {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	min-block-size: 40px;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	text-decoration: none;
}

.sgq-side__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgq-side__link svg { inline-size: 15px; block-size: 15px; flex: 0 0 15px; margin-block-start: 3px; color: var(--sq-muted); }

.sgq-side__note {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	line-height: var(--sq-lh-supporting);
}

/* ─── Product page section ─────────────────────────────────────────────────*/

.sgq-product {
	margin-block: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	font-family: var(--sq-font-sans);
	color: var(--sq-ink);
}

.sgq-product__title { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--sq-t-h4); font-weight: var(--sq-w-semibold); }
.sgq-product__lead { margin: 0 0 var(--wp--preset--spacing--40); color: var(--sq-muted); font-size: var(--sq-t-p3); max-inline-size: 62ch; }
.sgq-product__list { list-style: none; display: grid; gap: var(--wp--preset--spacing--20); margin: 0 0 var(--wp--preset--spacing--40); padding: 0; }

.sgq-product__q {
	display: grid;
	gap: 4px;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--sgq-radius);
	color: var(--sq-ink);
	text-decoration: none;
}

.sgq-product__q:hover { border-color: var(--sq-ink); }
.sgq-product__q-title { font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); }
.sgq-product__q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); color: var(--sq-muted); font-family: var(--sq-font-mono); font-size: var(--sq-t-eyebrow); }
.sgq-product__empty { margin: 0 0 var(--wp--preset--spacing--40); color: var(--sq-muted); font-size: var(--sq-t-p3); }
.sgq-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); margin: 0; }
.sgq-product__all { color: var(--sq-muted); font-size: var(--sq-t-p3); text-underline-offset: 3px; }

/* ─── Guidelines ───────────────────────────────────────────────────────────*/

.sgq-guide { margin-block: var(--wp--preset--spacing--50); }

.sgq-guide__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h4);
}

.sgq-guide__list { display: grid; gap: var(--wp--preset--spacing--20); margin: 0; padding-inline-start: 1.2em; max-inline-size: 72ch; }
.sgq-guide__list li { font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }
.sgq-guidelines__foot { margin-block-start: var(--wp--preset--spacing--60); }

/* ─── Focus ────────────────────────────────────────────────────────────────
   Visible on every interactive element, and never removed without replacement. */

.sgq a:focus-visible,
.sgq button:focus-visible,
.sgq summary:focus-visible,
.sgq input:focus-visible,
.sgq select:focus-visible,
.sgq textarea:focus-visible,
.sgq-product a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

@media (prefers-reduced-motion: reduce) {
	.sgq *,
	.sgq-product * { transition: none !important; animation: none !important; }
}

/* ─── Breakpoints ──────────────────────────────────────────────────────────*/

@media (min-width: 640px) {
	.sgq-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.sgq-hero__title { font-size: var(--sq-t-h1); line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); }
	.sgq-single__title { font-size: var(--sq-t-h1); line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); }

	/*
	 * The sidebar arrives here and not before. Below 900px the recommendations sit under the
	 * answers, which is also their DOM order — so the reading order and the visual order agree
	 * at every width and nothing has to be reordered for a screen reader.
	 */
	.sgq-single__layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ─── Dark ─────────────────────────────────────────────────────────────────
   Only the tokens with no dark counterpart in the palette need a rule here.
   `accent` is a deep ink-indigo, which is unreadable on a near-black ground;
   `brand` carries the same job in dark, where it has the contrast for it. */

html[data-sq-theme="dark"] .sgq .sgp-btn--primary {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--canvas);
}

html[data-sq-theme="dark"] .sgq-body a,
html[data-sq-theme="dark"] .sgq-mention { color: var(--wp--preset--color--brand-soft); }

html[data-sq-theme="dark"] .sgq a:focus-visible,
html[data-sq-theme="dark"] .sgq button:focus-visible,
html[data-sq-theme="dark"] .sgq summary:focus-visible,
html[data-sq-theme="dark"] .sgq input:focus-visible,
html[data-sq-theme="dark"] .sgq select:focus-visible,
html[data-sq-theme="dark"] .sgq textarea:focus-visible { outline-color: var(--wp--preset--color--brand-soft); }

/*
 * The tinted state grounds are light-mode values, so in dark they are re-expressed as the
 * state colour mixed into the surface. `color-mix` over two tokens is still tokens — see
 * tools/scan-literal-colours.php.
 */
html[data-sq-theme="dark"] .sgq-pill--accepted,
html[data-sq-theme="dark"] .sgq-notice--ok { background: color-mix(in srgb, var(--sq-good) 18%, var(--sq-sheet)); color: var(--sq-good); }

html[data-sq-theme="dark"] .sgq-pill--pending,
html[data-sq-theme="dark"] .sgq-notice--pending,
html[data-sq-theme="dark"] .sgq-answer__disclosure,
html[data-sq-theme="dark"] .sgq-suggest { background: color-mix(in srgb, var(--sq-caution) 18%, var(--sq-sheet)); color: var(--sq-caution); }

html[data-sq-theme="dark"] .sgq-notice--bad { background: color-mix(in srgb, var(--sq-critical) 18%, var(--sq-sheet)); color: var(--sq-critical); }

html[data-sq-theme="dark"] .sgq-pill--closed,
html[data-sq-theme="dark"] .sgq-closed,
html[data-sq-theme="dark"] .sgq-badge--expert { background: color-mix(in srgb, var(--sq-stale) 22%, var(--sq-sheet)); color: var(--sq-stale); }

html[data-sq-theme="dark"] .sgq-badge--creator { background: color-mix(in srgb, var(--sq-good) 20%, var(--sq-sheet)); color: var(--sq-good); }

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC COMMUNITY ADDITIONS
   Homepage hub, category/platform landing pages, account screens, and the
   on-site notification feed. Same rules as above: semantic `--sq-*` tokens
   only, so this needs no dark-mode block of its own — the remap in
   components.css does the work. One column until 900px, matching the rest
   of this file, so there is nothing further to test at in-between widths.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Small shared primitives used across the new screens ─────────────────── */

.sgq-h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--sq-t-h3);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h3);
	letter-spacing: var(--sq-ls-h3);
}

.sgq-h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h4);
}

.sgq-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--brand);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
}

.sgq-req { color: var(--sq-danger, #b3261e); }

.sgq-empty--compact {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
}

.sgq-select select,
.sgq-select { font-size: var(--sq-t-p3); }
.sgq-select select {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-sheet);
	color: var(--sq-ink);
}

.sgq-checks { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.sgq-checks--stack { flex-direction: column; gap: var(--wp--preset--spacing--20); }

.sgq-list--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sgq-gap, var(--wp--preset--spacing--40));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */

.sgq-crumbs { margin: 0 0 var(--wp--preset--spacing--40); }
.sgq-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
}
.sgq-crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: var(--wp--preset--spacing--10); color: var(--sq-line); }
.sgq-crumbs a { color: var(--sq-muted); text-decoration: none; }
.sgq-crumbs a:hover { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 3px; }
.sgq-crumbs [aria-current="page"] { color: var(--sq-ink); font-weight: var(--sq-w-medium); }

/* ─── Homepage hub ───────────────────────────────────────────────────────── */

.sgq-hub__hero {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--sq-line);
}

.sgq-hub__search {
	display: flex;
	max-inline-size: 480px;
	margin: var(--wp--preset--spacing--40) 0;
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-sheet);
	overflow: hidden;
}
.sgq-hub__search input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 0;
	background: transparent;
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
}
.sgq-hub__search input:focus-visible { outline: none; }
.sgq-hub__search button {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 44px;
	border: 0;
	border-inline-start: 1px solid var(--sq-line);
	background: transparent;
	color: var(--sq-muted);
	cursor: pointer;
}
.sgq-hub__search button:hover { color: var(--sq-ink); }

.sgq-hub__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sgq-hub__stats {
	margin: 0;
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
}

.sgq-hub__groups,
.sgq-hub__platforms,
.sgq-hub__columns,
.sgq-hub__popular,
.sgq-hub__editorial,
.sgq-hub__experts { padding-block: var(--wp--preset--spacing--60); border-block-end: 1px solid var(--sq-line); }

.sgq-groupgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sgq-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgq-groupcard {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
}
.sgq-groupcard__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-semibold);
}
.sgq-groupcard__title a { color: var(--sq-ink); text-decoration: none; }
.sgq-groupcard__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgq-groupcard__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sq-t-p3);
}
.sgq-groupcard__list a { color: var(--sq-muted); text-decoration: none; }
.sgq-groupcard__list a:hover { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 3px; }

.sgq-hub__viewall {
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}
.sgq-hub__viewall:hover { color: var(--sq-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Compact platform panel: a sized grid of chips, not a full-width row a
   near-empty platform can dominate. */
.sgq-platgrid--compact {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) 0 0;
}
.sgq-platchip {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	text-decoration: none;
}
.sgq-platchip:hover { border-color: var(--sq-ink); }
.sgq-platchip__name { font-weight: var(--sq-w-medium); font-size: var(--sq-t-p3); }
.sgq-platchip__count { color: var(--sq-muted); font-size: var(--sq-t-eyebrow); font-family: var(--sq-font-mono); }

.sgq-hub__colgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sgq-gap);
	margin: var(--wp--preset--spacing--40) 0 0;
}
.sgq-hub__colhead {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--sq-t-p2);
	font-weight: var(--sq-w-semibold);
}
.sgq-hub__collist { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
.sgq-hub__rowlink {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}
.sgq-hub__rowlink:hover .sgq-hub__rowtitle { text-decoration: underline; text-underline-offset: 3px; }
.sgq-hub__rowtitle { flex: 1 1 auto; min-inline-size: 0; }
.sgq-hub__rowcount { color: var(--sq-muted); font-size: var(--sq-t-eyebrow); font-family: var(--sq-font-mono); white-space: nowrap; }

.sgq-hub__editorial-note { margin: 0 0 var(--wp--preset--spacing--30); color: var(--sq-muted); font-size: var(--sq-t-p3); }

.sgq-hub__foot { margin: var(--wp--preset--spacing--50) 0 0; font-size: var(--sq-t-p3); }
.sgq-hub__foot a { color: var(--sq-muted); }

@media (max-width: 900px) {
	.sgq-groupgrid,
	.sgq-hub__colgrid { grid-template-columns: 1fr; }
	.sgq-platgrid--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ─── Category and platform landing pages ───────────────────────────────── */

.sgq-cat__head,
.sgq-plat .sgq-cat__head {
	padding-block-end: var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--sq-line);
}

.sgq-cat__counts { margin: 0 0 var(--wp--preset--spacing--30); color: var(--sq-muted); font-size: var(--sq-t-p3); }

.sgq-cat__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.sgq-cat__subs,
.sgq-cat__list,
.sgq-cat__solved { padding-block: var(--wp--preset--spacing--50); border-block-end: 1px solid var(--sq-line); }

.sgq-subgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sgq-subcard {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-sheet);
}
.sgq-subcard a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	color: var(--sq-ink);
	font-weight: var(--sq-w-medium);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}
.sgq-subcard a:hover .sgq-subcard__name { text-decoration: underline; text-underline-offset: 3px; }
.sgq-subcard__count { color: var(--sq-muted); font-family: var(--sq-font-mono); font-size: var(--sq-t-eyebrow); white-space: nowrap; }
.sgq-subcard__desc { margin: var(--wp--preset--spacing--10) 0 0; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); }

.sgq-cat__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sgq-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.sgq-chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); }
.sgq-chip.sgq-chip--wide { padding-inline: var(--wp--preset--spacing--30); } /* reserved for future use */
a.sgq-chip.is-on,
.sgq-chip.is-on { background: var(--sq-ink); border-color: var(--sq-ink); color: var(--wp--preset--color--base, #fff); }

.sgq-solvedlist { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--30) 0 0; padding: 0; list-style: none; }
.sgq-solvedlist a { color: var(--sq-ink); font-size: var(--sq-t-p3); text-decoration: none; }
.sgq-solvedlist a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sgq-cat__foot { margin: var(--wp--preset--spacing--40) 0 0; font-size: var(--sq-t-p3); }

.sgq-follow button { font: inherit; }

.sgq-pager { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); margin: var(--wp--preset--spacing--40) 0 0; }
.sgq-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 36px;
	min-block-size: 36px;
	padding-inline: var(--wp--preset--spacing--10);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}
.sgq-pager__link:hover { border-color: var(--sq-ink); }
.sgq-pager__link.is-current { background: var(--sq-ink); border-color: var(--sq-ink); color: var(--wp--preset--color--base, #fff); }

.sgq-plat .sgq-cat__head { border-block-end: 1px solid var(--sq-line); }

@media (max-width: 900px) {
	.sgq-cat__bar { flex-direction: column; align-items: stretch; }
	.sgq-controls { justify-content: space-between; }
	.sgq-subgrid { grid-template-columns: 1fr; }
}

/* ─── Account screens: join, sign in, and the signed-in tabs ────────────── */

.sgq-auth { max-inline-size: 480px; margin-inline: auto; padding-block: var(--wp--preset--spacing--70); }
.sgq-account { max-inline-size: 760px; padding-block: var(--wp--preset--spacing--70); }

.sgq-form--auth .sgq-field { margin-block-end: var(--wp--preset--spacing--30); }

.sgq-field--set { border: 0; margin: 0 0 var(--wp--preset--spacing--30); padding: 0; }
.sgq-field--set legend {
	padding: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-medium);
}

.sgq-field--consent { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--40) 0; }

.sgq-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--40); }
.sgq-form__alt { margin: var(--wp--preset--spacing--20) 0 0; color: var(--sq-muted); font-size: var(--sq-t-p3); }
/* :not(.sgp-btn) so a button placed inside this wrapper keeps its own text colour --
   a plain rule here once made a primary button's white text render near-black-on-black. */
.sgq-form__alt a:not(.sgp-btn) { color: var(--sq-ink); }

.sgq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
	padding-block-end: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--sq-line);
}
.sgq-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--sq-muted);
	font-size: var(--sq-t-p3);
	text-decoration: none;
}
.sgq-tab:hover { color: var(--sq-ink); }
.sgq-tab.is-current { background: var(--sq-soft); color: var(--sq-ink); font-weight: var(--sq-w-medium); }
.sgq-tab__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 5px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base, #fff);
	font-size: 11px;
	font-weight: var(--sq-w-semibold);
	line-height: 1;
}

.sgq-summary { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--60); margin: 0 0 var(--wp--preset--spacing--40); padding: 0; }
.sgq-summary dt { margin: 0 0 4px; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); text-transform: uppercase; letter-spacing: var(--sq-ls-eyebrow); }
.sgq-summary dd { margin: 0; font-size: var(--sq-t-p2); }

.sgq-signout { margin-block-start: var(--wp--preset--spacing--60); }

.sgq-activity { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: 0 0 var(--wp--preset--spacing--50); padding: 0; list-style: none; }
.sgq-activity__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	border-block-end: 1px solid var(--sq-line);
	font-size: var(--sq-t-p3);
}
.sgq-activity__status {
	flex: 0 0 auto;
	padding: 2px var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-soft);
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	text-transform: uppercase;
}
.sgq-activity__status--publish { background: color-mix(in srgb, var(--sq-good) 16%, var(--sq-sheet)); color: var(--sq-good); }
.sgq-activity__title { flex: 1 1 auto; min-inline-size: 0; }
.sgq-activity__title a { color: var(--sq-ink); text-decoration: none; }
.sgq-activity__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgq-activity time { color: var(--sq-muted); white-space: nowrap; }

/* ─── On-site notification feed ──────────────────────────────────────────── */

.sgq-notifications { margin-block-end: var(--wp--preset--spacing--60); }
.sgq-notif-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.sgq-notif {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	border-block-end: 1px solid var(--sq-line);
	font-size: var(--sq-t-p3);
}
.sgq-notif.is-unread { font-weight: var(--sq-w-medium); }
.sgq-notif a { color: var(--sq-ink); text-decoration: none; }
.sgq-notif a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgq-notif time { color: var(--sq-muted); font-size: var(--sq-t-eyebrow); white-space: nowrap; }

@media (max-width: 900px) {
	.sgq-summary { gap: var(--wp--preset--spacing--30); }
	.sgq-notif,
	.sgq-activity__row { flex-direction: column; align-items: flex-start; }
}

/* ─── Formatted answer body: lists and blockquotes ───────────────────────── */

.sgq-list-block { margin: 0 0 var(--wp--preset--spacing--20); padding-inline-start: 1.4em; color: var(--sq-ink); }
.sgq-list-block li { margin-block-end: var(--wp--preset--spacing--10); }
.sgq-quote {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--20);
	border-inline-start: 3px solid var(--sq-line);
	color: var(--sq-muted);
	font-style: italic;
}

/* ─── Answer editor: Write/Preview tabs and draft status ─────────────────── */

.sgq-editor__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

.sgq-editor__tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--wp--custom--radius--sm); background: var(--sq-soft); }
.sgq-editor__tab {
	padding: 4px var(--wp--preset--spacing--20);
	border: 0;
	border-radius: calc(var(--wp--custom--radius--sm) - 2px);
	background: transparent;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-medium);
	cursor: pointer;
}
.sgq-editor__tab.is-active { background: var(--sq-sheet); color: var(--sq-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

.sgq-editor__preview {
	min-block-size: 8em;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--sq-sheet);
}

.sgq-editor__status {
	margin: var(--wp--preset--spacing--10) 0 0;
	min-block-size: 1.2em;
	color: var(--sq-muted);
	font-size: var(--sq-t-eyebrow);
}

/* ─── All Activity feed ──────────────────────────────────────────────────── */

.sgq-activity-page .sgq-controls { margin: 0 0 var(--wp--preset--spacing--50); padding-block-end: var(--wp--preset--spacing--40); border-block-end: 1px solid var(--sq-line); }

.sgq-activity-feed { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.sgq-activity-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	border-block-end: 1px solid var(--sq-line);
}
.sgq-activity-item a { flex: 1 1 auto; min-inline-size: 0; color: var(--sq-ink); text-decoration: none; }
.sgq-activity-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sgq-activity-item time { color: var(--sq-muted); font-size: var(--sq-t-eyebrow); white-space: nowrap; }
.sgq-chip--activity { background: transparent; border-color: var(--sq-badge); font-family: var(--sq-font-mono); text-transform: none; }

@media (max-width: 900px) {
	.sgq-activity-item { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--10); }
}

/* ─── Category page: relevant products, guides and experts ──────────────── */

.sgq-cat__relevant { padding-block: var(--wp--preset--spacing--50); border-block-end: 1px solid var(--sq-line); }
.sgq-relevant__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sgq-gap);
	margin: var(--wp--preset--spacing--30) 0 0;
}