/* ============================================================================
   AOA TEST CENTER — FLIGHT PLAN STRIP (The Living Flight Plan, Phase 1)

   Component-level composition ONLY. Every color, radius, shadow, spacing and
   motion value is inherited from test-center-system.css + mastery-map.css
   (the --g1..--g10 green-depth ramp, .mm-track--dock, .mm-band, .mm-legend,
   .mm-empty-track all reuse verbatim). This file adds ONLY:
     · the phase-group brackets/labels (Climb · Cruise · Approach · Cleared)
     · the you-are-here pin marker (--orange — the scalpel)
     · the mock-slot row placement (.dash-cslot vocabulary, MOVED here from
       dashboard.js's deleted cadence strip so it survives the cleanup)
     · the summit chip (a .pill-derived chip)
     · the dormant pin-translate transition (Phase 3 — nothing triggers it yet)
   Plus the Discovery Flight entry/reveal shells (thin) and the dashboard's
   journey-zone scoped styles. 760px column is the canvas; never full-bleed.
   ========================================================================== */

.fps { position: relative; }

/* ── the SWITCHBACK route (Chris, 2026-06-12): three stacked rows. Row 1 = the
   9 leg bands at FULL card width; a 180° right-turn connector down into Row 2
   (the three Stabilized Approaches, flowing right→left); a 180° left-turn
   connector down onto final — Row 3, the endorsement chip above a runway.
   Phase labels are row-level eyebrows. ──────────────────────────────────── */
.fps-srow { min-width: 0; }

/* Phase labels — mono, muted, uppercase (.mm-journey__hint idiom). The phase
   the student is IN gets eyebrow weight, not color flooding (spec b2). */
.fps-grouplabel {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.fps-grouplabel--right { justify-content: flex-end; }
.fps-grouplabel--center { justify-content: center; }
.fps-phase { display: inline-flex; }
.fps-phase.is-now { color: var(--ink); font-weight: 700; }
.fps-phase__abbr { display: none; }
.fps-phaserule { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 12px; }

/* ── the leg track — .mm-track--dock verbatim, with pin headroom. 46px tall
   keeps every leg band a ≥44px tap target. ──────────────────────────────── */
.fps-track { padding-top: 24px; height: 46px; }
.fps-leg { position: relative; }

/* Magnified labels must never clip (Chris fix #2): the strip scope lifts the
   dock's overflow clamp and raises the magnified band over its neighbors'
   flags, so a long domain name can spill past the band edges and stay legible. */
.fps .mm-band__label { overflow: visible; text-overflow: clip; }
.fps .mm-track--dock .mm-band.is-magnified { z-index: 5; }

/* The readout slot under the row — the hovered/focused leg echoed in full
   (name + % + status). A fixed slot can't clip and color is never alone. */
.fps-readout {
  margin-top: var(--s-2); min-height: 1.3em;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted);
  letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── switchback connectors — DECISION (R2 ui-4, 2026-06-12): KEPT, rebuilt as
   edge-anchored CSS route lines. The old floating SVG hooks read as debris in
   the whitespace at 760px; these anchor edge-to-edge — the line runs the full
   card width from the row it leaves and turns down (full-radius corner) into
   the row it enters, with an arrowhead naming the direction. 2px var(--muted)
   for real path weight (--line was too faint to read as a route). Static, no
   animation (reduced-motion needs nothing extra); decorative only (aria-hidden;
   row order carries the route for screen readers). ≤430px hides them and lets
   the row stacking + phase eyebrows carry the flow. ──────────────────────── */
.fps-conn { position: relative; height: clamp(26px, 5vw, 38px); margin: var(--s-2) 0; color: var(--muted); pointer-events: none; }
/* the line + turn: full-width horizontal, curving down at the turn side */
.fps-conn::before { content: ''; position: absolute; top: 0; bottom: 7px; border-top: 2px solid currentColor; }
.fps-conn--r::before { left: 6px; right: 14px; border-right: 2px solid currentColor; border-top-right-radius: clamp(14px, 2.6vw, 20px); }
.fps-conn--l::before { left: 14px; right: 6px; border-left: 2px solid currentColor; border-top-left-radius: clamp(14px, 2.6vw, 20px); }
/* arrowhead — points down into the next row, centered on the vertical drop */
.fps-conn::after { content: ''; position: absolute; bottom: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid currentColor; }
.fps-conn--r::after { right: 14px; transform: translateX(50%); }
.fps-conn--l::after { left: 14px; transform: translateX(-50%); }
.fps-leg__pct {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.66rem;
  font-variant-numeric: tabular-nums; color: var(--ink-on, var(--on-pale));
}
/* The dock variant hides .mm-band__label until magnified — same rule scope as
   mastery-map.css. The % rides inside the same label so color is never alone. */

/* Established flag — a small ✓ badge pinned to the leg's top corner. Always
   visible (a word/glyph, not color, carries the state). */
.fps-leg__flag {
  position: absolute; top: -7px; right: -3px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--success); color: #fff;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}

/* ── you-are-here pin — ONE pin, --orange, anchored to the focus leg.
   left is driven by --fps-i/--fps-n so the (dormant) Phase-3 pin-move-back
   only has to change --fps-i; the transition below carries the motion. ────── */
.fps-pin {
  position: absolute; top: -2px; z-index: 6;
  left: calc((var(--fps-i, 0) + 0.5) * (100% / var(--fps-n, 9)));
  transform: translateX(-50%);
  color: var(--orange);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(22,19,18,0.25));
  transition: left var(--brief) var(--ease-cinematic),
              opacity var(--brief) var(--ease-cinematic),
              transform var(--brief) var(--ease-cinematic);
}
/* Route Reveal: the pin holds above its leg, then "drops" after the band wipe. */
.fps-pin--pre { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.fps-pin.is-dropped { opacity: 1; transform: translateX(-50%); }

/* Phase-3 (dormant): caption shown when the pin steps back. Calm, muted —
   never an alarm. Nothing renders this in Phase 1/2. */
.fps-pinback-note {
  margin: var(--s-3) 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted);
}

/* ── Stabilized Approach slots — .dash-cslot vocabulary moved here from
   dashboard.js's deleted cadence strip (spec §4.8). Row 2 of the switchback:
   row-reverse so the slots read right→left along the route's flow, and the
   full-width row gives each slot real room (the "not yet flown" sub fits). ── */
.fps-slots { display: flex; flex-direction: row-reverse; align-items: stretch; gap: var(--s-3); }
.dash-cslot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 8px; min-height: 52px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.dash-cslot--met { border-color: rgba(44,122,75,.4); background: var(--success-soft); }
.dash-cslot--met .dash-cslot__pct { color: var(--success); }
.dash-cslot--open { border-style: dashed; }
.dash-cslot--open .dash-cslot__pct { color: var(--muted); font-weight: 500; }
.dash-cslot__pct { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 700; font-size: 0.88rem; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ≥0.68rem (R2 ui-5): 0.6rem sat under the comfortable mobile floor. */
.dash-cslot__sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Pre-mock collapse (R2 ui-5): until at least one mock exists, the three
   "not yet flown" slots fold into this one quiet line. */
.fps-slots-note { flex: 1; margin: 0; padding: var(--s-2) 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; text-align: right; }

/* ── Row 3 — short final: the endorsement chip centered above a runway ───── */
.fps-srow--summit { display: flex; flex-direction: column; align-items: center; }
.fps-srow--summit .fps-grouplabel { align-self: stretch; }

/* The runway — a vertical-perspective trapezoid in --line/--muted tones with a
   dashed centerline. Pure CSS, tokens only; decorative (aria-hidden). */
.fps-runway {
  position: relative; width: 132px; height: 58px; margin-top: var(--s-2);
  background: linear-gradient(180deg, var(--line), var(--muted));
  -webkit-clip-path: polygon(35% 0, 65% 0, 100% 100%, 0% 100%);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0% 100%);
}
.fps-runway__cl {
  position: absolute; left: 50%; top: 7px; bottom: 6px; width: 0;
  border-left: 3px dashed var(--surface); transform: translateX(-50%);
}

/* ── summit chip — the endorsement, folded into the strip until Approach ─── */
.fps-summit {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 var(--s-4);
  border: 1px dashed var(--line); border-radius: var(--r-pill);
  background: var(--paper); color: var(--muted); cursor: default;
  font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap;
  transition: border-color var(--glance) var(--ease-calm), background var(--glance) var(--ease-calm), color var(--glance) var(--ease-calm);
}
.fps-summit--live {
  border-style: solid; border-color: var(--orange); color: var(--orange-text, #b8500a);
  background: var(--surface); cursor: pointer;
}
.fps-summit--live:hover { background: var(--orange-soft); }
.fps-summit--cleared { border-color: rgba(44,122,75,.4); background: var(--success-soft); color: var(--success); }
.fps-summit:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.fps-legend { margin-top: var(--s-4); }

/* ── very narrow (≤430px): connectors hide, the rows stack in simple downward
   flow (slots back to left→right so reading order matches visual order), and
   phase labels abbreviate. Everything stays tappable at 360px. ───────────── */
@media (max-width: 430px) {
  .fps-conn { display: none; }
  .fps-slots { flex-direction: row; gap: var(--s-2); }
  .fps-srow--mocks, .fps-srow--summit { margin-top: var(--s-4); }
  .fps-phase__full { display: none; }
  .fps-phase__abbr { display: inline; }
  .fps-runway { width: 112px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .fps-pin { transition: none; }
  .fps-pin--pre { opacity: 1; transform: translateX(-50%); }
}

/* ============================================================================
   DASHBOARD JOURNEY ZONES (screen-scoped — the dashboard renders these)
   ========================================================================== */

/* Zone 2 wrapper — the .dash-jbar clickable-card idiom, renamed (spec §3.2). */
.dash-strip {
  cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-card);
  padding: clamp(16px, 3vw, 22px); margin-top: clamp(16px, 3vw, 24px);
  transition: border-color var(--glance) var(--ease-calm);
}
.dash-strip:hover { border-color: var(--orange); }
.dash-strip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dash-strip__caption {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.dash-strip__title {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: var(--tracking-label, .08em); color: var(--orange-text, #b8500a);
}
.dash-strip__hint { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.dash-strip:hover .dash-strip__hint { color: var(--orange); }

/* Zone 3 — ONE pace sentence. Not a card; a quiet line with mono numerals. */
.dash-pace {
  position: relative;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin-top: clamp(12px, 2.5vw, 18px); padding: 2px var(--s-2);
  font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--body-text);
}
.dash-pace b { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-pace__link {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.dash-pace__link:hover { color: var(--orange-text, #b8500a); }
.dash-pace__info {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  /* ≥24px hit area (R2 ui-6) — the glyph stays small; the padding box carries the target. */
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; border-radius: 50%;
  transition: color .12s ease, background .12s ease;
}
.dash-pace__info:hover, .dash-pace__info[aria-expanded="true"] { color: var(--orange); background: var(--orange-soft); }
.dash-pace__info:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* S3 — the guiding light, verdict-word-FIRST hierarchy. The lead line answers
   "am I on track?" at headline weight; the numbers demote to a quiet sub-line.
   A doesn't-close verdict wears --caution amber — never red, never shame. */
.dash-pace--verdict { display: block; }
.dash-pace__lead {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 2.6vw, 1.2rem); line-height: 1.35; color: var(--ink);
}
.dash-pace__est {
  margin-left: var(--s-2); font-family: var(--font-mono); font-weight: 500;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); white-space: nowrap;
}
.dash-pace__caution { color: var(--caution); }
.dash-pace__sub {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--body-text);
}

/* Free Flight — still BELOW the pace line (lesson → route → pace → Free
   Flight), but the tiles themselves are the full quick-action cards again
   (Chris, 2026-06-12: "like the previous buttons/cards — they can be bigger").
   The old .dash-tile idiom: icon + title + sub, comfortable padding, 2×2 grid. */
.dash-ff { margin-top: clamp(20px, 3.5vw, 30px); }
.dash-ff__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.dash-ff__sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.02em; }
.dash-ff__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.dash-ff__tile {
  display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; text-align: left;
  padding: var(--s-5); min-height: 104px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  cursor: pointer;
  transition: border-color var(--glance) var(--ease-calm), background var(--glance) var(--ease-calm), transform var(--tap) var(--ease-decisive);
}
.dash-ff__tile:hover { border-color: var(--orange); background: var(--orange-soft); }
.dash-ff__tile:active { transform: translateY(1px); }
.dash-ff__tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dash-ff__ico { color: var(--orange); }
.dash-ff__name { font-family: var(--font-display); font-weight: 600; font-size: 0.96rem; color: var(--ink); letter-spacing: 0.01em; }
.dash-ff__sub2 { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; }

/* Zone-1 retry card (dashboard fetch failed) — calm --caution, never --error. */
.dash-retry {
  margin-top: var(--s-4); padding: var(--s-5);
  border: 1px solid var(--line); border-left: 3px solid var(--caution);
  border-radius: var(--r-lg); background: var(--surface);
}
.dash-retry p { margin: 0 0 var(--s-3); font-size: 0.95rem; line-height: 1.55; color: var(--body-text); }

/* ============================================================================
   DISCOVERY FLIGHT — entry card + Route Reveal (thin shells; spec §2)
   ========================================================================== */
.dfx-head { margin-bottom: clamp(18px, 3.5vw, 26px); }
.dfx-head h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2rem); color: var(--ink); line-height: 1.12;
  margin: var(--s-2) 0 var(--s-3);
}
.dfx-head p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--body-text); max-width: 56ch; text-wrap: pretty; }

.dfx-card {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-card); padding: clamp(16px, 3.5vw, 24px);
  margin-bottom: clamp(16px, 3vw, 22px);
}
.dfx-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }

.dfx-quiet { margin: var(--s-4) 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); max-width: 56ch; }

.dfx-strip {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-card); padding: clamp(16px, 3vw, 22px);
  margin-bottom: clamp(16px, 3vw, 22px);
}
.dfx-read { font-size: clamp(1rem, 1.7vw, 1.12rem); line-height: 1.55; color: var(--body-text); max-width: 60ch; text-wrap: pretty; margin: 0 0 clamp(16px, 3vw, 22px); }
.dfx-read b { color: var(--ink); font-weight: 600; }

/* Reveal error line — --caution (answers are safe), never --error unless
   server-unreachable (the calm-failure surface owns that). */
.dfx-error {
  display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-5); border: 1px solid var(--line); border-left: 3px solid var(--caution);
  border-radius: var(--r-lg); background: var(--surface);
}
.dfx-error p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--body-text); }
.dfx-error__row { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.dfx-error__alt { background: none; border: 0; cursor: pointer; padding: 6px 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.76rem; text-decoration: underline; text-underline-offset: 3px; }
.dfx-error__alt:hover { color: var(--orange-text, #b8500a); }