/* The arrivals and departures board, /arrivals/. DESIGN.md's glass-cockpit
 * tokens, the same set public/airports/airports.css carries. The board reads as
 * an airport display: flap cells for the times, mono, tabular, flat. */
: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;--t-base:180ms;--ease:cubic-bezier(.2,.7,.3,1)}
@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)}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--text)}
.faq h3{margin-top:var(--sp-7)}
.airport-links{list-style:none;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 var(--sp-7)}
.airport-links li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.airport-link-name{flex:1 1 100%;color:var(--text)}
.airport-links a{display:inline-flex;align-items:center;min-height:44px}
.airport-links a[aria-current=page]{color:var(--accent);text-decoration:none;font-weight:700}
.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)}
.empty{padding:var(--sp-5) 0;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm)}
.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)}
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)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Controls: airport and board on one line, the search and the time on the next. */
.controls{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-5) var(--sp-6);align-items:end;margin-top:var(--sp-7)}
.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.field .label{margin:0}
select,input[type=time],input[type=search],input[type=number],input[type=text]{min-height:44px;width:100%;padding:var(--sp-3) var(--sp-4);color:var(--text);background:var(--bg-raise);border:1px solid var(--line-strong);border-radius:var(--r);font:var(--fs-base) var(--font-mono);font-variant-numeric:tabular-nums}
select{cursor:pointer}
input::placeholder{color:var(--muted)}
:is(select,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toggle{display:flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
button{cursor:pointer}
.toggle button,.time-row button,.close,.secondary,.stepper button,.empty-actions button{min-height:44px;padding:var(--sp-3) var(--sp-5);color:var(--text-dim);background:var(--bg-raise);border:0;font:inherit;transition:color var(--t-fast),background var(--t-fast)}
.toggle button{flex:1}
.toggle button+button{border-left:1px solid var(--line-strong)}
.toggle button[aria-pressed=true]{color:var(--bg);background:var(--accent);font-weight:700}
.time-row{display:flex;gap:var(--sp-3)}
.time-row button,.empty-actions button{border:1px solid var(--line-strong);border-radius:var(--r)}
:is(.time-row,.empty-actions,.toggle,.stepper) button:hover{color:var(--text)}
:is(button,.secondary):active{background:var(--line-strong)}
.toggle button[aria-pressed=true]:active{background:var(--accent)}

/* The board and, beside it on a wide screen, the chosen flight. */
.board-layout{display:block}
.board-section{padding:var(--sp-8) 0 var(--sp-6);min-width:0}
.board-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5)}
.board-head h2{margin:0}
.board-clock{color:var(--accent);font-size:var(--fs-num);font-variant-numeric:tabular-nums}
.fids{margin-top:var(--sp-5);background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r)}
.fids-row{display:grid;grid-template-columns:minmax(140px,.9fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-5);align-items:center;min-height:56px;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums;transition:background var(--t-fast)}
.fids-head{min-height:0;border-top:0;color:var(--muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
a.fids-row:hover{background:var(--bg-raise);color:var(--text)}
a.fids-row:active{background:var(--line-strong)}
a.fids-row[aria-current=true]{background:var(--bg-raise);outline:1px solid var(--accent);outline-offset:-1px}
a.fids-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fids-time{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.flap{display:inline-flex;gap:2px}
.flap span{position:relative;display:inline-block;min-width:1.15ch;padding:2px 3px;background:var(--bg-raise);border-radius:var(--r-sm);color:var(--accent);font-size:var(--fs-num-sm);line-height:1.2;text-align:center}
.flap span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bg)}
.flap .sep{min-width:auto;padding:2px 0;background:none;color:var(--muted)}
.flap .sep::after{display:none}
.flap span.flip{animation:flip var(--t-base) var(--ease)}
@keyframes flip{from{transform:scaleY(.2);opacity:.3}to{transform:none;opacity:1}}
.fids-row[data-kind=usual] .flap span,.fids-row[data-kind=scheduled] .flap span{color:var(--text-dim)}
.fids-row[data-kind=landed] .flap span,.fids-row[data-kind=departed] .flap span,.fids-row[data-kind=on-ground] .flap span,.fids-row[data-kind=airline-actual] .flap span{color:var(--live)}
.fids-row[data-tone=alert] .flap span{color:var(--alert);text-decoration:line-through}
.kind{display:inline-block;padding:0 var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--muted);font-size:var(--fs-xs);font-weight:400;white-space:nowrap}
.kind-est{color:var(--accent);border-color:var(--accent)}
.kind-usual{color:var(--text-dim)}
.fids-flight,.fids-other{display:flex;flex-direction:column;min-width:0}
.fids-flight strong{font-size:var(--fs-num-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fids-flight span,.fids-other span{color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fids-other strong{color:var(--text);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fids-other strong.unknown{color:var(--muted)}
.fids-status{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0}
.fids-status b{padding:2px var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--neutral);font-size:var(--fs-xs);font-weight:400;white-space:nowrap}
.fids-status span{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
.fids-row[data-tone=accent] .fids-status b{color:var(--accent);border-color:var(--accent)}
.fids-row[data-tone=live] .fids-status b{color:var(--live);border-color:var(--live)}
.fids-row[data-tone=alert] .fids-status b{color:var(--alert);border-color:var(--alert)}
.fids-status span.later{color:var(--accent)}
.empty{padding:var(--sp-6) var(--sp-5);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);background:var(--bg-sunk)}
.empty p{margin:0 0 var(--sp-5);color:var(--text-dim);font-size:var(--fs-sm)}
.empty-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.note b.kind{margin-right:var(--sp-2)}
.note{margin-top:var(--sp-5);line-height:1.7}

/* The chosen flight. A sheet over the board on a phone, a panel beside it on
 * a wide screen. The answer the person came for leads: when to leave. */
.detail{width:100%;max-width:none;margin:var(--sp-6) 0 0;padding:var(--sp-7) var(--sp-6);color:var(--text);background:var(--bg-sunk);border:1px solid var(--line-strong);border-radius:var(--r)}
.detail:not([open]){display:none}
.detail:focus{outline:none}
.detail::backdrop{background:rgba(4,6,10,.82)}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-5)}
.detail-id{min-width:0}
.detail-id .eyebrow{margin-bottom:var(--sp-3)}
.detail-head h2{margin:0;font-size:clamp(28px,5vw,40px);line-height:1.1;overflow-wrap:anywhere}
.detail-sub{margin:var(--sp-3) 0 0;color:var(--text-dim);font-size:var(--fs-sm)}
.close{min-width:44px;border:1px solid var(--line-strong);border-radius:var(--r);font-size:var(--fs-num-sm);line-height:1}
.close:hover{color:var(--text)}
.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sp-5);margin-top:var(--sp-7)}
.answer{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--line);min-width:0}
.answer .label{margin:0}
.answer strong{font-size:var(--fs-num);line-height:1.15;font-variant-numeric:tabular-nums;color:var(--text)}
.answer-leave strong{color:var(--accent);font-size:28px}
.answer-leave{border-top-color:var(--accent)}
.answer-note{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.advice{margin:var(--sp-5) 0 0;color:var(--text);font:15px/1.5 var(--font-prose)}
.advice[data-tone=accent]{color:var(--accent)}
.advice[data-tone=alert]{color:var(--alert)}
.pickup{margin-top:var(--sp-6)}
.pickup-inputs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-5) var(--sp-7)}
.stepper{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;width:max-content}
.stepper button{min-width:44px;padding:0;font-size:var(--fs-num-sm)}
.stepper input{width:64px;border:0;border-radius:0;text-align:center;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper .unit{display:flex;align-items:center;padding-right:var(--sp-4);color:var(--muted);font-size:var(--fs-sm);background:var(--bg-raise)}
.check{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;color:var(--text-dim);font-size:var(--fs-sm);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.pickup .cta{margin-top:var(--sp-6)}
.secondary-actions{margin-top:var(--sp-5)}
/* Tell someone when to leave: a pickup link for whoever is collecting. */
.share-pickup{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.share-pickup h3{margin:0}
.share-pickup-lead{margin:var(--sp-3) 0 0;color:var(--text-dim);font:14px/1.55 var(--font-prose)}
.pickup-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-5)}
.pickup-form .field{flex:1 1 180px}
.pickup-form .cta{margin-top:0}
.pickup-form .cta:disabled{opacity:.6;cursor:progress}
.optional{margin-left:var(--sp-2);color:var(--muted);font-weight:400;letter-spacing:.1em}
.pickup-made{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-5)}
.pickup-made .label{margin:0}
.pickup-code{color:var(--accent);font-size:var(--fs-num);letter-spacing:.35em;font-variant-numeric:tabular-nums}
.pickup-url{max-width:100%;font-size:var(--fs-sm);overflow-wrap:anywhere}
.pickup-msg{margin:var(--sp-3) 0 0;color:var(--text-dim);font-size:var(--fs-sm)}
.pickup-msg:empty{display:none}
.secondary{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r);text-decoration:none}
.secondary:hover{color:var(--text);border-color:var(--accent)}
.share-done{color:var(--live);font-size:var(--fs-sm)}
.facts-list{margin:var(--sp-7) 0 0;padding:0}
.facts-list>div{padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.facts-list dt{margin:0 0 var(--sp-2)}
.facts-list dd{margin:0;color:var(--text-dim);font:14px/1.55 var(--font-prose)}
.facts-list dd strong{color:var(--text);font:700 var(--fs-base) var(--font-mono)}
.detail[data-dir=departures] .pickup-only{display:none}
.detail[data-dir=departures] .answers{grid-template-columns:minmax(0,1fr)}
footer a{display:inline-flex;align-items:center;min-height:44px}

@media(min-width:1024px){
  .board-layout:has(.detail[open]){display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:var(--sp-8);align-items:start}
  .board-layout:has(.detail[open]) .fids-row{grid-template-columns:140px minmax(0,1fr) minmax(0,1fr) 132px}
  .detail[open]{position:sticky;top:var(--sp-6);margin-top:var(--sp-8);max-height:calc(100vh - 32px);overflow:auto;padding:var(--sp-6)}
  .detail .answers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail .answer strong{font-size:var(--fs-num-sm)}
  .detail .answer-leave strong{font-size:var(--fs-num)}
}
@media(max-width:1023px){
  .detail:modal{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:92dvh;margin:0;padding:var(--sp-6) var(--sp-6) calc(var(--sp-7) + env(safe-area-inset-bottom));overflow:auto;border-width:1px 0 0;border-radius:var(--r) var(--r) 0 0;overscroll-behavior:contain}
}
@media(max-width:860px){
  .controls{grid-template-columns:minmax(0,1fr) auto}
  .field-search{grid-column:1 / -1}
  .field-time{grid-column:1 / -1}
}
@media(max-width:720px){
  .brand img:last-child{width:100px}
  .hero{padding-top:28px;padding-bottom:var(--sp-6)}
  h1{font-size:34px}
  .lead{font-size:15px;margin-top:var(--sp-4)}
  .controls{margin-top:var(--sp-6);gap:var(--sp-4)}
  .field-time{grid-column:auto}
  .field-search{grid-column:auto}
  .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .field-airport,.field-dir{grid-column:1 / -1}
  .board-section{padding-top:var(--sp-6)}
  .fids-head{display:none}
  .fids-row{grid-template-columns:132px minmax(0,1fr) auto;row-gap:var(--sp-2);column-gap:var(--sp-4);padding:var(--sp-4)}
  .fids-time{grid-column:1;grid-row:1 / 3}.fids-flight{grid-column:2;grid-row:1}.fids-other{grid-column:2;grid-row:2}.fids-status{grid-column:3;grid-row:1 / 3;align-items:flex-end}
  .flap span{font-size:var(--fs-base)}
  .answers{gap:0 var(--sp-4)}
  .answer strong{font-size:var(--fs-num-sm)}
  .answer-leave strong{font-size:var(--fs-num)}
}
@media(max-width:420px){
  .toggle button{padding:var(--sp-3) var(--sp-4)}
  .time-row button{padding:var(--sp-3)}
  input[type=time]{padding:var(--sp-3)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}