/* Reveal page. Tokens from ../lines.css, track and station styles from ../metro/map.css. */

body.reveal { height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
/* the only chrome: name, style, list; zoom bottom right */
.rv-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 14px;
}
.rv-chrome > * { pointer-events: auto; }
.rv-name {
  display: flex; flex-direction: column; gap: 5px;
  font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; color: var(--ink);
  background: var(--paper); border-radius: 8px; padding: 9px 10px;
}
.rv-name small { font-size: 0.74rem; font-weight: 400; line-height: 1.35; }
.rv-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-bar { display: flex; gap: 6px; align-items: center; }
.rv-variants { display: inline-flex; background: var(--paper); border: 1.5px solid var(--rule); border-radius: 9px; padding: 2px; gap: 2px; }
.rv-variants button, .rv-listbtn {
  font: 700 0.82rem/1 var(--font); color: var(--ink); background: transparent;
  border: 1.5px solid transparent; border-radius: 7px; padding: 7px 10px; cursor: pointer;
}
.rv-listbtn { background: var(--paper); border-color: var(--rule); border-radius: 9px; padding: 9px 12px; }
.rv-variants button:hover, .rv-listbtn:hover { border-color: var(--ink-3); }
.rv-variants button[aria-pressed="true"], .rv-listbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reveal .zoom { top: auto; bottom: 14px; right: 14px; }
.listing .rv-chrome { background: var(--paper); border-bottom: 1.5px solid var(--rule); }
.rv-main { position: relative; flex: 1; min-height: 0; display: flex; }
.rv-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; background: var(--paper); }
.rv-stage.dragging { cursor: grabbing; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.rv-list { flex: 1; overflow: auto; padding-top: 64px; }

/* reveal states */
.rv-off { display: none; }
/* backwards, not both: hidden during the delay, but the end state is not held,
   so dimming (opacity) still applies after a page has appeared */
.rv-in { animation: rvIn 520ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: var(--d, 0ms); transform-box: fill-box; transform-origin: center; }
@keyframes rvIn { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: none; } }
.label.rv-in, .rlabel.rv-in { animation-name: rvFade; }
/* folding away: pages shrink out, lines and labels fade */
.rv-leave { animation: rvOut 380ms cubic-bezier(0.5, 0, 0.75, 0) forwards; animation-delay: var(--d, 0ms); transform-box: fill-box; transform-origin: center; pointer-events: none; }
.rv-leave[data-from], .label.rv-leave, .rlabel.rv-leave { animation-name: rvFadeOut; }
@keyframes rvOut { to { opacity: 0; transform: scale(0.75); } }
@keyframes rvFadeOut { to { opacity: 0; } }
@keyframes rvFade { from { opacity: 0; } to { opacity: 1; } }
.ghost { display: none; cursor: pointer; }
.ghost.rv-show { display: inline; }

/* intro: themes arrive after the camera pulls back */
.intro .theme, .intro .theme-label, .intro .spoke { opacity: 0; }
.arriving .theme, .arriving .theme-label, .arriving .spoke { transition: opacity 500ms ease var(--d, 0ms); }

/* spokes (hub to each theme) */
.spoke { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; opacity: 0.45; }
.theme.is-open .theme-halo { stroke-width: 5; }
.theme:hover .theme-disc, .theme:hover .theme-pill { filter: brightness(1.08); }

.theme-pill { fill: var(--c); stroke: var(--paper); stroke-width: 3; }
.theme.is-open .theme-pill { stroke: var(--ink); }
.theme-pill-text { fill: var(--badge-ink); font: 700 15px var(--font); text-anchor: middle; pointer-events: none; }
/* radial labels rotate about Luke Central, not about themselves */
.rlabel, .rlabel.rv-in, .rlabel.rv-leave { pointer-events: none; transform-box: view-box; transform-origin: 0 0; }
.rv-inter { fill: var(--dot-fill); stroke: var(--ink); stroke-width: 3; }
.stn .dot { fill: var(--dot-fill); stroke: var(--c); stroke-width: 3; }

/* stars (globe, constellation) */
.star .glow { fill: var(--c); opacity: 0.12; }
.star.inter .glow { fill: var(--ink); opacity: 0.08; }
.theme-glow { fill: var(--c); opacity: 0.18; }

/* hub */
.reveal .hub { cursor: pointer; }

/* card */
.rv-card { pointer-events: auto; }
.rv-card.floating { top: auto; right: auto; width: min(320px, calc(100% - 24px)); }

@media (max-width: 820px) {
  .rv-chrome { padding: 8px 10px; gap: 6px; }
  .rv-bar { width: 100%; justify-content: space-between; }
  .rv-variants button { padding: 7px 6px; font-size: 0.78rem; }
  .rv-listbtn { padding: 8px 9px; font-size: 0.78rem; }
  .rv-card.floating { left: 10px !important; right: 10px; top: auto !important; bottom: 10px; width: auto; }
  .rv-list { padding-top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-in, .rv-leave { animation: none; }
  .arriving .theme, .arriving .theme-label, .arriving .spoke { transition: none; }
}

/* ---- tree ---- */
.rv-branches .link { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; opacity: 0.85; }
.rv-branches .link.s3 { stroke-width: 4; }
.rv-branches .link.s2 { stroke-width: 3; }
.node { cursor: pointer; outline: none; }
.node .hit { fill: transparent; }
.node:focus-visible .hit, .node.selected .hit { stroke: var(--focus); stroke-width: 3; }
.node.has-kids .dot { stroke-width: 4.5; }
.xmark circle { fill: var(--paper); stroke: var(--c); stroke-width: 2; }
.inter .xmark circle { stroke: var(--ink); }
.xmark .xbar { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.node.is-open .xmark .xv { display: none; }
.node.is-open .xmark circle { fill: var(--c); }
.inter.is-open .xmark circle { fill: var(--ink); }
.node.is-open .xmark .xbar { stroke: var(--paper); }
/* zoomed far out, the smallest names step back (a fade, not a pop) */
.far .label.s1 { opacity: 0; }
.card .trail { margin: -2px 0 8px; font-size: 0.85rem; color: var(--ink-3); }
.card .also { margin: 0 0 10px; font-size: 0.88rem; color: var(--ink-2); }
.card .crumb { font: 700 0.85rem/1.3 var(--font); color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
.card .crumb:hover { text-decoration-color: var(--ink); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-toggle { font: 700 0.9rem/1 var(--font); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.btn-toggle[aria-pressed="true"] { background: var(--paper-2); }
.lv-tree ul { list-style: none; margin: 0 0 0 40px; padding: 0; border-left: 6px solid var(--c); }
.lv-tree ul ul { margin-left: 14px; border-left-width: 3px; }
.lv-tree li { padding: 6px 0 6px 16px; }
.lv-tree li a { font-weight: 700; text-decoration: none; }
.lv-tree li a:hover { text-decoration: underline; }
.lv-tree li .note { display: block; color: var(--ink-2); font-size: 0.92rem; }
.lv-tree li .also { display: block; color: var(--ink-3); font-size: 0.82rem; }

/* ---- lit branch: everything outside it steps back ---- */
.rv-stage svg [data-node], .rv-stage svg [data-from], .rv-stage svg [data-spoke] { transition: opacity 420ms ease; }
.rv-stage svg .dimmed { opacity: 0.14; }
.rv-stage svg .half { opacity: 0.45; }
/* the theme doors stay readable while a branch is lit: they are the way out */
.rv-stage svg .theme.dimmed, .rv-stage svg .band.dimmed { opacity: 0.62; }
.rv-stage svg .label.dimmed { opacity: 0.1; }
/* the travelling light */
.train { pointer-events: none; transition: opacity 300ms ease; }
.train-glow { fill: var(--c, var(--ink)); opacity: 0.22; }
.train-dot { fill: var(--paper); stroke: var(--c, var(--ink)); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .rv-stage svg [data-node], .rv-stage svg [data-from] { transition: none; } }

/* branches: labels sit on a paper halo so links never cut through words */
.rv-branches .rlabel, .rv-branches .label { paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
/* bundled second-home links: solid and thin, so where they gather reads as a bundle */
.rv-branches .link.cross { stroke-width: 1.5; stroke-dasharray: none; opacity: 0.55; }

/* chord: one ring, theme arcs, chords across the middle */
.rv-chord .band { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; opacity: 0.5; }
.rv-chord .link { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.rv-chord .link.along { stroke-width: 4; opacity: 0.95; }
.rv-chord .link.cross { stroke-width: 1.5; opacity: 0.55; }
.rv-chord .rlabel { paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
.rv-chord .chord-pill-text { font-size: 14px; }
.rv-chord .pill-theme { transform-box: fill-box; transform-origin: center; transform: scale(var(--ui, 1)); }
.rv-chord .stn.s3 .dot { fill: var(--c); }
/* A page carries its original identity when another theme receives it. */
.rv-chord .rv-inter, .rv-chord .inter .xmark circle { stroke: var(--c); }
.rv-chord .rlabel { fill: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.rv-chord .inter.is-open .xmark circle { fill: var(--c); }
.rv-chord .node.rv-in, .rv-chord .node.rv-leave { animation-name: rvFade; }

/* globe + 3D constellation (space.mjs) */
.rv-space .link { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; }
.rv-space .link.chord { stroke-dasharray: none; }
.rv-constellation3d .link.cross { stroke-dasharray: 2 6; }
.rv-space .spoke { stroke-width: 3; opacity: 1; }
.rv-space .slabel { fill: var(--ink); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; cursor: pointer; }
.rv-space .slabel.s1 { font-weight: 400; }
.rv-space .slabel-theme { font-size: 16px; }
.rv-space .at { transition: none; }
/* 3D nodes carry their labels: fade them in and out, never scale (scaling
   text makes the browser lay it out again on every frame) */
.rv-space .node.rv-in { animation-name: rvFade; }
.rv-space .node.rv-leave { animation-name: rvFadeOut; }
.turnable { cursor: grab; }
#spinBtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rv-globe .globe-disc { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1.5; }
.rv-globe .graticule { fill: none; stroke: var(--ink-3); stroke-width: 0.8; opacity: 0.35; }
.rv-globe .graticule.far-side { opacity: 0.14; stroke-dasharray: 2 4; }

/* Shared expansion controls retain the original Reveal palette and type. */
.rv-bar { flex-wrap: wrap; max-width: 100%; }
.rv-variants { min-width: 0; max-width: 100%; overflow-x: auto; }
.rv-variants button { flex: 0 0 auto; white-space: nowrap; }
.rv-bulk { display: flex; gap: 2px; padding: 2px; border: 1.5px solid var(--rule); border-radius: 9px; background: var(--paper); }
.rv-bulkbtn { font: 700 0.82rem/1 var(--font); color: var(--ink); background: transparent; border: 1.5px solid transparent; border-radius: 7px; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.rv-bulkbtn:hover:not(:disabled) { border-color: var(--ink-3); }
.rv-bulkbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-bulkbtn:disabled { opacity: 0.5; cursor: default; }
.listing .rv-bulk { display: none; }
@media (pointer: coarse) { .rv-bulkbtn { min-height: 44px; } }
@media (max-width: 820px) {
  .rv-bulkbtn { min-height: 44px; padding: 7px 9px; font-size: 0.78rem; }
  .rv-list { padding-top: 148px; }
}