body.flight-display {
  color-scheme: dark;
  --bg: #0a1018;
  --surface: #111b28;
  --text: #f5f8fc;
  --muted: #afbed1;
  --gold: #ffd47b;
  --blue: #a2dbff;
}


body.flight-display {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(ellipse at 50% 0%, #182a40, var(--bg) 65%);
  font: 16px/1.4 system-ui, sans-serif;
}
main.display-page { --board-gutter:clamp(10px,1.8vw,32px); padding:var(--board-gutter); }
.display-page .masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 5px clamp(8px, 1vw, 16px);
  border: 1px solid #394b63;
  border-radius: 9px;
  background: linear-gradient(105deg, #111b28 16%, #192d43 74%, #202f42);
  box-shadow: 0 18px 50px #0004;
}
.display-page .masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), #a37a41 32%, transparent 82%);
}
.display-page .runways {
  position: absolute;
  right: 2%;
  width: 56%;
  height: 150%;
  opacity: .43;
  pointer-events: none;
}
.display-page .identity, .display-page .clock { position: relative; }
.display-page .identity { display: flex; align-items: center; gap: clamp(8px, 1.15vw, 18px); }
.display-page .mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border: 1px solid #ffe2a1;
  border-radius: 5px;
  background: linear-gradient(155deg, #ffe3a5, #f7ba50);
  color: #201706;
  font-size: clamp(.9rem, 1.6vw, 1.6rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.085em;
  text-indent: -.085em;
  box-shadow: 0 5px 25px #ffc96525;
}
.display-page .clock-label, .display-page .airport small, .display-page .demo-badge {
  font: 750 .72rem/1.3 ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.display-page h1, .display-page h2 { margin: 0; line-height: 1.06; letter-spacing: -.035em; }
.display-page h1 { font-size: clamp(1.04rem, 2.2vw, 2.35rem); }
.display-page .airport-name { color: #c1cede; font-size: clamp(.72rem, 1.1vw, 1.05rem); }
.display-page .clock {
  display: flex;
  align-items: center;
  gap: .65em;
  padding-left: .65em;
  border-left: 1px solid #52647a;
  font-variant-numeric: tabular-nums;
}
.display-page .clock time { font-size: clamp(1rem, 2.15vw, 2.25rem); font-weight: 800; white-space: nowrap; line-height: 1.1; }
.display-page .clock-meta { display: grid; text-align: right; white-space: nowrap; line-height: 1.2; }
.display-page .clock-label { color: var(--gold); }
.display-page .board-date { color: var(--muted); }
.display-page .demo-badge { padding: 3px 6px; border: 1px solid #765b35; border-radius: 4px; background: #322617; color: var(--gold); }
.display-page .heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.display-page :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.display-page .board { border: 1px solid #334459; border-radius: 11px; overflow: hidden; background: var(--surface); }
.display-page .board-meta { display: flex; align-items: center; gap: 10px; }
.display-page .flight-window { color: var(--muted); font: 750 clamp(.58rem, 1vw, .88rem)/1.3 ui-monospace, monospace; text-transform: uppercase; white-space: nowrap; }
.display-page table[data-dense] { font-size: clamp(.76rem, min(1.35vw, 2.4vh), 1.4rem); }
.display-page table[data-dense] .cell-value { padding-block: clamp(2px, .48vh, 6px); }
.display-page .heading { padding: 5px clamp(8px, 1.25vw, 19px); background: linear-gradient(100deg, #192a3e, #142030); border-bottom: 1px solid #354960; }
.display-page .section-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.display-page .direction-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; color: var(--gold); background: #34291c; font-size: 1.45rem; line-height: 1; }
.display-page .direction-icon.arrival svg { transform: scaleY(-1); }
.display-page h2 { font-size: clamp(1.2rem, 3.6vh, 2.35rem); }
.display-page .table-wrap { overflow-x: auto; background:#0b141f; }
.display-page table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 3px; text-align: left; font-size: clamp(.8rem, min(1.65vw, 2.8vh), 1.68rem); }

.display-page th, .display-page .cell-value { padding: clamp(4px, .65vh, 9px) clamp(6px, 1vw, 18px); }
.display-page td { position: relative; padding: 0; }
.display-page th { color: #b8c8dc; background: #0f1925; text-transform: uppercase; letter-spacing: .1em; font-size: .68em; }
.display-page tbody tr { --row-surface: var(--surface); background: var(--row-surface); }
.display-page tbody tr:nth-child(even) { --row-surface: #14202f; }

.display-page .flight, .display-page .times, .display-page .gate { white-space: nowrap; font-variant-numeric: tabular-nums; }
.display-page .flight { font: 800 1em/1.4 ui-monospace, monospace; color: var(--gold); }
.display-page .airline, .display-page td.scheduled { color: #b7c6d8; }
.display-page td.times:not(.scheduled), .display-page td.gate { font-weight: 750; }
.display-page .airport { font-weight: 750; }
.display-page .airport .cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.display-page .airport small { margin-left: .5em; color: #a6b6c9; font-size: .68em; }
.display-page .pill {
  display: inline-flex;
  align-items: center;
  gap: .48em;
  white-space: nowrap;
  padding: .27em .68em;
  border-radius: 5px;
  color: #b4e2ff;
  background: #173348;
  font-size: .82em;
  font-weight: 760;
}
.display-page .pill::before { content: ""; width: .48em; height: .48em; border-radius: 50%; background: currentColor; }
.display-page .ok { color: #a3f1c7; background: #17382e; }
.display-page .warn { color: #ffda91; background: #3b2c1b; }
.display-page .bad { color: #ffb1b7; background: #442631; }
.display-page .flight-column, .display-page .status-column { width: 17%; }
.display-page th.airline { width: 13%; }
.display-page .route { width: 23%; }
.display-page th.scheduled, .display-page .estimated-column { width: 11%; }
.display-page th.gate { width: 8%; }
@media (max-height: 520px) and (orientation: landscape) {
  main.display-page { --board-gutter:8px; }
  .display-page .masthead { margin-bottom: 5px; padding-block: 3px; }
  .display-page .heading { padding-block: 3px; }
  .display-page .direction-icon { width: 24px; height: 24px; }
  .display-page th, .display-page .cell-value { padding-block: 3px; }
}
@media (max-width: 1060px) {
  .display-page .airport-name { display: none; }
}
@media (max-width: 680px) {
  .display-page .board-date, .display-page .airline, .display-page .scheduled { display: none; }
  .display-page table { min-width: 350px; }
  .display-page .flight-column { width: 23%; }
  .display-page .route { width: 26%; }
  .display-page .estimated-column { width: 17%; }
  .display-page th.gate { width: 11%; }
  .display-page .status-column { width: 23%; }
  .display-page .heading { gap: 6px; }
  .display-page .section-title { gap: 6px; }
  .display-page .airport small { display: block; margin-left: 0; }
  .display-page .pill { gap: .3em; padding-inline: .38em; }
}

.display-page .carrier-logo {
  display: inline-block;
  width: 2.25em;
  height: 1.35em;
  margin-right: .55em;
  padding: 2px 3px;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 4px;
  background: #f5f7fb;
}
.display-page .flight-tile {
  display: inline-block;
  vertical-align: middle;
  padding: .13em .4em;
  border: 1px solid #38414b;
  border-radius: 4px;
  background: linear-gradient(#222a36 48%, #080c12 49% 51%, #17202c 52%);
  font-variant-numeric: tabular-nums;
}
.display-page .airline .cell-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.display-page tr.flip-out { animation:p005-flip-out var(--half-flip-duration) ease-in both; }
.display-page tr.flip-in { animation:p005-flip-in var(--half-flip-duration) ease-out both; }
@keyframes p005-flip-out {
  from { transform:rotateX(0deg); opacity:1; }
  to { transform:rotateX(-90deg); opacity:0; }
}
@keyframes p005-flip-in {
  from { transform:rotateX(90deg); opacity:0; }
  to { transform:rotateX(0deg); opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .display-page tr.flip-out, .display-page tr.flip-in { animation:none; }
}
@media (max-width: 460px) {
  .display-page .carrier-logo { display: block; margin: 0 0 .18em; }
}
main.display-page {max-width:none;min-height:100vh;margin:0}
.display-page .board-grid {display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.display-page .board-grid.two-columns {grid-template-columns:repeat(2,minmax(315px,1fr));overflow-x:auto}
.display-page .two-columns .board {min-width:0}
.display-page .two-columns table {font-size:clamp(.7rem,min(1vw,2.2vh),1.12rem)}
.display-page .two-columns th,.display-page .two-columns .cell-value {padding-inline:clamp(4px,.45vw,10px)}
.display-page .two-columns .airport small {display:block;margin-left:0}
.display-page .identity h1 {overflow-wrap:anywhere}
@media (max-width: 1450px) {
  .display-page .two-columns .airline {display:none}
}


.display-page { --official-qr-size:clamp(76px,7vw,104px); }
.display-page.has-travel-ticker { padding-bottom:calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
.display-page .board-dock {
  position:fixed; z-index:5; inset:auto 0 0; display:flex; align-items:flex-end;
  gap:8px; padding-bottom:env(safe-area-inset-bottom, 0px); pointer-events:none;
}
.display-page .official-qr {
  flex:none; margin:0 var(--board-gutter) 6px auto; display:grid; justify-items:center; gap:4px;
  width:calc(var(--official-qr-size) + 12px);
  pointer-events:auto; text-decoration:none; color:var(--text);
  padding:5px; border:1px solid #53657b; border-radius:6px; background:#101c2b;
  box-shadow:0 4px 18px #0008;
}
.display-page .official-qr[hidden] { display:none; }
.display-page .official-qr-label {
  color:var(--gold); font-weight:800; text-align:center;
  font-size:clamp(.66rem,.8vw,.78rem); line-height:1.2;
}
.display-page .official-qr img {
  width:var(--official-qr-size); height:auto; display:block; image-rendering:pixelated;
  background:#fff; border-radius:3px;
}
.display-page .travel-ticker {
  display:flex; align-items:stretch; flex:1; min-width:0; pointer-events:auto;
  background:#0f1a28; border-top:2px solid #bc8f49; box-shadow:0 -8px 28px #0007;
}
.display-page .travel-ticker[hidden] { display:none; }
.display-page .ticker-viewport { min-width:0; flex:1; overflow:hidden; }
.display-page .ticker-track {
  display:flex; width:max-content;
  animation:p005-travel-scroll var(--ticker-duration,30s) linear infinite;
}
.display-page .ticker-group {
  display:flex; align-items:center; justify-content:space-around;
  min-width:var(--ticker-viewport-width,75vw); margin:0; padding:0; list-style:none;
}
.display-page .ticker-item {
  display:flex; align-items:center; gap:.65rem; padding:.48rem 1.4rem;
  white-space:nowrap; font-size:clamp(.8rem,1.25vw,1.15rem);
}
.display-page .ticker-label { color:var(--gold); }
.display-page .ticker-source { color:var(--muted); font-size:.78em; }
.display-page .ticker-viewport:focus-visible .ticker-track,
.display-page .ticker-viewport:hover .ticker-track { animation-play-state:paused; }
@keyframes p005-travel-scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .display-page .ticker-track { animation:none; }
  .display-page .ticker-viewport { overflow-x:auto; }
  .display-page .ticker-group { justify-content:flex-start; min-width:0; }
  .display-page .ticker-group[aria-hidden=true] { display:none; }
}

.display-page .ticker-bands { flex:1; min-width:0; display:grid; gap:3px; }
.display-page .news-ticker { border-top-color:#5f9ec1; background:#102237; }
.display-page .news-ticker .ticker-label { color:var(--blue); }
.display-page.has-news-ticker { padding-bottom:calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
.display-page.has-news-ticker.has-travel-ticker:not(.has-official-qr) { padding-bottom:calc(6rem + env(safe-area-inset-bottom, 0px)); }
.display-page.has-official-qr { padding-bottom:calc(var(--official-qr-size) + 2.75rem + env(safe-area-inset-bottom, 0px)); }

.display-page a.ticker-detail { color:inherit; text-decoration:none; }
.display-page a.ticker-source { text-decoration:none; }
.display-page .ticker-item a:hover, .display-page .ticker-item a:focus-visible { text-decoration:underline; }