/* ============================================================================
   railhub.css — the one shared design system.
   Extracted from the landing page (static/index.html) — the visual standard.
   Every page links this; per-page <style> keeps only page-specific function.

   Conventions:
   - Tokens on :root. Pages MUST NOT redefine these (delete local :root blocks).
   - Shared components are `rh-` prefixed so they never collide with a page's
     own functional classes.
   - Accent meaning is fixed everywhere: AMBER = reference / desk, GREEN = game /
     live / trackside. Scope with [data-accent="green"] (default amber).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#161616; --bg2:#1a1a1a; --panel:#1e1e1e; --edge:#2c2c2c; --edge2:#383838;
  --text:#f3f1ec; --muted:#9a958c; --dim:#6f6b63;
  --amber:#e8a32c; --amber-dim:#c98a1f; --green:#43b15f; --green-dim:#2ea043;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:16px;
  --nav-h:54px;
  /* the active accent — amber by default, green under [data-accent="green"] */
  --ac:var(--amber); --ac-dim:var(--amber-dim); --ac-ink:#15140f;
}
[data-accent="green"]{ --ac:var(--green); --ac-dim:var(--green-dim); --ac-ink:#0c1a0f; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--text); line-height:1.5;
  background:radial-gradient(120% 75% at 50% -8%, #211f19 0%, var(--bg) 52%, #121212 100%) fixed;
  min-height:100dvh;
}
/* faint track-tie texture — atmosphere, not noise */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.012) 38px 39px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
/* map pages own the full viewport; suppress the texture under the canvas */
body.rh-map::before{display:none}
a{color:inherit}

/* content column for document-flow (non-map) pages */
.rh-wrap{position:relative; z-index:1; max-width:1060px; margin:0 auto;
  padding:0 22px calc(40px + var(--safe-b))}
.rh-wrap--narrow{max-width:780px}

/* ---- top navigation (injected by railhub-nav.js) ------------------------- */
/* One full-width bar — its OWN frame (dark background + hairline) — so the brand
   sits at the same left edge on every page (content pages and the full-bleed map
   alike), instead of jumping in to the centered content column on content pages. */
.rh-nav{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px;
  padding:14px 22px; height:var(--nav-h);
  background:var(--bg2); border-bottom:1px solid var(--edge)}
.rh-nav__brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-right:4px}
.rh-nav__dot{width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(67,177,95,.5); animation:rh-pulse 3.4s ease-out infinite}
@keyframes rh-pulse{0%{box-shadow:0 0 0 0 rgba(67,177,95,.45)}70%{box-shadow:0 0 0 7px rgba(67,177,95,0)}100%{box-shadow:0 0 0 0 rgba(67,177,95,0)}}
.rh-nav__name{font-family:var(--mono); font-weight:600; font-size:15px; letter-spacing:.02em; white-space:nowrap}
.rh-nav__name b{color:var(--amber); font-weight:600}
.rh-nav__links{display:flex; align-items:center; gap:4px; flex:1}
.rh-nav__link{font-family:var(--mono); font-size:12.5px; color:var(--muted); text-decoration:none;
  padding:7px 12px; border-radius:var(--r-sm); border:1px solid transparent; transition:.16s; white-space:nowrap}
.rh-nav__link:hover{color:var(--text); background:rgba(255,255,255,.03)}
.rh-nav__link.is-active{color:var(--text); border-color:var(--edge)}
.rh-nav__link.is-active::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--amber); margin-right:7px; vertical-align:middle}
.rh-nav__spacer{flex:1}
.rh-nav__settings{margin-left:auto}
/* signed-in handle — reads as identity (brighter than section links), green "you" dot */
.rh-nav__user{color:var(--text); font-weight:600}
.rh-nav__user::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--green); margin-right:6px; vertical-align:middle}
/* governor-only admin links — subtle amber so they read as owner tools */
.rh-nav__admin{color:var(--amber-dim)}
.rh-nav__admin:hover{color:var(--amber)}
.rh-nav__admin.is-active{color:var(--amber); border-color:var(--edge)}
.rh-nav__burger{display:none; margin-left:auto; background:none; border:1px solid var(--edge);
  color:var(--text); border-radius:var(--r-sm); padding:6px 10px; font-family:var(--mono); cursor:pointer}
/* "Log a Sighting" nav link rendered as the primary green-pill CTA */
.rh-nav__loglink{color:#0c1a0f; font-weight:700; background:var(--green);
  border-color:var(--green); border-radius:9px; padding:7px 14px}
.rh-nav__loglink:hover{color:#0c1a0f; background:var(--green-dim); border-color:var(--green-dim)}
.rh-nav__loglink.is-active{color:#0c1a0f; border-color:var(--green)}
.rh-nav__loglink.is-active::before{display:none}   /* no amber active-dot on the green pill */

/* ---- persistent disclaimer footer (auto-injected by railhub-nav.js) ------- */
.rh-foot{margin-top:48px; border-top:1px solid var(--edge); padding:18px 16px 28px; text-align:center}
.rh-foot__note{margin:0 auto; max-width:760px; font-size:12px; line-height:1.55; color:var(--muted)}
.rh-foot__credit{margin:8px auto 0; max-width:760px; font-size:11px; line-height:1.5; color:var(--dim)}
.rh-foot a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.rh-foot a:hover{color:var(--text)}

/* map pages: the SAME solid framed bar (inherited), just overlaid so the canvas
   fills behind it — keeps the brand at the identical left edge as content pages */
body.rh-map .rh-nav{position:absolute; top:var(--safe-t); left:0; right:0}
body.rh-map .rh-nav__link{background:transparent}
/* …but the green-pill CTA keeps its fill on map pages (else only its border shows) */
body.rh-map .rh-nav__loglink{background:var(--green); color:#0c1a0f}
body.rh-map .rh-nav__loglink:hover{background:var(--green-dim)}

@media(max-width:680px){
  .rh-nav{gap:10px}
  .rh-nav__burger{display:inline-block}
  .rh-nav__links{position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch;
    gap:2px; padding:8px 14px 12px; background:var(--bg2); border-bottom:1px solid var(--edge);
    display:none; z-index:41}
  .rh-nav__links.is-open{display:flex}
  .rh-nav__settings{margin-left:0}
  body.rh-map .rh-nav__links{background:rgba(22,22,22,.97)}
}

/* ---- page header (the non-marketing tool-page header) -------------------- */
.rh-head{padding:30px 0 18px; border-bottom:1px solid var(--edge); margin-bottom:26px}
.rh-head__kicker{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin:0 0 14px; display:flex; align-items:center; gap:12px}
.rh-head__kicker::before{content:""; width:26px; height:1px; background:var(--ac); display:inline-block}
.rh-head h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem); font-weight:700; letter-spacing:-.012em; margin:0; color:var(--text)}
.rh-head__sub{font-size:clamp(.95rem,.9rem + .3vw,1.02rem); color:var(--muted); margin:12px 0 0; max-width:60ch}
.rh-head__sub b{color:var(--text); font-weight:600}

/* ---- mono section label (the signature: MARKS / TRACKSIDE / SPOT …) ------ */
.rh-label{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ac); margin:0 0 9px; font-weight:600}
.rh-eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin:0 0 14px; display:flex; align-items:center; gap:12px}
.rh-eyebrow::before{content:""; width:26px; height:1px; background:var(--ac); display:inline-block}

/* ---- buttons ------------------------------------------------------------- */
.rh-btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13.5px;
  font-weight:600; text-decoration:none; color:var(--text); padding:11px 17px; border:1px solid var(--ac);
  border-radius:var(--r-md); background:transparent; cursor:pointer; transition:.18s ease; line-height:1}
.rh-btn .ar{transition:transform .18s ease; color:var(--ac)}
.rh-btn:hover{background:var(--ac); color:var(--ac-ink)}
.rh-btn:hover .ar{color:var(--ac-ink); transform:translateX(3px)}
.rh-btn:disabled{opacity:.5; cursor:not-allowed}
.rh-btn--solid{background:var(--ac); color:var(--ac-ink); border-color:var(--ac)}
.rh-btn--solid:hover{background:var(--ac-dim); border-color:var(--ac-dim)}
.rh-btn--ghost{border-color:var(--edge); color:var(--muted)}
.rh-btn--ghost:hover{background:transparent; color:var(--text); border-color:var(--edge2)}
.rh-btn--sm{padding:7px 12px; font-size:12.5px}
/* pill — quiet secondary link/control */
.rh-pill{font-family:var(--mono); font-size:12.5px; color:var(--muted); text-decoration:none;
  padding:7px 12px; border:1px solid var(--edge); border-radius:var(--r-sm); transition:.16s;
  background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.rh-pill:hover{color:var(--text); border-color:var(--edge2)}
.rh-pill .ar{color:var(--ac)}

/* ---- cards / panels / rules ---------------------------------------------- */
.rh-card{border:1px solid var(--edge); border-radius:var(--r-lg); background:rgba(20,20,20,.5);
  padding:20px}
.rh-card--accent{position:relative; overflow:hidden}
.rh-card--accent::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px;
  border-radius:3px; background:linear-gradient(180deg,var(--ac),transparent); opacity:.85}
.rh-panel{border:1px solid var(--edge); border-radius:var(--r-xl); background:rgba(20,20,20,.5); overflow:hidden}
.rh-rule{border:none; border-top:1px solid var(--edge); margin:22px 0}

/* ---- chips --------------------------------------------------------------- */
.rh-chip{font-family:var(--mono); font-size:12px; color:var(--muted); padding:6px 11px;
  border:1px solid var(--edge); border-radius:999px; background:transparent; cursor:pointer; transition:.16s}
.rh-chip:hover{color:var(--text); border-color:var(--edge2)}
.rh-chip.is-on{color:var(--ac-ink); background:var(--ac); border-color:var(--ac)}

/* ---- forms --------------------------------------------------------------- */
.rh-input, input[type=text], input[type=search], input[type=number], input[type=datetime-local],
input[type=email], select, textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--text); background:var(--bg2);
  border:1px solid var(--edge); border-radius:var(--r-md); padding:10px 12px; width:100%; transition:.16s}
textarea{font-family:var(--mono); line-height:1.6; resize:vertical}
.rh-input:focus, input:focus, select:focus, textarea:focus{outline:none; border-color:var(--ac);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac) 18%, transparent)}
::placeholder{color:var(--dim)}
.rh-field{display:flex; flex-direction:column; gap:7px; margin:0 0 14px}
.rh-field > label, .rh-flabel{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); font-weight:600}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 1.1em,calc(100% - 12px) 1.1em; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px}
/* category group labels (car-type pickers) — bold, not the default light grey. The
   native dropdown popup follows the OS appearance, so pin a colour for each. */
select optgroup{font-weight:700; color:#161616}
select optgroup option{font-weight:400; color:#161616}
@media (prefers-color-scheme: dark){
  select optgroup{color:#f0efe9}
  select optgroup option{color:#f0efe9}
}
/* shared two-level car-type picker (cartype-picker.js) — category over type */
.ctp{display:flex; flex-direction:column; gap:8px}
.ctp select{width:100%}
.ctp .ctp-type:disabled{opacity:.6}

/* ---- tables -------------------------------------------------------------- */
.rh-table{width:100%; border-collapse:collapse; font-size:.92rem}
.rh-table th{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); text-align:left; font-weight:600; padding:9px 12px; border-bottom:1px solid var(--edge)}
.rh-table td{padding:11px 12px; border-bottom:1px solid var(--edge); color:var(--text)}
.rh-table tr:last-child td{border-bottom:none}

/* ---- MAP SHELL — the chassis every map view shares ----------------------- */
/* Layout: full-bleed canvas + a persistent right sidebar panel, same position
   and styling on Live / Inspect / What-line. Only panel CONTENTS swap by mode. */
.rh-map__canvas{position:absolute; inset:0; z-index:0}
.rh-map__panel{position:absolute; top:0; right:0; bottom:0; z-index:30; width:360px; max-width:88vw;
  display:flex; flex-direction:column; background:var(--panel); border-left:1px solid var(--edge);
  box-shadow:-18px 0 40px -28px #000; overflow:hidden}
.rh-map__panel-head{display:flex; align-items:center; gap:10px; padding:calc(var(--nav-h) + 8px) 16px 12px;
  border-bottom:1px solid var(--edge); flex:0 0 auto}
.rh-map__panel-body{flex:1 1 auto; overflow-y:auto; padding:14px 16px calc(16px + var(--safe-b))}
.rh-map__panel-title{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ac); margin:0}
/* the in-shell mode switcher (Live / Inspect / What-line) — restyled segment */
.rh-modes{display:inline-flex; padding:3px; gap:2px; border:1px solid var(--edge); border-radius:var(--r-sm);
  background:rgba(20,20,20,.6)}
.rh-modes a{font-family:var(--mono); font-size:11.5px; color:var(--muted); text-decoration:none;
  padding:6px 11px; border-radius:6px; transition:.14s; white-space:nowrap}
.rh-modes a:hover{color:var(--text)}
.rh-modes a.is-on{color:var(--ac-ink); background:var(--ac)}
/* empty-state prompt inside a panel (e.g. Inspect "click a car") */
.rh-map__empty{font-family:var(--mono); font-size:12.5px; color:var(--dim); line-height:1.7;
  padding:24px 4px; text-align:left}

/* shared map legend/KEY — compact, collapsible, glanceable. ONE component for
   all three map views so the key can't drift. Each view supplies its own rows;
   pages that sit above a transport bar (Live) override `bottom`. */
.rh-key{position:absolute; left:14px; bottom:38px; z-index:9; background:rgba(26,26,26,.9);
  border:1px solid var(--edge); border-radius:9px; font-family:var(--mono); font-size:11px;
  color:var(--muted); overflow:hidden}
.rh-key>summary{list-style:none; cursor:pointer; padding:6px 10px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); user-select:none; display:flex; align-items:center; gap:7px}
.rh-key>summary::-webkit-details-marker{display:none}
.rh-key>summary::before{content:"▦"; color:var(--ac); font-size:11px}
.rh-key[open]>summary{border-bottom:1px solid var(--edge)}
.rh-key__row{display:flex; align-items:center; gap:8px; padding:4px 11px; white-space:nowrap}
.rh-key__row:first-of-type{padding-top:8px}
.rh-key__row:last-of-type{padding-bottom:8px}
/* swatch = fixed 16px column; the shape is a centered ::before so the column can't stretch it into an ellipse */
.rh-key__sw{flex:0 0 16px; height:16px; display:inline-flex; align-items:center; justify-content:center}
.rh-key__sw::before{content:""; display:block}
.rh-key__sw--line::before{width:16px; height:4px; border-radius:3px; background:var(--green); box-shadow:0 0 0 1.5px #0c1a0f}
.rh-key__sw--line-alt::before{width:16px; height:3px; border-radius:3px; background:var(--amber)}
.rh-key__sw--dot::before{width:9px; height:9px; border-radius:50%; background:var(--text)}
.rh-key__sw--ring::before{width:13px; height:13px; border-radius:50%; border:2px solid var(--amber); box-sizing:border-box}
.rh-key__sw--ring-confirmed::before{width:12px; height:12px; border-radius:50%; background:#888; border:2px solid #fff; box-sizing:border-box}
@media(max-width:680px){ .rh-key{display:none} }   /* map is desktop-first */

@media(max-width:680px){
  /* map is desktop-first: on phones the panel docks to the bottom, never broken */
  .rh-map__panel{top:auto; left:0; right:0; bottom:0; width:auto; max-width:none; max-height:62vh;
    border-left:none; border-top:1px solid var(--edge); border-radius:var(--r-lg) var(--r-lg) 0 0}
  .rh-map__panel-head{padding:14px 16px 12px}
}

/* ---- entrance motion ----------------------------------------------------- */
.rise{opacity:0; transform:translateY(14px); animation:rh-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}
.d4{animation-delay:.36s}.d5{animation-delay:.46s}.d6{animation-delay:.56s}
@keyframes rh-rise{to{opacity:1; transform:none}}

/* ---- utilities ----------------------------------------------------------- */
.rh-mono{font-family:var(--mono)}
.rh-muted{color:var(--muted)} .rh-dim{color:var(--dim)}
.rh-amber{color:var(--amber)} .rh-green{color:var(--green)}

@media(prefers-reduced-motion:reduce){
  .rise{animation:none; opacity:1; transform:none}
  .rh-nav__dot{animation:none}
}