/* Theme: FIELD MANUAL, with two borrowings from the signage direction.
   ==========================================================================
   The site stops looking like a magazine and starts looking like the working
   document behind a piece of infrastructure: a survey report, a traffic count
   sheet, an engineering appendix. Confidence comes from precision rather than
   decoration. Boxes become rules, labels become monospace, radius goes to zero,
   and a faint graph-paper grid says the page was drawn on rather than generated.

   The two borrowings: the key-figures band becomes a real highway guide sign,
   and one hazard stripe marks it. Both are literal quotations of the subject.

   HOW THIS LOADS. Nothing links this file. theme.js adds it only when the URL
   asks for it with ?theme=field, so by default it is never fetched, never
   parsed and never in the service worker shell. styles.css stays the base and
   the canonical home of every token; this file is an override layer and must
   load after it. Deleting this file breaks nothing. */

:root {
  --concrete: #F1F3EE;
  --plate: #FBFCF9;
  --asphalt: #131815;
  --lane: #0B7A46;
  --lane-deep: #07542F;
  --steel: #59665F;
  --faint: #D2D8CE;
  /* A theme-local accent rather than a change to --highviz, which is load
     bearing elsewhere. Chartreuse is a background and a marker here, never a
     text colour, so it cannot quietly fail a contrast check. */
  --flag: #E4FF3B;
  --rule: rgba(19, 24, 21, 0.16);
}

/* ---- the ground ---------------------------------------------------------
   Graph paper at 4.5% ink. Generated, so it costs no request and no bytes,
   and it is on the html element rather than body so it survives the body's
   own background. */
html {
  background-color: var(--concrete);
  background-image:
    linear-gradient(to right, rgba(19, 24, 21, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19, 24, 21, 0.045) 1px, transparent 1px);
  background-size: 2rem 2rem;
}
body { background: transparent; }

/* ---- every label and every number becomes monospace ---------------------
   This is the single biggest lever in the theme. Monospace reads "measured by
   someone who wrote the script"; all-caps condensed reads "made in Canva".
   The tracking comes down at the same time because mono is already wider, and
   without that every label would grow by about 8% and start wrapping.

   Labels and numbers only. A monospace sentence is a different thing from a
   monospace label: it slows reading down by about a fifth and it makes an
   argument look like a log file. So every class below is something you scan,
   never something you read, and the prose classes that were here first
   (.fig-q, .plate-note, .caveat, .calc-note, .uc-note) went back to the serif
   once the first render showed a full paragraph of the peer-campus commentary
   set in mono. */
.topbar-course, .topbar-tag, .hero-eyebrow, .hero-byline, .hero-jump,
.stop-marker, .stencil, .band-label, .band-unit, .bar-lbl, .bar-val,
.fig-note, .fig-legend, .plate th, .chip, .toc-tag,
.rl-desc, .footer-course, .footer-meta, .footer-team, .cite-kind, .search-tag,
.calc-lbl, .jleg-tag, .quote-who, .pb-why, .units,
.scale-cnt, .vs-meta, .vs-cap, .ds-legend, .sort-btn,
.journey-src, .picker-label, .kit-link, .data-cite {
  font-family: var(--data);
  letter-spacing: 0.01em;
  font-weight: 400;
}
.stop-marker, .hero-eyebrow, .toc-tag, .cite-kind, .search-tag, .jleg-tag {
  text-transform: lowercase;
  font-size: 0.78rem;
}
.stop-marker::before, .hero-eyebrow::before { content: '/ '; opacity: 0.45; }

/* ---- nothing is a container any more ------------------------------------
   Radius and shadow are removed by name rather than with a wildcard, so the
   things that are genuinely round (the rider dot on the rail, the stop
   markers) stay round. */
.plate, .plate-wrap, .fig, .band, .band-inner, .faq, .chip, .copy-btn,
.play-cta, .action-card, .kit-card, .uc-card, .friction-card, .route-menu,
.search-panel, .search-trigger, .search-bar, .search-input, .search-chip,
.calc-field, .cite-block, .poster, .qr-wrap, .sprite, .to-top, .netbar,
.uc-chip, .sort-btn, .bar-track, .bar-fill, .scale-col, .cell-bar,
.toc-block, .route-nav-toggle, .glossary, .resource-hub, .email-block,
.data-table, .ds-field, .campus-picker, .vs, .journey, .jleg, .quotes {
  border-radius: 0;
}
.route-menu, .search-panel, .search-trigger, .to-top, .netbar, .fig, .plate,
.action-card, .kit-card, .uc-card, .poster, .friction-card, .route-nav-toggle,
.play-cta, .copy-btn {
  box-shadow: none;
}

/* ---- the route: a list on the page, not a card in front of it -----------
   Only where it actually is a list on the page. Below 1600px this same element
   is a floating overlay on top of the prose, and stripping its background there
   left the text of the page showing straight through the menu, which is a
   defect rather than a style. So the bare-list treatment is scoped to the
   docked rail, and the overlay keeps an opaque panel: hard border, no radius,
   no blurred shadow, which is the field-manual version of a panel rather than
   the base one. */
@media (min-width: 100rem) {
  .route-menu {
    background: transparent;
    border: 0;
    border-top: 2px solid var(--asphalt);
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 99.99rem) {
  .route-menu {
    background: var(--plate);
    border: 2px solid var(--asphalt);
    border-radius: 0;
    box-shadow: 5px 5px 0 rgba(19, 24, 21, 0.18);
  }
}
.route-menu a, .toc-block a {
  border-bottom: 1px solid var(--rule);
}
.toc-group { border: 0; }

/* ---- the header becomes a measuring rule -------------------------------- */
.topbar {
  border-bottom: 2px solid var(--asphalt);
  background: transparent;
}
.topbar-course, .topbar-tag { font-size: 0.7rem; text-transform: uppercase; }

/* ---- the rail gets structural, not decorative --------------------------- */
.lane-rail-line {
  background: repeating-linear-gradient(
    to bottom, var(--asphalt) 0 6px, transparent 6px 14px);
  opacity: 0.35;
  width: 1px;
}
.lane-rail-rider {
  background: var(--flag);
  box-shadow: 0 0 0 2px var(--asphalt);
}

/* ---- the hero actions stop being four identical pills ------------------- */
.hero-jump a {
  border: 0;
  border-bottom: 1px solid var(--asphalt);
  padding: 0.35rem 0 0.3rem;
  background: transparent;
  font-size: 0.82rem;
}
.hero-jump a::before { content: '-> '; color: var(--lane); }
.hero-jump a:hover { background: var(--flag); }

/* ---- borrowing 1: the key figures become a highway guide sign -----------
   A guide sign is a discrete plate, not a full-bleed stripe, so the band gives
   up its own colour and takes the column's padding instead. That is what makes
   the plate line up with the prose above it rather than starting at the window
   edge: the base rule puts padding-left: var(--content-left) on .band-inner,
   and a theme that overrides that padding without moving it onto .band leaves
   the plate hanging off the left of the composition, which is exactly what the
   first render showed.

   The keyline is an outline with a negative offset rather than an inset
   box-shadow, because a real sign carries it inset from the edge by about its
   own width, not flush against it. */
.band {
  background: transparent;
  border: 0;
  padding: 0 var(--edge) 0 var(--content-left);
}
.band-inner {
  background: var(--lane);
  max-width: var(--wide);
  padding: 2.25rem 2rem;
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: -12px;
  border: 0;
}
.band-num, .band-label, .band-unit { color: #FFF; }
.band-num { font-family: var(--display); letter-spacing: -0.01em; }
.band-label { opacity: 0.92; }

/* ---- borrowing 2: one hazard stripe, and only one ----------------------- */
.band::before {
  content: '';
  display: block;
  height: 10px;
  margin-bottom: 1.5rem;
  background: repeating-linear-gradient(
    45deg, var(--asphalt) 0 9px, var(--flag) 9px 18px);
}

/* ---- figures and tables: hairlines and a caption, no card --------------- */
.fig {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--asphalt);
  padding-left: 0;
  padding-right: 0;
}
.fig h3,
.stop > h3 { font-family: var(--display); }
.fig-note, .plate-note { border-left: 0; padding-left: 0; opacity: 0.85; }
.plate { background: transparent; }
/* Column headers only. A row header is a proper noun ("Stanford", "Arizona
   State") and lowercasing it is not a style choice, it is a spelling error,
   which is exactly what the first render showed. */
.plate thead th {
  text-transform: lowercase;
  font-size: 0.72rem;
  border-bottom: 2px solid var(--asphalt);
}
.plate tbody th { text-transform: none; font-size: 0.82rem; }
.plate td { border-bottom: 1px solid var(--rule); }
.bar-track { background: rgba(19, 24, 21, 0.08); }
.bar-fill { background: var(--lane); }
.bar-row.is-hi .bar-fill { background: var(--asphalt); }

/* ---- controls: square, hairline, filled only on hover ------------------- */
/* color: inherit is load-bearing, not tidiness. Two of these controls are
   designed in the base stylesheet as a filled block with near-white text
   (.play-cta on --lane, .kit-link on --lane). Taking the fill away without
   taking the text colour with it left white type on the white page: the
   button was a bare outline until a hover repainted it. Inheriting means the
   label is whatever the surface it sits on is already using, which is the
   right answer on the page and on a dark band both. */
.chip, .copy-btn, .play-cta, .sort-btn, .uc-chip, .search-chip, .kit-link {
  border: 1px solid var(--asphalt);
  background: transparent;
  color: inherit;
  font-family: var(--data);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.chip:hover, .copy-btn:hover, .play-cta:hover, .sort-btn:hover,
.uc-chip:hover, .search-chip:hover, .kit-link:hover {
  background: var(--flag);
  color: var(--asphalt);
}

/* ---- the floating pills stop floating ----------------------------------- */
.search-trigger, .to-top, .route-nav-toggle {
  background: var(--concrete);
  color: var(--asphalt);
  border: 1px solid var(--asphalt);
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}
.search-trigger:hover, .to-top:hover, .route-nav-toggle:hover {
  background: var(--flag);
}

/* ---- footer as a colophon ----------------------------------------------- */
.footer { border-top: 2px solid var(--asphalt); }
.footer-meta, .footer-course { font-size: 0.72rem; }