:root {
  --bg: #0b1220;
  --glass: rgba(12, 18, 30, 0.72);
  --glass-2: rgba(20, 28, 44, 0.86);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --fg: #e8edf5;
  --fg-2: #a7b2c4;
  --fg-3: #6f7b8f;
  --accent: #4cc2ff;
  --live: #3ddc84;
  --warn: #ffb547;
  --bad: #ff5a5f;
  --radius: 12px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font: 13px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; outline: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* dragging the map across labels, chips or the toolbar mustn't select their text */
#labels, #top, #next, #compass, #mapwrap, #credits, #ui-show, #uimenu { -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; }
a { color: var(--fg-2); }

/* ---------- labels over aircraft ---------- */
.lbl { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: auto; cursor: pointer;
  font: 600 11px/1.15 var(--font); color: #fff; padding: 3px 6px 3px 6px; border-radius: 6px; background: rgba(10, 14, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); will-change: transform, opacity; }
.lbl small { display: block; font: 500 9.5px/1.2 var(--mono); color: var(--fg-2); }
.lbl::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 1px; height: 5px; background: rgba(255, 255, 255, 0.35); }
.lbl i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.lbl.sel { background: rgba(76, 194, 255, 0.28); border-color: rgba(76, 194, 255, 0.8); }
.lbl.sched { opacity: 0.75; font-style: italic; }
.lbl.dim small { display: none; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #13213a 0%, #0b1220 70%); z-index: 50; transition: opacity 0.6s; }
#loading.done { opacity: 0; pointer-events: none; }
.load-card { width: min(360px, 86vw); text-align: center; }
.load-card .brand { font-size: 28px; justify-content: center; margin-bottom: 18px; }
.load-step { color: var(--fg-2); font-size: 13px; min-height: 18px; }
.load-bar { margin-top: 12px; height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #8f7bff); transition: width 0.3s; }

/* ---------- top bar ---------- */
#top { position: fixed; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; z-index: 10; pointer-events: none; }
#top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 2px; font: 600 17px/1 var(--font); letter-spacing: 0.06em; color: var(--fg); }
.brand b { font-weight: 800; color: var(--accent); margin-left: 3px; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-3); margin-right: 8px; }
.brand .dot.live { background: var(--live); box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: pulse 2s infinite; }
.brand .dot.stale { background: var(--warn); animation: none; }
.brand .dot.down { background: var(--bad); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
#top > .brand { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 13px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.chip { background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; color: var(--fg-2); font: 500 12px/1 var(--font); white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chip b { color: var(--fg); font-weight: 600; }
.bar { display: flex; gap: 6px; align-items: center; }
.seg { display: flex; align-items: center; gap: 2px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.seg button { border: 0; background: transparent; padding: 7px 12px; border-radius: 9px; cursor: pointer; color: var(--fg-2); font-weight: 500; }
.seg button:hover:not(:disabled) { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.seg button.on { background: rgba(76, 194, 255, 0.18); color: #fff; }
.seg button:disabled { opacity: 0.35; cursor: default; }
.seg button.icon { width: 34px; height: 32px; padding: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.seg button.icon svg { width: 18px; height: 18px; }
.seg select { background: transparent; color: var(--fg-2); border: 0; padding: 7px 6px; font: 500 13px var(--font); cursor: pointer; outline: none; max-width: 150px; }
.seg select option { background: #141c2c; color: var(--fg); }

/* ---------- panels ---------- */
.panel { position: fixed; z-index: 9; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.panel.hidden { display: none; }
#list { left: 12px; top: 66px; bottom: 300px; width: 300px; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { padding: 10px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; }
.fold { border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--fg-2); border-radius: 8px; width: 30px; cursor: pointer; font-size: 16px; }
.fold-open { left: 12px; top: 66px; width: 30px; height: 40px; cursor: pointer; color: var(--fg-2); font-size: 16px; }
#list.folded { display: none; }
#search { width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--fg); font: inherit; outline: none; }
#search:focus { border-color: rgba(76, 194, 255, 0.6); }
.tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; background: transparent; color: var(--fg-3); padding: 6px 2px; border-radius: 7px; cursor: pointer; font-size: 11.5px; font-weight: 600; }
.tabs button.on { color: var(--fg); background: rgba(255, 255, 255, 0.08); }
.rows { overflow-y: auto; flex: 1; padding: 4px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.row { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; padding: 7px 12px; cursor: pointer; border-left: 2px solid transparent; }
.row:hover { background: rgba(255, 255, 255, 0.04); }
.row.sel { background: rgba(76, 194, 255, 0.12); border-left-color: var(--accent); }
.row .sw { width: 8px; height: 26px; border-radius: 3px; }
.row .t1 { font-weight: 600; font-size: 13px; color: var(--fg); }
.row .t1 span { font-weight: 500; color: var(--fg-3); font-size: 11.5px; margin-left: 6px; }
.row .t2 { color: var(--fg-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .st { text-align: right; font-size: 11px; color: var(--fg-2); }
.row .st b { display: block; font: 600 12px var(--mono); color: var(--fg); }
.pill { display: inline-block; padding: 2px 7px; border-radius: 999px; font: 600 10.5px/1.3 var(--font); letter-spacing: 0.02em; background: rgba(255, 255, 255, 0.08); color: var(--fg-2); }
.pill.p-PARKED { background: rgba(160, 170, 190, 0.16); }
.pill.p-PUSHBACK, .pill.p-TAXI, .pill.p-HOLD { background: rgba(255, 181, 71, 0.18); color: #ffd28f; }
.pill.p-LINEUP, .pill.p-TAKEOFF, .pill.p-LANDING { background: rgba(255, 90, 95, 0.2); color: #ffb3b5; }
.pill.p-APPROACH, .pill.p-DESCENT { background: rgba(76, 194, 255, 0.18); color: #a9e2ff; }
.pill.p-CLIMB, .pill.p-CRUISE { background: rgba(143, 123, 255, 0.2); color: #cdc3ff; }
.pill.sched { background: rgba(255, 255, 255, 0.05); color: var(--fg-3); font-style: italic; }

#info { right: 12px; top: 66px; width: 340px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 16px 16px 14px; }
#info .close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--fg-3); font-size: 22px; cursor: pointer; line-height: 1; }
.info-al { display: flex; align-items: center; gap: 10px; }
.info-al .tail { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.info-al h2 { margin: 0; font: 700 20px/1.1 var(--font); }
.info-al .sub { color: var(--fg-2); font-size: 12px; }
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 14px 0 10px; }
.route .ap { font: 700 24px/1 var(--font); }
.route .ap small { display: block; font: 500 11px/1.3 var(--font); color: var(--fg-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route .ap.r { text-align: right; }
.route .arrow { color: var(--fg-3); font-size: 16px; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 10px 0; }
.kv div { background: var(--glass-2); padding: 8px 10px; }
.kv label { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.kv b { font: 600 14px/1.3 var(--mono); color: var(--fg); }
.info-sec { margin-top: 12px; }
.info-sec h3 { margin: 0 0 6px; font: 600 10.5px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.times { width: 100%; border-collapse: collapse; font-size: 12px; }
.times td { padding: 3px 0; color: var(--fg-2); }
.times td:last-child { text-align: right; font-family: var(--mono); color: var(--fg); }
.note { font-size: 11.5px; color: var(--fg-3); margin-top: 8px; }
.btns { display: flex; gap: 6px; margin-top: 12px; }
.btns button { flex: 1; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btns button:hover { background: rgba(255, 255, 255, 0.1); }
.btns button.on { background: rgba(76, 194, 255, 0.2); border-color: rgba(76, 194, 255, 0.6); }

.env-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.env-row label { color: var(--fg-3); min-width: 54px; }
.env-row input[type=range] { flex: 1; accent-color: var(--accent); }
.env-row select { flex: 1; background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 4px; font: inherit; }
.env-row span { min-width: 54px; text-align: right; font-family: var(--mono); color: var(--fg); }
.env-row input[type=checkbox] { accent-color: var(--accent); margin-right: 10px; }

#credits { position: fixed; left: 12px; right: 12px; bottom: 10px; font-size: 10.5px; color: rgba(220, 228, 240, 0.55); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); z-index: 8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; }
#credits a { color: rgba(220, 228, 240, 0.75); }

@media (max-width: 820px) {
  #top { flex-wrap: wrap; }
  .chips { order: 3; flex-basis: 100%; }
  #chip-count, #chip-time { display: none; }
  #list { top: auto; bottom: 34px; left: 8px; right: 8px; width: auto; height: 34vh; }
  #info { left: 8px; right: 8px; width: auto; top: auto; bottom: 34px; max-height: 50vh; }
  .cams button { padding: 7px 9px; }
}

/* ---------- minimap, compass, next arrivals, toasts, help, debug ---------- */
#mapwrap { left: 12px; bottom: 34px; width: 300px; height: 250px; overflow: hidden; padding: 0; }
#mapwrap.big { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(1100px, 92vw); height: min(760px, 82vh); z-index: 20; }
#map { position: absolute; inset: 0; }
#map canvas { display: block; cursor: crosshair; touch-action: none; }
.map-btn { position: absolute; right: 6px; bottom: 6px; z-index: 2; border: 1px solid var(--line-2); background: rgba(12,18,30,0.8); color: var(--fg); border-radius: 7px; width: 28px; height: 26px; cursor: pointer; }
#compass { right: 12px; bottom: 34px; width: 52px; height: 52px; border-radius: 50%; padding: 4px; cursor: pointer; display: grid; place-items: center; }
#compass svg { width: 40px; height: 40px; }
#next { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 8; display: flex; gap: 6px; }
#next.hidden { display: none; }
#next .na { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; color: var(--fg-2); white-space: nowrap; }
#next .na b { color: var(--fg); font-weight: 700; margin-right: 6px; }
#next .na span { font-family: var(--mono); color: #a9e2ff; margin-left: 6px; }
#next .na:hover { border-color: rgba(76, 194, 255, 0.6); }
#next .title { align-self: center; font: 600 10.5px var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding: 0 4px; }
#toast { position: fixed; left: 50%; top: 66px; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast .t { background: rgba(14, 20, 34, 0.92); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 14px; font-size: 13px; color: var(--fg); box-shadow: 0 8px 30px rgba(0,0,0,0.4); pointer-events: auto; display: flex; gap: 10px; align-items: center; animation: tin 0.25s ease-out; }
#toast .t button { border: 1px solid rgba(76, 194, 255, 0.6); background: rgba(76, 194, 255, 0.18); color: #fff; border-radius: 7px; padding: 4px 9px; cursor: pointer; font-weight: 600; }
@keyframes tin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#help { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, 92vw); padding: 18px 20px; z-index: 25; }
#help h3 { margin: 0 0 10px; font-size: 15px; }
#help td { padding: 5px 10px 5px 0; vertical-align: top; color: var(--fg-2); font-size: 12.5px; }
#help td:first-child { white-space: nowrap; color: var(--fg); }
#help .close, #info .close, #feedback .close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--fg-3); font-size: 22px; cursor: pointer; line-height: 1; }
/* the feedback form (ui.js openFeedback): a card in the middle, at the top on a phone so the keyboard can't cover it */
#feedback { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, 92vw); padding: 18px 20px; z-index: 26; }
#feedback h3 { margin: 0 0 4px; font-size: 15px; }
#feedback .sub { margin: 0 0 12px; font-size: 12.5px; color: var(--fg-2); }
#feedback .note { margin: 12px 0 0; font-size: 11.5px; color: var(--fg-3); }
.fb-kinds { display: flex; gap: 6px; margin-bottom: 10px; }
.fb-kinds label { position: relative; flex: 1; text-align: center; padding: 7px 0; border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; color: var(--fg-2); cursor: pointer; }
.fb-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.fb-kinds label:has(input:checked) { border-color: rgba(76, 194, 255, 0.7); background: rgba(76, 194, 255, 0.16); color: #fff; }
.fb-kinds label:has(input:focus-visible) { outline: 2px solid rgba(76, 194, 255, 0.7); outline-offset: 1px; }
#fb-text, #fb-email { display: block; width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 9px 11px; background: rgba(8, 12, 22, 0.6); border: 1px solid var(--line-2); border-radius: 8px; color: var(--fg); font: 13.5px/1.45 var(--font); }
#fb-text { resize: vertical; min-height: 110px; }
#fb-text:focus, #fb-email:focus { outline: none; border-color: rgba(76, 194, 255, 0.7); }
.fb-ctx { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 12px; font-size: 12px; color: var(--fg-3); cursor: pointer; }
.fb-ctx input { margin: 2px 0 0; }
.fb-row { display: flex; align-items: center; gap: 10px; }
.fb-status { flex: 1; font-size: 12.5px; color: var(--fg-2); }
.fb-status.err { color: #ffb3b5; }
.fb-status.ok { color: #9ff0c0; }
.fb-count { font: 11px var(--mono); color: var(--fg-3); }
#fb-send { border: 1px solid rgba(76, 194, 255, 0.6); background: rgba(76, 194, 255, 0.18); color: #fff; border-radius: 8px; padding: 8px 18px; font-weight: 600; cursor: pointer; }
#fb-send:disabled { opacity: 0.5; cursor: default; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 820px) { #feedback { top: 10px; transform: translateX(-50%); max-height: calc(100vh - 20px); overflow: auto; } }
#debug { right: 74px; bottom: 34px; padding: 10px 12px; width: 330px; font-size: 12px; z-index: 12; }
.dbg-head { font-weight: 700; margin-bottom: 6px; color: #ffd28f; display: flex; justify-content: space-between; }
.dbg-head span { font-weight: 500; color: var(--fg-3); font-family: var(--mono); }
#dbg-stats { margin: 6px 0 0; font: 11px/1.45 var(--mono); color: var(--fg-2); white-space: pre-wrap; max-height: 220px; overflow: auto; }
.follow-hud { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.row .eta { font: 600 11px var(--mono); color: #a9e2ff; }
@media (max-width: 820px) {
  #mapwrap { width: 46vw; height: 30vh; bottom: auto; top: 110px; left: 8px; }
  #compass { bottom: auto; top: 110px; right: 8px; }
  #next { display: none; }
  .seg select { max-width: 90px; }
  .seg button { padding: 7px 8px; }
}

/* ---------- tucking the interface away: the panels menu, clean view (U), the mini map's fold ---------- */
#uimenu { top: 62px; right: 12px; width: 220px; padding: 8px; z-index: 22; display: flex; flex-direction: column; gap: 2px; }
#uimenu.hidden { display: none; }
#uimenu .ui-clean { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line-2); background: rgba(76, 194, 255, 0.14); color: #fff; border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; cursor: pointer; font-weight: 600; }
#uimenu .ui-clean:hover { background: rgba(76, 194, 255, 0.24); }
#uimenu .tg { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; cursor: pointer; color: var(--fg-2); }
#uimenu .tg:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
#uimenu .tg input { accent-color: var(--accent); margin: 0; }
#uimenu .tg span { flex: 1; }
#uimenu .tg small { color: var(--fg-3); font-size: 11px; margin-left: 3px; }
#uimenu kbd, #help kbd { font: 500 10.5px/1 var(--mono); color: var(--fg-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 5px; }
#ui-show { top: 12px; right: 12px; z-index: 11; display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px; color: var(--fg-2); cursor: pointer; opacity: 0.55; transition: opacity 0.2s; border-radius: 999px; }
#ui-show:hover, #ui-show:focus-visible { opacity: 1; color: var(--fg); }
#ui-show svg { width: 17px; height: 17px; }
#ui-show span { font-weight: 600; font-size: 12px; }
#ui-show.hidden, #map-open.hidden { display: none; }
.map-fold { right: 38px; }
#map-open { left: 12px; bottom: 34px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-2); cursor: pointer; padding: 0; }
#map-open:hover { color: var(--fg); }
#map-open svg { width: 20px; height: 20px; }
body.hide-map #mapwrap:not(.big) { display: none; }
body.hide-map #list { bottom: 84px; }
body.hide-next #next { display: none; }
body.hide-chips #top .chips { visibility: hidden; }
body.hide-compass #compass { display: none; }
body.clean #top, body.clean #list, body.clean #list-open, body.clean #info, body.clean #next, body.clean #mapwrap:not(.big),
body.clean #compass, body.clean #map-open, body.clean #debug, body.clean #uimenu { display: none !important; }
body.clean #credits { opacity: 0.4; }
.donate-note.hidden, .donate-foot.hidden, .fb-note.hidden, .fb-foot.hidden { display: none; }
#credits .donate-link { color: #ffb3c1; text-decoration: none; }
#credits .donate-link:hover { text-decoration: underline; }
/* narrow desktops and tablets: the status chips get their own row under the toolbar instead of wrapping over the list */
@media (min-width: 821px) and (max-width: 1240px) {
  #top { flex-wrap: wrap; row-gap: 8px; }
  .bar { margin-left: auto; }
  .chips { order: 3; flex-basis: 100%; }
  #list, .fold-open, #info { top: 100px; }
}
/* phones: row 1 the brand and the icon buttons, row 2 the cameras, row 3 the status chips (everything stays on screen) */
@media (max-width: 820px) {
  #top { top: 8px; left: 8px; right: 8px; gap: 8px; }
  #top > .brand { order: 1; padding: 8px 11px; font-size: 15px; }
  .bar { display: contents; }
  .bar > .seg:last-child { order: 2; margin-left: auto; }
  #cams { order: 3; flex-basis: 100%; justify-content: space-between; }
  #cams button { flex: 1; padding: 7px 4px; }
  .chips { order: 4; }
  #b-map { display: none; }   /* the mini map has its own full-screen button */
  .seg select { width: 34px; max-width: 34px; padding: 0; color: transparent; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11Z' fill='none' stroke='%23a7b2c4' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='10' r='2.3' fill='none' stroke='%23a7b2c4' stroke-width='1.7'/%3E%3C/svg%3E") center / 18px no-repeat; -webkit-appearance: none; appearance: none; }
  #uimenu { top: 58px; right: 8px; }
  #mapwrap, #compass, #map-open { top: 154px; }
  #list-open { top: auto; bottom: 34px; left: 8px; }   /* the list opens from the bottom on phones */
  #map-open { bottom: auto; left: 8px; }
  body.hide-map #list { bottom: 34px; }
}

/* the live viewer count */
.chip.hidden { display: none; }
#chip-viewers .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 6px rgba(61, 220, 132, 0.7); }

/* phones: the selected aircraft's card is a short strip (name, route, what it's doing), the rest scrolls inside it;
   its buttons stay pinned at the bottom so Follow and Locate are always one tap away */
@media (max-width: 820px) {
  #info { max-height: min(216px, 38vh); padding: 12px 14px 0; }
  #info .info-al h2 { font-size: 18px; }
  #info .info-al .tail { width: 28px; height: 28px; }
  #info .route { margin: 8px 0 6px; }
  #info .route .ap { font-size: 20px; }
  #info .btns { position: sticky; bottom: 0; margin: 10px -14px 0; padding: 8px 14px 10px; background: var(--glass-2); border-top: 1px solid var(--line); }
  #info .btns + .btns { position: static; margin-top: 0; border-top: 0; }
}

/* the loading bar's last step: no measurable progress, so a moving shimmer says it hasn't stalled */
.load-bar i.busy { background: linear-gradient(90deg, var(--accent) 0%, #8f7bff 40%, #c9f0ff 50%, #8f7bff 60%, var(--accent) 100%); background-size: 220% 100%; animation: loadshimmer 1.4s linear infinite; }
@keyframes loadshimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }

/* fly mode on a touch screen (flypad.js): a thumb stick at the bottom left, climb and descend at the bottom right;
   the bottom panels make room for them while flying */
#flypad.hidden { display: none; }
#fly-stick { position: fixed; z-index: 12; left: calc(18px + env(safe-area-inset-left)); bottom: calc(40px + env(safe-area-inset-bottom)); width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 18, 30, 0.3) 0 40%, rgba(12, 18, 30, 0.6) 41%); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#fly-stick i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; pointer-events: none;
  background: rgba(76, 194, 255, 0.28); border: 1.5px solid rgba(76, 194, 255, 0.75); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
#fly-stick.on i { background: rgba(76, 194, 255, 0.46); }
.fly-lift { position: fixed; z-index: 12; right: calc(18px + env(safe-area-inset-right)); bottom: calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.fly-lift button { width: 60px; height: 60px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--fg); cursor: pointer;
  background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fly-lift button svg { width: 26px; height: 26px; }
.fly-lift button.on { background: rgba(76, 194, 255, 0.32); border-color: rgba(76, 194, 255, 0.75); }
body.flying #list, body.flying #list-open, body.flying #info, body.flying #next { display: none !important; }

/* the next landings, tucked away (the default): a small pill where the strip was; the strip's own – tucks it back */
#next-open { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 8; cursor: pointer; padding: 6px 12px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 10.5px var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
#next-open:hover { color: var(--fg); border-color: rgba(76, 194, 255, 0.6); }
#next-open.hidden { display: none; }
#next .na-fold { align-self: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--fg-3);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#next .na-fold:hover { color: var(--fg); }
body.clean #next-open { display: none !important; }
@media (max-width: 820px) { #next-open { display: none !important; } }

/* the selected aircraft's card on a phone: compact by default (flight, route and status, Follow and Locate), expanded
   by tapping it or swiping its handle up (the figures and the details), compact again with the handle. The view's
   centre rises to the middle of the clear area above it (camera.js applyShift). No handle and no states on a desktop */
#info .grab { display: none; }
@media (max-width: 820px) {
  #info .grab { display: block; width: calc(100% + 28px); height: 24px; margin: -12px -14px 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; }
  #info .grab::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); margin: 9px auto 0; }
  #info.expanded { max-height: min(352px, 46vh); }
  #info.compact { max-height: none; overflow: hidden; }
  #info.compact .info-al { align-items: center; }
  #info.compact .info-al .tail { width: 22px; height: 22px; border-radius: 6px; }
  #info.compact .info-al h2 { font-size: 17px; display: inline; margin: 0; }
  #info.compact .info-al .sub { display: inline; margin-left: 8px; font-size: 12px; }
  #info.compact .route { display: inline-flex; align-items: baseline; gap: 6px; margin: 8px 10px 0 0; vertical-align: middle; }
  #info.compact .route .ap { font-size: 15px; }
  #info.compact .route .ap small { display: none; }
  #info.compact .route .arrow { font-size: 13px; }
  #info.compact .route + div { display: inline; vertical-align: middle; }
  #info.compact .pill { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  #info.compact .route + div .pill:nth-of-type(n+3) { display: none; }
  #info.compact .kv, #info.compact .info-sec, #info.compact .note, #info.compact .btns + .btns { display: none; }
  #info.compact .btns { position: static; margin: 10px -14px 0; }
  #info.compact .close { top: 10px; }
}