/* =========================================================
   Find Me A Runway — design system
   ========================================================= */
:root{
  /* brand */
  --navy:#10263C; --navy-2:#1B3A57; --blue:#2563EB; --blue-600:#1D4ED8; --blue-50:#EFF6FF;
  /* surfaces */
  --canvas:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  /* text */
  --text:#0F172A; --text-2:#334155; --muted:#64748B;
  /* filter status (distinct from flight category) */
  --s-green:#16A34A; --s-yellow:#D97706; --s-red:#DC2626; --s-unk:#94A3B8; --s-grey:#CBD5E1;
  /* standard flight categories */
  --c-vfr:#15803D; --c-mvfr:#1D4ED8; --c-ifr:#B91C1C; --c-lifr:#A21CAF;
  /* spacing (8px system) */
  --s-0:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --r-sm:8px; --r:10px; --r-lg:12px;
  --shadow-1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --shadow-2:0 8px 24px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06);
  --focus:0 0 0 3px rgba(37,99,235,.35);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sidebar:340px; --listw:380px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--canvas);color:var(--text);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
/* lock the page like a map app; panels scroll on their own */
html,body{position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.skip{position:absolute;left:8px;top:-40px;z-index:5000;background:var(--blue);color:#fff;padding:8px 16px;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:8px}
[hidden]{display:none!important}

#app{display:flex;flex-direction:column;height:100%;height:100dvh}

/* ---------- top bar ---------- */
.topbar{flex:none;display:flex;align-items:center;gap:var(--s-2);height:56px;padding:0 var(--s-2);padding-top:env(safe-area-inset-top);box-sizing:content-box;background:var(--navy);color:#fff}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand-mark{width:28px;height:28px;flex:none}
.brand h1{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:var(--r);background:transparent;color:#CBD5E1;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.icon-btn svg{width:22px;height:22px}
.disclaimer{flex:none;padding:6px var(--s-2);background:#FFF7ED;color:#7C2D12;border-bottom:1px solid #FED7AA;font-size:12px;line-height:1.35}
.disclaimer #dataInfo{color:#9A3412;opacity:.8}

/* ---------- segmented control ---------- */
.seg{display:inline-flex;padding:3px;border-radius:var(--r);background:rgba(255,255,255,.1);gap:2px}
.seg button{border:0;background:transparent;color:#CBD5E1;padding:6px 12px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;min-height:32px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:var(--shadow-1)}
.seg-fill{display:flex;background:var(--surface-2);border:1px solid var(--border)}
.seg-fill button{flex:1;color:var(--text-2)}
.seg-fill button[aria-pressed="true"]{background:var(--surface);color:var(--blue)}

/* ---------- buttons, inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 var(--s-2);border-radius:var(--r);border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-600);border-color:var(--blue-600)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--blue-50);border-color:transparent}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.btn-icon{width:40px;min-height:40px;padding:0;border-radius:50%}
.btn-icon svg{width:18px;height:18px}
.linkbtn{border:0;background:none;color:var(--blue);font-weight:600;cursor:pointer;padding:0}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-2)}
.field .field{margin-bottom:0}
label,.label{font-size:12px;font-weight:600;color:var(--text-2)}
.label-row{display:flex;justify-content:space-between;align-items:baseline}
output{font-weight:700;color:var(--blue);font-size:13px}
input[type=text],input[type=number]{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);font-size:16px;color:var(--text)}
input[type=text]:focus,input[type=number]:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
input[type=range]{width:100%;accent-color:var(--blue);min-height:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-1) var(--s-2)}
.hint{margin:0 0 var(--s-1);font-size:12px;color:var(--muted)}
.hint:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-bottom:var(--s-1)}
.chip{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);font-weight:500;font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue-50);border-color:var(--blue);color:var(--blue-600);font-weight:600}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:44px}
.switch{position:relative;width:44px;height:26px;flex:none;border:0;border-radius:13px;background:var(--border-strong);cursor:pointer;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:left .15s}
.switch[aria-checked="true"]{background:var(--blue)}
.switch[aria-checked="true"]::after{left:21px}

/* ---------- shell layout ---------- */
.shell{flex:1;min-height:0;display:flex}
.panel{width:var(--sidebar);flex:none;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);min-height:0}
.panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-1);padding:var(--s-2);border-bottom:1px solid var(--border);background:var(--surface)}
.panel-head h2{font-size:16px}
.panel-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--s-2)}
.sheet-only{display:none}
.plan{padding-bottom:var(--s-1)}
.from-wrap{position:relative}
.from-ic{position:absolute;left:12px;top:12px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.from-wrap input{padding-left:36px;font-weight:600}
.row-btns{display:flex;gap:var(--s-1);margin-left:-8px}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-2);overflow:auto;max-height:280px;overscroll-behavior:contain;display:none}
.sugg.open{display:block}
.sugg [role=option]{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}
.sugg [role=option]:last-child{border-bottom:0}
.sugg [role=option][aria-selected="true"],.sugg [role=option]:hover{background:var(--blue-50)}
.sugg b{margin-right:6px}
.sugg span{color:var(--muted)}

/* accordions */
.acc{border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--s-1);background:var(--surface)}
.acc>summary{list-style:none;display:flex;align-items:center;gap:var(--s-1);padding:12px var(--s-2);min-height:48px;cursor:pointer;font-weight:600}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";width:8px;height:8px;margin-left:auto;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.acc[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.acc-sum{font-weight:500;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.acc-body{padding:0 var(--s-2) var(--s-2)}

/* content */
.content{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.mplan{display:none}
.workspace{flex:1;min-height:0;display:flex}
.map-wrap{position:relative;flex:1;min-width:0}
#map{position:absolute;inset:0;z-index:0;background:#E5E7EB}
.results{width:var(--listw);flex:none;display:flex;flex-direction:column;min-height:0;background:var(--canvas);border-left:1px solid var(--border)}
.results-head{flex:none;padding:12px var(--s-2);border-bottom:1px solid var(--border);background:var(--surface)}
.result-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-1) var(--s-1) var(--s-2);outline:none}

/* view modes */
.shell[data-view="map"] .results{display:none}
.shell[data-view="list"] .map-wrap{display:none}
.shell[data-view="list"] .results{flex:1;width:auto;border-left:0}
.shell[data-view="list"] .result-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-content:start;gap:var(--s-1)}
.shell[data-view="list"] .result-list .group-toggle,.shell[data-view="list"] .result-list .empty{grid-column:1/-1}

/* results header */
.rh-title{font-weight:600;font-size:14px}
.rh-sub{font-size:12px;color:var(--muted);margin-top:2px}
.counts{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-1)}
.count{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 4px;border-radius:999px;background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-2)}

/* status marks (used in cards, key, map) */
.mk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;font:700 12px/1 var(--font);flex:none}
.s-green{background:var(--s-green)} .s-yellow{background:var(--s-yellow)} .s-red{background:var(--s-red)}
.s-unk{background:#fff;color:#64748B;border:2px dashed var(--s-unk)}
.s-grey{background:var(--s-grey);color:#64748B}
.mk-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--s-grey);border:1px solid var(--border-strong);margin:0 5px}

/* flight category + source badges */
.cat{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.03em;border:1.5px solid currentColor;background:#fff}
.cat-VFR{color:var(--c-vfr)} .cat-MVFR{color:var(--c-mvfr)} .cat-IFR{color:var(--c-ifr)} .cat-LIFR{color:var(--c-lifr)}
.src-badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.03em;background:var(--navy);color:#fff}
.src-badge.src-taf{background:#E0E7FF;color:#3730A3}

/* ---------- result cards ---------- */
.ap-card{display:block;width:100%;text-align:left;margin:0 0 var(--s-1);padding:12px;border:1px solid var(--border);border-left:4px solid var(--s-unk);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1);cursor:pointer;color:var(--text)}
.shell[data-view="list"] .ap-card{margin:0}
.ap-card:hover{border-color:var(--border-strong)}
.ap-card[aria-current="true"]{box-shadow:0 0 0 2px var(--blue)}
.ap-card.st-green{border-left-color:var(--s-green)} .ap-card.st-yellow{border-left-color:var(--s-yellow)}
.ap-card.st-red{border-left-color:var(--s-red)} .ap-card.st-unk{border-left-color:var(--s-unk);border-left-style:dashed}
.ap-card.st-grey{border-left-color:var(--s-grey);background:var(--surface-2);box-shadow:none}
.c-top{display:flex;align-items:center;gap:var(--s-1)}
.c-code{font-weight:700;font-size:16px;letter-spacing:.01em}
.c-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2)}
.c-name{margin-top:2px;font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--s-1);font-size:12px;color:var(--text-2)}
.c-row .sep{color:var(--border-strong)}
.c-wx{font-variant-numeric:tabular-nums}
.c-appr{display:inline-flex;gap:4px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--text-2)}
.tag.on{background:var(--blue-50);color:var(--blue-600)}
.tag-ht{background:#FEF3C7;color:#92400E}
.tag-bird{background:#DCFCE7;color:#166534}
.tag-bird svg{width:12px;height:12px}
.c-reason{margin-top:var(--s-1);font-size:12px;color:var(--muted)}
.st-red .c-reason{color:#B91C1C} .st-yellow .c-reason{color:#92400E}
.group-toggle{width:100%;margin:var(--s-1) 0;justify-content:flex-start}
.empty{padding:var(--s-3) var(--s-2);text-align:center;color:var(--text-2)}
.empty h3{font-size:15px;margin-bottom:6px}
.empty p{margin:0 0 var(--s-2);font-size:13px;color:var(--muted)}

/* ---------- map ---------- */
.leaflet-container{font:inherit;background:#E5E7EB}
.leaflet-bar{border:1px solid var(--border)!important;border-radius:var(--r)!important;box-shadow:var(--shadow-1)!important;overflow:hidden}
.leaflet-bar a{width:36px!important;height:36px!important;line-height:36px!important;color:var(--text)!important}
.leaflet-control-attribution{font-size:10px!important}
.map-summary{position:absolute;top:var(--s-2);left:var(--s-2);z-index:500;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 90px);pointer-events:none}
.map-summary .count{background:rgba(255,255,255,.95);box-shadow:var(--shadow-1)}
.pick-banner{position:absolute;top:var(--s-2);left:50%;transform:translateX(-50%);z-index:600;background:var(--navy);color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;box-shadow:var(--shadow-2)}
.pick-banner .linkbtn{color:#93C5FD}
.mkr{position:relative}
.mkr .mk{width:22px;height:22px;box-shadow:0 0 0 2px #fff,var(--shadow-1);font-size:12px}
.mkr .mk.s-unk{border-width:2px}
.mkr .lbl{position:absolute;left:26px;top:2px;font:600 11px/1.4 var(--font);color:var(--navy);background:rgba(255,255,255,.88);padding:0 4px;border-radius:4px;white-space:nowrap;pointer-events:none}
.mkr.sel .mk{box-shadow:0 0 0 3px var(--blue),var(--shadow-1)}
.mkr .bird{position:absolute;left:14px;top:-8px;width:14px;height:14px;border-radius:50%;background:#16A34A;color:#fff;display:grid;place-items:center}
.mkr .bird svg{width:10px;height:10px}
.home-mk{width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:var(--shadow-2)}

/* ---------- time bar ---------- */
.timebar{flex:none;padding:var(--s-1) var(--s-2) 6px;padding-bottom:max(6px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}
.tb-row{display:flex;align-items:center;gap:var(--s-1);min-height:40px}
.tb-time{min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-time span{color:var(--muted)}
.data-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.data-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s-unk)}
.data-status.live::before{background:var(--s-green)}
.data-status.stale{color:#92400E}.data-status.stale::before{background:var(--s-yellow)}
.data-status.error{color:#B91C1C}.data-status.error::before{background:var(--s-red)}
.slider-wrap{position:relative;padding-top:4px}
.ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:-2px}
.eta-mark{position:absolute;top:-6px;width:28px;height:20px;margin-left:-14px;border:0;background:none;cursor:pointer;padding:0}
.eta-mark::before{content:"";position:absolute;left:13px;top:10px;width:2px;height:12px;border-radius:1px;background:#EA580C}
.eta-mark span{position:absolute;top:0;left:0;right:0;text-align:center;font:700 9px var(--font);color:#EA580C}

/* ---------- detail drawer ---------- */
.drawer{position:fixed;z-index:2000;top:calc(56px + env(safe-area-inset-top));right:0;bottom:0;width:420px;max-width:100%;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-2)}
.drawer .panel-head h2{font-size:18px;display:flex;align-items:baseline;gap:var(--s-1);min-width:0}
.drawer .panel-head h2 small{font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scrim{position:fixed;inset:0;z-index:1900;background:rgba(15,23,42,.35)}
.status-card{display:flex;gap:12px;padding:12px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface-2);margin-bottom:var(--s-2)}
.status-card .mk{width:28px;height:28px;font-size:15px}
.status-card strong{display:block;font-size:15px}
.status-card p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.status-card.st-green{background:#F0FDF4;border-color:#BBF7D0} .status-card.st-yellow{background:#FFFBEB;border-color:#FDE68A}
.status-card.st-red{background:#FEF2F2;border-color:#FECACA} .status-card.st-unk{background:#F8FAFC}
.src-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);margin-bottom:var(--s-2);font-size:13px;color:var(--text-2)}
.sec-t{margin:var(--s-3) 0 var(--s-1);font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.checks{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.ck{display:grid;grid-template-columns:24px 96px 1fr;gap:var(--s-1);align-items:start;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}
.ck:last-child{border-bottom:0}
.ck .mk{width:20px;height:20px;font-size:11px}
.ck b{font-weight:600;color:var(--text-2)}
.ck-red span:last-child{color:#B91C1C}
.cond{display:flex;flex-wrap:wrap;gap:6px 12px;padding:10px 12px;border-radius:var(--r);background:var(--surface-2);font-size:13px;margin-top:var(--s-1);font-variant-numeric:tabular-nums}
.strip{display:grid;grid-template-columns:repeat(31,1fr);gap:2px;margin-top:var(--s-1)}
.strip button{height:24px;border:0;padding:0;border-radius:3px;cursor:pointer;position:relative}
.strip button.cur{box-shadow:0 0 0 2px var(--navy)}
.strip button.eta::after{content:"";position:absolute;bottom:-6px;left:25%;width:50%;height:3px;border-radius:2px;background:#EA580C}
.strip .st-green{background:var(--s-green)} .strip .st-yellow{background:var(--s-yellow)} .strip .st-red{background:var(--s-red)}
.strip .st-unk{background:repeating-linear-gradient(45deg,#E2E8F0 0 3px,#F8FAFC 3px 6px)} .strip .st-grey{background:var(--s-grey)}
.strip-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:8px}
.appr{display:inline-flex;align-items:center;min-height:32px;margin:0 6px 6px 0;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:12px;font-weight:500;text-decoration:none}
.appr:hover{border-color:var(--blue);color:var(--blue)}
.appr.match{border-color:var(--blue);background:var(--blue-50);color:var(--blue-600)}
.note{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r);font-size:12px;margin-bottom:var(--s-1)}
.note b{display:block;font-size:11px;letter-spacing:.05em}
.note-ht{background:#FFFBEB;border:1px solid #FDE68A;color:#78350F}
.note-bird{background:#F0FDF4;border:1px solid #BBF7D0;color:#14532D}
.note-bird svg{width:16px;height:16px;flex:none}
.raw{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;white-space:pre-wrap;word-break:break-word}
details.rawd>summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:13px;min-height:40px;display:flex;align-items:center}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s-2);font-size:13px}
.kv b{font-weight:600;color:var(--muted)}
.kv .sub{display:block;font-size:12px;color:var(--muted)}
.warn{color:#92400E}
.detail-foot{margin-top:var(--s-3);padding:12px;border-radius:var(--r);background:#FFF7ED;color:#7C2D12;font-size:12px}
a{color:var(--blue)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:4000;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:var(--s-2)}
.modal-card{width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
.modal-body{overflow-y:auto;overscroll-behavior:contain;padding:var(--s-2)}
.modal-body p{margin:0 0 12px;font-size:13px}
.modal-body h3{font-size:13px;margin:var(--s-2) 0 var(--s-1)}
.callout{padding:12px;border-radius:var(--r);background:#FFF7ED;border:1px solid #FED7AA;color:#7C2D12}
.key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1);font-size:13px}
.key li{display:flex;align-items:center;gap:var(--s-1)}
.key-inline{flex-direction:row;flex-wrap:wrap}

/* ---------- loading ---------- */
.loading{position:fixed;inset:0;z-index:4500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);background:var(--canvas);color:var(--text-2);text-align:center;padding:var(--s-3)}
.spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--blue);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading.error .spinner{display:none}

/* ---------- mobile ---------- */
@media (max-width:899px){
  .split-btn{display:none}
  .brand h1{font-size:15px}
  .seg button{padding:6px 10px}
  .panel{position:fixed;left:0;right:0;bottom:0;z-index:2100;width:auto;max-height:86vh;border-right:0;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-2);transform:translateY(105%);transition:transform .22s ease;visibility:hidden}
  .panel.open{transform:none;visibility:visible}
  .panel .panel-body{padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom))}
  .sheet-only{display:inline-flex}
  .mplan{display:flex;gap:6px;padding:var(--s-1) 12px;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
  .mplan::-webkit-scrollbar{display:none}
  .mchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);font-weight:600;font-size:13px;color:var(--text);cursor:pointer}
  .mchip-k{font-weight:500;color:var(--muted)}
  .mchip-filter{margin-left:auto;background:var(--navy);border-color:var(--navy);color:#fff}
  .mchip-filter svg{width:16px;height:16px}
  .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-size:11px;display:inline-grid;place-items:center}
  .shell[data-view="split"] .results{display:none}
  .results{width:auto}
  .shell[data-view="list"] .result-list{display:block}
  .shell[data-view="list"] .ap-card{margin-bottom:var(--s-1)}
  .drawer{top:auto;left:0;width:auto;max-height:88vh;border-left:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .drawer .panel-body{padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom))}
  .disclaimer{font-size:11.5px;padding:6px 12px}
  #toEta{display:none}
  .data-status .ds-long{display:none}
  .timebar{padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.no-labels .mkr .lbl{display:none}
/* fixes from review pass */
.results,.map-wrap{min-width:0}
.ap-card{min-width:0;overflow:hidden}
.no-birds .mkr .bird{display:none}
@media (max-width:899px){
  .mplan{gap:6px;padding:8px 0 8px 12px}
  .mchip{min-height:34px;padding:0 10px;font-size:12.5px}
  .mchip-filter{position:sticky;right:0;margin-left:auto;border-radius:999px 0 0 999px;padding:0 14px 0 12px;box-shadow:-8px 0 12px var(--surface)}
}
.shell[data-view="list"] .result-list{grid-auto-rows:max-content}

/* =========================================================
   Dark mode
   ========================================================= */
html[data-theme="dark"]{
  color-scheme:dark;
  --navy:#0A1726; --navy-2:#14283F; --blue:#3B82F6; --blue-600:#93C5FD; --blue-50:rgba(59,130,246,.16);
  --canvas:#0B1220; --surface:#111A2B; --surface-2:#18233A;
  --border:#22314A; --border-strong:#33445F;
  --text:#E2E8F0; --text-2:#CBD5E1; --muted:#94A3B8;
  --s-green:#22C55E; --s-yellow:#F59E0B; --s-red:#EF4444; --s-unk:#64748B; --s-grey:#475569;
  --c-vfr:#4ADE80; --c-mvfr:#60A5FA; --c-ifr:#F87171; --c-lifr:#E879F9;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --shadow-2:0 10px 30px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --focus:0 0 0 3px rgba(96,165,250,.45);
}
html[data-theme="dark"] .disclaimer{background:#24170B;color:#FDBA74;border-bottom-color:#4A2C10}
html[data-theme="dark"] .disclaimer #dataInfo{color:#FDBA74}
html[data-theme="dark"] .cat{background:transparent}
html[data-theme="dark"] .s-unk{background:var(--surface);color:#94A3B8}
html[data-theme="dark"] .s-grey{color:#CBD5E1}
html[data-theme="dark"] .src-badge{background:#E2E8F0;color:#0B1220}
html[data-theme="dark"] .src-badge.src-taf{background:#312E81;color:#C7D2FE}
html[data-theme="dark"] .tag-ht{background:#3B2A0B;color:#FCD34D}
html[data-theme="dark"] .tag-bird{background:#0F2E1C;color:#86EFAC}
html[data-theme="dark"] .ap-card.st-grey{background:#0F1726}
html[data-theme="dark"] .st-red .c-reason{color:#FCA5A5} html[data-theme="dark"] .st-yellow .c-reason{color:#FCD34D}
html[data-theme="dark"] .status-card.st-green{background:#0E2A1A;border-color:#14532D}
html[data-theme="dark"] .status-card.st-yellow{background:#2A1F08;border-color:#713F12}
html[data-theme="dark"] .status-card.st-red{background:#2A1010;border-color:#7F1D1D}
html[data-theme="dark"] .status-card.st-unk{background:var(--surface-2)}
html[data-theme="dark"] .ck-red span:last-child{color:#FCA5A5}
html[data-theme="dark"] .note-ht{background:#2A1F08;border-color:#713F12;color:#FDE68A}
html[data-theme="dark"] .note-bird{background:#0E2A1A;border-color:#14532D;color:#BBF7D0}
html[data-theme="dark"] .callout,html[data-theme="dark"] .detail-foot{background:#24170B;border-color:#4A2C10;color:#FDBA74}
html[data-theme="dark"] .warn{color:#FCD34D}
html[data-theme="dark"] .data-status.stale{color:#FCD34D} html[data-theme="dark"] .data-status.error{color:#FCA5A5}
html[data-theme="dark"] .seg-fill button[aria-pressed="true"]{background:var(--surface);color:#93C5FD}
html[data-theme="dark"] .leaflet-container{background:#0E1626}
html[data-theme="dark"] #map{background:#0E1626}
html[data-theme="dark"] .leaflet-bar a{background:var(--surface)!important;color:var(--text)!important;border-bottom-color:var(--border)!important}
html[data-theme="dark"] .leaflet-control-attribution{background:rgba(17,26,43,.8)!important;color:#94A3B8!important}
html[data-theme="dark"] .leaflet-control-attribution a{color:#93C5FD!important}
html[data-theme="dark"] .mkr .lbl{background:rgba(11,18,32,.85);color:#E2E8F0}
html[data-theme="dark"] .mkr .mk{box-shadow:0 0 0 2px #0B1220,var(--shadow-1)}
html[data-theme="dark"] .map-summary .count{background:rgba(17,26,43,.92)}
html[data-theme="dark"] .home-mk{border-color:#0B1220}
html[data-theme="dark"] .scrim{background:rgba(0,0,0,.55)}
html[data-theme="dark"] .modal{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .mchip-filter{background:var(--blue);border-color:var(--blue)}
html[data-theme="dark"] .strip .st-unk{background:repeating-linear-gradient(45deg,#22314A 0 3px,#111A2B 3px 6px)}
html[data-theme="dark"] .strip button.cur{box-shadow:0 0 0 2px #E2E8F0}
html[data-theme="dark"] .mchip-filter{box-shadow:-8px 0 12px var(--surface)}
/* narrow phones: make room for the theme button without truncating the name */
@media (max-width:430px){
  .topbar{gap:8px;padding:0 10px}
  .brand-mark{display:none}
  .brand h1{font-size:15px}
  .icon-btn{width:34px;height:34px}
  .icon-btn svg{width:20px;height:20px}
  .seg button{padding:6px 9px}
}

/* weather switch: neutral "info only" rows, and dimmed minimums when weather is off */
.s-info{background:var(--surface-2);color:var(--muted);border:1px solid var(--border-strong)}
.ck-info span:last-child{color:var(--muted)}
#wxFields.is-off{opacity:.45}