/* ============================================================================
   FLIGHT — Part 2 "The journey" : cinematic FLIGHT TRACK (variant B, focus rail).
   Module tag: .jnyb-  |  reads window.FlightData.steps (14), phases, roles, levels
   Encoding: color = role, form = involvement.
     leading       -> bright numbered node on the flight path (the plane rides it)
     participating -> lit rounded square in that role's lane, solid connector
     optional      -> dim dashed diamond in that role's lane, dashed connector
   Two renderings share one header + legend:
     .jnyb-rail-mode  -> horizontal focus rail + detail stage + flying plane
     .jnyb-static-mode-> vertical, non-pinned timeline (reduced motion / small screens)
   ============================================================================ */

.jnyb { position: relative; }
.jnyb-wrap { position: relative; }

/* ---------- role -> emitted-light variables (color = role) ---------- */
.jnyb-cust   { --rc: var(--green);  --rr: var(--green-rgb);  --rs: var(--green-soft); }
.jnyb-agency { --rc: var(--yellow); --rr: var(--yellow-rgb); --rs: var(--yellow-soft); }
.jnyb-ext    { --rc: var(--blue);   --rr: var(--blue-rgb);   --rs: var(--blue-soft); }

/* ---------- section header ---------- */
.jnyb-head { max-width: 60ch; margin-block-end: clamp(24px, 3.4vw, 44px); }
.jnyb-head .eyebrow { margin-block-end: var(--space-4); }
.jnyb-eyebrow-mark {
  width: 20px; height: auto;
  filter: drop-shadow(0 2px 6px rgba(var(--red-rgb), 0.55));
}
.jnyb-title { margin-block-end: var(--space-4); }
.jnyb-lead { max-width: 56ch; }

/* ---------- legend (decodes the shapes; shown in both modes) ---------- */
.jnyb-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4) clamp(20px, 3vw, 40px);
  margin-block-end: clamp(20px, 2.6vw, 34px);
}
.jnyb-legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.jnyb-legend-cap {
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg-4);
}
.jnyb-role {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-small); color: var(--rs);
  background: rgba(var(--rr), 0.10); border: 1px solid rgba(var(--rr), 0.42);
}
.jnyb-role svg { width: 15px; height: 15px; }
.jnyb-lvl { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 700; color: var(--fg-2); }
.jnyb-swatch { width: 15px; height: 15px; flex: 0 0 auto; }
.jnyb-swatch--lead { border-radius: 50%; background: var(--fg-1); box-shadow: 0 0 8px rgba(255,255,255,0.5); }
.jnyb-swatch--part { border-radius: 4px; border: 2px solid var(--fg-1); background: rgba(255,255,255,0.18); }
.jnyb-swatch--opt  { width: 12px; height: 12px; border: 2px dashed var(--fg-3); background: transparent; transform: rotate(45deg); }

/* ---------- involvement chips (color = role, dot shape = involvement) ---------- */
.jnyb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jnyb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; color: var(--rs);
  background: rgba(var(--rr), 0.12); border: 1px solid rgba(var(--rr), 0.42);
}
.jnyb-chip em { font-style: normal; font-weight: 700; font-size: 0.62rem; opacity: 0.72; letter-spacing: 0.06em; }
.jnyb-cdot { width: 10px; height: 10px; flex: 0 0 auto; background: currentColor; border-radius: 50%; }
.jnyb-chip.jnyb-lvl-participating .jnyb-cdot { border-radius: 3px; }
.jnyb-chip.jnyb-lvl-optional .jnyb-cdot {
  width: 9px; height: 9px; background: transparent;
  border: 1.5px solid currentColor; border-radius: 1px; transform: rotate(45deg);
}
.jnyb-chip.jnyb-lvl-optional { border-style: dashed; }
.jnyb-chip.jnyb-lvl-leading.jnyb-cust   { background: rgba(var(--green-rgb), 0.24); }
.jnyb-chip.jnyb-lvl-leading.jnyb-agency { background: rgba(var(--yellow-rgb), 0.24); }
.jnyb-chip.jnyb-lvl-leading.jnyb-ext    { background: rgba(var(--blue-rgb), 0.24); }

/* ===========================================================================
   RAIL MODE  (motion + wide screens)
   =========================================================================== */
.jnyb-static-mode { display: none; }
.jnyb-rail-mode { display: block; }

/* ---------- controls ---------- */
.jnyb-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5);
  margin-block-end: var(--space-5);
}
.jnyb-nav { display: flex; align-items: center; gap: var(--space-2); }
.jnyb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; font-weight: 800; font-size: var(--fs-small);
  color: var(--fg-1); background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-hi); border-radius: var(--r-pill);
  padding: 10px 14px; min-width: 44px; min-height: 44px;
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  transition: border-color var(--dur-2) ease, background var(--dur-2) ease, transform var(--dur-1) var(--ease-out-back);
}
.jnyb-btn svg { width: 18px; height: 18px; }
.jnyb-btn:hover { border-color: rgba(var(--blue-rgb), 0.7); background: rgba(var(--blue-rgb), 0.16); }
.jnyb-btn:active { transform: scale(0.94); }
.jnyb-btn[disabled] { opacity: 0.4; cursor: default; }
.jnyb-btn[disabled]:hover { border-color: var(--glass-border-hi); background: var(--glass-bg-strong); }
.jnyb-play {
  color: #231a02; background: var(--yellow); border-color: var(--yellow);
  padding-inline: 18px; box-shadow: var(--shadow-glow-yellow);
}
.jnyb-play:hover { background: var(--yellow-soft); border-color: var(--yellow-soft); }
.jnyb-play .jnyb-ic-pause { display: none; }
.jnyb.is-playing .jnyb-play .jnyb-ic-play { display: none; }
.jnyb.is-playing .jnyb-play .jnyb-ic-pause { display: inline-flex; }
.jnyb-play-label { font-weight: 900; }

.jnyb-status { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: var(--fg-3); font-weight: 600; }
.jnyb-status b { color: var(--fg-1); font-weight: 900; }
.jnyb-status .jnyb-dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-4); }
.jnyb-controls .jnyb-legend-spacer { margin-inline-start: auto; }

/* progress rail */
.jnyb-progress {
  position: relative; height: 4px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08); overflow: hidden; margin-block-end: clamp(16px, 2vw, 26px);
}
.jnyb-progress-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 7.14%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue), var(--green) 55%, var(--yellow));
  box-shadow: 0 0 14px rgba(var(--blue-rgb), 0.55);
  transition: width var(--dur-3) var(--ease-out-expo);
}

/* ---------- the horizontal scroller ---------- */
.jnyb-scroller {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 40%;
  padding: clamp(10px, 1.4vw, 18px) 2px 18px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.jnyb-scroller::-webkit-scrollbar { height: 8px; }

/* ---------- the track (grid) ---------- */
.jnyb-track {
  position: relative;
  --jnyb-label-w: clamp(88px, 9vw, 118px);
  --jnyb-beat-w: clamp(132px, 15vw, 188px);
  --jnyb-lane-h: clamp(94px, 12vh, 128px);
  --jnyb-phase-h: 48px;
  --jnyb-plane-sz: clamp(38px, 4vw, 50px);
  display: grid;
  /* fit all 14 beats to the container width so the track never overflows /
     gets cut off on the right. minmax(0,1fr) lets columns shrink below their
     content size. Connectors + plane recompute via measure()/onResize. */
  grid-template-columns: var(--jnyb-label-w) repeat(14, minmax(0, 1fr));
  grid-template-rows: var(--jnyb-phase-h) var(--jnyb-lane-h) var(--jnyb-lane-h) var(--jnyb-lane-h);
  width: 100%;
}

/* svg overlay (flight path + connectors) — never blocks pointer */
.jnyb-svg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; pointer-events: none; overflow: visible;
}
.jnyb-path-base { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 2.5; stroke-linecap: round; }
.jnyb-path-live {
  fill: none; stroke: url(#jnybGrad); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(var(--blue-rgb), 0.5));
}
.jnyb-conn { fill: none; stroke: var(--rc); stroke-width: 2.2; stroke-linecap: round; opacity: 0.2; transition: opacity var(--dur-2) ease; }
.jnyb-conn.jnyb-lvl-optional { stroke-dasharray: 2.5 6; }
.jnyb-conn.is-past { opacity: 0.32; }
.jnyb-conn.is-active { opacity: 0.95; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(var(--rr), 0.65)); }

/* phase segments (row 1) */
.jnyb-phase-seg {
  grid-row: 1; align-self: stretch;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding-inline: 8px; text-align: center;
  border-inline-start: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.015);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap; overflow: hidden;
}
.jnyb-phase-seg.jnyb-alt { background: rgba(255,255,255,0.05); }
.jnyb-phase-seg b { color: var(--yellow); font-weight: 800; }
.jnyb-phase-seg .jnyb-phase-ttl { color: var(--fg-3); font-weight: 700; text-overflow: ellipsis; overflow: hidden; }

/* lane labels — sticky on the left through horizontal scroll */
.jnyb-lane-label {
  grid-column: 1; position: sticky; inset-inline-start: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rs); padding-inline-end: 12px;
  background: linear-gradient(90deg, var(--navy-950) 58%, rgba(3,8,18,0));
}
.jnyb-lane-label .jnyb-lane-ic {
  display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 8px; color: var(--rc);
  background: rgba(var(--rr), 0.14); border: 1px solid rgba(var(--rr), 0.4);
}
.jnyb-lane-label .jnyb-lane-ic svg { width: 15px; height: 15px; }

/* faint lane guide line across all beats */
.jnyb-lane-line {
  grid-column: 2 / -1; align-self: center; height: 2px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--rr), 0.16) 12%, rgba(var(--rr), 0.16) 88%, transparent);
}

/* per-beat focus backdrop + scroll-snap + click target */
.jnyb-col {
  grid-row: 2 / -1; position: relative; z-index: 0;
  scroll-snap-align: center; cursor: pointer; border: 0; background: transparent; padding: 0;
  border-radius: var(--r-lg);
  transition: background var(--dur-2) ease;
}
.jnyb-col::before {
  content: ''; position: absolute; inset: 6px 8px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--rr), 0.16), rgba(var(--rr), 0.02) 70%, transparent);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out-expo);
  pointer-events: none;
}
.jnyb-col.is-active::before { opacity: 1; }
.jnyb-col:hover::before { opacity: 0.5; }

/* ---------- leading node (numbered waypoint on the path) ---------- */
.jnyb-node {
  --sz: clamp(46px, 4.6vw, 58px);
  grid-row: var(--row); justify-self: center; align-self: center; z-index: 3;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font-weight: 900; font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--rs); background: rgba(10, 21, 38, 0.85);
  border: 2px solid rgba(var(--rr), 0.5);
  box-shadow: inset 0 0 12px rgba(var(--rr), 0.14);
  opacity: 0.46; transform: scale(0.9);
  transition: transform var(--dur-3) var(--ease-out-back), opacity var(--dur-2) ease,
              box-shadow var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease, filter var(--dur-2) ease;
}
.jnyb-node:hover { opacity: 1; transform: scale(1); border-color: var(--rc); }
.jnyb-node.is-past { opacity: 0.82; transform: scale(0.96); border-color: rgba(var(--rr), 0.75); color: var(--rs); background: rgba(var(--rr), 0.14); }
.jnyb-node.is-active {
  opacity: 1; transform: scale(1.16); color: var(--navy-950);
  background: var(--rc); border-color: var(--rc);
  box-shadow: 0 0 0 6px rgba(var(--rr), 0.14), 0 0 34px rgba(var(--rr), 0.8),
              inset 0 1px 6px rgba(255, 255, 255, 0.38);
  filter: none;
}
.jnyb-node:not(.is-active):not(.is-past) { filter: blur(0.6px); }

/* ---------- secondary markers (participating square / optional diamond) ---------- */
.jnyb-mark {
  grid-row: var(--row); justify-self: center; align-self: center; z-index: 2;
  pointer-events: none; opacity: 0.36;
  transition: opacity var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out-back);
}
/* participating -> lit rounded square (explicit nonzero size) */
.jnyb-mark.jnyb-lvl-participating {
  width: 30px; height: 30px; border-radius: 8px;
  border: 2px solid var(--rc); background: rgba(var(--rr), 0.2);
}
/* optional -> dim dashed diamond (explicit nonzero size) */
.jnyb-mark.jnyb-lvl-optional {
  width: 26px; height: 26px; border-radius: 3px;
  border: 2px dashed var(--rc); background: transparent; transform: rotate(45deg);
}
.jnyb-mark.is-past { opacity: 0.5; }
.jnyb-mark.jnyb-lvl-participating.is-active {
  opacity: 1; box-shadow: 0 0 18px rgba(var(--rr), 0.6); transform: scale(1.06);
  background: rgba(var(--rr), 0.3);
}
.jnyb-mark.jnyb-lvl-optional.is-active {
  opacity: 1; box-shadow: 0 0 16px rgba(var(--rr), 0.5); transform: rotate(45deg) scale(1.08);
}

/* ---------- the flying plane (brand signature protagonist) ---------- */
.jnyb-plane {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 4;
  width: var(--jnyb-plane-sz, 42px); height: var(--jnyb-plane-sz, 42px);
  transform-origin: center center; pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(var(--red-rgb), 0.55)) drop-shadow(0 0 14px rgba(var(--red-rgb), 0.4));
  will-change: transform;
}
.jnyb-plane svg { width: 100%; height: 100%; overflow: visible; }
.jnyb-plane-a { fill: var(--red); }
.jnyb-plane-b { fill: #d63a2b; }

/* ---------- detail stage (the focused beat) ---------- */
.jnyb-stage {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-start: clamp(22px, 3vw, 40px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: var(--panel-grad), var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.jnyb-stage::after {
  content: ''; position: absolute; z-index: 0; inset: auto -10% -40% auto;
  width: 60%; height: 120%; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rr), 0.16), transparent 66%);
  opacity: 0.75; pointer-events: none;
  transition: background var(--dur-3) ease;
}
.jnyb-stage-wm {
  position: absolute; z-index: 0; top: -6%; right: -2%; width: min(40%, 260px); height: auto;
  opacity: 0.08; pointer-events: none; transform: rotate(-14deg);
}
.jnyb-stage-wm path { fill: var(--rc); }
.jnyb-stage-badge {
  position: relative; z-index: 1; align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: clamp(78px, 8vw, 104px);
}
.jnyb-stage-medallion {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--r-lg);
  display: grid; place-items: center;
  font-weight: 900; font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--rs);
  background: radial-gradient(120% 120% at 30% 20%, rgba(var(--rr), 0.34), rgba(var(--rr), 0.08));
  border: 1px solid rgba(var(--rr), 0.5);
  box-shadow: 0 0 26px rgba(var(--rr), 0.32), inset 0 0 16px rgba(var(--rr), 0.14);
}
.jnyb-stage-lead {
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--rs);
}
.jnyb-stage-body { position: relative; z-index: 1; min-width: 0; }
.jnyb-stage-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--yellow); margin-block-end: var(--space-3);
}
.jnyb-stage-kicker b { color: var(--fg-1); }
.jnyb-stage .jnyb-chips { margin-block-end: var(--space-4); }
.jnyb-stage-title {
  font-weight: 900; font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: -0.01em; color: var(--fg-1); margin-block-end: var(--space-4); text-wrap: balance;
}
.jnyb-stage-text { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); max-width: 62ch; }
.jnyb-stage-text b { color: var(--yellow-soft); font-weight: 800; }
.jnyb-stage-meta {
  margin-block-start: var(--space-4); padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--glass-border);
  font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3); max-width: 66ch;
}
.jnyb-stage-meta b { color: var(--yellow-soft); font-weight: 700; }

/* ===========================================================================
   STATIC MODE  (reduced motion / small screens) — vertical, non-pinned, legible
   =========================================================================== */
.jnyb-timeline { position: relative; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.jnyb-tl-phase {
  display: flex; align-items: center; gap: 10px;
  margin-block-start: clamp(10px, 2vw, 22px);
  font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.jnyb-tl-phase:first-child { margin-block-start: 0; }
.jnyb-tl-phase b { color: var(--yellow); }
.jnyb-tl-phase span { color: var(--fg-2); }
.jnyb-tl-phase::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }

.jnyb-tl-item {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 2vw, 20px);
  align-items: start;
}
.jnyb-tl-spine { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: stretch; }
.jnyb-tl-node {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 1.05rem;
  color: var(--rs); background: rgba(var(--rr), 0.16);
  border: 2px solid rgba(var(--rr), 0.6); box-shadow: 0 0 18px rgba(var(--rr), 0.24);
}
.jnyb-tl-thread { flex: 1 1 auto; width: 2px; min-height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(var(--rr), 0.5), rgba(255,255,255,0.06)); }
.jnyb-tl-item:last-child .jnyb-tl-thread { display: none; }
.jnyb-tl-card {
  border-radius: var(--r-lg); padding: clamp(16px, 2vw, 22px);
  background: var(--panel-grad), var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-1);
}
.jnyb-tl-card .jnyb-chips { margin-block-end: var(--space-3); }
.jnyb-tl-title {
  font-weight: 800; font-size: var(--fs-h3); line-height: var(--lh-snug);
  color: var(--fg-1); letter-spacing: -0.01em; margin-block-end: var(--space-2); text-wrap: balance;
}
.jnyb-tl-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.jnyb-tl-text b { color: var(--yellow-soft); font-weight: 800; }
.jnyb-tl-meta {
  margin-block-start: var(--space-3); padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--glass-border);
  font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3);
}
.jnyb-tl-meta b { color: var(--yellow-soft); font-weight: 700; }

/* ===========================================================================
   MODE SWITCHING
   =========================================================================== */
/* reduced motion (class set by JS) -> always the static, fully-legible timeline */
.jnyb.jnyb-is-reduced .jnyb-rail-mode { display: none; }
.jnyb.jnyb-is-reduced .jnyb-static-mode { display: block; }

/* small screens -> static timeline even with motion (never a horizontal trap) */
@media (max-width: 900px) {
  .jnyb .jnyb-rail-mode { display: none; }
  .jnyb .jnyb-static-mode { display: block; }
}

@media (max-width: 720px) {
  .jnyb-stage { grid-template-columns: 1fr; }
  .jnyb-stage-badge { flex-direction: row; width: auto; align-items: center; }
  .jnyb-stage-medallion { width: clamp(58px, 16vw, 74px); }
}

/* ===========================================================================
   REDUCED MOTION — calm, no autoplay, no pulse, everything visible
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .jnyb-node, .jnyb-mark, .jnyb-col, .jnyb-col::before, .jnyb-plane,
  .jnyb-progress-fill, .jnyb-conn, .jnyb-stage::after { transition: none; }
  .jnyb-node:not(.is-active):not(.is-past) { filter: none; }
}