/* =====================================================================
 * Shared header — the four-station rail + the journey mark.
 * ---------------------------------------------------------------------
 * The STRUCTURE + layout live here, single-sourced, so the rail aligns
 * the same way on every surface. Each surface keeps its exact look via a
 * few knobs (set on :root or .stations) and owns its responsive
 * breakpoint (when the labels abbreviate depends on how crowded that
 * surface's header is):
 *
 *   --st-quiet     quiet (non-current) station colour   [default --muted]
 *   --st-gap       gap between stations                 [default 14px]
 *   --st-tracking  letter-spacing                       [default .18em]
 *
 * The stations MARKUP stays per-surface (register buttons vs nav links).
 * See /header.js for the mark (journeyRings).
 * ===================================================================== */

#mark { flex: 0 0 auto; display: block; }

.stations {
  display: flex; align-items: center; gap: var(--st-gap, 14px);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--st-tracking, .18em); text-transform: uppercase;
}
.stations .st {
  color: var(--st-quiet, var(--muted)); background: none; border: none; padding: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: none; cursor: default;
}
.stations a.st, .stations button.st { cursor: pointer; transition: color .2s ease; }
.stations a.st:hover, .stations button.st:hover { color: var(--bright); }
.stations .st.cur { color: var(--crimson-bright); } /* you are here — the one crimson */
.stations .abbr { display: none; }                   /* abbreviations off until a surface's breakpoint */

/* ---------------------------------------------------------------------
 * LEFT TOP RAIL (SHELL §2) — the scope selectors' home, a sub-header at
 * the top of the LEFT PANE. One definition so every scope selector —
 * corpus, tradition, interlocutor — is the same control everywhere
 * (SHELL §3a: same colour + dimensions, no group label).
 * Needs from the surface: --panel, --line, --line-strong, --muted,
 * --bright, --crimson (encounter aliases its semantic tokens to these).
 * ------------------------------------------------------------------- */
.lefttop {
  padding: 0.55em 1em; background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; gap: 0.9em; align-items: center; flex-wrap: wrap; font-size: 13px;
  flex: none;
}
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.seg button {
  padding: 0.35em 0.7em; background: transparent; color: var(--muted); border: none;
  cursor: pointer; font-size: 12px; border-right: 1px solid var(--line-strong); font-family: inherit;
}
.seg button:last-child { border-right: none; }
.seg button.active { background: var(--crimson); color: #fff; }