/* Simplified access-to applet — mobile-first responsive shell.
   Single column on phones; controls + map stack, info card is a bottom sheet.
   At a wide breakpoint the controls become a left rail and the info card a
   right-side panel. */

/* Ives Street brand (restyle 2026-10-05, Ives-led). Values are the analyst
   applet's tokens.css on main: parchment grounds, slate ink and neutrals (hue
   244), gold as the selected state -- a fill with ink on it, never text or a
   hairline (1.7:1 on parchment). Brand slate carries links, primary buttons,
   headline numbers and rules. The plan ("hypothetical") view is a plate box
   (Taylor's pick C from ives-notes eyeblack/sketches-brand, 2026-10-05). */
@font-face { font-family: "Overpass"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Overpass-400.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/Overpass-600.woff2") format("woff2"); }
@font-face { font-family: "Overpass"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/Overpass-700.woff2") format("woff2"); }
/* Long-form body (About page) only, per the brand spec. Latin subset. */
@font-face { font-family: "Libre Caslon Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/LibreCaslonText-400.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/LibreCaslonText-400italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/LibreCaslonText-700.woff2") format("woff2"); }

:root {
  --bg: #fbf3e1;            /* parchment */
  --raised: #fdfaf2;        /* parchment-raised: panels, cards, controls */
  --band: #f8eace;          /* parchment-band */
  --plate: #f4e1ba;
  --plate-line: #e3c98f;
  --light-slate: #e5eef6;
  --ink: #22303b;           /* ink slate: body + small text */
  --muted: #586e7e;
  --line: #d6e2eb;
  --line-strong: #afbdc8;
  --accent: #3d5467;        /* brand slate */
  --gold: #edb62b;
  --gold-deep: #c79603;
  --gold-wash: #ffedc7;
  --on-dark: #fff;
  --font-ui: "Overpass", "Helvetica Neue", sans-serif;
  --font-body: "Libre Caslon Text", Georgia, serif;
  --sheet-shadow: 0 -2px 16px rgba(34,48,59,0.12);
  --panel-shadow: 0 2px 16px rgba(34,48,59,0.12);
  --pad: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  /* Clip the tap-card's hidden state (translateY/translateX off #app's edge) —
     a transformed descendant otherwise extends the page's scrollable region and
     the "closed" card becomes reachable by scrolling (mobile) or panning right
     (desktop). overflow:clip (not hidden) clips WITHOUT making #app a scroll
     container: `hidden` still permits programmatic scrolling, so Driver.js's
     scrollIntoView during the walkthrough would chase the off-screen card and
     shift the whole layout. `hidden` stays as a fallback for pre-clip browsers.
     The card scrolls internally via its own overflow-y. */
  overflow: hidden;
  overflow: clip;
}
/* <main> is a landmark only — its children must stay direct flex/grid items of #app */
#app > main { display: contents; }

/* ---------- Headline ---------- */
#headline {
  padding: 7px var(--pad) 6px;
  border-bottom: 1px solid var(--line);
}
#headline-main {
  font-size: 1.0rem;   /* it's an <h1> — override the UA heading size/margin */
  font-weight: 650;
  line-height: 1.22;
  margin: 0;
}
#headline-main .num { color: var(--accent); font-weight: 800; }
#headline-main .num.co2 { color: var(--co2); }   /* the Improvement arm's darkest teal */
#headline-main .delta-up { color: #076262; }     /* darkest steps of the improvement arms */
#headline-main .delta-down { color: #7e4504; }
#headline-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
#headline-sub:not(:empty) { margin-top: 3px; }

/* ---------- Controls ---------- */
#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 7px var(--pad);
  border-bottom: 1px solid var(--line);
}
.ctl { display: flex; flex-direction: column; gap: 2px; flex: 1 1 150px; min-width: 130px; }
.ctl-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}
/* Desktop-only static section label for the always-expanded rail sections */
.ctl-head-static { display: none; }
.ctl select {
  font-size: 0.9rem; padding: 5px 7px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--raised); color: var(--ink); width: 100%;
}
/* Shared label column so every row's label|control break lines up at the same
   x (Taylor 2026-07-10). Fixed first column = the labels; control fills the rest
   and can't overflow the rail (minmax(0,1fr) shrinks). Labels wrap within column. */
#controls { --label-w: 132px; }
.ctl-dest { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); align-items: center; gap: 8px; flex: 1 1 100%; }

/* Unified control "field" (Taylor 2026-07-13): one visual language for all four
   top-level controls — a bordered box showing the current value with a down-
   chevron. The two single selects render native inside it; the two collapsible
   headers (scenario / profile) reuse the same box and just expand a panel below.
   Previously selects and accordions looked like two different widgets. */
.ctl-field {
  position: relative; display: block; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; background: var(--raised);
}
.ctl-field:hover { border-color: var(--line-strong); }
.ctl-field::after {                       /* ▾ — one chevron style for all four */
  content: '\25BE'; position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: 0.72rem;
  pointer-events: none; transition: transform 0.15s;
}
.ctl-collapsible.open .ctl-field::after { transform: translateY(-50%) rotate(180deg); }
.ctl-field select {
  appearance: none; -webkit-appearance: none; border: none; background: transparent;
  width: 100%; padding: 5px 26px 5px 8px; font-size: 0.9rem; color: var(--ink);
}
.ctl-field .ctl-summary {
  display: block; padding: 5px 26px 5px 8px; font-size: 0.9rem; color: var(--ink);
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Collapsible scenario / profile sections (accordion) — same label column + field */
.ctl-collapsible { flex: 1 1 100%; gap: 0; }
.ctl-head {
  display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit;
}
.ctl-body { display: none; margin-top: 6px; }
.ctl-collapsible.open .ctl-body { display: block; }

.ctl-profile { flex: 1 1 100%; }
#profile-axes { display: flex; flex-wrap: wrap; gap: 8px; }
#profile-axes select { flex: 1 1 40%; min-width: 110px; font-size: 0.88rem; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
/* The destination's ▾, not the native chevron (Taylor 2026-10-14): a drawn
   triangle in --muted at the .ctl-field::after position. */
#profile-axes select {
  appearance: none; -webkit-appearance: none; padding-right: 24px;
  background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23586e7e'/%3E%3C/svg%3E") no-repeat right 9px center;
}


/* ---------- Map ---------- */
#map-wrap { position: relative; flex: 1 1 auto; min-height: 280px; }
#map { position: absolute; inset: 0; }
.maplibregl-ctrl-attrib { font-size: 11px; }

/* About (Taylor 2026-10-05: easier to find). Desktop: outlined button under
   the sidebar selects. Phone: a button in the legend strip beside "Key ▾". */
.about-link { color: var(--accent); font-weight: 700; text-decoration: none; }
/* Drawn "i" badge — the ⓘ glyph is missing from common fallback fonts. */
.about-i {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: 0.1em;
  width: 1.15em; height: 1.15em; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 0.85em; font-family: Georgia, serif; font-weight: 700; line-height: 1; margin-right: 3px;
}
.about-link:hover { border-color: var(--accent); }
.about-side {
  flex: none; display: block; text-align: center; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 0.95rem;
}
.lg-about { display: none; }
.related-side {
  flex: none; display: block; text-align: center; margin-top: 8px;
  color: var(--accent); font-weight: 600; font-size: 0.85rem; text-decoration: none;
}
.related-side:hover { text-decoration: underline; }

/* Full-width bottom legend bar on mobile (Taylor 2026-07-13): spans the screen,
   the two colour sections sit side by side, the no-data note wraps below. Narrows
   back to a compact bottom-left box at the wide breakpoint (media query below). */
#legend {
  position: absolute; left: 8px; right: 8px; bottom: 24px; z-index: 5;
  background: rgba(253,250,242,0.95); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 11px; box-shadow: var(--panel-shadow);
  font-size: 0.8rem;
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; row-gap: 4px;
}
.lg-sec { margin: 0; }
.lg-title { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 5px; }
.lg-sub { color: var(--muted); font-weight: 500; font-size: 0.82rem; }   /* inline demographic phrase in the title */
.lg-strip-title { display: none; }   /* phone only (below) */
.lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 0; }
.lg-modes { gap: 4px 8px; }
.lg-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lg-chip i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.lg-ramp { display: inline-flex; border-radius: 2px; overflow: hidden; }
.lg-ramp i { width: 24px; height: 14px; display: inline-block; }
.lg-ramp i.lg-grid { box-shadow: inset 0 0 0 1px rgba(61, 84, 103, 0.35); }   /* the zero-change hex outline */
.lg-end { color: var(--muted); }
.lg-dest { font-weight: 700; color: var(--ink); }
.lg-pin { display: inline-block; flex: none; }
.lg-slider { flex: 1 1 120px; min-width: 100px; accent-color: var(--accent); margin: 0; }

/* Transit-route overlay key — short line swatches matching the map layers. */
.lg-transit { gap: 4px 10px; }
.lg-line { width: 20px; height: 0; display: inline-block; border-radius: 2px; }
.lg-line-existing { border-top: 2px solid #8b9bab; }   /* map.js SLATE_GREY */
.lg-line-new { border-top: 3px solid var(--accent); }

/* ---------- Info / tap card ---------- */
#info-card {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--raised); border-top: 1px solid var(--line);
  box-shadow: var(--sheet-shadow);
  max-height: 60%; overflow-y: auto;
  padding: 14px var(--pad) 18px;
  transform: translateY(0); transition: transform 0.18s ease;
}
#info-card.hidden { transform: translateY(110%); pointer-events: none; }
#info-card:focus { outline: none; }   /* programmatic dialog focus — no ring on the container */
/* Padding (not size) grows the touch target to ~44px while the × glyph stays put */
#info-close {
  position: absolute; top: 0; right: 0; border: none; background: none; padding: 10px 12px;
  font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.info-zone-title { font-size: 0.95rem; font-weight: 650; margin-bottom: 2px; }
.info-zone-sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 3px; }
.info-zone-headline { font-size: 0.9rem; font-weight: 600; line-height: 1.25; margin-bottom: 3px; }
/* Clear the absolutely-placed × (Overpass sets wider than the old system face). */
.info-zone-title, .info-zone-headline { padding-right: 30px; }
.info-zone-headline strong { color: var(--accent); }
.info-zone-group { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; }
.mode-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 4px 8px;
  align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.mode-row.head { color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.03em; border-top: none; }
.mode-row.convenient { font-weight: 700; }   /* most convenient (lowest-impedance) mode */
.mode-name { display: flex; align-items: center; gap: 6px; }
.mode-swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.mode-row .was { display: block; color: var(--muted); font-size: 0.72rem; line-height: 1.1; margin-top: 1px; }

/* ---------- Wide breakpoint: rail + side panel ---------- */
@media (min-width: 760px) {
  #app {
    display: grid;
    grid-template-columns: 344px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head head"
      "ctl  map";
    height: 100%;
  }
  /* Polished title bar — plenty of room on desktop, so give the headline larger
     type, generous padding, a constrained measure, and a faint tinted band. */
  #headline {
    grid-area: head; padding: 15px 24px;
    background: linear-gradient(180deg, var(--band) 0%, var(--bg) 100%);
  }
  #headline-main { font-size: 1.3rem; line-height: 1.32; }
  #controls {
    grid-area: ctl; flex-direction: column; flex-wrap: nowrap;
    border-right: 1px solid var(--line); border-bottom: none; align-content: start;
    gap: 14px 10px;
  }
  .ctl, .ctl-profile { flex: 0 0 auto; }
  /* Desktop rail = stacked sections: each of the four controls is a prominent
     header label above its control(s), clearly distinct from the smaller muted
     sub-axis labels beneath it (Arlington bus / Regional rail / …). */
  .ctl-dest { grid-template-columns: 1fr; gap: 4px; }
  .ctl-dest > .ctl-label,
  .ctl-head-static {
    font-size: 0.75rem; font-weight: 700; color: var(--ink); letter-spacing: 0.02em;
  }
  /* Plenty of vertical room in the rail → keep the scenario + profile sections
     always expanded (no accordion). The disclosure button leaves the page
     entirely (a focusable aria-expanded button over an always-open section is
     wrong semantics) and the static section label shows in its place. */
  .ctl-collapsible .ctl-head { display: none; }
  .ctl-head-static { display: block; }
  .ctl-collapsible .ctl-body { display: block; margin-top: 6px; }
  #map-wrap { grid-area: map; }
  #info-card {
    left: auto; right: 16px; bottom: 16px; top: auto; width: 340px;
    max-height: calc(100% - 32px); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--panel-shadow);
  }
  #info-card.hidden { transform: translateX(120%); }
  /* Legend reverts to a compact stacked box bottom-left on desktop (full-width
     only makes sense on the narrow phone layout). */
  /* Legend sits in the sidebar (app.js moves the node; Taylor 2026-10-20): a
     static card in the rail's flow, under the selects. The rail is narrower than
     the old floating box, so each ramp spans the full width with its end labels
     beneath it, and the N/A chip takes its own line. */
  #controls { overflow-y: auto; }
  #legend { position: static; display: block; max-width: none; box-shadow: none;
    background: var(--raised); padding: 12px 14px; font-size: 0.85rem; }
  .lg-sec { margin-bottom: 12px; }
  .lg-sec:last-child { margin-bottom: 0; }
  .lg-row:has(.lg-ramp) { justify-content: space-between; row-gap: 4px; }
  .lg-row > .lg-ramp { order: -1; flex: 1 1 100%; display: flex; }
  .lg-row > .lg-ramp i { flex: 1; }
  .lg-row:has(.lg-ramp) > .lg-chip { flex-basis: 100%; }
}

.hidden-soft { display: none; }

/* Phone-width only: selects at ≥16px so iOS Safari doesn't auto-zoom the viewport
   on focus (pinch-zoom is enabled again for WCAG 1.4.4, which re-arms that
   behavior). Desktop keeps the compact 0.9rem type. The collapsed accordion
   summaries (.ctl-summary) are <span>s, not selects, so they don't get the bump
   automatically — match them to 16px too, otherwise "Ease of access for" and
   the old "Transit scenario" read a hair smaller than the native Destination / growth
   selects beside them. */
@media (max-width: 759.98px) {
  #controls select,
  #controls .ctl-summary { font-size: 16px; }
}

/* =====================================================================
   v2 scenario flow (flow.js) — intro card, choice screens, map screens,
   results box. Ported from the 2026-10-01 layout sketches (Round 3).
   ===================================================================== */
/* Plan (hypothetical) view = a plate box with a deeper plate edge (sketch C). */
:root { --hypo-bg: var(--plate); --hypo-line: var(--plate-line); }

/* ---------- stages ---------- */
/* Intro + flow: the map fills #app; the results chrome is out of the way. */
body:not(.stage-results) #headline,
body:not(.stage-results) #controls,
body:not(.stage-results) #legend,
body:not(.stage-results) #plan-box,
body:not(.stage-results) #info-card,
body:not(.stage-results) #howto { display: none; }
body.stage-results #flow { display: none; }
@media (min-width: 760px) {
  body:not(.stage-results) #app {
    grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "map";
  }
}

/* ---------- shared ---------- */
.fl-btn {
  display: block; width: 100%; border: none; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: var(--on-dark); font: inherit; font-size: 1.05rem;
  font-weight: 700; padding: 14px 16px; text-align: center;
}
.fl-btn.ghost { background: var(--raised); color: var(--ink); border: 1px solid var(--line); }
.fl-link {
  display: block; width: 100%; border: none; background: none; cursor: pointer;
  text-align: center; color: var(--accent); font: inherit; font-size: 0.9rem;
  margin-top: 8px; padding: 6px; text-decoration: underline;
}
.fl-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
#flow h1:focus, #flow h2:focus { outline: none; }   /* programmatic focus targets */

/* ---------- intro: card over the dimmed map ---------- */
.fl-dim { position: absolute; inset: 0; background: rgba(34,48,59,0.45); z-index: 30; }
.fl-introcard {
  position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 31;
  max-height: calc(100% - 32px); overflow-y: auto;
  background: var(--raised); border-radius: 14px; padding: 20px 18px 12px;
  box-shadow: 0 6px 30px rgba(34,48,59,0.25);
}
/* Linked eyeblack × Ives Street logos in place of a text kicker. */
.fl-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.fl-brand a { display: block; line-height: 0; border-radius: 4px; }
.fl-brand img { height: 56px; width: auto; display: block; }
.fl-brand span { color: var(--muted); font-size: 1.1rem; }
.fl-introcard h1 { font-size: 1.45rem; line-height: 1.2; margin: 6px 0 10px; }
.fl-introcard p { font-size: 0.98rem; line-height: 1.45; margin: 0 0 16px; color: var(--ink); }

/* ---------- choice screen ---------- */
.fl-page { position: absolute; inset: 0; z-index: 30; background: var(--bg); overflow-y: auto; }
.fl-page-inner { min-height: 100%; display: flex; flex-direction: column; padding: 16px 22px 20px; }
/* Step bar = step navigation: a segment + its name per step, whole column tappable. */
.fl-progress { margin-bottom: 8px; }
.fl-progress ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fl-progress li { flex: 1; min-width: 0; }
.fl-progress button {
  display: block; width: 100%; min-height: 44px; border: none; background: none; cursor: pointer;
  padding: 6px 0 4px; font: inherit; color: var(--muted); text-align: center; border-radius: 6px;
}
.fl-progress button:hover .fl-bar { filter: brightness(0.9); }
.fl-progress button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fl-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 6px; }
.fl-progress button.on .fl-bar { background: var(--accent); }
.fl-stepname { font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.fl-progress button[aria-current="step"] { color: var(--ink); }
.fl-progress button[aria-current="step"] .fl-stepname { font-weight: 800; }
.fl-changed { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-left: 4px; vertical-align: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fl-q { font-size: 1.5rem; line-height: 1.15; margin: 4px 0 8px; font-weight: 750; }
.fl-qsub { font-size: 0.95rem; line-height: 1.45; color: var(--ink); margin: 0 0 16px; }
.fl-tiles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.fl-tile {
  display: flex; gap: 12px; align-items: center; border: 2px solid var(--line);
  border-radius: 12px; padding: 14px; background: var(--raised); cursor: pointer;
  font: inherit; color: inherit; text-align: left; width: 100%;
}
.fl-tile .em { font-size: 1.7rem; }
.fl-tile b { display: block; font-size: 1.02rem; }
.fl-tile span span { font-size: 0.85rem; color: var(--muted); }
/* Selected = gold (the analyst applet's selected state): deep-gold edge, gold wash. */
.fl-tile.sel { border-color: var(--gold-deep); background: var(--gold-wash); }
.fl-upgrade {
  margin: 0 0 0 30px; display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border-left: 3px solid var(--accent); padding: 8px 0 8px 12px;
}
.fl-upgrade input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.fl-upgrade b { display: block; font-size: 0.98rem; }
.fl-upgrade span span { display: block; font-size: 0.84rem; color: var(--muted); }
.fl-nav { display: flex; gap: 10px; margin-top: auto; }
.fl-btn.outline { background: var(--raised); color: var(--accent); border: 2px solid var(--accent); padding: 12px 16px; }
.fl-mapbtn { margin: auto 0 10px; }   /* sits on the nav row, pinned to the bottom */
.fl-mapbtn + .fl-nav { margin-top: 0; }
.fl-nav .fl-btn.ghost { flex: 0 0 104px; white-space: nowrap; }
/* "Your plan so far" stack above the question */
.fl-sofar { background: var(--light-slate); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px 4px; margin-bottom: 14px; }
.fl-sofar-row { display: flex; justify-content: space-between; align-items: center;
  font-size: 0.95rem; font-weight: 600; padding: 5px 0; border-top: 1px solid var(--line); }
.fl-sofar-row:first-of-type { border-top: none; }
.fl-change { border: none; background: none; cursor: pointer; font: inherit; padding: 4px 0 4px 8px;
  font-size: 0.82rem; font-weight: 600; color: var(--accent); text-decoration: underline; }

/* ---------- map screen ---------- */
.fl-mapcard { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 30; background: var(--raised);
  border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 24px rgba(34,48,59,0.22); }
.fl-mapcard-t { font-size: 1.25rem; font-weight: 750; margin: 2px 0 4px; }
.fl-mapcard-b { font-size: 0.92rem; line-height: 1.4; color: var(--ink); margin-bottom: 12px; }
.fl-ln { display: inline-block; width: 20px; border-top: 4px solid var(--accent); vertical-align: middle; margin-right: 8px; }
.fl-ln-light { border-top: 2px solid var(--accent); opacity: 0.55; }
/* Growth-area key: the map's brand-slate hatch + outline (map.js hatchImage). */
.fl-area { display: inline-block; width: 16px; height: 12px;
  background: repeating-linear-gradient(135deg, var(--accent) 0 1.5px, transparent 1.5px 4px);
  border: 1.5px solid var(--accent); border-radius: 3px; vertical-align: middle; margin-right: 8px; }

#profile-total { font-size: 0.85rem; color: var(--muted); margin: 6px 2px 2px; line-height: 1.35; }

/* ---------- first-arrival "How to read this map" card (flow.js) ---------- */
#howto { position: absolute; z-index: 40; left: 10px; right: 10px; bottom: 150px;
  background: var(--raised); border-radius: 14px; padding: 14px 16px; color: var(--ink);
  box-shadow: 0 4px 24px rgba(34,48,59,0.22); font-family: var(--font-ui); }
#howto[hidden] { display: none; }
.ht-title { font-size: 1.15rem; font-weight: 750; margin-bottom: 6px; }
.ht-lead { font-size: 0.9rem; line-height: 1.4; margin: 0 0 8px; }
.ht-tips { font-size: 0.88rem; line-height: 1.4; margin: 0 0 10px; padding: 0; list-style: none; }
.ht-tips li + li { margin-top: 4px; }
.ht-actions { display: flex; align-items: center; gap: 14px; }
.ht-ok { font: inherit; font-weight: 700; background: var(--gold); color: var(--ink); border: none;
  border-radius: 9px; padding: 8px 18px; cursor: pointer; }
#howto .ht-about { font-size: 0.85rem; font-weight: 600; text-decoration: underline; }
@media (min-width: 760px) {
  #howto { left: 50%; right: auto; top: 50%; bottom: auto; width: 420px; transform: translate(-50%, -50%); }
}

/* ---------- results box (floating, top-left of the map) ---------- */
#plan-box {
  position: absolute; top: 10px; left: 10px; right: 56px; z-index: 7; max-width: 380px;
  background: rgba(253,250,242,0.97); border: 2px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: var(--panel-shadow); display: flex; flex-direction: column; gap: 6px;
}
/* The plan is hypothetical: the box turns plate, with a deeper plate edge. */
#plan-box.hypo { border: 2px solid var(--hypo-line); background: var(--hypo-bg); }
.pb-top { display: flex; gap: 4px; align-items: center; }
.pb-top .pb-seg { flex: 1; }
.pb-more { display: none; border: 1px solid var(--line); background: var(--raised); border-radius: 7px;
  width: 34px; height: 34px; font-size: 1rem; color: var(--ink); font-weight: 800; cursor: pointer; flex: none; }
#plan-box.collapsed { right: auto; }
#plan-box.collapsed .pb-row { display: none; }
#plan-box.collapsed .pb-more { display: block; }
#plan-box.collapsed .pb-seg button { white-space: nowrap; padding: 7px 10px; }
/* Brief (phone, after a finished plan): plan rows hidden, Show row kept. */
#plan-box.brief .pb-plan, #plan-box.brief .pb-missing { display: none; }
#plan-box.brief .pb-more { display: block; }
/* Phone, after ▾: the same button reads ▴ and closes the box again (flow.js boxReturn). */
#plan-box.expanded .pb-more { display: block; }
.pb-seg { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--raised); }
.pb-seg button { flex: 1; border: none; background: none; font: inherit; font-size: 0.86rem; cursor: pointer;
  font-weight: 650; color: var(--muted); padding: 7px 6px; }
.pb-seg button + button { border-left: 1px solid var(--line); }
.pb-seg button.on { background: var(--gold); color: var(--ink); }   /* selected = gold + ink */
.pb-seg-xs { flex: 1; }
.pb-seg-xs button { font-size: 0.76rem; padding: 5px 4px; }
.pb-seg-xs button.on { background: var(--gold); }
.pb-row { display: flex; align-items: center; gap: 8px; padding: 0 4px 2px; }
.pb-row[hidden] { display: none; }
.pb-txt { flex: 1; font-size: 0.8rem; line-height: 1.3; }
.pb-k { font-weight: 800; color: var(--ink); font-size: 0.66rem; letter-spacing: 0.07em;
  text-transform: uppercase; margin-right: 2px; }
.pb-k-muted { color: var(--muted); }
.pb-misslink { border: none; background: none; padding: 0; font: inherit; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pb-edit { border: 1px solid var(--line); background: var(--raised); color: var(--ink); border-radius: 8px;
  font: inherit; font-size: 0.85rem; font-weight: 700; padding: 7px 10px; white-space: nowrap; cursor: pointer; }

/* ---------- desktop: flow screens as panels over the map ---------- */
@media (min-width: 760px) {
  .fl-introcard { left: 50%; right: auto; width: 480px; transform: translateX(-50%); bottom: 32px; }
  .fl-page { inset: 24px auto 24px 50%; width: 520px; transform: translateX(-50%);
    border-radius: 14px; box-shadow: 0 6px 30px rgba(34,48,59,0.25); }
  .fl-mapcard { left: 16px; right: auto; bottom: 16px; width: 420px; }
}

/* ---------- phone: controls folded into the headline; one-row legend ----------
   (Taylor 2026-10-05, map space.) The destination and the group are underlined
   words in the headline sentence; the labelled rows leave the page. Each word
   opens its panel (#controls, above the map) — label on top, controls, Done at
   the end of the last row — and the two behave identically (Taylor 2026-10-05).
   The legend shows one colour row + "Key ▾"; the full key opens on tap. */
.hl-pick { white-space: normal; }
.lg-strip, .ctl-body-label, .ctl-done { display: none; }
@media (max-width: 759.98px) {
  .hl-pick {
    cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 3px;
  }
  .hl-pick::after { content: '\00a0\25BE'; color: var(--accent); font-size: 0.8em; }
  .hl-dest { white-space: nowrap; }
  .hl-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* #controls only appears while a panel is open; the accordion head never
     shows on a phone. */
  #controls { display: none; }
  body.stage-results #controls:has(.open) { display: flex; }
  .ctl-dest, .ctl-profile > .ctl-head { display: none; }
  .ctl-done {
    display: block; flex: none; border: 1px solid var(--line); background: var(--raised);
    border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 700;
    padding: 7px 16px; cursor: pointer; color: var(--ink);
  }
  /* Destination panel: label row, then select | Done. */
  .ctl-dest.open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
  .ctl-dest.open > .ctl-label { grid-column: 1 / -1; }
  /* Profile panel: one wrapping row — label, the three selects, then Done on
     the car select's row (#profile-axes dissolves into the flex row). */
  .ctl-profile.open .ctl-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 0; }
  .ctl-profile .ctl-body-label { display: block; flex: 1 1 100%; margin-bottom: -2px; }
  .ctl-profile #profile-axes { display: contents; }

  /* bottom: clear the MapLibre attribution — 40px is the one-line case; app.js
     tracks the real height (it wraps on narrow phones, shrinks after a pan). */
  #legend { display: block; padding: 7px 8px 7px 11px; bottom: 40px; }
  .lg-strip-title { display: block; margin-bottom: 4px; padding-right: 4px; }
  #legend.open .lg-strip-title { display: none; }   /* the full key carries its own titles */
  .lg-strip { display: flex; align-items: center; gap: 8px; }
  .lg-strip > .lg-row { flex: 1; min-width: 0; }
  .lg-more {
    flex: none; margin-left: auto; border: 1px solid var(--line); background: var(--raised);
    border-radius: 6px; font: inherit; font-size: 0.72rem; font-weight: 700;
    color: var(--accent); padding: 4px 8px; cursor: pointer;
  }
  .about-side, .related-side { display: none; }
  .lg-about {
    display: block; flex: none; border: 1px solid var(--line); background: var(--raised);
    border-radius: 6px; font-size: 0.72rem; padding: 4px 8px; white-space: nowrap;
  }
  .lg-full { display: none; }
  #legend.open .lg-full { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 10px; margin-top: 4px; }
  /* Open: the strip's row gives way to the full key; the toggle stays top-right. */
  #legend.open .lg-strip > .lg-row { display: none; }
  #legend.open .lg-more { position: absolute; top: 5px; right: 8px; }
  #legend.open .lg-about { position: absolute; top: 5px; right: 66px; }
  /* Clear the absolutely-placed About + Hide buttons beside the first title only,
     so the colour row under it keeps the full width. */
  #legend.open .lg-full > .lg-sec:first-child .lg-title { padding-right: 132px; }
  #legend.open .lg-full > .lg-sec { flex: 1 1 100%; }
}

/* ---- Boot overlay: the Ives Street badge, spinning (port of the analyst
   applet's #loading-overlay on main). Ships visible from first paint and
   covers the page until the first screen is ready (app.js hideBoot): the
   intro card, or -- on a return from About -- the first coloured map.
   The mark is inlined as a data URI: the thing that must be on screen before
   anything else can't itself be a request the reader waits on. 288px source
   covers 4x DPI at the 72px display size. 3.2s per turn (Taylor, 2026-09-14):
   a logo has a right way up, and slow reads as a mark turning, not a part
   spinning. */
#loading-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
#loading-overlay[hidden] { display: none; }
#loading-overlay .spinner {
  width: 72px; height: 72px;
  background: url("data:image/png;base64,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") center / contain no-repeat;
  animation: spin 3.2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Readers who ask for less motion get the mark, held still. */
@media (prefers-reduced-motion: reduce) {
  #loading-overlay .spinner { animation: none; }
}