/* flight_live.css — Live Flight Experience Phase E (live flight card + band slot).
   Tokens only (no raw hex; the css-hex-guard fails raw hex). Geist / Geist Mono.
   Status is carried by the pace tints AND a text label (never colour alone). */

.v2-flive {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  background: var(--paper-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-flive--cancelled,
.v2-flive--diverted { border-left: 3px solid var(--pace-ruby); }
.v2-flive--delayed { border-left: 3px solid var(--pace-amber); }
.v2-flive--arrived { border-left: 3px solid var(--pace-on-track); }
.v2-flive--scheduled,
.v2-flive--active { border-left: 3px solid var(--hairline-strong); }

.v2-flive__head { display: flex; align-items: center; gap: 10px; }
.v2-flive__chip { font-size: 0.8rem; }
.v2-flive__num { font-weight: 700; color: var(--ink-strong); letter-spacing: 0.01em; }

.v2-flive__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.v2-flive__field { display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.v2-flive__field-lab { font-size: 0.73333rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.v2-flive__field-val { font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.v2-flive__field-sub { font-size: 0.73333rem; color: var(--ink-muted); }
.v2-flive__tbc { color: var(--ink-faint); font-weight: 500; }

.v2-flive__times { font-size: 0.93333rem; }
.v2-flive__time-row { display: flex; align-items: center; gap: 8px; }
.v2-flive__time-lab { color: var(--ink-muted); font-size: 0.8rem; min-width: 26px; }
.v2-flive__arrow { color: var(--ink-faint); }
.v2-flive__delta { font-weight: 700; padding: 0 6px; border-radius: 6px; }
.v2-flive__delta--ontime { color: var(--pace-on-track); }
.v2-flive__delta--minor,
.v2-flive__delta--medium { color: var(--pace-amber); }
.v2-flive__delta--major { color: var(--pace-ruby); }

.v2-flive__pos { font-size: 0.8rem; color: var(--ink-muted); margin: 0; }

.v2-flive__timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v2-flive__ev { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86667rem; }
.v2-flive__ev-t { color: var(--ink-strong); }
.v2-flive__ev-m { color: var(--ink-muted); font-size: 0.8rem; white-space: nowrap; }
.v2-flive__ev-more details summary { cursor: pointer; color: var(--ink-muted); font-size: 0.8rem; }
.v2-flive__ev-more ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.v2-flive__updated { margin: 0; font-size: 0.8rem; color: var(--ink-muted); }

.v2-flive__empty-h { font-weight: 700; color: var(--ink-strong); }
.v2-flive__empty-b { font-size: 0.86667rem; color: var(--ink-muted); }

/* Fresh-change highlight: ~2s amber-paper fade, settling to transparent. Under
   prefers-reduced-motion the animation is removed and a static amber border
   keeps the change perceivable (never motion-only). */
@keyframes v2-flive-fresh {
  from { background: var(--pace-amber-paper); }
  to   { background: transparent; }
}
.v2-fresh { animation: v2-flive-fresh 2s ease-out 1; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .v2-fresh { animation: none; border-left: 1px solid var(--pace-amber); padding-left: 6px; }
}

/* Connection-band slot (Phase F fills it). Invisible until filled. */
.v2-flive-band { min-height: 0; margin: 0; padding: 0; }
.v2-flive-band:empty { display: none; }

/* Glance / compact variant (Flights pane fallback). */
.v2-flive--glance { padding: 10px 12px; gap: 6px; }
.v2-flive--glance .v2-flive__fields { gap: 12px; }

/* "Add to a trip" nudge. */
.v2-flive-wrap { margin-top: 8px; }
.v2-flive-nudge { display: flex; align-items: center; gap: 8px; font-size: 0.86667rem; color: var(--ink-muted); margin: 8px 0 0; }
.v2-flive-nudge__ic { width: 18px; height: 18px; flex: none; }

/* Connection-risk band (Phase F). Pace tint + per-band shape glyph + text label
   (never colour alone). Tokens only. */
.v2-conn {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  background: var(--paper-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-conn--comfortable { border-left: 3px solid var(--pace-on-track); }
.v2-conn--tight { border-left: 3px solid var(--pace-amber); }
.v2-conn--risky,
.v2-conn--not_viable { border-left: 3px solid var(--pace-ruby); }
.v2-conn__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-conn__glyph { display: inline-flex; }
.v2-conn__glyph-svg { width: 22px; height: 22px; }
.v2-conn__label { font-size: 0.86667rem; font-weight: 700; }
.v2-conn__conf { font-size: 0.73333rem; color: var(--ink-muted); margin-left: auto; text-transform: uppercase; letter-spacing: 0.05em; }
.v2-conn__nums { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.86667rem; }
.v2-conn__num-lab { color: var(--ink-muted); font-size: 0.73333rem; }
.v2-conn__advisory { margin: 0; font-size: 0.86667rem; color: var(--ink-strong); }
.v2-conn__limits-line { font-size: 0.8rem; color: var(--ink-muted); margin: 0; }
.v2-conn__ticket { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-conn__ticket-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-muted); }
.v2-conn__icon { width: 16px; height: 16px; }
.v2-conn__seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.v2-conn__seg-btn { background: transparent; border: 0; padding: 5px 10px; font-size: 0.8rem; cursor: pointer; color: var(--ink-muted); border-right: 1px solid var(--hairline); }
.v2-conn__seg-btn:last-child { border-right: 0; }
.v2-conn__seg-btn.is-active { background: var(--paper-shade); color: var(--ink-strong); font-weight: 600; }