/* ===========================================================================
   Roads & Passes — design system (single source of truth).
   Sections: TOKENS, RESET, COMPONENTS. Enforced by tools/design_gate.py:
     - Colors and font families appear as raw values ONLY in the TOKENS block.
       Everywhere below, use var(--token). No hex, no font-family literals.
     - No raw `px` in COMPONENTS (HARD block). px lives only in TOKENS (radii,
       border widths, shadows); everything else sizes in rem/%/fr off the scale.
     - No inline style="" in the HTML; one stylesheet link plus the font sheet.
   The LOOK lives entirely in the TOKENS block. This is the "Nightboard"
   committed theme (dark navy ground). "Ledger" (light day mode) is a future
   token swap under [data-theme="light"]; components never hard-code a theme.
   Design decisions (do not violate): status color ONLY on the condition word;
   the accent stays out of the good/caution/severe band; grouped section panels,
   no left-accent bars, no pills, no gradients, no em dashes in copy.
   =========================================================================== */

/* ============================ 1. TOKENS ================================== */
:root{
  /* -- type families -- */
  --font-title:"Overpass","Segoe UI",system-ui,sans-serif;
  --font-body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;

  /* -- ground + surfaces (Nightboard) -- */
  --ground:#0d1a2c;      /* the page / screen ground */
  --panel:#16273c;       /* grouped section surface */
  --ink:#eef3f8;         /* primary text */
  --ink-2:#dbe6f1;       /* secondary body */
  --muted:#9db2c7;       /* labels, captions, values */
  --label:#8fa6bc;       /* small uppercase data labels */
  --line:#233851;        /* dividers inside panels */
  --line-hard:#22384f;   /* screen edge, header rule, source rule */

  /* -- brand accent (links / nav / controls) — OUT of the status band -- */
  --accent:#6ea8d8;
  --accent-line:#34517094;

  /* -- status ramp — ONLY on the condition word (muted, grown-up) -- */
  --good:#7c9c8b;        /* bare / dry (sage) */
  --caution:#c5a57a;     /* snow-covered / partly covered (brass) */
  --severe:#d96b5b;      /* not advised / closed (brick) */
  --wet:#9db2c7;         /* wet = not a severity, muted */

  /* -- chips + cameras -- */
  --chip-bg:#1d3050;
  --cam-bg:#1b2d45; --cam-pic:#24395a; --cam-line:#2c435c;

  /* -- radii / borders / elevation (the only place px is allowed) -- */
  --r-sm:5px; --r-md:8px; --r-lg:10px; --r-screen:12px;
  --bw:1px; --bw-2:2px;
  --shadow-screen:0 1px 3px rgb(15 25 40 / .12), 0 24px 50px -32px rgb(15 25 40 / .55);

  /* -- content measure -- */
  --measure:46rem;
}

/* ============================ 2. RESET ================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;line-height:1.14;font-family:var(--font-title)}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
:focus-visible{outline:var(--bw-2) solid var(--accent);outline-offset:var(--bw-2)}
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip:rect(0 0 0 0)}

/* status ramp — the ONLY colored text on the page, used on the condition word */
.g{color:var(--good)} .c{color:var(--caution)} .s{color:var(--severe)} .w{color:var(--wet)}

/* ========================== 3. COMPONENTS =============================== */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1rem}

/* site header */
.site{background:var(--ground);border-bottom:var(--bw) solid var(--line-hard)}
.site .bar{max-width:var(--measure);margin:0 auto;padding:.75rem 1rem;
  display:grid;grid-template-columns:1fr auto;align-items:center}
.wm{font-family:var(--font-title);font-weight:700;font-size:1.08rem;letter-spacing:-.005em;color:var(--ink)}
.wm:hover{text-decoration:none}
.wm i{font-style:normal;font-weight:600;color:var(--accent)}
.nav{display:flex;gap:1.1rem;font-size:.82rem;color:var(--muted)}
.nav a{color:var(--muted)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;
  border-bottom:var(--bw-2) solid var(--accent);padding-bottom:.18rem}

/* page head + lede */
.page{padding:1rem 0 2rem}
.h1{font-family:var(--font-title);font-size:1.5rem;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.h1s{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.lede{padding:.85rem .25rem .25rem}
.lede .say{font-size:1.04rem;font-weight:400;line-height:1.5;color:var(--ink-2)}
.lede .when{font-size:.72rem;color:var(--muted);margin-top:.55rem}

/* route jump chips (subtle fill, not transparent) */
.route{margin-top:.8rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.route .rl{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--label)}
.chip{font-size:.82rem;font-weight:600;padding:.38rem .75rem;border-radius:var(--r-sm);
  background:var(--chip-bg);color:var(--accent);border:var(--bw) solid var(--accent-line)}
.chip:hover{text-decoration:none;color:var(--ink)}

/* grouped section surfaces */
.sec{background:var(--panel);border-radius:var(--r-lg);padding:.9rem .95rem .95rem;margin-top:.7rem}
.sec-h{font-family:var(--font-title);font-size:1.1rem;font-weight:700;letter-spacing:-.005em;color:var(--ink);margin-bottom:.7rem}
.sec-h .ct{font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--muted);margin-left:.55rem}
.lb{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--label)}

/* generic data rows (alerts, restrictions, signs, rwis, state line) */
.rows .r{display:grid;grid-template-columns:1fr auto;gap:.9rem;align-items:baseline;
  padding:.5rem .05rem;border-top:var(--bw) solid var(--line)}
.rows .r:first-child{border-top:0}
.rows .k{font-size:.92rem;font-weight:600;color:var(--ink)}
.rows .k small{font-weight:400;color:var(--muted)}
.rows .v{font-size:.82rem;color:var(--muted);text-align:right;white-space:nowrap}
.sign{font-family:var(--font-title);font-weight:600;font-size:.82rem;letter-spacing:.01em;color:var(--ink-2)}

/* corridor table: surface temp welded next to the condition */
.corr .hd,.corr .row{display:grid;grid-template-columns:3.25rem 1fr auto;gap:.75rem;align-items:baseline;padding:.5rem .05rem}
.corr .hd{padding-top:0;border-bottom:var(--bw) solid var(--line)}
.corr .row{border-top:var(--bw) solid var(--line)}
.corr .rt{font-weight:700;font-size:.82rem;color:var(--ink-2)}
.corr .seg{font-size:.82rem;color:var(--ink-2)}
.corr .seg small{color:var(--muted)}
.corr .grp{display:flex;gap:.95rem;align-items:baseline;justify-content:flex-end}
.corr .temp{min-width:2.9rem;text-align:right;color:var(--muted)}
.corr .cond{min-width:7.5rem;text-align:left;font-weight:700}

/* cameras */
.cams{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.cam{border:var(--bw) solid var(--cam-line);border-radius:var(--r-sm);overflow:hidden;background:var(--cam-bg);color:var(--muted)}
.cam .pic{aspect-ratio:4/3;position:relative;background:var(--cam-pic)}
.cam .pic img{width:100%;height:100%;object-fit:cover}
.cam .ap{position:absolute;top:.4rem;left:.4rem;width:.7rem;height:.7rem;border:var(--bw) solid currentColor;border-radius:50%;opacity:.45}
.cam .ts{position:absolute;top:.4rem;right:.45rem;font-size:.6rem;color:var(--ink-2);opacity:.85}
.cam .cp{padding:.35rem .45rem;font-size:.66rem;line-height:1.25;color:var(--muted)}
.cam .cp b{font-weight:700;color:var(--ink-2)}

/* pass page: per-direction verdict + hero camera with welded rwis */
.dirs{border:var(--bw) solid var(--cam-line);border-radius:var(--r-md);margin-top:.15rem}
.dirs .d{display:grid;grid-template-columns:5rem 1fr auto;gap:.65rem;align-items:baseline;padding:.6rem .85rem}
.dirs .d + .d{border-top:var(--bw) solid var(--line)}
.dirs .lab{font-size:.82rem;font-weight:600;color:var(--muted)}
.dirs .val{color:var(--ink);font-size:.9rem}
.dirs .val small{color:var(--muted)}
.dirs .t{font-size:.72rem;color:var(--label)}
.hero{border:var(--bw) solid var(--cam-line);border-radius:var(--r-md);overflow:hidden;background:var(--cam-bg);margin-top:.8rem}
.hero .pic{aspect-ratio:16/9;position:relative;background:var(--cam-pic)}
.hero .pic img{width:100%;height:100%;object-fit:cover}
.hero .cp{padding:.4rem .7rem;font-size:.72rem;color:var(--muted);border-bottom:var(--bw) solid var(--line)}
.hero .cp b{font-weight:700;color:var(--ink-2)}
.hero .strip{padding:.55rem .7rem;font-size:.82rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.15rem .95rem}
.hero .strip b{font-weight:700;color:var(--ink)}
.hero .strip span{color:var(--muted)}

/* short forecast */
.fc{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.fc .h{border:var(--bw) solid var(--cam-line);border-radius:var(--r-sm);padding:.5rem;text-align:center;background:var(--cam-bg)}
.fc .h .hr{font-size:.72rem;color:var(--muted)}
.fc .h .tp{font-size:.92rem;font-weight:700;color:var(--ink);margin-top:.1rem}
.fc .h .pr{font-size:.66rem;color:var(--label);margin-top:.05rem}

.note{font-size:.82rem;color:var(--ink-2);margin-top:.4rem}
.alt{font-size:.82rem;color:var(--muted);margin-top:.4rem}

/* email signup */
.signup .signup-p{font-size:.9rem;color:var(--muted);margin-bottom:.7rem;max-width:52ch}
.subform{display:flex;gap:.5rem;flex-wrap:wrap;max-width:26rem}
.subin{flex:1 1 12rem;min-width:0;font:inherit;font-size:.9rem;color:var(--ink);
  background:var(--ground);border:var(--bw) solid var(--cam-line);border-radius:var(--r-sm);padding:.5rem .7rem}
.subin::placeholder{color:var(--label)}
.subbtn{font:inherit;font-size:.9rem;font-weight:600;color:var(--ground);background:var(--accent);
  border:0;border-radius:var(--r-sm);padding:.5rem .9rem;cursor:pointer}
.subbtn:disabled{opacity:.6;cursor:default}
.submsg{margin-top:.6rem;font-size:.82rem;color:var(--muted)}
.submsg.ok{color:var(--good)}
.submsg.err{color:var(--severe)}

/* source / footer */
.src{margin-top:.85rem;padding:.7rem .25rem 0;font-size:.72rem;color:var(--label);border-top:var(--bw) solid var(--line-hard)}
.foot{border-top:var(--bw) solid var(--line-hard);padding:1.3rem 0 2rem;color:var(--muted);font-size:.8rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline}

@media(max-width:34rem){
  .cams{grid-template-columns:repeat(2,1fr)}
  .fc{grid-template-columns:repeat(2,1fr)}
}