/* =========================================================
   MISSION: MILESTONE — process.css
   The Flight Plan page (pass 2): one arc across the frame, five nodes, one card slot upper-left.
   Loads after styles.css (nav, rail, buttons, close section, reticle, star field).
   ========================================================= */

.links a.active { color: var(--accent); }
.links a.active::after { transform: scaleX(1); }

/* ---------- pinned stage ---------- */
.climb { position: relative; height: 100vh; overflow: hidden; z-index: 1; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* each card is a full-stage layer with two fixed zones (clarity rule 2 — same places every node):
   the big stage number upper-left, the label + copy lower-right; the route runs between them */
.slot { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.slot a { pointer-events: auto; }
.pcard { position: absolute; inset: 0; visibility: hidden; }
/* the stage number: one element, upper-left, always there; its digits flip up between stops */
.stage-num { position: absolute; z-index: 3; left: calc(var(--gutter) + 2vw); top: 14%; display: flex; font-family: var(--display); font-size: clamp(96px, 9.5vw, 160px); line-height: 1; color: var(--accent); letter-spacing: -0.01em; pointer-events: none; }
.stage-num .z { opacity: 0; }                                                     /* the fixed leading zero (fades in with 05) */
.stage-num .flip { position: relative; width: 0.62em; height: 1em; overflow: hidden; }   /* only the second digit flips */
.stage-num .flip span { position: absolute; left: 0; top: 0; opacity: 0; }
.process-page:not(.static) .pcard .pnum { display: none; }   /* the static list keeps its own numbers */
.pcard .pnum { font-family: var(--display); font-size: clamp(64px, 8vw, 96px); line-height: 0.85; color: var(--accent); letter-spacing: -0.01em; margin-bottom: 8px; display: block; }
.pcard .copy { position: absolute; left: 44%; right: calc(var(--gutter) + 56px); top: 50%; }
.pcard .k { display: block; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 12px; }
.pcard h2 { font-family: var(--display); font-size: clamp(24px, 1.9vw, 36px); line-height: 0.95; text-transform: uppercase; color: var(--cream); margin-bottom: 12px; }
.pcard h2 em { color: var(--accent); }
.pcard .body p { font-size: clamp(11.5px, 0.8vw, 13px); line-height: 1.58; opacity: 0.85; max-width: 62ch; }
.pcard .body p + p { margin-top: 8px; }
.pcard .body .track { display: block; color: var(--accent); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; font-size: 9.5px; margin-bottom: 2px; }
.pcard .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 14px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); font-size: 11px; line-height: 1.5; }
.pcard .fields b { display: block; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 3px; }
.pcard.cta .btn-large { margin-top: 18px; pointer-events: auto; }

/* the title card sits in the slot before the rocket flies in */
.pcard.title h1 { font-family: var(--display); font-size: clamp(48px, 4.8vw, 92px); line-height: 0.9; text-transform: uppercase; color: var(--cream); }
.pcard.title h1 em { color: var(--accent); }
.pcard.title .lede { margin-top: 18px; font-size: clamp(12.5px, 0.95vw, 15px); line-height: 1.7; opacity: 0.85; max-width: 44ch; }

/* the scroll hint sits bottom-right */
.process-page .scroll-hint { left: auto; right: var(--gutter); bottom: 34px; }

/* nodes are clickable — they fly the story to their stop */
#sky .node-hit { cursor: none; pointer-events: auto; }

/* ---------- touch: paged. One stage on screen at a time; the route stands on end down the left with the
   rocket climbing it; the number and the copy flip in place (process.js › buildPaged) ---------- */
#vrail { display: none; }
.process-page.paged .climb { height: 100svh; }
.process-page.paged #sky, .process-page.paged .rail, .process-page.paged .scroll-hint { display: none; }
.process-page.paged #vrail { display: block; position: absolute; z-index: 2; left: calc(var(--gutter) - 14px); top: calc(var(--nav-h) + 1vh); height: calc(100svh - var(--nav-h) - 9vh); width: 84px; overflow: visible; }   /* as tall as the frame allows, clear of Safari's bottom bar */
.process-page.paged .stage-num { left: calc(var(--gutter) + 78px); top: 9%; font-size: clamp(56px, 16vw, 88px); }
.process-page.paged .pcard .copy { left: calc(var(--gutter) + 78px); right: var(--gutter); top: 22%; bottom: 4%; }
.process-page.paged .pcard .k { font-size: 9.5px; letter-spacing: 0.28em; margin-bottom: 10px; }
.process-page.paged .pcard h2 { font-size: clamp(20px, 6vw, 30px); margin-bottom: 12px; }
.process-page.paged .pcard .body { border: 1px solid color-mix(in srgb, var(--cream) 24%, transparent); padding: 12px 12px 10px; }
.process-page.paged .pcard .body p { font-size: 11.5px; line-height: 1.5; max-width: none; }
.process-page.paged .pcard .body p + p { margin-top: 7px; }
.process-page.paged .pcard .body .track { font-size: 9px; }
.process-page.paged .pcard .fields { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 0; border-top: 0; font-size: 10.5px; line-height: 1.45; }
.process-page.paged .pcard .fields b { display: inline; margin: 0 8px 0 0; }   /* label and value on one line */
.process-page.paged .pcard.title .copy { top: 24%; }
.process-page.paged .pcard.title h1 { font-size: clamp(44px, 13vw, 64px); }
.process-page.paged .pcard.title .lede { font-size: 13px; }

/* ---------- reduced motion / narrow fallback: a plain stacked list ---------- */
.process-page.static .climb { height: auto; overflow: visible; padding: calc(var(--nav-h) + 8vh) var(--gutter) 10vh; }
.process-page.static #sky, .process-page.static .rail, .process-page.static .scroll-hint, .process-page.static .stage-num { display: none; }
.process-page.static .slot { position: static; inset: auto; pointer-events: auto; max-width: 76ch; }
.process-page.static .pcard { position: static; visibility: visible; margin-bottom: 9vh; }
.process-page.static .pcard .copy { position: static; }
.process-page.static .pcard .line .inner { transform: none !important; }
@media (max-width: 1024px) {
  .process-page .links { display: none; }
  .process-page .pcard .fields { grid-template-columns: 1fr; gap: 10px; }
}