/* ============================================================================
   SCREEN: flight-plan — "Your Flight Plan", the dedicated journey page.
   Companion stylesheet to screens/flight-plan.js (the approved build). The
   orchestrator wires the <link> in app.html + kajabi-loader.js; this file is
   not loaded from the screen JS.

   Genre inherited from test-center-system.css: quiet cockpit, orange as the
   ONE scalpel accent, calm named motion, generous whitespace. Every color,
   radius, shadow, type role and motion value is a token from
   test-center-system.css — no invented colors. Visual target: the Clean Paper
   prototype (Flight Plan.dc.html + RouteBand.dc.html, paper theme).

   ── ROUTE-BAND GEOMETRY (must stay in lockstep with the JS) ──
   flight-plan.js renders N+2 slots (origin + N domain fixes + destination) and
   inline-positions three things by the slot-center formula xc(k)=((k+0.5)/slots)*100:
     · .fpl-route__line   left:xc(0)%      right:100-xc(last)%
     · .fpl-route__flown  left:xc(0)%      width:(planeX - xc(0))%
     · .fpl-plane (img)   left:planeX%
   The waypoint BUTTONS (.fpl-wp) and the abbrev labels (.fpl-abbr) carry NO
   inline position — they are laid out here as equal flex children (flex:1), so
   each one's center lands at exactly (k+0.5)/slots of the row. That is the same
   anchor the inline percentages use, so the plane, the flown line and the
   symbols all register against the identical grid. Do NOT switch .fpl-wp to
   absolute positioning without also feeding it xc(k) — the flex model is the
   contract.

   PACE is amber (--caution) always, never red. Reduced-motion kills every
   transition/animation at the bottom of this file (ship-blocker).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. SCREEN SHELL — page rhythm inside the 760px .tc-main column
   -------------------------------------------------------------------------- */
.fpl { background: var(--paper); min-height: 100%; }

/* Session-bar left cluster (back button + wordmark) */
.fpl-bar-left { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }

/* ----------------------------------------------------------------------------
   1. HERO — design fidelity (2026-06-12 doc §1/§2): a BARE giant readiness %
      on the LEFT (no "Day-One Ready" label, no top eyebrow) + "Your Flight
      Plan" H1 with "{coverage}% of the bank flown · {trend}" mono subline to
      its right, and the PACE (pill + recovery line) folded beneath, all
      LEFT-aligned — matches design-flightplan.png.
   -------------------------------------------------------------------------- */
.fpl-hero {
  display: flex; align-items: stretch; gap: clamp(18px, 4vw, 30px);
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 5vw, 38px);
  animation: fpl-rise var(--beat) var(--ease-cinematic) both;
}
.fpl-hero__pct {
  align-self: center;
  font-family: var(--font-display); font-weight: 700;
  /* Oswald giant numeral; tracks the prototype's 171px but clamps for 360px */
  font-size: clamp(5.4rem, 20vw, 10.7rem);
  line-height: 0.72; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fpl-hero__pctsign {
  font-size: 0.34em; font-weight: 600; color: var(--guess);
  margin-left: 0.04em;
}
.fpl-hero__side {
  flex: 1 1 264px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(12px, 2.6vw, 15px);
  align-items: flex-start;
}
.fpl-hero__titlewrap { min-width: 0; }
.fpl-hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  /* the big Oswald H1 (~30px), tracks the design */
  font-size: clamp(1.55rem, 5.2vw, 1.92rem); color: var(--ink);
  letter-spacing: 0.01em; line-height: 1.02;
}
.fpl-hero__sub {
  margin-top: var(--s-2);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted);
  letter-spacing: 0.01em; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   2. PACE — folded into the hero's right column, LEFT-aligned (doc §2). Amber
      (--caution) always; never red, never shame.
   -------------------------------------------------------------------------- */
.fpl-pace {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  text-align: left;
}
/* The chip — amber tint, pill, dot + verdict word + behind-tail. */
.fpl-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid rgba(196,123,31,0.30);   /* --caution @ 30% */
  background: var(--caution-soft);
  max-width: 100%;
}
.fpl-chip__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--caution);
}
.fpl-chip__word {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink);
}
.fpl-chip__days {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--caution);
  letter-spacing: 0.02em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Quiet variant — "Flying at your pace" / "No plan filed" / passed date.
   No status color flood; just a neutral resting pill. */
.fpl-chip--quiet {
  border-color: var(--line); background: var(--surface); color: var(--muted);
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.fpl-chip--quiet svg { color: var(--muted); flex: none; }

/* Recovery sentence — the real "fly ~N a day · averaging M" line (or the honest
   sessions/week fallback). Left-aligned with the recovery-arrow glyph leading. */
.fpl-pace__rec {
  margin: 0; max-width: 56ch;
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5;
  color: var(--muted); letter-spacing: 0.01em;
}
.fpl-pace__recarrow { flex: none; margin-top: 2px; }
.fpl-pace__rec b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.fpl-rec__lead {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
}

/* "early estimate" tag — the ETA-is-an-estimate honesty mark (no-date branch). */
.fpl-pace__est {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  white-space: nowrap;
}

/* File-your-plan / update-your-plan link — quiet underlined mono. */
.fpl-pace__link {
  background: none; border: 0; cursor: pointer; padding: var(--s-1) 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--glance) var(--ease-calm);
}
.fpl-pace__link svg { transition: transform var(--brief) var(--ease-decisive); }
.fpl-pace__link:hover { color: var(--orange-text); }
.fpl-pace__link:hover svg { transform: translateX(3px); }
.fpl-pace__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ----------------------------------------------------------------------------
   3. PHASE EYEBROW — orange tick + mono uppercase label
      "Phase 1 · En Route" etc.
   -------------------------------------------------------------------------- */
.fpl-phase { margin-top: clamp(24px, 4.5vw, 36px); }
.fpl-phase:first-of-type { margin-top: 0; }

.fpl-peyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-3);
}
.fpl-peyebrow__bar {
  flex: none; width: 24px; height: 2px; border-radius: 1px;
  background: var(--orange);
}
.fpl-peyebrow span:last-child {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.2em;
}

/* Fallback note when the bank isn't mapped / route can't render yet. */
.fpl-note {
  margin: 0; padding: var(--s-5);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  font-size: 0.95rem; line-height: 1.55; color: var(--muted); text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   4. THE ROUTE BAND — the instrument. Paper theme, FAA route-nav symbology.
   -------------------------------------------------------------------------- */
.fpl-band { padding: 22px clamp(16px, 4vw, 24px) 18px; position: relative; overflow: hidden; }

.fpl-band__head { margin-bottom: clamp(22px, 4vw, 32px); }
.fpl-band__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); letter-spacing: 0.01em;
}
.fpl-band__sub {
  margin-top: 3px;
  font-size: 0.84rem; color: var(--muted); line-height: 1.4;
}

/* The route stage — fixed height carries the line, the symbols and the
   ownship without reflow. Tooltips spill ABOVE so overflow stays visible
   here even though the card clips its own decorative bleed. */
.fpl-route { position: relative; height: 52px; overflow: visible; }

/* The base route line (muted "ahead" track), left/right inline from xc(). */
.fpl-route__line {
  position: absolute; top: calc(50% - 1px); height: 2px;
  background: var(--line);
}
/* The orange flown segment — origin → ownship. left/width inline from xc().
   Sits over the base line; the nose of the plane is its right edge. */
.fpl-route__flown {
  position: absolute; top: calc(50% - 2px); height: 4px; border-radius: 2px;
  background: var(--orange);
}

/* Waypoint row — equal flex children put each symbol center at (k+0.5)/slots,
   matching the inline xc() math used by the line/flown/plane. */
.fpl-route__wps {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
}

/* One waypoint = a tap target. Paper-knockout circle holds the SVG symbol,
   the tooltip floats above. Coarse-pointer taps echo into the caption (JS). */
.fpl-wp {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The knockout disc behind the symbol (paper-white, so the line "passes
   behind"). The disc grows on hover/focus; color of the SVG carries state. */
.fpl-wp__sym {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface);
  transition: transform var(--glance) var(--ease-decisive);
}
.fpl-wp--apt .fpl-wp__sym { width: 32px; height: 32px; }
.fpl-wp:hover .fpl-wp__sym,
.fpl-wp:focus-visible .fpl-wp__sym { transform: scale(1.36); }
.fpl-wp:focus-visible { outline: none; }
.fpl-wp:focus-visible .fpl-wp__sym {
  outline: 2px solid var(--orange); outline-offset: 2px;
}

/* State carried by COLOR on the SVG strokes/fills (currentColor in the JS). */
.fpl-wp--flown   { color: var(--orange); }     /* behind the nose */
.fpl-wp--current { color: var(--orange); }     /* the fix being flown to (+ ring) */
.fpl-wp--ahead   { color: var(--guess); }      /* not yet reached — muted warm */

/* Tooltip — floats above the symbol; the caption is the clip-proof carrier,
   this is the desktop nicety. Knockout text on ink, Oswald micro-label. */
.fpl-tip {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%) translateY(4px);
  pointer-events: none; white-space: nowrap; z-index: 6;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.02em;
  box-shadow: 0 5px 14px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity var(--glance) var(--ease-calm),
              transform var(--glance) var(--ease-decisive);
}
.fpl-wp:hover .fpl-tip,
.fpl-wp:focus-visible .fpl-tip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* The ownship — the Cessna, left:planeX% inline. Centered on its point. */
.fpl-plane {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: auto; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.28));
}

/* Abbrev labels row — same equal-flex grid as the waypoints, so REG/AIR/WX…
   sit under their fixes. Airport ends get empty spacer cells. */
.fpl-abbrs { display: flex; margin-top: var(--s-1); }
.fpl-abbr {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-family: var(--font-display); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.04em; color: var(--guess);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fpl-abbr--flown   { font-weight: 600; color: var(--ink); }
.fpl-abbr--current { font-weight: 700; color: var(--orange-text); }

/* Caption — the clip-proof readout line (hover/focus echoes a waypoint here). */
.fpl-cap {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  line-height: 1.5; letter-spacing: 0.01em;
}
.fpl-cap b { color: var(--ink); font-weight: 700; }
.fpl-cap__here { color: var(--orange-text); }

/* ----------------------------------------------------------------------------
   5. EN-ROUTE ACTIONS — one orange primary + two ghost secondaries (hover-lift)
   -------------------------------------------------------------------------- */
.fpl-actions {
  display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap;
}
.fpl-act {
  cursor: pointer; border-radius: var(--r-md);
  padding: 15px 16px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.84rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: background var(--brief) var(--ease-calm),
              border-color var(--glance) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm),
              transform var(--glance) var(--ease-decisive);
}
/* The ONE orange primary — ink on orange (AA, matches .btn-primary). */
.fpl-act--primary {
  flex: 2 1 200px; border: none;
  background: var(--orange); color: var(--ink);
  box-shadow: 0 4px 12px -9px rgba(244,115,33,0.30);
}
.fpl-act--primary svg { stroke: currentColor; transition: transform var(--brief) var(--ease-decisive); }
.fpl-act--primary:hover { background: var(--orange-hover); transform: translateY(-1px); }
.fpl-act--primary:hover svg { transform: translateX(4px); }
.fpl-act--primary:active { transform: translateY(1px); }
.fpl-act--primary[disabled] { opacity: 0.55; pointer-events: none; }

/* Secondaries — quiet paper buttons with the brand hover-lift (orange ring). */
.fpl-act--ghost {
  flex: 1 1 150px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
}
.fpl-act--ghost svg { color: var(--orange); flex: none; }
.fpl-act--ghost:hover {
  border-color: var(--orange); transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--orange), 0 8px 16px -10px rgba(244,115,33,0.30);
}
.fpl-act--ghost:active { transform: translateY(-1px); }
.fpl-act:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Real-counts meta line under the actions. */
.fpl-meta {
  text-align: center; margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  letter-spacing: 0.02em; line-height: 1.5; text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   6. PHASE 2 — MOCK EXAMS (the ~2× tall card, 3 dashed slots, locked CTA)
   -------------------------------------------------------------------------- */
.fpl-mock { padding: clamp(18px, 4vw, 24px); }
.fpl-mock__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.fpl-mock__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  color: var(--ink); letter-spacing: 0.01em;
}
.fpl-mock__sub {
  margin-top: var(--s-1); max-width: 46ch;
  font-size: 0.88rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
}
/* The "0 / 3 taken" count pill. */
.fpl-mock__count {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fpl-mock__count svg { color: var(--muted); flex: none; }

/* The three slots — taller than the strip's mini slots (the 2× card). */
.fpl-mock__slots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin-top: clamp(16px, 3vw, 22px);
}
.fpl-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); min-height: 132px; padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); text-align: center;
}
/* Open (not-yet-flown) slot — dashed, paper-soft fill, lock + name + sub. */
.fpl-slot--open {
  border: 1.5px dashed var(--line); background: #fbf8f5;
  color: var(--guess);
}
.fpl-slot--open svg { color: var(--guess); }
/* A taken slot that met the bar — calm green. */
.fpl-slot--met { border-color: rgba(44,122,75,0.4); background: var(--success-soft); }
.fpl-slot--met .fpl-slot__pct { color: var(--success); }
.fpl-slot__pct {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.fpl-slot__name {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--guess);
}
.fpl-slot__sub {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--muted);
}

/* The mock CTA — locked (disabled, paper-inset) or live (orange primary). */
.fpl-mockcta {
  width: 100%; margin-top: clamp(16px, 3vw, 20px);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 15px 20px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: #f4f2ef; color: var(--muted); cursor: not-allowed;
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.fpl-mockcta svg { flex: none; }
.fpl-mockcta--live {
  border: none; background: var(--orange); color: var(--ink); cursor: pointer;
  box-shadow: 0 4px 12px -9px rgba(244,115,33,0.30);
  transition: background var(--brief) var(--ease-calm), transform var(--glance) var(--ease-decisive);
}
.fpl-mockcta--live svg { stroke: currentColor; }
.fpl-mockcta--live:hover { background: var(--orange-hover); transform: translateY(-1px); }
.fpl-mockcta--live:active { transform: translateY(1px); }
.fpl-mockcta--live:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Honest lock copy under the disabled CTA. */
.fpl-locknote {
  text-align: center; margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
   7. PHASE 3 — ENDORSEMENT (compact, full-width arrival strip)
   -------------------------------------------------------------------------- */
.fpl-end {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 18px);
  flex-wrap: wrap;
  padding: 22px clamp(16px, 4vw, 24px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: #fbf8f5;
}
.fpl-end__badge {
  flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-soft); border: 1px solid rgba(244,115,33,0.22);
  color: var(--caution);
}
.fpl-end__body { flex: 1 1 240px; min-width: 0; }
.fpl-end__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: var(--ink); letter-spacing: 0.01em;
}
.fpl-end__sub {
  margin-top: var(--s-1);
  font-size: 0.88rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
}
/* The state chip — locked / signed / live (a button when actionable). */
.fpl-end__chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.fpl-end__chip svg { flex: none; }
/* button-reset for the live (actionable) chip */
button.fpl-end__chip { cursor: pointer; }
.fpl-end__chip--live {
  border-color: var(--orange); color: var(--orange-text); cursor: pointer;
  transition: background var(--glance) var(--ease-calm);
}
.fpl-end__chip--live:hover { background: var(--orange-soft); }
.fpl-end__chip--live svg { color: var(--orange); }
.fpl-end__chip--live:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.fpl-end__chip--done {
  border-color: rgba(44,122,75,0.4); background: var(--success-soft); color: var(--success);
}
.fpl-end__chip--done svg { color: var(--success); }

/* ----------------------------------------------------------------------------
   8. KEYFRAMES — calm only (no blink). Collapses under reduced-motion below.
      (The Nine-Domains list section was removed in the 2026-06-12 design
      fidelity correction — its CSS is gone; drill-down lives on Mastery Map.)
   -------------------------------------------------------------------------- */
@keyframes fpl-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------------
   9. RESPONSIVE — hold the 760px column; degrade gracefully narrower.
       The route band must never overflow; labels shrink, then the airport
       end-labels (always empty) keep the flex grid honest.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .fpl-hero { gap: var(--s-4); }
  .fpl-hero__pct { font-size: clamp(4.6rem, 26vw, 7rem); }
  .fpl-mock__slots { gap: var(--s-2); }
  .fpl-slot { min-height: 112px; padding: var(--s-3); }
  .fpl-slot__pct { font-size: 1.25rem; }
  /* Shrink the symbols so 11 fixes still fit without the knockouts touching. */
  .fpl-wp__sym { width: 22px; height: 22px; }
  .fpl-wp--apt .fpl-wp__sym { width: 27px; height: 27px; }
  .fpl-plane { width: 26px; }
  .fpl-abbr { font-size: 0.55rem; letter-spacing: 0.02em; }
}

@media (max-width: 420px) {
  /* Labels would collide at 11-across — hide them; the symbols + caption + the
     hover/tap tooltip carry the names. The route line itself never overflows
     (it's percentage-anchored inside the card padding). */
  .fpl-abbrs { display: none; }
  .fpl-wp__sym { width: 19px; height: 19px; }
  .fpl-wp--apt .fpl-wp__sym { width: 23px; height: 23px; }
  .fpl-plane { width: 23px; }
  .fpl-act--primary { flex: 1 1 100%; }
  .fpl-act--ghost { flex: 1 1 calc(50% - var(--s-2)); }
}

/* ----------------------------------------------------------------------------
   10. REDUCED MOTION — ship-blocker. Every transition + animation OFF.
       (test-center-system.css already zeroes the motion tokens; this is the
       belt-and-suspenders for everything declared in THIS file.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fpl-hero { animation: none; }
  .fpl *,
  .fpl *::before,
  .fpl *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Hover-grow + tooltip still WORK (they are state, not motion) — they just
     snap instead of easing. Nothing is left mid-transition. */
}