/* ═══════════════════════════════════════════════════════════
   Shared flight-card design language (.fcard*)

   Single source of truth for the compact flight card used on the
   dashboard AND every flight-search surface (wizard "found" card,
   NL live status card, route-search results). Extracted verbatim
   from the dashboard's inline styles so all surfaces render the
   same card.

   Depends ONLY on tokens defined in skylight.css (loaded on every
   page). It deliberately does NOT reference app-flow-only tokens
   (--serif, --mono, --paper-2/-3) so it renders identically on
   search_by_route.html, which loads skylight.css but not app-flow.css.

   .pill and .prog used to live inline in dashboard.html only; they
   are included here so the pill + progress bar also render on the
   search pages that never had them.
   ═══════════════════════════════════════════════════════════ */

/* ── status pill (shared) ── */
.pill { font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pill.green { background:var(--green-soft); color:var(--green); }
.pill.amber { background:var(--amber-soft); color:var(--amber); }
.pill.red   { background:var(--red-soft);   color:var(--red); }
.pill.blue  { background:var(--accent-soft); color:var(--accent-ink); }
.pill.slate { background:var(--slate-soft); color:var(--ink-3); }

/* ── in-flight progress bar (shared) ── */
.prog { height:4px; background:var(--slate-soft); border-radius:4px; overflow:hidden; margin-top:8px; }
.prog-bar { height:100%; background:var(--accent); }

/* ── compact flight card ── */
.fcard { border:1px solid var(--rule); border-radius:12px; padding:12px; margin-top:12px; cursor:pointer; transition:box-shadow .15s; background:var(--card); }
.fcard:hover { box-shadow:0 2px 8px rgba(15,23,42,.07); }
.fcard-top { display:flex; align-items:center; gap:8px; }
.fcard-logo { width:24px; height:24px; border-radius:6px; object-fit:contain; flex-shrink:0; background:#fff; }
.fcard-logo-fb { width:24px; height:24px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--slate-soft); color:var(--ink-3); font-size:10px; font-weight:800; }
.fcard-id { min-width:0; flex:1; }
.fcard-airline { font-size:12px; color:var(--ink-3); line-height:1.2; }
.fcard-ident { font-size:15px; font-weight:800; color:var(--ink); line-height:1.2; }
.fcard .pill { font-size:11px; padding:3px 9px; }
.fcard-route { margin-top:9px; font-size:14px; font-weight:700; color:var(--ink); }
.fcard-route .rcode { color:var(--ink-3); font-weight:600; font-size:12px; }
.fcard-route .arrow { color:var(--ink-4); font-weight:400; }
.fcard-times { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.fcard-leg { font-size:12px; color:var(--ink-3); display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; }
.fcard-leg .lbl { color:var(--ink); font-weight:700; min-width:26px; }
.fcard-leg .seg { color:var(--ink-3); white-space:nowrap; }
.fcard-leg .seg-label { color:var(--ink-4); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.fcard-leg .actual { color:var(--ink); font-weight:700; }
.fcard-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--rule); }
.fcard-meta { font-size:12px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:3px 8px; }
.fcard-edit { background:none; border:1px solid var(--rule); border-radius:8px; color:var(--accent-ink); font:inherit; font-size:13px; font-weight:600; padding:5px 12px; cursor:pointer; flex-shrink:0; }
.fcard-edit:hover { background:var(--accent-soft); }

/* ── Departure/Arrival split (live-status card) ──
   Two side-by-side columns, each with its own times + Term·Gate, so the gate
   reads under an explicit Departure/Arrival heading. */
.fcard-split { display:flex; gap:10px; margin-top:14px; }
.fcard-col { flex:1; min-width:0; }
.fcard-col-hd { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); margin-bottom:5px; }
.fcard-col-place { font-size:14px; font-weight:700; color:var(--ink); line-height:1.25; }
.fcard-col-place .rcode { color:var(--ink-3); font-weight:600; font-size:12px; }
.fcard-col-time { font-size:12.5px; color:var(--ink); margin-top:4px; }
.fcard-col-time:first-of-type { margin-top:7px; }
.fcard-col-time .seg-label { color:var(--ink-4); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.fcard-col-time .seg-label.late { color:var(--amber); }
.fcard-col-time .actual { color:var(--ink); font-weight:700; }
.fcard-col-time .actual.late { color:var(--amber); }
.fcard-col-loc { font-size:12px; color:var(--ink-3); margin-top:7px; }
.fcard-split-arrow { align-self:center; color:var(--ink-4); font-weight:700; font-size:13px; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════
   Rich card: delay chip, route-tracker, freshness footer

   Added so the shared card carries the same rich information as the
   WhatsApp status PNG — one model, one design across surfaces.
   All colours are skylight tokens (the brand palette), so the card
   stays on-brand everywhere.
   ═══════════════════════════════════════════════════════════ */

/* Amber "late" chip — magnitude + which end (phase-focused). */
.fcard-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; margin-top:8px; }
.fcard-chip.late { background:var(--amber-soft); color:var(--amber); }
.fcard-chip .ti { font-size:12px; }

/* Delayed time treatment in a leg row: original struck, new time amber. */
.fcard-leg .struck { text-decoration:line-through; color:var(--ink-4); }
.fcard-leg .actual.late, .fcard-leg .seg-label.late { color:var(--amber); }
.fcard-leg.muted { color:var(--ink-4); }
.fcard-leg.muted .lbl { color:var(--ink-3); font-weight:700; }

/* Route tracker: a plane rides the track at % complete (en-route); a green
   check sits at the destination once landed. */
.fcard-track { position:relative; height:24px; margin-top:12px; }
.fcard-track-line { position:absolute; top:9px; left:0; right:0; height:5px; border-radius:4px; background:var(--slate-soft); }
.fcard-track-done { position:absolute; top:9px; left:0; height:5px; border-radius:4px; background:var(--accent); }
.fcard-track-done.full { background:var(--green); }
.fcard-track-dot { position:absolute; top:7px; width:9px; height:9px; border-radius:50%; box-sizing:border-box; }
.fcard-track-dot.origin { left:0; background:var(--accent); }
.fcard-track-dot.origin.done { background:var(--green); }
.fcard-track-dot.dest { right:0; background:var(--card); border:2px solid var(--ink-4); }
.fcard-track-mark { position:absolute; top:0; width:24px; height:24px; border-radius:50%; background:var(--card); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; transform:translateX(-50%); }
.fcard-track-mark svg { width:14px; height:14px; fill:var(--accent); display:block; }
.fcard-track-mark.at-dest { left:auto !important; right:0; transform:none; background:var(--green); border-color:var(--green); }
.fcard-track-mark.at-dest .ti { color:#fff; font-size:14px; }
.fcard-track-sub { margin-top:3px; font-size:11px; color:var(--ink-3); text-align:right; }
.fcard-track-sub.landed { color:var(--green); font-weight:600; }

/* Freshness footer: "Status as of X ago" + a per-card Refresh button. */
.fcard-fresh { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; padding-top:9px; border-top:1px solid var(--rule); }
.fcard-fresh-label { font-size:12px; color:var(--ink-3); display:inline-flex; align-items:center; gap:5px; }
.fcard-fresh-label.stale { color:var(--amber); }
.fcard-fresh-label.final { color:var(--ink-4); }
.fcard-refresh { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid var(--rule); border-radius:8px; color:var(--accent-ink); font:inherit; font-size:12px; font-weight:600; padding:5px 11px; cursor:pointer; flex-shrink:0; }
.fcard-refresh:hover { background:var(--accent-soft); }
.fcard-refresh[disabled] { opacity:.55; cursor:default; }
.fcard-refresh.spin .ti { animation:fcard-spin .8s linear infinite; }
@keyframes fcard-spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   Search-context modifiers

   Layered onto .fcard on the flight-SEARCH surfaces only, so the
   dashboard card is untouched. These add the date "hero" (which
   day / live-vs-future is the card's #1 confidence signal) and a
   stacked, equal-weight CTA row.
   ═══════════════════════════════════════════════════════════ */

/* On a search surface the card is a picked-flight preview, not a
   tappable link → drop the hover-pointer affordance. */
.fcard--search { cursor:default; }
.fcard--search:hover { box-shadow:none; }

/* Date hero: the selected day, rendered large, with a liveness chip
   so a live/today instance is never confused with a future one. */
.fcard-datehero {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-top:10px;
}
.fcard-datehero .fc-date { font-size:15px; font-weight:800; color:var(--ink); }
.fc-live-chip, .fc-future-chip {
  font-size:11px; font-weight:800; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
/* "Today · live" — amber = pay attention, this is the flight in the air today */
.fc-live-chip { background:var(--amber-soft); color:var(--amber); }
/* "In N days" — slate = calm, a future date */
.fc-future-chip { background:var(--slate-soft); color:var(--ink-3); }

/* Stacked, full-width, equal-weight CTAs so picking a different
   date never reads as subordinate to the primary alert button. */
.fcard-cta-row { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.fcard-cta {
  display:block; width:100%; box-sizing:border-box;
  font:inherit; font-size:14px; font-weight:700;
  padding:11px 14px; border-radius:12px; cursor:pointer;
  text-align:center; border:1px solid transparent;
  transition:background .14s, border-color .14s;
}
.fcard-cta.primary { background:var(--accent); color:#fff; }
.fcard-cta.primary:hover { background:var(--accent-ink); }
.fcard-cta.secondary { background:var(--card); border-color:var(--rule); color:var(--ink-2); }
.fcard-cta.secondary:hover { border-color:var(--accent); color:var(--ink); }
.fcard-cta.ghost {
  background:none; border:none; padding:6px; width:auto;
  align-self:center; color:var(--ink-3); font-weight:600; font-size:13px;
}
.fcard-cta.ghost:hover { color:var(--ink); }

/* ═══════════════════════════════════════════════════════════
   Connecting-segment cards (live-status page, PRD §64.10)

   The connection ("layover") card sits between two flight cards on the
   trip-aware live-status page; the collapsed card is a non-active leg in
   the accordion. Same token vocabulary as .fcard so it themes identically.
   ═══════════════════════════════════════════════════════════ */

/* ── connection / layover card ── */
.fconn {
  border:1px dashed var(--rule); border-radius:12px; padding:11px 14px;
  background:var(--slate-soft); position:relative;
}
.fconn--active { border-style:solid; border-color:var(--accent); background:var(--accent-soft); }
.fconn-head { font-size:12.5px; color:var(--ink-3); margin-bottom:8px; }
.fconn-head strong { color:var(--ink); font-weight:800; }
.fconn-flow { display:flex; align-items:center; gap:10px; }
.fconn-side { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fconn-place { font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.fconn-sub { font-size:11.5px; color:var(--ink-3); }
.fconn-arrow { color:var(--ink-4); font-weight:700; font-size:13px; white-space:nowrap; flex-shrink:0; }

/* ── collapsed leg (accordion, non-active) ── */
.fcard--collapsed { padding:10px 12px; margin-top:0; }
.fcard--collapsed .fcard-top { gap:8px; }
.fcard-collapsed-route { font-size:12px; color:var(--ink-3); font-weight:600; line-height:1.2; margin-top:1px; }