/* Generated from src/styles.css by scripts/extract-help.js. Do not edit.
 *
 * The canonical flight-status chip, copied out of the app stylesheet so the
 * help page's Status Badges table renders the SAME badge the app draws. Edit
 * the sentinel-delimited block in src/styles.css and regenerate with
 * `node scripts/extract-help.js`.
 *
 * The app themes by stamping a .theme-light class; these docs theme by
 * prefers-color-scheme. Only the token VALUES below bridge that difference —
 * the rules themselves are verbatim.
 */

:root {
  --ui-font-scale: 1;
  --status-on-time: #4ade80;
  --status-delayed: #fb923c;
  --status-cancelled: #f87171;
  --status-diverted: #dc2626;
  --status-departing: #38bdf8;
  --status-on-time-bg: rgba(74, 222, 128, 0.18);
  --status-delayed-bg: rgba(251, 146, 60, 0.18);
  --status-cancelled-bg: rgba(244, 67, 54, 0.18);
  --status-diverted-bg: rgba(220, 38, 38, 0.22);
  --status-departing-bg: rgba(56, 189, 248, 0.18);
  --status-neutral-bg: rgba(255, 255, 255, 0.10);
  --status-neutral-fg: rgba(255, 255, 255, 0.72);
  --status-predicted-fg: #241300;
  --md-shape-full: 9999px;
  --md-typescale-label-small: 500 calc(13px * var(--ui-font-scale))/calc(17px * var(--ui-font-scale)) 'Outfit', sans-serif;
  --md-font-grade-emphasized: 'GRAD' 50;
}

@media (prefers-color-scheme: light) {
  :root {
    --status-on-time: #15803d;
    --status-delayed: #c2410c;
    --status-cancelled: #b91c1c;
    --status-diverted: #991b1b;
    --status-departing: #0369a1;
    --status-predicted-fg: #ffffff;
    --status-neutral-bg: rgba(0, 0, 0, 0.07);
    --status-neutral-fg: rgba(0, 0, 0, 0.62);
  }
}

.flight-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: var(--md-shape-full);
  font: var(--md-typescale-label-small);
  font-weight: 600;
  font-variation-settings: var(--md-font-grade-emphasized);
  letter-spacing: 0.04em;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
  white-space: nowrap;
  margin-left: 8px;
}
.flight-status-chip.tone-on-time   { background: var(--status-on-time-bg);   color: var(--status-on-time); }
.flight-status-chip.tone-delayed   { background: var(--status-delayed-bg);   color: var(--status-delayed); }
.flight-status-chip.tone-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); }
/* Diverted gets its own dark-red tone (owner request): a real disruption,
   flagged as seriously as CANCELLED but visually distinct from it — the
   trip DID fly, it just didn't reach its filed destination. */
.flight-status-chip.tone-diverted  { background: var(--status-diverted-bg);  color: var(--status-diverted); }
.flight-status-chip.tone-departing { background: var(--status-departing-bg); color: var(--status-departing); }
/* The two tones that report nothing carry no colour — see --status-neutral-bg.
   They must not ride the surface ladder: it is accent-tinted, and a tinted
   "Scheduled" competes with the palette above, which is the only thing on a
   flight row that is allowed to mean something by being coloured. */
.flight-status-chip.tone-scheduled { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.flight-status-chip.tone-past      { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* "Delay Likely" chip (issue #261) — rides ALONGSIDE the regular status
   chip when our worst-case prediction runs later than the officially-stated
   delay. Distinct gradient so it reads as our own call, not a provider status. */
.flight-status-chip.flight-predicted-chip {
  background: linear-gradient(135deg, #f0a32d 0%, #ef5350 100%);
  /* DARK theme keeps near-black text (--status-predicted-fg): on a dark card the
     amber→red plate is the brightest thing in the row, so dark-on-warm reads as
     the intended "warning placard" (and holds ≥4.5:1 across the whole gradient).
     LIGHT theme flips the token to white (issue #621). Measured, white is the
     weaker contrast pair — ~3.5:1 on the red end and ~2.1:1 on the amber end,
     below the 4.5:1 small-text floor the near-black clears — but it is a
     deliberate product decision: against a white card the dark-on-amber chip
     read as a muted sticker rather than an alert, and white-on-gradient is what
     makes it pop. Recorded here so the next reader knows the trade-off was
     chosen, not overlooked. The chip's `title` (and the predicted times it sits
     beside) carry the same meaning for anyone the chip itself doesn't reach. */
  color: var(--status-predicted-fg);
  border: none;
  text-transform: uppercase;
}
.flight-status-chip.flight-predicted-chip::before {
  content: '✦';
  font-size: 0.75em;
  margin-right: 4px;
  vertical-align: 0.1em;
}

/* Help docs' Status Badges table (help.html #flights-status-badges), whose
   cells carry real chip markup. Inside the sentinels so the marketing page
   inherits these too; deliberately unscoped, since `.badge-table td .chip`
   already outranks the `.flight-status-chip` margin below without needing the
   in-app `.help-content-host` prefix. Layout only — never restyle the chip
   here, or the table stops showing what a flight row actually draws. */
.badge-table td {
  vertical-align: top;
}
.badge-table td .flight-status-chip {
  /* Drop the inline margin-left (meant for a chip trailing text in a row) and
     space the two-tone pairs — EN ROUTE, ARRIVED — instead. */
  margin: 2px 4px 2px 0;
}