:root {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --border: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --text-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --accent: #d95926;      /* overhead / alerts */
  --nearby: #3987e5;      /* nearby, not overhead */
  --good: #0ca30c;
  --warn: #fab219;
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--text); }
h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
button, select { font: inherit; color: inherit; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.logo .dot { fill: var(--accent); stroke: none; }
.name { font-weight: 700; font-size: 16px; }
.place { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-2); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); white-space: nowrap; }
.badge.sim { color: var(--warn); border-color: rgba(250, 178, 25, 0.4); }
.badge.live { color: var(--good); border-color: rgba(12, 163, 12, 0.45); }
.conn { display: inline-flex; align-items: center; gap: 6px; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn.live i { background: var(--good); box-shadow: 0 0 0 3px rgba(12, 163, 12, 0.2); }
.conn.stale i { background: var(--warn); }
.clock { font-variant-numeric: tabular-nums; color: var(--text); }

/* layout */
.grid {
  display: grid; gap: 12px; padding: 12px 16px 24px;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "map side" "today upcoming" "today alerts";
}
.map-panel { grid-area: map; position: relative; padding: 0; overflow: hidden; min-height: 600px; }
.side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.upcoming { grid-area: upcoming; }
.today { grid-area: today; }
.alerts { grid-area: alerts; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
#map { position: absolute; inset: 0; }

@media (max-width: 960px) {
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "side" "upcoming" "today" "alerts"; }
  .map-panel { min-height: 460px; }
}

/* map overlays */
.map-legend { position: absolute; z-index: 2; left: 12px; top: 12px; background: rgba(26, 26, 25, 0.88); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 11px; color: var(--text-2); }
.ramp { display: flex; align-items: center; gap: 6px; }
.ramp .bar { width: 120px; height: 8px; border-radius: 4px; }
.ramp-labels { display: flex; justify-content: space-between; width: 120px; margin-left: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.home-marker { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 0 0 6px rgba(217, 89, 38, 0.25); }
.ring-label { font-size: 10px; color: var(--muted); background: rgba(13, 13, 13, 0.7); padding: 0 4px; border-radius: 3px; pointer-events: none; }
.ac { position: absolute; top: 0; left: 0; width: 30px; height: 30px; cursor: pointer; }
.ac svg { position: relative; width: 30px; height: 30px; fill: var(--c); stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.9; paint-order: stroke; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); transition: transform 0.4s linear; }
.ac.light svg { width: 22px; height: 22px; margin: 4px; }
.ac.heli svg { width: 26px; height: 26px; margin: 2px; }
.ac .lbl { position: absolute; left: 30px; top: 1px; font-size: 11px; line-height: 1.15; white-space: nowrap; color: var(--text); text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.ac .lbl small { color: var(--text-2); font-size: 10px; }
.ac.sel svg { stroke: var(--accent); stroke-width: 2.2; }
.ac.sel .lbl { color: var(--accent); font-weight: 600; }
.ac.far .lbl { display: none; }
.ac.sel.far .lbl { display: block; }
.ac .pulse { display: none; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--accent); pointer-events: none; }
.ac.alerting .pulse { display: block; animation: ac-pulse 1.6s ease-out infinite; }
.ac.alerting .lbl { color: var(--accent); font-weight: 600; }
@keyframes ac-pulse { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.heli-rotor { transform-origin: 12px 11px; animation: spin 0.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .heli-rotor, .ac.alerting .pulse { animation: none; } .ac svg { transition: none; } }

.detail { position: absolute; z-index: 2; left: 12px; bottom: 28px; width: 300px; max-width: calc(100% - 24px); background: rgba(26, 26, 25, 0.95); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.detail .close { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.detail .cs { font-size: 20px; font-weight: 700; }
.detail .sub { color: var(--text-2); margin-bottom: 8px; }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; font-variant-numeric: tabular-nums; }
.detail .cpa { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 13px; }
.detail .cpa b { color: var(--text); }

/* next overhead hero */
.next .eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.next .eyebrow.now { color: var(--good); }
.next .hero small { font-size: 18px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.next .hero { font-size: 40px; font-weight: 700; line-height: 1.1; margin: 4px 0 2px; }
.next .who { font-size: 16px; font-weight: 600; }
.next .who small { color: var(--text-2); font-weight: 400; }
.next .meta { color: var(--text-2); margin-top: 4px; font-size: 13px; }
.next .then { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }

/* sky view */
.sky-wrap { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 1; }
#sky { width: 100%; height: 100%; display: block; cursor: crosshair; }

/* lists */
.list { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 7px 6px; border-radius: 6px; cursor: pointer; border-bottom: 1px solid var(--grid); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row.sel { background: rgba(217, 89, 38, 0.12); }
.row .t { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13px; }
.row .main { min-width: 0; }
.row .cs { font-weight: 600; }
.row .cs small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.row .rt { color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nums { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-2); }
.row .nums b { color: var(--text); font-weight: 600; font-size: 13px; }
.chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; border: 1px solid var(--border); color: var(--text-2); }
.chip.over { color: #fff; background: var(--accent); border-color: var(--accent); }
.chip.near { color: var(--text); border-color: var(--nearby); }
.chip.soon { color: var(--accent); border-color: rgba(217, 89, 38, 0.5); }
.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.empty { color: var(--muted); padding: 12px 6px; }
.list.scroll { max-height: 420px; overflow-y: auto; }

/* charts */
.chart { width: 100%; margin-bottom: 14px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.chart-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sq { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.tooltip { position: fixed; z-index: 20; pointer-events: none; background: #262624; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--text-2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); max-width: 260px; }
.tooltip b { color: var(--text); }

/* alerts */
.alert-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin: 12px 0; }
.alert-grid label { color: var(--text-2); font-size: 13px; }
select { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.btn:hover { border-color: rgba(255, 255, 255, 0.25); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.note { color: var(--muted); font-size: 12px; margin: 10px 0 0; line-height: 1.45; }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.toast { position: relative; background: #262624; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); animation: toast-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.toast.out { animation: toast-out 0.35s ease-in forwards; }
.toast .close { position: absolute; right: 6px; top: 4px; z-index: 2; background: none; border: 0; color: rgba(255, 255, 255, 0.7); font-size: 18px; cursor: pointer; }
.toast .body { padding: 10px 14px 12px; border-left: 3px solid var(--accent); }
.toast .body b { display: block; margin-bottom: 2px; }
.toast .body span { color: var(--text-2); font-size: 13px; }
.toast .bar { height: 3px; background: rgba(217, 89, 38, 0.2); }
.toast .bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
@keyframes toast-in { from { transform: translateY(24px) scale(0.96); opacity: 0; } }
@keyframes toast-out { to { transform: translateX(110%); opacity: 0; } }

/* the little alert scene: house, radar ping, plane crossing overhead */
.scene { position: relative; height: 92px; background: linear-gradient(180deg, #0d1a2b 0%, #16263a 70%, #1d2a33 100%); overflow: hidden; }
.scene .stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 20%, #fff6, transparent), radial-gradient(1px 1px at 45% 55%, #fff5, transparent), radial-gradient(1px 1px at 88% 48%, #fff7, transparent), radial-gradient(1px 1px at 8% 62%, #fff5, transparent); }
.scene .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #11181d; border-top: 1px solid #2a3a44; }
.scene .house { position: absolute; left: 50%; bottom: 11px; width: 34px; height: 30px; margin-left: -17px; }
.scene .house path { fill: #c3c2b7; }
.scene .house .win { fill: var(--warn); animation: win 2.4s ease-in-out infinite; }
.scene .ping { position: absolute; left: 50%; bottom: 26px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ping 2s ease-out infinite; }
.scene .ping.p2 { animation-delay: 0.66s; }
.scene .ping.p3 { animation-delay: 1.33s; }
.scene .flyer { position: absolute; top: 14px; left: 0; width: 100%; height: 30px; animation: fly 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
.scene.rtl .flyer { animation-name: fly-rtl; }
.scene .flyer svg { position: absolute; left: 0; top: 0; width: 30px; height: 30px; fill: #fff; transform: rotate(90deg); filter: drop-shadow(0 0 6px rgba(217, 89, 38, 0.8)); }
.scene.rtl .flyer svg { transform: rotate(-90deg); }
.scene .flyer .trail { position: absolute; top: 14px; left: -150px; width: 160px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55)); }
.scene.rtl .flyer .trail { left: 20px; background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.55)); }
.scene .eta { position: absolute; left: 10px; bottom: 16px; font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px #000; }
.scene .eta small { font-size: 11px; font-weight: 600; color: var(--text-2); display: block; letter-spacing: 0.04em; text-transform: uppercase; }
@keyframes fly { from { transform: translateX(-40px); } to { transform: translateX(calc(100% + 40px)); } }
@keyframes fly-rtl { from { transform: translateX(calc(100% + 10px)); } to { transform: translateX(-70px); } }
@keyframes ping { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes win { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.out, .scene .flyer, .scene .ping, .scene .house .win { animation: none; }
  .scene .flyer { transform: translateX(45%); }
  .scene .ping { opacity: 0.6; }
}

.maplibregl-ctrl-attrib { background: rgba(13, 13, 13, 0.7) !important; color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--text-2) !important; }

/* sign-in (same shape as Lector's: one narrow column, one field, nothing else) */
body.locked main, body.locked .status > :not(.clock) { display: none; }
.login-screen[hidden] { display: none; }
.login-screen { min-height: calc(100vh - 60px); display: flex; align-items: flex-start; justify-content: center; }
.login { width: 100%; max-width: 22rem; margin: 3rem auto; padding: 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.login h1 { margin: 0; font-size: 1.35em; font-weight: 600; }
.login .hint { margin: 0 0 0.5rem; color: var(--text-2); }
.login .field { font-weight: 600; }
.login input { min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font: inherit; }
.login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login input[aria-invalid="true"] { border-color: #e66767; }
.login .error { margin: 0; color: #e66767; }
.login .submit { position: relative; min-height: 44px; margin-top: 0.5rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: opacity 0.15s ease-out; }
.login .submit[disabled] { cursor: default; }
.login .submit:not([disabled]):active { opacity: 0.85; }
.login .submit .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; }
.login .submit[aria-busy="true"] .label { visibility: hidden; }
.login .submit[aria-busy="true"] .spinner { display: block; }
.link-btn { background: none; border: 0; padding: 0; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--text); }