/* Built for Cars, Banned for Bikes: SYN 100 micromobility project
   Palette: daylight street infrastructure.
   concrete #EFF1EC / asphalt #1A231F / lane green #0E7C4A / high-viz #FFC42E / steel #51605A */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-normal-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-normal-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Barlow-normal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Barlow-normal-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/SourceSerif4-normal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SourceSerif4-italic-400.woff2') format('woff2');
}

:root {
  --concrete: #EFF1EC;
  --plate: #FAFBF8;
  --asphalt: #1A231F;
  --lane: #0E7C4A;
  --lane-deep: #0A5C38;
  --highviz: #FFC42E;
  --steel: #51605A;
  --faint: #C9D0C6;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --utility: 'Barlow', 'Helvetica Neue', sans-serif;
  --body: 'Source Serif 4', Georgia, serif;
  --data: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 41rem;
  --rail-x: max(2.25rem, calc(50vw - 24rem));
  --gutter: 2.25rem;
  --content-left: calc(var(--rail-x) + var(--gutter));
  /* Bar tokens live here, not on .figures. They used to be scoped to the two
     survey sections, so any chart drawn anywhere else painted its fill in an
     undefined colour, which is transparent: correct width, invisible bar. */
  --bar: var(--lane-deep);
  --bar-hi: var(--highviz);
  --bar-mute: rgba(81, 96, 90, 0.3);
  --grid-tick: rgba(26, 35, 31, 0.1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--concrete);
  color: var(--asphalt);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -100vw;
  top: 0;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--asphalt);
  color: #fff;
  font-family: var(--utility);
}
.skip-link:focus { left: 0; }

a { color: var(--lane-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lane); }

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

/* ---- Signature: the lane rail ---- */

.lane-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--rail-x);
  width: 3px;
  margin-left: -1.5px;
  z-index: 1;
}
.lane-rail-line {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--lane) 0,
    var(--lane) 26px,
    transparent 26px,
    transparent 44px
  );
  opacity: 0.85;
  transform-origin: top;
  animation: lane-draw 0.9s ease-out both;
}
@keyframes lane-draw {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.lane-rail-rider {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--highviz);
  border: 4px solid var(--asphalt);
  transform: translate(-50%, 0);
  will-change: top;
}

/* ---- Top bar ---- */

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem 1rem var(--content-left);
  border-bottom: 2px solid var(--asphalt);
  position: relative;
  z-index: 2;
  background: var(--concrete);
}
.topbar p {
  margin: 0;
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar-tag { color: var(--steel); }

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

.hero,
.stop,
.footer {
  padding-left: var(--content-left);
  padding-right: 1.5rem;
  position: relative;
  z-index: 2;
}
.hero > *,
.stop > * {
  max-width: var(--measure);
}

.stencil {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lane-deep);
  margin: 0 0 0.75rem;
}

/* ---- Hero ---- */

.hero { padding-top: clamp(3rem, 9vh, 6rem); padding-bottom: 4rem; }

.hero-eyebrow { margin-bottom: 1.25rem; }

.hero-title {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 11.5vw, 8.25rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: none;
}
.hero-line { display: block; }
.hero-line-painted {
  display: inline-block;
  background: var(--lane);
  color: var(--concrete);
  padding: 0.04em 0.16em 0.08em;
  margin-top: 0.06em;
}

.hero-chevrons {
  color: var(--lane);
  margin: 1.75rem 0 1.25rem;
  animation: chevron-nudge 2.6s ease-in-out infinite;
}
@keyframes chevron-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.hero-thesis {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.hero-byline {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--steel);
  margin: 0;
}
.hero-byline strong { color: var(--asphalt); font-weight: 600; }

/* A departures board under the byline. The two sections carrying the data were
   the two nobody could find, so the hero names them and their numbers outright. */
.hero-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}
.hero-jump a,
.data-back a {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--asphalt);
  background: var(--plate);
  border: 2px solid var(--asphalt);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.hero-jump a:hover,
.data-back a:hover { background: var(--highviz); border-color: var(--asphalt); }
.hero-jump a:focus-visible,
.data-back a:focus-visible { outline: 3px solid var(--lane); outline-offset: 2px; }

/* ---- Stops ---- */

.stop { padding-top: 3.5rem; padding-bottom: 2.5rem; }

.stop-marker { position: relative; }
.stop-marker::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--gutter) - 8px);
  top: 0.1em;
  width: 12px;
  height: 12px;
  background: var(--lane);
  border: 2px solid var(--concrete);
  box-shadow: 0 0 0 2px var(--lane);
}

.stop h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 1.25rem;
}

.stop p { margin: 0 0 1.15rem; }
.stop p:last-child { margin-bottom: 0; }

/* ---- Spec plate table ---- */

.plate-wrap {
  overflow-x: auto;
  margin: 1.75rem 0 1.25rem;
  max-width: 52rem;
}
.plate {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  background: var(--plate);
  border: 2px solid var(--asphalt);
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.45;
}
.plate th, .plate td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--faint);
  vertical-align: top;
}
.plate thead th {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--asphalt);
  color: var(--concrete);
  border-bottom: none;
}
.plate tbody th { font-weight: 600; }
.plate tbody tr:last-child th,
.plate tbody tr:last-child td { border-bottom: none; }
/* Table captions read as the plate's stencilled label, not centred browser default. */
.plate caption {
  caption-side: top;
  text-align: left;
  padding: 0.7rem 0.9rem;
  background: var(--asphalt);
  color: var(--concrete);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plate caption cite { font-style: italic; letter-spacing: 0.06em; }

.plate-note { color: var(--steel); font-style: italic; }

/* ---- The journey ladder: one commute, leg by leg ----
   The argument of this figure is the moment the colour drains out of it, so it
   is built as one continuous spine whose segment colour is set per leg. Each
   leg sets `color` once and the spine, the node, the chip fill and the chip
   border all derive from it through currentColor and color-mix. That is the
   single-source rule applied inside a component: change the hue in one
   declaration and the whole leg follows. The city legs carry a solid spine
   because a graded bikeway is a thing that exists on a map; the campus legs
   carry a dashed one because they are outside the scheme entirely, which is
   the cartographic way of saying there is no data here. */

.journey { margin: 0 0 1.6rem; }

.journey-cap {
  font-family: var(--utility);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--steel);
  margin: 0 0 1.1rem;
}

.journey-legs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jleg {
  position: relative;
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0 1.15rem;
  padding: 0.8rem 0 0.9rem 1.35rem;
  border-left: 3px solid currentColor;
  color: var(--faint);
}

/* The node sits on the spine, so it reads as a stop on a route rather than a
   bullet beside a list. */
.jleg::before {
  content: "";
  position: absolute;
  left: -0.44rem;
  top: 1.05rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--plate);
  border: 3px solid currentColor;
}

/* The ramp. Paint only, then a striped lane, then physical separation, then
   nothing at all. */
.jleg-c3 { color: var(--highviz); }
.jleg-c2 { color: var(--lane); }
.jleg-c4 { color: var(--lane-deep); }
.jleg-edge { color: var(--steel); }
.jleg-none,
.jleg-stop { color: var(--steel); border-left-style: dashed; }
.jleg-stop { color: var(--asphalt); }
.jleg:last-child { padding-bottom: 0.2rem; }

.jleg-tag {
  align-self: start;
  font-family: var(--data);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.34rem 0.2rem;
  border-radius: 0.2rem;
  color: var(--asphalt);
  background: color-mix(in srgb, currentColor 20%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
}

/* The one leg with no bikeway class and no permission gets hatched, the
   convention for a surface that is closed rather than merely unbuilt. */
.jleg-stop .jleg-tag {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 4px,
    color-mix(in srgb, var(--asphalt) 20%, transparent) 4px 8px
  );
}

.jleg-name {
  display: block;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--asphalt);
  margin-bottom: 0.15rem;
}

.jleg-note {
  display: block;
  color: var(--steel);
  font-size: 0.95rem;
  line-height: 1.55;
}

.journey-src {
  font-family: var(--utility);
  font-size: 0.76rem;
  color: var(--steel);
  margin: 1rem 0 0;
}

@media (max-width: 30rem) {
  .jleg { grid-template-columns: 1fr; gap: 0.4rem 0; }
  .jleg-tag { justify-self: start; padding-inline: 0.55rem; }
}

/* ---- Painted stat band ---- */

.band {
  background: var(--lane);
  color: #fff;
  margin: 3rem 0 0;
  position: relative;
  z-index: 2;
  border-top: 6px solid var(--asphalt);
  border-bottom: 6px solid var(--asphalt);
}
.band-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 3rem 1.5rem 3rem var(--content-left);
  max-width: calc(var(--content-left) + 58rem);
}
.band-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  margin: 0 0 0.5rem;
}
.band-label {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  max-width: 16rem;
}
.band-unit {
  font-size: 0.42em;
  letter-spacing: 0.04em;
}

/* ---- Friction cards ---- */

.friction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
  max-width: 52rem;
  margin-top: 1.5rem;
}
.friction-card {
  background: var(--plate);
  border: 2px solid var(--asphalt);
  padding: 1.15rem 1.25rem 1.25rem;
}
.friction-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--lane-deep);
}
.friction-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ---- Playbook ---- */

.playbook-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: play;
}
.playbook-list li {
  counter-increment: play;
  position: relative;
  padding: 0 0 1.15rem 3.25rem;
}
.playbook-list li::before {
  content: counter(play, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.18em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lane);
}

/* ---- Game call to action ---- */

.play-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.85rem 1.5rem;
  background: var(--lane);
  color: var(--concrete);
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--asphalt);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.play-cta:hover {
  background: var(--highviz);
  color: var(--asphalt);
  transform: translateY(-1px);
}
.play-cta svg { flex: none; }

/* ---- Emphasized closing paragraphs ---- */

.playbook-close,
.positionality-limit {
  margin-top: 1.75rem;
  padding-left: 1.15rem;
  border-left: 4px solid var(--lane);
  font-size: 1.02rem;
}
.positionality-limit {
  color: var(--steel);
  font-style: italic;
  border-left-color: var(--steel);
}

/* ---- Ride-smart rules plate ---- */

.rules-note { color: var(--steel); font-style: italic; margin-top: 0.25rem; }

/* ---- Resource hub ---- */

.resource-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.5rem, 100%), 1fr));
  gap: 2rem 2.75rem;
  margin-top: 1.75rem;
  max-width: 55rem;
}
.resource-group h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--lane-deep);
  margin: 0 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--asphalt);
}
.resource-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.resource-links li {
  padding: 0.55rem 0;
  border-bottom: 1px solid #D5DAD1;
}
.resource-links li:last-child { border-bottom: none; }
.resource-links a {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--lane-deep);
  text-decoration: none;
}
.resource-links a:hover { color: var(--lane); text-decoration: underline; }
.rl-desc {
  display: block;
  font-family: var(--body);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--steel);
  margin-top: 0.15rem;
}

/* ---- Action / get-involved cards ---- */

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem;
  max-width: 52rem;
  margin-top: 1.5rem;
}
.action-card {
  background: var(--asphalt);
  color: var(--concrete);
  border: 2px solid var(--asphalt);
  padding: 1.2rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
}
.action-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--highviz);
}
.action-card p {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(239, 241, 236, 0.9);
}
.action-card p:last-child { margin-bottom: 0; }
.action-card a {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--highviz);
  margin-top: auto;
}

/* ---- Sources ---- */

.sources { padding-bottom: 4rem; }
.sources-list {
  margin: 1.25rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
}
.sources-list li { margin-bottom: 0.6rem; }

/* ---- Footer ---- */

.footer {
  border-top: 2px solid var(--asphalt);
  padding-top: 2.25rem;
  padding-bottom: 2.5rem;
  background: var(--asphalt);
  color: var(--concrete);
}
.footer .stencil { color: var(--highviz); }
/* The global link colour is --lane-deep, a dark green tuned for the light page.
   On the asphalt footer that is 1.99:1, which is effectively invisible. Highviz
   is the footer's existing accent and measures 10.11:1. */
.footer a { color: var(--highviz); }
.footer a:hover { color: var(--concrete); }
.footer-team {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.6rem;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.footer-course, .footer-meta, .footer-license {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.3rem;
  color: rgba(239, 241, 236, 0.75);
}

/* ---- Reveal on scroll ---- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Illustration ---- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.poster {
  margin: 2.75rem 0 1.25rem;
  padding-left: var(--content-left);
  padding-right: var(--gutter);
  max-width: calc(var(--content-left) + 60rem);
}
.poster-art {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--asphalt);
  border-radius: 5px;
  background: var(--concrete);
  box-shadow: 0 12px 30px -18px rgba(26, 35, 31, 0.45);
}
.poster figcaption {
  margin-top: 0.7rem;
  font-family: var(--utility);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--steel);
}

.friction-ico {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.55rem;
  color: var(--lane);
}

.mode-ico {
  width: 1.55rem;
  height: 1.55rem;
  vertical-align: -0.35rem;
  margin-right: 0.55rem;
  color: var(--lane-deep);
}

/* ---- Route nav + back to top ---- */

.route-nav {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.route-nav-toggle,
.to-top {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--asphalt);
  color: var(--concrete);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 0.95rem;
  cursor: pointer;
  box-shadow: 0 8px 22px -12px rgba(26, 35, 31, 0.6);
}
.route-nav-toggle:hover,
.to-top:hover { background: var(--lane-deep); }
.to-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.to-top.is-shown { opacity: 1; visibility: visible; }
.route-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6rem);
  width: min(21rem, calc(100vw - 2rem));
  max-height: 72vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* scrolling the menu must not scroll the page under it */
  background: var(--plate);
  border: 2px solid var(--asphalt);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 18px 40px -20px rgba(26, 35, 31, 0.6);
  display: none;
}
.route-menu.is-open { display: block; }
.route-menu h2 {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0.2rem 0.4rem 0.6rem;
}
.route-menu ol { list-style: none; margin: 0; padding: 0; }
.route-menu a {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  font-family: var(--utility);
  font-size: 0.92rem;
  color: var(--asphalt);
  text-decoration: none;
  padding: 0.42rem 0.4rem;
  border-radius: 5px;
}
.route-menu a:hover,
.route-menu a:focus { background: var(--concrete); color: var(--lane-deep); }
.route-menu .toc-tag {
  font-family: var(--display);
  color: var(--lane);
  min-width: 2.3rem;
  font-weight: 700;
}
/* 23 flat entries scanned as a wall, so the menu is grouped. The group label is
   how someone hunting for the charts finds them without reading all 23. */
.route-menu .toc-group {
  font-family: var(--utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0.85rem 0.4rem 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--faint);
}
.route-menu .toc-block:first-of-type .toc-group {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* A thumb needs more than a mouse does, so touch gets taller rows. */
@media (hover: none) and (pointer: coarse) {
  .route-menu a { padding: 0.6rem 0.4rem; }
}
/* Deliberately one column at every width. Two columns needs either `columns`
   (which fragments sideways inside a max-height box and hides the last group in
   a column nobody can scroll to) or a fixed grid (whose row heights couple a
   one-item group to a seven-item one and leave a void). One column scrolls. */

/* ---- Trip calculator ---- */

.calc {
  margin-top: 1.5rem;
  border: 2px solid var(--asphalt);
  border-radius: 8px;
  background: var(--plate);
  padding: 1.5rem;
}
.calc-controls { display: grid; gap: 1.35rem; }
.calc-field { display: grid; gap: 0.4rem; }
.calc-field label {
  font-family: var(--utility);
  font-weight: 600;
  color: var(--asphalt);
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.calc-field .calc-val { color: var(--lane-deep); font-weight: 700; }
.calc-field input[type="range"] { width: 100%; accent-color: var(--lane); height: 1.4rem; }
.calc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(26, 35, 31, 0.15);
}
.calc-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 2.7rem);
  line-height: 1;
  color: var(--lane-deep);
}
.calc-lbl { font-family: var(--utility); font-size: 0.82rem; color: var(--steel); margin-top: 0.4rem; }
.calc-takeaway { margin-top: 1.3rem; font-style: italic; color: var(--asphalt); }
.calc-note { margin-top: 0.6rem; font-size: 0.8rem; color: var(--steel); }

/* ---- Comparison table ---- */

.plate tbody tr.is-ucsd { background: rgba(14, 124, 74, 0.1); }
.plate tbody tr.is-ucsd th { color: var(--lane-deep); }

/* ---- Campus resource finder ---- */
.campus-picker { margin-top: 1.6rem; }
.campus-picker label,
.picker-label {
  display: block;
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--asphalt);
  margin: 0 0 0.6rem;
}
/* A route board, not a dropdown. All ten campuses are visible at once, so the
   answer is one tap away and no phone opens an OS wheel picker over the page. */
.uc-chips,
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.uc-chip,
.chip {
  font-family: var(--utility);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--asphalt);
  background: var(--plate);
  border: 2px solid var(--asphalt);
  border-radius: 0;
  padding: 0.5rem 0.8rem;
  min-height: 2.75rem; /* 44px, the smallest thumb-safe target */
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.uc-chip:hover,
.chip:hover { border-color: var(--lane); color: var(--lane-deep); }
.uc-chip[aria-checked="true"],
.chip[aria-checked="true"] {
  background: var(--lane-deep);
  border-color: var(--lane-deep);
  color: var(--plate);
}
.uc-chip:focus-visible,
.chip:focus-visible { outline: 3px solid var(--highviz); outline-offset: 2px; }
.campus-picker .calc-note { margin-top: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .uc-chip,
  .chip { transition: none; } }
.uc-result:not(:empty) { margin-top: 1.4rem; }
.uc-card {
  border: 1px solid var(--steel);
  border-left: 4px solid var(--lane);
  background: var(--plate);
  padding: 1.4rem 1.5rem;
}
.uc-card h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--asphalt);
  margin: 0 0 0.5rem;
}
.uc-badge {
  display: inline-block;
  font-family: var(--utility);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lane-deep);
  background: rgba(14, 124, 74, 0.12);
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.85rem;
}
.uc-facts { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.uc-facts li { margin: 0.4rem 0; color: var(--asphalt); }
.uc-facts .uc-lbl {
  font-family: var(--utility);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel);
  display: block;
  margin-bottom: 0.05rem;
}
.uc-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.15rem; margin: 0; padding: 0; list-style: none; }
.uc-links a {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--lane-deep);
  text-decoration: none;
  border-bottom: 2px solid rgba(14, 124, 74, 0.35);
  padding-bottom: 1px;
}
.uc-links a:hover { border-bottom-color: var(--lane); }
.uc-note {
  font-family: var(--utility);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--steel);
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(81, 96, 90, 0.28);
}

/* ---- FAQ accordion ---- */
.faq-list { margin-top: 1.5rem; border-top: 1px solid var(--steel); }
.faq { border-bottom: 1px solid var(--steel); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.28rem;
  line-height: 1.15;
  color: var(--asphalt);
  padding: 0.95rem 2rem 0.95rem 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.15rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--utility);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--lane);
  line-height: 1;
}
.faq[open] summary::after { content: "-"; }
.faq summary:focus-visible { outline: 3px solid var(--lane); outline-offset: 3px; }
.faq p {
  margin: 0 0 1.05rem;
  max-width: var(--measure);
  color: var(--asphalt);
}
.faq p a { color: var(--lane-deep); }

/* ---- Toolkit ---- */

.toolkit-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  margin-top: 1.5rem;
}
/* three cards in two columns left the third one stranded beside a void, so the
   last card closes the row instead */
@media (min-width: 52rem) {
  .toolkit-grid { grid-template-columns: 1fr 1fr; }
  .toolkit-grid .kit-card:last-child { grid-column: 1 / -1; }
}
.kit-card {
  border: 2px solid var(--asphalt);
  border-radius: 8px;
  padding: 1.25rem;
  background: var(--plate);
  display: flex;
  flex-direction: column;
}
.kit-card h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--asphalt);
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.kit-card p { margin: 0 0 0.9rem; }
.email-block {
  font-family: var(--utility);
  font-size: 0.88rem;
  line-height: 1.5;
  background: var(--concrete);
  border: 1px solid rgba(26, 35, 31, 0.18);
  border-radius: 6px;
  padding: 0.9rem;
  white-space: pre-wrap;
  color: var(--asphalt);
  max-height: 16rem;
  overflow-y: auto;
  margin: 0 0 0.9rem;
}
/* One action row per card, pinned to the bottom. Putting margin-top:auto on the
   buttons themselves made two of them in one card butt into each other. */
.kit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.35rem;
}
.copy-btn,
.kit-link {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--lane);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.copy-btn:hover,
.kit-link:hover { background: var(--lane-deep); }
.copy-btn.is-copied { background: var(--highviz); color: var(--asphalt); }
/* absorb the leftover height so the code sits centred in a tall card instead of
   leaving a void under it */
.qr-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
}
.qr-wrap img {
  width: 9.5rem;
  height: 9.5rem;
  border: 1px solid rgba(26, 35, 31, 0.15);
  border-radius: 6px;
  background: #ffffff;
  padding: 0.4rem;
  image-rendering: pixelated;
}

/* ---- Glossary + credits ---- */

.glossary { margin-top: 0.5rem; }
.glossary dt {
  font-family: var(--display);
  font-weight: 700;
  color: var(--lane-deep);
  font-size: 1.15rem;
  margin-top: 1rem;
}
.glossary dd { margin: 0.25rem 0 0; }
.ack p { color: var(--steel); }

/* The licence block. Set apart from the acknowledgements above it with a rule
   rather than a box, because someone scrolling for reuse terms is scanning for
   a heading, and a box would read as another aside to skip. */
.reuse {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--asphalt);
}
.reuse h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  color: var(--lane-deep);
  margin: 0 0 0.6rem;
}
.reuse p { color: var(--steel); margin: 0 0 0.7rem; }
.reuse p:last-child { margin-bottom: 0; }

.credit-roles { list-style: none; padding: 0; margin: 1rem 0 0; }
.credit-roles li { margin: 0 0 0.55rem; }
.credit-roles strong { font-family: var(--utility); color: var(--asphalt); }

/* ---- Survey figures: plotted like painted signage ---- */

.fig {
  background: var(--plate);
  border: 2px solid var(--asphalt);
  padding: 1.2rem 1.3rem 1.3rem;
  margin-top: 1.5rem;
  max-width: 52rem;
}
.fig-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
  max-width: 52rem;
}
.fig-pair .fig { margin-top: 0; max-width: none; }
.fig h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.3rem;
  color: var(--lane-deep);
}
.fig-q {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--steel);
  margin: 0 0 1rem;
}
.fig-q b { font-weight: 600; color: var(--asphalt); }
.fig-note {
  font-family: var(--utility);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--steel);
  margin: 0.9rem 0 0;
}
.fig-hero {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.fig-hero b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  line-height: 0.86;
  color: var(--lane-deep);
  flex: none;
}
.fig-hero span {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Horizontal count bars */
.bars { margin: 0; padding: 0; list-style: none; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr 4.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 2px 0;
}
.bar-lbl {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.84rem;
  line-height: 1.3;
}
.bar-track {
  position: relative;
  height: 1.6rem;
  border-left: 2px solid var(--asphalt);
  background-image: repeating-linear-gradient(to right, var(--grid-tick) 0 1px, transparent 1px 25%);
}
.bar-fill {
  display: block;   /* a span stays inline, and width does nothing to an inline box */
  height: 100%;
  width: calc(var(--pct) * 1%);
  min-width: 3px;
  background: var(--bar);
  border-radius: 0 4px 4px 0;
}
.bar-row.is-hi .bar-fill {
  background: var(--bar-hi);
  box-shadow: inset 0 0 0 2px var(--asphalt);
}
.bar-row.is-mute .bar-fill {
  background: var(--bar-mute);
  box-shadow: inset 0 0 0 1.5px rgba(81, 96, 90, 0.5);
}
.bar-val {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--asphalt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-val i {
  font-family: var(--utility);
  font-style: normal;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--steel);
  margin-left: 0.3rem;
}

/* Bars paint in as the section scrolls into view */
.stop .bar-fill { width: 0; transition: width 0.85s cubic-bezier(0.22, 0.68, 0.32, 1); }
.stop.is-visible .bar-fill { width: calc(var(--pct) * 1%); }

/* One square per respondent */
.units {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 21rem;
}
.units li {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--asphalt);
  border-radius: 2px;
  background: transparent;
}
.units li.is-hi { background: var(--bar-hi); }
.units li.is-on { background: var(--bar); }
.units li.is-mute { background: var(--bar-mute); }

/* One vehicle glyph per rider */
.glyphs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.glyphs svg {
  width: 2.2rem;
  height: 2.2rem;
  display: block;
  color: rgba(81, 96, 90, 0.38);
}
.glyphs li.is-on svg { color: var(--lane-deep); }

.fig-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.95rem 0 0;
  padding: 0;
  list-style: none;
}
.fig-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.78rem;
}
.fig-legend i {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--asphalt);
  border-radius: 2px;
  flex: none;
}
.fig-legend .sw-hi { background: var(--bar-hi); }
.fig-legend .sw-on { background: var(--bar); }
.fig-legend .sw-mute { background: var(--bar-mute); }
.fig-legend .sw-off { background: transparent; }

/* Five-point scale columns */
.scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  height: 8.5rem;
  border-bottom: 2px solid var(--asphalt);
  margin-top: 1.4rem;
}
.scale-col { position: relative; }
.scale-col::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--pct) * 1%);
  background: var(--step);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.scale-cnt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--pct) * 1% + 5px);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--asphalt);
}
.scale-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 0.45rem;
}
.scale-axis span {
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--steel);
}
.scale-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--steel);
  margin: 0.15rem 0 0;
}

/* Table fallback for every figure */
.fig-data { margin-top: 1rem; }
.fig-data summary {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--lane-deep);
  cursor: pointer;
}
.fig-data table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.65rem;
  font-family: var(--utility);
  font-size: 0.8rem;
}
/* Each of these tables sits behind a summary that says only "View as a table",
   so out of context, in a screen reader's list of tables, they are four
   identical rows. The caption is what tells them apart. It is visible rather
   than screen-reader-only because a sighted reader who opened the disclosure
   benefits from the same label. */
.fig-data caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.5rem;
  color: var(--steel);
  font-size: 0.72rem;
  line-height: 1.4;
}
.fig-data th,
.fig-data td {
  text-align: left;
  padding: 0.32rem 0.5rem 0.32rem 0;
  border-bottom: 1px solid rgba(26, 35, 31, 0.12);
}
.fig-data thead th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
}
.fig-data td:last-child,
.fig-data th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* The finding that argues against us */
.caveat {
  background: var(--plate);
  border: 2px solid var(--asphalt);
  border-left: 10px solid var(--highviz);
  padding: 1.2rem 1.3rem 1.3rem;
  margin-top: 1.5rem;
  max-width: 52rem;
}
.caveat h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: var(--asphalt);
}
.caveat ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.caveat li { margin-bottom: 0.5rem; }
.caveat li:last-child { margin-bottom: 0; }

/* ---- Field observation: the same count at two campuses ---- */

.vs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
  margin: 0 0 1rem;
}
.vs-side {
  border: 2px solid var(--asphalt);
  background: var(--concrete);
  padding: 0.9rem 1rem 1rem;
}
.vs-cap {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lane-deep);
  margin: 0;
}
.vs-num {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 4.6rem);
  line-height: 0.86;
  margin: 0.2rem 0 0;
}
.vs-num span {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.vs-meta {
  font-family: var(--utility);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--steel);
  margin: 0.35rem 0 0.7rem;
}
.vs-side .units { max-width: none; }
.vs-rate {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0.7rem 0 0;
  padding-top: 0.55rem;
  border-top: 2px solid var(--asphalt);
}

/* Provision matrix: the verdict column reads before the words do */
.plate td.is-yes { font-weight: 600; color: var(--lane-deep); }
.plate td.is-no { color: var(--steel); }

/* A count of zero is drawn as nothing, never as a sliver of bar */
.bar-row.is-zero .bar-fill { min-width: 0; }

/* Interview pull quotes */
.quotes { margin: 0; padding: 0; list-style: none; }
.quotes li + li { margin-top: 1.1rem; }
.quotes blockquote {
  margin: 0;
  border-left: 6px solid var(--highviz);
  padding: 0.1rem 0 0.1rem 0.85rem;
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.5;
}
.quote-who {
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0.4rem 0 0 calc(6px + 0.85rem);
}

/* ---- Offline notice: the network drops, the argument does not ---- */

.netbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem 0.7rem 1.1rem;
  background: var(--asphalt);
  color: var(--concrete);
  border-top: 4px solid var(--highviz);
  transform: translateY(110%);
  transition: transform 0.28s ease-out;
}
.netbar.is-up { transform: translateY(0); }
/* lift the to-top button clear of the notice while it is up */
body:has(.netbar.is-up) .to-top { bottom: 5.75rem; }

.netbar-lamp {
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--highviz);
  animation: netbar-pulse 1.8s ease-in-out infinite;
}
@keyframes netbar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

.netbar-text {
  margin: 0;
  flex: 1 1 16rem;
  font-family: var(--utility);
  font-size: 0.85rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--concrete) 78%, var(--asphalt));
}
.netbar-text strong { color: var(--concrete); font-weight: 600; }

.netbar-go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--highviz);
  color: var(--asphalt);
  padding: 0.45rem 0.9rem;
  flex: none;
}
.netbar-go:hover { background: var(--concrete); color: var(--asphalt); }

.netbar-x {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 2px solid color-mix(in srgb, var(--concrete) 32%, var(--asphalt));
  color: var(--concrete);
  cursor: pointer;
}
.netbar-x:hover { border-color: var(--concrete); }
.netbar-x svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .netbar { transition: none; }
  .netbar-lamp { animation: none; }
}

/* ---- Site search ---- */

/* The trigger joins the pill cluster in .route-nav on the argument page, and
   docks itself bottom-right on any page that has no route nav. */
.search-trigger {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--asphalt);
  color: var(--concrete);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 0.95rem;
  cursor: pointer;
  box-shadow: 0 8px 22px -12px rgba(26, 35, 31, 0.6);
}
.search-trigger:hover { background: var(--lane-deep); }
.search-dock {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(26, 35, 31, 0.55);
  display: flex;
  justify-content: center;
  padding: 6vh 1rem 1rem;
  overflow-y: auto;
}
.search-overlay[hidden] { display: none; }
body.search-open { overflow: hidden; }

.search-panel {
  width: min(46rem, 100%);
  max-width: 100%;
  min-width: 0;
  align-self: flex-start;
  background: var(--plate);
  border: 2px solid var(--asphalt);
  border-radius: 4px;
  box-shadow: 0 30px 60px -30px rgba(26, 35, 31, 0.8);
  display: flex;
  flex-direction: column;
  max-height: 84vh;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 2px solid var(--asphalt);
  /* A flex item refuses to shrink below its content's intrinsic width unless
     told to, and a search input's UA width is wide. Measured fine at 320px
     without this, but the margin is a few pixels, so keep the shrink explicit. */
  min-width: 0;
}
.search-input {
  flex: 1 1 0;
  width: 100%;
  font-family: var(--utility);
  font-size: 1.0625rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--faint);
  border-radius: 3px;
  background: var(--concrete);
  color: var(--asphalt);
  min-width: 0;
}
.search-input:focus-visible { outline: 3px solid var(--lane); outline-offset: 1px; }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search-close {
  flex: 0 0 auto;
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--asphalt);
  color: var(--concrete);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}
.search-close:hover { background: var(--lane-deep); }

.search-status {
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
  padding: 0.5rem 0.9rem 0;
}
.search-status:empty { display: none; }

.search-results {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
}
.search-hit {
  display: block;
  padding: 0.7rem 0.75rem;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}
.search-hit + .search-hit { border-top: 1px solid var(--faint); }
.search-hit.is-active,
.search-hit:hover {
  background: var(--concrete);
  border-left-color: var(--lane);
}
.search-where {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lane-deep);
  margin-bottom: 0.2rem;
}
.search-tag {
  margin-left: 0.4rem;
  background: var(--highviz);
  color: var(--asphalt);
  border-radius: 2px;
  padding: 0.05rem 0.3rem;
  letter-spacing: 0.05em;
}
.search-snip {
  display: block;
  font-size: 0.94rem;
  line-height: 1.55;
}
.search-snip mark {
  background: var(--highviz);
  color: var(--asphalt);
  padding: 0 0.1em;
  border-radius: 2px;
}
.search-empty { padding: 1rem 0.75rem; margin: 0; }
.search-hint { padding: 0.9rem 0.75rem; }
.search-hint p { margin: 0 0 0.7rem; color: var(--steel); }
.search-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.search-chip {
  font-family: var(--utility);
  font-size: 0.78rem;
  background: var(--concrete);
  color: var(--asphalt);
  border: 1px solid var(--faint);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.search-chip:hover { border-color: var(--lane); color: var(--lane-deep); }

/* Landing on an anchor gives no sense of why you are there, so the section
   the reader chose is marked briefly before it settles. */
.search-target {
  animation: search-flash 1.8s ease-out 1;
}
@keyframes search-flash {
  0%, 45% { background: rgba(255, 196, 46, 0.34); }
  100% { background: transparent; }
}

@media (max-width: 44rem) {
  .search-overlay { padding: 0; }
  .search-panel {
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border: none;
    border-radius: 0;
  }
  .search-trigger span { display: none; }
  .search-trigger { padding: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .search-target { animation: none; outline: 3px solid var(--highviz); }
}

/* ---- Print ---- */

@media print {
  .lane-rail, .route-nav, .to-top, .topbar, .skip-link, .play-cta, .calc, .netbar,
  .search-overlay, .search-dock, .search-trigger { display: none !important; }
  html, body { background: #ffffff; color: #000000; }
  main, .stop, .hero { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .stop > *, .hero > * { max-width: none; }
  .poster-art { border: 1px solid #000000; }
  .stop, .band, .poster, .action-card, .kit-card, .friction-card, .fig, .caveat, .vs-side, .quotes li { break-inside: avoid; }
  .bar-fill, .scale-col::after, .units li, .fig-legend i {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .stop .bar-fill { width: calc(var(--pct) * 1%); transition: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.72em; color: #444444; word-break: break-all; }
  /* A printed page has no origin, so a bare /collisions-corridor.csv is a dead
     reference. Same treatment as an external link, with the origin restored. */
  a[href^="/"]::after { content: " (syn100-micromobility.vercel.app" attr(href) ")"; font-size: 0.72em; color: #444444; word-break: break-all; }
  @page { margin: 18mm 14mm; }
  /* A table that spans a page break loses its header, and a column of bare
     numbers with no header is not evidence any more. */
  thead { display: table-header-group; }
  tr, .bar-row, .plate-note, .fig-note, .fig-q { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  /* The horizontal scroller is a screen affordance. On paper it clips. */
  .plate-wrap, .table-wrap { overflow: visible !important; }
  .plate { font-size: 0.82rem; }
  /* Everything folded into a <details> is still part of the argument, and on
     paper there is nothing to click. Print it open. */
  details > *:not(summary) { display: block !important; }
  details > summary { list-style: none; font-weight: 600; }
}

/* ---- Responsive ---- */

@media (max-width: 720px) {
  :root { --rail-x: 1.4rem; --gutter: 1.35rem; }
  .poster { margin-top: 1.75rem; }
  .mode-ico { width: 1.3rem; height: 1.3rem; margin-right: 0.4rem; vertical-align: -0.28rem; }
  .lane-rail-rider { width: 14px; height: 14px; border-width: 3px; }
  .stop-marker::before { width: 10px; height: 10px; left: calc(-1 * var(--gutter) - 7px); }
  .band-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .band-label { max-width: none; }
  .bar-row {
    grid-template-columns: 1fr 4.5rem;
    grid-template-areas: "lbl lbl" "track val";
    gap: 0.2rem 0.75rem;
    padding: 4px 0;
  }
  .bar-row > .bar-lbl { grid-area: lbl; }
  .bar-row > .bar-track { grid-area: track; }
  .bar-row > .bar-val { grid-area: val; }
  .fig, .caveat { padding-left: 1rem; padding-right: 1rem; }
  .units { max-width: none; }
}


/* ---- The data page ---- */
/* A reader who cannot check a number has to trust us instead, and a raw CSV
   opened in a browser is technically published and practically unreadable. This
   is the viewer: the same poster furniture as the main page, wrapped around a
   real table. */

.data-shell {
  width: min(74rem, 100%);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.1rem, 4vw, 2.5rem) 3rem;
}
.data-shell .rule {
  height: 6px;
  margin: 1rem 0 1.5rem;
  background: repeating-linear-gradient(90deg, var(--asphalt) 0 26px, transparent 26px 44px);
}
.stencil .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.55rem;
  background: var(--highviz);
  border: 2px solid var(--asphalt);
}
.data-h1 {
  margin: 0 0 1.25rem;
  max-width: 30ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.painted {
  display: inline-block;
  background: var(--lane);
  color: var(--concrete);
  padding: 0.02em 0.18em 0.06em;
}
.data-lead {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}
.data-back { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.75rem; }

.ds-blurb { max-width: var(--measure); margin: 1.1rem 0 1.5rem; color: var(--steel); }

.ds-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.6rem;
}
.ds-field { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ds-field label {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
}
.ds-field input {
  width: min(21rem, 100%);
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  font-family: var(--utility);
  font-size: 0.95rem;
  color: var(--asphalt);
  background: var(--plate);
  border: 2px solid var(--asphalt);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.ds-field input:focus-visible { outline: 3px solid var(--highviz); outline-offset: 2px; }
/* The row count is the headline of this page, so it is set like one. */
.ds-count {
  margin: 0 auto 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.ds-sortnote {
  margin: 0 0 0.7rem;
  font-family: var(--utility);
  font-size: 0.8rem;
  color: var(--steel);
}

.table-wrap {
  max-height: 78vh;
  overflow: auto;
  overscroll-behavior: contain; /* running out of table must not scroll the page */
  background: var(--plate);
  border: 2px solid var(--asphalt);
}
.table-wrap:focus-visible { outline: 3px solid var(--lane); outline-offset: 2px; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--utility);
  font-size: 0.92rem;
}
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  background: var(--asphalt);
  color: var(--concrete);
}
.sort-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.data-table th.is-num .sort-btn { justify-content: flex-end; }
.sort-btn:hover { color: var(--highviz); }
.sort-btn:focus-visible { outline: 3px solid var(--highviz); outline-offset: -3px; }
.sort-mark { font-style: normal; font-size: 0.7em; color: var(--highviz); width: 0.85em; }

.data-table tbody td {
  padding: 0.5rem 0.7rem;
  vertical-align: top;
  border-top: 1px solid var(--faint);
  overflow-wrap: break-word;
}
.data-table tbody tr:hover td { background: rgba(255, 196, 46, 0.16); }
.data-table td.is-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-table td.has-bar { min-width: 11rem; }
/* Columns that hold the same value on every row of a group are said once, in
   the group header, instead of being repeated down the table. */
.data-table tr.grp th {
  padding: 0.75rem 0.7rem;
  text-align: left;
  background: var(--concrete);
  border-top: 2px solid var(--asphalt);
  border-bottom: 1px solid var(--asphalt);
}
.data-table tr.grp strong {
  display: block;
  max-width: 68ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.data-table tr.grp .grp-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--steel);
}
/* Reuse the findings bars for the share column, deliberately a shade lighter
   than the page default so a table full of them does not go solid. Both tokens
   are real local overrides of the :root values, not restatements of them. */
.cell-bar {
  --bar: var(--lane);
  --grid-tick: rgba(26, 35, 31, 0.12);
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) 3.2rem;
  align-items: center;
  gap: 0.6rem;
}
.cell-bar .bar-track { height: 0.85rem; }
.cell-bar b { font-weight: 600; font-variant-numeric: tabular-nums; }

.yn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}
.yn i { display: block; width: 0.7rem; height: 0.7rem; border: 2px solid currentColor; }
.yn.is-yes { color: var(--lane-deep); }
.yn.is-yes i { background: var(--lane); border-color: var(--lane-deep); }

.ds-empty { margin: 0; padding: 1.25rem; font-family: var(--utility); color: var(--steel); }

.ds-legend-wrap { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 2px solid var(--asphalt); }
.ds-legend-wrap summary {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ds-legend {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.95rem;
}
.ds-legend dt {
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ds-legend dd { margin: 0; color: var(--steel); }
.ds-rawline { margin: 0.9rem 0 0; font-family: var(--utility); font-size: 0.82rem; color: var(--steel); }
.ds-noscript {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: var(--plate);
  border: 2px solid var(--asphalt);
}

.data-cite { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 6px solid var(--asphalt); }
.data-cite h2 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.data-cite > p { max-width: var(--measure); }
.cite-row {
  display: grid;
  /* min() everywhere an auto-fit floor could exceed the container: at a 320px
     viewport the content box is 284.8px, and a bare 19rem floor overflowed it. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.cite-block {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
  background: var(--plate);
  border: 2px solid var(--asphalt);
}
.cite-block.is-wide { grid-column: 1 / -1; }
.cite-kind {
  margin: 0;
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lane-deep);
}
.cite-text { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.cite-text.is-code {
  font-family: var(--data);
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
}
.cite-block .copy-btn { align-self: flex-start; margin-top: auto; }

.data-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--asphalt);
  font-family: var(--utility);
  font-size: 0.78rem;
  color: var(--steel);
}
.data-footer b { color: var(--asphalt); font-weight: 600; }

@media (max-width: 40rem) {
  .ds-legend { grid-template-columns: 1fr; }
  .ds-legend dd { margin-bottom: 0.55rem; }
  .ds-count { font-size: 1.3rem; }
  .table-wrap { max-height: 70vh; }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lane-rail-line { animation: none; }
  .hero-chevrons { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stop .bar-fill { width: calc(var(--pct) * 1%); transition: none; }
}