/* The pickup page, /pickup/?code= (docs/pickup-alerts.md). DESIGN.md's glass
 * cockpit tokens, the same set public/arrivals/arrivals.css carries, and the
 * same three answers as the board's flight sheet: Lands, Walks out, Leave by. */
: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;--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;cursor:pointer}
:is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.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:760px;margin:auto;padding: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:760px;margin:auto;padding:0 var(--sp-6) 56px}
.hero{padding:40px 0 var(--sp-6)}
.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[aria-hidden]{margin:0 var(--sp-2);color:var(--line-strong)}
.eyebrow .code{color:var(--accent)}
h1,h2,p,dd{overflow-wrap:anywhere}
h1{margin:0;font-size:clamp(30px,5.5vw,52px);line-height:1.05;letter-spacing:-.035em;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}
.lead{max-width:62ch;margin:var(--sp-5) 0 0;color:var(--text-dim);font:17px/1.5 var(--font-prose)}
.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=landed]::before{background:var(--live)}
.status[data-state=waiting]::before,.status[data-state=stale]::before{background:var(--accent)}
.status[data-state=error]::before,.status[data-state=gone]::before{background:var(--alert)}
.status[data-state=error]{color:var(--text)}
.status span{flex:1 1 220px}
.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)}
.status button:hover{border-color:var(--accent)}

.card{margin-top:var(--sp-6);padding:var(--sp-7) var(--sp-6);background:var(--bg-sunk);border:1px solid var(--line-strong);border-radius:var(--r)}
.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sp-5)}
.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)}
main[data-state=landed] .answer:first-child strong{color:var(--live)}
.answer-note{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.advice{margin:var(--sp-6) 0 0;color:var(--text);font:17px/1.5 var(--font-prose)}
.advice:empty{display:none}
.advice[data-tone=accent]{color:var(--accent)}
.advice[data-tone=alert]{color:var(--alert)}
.waiting{margin:var(--sp-6) 0 0;color:var(--text-dim);font:15px/1.55 var(--font-prose)}

.drive{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-5) var(--sp-7);margin-top:var(--sp-7)}
.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.field .label{margin:0}
.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;min-height:44px;padding:0;color:var(--text-dim);background:var(--bg-raise);border:0;font-size:var(--fs-num-sm);transition:color var(--t-fast)}
.stepper button:hover{color:var(--text)}
.stepper button:active{background:var(--line-strong)}
.stepper input{width:64px;min-height:44px;padding:var(--sp-3);color:var(--text);background:var(--bg-raise);border:0;border-radius:0;text-align:center;font:var(--fs-base) var(--font-mono);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.stepper .unit{display:flex;align-items:center;padding-right:var(--sp-4);color:var(--muted);font-size:var(--fs-sm);background:var(--bg-raise)}
.secondary{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-3) var(--sp-5);color:var(--text-dim);background:var(--bg-raise);border:1px solid var(--line-strong);border-radius:var(--r);text-decoration:none}
.secondary:hover{color:var(--text);border-color:var(--accent)}
.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:empty::before{content:"—";color:var(--muted)}

.app-cta{margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--line)}
.app-cta>p{max-width:62ch;margin:0;color:var(--text-dim);font:15px/1.55 var(--font-prose)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.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)}
.note{margin:var(--sp-5) 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.7}
.note a{display:inline-flex;align-items:center;min-height:44px}
.small{margin-top:var(--sp-7)}
.gone{margin-top:var(--sp-6);padding:var(--sp-7) var(--sp-6);background:var(--bg-sunk);border:1px solid var(--line-strong);border-radius:var(--r)}
.gone p{max-width:62ch;margin:0;color:var(--text-dim);font:15px/1.55 var(--font-prose)}
footer{max-width:760px;margin:auto;padding:var(--sp-7) var(--sp-6) 40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-6);color:var(--muted);font-size:var(--fs-xs)}
footer a{display:inline-flex;align-items:center;min-height:44px}

@media(max-width:720px){
  .brand img:last-child{width:100px}
  .hero{padding-top:28px}
  .lead{font-size:15px}
  .card{padding:var(--sp-6) var(--sp-5)}
  .answers{gap:0 var(--sp-4)}
  .answer strong{font-size:var(--fs-num-sm)}
  .answer-leave strong{font-size:var(--fs-num)}
  .advice{font-size:15px}
  .drive{align-items:stretch}
  .maps{justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
#appNote{margin-top:var(--sp-5);line-height:1.6}