/* ARA homepage mockups: shared components (run 002).
   Every value is a token from src/tokens/tokens.css. Raw px appear only in @media
   queries (CSS variables are not allowed there; values from tokens.json breakpoints).
   Component specs: docs/design-system.md §4. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--spacing-7xl) + var(--spacing-md)); }
body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-tertiary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-text-brand-secondary); text-decoration: underline; text-underline-offset: var(--spacing-xs); text-decoration-thickness: var(--border-width-hairline); }
a:hover { color: var(--color-text-brand-secondary_hover); text-decoration-thickness: var(--border-width-strong); }
:focus-visible { outline: var(--border-width-strong) solid var(--color-focus-ring); outline-offset: var(--spacing-xxs); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-family-mono); letter-spacing: 0; }
.sr-only { position: absolute; width: var(--border-width-hairline); height: var(--border-width-hairline); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding-desktop); }
.section { padding: var(--spacing-9xl) 0; }
.section--alt { background: var(--color-bg-secondary); }
.section--tight { padding: var(--spacing-7xl) 0; }

/* ---------- Icons (line, currentColor) ---------- */
.icon { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); stroke-width: 2; }
.icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* ---------- Skip link + page-level example-data banner (4.29, 6.3) ---------- */
.skip-link { position: absolute; left: var(--spacing-xl); top: calc(-1 * var(--spacing-8xl)); z-index: var(--z-skip-link); background: var(--color-bg-primary); padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.skip-link:focus { top: var(--spacing-xl); }
.page-banner { background: var(--color-bg-warning-primary); border-bottom: var(--border-width-hairline) solid var(--color-badge-warning-border); color: var(--color-badge-warning-fg); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-medium); }
.page-banner .container { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); text-align: center; }

/* ---------- Header (4.21) ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-bg-primary); border-bottom: var(--border-width-hairline) solid var(--color-border-secondary); }
.site-header .container { display: flex; align-items: center; gap: var(--spacing-4xl); min-height: calc(var(--spacing-7xl) + var(--spacing-md)); }
.brand { display: flex; align-items: center; flex: none; padding: var(--spacing-xs) 0; }
/* Logo clear space (3.9): >= cap height of "A" in AUTISM (~0.24 x lockup height) above and below. */
.brand img { height: var(--spacing-6xl); width: auto; }
.nav { display: flex; align-items: center; gap: var(--spacing-xs); margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: var(--size-target-min); padding: 0 var(--spacing-lg); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); text-decoration: none; }
.nav a:hover { background: var(--color-bg-primary_hover); color: var(--color-text-secondary_hover); }
.header-actions { display: flex; align-items: center; gap: var(--spacing-md); }
.header-actions .menu-btn { display: none; }

/* ---------- Buttons (4.1) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); min-height: var(--size-target-min); padding: var(--spacing-lg) var(--spacing-xl); border-radius: var(--radius-md); border: var(--border-width-hairline) solid transparent; box-shadow: var(--shadow-xs); font-family: inherit; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--easing-linear); }
.btn:hover { text-decoration: none; }
.btn--md { min-height: calc(var(--spacing-6xl)); padding: var(--spacing-lg) var(--spacing-2xl); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); }
.btn--lg { min-height: calc(var(--spacing-6xl) + var(--spacing-md)); padding: var(--spacing-xl) var(--spacing-3xl); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-bg-brand-solid); color: var(--color-text-white); }
.btn--primary:hover { background: var(--color-bg-brand-solid_hover); color: var(--color-text-white); }
/* The only red button: max one visible per viewport (2.4, 5.9). */
.btn--contribute { background: var(--color-bg-accent-solid); color: var(--color-text-white); }
.btn--contribute:hover { background: var(--color-bg-accent-solid_hover); color: var(--color-text-white); }
.btn--secondary { background: var(--color-bg-primary); border-color: var(--color-border-primary); color: var(--color-text-secondary); }
.btn--secondary:hover { background: var(--color-bg-primary_hover); color: var(--color-text-secondary_hover); }
.btn--tertiary { background: transparent; box-shadow: none; color: var(--color-text-tertiary); }
.btn--icon { width: var(--size-target-min); padding: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--spacing-sm); min-height: var(--size-target-min); color: var(--color-text-brand-secondary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-text-md); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
/* Micro-disclosure directly under a Contribute button (5.6, 6.1 #2) */
.micro-disclosure { margin-top: var(--spacing-md); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--color-text-secondary); }

/* ---------- Type helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-md); color: var(--color-text-brand-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); }
.rule-accent { display: inline-block; width: var(--spacing-3xl); height: var(--border-width-strong); background: var(--color-fg-accent); border-radius: var(--radius-full); }
.h-display-xl { color: var(--color-text-primary); font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl); letter-spacing: var(--letter-spacing-display-xl); font-weight: var(--font-weight-semibold); }
.h-display-lg { color: var(--color-text-primary); font-size: var(--font-size-display-lg); line-height: var(--line-height-display-lg); letter-spacing: var(--letter-spacing-display-lg); font-weight: var(--font-weight-semibold); }
.h-display-md { color: var(--color-text-primary); font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); letter-spacing: var(--letter-spacing-display-md); font-weight: var(--font-weight-semibold); }
.h-display-sm { color: var(--color-text-primary); font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); letter-spacing: var(--letter-spacing-display-sm); font-weight: var(--font-weight-semibold); }
.h-display-xs { color: var(--color-text-primary); font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); letter-spacing: var(--letter-spacing-display-xs); font-weight: var(--font-weight-semibold); }
.h-text-lg { color: var(--color-text-primary); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); font-weight: var(--font-weight-semibold); }
.h-text-md { color: var(--color-text-primary); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); font-weight: var(--font-weight-semibold); }
.serif { font-family: var(--font-family-serif); }
.lead { font-size: var(--font-size-text-xl); line-height: var(--line-height-text-xl); color: var(--color-text-tertiary); max-width: var(--width-paragraph-max); }
.text-lg { font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); }
.text-sm { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.text-xs { font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-quaternary { color: var(--color-text-quaternary); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-4xl); margin-bottom: var(--spacing-5xl); }
.section-head > div { max-width: var(--width-paragraph-max); }
.section-head p { margin-top: var(--spacing-lg); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); }
.section-head .eyebrow { margin-bottom: var(--spacing-lg); }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-lg); }

/* ---------- Badges (4.7) + evidence (4.20) + example data (4.29) ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-full); border: var(--border-width-hairline) solid; font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); font-weight: var(--font-weight-medium); white-space: nowrap; flex: none; }
.badge .icon { width: var(--spacing-lg); height: var(--spacing-lg); stroke-width: 2; }
.badge--gray { color: var(--color-badge-gray-fg); background: var(--color-badge-gray-bg); border-color: var(--color-badge-gray-border); }
.badge--brand { color: var(--color-badge-brand-fg); background: var(--color-badge-brand-bg); border-color: var(--color-badge-brand-border); }
.badge--sky { color: var(--color-badge-sky-fg); background: var(--color-badge-sky-bg); border-color: var(--color-badge-sky-border); }
.badge--success { color: var(--color-badge-success-fg); background: var(--color-badge-success-bg); border-color: var(--color-badge-success-border); }
.badge--example { color: var(--color-badge-warning-fg); background: var(--color-badge-warning-bg); border-color: var(--color-badge-warning-border); font-weight: var(--font-weight-semibold); }
.badge--lg { padding: var(--spacing-xs) var(--spacing-lg); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.evidence { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); border: var(--border-width-hairline) solid; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-medium); white-space: nowrap; }
.evidence .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); stroke-width: 2; }
.evidence--hypothesis { color: var(--color-evidence-hypothesis-fg); background: var(--color-evidence-hypothesis-bg); border-color: var(--color-evidence-hypothesis-border); border-style: dashed; }
.evidence--association { color: var(--color-evidence-association-fg); background: var(--color-evidence-association-bg); border-color: var(--color-evidence-association-border); }
.evidence--causal { color: var(--color-evidence-causal-fg); background: var(--color-evidence-causal-bg); border-color: var(--color-evidence-causal-border); }
.evidence--no-link { color: var(--color-evidence-no-link-fg); background: var(--color-evidence-no-link-bg); border-color: var(--color-evidence-no-link-border); }
.tag { display: inline-flex; align-items: center; padding: var(--spacing-xxs) var(--spacing-md); border-radius: var(--radius-sm); border: var(--border-width-hairline) solid var(--color-border-secondary); background: var(--color-bg-primary); color: var(--color-text-secondary); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); font-weight: var(--font-weight-medium); }

/* ---------- Cards (4.9) ---------- */
.card { background: var(--color-bg-primary); border: var(--border-width-hairline) solid var(--color-border-secondary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: var(--spacing-3xl); }
.card--featured { background: var(--color-bg-brand-primary); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.card-head h3 { color: var(--color-text-primary); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); font-weight: var(--font-weight-semibold); }
.card-head p { margin-top: var(--spacing-xxs); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.featured-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--spacing-6xl); height: var(--spacing-6xl); border-radius: var(--radius-lg); background: var(--color-bg-brand-primary); color: var(--color-fg-brand-primary); border: var(--border-width-hairline) solid var(--color-badge-brand-border); flex: none; }

/* ---------- Stat card (4.10) ---------- */
.stat { display: flex; flex-direction: column; gap: var(--spacing-md); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); }
.stat-label { color: var(--color-text-tertiary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-medium); }
.stat-value { color: var(--color-text-primary); font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); letter-spacing: var(--letter-spacing-display-sm); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.stat-value--md { font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); }
.stat-sub { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-text-tertiary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.stat-sub .icon { color: var(--color-fg-success-primary); }

/* ---------- Progress bar (4.11) ---------- */
.progress { position: relative; height: var(--spacing-md); border-radius: var(--radius-full); background: var(--color-bg-quaternary); overflow: visible; }
.progress--sm { height: var(--spacing-xs); }
.progress--lg { height: var(--spacing-lg); }
.progress > i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-fg-brand-primary); }
.progress .tick { position: absolute; top: calc(-1 * var(--spacing-xs)); bottom: calc(-1 * var(--spacing-xs)); width: var(--border-width-strong); background: var(--color-fg-quaternary); border-radius: var(--radius-full); }
.progress-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-md); margin-top: var(--spacing-md); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.raised { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-sm); margin-bottom: var(--spacing-md); }
.raised b { color: var(--color-text-primary); font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); letter-spacing: var(--letter-spacing-display-xs); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.raised span { color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-lg); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); color: var(--color-text-tertiary); }
.milestones li { display: flex; gap: var(--spacing-xs); align-items: flex-start; }
.milestones .icon { color: var(--color-fg-success-primary); }
.milestones .icon.todo { color: var(--color-fg-quaternary); }
.milestones b { display: block; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }

/* ---------- Campaign card ---------- */
.campaign { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.campaign h3 { color: var(--color-text-primary); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); font-weight: var(--font-weight-semibold); }
.campaign p.desc { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.campaign .foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--spacing-md); }
.still-needed { color: var(--color-text-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.still-needed b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* ---------- Live feed (4.12) ---------- */
.feed { display: flex; flex-direction: column; gap: var(--spacing-md); }
.feed-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-lg) var(--spacing-xl); border: var(--border-width-hairline) solid var(--color-border-secondary); border-radius: var(--radius-lg); background: var(--color-bg-primary); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--spacing-5xl); height: var(--spacing-5xl); border-radius: var(--radius-full); background: var(--color-bg-brand-primary); color: var(--color-text-brand-secondary); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); flex: none; }
.avatar--anon { background: var(--color-bg-tertiary); color: var(--color-fg-tertiary); }
.feed-who { min-width: 0; }
.feed-who b { display: block; color: var(--color-text-primary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-who span { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); }
.feed-amt { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-xs); }
.feed-amt b { color: var(--color-text-primary); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.feed-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.live-dot { display: inline-flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text-success-primary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); }
.live-dot::before { content: ""; width: var(--spacing-md); height: var(--spacing-md); border-radius: var(--radius-full); background: var(--color-fg-success-secondary); box-shadow: 0 0 0 var(--spacing-xs) var(--color-bg-success-secondary); }
.toast { display: grid; grid-template-columns: auto 1fr auto; gap: var(--spacing-lg); align-items: start; background: var(--color-bg-primary); border: var(--border-width-hairline) solid var(--color-border-secondary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--spacing-xl); }
.toast .featured-icon { width: var(--spacing-5xl); height: var(--spacing-5xl); background: var(--color-bg-success-primary); color: var(--color-fg-success-primary); border-color: var(--color-badge-success-border); }

/* ---------- US choropleth map (4.14) ----------
   Geometry: us-states-paths.js (us-atlas, Albers USA, viewBox 975 x 610). The SVG scales to its container;
   strokes are non-scaling so borders and outlines stay 1-3px at every size. Inside the SVG, CSS px are
   map units, so token sizes (font, radius, DC marker) scale with the map. */
/* Bucket colours (legend swatches + callout label ink): brand-950 ink on the three light buckets,
   white on the three dark (>= 4.5:1 each). */
.b1 { background: var(--color-dataviz-seq-1); color: var(--color-brand-950); }
.b2 { background: var(--color-dataviz-seq-2); color: var(--color-brand-950); }
.b3 { background: var(--color-dataviz-seq-3); color: var(--color-brand-950); }
.b4 { background: var(--color-dataviz-seq-4); color: var(--color-text-white); }
.b5 { background: var(--color-dataviz-seq-5); color: var(--color-text-white); }
.b6 { background: var(--color-dataviz-seq-6); color: var(--color-text-white); }
.b0 { color: var(--color-text-secondary); background: repeating-linear-gradient(45deg, var(--color-dataviz-no-data) 0 var(--spacing-xs), var(--color-dataviz-no-data-pattern) var(--spacing-xs) var(--spacing-sm)); }
.us-map { position: relative; }
.us-map-svg { display: block; width: 100%; height: auto; }
.us-map .b1 { fill: var(--color-dataviz-seq-1); }
.us-map .b2 { fill: var(--color-dataviz-seq-2); }
.us-map .b3 { fill: var(--color-dataviz-seq-3); }
.us-map .b4 { fill: var(--color-dataviz-seq-4); }
.us-map .b5 { fill: var(--color-dataviz-seq-5); }
.us-map .b6 { fill: var(--color-dataviz-seq-6); }
.us-map .hatch-bg { fill: var(--color-dataviz-no-data); }
.us-map .hatch-line { fill: var(--color-dataviz-no-data-pattern); }
.us-map [data-state] { cursor: pointer; }
.map-state { stroke: var(--color-dataviz-map-stroke); stroke-width: var(--border-width-hairline); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* The focus outline is drawn by .ring--focus (a shape-following ring); a bounding-box outline would be misleading. */
.map-state:focus { outline: none; }
.map-dc { stroke: var(--color-dataviz-surface); stroke-width: var(--border-width-strong); vector-effect: non-scaling-stroke; }
.map-box { rx: var(--radius-xs); stroke: var(--color-dataviz-surface); stroke-width: var(--border-width-hairline); vector-effect: non-scaling-stroke; }
.map-callout:hover .map-box { stroke: var(--color-dataviz-map-stroke-active); stroke-width: var(--border-width-strong); }
.map-callout.is-selected .map-box { stroke: var(--color-fg-brand-primary); stroke-width: calc(var(--border-width-strong) * 1.5); }
.us-map .map-box-label { fill: currentColor; font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
/* Outline layers: hover (ink, 2px), selected (brand navy, 3px) and keyboard focus (focus ring, 3px). Selected and
   focus sit on a surface-coloured halo so they read on the darkest and lightest buckets alike. */
.ring, .ring-halo { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.ring-halo { stroke: var(--color-dataviz-surface); stroke-width: calc(var(--border-width-strong) * 3.5); }
.ring--hover { stroke: var(--color-dataviz-map-stroke-active); stroke-width: var(--border-width-strong); }
.ring.ring--sel { stroke: var(--color-fg-brand-primary); stroke-width: calc(var(--border-width-strong) * 1.5); }
.ring.ring--focus { stroke: var(--color-focus-ring); stroke-width: calc(var(--border-width-strong) * 1.5); }
.map-tip { position: absolute; z-index: var(--z-tooltip); pointer-events: none; white-space: nowrap; background: var(--color-bg-primary-solid); color: var(--color-text-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.map-tip[hidden] { display: none; }
.map-tip p { color: var(--color-text-white); }
.map-tip .map-tip-name { font-weight: var(--font-weight-semibold); }
.map-tip .map-tip-total { font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.map-tip .map-tip-note { display: inline-block; margin-top: var(--spacing-xs); padding: 0 var(--spacing-sm); border-radius: var(--radius-full); background: var(--color-badge-warning-bg); color: var(--color-badge-warning-fg); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); font-weight: var(--font-weight-semibold); }
.map-status { margin-bottom: var(--spacing-lg); color: var(--color-text-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.map-credit { margin-top: var(--spacing-md); color: var(--color-text-quaternary); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); }
/* Render hook only (?shot=1, see _shared.js): isolate the map card for the close-up PNGs. */
.is-shot body > * { visibility: hidden; }
.is-shot .shot-target { visibility: visible; position: fixed; top: var(--spacing-xl); left: var(--container-padding-desktop); width: calc(min(var(--container-max), 100vw) - 2 * var(--container-padding-desktop)); margin: 0; z-index: var(--z-modal); }
.legend { margin-top: var(--spacing-xl); }
.legend-title { color: var(--color-text-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-md); }
.legend-row { display: flex; align-items: flex-start; gap: var(--spacing-xl); flex-wrap: wrap; }
.legend-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--border-width-strong); flex: 1 1 var(--width-xxs); }
.legend-steps > div > span { display: block; height: var(--spacing-lg); }
.legend-steps > div:first-child > span { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.legend-steps > div:last-child > span { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.legend-steps .short { display: none; }
.legend-steps small { display: block; margin-top: var(--spacing-xs); color: var(--color-text-tertiary); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend-nodata { display: flex; align-items: center; gap: var(--spacing-md); color: var(--color-text-tertiary); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); }
.legend-nodata span { width: var(--spacing-3xl); height: var(--spacing-lg); border-radius: var(--radius-xs); }
.map-tools { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
/* The dropdown is the large-target equivalent for small states (WCAG 2.5.8), so it shows at every width. */
.map-select { display: block; max-width: var(--width-xxs); margin-bottom: var(--spacing-xl); }

/* ---------- Allocation ("Where every dollar goes"), categorical slots 2.5 ---------- */
.alloc-bar { display: flex; gap: var(--border-width-strong); height: var(--spacing-3xl); }
.alloc-bar span { display: block; height: 100%; }
.alloc-bar span:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.alloc-bar span:last-child { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.c1 { background: var(--color-dataviz-cat-1); }
.c2 { background: var(--color-dataviz-cat-2); }
.c3 { background: var(--color-dataviz-cat-3); }
.c4 { background: var(--color-dataviz-cat-4); }
.c5 { background: var(--color-dataviz-cat-5); }
.c6 { background: var(--color-dataviz-cat-6); }
.alloc-list { display: grid; gap: 0; margin-top: var(--spacing-3xl); }
.alloc-list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-lg) 0; border-top: var(--border-width-hairline) solid var(--color-border-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.alloc-list li:last-child { border-bottom: var(--border-width-hairline) solid var(--color-border-secondary); }
.swatch { width: var(--spacing-lg); height: var(--spacing-lg); border-radius: var(--radius-xxs); flex: none; }
.alloc-list .name { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.alloc-list .amt { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.alloc-list .pct { color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; text-align: right; min-width: var(--spacing-6xl); }

/* ---------- Reconciliation list ---------- */
.recon { display: grid; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.recon div { display: flex; justify-content: space-between; gap: var(--spacing-lg); padding: var(--spacing-md) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-secondary); }
.recon dt { color: var(--color-text-tertiary); }
.recon dd { color: var(--color-text-primary); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.recon .total { border-bottom: 0; padding-top: var(--spacing-lg); }
.recon .total dt { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.recon .total dd { font-weight: var(--font-weight-semibold); font-size: var(--font-size-text-md); }

/* ---------- Ledger table (4.13, hero product UI) ---------- */
.ledger { width: 100%; border-collapse: collapse; font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.ledger th { text-align: left; background: var(--color-bg-secondary); color: var(--color-text-tertiary); font-size: var(--font-size-text-xs); line-height: var(--line-height-text-xs); font-weight: var(--font-weight-semibold); padding: var(--spacing-md) var(--spacing-lg); border-bottom: var(--border-width-hairline) solid var(--color-border-secondary); }
.ledger td { padding: var(--spacing-lg); border-bottom: var(--border-width-hairline) solid var(--color-border-secondary); color: var(--color-text-tertiary); vertical-align: middle; }
.ledger td.r, .ledger th.r { text-align: right; }
.ledger td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger .amt { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .what { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.cat { display: inline-flex; align-items: center; gap: var(--spacing-sm); white-space: nowrap; }

/* ---------- Research list / cards (4.19) ---------- */
.research-card { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.research-card h3 { color: var(--color-text-primary); font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); font-weight: var(--font-weight-semibold); }
.research-card p { font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.research-card .link-arrow { margin-top: auto; font-size: var(--font-size-text-sm); }

/* ---------- Form controls (4.3) + verification lookup (4.15) ---------- */
.field label { display: block; margin-bottom: var(--spacing-sm); color: var(--color-text-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-medium); }
.input { width: 100%; min-height: var(--spacing-6xl); padding: var(--spacing-md) var(--spacing-lg); border: var(--border-width-hairline) solid var(--color-border-primary); border-radius: var(--radius-md); background: var(--color-bg-primary); box-shadow: var(--shadow-xs); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-text-md); }
.input::placeholder { color: var(--color-text-placeholder); }
.input.mono { font-family: var(--font-family-mono); text-transform: uppercase; }
.hint { margin-top: var(--spacing-sm); color: var(--color-text-tertiary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.lookup-row { display: flex; gap: var(--spacing-md); }
.lookup-row .input { flex: 1; }
.lookup-row .btn { min-height: var(--spacing-6xl); }
.result { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-lg); margin-top: var(--spacing-xl); padding: var(--spacing-xl); border-radius: var(--radius-lg); background: var(--color-bg-success-primary); border: var(--border-width-hairline) solid var(--color-badge-success-border); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--color-text-secondary); }
.result .icon { color: var(--color-fg-success-primary); }
.result b { color: var(--color-text-primary); }
.select { appearance: none; width: 100%; min-height: var(--size-target-min); padding: var(--spacing-md) var(--spacing-lg); border: var(--border-width-hairline) solid var(--color-border-primary); border-radius: var(--radius-md); background: var(--color-bg-primary); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-text-md); box-shadow: var(--shadow-xs); }

/* Amount chips (radio cards, 4.5): 4 presets + Other (Hick) */
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-md); }
.chip { display: flex; align-items: center; justify-content: center; min-height: var(--spacing-6xl); border: var(--border-width-hairline) solid var(--color-border-primary); border-radius: var(--radius-md); background: var(--color-bg-primary); color: var(--color-text-secondary); font-size: var(--font-size-text-md); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip.is-on { border: var(--border-width-strong) solid var(--color-border-brand_alt); background: var(--color-bg-brand-primary); color: var(--color-text-brand-secondary); }
.chip--other { font-size: var(--font-size-text-sm); font-weight: var(--font-weight-medium); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xs); padding: var(--spacing-xs); background: var(--color-bg-secondary); border: var(--border-width-hairline) solid var(--color-border-secondary); border-radius: var(--radius-md); }
.seg span { display: flex; align-items: center; justify-content: center; min-height: var(--size-target-min); border-radius: var(--radius-sm); color: var(--color-text-tertiary); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); }
.seg span.is-on { background: var(--color-bg-primary); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }

/* ---------- Callout / disclosure (4.17) ---------- */
.callout { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-lg); padding: var(--spacing-3xl); border-radius: var(--radius-xl); border: var(--border-width-hairline) solid var(--color-border-secondary); background: var(--color-bg-secondary); }
.callout > .icon { color: var(--color-fg-tertiary); margin-top: var(--spacing-xxs); }
.callout h3 { color: var(--color-text-primary); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); font-weight: var(--font-weight-semibold); }
.callout p { margin-top: var(--spacing-sm); color: var(--color-text-secondary); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); max-width: var(--width-paragraph-max); }
.callout .links { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-3xl); margin-top: var(--spacing-md); }
.callout .links a { display: inline-flex; align-items: center; min-height: var(--size-target-min); font-size: var(--font-size-text-sm); font-weight: var(--font-weight-semibold); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-xl); }
.facts li { display: flex; gap: var(--spacing-md); align-items: flex-start; color: var(--color-text-secondary); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.facts .icon { color: var(--color-fg-brand-primary); }
.facts b { display: block; color: var(--color-text-primary); }

/* ---------- Footer (4.22) ---------- */
.site-footer { background: var(--color-bg-brand-section); color: var(--color-text-tertiary_on-brand); padding: var(--spacing-8xl) 0 var(--spacing-5xl); }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--spacing-4xl); }
.logo-tile { display: inline-block; background: var(--color-bg-primary); border-radius: var(--radius-xl); padding: var(--spacing-lg) var(--spacing-xl); }
.logo-tile img { height: var(--spacing-6xl); width: auto; }
.footer-tag { margin-top: var(--spacing-xl); color: var(--color-text-secondary_on-brand); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); max-width: var(--width-xxs); }
.footer-col h4 { color: var(--color-text-quaternary_on-brand); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-md); }
.footer-col a { display: flex; align-items: center; min-height: var(--size-target-min); color: var(--color-text-tertiary_on-brand); text-decoration: none; font-size: var(--font-size-text-md); }
.footer-col a:hover { color: var(--color-text-primary_on-brand); text-decoration: underline; }
.footer-disclosure { margin-top: var(--spacing-6xl); padding: var(--spacing-3xl); border: var(--border-width-hairline) solid var(--color-bg-brand-section_subtle); border-radius: var(--radius-xl); background: var(--color-bg-brand-section_subtle); color: var(--color-text-secondary_on-brand); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); }
.footer-disclosure b { display: block; color: var(--color-text-primary_on-brand); margin-bottom: var(--spacing-xs); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md) var(--spacing-3xl); margin-top: var(--spacing-4xl); font-size: var(--font-size-text-sm); line-height: var(--line-height-text-sm); color: var(--color-text-tertiary_on-brand); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-3xl); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: var(--size-target-min); color: var(--color-text-tertiary_on-brand); }

/* ---------- Responsive: laptop (< 1024) collapses nav; mobile (< 768) stacks ---------- */
@media (max-width: 1023px) {
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .header-actions .menu-btn { display: inline-flex; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .container { padding: 0 var(--container-padding-mobile); }
  .section { padding: var(--spacing-7xl) 0; }
  .site-header .container { min-height: var(--spacing-7xl); gap: var(--spacing-md); }
  .brand img { height: var(--spacing-5xl); }
  .header-actions .header-cta { padding: var(--spacing-md) var(--spacing-lg); }
  .h-display-xl { font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); }
  .h-display-lg { font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); }
  .h-display-md { font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); }
  .lead { font-size: var(--font-size-text-lg); line-height: var(--line-height-text-lg); }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--spacing-xl); margin-bottom: var(--spacing-4xl); }
  .card { padding: var(--spacing-xl); }
  .card-head { flex-wrap: wrap; }
  .card-head > div:first-child { flex: 1 1 100%; }
  .feed-item { grid-template-columns: auto 1fr; padding: var(--spacing-lg); }
  .feed-amt { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .legend-steps .long { display: none; }
  .legend-steps .short { display: inline; }
  .callout { padding: var(--spacing-xl); grid-template-columns: 1fr; gap: var(--spacing-md); }
  .facts { grid-template-columns: 1fr; }
  /* Callout labels would be ~4px tall at 390px: hide them; the dropdown and a larger DC marker take over. */
  .map-callouts { display: none; }
  .map-dc { r: var(--spacing-lg); }
  .map-select { max-width: none; }
  .is-shot .shot-target { left: var(--container-padding-mobile); width: calc(100vw - 2 * var(--container-padding-mobile)); }
  .chips { grid-template-columns: repeat(3, 1fr); }
  .milestones { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); }
  .footer-bottom { flex-direction: column; }
  .lookup-row { flex-direction: column; }
  .page-banner .container { justify-content: flex-start; text-align: left; }
}