/* Airport pages under /airports/. Tokens are DESIGN.md's glass-cockpit set:
 * near black, flat, hairline separated, amber and green as the only signals. */
:root{color-scheme:dark;--bg:#04060a;--bg-sunk:#070a0f;--bg-raise:#0b0f16;--line:#131a24;--line-strong:#1d2735;--text:#eaf0f7;--text-dim:#aab6c6;--muted:#767f8c;--accent:#f5a524;--live:#35d07f;--alert:#ff5c5c;--neutral:#8f9dae;--r:4px;--r-sm:2px;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;--font-prose:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;--fs-micro:9.5px;--fs-xs:11.5px;--fs-sm:12px;--fs-base:13.5px;--fs-num:22px;--fs-num-sm:17px;--sp-2:6px;--sp-3:8px;--sp-4:10px;--sp-5:12px;--sp-6:16px;--sp-7:20px;--sp-8:28px;--t-fast:120ms}
@media(prefers-contrast:more){:root{--line:#2a3646;--muted:#9aa4b2}}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:var(--fs-base)/1.5 var(--font-mono);-webkit-font-smoothing:antialiased}
a{color:var(--text-dim);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--text)}
button{font:inherit}
:is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:absolute;left:var(--sp-5);top:-60px;z-index:10;background:var(--accent);color:var(--bg);padding:var(--sp-4) var(--sp-5);border-radius:var(--r)}
.skip-link:focus{top:var(--sp-5)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);max-width:1120px;margin:auto;padding:var(--sp-6) var(--sp-6);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.brand img:first-child{width:28px;height:28px;object-fit:contain}
.brand img:last-child{width:130px;height:auto}
.back-link{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;font-size:var(--fs-sm);text-decoration:none}
.back-link span{color:var(--accent)}
main{max-width:1120px;margin:auto;padding:0 var(--sp-6) 64px}
.hero{padding:48px 0 var(--sp-8);border-bottom:1px solid var(--line)}
.eyebrow,.label{margin:0 0 var(--sp-5);color:var(--muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.eyebrow span{margin:0 var(--sp-2);color:var(--line-strong)}
h1,h2,h3,p{overflow-wrap:anywhere}
h1{margin:0;font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.04em;font-weight:700}
h1 .dot{color:var(--accent)}
h2{margin:0 0 var(--sp-5);font-size:var(--fs-num);line-height:1.2;letter-spacing:-.02em}
h3{margin:0 0 var(--sp-2);font-size:var(--fs-num-sm);line-height:1.3}
.lead{max-width:62ch;margin:var(--sp-7) 0 0;color:var(--text-dim);font:17px/1.5 var(--font-prose)}
.section{padding:var(--sp-8) 0 36px;border-bottom:1px solid var(--line)}
.prose p,.prose li{max-width:70ch;color:var(--text-dim);font:15px/1.65 var(--font-prose)}
.prose ul{padding-left:var(--sp-7)}
.status{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-5);margin:var(--sp-7) 0 0;padding:var(--sp-5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text-dim);font-size:var(--fs-sm)}
.status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.status[data-state=live]::before{background:var(--live)}
.status[data-state=stale]::before,.status[data-state=not-collected]::before{background:var(--accent)}
.status[data-state=stale],.status[data-state=not-collected]{color:var(--text)}
.status[data-state=error]::before{background:var(--alert)}
.status[data-state=error]{color:var(--text)}
.status span{flex:1 1 240px}
.status button{min-height:44px;padding:var(--sp-3) var(--sp-5);color:var(--text);background:var(--bg-raise);border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer}
.status button:hover{border-color:var(--accent)}
[hidden]{display:none!important}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-8)}
.metric{padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.metric strong{display:block;margin-top:var(--sp-2);font-size:var(--fs-num);line-height:1.2;font-variant-numeric:tabular-nums}
.metric p{margin:var(--sp-3) 0 0;max-width:60ch;color:var(--text-dim);font:var(--fs-sm)/1.55 var(--font-prose)}
#runwayInference[data-state=inferred] strong{color:var(--accent)}
.planes{margin:0;padding:0;list-style:none}
.plane{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:var(--sp-5);padding:var(--sp-4) 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.plane-ident{display:flex;flex-direction:column;min-width:0}
.plane-callsign{font-size:var(--fs-num-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plane-sub,.plane-route{color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plane-route{color:var(--text-dim)}
.plane-num{color:var(--text-dim);font-size:var(--fs-sm);white-space:nowrap}
.plane-phase{justify-self:start;padding:2px var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--neutral);font-size:var(--fs-xs);white-space:nowrap}
.plane[data-phase=arriving] .plane-phase{color:var(--accent);border-color:var(--accent)}
.plane[data-phase=departing] .plane-phase{color:var(--live);border-color:var(--live)}
.plane[data-phase=passing] .plane-phase{opacity:.7}
.empty{padding:var(--sp-5) 0;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm)}
.metar{display:block;padding:var(--sp-5);background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r);color:var(--text);font:var(--fs-sm)/1.6 var(--font-mono);word-break:break-word}
.facts{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.facts th,.facts td{padding:var(--sp-3) var(--sp-5) var(--sp-3) 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.facts th{color:var(--muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.table-wrap{overflow-x:auto}
.note{color:var(--muted);font-size:var(--fs-xs)}
.cta{display:inline-flex;align-items:center;gap:var(--sp-5);min-height:44px;margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-6);color:var(--bg);background:var(--accent);border-radius:var(--r);font-weight:700;text-decoration:none}
.cta:hover{color:var(--bg);background:var(--text)}
.hub-list{margin:0;padding:0;list-style:none}
.hub-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5);align-items:baseline;padding:var(--sp-6) 0;border-top:1px solid var(--line)}
.hub-item h3{margin:0 0 var(--sp-2);font-size:var(--fs-num-sm)}
.hub-item h3 a{color:var(--text);text-decoration:none}
.hub-item h3 a:hover{text-decoration:underline}
.hub-item p{margin:0;max-width:70ch;color:var(--text-dim);font:14px/1.55 var(--font-prose)}
.hub-codes{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
footer{max-width:1120px;margin:auto;padding:var(--sp-7) var(--sp-6) 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-6);color:var(--muted);font-size:var(--fs-xs)}
@media(max-width:720px){
  .brand img:last-child{width:100px}
  .hero{padding-top:32px}
  .metrics{grid-template-columns:1fr}
  .plane{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--sp-2)}
  .plane-ident{grid-column:1;grid-row:1}.plane-phase{grid-column:2;grid-row:1;justify-self:end}
  .plane-route{grid-column:1;grid-row:2}.plane-alt{grid-column:2;grid-row:2;justify-self:end}
  .plane-dist{grid-column:1 / -1;grid-row:3}
  .hub-item{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.prose p.eyebrow{max-width:none;color:var(--muted);font:700 var(--fs-micro)/1.5 var(--font-mono);letter-spacing:.2em}