/* ==========================================================================
   TicketRouter — design system v2
   Warm paper · ink · one civic blue · amber for warnings only.
   Type: Fraunces (display) + Inter (UI). Motion: vanilla CSS + tiny JS.
   ========================================================================== */

:root {
  /* palette */
  --paper: #f7f3ea;
  --paper-raised: #fdfbf4;
  --paper-sunken: #ece4d1;
  --ink: #14120e;
  --ink-soft: #57503f;
  --ink-faint: #8b8069;
  --action: #1e4fd8;            /* deep civic blue: the single action/signal color */
  --action-ink: #ffffff;
  --action-deep: #1740ac;
  --warn: #b97e0c;              /* amber: warnings / notices only */
  --warn-soft: #f7ecd4;
  --hairline: #dcd2bc;
  --shadow: 0 1px 2px rgba(20, 18, 14, 0.06), 0 10px 24px rgba(20, 18, 14, 0.07);
  --shadow-lift: 0 2px 4px rgba(20, 18, 14, 0.08), 0 18px 36px rgba(20, 18, 14, 0.12);

  /* shape + type */
  --radius: 12px;
  --font-display: "Fraunces Variable", "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 42rem;
  --grid: 74rem;

  /* motion */
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --motion: 240ms var(--ease);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14110c;
    --paper-raised: #1e1a12;
    --paper-sunken: #0e0c08;
    --ink: #f1e9d7;
    --ink-soft: #c4b795;
    --ink-faint: #8a7c5f;
    --action: #9db9f2;
    --action-ink: #0f1420;
    --action-deep: #b9ccf7;
    --warn: #d9a441;
    --warn-soft: rgba(217, 164, 65, 0.13);
    --hairline: #3a3222;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 36px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  transition: background-color 300ms ease, color 300ms ease;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.08; }
}

::selection {
  background: var(--action);
  color: var(--action-ink);
}

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 { font-size: 1.65rem; margin: 0 0 1rem; }
h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }

p { margin: 0 0 1rem; }

a { color: var(--action); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------- layout ---------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.wrap-wide {
  max-width: var(--grid);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0;
}

.site-header .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 4.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ticket-stub brand mark: punched perforation motif */
.brand-mark {
  display: inline-block;
  width: 30px;
  height: 20px;
  margin-right: 0.6rem;
  border-radius: 5px;
  background: var(--action);
  position: relative;
  flex: none;
  transition: transform var(--motion);
}
.brand-mark::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 3px;
  bottom: 3px;
  border-left: 2px dashed rgba(255, 255, 255, 0.8);
}
.wordmark:hover .brand-mark { transform: rotate(-8deg) scale(1.05); }

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.site-nav a {
  position: relative;
  padding: 0.65rem 0.6rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 180ms ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--action);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 650;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--action);
  color: var(--action-ink);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}
.skip:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 5rem;
  padding: 2rem 0 3.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer .built-line {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--hairline);
  font-size: 0.85rem;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 4.5rem 0 0.5rem;
}
/* tasteful radial glow behind the hero */
.hero::before {
  content: "";
  position: absolute;
  inset: -5rem -8rem auto;
  height: 34rem;
  background: radial-gradient(closest-side, rgba(30, 79, 216, 0.09), transparent 72%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .hero::before {
    background: radial-gradient(closest-side, rgba(157, 185, 242, 0.12), transparent 72%);
  }
}

.page-head { padding: 3.5rem 0 0.5rem; }

.kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.kicker::before {
  content: "";
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--action);
  flex: none;
}

.display {
  font-size: clamp(2.6rem, 6vw + 1rem, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  font-weight: 600;
}
.page-head .display { font-size: clamp(2.1rem, 4.5vw + 1rem, 3.1rem); }

/* line-masked rise for the headline */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-in {
  display: block;
  animation: line-rise 0.85s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes line-rise {
  from { opacity: 0; transform: translateY(105%); }
  to { opacity: 1; transform: none; }
}

.hero-el {
  animation: rise-in 0.7s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.lede {
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 36rem;
}
.lede strong { font-weight: 700; }

/* hero quick-start: "Where were you stopped?" -> check.html?state=XX */
.quickstart {
  margin-top: 1.75rem;
  max-width: 30rem;
}
.quickstart-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.quickstart-row {
  display: flex;
  gap: 0.6rem;
}
.quickstart select {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  font: inherit;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.quickstart select:hover { border-color: var(--ink-faint); }
.quickstart select:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-color: var(--action);
}
.quickstart select:disabled { cursor: default; color: var(--ink-soft); box-shadow: none; }
.quickstart .quickstart-go { min-height: 48px; padding-inline: 1.35rem; flex: none; }
.quickstart .quickstart-go:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  background: var(--action);
  border-color: var(--action);
}
.quickstart .hint { margin: 0.45rem 0 0; }
.quickstart.is-unavailable .hint { color: var(--ink); }
/* the quick-start is the primary path; the row below backs it up */
.quickstart + .btn-row { margin-top: 1.25rem; }

/* ---------- hero ambient backdrop (road + route, decorative) ---------- */

.hero-stage {
  position: relative;
  isolation: isolate;           /* backdrop sits behind the hero, above the page */
  overflow-x: clip;             /* glow + backdrop never cause sideways scroll */
  padding-bottom: 5.5rem;       /* open lane for the road under the buttons */
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: 84rem;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  animation: hb-fade-in 1.4s var(--ease-entrance, cubic-bezier(0.16, 1, 0.3, 1)) 450ms both;
}
.hero-backdrop .hb { display: block; width: 100%; height: 100%; max-width: none; }
@keyframes hb-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* painted asphalt — a fixed dark tone in both themes (real pavement doesn't
   turn pale in light mode), kept legible against dark-mode's near-black
   paper the same way it reads against the light-mode cream. */
.hb-road-bed { fill: #43494f; opacity: 0.6; }
.hb-road-edge { fill: none; stroke: #e9e6dc; stroke-width: 2; opacity: 0.5; }
.hb-lane path { fill: none; stroke: #e0b23a; stroke-width: 2.5; stroke-linecap: round; opacity: 0.55; }
.hb-lane { animation: hb-lane-drift 3.2s linear infinite; }
@keyframes hb-lane-drift { to { transform: translateX(-80px); } } /* one dash period: seamless */

/* passing traffic: top-down sprites (a colored body, a lighter windshield,
   a soft shadow) in a mixed stream each way — sedans, a motorcycle, a
   pickup, a delivery van, and a cruiser — each its own speed/size/delay so
   they never move in lockstep or pass at the same moment. */
.hb-car { opacity: 0; }
.hb-car-shadow { fill: #14120e; opacity: 0.2; }
.hb-car-glass { fill: #bcd4e0; }
.hb-body-red { fill: #d6483d; }
.hb-body-blue { fill: #3a7cc4; }
.hb-body-amber { fill: #d99a2b; }
.hb-body-slate { fill: #6b7580; }
.hb-body-cruiser { fill: #d7dde1; }
.hb-lightbar { opacity: 0.85; }
.hb-lightbar-red { fill: #d6483d; }
.hb-lightbar-blue { fill: #3a7cc4; }
.hb-indicator { fill: var(--warn); opacity: 0.2; }
.hb-car-a { animation: hb-car-east 14s linear infinite; }
.hb-car-c { animation: hb-car-east 11s linear -3s infinite; }     /* quicker, trails car-a */
.hb-car-b { animation: hb-car-west 19s linear -8s infinite; }
.hb-car-d { animation: hb-car-west 23s linear -14s infinite; }    /* a cruiser, on patrol */
.hb-car-e { animation: hb-car-east 7s linear -1s infinite; }      /* fast, narrow — a motorcycle */
.hb-car-f { animation: hb-car-east 26s linear -18s infinite; }    /* slow, boxy — a delivery van */
.hb-car-g { animation: hb-car-west 16s linear -5s infinite; }     /* a pickup */
@keyframes hb-car-east {
  0% { transform: translateX(0); opacity: 0; }
  5%, 95% { opacity: 0.55; }
  100% { transform: translateX(1500px); opacity: 0; }
}
@keyframes hb-car-west {
  0% { transform: translateX(0); opacity: 0; }
  5%, 95% { opacity: 0.55; }
  100% { transform: translateX(-1500px); opacity: 0; }
}

/* traffic light at the roadside stop — thematically the moment of the stop,
   right where the route begins its climb to the official door. A hard
   steps(1) switch, like a real signal, not a cross-fade. Mast-arm: the pole
   plants at the curb, the arm reaches out over the lane, the head hangs
   from the arm's end. */
.hb-signal-pole { fill: var(--ink-faint); opacity: 0.35; }
.hb-signal-arm { fill: var(--ink-faint); opacity: 0.35; }
.hb-signal-box { fill: #2a2e33; stroke: var(--hairline); stroke-width: 1.5; opacity: 0.7; }
.hb-signal-light { opacity: 0.15; }
.hb-signal-red { fill: #b3483f; animation: hb-sig-red 9s steps(1) infinite; }
.hb-signal-yellow { fill: var(--warn); animation: hb-sig-yellow 9s steps(1) infinite; }
.hb-signal-green { fill: #4a8a5c; animation: hb-sig-green 9s steps(1) infinite; }
@keyframes hb-sig-green {
  0%, 55% { opacity: 0.85; }
  55.1%, 100% { opacity: 0.15; }
}
@keyframes hb-sig-yellow {
  0%, 55% { opacity: 0.15; }
  55.1%, 64% { opacity: 0.85; }
  64.1%, 100% { opacity: 0.15; }
}
@keyframes hb-sig-red {
  0%, 64% { opacity: 0.15; }
  64.1%, 100% { opacity: 0.85; }
}

.hb-route {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
  opacity: 0.55;
}
/* the mask stroke "draws" the dashed route; at rest (and with reduced motion)
   it is fully drawn */
.hb-route-reveal {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 0;
  animation: hb-route-draw 9s var(--ease) 0.9s infinite both;
}
@keyframes hb-route-draw {
  0% { stroke-dashoffset: 100; }
  34%, 100% { stroke-dashoffset: 0; }
}
.hb-route-wrap { animation: hb-route-cycle 9s linear 0.9s infinite both; }
@keyframes hb-route-cycle {
  0%, 84% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* the roundabout the route rises from — a small ring + grass island, its
   four stub spokes standing in for the site's four routes without trying
   to letter labels at this scale. */
.hb-roundabout-ring { fill: none; stroke: var(--ink-faint); stroke-width: 6; opacity: 0.4; }
.hb-roundabout-island { fill: #6fae4e; opacity: 0.4; }
.hb-roundabout-spoke { stroke: var(--ink-faint); stroke-width: 2; opacity: 0.4; }

.hb-crosswalk rect { fill: #e9e6dc; opacity: 0.35; }
.hb-pedestrian-head, .hb-pedestrian-body { fill: var(--ink-soft); opacity: 0.4; }

/* the painted line the traffic yields at — invisible until a click asks the
   road to pause; see initYield() in hero.js. */
.hb-yield-line { fill: #e0b23a; opacity: 0; }

.hb-pin { fill: var(--ink-soft); opacity: 0.5; }
.hb-pin-dot { fill: var(--paper); }
.hb-pin-shadow { fill: var(--ink-faint); opacity: 0.3; }
.hb-halo {
  fill: var(--ink-faint);
  opacity: 0.14;
  transform-box: fill-box;
  transform-origin: center;
  animation: hb-breathe 3.6s ease-in-out infinite;
}
@keyframes hb-breathe {
  0%, 100% { transform: scale(0.7); opacity: 0.2; }
  50% { transform: scale(1.3); opacity: 0.05; }
}

.hero-backdrop.is-paused,
.hero-backdrop.is-paused * { animation-play-state: paused; }

/* yield & flow: a click on the hero's own controls asks the road to pause
   for a beat (see YIELD_DELAY_MS in hero.js) before the real navigation —
   the yield line appears, the lead car's indicator blinks fast. */
.hero-backdrop.is-yielding .hb-yield-line { opacity: 0.85; transition: opacity 120ms ease; }
.hero-backdrop.is-yielding .hb-car-a .hb-indicator { animation: hb-indicator-blink 260ms steps(1) infinite; }
@keyframes hb-indicator-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Narrow screens have no gutter beside the text: the route and pin would sit
   behind the headline, so keep only the road and its traffic. */
@media (max-width: 52rem) {
  .hb-dest, .hb-signal { display: none; }
}

/* ---------- ticket-stub perforation divider ---------- */

.stub {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3.5rem 0;
}
.stub-line {
  flex: 1;
  border-top: 2px dashed var(--hairline);
}
.stub-punch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--hairline);
  flex: none;
}

/* "Tear open" on reveal: the container keeps the generic [data-reveal] fade
   from opacity 0 (higher specificity below wins), and its own children carry
   the actual tear — the line splits open from the center, then the punches
   pop through right after, like perforation giving way. JS-gated to match
   the no-JS-always-visible fallback the generic [data-reveal] rule uses. */
.stub[data-reveal] { opacity: 1; transform: none; }
html.js .stub .stub-line {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 560ms var(--ease-entrance);
  transition-delay: var(--d, 0ms);
}
html.js .stub.in .stub-line { transform: scaleX(1); }
html.js .stub .stub-punch {
  transform: scale(0);
  transition: transform 320ms var(--ease-entrance);
  transition-delay: calc(var(--d, 0ms) + 440ms);
}
html.js .stub.in .stub-punch { transform: scale(1); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  color: var(--action-ink);
  background: var(--action);
  border: 1px solid var(--action);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease),
    background-color 200ms ease, border-color 200ms ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  background: var(--action-deep);
  border-color: var(--action-deep);
  text-decoration: none;
}
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow); }

.btn .ext {
  display: inline-block;
  transition: transform 200ms var(--ease);
  font-weight: 700;
}
.btn:hover .ext { transform: translate(3px, -3px); }
.btn .ext.arr-right { font-weight: 700; }
.btn:hover .ext.arr-right { transform: translateX(4px); }

.btn-secondary {
  background: transparent;
  color: var(--action);
  border-color: var(--hairline);
}
.btn-secondary:hover {
  background: var(--paper-raised);
  border-color: var(--action);
  color: var(--action);
  box-shadow: var(--shadow-lift);
}

.btn-block { width: 100%; }

.btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.text-link .ext {
  display: inline-block;
  transition: transform 200ms var(--ease);
}
.text-link:hover .ext { transform: translateX(4px); }

/* ---------- sections ---------- */

main section { margin-top: 3.25rem; }
main section:first-child { margin-top: 0; }

.section-head {
  max-width: var(--measure);
}

/* ---------- trust strip ---------- */

.trust {
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.5rem;
  margin-top: 0;
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 40rem) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 3px solid var(--action);
}
.stat dt {
  order: 2;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.stat dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ---------- "what this is not" cards + CSS icons ---------- */

.nope-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .nope-grid { grid-template-columns: repeat(2, 1fr); }
}

.nope-card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.35rem 1.5rem;
  transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion);
}
.nope-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--ink-faint);
}
.nope-card h3 { font-size: 1.15rem; margin: 0.9rem 0 0.4rem; }
.nope-card p { margin: 0; font-size: 0.97rem; color: var(--ink-soft); }

/* line-drawn icons inside a dashed "void" stamp */
.nope-icon {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--ink-faint);
}
.nope-icon::before, .nope-icon::after { content: ""; position: absolute; }

/* magnifier */
.icon-search::before {
  left: 13px; top: 12px; width: 13px; height: 13px;
  border: 2.5px solid var(--ink); border-radius: 50%;
}
.icon-search::after {
  left: 25px; top: 27px; width: 11px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  transform: rotate(45deg); transform-origin: left center;
}
/* database / warehouse */
.icon-db::before {
  left: 14px; top: 11px; width: 20px; height: 24px;
  border: 2.5px solid var(--ink); border-radius: 10px / 8px;
}
.icon-db::after {
  left: 14px; top: 21px; width: 20px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
}
/* legal document */
.icon-doc::before {
  left: 16px; top: 10px; width: 16px; height: 24px;
  background: var(--paper-raised);
  border: 2.5px solid var(--ink);
  clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%);
}
.icon-doc::after {
  left: 20px; top: 19px; width: 8px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  box-shadow: 0 6px 0 var(--ink);
}
/* person */
.icon-person::before {
  left: 18px; top: 10px; width: 12px; height: 12px;
  border: 2.5px solid var(--ink); border-radius: 50%;
}
.icon-person::after {
  left: 13px; top: 27px; width: 22px; height: 11px;
  border: 2.5px solid var(--ink); border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

/* ---------- how-it-works steps ---------- */

.steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.steps li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem;
  transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion);
}
.steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.steps p { margin: 0.15rem 0 0; }
.step-n {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
}

/* ---------- tables → spec rows ---------- */

.table-scroll { overflow-x: auto; }

table.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.97rem;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  vertical-align: top;
}

.spec-table thead th {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--hairline);
}

.spec-table tbody tr { transition: background-color 180ms ease; }
.spec-table tbody tr:hover { background: color-mix(in srgb, var(--paper-sunken) 45%, transparent); }
.spec-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.spec-table tbody td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

/* stack to cards on small screens */
@media (max-width: 44rem) {
  table.spec-table { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .spec-table thead { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; }
  .spec-table tbody tr {
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 0.85rem;
    padding: 1rem 1.15rem;
  }
  .spec-table tbody tr + tr td { border-top: 0; }
  .spec-table td { border: 0; padding: 0.3rem 0; }
  .spec-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: 0.2rem;
  }
  .spec-table td:first-child { white-space: normal; }
  .spec-table td:first-child::before { display: none; }
  .spec-table td:first-child {
    font-family: var(--font-display);
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px dashed var(--hairline);
  }
}

/* ---------- notices ---------- */

.notice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--action);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.2rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
  font-size: 0.97rem;
}
.notice > div > p:last-child, .notice > p:last-child { margin-bottom: 0; }

.notice-warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

/* CSS warning triangle — no emoji */
.warn-icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 28px;
  margin-top: 2px;
}
.warn-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--warn);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 3px;
}
.warn-icon::after {
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  top: 8px;
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 13px 0 #fff;
}

/* ---------- check: one ask screen → one answer view ---------- */

/* Screen-reader-only text (e.g. the "Error:" prefix, "opens in a new tab"). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The ask panel: both questions + one submit, on one ticket. */
.ask {
  --ask-pad: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 1.9rem var(--ask-pad) 2rem;
  margin-top: 1.75rem;
  scroll-margin-top: 5.5rem; /* clears the sticky header on scrollIntoView */
}

.ask-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ask-legend {
  padding: 0;
  margin-bottom: 1.1rem;
}
.ask-legend h2 {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: 1.5rem;
  scroll-margin-top: 6rem;
}
.ask-legend h2:focus { outline: none; } /* programmatic focus target only */
.ask-note { margin: -0.35rem 0 0; }

.ask-where { display: grid; gap: 0 1.25rem; }
@media (min-width: 36rem) {
  .ask-where { grid-template-columns: 1fr 1fr; }
}
.ask-where .field { max-width: none; margin-bottom: 0.35rem; }

/* Perforation between the two questions: bleeds to the panel edges so the
   end punches read as notches cut into the ticket. */
.ask .ask-perf {
  margin: 1.6rem calc(-1 * var(--ask-pad) - 7.5px) 1.9rem;
}
.ask-perf .stub-punch:first-child { clip-path: inset(0 0 0 50%); }
.ask-perf .stub-punch:last-child { clip-path: inset(0 50% 0 0); }

.ask-submit { margin-top: 1.9rem; }
@media (max-width: 36rem) {
  .ask-submit .btn { width: 100%; } /* full-width thumb target on phones */
}

.combo-input, .intent-options input[type="radio"] { scroll-margin-top: 6rem; }

/* Inline field errors: sit between the question and its control, so they stay
   visible when focus lands on the field (and above the combobox list it opens).
   Amber stays the only warning hue; the text is darkened toward ink for
   contrast, and an icon + "Error:" prefix carry it without color. */
.field-error {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--warn) 55%, var(--ink));
  animation: rise-in 260ms var(--ease) both;
}
.field-error-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--warn);
}
.field-error-icon::before {
  content: "!";
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}
.combo-input[aria-invalid="true"] {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn);
}
#intent-group .field-error { margin-top: 0.85rem; }
#intent-group.is-invalid .intent-card { border-color: color-mix(in srgb, var(--warn) 60%, var(--hairline)); }

/* The answer view replaces the ask panel: heading + ROUTED stamp, the
   "Your answers" chips, then the staggered result cards in #results. */
.answer {
  margin-top: 1.75rem;
  scroll-margin-top: 5.5rem;
}
main .answer:first-child { margin-top: 1.75rem; }

.answer-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
}
.answer-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.25rem);
}
.answer-head h2:focus { outline: none; } /* programmatic focus target only */
.answer-head .stamp.stamp-in { animation-delay: 160ms; } /* lands after the heading */

.answer-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 1.1rem;
  padding: 0.75rem 0 0.35rem;
  border-top: 1px dashed var(--hairline);
}
.answer-bar-h {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.answer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
}
/* .pill, recolored for "what you asked": ink, not the action blue, and
   sentence case so county names read naturally. */
.pill-answer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  border-color: var(--hairline);
  background: var(--paper-raised);
}
.pill-answer dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.pill-answer dd { margin: 0; font-weight: 600; }

.answer:not([hidden]) .answer-head,
.answer:not([hidden]) .answer-bar {
  animation: rise-in 0.5s var(--ease-entrance, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.answer:not([hidden]) .answer-bar { animation-delay: 70ms; }

/* Text-style button (Change your answers): link look, real 44px target. */
.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.35rem;
  margin-left: -0.35rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--action);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.answer-bar .link-btn { margin-left: auto; }
.answer-foot { margin-top: 0.5rem; }

/* Gap fallback: no verified card for this county + intent. */
.gap-h {
  margin: 0.9rem 0 0.3rem;
  font-weight: 650;
}
.gap-steps { margin: 0; padding-left: 1.15rem; }
.gap-steps li { margin-bottom: 0.35rem; }
.gap-steps li:last-child { margin-bottom: 0; }
#results > .btn-row { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  /* Instant, not merely fast: skip the stagger delays too. (.answer prefix
     outranks the #results .card entrance rule further down the file.) */
  .answer #results .card,
  .answer:not([hidden]) .answer-head,
  .answer:not([hidden]) .answer-bar,
  .field-error { animation: none; }
}

.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--action);
  color: var(--action-ink);
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  display: inline-grid;
  place-items: center;
  flex: none;
}

.field { margin-bottom: 1.35rem; max-width: 30rem; }

.field label {
  display: block;
  font-weight: 650;
  margin-bottom: 0.45rem;
}

.field select {
  width: 100%;
  min-height: 48px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}
.field select:hover { border-color: var(--ink-faint); }
.field select:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-color: var(--action);
}

.field .hint, .hint { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.4rem; }

/* intent radio cards */
.intent-options {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.intent-options > div { position: relative; } /* keeps each hidden radio on its card */

.intent-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.intent-card {
  position: relative;
  display: block;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.2rem 1.05rem 3.4rem;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion);
}
/* custom radio dot */
.intent-card::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.2rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  background: var(--paper-raised);
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms var(--ease);
}
/* check indicator */
.intent-card::after {
  content: "";
  position: absolute;
  left: calc(1.15rem + 7px);
  top: calc(1.2rem + 4px);
  width: 6px;
  height: 11px;
  border: solid var(--action-ink);
  border-width: 0 2.5px 2.5px 0;
  border-radius: 1px;
  transform: rotate(45deg) scale(0);
  transition: transform 200ms var(--ease);
}

.intent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--ink-faint);
}

.intent-card strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  display: block;
  letter-spacing: -0.005em;
}

.intent-card span { font-size: 0.95rem; color: var(--ink-soft); }

.intent-options input[type="radio"]:checked + .intent-card {
  border-color: var(--action);
  box-shadow: 0 0 0 1.5px var(--action), var(--shadow-lift);
  transform: translateY(-2px);
}
.intent-options input[type="radio"]:checked + .intent-card::before {
  border-color: var(--action);
  background: var(--action);
  transform: scale(1.05);
}
.intent-options input[type="radio"]:checked + .intent-card::after {
  transform: rotate(45deg) scale(1);
}

.intent-options input[type="radio"]:focus-visible + .intent-card {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}

/* ---------- result cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0 2rem;
}
@media (min-width: 46rem) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 70rem) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--ink-faint);
}

/* Stub-card top edge: a row of punched perforation dots, like the card was
   torn from a ticket stub. Add class="card stub-card" for it — plain .card
   (extra-links list on vin.html/learn.html, etc.) is unaffected. */
.stub-card {
  padding-top: 1.9rem;
  position: relative;
  overflow: hidden;
}
.stub-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background-image: radial-gradient(circle, var(--paper) 3.5px, transparent 3.6px);
  background-size: 18px 14px;
  background-position: 9px 0;
  background-repeat: repeat-x;
  border-bottom: 1px dashed var(--hairline);
}

/* ROUTED rubber-stamp: a quick, slightly overshot "thump" — a stamp hitting
   paper, not a gentle fade-in. Interactions easing (fast, snappy), not the
   entrance easing used elsewhere, because a stamp impact is fast/physical. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
  border: 2.5px solid var(--action);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  transform: rotate(-4deg);
  opacity: 0.92;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { .stamp { mix-blend-mode: normal; } }
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-4deg) scale(2.6); }
  55% { opacity: 0.92; transform: rotate(-4deg) scale(0.92); }
  75% { transform: rotate(-4deg) scale(1.06); }
  100% { opacity: 0.92; transform: rotate(-4deg) scale(1); }
}
.stamp.stamp-in { animation: stamp-in 420ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .stamp.stamp-in { animation: none; }
}

/* staggered entrance for wizard results */
#results .card {
  animation: card-in 0.55s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action);
  border: 1.5px solid color-mix(in srgb, var(--action) 45%, transparent);
  background: color-mix(in srgb, var(--action) 8%, transparent);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
}
.card-kind { margin: 0 0 0.7rem; }

.card h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.card-contact { color: var(--ink-soft); font-size: 0.95rem; }

.card-facts { margin: 0.9rem 0 0; padding: 0; font-size: 0.95rem; }
.card-facts > div {
  padding: 0.65rem 0;
  border-top: 1px dashed var(--hairline);
}
.card-facts dt {
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}
.card-facts dd { margin: 0.2rem 0 0; }

.card .limitations {
  margin: 0.9rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.card .limitations li { margin-bottom: 0.35rem; }
.card .limitations li::marker { color: var(--ink-faint); }

.card .verified {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 1rem 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card .verified::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  flex: none;
}

.card .btn { margin-top: auto; }

.card .extra-links {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--hairline);
  font-size: 0.9rem;
  display: grid;
  gap: 0.45rem;
}

/* ---------- topic / learn cards ---------- */

.topic {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem clamp(1.25rem, 4vw, 2rem);
  transition: transform var(--motion), box-shadow var(--motion);
}
.topic:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.topic h2 { margin-top: 0; }
.topic ul { margin: 0; padding-left: 1.2rem; }
.topic li { margin-bottom: 0.6rem; }
.topic li:last-child { margin-bottom: 0; }

/* ---------- "what to do instead" cards ---------- */

.do-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .do-grid { grid-template-columns: repeat(2, 1fr); }
}
.do-card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.35rem 1.5rem;
  transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion);
}
.do-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--action); }
.do-card h3 { font-size: 1.2rem; }
.do-card p { margin: 0; color: var(--ink-soft); }
.do-card p a { font-weight: 600; }

/* ---------- legal document ---------- */

.doc {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: clamp(1.75rem, 5vw, 3rem);
  margin-top: 2rem;
}
.doc h2:first-child { margin-top: 0; }
.doc h2 { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px dashed var(--hairline); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- map ---------- */

.map-wrap { margin: 1.75rem 0 1rem; }

#map {
  height: min(78vh, 40rem);
  min-height: 22rem;
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

/* Teardrop courthouse pin: a 44x52 keyboard button (real touch target) whose
   tip sits on the coordinate; the visible teardrop is the 20px mark inside. */
/* Animates the standalone `translate`/`scale` CSS properties, not `transform`
   — MapLibre positions each marker by setting `style.transform` directly on
   this same element, and an animation targeting `transform` would permanently
   overwrite that positioning once the animation's fill-mode holds its last
   frame (every marker would render pinned to the map's origin corner). */
@keyframes pin-drop {
  0% { opacity: 0; translate: 0 -14px; scale: 0.7; }
  60% { opacity: 1; translate: 0 2px; scale: 1.06; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.map-pin {
  width: 44px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  display: block;
  transform-origin: bottom center;
  animation: pin-drop 420ms var(--ease-entrance) both;
  animation-delay: var(--d, 0ms);
}
.map-pin::before {
  /* the teardrop: a rotated square, tip pointing down at the coordinate */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-bottom: -10px;
  background: var(--action);
  border: 3px solid var(--paper-raised);
  border-radius: 50% 50% 50% 0;
  box-shadow: var(--shadow);
  transform: rotate(-45deg);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff;
}
.map-pin-multi::after { background: var(--warn-soft); }
.map-pin:hover::before { transform: rotate(-45deg) scale(1.14); box-shadow: var(--shadow-lift); }
.map-pin:active::before { background: var(--action-deep); }
.map-pin:focus-visible {
  outline: none;
}
.map-pin:focus-visible::before {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Cluster count bubble: grid-clustered pins below zoom ~10.5. */
/* Same reasoning as pin-drop above: animate the standalone `scale` property,
   never `transform`, on a marker element MapLibre positions via `transform`. */
@keyframes cluster-pop {
  0% { opacity: 0; scale: 0.5; }
  100% { opacity: 1; scale: 1; }
}
.map-cluster {
  border-radius: 50%;
  border: 3px solid var(--paper-raised);
  background: var(--action-deep);
  color: #fff;
  font: 700 0.85rem/1 var(--font-ui);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: scale 180ms var(--ease), box-shadow 180ms var(--ease);
  animation: cluster-pop 320ms var(--ease-entrance) both;
  animation-delay: var(--d, 0ms);
}
.map-cluster:hover { scale: 1.1; box-shadow: var(--shadow-lift); }
.map-cluster:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .map-pin, .map-cluster { animation: none; }
}

/* Layer switcher: Street / Satellite / Terrain / Night. A real MapLibre
   control (stacked in the top-right corner above the zoom control), not a
   freely-positioned overlay, so it never collides with other controls. */
.map-layers {
  display: flex;
  gap: 2px;
  margin: 0 0 10px !important;
  padding: 3px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
}
.map-layer-btn {
  min-height: 36px;
  padding: 0.35rem 0.6rem;
  font: 600 0.78rem/1 var(--font-ui);
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.map-layer-btn:hover { background: var(--paper-sunken); color: var(--ink); }
.map-layer-btn[aria-checked="true"] { background: var(--action); color: var(--action-ink); }
.map-layer-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Top-left panel: courthouse search, then the jump-to-state/county control
   stacked below it. One positioned wrapper so the two controls stack by
   normal flow instead of guessing pixel offsets between them. */
.map-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: min(19rem, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-search-input {
  width: 100%;
  min-height: 44px;
  font: 500 0.95rem/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  box-shadow: var(--shadow);
}
.map-search-input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.map-search-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.map-search-option {
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius) - 4px);
  font: 0.88rem/1.3 var(--font-ui);
  color: var(--ink-soft);
  cursor: pointer;
}
.map-search-option strong { color: var(--ink); font-weight: 600; }
.map-search-option.active, .map-search-option:hover { background: var(--paper-sunken); }

/* Jump-to-state/county: two native selects stacked below the search box in
   the same top-left panel. Native <select> so a state with 100+ counties
   still gets free scrolling and type-ahead-to-jump from the browser. */
.map-jump {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-jump-select {
  width: 100%;
  min-height: 44px;
  font: 500 0.9rem/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  box-shadow: var(--shadow);
}
.map-jump-select:disabled { color: var(--ink-faint); cursor: not-allowed; }
.map-jump-select:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.maplibregl-popup-content {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-lift);
}
.maplibregl-popup-close-button {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  color: var(--ink-soft);
  border-radius: var(--radius);
}
.map-popup h3 {
  margin: 0 0 0.25rem;
  padding-right: 2.25rem;
  font-size: 1.15rem;
}
.map-popup p { margin: 0.15rem 0; font-size: 0.95rem; }
.map-popup .map-popup-county { color: var(--ink-soft); }
.map-popup .btn { margin-top: 0.85rem; }

/* ---------- scroll reveal ---------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s var(--ease);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ---------- page transitions (cross-document) ---------- */
/* A native browser feature, no JS: opting every same-origin navigation into
   this via @view-transition makes the browser itself cross-fade the old and
   new page, which we retheme into a brief directional slide-through — the
   same left-to-right sense of travel as the hero's eastbound traffic.
   Browsers that don't yet support cross-document view transitions (most,
   as of writing) simply ignore this at-rule and navigate exactly as before:
   nothing here can block a navigation or leave a page stuck mid-transition. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: ttr-page-out 320ms var(--ease) both;
}
::view-transition-new(root) {
  animation: ttr-page-in 320ms var(--ease) both;
}
@keyframes ttr-page-out {
  to { opacity: 0; transform: translateX(-2.5%); }
}
@keyframes ttr-page-in {
  from { opacity: 0; transform: translateX(2.5%); }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js .stub .stub-line, html.js .stub .stub-punch { transform: none; }
  .line-in, .hero-el { animation: none; }
  /* ambient backdrop: a still picture — road, fully drawn route, pin */
  .hero-backdrop, .hero-backdrop * { animation: none !important; }
  /* view-transition pseudo-elements live outside the document tree, so the
     universal *, *::before, *::after rule above never reaches them —
     disable them explicitly instead. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- print ---------- */

@media print {
  .site-header .site-nav, .btn-row, .link-btn { display: none; }
  body { background: #fff; }
  body::before, .hero::before, .hero-backdrop, .quickstart { display: none; }
  .hero-stage { padding-bottom: 0; }
  .card, .topic, .trust, .ask { box-shadow: none; break-inside: avoid; }
}

/* ---------- typeahead combobox (check.html) ---------- */
/* Mirrors .field select styling; the dropdown list uses the warm-paper theme. */

.combo { position: relative; }

.combo-input {
  width: 100%;
  min-height: 48px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.6rem 2.4rem 0.6rem 0.85rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  cursor: text;
}
.combo-input::placeholder { color: var(--ink-faint); opacity: 1; }
.combo-input:hover { border-color: var(--ink-faint); }
.combo-input:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-color: var(--action);
}

/* chevron, mirrors the native select affordance */
.combo::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.combo-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--paper-raised);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  max-height: 17rem;
  overflow-y: auto;
}

.combo-option {
  padding: 0.55rem 0.7rem;
  border-radius: calc(var(--radius) - 5px);
  color: var(--ink);
  cursor: pointer;
}
.combo-option:hover { background: var(--paper-sunken); }
.combo-option.active {
  background: var(--action);
  color: var(--action-ink);
}
.combo-option[aria-selected="true"] { font-weight: 650; }

.combo-empty {
  padding: 0.55rem 0.7rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}