/* hitandrun.report. Public-portal layout: utility strip, masthead, navy nav, banded body,
   structured footer. Mobile first, 375px is the design width, 1100px the content ceiling. */

:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  --ink: #16181d;
  --muted: #4a5160;
  --bg: #ffffff;
  --band: #f1f4f9;
  --tint: #e7edf8;
  --strip: #e9edf4;
  --line: #ccd3df;
  --line-soft: #e2e7ef;

  --brand: #0b3d91;          /* navy surfaces: nav bar, hero, footer */
  --brand-dark: #072d6e;
  --brand-ink: #ffffff;      /* text on navy */
  --brand-soft: #c9d9f5;     /* muted text on navy, 7:1 on #0b3d91 */
  --link: #0b3d91;
  --link-visited: #5a2d82;

  --saffron: #e07a1f;
  --saffron-line: #c96a12;
  --saffron-hover: #c96a12;
  --on-saffron: #1b1205;     /* 5.9:1 on saffron, 4.7:1 on the hover shade */
  --on-danger: #ffffff;
  --green: #0f6b3a;

  --danger: #a3160f;
  --ok: #12603a;
  --focus: #0b3d91;

  --gutter: 1rem;
  --wrap: 1100px;
}

:root[data-text="sm"] { font-size: 87.5%; }
:root[data-text="lg"] { font-size: 115%; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ebf1;
    --muted: #aeb6c4;
    --bg: #101319;
    --band: #171b23;
    --tint: #1a2233;
    --strip: #1a1f28;
    --line: #363f4e;
    --line-soft: #262d38;

    --brand: #0d2d61;
    --brand-dark: #0a2450;
    --brand-ink: #f2f5fb;
    --brand-soft: #b6c8e8;
    --link: #93b7ff;
    --link-visited: #c4a7e7;

    --saffron: #f0921f;
    --saffron-line: #f0921f;
    --saffron-hover: #ffa83d;
    --on-saffron: #1b1205;
    --on-danger: #2a0806;
    --green: #4fbc82;

    --danger: #ff9a92;
    --ok: #6fd3a2;
    --focus: #9dc0ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: 46rem; }

h1, h2, h3 { line-height: 1.25; }
h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 0.75rem;
}
h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.0625rem; margin: 1.25rem 0 0.25rem; }
p, li { margin: 0.6rem 0; }
p { max-width: 70ch; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }

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

/* ---------- utility strip ---------- */
.utility { background: var(--strip); border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.utility .wrap {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: center; justify-content: space-between; padding-block: 0.4rem;
}
.utility p { margin: 0; max-width: none; }
.disclaimer { font-weight: 600; }
.utility-tools { display: flex; align-items: center; gap: 0.75rem; }
.textsize { display: flex; align-items: center; gap: 0.25rem; }
.textsize span { color: var(--muted); }
.textsize button {
  font: inherit; line-height: 1; padding: 0.2rem 0.4rem; min-width: 2rem;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer;
}
.textsize button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.textsize[hidden] { display: none; }

/* ---------- masthead ----------
   Kept deliberately tight: the lockup SVG is cropped to its ink, .lockup is a block so no
   inline baseline gap creeps in under it, and the tagline sits 6px below the logo. */
.masthead { background: var(--bg); }
.masthead .wrap { padding-block: 0.4rem 0.45rem; }
.lockup { display: block; width: fit-content; line-height: 0; }
.lockup-img { display: block; height: 2rem; width: auto; }
.lockup-tag {
  margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.4;
  color: var(--muted); max-width: 70ch;
}
@media (min-width: 48rem) {
  .masthead .wrap { padding-block: 0.6rem 0.65rem; }
  .lockup-img { height: 2.75rem; }
  .lockup-tag { font-size: 0.875rem; line-height: 1.5; }
}

/* A tricolour-inspired rule: three segments side by side, never stacked stripes. */
.accent { height: 4px; display: flex; }
.accent i { display: block; height: 100%; }
.accent i:nth-child(1) { width: 34%; background: var(--saffron); }
.accent i:nth-child(2) { width: 33%; background: var(--line); }
.accent i:nth-child(3) { width: 33%; background: var(--green); }

/* ---------- primary nav ---------- */
.mainnav { background: var(--brand); }
.mainnav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.mainnav li { margin: 0; }
.mainnav a {
  display: block; padding: 0.65rem 0.9rem; color: var(--brand-ink);
  text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  border-bottom: 3px solid transparent;
}
.mainnav a:visited { color: var(--brand-ink); }
.mainnav a:hover { background: var(--brand-dark); border-bottom-color: var(--saffron); }
.mainnav :focus-visible { outline-color: #fff; outline-offset: -3px; }
.mainnav .wrap { padding-inline: calc(var(--gutter) - 0.9rem); }

/* ---------- page furniture ---------- */
main { display: block; }
main[tabindex]:focus { outline: none; }
.section { padding: 1.75rem 0; }
.section.band { background: var(--band); border-block: 1px solid var(--line-soft); }
.section > .wrap > :first-child { margin-top: 0; }
.page { padding: 1.5rem 0 2.5rem; }

.hint { color: var(--muted); font-size: 0.875rem; margin: 0.25rem 0; max-width: 60ch; }
.optional { color: var(--muted); font-weight: 400; }
.req { color: var(--danger); font-weight: 700; }
.error { color: var(--danger); font-weight: 600; }
.error:empty { display: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem; word-break: break-all; color: var(--muted); }

.button, button.primary {
  display: inline-block; padding: 0.7rem 1.2rem; font: inherit; font-weight: 700;
  color: var(--on-saffron); background: var(--saffron); border: 1px solid var(--saffron-line);
  border-radius: 4px; cursor: pointer; text-decoration: none;
}
.button:visited { color: var(--on-saffron); }
.button:hover, button.primary:hover { background: var(--saffron-hover); color: var(--on-saffron); }
button {
  font: inherit; font-weight: 600; padding: 0.6rem 1rem; cursor: pointer;
  color: var(--brand-ink); background: var(--brand); border: 1px solid var(--brand);
  border-radius: 4px;
}
button:hover { background: var(--brand-dark); }
button.quiet { color: var(--link); background: var(--bg); border-color: var(--line); }
button.quiet:hover { background: var(--tint); }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand); color: var(--brand-ink); padding: 2rem 0 2.25rem;
}
.hero-grid { position: relative; display: grid; gap: 1.75rem; }
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}
.hero-card {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 4px solid var(--saffron); border-radius: 4px; padding: 0.35rem 1.1rem 0.9rem;
}
.hero-card h2 { font-size: 1.0625rem; margin: 0.75rem 0 0.35rem; }
.hero-card ol { margin: 0; padding-left: 1.15rem; }
.hero-card li, .hero-card p { color: var(--brand-soft); font-size: 0.9375rem; }
.hero-card p { margin-bottom: 0; }
.hero-card a { color: #fff; }
.eyebrow {
  margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 700;
  color: var(--brand-soft); border-left: 3px solid var(--saffron); padding-left: 0.6rem;
}
/* Sized and balanced so the headline lands in three even lines on a 1280px desktop. */
.hero h1 {
  color: var(--brand-ink); max-width: 19em; text-wrap: balance;
  font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.25rem);
}
.hero .lede { color: var(--brand-soft); font-size: 1.0625rem; max-width: 60ch; }
.hero .lede strong { color: var(--brand-ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.hero-actions a:not(.button) { color: #fff; font-weight: 600; }
.hero-actions a:not(.button):visited { color: #fff; }
.hero :focus-visible { outline-color: #fff; }

/* The road motif. A diagonal tarmac band with edge lines, plus a broken centre line whose
   dashes drift on a 12s linear loop. Decorative only, and off on small screens. */
.hero-road { display: none; }
@media (min-width: 48rem) {
  .hero-road {
    display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  }
  .hero-road i {
    position: absolute; top: -40%; height: 180%; transform: rotate(19deg);
  }
  .road-top {
    right: 3%; width: 15rem;
    background: linear-gradient(90deg,
      transparent 0 1%, rgba(255, 255, 255, 0.14) 1% 2.2%,
      rgba(255, 255, 255, 0.035) 2.2% 97.8%,
      rgba(255, 255, 255, 0.14) 97.8% 99%, transparent 99% 100%);
  }
  .road-line {
    right: calc(3% + 7.2rem); width: 0.55rem;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0 42%, transparent 42%);
    background-size: 100% 5rem; background-repeat: repeat-y;
    animation: roaddrift 12s linear infinite;
  }
}
@keyframes roaddrift {
  from { background-position: 0 0; }
  to { background-position: 0 5rem; }
}

/* The two amounts get a saffron rule that draws in left to right, staggered, once on load. */
.hero h1 .amount { position: relative; }
.hero h1 .amount::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 0.075em;
  background: var(--saffron); border-radius: 1px;
  transform: scaleX(0); transform-origin: left center;
  animation: drawrule 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 420ms forwards;
}
.hero h1 .amount:nth-of-type(2)::after { animation-delay: 700ms; }
@keyframes drawrule { to { transform: scaleX(1); } }

/* The hero text rises 8px and fades in, 60ms apart, top to bottom. */
.hero .eyebrow, .hero h1, .hero .lede, .hero-actions, .hero-card {
  animation: herorise 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero h1 { animation-delay: 60ms; }
.hero .lede { animation-delay: 120ms; }
.hero-actions { animation-delay: 180ms; }
.hero-card { animation-delay: 240ms; }
@keyframes herorise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* No motion at all when it is not wanted. Every element shows its finished state. */
@media (prefers-reduced-motion: reduce) {
  .road-line { animation: none; }
  .hero .eyebrow, .hero h1, .hero .lede, .hero-actions, .hero-card { animation: none; }
  .hero h1 .amount::after { animation: none; transform: scaleX(1); }
}

/* ---------- stat band ---------- */
.stats { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.stats li { margin: 0; border-top: 4px solid var(--brand); padding-top: 0.75rem; }
.stats li:nth-child(3) { border-top-color: var(--saffron); }
.stats b {
  display: block; font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.02em;
}
.stats .cap { display: block; font-weight: 700; margin: 0.35rem 0 0.25rem; }
.stats p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }

/* ---------- numbered steps ---------- */
.steps { display: grid; gap: 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.steps li { margin: 0; counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--brand); color: var(--brand-ink);
  font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.5rem;
}
.steps h3 { margin: 0 0 0.25rem; }
.steps p { margin: 0; color: var(--muted); }

/* ---------- panels ---------- */
.panel { background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 4px; padding: 1rem 1.1rem; margin: 1.25rem 0; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel.warn { border-left-color: var(--saffron); background: var(--band); }
.panel h2, .panel h3 { margin-top: 0; }

/* ---------- what this site is not ----------
   A grey band edge to edge, heading left, the four limits right. It closes the home page, so
   the footer sits straight under it and the only gap is this band's own 2.5rem bottom padding. */
.notband {
  background: var(--band); border-top: 1px solid var(--line-soft); padding: 2.25rem 0 2.5rem;
}
.notgrid { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) {
  .notgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 3rem; align-items: start; }
}
.notband h2 {
  margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem);
}
.notrows { margin: 0; }
.notrows dt {
  font-weight: 700; padding-top: 0.85rem; border-top: 1px solid var(--line);
}
.notrows dt:first-of-type { padding-top: 0; border-top: 0; }
.notrows dd { margin: 0.1rem 0 0.85rem; color: var(--muted); max-width: 64ch; }
.notrows dd:last-of-type { margin-bottom: 0; }
main:has(> .notband:last-child) + .sitefoot { margin-top: 0; }

/* ---------- document grid ---------- */
.doccards { display: grid; gap: 0.85rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .doccards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .doccards { grid-template-columns: repeat(3, 1fr); } }
.doccard {
  margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.85rem 1rem 1rem;
}
.doccard-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.doccard .glyph { color: var(--brand); width: 1.75rem; height: 1.75rem; flex: none; }
.daychip {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--brand-ink); background: var(--brand); border-radius: 2px; padding: 0.2rem 0.55rem;
}
.doccard h3 { font-size: 1rem; margin: 0.65rem 0 0.2rem; }
.doccard p { margin: 0; max-width: none; color: var(--muted); font-size: 0.9375rem; }

/* ---------- live activity strip ---------- */
.live-strip {
  background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--brand);
  border-radius: 4px; margin-top: 0.5rem;
}
.live-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.2rem 1rem; padding: 0.7rem 1rem 0.6rem;
}
.live-top h2 { margin: 0; font-size: 1.0625rem; }
.live-when {
  margin: 0; max-width: none; font-size: 0.8125rem; color: var(--muted);
  display: flex; align-items: center; gap: 0.4rem;
}
.live-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green); flex: none;
  animation: livepulse 2.6s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.live-figures {
  display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line-soft);
}
.live-figures li {
  margin: 0; padding: 0.7rem 1rem 0.8rem; border-inline-end: 1px solid var(--line-soft);
}
.live-figures li:nth-child(2n) { border-inline-end: 0; }
.live-figures li:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
@media (min-width: 48rem) {
  .live-figures { grid-template-columns: repeat(4, 1fr); }
  .live-figures li:nth-child(2n) { border-inline-end: 1px solid var(--line-soft); }
  .live-figures li:last-child { border-inline-end: 0; }
  .live-figures li:nth-child(-n+2) { border-bottom: 0; }
}
.live-figures strong {
  display: inline-block; font-family: var(--serif); line-height: 1.05; padding: 0 0.15rem;
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.1rem); border-radius: 2px;
  transition: background-color 0.5s ease;
}
.live-figures strong.is-fresh { background: var(--tint); }
.live-figures span { display: block; font-size: 0.8125rem; color: var(--muted); }

.live-ticker {
  display: flex; align-items: center; gap: 0.5rem; background: var(--band);
  border-top: 1px solid var(--line-soft); border-radius: 0 0 3px 3px; padding: 0.2rem 0.6rem;
}
.ticker-mask { flex: 1 1 auto; overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: tickerroll 50s linear infinite; }
.ticker-row { display: flex; align-items: center; }
.tick {
  display: inline-flex; align-items: center; white-space: nowrap; font-size: 0.875rem;
  padding: 0.45rem 0; color: var(--ink);
}
.tick::after { content: "\2022"; color: var(--brand); padding: 0 0.9rem; }
@keyframes tickerroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Accessibility trade-off: no Pause button. The ticker stops on hover and whenever focus is
   inside it, which is why .ticker-mask carries tabindex=0 and a focus ring of its own. */
.live-ticker:hover .ticker-track,
.live-ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-mask:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; transform: none; width: auto; }
  .ticker-row:nth-child(2) { display: none; }
  .ticker-mask { overflow-x: auto; }
  .live-dot { animation: none; }
}

/* ---------- form ---------- */
form { margin: 1.25rem 0; }
fieldset {
  border: 0; border-left: 4px solid var(--brand); margin: 0 0 1.5rem;
  padding: 0.25rem 0 0.75rem 1rem; max-width: 42rem;
}
legend { padding: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
legend .num { color: var(--muted); font-weight: 700; margin-right: 0.35rem; }
.field { margin: 0 0 1.1rem; max-width: 34rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field .hint { margin: 0 0 0.35rem; }
input, select, textarea {
  width: 100%; padding: 0.6rem 0.65rem; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--muted); border-radius: 3px;
}
input[type="file"] { padding: 0.5rem; border-style: dashed; }
textarea { resize: vertical; }
.field.check { display: flex; gap: 0.6rem; align-items: flex-start; max-width: 34rem; }
.field.check input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.2rem; accent-color: var(--brand); }
.field.check label { font-weight: 400; margin: 0; }
.field .msg { display: block; color: var(--danger); font-size: 0.875rem; font-weight: 600; margin-top: 0.25rem; }
.field .msg:empty { display: none; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.filelist { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.filelist li { margin: 0 0 0.6rem; padding: 0.55rem 0.7rem; background: var(--band);
  border: 1px solid var(--line-soft); border-radius: 3px; font-size: 0.9375rem; }
.filelist .name { font-weight: 600; }
.filelist .meta { display: block; color: var(--muted); font-size: 0.8125rem; }
.filelist code { display: block; margin-top: 0.15rem; }

/* ---------- tracking page ---------- */
.banner { background: var(--brand); color: var(--brand-ink); padding: 1.25rem 0 1.5rem; }
.banner h1 { color: var(--brand-ink); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.banner .state { font-size: 1.0625rem; font-weight: 700; margin: 0.25rem 0; }
.banner .meta { color: var(--brand-soft); font-size: 0.875rem; margin: 0.25rem 0 0; }
.banner :focus-visible { outline-color: #fff; }

.cols { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 60rem) { .cols { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2.5rem; } }
.cols section { margin-bottom: 1.5rem; }
.cols h2 { margin-top: 0; }
.aside { background: var(--band); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0.25rem 1rem 1rem; }

.docs, .stations, .notes { list-style: none; padding: 0; }
.docs li { margin: 0 0 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-soft); }
.docs li:last-child { border-bottom: 0; }
.docs a { font-weight: 600; }
.docs .hint { display: block; margin-top: 0.15rem; }
.stations li { margin: 0 0 0.75rem; }
.timeline { list-style: none; padding: 0 0 0 1.25rem; margin: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; margin: 0 0 1.25rem; padding-left: 0.25rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.65rem; top: 0.45rem; width: 0.7rem; height: 0.7rem;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--line);
}
.timeline .done::before { background: var(--green); border-color: var(--green); }
.timeline .when { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.timeline h3 { margin: 0.1rem 0 0.2rem; }
.timeline p { margin: 0.2rem 0; }
.timeline .done h3 { color: var(--ok); }

.manage { border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 4px;
  padding: 0.5rem 1.1rem 1.1rem; margin: 2rem 0 0; }
.manage form { margin: 0 0 1rem; }
.manage .row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.manage .row .field { margin: 0; max-width: 16rem; }
.danger-zone { border-top: 1px solid var(--line-soft); margin-top: 1rem; padding-top: 1rem; }

/* ---------- long-form pages ---------- */
.toc { background: var(--band); border: 1px solid var(--line-soft); border-radius: 4px;
  padding: 0.75rem 1rem; margin: 1.25rem 0 1.75rem; max-width: 46rem; }
.toc h2 { margin: 0 0 0.35rem; font-size: 1rem; }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin: 0.2rem 0; }
.prose h2 { padding-top: 0.5rem; border-top: 1px solid var(--line-soft); }
.prose ul { padding-left: 1.2rem; }
.prose li { max-width: 70ch; }

details { margin: 0.75rem 0; }
summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }

/* ---------- footer ---------- */
.sitefoot { background: var(--brand); color: var(--brand-ink); margin-top: 3rem; }
.sitefoot a { color: #fff; }
.sitefoot a:visited { color: #fff; }
.sitefoot :focus-visible { outline-color: #fff; }
.footcols { display: grid; gap: 1.5rem; padding: 1.75rem 0 1.25rem; }
@media (min-width: 48rem) { .footcols { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.sitefoot h2 { font-size: 0.9375rem; margin: 0 0 0.4rem; }
.sitefoot p { color: var(--brand-soft); font-size: 0.9375rem; }
.sitefoot ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.sitefoot li { margin: 0.3rem 0; }
.footmark { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.footmark .mark { flex: none; width: 1.6rem; height: 1.6rem; display: block;
  background: #fff; border-radius: 3px; padding: 0.25rem; }
.footmark b { font-size: 1.0625rem; }
.footbar { border-top: 1px solid rgba(255, 255, 255, 0.25); padding: 0.85rem 0 1.5rem;
  font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: space-between; }
.footbar p { margin: 0; color: var(--brand-soft); max-width: none; }
.footbar .disclaimer { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- print ---------- */
@media print {
  .utility, .masthead, .accent, .mainnav, .sitefoot, .manage, .hero-actions, .toc { display: none; }
  body { background: #fff; color: #000; font: 11pt/1.45 Georgia, "Times New Roman", serif; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .wrap { max-width: none; padding: 0; }
  .hero, .banner { background: #fff; color: #000; padding: 0 0 0.5cm; }
  .hero h1, .banner h1, .hero .lede, .banner .meta, .eyebrow, .sitefoot p { color: #000; }
  .section, .section.band, .panel, .aside, .filelist li { background: #fff; border-color: #000; }
  .live-ticker { display: none; }
  .doccard, .live-strip { background: #fff; border-color: #000; break-inside: avoid; }
  .cols { display: block; }
  .section { padding: 0.4cm 0; break-inside: avoid; }
  .docs li, .timeline li, .stats li { break-inside: avoid; }
  form, .filelist code { break-inside: avoid; }
}