/* pevra.org additions. flow-web.css is vendored and never edited; every
   PEVRA-specific token or rule lives here. Loaded AFTER flow-web.css. */
:root {
  /* Legal status triad. Deliberately NOT the SOC bands (--success/--warning/
     --danger): a battery colour must never read as a legal verdict. */
  --verdict-ok:      #7FD1FF;   /* permitted (expressly or with conditions) */
  --verdict-cond:    #FFD166;   /* permitted by default / contested */
  --verdict-no:      #FF8FA3;   /* prohibited (expressly or effectively) */
  --verdict-unknown: #9AA5A0;   /* unverified / unresearched */
}
.status-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px;
  border-radius: 999px; font: 600 var(--step-micro)/1 'Space Mono', monospace; letter-spacing: 0.04em;
  text-transform: uppercase; background: color-mix(in srgb, var(--verdict-unknown) 22%, transparent); color: var(--ink); }
.status-chip--unknown { background: color-mix(in srgb, var(--verdict-unknown) 22%, transparent); }
.juris-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.juris-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px;
  padding: 8px 12px; border-radius: 12px; background: var(--surface); text-decoration: none; }
.juris-list .level { color: var(--ink-2); font-size: var(--step-micro); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tiles a { display: block; min-height: 44px; padding: 16px; border-radius: 16px; background: var(--surface); text-decoration: none; }
.tile__title { font-size: var(--step-h3); margin: 0 0 4px; }

/* Mobile nav — Base.astro renders .nav-mobile-toggle / .nav-mobile-panel but
   flow-web.css carries no rules for them (Flow keeps those in
   flow-site/assets/site.css, which we did not vendor). Ported minimally from
   that file: toggle button (site.css lines 10-45), panel (lines 50-87), and
   the 940px swap (lines 741-744). min-height: 44px on .nav-mobile-panel a is
   the one addition beyond the source — Flow's padding + font-size land close
   to 44px but do not guarantee it. */
.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-left: auto;
}
.nav-mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-2);
  border-radius: 2px;
  transition: opacity 0.15s, transform 0.15s;
}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: var(--nav-h, 56px);
  left: 0;
  right: 0;
  z-index: 49;
  padding: 12px 18px 18px;
  max-height: calc(100dvh - var(--nav-h, 56px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}
.nav-mobile-panel[hidden] { display: none; }
.nav-mobile-panel a {
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.nav-mobile-panel a:hover,
.nav-mobile-panel a.is-active { color: var(--ink); }
.nav-mobile-panel .pill { margin-top: 10px; align-self: flex-start; }

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav-mobile-toggle { display: flex; }
}

/* Verdict card. DESIGN.md rule 2: the tint always accompanies the status phrase,
   the quoted clause, the official link, the as-of date, the tier and the verifier. */
.verdict-card { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface); scroll-margin-top: 72px; }
.verdict-card__subject { font-size: var(--step-h3); margin: 0; }
.status-chip--ok      { background: color-mix(in srgb, var(--verdict-ok) 22%, transparent); }
.status-chip--cond    { background: color-mix(in srgb, var(--verdict-cond) 22%, transparent); }
.status-chip--no      { background: color-mix(in srgb, var(--verdict-no) 22%, transparent); }
.status-chip__phrase  { text-transform: none; letter-spacing: 0; font-weight: 600; }
.verdict-card__definition, .verdict-card__inherited { color: var(--ink-2); margin: 0; }
.verdict-card__quote { margin: 0; padding-left: 12px; font-style: normal;
  box-shadow: -3px 0 0 0 color-mix(in srgb, var(--pevra-lime, #C8E64A) 60%, transparent); }
.verdict-card__source, .verdict-card__verified, .verdict-card__gating { margin: 0; font-size: var(--step-micro); }
.verdict-card__source > * + * { margin-left: 10px; }
.tier-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px;
  font: 600 var(--step-micro)/1 'Space Mono', monospace; background: color-mix(in srgb, var(--ink-2) 14%, transparent); }
.tier-badge--C { background: color-mix(in srgb, var(--verdict-unknown) 26%, transparent); }
.verdict-card__stale { color: var(--verdict-cond); }
/* What the weekly check last SAW at the source. Plan ruling 10: it moves no verdict, no tier
   and no quote, so it takes NO --verdict-* colour -- a tint here would read as a status the
   line is not entitled to give. Muted ink, at the same --step-micro the line it sits in
   already carries, so it reads as a footnote to the verifier line rather than a warning. */
.verdict-card__health { color: var(--ink-2); }
/* A commencement date still in the future: the rule is on the books but not yet biting. */
.verdict-card__takes-effect { margin: 0; font-size: var(--step-micro); color: var(--ink-2); }
.takes-effect { color: var(--verdict-cond); font-weight: 600; }
.verdict-card__blocked { display: block; color: var(--ink-2); font-size: var(--step-micro); }
.verdict-card__conditions, .verdict-card__sources { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.verdict-card__research summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }

.task__parent { margin: 4px 0 0; }
.task__parent a { display: inline-flex; align-items: center; min-height: 44px; }
.verdict-stack { display: grid; gap: 12px; margin: 16px 0 24px; }
.class-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.class-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); text-decoration: none; font-size: var(--step-micro); }
.class-switch a[aria-current="page"] { background: color-mix(in srgb, var(--pevra-lime, #C8E64A) 24%, transparent); }
.task__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.task__means { margin: 24px 0; }
.task__disclaimer { max-width: 62ch; }

.brief-scores { margin: 18px 0 8px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-family: var(--font-mono); font-size: 0.92rem; }
.brief-scores dt { font-weight: 700; }
.brief-scores dd { margin: 0; }
.brief-scores__method { grid-column: 2; }

.card-page__score { font-family: var(--font-mono); font-size: 0.92rem; margin: 6px 0 0; }

.table-scroll { overflow-x: auto; }
.brief-table { width: 100%; border-collapse: collapse; font-size: var(--step-micro); }
.brief-table th, .brief-table td { text-align: left; padding: 8px 10px; vertical-align: top; }
.brief-table tbody tr + tr th, .brief-table tbody tr + tr td { box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.weight-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px;
  font: 600 var(--step-micro)/1 'Space Mono', monospace; background: color-mix(in srgb, var(--ink-2) 14%, transparent); }
.authority-list, .bill-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.cite-this code { display: block; padding: 12px; border-radius: 12px; background: var(--surface); overflow-x: auto; }

.subject-chips { list-style: none; padding: 0; margin: 8px 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.subject-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); text-decoration: none; font-size: var(--step-micro); }
.policy-table { width: 100%; border-collapse: collapse; font-size: var(--step-micro); }
.policy-table th, .policy-table td { text-align: left; padding: 8px 10px; white-space: nowrap; }
.policy-table thead th { cursor: pointer; min-height: 44px; }
/* An answer this place did not write itself, on its own line so the row never implies it did. */
.policy-table__inherited { display: block; }
.policy-table thead th[aria-sort="ascending"]::after { content: " ▲"; }
.policy-table thead th[aria-sort="descending"]::after { content: " ▼"; }
.policy-table tbody tr + tr th, .policy-table tbody tr + tr td { box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }

/* Announced by the #here-status live region and read by nobody else. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* /legal/here — the one SSR content page. The banner has to read as a caveat, not a
   heading, so it is quiet type on a tinted ground rather than a boxed alert (rule 4: no
   1px borders on converted surfaces). Neutral ink, never a --verdict-* colour: how sure we
   are of your LOCATION is not a verdict about the law, and rule 3's separation cuts both
   ways. The four states are told apart by their sentences, which is the only difference a
   screen reader gets anyway. */
.here__banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink-2) 10%, transparent);
  color: var(--ink-2);
  font-size: var(--step-micro);
}
/* Louder, still neutral: something we normally do is not working. */
.here__banner[data-precision="failed"] { background: color-mix(in srgb, var(--ink-2) 20%, transparent); }
.here__chain a { white-space: nowrap; }
.here__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 8px; }
/* 44px tap floor (rule 6) — the button is a real control, and .pill's own floor lives in
   the vendored flow-web.css, which a <button> matches only because it carries .pill. */
.here__actions .pill { min-height: 44px; display: inline-flex; align-items: center; }
.here__disclaimer { margin-top: 32px; max-width: 62ch; }

/* --- /act calendar (sub-plan 06) ------------------------------------------------
   A docket status is not a verdict, so it never borrows a --verdict-* colour
   (DESIGN.md rule 3, plan ruling 23). Glows, not borders (rule 4). */
.docket-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: var(--step-micro); font-weight: 700; letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--ink-2) 18%, transparent); color: var(--ink); }
.docket-badge--open     { background: color-mix(in srgb, var(--pevra-lime, #C8E64A) 30%, transparent); }
.docket-badge--upcoming { background: color-mix(in srgb, var(--pevra-lime, #C8E64A) 14%, transparent); }
.docket-badge--closed   { background: color-mix(in srgb, var(--ink-2) 22%, transparent); color: var(--ink-2); }
.docket-badge--passed   { background: color-mix(in srgb, var(--ink-2) 22%, transparent); color: var(--ink-2); }
.docket-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px;
  /* --surface is the .calendar-item card's own background, so a chip painted with it was
     invisible. flow-web's .chip raises with --surface-2 plus a 1px border; rule 4 bans the
     border here, and --surface-2 alone is a 2% step on the white light-mode card, so the
     raise token that actually reads on these (always light) pages is --surface-3. */
  border-radius: 999px; font-size: var(--step-micro); background: var(--surface-3); color: var(--ink-2); }
/* DARK MODE, when /act stops being light-only: --surface-3 is near-transparent on the dark
   ground, so these chips lose their raise entirely and read as bare text on the card. Every
   /act page passes theme="light" today, so nothing is wrong on the site as shipped -- but a
   chip that has no visible edge is the first thing to check the day one of them does not.
   The fix is a dark-side token, not a border (DESIGN.md rule 4 bans borders here). */
.docket-chip--ask { color: var(--ink); font-weight: 600; }
.calendar-filters { display: grid; gap: 12px; margin: 16px 0 24px; }
.calendar-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.calendar-filters legend { float: left; margin-right: 12px; font-size: var(--step-micro); color: var(--ink-2); }
.calendar-filters label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--step-micro); cursor: pointer; }
.calendar-filters input { width: 18px; height: 18px; }
.calendar-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.calendar-item { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface); }
.calendar-item[hidden] { display: none; }
.calendar-item__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.calendar-item__title { font-size: var(--step-h3); margin: 0; }
.calendar-item__title a { display: inline-flex; align-items: center; min-height: 44px; }
.calendar-item__when { margin: 0; font-weight: 600; }
.calendar__disclaimer { max-width: 62ch; margin-top: 24px; }
.docket__facts { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 6px; font-size: var(--step-micro); }
.docket__facts dt { color: var(--ink-2); }
.docket__facts dd { margin: 0 0 8px; }
.docket__official a { display: inline-flex; align-items: center; min-height: 44px; }
.ask { max-width: 68ch; margin: 24px 0; }
.ask h2 { font-size: var(--step-h3); }
.ask ul { padding-left: 18px; display: grid; gap: 6px; }

/* Model legislation (/act/model-law and /act/model-law/<id>). Neutral ink throughout: a
   draft is not a verdict, so no rule in this block defines a --verdict-* colour and nothing
   here is a .status-chip (DESIGN.md rules 3 and 13). One token does reach these pages from
   outside the block: the tier badge each template renders is `.tier-badge--C`, defined near
   the top of this file, and its background is mixed from --verdict-unknown. That is the
   evidence tier, not a verdict about a place, and it is the same badge every other page uses
   for the same fact. The draft block is the one place on this site where whitespace is content --
   subsection indentation is meaningful in bill drafting -- so it scrolls rather than wraps. */
.model-law__prose h2 { margin-top: 32px; }
.model-law__prose blockquote { margin: 16px 0; padding-left: 12px;
  box-shadow: -3px 0 0 0 color-mix(in srgb, var(--pevra-lime, #C8E64A) 60%, transparent); }
.model-law-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 16px; }
.model-law-list__item { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface); }
.model-law-list__chips, .model-law__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.model-law-list__title { font-size: var(--step-h3); margin: 0; }
.model-law-list__title a { display: inline-flex; align-items: center; min-height: 44px; }
.model-law__draft { white-space: pre; overflow-x: auto; padding: 16px 20px; border-radius: 16px;
  background: var(--surface); font: 400 var(--step-micro)/1.6 'Space Mono', monospace; }
.model-law-quotes { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 24px; }
.model-law-quote { display: grid; gap: 6px; }
.model-law-quote__text { margin: 0; padding-left: 12px; font-style: normal;
  box-shadow: -3px 0 0 0 color-mix(in srgb, var(--pevra-lime, #C8E64A) 60%, transparent); }
.model-law-quote__source { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; font-size: var(--step-micro); }
.model-law-quote__source a { display: inline-flex; align-items: center; min-height: 44px; }
.model-law-quote__why { margin: 0; color: var(--ink-2); }
.model-law-quote__blocked { color: var(--ink-2); }
.positions { padding-left: 18px; display: grid; gap: 12px; max-width: 68ch; }
.model-law__disclaimer { max-width: 62ch; margin-top: 24px; }

/* /act/faq and /act/playbook. Neutral ink: a quoted clause on these pages is evidence for an
   argument, not a verdict about a place, so nothing here carries a --verdict-* token or a
   .status-chip (DESIGN.md rules 3 and 13). The quote block deliberately matches the one on
   the model-law pages -- the same object should not look like two different objects. */
.faq h2, .playbook h2 { margin-top: 32px; }
.faq p, .playbook p { max-width: 68ch; }
.faq-quote__text { margin: 16px 0 6px; padding-left: 12px; font-style: normal;
  box-shadow: -3px 0 0 0 color-mix(in srgb, var(--pevra-lime, #C8E64A) 60%, transparent); }
.faq-quote__source { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; font-size: var(--step-micro); }
.faq-quote__source a { display: inline-flex; align-items: center; min-height: 44px; }
.faq-quote__why { margin: 0 0 24px; color: var(--ink-2); }
/* Both pages render their quotations through the same CitationQuote component, so the FAQ
   now carries the bot-blocked note the model-law pages always had. */
.faq-quote__blocked { color: var(--ink-2); }
.faq__disclaimer, .playbook__disclaimer { max-width: 62ch; margin-top: 24px; }

/* /carry and /carry/transit/<agency>. The cards are the standard VerdictCard rendered from
   the same records the jurisdiction pages use, so the only new rules here are layout — no
   colour, no chip and no verdict wording of this page's own (DESIGN.md rules 2 and 3). */
.carry h2 { margin-top: 32px; }
.carry p, .carry li { max-width: 68ch; }
.carry__state { margin: 24px 0; }
.carry__queue, .carry__operators { padding-left: 18px; display: grid; gap: 12px; }
.carry__operators a { display: inline-flex; align-items: center; min-height: 44px; }
.carry__jurisdiction { margin-top: 40px; }
.carry__jurisdiction h3 { margin-bottom: 12px; }
.carry__disclaimer { max-width: 62ch; margin-top: 24px; }

/* /about and /join. Layout only: no borders and no inset rings on any converted surface
   (DESIGN.md rule 4), and nothing here borrows a --verdict-* colour — a membership price is
   not a legal status (rule 3). */
.about h2, .join h2 { margin-top: 32px; }
.about p, .about li, .join p, .join li { max-width: 68ch; }
.about__programs, .join__benefits { padding-left: 18px; display: grid; gap: 12px; }
.join__tiers { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.join__tier { display: flex; flex-direction: column; gap: 4px; padding: 20px;
  border-radius: var(--r-md, 14px); background: rgba(255,255,255,.05); max-width: none; }
[data-theme="light"] .join__tier { background: rgba(10,15,10,.05); }
.join__term { font-weight: 600; }
.join__price { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--step-h3); }
.join__pending { margin: 24px 0; padding: 16px 20px; border-radius: var(--r-md, 14px);
  background: rgba(255,255,255,.06); }
[data-theme="light"] .join__pending { background: rgba(10,15,10,.06); }
.join__cta { margin: 24px 0; }
.about__disclaimer, .join__disclaimer { max-width: 62ch; margin-top: 24px; }

/* /legal/changes and the "Change history" section on every brief. The record is provenance,
   not a verdict: nothing in this block defines or borrows a --verdict-* colour and nothing
   here is a .status-chip (DESIGN.md rules 3 and 13 cut both ways -- a commit's declared kind
   is a fact about a commit, not about the law). The kind chip therefore reuses the geometry
   and the neutral --ink-2 mix .tier-badge and .weight-badge already carry, so it reads as one
   of the same family of badges rather than introducing a colour of its own. Converted
   surfaces here carry no border and no inset ring (rule 4): an entry is separated from the
   next by space and by a single hairline shadow, the same device .brief-table uses. */
.changes p, .changes li { max-width: 68ch; }
.changes__shallow { margin: 16px 0; padding: 12px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--ink-2) 16%, transparent); color: var(--ink); max-width: 68ch; }
.changes__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 20px; }
.changes__list--brief { margin: 12px 0 0; gap: 14px; }
.changes__entry { display: grid; gap: 6px; scroll-margin-top: 72px; }
.changes__entry + .changes__entry { padding-top: 20px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.changes__list--brief .changes__entry + .changes__entry { padding-top: 14px; }
.changes__line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0;
  font-size: var(--step-micro); color: var(--ink-2); }
.changes__sha { font-family: 'Space Mono', ui-monospace, monospace; color: var(--ink); }
.changes__date { font-family: 'Space Mono', ui-monospace, monospace; }
/* The declared kind. Same pill as .tier-badge, same neutral ground, no new token. */
.changes__kind { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px;
  border-radius: 999px; font: 600 var(--step-micro)/1 'Space Mono', monospace;
  background: color-mix(in srgb, var(--ink-2) 14%, transparent); color: var(--ink); }
/* No trailer, no chip: an undeclared entry is the word "change" in the surrounding ink,
   because a chip would look like a claim the commit never made. */
.changes__kind--undeclared { background: none; padding: 0; color: var(--ink-2); font-weight: 400; }
.changes__corrects { font-family: 'Space Mono', ui-monospace, monospace; }
.changes__subject { margin: 0; }
/* from-font, so the rule through a retracted subject is the weight the typeface designed
   rather than a hairline that disappears at --step-micro. */
.changes__subject s { text-decoration-thickness: from-font; }
.changes__files summary { display: flex; align-items: center; min-height: 44px; cursor: pointer;
  font-size: var(--step-micro); color: var(--ink-2); }
.changes__files ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px;
  font-size: var(--step-micro); }
.changes__files code { overflow-wrap: anywhere; }
.changes__disclaimer { margin-top: 32px; }

/* /legal/method. A long-form education page, so the shape is the same one /act/faq and
   /legal/changes use: measure-limited prose, sections separated by space and a single
   hairline shadow, no border and no inset ring (DESIGN.md rule 4). Nothing here defines or
   borrows a --verdict-* colour: this page describes the vocabulary, it never renders a
   verdict, and a tinted row would read as a status the page is not entitled to give. The
   tier badges are .tier-badge, unchanged, because a tier means the same thing here as on a
   jurisdiction page. */
.method p, .method li, .method dd { max-width: 68ch; }
.method__zero { margin: 16px 0; padding: 12px 16px; border-radius: 12px; max-width: 68ch;
  background: color-mix(in srgb, var(--ink-2) 16%, transparent); color: var(--ink); }
.method__toc { margin: 24px 0 8px; }
.method__toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.method__toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; background: var(--surface); text-decoration: none; font-size: var(--step-micro); }
.method__section { margin-top: 40px; scroll-margin-top: 72px; }
.method__section + .method__section { padding-top: 32px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.method__tier { margin: 20px 0; display: grid; gap: 8px; }
.method__tier-head { margin: 0; }
/* The record behind the sentence, set back on the page's own surface so it reads as an
   exhibit rather than as more prose. */
.method__example { padding: 12px 16px; border-radius: 12px; background: var(--surface); display: grid; gap: 6px; }
.method__example-head, .method__example-label, .method__example-tier, .method__example-reason {
  margin: 0; font-size: var(--step-micro); }
.method__example-tier { color: var(--ink-2); }
.method__example-head { color: var(--ink-2); }
.method__example-label > * + * { margin-left: 10px; }
.method__example-reason { color: var(--ink-2); }
.method-table { width: 100%; border-collapse: collapse; font-size: var(--step-micro); }
.method-table th, .method-table td { text-align: left; padding: 8px 10px; vertical-align: top; }
.method-table tbody tr + tr th, .method-table tbody tr + tr td {
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.method-table tbody th { font-weight: 400; white-space: nowrap; }
.method__flat { margin-top: 20px; }
.method__crawlers { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.method-crawler { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px;
  border-radius: 999px; font: 600 var(--step-micro)/1 'Space Mono', monospace;
  background: color-mix(in srgb, var(--ink-2) 14%, transparent); color: var(--ink); }
.method__disclaimers { margin: 20px 0 0; display: grid; gap: 20px; }
.method__disclaimer + .method__disclaimer { padding-top: 20px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.method__disclaimer dt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--step-micro); }
.method__disclaimer-meta { color: var(--ink-2); }
.method__disclaimer dd { margin: 6px 0 0; }
.method__disclaimer-what { margin: 0; font-size: var(--step-micro); color: var(--ink-2); }
.method__disclaimer-text { margin: 6px 0 0; }

/* /api. Same shape as /legal/method: measure-limited prose, sections separated by space and
   a single hairline shadow, no border and no inset ring (DESIGN.md rule 4). A curl example
   is a fenced code block the same way a model-law draft is (.model-law__draft) — no border,
   set back on --surface, scrolling rather than wrapping because a query string or a header
   line is content whitespace must not reflow. Reuses .brief-table and .table-scroll for the
   file table rather than a third copy of the same rules. */
.api p, .api li, .api dd { max-width: 68ch; }
.api__toc { margin: 24px 0 8px; }
.api__toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.api__toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; background: var(--surface); text-decoration: none; font-size: var(--step-micro); }
.api__section { margin-top: 40px; scroll-margin-top: 72px; }
.api__section + .api__section { padding-top: 32px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.api__code { white-space: pre; overflow-x: auto; padding: 14px 16px; border-radius: 12px;
  background: var(--surface); font: 400 var(--step-micro)/1.6 'Space Mono', monospace; -webkit-overflow-scrolling: touch; }
.api__code code { font: inherit; }
.api__headers, .api__params, .api__tools { margin: 12px 0 0; display: grid; gap: 14px; }
.api__headers > div > dt, .api__params > div > dt, .api__tool dt { margin: 0 0 4px;
  font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--step-micro); }
.api__headers > div > dd, .api__params > div > dd, .api__tool dd { margin: 0; color: var(--ink-2); font-size: var(--step-micro); }

/* /corrections. The record half reuses the .changes__* block above unchanged -- it is the
   same list, filtered -- so only the sections, the empty state and the form live here.
   Section separation is the same space-plus-one-hairline device .method__section uses; no
   border, no inset ring (DESIGN.md rule 4). The form fields are the one place on the site
   that needs a visible edge, and they get it as a --surface ground plus a bottom rule of
   underline drawn as a hairline SHADOW, which is the device .method__section and
   .changes__entry already use to separate things without drawing a box around them
   (rule 4: glows, not borders). No border property appears in this block at all. */
.corrections__section { margin-top: 40px; scroll-margin-top: 72px; }
.corrections__section + .corrections__section { padding-top: 32px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
/* The honest first render. Set on --surface so "there is nothing here yet" reads as a
   statement the page is making, not as a list that failed to load. */
.corrections__empty { margin: 20px 0 0; padding: 16px; border-radius: 16px;
  background: var(--surface); max-width: 68ch; }
.corrections__unwired { margin: 16px 0 0; padding: 16px; border-radius: 16px;
  background: var(--surface); max-width: 68ch; }
.corrections__form { margin: 24px 0 0; display: grid; gap: 20px; max-width: 60ch; }
.corrections__field { display: grid; gap: 6px; margin: 0; }
.corrections__field label { font-weight: 600; }
.corrections__optional { font-weight: 400; color: var(--ink-2); font-size: var(--step-micro); }
.corrections__hint { color: var(--ink-2); font-size: var(--step-micro); }
.corrections__form input, .corrections__form textarea { width: 100%; min-height: 44px;
  padding: 10px 12px; border: 0; border-radius: 12px 12px 0 0; background: var(--surface);
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--ink-2) 40%, transparent);
  color: var(--ink); font: inherit; }
.corrections__form textarea { min-height: 132px; resize: vertical; }
.corrections__form input:focus-visible, .corrections__form textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; }
.corrections__form .cf-turnstile { margin: 0; }

/* /events and /events/westwheel-9 — the Westwheel archive. Sub-plan 09 ruling 13 makes this
   prose rather than records, so the block is layout only: measure-limited text, one hairline
   of separation between entries, and nothing a reader could mistake for a status. No border
   and no inset ring (DESIGN.md rule 4), and no --verdict-* colour anywhere — a riding event
   carries no legal status and rule 3 cuts both ways.
   The photographs are served by the Worker's R2 route at their preserved
   /wp-content/uploads/ paths. Each <img> carries its own width and height, so the box is the
   right size before the bytes arrive and the page does not reflow when they do — and, while
   the bucket is still empty, an un-migrated photograph leaves a quiet gap on --surface
   instead of collapsing the section around it. */
.events p, .events li, .events dd { max-width: 68ch; }
.events h2 { margin-top: 0; }
.events__event, .events__section { margin-top: 40px; scroll-margin-top: 72px; }
.events__event + .events__event, .events__section + .events__section { padding-top: 32px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.events__when { margin: 6px 0 0; color: var(--ink-2); font-size: var(--step-micro); max-width: 68ch; }
.events__photo { display: block; margin: 20px 0 4px; max-width: min(100%, 460px); height: auto;
  border-radius: 16px; background: var(--surface); }
.events__list { padding-left: 18px; display: grid; gap: 14px; margin: 16px 0 0; }
.events__more { margin-top: 12px; }
.events__closing { margin-top: 40px; padding-top: 32px; max-width: 68ch;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }

/* /learn — Jump On!. Same shape as the /events archive above: measure-limited prose, sections
   separated by space and one hairline, and nothing a reader could mistake for a status. No
   border and no inset ring (DESIGN.md rule 4), and no --verdict-* colour anywhere — learning
   to ride carries no legal status.
   .learn__history is the dated record of past sessions. Two columns on a wide screen so the
   dates line up and the eye can run down them, collapsing to one at the phone tier where a
   date column would squeeze the place name to two words a line. It is a list of facts, not a
   table of data: no rules, no zebra, no box. */
.learn p, .learn li, .learn dd { max-width: 68ch; }
.learn h2 { margin-top: 0; }
.learn__section { margin-top: 40px; }
.learn__section + .learn__section { padding-top: 32px;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }
.learn__photo { display: block; margin: 20px 0 4px; max-width: min(100%, 520px); height: auto;
  border-radius: 16px; background: var(--surface); }
.learn__history { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px;
  max-width: 68ch; }
.learn__session { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 2px 20px; max-width: 68ch; }
.learn__when { color: var(--ink-2); font-size: var(--step-micro); }
.learn__note { color: var(--ink-2); }
.learn__closing { margin-top: 40px; padding-top: 32px; max-width: 68ch;
  box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--ink-2) 12%, transparent); }

@media (max-width: 720px) {
  .learn__session { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   THE PAINTED ROAD — the homepage's replacement visual world (2026-08-30;
   rebuilt after the finish review's rebuild directive, same date).
   Scope: everything here keys off body[data-surface="painted-road"], which only
   index.astro sets, so the incumbent Night-Ride pages are untouched until each
   surface is migrated. Direction: the rules of the road are literally painted
   on it — the page is an asphalt surface, all type is thermoplastic paint, and
   the site map is road marking. Approved comp: .impeccable/mocks/comp-c-junction.webp
   (sampled color record in site/.impeccable/surfaces/site-src-pages-index-astro.md).
   Owner amendment: the green lane is road VOCABULARY, never the rider's home.
   Painted outline boxes are this world's native grammar — the no-border rule
   binds the seven Night-Ride selectors, not these.
   Rebuild notes: no page-wide grain film (it sank the ground ~18 levels below
   the sampled #363637 and dragged text under the contrast floor); weathering
   lives in the asphalt tile plus the paint-wear alpha matte masked onto
   painted MARKS only, never body copy. */

@font-face {
  font-family: 'Big Shoulders Stencil';
  src: url('/assets/fonts/big-shoulders-stencil-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass';
  src: url('/assets/fonts/overpass-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass Mono';
  src: url('/assets/fonts/overpass-mono-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
/* The fourth painted-road face, added 2026-09-04 for the report page's forms: the mono was
   reading as a costume on a page a rider TYPES into, and highway signage is the wrong voice
   for "how did it go?". Bricolage Grotesque (SIL OFL) is the weight-axis-only latin subset from
   Google's CSS API, self-hosted and hashed in site/fonts.lock.json like the other seven — the
   three-axis build the brief named is 131 KB against this one's 41 KB, and neither the optical
   size nor the width axis is used by a rule here. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* The association line and the pip mark exist in Base for every page but
   render only inside the painted-road world; .logo__stack is a transparent
   wrapper everywhere else. */
.logo__assoc { display: none; }
.logo__pip { display: none; }
.logo__stack { display: contents; }

body[data-surface="painted-road"] {
  --road: #363637;        /* sampled asphalt ground */
  --road-2: #575655;      /* lighter patch (plate interiors) */
  --paint: #D7D3C8;       /* worn thermoplastic white */
  --paint-bright: #EAE6DB;
  --paint-dim: color-mix(in srgb, #D7D3C8 84%, #363637);
  /* Opaque asphalt for a form control (DESIGN.md PR9): a field a rider types into is never
     the grained background showing through, or the texture reads as noise under the caret. */
  --road-input: #3F3F40;
  --lane-green: #286A44;  /* bike-lane green: vocabulary, not a home */
  --lime: var(--pevra-lime, #C8E64A);
  --curb: #B4A595;
  /* Score ramps (spec 2026-09-02 §6.3; DESIGN.md PR18). A band, never a verdict: no
     verdict tint and no lime appear here. Every step clears 4.5:1 on --road; the site gate
     checks each hex. Paint ramp for the Legal score, chalk ramp for the Community score. */
  --score-5: #8FD9A0; --score-4: #E6D06B; --score-3: #E8A85C; --score-2: #EE8F78; --score-1: #E58A8A;
  --chalk-score-5: #A9D9B6; --chalk-score-4: #DDD5A4; --chalk-score-3: #D9BFA0; --chalk-score-2: #D9A99E; --chalk-score-1: #CFA0A6;
  /* The chalk "not yet" grey. A literal hex, not a color-mix(): it is what the phone-size
     .scorecell__num--none is painted in (1.15rem = 18.4px, just under the 18.66px bold
     large-text cutoff, so the full 4.5:1 applies), and the ramp gate can only measure a hex.
     #96A4A8 is chalk #AEBFC4 at 80% over asphalt #363637 — 4.70:1, where the 72% mix this
     replaces was #8C999D at 4.11:1 and failed. */
  --chalk-dim: #96A4A8;
  /* FOUR FACES, FOUR ROLES (owner ruling 2026-09-04, round 3). The role decides the face;
     nothing on this surface picks a face for flavour. DESIGN.md "Type roles and ramp". */
  --font-stencil: 'Big Shoulders Stencil', 'Arial Narrow', sans-serif;   /* DISPLAY */
  --font-road: 'Overpass', system-ui, sans-serif;                        /* PROSE   */
  --font-roadmono: 'Overpass Mono', ui-monospace, monospace;             /* DATA    */
  /* INTERFACE: labels, legends, helper and notes, status road-signs, readouts, basis and link
     lines, the verdict pill, the class eyebrow, disclosure summaries. Renamed from --font-form
     in round 3: it is the voice of the whole interface layer, not of forms alone. */
  --font-ui: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  /* ONE SIZE RAMP for the record world (the record page, its tiles and stats band, and the
     report page). Nine values, and every font-size in that world is one of them or one of the
     two score-numeral clamps. Display is stencil and uppercase; the text steps carry the
     interface and prose faces. Owner: "so many sizes" — this is the answer to that. */
  --fs-d1: clamp(2.7rem, 9.7vw, 9.4rem);   /* place name, lane scale          */
  --fs-d2: clamp(2rem, 4.6vw, 2.8rem);     /* section titles (zone, chalk h2) */
  --fs-d3: clamp(1.3rem, 2.2vw, 1.7rem);   /* tile subjects, form h3          */
  --fs-d4: 1.2rem;                         /* tab labels, band words, buttons */
  --fs-lg: 1.18rem;                        /* the lede line                   */
  --fs-md: 1.02rem;                        /* prose, form labels, field text  */
  --fs-sm: 0.92rem;                        /* helper, notes, basis, links     */
  --fs-xs: 0.8rem;                         /* caps captions, verdict pills    */
  --fs-num: 2.4rem;                        /* digit and word readouts         */
  background: var(--road) url('/assets/road/asphalt.webp') repeat;
  background-size: 384px;
  color: var(--paint);
  font-family: var(--font-road);
}

/* Worn thermoplastic: the alpha matte eats chips out of painted MARKS.
   Never applied to body copy — contrast stays whole where reading happens. */
.paint-worn {
  -webkit-mask-image: url('/assets/road/paint-wear.webp');
  mask-image: url('/assets/road/paint-wear.webp');
  -webkit-mask-size: 480px;
  mask-size: 480px;
}

/* Site chrome joins the world on this surface only. */
body[data-surface="painted-road"] .nav {
  background: #333334;
  border-bottom: 0;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--paint) 24%, transparent);
}
/* Owner pass 4: nav destinations painted in the stencil, worn like the rest
   of the road's marks — bolder at the desktop tier. */
body[data-surface="painted-road"] .nav__links a {
  color: var(--paint); font-family: var(--font-stencil); font-weight: 800;
  font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase;
  -webkit-mask-image: url('/assets/road/paint-wear.webp');
  mask-image: url('/assets/road/paint-wear.webp');
  -webkit-mask-size: 480px;
  mask-size: 480px;
}
body[data-surface="painted-road"] .nav__links a:hover,
body[data-surface="painted-road"] .nav__links a.is-active { color: var(--paint-bright); }
body[data-surface="painted-road"] .logo { flex-direction: row; align-items: center; gap: 10px; }
body[data-surface="painted-road"] .logo__mark { display: none; }
body[data-surface="painted-road"] .logo__pip { display: block; width: 44px; height: auto; }
body[data-surface="painted-road"] .logo__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* Owner pass 3: the mark carries the name — the big stencil word retires and
   the association line speaks alone beside the circle logo. */
body[data-surface="painted-road"] .logo__word { display: none; }
body[data-surface="painted-road"] .logo__assoc { font-size: 0.62rem; max-width: 26ch; }
body[data-surface="painted-road"] .logo__word {
  color: var(--paint-bright); font-family: var(--font-stencil); font-weight: 800;
  font-size: 1.35rem; letter-spacing: 0.1em; line-height: 1;
}
body[data-surface="painted-road"] .logo__assoc {
  display: block; font-family: var(--font-roadmono); font-size: 0.5rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--paint-dim);
  line-height: 1.25; max-width: 24ch;
}
body[data-surface="painted-road"] .pill--primary {
  background: var(--lime); color: #20250C; font-weight: 800; border-radius: 4px;
}
body[data-surface="painted-road"] .nav-mobile-panel { background: #333334; border-bottom: 0;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--paint) 24%, transparent); }
body[data-surface="painted-road"] .nav-mobile-panel a { color: var(--paint-dim); border-bottom-color: color-mix(in srgb, var(--paint) 14%, transparent); }

/* Footer as curb: concrete band with a tactile-paving dot strip under it. */
body[data-surface="painted-road"] .footer {
  position: relative;
  background: #2C2C2D;
  border-top: 14px solid var(--curb);
  color: var(--paint-dim);
}
body[data-surface="painted-road"] .footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background-image: radial-gradient(circle 2.6px at 50% 50%, var(--lime) 0 2.2px, transparent 2.7px);
  background-size: 16px 8px;
  opacity: 0.55;
  pointer-events: none;
}
body[data-surface="painted-road"] .footer a { color: var(--paint-dim); }
body[data-surface="painted-road"] .footer a:hover { color: var(--paint-bright); }
body[data-surface="painted-road"] .footer .body-muted { color: var(--paint-dim); }
body[data-surface="painted-road"] .footer .text-lime { color: var(--lime); }
body[data-surface="painted-road"] ::selection { background: var(--lime); color: #20250C; }
body[data-surface="painted-road"] :focus-visible { outline: 3px dashed var(--lime); outline-offset: 3px; }

.road { overflow: clip; }

/* --- The fold: lane text at lane scale ------------------------------------ */
.road__fold { padding: 26px 24px 6px; }
.road__headline {
  margin: 0;
  font-family: var(--font-stencil);
  font-weight: 900;
  font-size: clamp(2.7rem, 9.7vw, 9.4rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--paint-bright);
}
/* Selective highlight: one word rides a lime block, dark stencil letters. The
   shared wear mask erodes block and letters together — paint over paint. */
.road__hl { background: var(--lime); color: #20250C; padding: 0 0.06em; }
/* The belief band: one painted stripe across the whole road, owner copy.
   Dark ink on paint; PEVRA rides a lime patch (lime text on white paint would
   sink under the contrast floor — the patch keeps the word lime AND legible). */
.road__belief {
  margin: 20px 0 0;
  padding: 20px max(24px, 3vw);
  background: var(--paint);
  color: #2A2A2B;
  font-weight: 700;
  font-size: clamp(1.06rem, 1.9vw, 1.5rem);
  line-height: 1.5;
}
.road__belief-name {
  display: inline-block;
  font-family: var(--font-stencil); font-weight: 800; letter-spacing: 0.05em;
  background: var(--paint-bright); color: #2A2A2B;
  padding: 0 10px 2px; margin-right: 6px;
}
/* Highlighter strokes over the sentence, breaking cleanly per line. */
.road__belief-hl {
  background: var(--lime); color: #20250C;
  padding: 2px 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Mini-heroes: one real photograph per lane, flush like a small road patch.
   Owner pass 3: uniform — each fills its lane's width at one shared height,
   and in the center lane the mini, the ask and the plate share one width. */
.lane__mini {
  display: block; width: 100%; height: 200px; object-fit: cover;
  border: 5px solid var(--paint); border-radius: 3px;
}
.lane--legal .lane__mini, .lane__where, .plate-tilt { width: min(100%, 560px); }
a.lane:hover .lane__mini, .lane a:hover ~ .lane__mini { border-color: var(--paint-bright); }

/* Crosswalk: authored bars at the comp's proportion (tall, close-packed),
   worn and skewed like real thermoplastic. */
.road-xwalk { display: block; width: 100%; height: 84px; margin: 20px 0 0; color: var(--paint); opacity: 0.92; }
.road-xwalk--low { height: 64px; margin: 0 0 8px; }

/* The road continues below the fold: green edge stripe + curb (::before/
   ::after) and solid painted edge lines flanking every section to the footer. */
.road__below { position: relative; }
.road__below::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: var(--lane-green); opacity: 0.8; }
.road__below::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 22px;
  background: var(--curb); opacity: 0.28; }
.road__edgeline { position: absolute; top: 0; bottom: 0; width: 7px; background: var(--paint); opacity: 0.7; }
.road__edgeline--left { left: 42px; }
.road__edgeline--right { right: 42px; }

/* --- The junction: full-bleed diverging lane geometry ---------------------- */
.lanes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 0;
  padding: 34px 3vw 30px;
}
.lanes__geo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* The page's one authored motion: riding down the road — the center lane's
     hi-vis dashes drift toward you, slowly, forever. */
  .lanes__rail { animation: rail-drift 8s linear infinite; }
}
@keyframes rail-drift { to { stroke-dashoffset: -92; } }
.lane {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 22px 18px 30px;
  text-decoration: none;
  color: var(--paint);
}
a.lane:hover { color: var(--paint-bright); }
.lane__label {
  font-family: var(--font-stencil); font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 4.1rem); line-height: 0.95;
  text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
  color: inherit; text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px;
}
.lane__label-line { display: block; }
a.lane__label:hover { color: var(--paint-bright); }
.lane__label--legal { color: var(--lime); font-size: clamp(2.5rem, 4.6vw, 4.3rem); }
a.lane__label--legal:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
.lane__hint { max-width: 30ch; text-align: center; line-height: 1.45; color: var(--paint-dim); font-size: 1rem; }
.lane__glyph { display: block; width: 96px; height: auto; opacity: 0.92; transition: opacity 0.2s, transform 0.3s ease-out; }
a.lane:hover .lane__glyph { opacity: 1; transform: translateY(-4px); }
.lane__glyph--mark { width: 58px; opacity: 0.6; }
.lane__glyph--push { margin-top: auto; }

/* The location ask: the page's primary action, painted at full scale. */
.lane__where { display: grid; gap: 10px; width: min(100%, 560px); }
.lane__where-label {
  font-family: var(--font-roadmono); font-size: 0.85rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--paint);
}
.lane__where-row { display: flex; }
.lane__where input {
  flex: 1; min-width: 0; min-height: 54px;
  background: #3F3F40; /* opaque fresh-patch asphalt: the geometry never shows through a control */
  border: 4px solid var(--paint); border-right: 0; border-radius: 6px 0 0 6px;
  color: var(--paint-bright); font: 600 1rem/1 var(--font-roadmono);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0 14px;
}
.lane__where input::placeholder { color: var(--paint-dim); opacity: 1; }
.lane__where button {
  min-height: 54px; padding: 0 22px;
  background: var(--lime); border: 4px solid var(--lime); border-radius: 0 6px 6px 0;
  color: #20250C; font-family: var(--font-stencil); font-weight: 800; font-size: 1.25rem;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.lane__where button:hover { background: var(--paint-bright); border-color: var(--paint-bright); }

/* --- The painted verdict plate: the center lane's terminus ----------------- */
/* Owner pass 3: the plate is a notice pinned to the road — set slightly
   askew, edges frayed like weathered paper. The tilt wrapper carries the
   rotation and a drop-shadow that follows the frayed clip. */
.plate-tilt {
  transform: rotate(-1.4deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38));
}
.plate {
  width: 100%;
  border: 4px solid var(--paint);
  border-radius: 2px;
  padding: 24px 24px 22px;
  background: #575655; /* the brief's recorded fresh-patch value: new asphalt, not a card */
  display: grid; gap: 10px;
  text-align: left;
  clip-path: polygon(
    0 4px, 9% 0, 22% 5px, 34% 1px, 47% 6px, 60% 0, 72% 5px, 85% 1px, 100% 4px,
    calc(100% - 5px) 15%, 100% 28%, calc(100% - 6px) 42%, 100% 57%, calc(100% - 4px) 70%, 100% 84%, calc(100% - 5px) 100%,
    88% calc(100% - 6px), 75% 100%, 62% calc(100% - 4px), 49% 100%, 36% calc(100% - 6px), 23% 100%, 10% calc(100% - 4px), 0 100%,
    4px 86%, 0 72%, 6px 58%, 0 44%, 5px 30%, 0 16%
  );
}
.plate__place {
  margin: 0; font-family: var(--font-stencil); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1; text-transform: uppercase; color: var(--paint-bright);
}
.plate__status { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--paint-bright); }
.plate__quote {
  margin: 2px 0 0;
  font-family: var(--font-roadmono); font-size: 0.9rem; line-height: 1.55; color: var(--paint-bright);
}
.plate__cite { margin: 0; font-family: var(--font-roadmono); font-size: 0.78rem; line-height: 1.7; color: var(--paint); }
.plate__cite a { color: var(--paint-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.plate__cite a:hover { color: var(--paint-bright); }
.plate__actions { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 2px 0 0; }
.plate__actions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--lime);
  text-decoration: none; letter-spacing: 0.02em; }
.plate__actions a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- The Westwheel road patch: the page's human moment, flush in the road -- */
.patchband { padding: 30px 0 64px; display: grid; justify-items: center; gap: 12px; }
.patchband__link { display: block; width: 100%; position: relative; z-index: 1; }
.patchband__link img {
  display: block; width: 100%; height: auto;
  border: 6px solid var(--paint); border-radius: 4px;
}
.patchband__link:hover img { border-color: var(--paint-bright); }
.patchband__cap {
  margin: 0; font-family: var(--font-roadmono); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--paint-dim); text-align: center;
}

/* --- Coexistence strip ----------------------------------------------------- */
.coexist { max-width: 1080px; margin: 0 auto; padding: 12px 24px 60px; text-align: center; }
.coexist__glyphs { display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 5vw, 64px); margin: 0 0 22px; }
.coexist__glyphs svg { opacity: 0.9; }
.coexist__line {
  margin: 0 auto; max-width: 36ch;
  font-family: var(--font-stencil); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.1; text-transform: uppercase; color: var(--paint-bright);
}
.coexist__sub { margin: 14px auto 0; max-width: 52ch; color: var(--paint-dim); line-height: 1.5; }

/* --- The honest ledger: a stop bar and one composed line ------------------- */
.ledger { padding: 0 0 64px; }
.ledger__bar { height: 12px; background: var(--paint); opacity: 0.85; margin: 0 0 28px; }
.ledger__line { max-width: 62ch; margin: 0 auto; padding: 0 24px; text-align: center;
  font-size: 1.08rem; line-height: 1.9; color: var(--paint); }
.ledger__seg { white-space: nowrap; }
.ledger__num { font-family: var(--font-stencil); font-weight: 800; font-size: 1.8rem;
  color: var(--paint-bright); padding: 0 3px; vertical-align: -0.12em; }
.ledger__num--zero { color: var(--lime); }
.ledger__note { margin: 14px auto 0; max-width: 56ch; padding: 0 24px; text-align: center;
  color: var(--paint-dim); line-height: 1.55; }
.ledger__note a { color: var(--lime); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --- Waypoint signs (the rest of the map) + roadside markers --------------- */
/* Waypoints as pavement destination text: painted words with painted arrows,
   never a pill row (the THESIS refuses the card grid). */
.waypoints { max-width: 1180px; margin: 0 auto; padding: 6px 24px 72px; }
.waypoints__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 44px; }
.waypoints__row a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 6px;
  font-family: var(--font-stencil); font-weight: 800; font-size: 1.9rem; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration: none; color: var(--paint);
}
.waypoints__arrow { display: block; opacity: 0.75; }
.waypoints__row a:hover { color: var(--paint-bright); }
.waypoints__row a:hover .waypoints__arrow { opacity: 1; }
.roadside { max-width: 720px; margin: 0 auto; padding: 0 24px 64px; display: grid; gap: 18px; }
.roadside__marker { margin: 0; text-align: center; line-height: 1.5; color: var(--paint-dim); }
.roadside__marker a { color: var(--paint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.roadside__marker a:hover { color: var(--paint-bright); }

@media (max-width: 860px) {
  .road__headline { white-space: normal; font-size: clamp(2.7rem, 13.5vw, 5rem); }
  .road-xwalk { height: 48px; }
  .road-xwalk--low { height: 40px; }
  .lanes { grid-template-columns: 1fr; padding: 18px 20px 24px; }
  .lanes__geo { display: none; }
  .road__edgeline { display: none; }
  .road__below::after { width: 10px; }
  .lane { padding: 30px 10px; }
  .lane--legal { order: -1; }
  .lane__label { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .lane__label--legal { font-size: clamp(2.4rem, 10.5vw, 3.4rem); }
  /* Single-column road: every stacked lane keeps its rails — hi-vis lime on
     the center lane, painted white on the others. */
  .lane::before, .lane::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 8px;
    background: repeating-linear-gradient(180deg, var(--paint) 0 36px, transparent 36px 76px);
    background-size: 100% 76px;
    opacity: 0.55;
  }
  .lane::before { left: 0; }
  .lane::after { right: 0; }
  .lane--legal::before, .lane--legal::after {
    width: 9px;
    background: repeating-linear-gradient(180deg, var(--lime) 0 46px, transparent 46px 92px);
    background-size: 100% 92px;
    opacity: 0.9;
  }
  @media (prefers-reduced-motion: no-preference) {
    .lane--legal::before, .lane--legal::after { animation: lane-drift 8s linear infinite; }
  }
  .lane + .lane { box-shadow: 0 -2px 0 0 color-mix(in srgb, var(--paint) 30%, transparent); }
  .waypoints__row { gap: 10px 28px; }
  .waypoints__row a { font-size: 1.45rem; }
}
@keyframes lane-drift { to { background-position-y: 92px; } }

.verdict-card__device { margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-2, inherit); opacity: 0.85; }

/* =========================================================================
   THE PAINTED ROAD — RECORD PAGE (/legal/<place>, 2026-08-30; surface seed
   7b2b27fa, "The Intersection Map"). The page is an aerial pavement-marking
   plan: zones of painted glyph tiles divided by crosswalk bars. Verdict
   tiles are thermoplastic; the street-as-ridden section is CHALK — a
   different material entirely, so an enforcement report can never be read
   as law (rule 13's logic, extended). Scoped like everything in this world:
   nothing here leaks outside body[data-surface="painted-road"]. */

.record__head { max-width: 1400px; margin: 0 auto; padding: 56px 24px 10px; text-align: center; }
/* Lane-scale place name: the same measure as the homepage headline, wrapping
   only when a name is longer than the road is wide. */
.record__place {
  margin: 0; font-family: var(--font-stencil); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-d1); line-height: 0.92; letter-spacing: 0.01em;
  text-wrap: balance; color: var(--paint-bright);
}
/* Round 3: this line is INTERFACE, not data. It is the record's own metadata on a record page
   and the "Return to Community Profile" link on the report page — neither is a date, a section
   reference or a code, and the mono is reserved for those (DESIGN.md "Type roles"). */
.record__where {
  margin: 12px 0 0; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--paint-dim);
}
.record__where a { color: var(--paint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.record__where a:hover { color: var(--paint-bright); }
/* .record__count / .record__num are gone with the mono verified-count line the stats
   band replaced (spec 2026-09-02 §6). The count now lives in .scorecell__basis, and its
   numeral is no longer lime — lime means verified, never a grade (DESIGN.md PR13). */
.record__classes { display: flex; justify-content: center; gap: 22px; margin-top: 16px; }
.record__classes a {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--paint-dim); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px;
}
.record__classes a[aria-current="page"] { color: var(--lime); box-shadow: 0 3px 0 0 var(--lime); }
.record__classes a:hover { color: var(--paint-bright); }

/* --- The stats band (spec 2026-09-02 §6) ----------------------------------
   Four tracks, two cells: later tiles (§10) take one track each without moving
   the numerals. The grid holds at every width (PR15). Legal is a painted
   outline box; Community is a chalk frame — the same two materials the tiles
   and the chalk zone already use, so nothing here is a third vocabulary. */
.scoreband {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 1100px; margin: 28px auto 0; text-align: left;
}
.scorecell { position: relative; grid-column: span 2; padding: 22px 26px 18px; }
.scorecell__body { position: relative; text-align: center; }
.scorecell--legal { color: var(--paint); }
.scorecell--legal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 5px solid var(--paint); border-radius: 3px;
  -webkit-mask-image: url('/assets/road/paint-wear.webp'); mask-image: url('/assets/road/paint-wear.webp');
  -webkit-mask-size: 260px; mask-size: 260px;
}
.scorecell--community { color: #BCC9CD; }
.scorecell--community::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 3px dashed #AEBFC4;
  -webkit-mask-image: url('/assets/road/chalk-wear.webp'); mask-image: url('/assets/road/chalk-wear.webp');
  -webkit-mask-size: 480px; mask-size: 480px;
}
.scorecell__num {
  margin: 0; font-family: var(--font-stencil); font-weight: 900; line-height: 0.9;
  font-size: clamp(4rem, 8.6vw, 8rem); letter-spacing: 0.01em;
}
.scorecell__num--5 { color: var(--score-5); } .scorecell__num--4 { color: var(--score-4); }
.scorecell__num--3 { color: var(--score-3); } .scorecell__num--2 { color: var(--score-2); }
.scorecell__num--1 { color: var(--score-1); }
.scorecell__num--chalk-5 { color: var(--chalk-score-5); } .scorecell__num--chalk-4 { color: var(--chalk-score-4); }
.scorecell__num--chalk-3 { color: var(--chalk-score-3); } .scorecell__num--chalk-2 { color: var(--chalk-score-2); }
.scorecell__num--chalk-1 { color: var(--chalk-score-1); }
/* PR14: dimming means "not yet". The same slot, the same material, faded. */
.scorecell__num--none { font-size: clamp(1.7rem, 3.2vw, 2.7rem); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; padding-top: 0.35em; }
.scorecell--legal .scorecell__num--none { color: var(--paint-dim); }
.scorecell--community .scorecell__num--none { color: var(--chalk-dim); }
.scorecell__band {
  margin: 10px 0 0; font-family: var(--font-stencil); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-d4); line-height: 1.06; letter-spacing: 0.04em;
}
.scorecell--legal .scorecell__band { color: var(--paint-bright); }
.scorecell--community .scorecell__band { color: #D3DEE1; }
.scorecell__pill {
  display: inline-block; margin-left: 12px; padding: 3px 9px 2px; vertical-align: middle;
  border: 2px dashed #AEBFC4; font-family: var(--font-ui); font-weight: 600;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: #D3DEE1;
}
/* Round 3: the basis and link lines are the interface explaining its own number, so they are
   Bricolage at the helper step and set in sentence case — an uppercase mono caption made the
   band read as a readout of something rather than as a sentence a person wrote. */
.scorecell__basis, .scorecell__seized {
  margin: 8px 0 0; font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.55;
  letter-spacing: 0;
}
.scorecell--legal .scorecell__basis { color: var(--paint-dim); }
.scorecell--community .scorecell__basis { color: #BCC9CD; }
.scorecell__seized { color: #D3DEE1; }
.scorecell__links { margin: 12px 0 0; font-family: var(--font-ui); font-size: var(--fs-sm); letter-spacing: 0; }
.scorecell__links a { color: var(--paint); text-decoration-thickness: 1px; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.scorecell--community .scorecell__links a { color: #D3DEE1; text-decoration-style: dashed; }
.scorecell__links a:hover { color: #FFFFFF; }
/* The invitation is bright and first only while there is nothing to show. */
.scorecell__cta { font-weight: 700; color: #FFFFFF !important; }

.record__lanes { max-width: 1180px; margin: 0 auto; padding: 26px 84px 8px; }
/* Concrete curb strips frame the roadway on both edges (the world's --curb,
   otherwise unused on this page); the green stripe and painted edge lines
   from .road__below sit inside them. */
.record__curb { position: absolute; top: 0; bottom: 0; width: 26px; background: var(--curb); opacity: 0.34; }
.record__curb--left { left: 14px; }
.record__curb--right { right: 0; width: 36px; }

/* --- Zones: the junction's labeled areas --------------------------------- */
.zone { margin-top: 34px; }
/* Zone dividers are full-bleed, full-strength crosswalks like the top bar;
   only the short bar before an unverified bay is dimmed — that dimming is
   the one signal reserved for "not yet verified". */
.zone__walk { margin: 0 calc(50% - 50vw) 26px; width: 100vw; height: 64px; opacity: 0.92; }
/* .road already clips overflow; this guards the 100vw divider against a classic
   scrollbar's width on the record page specifically. */
.record { overflow-x: clip; }
.zone__baywalk { margin: 20px 0 12px; height: 30px; opacity: 0.42; }
.zone__label {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0 0 22px; font-family: var(--font-stencil); font-weight: 900;
  text-transform: uppercase; font-size: var(--fs-d2); line-height: 1.06;
  letter-spacing: 0.04em; color: var(--paint);
}
.zone__label::before, .zone__label::after {
  content: ""; width: 9px; height: 22px; background: var(--lime); transform: skewX(-8deg);
}
.zone__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Unverified rows are painted parking bays: open-bottomed stalls on a fresh
   patch of --road-2, inset from the roadway. */
.zone__bay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 28px 0; }

/* --- Verdict tiles: painted outline boxes with authored glyphs ------------ */
/* The tile outline is worn thermoplastic like every other painted mark: a
   pseudo-element stroke masked by the paint-wear matte (a CSS border on the
   tile itself cannot take the mask without eating its contents). Square
   corners, as lane boxes are. */
.rtile { position: relative; background: transparent; }
.rtile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 4px solid var(--paint);
  -webkit-mask-image: url('/assets/road/paint-wear.webp'); mask-image: url('/assets/road/paint-wear.webp');
  /* Coarser than the marks' 480px so chips read against a 4px stroke, and the
     matte is offset per tile so twenty same-size boxes never wear identically. */
  -webkit-mask-size: 260px; mask-size: 260px;
  -webkit-mask-position: var(--wear-shift, 0 0); mask-position: var(--wear-shift, 0 0);
}
.rtile:nth-child(6n+2) { --wear-shift: 137px 61px; }
.rtile:nth-child(6n+3) { --wear-shift: 41px 173px; }
.rtile:nth-child(6n+4) { --wear-shift: 211px 118px; }
.rtile:nth-child(6n+5) { --wear-shift: 89px 229px; }
.rtile:nth-child(6n) { --wear-shift: 176px 19px; }
.rtile__details { height: 100%; display: flex; flex-direction: column; }
/* The closed face fills a row-stretched tile; once open, the face sits at its
   natural height so the evidence follows the title without dead air. */
.rtile__details:not([open]) .rtile__face { flex: 1 0 auto; align-content: start; }
.rtile__face {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 16px; padding: 18px 34px 18px 18px; min-height: 44px; cursor: pointer;
  list-style: none;
}
.rtile__face::-webkit-details-marker { display: none; }
.rtile__glyph { display: block; color: var(--paint-bright); }
.rtile__glyph svg { display: block; width: 56px; height: 56px; }
.rtile__subject {
  margin: 0; font-family: var(--font-stencil); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-d3); line-height: 1.06; letter-spacing: 0.04em;
  color: var(--paint-bright);
}
/* The verdict pill (DESIGN.md PR21). Dark ink on the ramp colour the verdict's own points land
   in — LEGAL_POINTS[verdict] through bandOf(…, LEGAL_BANDS).step, computed in RecordTile.astro
   so the page and scripts/lib/score.ts can never disagree about which step a verdict is. The
   phrase is always inside it (rule 2: never a colour alone), centred, and it wraps to two lines
   rather than truncating, so the longest phrase any of the three tables can hand it reads whole.
   #20250C is the same dark the lime buttons use; every step clears 6:1 against it (gated). */
.rtile__status {
  display: inline-block; margin-top: 9px; padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-xs); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.06em; text-align: center;
  color: #20250C; background: var(--chalk-dim);
}
.rtile__status--5 { background: var(--score-5); }
.rtile__status--4 { background: var(--score-4); }
.rtile__status--3 { background: var(--score-3); }
.rtile__status--2 { background: var(--score-2); }
.rtile__status--1 { background: var(--score-1); }
/* Not yet verified wears the chalk grey, not a ramp step: it has no place on the ramp at all
   (PR14 — dimming means "not yet", and this is that dimming in pill form). */
.rtile__status--u { background: var(--chalk-dim); }
.rtile__chevron { position: absolute; right: 11px; bottom: 11px; color: var(--paint-dim); transition: transform 0.15s ease-out; }
.rtile__details[open] .rtile__chevron { transform: rotate(180deg); }
.rtile__face:hover .rtile__subject { color: #FFFFFF; }

/* The wide keystone: "what the law calls it" spans the roadway. */
.rtile--wide { margin-bottom: 6px; }
.rtile--wide .rtile__face { grid-template-columns: auto auto; justify-content: center; gap: 22px; padding: 22px 40px 22px 24px; }
.rtile--wide .rtile__glyph svg { width: 64px; height: 64px; }
/* The keystone takes its emphasis from the 64px glyph and the centred face, not from a
   fourteenth size: its subject is the same --fs-d3 every other tile subject is. */

/* Unverified: quiet, small, faded — honest without shouting. */
.rtile--unverified { background: color-mix(in srgb, var(--road-2) 55%, var(--road)); }
.rtile--unverified::before { border-width: 3px; border-bottom: 0; border-color: color-mix(in srgb, var(--paint) 46%, var(--road)); }
.rtile--unverified .rtile__face { padding: 12px 28px 12px 12px; gap: 11px; }
.rtile--unverified .rtile__glyph { color: color-mix(in srgb, var(--paint) 52%, var(--road)); }
.rtile--unverified .rtile__glyph svg { width: 34px; height: 34px; }
.rtile--unverified .rtile__subject { font-size: var(--fs-d4); color: color-mix(in srgb, var(--paint) 72%, var(--road)); }
/* Same pill, tighter: a bay tile is half the scale of a verified one, so the padding shrinks
   and the type step does not — one pill size across the page. */
.rtile--unverified .rtile__status { margin-top: 6px; padding: 4px 10px; }
.rtile--unverified .rtile__chevron { right: 8px; bottom: 8px; width: 13px; height: 13px; }

/* --- The evidence, one tap deep ------------------------------------------- */
.rtile__evidence {
  padding: 4px 20px 22px; border-top: 2px solid color-mix(in srgb, var(--paint) 30%, transparent);
  margin: 0 14px; font-family: var(--font-road); font-size: var(--fs-md); line-height: 1.55; color: var(--paint);
}
.rtile__evidence > :first-child { margin-top: 16px; }
.rtile__evidence a { color: var(--paint-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rtile__evidence a:hover { color: #FFFFFF; }
.rtile .verdict-card__definition { margin: 16px 0 0; font-weight: 600; color: var(--paint-bright); }
.rtile .verdict-card__inherited, .rtile .verdict-card__takes-effect, .rtile .verdict-card__gating { margin: 10px 0 0; color: var(--paint-dim); font-size: var(--fs-sm); }
.rtile .verdict-card__summary { margin: 12px 0 0; }
/* The mono stays where it belongs: a quoted statute, a section reference, a date, a code. */
.rtile .verdict-card__quote {
  margin: 14px 0 0; padding: 2px 0 2px 16px; border-left: 5px solid var(--paint);
  font-family: var(--font-roadmono); font-size: var(--fs-sm); line-height: 1.6; color: var(--paint-bright);
}
.rtile .verdict-card__source { margin: 14px 0 0; font-family: var(--font-roadmono); font-size: var(--fs-xs); line-height: 1.8; }
.rtile .verdict-card__source > * { margin-right: 10px; }
.rtile .tier-badge {
  display: inline-block; padding: 1px 8px; border: 2px solid var(--paint); border-radius: 4px;
  font-family: var(--font-roadmono); font-size: var(--fs-xs); text-transform: none; color: var(--paint-bright);
  background: transparent;
}
.rtile .tier-badge--C { border-style: dashed; color: var(--paint-dim); }
.rtile .as-of, .rtile .takes-effect { color: var(--paint-dim); font-size: var(--fs-xs); }
.rtile .verdict-card__archive { font-size: var(--fs-xs); }
.rtile .verdict-card__verified { margin: 12px 0 0; font-family: var(--font-roadmono); font-size: var(--fs-xs); line-height: 1.7; color: var(--paint-dim); }
.rtile .verdict-card__stale { color: var(--paint-bright); }
.rtile .verdict-card__conditions { margin: 12px 0 0; padding-left: 22px; }
/* What the law says about the machine sits apart from what it asks of the rider
   (PRODUCT.md position 7): quieter, dimmer, and never a bullet in the conduct list. Round 3
   took it off the mono — these are sentences about a device, not a quoted code section. */
.rtile .verdict-card__device { margin: 12px 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--paint-dim); }
.rtile .verdict-card__conditions li { margin-top: 6px; }
.rtile .verdict-card__unverified { margin-top: 14px; font-size: var(--fs-md); color: var(--paint-dim); }
.rtile .verdict-card__unverified > p { margin: 8px 0 0; }
.rtile .verdict-card__research { margin-top: 12px; }
/* A disclosure summary is a control, so it is interface, not data. */
.rtile .verdict-card__research > summary { cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--paint-dim); min-height: 44px; display: flex; align-items: center; }
.rtile .verdict-card__thresholds { margin: 8px 0 0; font-size: var(--fs-sm); }
.rtile .verdict-card__sources { margin: 10px 0 0; padding-left: 22px; font-size: var(--fs-sm); line-height: 1.7; }
.rtile .verdict-card__sources li { margin-top: 8px; }
.rtile .verdict-card__blocked { display: block; color: var(--paint-dim); font-size: var(--fs-sm); }

/* --- The street as ridden: chalk, never paint ----------------------------- */
.chalk { padding: 60px 84px 34px; }
/* Chalk is a real material here: the frame and the title are masked by
   chalk-wear.webp (pore dropout + dry streaks), the way paint marks are
   masked by paint-wear.webp. Body copy is never masked. */
.chalk-worn {
  -webkit-mask-image: url('/assets/road/chalk-wear.webp'); mask-image: url('/assets/road/chalk-wear.webp');
  -webkit-mask-size: 480px; mask-size: 480px;
}
.chalk__frame { position: relative; max-width: 880px; margin: 0 auto; padding: 30px 34px 34px; color: #BCC9CD; }
.chalk__frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 3px dashed #AEBFC4;
  -webkit-mask-image: url('/assets/road/chalk-wear.webp'); mask-image: url('/assets/road/chalk-wear.webp');
  -webkit-mask-size: 480px; mask-size: 480px;
}
.chalk__title {
  margin: 0; font-family: var(--font-stencil); font-weight: 800; text-transform: uppercase;
  font-size: var(--fs-d2); line-height: 1.06; letter-spacing: 0.04em;
  text-wrap: balance; color: #D3DEE1;
}
.chalk__lede { margin: 14px 0 0; font-family: var(--font-road); font-size: var(--fs-md); line-height: 1.6; max-width: 62ch; }
.chalk__posture { margin: 16px 0 0; font-weight: 700; font-size: var(--fs-md); line-height: 1.55; color: #D3DEE1; }
.chalk__counts, .chalk__empty { margin: 12px 0 0; font-family: var(--font-road); font-size: var(--fs-sm); line-height: 1.6; }
.chalk a { color: #D3DEE1; text-decoration-style: dashed; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chalk a:hover { color: #FFFFFF; }

/* --- The report page: chalk intake (spec 2026-09-02 §7; owner pass 2026-09-04) -------------
   This is the one page on the site a rider TYPES into, and the owner's read of the first
   build was "handsome, but flat — this is where our neon needs to land". So two named rules
   are added to DESIGN.md and both live here:

   PR19, the lane-stripe focus: every control's resting border is a chunky 4px dashed chalk
   line and its focused border is the same 4px dash in lime. The WIDTH never changes between
   the two states, so nothing reflows when focus moves; only the colour does, and 4px dashes
   are the road marking this world already paints. Controls that have no border of their own
   (the ranges, the checkbox, the buttons, the tabs) take the same stripe as a dashed lime
   outline at 4px offset. Never a glow — depth here is still paint on ground.

   PR20, neon on intake: lime fills a slider track, paints its thumb, sets the digit and word
   readouts and fills every submit button. It is the interaction colour on this page and
   nothing else; the record page's paint/chalk rule and PR13's "lime marks verified" are
   untouched, because no verdict, tier or count of PEVRA's own is rendered here. */
.report__chalk { padding-top: 34px; }

/* The three openings, all PROSE and so all Overpass (round 3): the mission line is the first
   sentence a rider reads and is byte-exact from report-form.ts, the invitation follows it, and
   the scope note is the italic qualifier under both. Falling size, one face. */
.report__mission { margin: 18px 0 0; font-family: var(--font-road); font-weight: 600; font-size: var(--fs-lg); line-height: 1.55; max-width: 58ch; color: #D3DEE1; }
.report__lede { margin: 16px 0 0; font-family: var(--font-road); font-size: var(--fs-md); line-height: 1.55; max-width: 62ch; }
.report__scope { margin: 14px 0 0; font-family: var(--font-road); font-style: italic; font-size: var(--fs-md); line-height: 1.55; max-width: 62ch; }

/* --- Two tabs, hand-wired ---------------------------------------------------------------- */
.report__tabs { margin: 30px 0 0; }
.report__tabs[hidden] { display: none; }
.report__tablist { display: flex; gap: 6px; border-bottom: 3px solid color-mix(in srgb, #AEBFC4 44%, transparent); }
.report__tab {
  flex: 1 1 auto; min-height: 52px; padding: 0 18px; background: transparent;
  border: 0; border-bottom: 6px solid transparent; margin-bottom: -3px;
  color: #BCC9CD; font-family: var(--font-stencil); font-weight: 800; font-size: var(--fs-d4);
  line-height: 1.06; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.report__tab:hover { color: #D3DEE1; }
.report__tab[aria-selected="true"] { color: var(--lime); border-bottom-color: var(--lime); }
.report__panel { outline: none; }
.report__panel[hidden] { display: none; }

/* --- The forms ---------------------------------------------------------------------------- */
.report__form { margin: 26px 0 0; display: grid; gap: 24px; color-scheme: dark; }
/* `display: grid` outranks the user-agent's [hidden] { display: none }, so without this the
   sign-in, standing and incident forms all render at once and the script's show() is a no-op.
   Same shape as .nav-mobile-panel[hidden] and .calendar-item[hidden] above. */
.report__form[hidden] { display: none; }
.report__field { display: grid; gap: 8px; }
.report__form label, .report__form legend {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-md); line-height: 1.55;
  text-transform: none; letter-spacing: 0; color: #D3DEE1; padding: 0;
}
/* PR19, the lane stripe. `border-style: dashed` draws the browser's own short ticks, which read
   as a dotted box rather than a road marking, so the stripe is an SVG border-image whose dash
   length we control.

   Round 1 stroked ONE rect with `stroke-dasharray` and let the dash phase fall where it fell.
   That works on the top and bottom edges and fails on the sides: the vertical middle slices of
   the tile landed inside a gap, so `round` tiled emptiness up the left and right of every field.
   A border-image tile has to be drawn per edge, because each edge repeats its own middle slice
   independently and knows nothing about the path that produced it.

   So: four explicit rectangles, one centred in each edge's middle slice. 54 = 6 (corner) + 42
   (one dash + one gap) + 6 (corner); slice 6 against a 6px border width is a 1:1 scale, so the
   units below are CSS pixels. Each dash is 28 long and 4 thick, inset 1 unit from the outer edge
   so the mark has a pixel of air on each side of it, and centred in its 42-unit slice — 7 units
   of gap at each end, which meet across the tile seam as the 14-unit gap between dashes. The
   corners are deliberately empty: a road marking breaks at a corner, and an inked corner was the
   thing that made round 1's top and bottom edges read as a box rather than a lane.

   The plain `dashed` border stays declared FIRST, at the same 6px, as the fallback for anything
   that cannot draw the image — a `solid transparent` border would render as no border at all
   there. Where the image does load it replaces the border's style and colour entirely, so the
   fallback costs nothing. */
.report__form {
  --lane-chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='%23AEBFC4'%3E%3Crect x='13' y='1' width='28' height='4'/%3E%3Crect x='13' y='49' width='28' height='4'/%3E%3Crect x='1' y='13' width='4' height='28'/%3E%3Crect x='49' y='13' width='4' height='28'/%3E%3C/svg%3E");
  --lane-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='%23C8E64A'%3E%3Crect x='13' y='1' width='28' height='4'/%3E%3Crect x='13' y='49' width='28' height='4'/%3E%3Crect x='1' y='13' width='4' height='28'/%3E%3Crect x='49' y='13' width='4' height='28'/%3E%3C/svg%3E");
}
/* :where() so every rule below can override a declaration here without an arms race on
   specificity. Ranges and the checkbox opt out — they are drawn, not filled in.
   The padding is 2px tighter on every side than the 4px-border version it replaces, so a 6px
   border leaves the text and the box exactly where they were: 12 + 6 = 14 + 4 across, 10 + 6 =
   12 + 4 down. */
.report__form :where(input:not([type="range"]):not([type="checkbox"]), select, textarea) {
  min-height: 52px; padding: 10px 12px; background: var(--road-input, #3F3F40); color: var(--paint-bright);
  border: 6px dashed color-mix(in srgb, #AEBFC4 62%, var(--road-input, #3F3F40));
  border-image: var(--lane-chalk) 6 / 6px / 0 round;
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.55; caret-color: var(--lime);
}
.report__form textarea { line-height: 1.55; }
/* Focus repaints the same stripe in lime. Only the colour changes — same image, same slice,
   same 6px width — so nothing reflows when focus moves. */
.report__form input:focus-visible,
.report__form select:focus-visible,
.report__form textarea:focus-visible { outline: none; border-color: var(--lime); border-image-source: var(--lane-lime); }
.report__form input[type="range"]:focus-visible,
.report__form input[type="checkbox"]:focus-visible,
.report__button:focus-visible,
.report__tab:focus-visible,
.report__privacy > summary:focus-visible { outline: 4px dashed var(--lime); outline-offset: 4px; }

/* --- Slider plus readout: one value, two ways to move it ---------------------------------- */
.report__dial { display: grid; gap: 6px; }
.report__slider, .report__counts { border: 0; padding: 0; margin: 0; }
.report__slider legend, .report__counts legend { margin-bottom: 10px; }
.report__countgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 30px; }
.report__count { display: grid; gap: 8px; align-content: start; }

.report__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: transparent;
  accent-color: var(--lime); cursor: pointer;
}
.report__range::-webkit-slider-runnable-track {
  height: 16px; border-radius: 8px;
  background: linear-gradient(to right, var(--lime) 0 var(--fill, 0%), color-mix(in srgb, #AEBFC4 62%, var(--road-input, #3F3F40)) var(--fill, 0%) 100%);
}
.report__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 32px; height: 32px; margin-top: -8px; border-radius: 50%;
  background: var(--lime); border: 4px solid #20250C;
}
.report__range::-moz-range-track { height: 16px; border-radius: 8px; background: color-mix(in srgb, #AEBFC4 62%, var(--road-input, #3F3F40)); }
.report__range::-moz-range-progress { height: 16px; border-radius: 8px; background: var(--lime); }
.report__range::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); border: 4px solid #20250C; }

/* The word a 1–7 slider is sitting on, and the ends of its travel. */
.report__word {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: var(--fs-num); line-height: 1; color: var(--lime);
}
.report__ends { display: flex; justify-content: space-between; margin: 0; font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.55; color: #BCC9CD; }

/* The digits ARE the field: editable, tabular, and the size of a scoreboard. One readout size
   (--fs-num) for the digits and for the word the sliders sit on — round 3 retired the second,
   smaller count-digit size, which bought nothing but another step on the ramp. */
.report__form input.report__digits {
  width: 100%; max-width: 6ch; min-height: 0; padding: 2px 8px; text-align: center;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-num);
  line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
/* The miles box ships empty on purpose (a zero has to be the rider's own answer), so it needs a
   placeholder to stop reading as a broken field. Chalk-dim, never lime: lime is a value here. */
.report__form input.report__digits::placeholder { color: #96A4A8; opacity: 1; }
.report__digits::-webkit-outer-spin-button,
.report__digits::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.report__check { display: flex; gap: 14px; align-items: center; min-height: 48px; text-transform: none; letter-spacing: 0; font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.55; }
.report__form .report__check input { min-height: 0; flex: 0 0 28px; width: 28px; height: 28px; margin: 0; accent-color: var(--lime); }

/* PR20: every save is lime, and on a phone it is the full width of the road. */
.report__button {
  min-height: 52px; padding: 0 26px; background: var(--lime); color: #20250C; border: 4px solid var(--lime);
  font-family: var(--font-stencil); font-weight: 800; font-size: var(--fs-d4);
  line-height: 1.06; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; justify-self: start;
}
.report__button:hover { background: color-mix(in srgb, var(--lime) 82%, #FFFFFF); border-color: color-mix(in srgb, var(--lime) 82%, #FFFFFF); }
/* Disabled is a marking with no fill, never a dimmer lime: paint-dim clears 6:1 on the ground
   where a 34%-lime ground under #20250C would sit at 3.1:1. */
.report__button[disabled] { background: transparent; color: var(--paint-dim); border: 4px dashed var(--paint-dim); cursor: not-allowed; }

.report__h3 { margin: 0; font-family: var(--font-stencil); font-weight: 800; font-size: var(--fs-d3); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.06; color: #D3DEE1; }
/* The vehicle class the link asked for, as a tag under the heading rather than welded to it. */
.report__class { margin: -14px 0 0; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-xs); line-height: 1.55; text-transform: uppercase; letter-spacing: 0.08em; color: #BCC9CD; }
.report__class:has(> span:empty) { display: none; }
.report__class + .report__note { margin-top: -10px; }
.report__note { margin: 0; font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.55; color: #BCC9CD; }
/* The page's own notices — no JavaScript, an unknown vehicle class, reports not switched on.
   Interface, at prose size: each one is the page telling a rider what it cannot do for them. */
.report__chalk .chalk__empty { font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.55; }

/* Owner ruling: the privacy block is the page's small print and sits under the forms. Its
   summary is a control (interface); the paragraph under it is prose. */
.report__privacy { margin: 44px 0 0; padding-top: 22px; border-top: 2px dashed color-mix(in srgb, #AEBFC4 40%, transparent); font-family: var(--font-road); font-size: var(--fs-sm); }
.report__privacy > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: #D3DEE1; }
.report__privacy p { margin: 8px 0 0; line-height: 1.55; max-width: 70ch; }

@media (max-width: 640px) {
  /* The section pads the frame in by 26px a side at this tier, which cost the sliders 28px of
     road on a 390px phone. Two classes, so the 860px `.chalk` shorthand further down the file
     cannot outrank this by source order. `.chalk` itself is untouched — record pages share it. */
  .chalk.report__chalk { padding-left: 12px; padding-right: 12px; }
  .report__countgrid { grid-template-columns: 1fr; gap: 22px; }
  /* Two stencil labels have to share a 320px road: less tracking, less padding, and a
     second line rather than a clipped word if the phone is narrower still. The SIZE no longer
     changes here — --fs-d4 is 1.05rem at every width, which is what one ramp means. */
  .report__tab { padding: 0 8px; letter-spacing: 0.03em; line-height: 1.15; }
  /* Owner: "sliders are very narrow, even on mobile — full width for sure." */
  .report__form { gap: 22px; }
  .report__button { width: 100%; justify-self: stretch; }
  .report__form :where(input:not([type="range"]):not([type="checkbox"]), select, textarea) { min-height: 56px; }
  .report__form input.report__digits { min-height: 0; }
}

/* A build date and a git sha are codes: the mono's one job. The disclaimer beside it is prose. */
.record__stamp { font-family: var(--font-roadmono); font-size: var(--fs-xs); }
.record__disclaimer { font-size: var(--fs-sm); }

@media (max-width: 1000px) {
  .zone__tiles { grid-template-columns: repeat(2, 1fr); }
  .zone__bay { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* The place name is the one ramp step that re-bases below the fold width, and it re-bases as
     the TOKEN rather than as a second declaration on .record__place — so the rule that every
     size in this world is a ramp token stays literally true at every breakpoint. */
  body[data-surface="painted-road"] { --fs-d1: clamp(2.7rem, 13.5vw, 5rem); }
  .record__head { padding: 40px 18px 6px; }
  .record__lanes { padding: 20px 26px 8px; }
  .record__curb { display: none; }
  .zone__walk { height: 48px; }
  .chalk { padding: 44px 26px 24px; }
  .chalk__frame { padding: 22px 20px 26px; }
  .scoreband { gap: 12px; margin-top: 22px; }
  .scorecell { padding: 16px 16px 14px; }
}
/* Phones keep the grid: verified tiles stay 2-across so the page never becomes
   the stacked ledger, and the bay stays inset and smaller than the tiles above. */
@media (max-width: 640px) {
  .zone__tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rtile__face { grid-template-columns: 1fr; gap: 8px; padding: 14px 14px 30px; align-content: start; }
  .rtile__glyph svg { width: 42px; height: 42px; }
  .rtile__subject { font-size: var(--fs-d4); }
  /* PR21 on a phone: the pill becomes a PLATE. In a two-across tile grid a long phrase
     ("Prohibited, and the law says so") wraps to three or four lines, and a 999px lozenge
     around three ragged lines reads as a blob rather than as a status. Squared to 12px and
     run full width, it reads as what it is — a painted plate the phrase sits on. The text
     stays centred, as it is in the desktop pill: the plate is a sign, and a sign centres.
     Same colours, same ink, same phrase, same type step; only the shape gives ground. */
  .rtile__status { display: block; width: 100%; border-radius: 12px; text-align: center; padding: 8px 12px; }
  .rtile--wide .rtile__face { grid-template-columns: auto 1fr; padding: 16px 30px 16px 16px; }
  .zone__bay { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 18px 0; }
  .rtile--unverified .rtile__face { grid-template-columns: 1fr; padding: 10px 10px 26px; gap: 6px; }
  .rtile--unverified .rtile__glyph svg { width: 26px; height: 26px; }
  .rtile--unverified .rtile__subject { font-size: var(--fs-sm); }
  /* The bay's plate is the same plate, half a step tighter — a bay tile runs at roughly half
     the scale of a verified one and its phrase is the shortest on the page. */
  .rtile--unverified .rtile__status { padding: 6px 10px; }
  .rtile__evidence { margin: 0 8px; padding: 4px 8px 16px; font-size: var(--fs-sm); }
  .scoreband { gap: 10px; }
  .scorecell { padding: 12px 12px 10px; }
  .scorecell__num { font-size: clamp(2.9rem, 15vw, 4.8rem); }
  .scorecell__num--none { font-size: 1.15rem; }
  /* THE ONE RAMP EXCEPTION (DESIGN.md "Type roles and ramp"). Two stats cells share a 390px
     phone, which leaves each band word about 148px of content box for a 36-character string
     ("Community · what riding here is like"). --fs-d4 went to 1.2rem so the stencil reads bold
     enough at desktop; at this width that is a 46% increase on the 0.82rem the band shipped
     with, and the word breaks to a third line. It steps down to 1.05rem — the ramp's previous
     d4 — and nothing else in the record world is allowed to step down like this. */
  .scorecell__band { font-size: 1.05rem; }
  .scorecell__pill { margin-left: 0; display: block; width: max-content; margin-top: 6px; }
  .scorecell__basis, .scorecell__seized { font-size: var(--fs-xs); }
  /* A phone cell is too narrow for two 44px links on one line: they stack, and the
     separator that joined them would otherwise orphan onto a line of its own. */
  .scorecell__links { display: flex; flex-direction: column; align-items: flex-start; }
  .scorecell__sep { display: none; }
}

/* The save/sign-in status lines are road signs, not footnotes (owner: "bigger, bolder feedback").
 * Lane-stripe frame in the tone's colour, Bricolage at 700, lime for ok, paint for a warning.
 * Round 3 puts the two tones on ramp steps rather than two one-off sizes: a success is the
 * lede step (--fs-lg) and a warning is the prose step (--fs-md), and the frame, the weight and
 * the colour still carry the emphasis at every width — nothing re-sizes on a phone. */
.report__status { margin-top: 16px; padding: 14px 18px; font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.55; font-weight: 700; color: var(--paint-bright); border: 6px dashed var(--paint-dim); border-image: var(--lane-chalk) 6 / 6px / 0 round; }
.report__status[data-tone="ok"] { color: var(--lime); font-size: var(--fs-lg); border-color: var(--lime); border-image-source: var(--lane-lime); }