/* AirLive: night-apron / glass-cockpit theme */
/* Self-hosted fonts (latin subset), SIL Open Font License 1.1 */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/barlow-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/barlow-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/barlow-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/barlow-condensed-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/barlow-condensed-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(vendor/fonts/barlow-condensed-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(vendor/fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(vendor/fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(vendor/fonts/ibm-plex-mono-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#060a11; --bg2:#0a111c; --panel:#0d1522; --panel2:#111c2d;
  --line:#1d2c44; --line2:#2a3d5b;
  --text:#e9eff8; --muted:#7d90ad;
  --amber:#ffb224; --cyan:#38d2ff; --green:#3ddc84; --red:#ff4d5a;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--sans);
  background:
    radial-gradient(1200px 500px at 50% -10%,#0f2038 0%,transparent 70%),
    repeating-linear-gradient(0deg,rgba(56,210,255,.025) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(56,210,255,.025) 0 1px,transparent 1px 44px),
    var(--bg);
  background-attachment:fixed;
}
button{font-family:inherit;color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0 0}
.brand{display:flex;align-items:center;gap:14px}
a.brand{color:inherit;text-decoration:none;border-radius:6px}
a.brand:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.brand svg{width:46px;height:46px;flex:none}
.brand h1{margin:0;font-family:var(--display);font-weight:700;font-size:2.6rem;letter-spacing:.14em;line-height:1}
.brand h1 b{color:var(--amber);font-weight:700}
.brand p{margin:4px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.instruments{display:flex;gap:10px;flex-wrap:wrap}
.gauge{min-width:104px;padding:7px 12px 8px;background:linear-gradient(180deg,#0b1320,#080d16);border:1px solid var(--line2);border-radius:6px;box-shadow:inset 0 0 0 1px #000,inset 0 8px 14px rgba(255,255,255,.015)}
.gauge span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.gauge strong{display:block;margin-top:3px;font-family:var(--mono);font-weight:600;font-size:1.2rem;color:var(--amber);letter-spacing:.04em;text-shadow:0 0 12px rgba(255,178,36,.35)}
.gauge.cyan strong{color:var(--cyan);text-shadow:0 0 12px rgba(56,210,255,.35)}
.gauge span,.gauge strong{white-space:nowrap;font-variant-numeric:tabular-nums}

.runway{height:18px;background:#0a111b;border-block:1px solid var(--line);position:relative;margin:18px 0 16px}
.runway::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(233,239,248,.7) 0 26px,transparent 26px 52px)}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;background:var(--panel);border:1px solid var(--line2);border-radius:4px;cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:border-color .15s,color .15s}
.chip em{font-style:normal;font-size:.66rem;color:var(--text);background:#16233a;border-radius:3px;padding:1px 6px;letter-spacing:.04em}
.chip:hover{color:var(--text);border-color:var(--muted)}
.chip.on{color:var(--amber);border-color:var(--amber);box-shadow:0 0 0 1px rgba(255,178,36,.25),0 0 16px rgba(255,178,36,.12)}
.chip.on em{color:#1a1000;background:var(--amber)}

/* ---- map + player ---- */
.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:26px}
.stage.playing{grid-template-columns:minmax(0,1fr) minmax(300px,32%)} /* playing: big video left, small map right */
.side{display:flex;flex-direction:column;gap:12px;min-width:0} /* the map, plus the live chat below it while playing on wide screens */
.hud{position:relative}
.hud::before,.hud::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--amber);z-index:800;pointer-events:none;opacity:.9}
.hud::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.hud::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-bottom-right-radius:8px}
#map{height:560px;border:1px solid var(--line2);border-radius:8px;background:#0a1220;z-index:0}
.maplabel{position:absolute;left:14px;bottom:14px;z-index:800;pointer-events:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;
  background:rgba(6,10,17,.78);border:1px solid var(--line);padding:5px 9px;border-radius:3px}
.maplabel i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:7px;vertical-align:-1px}
.leaflet-container{font-family:var(--sans);background:#0a1220}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line2)!important}
.leaflet-control-zoom-home svg{display:inline-block;vertical-align:middle;margin-top:-3px} /* Reset zoom, same box as + and − */

#player{display:none;align-self:start;background:var(--panel);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.stage.playing #player{display:block;order:-1}
.stage.playing #map{height:420px}
.stage.playing .side{align-self:start}
.stage.playing .pop img{aspect-ratio:12/5} /* compact popups so they fit the small map: a shorter strip of the thumbnail, never hidden */
.ptop{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#080d16;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.ptop b{color:var(--green);font-weight:500}
.ptop b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;animation:blink 1.4s infinite}
.frame{position:relative;aspect-ratio:16/9;background:#000}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame iframe,.mvv iframe{pointer-events:none} /* YouTube's own controls are off; a click on the picture must not pause a live stream */
.vctl{position:absolute;right:10px;bottom:10px;z-index:6;display:flex;align-items:center;gap:8px;padding:3px 10px 3px 4px;background:rgba(5,8,15,.78);border:1px solid var(--line2);border-radius:20px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.vctl.open{opacity:1;visibility:visible} /* hidden until a tap on the picture; hides again after 4 seconds (app.js) */
.vbtn{width:30px;height:30px;padding:0;background:none;border:0;border-radius:50%;color:var(--text);cursor:pointer;font-size:1rem;line-height:1}
.vbtn:focus-visible,.vrng:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.vrng{width:96px;accent-color:var(--amber);cursor:pointer}
.pbar{padding:14px}
.pbar h2{margin:0 0 4px;font-size:1.02rem;line-height:1.3;font-weight:600}
.pbar .sub{color:var(--muted);font-size:.84rem}
.pbar .sub b{color:var(--cyan);font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.04em}
.pbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.pbtns a{color:var(--cyan);text-decoration:none;font-size:.86rem}
.btn{padding:7px 14px;background:var(--panel2);border:1px solid var(--line2);border-radius:4px;cursor:pointer;font-size:.84rem}
.btn:hover{border-color:var(--muted)}
.btn.done{border-color:var(--green);color:var(--green)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notice{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:9px 12px;background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--amber);border-radius:4px;font-size:.88rem}
.notice[hidden]{display:none}
.notice span{flex:1}
.notice button{background:none;border:0;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;padding:2px 6px}
.notice button:hover{color:inherit}

/* ---- map pins ---- */
.beacon{background:none;border:none}
.beacon span{position:relative;display:block;width:18px;height:18px;border-radius:50%;background:rgba(255,178,36,.18);border:2px solid var(--amber)}
.beacon span::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--amber)}
.beacon span::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--amber);animation:ping 2s infinite}
.beacon.sel span{border-color:var(--cyan);background:rgba(56,210,255,.2)}
.beacon.sel span::before{background:var(--cyan)}
.beacon.sel span::after{border-color:var(--cyan)}
.clupin{background:none;border:none}
.clu{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(8,13,22,.92);border:2px solid var(--amber);
  color:var(--amber);font-family:var(--mono);font-weight:600;font-size:.88rem;box-shadow:0 0 0 4px rgba(255,178,36,.16),0 0 18px rgba(255,178,36,.3);cursor:pointer}
@keyframes ping{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2);opacity:0}}
@keyframes blink{50%{opacity:.25}}

.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border-radius:8px;border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.leaflet-popup-tip{background:var(--panel)}
.leaflet-popup-content{margin:0;width:236px!important}
.pop img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:7px 7px 0 0;background:#06101b}
.pop .pb{padding:10px 12px 12px}
.pop .code{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--amber);margin-bottom:5px}
.pop strong{display:block;font-size:.86rem;line-height:1.3;margin-bottom:4px}
.pop small{display:block;color:var(--muted);font-size:.76rem;margin-bottom:9px}
.pop button{width:100%;padding:8px;border-radius:4px;background:var(--amber);border:0;color:#1a1000;font-weight:700;letter-spacing:.04em;cursor:pointer}

/* ---- stream cards ---- */
.count{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;text-align:left}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--amber);box-shadow:0 12px 28px rgba(0,0,0,.4);outline:0}
.card.on{border-color:var(--cyan)}
.thumb{position:relative;aspect-ratio:16/9;background:#06101b}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tag-live{position:absolute;top:9px;left:9px;display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:3px;background:var(--red);color:#fff;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em}
.tag-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
.views{position:absolute;right:9px;bottom:9px;padding:3px 8px;border-radius:3px;background:rgba(6,10,17,.85);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em}
.kind{position:absolute;right:9px;top:9px;padding:3px 7px;border-radius:3px;background:rgba(6,10,17,.85);border:1px solid var(--line2);font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;color:var(--muted)}
.cbody{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:12px}
.codebox{align-self:start;min-width:62px;padding:6px 8px 5px;text-align:center;background:#070c14;border:1px solid var(--line2);border-radius:4px;
  font-family:var(--mono);font-weight:600;font-size:1.1rem;letter-spacing:.08em;color:var(--amber);text-shadow:0 0 10px rgba(255,178,36,.3)}
.codebox.none{color:var(--line2);text-shadow:none}
.codebox small{display:block;margin-top:2px;font-size:.5rem;font-weight:500;letter-spacing:.2em;color:var(--muted);text-shadow:none}
.ctext h3{margin:0 0 4px;font-size:.94rem;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctext p{margin:0;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctext .loc{margin-top:5px;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--cyan)}

.status{padding:50px 0;text-align:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
footer{padding:10px 0 34px;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:#5b6d88;text-transform:uppercase}
footer a{color:inherit}
/* the shared footer (lib/footer.php) */
footer.sf{margin-top:34px;padding:0 0 34px;text-align:left;font-family:inherit;font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--text);border-top:1px solid var(--line)}
.sf-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:26px;padding:28px 0 20px}
.sf-word{margin:0;font:700 1.6rem/1 var(--display);letter-spacing:.06em}.sf-word b{color:var(--amber)}
.sf-tag{margin:8px 0 14px;color:var(--muted);font-size:.86rem;max-width:30ch}
.sf-live{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--line2);border-radius:999px;color:var(--muted);font-family:var(--mono);font-size:.7rem}
.sf-live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(61,220,132,.2)}
.sf-h{margin:0 0 10px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
footer.sf .sf-col a{color:var(--text);text-decoration:none;font-size:.88rem}footer.sf .sf-col a:hover{color:var(--cyan)}.sf-col a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sf-kids:empty{display:none}.sf-kids .kids-switch{text-decoration:none;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:.88rem;cursor:pointer}.sf-kids .kids-switch:hover{color:var(--cyan)}
.sf-bar{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:.62rem;line-height:1.7;color:#5b6d88}
.sf-bar p{margin:0}.sf-bar a{color:#8497b3}
@media (max-width:760px){.sf-in{grid-template-columns:1fr 1fr;gap:22px}.sf-br{grid-column:1/-1}}
a.aplink{color:inherit;text-decoration:none}a.aplink:hover,a.aplink:focus-visible{text-decoration:underline;text-underline-offset:2px} /* a stream's airport name, linked to its airport page */

@media (min-width:861px){ /* playing, side by side: the chat (on top) and the map fill the full height of the player column */
  .stage.playing .side{align-self:stretch}
  .stage.playing .hud{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .stage.playing #map{flex:1 1 auto;height:auto;min-height:420px}
  .side.chat-on .hud,.side.chat-on .chat:not(.closed){flex:1 1 50%} /* half and half (border-box, so the chat's border counts inside its half) */
  .side.chat-on .chat{order:-1} /* chat on top, map below */
  .stage.playing #map{aspect-ratio:1;flex-shrink:0} /* the side map is at least as tall as it is wide */
  .stage.playing:not(.tv) .hud{min-height:auto} /* so the map never goes under its width */
  .side.chat-on #map{min-height:200px}
  .side.chat-on .chat:not(.closed){min-height:480px} /* YouTube's chat needs ~320px (header, messages, input row) plus ~100px for pinned/welcome banners, or its 'Chat...' row is cut off; the column grows if the map would go under 200px */
  .side.chat-on ~ #player #pchat{display:none} /* the chat panel has its own link */
}

/* ---- live chat (YouTube's embed) ---- */
.chat{display:flex;flex-direction:column;min-height:0;box-sizing:border-box;background:var(--panel);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.chat[hidden]{display:none}
.chath{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px;background:#080d16;border-bottom:1px solid var(--line);font-size:.8rem}
.chath b{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.chath a{color:var(--cyan);text-decoration:none;margin-left:auto}
.chath small{flex-basis:100%;color:var(--muted);font-size:.74rem}
.chatx{padding:3px 9px;font-size:.74rem}
.chatbody{position:relative;flex:1 1 auto;min-height:0;background:#0f0f0f}
.chatbody iframe{position:absolute;inset:0;width:100%;height:100%;border:0;color-scheme:light} /* dark_theme=1 makes it dark; if YouTube ignored that, 'light' still gives its readable light theme (never white-on-white) */
.chat.closed .chatbody,.chat.closed .chath small{display:none}
.chat.closed .chath{border-bottom:0}
@media (max-width:860px){
  #mvtv,#pstick{display:none!important} /* phones: no TV mode or Add to Sticker Book button under the player (Close stays) */
  .stage.playing{grid-template-columns:1fr}
  .side.chat-on .chat{order:-1} /* phones: player, then the chat, then the map */
  .side.chat-on .chat:not(.closed){height:70vh;min-height:380px;max-height:560px}
  .side.chat-on ~ #player #pchat{display:none}
  #map{height:400px}
  .stage.playing #map{height:auto;aspect-ratio:1} /* square under the player */
  .brand h1{font-size:2.1rem}
  .instruments{width:100%}
  .gauge{flex:1;min-width:0}
}
@media (max-width:600px){ /* four gauges in a row can't fit HH:MM:SSZ: use two rows of two */
  .instruments{display:grid;grid-template-columns:1fr 1fr;gap:8px}
}
@media (max-width:860px){ /* full-width row: while the airport's local time shows, it takes the 'Updated' slot */
  .instruments.haslocal .g-upd{display:none}
}
.gauge[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- live planes ---- */
.planectl{background:none;border:0!important;box-shadow:none!important;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.planebtn{display:flex;align-items:center;gap:7px;padding:6px 10px;background:var(--panel);border:1px solid var(--line2);border-radius:4px;cursor:pointer;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.planebtn svg{width:14px;height:14px;fill:currentColor}
.planebtn:hover{color:var(--text);border-color:var(--muted)}
.planebtn.on{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(56,210,255,.2)}
.planebtn[hidden]{display:none}
.bestbtn{color:#1a1000;background:var(--amber);border-color:var(--amber);font-weight:700;box-shadow:0 0 14px rgba(255,178,36,.35)} /* 'Best right now' (feature 34) */
.bestbtn:hover,.bestbtn:focus-visible{color:#1a1000;background:#ffc457;border-color:#ffc457}
.bestbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bestwhy{margin:-2px 0 2px;max-width:min(640px,calc(100vw - 110px));padding:3px 8px;background:rgba(13,21,34,.92);border:1px solid var(--line2);border-radius:4px;color:var(--muted);font-family:var(--mono);font-size:.62rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bestwhy[hidden]{display:none}
.stage.playing .bestwhy{display:none} /* the stream view's small map: no reason strip squashed over it (the button stays; screen readers still get the reason via aria-describedby) */
.favbtn em{font-style:normal;font-size:.62rem;color:var(--text);background:#16233a;border-radius:3px;padding:1px 6px;letter-spacing:.04em}
.favbtn.on{color:var(--amber);border-color:var(--amber);box-shadow:0 0 12px rgba(255,178,36,.2)}
.favbtn.on em{color:#1a1000;background:var(--amber)}
.planehint{padding:4px 8px;background:rgba(6,10,17,.85);border:1px solid var(--line);border-radius:3px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.plane{background:none;border:none}
.plane svg{display:block;width:22px;height:22px;fill:var(--cyan);stroke:#04080e;stroke-width:1;filter:drop-shadow(0 0 3px rgba(56,210,255,.45))}
.plane.gnd svg{fill:var(--muted);filter:none}
.plpop{padding:10px 12px 2px}
.hud.planes-on .maplabel{top:14px;bottom:auto;left:58px}
.leaflet-container .leaflet-control-attribution{background:rgba(6,10,17,.78);color:var(--muted)}
.leaflet-container .leaflet-control-attribution a{color:var(--cyan)}

/* ---- airport weather strip ---- */
.wx{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:9px 14px;background:#080d16;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--text);font-variant-numeric:tabular-nums}
.wx[hidden]{display:none}
.wxi{white-space:nowrap}
.wxi i{font-style:normal;font-size:.6rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-right:5px}
.wxrwy{color:var(--amber)}
.wxcat{padding:2px 7px;border-radius:3px;font-size:.66rem;font-weight:600;letter-spacing:.12em;color:#04080e}
.wxcat.vfr{background:var(--green)}.wxcat.mvfr{background:#4d9dff}.wxcat.ifr{background:var(--red)}.wxcat.lifr{background:#e05cff}
.wxraw{margin-left:auto}
.wxraw summary{cursor:pointer;font-size:.6rem;letter-spacing:.16em;color:var(--cyan);list-style:none}
.wxraw summary::-webkit-details-marker{display:none}
.wxraw[open]{flex-basis:100%;margin-left:0}
.wxraw code{display:block;margin-top:6px;white-space:normal;word-break:break-word;color:var(--text)}
.wxraw small{display:block;margin-top:3px;font-size:.58rem;color:var(--muted)}

/* ---- day/night ---- */
.leaflet-night-pane,.leaflet-night-pane *{pointer-events:none!important}
.dn{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-2px}
.dn svg{display:block;width:12px;height:12px;fill:currentColor}
.dn.day{color:var(--amber)}
.dn.night{color:#9fb3d1}

/* ---- favourites ---- */
.star{align-self:start;display:flex;padding:4px;margin:-4px -4px 0 0;background:none;border:0;border-radius:4px;cursor:pointer;color:var(--line2)}
.star svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.star:hover,.star:focus-visible{color:var(--muted);outline:0}
.star:focus-visible{box-shadow:0 0 0 2px var(--cyan)}
.star.on{color:var(--amber)}
.star.on svg{fill:currentColor;filter:drop-shadow(0 0 6px rgba(255,178,36,.4))}
.pop .pb{position:relative}
.pop .star{position:absolute;right:8px;top:6px;margin:0;width:auto;padding:4px;background:none;color:var(--line2)}
.pop .star.on{color:var(--amber)}
.pop .code{padding-right:28px}
.pop .pb > strong{padding-right:22px}

/* ---- inbound / outbound list (route-confirmed rows say 'from JFK'; guesses are dimmer and say 'Estimated') ---- */
.plane.arr-in svg{fill:var(--green);filter:drop-shadow(0 0 4px rgba(61,220,132,.6))}
.plane.arr-out svg{fill:var(--amber);filter:drop-shadow(0 0 4px rgba(255,178,36,.6))}
.arr{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding:9px 14px 8px;background:#080d16;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;font-variant-numeric:tabular-nums}
.arr[hidden]{display:none}
.arrh{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.arrh b{font-weight:500}
.arrh::before{content:"";width:7px;height:7px;border-radius:50%}
.arrcol.in .arrh::before{background:var(--green)}
.arrcol.out .arrh::before{background:var(--amber)}
.arrh em{font-style:normal;color:var(--text)}
.arr ul{list-style:none;margin:0;padding:0}
.arr li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr) minmax(0,.6fr) minmax(0,1fr) minmax(0,.7fr);gap:8px;align-items:baseline;padding:3px 0;white-space:nowrap}
.arr li+li{border-top:1px solid rgba(255,255,255,.05)}
.arrreg,.arrtype{padding:0;margin:0;font:inherit;font-size:inherit;text-align:left;font-weight:400;color:var(--muted);background:none;border:0} /* the registration (button: opens Add to Sticker Book) and the type after the callsign */
.arrcard{position:fixed;z-index:1200;width:216px;padding:8px;background:#0b1220;border:1px solid var(--line2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);font-family:var(--mono);font-size:.66rem;color:var(--muted)} /* a registration's Planespotters photo (app.js) */
.arrcard[hidden]{display:none}
.arrcard-pic{display:flex;align-items:center;justify-content:center;width:200px;height:133px;overflow:hidden;border-radius:5px;background:#080d16}
.arrcard-pic img{display:block;width:100%;height:100%;object-fit:cover}
a.arrcard-pic:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.arrcard-msg{color:var(--line2)}
.arrcard p{margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrcard-id{color:var(--text)}
button.arrreg{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
button.arrreg:hover{color:var(--cyan)}
button.arrreg:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-radius:2px}
.arr li > *{overflow:hidden;text-overflow:ellipsis}
.arr li b{font-weight:500;color:var(--text)}
.arr li span{color:var(--muted)}
.arr li > .arrdist{text-align:right}
.arr li .arrtype{color:var(--muted)}
.arr li.none{display:block;color:var(--line2)}
.arr li span.rt{color:var(--text)}
.arr li.est b{font-weight:400;color:var(--muted)}
.arr li.est > .arrest{font-style:italic;opacity:.75}
.arrnote{grid-column:1/-1;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:480px){ .arr{grid-template-columns:1fr} .arr li{gap:6px;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.6fr) minmax(0,1fr) minmax(0,.7fr);font-size:.66rem} } /* callsign, reg, type, route, distance */
/* rare aircraft: badge on cards and popups, marker and tooltip in the planes layer */
.thumb .rare{position:absolute;left:9px;top:34px;max-width:calc(100% - 18px);box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:3px 7px 3px 3px;border-radius:3px;background:rgba(6,10,17,.88);border:1px solid #c77dff;
  color:#ecdcff;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rare b,.rarepop b{flex:none;padding:1px 5px;border-radius:2px;background:#c77dff;color:#16052a;font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rarepop{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-family:var(--mono);font-size:.66rem;color:#ecdcff}
.plane.rare svg{width:26px;height:26px;fill:#c77dff;filter:drop-shadow(0 0 5px rgba(199,125,255,.9))}
.plane.rare.gnd svg{fill:#9a6bc4;filter:drop-shadow(0 0 3px rgba(199,125,255,.6))}
.leaflet-tooltip.raretip{background:#16052a;border:1px solid #c77dff;color:#ecdcff;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;box-shadow:none}
.leaflet-tooltip.raretip::before{border-top-color:#c77dff}
/* runway in use: seen in traffic (small green dot) vs the wind guess (ends in '?') */
.wxrwy.obs::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:2px;box-shadow:0 0 5px rgba(61,220,132,.7)}

/* multi-view: 2 columns of tiles in the player (one column on phones); the tile with sound has an amber edge */
.mv{display:none}
.stage.multi .frame{display:none}
.stage.multi .mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:#000;padding:4px}
.mvt{background:#000;border:1px solid var(--line);border-radius:3px;overflow:hidden;min-width:0}
.mvt.on{border-color:var(--amber)}
.mvhint{display:flex;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--line2);border-radius:3px;color:var(--muted,#8a9bb5);font-size:.85rem;text-align:center;min-height:120px}
.mvsug{grid-column:1/-1;border:1px dashed var(--line2);border-radius:3px;padding:6px;min-width:0}
.mvsh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--muted,#8a9bb5);margin-bottom:6px}
.mvsg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mvsc{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0;padding:6px 8px;background:var(--panel2);border:1px solid var(--line2);border-radius:4px;color:var(--text);cursor:pointer;font-size:.78rem}
.mvsc b{color:var(--amber)}
.mvsc span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mvsc small{color:var(--muted,#8a9bb5)}
.mvnext,.mvmore{padding:4px 12px;background:var(--panel2);border:1px solid var(--line2);border-radius:4px;color:var(--text);cursor:pointer;font-size:.8rem}
.mvmore{width:100%;padding:8px}
@media (max-width:860px){ .mvsg{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stage.tv .mvsug{display:none}
.mvv{position:relative;aspect-ratio:16/9}
.mvv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mvbar{cursor:pointer;display:flex;align-items:center;gap:6px;padding:3px 4px;background:#080d16;font-size:.74rem}
.mvbar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.mvbar button{min-width:28px;height:24px;padding:0 6px;background:var(--panel2);border:1px solid var(--line2);border-radius:4px;color:var(--text);cursor:pointer;font-size:.86rem;line-height:1}
.mvt.on .mvs{border-color:var(--amber)}
#mvbtn[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
@media (max-width:860px){ .stage.multi .mv{grid-template-columns:1fr} }
/* recently live: collapsed list under the cards; each opens the replay on YouTube */
.recent{margin-top:22px;border-top:1px solid var(--line);padding-top:12px}
.recent summary{cursor:pointer;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.recent summary em{font-style:normal;margin-left:8px;padding:1px 6px;border:1px solid var(--line2);border-radius:3px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:12px}
.rcard{display:flex;gap:10px;align-items:flex-start;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:inherit;text-decoration:none}
.rcard:hover{border-color:var(--line2)}
.rcard img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:3px;flex:none;filter:grayscale(.5);background:#000}
img.noimg{object-fit:contain!important;padding:7%;box-sizing:border-box;opacity:.4} /* thumbImg(): the still didn't load, the plane icon keeps the box */
.rcard div{min-width:0}
.rcard h3{margin:0 0 2px;font-size:.84rem;font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rcard p{margin:0;color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard small{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--muted)}
/* TV mode (a redesign): the stage is full screen and nothing is left empty. The video column is exactly as wide as the video needs
   to be at 16:9 (--tvw: as wide as the height allows once the strip, data and bar have their share), so there are no black bars;
   the chat and map take every pixel to its right (chat on top, map below). Under the video the arrivals (Inbound, Outbound, On the
   ground) and the notable movements share the height that is left, and the title bar sits at the bottom. */
.stage.tv{--vr:.5625;--vb:0px;--tvw:min(calc(100vw - 520px),calc((74vh - 120px - var(--vb)) / var(--vr)));
  width:100vw;height:100vh;margin:0;padding:12px;box-sizing:border-box;background:var(--bg);overflow:hidden;gap:12px;
  grid-template-columns:var(--tvw) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.stage.multi.tv:has(.mv[data-n="1"]){--vb:34px}
.stage.multi.tv:has(.mv[data-n="2"]){--vr:.28125;--vb:34px} /* two tiles side by side: a wide, short picture */
.stage.multi.tv:has(.mv[data-n="3"]),.stage.multi.tv:has(.mv[data-n="4"]){--vb:68px} /* 2 x 2: two tile bars */
.stage.tv #player{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto var(--ra,auto) var(--rn,auto) auto;
  align-content:space-between;height:100%;min-height:0;min-width:0}
.stage.tv #player:has(> .arr:not([hidden])){--ra:minmax(auto,1fr)}
.stage.tv #player:has(> .nmv:not([hidden])){--rn:minmax(auto,1fr)}
.stage.tv .ptop{grid-area:1/1/2/-1;justify-content:flex-start;gap:14px}
.stage.tv #player:has(> .wx:not([hidden])) .ptop{grid-column:1}
.stage.tv .wx{grid-area:1/2/2/3;flex-wrap:nowrap;overflow:hidden;padding:0 14px 0 4px;min-width:0}
.stage.tv .wxraw{display:none} /* the raw METAR stays in the strip's tooltip */
.stage.tv #vtop{grid-area:2/1/3/-1;display:block;min-width:0;background:#000}
.stage.tv .frame{aspect-ratio:16/9}
.stage.tv .mv{gap:2px;padding:0;background:#000;grid-template-columns:repeat(2,minmax(0,1fr))}
.stage.tv .mv[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.stage.tv .mvbar{height:34px;box-sizing:border-box}
.stage.tv .mvv{aspect-ratio:16/9}
.stage.tv .mvhint{display:none}
.stage.tv .arr{grid-area:3/1/4/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;align-content:space-evenly;
  font-size:clamp(.62rem,1.4vh,1.15rem);overflow:hidden;min-height:0}
.stage.tv .arr:has(.arrcol.gnd){grid-template-columns:repeat(3,minmax(0,1fr))}
.stage.tv .arrcol.gnd{grid-column:auto}
.stage.tv .arr li{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.15fr) auto;gap:6px}
.stage.tv .arr li .arrtype{display:none} /* the registration stays: it opens Add to Sticker Book */
.stage.tv .arr li:nth-child(n+4){display:none} /* 3 rows a list */
.stage.tv .arrnote{display:none}
.stage.tv .arrcol.in:has(.jl) > ul:not(.jl) li:nth-child(n+3){display:none} /* Just landed sits under Inbound: 2 inbound rows leave it room (it was cut off) */
.stage.tv .nmv{grid-area:4/1/5/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;align-content:space-evenly;
  font-size:clamp(.62rem,1.4vh,1.15rem);border-bottom:0;overflow:hidden;min-height:0}
.stage.tv .nmv[hidden]{display:none}
.stage.tv .nmv > *{min-width:0}
.stage.tv .nmvh{grid-column:1/-1;margin-bottom:0}
.stage.tv .nmv > :nth-child(2),.stage.tv .nmv > :nth-child(3){grid-column:1}
.stage.tv .nmv > :nth-child(4),.stage.tv .nmv > :nth-child(5){grid-column:2}
.stage.tv .nmv > :nth-child(2),.stage.tv .nmv > :nth-child(4){grid-row:2}
.stage.tv .nmv > :nth-child(3),.stage.tv .nmv > :nth-child(5){grid-row:3}
.stage.tv .nmv > .nmvseen{display:none}
.stage.tv .nmvl li:nth-child(n+4){display:none}
.stage.tv .pbar{grid-area:5/1/6/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:8px 12px}
.stage.tv .pbar h2{margin:0;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage.tv .pbar .sub{grid-column:1;font-size:.8rem;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.stage.tv .pbtns{grid-column:2;grid-row:1/3;margin:0;display:flex;gap:6px;flex-wrap:nowrap}
.stage.tv .pbtns .btn{min-height:30px;padding:0 10px;font-size:.78rem;white-space:nowrap}
.stage.tv .side{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0;min-width:0}
.stage.tv .side .chat{flex:1 1 0;min-height:0}
.stage.tv .side .hud{flex:1 1 0;min-height:0}
.stage.tv #map{height:100%;aspect-ratio:auto}
/* notable movements (lib/movements.php): compact, under Inbound / Outbound */
.nmv{padding:7px 14px 7px;background:#080d16;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.68rem;font-variant-numeric:tabular-nums}
.nmv[hidden]{display:none}
.nmvh{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nmvh b{font-weight:500}
.nmvh::before{content:"";width:7px;height:7px;border-radius:50%;background:#b48cff}
.nmvh em{font-style:normal;color:var(--text)}
.nmvcr{margin-left:auto;letter-spacing:.06em;text-transform:none;color:var(--muted);text-decoration:none}
.nmvcr:hover{color:var(--text);text-decoration:underline}
.nmvs{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--line2);margin-top:2px}
.nmvl{list-style:none;margin:0;padding:0}
.nmvl li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr);gap:6px;padding:1px 0;white-space:nowrap}
.nmvl li > *{overflow:hidden;text-overflow:ellipsis}
.nmvl li b{font-weight:500;color:#cdb6ff}
.nmvl li span{color:var(--muted)}
.nmvl li span.wh{color:var(--text)}
.nmvl li span.tm{text-align:right}
.nmvl li.est span.wh{font-style:italic;color:var(--muted)}
.nmvl li.none{display:block;color:var(--line2)}
.nmvseen{margin-top:3px}
.nmvseen summary{cursor:pointer;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nmvseen summary em{font-style:normal;color:var(--text);margin-left:6px}
.nmvseen summary small{margin-left:8px;font-size:inherit;letter-spacing:.06em;text-transform:none;color:var(--line2)}
@media (max-width:480px){ .nmvl li{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)} .nmvl li span.fl{display:none} .nmv > .nmvl li:nth-child(n+4){display:none} }

/* ---- site menu: a departures board (lib/nav.php, nav.js) standing on the runway strip under the header, like signs beside the
   centreline; on phones it is a slim bar fixed at the bottom of the screen. Cream on black split-flap tiles with gate codes;
   the page you're on is a yellow tile. Full screen (TV) shows only #stage, so the menu isn't there. ---- */
.rwy-nav{height:auto;min-height:18px;display:flex;align-items:center;padding:5px 0 5px 14px}
.sitenav{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:0 12px 0 0;background:#0a111b} /* hides the dashes behind it */
.sn-board{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sn-board::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:1px;background:#ffd23f;vertical-align:0}
.sitenav ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.sitenav .sn{display:flex;align-items:center;gap:8px;padding:4px 8px 3px;border:1px solid var(--line2);border-radius:3px;text-decoration:none;color:#f2ecd8;
  background:linear-gradient(180deg,#151b24 0 50%,#0f141c 50% 100%);font-family:var(--mono);font-weight:600;font-size:.74rem;line-height:1.2;transition:border-color .15s}
.sitenav .sn:hover{border-color:#3a4f70}
.sitenav .sn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sn-gate{font-size:.6rem;letter-spacing:.08em;color:#ffd23f}
.sn-flap{display:inline-block;width:calc(var(--w) * var(--cw,1.25ch));white-space:pre;overflow:hidden;letter-spacing:calc(var(--cw,1.25ch) - 1ch);text-transform:uppercase}
.sn-c{display:inline-block;width:var(--cw,1.25ch);letter-spacing:0;text-align:center;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.045) 0 50%,transparent 50%);
  box-shadow:inset -1px 0 rgba(0,0,0,.45);transform-origin:50% 50%}
.sn-c::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.35)}
.sn-c.flip{animation:snflip .18s linear}
@keyframes snflip{0%{transform:scaleY(1)}50%{transform:scaleY(.05)}100%{transform:scaleY(1)}}
.sitenav .sn[aria-current]{color:#120c00;border-color:#ffd23f;background:linear-gradient(180deg,#ffd84f 0 50%,#f3c52c 50% 100%)}
.sitenav .sn[aria-current] .sn-gate{color:#3d2f00}
.sitenav .sn[aria-current] .sn-c{box-shadow:inset -1px 0 rgba(0,0,0,.1)}
.sitenav .sn[aria-current] .sn-c::after{background:rgba(0,0,0,.12)}
@media (min-width:601px) and (max-width:760px){ .sn-board{display:none} }
@media (max-width:600px){ /* phone: a departures bar fixed at the bottom, above the iPhone home bar; the footer clears it */
  .rwy-nav{padding:0}
  .rwy-nav .sitenav{position:fixed;left:0;right:0;bottom:0;z-index:1500;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:#04070c;border-top:1px solid var(--line2);box-shadow:0 -8px 22px rgba(0,0,0,.55)}
  .rwy-nav ~ footer{padding-bottom:calc(34px + 52px + env(safe-area-inset-bottom))}
  .sn-board,.sn-gate{display:none}
  .sitenav ul{flex-wrap:nowrap;width:100%;gap:4px}
  .sitenav li{flex:1 1 auto;display:flex}
  .sitenav .sn{flex:1;justify-content:center;padding:11px 4px 10px;font-size:.62rem;--cw:1.08ch}
  .kb .rwy-nav .sitenav{display:none} /* typing (chat, search): the on-screen keyboard needs the room */
}
@media (max-width:600px){ /* airport pages and /about: the gauges as one compact row, so the page title stays near the top */
  .instruments{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:6px}
  .gauge{padding:6px 8px 7px;min-width:0}
  .gauge span{font-size:.5rem;letter-spacing:.12em;overflow:hidden;text-overflow:clip}
  .gauge strong{font-size:.9rem;margin-top:2px}
}
@media (max-width:380px){ .instruments{gap:5px} .gauge{padding:6px 6px 7px} .gauge span{letter-spacing:.06em} .gauge strong{font-size:.84rem} }

/* ---- home page extras under the map (lib/upcoming.php 'Coming up'); hidden when empty ---- */
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin:0 0 26px}
.extras:empty{display:none}
.stage.playing~.extras,.stage.playing~#out{display:none} /* stream view: just the stream; Coming up and the stream list come back on Close */
.upnext{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:14px 16px 16px;min-width:0}
.upnext[hidden]{display:none}
.up-h{margin:0;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.up-sub{margin:2px 0 12px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.up-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.up-row[hidden]{display:none}
.up-a{display:grid;grid-template-columns:96px 8.2em minmax(0,1fr);gap:12px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:6px;background:#0a111b;color:inherit;text-decoration:none}
.up-a:hover{border-color:var(--line2)}
.up-a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.up-th{display:block;width:96px;height:54px;object-fit:cover;border-radius:4px;background:#111c2d}
.up-when{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);white-space:nowrap}
.up-time{color:#f2ecd8;font-weight:600;font-size:.8rem;text-transform:uppercase}
.up-cd{color:var(--amber);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.up-what{min-width:0}
.up-t{display:block;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-m{display:block;margin-top:2px;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){
  .up-a{grid-template-columns:72px minmax(0,1fr);gap:4px 10px}
  .up-th{grid-row:1 / 3;width:72px;height:40px}
  .up-when{flex-direction:row;gap:8px;align-items:baseline}
}
/* Airport of the day (lib/airportday.php), at the top of /airports */
.apday{margin:0 0 22px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:14px 16px 16px;min-width:0}
.ad-name{margin:0;font-size:1.25rem;font-weight:700;line-height:1.25}
.apday .ad-name a{color:#f2ecd8;text-decoration:none}
.apday .ad-name a:hover,.apday .ad-name a:focus-visible{color:var(--amber);text-decoration:underline}
.ad-code{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--amber);white-space:nowrap}
.ad-place{margin:2px 0 0;color:var(--muted);font-size:.82rem}
.ad-line{margin:10px 0 12px;font-size:.88rem;line-height:1.45}
.ad-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:0 0 14px}
.ad-facts div{border:1px solid var(--line);border-radius:6px;background:#0a111b;padding:7px 10px;min-width:0}
.ad-facts dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ad-facts dd{margin:2px 0 0;font-family:var(--mono);font-size:.8rem;font-weight:600;color:#f2ecd8;overflow-wrap:anywhere}
.ad-links{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0}
.apday .ad-btn{display:inline-block;padding:7px 14px;border-radius:6px;background:var(--amber);color:#111;font-weight:700;font-size:.82rem;text-decoration:none}
.ad-btn:hover{filter:brightness(1.08)}
.apday .ad-map{color:var(--cyan);font-size:.82rem}
.ad-btn:focus-visible,.ad-map:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:600px){ .ad-facts .ad-wx{grid-column:1 / -1} }
/* a 'Coming up' stream in the player area before it is live (app.js upOpen): its thumbnail, start time and countdown */
.upv{position:absolute;inset:0;display:flex;align-items:flex-end;background:#000;overflow:hidden}
.upv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.upv-box{position:relative;width:100%;box-sizing:border-box;padding:28px 18px 16px;background:linear-gradient(180deg,rgba(6,10,17,0),rgba(6,10,17,.88) 38%)}
.upv-box p{margin:0 0 6px}
.upv-badge{display:inline-block;padding:3px 8px;border:1px solid var(--cyan);border-radius:3px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);background:rgba(6,10,17,.7)}
.upv-badge.upv-soon{color:var(--amber);border-color:var(--amber)}
.upv-badge.upv-ended{color:var(--muted);border-color:var(--line2)}
.upv-when{font-size:1rem;color:#fff}
.upv-when time{font-family:var(--mono);font-variant-numeric:tabular-nums}
.upv-wl{color:var(--muted)}
.upv-cd{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.upv-note{max-width:60ch;font-size:.86rem;line-height:1.45;color:#dfe6f2}
.upv-links a{color:var(--cyan);font-size:.86rem}
.upv [hidden]{display:none}
@media (max-width:640px){.upv-box{padding:18px 12px 10px}.upv-box p{margin-bottom:4px}.upv-when{font-size:.86rem}.upv-note{font-size:.76rem;line-height:1.35}}

/* ---- storm alert (lib/storm.php): home page and affected airport pages, only while a Met Office warning is active ---- */
.storms{margin:0 0 16px}
.st-full{display:grid;gap:12px}
.storm{--lv:#ffd43b;position:relative;padding:14px 18px 14px 26px;background:linear-gradient(90deg,rgba(255,212,59,.07),transparent 55%),var(--panel);border:1px solid var(--line2);border-radius:8px;overflow:hidden;min-width:0}
.storm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(-45deg,var(--lv) 0 8px,#111 8px 16px)}
.storm.st-amber{--lv:var(--amber);background:linear-gradient(90deg,rgba(255,178,36,.10),transparent 55%),var(--panel)}
.storm.st-red{--lv:var(--red);background:linear-gradient(90deg,rgba(255,77,90,.12),transparent 55%),var(--panel)}
.st-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.st-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.st-badge{padding:2px 8px;border-radius:3px;background:var(--lv);color:#111;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.st-h{margin:4px 0 2px;font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1.05;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.st-when{margin:0 0 6px;font-family:var(--mono);font-size:.84rem;color:var(--lv);font-variant-numeric:tabular-nums}
.st-areas{margin:0 0 8px;font-size:.86rem;line-height:1.4;color:#dfe6f2}
.st-areas b{color:var(--muted);font-weight:500}
.st-lbl{margin:0 0 6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.st-aps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.st-aps li{display:flex;align-items:stretch;border:1px solid var(--line2);border-radius:4px;background:var(--bg2);font-size:.86rem}
.st-aps li > a:first-child,.st-aps li > span{padding:4px 9px;color:var(--text);text-decoration:none}
.st-aps li > a:first-child:hover{color:var(--cyan)}
.st-aps small{font-family:var(--mono);font-size:.7rem;color:var(--amber);margin-left:4px}
.st-aps li.here{border-color:var(--lv);box-shadow:inset 0 0 0 1px var(--lv)}
.st-live{display:flex;align-items:center;padding:0 8px;border-left:1px solid var(--line2);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-decoration:none}
.st-live::before{content:"";width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--green)}
.st-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:0;padding-top:8px;border-top:1px dashed var(--line2);font-size:.84rem;color:#dfe6f2}
.st-foot a{color:var(--cyan);white-space:nowrap}
.ap .storms{margin-top:14px}
.st-min,.st-max{margin-left:auto;padding:4px 10px;background:transparent;border:1px solid var(--line2);border-radius:4px;color:var(--muted);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.st-min:hover,.st-max:hover{color:var(--text);border-color:var(--muted)}
.st-min:focus-visible,.st-max:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.st-bar{--lv:#ffd43b;display:none;align-items:center;gap:10px;position:relative;padding:7px 10px 7px 22px;background:var(--panel);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.st-bar.st-amber{--lv:var(--amber)} .st-bar.st-red{--lv:var(--red)}
.st-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:repeating-linear-gradient(-45deg,var(--lv) 0 6px,#111 6px 12px)}
.st-bar ul{flex:1 1 0;display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;padding:0;list-style:none;min-width:0;font-size:.86rem}
.st-bar li{--lv:#ffd43b;max-width:100%;overflow-wrap:anywhere} .st-bar li span{white-space:nowrap} /* a narrow phone wraps the level onto its own line, never cut short */
.st-max{flex:none} .st-bar li.st-amber{--lv:var(--amber)} .st-bar li.st-red{--lv:var(--red)}
.st-bar li b{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-right:4px}
.st-bar li::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:2px;background:var(--lv);vertical-align:1px}
.multi .st-full{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.multi .st-full > .st-foot{grid-column:1/-1;padding:8px 12px;border:1px solid var(--line2);border-radius:6px;background:var(--panel)}
@media (max-width:600px){ .storm{padding:12px 12px 12px 20px} .storm::before{width:7px} .st-h{font-size:1.5rem} .st-when{font-size:.78rem} }
@media (max-width:600px){ /* several storms on a phone: compact, so two or three don't push the map far down */
  .multi .st-full{gap:8px} .multi .storm{padding:9px 10px 9px 18px} .multi .st-h{font-size:1.25rem;margin:2px 0 0} .multi .st-when{margin-bottom:3px;font-size:.72rem}
  .multi .st-areas{margin-bottom:5px;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .multi .st-kicker,.multi .st-lbl{display:none} .multi .st-aps{gap:4px;margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .multi .st-aps li{flex:none;font-size:.76rem} .multi .st-aps li > a:first-child,.multi .st-aps li > span{padding:3px 7px}
  .multi .st-full > .st-foot{font-size:.76rem;padding:6px 10px}
}
.bestbtn,.bestwhy{display:none!important} /* Best right now: removed from the map */

/* paging: 10 streams / stickers at a time */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 6px}
.pager-info{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pager .btn:disabled{opacity:.45;cursor:default}

/* stream view: the stream's title sits just above the video; the Streams and Airfields counters aren't shown */
.ptitle{margin:0;padding:10px 14px 9px;font-size:1.02rem;line-height:1.3;font-weight:600;background:#080d16;border-bottom:1px solid var(--line)}
.ptitle:empty{display:none}
.stage:not(.tv) .pbar h2{display:none}
.stage.tv .ptitle{display:none}
body.streaming .gauge:has(#cnt-live),body.streaming .gauge:has(#cnt-fields){display:none}

/* =====================================================================
   Stream view, redesigned: a title bar over the video, an info strip, and on phones three tabs under a pinned video
   ===================================================================== */
.vtabs{display:none}
.ptitle{display:flex;align-items:center;gap:10px;padding:11px 14px 10px;font-size:1.04rem;font-weight:600;line-height:1.25;letter-spacing:.005em;background:linear-gradient(180deg,#0a1220,#080d16);border-bottom:1px solid var(--line)}
.ptitle::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(60,220,140,.18);animation:blink 1.4s infinite}
.stage.playing .ptop{display:none} /* the live dot now sits in the title bar; the airport code is in the info line */
.stage.tv .ptop{display:flex}
.pbar{padding:12px 14px 14px;background:#0a111b}
.pbar .sub{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;font-size:.86rem}
.pbtns{gap:8px;margin-top:10px}
.pbtns a,.pbtns .btn{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#0e1828;border:1px solid var(--line2);color:var(--text);font-size:.84rem;text-decoration:none;cursor:pointer}
.pbtns a{color:var(--cyan)}
.pbtns a:hover,.pbtns .btn:hover,.pbtns a:focus-visible,.pbtns .btn:focus-visible{border-color:var(--cyan);outline:none}
.pbtns .stkbtn{border-color:var(--amber);color:var(--amber)}
.pbtns #pclose{color:var(--muted)}
.arr{padding:12px 14px 10px}
.arr li{padding:2px 0}

@media (max-width:860px){
  /* the stream view as one column: [title + video + tabs] pinned at the top, then the info line, then the chosen tab */
  .stage.playing:not(.tv){display:flex;flex-direction:column;gap:0;margin-bottom:18px}
  .stage.playing:not(.tv) #player,.stage.playing:not(.tv) .side{display:contents}
  .stage.playing:not(.tv) #vtop{order:0;position:sticky;top:var(--hh,0px);z-index:1200;background:#05080f;border:1px solid var(--line2);border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.45)}
  .stage.playing:not(.tv) .vtabs{display:grid;grid-template-columns:repeat(3,1fr);background:#080d16;border-top:1px solid var(--line)}
  .vtabs button{position:relative;padding:12px 6px 11px;background:none;border:0;color:var(--muted);font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer}
  .vtabs button[aria-selected="true"]{color:var(--text)}
  .vtabs button[aria-selected="true"]::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--amber)}
  .vtabs button:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
  .stage.playing:not(.tv) .pbar{order:1;border:1px solid var(--line2);border-top:0;background:#0a111b}
  /* panels: only the chosen tab shows (the map stays laid out off-screen so Leaflet keeps its size) */
  .stage.playing:not(.tv) .wx,.stage.playing:not(.tv) .arr,.stage.playing:not(.tv) .nmv{order:2;border:1px solid var(--line2);border-top:0}
  .stage.playing:not(.tv) .nmv{border-bottom:1px solid var(--line2)}
  .stage.playing:not(.tv) .hud{order:2;margin-top:10px}
  .stage.playing:not(.tv) #chat{order:2;margin-top:10px;height:min(66vh,560px);min-height:360px}
  .stage.playing:not(.tv) #chat .chatx{display:none}
  .stage.playing:not(.tv) #chat .chath small{display:none}
  .stage[data-tab="chat"] .hud,.stage[data-tab="chat"] .wx,.stage[data-tab="chat"] .arr,.stage[data-tab="chat"] .nmv,
  .stage[data-tab="airport"] #chat,.stage[data-tab="map"] #chat,.stage[data-tab="map"] .wx,.stage[data-tab="map"] .arr,.stage[data-tab="map"] .nmv{display:none!important}
  .stage.playing[data-tab="airport"]:not(.tv) .hud{position:absolute;left:-9999px;width:min(100vw,860px);height:60vh;visibility:hidden;margin:0} /* keeps its size, shows nothing */
  .stage.playing:not(.tv) .hud #map{aspect-ratio:auto;height:max(58vh,360px)}
  .stage.playing:not(.tv) #chat .chatbody{min-height:300px}
  .stage.playing:not(.tv) .pbtns #mvtv,.stage.playing:not(.tv) .pbtns #pstick{display:none!important}
  /* less header while watching: just the logo and the airport's local time */
  body.streaming .runway:not(.rwy-nav){display:none}
  body.streaming .brand p{display:none}
  body.streaming .brand svg{width:34px;height:34px}
  body.streaming .brand h1{font-size:1.7rem}
  body.streaming .instruments .gauge:not(#g-local){display:none}
  body.streaming .instruments{display:flex;width:auto}
  body.streaming .topbar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding-bottom:0}
  body.streaming .topbar{position:sticky;top:0;z-index:1300;background:var(--bg);padding:10px 0 10px;margin:0}
  body.streaming .rwy-nav ~ footer{padding-bottom:34px}
  body.streaming .gauge#g-local{min-width:0;padding:5px 10px 6px}
  body.streaming .gauge#g-local strong{font-size:1.05rem}
  body.streaming .runway.rwy-nav{height:0;min-height:0;margin:8px 0 0;padding:0;border:0;background:none}
  body.streaming .runway.rwy-nav::after{display:none}
}
@media (max-width:860px) and (max-height:520px){ .stage.playing:not(.tv) #vtop,body.streaming .topbar{position:static} } /* landscape phones: the pinned video would fill the screen */

.chlink{color:var(--text);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}.chlink:hover,.chlink:focus-visible{color:var(--cyan);text-decoration-color:var(--cyan);outline:none}

/* ---- the menu on phones and tablets: a button in the header and a panel under it (no bar at the bottom) ---- */
.menubtn,.menuscrim,.sn-txt,.sn-hd,.sn-rwy,.sn-ft,.sn-st,.sn-sub{display:none}
@keyframes snflip{from{opacity:0;transform:perspective(500px) rotateX(-80deg);transform-origin:50% 0}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.menu-open .sitenav li .sn{animation:none!important}}
@media (max-width:860px){
  .topbar{position:relative}
  .menubtn{display:inline-flex;flex:none;align-items:center;gap:8px;order:2;position:static;min-height:40px;padding:0 14px 0 12px;background:#0e1828;border:1px solid var(--line2);border-radius:999px;color:var(--text);font:600 .9rem var(--sans);cursor:pointer}
  .menubtn svg{width:18px;height:18px}
  .menubtn:hover,.menubtn:focus-visible,.menu-open .menubtn{border-color:var(--amber);outline:none}
  .menu-open .menubtn{color:var(--amber)}
  .topbar .brand{order:1}
  .topbar .instruments{order:3}
  body.streaming .topbar .instruments{order:2;width:auto}
  body.streaming .topbar .menubtn{order:3;position:static;min-height:44px;min-width:44px;justify-content:center;padding:0 12px}
  body.streaming .menubtn span{display:none}
  body.streaming .topbar .brand{margin-right:auto}
  .runway.rwy-nav{height:0;min-height:0;margin:0 0 16px;padding:0;border:0;background:none} /* keeps the gap between the gauges and the map */
  .runway.rwy-nav::after{display:none}
  .rwy-nav ~ footer,body.streaming .rwy-nav ~ footer{padding-bottom:34px}
  /* the panel */
  .rwy-nav .sitenav{display:none;position:fixed;left:12px;right:12px;top:calc(var(--hh,70px) + 6px);bottom:auto;z-index:1700;padding:8px;background:#0a111c;border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
  .menu-open .rwy-nav .sitenav{display:block}
  .sitenav .sn-board{display:none}
  .sitenav ul{flex-direction:column;flex-wrap:nowrap;gap:2px;width:auto}
  .sitenav li{display:block;flex:none}
  .sitenav .sn,.sitenav .sn.sn-extra{display:flex;align-items:center;min-height:50px;padding:0 16px;border:0;border-radius:10px;background:none;color:var(--text);font:600 1.05rem var(--sans);letter-spacing:0;text-transform:none}
  .sitenav .sn-flap{display:none}
  .sitenav .sn-txt{display:block}
  /* the panel as a departures board */
  .rwy-nav .sitenav{padding:0;background:linear-gradient(180deg,#0b1424,#08101b);overflow:hidden;border-radius:16px;max-height:calc(100vh - var(--hh,70px) - 24px);overflow-y:auto}
  .sitenav .sn-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0a1220;border-bottom:1px solid var(--line2);font:600 .75rem var(--mono);letter-spacing:.2em;color:var(--amber)}
  .sitenav .sn-hd span:last-child{color:var(--cyan);letter-spacing:.08em}
  .sitenav ul{padding:6px 8px 4px}
  .sitenav li+li .sn{border-top:1px dashed #1b2b43;border-radius:0}
  .sitenav .sn,.sitenav .sn.sn-extra{display:grid;grid-template-columns:44px 1fr auto;gap:10px;min-height:58px;padding:10px 8px;border-radius:10px}
  .sitenav .sn-gate{display:block;font:700 .95rem var(--mono);color:#08101c;background:var(--amber);border-radius:6px;text-align:center;padding:5px 0}
  .sitenav .sn-nm{display:block;min-width:0}
  .sitenav .sn-txt{display:block;font:700 1.2rem/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
  .sitenav .sn-sub{display:block;margin-top:2px;font:.68rem var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:none}
  .sitenav .sn-st{display:flex;align-items:center;gap:6px;font:600 .62rem var(--mono);letter-spacing:.14em;color:#5b6d88}
  .sitenav .sn-st::before{content:"";width:7px;height:7px;border-radius:50%;background:#34455f}
  .sitenav .sn-st.live{color:var(--green)}.sitenav .sn-st.live::before{background:var(--green);box-shadow:0 0 0 3px rgba(61,220,132,.18)}
  .sitenav .sn-st.soon{color:var(--amber)}.sitenav .sn-st.soon::before{background:var(--amber);box-shadow:0 0 0 3px rgba(255,178,36,.2)}
  .sitenav .sn:hover,.sitenav .sn:focus-visible{background:#111c2d;outline:none}
  .sitenav .sn[aria-current]{background:linear-gradient(90deg,rgba(255,178,36,.16),rgba(255,178,36,.03));color:var(--text);border:0;box-shadow:inset 0 0 0 1px rgba(255,178,36,.5)}
  .sitenav .sn-rwy{display:flex;align-items:center;position:relative;height:26px;margin:0 16px}
  .sitenav .sn-rwy::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed #2a3d5b}
  .sitenav .sn-rwy svg{position:relative;width:20px;height:20px;fill:var(--amber);margin-left:34%;background:#08101b;padding:0 4px;box-sizing:content-box}
  .sitenav .sn-ft{display:flex;justify-content:flex-end;padding:10px 16px 14px}
  .sitenav .sn-kids{padding:7px 14px;border:1px solid var(--line2);border-radius:999px;background:none;color:var(--text);font:600 .72rem var(--mono);letter-spacing:.12em;text-decoration:none;cursor:pointer}
  .sitenav .sn-kids:hover,.sitenav .sn-kids:focus-visible{border-color:var(--amber);outline:none}
  .sitenav .sn-install{width:100%;text-align:left}
  .menu-open .sitenav li .sn{animation:snflip .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * 45ms)}
  .menuscrim{display:block;position:fixed;inset:0;z-index:1600;background:rgba(2,5,10,.55)}
  .menuscrim[hidden]{display:none}
  .kb .rwy-nav .sitenav{display:none}
}

/* ---- stream view on phones, slimmer: one thin bar on top, an edge-to-edge player, so less of the screen is pinned ---- */
@media (max-width:860px){
  body.streaming .topbar{margin:0 -20px;padding:6px 14px;min-height:0;gap:10px;flex-wrap:nowrap;background:rgba(6,10,17,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  body.streaming .brand{gap:8px}
  body.streaming .brand svg{width:28px;height:28px}
  body.streaming .brand h1{font-size:1.35rem;letter-spacing:.12em}
  body.streaming .gauge#g-local{display:flex;align-items:baseline;gap:7px;min-width:0;padding:0;background:none;border:0;box-shadow:none;margin-left:auto}
  body.streaming .gauge#g-local span{font-size:.58rem}
  body.streaming .gauge#g-local strong{margin:0;font-size:.95rem;text-shadow:none}
  body.streaming .topbar .instruments{margin-left:auto}
  body.streaming .topbar .brand{margin-right:0}
  body.streaming .topbar .menubtn{min-height:36px;min-width:36px;padding:0 9px}
  body.streaming .runway.rwy-nav{margin:0}
  .stage.playing:not(.tv){margin-top:0}
  .stage.playing:not(.tv) #vtop{margin:0 -20px;border-radius:0;border-inline:0;box-shadow:0 6px 14px rgba(0,0,0,.4)}
  .stage.playing:not(.tv) .ptitle{padding:8px 14px 7px;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;position:relative;padding-left:32px}
  .stage.playing:not(.tv) .ptitle::before{position:absolute;left:14px;top:50%;margin-top:-4.5px}
  .vtabs button{padding:10px 6px 9px}
  .stage.playing:not(.tv) .pbar,.stage.playing:not(.tv) .wx,.stage.playing:not(.tv) .arr,.stage.playing:not(.tv) .nmv{margin-inline:-20px;border-radius:0;border-inline:0}
  .stage.playing:not(.tv) .hud,.stage.playing:not(.tv) #chat{margin-inline:-20px}
  .stage.playing:not(.tv) .hud #map,.stage.playing:not(.tv) #chat{border-radius:0;border-inline:0}
  .stage.playing:not(.tv) .hud::before,.stage.playing:not(.tv) .hud::after{display:none}
}

/* phones, every page but the stream view: the logo and the Menu button share the first row; the gauges go on the next */
@media (max-width:860px){
  .topbar{flex-wrap:wrap;align-items:center;gap:12px 10px}
  .topbar .brand{order:1;flex:1 1 0;min-width:0}
  .topbar .brand>div,.topbar .brand>span{min-width:0}
  .topbar .brand p{white-space:normal;line-height:1.35;letter-spacing:.14em}
  .topbar .menubtn{order:2;margin-left:0}
  .topbar .instruments{order:3;flex:1 0 100%}
}
@media (max-width:860px){
  body.streaming .topbar{flex-wrap:nowrap}
  body.streaming .topbar .brand{flex:0 1 auto}
  body.streaming .topbar .instruments{flex:0 0 auto;order:2}
}

.sn-install{display:none}
@media (max-width:860px){
  .sitenav button.sn{width:100%;text-align:left;cursor:pointer;font-family:var(--sans)}
  .sitenav .sn-install{display:flex;color:var(--cyan)}
  .sitenav .sn-hint{margin:0;padding:2px 16px 12px;color:var(--muted);font-size:.9rem;line-height:1.4}
  .sitenav .sn-hint[hidden]{display:none}
}

/* inbound / outbound: a second line per aircraft (what it's doing, runway, height, landing time) and an 'on the ground' list */
.arr li .arrstage{grid-column:1/-1;margin-top:-1px;font-size:.62rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);opacity:.9}
.arr li .arrstage.hot{color:var(--amber);opacity:1}
.arr li.est .arrstage{opacity:.9}
.arrcol.gnd{grid-column:1/-1}
.arrcol.gnd .arrh::before{background:#7d90ad}
.stage.tv .arr li .arrstage{display:none}

/* stream fallback bar (shown under the video when a stream ends or can't play) */
.fbbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;padding:8px 12px;background:var(--panel);border-left:3px solid var(--amber);font-size:.88rem}
.fbbar[hidden],.stage:not(.playing) .fbbar{display:none}
.fbtxt{flex:1 1 100%}
.fbgo{padding:6px 12px;min-height:34px;text-align:left}
.fbgo b{color:var(--cyan)}

/* shiny aircraft in the Inbound / Outbound / On the ground lists */
.arr li.shiny{background:linear-gradient(90deg,rgba(255,210,122,.18),rgba(255,210,122,.04) 75%,transparent);box-shadow:inset 3px 0 0 #ffd27a;padding-left:7px;margin-left:-7px;border-radius:0 3px 3px 0}
.arr li.shiny>b:first-child{color:#ffd27a}
.arr li.shiny>b:first-child::before{content:"✦ ";font-weight:400}
.arr li.shiny .arrreg{color:#ffd27a}

/* Spotted now: alerts toggle */
.spotnow .al-toggle{margin:6px 0 2px;padding:4px 12px;min-height:30px;font-size:.78rem;border-color:#c77dff;color:#c77dff;background:none}
.spotnow .al-toggle.on{background:#c77dff;color:#16052a}

/* sky time-lapse */
.clipbtn{margin:8px 0 2px;padding:5px 12px;font-size:.78rem}
.clipdlg{max-width:min(96vw,680px)}
.clipbody{padding:0 14px 14px}
.clipcv{display:block;width:100%;max-width:520px;margin:0 auto;height:auto;aspect-ratio:720/880;background:#04060b;border-radius:8px}
.clipbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.clipmsg{margin:4px 0 0}

/* kids' mode */
.kids-switch{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--cyan);text-decoration:underline;cursor:pointer}
html.kids{--cyan:#5ee7ff;--amber:#ffd23f;--green:#6dfc9a;--panel:#14264a;--panel2:#1a3160;--line:#2c4a82;--line2:#3a5fa3;font-size:112%}
html.kids body{background:linear-gradient(180deg,#0a1a3a,#102a5a)}
html.kids .btn,html.kids button{border-radius:14px}
html.kids #chat,html.kids #chatx,html.kids #vtabs [data-tab="chat"],html.kids #arr,html.kids .chlink,
html.kids #sbswapsec,html.kids #sbboard,html.kids #sbfriends,html.kids #sb-account,html.kids .sb-follow-wrap,html.kids .stk-flip,
html.kids footer a[href*="facebook"],html.kids .al-toggle,html.kids .clipbtn{display:none!important}
.kidspanel{margin:0 0 12px;padding:14px;background:var(--panel);border:2px solid var(--amber);border-radius:18px}
.kidspanel[hidden]{display:none}
.kids-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kids-head h2{margin:0;flex:1;font-size:1.5rem;color:var(--amber)}
.kids-count{font:700 1.3rem var(--mono);color:var(--cyan)}
.kids-stars{font-weight:700}
.kids-bar{height:14px;margin:10px 0;border-radius:999px;background:#0a1a3a;overflow:hidden}
.kids-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--amber));border-radius:999px;transition:width .4s}
.kids-hint{margin:6px 0 10px;font-size:1.05rem}
.kids-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kids-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;background:var(--panel2);border:2px solid var(--line2);border-radius:16px}
.kids-list li.got{border-color:var(--green);opacity:.85}
.kids-em{font-size:2rem;line-height:1;width:2.4rem;text-align:center}
.kids-tx{min-width:0}
.kids-tx b{display:block;font-size:1.05rem;line-height:1.3;overflow-wrap:anywhere}
.kids-near{display:block;margin-top:3px;color:var(--amber);font-size:.9rem}
.kids-btn{min-width:3.4rem;padding:10px 14px;font-size:.95rem;font-weight:700;background:var(--amber);color:#2a1d00;border:0;white-space:nowrap}
.kids-btn:disabled{background:var(--green);color:#052a14;opacity:1}
.kids-new{display:block;margin:12px auto 0;padding:9px 18px;font-weight:700;background:none;border:2px solid var(--line2);color:var(--text)}
.kids-party{position:fixed;inset:0;z-index:4000;pointer-events:none;overflow:hidden}
.kids-party span{position:absolute;top:-10%;animation:kidfall 2.6s ease-in forwards}
@keyframes kidfall{to{transform:translateY(120vh) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kids-party span{animation:none;display:none}}
.kids-tx b{font-weight:600;font-size:1rem}
.kids-em{font-size:1.8rem}
@media (max-width:640px){.kidspanel{padding:12px}.kids-list li{padding:9px 10px;gap:10px}}

/* ===== Homepage redesign: control-tower night view (body.home only; other pages keep the base look) ===== */
body.home{
  background:
    radial-gradient(900px 420px at 18% -8%,rgba(56,210,255,.10),transparent 70%),
    radial-gradient(800px 520px at 100% 108%,rgba(255,178,36,.07),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
body.home :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
body.home .runway{margin:14px 0 14px}

/* hero: a glass panel sitting on the map */
body.home .hero{position:absolute;left:18px;bottom:30px;z-index:800;width:min(390px,calc(100% - 36px));padding:18px 20px 18px;
  background:rgba(6,10,17,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
body.home .hero-n{margin:0;font-family:var(--display);font-weight:600;font-size:1.7rem;line-height:1.05;letter-spacing:.01em;color:var(--text)}
body.home .hero-n b{display:block;font-weight:700;font-size:4.6rem;line-height:.95;letter-spacing:-.01em;color:var(--amber);font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(255,178,36,.28)}
body.home .hero-s{margin:10px 0 14px;max-width:34ch;color:var(--muted);font-size:.92rem;line-height:1.45}
body.home .hero-s span{color:var(--text);font-family:var(--mono);font-size:.84rem}
body.home .hero-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
body.home .hero-go{padding:10px 18px;border:0;border-radius:6px;background:var(--amber);color:#1a1000;font-weight:700;font-size:.92rem;cursor:pointer}
body.home .hero-go:hover{background:#ffc457}
body.home .hero-all{color:var(--cyan);font-size:.88rem;text-decoration:none}
body.home .hero-all:hover{text-decoration:underline;text-underline-offset:3px}
body.home .stage.playing .hero,body.home .stage.tv .hero{display:none}
body.home .stage:not(.playing) .maplabel{display:none}
body.home .stage:not(.playing) #map{height:clamp(480px,calc(100vh - 210px),780px);border-radius:12px}

/* stream cards: boarding passes */
body.home .count{margin:0 0 14px;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--text)}
body.home .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
body.home .card{border-radius:12px;border-color:var(--line2);background:linear-gradient(180deg,var(--panel2),var(--panel))}
body.home .card:hover,body.home .card:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.45)}
body.home .cbody{position:relative;margin-top:-1px;padding:16px 14px 14px;border-top:2px dashed var(--line2);gap:14px;align-items:start}
body.home .cbody::before,body.home .cbody::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:1px solid var(--line2)}
body.home .cbody::before{left:-9px}
body.home .cbody::after{right:-9px}
body.home .codebox{min-width:0;padding:0 14px 0 2px;background:none;border:0;border-right:1px dashed var(--line2);border-radius:0;text-align:left;
  font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1;letter-spacing:.04em;text-shadow:none}
body.home .codebox small{margin-top:5px;font-family:var(--mono);font-size:.5rem}
body.home .ctext h3{font-size:1rem}
body.home .thumb{border-radius:0}

/* panels share one radius */
body.home .upnext,body.home #player,body.home .chat{border-radius:12px}

/* desktop: instruments as a quiet readout, no boxes */
@media (min-width:861px){
  body.home .topbar{padding-top:18px}
  body.home .brand h1{font-size:2.3rem}
  body.home .instruments{gap:0}
  body.home .gauge{min-width:0;padding:2px 18px;background:none;border:0;border-left:1px solid var(--line2);border-radius:0;box-shadow:none}
  body.home .gauge:first-child{border-left:0}
  body.home .gauge strong{font-size:1.1rem}
}

/* tablet and phone: the hero drops below the map instead of covering it */
@media (max-width:860px){
  body.home .hero{position:static;width:auto;margin-top:10px;padding:14px 16px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}
  body.home .hero-n{display:flex;align-items:baseline;gap:10px;font-size:1.3rem}
  body.home .hero-n b{display:inline;font-size:3rem}
  body.home .hero-s{max-width:none}
  body.home .stage:not(.playing) #map{height:min(62vh,460px)}
  body.home .grid{grid-template-columns:1fr}
}

/* Inbound / Outbound / On the ground: each list folds on its own (open by default; remembered) */
.arrh[role=button]{cursor:pointer;user-select:none}
.arrh[role=button]:hover{color:var(--text)}
.arrh[role=button]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.arrchev{margin-left:auto;width:6px;height:6px;border:solid var(--cyan);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px)}
.arrcol.shut .arrchev{transform:rotate(-135deg) translate(-1px,-1px)}
.arrcol.shut ul{display:none}
.arrcol.shut .arrh{margin-bottom:0}
.stage.tv .arrchev{display:none}
.stage.tv .arrcol.shut ul{display:block}

/* Crosswind watch */
.thumb .xw{position:absolute;left:9px;bottom:9px;max-width:calc(100% - 110px);box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:3px 7px 3px 3px;border-radius:3px;background:rgba(6,10,17,.88);border:1px solid #ffb347;font-family:var(--mono);font-size:.64rem;color:#ffe3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xw b{flex:none;padding:1px 5px;border-radius:2px;background:#ffb347;color:#2a1700;font-size:.56rem;font-weight:700;letter-spacing:.06em}
.xw.strong{border-color:#ff6b5a}.xw.strong b{background:#ff6b5a;color:#2a0500}
.pxw{padding:6px 12px;background:#080d16;border-bottom:1px solid var(--line)}.pxw[hidden]{display:none}.pxw .xw{display:inline-flex}
.chpage{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;font-size:.9em}.chpage:hover,.chpage:focus-visible{color:var(--amber)}

/* ---- phones turned sideways (short, wide screens): a slim header, a map that fills the screen, and the stream with the video fixed on the left and the airport panels beside it ---- */
@media (orientation:landscape) and (max-height:520px) and (max-width:960px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .topbar{padding:6px 0;gap:10px;margin-bottom:6px}
  .brand p,.instruments{display:none}
  .brand svg{width:30px;height:30px}.brand h1{font-size:1.45rem}
  .menubtn{min-height:34px;padding:0 12px 0 10px;font-size:.85rem}
  body.home .stage:not(.playing) #map{height:calc(100vh - 80px);height:calc(100dvh - 80px);min-height:250px}
  body.home .hero{left:12px;bottom:12px;width:min(330px,calc(100% - 24px));padding:10px 14px;display:block}
  body.home .hero-n{display:flex;align-items:baseline;gap:8px;font-size:1.05rem}
  body.home .hero-n b{display:inline;font-size:2.1rem}
  body.home .hero-s{display:none}
  body.home .hero-a{margin-top:8px}
  body.home .hero-go{padding:7px 14px;font-size:.85rem}
  .maplabel{display:none}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:860px){
  /* the stream: the video and its tabs stay on the left while the weather, arrivals and movements scroll on the right */
  .stage.playing:not(.tv){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:12px;row-gap:0;align-items:start;margin-bottom:12px}
  .stage.playing:not(.tv) #vtop{grid-column:1;grid-row:1 / span 30;position:sticky;top:6px;align-self:start;margin:0;border-radius:10px}
  .stage.playing:not(.tv) .pbar{grid-column:1;grid-row:31;border:1px solid var(--line2);border-radius:10px;margin:10px 0 0}
  .stage.playing:not(.tv) .wx,.stage.playing:not(.tv) .arr,.stage.playing:not(.tv) .nmv,.stage.playing:not(.tv) .hud,.stage.playing:not(.tv) #chat{grid-column:2;margin:0;border-radius:10px;border:1px solid var(--line2)}
  .stage.playing:not(.tv) .wx,.stage.playing:not(.tv) .arr,.stage.playing:not(.tv) .nmv,.stage.playing:not(.tv) .hud,.stage.playing:not(.tv) #chat{margin-bottom:10px}
  .stage.playing:not(.tv) .arr{grid-template-columns:1fr}
  .stage.playing:not(.tv) .hud #map{height:max(60vh,240px)}
  .stage.playing:not(.tv) #chat{height:calc(100vh - 20px);height:calc(100dvh - 20px);min-height:240px;max-height:none}
  .stage.playing:not(.tv) .ptitle{font-size:.88rem;padding:7px 10px 6px}
  .stage.playing:not(.tv) .vtabs button{padding:8px 6px 7px;font-size:.82rem}
  /* never taller than the screen: the video's width follows the height that is left */
  .stage.playing:not(.tv) #vtop .frame{max-height:calc(100vh - 108px);max-height:calc(100dvh - 108px);width:100%;margin:0 auto}
  body.streaming .topbar{padding:4px 0}
}

#notice a.aplink{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.arrsub{margin-top:8px}

/* kids' mode redesign: bright, big, picture-first, ALL CAPITALS */
html.kids{font-size:118%}
html.kids body{text-transform:uppercase;font-family:ui-rounded,"Nunito","Trebuchet MS",system-ui,sans-serif}
html.kids .sf,html.kids footer .sf-links,html.kids footer nav{display:none!important}
html.kids-hubopen{overflow:hidden}
.kids-home{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:14px;z-index:3000;min-height:56px;padding:12px 26px;border:0;border-radius:999px;background:#fff;color:#0b1b3d;font:900 1.1rem ui-rounded,"Trebuchet MS",system-ui,sans-serif;box-shadow:0 5px 0 rgba(0,0,0,.25);cursor:pointer;text-transform:uppercase}
.kids-home:active,.kh-tile:active,.kh-big:active,.kids-btn:active{transform:translateY(3px);box-shadow:none}
.kids-hub{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;overflow-y:auto;padding:16px 16px 0;color:#fff;text-transform:uppercase;font-family:ui-rounded,"Nunito","Trebuchet MS",system-ui,sans-serif;background:linear-gradient(180deg,#1b6fe0,#6bb8ff 65%,#cfe9ff)}
.kh-top{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:640px;width:100%;margin:0 auto}
.kh-pill{white-space:nowrap;background:#fff;color:#0b1b3d;border-radius:999px;padding:10px 16px;font-weight:900;font-size:1rem;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.kh-round{width:56px;height:56px;border-radius:50%;border:0;background:#fff;font-size:1.6rem;box-shadow:0 4px 0 rgba(0,0,0,.18);cursor:pointer}
.kh-body{max-width:640px;width:100%;margin:0 auto;flex:1}
.kh-body h1{font-size:2.1rem;line-height:1.05;margin:22px 4px 4px;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.kh-sub{margin:0 4px 16px;font-size:1.15rem;font-weight:700}
.kh-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kh-tile{border:0;border-radius:26px;min-height:150px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:900 1.35rem ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#0b1b3d;text-align:center;box-shadow:0 7px 0 rgba(0,0,0,.2);cursor:pointer;text-transform:uppercase}
.kh-tile i{font-style:normal;font-size:3.6rem;line-height:1}.kh-tile small{font-size:.95rem;font-weight:700}
.k1{background:#ffd23f}.k2{background:#4de08f}.k3{background:#ff6b6b;color:#fff}.k4{background:#fff}.k5{background:linear-gradient(90deg,#7a4dff,#b86bff);color:#fff}
.kh-wide{grid-column:1/-1;min-height:96px;flex-direction:row;gap:16px;justify-content:flex-start;padding:14px 22px;text-align:left}.kh-wide i{font-size:3rem}.kh-wide b{display:block}
.kh-fact{background:#fff;color:#0b1b3d;border-radius:26px;padding:20px;margin-top:22px;box-shadow:0 7px 0 rgba(0,0,0,.2)}
.kh-fact h2{margin:0 0 10px;font-size:1.3rem;color:#7a4dff}.kh-fact p{margin:0 0 18px;font-size:1.6rem;line-height:1.3;font-weight:800;text-transform:none}
.kh-big{display:block;width:100%;min-height:64px;margin-top:12px;border:0;border-radius:20px;background:#ffd23f;color:#0b1b3d;font:900 1.2rem ui-rounded,"Trebuchet MS",system-ui,sans-serif;box-shadow:0 5px 0 rgba(0,0,0,.2);cursor:pointer;text-transform:uppercase}
.kh-alt{background:#eef4ff}
.kh-bot{padding:26px 0 18px;text-align:center}
.kh-hold{position:relative;overflow:hidden;border:0;border-radius:999px;padding:12px 18px;background:rgba(0,0,0,.28);color:#fff;font:800 .85rem ui-rounded,system-ui,sans-serif;cursor:pointer;text-transform:uppercase;-webkit-user-select:none;user-select:none;touch-action:none}
.kh-hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.35)}.kh-hold span{position:relative}
.kh-hold.go i{width:100%;transition:width 1.6s linear}
.kh-tile:focus-visible,.kh-big:focus-visible,.kh-round:focus-visible,.kh-hold:focus-visible,.kids-home:focus-visible,.kids-btn:focus-visible{outline:4px solid #0b1b3d;outline-offset:3px}
@media (max-width:380px){.kh-body h1{font-size:1.8rem}.kh-tile{font-size:1.15rem;min-height:130px}}
@media (prefers-reduced-motion:reduce){.kh-hold.go i{transition:none}}
/* the Spot 5 things panel in the same style */
html.kids .kidspanel{background:#fff;color:#0b1b3d;border:0;border-radius:26px;padding:16px;box-shadow:0 7px 0 rgba(0,0,0,.2);scroll-margin-top:12px}
html.kids .kids-head h2{color:#0b1b3d;font-size:1.7rem}html.kids .kids-count,html.kids .kids-stars{color:#0b1b3d}
html.kids .kids-bar{display:flex;gap:8px;height:auto;background:none;overflow:visible}html.kids .kids-bar b{flex:1;height:22px;border-radius:999px;background:#d7e4fb}html.kids .kids-bar b.on{background:#4de08f}
html.kids .kids-hint{font-size:1.1rem;font-weight:700;color:#0b1b3d}
html.kids .kids-list li{background:#eef4ff;border:0;border-radius:20px;padding:10px 12px}html.kids .kids-list li.got{background:#d9fbe8;opacity:1}
html.kids .kids-em{font-size:2.6rem;width:3.4rem}html.kids .kids-tx b{font-size:1.15rem;font-weight:900;color:#0b1b3d}html.kids .kids-near{color:#7a4dff}
html.kids .kids-btn{min-width:6rem;min-height:56px;padding:12px 16px;font-size:1.05rem;font-weight:900;border-radius:18px;box-shadow:0 4px 0 rgba(0,0,0,.2)}html.kids .kids-btn:disabled{background:#4de08f;color:#0b1b3d}
html.kids .kids-new{min-height:56px;border:0;background:#eef4ff;color:#0b1b3d;font-weight:900;border-radius:18px;width:100%}

/* kids: tidy the Spot 5 rows (text on top, full-width button underneath), no sticker book */
html.kids .kids-list li{grid-template-columns:auto minmax(0,1fr);gap:8px 12px}
html.kids .kids-list .kids-btn{grid-column:1/-1;width:100%}
html.kids .kids-tx b{overflow-wrap:break-word;word-break:normal;line-height:1.25}
html.kids .kids-em{width:3rem;font-size:2.4rem}
html.kids .kids-head{gap:8px 12px}html.kids .kids-head h2{font-size:1.5rem;min-width:0}
html.kids body{padding-bottom:96px}
html.kids a[href^="/book"],html.kids a[href^="book"],html.kids .sn[href*="book"],html.kids [data-tab="stickers"],html.kids #sbnav{display:none!important}
.kh-tile small{display:none}

/* kids: only the video and the game; no map, tabs, buttons, lists or Coming up */
html.kids #map,html.kids .hero,html.kids .instruments,html.kids #out,html.kids .extras,html.kids #spotnow,html.kids #notice,html.kids #vtabs,html.kids .ptop,html.kids .pbar,
html.kids .wx,html.kids .nmv,html.kids #pxw,html.kids .bestbtn,html.kids .planebox,html.kids #mv:empty{display:none!important}
html.kids .stage.playing{display:block}
html.kids .stage.playing #vtop{position:static}
html.kids .kidspanel{margin:0 0 14px;border-radius:0 0 26px 26px}
.kh-pic{font-size:5rem;line-height:1;text-align:center;margin-bottom:6px}
.kh-fact{text-align:center}.kh-fact h2{font-size:1.2rem}.kh-fact p{font-size:1.5rem}
.kh-air{grid-template-columns:1fr 1fr}
.kh-ap{min-height:112px}.kh-ap i{font-size:2.2rem}.kh-ap b{font-size:1.5rem}.kh-ap small{display:block!important;font-size:.8rem;font-weight:800;line-height:1.1}
.kh-ap.day{background:#ffd23f}.kh-ap.night{background:#3b4a8a;color:#fff}
.kh-body .kh-big{margin-top:16px}
html.kids .menubtn,html.kids .sitenav,html.kids .sn-scrim{display:none!important} /* kids: no site menu; grown-ups leave with the hold button in the picture menu */
@media (max-width:860px){html.kids .kidspanel{margin-left:-20px;margin-right:-20px;border-radius:0 0 26px 26px}} /* phones: as wide as the video */
@media (min-width:861px){html.kids .stage.playing #player{max-width:760px;margin:0 auto;width:100%}html.kids .kidspanel{border-radius:0 0 26px 26px}}

/* the Kids home scene: sky, clouds, a plane and a runway (nav.js SCENE) */
.kh-top,.kh-body,.kh-bot{position:relative;z-index:1}
.kh-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kh-cl{position:absolute;opacity:.92;animation:khdrift 26s ease-in-out infinite alternate}.kh-cl.c2,.kh-cl.c4{animation-duration:34s;animation-direction:alternate-reverse}.kh-cl.c3{animation-duration:30s}
.kh-plane{position:absolute;left:34%;bottom:21%;width:min(42vw,230px);transform:rotate(-10deg);animation:khbob 5s ease-in-out infinite alternate;filter:drop-shadow(0 6px 0 rgba(0,0,0,.12))}
.kh-trail{position:absolute;left:2%;bottom:17%;width:min(36vw,210px);opacity:.9}
.kh-grass{position:absolute;left:0;right:0;bottom:0;height:150px;background:#6fb66f}
.kh-rwy{position:absolute;left:50%;bottom:0;width:max(100%,390px);max-width:760px;height:150px;transform:translateX(-50%)}
@keyframes khdrift{from{transform:translateX(0)}to{transform:translateX(26px)}}
@keyframes khbob{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(-8deg) translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.kh-cl,.kh-plane{animation:none}}
@media (max-height:620px){.kh-plane,.kh-trail{display:none}}
@media (min-width:600px){.kh-rwy{width:520px;height:200px;max-width:none;preserveAspectRatio:none}.kh-grass{height:200px}.kh-plane{left:calc(50% - 60px);bottom:200px;width:230px}.kh-trail{left:calc(50% - 250px);bottom:190px;width:210px}.kh-cl.c3{bottom:34%}}
@media (min-width:600px) and (max-height:700px){.kh-plane,.kh-trail{display:none}}

/* the old TV layout switcher and clock are gone; the nodes stay hidden */
.tvclk,.tvsw{display:none}