/* Glen Abbey Rulebook — mobile-first layout layer.
   Loaded AFTER styles.css so the un-mediaed rules here are the MOBILE base;
   min-width queries scale up from there. Never add max-width queries to this
   file — that inverts the cascade and reintroduces desktop-first thinking.

   Breakpoints: 480 (large phone) · 768 (tablet) · 1024 (desktop) */

/* ---------- 1. Token scale: phone values are the base ---------- */
:root {
	--text-display-1: 30px;
	--lh-display-1: 1.15;
	--text-display-2: 24px;
	--lh-display-2: 1.2;
	--text-title: 20px;
	--text-subtitle: 18px;
	--text-lead: 17px;
	--gutter-page: 16px;
}

@media (min-width: 480px) {
	:root {
		--text-display-1: 34px;
		--text-display-2: 27px;
		--gutter-page: 20px;
	}
}

@media (min-width: 768px) {
	:root {
		--text-display-1: 38px;
		--lh-display-1: 1.1;
		--text-display-2: 30px;
		--lh-display-2: 1.16;
		--text-title: 23px;
		--text-subtitle: 19px;
		--text-lead: 18px;
		--gutter-page: 24px;
	}
}

@media (min-width: 1024px) {
	:root {
		--text-display-1: 44px;
		--lh-display-1: 1.08;
		--text-display-2: 34px;
		--lh-display-2: 1.14;
		--text-title: 26px;
		--text-subtitle: 20px;
		--text-lead: 19px;
	}
}

/* ---------- 2. Page-level guards ---------- */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: hidden;
}

/* Long unbroken strings (URLs, emails, doc names) must not force a sideways
   scroll on a narrow screen. */
h1,
h2,
h3,
h4,
p,
a,
li,
blockquote {
	overflow-wrap: break-word;
}

/* Anything genuinely wide scrolls inside its own box, never the page. */
pre,
table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* iOS zooms the page when a focused input is under 16px. Never let that happen. */
input,
select,
textarea {
	font-size: max(16px, 1em);
}

/* ---------- 3. Detail layouts (content + sidebar) ----------
   Used by RuleScreen and FileRequestScreen. On a phone the sidebar
   is NOT a sidebar — it stacks under the content it supports. */
.ga-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}

.ga-detail > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.ga-detail {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--space-10);
	}
}

/* The support rail only sticks once there's a real viewport to stick within.
   A sticky element on a phone just eats the screen. */
.ga-detail-aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.ga-detail-aside {
		position: sticky;
		top: 88px;
	}
}

/* ---------- 4. Topic tile grid ---------- */
.ga-tile-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}

.ga-tile-grid > * {
	min-width: 0;
}

/* Two columns as early as the layout allows. At one column the ten topic tiles
   dominate the home page on a phone, which is the screen most of this site is
   read on. */
@media (min-width: 380px) {
	.ga-tile-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 480px) {
	.ga-tile-grid {
		gap: var(--space-4);
	}
}

@media (min-width: 768px) {
	.ga-tile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ga-tile-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- 5. Home split (feature list + callout rail) ---------- */
.ga-home-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}

.ga-home-split > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.ga-home-split {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-8);
	}
}

/* The rail is nudged down to clear the section heading on desktop only —
   on mobile that padding is just a gap in the middle of the page. */
.ga-home-rail {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: 0;
}

@media (min-width: 1024px) {
	.ga-home-rail {
		padding-top: 52px;
	}
}

/* ---------- 6. Hero ---------- */
.ga-hero {
	background: var(--surface-inverse);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-8) var(--space-5);
	margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
	.ga-hero {
		padding: var(--space-12) var(--space-8);
		margin-bottom: var(--space-10);
	}
}

@media (min-width: 1024px) {
	.ga-hero {
		padding: var(--space-16) var(--space-12);
		margin-bottom: var(--space-12);
	}
}

.ga-hero-inner {
	max-width: 640px;
}

/* ---------- 7. Filter bar ---------- */
/* The "Hide summaries" switch is pushed right on desktop; on a phone that
   creates an awkward orphan, so it wraps onto its own line instead. */
.ga-filterbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--space-6);
}

.ga-filterbar-end {
	margin-left: 0;
	width: 100%;
}

@media (min-width: 768px) {
	.ga-filterbar-end {
		margin-left: auto;
		width: auto;
	}
}

/* ---------- 8. Site header ---------- */
.ga-header-inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	width: 100%;
	/* Wider than --width-page on purpose: nav + search + CTA need more room
	   than the reading column does. */
	max-width: calc(var(--width-page) + 160px);
	margin: 0 auto;
	padding: var(--space-3) var(--gutter-page);
}

/* Desktop nav and the compact search are hidden on phones; the menu button
   takes over. Both are display:none rather than visually-hidden so they are
   removed from the tab order too. */
.ga-nav-desktop,
.ga-header-search {
	display: none;
}

@media (min-width: 1024px) {
	.ga-nav-desktop {
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.ga-header-search {
		display: block;
		flex: 0 1 220px;
		min-width: 140px;
		margin-left: auto;
	}
}

/* The "Official HOA site" CTA moves into the mobile menu rather than
   competing with the logo for a phone's header width. */
.ga-header-cta {
	display: none;
}

@media (min-width: 1024px) {
	.ga-header-cta {
		display: inline-flex;
		flex-shrink: 0;
	}
}

.ga-menu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-left: auto;
	min-height: 44px;
	min-width: 44px;
	padding: 0 12px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

.ga-menu-button:hover {
	background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
	.ga-menu-button {
		display: none;
	}
}

/* Mobile menu panel */
.ga-mobile-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3) var(--gutter-page) var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 1024px) {
	.ga-mobile-menu {
		display: none;
	}
}

.ga-mobile-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 4px;
	color: #fff;
	text-decoration: none;
	font-size: var(--text-body-md);
	font-weight: var(--weight-medium);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ga-mobile-menu a[aria-current="page"] {
	color: var(--green-300, #9ec8a8);
	font-weight: var(--weight-semibold);
}

.ga-mobile-menu-search {
	padding: var(--space-3) var(--gutter-page) 0;
}

@media (min-width: 1024px) {
	.ga-mobile-menu-search {
		display: none;
	}
}

/* ---------- 9. Site footer ---------- */
.ga-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

.ga-footer-grid > * {
	min-width: 0;
}

@media (min-width: 640px) {
	.ga-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.ga-footer-grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* ---------- 10. Touch targets ----------
   Pointer-coarse only: keeps desktop density intact while guaranteeing every
   interactive control clears the 44px minimum on a touchscreen. */
@media (pointer: coarse) {
	button,
	[role="button"],
	a.ga-tap,
	.ga-mobile-menu a {
		min-height: 44px;
	}

	/* Raising min-height without re-centering leaves the label sitting off-axis
	   inside the taller box — most visible on verdict pills and the active-topic
	   filter tag, whose text drifts up and left of centre. Only correct controls
	   that are not already laying themselves out. */
	button:not([class*="flex"]),
	[role="button"]:not([class*="flex"]) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---------- 11. Print ---------- */
@media print {
	.ga-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	.ga-detail-aside,
	.ga-menu-button,
	.ga-mobile-menu,
	.ga-nav-desktop,
	.ga-header-search {
		display: none !important;
	}

	/* Print every tab, not just the one on screen. RuleScreen renders all three
	   panels and marks the inactive ones `hidden` precisely so this rule can
	   reveal them — a panel React never mounted cannot be unhidden by CSS. A
	   resident printing an answer wants the covenant text and the filing steps
	   with it; those are the parts you take to the office. `[hidden]` is
	   display:none in the UA sheet, so this needs !important to win. */
	.ga-tabpanel[hidden] {
		display: block !important;
	}

	/* The tab strip itself is a screen control and means nothing on paper, so
	   each panel gets its own heading in print instead. */
	.ga-tabs,
	[role="tablist"] {
		display: none !important;
	}

	.ga-print-only {
		display: block !important;
		margin: var(--space-6) 0 var(--space-3);
		font-family: var(--font-display);
		font-size: 1.15rem;
		font-weight: 700;
		border-bottom: 1px solid var(--sand-300);
		padding-bottom: 4px;
		break-after: avoid;
	}

	/* Don't split a source card across a page break — a quote severed mid-page
	   is the one thing on this printout someone is holding up as evidence. */
	.ga-tabpanel .ga-card,
	.ga-tabpanel li {
		break-inside: avoid;
	}
}

/* Screen: the per-panel headings exist only for print. */
.ga-print-only {
	display: none;
}

/* ---------- 12. Reference-desk home ----------
   The home page is the question box: answers render in place inside the desk
   card, and everything below the fold is deliberately quiet. Phone-first like
   everything else in this file. */
/* The desk's ask affordance wears the hero's dark green — the site's one dark
   block, same as the page it replaces. It holds only the intro (eyebrow, h1,
   lead, search, tags): the answers used to be a white panel nested inside it,
   which made the green run the full height of the idle desk (arrivals +
   featured rules), reading as a single oversized block. Answers now live in
   .ga-desk-body, a normal card sitting on the page underneath. */
.ga-desk {
	background: var(--surface-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-8) var(--space-5) var(--space-6);
	/* Census taps scrollIntoView the desk; without this the sticky header
	   covers the eyebrow and part of the h1. */
	scroll-margin-top: 76px;
}

@media (min-width: 768px) {
	.ga-desk {
		padding: var(--space-12) var(--space-8);
	}
}

@media (min-width: 1024px) {
	.ga-desk {
		padding: var(--space-16) var(--space-12) var(--space-10);
	}
}

.ga-desk-inner {
	max-width: 720px;
}

.ga-desk-inner > .ga-eyebrow {
	color: var(--green-300);
}

.ga-desk h1 {
	color: #fff;
	margin: 6px 0 10px;
}

.ga-desk-lead {
	font-size: var(--text-lead);
	line-height: var(--lh-lead);
	color: var(--green-100);
	max-width: 56ch;
	margin: 0 0 var(--space-5);
}

.ga-desk-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.ga-desk-tags .ga-try {
	font-size: var(--text-caption);
	color: var(--green-300);
}

/* Once you start asking, the desk clears its throat on a phone — the answer
   has to fit above the keyboard. Wider screens keep the lead and tags. */
.ga-desk.asking .ga-desk-lead,
.ga-desk.asking .ga-desk-tags {
	display: none;
}

@media (min-width: 768px) {
	.ga-desk.asking .ga-desk-lead {
		display: block;
	}

	.ga-desk.asking .ga-desk-tags {
		display: flex;
	}
}

/* A standalone card, not a panel nested in the hero — same reading width as
   the sections below the fold (.ga-below), so the wide hero narrows to a
   normal content column the moment it stops being a search field. */
.ga-desk-body {
	max-width: 840px;
	margin: 20px auto 0;
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 8px 16px 14px;
	min-height: 96px;
}

@media (min-width: 768px) {
	.ga-desk-body {
		margin-top: 24px;
		padding: 12px 24px 18px;
	}
}

.ga-countline {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 14px 0 2px;
}

.ga-countline .ga-cl {
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: var(--text-eyebrow);
	color: var(--text-muted);
}

.ga-cl-clear {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	color: var(--text-link);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}

.ga-cl-clear:hover {
	color: var(--text-link-hover);
}

.ga-idle-eyebrow {
	margin: 18px 0 2px;
}

/* Section 10 re-declares `display`, `align-items` and `justify-content` on
   every button whose class doesn't contain "flex", to centre labels inside
   enlarged touch targets. These two rows lay themselves out and must keep
   doing so — under that rule the answer head became a centred inline-flex
   row, which turned the verdict into a column beside the question and wrapped
   "Do I need approval before making any change to the outside of my house?"
   over six lines on a real phone. Desktop testing at 390px never showed it,
   because pointer:coarse doesn't apply there. Declared unconditionally at two
   classes deep so it outranks `button:not([class*="flex"])` (0,1,1) in every
   pointer mode rather than relying on a matching media query. */
.ga-desk-body .ga-ans-head,
.ga-desk-body .ga-situ-head {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

/* Answer rows — accordion entries whose open body is the rule page in
   miniature. */
.ga-ans {
	border-bottom: 1px solid var(--sand-100);
}

.ga-ans:last-child {
	border-bottom: 0;
}

.ga-ans-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 11px 4px;
	cursor: pointer;
	font-family: var(--font-body);
	transition: background 0.12s cubic-bezier(0.2, 0.6, 0.25, 1);
}

.ga-ans-head:hover {
	background: var(--sand-50);
}

/* Sized off the same token RuleCard's title uses everywhere else on the site
   (TopicsScreen, RuleScreen's related cards) — var(--text-subtitle) — rather
   than a one-off scale invented for this page, so a question reads at the
   same size here as it does anywhere else it appears. */
.ga-ans-q {
	flex: 1;
	min-width: 0;
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	font-size: var(--text-subtitle);
	line-height: var(--lh-subtitle);
	color: var(--text-strong);
	overflow-wrap: break-word;
}

/* The verdict, set into the question's first line. */
.ga-vmark {
	display: inline-block;
	position: relative;
	top: -1px;
	margin-right: 9px;
	padding: 1px 9px 2px;
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	line-height: 1.45;
	white-space: nowrap;
}

.ga-vm-yes {
	color: var(--verdict-yes);
	background: var(--verdict-yes-soft);
}

.ga-vm-ask {
	color: var(--verdict-ask);
	background: var(--verdict-ask-soft);
}

.ga-vm-no {
	color: var(--verdict-no);
	background: var(--verdict-no-soft);
}

.ga-vm-depends {
	color: var(--verdict-depends);
	background: var(--verdict-depends-soft);
}

.ga-chev {
	transition: transform 0.12s cubic-bezier(0.2, 0.6, 0.25, 1);
	color: var(--sand-500);
}

.ga-ans-head .ga-chev {
	margin-top: 4px;
}

.ga-ans.open > .ga-ans-head .ga-chev,
.ga-situ.open > .ga-situ-head .ga-chev {
	transform: rotate(180deg);
}

.ga-ans-body {
	padding: 2px 4px 18px;
}

.ga-ans-body > * + * {
	margin-top: 14px;
}

.ga-sum {
	font-size: var(--text-body-md);
	color: var(--ink-800);
	max-width: var(--measure-prose);
	margin: 0;
}

/* The trap — warm-neutral on purpose. Verdict amber is reserved for verdicts;
   caution here is carried by the mono label and the glyph, not a hue. */
.ga-missed {
	display: flex;
	gap: 10px;
	background: var(--surface-sunken);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	max-width: var(--measure-prose);
}

.ga-missed b {
	display: block;
	font-family: var(--font-mono);
	font-weight: var(--weight-semibold);
	font-size: var(--text-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 2px;
}

.ga-missed p {
	font-size: var(--text-body-sm);
	line-height: var(--lh-body-sm);
	color: var(--text-body);
	margin: 0;
}

.ga-ans-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ga-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	color: var(--text-link);
	text-decoration: none;
}

.ga-more:hover {
	color: var(--text-link-hover);
	text-decoration: underline;
}

.ga-checked {
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: var(--text-eyebrow);
	color: var(--text-muted);
}

.ga-moreline {
	font-size: var(--text-caption);
	color: var(--text-muted);
	padding: 12px 4px;
	margin: 0;
}

/* Arrivals — the two situation rows in the idle desk. */
.ga-situ {
	border-bottom: 1px solid var(--sand-100);
}

.ga-situ-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 11px 4px;
	cursor: pointer;
	font-family: var(--font-body);
	transition: background 0.12s cubic-bezier(0.2, 0.6, 0.25, 1);
}

.ga-situ-head > span:first-of-type,
.ga-situ-head > .ga-chev {
	margin-top: 3px;
}

.ga-situ-head:hover {
	background: var(--sand-50);
}

.ga-situ-t {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ga-situ-q {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	font-size: var(--text-subtitle);
	line-height: var(--lh-subtitle);
	color: var(--text-strong);
}

.ga-situ-sub {
	font-size: var(--text-caption);
	color: var(--text-muted);
	margin-top: 1px;
}

/* The count rides on the sub line: as its own column it stole ~55px from the
   title on a phone, wrapping the question two words in. */
.ga-situ-n {
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: var(--text-eyebrow);
	color: var(--text-muted);
	white-space: nowrap;
}

.ga-situ-n::before {
	content: " · ";
}

.ga-situ-panel {
	padding: 2px 4px 12px;
}

.ga-situ-hint {
	font-size: var(--text-body-sm);
	color: var(--text-muted);
	margin: 0 0 10px;
	max-width: 60ch;
}

.ga-pathchips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}

/* Corpus line + the quiet column below the fold. */
.ga-corpusline {
	max-width: 840px;
	margin: 14px auto 0;
	text-align: center;
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: var(--text-eyebrow);
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

.ga-below {
	max-width: 840px;
	margin: 0 auto;
}

.ga-sec {
	margin-top: var(--space-12);
}

.ga-sec-sub {
	font-size: var(--text-body-sm);
	color: var(--text-muted);
	margin: 2px 0 14px;
	max-width: 60ch;
}

/* Contents — the printed-index apparatus. */
.ga-drule {
	border-top: 3px solid var(--green-900);
}

.ga-drule::after {
	content: "";
	display: block;
	border-top: 1px solid var(--green-900);
	margin-top: 2px;
}

.ga-toc-h {
	font-size: var(--text-subtitle);
	margin: 14px 0 2px;
}

.ga-toc-grid {
	display: grid;
	gap: 2px;
}

@media (min-width: 768px) {
	.ga-toc-grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: column;
		grid-template-rows: repeat(7, auto);
		column-gap: 44px;
	}
}

.ga-toc-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 2px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background 0.12s cubic-bezier(0.2, 0.6, 0.25, 1);
}

.ga-toc-row:hover {
	background: var(--green-50);
}

.ga-toc-no {
	font-family: var(--font-mono);
	font-weight: var(--weight-semibold);
	font-size: var(--text-eyebrow);
	color: var(--green-700);
	width: 20px;
	text-align: right;
	flex: none;
}

.ga-toc-title {
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	color: var(--ink-800);
}

.ga-toc-row:hover .ga-toc-title {
	color: var(--green-800);
	text-decoration: underline;
}

.ga-toc-lead {
	flex: 1;
	border-bottom: 1px dotted var(--sand-300);
	margin: 0 2px;
	transform: translateY(-3px);
}

.ga-toc-count {
	font-family: var(--font-mono);
	font-weight: var(--weight-semibold);
	font-size: var(--text-eyebrow);
	color: var(--text-muted);
}

/* Census strip — the reserved verdict hues, counts computed at render,
   every segment direct-labeled. */
.ga-bar {
	display: flex;
	gap: 2px;
	height: 12px;
	margin: 14px 0 8px;
}

.ga-seg {
	position: relative;
	border: 0;
	padding: 0;
	border-radius: 2px;
	cursor: pointer;
	min-width: 4px;
	transition:
		filter 0.12s cubic-bezier(0.2, 0.6, 0.25, 1),
		opacity 0.12s cubic-bezier(0.2, 0.6, 0.25, 1);
}

/* The visual strip stays 12px; the tap target does not. */
.ga-seg::before {
	content: "";
	position: absolute;
	inset: -16px 0;
}

@media (pointer: coarse) {
	.ga-seg {
		min-height: 12px;
	}
}

.ga-seg:hover {
	filter: brightness(0.88);
}

.ga-b-yes {
	background: var(--verdict-yes);
}

.ga-b-depends {
	background: var(--verdict-depends);
}

.ga-b-ask {
	background: var(--verdict-ask);
}

.ga-b-no {
	background: var(--verdict-no);
}

.ga-bar.haspick .ga-seg:not(.on) {
	opacity: 0.35;
}

.ga-blabels {
	display: flex;
	gap: 2px;
}

.ga-blabels > div {
	min-width: 0;
}

.ga-bl-n {
	font-family: var(--font-mono);
	font-weight: var(--weight-semibold);
	font-size: var(--text-caption);
	color: var(--text-strong);
}

.ga-bl-name {
	font-size: var(--text-caption);
	color: var(--text-body);
}

.ga-census-note {
	margin: 12px 0 0;
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: var(--text-eyebrow);
	color: var(--text-muted);
}

/* Freshness + helper cards. */
.ga-fresh {
	display: grid;
	gap: 16px;
}

@media (min-width: 768px) {
	.ga-fresh {
		grid-template-columns: 240px 1fr;
		gap: 32px;
		align-items: start;
	}
}

.ga-fresh-n {
	font-family: var(--font-mono);
	font-weight: var(--weight-semibold);
	font-size: var(--text-title);
	color: var(--text-strong);
}

.ga-fresh-l {
	font-size: var(--text-body-sm);
	color: var(--text-muted);
	max-width: 34ch;
	margin-top: 4px;
}

.ga-fresh-note {
	font-size: var(--text-body-sm);
	line-height: var(--lh-body-sm);
	color: var(--text-body);
	margin: 0;
	max-width: 60ch;
}

.ga-helpers {
	display: grid;
	gap: 16px;
}

@media (min-width: 768px) {
	.ga-helpers {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}

.ga-helpers > * {
	min-width: 0;
}

.ga-hc h3 {
	font-size: var(--text-subtitle);
	margin: 10px 0 6px;
}

.ga-hc > p {
	font-size: var(--text-body-sm);
	line-height: var(--lh-body-sm);
	margin: 0 0 16px;
	max-width: 52ch;
}

.ga-oq-stat {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--border-hairline);
}

.ga-oq-stat:last-of-type {
	border-bottom: 0;
	margin-bottom: 10px;
}

.ga-oq-stat .n {
	font-family: var(--font-mono);
	font-weight: var(--weight-semibold);
	font-size: var(--text-subtitle);
	color: var(--text-strong);
	min-width: 34px;
}

.ga-oq-stat .l {
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.ga-quiet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	color: var(--text-link);
	text-decoration: none;
}

.ga-quiet:hover {
	color: var(--text-link-hover);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ga-chev,
	.ga-seg,
	.ga-ans-head,
	.ga-situ-head,
	.ga-toc-row {
		transition: none;
	}
}