/* A · UR2812 — private flight: night navy, signal coral, sky blue */
:root {
  --bg: #0B1426;
  --surface: #111D35;
  --tint: #0E1930;
  --ink: #F3F6FA;
  --ink-2: #A9B6CC;
  --ink-3: #7B8CA8;
  --line: #22314F;
  --line-2: #33456A;
  --accent: #FF5B3A;
  --accent-t: #FF7D60;
  --accent-soft: rgba(255,91,58,.14);
  --sky: #BFD8FF;
  --ok: #6CF0A8;
  --ok-soft: rgba(108,240,168,.12);
  --warn: #FFC861;
  --warn-bg: rgba(255,200,97,.12);
  --btn-bg: #FF5B3A;
  --btn-ink: #0B1426;
  --head-bg: color-mix(in srgb, #0B1426 82%, transparent);
  --track: #22314F;
  --chk: #3A4C72;
  --sea: #0D1A31;
  --land: #1A2A48;
  --grat: #14233F;
  --route: #BFD8FF;
  --final-bg: #FF5B3A;
  --final-ink: #0B1426;
  --final-sub: #3A1A12;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -24px rgba(0,0,0,.6);
  --display-w: 600;
  color-scheme: dark;
}
body { background: radial-gradient(1200px 700px at 85% -10%, #1C3462 0%, transparent 60%) no-repeat, var(--bg); }
.sec--tint { background: linear-gradient(180deg, #0E1A31, #0B1426); }
.sec__title { letter-spacing: -.05em; }
.nav a:hover, .nav a.is-active { background: rgba(255,255,255,.06); }
.btn--ghost { border-color: var(--line-2); }
.map__canvas .apt circle { stroke: var(--sky); fill: var(--bg); }
.map__canvas .plane path { filter: drop-shadow(0 0 6px rgba(255,91,58,.7)); }
.map__canvas .route-done { filter: drop-shadow(0 0 4px rgba(255,91,58,.6)); }
.foot__sig { font: 600 clamp(28px, 4vw, 48px) var(--sans); letter-spacing: -.04em; color: var(--ink); }
.foot__code { margin: 0 0 18px; font-size: 12px; letter-spacing: .2em; color: var(--accent-t); }

/* ---------- hero: departures board ---------- */
.hero { padding: clamp(36px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); }
.hero__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.hero__bar .eyebrow { color: var(--sky); }
.hero__code { font-size: 13px; letter-spacing: .2em; color: var(--accent-t); }
.flaps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(3px, .6vw, 8px); margin-top: clamp(28px, 5vw, 56px); perspective: 600px; container-type: inline-size; }
.flap { aspect-ratio: .74; border-radius: clamp(4px, .7vw, 10px); position: relative; display: grid; place-items: center;
  background: linear-gradient(#1C2D4E 0 49.6%, #121F3A 50.4%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 20px -10px rgba(0,0,0,.7);
  font: 600 6.4cqi/1 var(--mono); color: var(--ink); overflow: hidden; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #050B16; }
.flap--arrow { background: none; box-shadow: none; color: var(--accent); }
.flap--arrow::after, .flap--arrow::before { display: none; }
.flap.is-flip span { animation: flip .07s linear; }
@keyframes flip { 0% { transform: rotateX(-80deg); opacity: .4; } 100% { transform: none; opacity: 1; } }

.hero__rows { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: clamp(28px, 5vw, 48px) 0 0; border-top: 1px solid var(--line); }
.hero__rows div { padding: 16px 16px 0 0; }
.hero__rows dt { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hero__rows dd { margin: 8px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.hero__rows .pill { padding: 6px 12px; font-size: 14px; background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.hero__rows .pill .dot { background: var(--ok); }
.hero__rows .pill.is-live { background: var(--accent-soft); color: var(--accent-t); }
.hero__ttl { margin: clamp(36px, 6vw, 64px) 0 14px; color: var(--sky); }
@media (max-width: 760px) { .hero__rows { grid-template-columns: 1fr 1fr; } .hero__rows div { padding-bottom: 6px; } }

.count { max-width: 980px; gap: 12px; }
.count__cell { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.count__in { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.count__in::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: rgba(0,0,0,.45); }
.count__l { order: 2; color: var(--ink-3); }
.count__n { order: 1; font: 500 clamp(40px, 7.8vw, 100px)/1 var(--mono); letter-spacing: -.04em; }
.count__v { display: none; }
.c4 .count__n { color: var(--accent); }
@media (max-width: 560px) {
  .count { gap: 6px; }
  .count__in { padding: 14px 8px 12px; text-align: center; }
  .count__l { font-size: 9.5px; letter-spacing: .08em; }
}

/* ---------- boarding pass ---------- */
.pass { border-color: var(--line); background: linear-gradient(160deg, #15244A, #0F1B33 60%); }
.pass__stub { background: #F6F7F9; color: #0B1426; border-left-color: #0B1426; }
.pass__stub::before, .pass__stub::after { border-color: var(--line); }
.pass__stub .pass__note { color: #4A5873; }
.pass__stub .status { background: #E6EAF1; color: #0B1426; }
.pass__stub .status--live { background: #FFE6DF; color: #B8321A; }
.pass__stub .status--done { background: #DDF6E8; color: #116A3D; }
.pass__stub .status--soon { background: #FFF1D6; color: #7A5200; }
.pass__stub .pass__prog { background: #E2E6EE; }
.pass__stub .btn--ghost { color: #0B1426; border-color: #CBD3E1; }
.pass__stub .btn--ghost:hover { background: #fff; }
.pass__bar { display: block; height: 58px; background: repeating-linear-gradient(90deg, #0B1426 0 2px, transparent 2px 4px, #0B1426 4px 5px, transparent 5px 8px, #0B1426 8px 11px, transparent 11px 12px, #0B1426 12px 13px, transparent 13px 17px); border-radius: 2px; }
.pass__code { font-weight: 600; }
.pass__plane { background: transparent; filter: drop-shadow(0 0 6px rgba(255,91,58,.6)); }
.pass__airline { color: var(--sky); }
@media (max-width: 860px) { .pass__stub { border-top-color: #0B1426; } }

/* ---------- misc ---------- */
.city__name { color: var(--sky); }
.city__time { font-family: var(--mono); font-weight: 400; letter-spacing: -.06em; }
.steps li.is-final h3 { color: #0B1426; }
.day__num { font-family: var(--mono); font-weight: 500; letter-spacing: -.06em; }
.day__mon { font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.day.is-hl .day__title::after { content: "●"; font-size: 10px; }
.item.is-tbc { border-color: var(--line-2); }
.fx__input--out { background: var(--tint); }
.fx__input input, .fx__input output { font-family: var(--mono); font-weight: 400; }