/* Sky Power TV: dark broadcast look. Designed at 1920x1080; every size is in --u (1 design px) so it scales to 4K. */
:root {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --ink: #05070a;
  --ink-rgb: 5, 7, 10;
  --panel: rgba(9, 13, 19, .80);
  --panel-solid: #0b1017;
  --line: rgba(255, 255, 255, .14);
  --text: #f4f2ec;
  --muted: #b9c0c9;
  --dim: #8a939e;
  --accent: #ffb238;
  --live: #ff3b47;
  --demo: #ffb238;
  --runway: #f2efe7;
  --taxiway: #7fd3e0;
  --glyph-fill: #ffffff;
  --sans: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, monospace;
  --map-h: 78vh;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); cursor: none; }
html.cursor-active, html.cursor-active body { cursor: default; }
body { font-family: var(--sans); color: var(--text); user-select: none; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.replay-banner { position:absolute; top:calc(108 * var(--u)); left:0; right:0; z-index:25; padding:calc(18 * var(--u)) calc(40 * var(--u)); background:#101d30ed; border-block:1px solid #ffb238; font-size:calc(28 * var(--u)); font-weight:700; }
.replay-clock { position:absolute; top:calc(195 * var(--u)); right:calc(28 * var(--u)); z-index:25; background:#05070ae8; padding:calc(12 * var(--u)); color:#ffcc75; font:600 calc(24 * var(--u)) var(--mono); }
.jukebox-request { position:absolute; left:36%; right:0; top:0; bottom:0; z-index:30; background:#0e1b2e; display:flex; align-items:center; justify-content:space-around; gap:calc(26 * var(--u)); padding:calc(24 * var(--u)); }
.jukebox-copy { display:flex; flex-direction:column; gap:calc(12 * var(--u)); font-size:calc(29 * var(--u)); }
.jukebox-copy span { color:#ffcc75; font-size:calc(25 * var(--u)); }
.jukebox-request img { height:calc(165 * var(--u)); width:calc(165 * var(--u)); background:white; }
.station-qr-dock { position:absolute; z-index:29; right:calc(16 * var(--u)); top:calc(16 * var(--u)); bottom:calc(16 * var(--u)); width:calc(165 * var(--u)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(8 * var(--u)); background:#0e1b2e; }
.station-qr-dock img { width:calc(145 * var(--u)); height:calc(145 * var(--u)); }
.station-qr-dock small { font-size:calc(15 * var(--u)); text-align:center; color:#ffcc75; }
.station-dock-visible #ads { margin-right:calc(190 * var(--u)); }
.replaying #callouts, .replaying #leaders, .replaying #board, .replaying #scene-title, .replaying #quiet { visibility:hidden; }
.hour-replaying #quiet, .hour-replaying #board { visibility:hidden; }
.hour-chip, .hour-clock { position:absolute; top:calc(112 * var(--u)); z-index:24; border-radius:calc(8 * var(--u)); padding:calc(10 * var(--u)) calc(18 * var(--u)); color:#ffcc75; font:600 calc(22 * var(--u)) var(--mono); }
.hour-chip { left:calc(36 * var(--u)); }
.hour-clock { right:calc(36 * var(--u)); }
.hour-progress { position:absolute; left:0; bottom:0; height:calc(4 * var(--u)); z-index:25; background:var(--accent); box-shadow:0 0 calc(12 * var(--u)) #ffb23880; }
/* Web fast-forward replay: big honest badge, replay clock, slow-motion cue, live-arrival chip, quick fade back to live. */
.hour-chip.ff, .hour-clock.ff { top:calc(104 * var(--u)); font-size:calc(30 * var(--u)); padding:calc(12 * var(--u)) calc(24 * var(--u)); background:#120c03e6; border:calc(2 * var(--u)) solid #ffb238; color:#ffd27a; letter-spacing:.04em; }
.hour-chip.ff::before { content:""; display:inline-block; width:calc(14 * var(--u)); height:calc(14 * var(--u)); margin-right:calc(12 * var(--u)); border-radius:50%; background:#ff5a3c; vertical-align:middle; box-shadow:0 0 calc(10 * var(--u)) #ff5a3c; }
.hour-chip.ff.slow { border-color:#7fd7ff; color:#d8f3ff; }
.hour-clock.ff::before { content:"REPLAY TIME "; font-size:calc(18 * var(--u)); color:#ffb238; letter-spacing:.08em; margin-right:calc(8 * var(--u)); }
.ff-live-chip { position:absolute; top:calc(176 * var(--u)); left:calc(36 * var(--u)); z-index:26; padding:calc(8 * var(--u)) calc(16 * var(--u)); border-radius:calc(8 * var(--u)); border:calc(2 * var(--u)) solid #6fe39b; color:#c8ffd9; font:600 calc(20 * var(--u)) var(--mono); }
.ff-curtain { position:absolute; inset:0; z-index:40; background:#000; opacity:0; pointer-events:none; }
.ff-curtain.on { animation:ff-dip .85s ease-in-out; }
@keyframes ff-dip { 0% { opacity:0; } 35% { opacity:.92; } 100% { opacity:0; } }
/* Live tiles stay readable (a live arrival matters) but step back while the replay is on screen. */
.ff-replaying .happening-strip { opacity:.55; filter:saturate(.6); transition:opacity .4s; }
.ff-replaying #callouts, .ff-replaying #leaders, .ff-replaying #aircraft-photo, .ff-replaying #traffic-mini-map, .ff-replaying .field-pin { visibility:hidden; }
#chase-panel { position:absolute; z-index:24; left:calc(36 * var(--u)); top:calc(112 * var(--u)); width:calc(420 * var(--u)); padding:calc(12 * var(--u)) calc(16 * var(--u)); border-radius:calc(12 * var(--u)); border-left:calc(3 * var(--u)) solid var(--accent); pointer-events:none; }
/* Web (tv-chase.js): border all round in the aircraft's locked colour, white without one. */
#chase-panel.chase-ring { border:calc(3 * var(--u)) solid var(--chase-c, #ffffff); }
#chase-panel .chase-line { min-width:0; font-size:calc(19 * var(--u)); line-height:1.25; color:var(--muted); }
#chase-panel .chase-kicker { font-size:calc(15 * var(--u)); letter-spacing:.12em; color:var(--accent); }
#chase-panel .chase-tail { font:700 calc(36 * var(--u))/1.2 var(--mono); color:var(--text); }
#chase-panel .chase-callsign { color:#7cc8ff; }
#chase-panel .chase-type, #chase-panel .chase-route { color:var(--text); font-weight:600; margin-top:calc(6 * var(--u)); }
#chase-panel .chase-about { margin-top:calc(10 * var(--u)); padding-top:calc(8 * var(--u)); border-top:1px solid var(--line); }
.replaying #chase-panel { top:calc(204 * var(--u)); }
.chase-details #scene-name { font-size:calc(27 * var(--u)); max-width:calc(1700 * var(--u)); }

/* ---------- map (top 78%) ---------- */
#map { position: absolute; left: 0; top: 0; width: 100%; height: var(--map-h); overflow: hidden; background: var(--ink); }
#globe { position: absolute; inset: 0; }
#globe .cesium-viewer, #globe .cesium-widget, #globe canvas { width: 100%; height: 100%; }
.cesium-viewer-bottom, .cesium-widget-credits { display: none !important; }
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), .70) 0, rgba(var(--ink-rgb), 0) calc(190 * var(--u))),
    linear-gradient(0deg, rgba(var(--ink-rgb), .78) 0, rgba(var(--ink-rgb), 0) calc(170 * var(--u))),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%);
}
#leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
#leaders line { stroke: rgba(255, 255, 255, .85); stroke-width: calc(2 * var(--u)); }
#leaders circle { fill: #fff; }
#callouts { position: absolute; inset: 0; z-index: 9; pointer-events: none; }

.callout {
  position: absolute; left: 0; top: 0; will-change: transform, opacity; opacity: 0; transition: opacity .6s ease;
  padding: calc(9 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  background: rgba(8, 11, 16, .84); border-left: calc(6 * var(--u)) solid var(--alt, #fff);
  border-radius: calc(6 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .55);
  white-space: nowrap; line-height: 1.18;
}
.callout.on { opacity: 1; }
.callout .l1 { font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: .01em; }
.callout .l1 .cs { font-size: calc(22 * var(--u)); font-weight: 600; color: var(--muted); margin-left: calc(10 * var(--u)); }
.callout .l2 { font-size: calc(22 * var(--u)); color: #e7e9ec; }
.callout .l2 .code { font-family: var(--mono); color: var(--accent); }
.callout .l3 { font-size: calc(22 * var(--u)); color: #e7e9ec; }
.callout .l4 { font-family: var(--mono); font-size: calc(22 * var(--u)); color: var(--alt, #fff); margin-top: calc(2 * var(--u)); }
.callout.chase { border-left-width: calc(9 * var(--u)); background: rgba(8, 11, 16, .9); }
.callout.chase .l1 { font-size: calc(32 * var(--u)); }
.callout.web-calm { box-sizing: border-box; width: calc(560 * var(--u)); max-width: calc(560 * var(--u)); }
.callout.web-calm .l2, .callout.web-calm .l3 { white-space: normal; overflow-wrap: anywhere; }
/* Data line stays one line: tv-callouts drops hdg, then vertical rate, when it overflows. */
.callout.web-calm .l4 { white-space: nowrap; overflow: hidden; }
.callout.web-calm .l1 { white-space: normal; overflow-wrap: anywhere; }

.field-pin {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .8s ease;
  display: flex; flex-direction: column; align-items: center;
}
.field-pin.on { opacity: 1; }
.field-pin .tag {
  padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(6 * var(--u));
  background: rgba(8, 11, 16, .82); border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; text-align: center;
}
.field-pin .tag b { font-family: var(--mono); font-size: calc(30 * var(--u)); letter-spacing: .06em; color: var(--accent); }
.field-pin .tag span { display: block; font-size: calc(22 * var(--u)); color: var(--muted); }
.field-pin .pole { width: calc(2 * var(--u)); height: calc(70 * var(--u)); background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)); }

#scene-title {
  position: absolute; z-index: 10; left: calc(40 * var(--u)); bottom: calc(26 * var(--u));
  padding-left: calc(18 * var(--u)); border-left: calc(5 * var(--u)) solid var(--accent);
  transition: opacity .8s ease;
}
#scene-title .kicker { font-size: calc(22 * var(--u)); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
#scene-title .title { font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: .01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
#scene-title.swap { opacity: 0; }

#credits {
  position: absolute; z-index: 10; right: calc(24 * var(--u)); bottom: calc(12 * var(--u)); max-width: 55%; text-align: right;
}
#credits, #credits * { font-size: calc(20 * var(--u)) !important; color: rgba(236, 236, 230, .78) !important; text-decoration: none !important; }
#credits .cesium-credit-lightbox-overlay, .cesium-credit-logoContainer, .cesium-credit-expand-link { display: none !important; }

.glass {
  background: rgba(8, 12, 18, .74); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px) saturate(1.1); box-shadow: 0 calc(12 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .5);
}
#quiet {
  position: absolute; z-index: 10; left: 50%; bottom: calc(40 * var(--u)); transform: translateX(-50%);
  padding: calc(14 * var(--u)) calc(30 * var(--u)); border-radius: 999px; text-align: center; white-space: nowrap;
  font-size: calc(28 * var(--u)); font-weight: 600; transition: opacity 1s ease;
}
#quiet small { display: block; font-size: calc(22 * var(--u)); font-weight: 400; color: var(--muted); }

/* ---------- arrivals board (scene 3) ---------- */
#board {
  position: absolute; z-index: 11; right: calc(36 * var(--u)); top: calc(118 * var(--u)); width: calc(700 * var(--u));
  border-radius: calc(14 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));
  transition: opacity .9s ease, transform .9s ease;
}
#board.hide { opacity: 0; transform: translateX(calc(40 * var(--u))); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: calc(10 * var(--u)); border-bottom: 2px solid var(--accent); }
.board-title { font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: .02em; }
.board-sub { font-size: calc(22 * var(--u)); color: var(--muted); }
.board-row {
  display: grid; grid-template-columns: calc(46 * var(--u)) 1fr auto; column-gap: calc(14 * var(--u)); align-items: center;
  padding: calc(11 * var(--u)) 0; border-bottom: 1px solid var(--line);
}
.board-row:last-child { border-bottom: 0; }
.board-row .dir { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(24 * var(--u)); font-weight: 700; color: var(--ink); background: var(--alt, #fff); }
.board-row .who { min-width: 0; }
.board-row .tail { font-family: var(--mono); font-size: calc(28 * var(--u)); font-weight: 700; }
.board-row .tail .rt { font-family: var(--sans); font-weight: 600; font-size: calc(24 * var(--u)); color: var(--text); margin-left: calc(12 * var(--u)); }
.board-row .tname { font-size: calc(22 * var(--u)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .what { text-align: right; }
.board-row .ph { font-size: calc(24 * var(--u)); font-weight: 600; }
.board-row .alt { font-family: var(--mono); font-size: calc(22 * var(--u)); color: var(--alt, var(--muted)); }
.board-empty { padding: calc(22 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(26 * var(--u)); color: var(--muted); }

/* ---------- top strip ---------- */
#topbar {
  position: absolute; z-index: 20; left: 0; top: 0; width: 100%; height: calc(92 * var(--u));
  /* Grid, not flex: fixed blocks on the left, the METAR flexes (and ellipsizes), the clock has a reserved column. */
  display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr) calc(250 * var(--u)); align-items: center;
  column-gap: calc(22 * var(--u)); padding: 0 calc(40 * var(--u));
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .94) 0%, rgba(var(--ink-rgb), .82) 72%, rgba(var(--ink-rgb), 0) 100%);
}
#topbar > * { white-space: nowrap; min-width: 0; }
.brand { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.brand-mark { width: calc(30 * var(--u)); height: calc(30 * var(--u)); fill: var(--accent); }
.brand .word { font-size: calc(22 * var(--u)); font-weight: 600; letter-spacing: .16em; color: var(--muted); }
.brand .word b { color: var(--text); font-weight: 800; }
.divider { width: 1px; height: calc(46 * var(--u)); background: rgba(255, 255, 255, .22); }
.airport { display: flex; align-items: center; gap: calc(16 * var(--u)); }
#icao { font-family: var(--mono); font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: .06em; }
.apname { display: flex; flex-direction: column; line-height: 1.12; }
#apname { font-size: calc(26 * var(--u)); font-weight: 600; }
#apcity { font-size: calc(22 * var(--u)); color: var(--muted); }
#mode { display: flex; align-items: center; justify-self: start; gap: calc(10 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: .14em; margin-left: calc(8 * var(--u)); }
#mode.live .dot { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--live); box-shadow: 0 0 calc(12 * var(--u)) var(--live); animation: pulse 2s ease-in-out infinite; }
#mode.live { color: #ffd9db; }
#mode.replay { color: var(--demo); }
#mode.demo { color: var(--ink); background: var(--demo); padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(6 * var(--u)); }
#mode.stale { color: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* The METAR fills exactly its grid track (never wider); text inside ellipsizes. */
#wx { display: flex; align-items: center; justify-content: flex-end; gap: calc(14 * var(--u)); overflow: hidden; }
#wx .cat { flex: none; font-family: var(--mono); font-size: calc(22 * var(--u)); font-weight: 700; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(5 * var(--u)); color: var(--ink); }
#wx .cat.VFR { background: #3ddc84; } #wx .cat.MVFR { background: #4aa3ff; } #wx .cat.IFR { background: #ff5252; } #wx .cat.LIFR { background: #e056fd; }
#wx .facts { flex: 0 1 auto; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
#wx .main, #wx .raw { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wx .main { font-family: var(--mono); font-size: calc(24 * var(--u)); }
#wx .raw { font-family: var(--mono); font-size: calc(22 * var(--u)); color: var(--dim); max-width: calc(560 * var(--u)); }
/* Reserved column: "12:47 PM" in the mono face plus padding always fits, so the clock never grows into the METAR. */
#clock {
  width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
  padding-left: calc(22 * var(--u)); border-left: 1px solid rgba(255, 255, 255, .22);
}
#clock .time { font-family: var(--mono); font-size: calc(38 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
#clock .date { font-size: calc(22 * var(--u)); color: var(--muted); }

/* ---------- advertising band (bottom 22%) ---------- */
#adband {
  position: absolute; z-index: 20; left: 0; bottom: 0; width: 100%; height: calc(100vh - var(--map-h));
  display: flex; background: linear-gradient(180deg, #0d121a 0%, #070a0f 100%);
  border-top: calc(3 * var(--u)) solid transparent; border-image: linear-gradient(90deg, var(--host, #e0892f), var(--ad, #2f80ed)) 1;
}
#host {
  position: relative; width: calc(760 * var(--u)); flex: none; overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--host, #e0892f) 24%, transparent) 0%, rgba(0, 0, 0, 0) 85%);
  border-right: 1px solid var(--line);
}
/* Host card and (optional) airport-info card share the panel and crossfade. */
.hostcard {
  position: absolute; inset: 0; padding: calc(20 * var(--u)) calc(34 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u));
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  opacity: 0; transition: opacity .9s ease;
}
.hostcard.on { opacity: 1; }
.kick { font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
#host .kick { color: var(--host); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#host .row { display: flex; align-items: center; gap: calc(20 * var(--u)); min-width: 0; }
#host .row .text { min-width: 0; }
.mono-badge {
  flex: none; display: grid; place-items: center; font-weight: 800; color: #10141a; letter-spacing: .02em;
  box-shadow: inset 0 0 0 calc(3 * var(--u)) rgba(255, 255, 255, .25), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .45);
}
#host .mono-badge { width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: 50%; font-size: calc(38 * var(--u)); background: var(--host); color: var(--host-ink, #10141a); }
#host .name { font-size: calc(42 * var(--u)); font-weight: 800; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#host .welcome { font-size: calc(24 * var(--u)); color: #dfe3e8; line-height: 1.2; margin-top: calc(4 * var(--u)); }
#host .highlight { font-size: calc(28 * var(--u)); font-weight: 600; color: #fff; transition: opacity .7s ease; min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#host .highlight::before { content: "\2605"; color: var(--host); margin-right: calc(12 * var(--u)); }
#host .highlight.fade { opacity: 0; }
#host .details { font-size: calc(22 * var(--u)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#host .details b { color: #fff; font-weight: 600; }
#host .info .kick { color: #7cc8ff; }
#host .info .title { font-size: calc(36 * var(--u)); font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#host .info .facts { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
#host .info .fact { font-size: calc(24 * var(--u)); line-height: 1.2; color: #dfe3e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#host .info .fact::before { content: ""; display: inline-block; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin: 0 calc(12 * var(--u)) calc(3 * var(--u)) 0; border-radius: 2px; background: #7cc8ff; }

#ads { position: relative; flex: 1; min-width: 0; overflow: hidden; }
/* Web national slot covers only the footer, including host/action column. */
.national-ad {position:absolute;inset:0;z-index:50;display:flex;align-items:center;gap:calc(32 * var(--u));padding:calc(20 * var(--u));background:#101e32;opacity:0;transition:opacity .9s;pointer-events:none}
.national-ad.on {opacity:1}
.national-active #host .action-tiles,.national-active #host>.action-row {position:relative;z-index:51;background:#101e32}
.witness-mode .national-ad {display:none!important}
.national-copy {flex:1;min-width:0}
.national-copy .headline {font-size:calc(42 * var(--u));font-weight:800}
.national-copy .sub {font-size:calc(26 * var(--u))}
.national-copy .sample {font-size:calc(18 * var(--u));color:var(--dim);margin-top:calc(6 * var(--u))}
.national-ad>img,.national-ad>video {height:100%;max-width:35%;object-fit:contain}
.national-ad .visit-qr {flex-shrink:0}
.web-bottom-qr .national-ad {padding-right:calc(180 * var(--u))}
.web-phone.web-bottom-qr .national-ad {padding-right:17vw}
.events-ad .event-row {font-size:calc(21 * var(--u));line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ad-stack { position: absolute; inset: 0; }
/* Visit QR replaces the badge on the left; only the station QR occupies the right column. */
.ad {
  position: absolute; inset: 0; display: grid; grid-template-columns: calc(116 * var(--u)) minmax(0, 1fr) calc(132 * var(--u)); grid-template-rows: minmax(0, 1fr);
  column-gap: calc(16 * var(--u)); align-items: center;
  padding: calc(12 * var(--u)) calc(36 * var(--u)) calc(26 * var(--u)) calc(32 * var(--u));
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 30%, transparent) 0%, color-mix(in srgb, var(--c) 8%, transparent) 55%, rgba(0, 0, 0, 0) 100%);
  opacity: 0; transform: translateY(calc(24 * var(--u))); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.ad.on { opacity: 1; transform: none; }
.ad.off { opacity: 0; transform: translateY(calc(-18 * var(--u))); }
/* Web: sequential crossfade. The outgoing slide is gone (.3 s) before the incoming one starts (.35 s delay),
   so two partners' copy is never legible on top of each other. */
.web-bottom-qr #ad-stack .ad { transition: opacity .45s ease .35s, transform .45s cubic-bezier(.2, .7, .2, 1) .35s; }
.web-bottom-qr #ad-stack .ad:not(.on) { transition: opacity .3s ease, transform .3s ease; }
.ad .mono-badge { width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: calc(18 * var(--u)); font-size: calc(44 * var(--u)); background: var(--c); color: var(--c-ink, #10141a); }
.ad .body { min-width: 0; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.ad .kick { color: var(--c-text); letter-spacing: .12em; display: flex; gap: calc(14 * var(--u)); align-items: center; white-space: nowrap; line-height: 1.2; min-width: 0; }
.ad .kick .cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ad .kick .n { flex: none; color: var(--muted); letter-spacing: .1em; }
.ad .bizname { font-size: calc(26 * var(--u)); font-weight: 600; color: #e9ecef; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad .headline { font-size: calc(44 * var(--u)); font-weight: 800; line-height: 1.05; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad .sub { font-size: calc(22 * var(--u)); color: #d5dae0; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ad-stack .events-ad .event-row {font-size:calc(19 * var(--u));line-height:1.25}
#ad-stack .events-ad .sub {display:block;white-space:nowrap;text-overflow:ellipsis;font-size:calc(18 * var(--u))}
.ad .foot { display: flex; align-items: center; gap: calc(18 * var(--u)); min-width: 0; margin-top: calc(2 * var(--u)); }
.ad .cta {
  flex: 0 1 auto; max-width: 60%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.15; color: var(--c-ink, #10141a); background: var(--c);
  padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(6 * var(--u));
}
.ad .contact { flex: 1 1 0; min-width: 0; font-family: var(--mono); font-size: calc(21 * var(--u)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad .side { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.qr-unit { width: calc(116 * var(--u)); flex: none; text-align: center; }
.qr-unit small { display: block; margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.15; overflow-wrap: anywhere; }
.qr-unit .qr {
  flex: none; width: calc(116 * var(--u)); height: calc(116 * var(--u)); border-radius: calc(4 * var(--u)); background: #fff;
  padding: calc(2 * var(--u)); box-sizing: border-box; display: grid; place-items: center;
}
.ad .sample { font-size: calc(18 * var(--u)); line-height: 1.15; color: var(--dim); text-align: center; letter-spacing: .03em; }
#ad-progress { position: absolute; left: calc(36 * var(--u)); right: calc(200 * var(--u)); bottom: calc(14 * var(--u)); height: calc(4 * var(--u)); background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
#ad-bar { height: 100%; width: 0; background: var(--ad, #fff); }
#ad-dots { position: absolute; right: calc(40 * var(--u)); bottom: calc(8 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
#ad-dots i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .5s; }
#ad-dots i.on { background: var(--ad, #fff); }
.qr-unit .qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ad > .mono-badge { justify-self: center; }
/* The host QR spans the card height so it cannot push hours/highlights below the band. */
#host .hostcard.has-visit {
  display: grid; grid-template-columns: calc(116 * var(--u)) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: calc(20 * var(--u));
}
#host .has-visit > * { grid-column: 2; min-width: 0; }
#host .has-visit > .visit-qr { grid-column: 1; grid-row: 1 / -1; align-self: center; }

#help { position: fixed; z-index: 100; top: 14%; left: 30%; padding: 32px 48px; font-size: 26px; line-height: 1.7; }
#notice { position: fixed; z-index: 90; top: 100px; left: 20px; padding: 12px 20px; font-size: 22px; }

/* Reserve height for long venue hours at both 1080p and 4K. All dimensions use the same design scale. */
#host .hostcard:not(.info) { padding-top: calc(14 * var(--u)); padding-bottom: calc(14 * var(--u)); gap: calc(4 * var(--u)); }
#host .hostcard:not(.info) > * { flex-shrink: 0; }
#host .row .mono-badge { width: calc(68 * var(--u)); height: calc(68 * var(--u)); font-size: calc(30 * var(--u)); }
#host .name { font-size: calc(34 * var(--u)); }
#host .welcome { font-size: calc(20 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#host .highlight { font-size: calc(24 * var(--u)); line-height: 1.15; }
#host .details { font-size: calc(20 * var(--u)); line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.3em; overflow: hidden; }
#airport-search { position: fixed; z-index: 110; left: 20%; right: 20%; top: 16%; padding: calc(30 * var(--u)); font-size: calc(26 * var(--u)); }
#airport-search label { display: block; font-weight: 700; }
#airport-query { box-sizing: border-box; width: 100%; margin: calc(18 * var(--u)) 0; padding: calc(14 * var(--u)); font: inherit; background: #101c2a; color: white; border: 2px solid #7cc8ff; }
#airport-results { max-height: 62vh; overflow-y: auto; }
#airport-results > div { padding: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); }
#airport-results .selected { background: #245e89; }
#airport-search small, #airport-results small { display: block; font-size: .75em; color: #b6c7dc; }
#help { left: 24%; top: 10%; font-size: calc(25 * var(--u)); padding: calc(24 * var(--u)) calc(36 * var(--u)); line-height: 1.6; }
.fact-card .specs { font-size: calc(20 * var(--u)); line-height: 1.2; color: #d5dae0; }
.fact-card .fact-note { font-size: calc(15 * var(--u)); color: var(--muted); }
.aircraft-silhouette { width: 100%; height: 100%; fill: #cfeaff; max-height: calc(120 * var(--u)); }
.fact-card .mono-badge { padding: calc(10 * var(--u)); }
.fact-card .kick { color: #7cc8ff; }
.edition-tag { font-size: calc(18 * var(--u)); color: #7cc8ff; font-weight: 700; white-space: nowrap; }
.manager-airport .airport-name { font-size: calc(30 * var(--u)); font-weight: 800; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.manager-airport .director { font-size: calc(22 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manager-airport .today-counts { font-size: calc(21 * var(--u)); }
.manager-airport .count-note { font-size: calc(17 * var(--u)); color: var(--muted); }
.manager-card { position: absolute; inset: 0; display: grid; grid-template-columns: calc(220 * var(--u)) 1fr 1fr; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)); background: linear-gradient(100deg, #16314b, transparent); overflow: hidden; }
.manager-card > * { min-width: 0; }
.aircraft-visual { display: flex; flex-direction: column; gap: calc(3 * var(--u)); justify-content: center; align-items: center; }
.aircraft-visual img { width: 100%; height: calc(120 * var(--u)); object-fit: contain; }
.photo-credit { font-size: calc(14 * var(--u)); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.photo-link { font-size: calc(11 * var(--u)); line-height: 1.15; overflow-wrap: anywhere; color: #aac9e8; }
.aircraft-visual small { font-size: calc(16 * var(--u)); color: var(--muted); }
.aircraft-identity, .aircraft-live { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.manager-card .kick { font-size: calc(16 * var(--u)); color: #7cc8ff; }
.aircraft-tail { font-size: calc(30 * var(--u)); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aircraft-type { font-size: calc(20 * var(--u)); line-height: 1.15; }
.detail-row { font-size: calc(18 * var(--u)); line-height: 1.2; overflow-wrap: anywhere; }
.noise-panel { font-size: calc(16 * var(--u)); line-height: 1.2; color: #b7c7d8; border-top: 1px solid #35506b; padding-top: calc(6 * var(--u)); }
.manager-empty { grid-column: 1 / -1; place-self: center; font-size: calc(30 * var(--u)); color: var(--muted); }
.manager-edition #host { --host: #7cc8ff; }
.manager-edition #board .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manager-edition #board .board-head { flex-direction: column; align-items: flex-start; }
.manager-edition #board .board-sub { font-size: calc(18 * var(--u)); }
.manager-edition #board .board-row { padding: calc(7 * var(--u)) 0; }
.manager-edition #board .tail { font-size: calc(24 * var(--u)); }
.manager-edition #board .tname, .manager-edition #board .ph, .manager-edition #board .alt { font-size: calc(18 * var(--u)); }
.aircraft-identity { gap: calc(4 * var(--u)); }
.aircraft-identity .aircraft-type { font-size: calc(18 * var(--u)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aircraft-identity .detail-row:nth-last-child(2), .aircraft-identity .detail-row:nth-last-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aircraft-visual img { min-height: 0; }

/* Optional 2048px source wordmark, rendered near 1.6 times the old text cap height. */
.brand-logo { display: block; height: calc(46 * var(--u)); width: auto; max-width: calc(330 * var(--u)); object-fit: contain; }
.brand.has-logo .brand-mark, .brand.has-logo .word { display: none; }
/* Give the airport name a bounded track; its intrinsic width must not push out weather/clock. */
.airport { max-width: calc(490 * var(--u)); }
.apname { min-width: 0; }
#icao { flex: none; }
#host .row .text { flex: 1; }
.ad .kick .cat { flex: 1 1 auto; }

/* The viewport never moves. Only the inner span animates, and only on visible cards. */
:is(#host, #ad-stack, #topbar) .tv-fit-line.tv-fit-line {
  display: block; min-width: 0; max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: clip; -webkit-line-clamp: unset; max-height: none;
}
.tv-line-inner { display: inline-block; vertical-align: top; width: max-content; max-width: none; white-space: nowrap; }
/* Static footer copy: wrap rather than masking the start/end of a marquee.
   Keep the QR tracks and sample disclosure at their original sizes. */
#adband .tv-footer-copy.tv-footer-copy,
#adband .ad:not(.fact-card):not(.manager-card) .sub.tv-paragraph {
  display: block; white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; -webkit-line-clamp: unset; max-height: none;
}
#host .tv-footer-copy.name { font-size: calc(28 * var(--u)); }
#host .tv-footer-copy.welcome,
#host .tv-footer-copy.details { font-size: calc(18 * var(--u)); line-height: 1.15; }
#host .tv-footer-copy.highlight { font-size: calc(20 * var(--u)); }
#host .tv-footer-copy.fact { font-size: calc(20 * var(--u)); }
.ad .tv-footer-copy.cat { font-size: calc(18 * var(--u)); letter-spacing: .06em; }
.ad .tv-footer-copy.bizname { font-size: calc(22 * var(--u)); }
.ad .tv-footer-copy.headline { font-size: calc(28 * var(--u)); }
.ad .sub.tv-paragraph { font-size: calc(18 * var(--u)); }
.ad .tv-footer-copy.cta { font-size: calc(18 * var(--u)); }
.ad .tv-footer-copy.contact { font-size: calc(17 * var(--u)); }
/* Reserve the counter's full glyph height inside the clipped body. Category
   copy wraps in the remaining flex track without taking the counter's slot. */
.ad:not(.fact-card):not(.manager-card) .kick { flex-shrink: 0; line-height: 1.5; }
/* The disclosure is fixed copy, not a clamped paragraph. Reserve two readable
   lines below the station QR, including font ascenders and descenders. */
#ad-stack .ad .sample.tv-paragraph {
  flex: none; min-height: 3em; line-height: 1.5;
  display: block; overflow: visible; -webkit-line-clamp: unset;
}
.tv-overflow .tv-line-inner { padding-inline: calc(10 * var(--u)); will-change: transform; }
.tv-overflow {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(10 * var(--u)), #000 calc(100% - 10 * var(--u)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 calc(10 * var(--u)), #000 calc(100% - 10 * var(--u)), transparent);
}
/* Decorations travel with their line and are included in the measured width. */
#host .highlight.tv-fit-line::before, #host .info .fact.tv-fit-line::before { content: none; }
#host .highlight.tv-fit-line > .tv-line-inner::before { content: "\2605"; color: var(--host); margin-right: calc(12 * var(--u)); }
#host .info .fact.tv-fit-line > .tv-line-inner::before {
  content: ""; display: inline-block; width: calc(9 * var(--u)); height: calc(9 * var(--u));
  margin: 0 calc(12 * var(--u)) calc(3 * var(--u)) 0; border-radius: 2px; background: #7cc8ff;
}
:is(#host, #ad-stack) .tv-paragraph.tv-paragraph {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; overflow-wrap: normal; word-break: normal; max-height: none;
}
/* Reduced-motion fallback: only when tv-text.js opts in (venue.json respectReducedMotion). */
@media all {
  :is(#host, #ad-stack, #topbar) .tv-reduced-line.tv-reduced-line {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;
  }
  .tv-reduced-line > .tv-line-inner { display: inline; width: auto; white-space: normal; padding: 0; transform: none !important; }
  .tv-reduced-line.tv-overflow { -webkit-mask-image: none; mask-image: none; }
}

.mono-badge.house-badge { background: none; padding: 0; overflow: hidden; }
/* Grid items must shrink below their intrinsic (or broken-image alt-text) size. */
.mono-badge.house-badge img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; display: block; border-radius: inherit; }
#host .highlight[hidden] { display: none !important; }
#host .mono-badge.host-logo { background: #fff; border-radius: calc(12 * var(--u)); padding: calc(8 * var(--u)); box-sizing: border-box; }
#host .mono-badge.host-logo.wide { width: calc(140 * var(--u)); }
#host .host-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Light-on-transparent logos (tv-chrome logoTone) need a dark tile to stay legible. */
#host .mono-badge.host-logo.on-dark { background: #0d1622; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.16); }
#exit-chips { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.exit-chip { position: absolute; width: max-content; max-width: calc(470 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.3; color: #edf1f7; overflow-wrap: anywhere; transition: opacity .4s; }

/* Baked video uses exactly the canvas rect; chrome/vignette remain live above both. */
#baked { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; transform-origin:0 0; opacity:0; pointer-events:none; }
#globe .cesium-widget { background:transparent; }

/* Explicit opt-in isolated film layout only; normal host/airport/ad rotation is unchanged. */
.film-compact { --map-h: calc(100vh - 130 * var(--u)); }
.film-compact #ads { display:none; }
.film-compact #host { width:100%; border:0; }
.film-host-row { height:100%; display:flex; align-items:center; justify-content:space-between; gap:calc(28 * var(--u)); padding:calc(10 * var(--u)) calc(36 * var(--u)); }
.film-host-name { font-size:calc(34 * var(--u)); font-weight:600; }
.film-status { font-size:calc(23 * var(--u)); color:#dfe3e8; }
.film-qr { width:calc(108 * var(--u)); height:calc(108 * var(--u)); padding:calc(5 * var(--u)); background:white; flex:none; }
.film-qr img { width:100%; height:100%; }

/* The supplied container contains an absolutely positioned Cesium wrapper. Give it
   real width and reset that wrapper so required custom-provider credits remain visible.
   Built-in duplicate logos/lightbox links remain suppressed by the separate rule above. */
#credits { width:55%; }
#credits > .cesium-widget-credits { display:block !important; position:static; width:auto; }

/* Leave the required provider attribution clear of the optional replay launcher. */
#map .school-replay-launcher { bottom:calc(72 * var(--u)); }

#station-fleet-strip{position:absolute;left:calc(24 * var(--u));top:calc(120 * var(--u));max-width:calc(390 * var(--u));padding:calc(12 * var(--u));background:#071421e8;border:1px solid #406078;border-radius:calc(8 * var(--u));color:#eef6ff;pointer-events:none;z-index:15;font-size:calc(20 * var(--u));line-height:1.4}
#station-fleet-strip[hidden]{display:none}.fleet-strip-title{font-weight:700;color:#8adcf4}.fleet-strip-note{font-size:.8em;color:#b5c4d2;max-width:24em}
/* Reuse the strip keep-out rectangle. Bound the board above the footer/QR band. */
#station-fleet-strip.station-status-board{box-sizing:border-box;width:calc(450 * var(--u));max-width:calc(450 * var(--u));max-height:calc(var(--map-h) - 145 * var(--u));overflow:auto;font-size:calc(18 * var(--u))}
.station-status-board .fleet-strip-row{padding:calc(5 * var(--u)) 0;overflow-wrap:anywhere;border-bottom:1px solid #405466}
.station-status-board .status-filed{color:#f3ce8d;border-left:calc(3 * var(--u)) dashed #f3ce8d;padding-left:calc(8 * var(--u))}
.station-status-board .status-observed{color:#a6ead5;border-left:calc(3 * var(--u)) solid #a6ead5;padding-left:calc(8 * var(--u))}

/* Fleet-centric board, independent of the airport local strip. */
#fleet-mode-board { position:absolute; z-index:35; left:calc(24 * var(--u)); top:calc(120 * var(--u)); width:calc(560 * var(--u)); max-height:calc(680 * var(--u)); box-sizing:border-box; padding:calc(16 * var(--u)); background:rgba(8,17,28,.92); border:1px solid #537080; border-radius:calc(10 * var(--u)); color:#eef5fb; font:500 calc(15 * var(--u))/1.4 'Segoe UI',sans-serif; overflow:hidden; }
#fleet-mode-board[hidden] { display:none; }
/* Witness keeps the renderer in the remaining three quarters of the viewport. */
.witness-mode #map { left:25%; width:75%; }
.witness-mode #fleet-mode-board { display:none; }
/* Witness reuses the four coloured action tiles for Now / Next. */
.witness-mode #icao { flex:0 0 auto; }
.witness-mode .airport { min-width:0; max-width:calc(600 * var(--u)); }
.witness-mode .apname { min-width:0; overflow:hidden; }
.witness-mode #apname,.witness-mode #apcity { overflow:hidden; text-overflow:ellipsis; }

#witness-board { position:absolute; left:0; top:calc(92 * var(--u)); width:25%; height:calc(var(--map-h) - 92 * var(--u)); box-sizing:border-box; padding:calc(16 * var(--u)); overflow:auto; background:#08111c; color:#eef5fb; z-index:36; font:500 clamp(12px,1.15vw,44px)/1.4 'Segoe UI',sans-serif; }
#witness-board h2 { font-size:1.25em; } #witness-board h3 { font-size:1.1em; }
.witness-event { padding:.7em .4em; border-left:4px solid; margin:.4em 0; background:#152432; overflow-wrap:anywhere; }
#witness-search { color:#eef5fb; background:#08111c; width:min(850px,90vw); max-height:85vh; border:1px solid #537080; padding:24px; }
#witness-search::backdrop { background:#000a; }
#witness-search input { box-sizing:border-box; width:100%; font-size:20px; padding:12px; }
#witness-search button { display:block; width:100%; text-align:left; background:#152432; color:inherit; border:1px solid #537080; padding:12px; margin:5px 0; font:inherit; }
#witness-search button[aria-selected=true] { background:#345366; }
@media(max-width:700px) {
 .witness-mode #map { left:0; top:150px; width:100%; height:calc(var(--map-h) - 150px); }
 #witness-board { width:100%; height:150px; display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px; padding:6px; font-size:11px; }
 #witness-board h2 { width:100%; margin:0; } #witness-board h3,#witness-board small,#witness-board .witness-history { display:none; }
 #witness-board .witness-event { flex:1; margin:0; padding:4px; }
 #witness-board .witness-event ~ .witness-event ~ .witness-event { display:none; }
}
/* The browser adapter gives phones a 1280px virtual viewport. */
.web-phone .witness-mode #map { left:0; top:32vw; width:100%; height:calc(var(--map-h) - 32vw); }
.web-phone #witness-board { width:100%; height:32vw; display:flex; flex-wrap:wrap; align-content:flex-start; gap:1vw; padding:1vw; font-size:3vw; }
.web-phone #witness-board h2 { width:100%; margin:0; font-size:3.5vw; }
.web-phone #witness-board h3,.web-phone #witness-board small,.web-phone #witness-board .witness-history { display:none; }
.web-phone #witness-board .witness-event { flex:1; margin:0; padding:1vw; }
.web-phone #witness-board .witness-event ~ .witness-event ~ .witness-event { display:none; }
.fleet-mode-title { font-size:calc(21 * var(--u)); font-weight:700; margin-bottom:calc(10 * var(--u)); }
.fleet-mode-row { padding:calc(5 * var(--u)) 0; overflow-wrap:anywhere; border-bottom:1px solid #304555; }
.fleet-mode-note { font-size:calc(13 * var(--u)); margin-top:calc(10 * var(--u)); color:#c5d8e7; overflow-wrap:anywhere; }

body.fleet-centric #board,body.fleet-centric #quiet,body.fleet-centric #scene-title,body.fleet-centric #wx,body.fleet-centric #notice {display:none!important}

body.fleet-centric .field-pin {display:none!important}

.fleet-mode-title {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Web no-ad footer: fixed tracks keep live updates from moving the layout. */
.happening-footer #host { width:calc(280 * var(--u)); }
.happening-footer #host .hostcard { padding:calc(18 * var(--u)); }
.happening-footer #host .mono-badge,.happening-footer #host .visit-qr,.happening-footer #host .highlight,.happening-footer #host .details,.happening-footer #host .welcome,.happening-footer #host .fact { display:none; }
.happening-footer #host .name,.happening-footer #host .airport-name { font-size:calc(24 * var(--u)); }
.happening-footer #ad-progress,.happening-footer #ad-dots { visibility:hidden; }
.happening-strip { position:absolute; inset:0; padding:calc(12 * var(--u)) calc(18 * var(--u)); overflow:hidden; }
.happening-strip[hidden] { display:none; }
.happening-title { font-size:calc(21 * var(--u)); font-weight:700; color:var(--accent); height:calc(28 * var(--u)); }
.happening-row { display:flex; gap:calc(12 * var(--u)); height:calc(178 * var(--u)); }
.happening-card { flex:1; min-width:0; max-width:20%; padding:calc(6 * var(--u)) calc(10 * var(--u)); border-left:1px solid var(--line); overflow:hidden; opacity:1; transform:translateX(0); transition:opacity .9s ease,transform .9s ease; }
.happening-card.off { opacity:0; transform:translateX(calc(30 * var(--u))); }
.happening-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:calc(17 * var(--u)); line-height:1.15; min-height:calc(19 * var(--u)); }
.happening-line:first-child { color:var(--accent); font-weight:700; }
.happening-line:nth-child(2) { font-size:calc(28 * var(--u)); font-family:var(--mono); font-weight:700; min-height:calc(32 * var(--u)); }
.happening-line:last-child { color:var(--muted); }

/* Persistent web station identity, independent of scene/ad/replay lifecycles. */
.web-bottom-qr .web-station-qr { position:fixed; z-index:60; right:calc(16 * var(--u)); bottom:calc(12 * var(--u)); width:calc(144 * var(--u)); padding:calc(6 * var(--u)); background:#0e1b2e; text-align:center; }
.web-station-qr img { width:100%; display:block; background:white; }
.web-station-qr small { font-size:calc(14 * var(--u)); }
.web-station-qr .advertise-here { display:block; margin-top:calc(4 * var(--u)); font-size:calc(16 * var(--u)); line-height:1.1; font-weight:700; color:#ffcc75; white-space:nowrap; }
.web-station-qr .advertise-here + small { display:block; line-height:1.15; }
.web-bottom-qr #adband { padding-right:calc(176 * var(--u)); }
.web-bottom-qr .station-qr-dock,.web-bottom-qr .ad .station-qr { display:none !important; }
.web-bottom-qr.station-dock-visible #ads,.web-bottom-qr .station-dock-visible #ads { margin-right:0; }
.web-bottom-qr .jukebox-request { right:calc(164 * var(--u)); }
.web-bottom-qr .happening-card { border-left:calc(4 * var(--u)) solid var(--aircraft-accent); }
.web-bottom-qr .happening-line:first-child { color:var(--aircraft-accent); }
.web-bottom-qr .happening-line { font-size:calc(15 * var(--u)); min-height:calc(16 * var(--u)); }
.web-bottom-qr .happening-line:empty { display:none; }
.aircraft-fact { font-size:calc(17 * var(--u)); }

.web-bottom-qr .happening-line:nth-child(9) { white-space:normal; font-size:calc(13 * var(--u)); line-height:calc(16 * var(--u)); max-height:calc(32 * var(--u)); }
.web-bottom-qr .happening-card.has-departures .happening-line:last-child { display:none; }

/* Web-only classes are attached by tv-chrome. */
#host .hostcard.photo-host { display:flex; background-size:cover; background-position:center; padding:calc(18 * var(--u)); justify-content:flex-start; gap:calc(12 * var(--u)); }
#host .photo-host > .mono-badge { width:calc(210 * var(--u)); height:calc(59 * var(--u)); background:transparent; box-shadow:none; color:white; }
#host .photo-host .host-logo img { width:100%; height:100%; object-fit:contain; }
#host .photo-host > .mono-badge.host-logo.on-dark { background:transparent; box-shadow:none; }
#host .photo-host .row { width:calc(100% - 160 * var(--u)); }
#host .photo-host .name { font-size:calc(26 * var(--u)); }
#host .photo-host .welcome { font-size:calc(23 * var(--u)); }
#host .photo-host > .visit-qr { position:absolute; right:calc(18 * var(--u)); bottom:calc(14 * var(--u)); }
#ad-stack .upgrade-ad { display:flex; gap:calc(18 * var(--u)); }
.upgrade-cars { display:flex; align-items:center; width:42%; flex:none; min-width:0; }
.upgrade-cars img { object-fit:contain; min-width:0; background:white; border-radius:calc(8 * var(--u)); }
.upgrade-cars .from-car { width:34%; opacity:.65; }
.upgrade-cars .to-car { width:58%; }
.upgrade-arrow { width:8%; text-align:center; font-size:calc(38 * var(--u)); }
#ad-stack .upgrade-ad > .visit-qr { order:3; }
#ad-stack .upgrade-ad > .side { display:none; }
#ad-stack .upgrade-ad .bizname { font-size:calc(28 * var(--u)); }

#ad-stack .upgrade-ad .body { flex:1; }

/* Applied only by the web callout renderer. */
.callout.web-compact { padding: calc(7 * var(--u)) calc(12 * var(--u)); }
.callout.web-compact .l1, .callout.web-compact.chase .l1 { font-size: calc(23 * var(--u)); }
.callout.web-compact .l1 .cs, .callout.web-compact .l2, .callout.web-compact .l3 { display: none; }
.callout.web-compact .l4 { font-size: calc(18 * var(--u)); }

/* Web-only Action Board: four tiles, no timer reflow. */
.web-action-board { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:calc(2 * var(--u)); padding:calc(6 * var(--u)) calc(10 * var(--u))!important; overflow:hidden; }
.action-row { min-width:0; min-height:0; border-left:calc(6 * var(--u)) solid var(--aircraft-accent); padding:calc(4 * var(--u)) calc(8 * var(--u)); display:flex; flex-direction:column; justify-content:center; gap:calc(3 * var(--u)); }
.action-main { display:flex; align-items:center; gap:calc(6 * var(--u)); font-size:calc(26 * var(--u)); line-height:1.1; }
.action-who { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; color:var(--aircraft-accent); }
.action-timer { flex:none; text-align:right; font-variant-numeric:tabular-nums; font-size:calc(34 * var(--u)); line-height:1.1; }
.action-identity { display:flex; min-width:0; gap:calc(8 * var(--u)); font-size:calc(22 * var(--u)); line-height:1.15; white-space:nowrap; overflow:hidden; }
.action-aircraft { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.action-operator { flex:0 100000 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.action-meta { white-space:nowrap; font-size:calc(18 * var(--u)); line-height:1.15; overflow:hidden; text-overflow:ellipsis; }


.happening-footer #host.web-action-board {width:calc(600 * var(--u));}

.web-action #board {display:none!important;}

/* Show and hide the web card and its SVG leader in the same frame. */
.web-action .callout.web-calm { transition:opacity .25s ease; }

#host.web-action-board.has-business-host {grid-template-columns:30% minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
.action-tiles {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-width:0;}
.action-host {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5 * var(--u));min-width:0;text-align:center;}
.web-action #host .action-host .mono-badge {display:flex;width:90%;height:calc(44 * var(--u));flex:none;}
.action-host .mono-badge img {width:100%;height:100%;object-fit:contain;}
.action-host-name {font-size:calc(18 * var(--u));line-height:1.1;}
.web-action #host .action-host .visit-qr {display:block;position:static;margin:0;width:calc(84 * var(--u));}
.web-action #host .action-host .business-qr {width:calc(84 * var(--u));height:calc(84 * var(--u));}
.action-host .visit-qr small {display:none;}
.has-business-host .action-main {font-size:calc(20 * var(--u));gap:calc(3 * var(--u));}
.has-business-host .action-timer {font-size:calc(24 * var(--u));}
.has-business-host .action-identity {font-size:calc(18 * var(--u));}
.has-business-host .action-meta {font-size:calc(16 * var(--u));}
.action-now {animation:action-now 2s ease-in-out infinite;}
@keyframes action-now {50% {opacity:.65;}}

.web-action #credits {bottom:calc(3 * var(--u));width:calc(100% - 48 * var(--u));max-width:calc(100% - 48 * var(--u));white-space:nowrap;opacity:.6;}
.web-action #credits,.web-action #credits * {font-size:calc(9 * var(--u))!important;color:rgb(236,236,230)!important;white-space:nowrap;}

/* Web phones retain the virtual map viewport, with readable footer units. */
@media (orientation:portrait) {
  .web-phone { --map-h:62vh; }
  .web-phone.web-action #adband { flex-direction:column; padding-right:0; }
  .web-phone.web-action #host.web-action-board { width:100%; height:18vh; flex:none; border-right:0; }
  .web-phone #host.web-action-board.has-business-host { grid-template-columns:1fr; grid-template-rows:1fr; }
  .web-phone .action-host { display:none; }
  .web-phone .action-main,.web-phone .has-business-host .action-main {font-size:3.4vw;}
  .web-phone .action-timer,.web-phone .has-business-host .action-timer {font-size:3.8vw;}
  .web-phone .action-identity,.web-phone .has-business-host .action-identity {font-size:3.6vw;}
  .web-phone .action-meta,.web-phone .has-business-host .action-meta {font-size:3.3vw;}
  .web-phone #ads {width:100%;flex:1;}
  .web-phone .ad {grid-template-columns:12vw minmax(0,1fr);padding:2vw 17vw 3vw 2vw;gap:2vw;}
  .web-phone .ad .tv-footer-copy {font-size:3.4vw;}
  .web-phone .ad .tv-footer-copy.headline {font-size:4vw;}
  .web-phone .ad .sub.tv-paragraph {font-size:3.4vw;}
  .web-phone.web-bottom-qr .web-station-qr {position:absolute;right:2vw;bottom:3vw;width:13vw;padding:1vw;}
  .web-phone .web-station-qr small,.web-phone .web-station-qr .advertise-here {font-size:2vw;}
  .web-phone .web-station-qr .advertise-here {white-space:normal;margin-top:.5vw;}
  .web-phone .callout.web-compact .l1 {font-size:3.6vw;}
  .web-phone .callout.web-compact .l4 {font-size:3.3vw;}
}

/* Pass 7: a header followed by four independently fitted lines. */
.web-action .action-row {gap:calc(1 * var(--u));padding-top:0;padding-bottom:0;}
.web-action .action-identity,.web-action .action-type,.web-action .action-operator,.web-action .action-meta {display:block;flex:none;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:clip;font-size:calc(16 * var(--u));line-height:1.08;}
.web-action .action-who {text-overflow:clip;}
.web-action #host .action-host .host-logo.wide {width:90%;max-width:90%;}
.web-action #host .action-host .host-logo img {object-fit:contain;object-position:center;width:100%;height:100%;}
/* Real logos need more than the 44 px initials slot to stay readable (City Diner's tall mark was ~28 px). */
.web-action #host .action-host .mono-badge.host-logo {height:calc(62 * var(--u));padding:calc(5 * var(--u));}
.feature-edge {position:absolute;z-index:8;pointer-events:none;background:rgba(9,16,24,.9);border:1px solid currentColor;border-radius:6px;padding:4px 8px;white-space:nowrap;font:600 calc(17 * var(--u)) monospace;}

@media (orientation:portrait) {
  .web-phone.web-action #host.web-action-board {height:26vh;}
  .web-phone.web-action .action-row .action-identity,.web-phone.web-action .action-row .action-type,.web-phone.web-action .action-row .action-operator,.web-phone.web-action .action-row .action-meta {font-size:3.4vw;}
}

/* Witness has its own footer; the existing SkyPower QR remains in its dock. */
.witness-mode #host,.witness-mode #ads,.witness-mode #ad-progress,.witness-mode #ad-dots { display:none !important; }
#witness-footer { display:grid;grid-template-columns: 42% 1fr;gap:calc(24 * var(--u));width:100%;height:100%;padding:calc(12 * var(--u));box-sizing:border-box;color:#eef5fb; }
#witness-footer canvas { display:block;width:100%;height:calc(100% - 24 * var(--u)); }
#witness-footer strong { font-size:calc(20 * var(--u)); }
#witness-stats { font-size:calc(18 * var(--u));line-height:1.45;overflow-wrap:anywhere; }
.witness-mode #chase-panel { width:calc(350 * var(--u)); }
.witness-mode #chase-panel .chase-line { white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere; }
.witness-mode #chase-panel .chase-type { font-size:calc(21 * var(--u)); }

#airport-results > div { position:relative; }
#airport-results .search-departures { position:absolute;right:calc(12 * var(--u));top:calc(12 * var(--u));font-size:.8em; }
#airport-results:has(.search-departures) b, #airport-results:has(.search-departures) small { padding-right:calc(180 * var(--u)); }
#map-compass { position:absolute;right:calc(18 * var(--u));top:calc(112 * var(--u));width:calc(56 * var(--u));height:calc(56 * var(--u));border-radius:50%;background:#08121bd9;border:1px solid #aebfcd;z-index:9;display:grid;place-items:center;color:white;font:bold calc(20 * var(--u)) sans-serif;pointer-events:none; }
#traffic-mini-map { position:absolute;right:18px;bottom:36px;width:340px;height:340px;border:1px solid #aebfcd88;border-radius:12px;background:#263442;z-index:20;pointer-events:none; }

.web-phone #traffic-mini-map { width:220px;height:220px; }
@media (orientation:portrait) { .web-phone #traffic-mini-map {display:none;} }

/* Aircraft photo: mini-map width, directly above it, height from the photo's own aspect (whole photo,
   uncropped). Border = the subject's colour-code colour, neutral grey without one. Geometry, border
   width and colour are set by tv-web-map-overlay.js; size and colour changes animate. */
#aircraft-photo { position:absolute;right:18px;bottom:386px;width:340px;height:227px;box-sizing:border-box;overflow:hidden;border:4px solid #8a96a3;border-radius:12px;background:#0b1118;z-index:20;
  opacity:0;transition:opacity .6s ease-in-out,height .6s ease-in-out,width .6s ease-in-out,border-color .6s ease-in-out;pointer-events:auto;cursor:pointer;display:block; }
#aircraft-photo[hidden] { display:none; }
#aircraft-photo.on { opacity:1; }
#aircraft-photo .photo-layer { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease-in-out; }
#aircraft-photo .photo-layer.on { opacity:1; }
#aircraft-photo .photo-credit { position:absolute;left:0;right:0;bottom:0;padding:6px 8px 5px;font:600 15px/1.2 'Segoe UI',system-ui,sans-serif;color:#fff;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#aircraft-photo .photo-qr { position:absolute;top:8px;right:8px;width:26%;height:auto;border-radius:4px;box-shadow:0 0 0 1px #0008; }
/* Compact column (1080p class, tv-arrivals-rail.js): the photo at 60% left of the mini map. Credit wraps instead of
   being cut; the QR (the link back to the photo page) takes a larger share so it stays scannable (~70 px at 1080p). */
.rail-compact #aircraft-photo .photo-credit { font-size:12px; white-space:normal; padding:4px 6px 3px; }
.rail-compact #aircraft-photo .photo-qr { width:34%; top:5px; right:5px; }
.web-photo-panel #map-compass { right:calc(18 * var(--u) + var(--photo-shift, 0px)); }
.web-photo-panel #narration-audio { right:calc(18px + var(--photo-shift, 0px)); }

.callout.web-compact .l2:not([hidden]) { display:block; width:calc(340 * var(--u)); max-width:65vw; font-size:calc(18 * var(--u)); white-space:nowrap; }

/* Stable compact width prevents timer/identity text from changing placement geometry. */
.callout.web-calm.web-compact { width:calc(380 * var(--u)); }