:root {
  --bg: #0e1420;
  --panel: #141c2c;
  --panel-2: #1a2438;
  --border: #263450;
  --text: #e8eef8;
  --muted: #8fa1bd;
  --accent: #4fc3f7;
  --accent-2: #ffb74d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  display: flex;
}

#sidebar {
  width: 360px;
  min-width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 1000;
}

#sidebar header {
  padding: 18px 18px 10px;
}

h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.5px;
}

h1 .dot { color: var(--accent); }

/* brand wordmark: light-blue "Only" + white "Nonstop" */
.b-only { color: var(--accent); }
.b-nonstop { color: #fff; }

.tagline {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.search-wrap {
  position: relative;
  padding: 8px 18px 12px;
  display: flex;
  gap: 8px;
}

#search {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

#search:focus { border-color: var(--accent); }

#surprise {
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

#surprise:hover { border-color: var(--accent-2); }

#suggestions {
  position: absolute;
  top: 100%;
  left: 18px;
  right: 18px;
  margin: -6px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1100;
}

#suggestions li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#suggestions li.active,
#suggestions li:hover { background: rgba(79, 195, 247, 0.15); }

.code {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  font-size: 13px;
  min-width: 34px;
}

.sug-name { font-size: 13px; flex: 1; }
.sug-place { font-size: 12px; color: var(--muted); white-space: nowrap; }

#trail {
  padding: 0 18px 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

#trail .hop-chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#trail .hop-chip:hover { border-color: var(--accent); }
#trail .hop-chip.current { border-color: var(--accent); color: var(--accent); cursor: default; }

#summary {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

#summary .big { font-size: 15px; font-weight: 600; }
#summary .stats { color: var(--muted); }
#summary .stats b { color: var(--accent-2); font-weight: 600; }

#dest-filter-wrap { padding: 0 18px 10px; }

#dest-filter {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

#destinations {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
}

.country-group { margin-bottom: 4px; }

.country-head {
  position: sticky;
  top: 0;
  background: var(--panel);
  padding: 8px 8px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

.dest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
}

.dest-item:hover,
.dest-item.highlight { background: rgba(79, 195, 247, 0.12); }

.dest-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dest-city {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dest-airlines {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hop-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

.hop-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }

.empty-state {
  padding: 30px 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

#sidebar footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

#sidebar footer a { color: var(--accent); text-decoration: none; }

#map {
  flex: 1;
  height: 100%;
  background: #0a0f18;
}

.leaflet-container { font: inherit; }

.leaflet-tooltip.dest-tip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.leaflet-tooltip.dest-tip::before { display: none; }

.tip-sub { color: var(--muted); font-size: 11px; }

/* Bottom-sheet drag handle: mobile-only UI, inert and invisible on desktop */
#sheet-handle { display: none; }
#sheet-chev { display: none; }



.badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: 1px;
  cursor: help;
}

.badge.live {
  color: #7ee8a2;
  border: 1px solid rgba(126, 232, 162, 0.4);
  background: rgba(126, 232, 162, 0.08);
}

.badge.archive {
  color: var(--accent-2);
  border: 1px solid rgba(255, 183, 77, 0.4);
  background: rgba(255, 183, 77, 0.08);
}

/* destination details popup */
.dest-popup .leaflet-popup-content-wrapper {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.dest-popup .leaflet-popup-content {
  margin: 12px 14px;
  font: inherit;
  line-height: 1.4;
}

.dest-popup .leaflet-popup-tip {
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.dest-popup .leaflet-popup-close-button {
  color: var(--muted);
}

.pop-head { font-size: 14px; }

.pop-sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.pop-airlines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 2px;
}

.al-chip {
  background: rgba(79, 195, 247, 0.12);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
}

.pop-hop {
  margin-top: 9px;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 183, 77, 0.5);
  color: var(--accent-2);
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
}

.pop-hop:hover { background: rgba(255, 183, 77, 0.1); }

/* fare display + controls */
.dest-price {
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  flex-shrink: 0;
}

#controls {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ctl {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}

.ctl:hover { border-color: var(--accent); color: var(--text); }
.ctl.on { border-color: var(--accent); color: var(--accent); }
.ctl.disabled { cursor: default; opacity: 0.5; display: inline-block; }
.ctl.disabled:hover { border-color: var(--border); color: var(--muted); }

#al-clear.on { border-color: var(--accent-2); color: var(--accent-2); }

.legend {
  font-size: 10px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}

/* FAA delay indicators */
.faa-ring {
  width: 22px;
  height: 22px;
  border: 2px solid #ef6a6a;
  border-radius: 50%;
  animation: faa-pulse 1.6s ease-out infinite;
}

@keyframes faa-pulse {
  0% { transform: scale(0.45); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

.faa-note {
  margin-top: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(239, 106, 106, 0.45);
  background: rgba(239, 106, 106, 0.08);
  color: #f3a1a1;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.4;
}

.row-warn {
  color: #ef6a6a;
  margin-left: 5px;
  font-size: 11px;
  cursor: help;
}

.pop-faa {
  margin-top: 6px;
  color: #f3a1a1;
  font-size: 11px;
}

/* live delay callouts (AeroDataBox delay stats): amber = 30+ min median,
   red = 90+ min. Card line, deck readout tag, and airport-panel accents. */
.pop-delay {
  margin-top: 6px;
  color: var(--accent-2);
  font-size: 11px;
}
.pop-delay.sev { color: #ef6a6a; }
.pop-delay[hidden] { display: none; }
.do-delay {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  border: 1px solid rgba(255, 183, 77, 0.45);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.do-delay.sev { color: #ef6a6a; border-color: rgba(239, 106, 106, 0.5); }
.ap-stat .dly-warn { color: var(--accent-2); }
.ap-stat .dly-sev { color: #ef6a6a; }
.ap-stat .dly-ok { color: #7ee8a2; }

/* "Today at {airport}" dashboard (Airport panel) — Flighty-inspired:
   plain-English verdict, number-first scoreboard, stacked outcome trend */
.apd-verdict {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  margin: 4px 0 8px;
}
.apd-big {
  display: flex;
  gap: 14px;
  margin: 2px 0 8px;
}
.apd-cell b {
  display: block;
  font-size: 21px;
  font-weight: 650;
  line-height: 1.1;
}
.apd-cell span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}
.apd-cell span i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}
.tk-ok { background: #7ee8a2; }
.tk-warn { background: var(--accent-2); }
.tk-sev { background: #ef6a6a; }
.apd-trend {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
  margin: 4px 0 3px;
}
.apd-trend span {
  flex: 1;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse; /* on-time at the base, worst on top */
}
.apd-trend span.fut { opacity: 0.4; }
.apd-trend span i { width: 100%; }
.sg-ok { background: #7ee8a2; }
.sg-warn { background: var(--accent-2); }
.sg-sev { background: #ef6a6a; }
.sg-canc { background: #a03c3c; }
.apd-axis {
  display: flex;
  gap: 2px;
  margin: 1px 0 2px;
}
.apd-axis span {
  flex: 1;
  min-width: 3px;
  font-size: 8px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}
.apd-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11px;
  padding: 2px 0;
}
.apd-row .apd-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.apd-row .apd-n { color: var(--accent-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* popup booking + clickable chips */
.pop-book {
  display: block;
  margin-top: 9px;
  text-align: center;
  background: rgba(126, 232, 162, 0.1);
  border: 1px solid rgba(126, 232, 162, 0.5);
  color: #7ee8a2;
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
  text-decoration: none;
}

.pop-book:hover { background: rgba(126, 232, 162, 0.18); }

.al-chip.clickable { cursor: pointer; }
.al-chip.clickable:hover { border-color: var(--accent); color: var(--accent); }

/* map layers control */
.layers-ctl {
  background: transparent;
}

.lc-toggle {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.lc-toggle:hover { border-color: var(--accent); }

.lc-panel {
  margin-top: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  min-width: 170px;
  font-size: 12px;
  color: var(--text);
}

.lc-sec {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin: 8px 0 4px;
}

.lc-sec:first-child { margin-top: 0; }

.lc-panel label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
}

.lc-panel input { accent-color: var(--accent); }

.lc-legend {
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
}

.lc-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px 0 6px;
}

.lc-legend i:first-child { margin-left: 0; }

.lc-hint { font-size: 10px; color: var(--muted); }

.dest-wx {
  font-size: 11px;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* airport toolbar links */
#apt-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#apt-links .ctl { text-decoration: none; }

/* live aircraft */
.plane {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.lc-sub {
  margin-left: 16px;
  font-size: 11px;
  color: var(--muted);
}

.lc-sub input:disabled + * { opacity: 0.4; }

/* prominent active-filter bar (under search) */
#filter-bar {
  padding: 0 18px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fbar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-right: 2px;
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 183, 77, 0.12);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.fchip b { font-weight: 700; }

.fchip:hover {
  background: rgba(255, 183, 77, 0.25);
}

/* route panel — times & fares for one route */
#route-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 320px;
  z-index: 1200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#route-panel[hidden] { display: none; }

.rp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.rp-head b { font-size: 17px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.rp-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

#rp-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
}

#rp-close:hover { color: var(--text); }

.rp-links {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.rp-links .ctl { text-decoration: none; }

#rp-body { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }

.rp-date {
  position: sticky;
  top: 0;
  background: var(--panel);
  padding: 9px 6px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}

.rp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  font-size: 13px;
}

.rp-row:hover { background: rgba(79, 195, 247, 0.08); }

.rp-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 66px;
  color: var(--text);
}

.rp-info {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--muted);
}

.rp-dur { color: var(--muted); }

.rp-book {
  font-weight: 700;
  font-size: 13px;
  color: #7ee8a2;
  text-decoration: none;
  border: 1px solid rgba(126, 232, 162, 0.4);
  border-radius: 6px;
  padding: 2px 8px;
}

a.rp-book:hover { background: rgba(126, 232, 162, 0.12); }

.rp-foot {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

/* times button inside the destination popup */
.pop-times {
  display: block;
  width: 100%;
  margin-top: 9px;
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.45);
  color: var(--accent);
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
}

.pop-times:hover { background: rgba(79, 195, 247, 0.16); }

/* rankings panel (trial feature — see RANKINGS_PANEL flag in app.js) */
#rankings-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 320px;
  z-index: 1200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#rankings-panel[hidden] { display: none; }
#rk-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
}
#rk-close:hover { color: var(--text); }
#rk-body { overflow-y: auto; padding: 12px 16px 16px; }
.rk-hero {
  background: var(--panel-2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.rk-hero .rk-tag { font-size: 11px; color: var(--accent-2); }
.rk-hero .rk-nm { font-size: 14px; font-weight: 600; margin-top: 2px; }
.rk-hero .rk-nm a { color: var(--text); text-decoration: none; }
.rk-hero .rk-st { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rk-sec {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 0 6px;
}
.rk-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 6px 5px;
  margin: 0 -5px;
  border-radius: 6px;
  cursor: pointer;
}
.rk-row:hover { background: rgba(79, 195, 247, 0.1); }
.rk-row .rk-rank { color: var(--muted); width: 14px; flex-shrink: 0; }
.rk-row .rk-route { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .rk-val { color: var(--muted); font-weight: 600; margin-left: auto; white-space: nowrap; }
.rk-more { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--accent); text-decoration: none; }
.rk-more:hover { text-decoration: underline; }

@media (max-width: 760px) {
  #route-panel { left: 12px; width: auto; top: 60px; }
  #rankings-panel { left: 12px; width: auto; top: 60px; }
}

/* airport rankings drawer — slides out from the left sidebar's edge, sidebar
   itself is completely untouched (see AIRPORT_OVERLAY flag in app.js) */
/* Current-airport summary shown while the Details drawer is open — the drawer
   force-closes the dest-card (z-clash in the same corner), so this compact
   card keeps the chosen airport's identity/conditions visible. Positioned
   just right of the drawer's edge: #map starts at the sidebar's edge (360px,
   or 0 when collapsed) and the drawer is 546px wide, so left:558px inside
   #map lands 12px past the drawer in BOTH sidebar states. */
#pd-info {
  position: absolute;
  left: 558px;
  bottom: 26px;
  z-index: 950; /* above the drawer (900), below the sidebar (1000) */
  max-width: 270px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
#pd-info .pi-name b { font-size: 13px; }
#pd-info .pi-name .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  margin-left: 4px;
}
#pd-info .pi-sub { color: var(--muted); margin: 1px 0 5px; }
#pd-info .pi-stat { color: var(--text); }
@media (max-width: 760px) {
  #pd-info { display: none !important; } /* drawer is full-width on mobile */
}

#profile-drawer {
  position: fixed;
  top: 0;
  left: 360px; /* right at #sidebar's edge (width: 360px) */
  bottom: 0;
  width: 546px; /* 420px + 30% */
  /* Below #sidebar (1000): while opening/closing, the transform slide passes
     THROUGH the sidebar's screen area, and this ordering makes the sidebar
     occlude the drawer during that pass — i.e. the drawer slides UNDER the
     sidebar, not over it. Still above the map/globe (800). Because dest-card
     (1100) and emerg-card (1160) sit higher than this, pdOpen() explicitly
     closes them (they share the same bottom-left corner as this drawer) so
     nothing visually conflicts once the drawer is open. */
  z-index: 900;
  background: #0b0f14;
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
#profile-drawer[hidden] { display: none; }
#profile-drawer.open { transform: translateX(0); }
body.side-hidden #profile-drawer { left: 0; } /* sidebar collapsed → no gap to leave */
#pd-frame { flex: 1; width: 100%; border: none; display: block; }
#pd-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: rgba(20, 28, 44, 0.92);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  width: 28px;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
#pd-close:hover { color: var(--text); background: var(--panel-2); }

@media (max-width: 760px) {
  #profile-drawer { left: 0; width: 100%; }
}

/* "Airport Rankings" chip on the destination card — width:100% is required
   (unlike a plain <div>, a <button> with just display:block does NOT stretch
   to fill its container; .pop-hop already relies on this same explicit rule) */
.pop-details {
  display: block;
  width: 100%;
  margin-top: 9px;
  text-align: center;
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.5);
  color: var(--accent);
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
}
.pop-details:hover { background: rgba(79, 195, 247, 0.18); }
.pop-details.disabled {
  cursor: default;
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}
.pop-details.disabled:hover { background: transparent; }

/* continent filter pills */
#continent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.cont-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

.cont-pill span { color: var(--accent); font-weight: 600; margin-left: 2px; }

.cont-pill:hover { border-color: var(--accent); color: var(--text); }

.cont-pill.on {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(255, 183, 77, 0.1);
}

.cont-pill.on span { color: var(--accent-2); }

.al-chip.on {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(255, 183, 77, 0.12);
}

/* meet-up mode */
.pop-org {
  margin-top: 7px;
  font-size: 11px;
  color: var(--muted);
}

.pop-org b { color: var(--accent-2); }

#summary .hop-chip { font-size: 12px; padding: 2px 9px; }
#summary .hop-chip.org-rm:hover { border-color: #ef6a6a; color: #ef6a6a; }

/* floating search over the map */
#search-float {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  gap: 8px;
  width: min(440px, 70%);
}

#search-float #search {
  flex: 1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

#search-float #surprise {
  padding: 0 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

#search-float #suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
}

/* collapsible sidebar */
body.side-hidden #sidebar { display: none; }

/* first-arrival landing: just the map + a centered search box */
body.landing #sidebar { display: none; }
#landing {
  position: absolute;
  inset: 0;
  z-index: 1150;
  display: none; /* shown only in landing mode (below) — beats the [hidden] attr */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none; /* let the map stay draggable behind the hero */
}
body.landing #landing { display: flex; }
#landing .landing-brand {
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 800;
  letter-spacing: -1px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
#landing .landing-sub {
  margin: 8px 0 22px;
  color: var(--text);
  font-size: clamp(14px, 2vw, 18px);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
#search-landing {
  width: min(520px, 92vw);
  pointer-events: auto; /* the search box itself is interactive */
}
#search-landing #search-unit {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  border-radius: 10px;
}
#search-landing #search {
  font-size: 16px;
  padding: 14px 16px;
}
/* keep the landing to just map + search: hide the control boxes and the
   list toggle (zoom + attribution stay) */
body.landing .leaflet-top.leaflet-right { display: none; }
body.landing .leaflet-left .layers-ctl { display: none; }

/* airport info panel */
.ap-name { font-size: 13px; line-height: 1.3; }

.ap-stat {
  font-size: 12px;
  margin-top: 6px;
  color: var(--text);
}

.ap-airlines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
  margin-top: 2px;
}

.ap-airlines .al-chip { font-family: inherit; }

.ap-airlines .al-chip i {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}

.ap-airlines .al-chip.on i { color: var(--accent-2); }

.ap-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ap-links .ctl { text-decoration: none; }

#meet-chips {
  margin: 8px 0;
  font-size: 12px;
  color: var(--muted);
}

.layers-ctl .lc-panel { max-width: 240px; }

/* docked destination card (bottom-left of map) */
#dest-card {
  position: absolute;
  left: 12px;
  bottom: 26px;
  z-index: 1100;
  width: 280px;
  max-height: 55%;
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  padding: 12px 14px;
}

#dest-card[hidden] { display: none; }

/* Phase 2 preview: nonstop fare-history panel inside the card */
.ph-box {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ph-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ph-tag {
  font-size: 9px;
  color: var(--accent-2);
  border: 1px solid rgba(255, 183, 77, 0.5);
  border-radius: 999px;
  padding: 0 5px;
  letter-spacing: 0.4px;
}
.ph-spark { display: block; margin: 8px 0 2px; opacity: 0.9; }
.ph-cap { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.ph-xl { fill: var(--muted); font-size: 9px; }
.ph-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 6px; }
.ph-leg { font-size: 11px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.ph-leg i { width: 9px; height: 3px; border-radius: 2px; display: inline-block; }
.ph-toggle { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 2px 0 4px; }
.ph-tlabel { font-size: 11px; color: var(--muted); }
.ph-tbtn {
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
}
.ph-tbtn:hover { border-color: var(--accent); color: var(--text); }
.ph-tbtn.on { border-color: var(--accent); color: var(--accent); background: rgba(79, 195, 247, 0.12); }
.ph-hint { font-size: 10px; color: var(--muted); margin: 2px 0 6px; font-style: italic; }
.ph-cap b { color: var(--accent); font-weight: 600; }

/* ===== optional 3D globe view ===== */
#globe3d {
  position: absolute;
  inset: 0;
  z-index: 800; /* above Leaflet's panes (≤400), below its controls (1000) */
  display: none;
  background: #04070d;
}
body.globe-view #globe3d { display: block; }
/* Airport Details drawer (546px, see #profile-drawer) sits on top of the
   globe's left edge — shrink the canvas to the space actually left visible
   so its own camera math (which always centers on its own canvas) re-aims
   at what's still on screen, instead of centering behind the drawer. */
body.pd-open #globe3d { left: 546px; }
/* the flat map rests while the globe is up (controls stay live) */
body.globe-view .leaflet-map-pane { visibility: hidden; }
/* Leaflet zoom buttons are a flat-map concept — the globe has its own
   gestures. (The View box stays: it hosts the Map/Globe switch itself.) */
body.globe-view .leaflet-control-zoom { display: none; }

/* prominent 2D/3D switch (Google Maps style), sharing the View box's row */
.leaflet-right .dim-ctl { clear: none; } /* Leaflet's clear:both would force a new row */
.dim-ctl button {
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  width: 42px;
  height: 33px; /* matches the ctlbox header height so the row reads as one unit */
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.dim-ctl button:hover { border-color: var(--accent); color: var(--accent); }
body.landing .dim-ctl { display: none; } /* the landing stays map + search only */

/* View box: Map/Globe chips + per-view nested layers */
.vw-row { display: flex; gap: 6px; margin: 2px 0 4px; }
.vw-chip {
  flex: 1;
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.vw-chip:hover { border-color: var(--accent); color: var(--text); }
.vw-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(79, 195, 247, 0.12); }

/* ===== easter eggs ===== */
.egg-pin { background: none; border: none; }
.sug-secret .code { color: var(--accent-2); }
.egg-plane {
  position: fixed;
  top: 42%;
  left: -70px;
  font-size: 44px;
  z-index: 3000;
  pointer-events: none;
  animation: egg-plane-fly 2.1s linear forwards;
}
@keyframes egg-plane-fly {
  to { left: 108%; transform: translateY(-60px) rotate(12deg); }
}
#map.barrel-roll { animation: egg-barrel 1.4s ease-in-out; }
@keyframes egg-barrel { to { transform: rotate(360deg); } }

/* 3D moon mission (globe view) */
.moon-egg { position: absolute; inset: 0; z-index: 860; pointer-events: none; overflow: hidden; }
.me-trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.me-moon {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 62% 42%, rgba(0,0,0,0.18) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 66%, rgba(0,0,0,0.15) 0 4%, transparent 5%),
    radial-gradient(circle at 30% 34%, rgba(0,0,0,0.12) 0 3%, transparent 4%),
    radial-gradient(circle at 34% 30%, #f4f2ea, #c9c7bd 42%, #8a877e 70%, #4a4844 100%);
  box-shadow: 0 0 26px rgba(210, 225, 255, 0.35), inset -6px -6px 14px rgba(0, 0, 0, 0.45);
}
.me-flag {
  position: absolute;
  left: 62%;
  top: -10px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  color: #e8eef8;
  text-shadow: 0 1px 4px #000;
  background: rgba(20, 28, 44, 0.88);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 7px;
}
.me-flag small { font-weight: 400; color: var(--muted); font-size: 9px; }
.me-rocket {
  position: absolute;
  font-size: 28px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(255, 180, 90, 0.85));
}
.me-ufo {
  position: absolute;
  font-size: 46px;
  line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 12px rgba(130, 240, 170, 0.9));
}
.me-beam {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  width: 60px;
  height: 74px;
  background: linear-gradient(to bottom, rgba(150, 255, 185, 0.55), rgba(150, 255, 185, 0));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.me-flag-ufo { border-color: #4caf7d; }

/* retro amber departure-board theme (wordmark ×7) */
body.retro-board {
  --accent: #ffb000;
  --accent-2: #ff8c00;
  --text: #ffcf80;
  --muted: #b07b28;
  --bg: #0a0700;
  --panel: #130d04;
  --panel-2: #1c1407;
  --border: #4a3612;
}
body.retro-board #sidebar,
body.retro-board .ctlbox,
body.retro-board #dest-card,
body.retro-board #search-unit #search,
body.retro-board .leaflet-popup-content {
  font-family: "Courier New", ui-monospace, monospace !important;
  letter-spacing: 0.3px;
}
body.retro-board #sidebar h1,
body.retro-board .landing-brand { text-shadow: 0 0 8px rgba(255, 176, 0, 0.55); }
body.retro-board .b-nonstop { color: #ffcf80; }
.ph-insights { font-size: 12px; color: var(--text); line-height: 1.5; }
.ph-insights b { color: var(--accent-2); font-weight: 600; }
.ph-note { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.ph-loading, .ph-empty { font-size: 12px; color: var(--muted); margin-top: 8px; }

#dc-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

#dc-close:hover { color: var(--text); }

#dest-card .al-chip { font-size: 10px; padding: 2px 8px; }
#dest-card .pop-airlines { margin: 4px 0 2px; }
#dest-card .pop-org { margin-top: 6px; }
#dest-card .pop-hop { margin-top: 10px; }

/* airline logos */
.al-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 5px;
}

.al-chip {
  display: inline-flex;
  align-items: center;
}

.row-logo {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
}

.row-logo .al-logo {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* connected collapsible control boxes (right side) */
.ctlbox {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.ctlbox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 7px 11px;
  cursor: pointer;
  text-align: left;
}

.ctlbox-head:hover { color: var(--accent); }

.ctlbox-min {
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.ctlbox .lc-panel {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
}

/* themed scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #2c3d5e transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: #2c3d5e;
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover { background: #3f5680; background-clip: content-box; }

/* emergency aircraft marker */
.emerg-wrap {
  position: relative;
  width: 22px;
  height: 22px;
}

.emerg-wrap .faa-ring { position: absolute; inset: 0; }

.emerg-wrap .plane {
  position: absolute;
  inset: 3.5px;
}

/* passport picker + visa chips */
#passport-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#passport-sel {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

#passport-sel:focus { border-color: var(--accent); }

#visa-free-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

#visa-free-row input { accent-color: var(--accent-2); }

/* passport row relocated into the Preferences modal (deck mode) */
#pm-passport #passport-row { margin-top: 0; width: 100%; }
#pm-passport #passport-sel { font-size: 13px; padding: 6px 9px; }

.visa-chip {
  font-style: normal;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 5px;
  vertical-align: 1px;
}

.visa-chip.vf { color: #7ee8a2; border: 1px solid rgba(126, 232, 162, 0.45); }
.visa-chip.mid { color: #e3d15f; border: 1px solid rgba(227, 209, 95, 0.45); }
.visa-chip.vr { color: #ef6a6a; border: 1px solid rgba(239, 106, 106, 0.45); }

/* airline website link inside chips */
.al-go {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
}

.al-go:hover { color: var(--accent-2); }

/* emergency alert banner */
#emerg-banner {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(46, 16, 20, 0.96);
  border: 1px solid #ef6a6a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #f3d4d4;
  box-shadow: 0 6px 24px rgba(239, 106, 106, 0.25);
  max-width: min(520px, 80%);
}

#emerg-banner[hidden] { display: none; }

.eb-badge {
  background: #ef6a6a;
  color: #1a0a0c;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.8px;
  border-radius: 5px;
  padding: 2px 7px;
  animation: eb-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes eb-blink {
  50% { opacity: 0.55; }
}

#eb-track {
  background: transparent;
  border: 1px solid #ef6a6a;
  color: #ef9a9a;
  border-radius: 6px;
  padding: 3px 11px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

#eb-track:hover { background: rgba(239, 106, 106, 0.15); }

#eb-close {
  background: transparent;
  border: none;
  color: #b98;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
}

#eb-close:hover { color: #f3d4d4; }

/* emergency detail card (flight path + links + history) — bottom-left slot */
#emerg-card {
  position: absolute;
  left: 12px;
  bottom: 26px;
  z-index: 1160;
  width: 280px;
  max-height: 60%;
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid #ef6a6a;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  padding: 12px 14px;
}
#emerg-card[hidden] { display: none; }
#ec-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
#ec-close:hover { color: var(--text); }
.ec-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; padding-right: 16px; }
.ec-title .eb-badge { animation: none; }
.ec-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.ec-stats { font-size: 13px; margin-top: 6px; color: #f0b6b6; }
.ec-when { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ec-links { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.ec-links a { color: var(--accent); font-size: 13px; text-decoration: none; }
.ec-links a:hover { text-decoration: underline; }
.ec-hint { font-size: 10px; color: var(--muted); margin-top: 9px; line-height: 1.4; }
.ec-back {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 11px; padding: 0 0 6px; display: block;
}
.ec-back:hover { color: var(--accent); }
.ec-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.ec-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer; text-align: left; padding: 7px 2px; font-size: 12px; width: 100%;
}
.ec-row:hover { background: rgba(239, 106, 106, 0.1); }
.ec-row-t { color: var(--muted); font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.lc-link {
  background: transparent; border: none; color: var(--accent); cursor: pointer;
  font-size: 11px; padding: 2px 0 4px; text-align: left; display: block;
}
.lc-link:hover { text-decoration: underline; }

/* subtle corner stamp (API-units counter) — ops info, so it only renders for
   the signed-in superadmin (body.role-superadmin set by updateAuthUI).
   Visitors were seeing it bleed through behind the sidebar footer. */
#quota-stamp {
  display: none;
  position: fixed;
  bottom: 5px;
  left: 10px;
  z-index: 1250; /* above the 3D globe (800) and the docked cards */
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.4px;
  color: rgba(159, 176, 200, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* stay legible over the bright globe */
  pointer-events: none;
  user-select: none;
}
body.role-superadmin #quota-stamp:not(:empty) { display: block; }

/* auth gate */
#auth-gate {
  position: fixed;
  inset: 0;
  z-index: 3000;
  /* Dismissible modal, not a wall: semi-transparent backdrop so the app stays
     visible behind it, signaling login is optional. Click the backdrop (or the
     ✕, or Esc) to close. */
  background: rgba(6, 10, 18, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#auth-gate[hidden] { display: none; }

.ag-card {
  position: relative;
  width: min(360px, 90%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#ag-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
#ag-close:hover { color: var(--text); }

/* ===== Preferences modal (Premium Phase 1) — same overlay language as
   #auth-gate: dismissible, app visible behind ===== */
#prefs-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(6, 10, 18, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#prefs-modal[hidden] { display: none; }
#pm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
#pm-close:hover { color: var(--text); }
.pm-title { font-size: 16px; font-weight: 700; }
.pm-sec {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pm-hint { color: var(--muted); font-size: 11px; }
#pm-vendor {
  width: 100%;
  background: #1d2c4d;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#pm-vendor:focus { border-color: var(--accent); }
#pm-airport { position: relative; }
#pm-airport .hop-chip {
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#pm-input {
  width: 100%;
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.4);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#pm-input:focus { border-color: var(--accent); }
#pm-input::placeholder { color: #9fb3d8; }
#pm-sugs {
  list-style: none;
  margin: 4px 0 0;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  max-height: 150px;
  overflow-y: auto;
}
#pm-sugs li {
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
#pm-sugs li:hover { background: rgba(79, 195, 247, 0.15); }
#pm-sugs .sug-place { margin-left: auto; font-size: 10px; }

/* Activities row (Phase 2b) — inside the destination card, so it can never be
   covered by other UI. Free users always see it; Premium can hide it. */
.pop-acts {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.pop-acts .pa-label { color: var(--muted); font-size: 11px; }
.pop-acts .pa-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.pop-acts .pa-link:hover { text-decoration: underline; }

.pm-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.pm-check input { accent-color: var(--accent); }

.ag-card h1, .ag-logo { margin: 0; font-size: 28px; font-weight: 700; }

.ag-tag {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.ag-card input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.ag-card input:focus { border-color: var(--accent); }

.ag-btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.ag-btn:hover { border-color: var(--accent); }

.ag-primary {
  background: rgba(79, 195, 247, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.ag-google { font-weight: 600; }

.ag-div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.ag-div::before,
.ag-div::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

#ag-msg {
  font-size: 12px;
  color: #7ee8a2;
  line-height: 1.4;
}

#ag-msg.err { color: #ef6a6a; }

/* ===== account control (map top-right, ABOVE the control chips) ===== */
#acct-corner {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1001; /* just above Leaflet's controls (1000) */
}
#acct-corner[hidden] { display: none; }
/* the account circle claims the corner — push the chip stack down under it
   (only when the account UI exists at all, i.e. auth is configured) */
body.has-acct .leaflet-top.leaflet-right { top: 46px; }

/* signed OUT: a circular button with a person-outline icon — deliberately a
   different shape from the rectangular control chips below it */
.acct-signin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.acct-signin:hover { border-color: var(--accent); color: var(--accent); }
.acct-signin svg { display: block; }

/* signed IN: same circle, filled, with the account's initial */
.acct-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #0b1220;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.acct-avatar:hover { filter: brightness(1.12); }

#acct-menu {
  position: absolute;
  top: 40px;
  right: 0;
  min-width: 200px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
#acct-menu[hidden] { display: none; }

#acct-email {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
}

#acct-menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
#acct-menu #acct-prefs:hover { border-color: var(--accent); color: var(--accent); }
#acct-menu #acct-signout:hover { border-color: #ef6a6a; color: #ef6a6a; }

/* footer: attribution collapsed behind "About the data" */
.ftr-link {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.ftr-link:hover { color: var(--accent); }
#data-note-body { margin-top: 4px; }
#data-note-body[hidden] { display: none; }

/* search in the sidebar (default home) — high contrast on dark */
#search-home {
  padding: 2px 18px 12px;
}

#search-unit {
  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
}

#search-unit #search {
  flex: 1;
  min-width: 0;
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.5);
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  outline: none;
  box-shadow: none;
}

#search-unit #search::placeholder { color: #9fb3d8; }

#search-unit #search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.18);
}

#search-unit #surprise {
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.5);
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 14px;
}

#search-unit #surprise:hover { border-color: var(--accent-2); }

#search-unit #suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  z-index: 1300;
}

/* the map slot only matters when the sidebar is collapsed */
#search-float #search-unit {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

/* inline airport picker inside the meet-up panel */
#meet-search { position: relative; margin-top: 8px; }

#meet-input {
  width: 100%;
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.4);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

#meet-input:focus { border-color: var(--accent); }
#meet-input::placeholder { color: #9fb3d8; }

#meet-sugs {
  list-style: none;
  margin: 4px 0 0;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  max-height: 150px;
  overflow-y: auto;
}

#meet-sugs li {
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

#meet-sugs li:hover { background: rgba(79, 195, 247, 0.15); }

#meet-sugs .sug-place { margin-left: auto; font-size: 10px; }

#share-row { margin-top: 8px; }

/* ===== Plan a Trip control ===== */
#plan-search { position: relative; margin-top: 4px; }
#plan-input {
  width: 100%;
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.4);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
#plan-input:focus { border-color: var(--accent); }
#plan-input::placeholder { color: #9fb3d8; }
#plan-sugs {
  list-style: none;
  margin: 4px 0 0;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  max-height: 150px;
  overflow-y: auto;
}
#plan-sugs li {
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
#plan-sugs li:hover { background: rgba(79, 195, 247, 0.15); }
#plan-sugs .sug-place { margin-left: auto; font-size: 10px; }
#plan-body .hop-chip {
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  color: var(--accent);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#plan-types { display: flex; flex-wrap: wrap; gap: 5px; }
.plan-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.plan-chip:hover { border-color: var(--accent); color: var(--text); }
.plan-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(79, 195, 247, 0.12); }
#plan-body select {
  width: 100%;
  background: #1d2c4d;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
#plan-body select:focus { border-color: var(--accent); }
#plan-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.plan-go {
  background: rgba(79, 195, 247, 0.15);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.plan-go:hover { background: rgba(79, 195, 247, 0.28); }

/* flowing directional pulse along route arcs */
.route-pulse {
  stroke-dasharray: 6 94;
  stroke-linecap: round;
  animation: route-flow 10s linear infinite;
}

@keyframes route-flow {
  to { stroke-dashoffset: -100; }
}

/* depart-date control */
#date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

#depart-date {
  flex: 1;
  background: #1d2c4d;
  border: 1px solid rgba(79, 195, 247, 0.4);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  color-scheme: dark;
}

#depart-date:focus { border-color: var(--accent); }

#date-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  cursor: pointer;
}

#date-clear:hover { border-color: #ef6a6a; color: #ef6a6a; }

/* return-date calendar in the destination card */
.rc { margin-top: 10px; }

.rc-head {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.rc-days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  max-height: 170px;
  overflow-y: auto;
}

.rc-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
}

.rc-day:hover { border-color: var(--accent); background: rgba(79, 195, 247, 0.08); }

.rc-day b { font-size: 12px; }

/* ===== Flight-deck layout (TRIAL, body.deck — set by DECK_LAYOUT in app.js).
   Every rule is scoped under body.deck so flipping the flag off reverts the
   classic layout untouched. Two deck rows on top (controls + filter rail),
   then a slim destination-list column and a full-clean map. ===== */
body.deck {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 300px 1fr;
  height: 100vh;
}
body.deck #deck { grid-area: 1 / 1 / 2 / 3; }
body.deck #deck-filters { grid-area: 2 / 1 / 3 / 3; }
/* min-height: 0 matters — grid items default to min-height:auto, so the tall
   destination list would otherwise blow the 1fr row out to content height
   (the map ballooned to 7000px+ before this) */
body.deck #sidebar {
  grid-area: 3 / 1 / 4 / 2;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
}
body.deck #map { grid-area: 3 / 2 / 4 / 3; height: 100%; min-height: 0; }
body.deck.landing { grid-template-columns: 0 1fr; }
body.deck.landing #deck,
body.deck.landing #deck-filters { display: none; }

/* One calm bar: a single 38px control height, one pill, ghost icon keys.
   Form first — nothing boxed unless it's interactive, generous air between
   the three clusters (brand · origin+search · keys+account). */
#deck {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 56px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1200; /* the account menu must beat Leaflet's controls (1000) */
}
#deck[hidden] { display: none; }
.deck-brand { font-size: 19px; font-weight: 700; white-space: nowrap; letter-spacing: -0.01em; }

/* origin readout: quiet mono text, no box — it reads, it doesn't shout */
#deck-origin {
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
  margin-left: auto;
}
#deck-origin[hidden] { display: none; }
.do-label { display: none; }
.do-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  color: var(--accent);
  font-weight: 600;
}
.do-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}
.do-num i { font-style: normal; font-size: 9px; margin-left: 2px; letter-spacing: 0.08em; opacity: 0.75; }
.do-live { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); align-self: center; }
.do-live.on { background: #7ee8a2; }

/* the search pill: ONE bordered surface holding search · divider · date */
#deck-search {
  flex: 1;
  min-width: 200px;
  max-width: 480px;
  margin-right: auto;
  display: flex;
  align-items: center;
  height: 38px;
  background: #111c36;
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 999px;
  padding: 0 6px 0 4px;
}
#deck-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.14); }
#deck-search #search-unit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; }
#deck-search #search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 13px;
  padding: 8px 6px 8px 14px;
}
#deck-search #search:focus { border: none; box-shadow: none; }
#deck-search #surprise {
  background: transparent;
  border: none;
  font-size: 15px;
  padding: 4px 6px;
  cursor: pointer;
  opacity: 0.7;
}
#deck-search #surprise:hover { opacity: 1; }
#deck-search #suggestions { top: 42px; }
#deck-search #date-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}
#deck-search #date-row[hidden] { display: none; }
#deck-search #date-row label { font-size: 11px; color: var(--muted); }
#deck-search #depart-date {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  padding: 4px 2px;
}

/* instrument keys: ghost icons — quiet until touched */
.deck-keys { display: flex; gap: 2px; margin-left: auto; }
.deck-key-wrap { position: relative; }
.deck-key-wrap .layers-ctl {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  margin: 0;
  z-index: 1300;
}
.deck-key-wrap .ctlbox-body {
  max-height: 72vh;
  overflow-y: auto;
  min-width: 230px;
}
.deck-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.deck-key:hover { background: var(--panel-2); color: var(--accent); }

.deck-sep { width: 1px; height: 22px; background: var(--border); flex: none; }

#deck-acct { flex: none; position: relative; }
#deck-acct #acct-corner { position: static; }
#deck-acct .acct-signin,
#deck-acct .acct-avatar { box-shadow: none; }
#deck-acct .acct-signin { background: transparent; border-color: var(--border); }
#deck-acct .acct-signin:hover { border-color: var(--accent); }
#deck-acct #acct-menu { top: 44px; right: 0; }

/* the filter row: a whisper under the deck — no label, no heavy band */
#deck-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  flex-wrap: wrap;
}
#deck-filters[hidden] { display: none; }
.df-label { display: none; }
body.deck #deck-filters #filter-bar,
body.deck #deck-filters #continent-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
}
body.deck #deck-filters #filter-bar[hidden],
body.deck #deck-filters #continent-row[hidden] { display: none; }
/* nothing to show → the row disappears entirely instead of sitting empty */
body.deck #deck-filters:not(:has(#continent-row:not([hidden]))):not(:has(#filter-bar:not([hidden]))) { display: none; }

/* chrome that the deck replaces */
body.deck #sidebar header,
body.deck #search-home { display: none; }
/* hop-trail breadcrumbs (ATL → ABE …) retired in deck mode per Justin —
   the ORIGIN readout already carries the current context; Hop still works */
body.deck #trail { display: none !important; }
/* airport stats stay in the list column (Justin: they were missed), compact */
body.deck #summary { padding-top: 8px; padding-bottom: 0; }
body.deck #summary .big { font-size: 13px; }
body.deck #summary .stats { font-size: 11px; }
/* the panels moved into the deck-key wrappers; hide their headers everywhere
   in deck mode (the keys are the headers now) */
body.deck .ctlbox-head { display: none; }
body.deck .leaflet-top.leaflet-left .layers-ctl { display: none; }
body.deck .dim-ctl { display: none; } /* the VIEW key opens the same Map/Globe switch */
body.deck #profile-drawer { left: 300px; top: var(--deck-h, 56px); }

/* ===== Mobile: full-screen map + bottom-sheet list =====
   Everything here is gated by the media query; the desktop layout is the
   flex row above and is untouched by any of these rules. */
@media (max-width: 760px) {
  #map {
    position: fixed;
    inset: 0;
    height: 100%;
    width: 100%;
  }

  /* the sidebar becomes a bottom sheet: peek (summary), half, or full */
  #sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    height: 48%;
    z-index: 1200;
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.55);
    padding-bottom: env(safe-area-inset-bottom);
    transition: height 0.22s ease;
  }
  body.sheet-peek #sidebar { height: 196px; overflow: hidden; }
  body.sheet-full #sidebar { height: 92%; }
  /* peek is search + summary only — chips return at half/full */
  body.sheet-peek #trail,
  body.sheet-peek #filter-bar { display: none; }

  #sheet-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px 0 10px; /* generous hit area — thumbs, not cursors */
    background: transparent;
    border: none;
    cursor: pointer;
    touch-action: none; /* we handle the drag ourselves */
  }

  /* the brand row doubles as part of the drag strip */
  #sidebar header { touch-action: none; }
  #sheet-handle span {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--muted);
    opacity: 0.7;
  }

  /* compact chrome so the peek state shows search + summary */
  #sidebar header { padding: 0 16px 2px; }
  h1 { font-size: 18px; }
  .tagline { display: none; }
  #sidebar footer { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }

  /* thumb-sized targets */
  #search-unit #search { font-size: 16px; padding: 12px 12px; } /* 16px stops iOS zoom-on-focus */
  #search-unit #surprise { padding: 0 16px; }
  .dest-item { padding: 11px 8px; }
  .cont-pill { padding: 7px 12px; font-size: 12px; }
  #trail .hop-chip { padding: 6px 12px; }
  #dest-card .al-chip { padding: 6px 10px; font-size: 11px; }

  /* the List toggle is desktop furniture — the sheet replaces it */
  .leaflet-top.leaflet-left .layers-ctl { display: none; }

  /* control boxes: keep them, tighter */
  .ctlbox-head { padding: 9px 12px; }
  .layers-ctl .lc-panel { max-width: min(240px, 78vw); }

  /* destination card: full-width dock above the peeking sheet */
  #dest-card {
    left: 8px;
    right: 8px;
    bottom: 204px; /* clears the peek sheet */
    width: auto;
    max-height: 45%;
  }

  #emerg-banner { top: 12px; max-width: 94%; }
}

/* ---- travel log ("been there") ---- */
.pop-travel {
  display: flex;
  gap: 6px;
  margin: 8px 0 2px;
  flex-wrap: wrap;
}
.tv-chip {
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.tv-chip:hover { border-color: var(--accent-2); color: var(--text); }
.tv-chip.on {
  color: var(--accent-2);
  border-color: rgba(255, 183, 77, 0.6);
  background: rgba(255, 183, 77, 0.08);
}
.ap-links .ctl.on {
  color: var(--accent-2);
  border-color: rgba(255, 183, 77, 0.6);
}

#travel-card {
  position: absolute;
  left: 12px;
  bottom: 26px;
  z-index: 1100; /* shares the dest-card slot (dest-card closes on entry) */
  width: 290px; /* roomier: holds the add-route row and the route list */
  max-height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  padding: 12px 14px;
}
#travel-card[hidden] { display: none; }
#tc-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
#tc-close:hover { color: var(--text); }
.tc-stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.tc-stats b { color: var(--accent-2); font-size: 15px; }

/* tile attribution on the 3D globe (CARTO/OSM · Esri) */
#globe-credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 5;
  font-size: 10px;
  color: rgba(232, 238, 248, 0.55);
  background: rgba(14, 20, 32, 0.55);
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* journey-timeline destination card (Flighty-style trip narrative) */
.jt { position: relative; margin-bottom: 6px; }
.jt-row { display: flex; gap: 9px; align-items: baseline; position: relative; }
.jt-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  z-index: 1;
}
.jt-dot.o { background: var(--accent-2); }
.jt-dot.d { background: var(--accent); }
.jt-body b { font-size: 14px; }
.jt-mid {
  margin: 3px 0 3px 3.5px;
  padding: 3px 0 3px 14px;
  border-left: 2px dotted var(--border);
  font-size: 11px;
  color: var(--muted);
}
.jt-sub { font-size: 11px; color: var(--muted); }
.jt-wx { font-weight: 600; font-size: 12px; }

/* travel-map passport stats */
.tc-grid {
  /* one compact KPI row */
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 9px;
}
.tc-grid > div { min-width: 0; }
.tc-grid b { display: block; font-size: 17px; font-weight: 650; color: var(--accent-2); line-height: 1.15; }
.tc-grid span { font-size: 10px; color: var(--muted); }

/* ---- native app (Capacitor) safe areas ----
   The webview extends under the notch and home indicator (contentInset
   "never" + viewport-fit=cover); body.native pads the floating chrome in.
   Web rendering is untouched — env() is 0 outside the app anyway, but the
   .native gate keeps intent explicit. */
body.native #search-float { top: calc(10px + env(safe-area-inset-top)); }
body.native #acct-corner { top: calc(10px + env(safe-area-inset-top)); }
body.native #emerg-banner { top: calc(12px + env(safe-area-inset-top)); }
body.native #deck { padding-top: env(safe-area-inset-top); }
/* the app's webview must never rubber-band — page bounce eats the bottom
   sheet's drag gestures (scrollEnabled:false in capacitor config is the
   native half of this fix) */
body.native { overscroll-behavior: none; }
/* the home indicator's safe area eats the bottom of the sheet: peek's fixed
   196px was sized to show search + airport summary, so grow it by the inset
   (and pad the sheet content at half/full) or the summary hides behind the
   home bar / under the search box */
body.native.sheet-peek #sidebar { height: calc(196px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) {
  body.native #sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
body.native #sidebar footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* Sign in with Apple (native app only — Apple's black-button style) */
.ag-apple {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.ag-apple:hover { background: #1a1a1a; }

/* account deletion (prefs modal danger zone) */
#pm-delete {
  font: inherit;
  font-size: 12px;
  color: #ef6a6a;
  background: none;
  border: 1px solid rgba(239, 106, 106, 0.5);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  width: 100%;
}
#pm-delete:hover, #pm-delete.armed {
  background: rgba(239, 106, 106, 0.12);
  border-color: #ef6a6a;
}
#pm-delete:disabled { opacity: 0.5; cursor: default; }

/* ---- native app: chevron expand/collapse (drag is web-only) ---- */
@media (max-width: 760px) {
  /* the handle pill becomes an explicit chevron button: up = expand,
     down = collapse — no drag needed */
  body.native #sheet-handle span { display: none; }
  body.native #sheet-handle { padding: 8px 0 4px; }
  body.native #sheet-chev {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--accent);
    transition: transform 0.25s;
  }
  body.native.sheet-full #sheet-chev { transform: rotate(180deg); }
  /* reclaim the "Filter destinations…" row in the app — continent chips and
     the full list carry the browsing; search still finds anything */
  body.native #dest-filter { display: none; }
}
@media (max-width: 760px) {
  /* app declutter round 2 (user): no copy-link, passport, or continent
     chips on the phone — search + list + expand button carry the flow */
  body.native #share-row,
  body.native #passport-row,
  body.native #continent-row { display: none !important; }
}
@media (max-width: 760px) {
  /* peek shows the essentials only — the FAA note returns at half/full
     (its red border was peeking around the pinned expand button) */
  body.native.sheet-peek .faa-note { display: none; }
}
@media (max-width: 760px) {
  /* peek contains ONLY brand/search/chip/expand — the pinned button was
     visibly overlapping the depart-date row beneath it. Date filter, list,
     and footer all return at half/full */
  body.native.sheet-peek #dest-filter-wrap,
  body.native.sheet-peek #destinations,
  body.native.sheet-peek #sidebar footer { display: none; }
}

/* ---- iPhone-app navigation (native only) ---- */
#tabbar, #mini-nav { display: none; }
@media (max-width: 760px) {
  body.native #tabbar:not([hidden]) {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1210; /* floats above the sheet, drawers, and rankings panel */
    display: flex;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(20, 28, 44, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
  #tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font: inherit;
    font-size: 10px;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 12px;
    padding: 5px 14px;
    cursor: pointer;
  }
  #tabbar button.on { color: var(--accent); }
  body.native #mini-nav:not([hidden]) {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: 56px; /* left of the account button */
    z-index: 1010;
    display: flex;
    gap: 6px;
  }
  #mini-nav > button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    background: rgba(20, 28, 44, 0.85);
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
  }
  #mini-nav #mn-emerg { color: #ef6a6a; border-color: rgba(239, 106, 106, 0.55); }
  #mini-nav #mn-emerg[hidden] { display: none; }
  /* clear the floating bar: pad the list past it */
  body.native.sheet-peek #sidebar { height: calc(292px + env(safe-area-inset-bottom)); }
  body.native #destinations { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* account button clears the notch too */
  body.native #acct-corner { top: calc(12px + env(safe-area-inset-top)); }
}
@media (max-width: 760px) {
  /* polish: keep tab labels on one line, clear the bar's real height, and
     hide the classic 2D/3D chip (the mini icon replaces it in the app) */
  #tabbar button span { white-space: nowrap; }
  body.native .dim-ctl { display: none; }
  body.native.sheet-peek #sidebar { height: calc(304px + env(safe-area-inset-bottom)); }
}

/* ---- app "⋯" menu: the chip stack lives here on the phone ---- */
@media (max-width: 760px) {
  /* hide the classic top-right chip stack in the app… */
  body.native .layers-ctl { display: none; }
  /* …except a panel opened from the menu, floated under the mini nav */
  body.native .layers-ctl.mn-open {
    display: block;
    position: fixed;
    top: calc(52px + env(safe-area-inset-top));
    right: 10px;
    left: auto;
    max-width: 300px;
    max-height: 62vh;
    overflow-y: auto;
    z-index: 1020;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
  }
  #mn-menu {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 1030;
    min-width: 170px;
    background: rgba(20, 28, 44, 0.97);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
    padding: 5px;
    display: flex;
    flex-direction: column;
  }
  #mn-menu[hidden] { display: none; }
  #mn-menu button {
    width: 100%;
    height: auto;
    white-space: nowrap;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: none;
    border: none;
    border-radius: 8px;
    text-align: left;
    padding: 9px 11px;
    cursor: pointer;
  }
  #mn-menu button:active { background: rgba(79, 195, 247, 0.12); }
}
@media (max-width: 760px) {
  /* app formatting pass (user: "everything is overlapping"):
     - no +/- zoom buttons (they collided with the status bar; pinch zooms)
     - landing keeps ONLY the hero — tabs/minis appear once an airport is up
     - emergency banner drops below the mini-icon row
     - tile attribution rises above the floating tab bar */
  body.native .leaflet-control-zoom { display: none; }
  body.native.landing #tabbar:not([hidden]),
  body.native.landing #mini-nav:not([hidden]) { display: none; }
  body.native #emerg-banner { top: calc(56px + env(safe-area-inset-top)); }
  body.native #map .leaflet-bottom.leaflet-right { bottom: 0; } /* attribution rides the true bottom edge */
}

/* ---- base quick actions (collapsed sheet, native only) ---- */
#base-actions { display: none; }
@media (max-width: 760px) {
  body.native.sheet-peek #base-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 14px 6px;
  }
  #base-actions button {
    display: flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 11px 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  #base-actions button svg { color: var(--accent); flex: none; }
  /* the Search tab summons the search box — the collapsed sheet skips it */
  body.native.sheet-peek #search-home { display: none; }
  /* peek composition: chevron + brand + airport chip (expand button gone) */
  body.native.sheet-peek #sidebar { height: calc(214px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  /* tap-to-hop makes the per-row Hop button redundant in the app */
  body.native .hop-btn { display: none; }
}

/* ---- app full-screen search overlay ---- */
#app-search { display: none; }
@media (max-width: 760px) {
  body.native #app-search:not([hidden]) {
    display: flex;
    flex-direction: column;
    /* top-anchored: a centered card re-centers every time the suggestion list
       renders or the keyboard resizes the webview — the input jumped around */
    justify-content: flex-start;
    position: fixed;
    inset: 0;
    z-index: 1400; /* above tab bar and every drawer */
    /* light scrim — the map stays visible behind the floating box */
    background: rgba(11, 15, 20, 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: calc(env(safe-area-inset-top) + 64px) 14px 0;
  }
  /* no dice in the app — search is deliberate there */
  body.native #surprise { display: none; }
  #app-search .as-head {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(20, 28, 44, 0.96);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  }
  #app-search #as-slot { flex: 1; min-width: 0; }
  #app-search #as-slot #search-unit { width: 100%; }
  #as-close {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font: inherit;
    font-size: 15px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid var(--border);
    cursor: pointer;
  }
}

/* ---- My Flights panel ---- */
#flights-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 330px;
  z-index: 1200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#flights-panel[hidden] { display: none; }
#fl-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
}
#fl-close:hover { color: var(--text); }
#fl-add {
  display: flex;
  gap: 6px;
  padding: 10px 14px 4px;
}
#fl-add input {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  min-width: 0;
}
#fl-num { flex: 1.2; text-transform: uppercase; }
#fl-date { flex: 1; }
#fl-add-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #08131f;
  background: var(--accent);
  border: none;
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  flex: none;
}
#fl-msg { padding: 4px 16px 0; }
#fl-body { overflow-y: auto; padding: 8px 14px 14px; flex: 1; }
.fl-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.fl-top { display: flex; align-items: center; gap: 8px; }
.fl-top b { font-size: 14px; }
.fl-air {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted);
}
.fl-pill {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--panel);
  color: var(--muted);
}
.fl-pill.ok { color: #7ee8a2; background: rgba(126, 232, 162, 0.12); }
.fl-pill.warn { color: var(--accent-2); background: rgba(255, 183, 77, 0.12); }
.fl-pill.sev { color: #ef6a6a; background: rgba(239, 106, 106, 0.12); }
.fl-del {
  flex: none;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.fl-del:hover { color: #ef6a6a; }
.fl-route { font-size: 13px; margin-top: 6px; }
.fl-route .code { color: var(--accent); font-weight: 700; }
.fl-route s { color: var(--muted); }
.fl-route i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.fl-arrow { color: var(--muted); padding: 0 2px; }
.fl-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
@media (max-width: 760px) {
  #flights-panel { left: 12px; width: auto; top: calc(12px + env(safe-area-inset-top)); }
  body.native #flights-panel { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* share buttons */
.fl-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 9px;
  padding: 8px 0;
  cursor: pointer;
}
.fl-share:hover { background: rgba(79, 195, 247, 0.18); }
/* map-style chooser revealed under "Share this flight" */
.fl-styles {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fl-style {
  flex: 1;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  padding: 8px 0;
  cursor: pointer;
}
.fl-style:hover { background: rgba(255, 255, 255, 0.11); }
.fl-styling {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 8px 0;
}
#tc-share {
  width: 100%;
  margin-top: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(79, 195, 247, 0.1);
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 9px;
  padding: 8px 0;
  cursor: pointer;
}

/* travel map: repeat-route chips + delay totals */
.tc-repeats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.tc-repeats span {
  font-size: 11px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
}
.tc-repeats b { color: var(--accent-2); }
.tc-delays { margin-top: 8px; }
@media (max-width: 760px) {
  /* the travel stats card must ride ABOVE the collapsed sheet in the app */
  body.native #travel-card {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(232px + env(safe-area-inset-bottom));
  }
}


/* ---- unified app panel: Header / Subheader / Action / List ---- */
#app-panel { display: none; }
@media (max-width: 760px) {
  body.native #app-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52vh; /* half sheet — the map stays visible and live above */
    transition: height 0.25s ease;
    z-index: 1205; /* over map, sheet, drawers; under tabbar (1210) + gate (3000) */
    background: #0e1420;
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.55);
    padding: 14px 16px 0;
  }
  #apn-title { font-size: 20px; }
  #apn-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }
  #apn-title { margin: 0; font-weight: 800; letter-spacing: -0.2px; }
  #apn-sub { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
  #apn-close {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
  }
  #apn-action { margin-bottom: 10px; position: relative; }
  #apn-action:empty { display: none; }
  #apn-action #search-unit { width: 100%; }
  #apn-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  /* adopted destination list must show even while body is sheet-peek */
  body.native #apn-list #destinations { display: block !important; padding: 0; }
  /* the legacy floating flights panel is fully replaced by the app panel */
  body.native #flights-panel { display: none !important; }
  /* meet-up body adopts cleanly — give its rows breathing room */
  #apn-list #meet-body { display: block; }
}

/* travel card echoes the app panel's Header / Subheader hierarchy */
.tc-head b { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.tc-sub { color: var(--muted); font-size: 12.5px; margin: -2px 0 8px; }

/* My routes lives in the app panel — the floating card is web-only, and the
   panel header replaces the card's own head/sub */
@media (max-width: 760px) {
  body.native #travel-card { display: none !important; }
  #apn-list .tc-head,
  #apn-list .tc-sub { display: none; }
  #apn-list #tc-body { display: block; }
}

/* the app has no resting drawer — the map owns the screen until a tab is
   tapped (the sidebar still exists hidden, as the parking spot for panel
   content between opens) */
@media (max-width: 760px) {
  body.native #sidebar { display: none !important; }
}

/* attribution must stay (OSM/CARTO terms) but wears the app's chrome — it
   used to hide behind the resting sheet */
@media (max-width: 760px) {
  body.native .leaflet-control-attribution {
    background: rgba(14, 20, 32, 0.75);
    color: #566178;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px 0 0 0;
    margin-bottom: 0; /* very bottom edge, tucked behind the floating tab bar */
  }
  body.native .leaflet-control-attribution a { color: #566178; }
}

/* panel sizes: mini strip / half sheet / nearly full — chevron pair steps */
#apn-chevs { display: none; }
@media (max-width: 760px) {
  body.native #app-panel:not([hidden]).apn-tall {
    height: calc(100vh - env(safe-area-inset-top) - 10px);
  }
  body.native #app-panel:not([hidden]).apn-mini {
    /* one header row; still clears the floating tab bar (~68px + inset) */
    height: calc(132px + env(safe-area-inset-bottom));
  }
  body.native #app-panel.apn-mini #apn-action,
  body.native #app-panel.apn-mini #apn-list,
  body.native #app-panel.apn-mini #apn-sub { display: none; }
  body.native #apn-chevs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 2px;
  }
  body.native #apn-chevs button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--accent);
    padding: 4px 6px;
  }
  body.native #apn-chevs svg { width: 24px; height: 24px; display: block; }
  /* hide the step you can't take */
  body.native #app-panel.apn-tall #apn-grow,
  body.native #app-panel.apn-mini #apn-shrink { visibility: hidden; }
}

/* typing mode: keyboard is up — tab bar clears out, panel grows for the
   suggestions but stays under 80% so the status bar (clock/wifi/signal)
   and a slice of map stay visible, and the header row stays reachable */
@media (max-width: 760px) {
  body.native.kb-open #tabbar { display: none !important; }
  body.native.kb-open #app-panel:not([hidden]) {
    /* vh, not % — an ancestor transform makes % resolve against the wrong box */
    height: 80vh;
  }
  body.native.kb-open #apn-chev { visibility: hidden; }
}

/* My routes: add-a-route row + route rows */
#tc-add {
  display: flex;
  gap: 6px;
}
#tc-add input {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  min-width: 0;
  flex: 1;
  text-transform: capitalize;
}
#tr-add-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0b0f14;
  background: var(--accent);
  border: none;
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}
#tr-rows { margin: 4px 0 10px; }
.tr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tr-main { flex: 1; min-width: 0; }
.tr-main b { font-size: 13.5px; letter-spacing: 0.3px; }
.tr-main span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-x { color: var(--accent-2); font-weight: 700; font-size: 12.5px; }
.tr-row button {
  width: 28px;
  height: 28px;
  flex: none;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.tr-row button:hover { color: var(--text); background: rgba(255, 255, 255, 0.11); }

/* From/To typeahead */
#tr-sugg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #141c2c;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
#tr-sugg li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
#tr-sugg li:hover { background: rgba(79, 195, 247, 0.12); }
#tr-sugg .code { color: var(--accent); font-weight: 800; font-size: 13px; flex: none; }
#tr-sugg .sug-name { font-size: 13px; }
#tr-sugg .sug-place {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
/* the typeahead anchors to the panel's action slot; the web travel card is
   position:fixed — already a containing block, do NOT override it */
#apn-action { position: relative; }

/* universal share button rides with the chevrons */
@media (max-width: 760px) {
  body.native #apn-share svg { width: 21px; height: 21px; }
  body.native #app-panel.apn-mini #apn-share { visibility: visible; }
}

/* app: the tab bar already owns My flights / My routes — the account menu
   keeps just Preferences and Sign out */
@media (max-width: 760px) {
  body.native #acct-flights,
  body.native #acct-travel { display: none; }
}

/* ---- feedback modal (shares the auth-gate card look) ---- */
#fb-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 16, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 20px;
}
#fb-modal[hidden] { display: none; }
#fb-card { width: min(420px, 100%); }
#fb-cats {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
#fb-cats button {
  flex: 1;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 0;
  cursor: pointer;
}
#fb-cats button.on {
  color: var(--accent);
  border-color: rgba(79, 195, 247, 0.5);
  background: rgba(79, 195, 247, 0.1);
}
#fb-text {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
}
#fb-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
#fb-actions button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 8px 18px;
  cursor: pointer;
}
#fb-cancel {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
}
#fb-send {
  color: #0b0f14;
  background: var(--accent);
  border: none;
}

/* S14: the journey mid-line is a real link when a flight-time page exists */
.jt-mid-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.jt-mid-link:hover { color: var(--accent); text-decoration: underline; }
a.pop-details { display: block; text-align: center; text-decoration: none; }

/* section links in the deck icon strip: same chrome as the panel keys */
.deck-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; align-self: center; }
a.deck-link { display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; }

/* meet-up panel: the adopted live summary reads as the result line */
body.native #apn-list #summary { display: block !important; padding: 4px 2px 0; }
body.native #apn-list #summary .big { font-size: 15px; font-weight: 700; }


/* live flights on the selected route */
.rl-plane-wrap { background: none; border: none; }
.rl-plane { width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.rl-plane svg { width: 18px; height: 18px; display: block; }
.rl-block { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.rl-head { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.rl-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.rl-row b { color: var(--accent); }
.rl-row i { margin-left: auto; font-style: normal; color: var(--muted); }
.rl-none { font-size: 12px; color: var(--dim); }
.rl-note { font-size: 10.5px; color: var(--dim); margin-top: 5px; }

/* ---- Social V1 (friends, compare, leaderboard) ---- */
#social-panel {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: 340px;
  z-index: 1200; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column; overflow: hidden;
}
#social-panel[hidden] { display: none; }
#so-body { padding: 10px 14px 16px; overflow-y: auto; flex: 1; }
.so-sec { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin: 16px 0 6px; }
.so-code { display: flex; align-items: center; gap: 10px; }
.so-code b { font-size: 18px; letter-spacing: 0.12em; color: var(--accent); font-family: ui-monospace, monospace; }
.so-code button, .so-add button, .so-name button {
  font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer;
}
.so-add, .so-name { display: flex; gap: 8px; margin-top: 8px; }
.so-add input, .so-name input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 11px;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.so-req, .so-wait { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; }
.so-req button { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 8px; border: none; background: var(--accent); color: #0b0f14; cursor: pointer; }
.so-req button.so-ghostbtn, .so-ghostbtn { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.so-wait { color: var(--dim); font-size: 12px; }
.so-friend { display: flex; justify-content: space-between; align-items: baseline; width: 100%; text-align: left;
  font: inherit; padding: 10px 12px; margin: 4px 0; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; }
.so-friend span { font-size: 11.5px; color: var(--dim); }
.so-boardbtn { display: block; width: 100%; margin-top: 8px; font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--accent); cursor: pointer; }
.so-tog { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; cursor: pointer; }
.so-ghostbtn { display: block; margin-top: 8px; font: inherit; font-size: 12.5px; padding: 7px 11px; border-radius: 8px; cursor: pointer; }
.so-fname { font-size: 18px; font-weight: 700; margin: 6px 0 8px; }
.so-grid { margin-bottom: 4px; }
.so-race { display: grid; grid-template-columns: 76px 1fr 30px 1fr; align-items: baseline; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.so-race span { color: var(--muted); }
.so-race b.so-mine { text-align: right; color: var(--muted); font-weight: 600; }
.so-race b.so-theirs { text-align: left; color: var(--muted); font-weight: 600; }
.so-race b.so-win { color: var(--accent); }
.so-race i { text-align: center; color: var(--dim); font-style: normal; font-size: 11px; }
.so-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.so-chip { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; }
.so-chip.so-both { color: #fff; }
.so-chip.so-them { color: var(--coral, #ffb74d); color: #ffb74d; }
.so-chip.so-you { color: var(--accent); }
.so-up { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.so-up span { margin-left: auto; color: var(--dim); font-size: 12px; }
.so-rank { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 5px 0; }
.so-rank i { width: 20px; font-style: normal; text-align: center; }
.so-rank span { margin-left: auto; color: var(--muted); }
.so-rank.me b { color: var(--accent); }
body.native #apn-list #so-body { display: block; }
@media (max-width: 700px) {
  #social-panel { left: 12px; width: auto; top: calc(12px + env(safe-area-inset-top)); }
  body.native #social-panel { display: none; } /* native uses the app panel */
}

/* trading cards */
.so-upload { display: block; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--accent);
  border: 1px dashed var(--border); border-radius: 10px; padding: 12px; margin: 4px 0 6px; cursor: pointer; }
.so-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.so-card { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.so-card img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.so-card figcaption { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); padding: 5px 7px; }
.so-card-del { margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 12px; }

.so-sharebtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  font: inherit; font-size: 14px; font-weight: 700; padding: 12px; border-radius: 12px; border: none;
  background: var(--accent); color: #0b0f14; cursor: pointer; margin-bottom: 8px; }
.so-codeline { font-size: 12px; color: var(--dim); text-align: center; margin-bottom: 6px; }
.so-codeline b { color: var(--muted); font-family: ui-monospace, monospace; letter-spacing: 0.08em; }
.so-grid { grid-template-columns: repeat(3, 1fr); }
#pm-social .so-ghostbtn { margin: 8px 0 0; }
#pm-social .so-name { margin-top: 8px; display: flex; gap: 8px; }
#pm-social .so-name input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 11px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
#pm-social .so-name button { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; }

/* friends v3: pills + flight list */
.so-pillrow { display: flex; flex-wrap: nowrap; gap: 7px; margin: 2px 0 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.so-pillrow::-webkit-scrollbar { display: none; }
.so-pill { flex: 0 0 auto; }
.so-pill.on { border-color: var(--accent); color: var(--accent); background: rgba(79, 195, 247, 0.12); }
.so-pill { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); cursor: pointer; }
.so-pill-invite { background: var(--accent); color: #0b0f14; border-color: var(--accent); }
.so-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* friends: pill bar pinned while the content scrolls; visited-country flags */
#so-pillbar { position: sticky; top: 0; z-index: 6; background: var(--panel); padding: 8px 0 8px; margin: 0 0 4px; }
body.native #apn-list #so-pillbar { background: #0e1420; }
.so-flags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.so-flags img { border-radius: 2.5px; display: block; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.so-flag-txt { font-size: 10px; color: var(--dim); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; }

.so-race-hdr { border-bottom: none; padding-bottom: 0; }
.so-race-hdr b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim) !important; font-weight: 700; }

.so-lead { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.so-lead span { width: 92px; color: var(--muted); flex-shrink: 0; }
.so-lead b { color: var(--text); }
.so-lead em { font-style: normal; font-weight: 700; color: var(--accent); }
.so-lead-you { margin-left: auto; font-size: 11.5px; color: var(--dim); }