/* ===================================================================== * 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; } /* The mark ↔ nav hover-link (EXAMINE_SPEC §13.5, locked): hovering a * station word brightens its ring in the mark, and dims the CURRENT ring * while a different station is being previewed — never two rings lit at * once. #mark and .stations are siblings inside
on every surface * that uses this module. !important is scoped to these hover rules only — * the no-hover baseline (journeyRings' own inline stroke=) is untouched. */ /* Cascade order carries the logic, not selector combinatorics: quiet every * ring first on ANY station hover, then re-light just the hovered one — the * later same-specificity rule wins, so the previously-current ring dims * exactly when a different station is being previewed. */ /* Both stroke color AND stroke-width must reset here — journeyRings() sets * stroke-width=3 (inline) only on the CURRENT ring, so dimming JUST the * color left a stale 3px-thick warm ring while hovering a different station * (visually much bolder/"whiter" than the genuinely-inactive 1px rings — * the bug Neil flagged 2026-07-19). Flattening width here, then re-thickening * only the hovered ring below, makes the hover state fully mirror "current". */ header:has(.stations [data-station]:hover) #mark .jr-ring { stroke: var(--warm) !important; stroke-width: 1 !important; } header:has(.stations [data-station="engage"]:hover) #mark .jr-engage { stroke: var(--crimson-bright) !important; stroke-width: 3 !important; } header:has(.stations [data-station="encounter"]:hover) #mark .jr-encounter { stroke: var(--crimson-bright) !important; stroke-width: 3 !important; } header:has(.stations [data-station="explore"]:hover) #mark .jr-explore { stroke: var(--crimson-bright) !important; stroke-width: 3 !important; } header:has(.stations [data-station="examine"]:hover) #mark .jr-examine { stroke: var(--crimson-bright) !important; stroke-width: 3 !important; } .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 */ .stations .st-sep { color: var(--st-quiet, var(--muted)); user-select: none; } /* --------------------------------------------------------------------- * 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; } /* ── THE TEXT PICKER (SHELL §3a: one scope control everywhere) ────────── Explore and Examine run the same cascade over the same focus..json data, so the panel that picks a text is defined ONCE, here, beside .lefttop and .seg. The two modes drive it from their own state — Explore from module globals, Examine from the seated guest — but they cannot drift apart visually. Also needs from the surface: --ink, --crimson-soft, --crimson-bright, --font-display. Floats under the rail rather than sitting in the flow: closed it costs nothing, open it displaces nothing. Anchored to #lefttop's bottom edge (top:100%), so it follows the rail however that wraps. */ #lefttop { position: relative; } .picker { position: absolute; top: 100%; left: 1em; z-index: 30; margin-top: 0.4em; padding: 0.4em; min-width: 240px; max-width: min(540px, calc(100% - 2em)); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38); max-height: 60vh; overflow-y: auto; } /* Only a tradition owning SEVERAL groups shows these (Stoicism's four authors, Christianity's five); a single-group shelf is unheaded. */ .picker-group { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 0.7em; margin: 0.8em 0 0.35em; } .picker-group:first-child { margin-top: 0.25em; } /* A shelf head. Expansion IS the tradition selection, so the open one is the selected one — it carries the weight, the others recede. */ .picker-trad { display: flex; align-items: center; gap: 0.55em; width: 100%; text-align: left; font-family: var(--font-display); font-size: 13.5px; line-height: 1.35; padding: 0.45em 0.7em; color: var(--grey); background: transparent; border: none; border-radius: 5px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .picker-trad:hover { background: var(--crimson-soft); color: var(--crimson-bright); } .picker-trad.open { color: var(--bright); font-weight: 600; } .picker-trad .tw { width: 0.7em; font-size: 9px; color: var(--muted); } .picker-trad.open .tw { color: var(--crimson); } /* The open shelf's contents, set in from its head so the level reads. */ .picker-body { padding: 0.1em 0 0.45em 1.25em; } /* One text per line. These titles carry their commentators — "Śiva-sūtra (+ Kṣemarāja, Bhāskara, anon. vṛtti)" — and wrap badly side by side. */ .picker-text { display: block; width: 100%; text-align: left; font-family: var(--font-display); font-size: 13.5px; line-height: 1.35; padding: 0.4em 0.7em; color: var(--ink); background: transparent; border: none; border-radius: 5px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .picker-text:hover { background: var(--crimson-soft); color: var(--crimson-bright); } .picker-text.active { background: var(--crimson); color: #fff; font-weight: 600; } /* There is more below: fade the cut edge rather than ending flush, which reads as "that is all of them". Lifted once you reach the bottom. */ .picker.is-cut { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); } /* The rail's one-line record of where you are, in place of the row of tradition chips it replaces — a quiet label, not another selectable state, and a way back into the cascade at the level it names. */ .crumb { background: none; border: none; padding: 0.2em 0; /* The STATIONS idiom (see .stations above), because this is the same kind of thing: a breadcrumb saying where you are. In display serif at 12.5px it was within a hair of the corpus buttons beside it and read as a sixth one that had lost its border. Mono, small, letterspaced and uppercase, it cannot be mistaken for something selectable. */ font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); cursor: pointer; max-width: 24em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crumb:hover { color: var(--bright); } .crumb .dot { color: var(--faint); margin: 0 0.35em; } @media (max-width: 820px) { /* Floating, so it can take more of a phone's screen than it could in the flow — and the rail runs edge to edge here, so the panel does too. */ .picker { left: 0.8em; right: 0.8em; max-width: none; max-height: 55vh; } }