/* app/access.css — the ACCESSIBLE TEXT VERSION's stylesheet (access.html only).
   =========================================================================
   Deliberately NOT built on app/pages.css. This page is a different design
   system on purpose: system-ui faces rather than the VT323/Orbitron display
   pair, a high-contrast light/dark palette named for its roles (--fg/--muted/
   --card/--accent/--focus) rather than for the instrument's colours, and form
   controls sized for zoom and touch. It shares no rule with the prose pages;
   folding it into their base would mean an override for every line, which is
   how an accessible page quietly stops being one.

   Self-contained, theme-aware, high-contrast. No images, no motion that isn't
   opt-out. Designed to be legible at large zoom and navigable by keyboard and
   screen reader — this is the point of the page. */
:root{
  --bg:#0b0e17; --fg:#eef2ff; --muted:#9fb0d0; --line:#2b3550;
  --card:#141a2b; --accent:#6ea8ff; --accent-fg:#04122e;
  --focus:#ffd23f; --ok:#57d98a; --warn:#ffb454;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8ff; --fg:#0c1330; --muted:#455174; --line:#c9d3ee;
         --card:#ffffff; --accent:#1b5fd9; --accent-fg:#ffffff; --focus:#a15c00; }
}
*{ box-sizing:border-box; }
html{ font-size:18px; }
body{ margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; padding:0 0 4rem; }
.wrap{ max-width:52rem; margin:0 auto; padding:1.25rem clamp(1rem,4vw,2rem); }
a{ color:var(--accent); }
h1{ font-size:1.6rem; margin:.2rem 0 .1rem; letter-spacing:.04em; }
h1 .tag{ font-size:.9rem; color:var(--muted); font-weight:400; letter-spacing:0; }
h2{ font-size:1.15rem; margin:1.6rem 0 .5rem; padding-top:.9rem; border-top:1px solid var(--line); }
.intro{ color:var(--muted); max-width:46rem; }
section{ margin:0; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:.6rem;
  padding:.9rem 1rem; margin:.5rem 0; }
label{ display:block; font-weight:600; margin:.6rem 0 .2rem; }
.hint{ color:var(--muted); font-size:.9rem; margin:.15rem 0 .4rem; }
select, input[type=number], input[type=text]{ font-size:1rem; padding:.5rem .6rem; width:100%;
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:.4rem; }
input[type=text]:focus, select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
input[type=range]{ width:100%; accent-color:var(--accent); height:1.8rem; }
button{ font-size:1rem; font-family:inherit; padding:.55rem .9rem; cursor:pointer;
  background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:.45rem; }
button:hover{ border-color:var(--accent); }
button.primary{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent);
  font-size:1.15rem; font-weight:700; padding:.7rem 1.4rem; }
button.primary.live{ background:var(--warn); border-color:var(--warn); color:#2a1600; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.row{ display:grid; grid-template-columns:12rem 1fr; gap:.5rem 1rem; align-items:center; margin:.3rem 0; }
.row label{ margin:0; }
.row .ends{ display:flex; justify-content:space-between; color:var(--muted); font-size:.8rem; grid-column:2; }
@media (max-width:34rem){ .row{ grid-template-columns:1fr; } .row .ends{ grid-column:1; } }
.transport{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
dl{ display:grid; grid-template-columns:9rem 1fr; gap:.25rem .8rem; margin:.2rem 0; }
dl dt{ color:var(--muted); }
dl dd{ margin:0; }
#nowDetail{ min-height:3rem; }
#events{ max-height:11rem; overflow:auto; border:1px solid var(--line); border-radius:.4rem;
  padding:.4rem .7rem; background:var(--bg); }
#events p{ margin:.15rem 0; padding-left:1rem; text-indent:-1rem; }
#events p::before{ content:"▸ "; color:var(--accent); }
ol#journeyList{ list-style:none; margin:.4rem 0; padding:0; }
ol#journeyList li{ display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.35rem .5rem; border:1px solid var(--line); border-radius:.4rem; margin:.25rem 0; background:var(--bg); }
ol#journeyList li.empty{ color:var(--muted); justify-content:flex-start; }
.jbtns button{ padding:.35rem .55rem; margin-left:.2rem; }
.modes{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.modes label{ display:flex; align-items:center; gap:.4rem; margin:0; font-weight:600; }
.modes input{ width:1.15rem; height:1.15rem; accent-color:var(--accent); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.inline{ display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:end; }
output{ color:var(--muted); }
/* the engine warm-up hairline (live.js drives it); aria-hidden — the events log
   narrates warm-up for screen readers */
#boot{ position:fixed; left:0; top:0; right:0; height:3px; opacity:0; transition:opacity .3s; z-index:50; }
#boot.on{ opacity:1; }
#boot .btrack{ height:3px; background:transparent; }
#boot .bfill{ height:3px; width:0; background:var(--accent); transition:width .3s; }
#boot.ind .bfill{ animation:shimmer 1s linear infinite; }
#boot .blabel{ position:fixed; left:.6rem; top:.4rem; font-size:.7rem; color:var(--muted); }
@keyframes shimmer{ 0%{opacity:.4}50%{opacity:1}100%{opacity:.4} }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }