/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Theme Variables ───────────────────────────────────────── */
body.theme-light {
  --bg:           #f0f4f8;
  --bg-card:      #ffffff;
  --bg-header:    #1a3a5c;
  --text:         #1a202c;
  --text-muted:   #718096;
  --text-header:  #ffffff;
  --accent:       #2b6cb0;
  --border:       #e2e8f0;
  --status-run:   #38a169;
  --status-idle:  #718096;
  --status-off:   #e53e3e;
  --row-alt:      #f7fafc;
  --glow:         none;
  --font:         'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Courier New', monospace;
}

body.theme-dark {
  --bg:           #1a1a2e;
  --bg-card:      #16213e;
  --bg-header:    #0f3460;
  --text:         #e2e8f0;
  --text-muted:   #a0aec0;
  --text-header:  #ffffff;
  --accent:       #63b3ed;
  --border:       #2d3748;
  --status-run:   #68d391;
  --status-idle:  #a0aec0;
  --status-off:   #fc8181;
  --row-alt:      #1e2a45;
  --glow:         none;
  --font:         'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Courier New', monospace;
}

body.theme-tron {
  --bg:           #000000;
  --bg-card:      #020c18;
  --bg-header:    #000000;
  --text:         #00e5ff;
  --text-muted:   #0097a7;
  --text-header:  #00e5ff;
  --accent:       #00e5ff;
  --border:       #00e5ff;
  --status-run:   #00e5ff;
  --status-idle:  #0097a7;
  --status-off:   #ff1744;
  --row-alt:      #020f1f;
  --glow:         0 0 8px #00e5ff, 0 0 20px #00e5ff44;
  --font:         'Courier New', monospace;
  --font-mono:    'Courier New', monospace;
}

/* ─── Base ──────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

/* ─── Tron scanline overlay ─────────────────────────────────── */
body.theme-tron::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 229, 255, 0.03) 2px,
    rgba(0, 229, 255, 0.03) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* ─── Header ────────────────────────────────────────────────── */
header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 2rem;
  position: relative;
  z-index: 50;
}

body.theme-tron header {
  box-shadow: var(--glow);
  border-bottom: 1px solid var(--accent);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-header);
  letter-spacing: 0.15em;
  font-family: var(--font-mono);
}

body.theme-tron .site-title {
  text-shadow: var(--glow);
  animation: flicker 6s infinite;
}

.site-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: 1;
}

body.theme-tron .site-subtitle {
  color: var(--text-muted);
}

/* ─── Settings gear + dropdown ──────────────────────────────── */
.settings-wrapper {
  position: relative;
  margin-left: auto;
}

.settings-gear {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, transform 0.35s;
  line-height: 1;
}
.settings-gear:hover,
.settings-gear.open    { color: var(--accent); border-color: var(--accent); }
.settings-gear.open    { transform: rotate(60deg); }
body.theme-tron .settings-gear.open { box-shadow: 0 0 8px var(--accent); }

.settings-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  min-width: 210px;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.settings-dropdown.open { display: block; }
body.theme-tron .settings-dropdown { box-shadow: 0 6px 20px rgba(0,229,255,0.12); }

.settings-section { margin-bottom: 0.85rem; }
.settings-section:last-child { margin-bottom: 0; }

.settings-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.settings-row { display: flex; gap: 0.35rem; align-items: center; }

.settings-font-size {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text);
  min-width: 2.8rem;
  text-align: center;
}

/* ─── Theme buttons (inside dropdown) ───────────────────────── */

.theme-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-mono);
}

.theme-btn:hover,
.theme-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

body.theme-tron .theme-btn:hover,
body.theme-tron .theme-btn.active {
  box-shadow: var(--glow);
}

/* ─── Main layout ───────────────────────────────────────────── */
main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
/* Airplanes is a wide data grid — give it more room than the chart tabs. */
main.wide { max-width: 1560px; }

.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 1.5rem;
}

/* ─── Unit card ─────────────────────────────────────────────── */
.unit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
}

body.theme-tron .unit-card {
  border-color: var(--accent);
  box-shadow: 0 0 12px #00e5ff22, inset 0 0 30px #00e5ff08;
}

.unit-card.skeleton {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-msg {
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  animation: blink 1s step-end infinite;
}

/* ─── Card header ───────────────────────────────────────────── */
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}

body.theme-tron .card-header {
  border-bottom-color: var(--accent);
  background: #020f1f;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.running {
  background: var(--status-run);
  box-shadow: 0 0 8px var(--status-run);
  animation: pulse 2s ease-in-out infinite;
}

.status-dot.standby { background: var(--status-idle); }
.status-dot.offline { background: var(--status-off); }

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

body.theme-tron .card-title {
  text-shadow: 0 0 6px var(--accent);
}

.card-mode {
  margin-left: auto;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.card-mode.running { color: var(--status-run); }

body.theme-tron .card-mode.running {
  text-shadow: 0 0 6px var(--status-run);
}

/* ─── Sections ──────────────────────────────────────────────── */
.card-body { padding: 0; }

.section {
  border-bottom: 1px solid var(--border);
}

body.theme-tron .section {
  border-bottom-color: #00e5ff22;
}

.section:last-child { border-bottom: none; }

.section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  padding: 0.6rem 1.25rem 0.3rem;
  font-family: var(--font-mono);
}

body.theme-tron .section-title {
  color: var(--accent);
  opacity: 0.7;
}

/* ─── Data rows ─────────────────────────────────────────────── */
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 1.25rem;
  font-size: 0.9rem;
}

.data-row:nth-child(even) { background: var(--row-alt); }

.data-label {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.data-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

body.theme-tron .data-value {
  text-shadow: 0 0 4px var(--accent);
}

.data-value.null-val {
  color: var(--text-muted);
  font-weight: 400;
}

/* ─── Card footer ───────────────────────────────────────────── */
.card-footer {
  padding: 0.6rem 1.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-align: right;
  border-top: 1px solid var(--border);
}

body.theme-tron .card-footer {
  border-top-color: #00e5ff22;
}

/* ─── Notices panel ─────────────────────────────────────────── */
.notices-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.notices-panel.all-clear {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-color: var(--status-run);
}

body.theme-tron .notices-panel.all-clear {
  box-shadow: 0 0 10px #00e5ff22;
}

.notices-icon { font-size: 1rem; color: var(--status-run); }
.notices-all-clear {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--status-run);
  letter-spacing: 0.08em;
}

body.theme-tron .notices-all-clear {
  text-shadow: 0 0 6px var(--status-run);
}

.notices-panel.has-critical {
  border-color: var(--status-off);
}

body.theme-tron .notices-panel.has-critical {
  box-shadow: 0 0 12px #ff174444;
}

.notices-panel.has-warnings {
  border-color: #d69e2e;
}

.notices-panel.has-info {
  border-color: #3182ce;
}

.notices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--row-alt);
}

body.theme-tron .notices-header {
  border-bottom-color: #00e5ff22;
  background: #020f1f;
}

.notices-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}

.grafana-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.grafana-link:hover { text-decoration: underline; }

body.theme-tron .grafana-link {
  text-shadow: 0 0 4px var(--accent);
}

.notices-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

body.theme-tron .notice-item {
  border-bottom-color: #00e5ff11;
}

.notice-item:last-child { border-bottom: none; }

.notice-item.notice-critical { background: #ff17440d; }
.notice-item.notice-warning  { background: #d69e2e0d; }
.notice-item.notice-info     { background: #3182ce0d; }

.notice-icon { font-size: 0.85rem; margin-top: 0.1rem; flex-shrink: 0; }

.notice-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.notice-message {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.notice-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.notice-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  opacity: 0.7;
}

/* ─── Refresh note ──────────────────────────────────────────── */
.refresh-note {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* ─── Animations ────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96%            { opacity: 0.8; }
  97%            { opacity: 1; }
  98%            { opacity: 0.6; }
  99%            { opacity: 1; }
}

/* ─── Cost calendar ─────────────────────────────────────────── */
#cost-container { margin-top: 1.5rem; }

.cost-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.88;
}

body.theme-tron .cost-panel {
  border-color: #00e5ff55;
  box-shadow: 0 0 8px #00e5ff11;
}

.cost-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--row-alt);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cost-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cal-nav-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}

.cal-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

body.theme-tron .cal-nav-btn:hover:not(:disabled) {
  box-shadow: var(--glow);
}

.cal-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

body.theme-tron .cost-header { background: #020f1f; border-bottom-color: #00e5ff22; }

.cost-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}

.cost-subtitle {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.cost-body {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  flex: 1;
  min-width: 280px;
}

.cal-hdr {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.2rem 0;
  letter-spacing: 0.06em;
}

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.1rem;
  border-radius: 3px;
  min-height: 52px;
  border: 1px solid transparent;
}

.cal-blank { background: transparent; border: none; }

.cal-day-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

.cal-kwh {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
}

.cal-cost {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

body.theme-light .cal-low,
body.theme-dark  .cal-low  { background: #22543d22; border-color: #22543d44; }
body.theme-light .cal-med,
body.theme-dark  .cal-med  { background: #744e0522; border-color: #744e0544; }
body.theme-light .cal-high,
body.theme-dark  .cal-high { background: #7b341e22; border-color: #7b341e44; }
body.theme-light .cal-peak,
body.theme-dark  .cal-peak { background: #63171b33; border-color: #63171b66; }

body.theme-light .cal-low  .cal-cost { color: #276749; }
body.theme-light .cal-med  .cal-cost { color: #975a16; }
body.theme-light .cal-high .cal-cost { color: #c05621; }
body.theme-light .cal-peak .cal-cost { color: #c53030; }

body.theme-dark  .cal-low  .cal-cost { color: #68d391; }
body.theme-dark  .cal-med  .cal-cost { color: #f6ad55; }
body.theme-dark  .cal-high .cal-cost { color: #fc8181; }
body.theme-dark  .cal-peak .cal-cost { color: #feb2b2; }

body.theme-tron .cal-low  { background: rgba(0,229,255,0.06); border-color: rgba(0,229,255,0.15); }
body.theme-tron .cal-med  { background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.25); }
body.theme-tron .cal-high { background: rgba(0,229,255,0.20); border-color: rgba(0,229,255,0.40); }
body.theme-tron .cal-peak { background: rgba(255,23,68,0.15); border-color: rgba(255,23,68,0.40); }

body.theme-tron .cal-low  .cal-cost { color: #00e5ff; text-shadow: 0 0 4px #00e5ff; }
body.theme-tron .cal-med  .cal-cost { color: #00e5ff; text-shadow: 0 0 6px #00e5ff; }
body.theme-tron .cal-high .cal-cost { color: #00e5ff; text-shadow: 0 0 10px #00e5ff; }
body.theme-tron .cal-peak .cal-cost { color: #ff1744; text-shadow: 0 0 8px #ff1744; }

.cal-today { border-width: 1px; border-style: solid; }
body.theme-light .cal-today,
body.theme-dark  .cal-today { background: #2b6cb022; border-color: #2b6cb0; }
body.theme-tron  .cal-today { background: rgba(0,229,255,0.12); border-color: #00e5ff; box-shadow: 0 0 6px #00e5ff44; }
.cal-today .cal-day-num { color: var(--accent); }

body.theme-light .cal-future,
body.theme-dark  .cal-future { background: var(--row-alt); border-color: var(--border); }
body.theme-tron  .cal-future { background: #020c1822; border-color: #00e5ff11; }
.cal-future .cal-cost { color: var(--text-muted); font-weight: 400; }

.cost-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 140px;
}

.cost-stat { display: flex; flex-direction: column; gap: 0.1rem; }

.cost-stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cost-stat-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

body.theme-tron .cost-stat-value { text-shadow: 0 0 6px var(--accent); }
.cost-projected { color: var(--accent); }

.cost-stat-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
}

.cost-legend {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.leg {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── Weather strip ─────────────────────────────────────────── */
.weather-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  margin: 0.75rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  flex-wrap: wrap;
}
.weather-loading {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.weather-icon   { font-size: 1.4rem; line-height: 1; }
.weather-temp   { font-size: 1.3rem; font-weight: bold; color: var(--accent); }
.weather-desc   { font-size: 0.85rem; color: var(--text); }
.weather-details { font-size: 0.75rem; color: var(--text-muted); }
.weather-location { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

body.theme-tron .weather-temp { text-shadow: 0 0 8px var(--accent); }

/* ─── Calendar hi/lo ─────────────────────────────────────────── */
.cal-hilo {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  opacity: 0.85;
}

/* ─── Tabs ──────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0.3rem;
}
.tab-btn {
  padding: 0.3rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.tab-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.tab-active { display: block; }

/* ─── Diagram ────────────────────────────────────────────────── */
.diag-combined-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 1rem 1.5rem 1.5rem;
}
.diag-combined-svg {
  width: 100%;
  max-width: var(--diag-max-width, 900px);
  height: auto;
  display: block;
  margin: 0 auto;
}
.diag-earth {
  fill: rgba(50, 80, 55, 0.10);
}
body.theme-light .diag-earth { fill: rgba(120, 95, 60, 0.07); }
body.theme-tron  .diag-earth { fill: rgba(0, 229, 255, 0.04); }

.diag-well {
  fill: rgba(0,0,0,0.18);
  stroke: var(--border);
  stroke-width: 1.5;
}
body.theme-light .diag-well { fill: rgba(120,95,60,0.10); }
body.theme-tron  .diag-well { fill: rgba(0,229,255,0.03); stroke: var(--accent); opacity: 0.7; }

/* kept for any fallback references */
.diag-grid      { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; padding: 1.5rem 1rem; }
.diag-unit-wrap { flex: 0 0 auto; max-width: 320px; width: 100%; }
.unit-svg       { width: 100%; height: auto; display: block; }
.diag-loading   { text-align: center; color: var(--text-muted); font-family: var(--font-mono); padding: 3rem; }

/* SVG element styles */
.diag-box       { fill: var(--bg-card); stroke: var(--border); stroke-width: 1.5; }
.diag-box-run   { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 5px var(--accent)); }
.diag-box-ground { fill: rgba(30,80,160,0.1); stroke: var(--border); stroke-width: 1.5; }
.diag-rule      { stroke: var(--border); stroke-width: 0.75; }
.diag-title     { font-family: var(--font-mono); font-size: 10px; font-weight: bold;
                  fill: var(--text); letter-spacing: 0.08em; }
.diag-lbl       { font-family: var(--font-mono); font-size: 8.5px; fill: var(--text-muted); }
.diag-temp      { font-family: var(--font-mono); font-size: 15px; font-weight: bold; }
.diag-val       { font-family: var(--font-mono); font-size: 10px; fill: var(--text); }
.diag-sub       { font-family: var(--font-mono); font-size: 8px; fill: var(--text-muted); }
.diag-status    { font-family: var(--font-mono); font-size: 9px; font-weight: bold; letter-spacing: 0.04em; }
.diag-pipe-lbl  { font-family: var(--font-mono); font-size: 8px; fill: var(--text-muted); }
.pipe           { stroke-linecap: butt; }

@keyframes pipe-dash {
  from { stroke-dashoffset: 14; }
  to   { stroke-dashoffset: 0;  }
}
.pipe-flow { stroke-dasharray: 8 6; animation: pipe-dash 0.65s linear infinite; }

@keyframes diag-pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.3; }
}
.diag-pulse { animation: diag-pulse 1.4s ease-in-out infinite; }

/* ─── Efficiency Comparison ─────────────────────────────────── */
.comparison-panel {
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  overflow: hidden;
}
.comparison-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.2rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  user-select: none;
  list-style: none;
}
.comparison-summary::-webkit-details-marker { display: none; }
.comparison-summary::before {
  content: '▶';
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
details[open] .comparison-summary::before { transform: rotate(90deg); }

.comparison-badge {
  font-size: 0.6rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--text-muted);
  border-radius: 2px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.comparison-subtitle {
  font-size: 0.68rem;
  font-weight: normal;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: auto;
}

.comp-wrap     { padding: 0 1.2rem 1.2rem; }
.comp-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.comp-nav      { display: flex; align-items: center; gap: 0.5rem; }
.comp-period   { font-family: var(--font-mono); font-size: 0.78rem; font-weight: bold;
                 letter-spacing: 0.08em; color: var(--text); }
.comp-loads    { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

.comp-grid     { display: flex; flex-direction: column; gap: 0.35rem; }

/* column-widths: name | type | cooling | heating | total+bar | kwh | tag */
.comp-col-headers,
.comp-row {
  display: grid;
  grid-template-columns: 1fr 90px 130px 130px 140px 70px 100px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  border: 1px solid transparent;
}
.comp-col-headers {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.2rem;
}
.comp-col-cool-hdr { color: #63b3ed; }
.comp-col-heat-hdr { color: #f6ad55; }

.comp-row-ours {
  border-color: var(--accent);
  background: rgba(0,229,255,0.04);
}
body.theme-light .comp-row-ours { background: rgba(43,108,176,0.05); border-color: var(--accent); }
body.theme-dark  .comp-row-ours { background: rgba(99,179,237,0.06); border-color: var(--accent); }

.comp-col-name {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.comp-model-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text);
  text-decoration: none;
  font-weight: bold;
}
.comp-model-link:hover { color: var(--accent); }
.comp-link-icon { font-size: 0.62rem; opacity: 0.7; }
.comp-model     { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); }
.comp-installed { font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent);
                  opacity: 0.75; }
.comp-col-type { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); }

.comp-col-mode {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.comp-mode-spec {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
}
.comp-mode-cost {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--text);
}
.comp-fuel { font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-muted); }

.comp-col-total {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.comp-stacked-wrap {
  height: 8px;
  background: rgba(128,128,128,0.15);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
}
.comp-stacked-cool {
  height: 100%;
  background: #63b3ed;
  opacity: 0.6;
  transition: width 0.4s ease;
}
.comp-stacked-heat {
  height: 100%;
  background: #f6ad55;
  opacity: 0.6;
  transition: width 0.4s ease;
}
.comp-stacked-ours      { background: var(--accent); opacity: 0.85; }
.comp-stacked-ours-heat { background: #fc8181; opacity: 0.85; }
body.theme-tron .comp-stacked-ours      { box-shadow: 0 0 5px var(--accent); }
body.theme-tron .comp-stacked-ours-heat { box-shadow: 0 0 5px #fc8181; }

.comp-total-val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--text);
}

.comp-col-kwh {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  text-align: right;
}
.comp-kwh-val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--text);
}
.comp-kwh-lbl {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
}
.comp-col-tag { display: flex; flex-direction: column; gap: 0.2rem; }
.comp-tag  {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  letter-spacing: 0.06em;
  display: inline-block;
}
.comp-tag-ours  { background: var(--accent); color: var(--bg); font-weight: bold; }
.comp-tag-save  { background: rgba(252,129,74,0.15); color: #f6ad55; border: 1px solid #f6ad5566; }
.comp-tag-less  { background: rgba(72,187,120,0.15); color: #68d391; border: 1px solid #68d39166; }
.comp-tag-close { background: rgba(128,128,128,0.12); color: var(--text-muted); }

.comp-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 1rem;
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.comp-empty { font-family: var(--font-mono); font-size: 0.8rem;
              color: var(--text-muted); padding: 1rem; text-align: center; }

@media (max-width: 820px) {
  .comp-wrap { overflow-x: auto; }
  .comp-col-headers,
  .comp-row { min-width: 790px; }
}

/* ─── Airplane calendar picker ──────────────────────────────── */
.ap-calendar {
  position: absolute;
  z-index: 1200;
  margin-top: 0.4rem;
  right: 1rem;
  width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  font-family: var(--font-mono);
}
.ap-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.ap-cal-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.ap-cal-nav {
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; width: 26px; height: 26px; cursor: pointer; font-size: 1rem;
}
.ap-cal-nav:hover { border-color: var(--accent); color: var(--accent); }
.ap-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.ap-cal-dow div {
  text-align: center; font-size: 0.65rem; color: var(--text-muted); padding: 2px 0;
}
.ap-cal-cell {
  text-align: center; padding: 5px 0; font-size: 0.75rem; border-radius: 4px;
}
.ap-cal-empty { visibility: hidden; }
.ap-cal-none { color: var(--text-muted); opacity: 0.3; }
.ap-cal-has {
  color: var(--text); background: rgba(0, 229, 255, 0.12);
  cursor: pointer; font-weight: 600;
}
.ap-cal-has:hover { background: var(--accent); color: #04202a; }
.ap-cal-today { outline: 1px solid var(--accent); }
.ap-cal-foot {
  margin-top: 0.5rem; text-align: center;
  font-size: 0.65rem; color: var(--text-muted);
}

/* ─── Airplane replay bar ───────────────────────────────────── */
.ap-replay-bar {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.5rem 1rem; padding: 0.5rem 0.8rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px;
}
.ap-replay-btn {
  background: var(--accent); color: #04202a; border: none;
  border-radius: 5px; width: 34px; height: 30px; cursor: pointer;
  font-size: 0.9rem; flex-shrink: 0;
}
.ap-replay-scrubber { flex: 1; cursor: pointer; accent-color: var(--accent); }
.ap-replay-clock {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--text);
  min-width: 62px; text-align: center;
}
.ap-replay-speed {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 0.25rem 0.4rem; font-family: var(--font-mono); font-size: 0.75rem;
}

/* ─── Airplane recorder warning ─────────────────────────────── */
.ap-recorder-warning {
  margin: 0.5rem 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: rgba(245, 101, 101, 0.15);
  border: 1px solid #f56565;
  color: #f56565;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ─── All Sensors panel (Geothermal) ────────────────────────── */
.sensors-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem; margin-top: 0.8rem;
}
.sensors-unit {
  font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.05em;
  color: var(--accent); margin: 0 0 0.6rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.sensors-meta, .sensors-unit .sensors-meta { color: var(--text-muted); font-size: 0.72rem; font-weight: 400; letter-spacing: 0; }
.sensor-group { margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sensor-group > summary {
  cursor: pointer; padding: 0.4rem 0.7rem; background: var(--bg-card);
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 0.5rem; list-style: none;
}
.sensor-group > summary::-webkit-details-marker { display: none; }
.sensor-group > summary::before { content: '▸'; color: var(--accent); font-size: 0.7rem; }
.sensor-group[open] > summary::before { content: '▾'; }
.sensor-count { margin-left: auto; color: var(--text-muted); font-weight: 400; font-size: 0.68rem; }
.sensor-rows { padding: 0.2rem 0; }
.sensor-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.18rem 0.7rem; font-family: var(--font-mono); font-size: 0.76rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.sensor-row:first-child { border-top: none; }
.sensor-label { color: var(--text-muted); }
.sensor-value { color: var(--text); font-weight: 600; white-space: nowrap; }

/* Cost calendar shown on the Cost tab (2nd item) — space it from the comparison */
#cost-container-cost { display: block; margin-bottom: 1.5rem; }

/* Energy-spending-over-time chart (bottom of the Cost tab) */
.cost-history-mount { display: block; margin-top: 1.5rem; }
.costhist-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.7rem;
}
.costhist-title {
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--text);
}
.costhist-views { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.costhist-barval { font-family: var(--font-mono); font-size: 10px; fill: var(--text); font-weight: 700; }
.costhist-note { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.4rem; }

/* Interactive hover crosshair + tooltip */
.costhist-chart { position: relative; }
.costhist-chart svg { cursor: crosshair; }
.costhist-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--accent); border-radius: 7px;
  padding: 0.4rem 0.6rem; font-family: var(--font-mono); font-size: 0.72rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); white-space: nowrap; min-width: 90px;
}
.costhist-tip .ct-h { color: var(--text-muted); font-size: 0.66rem; margin-bottom: 0.15rem; }
.costhist-tip .ct-big { color: var(--accent); font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.costhist-tip .ct-sub { color: var(--text-muted); font-size: 0.66rem; }
.costhist-tip .ct-row { display: flex; align-items: center; gap: 0.35rem; line-height: 1.5; }
.costhist-tip .ct-row i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.costhist-tip .ct-row b { color: var(--text); }
.costhist-tip .ct-row span { color: var(--text-muted); font-size: 0.64rem; }

/* ─── Utility pricing panel (Cost tab) ──────────────────────── */
.pricing-panel {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-left-width: 5px;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
}
.pricing-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.pricing-title { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; color: var(--text); }
.pricing-sub { font-size: 0.72rem; color: var(--text-muted); }
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem 1.2rem;
}
.pricing-item { display: flex; flex-direction: column; gap: 0.1rem; }
.pricing-lbl { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono); }
.pricing-val { font-size: 1.05rem; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.pricing-total .pricing-val { color: var(--accent); }
.pricing-input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 0.3rem 0.45rem; font-family: var(--font-mono); font-size: 0.95rem; width: 110px;
}
.pricing-input:focus { outline: none; border-color: var(--accent); }
.pricing-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; }
.pricing-btn {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 6px;
  padding: 0.3rem 0.9rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
}
.pricing-btn:hover { background: var(--accent); color: #04202a; }
.pricing-save { background: var(--accent); color: #04202a; }
.pricing-status { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ─── Ground trend chart ────────────────────────────────────── */
.ground-trend-svg {
  width: 100%;
  max-width: 860px;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0.5rem 1rem 1rem;
}

/* ─── Diagram tooltip ───────────────────────────────────────── */
.diag-tooltip {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 500;
  display: none;
}
body.theme-tron .diag-tooltip { box-shadow: 0 0 8px var(--accent); }

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .units-grid { grid-template-columns: 1fr; }
  .site-title { font-size: 1.4rem; }
  .header-inner { gap: 0.75rem; }
  .cost-body { flex-direction: column; }
  .cost-summary { flex-direction: row; flex-wrap: wrap; }

  /* Outdoor AQI box: keep the inside/outside table inside its card, don't blow
     out the page width. Drop the long category names (the color badge conveys it). */
  .aq-out-banner { padding: 0.7rem 0.8rem; }
  .aq-out-aqi { font-size: 2.2rem; }
  .aq-out-compare { overflow-x: auto; }
  .aq-out-table { font-size: 0.72rem; width: 100%; }
  .aq-out-table td { padding: 0.3rem 0.4rem; white-space: normal; }
  .aq-out-catname { display: none; }
  .aq-out-better, .aq-out-worse { font-size: 0.68rem; }

  /* AQ history stacks several sensor calendars — compact the cells so the data
     fits and the whole page is reachable (matches the geothermal history feel). */
  .ghist-wrap { max-width: 100%; overflow-x: hidden; }
  #aq-cal-container, #aq-history-panel { max-width: 100%; overflow-x: hidden; }
  .ghist-grid { gap: 2px; }
  .ghist-cell { min-height: 44px; padding: 2px 3px; gap: 1px; overflow: hidden; }
  .ghist-day-num { font-size: 0.62rem; }
  .ghist-day-hdr { font-size: 0.5rem; padding: 0.1rem 0; }
  .aqcal-radon, .aqcal-temp, .aqcal-hum { font-size: 0.5rem; line-height: 1.15; }
  .aqcal-sensor-section { margin-top: 0.9rem; }
  .aqcal-sensor-label { font-size: 0.66rem; flex-wrap: wrap; }
}

/* ─── Air Quality Tab ───────────────────────────────────────── */
.aq-floor-section { margin-bottom: 2rem; }

/* ── Air quality trends ── */
.aq-trends-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.aq-trends-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.aq-trend-btn {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 0.25rem 0.7rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem;
}
.aq-trend-btn:hover { color: var(--text); border-color: var(--accent); }
.aq-trend-btn.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.aq-trends-svg { width: 100%; max-width: 860px; height: auto; display: block; }
.aq-tr-axis { font-family: var(--font-mono); font-size: 10px; fill: var(--text-muted); }
.aq-tr-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.6rem;
}
.aq-tr-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.aq-tr-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.aq-tr-legend i.aq-tr-dash {
  width: 16px; height: 0; border-radius: 0;
  border-top: 3px dashed currentColor; background: none !important;
}
.aq-tr-note { display: block; font-size: 0.68rem; color: var(--text-muted); font-style: italic; margin: -0.3rem 0 0.5rem; }
.aq-tr-trenddir { margin-left: auto; }
.aq-tr-up   { color: #f56565; font-weight: 700; }
.aq-tr-down { color: #48bb78; font-weight: 700; }
.aq-tr-flat { color: var(--text-muted); font-weight: 700; }

/* ── Outdoor air quality (inside vs outside) ── */
.aq-out-banner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.aq-out-head { display: flex; align-items: center; gap: 1rem; }
.aq-out-aqi { font-family: var(--font-mono); font-size: 2.8rem; font-weight: 800; line-height: 1; }
.aq-out-cat { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; }
.aq-out-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.aq-out-official { color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
.aq-out-model { font-size: 0.72rem; color: var(--text-muted); opacity: 0.85; margin-top: 0.1rem; }

/* Info icon + hover/focus tooltip (source explainer for the model AQI) */
.aq-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 0.3rem; vertical-align: middle;
  border-radius: 50%; border: 1px solid var(--text-muted); color: var(--text-muted);
  font: italic 700 0.66rem/1 Georgia, serif; cursor: help; position: relative; user-select: none;
}
.aq-info:hover, .aq-info:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.aq-info:hover::after, .aq-info:focus::after {
  content: attr(data-tip);
  position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
  width: 250px; max-width: 78vw;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--accent); border-radius: 8px;
  padding: 0.55rem 0.7rem; font: 400 0.72rem/1.4 var(--font-mono, sans-serif);
  text-align: left; white-space: normal; z-index: 2000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); pointer-events: none;
}
.aq-info:hover::before, .aq-info:focus::before {
  content: ''; position: absolute; bottom: 150%; left: 50%; transform: translate(-50%, 50%);
  border: 6px solid transparent; border-top-color: var(--accent); z-index: 2000;
}
.aq-out-pollutants {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.75rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted);
}
.aq-out-pollutants b { color: var(--text); }
.aq-out-compare { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.aq-out-compare-title {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: 0.4rem;
}
.aq-out-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.aq-out-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.aq-out-outrow td { color: var(--text-muted); }
.aq-out-room { font-weight: 600; color: var(--text); }
.aq-out-badge {
  display: inline-block; color: #04121b; font-weight: 700;
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 0.05rem 0.4rem; border-radius: 4px;
}
.aq-out-better { color: #48bb78; font-weight: 600; }
.aq-out-worse  { color: #f56565; font-weight: 600; }
.aq-out-alert {
  margin-top: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 6px;
  background: rgba(245,101,101,0.12); border: 1px solid #f56565;
  color: #f56565; font-size: 0.82rem;
}
.aq-out-ok {
  margin-top: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 6px;
  background: rgba(72,187,120,0.10); border: 1px solid #48bb78;
  color: #48bb78; font-size: 0.82rem;
}

.aq-floor-header {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.aq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.aq-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
body.theme-tron .aq-card {
  box-shadow: 0 0 10px #00e5ff18, inset 0 0 20px #00e5ff06;
}

.aq-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
body.theme-tron .aq-card-header {
  background: #020f1f;
  border-bottom-color: var(--accent);
}

.aq-card-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.theme-tron .aq-card-name { text-shadow: 0 0 5px var(--accent); }

.aq-card-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.aq-battery-warn { font-weight: bold; }

.aq-metrics-grid {
  display: grid;
  padding: 0.75rem;
  gap: 0.5rem;
}
.aq-metrics-grid.aq-full        { grid-template-columns: repeat(3, 1fr); }
.aq-metrics-grid.aq-radon-only  { grid-template-columns: repeat(3, 1fr); }

.aq-metric {
  background: var(--row-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.aq-metric-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.aq-metric-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
body.theme-tron .aq-metric-value { text-shadow: 0 0 4px currentColor; }

.aq-metric-unit {
  font-size: 0.62rem;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 1px;
}

.aq-metric-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* ─── Geo sub-header (subtitle + Dashboard/Diagram sub-tabs) ── */
.geo-sub-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.subtab-bar { display: flex; gap: 0.25rem; margin-left: auto; }

.subtab-btn {
  padding: 0.2rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.subtab-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.subtab-panel { display: none; }
.subtab-panel.subtab-active { display: block; }

/* ─── Radon summary banner ──────────────────────────────────── */
.aq-radon-banner {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.75rem;
  background: var(--bg-card);
}
.aq-radon-ok    { border-color: #68d391; }
.aq-radon-danger { border-color: #fc8181; background: #2d0a0a22; }
body.theme-tron .aq-radon-ok     { box-shadow: 0 0 12px #68d39122; }
body.theme-tron .aq-radon-danger { box-shadow: 0 0 14px #fc818133; }

.aq-radon-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.aq-radon-ok    .aq-radon-title { color: #68d391; }
.aq-radon-danger .aq-radon-title { color: #fc8181; }

.aq-radon-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.aq-thermo-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.aq-thermo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.aq-thermo-val {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}
body.theme-tron .aq-thermo-val { text-shadow: 0 0 5px currentColor; }

.aq-thermo-unit {
  font-size: 0.58rem;
  font-weight: 400;
  opacity: 0.8;
}

.aq-thermo-name {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 64px;
}

/* ─── Battery icon ──────────────────────────────────────────── */
.aq-batt-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: default;
}
.aq-batt-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
}

/* ─── AQ card footer ────────────────────────────────────────── */
.aq-card-footer {
  display: flex;
  gap: 1rem;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.aq-footer-item {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ─── AQ source toggle bar ──────────────────────────────────── */
.aq-source-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.aq-source-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.aq-src-btn {
  padding: 0.25rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.aq-src-btn + .aq-src-btn { border-left: 1px solid var(--border); }
.aq-src-btn.active { background: var(--accent); color: var(--bg); }
.aq-source-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* ── AQ History panel ──────────────────────────────────────────────────────── */

#aq-history-panel .comparison-panel { margin-top: 2rem; }

.aqhist-controls {
  padding: 0.75rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.aqhist-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.aqhist-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.aqhist-select,
.aqhist-date {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.aqhist-select { min-width: 220px; }
.aqhist-date   { width: 130px; }
.aqhist-load-btn {
  padding: 0.3rem 1rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
}
.aqhist-load-btn:hover { opacity: 0.85; }
.aqhist-range-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}
.aqhist-count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin: 0.75rem 0 0.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.aqhist-scroll {
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.aqhist-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.aqhist-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg);
}
.aqhist-th {
  padding: 0.45rem 0.9rem;
  text-align: right;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.aqhist-th:first-child { text-align: left; }
.aqhist-td {
  padding: 0.35rem 0.9rem;
  text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  white-space: nowrap;
}
.aqhist-date-cell { text-align: left; color: var(--text-muted); }
.aqhist-tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.aqhist-na { color: var(--text-muted); opacity: 0.4; }

/* ── Geothermal History Calendar ───────────────────────────────────────────── */

.ghist-wrap {
  max-width: 780px;
  margin: 1rem 0 0;
}
.ghist-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.ghist-month-label {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex: 1;
  text-align: center;
}
.ghist-nav-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ghist-nav-btn:hover:not([disabled]) { background: var(--accent); color: var(--bg); }
.ghist-nav-btn[disabled]  { opacity: 0.3; cursor: default; }
.ghist-grid {
  display: grid;
  /* minmax(0,1fr) lets columns shrink below their content so wide cell text
     (AQ radon/temp/hum) can't force the grid past the viewport on phones. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.ghist-day-hdr {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 0.2rem 0;
}
.ghist-cell {
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  transition: border-color 0.1s;
}
.ghist-empty  { background: transparent; border-color: transparent; }
.ghist-future { opacity: 0.25; }
.ghist-nodata { opacity: 0.4; }
.ghist-has-data { cursor: pointer; }
.ghist-has-data:hover { border-color: var(--accent); }
.ghist-today  { border-color: var(--accent) !important; }
.ghist-selected { border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 15%, var(--card-bg)); }
.ghist-day-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1;
}
.ghist-mode {
  font-size: 0.75rem;
  line-height: 1.2;
}
.ghist-heating { color: #f6ad55; }
.ghist-cooling { color: #63b3ed; }
.ghist-standby { color: var(--text-muted); }
.ghist-ewt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text);
  line-height: 1.1;
}
.ghist-kwh {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  line-height: 1.1;
}
.ghist-legend {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
}
.ghist-detail-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 1.5rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.ghist-detail-title {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ghist-detail-note {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* ── Air Quality subtabs ────────────────────────────────────────────────────── */
.aqsubtab-panel   { display: none; }
.aqsubtab-active  { display: block; }

.aqcal-sensor-section {
  margin-top: 1.25rem;
}
.aqcal-sensor-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.aqcal-floor {
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.03em;
}

/* AQ calendar cell content rows */
.aqcal-radon,
.aqcal-temp,
.aqcal-hum {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Record stats bar ───────────────────────────────────────────────────────── */
.stats-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 0.3rem 0.6rem;
  margin: 0.4rem 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--card-bg) 60%, transparent);
  flex-wrap: wrap;
}
.stats-bar-dot {
  font-size: 1rem;
  line-height: 1;
}
.stats-bar-label {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.stats-bar-sep {
  opacity: 0.4;
}
.stats-bar-num {
  font-weight: 600;
  color: var(--text);
}
.stats-bar-geo {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.stats-bar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stats-unit-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 1.1rem;
  font-size: 0.6rem;
  color: var(--text-muted);
}
.stats-unit-label {
  min-width: 11rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* Humidity control indicator */
.hum-mode {
  color: var(--text-muted);
}
.hum-mode.hum-active {
  color: var(--text);
}
.hum-dot {
  color: #68d391;
  font-size: 0.7em;
}
.hum-last {
  font-size: 0.75em;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

/* Pi status table */
.pi-status-wrap {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 0.3rem 0.6rem 0.5rem;
  margin: 0.4rem 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--card-bg) 60%, transparent);
}
.pi-status-title {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.pi-status-asof {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
  margin-left: 0.4rem;
}
.pi-status-table {
  border-collapse: collapse;
  width: 100%;
}
.pi-status-table th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.55rem;
  color: var(--text-muted);
  padding: 0.1rem 0.5rem 0.2rem 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
  opacity: 0.7;
}
.pi-status-table td {
  padding: 0.2rem 0.5rem 0.1rem 0;
  vertical-align: middle;
}
.pi-status-dot {
  font-size: 1rem;
  line-height: 1;
}
.pi-status-label {
  font-weight: 600;
  color: var(--text);
}
.pi-status-host {
  color: var(--text-muted);
}
.pi-status-time {
  color: var(--text-muted);
}

/* ─── Airplanes tab ──────────────────────────────────────── */

#tab-airplanes {
  display: none;                 /* id specificity would override .tab-panel's none */
  flex-direction: column;
  height: calc(100vh - 56px);
  padding: 0;
  overflow: hidden;
}
#tab-airplanes.tab-active {
  display: flex;
}

.ap-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ap-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ap-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.ap-mode-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #000;
  background: var(--accent);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.ap-date-bar {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.ap-date-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ap-date-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.ap-date-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* LIVE button — an old-school "ON AIR" light. Dim but clearly clickable when
   viewing history; bright neon green with a pulsing glow when actually live. */
#ap-btn-live {
  color: #57e08a;
  border-color: rgba(87, 224, 138, 0.5);
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.6;
  transition: opacity 0.15s, box-shadow 0.2s, background 0.2s;
}
#ap-btn-live:hover {
  opacity: 1;
  color: #6effa0;
  border-color: #57e08a;
  background: rgba(87, 224, 138, 0.12);
}
#ap-btn-live.active {
  opacity: 1;
  color: #052e16;
  background: #34e07a;
  border-color: #6effa0;
  text-shadow: none;
  animation: ap-live-glow 1.5s ease-in-out infinite;
}
@keyframes ap-live-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(52, 224, 122, 0.7), 0 0 10px rgba(52, 224, 122, 0.45); }
  50%      { box-shadow: 0 0 8px rgba(52, 224, 122, 1),   0 0 22px rgba(52, 224, 122, 0.8); }
}
/* LIVE badge glows in sync with the button when live. */
.ap-mode-badge.live {
  background: #34e07a; color: #052e16;
  animation: ap-live-glow 1.5s ease-in-out infinite;
}

.ap-info {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  align-self: center;
  background: none;
  border: none;
  padding: 0 0.2rem;
}
.ap-info:hover { color: var(--accent); }
.ap-alt-info {
  position: fixed;
  z-index: 3000;
  display: none;
  width: 240px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ── Low-flight status box ── */
.ap-lowbox {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--border);
  background: var(--bg-card);
}
.ap-lowbox-head {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ap-lowbox-head::-webkit-details-marker { display: none; }
.ap-lowbox-icon { font-size: 0.95rem; }
.ap-lowbox-hint {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ap-lowbox-wrap { max-height: 220px; overflow: auto; border-top: 1px solid var(--border); }
.ap-lowbox-clear { border-left-color: #48bb78; }
.ap-lowbox-clear .ap-lowbox-head { color: #48bb78; }
.ap-lowbox-warn  { border-left-color: #ecc94b; background: rgba(236, 201, 75, 0.06); }
.ap-lowbox-warn  .ap-lowbox-head { color: #ecc94b; }
.ap-lowbox-alert { border-left-color: #f56565; background: rgba(245, 101, 101, 0.08); }
.ap-lowbox-alert .ap-lowbox-head { color: #f56565; }

/* Stage holds map+timeline (row 1) and grid (row 2, wrapped) via flex-wrap.
   The mobile media query re-flows these into map-on-top, timeline+grid below. */
.ap-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.ap-maparea {
  position: relative;
  order: 1;
  flex: 1 1 300px;
  min-width: 0;
  height: calc(100% - 580px);
  min-height: 180px;
}
#ap-map { width: 100%; height: 100%; }
/* Map controls: equal-size buttons top-right of any Airplane map (wrap on narrow) */
.ap-map-ctrls { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ap-map-ctrl {
  min-width: 80px; text-align: center;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.3rem 0.5rem; font-family: var(--font-mono);
  font-size: 0.72rem; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,0.45); white-space: nowrap;
}
.ap-map-ctrl:hover { border-color: var(--accent); color: var(--accent); }
.ap-map-ctrl.on { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }
.ap-ctrl-panel {
  position: absolute; top: 46px; right: 10px; z-index: 1000; width: 210px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5); font-family: var(--font-mono); overflow: hidden;
}
.ap-county-head { padding: 0.4rem 0.6rem; font-size: 0.72rem; font-weight: 700; color: var(--accent); border-bottom: 1px solid var(--border); }
.ap-county-scroll { max-height: 46vh; overflow-y: auto; padding: 0.3rem 0; }
.ap-county-state { padding: 0.35rem 0.6rem 0.15rem; font-size: 0.72rem; font-weight: 700; color: var(--text); border-top: 1px solid var(--border); margin-top: 0.15rem; }
.ap-county-state:first-child { border-top: none; margin-top: 0; }
.ap-county-state label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.ap-county-item { display: flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.6rem 0.12rem 1.3rem; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; }
.ap-county-item:hover { background: rgba(0,229,255,0.08); color: var(--text); }
.ap-county-item.hw { color: #ffd400; font-weight: 700; }
.ap-county-empty { padding: 0.6rem; font-size: 0.72rem; color: var(--text-muted); }
.ap-range-badge {
  position: absolute; bottom: 12px; left: 12px; z-index: 1000;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--accent);
  border-radius: 5px; padding: 0.3rem 0.6rem; font-family: var(--font-mono);
  font-size: 0.74rem; box-shadow: 0 0 8px rgba(0,229,255,0.35); pointer-events: none;
}
.ap-range-badge b { color: var(--accent); font-size: 0.85rem; }
/* Watch list */
.ap-watch-add { display: flex; gap: 4px; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.ap-watch-add input { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; }
.ap-watch-add button { background: var(--accent); color: var(--bg); border: none; border-radius: 4px; padding: 0.2rem 0.5rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; }
.ap-watch-item { justify-content: space-between; color: #ffd400 !important; font-weight: 700; }
.ap-watch-x { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 0 0.2rem; }
.ap-watch-x:hover { color: #f56565; }
.ap-watch-ring { animation: ap-watch-pulse 1.2s ease-in-out infinite; }
@keyframes ap-watch-pulse { 0%,100% { stroke-opacity: 0.95; } 50% { stroke-opacity: 0.3; } }
.leaflet-tooltip.ap-watch-lbl { background: #ffd400; color: #000; border: none; font-weight: 700; font-family: var(--font-mono); font-size: 0.7rem; }
.ap-watch-alert {
  position: absolute; top: 52px; left: 12px; z-index: 1000;
  background: #ffd400; color: #000; border-radius: 5px; padding: 0.3rem 0.6rem;
  font-family: var(--font-mono); font-size: 0.74rem; box-shadow: 0 0 10px rgba(255,212,0,0.5);
  pointer-events: none; max-width: 60%;
}
.ap-watch-alert b { font-weight: 700; }
.leaflet-tooltip.county-lbl { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 0.68rem; }
.leaflet-tooltip.county-lbl-howard {
  background: transparent; border: none; box-shadow: none;
  color: #ffd400; font-weight: 700; font-size: 0.9rem;
  text-shadow: 0 0 4px #000, 0 0 5px #000, 0 0 6px #000;
}
/* Aircraft photos (Planespotters) in the popup + Regulars drop-down */
.ap-photo { margin: 0 0 0.4rem; text-align: center; line-height: 0; }
.ap-photo img { width: 100%; border-radius: 4px; display: block; }
.ap-photo-credit { display: block; line-height: 1.2; font-size: 0.58rem; color: var(--text-muted); margin-top: 2px; }
.reg-photo { flex-shrink: 0; width: 100%; margin: 0.1rem 0 0.4rem; }
.reg-photo img { max-height: 120px; object-fit: cover; }
.ap-legend {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  z-index: 500;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  opacity: 0.92;
}
.ap-legend-title { color: var(--text); font-weight: 600; }
.ap-legend span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.ap-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* ── Vertical timeline (right of map) ── */
.ap-timeline {
  position: relative;
  order: 2;
  width: 104px;
  flex-shrink: 0;
  height: calc(100% - 580px);
  min-height: 180px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
  overflow: hidden;
}
.ap-timeline canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-timeline-label {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: 5px 2px 8px; text-align: center; pointer-events: none;
  background: linear-gradient(var(--bg-card) 55%, transparent);
  font-family: var(--font-mono);
}
.tl-live  { color: #68d391; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; }
.tl-now   { color: var(--text); font-size: 0.78rem; }
.tl-date  { color: var(--text-muted); font-size: 0.6rem; }
.tl-clock { color: var(--accent); font-size: 0.82rem; font-weight: 700; }

/* Popup when a timeline observation dot is clicked */
.ap-tl-popup {
  position: fixed;
  z-index: 3000;
  display: none;
  width: 190px;
  background: #fff;
  color: #1a202c;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  font-size: 0.78rem;
}
.ap-tl-popup .ap-popup-tbl { width: 100%; margin-top: 0.3rem; }
.ap-tl-popup-x {
  position: absolute; top: 2px; right: 4px;
  background: none; border: none; font-size: 1rem; cursor: pointer; color: #718096;
}

/* ── Flights grid (below map) ── */
.ap-flights {
  order: 3;
  flex-basis: 100%;
  width: 100%;
  height: 580px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.ap-flights-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap;
  padding: 0.35rem 0.8rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ap-flights-title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.ap-flights-filters {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
}
.ap-flights-filters label,
.ap-f-group { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.ap-flights-filters input,
.ap-flights-filters select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.15rem 0.35rem; font-family: var(--font-mono); font-size: 0.7rem;
}
.ap-flights-filters input[type="number"] { width: 62px; }
.ap-flights-filters input[type="text"] { width: 84px; }
.ap-flights-filters input:focus { outline: none; border-color: var(--accent); }
#ap-f-clear {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.15rem 0.5rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem;
}
#ap-f-clear:hover { color: var(--accent); border-color: var(--accent); }
.ap-flights-wrap { overflow: auto; flex: 1 1 auto; min-height: 0; }
.ap-flights-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.ap-flights-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); color: var(--text);
  text-align: left; padding: 0.4rem 0.7rem; cursor: pointer; white-space: nowrap;
  border-bottom: 1px solid var(--border); user-select: none;
  font-family: var(--font-mono); font-weight: 600;
}
.ap-flights-table th:hover { color: var(--accent); }
.ap-flights-table td {
  padding: 0.3rem 0.7rem; border-bottom: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap; font-family: var(--font-mono);
}
.ap-flights-table tbody tr:hover { background: rgba(0, 229, 255, 0.06); }
.ap-grid-tail { color: var(--accent); font-weight: 600; }
.ap-grid-flight { color: var(--text); font-weight: 600; }
.ap-grid-airline { color: var(--text-muted); font-size: 0.66rem; margin-left: 0.35rem; }
.ap-grid-noflight { color: var(--text-muted); opacity: 0.5; }
/* Owner is the one variable-length field — make it the flexible column that soaks up
   the leftover width and wraps long names instead of truncating (so nothing is cut
   off and the row doesn't leave dead horizontal space). */
.ap-grid-ownercell { width: 100%; white-space: normal; }
.ap-grid-owner { color: var(--text); font-size: 0.8rem; overflow-wrap: anywhere; }

/* Flight-number search box + result banner */
.ap-f-flightsearch { gap: 0.2rem; }
#ap-f-flight-btn {
  background: var(--accent); color: #04202a; border: none; border-radius: 4px;
  padding: 0.18rem 0.5rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; white-space: nowrap;
}
#ap-f-flight-btn:hover { filter: brightness(1.1); }
.ap-flight-result {
  flex-shrink: 0; padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-size: 0.78rem;
  border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
}
.ap-flight-result.loading { color: var(--text-muted); }
.ap-flight-result.hit  { flex-direction: column; align-items: stretch; background: rgba(72, 187, 120, 0.08); border-left: 4px solid #48bb78; }
.ap-flight-result.miss { background: rgba(245, 101, 101, 0.08); border-left: 4px solid #f56565; justify-content: space-between; }
.ap-flight-hit-head { color: #48bb78; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; }
.ap-flight-hit-head button, .ap-flight-result.miss button {
  margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 4px; cursor: pointer; padding: 0 0.4rem; font-size: 0.8rem;
}
.ap-flight-hit { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--text); }

/* ── Airplanes sub-tabs (Overview | Notable) ── */
.ap-subheader { flex-shrink: 0; }
.apsub-panel { display: none; }
#apsub-overview.apsub-active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Notable & History mirror the Overview: full-width map on top, content below. */
#apsub-notable.apsub-active,
#apsub-history.apsub-active,
#apsub-heatmap.apsub-active,
#apsub-regulars.apsub-active { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ── Regulars sub-tab ── */
.reg-controls { flex-shrink: 0; }
.reg-tablewrap { overflow: auto; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--border); }
.reg-tablewrap .ap-flights-table th { position: sticky; top: 0; z-index: 1; }
.reg-row { cursor: pointer; }
.reg-cadence {
  font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}
.reg-cadence.daily { color: #48bb78; border-color: #48bb78; }
.reg-cadence.several { color: #ecc94b; border-color: #ecc94b; }
.reg-cadence.weekly { color: #63b3ed; border-color: #63b3ed; }
.reg-dow { display: inline-flex; gap: 2px; vertical-align: middle; }
.reg-dow-cell {
  width: 7px; height: 14px; border-radius: 1px; display: inline-block;
  background: var(--accent);
}
.reg-dow-cell.wk { background: var(--text-muted); }   /* weekend cells */
/* Owner: cap width + wrap to 2 lines so long names show without dominating the row. */
.reg-ownercell { max-width: 210px; }
.reg-owner {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere;
  color: var(--text); font-size: 0.78rem; line-height: 1.18;
}
/* Route-vs-weather drop-down row */
.reg-row.open { background: rgba(0, 229, 255, 0.10); }
.reg-detail > td { padding: 0 !important; background: var(--bg); }
.reg-detail-inner { display: flex; height: 400px; }
.reg-map { flex: 1 1 auto; min-width: 0; height: 100%; }
.reg-detail-side {
  flex: 0 0 430px; padding: 0.5rem 0.7rem; overflow: hidden;
  border-left: 1px solid var(--border); display: flex; flex-direction: column; align-items: center;
}
.reg-detail-title { flex-shrink: 0; font-family: var(--font-mono); color: var(--accent); font-size: 0.85rem; margin-bottom: 0.2rem; text-align: center; }
.reg-windrose { width: 100%; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; color: var(--text-muted); font-size: 0.75rem; }
.reg-rose-svg { width: 100%; height: 100%; display: block; }
.rose-ring { fill: none; stroke: var(--border); }
.rose-hub { fill: var(--bg-card); stroke: var(--border); }
.rose-total { fill: var(--text); font: 700 15px var(--font-mono, monospace); }
.rose-unit { fill: var(--text-muted); font: 7px var(--font-mono, monospace); letter-spacing: 0.05em; }
.rose-dir { fill: var(--text); font: 700 15px var(--font-mono, monospace); }
.rose-arm-label { font: 700 11px var(--font-mono, monospace); }
.reg-rose-hint { flex-shrink: 0; font-size: 0.64rem; color: var(--text-muted); text-align: center; margin-top: 0.25rem; line-height: 1.25; white-space: normal; }
@media (max-width: 720px) {
  .reg-detail-inner { flex-direction: column; height: 460px; }
  .reg-detail-side { flex: 0 0 auto; border-left: none; border-top: 1px solid var(--border); }
}
/* History search — a clean, labeled form card */
.aphist-form {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.8rem 0.9rem; margin-bottom: 0.8rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.aphist-form-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.aphist-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0.6rem 0.9rem;
}
.aphist-field { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.aphist-field-inline { flex-direction: row; align-items: center; gap: 0.45rem; }
.aphist-field-inline input { width: auto; }
.aphist-flabel {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
}
.aphist-form input,
.aphist-form select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 0.32rem 0.45rem; font-family: var(--font-mono); font-size: 0.78rem;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.aphist-form input:focus, .aphist-form select:focus { outline: none; border-color: var(--accent); }
.aphist-dt { display: flex; align-items: center; gap: 0.3rem; }
.aphist-dt input { flex: 1 1 0; }
.aphist-dash { color: var(--text-muted); }
.aphist-actions { gap: 0.5rem; }
.ap-btn-primary {
  background: var(--accent); color: #04202a; border-color: var(--accent); font-weight: 700;
}
.ap-btn-primary:hover { filter: brightness(1.1); color: #04202a; }
.aphist-info { margin-left: auto; color: var(--text); font-weight: 600; font-size: 0.72rem; }
.aphist-gridwrap { margin-top: 0.7rem; overflow: auto; max-height: 52vh; border: 1px solid var(--border); border-radius: 6px; }
.aphist-gridwrap .ap-flights-table th { top: 0; }
.fam-maparea { position: relative; flex: 0 0 46vh; min-height: 280px; }
#fam-map, #aphist-map, #aphm-map { width: 100%; height: 100%; }
.aphm-oh-form { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.aphm-oh-row { cursor: pointer; }
.aphm-oh-row:hover { background: var(--surface-hover, rgba(255,255,255,0.06)); }
/* Content area below the Notable/History maps — matches the Overview grid area
   (same card background + top border) so all three sub-tabs read as one design. */
.fam-list {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.8rem 1.2rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

.fam-alert {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text);
}
.fam-alert b { color: var(--accent); }
.fam-summary { font-family: var(--font-mono); font-size: 1rem; color: var(--text); margin-bottom: 0.2rem; }
.fam-summary b { color: var(--accent); font-size: 1.3rem; }
.fam-note-line { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 1rem; max-width: 720px; }
.fam-tablewrap { overflow-x: auto; }
.fam-table { max-width: 900px; }
.fam-table th { position: sticky; top: 0; z-index: 1; }   /* same as Overview grid */
.fam-name { font-weight: 600; color: var(--text); }
.fam-note { color: var(--text-muted); font-size: 0.72rem; }
.fam-row-seen td { background: rgba(72, 187, 120, 0.06); }
.fam-seen { color: #48bb78; font-weight: 700; }
.fam-range { color: var(--text-muted); font-size: 0.72rem; }
.fam-no { color: var(--text-muted); }
.fam-unresolved { color: var(--text-muted); opacity: 0.6; font-style: italic; }
.fam-row-seen { cursor: pointer; }
.fam-row-seen:hover td { background: rgba(0, 229, 255, 0.06); }
.fam-row-seen.open td { background: rgba(0, 229, 255, 0.12); }

/* Notable inline detail: days-seen list (paths plot on the big map above) */
.fam-detail > td { padding: 0 !important; background: var(--bg); }
.fam-detail-box {
  padding: 0.7rem 0.9rem;
  border-bottom: 2px solid var(--accent);
}
.fam-map-spinner {
  position: absolute; inset: 0; z-index: 600; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4); pointer-events: none;
}
.fam-maparea.loading .fam-map-spinner { display: flex; }
.fam-map-note {
  /* Sits above the transport controls (bottom:10px) so the two never overlap. */
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 601;
  background: rgba(0,0,0,0.78); color: #fff; padding: 0.3rem 0.7rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; pointer-events: none;
  white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.fam-map-spinner span {
  display: inline-block; font-size: 3rem;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
  animation: ap-plane-spin 0.9s linear infinite;
}
@keyframes ap-plane-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.fam-detail-title { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--text); }
.fam-detail-tail { color: var(--accent); }
.fam-detail-type { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; margin-left: 0.5rem; }
.fam-days-list {
  list-style: disc; padding: 0 0.3rem 0 1.3rem; margin: 0.6rem 0 0;
  max-height: 300px; overflow-y: auto; overflow-x: hidden;
  columns: 4 190px; column-gap: 1.6rem;
  font-family: var(--font-mono);
}
.fam-days-list li { margin: 0.2rem 0; font-size: 0.78rem; color: var(--text-muted); overflow-wrap: anywhere; break-inside: avoid; }
.fam-days-sum { list-style: none; margin-left: -1.3rem; column-span: all; }
.fam-days-sum { color: var(--text); font-weight: 600; }
.fam-day-item { cursor: pointer; }
.fam-day-item:hover, .fam-day-item.sel { color: var(--accent); }
.fam-day-item.sel { font-weight: 600; }
.fam-day-fixes { color: var(--text-muted); font-size: 0.68rem; }

.ap-grid-more { padding: 0.6rem; text-align: center; display: flex; gap: 0.6rem; justify-content: center; }
.ap-grid-more-btn {
  background: var(--bg-card); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 6px;
  padding: 0.4rem 1.2rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600;
}
.ap-grid-more-btn:hover { background: var(--accent); color: #04202a; }
.ap-grid-more-btn span { color: var(--text-muted); font-weight: 400; margin-left: 0.3rem; }
.ap-grid-more-btn:hover span { color: #04202a; }
.ap-grid-row { cursor: pointer; }
.ap-grid-row:hover td { background: rgba(0, 229, 255, 0.06); }
.ap-grid-row.open td { background: rgba(0, 229, 255, 0.12); }

/* Detail dropdown under a clicked flight row */
.ap-grid-detail > td { padding: 0 !important; background: var(--bg); white-space: normal; }
.ap-detail {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0.7rem; padding: 0.8rem 0.9rem;
  border-bottom: 2px solid var(--accent);
}
.ap-detail-stats { display: flex; flex-direction: column; gap: 0.7rem; }
/* Labeled cells wrap in a flex row (fixed-basis so they never overlap — a CSS
   grid with 1fr columns collapses inside an auto-width table cell). Reads like an
   organized sub-grid: label above value, evenly spaced, wrapping as needed. */
.ap-stat-group {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
}
.ap-detail-stats .ap-stat-group:last-child { border-bottom: none; padding-bottom: 0; }
.ap-stat { display: flex; flex-direction: column; gap: 0.12rem; flex: 0 1 auto; min-width: 90px; }
.ap-stat-wide { flex-basis: 100%; }
.ap-stat-k {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
}
.ap-stat-v { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.ap-stat-v em { color: var(--text-muted); font-style: normal; font-weight: 400; }
.ap-detail-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ap-detail-btn {
  background: var(--accent); color: #04202a; border: none; border-radius: 5px;
  padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.ap-detail-btn:hover { filter: brightness(1.1); }
.ap-detail-seen { font-size: 0.76rem; color: var(--text-muted); font-family: var(--font-mono); }
.ap-detail-seen .aq-out-badge { padding: 0.02rem 0.35rem; }

/* Focus banner over the map when a single flight is sent to it */
.ap-focus-banner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 500; display: flex; align-items: center; gap: 0.7rem;
  background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px;
  padding: 0.35rem 0.7rem; font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.ap-focus-banner button {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 5px; padding: 0.1rem 0.5rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem;
}
#ap-f-today {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.15rem 0.5rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem;
}
#ap-f-today:hover { color: var(--accent); border-color: var(--accent); }

/* Airplanes on mobile — placed AFTER the base rules so these overrides win.
   Stack the stage as a column: big map, a thin timeline, then the grid. */
@media (max-width: 600px) {
  /* Compact the site header so it doesn't eat the screen; hide the subtitle. */
  header { padding: 0.45rem 0.8rem; }
  .site-subtitle { display: none; }
  .site-title { font-size: 1.15rem; }

  /* Fill the viewport below the (now compact) header, edge to edge. */
  #tab-airplanes { height: calc(100dvh - 88px); }
  .ap-header { padding: 0.3rem 0.6rem; gap: 0.4rem; }
  .ap-header .ap-count { font-size: 0.7rem; }

  /* Airplanes sub-tabs (Overview | Notable | History) — full-width segmented bar
     at the top of the tab so they're always visible and easy to tap on a phone
     (the subtitle is hidden, so the old right-aligned mini-bar was easy to miss). */
  .ap-subheader { padding: 0.3rem 0.5rem; margin-bottom: 0; flex-shrink: 0; }
  .ap-subheader .subtab-bar { margin-left: 0; width: 100%; gap: 0.3rem; }
  .ap-subheader .subtab-btn { flex: 1 1 0; padding: 0.45rem 0.3rem; font-size: 0.7rem; text-align: center; }

  .ap-stage { flex-direction: column; flex-wrap: nowrap; }
  .ap-maparea {
    order: 1; width: 100%; flex: 1 1 auto;   /* map grows to fill remaining space */
    height: auto; min-height: 34vh;
  }
  .ap-timeline {
    order: 2; width: 100%; flex: 0 0 30px;   /* thin fixed strip */
    height: 30px; min-height: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: ew-resize;
  }
  .ap-timeline-label {
    left: auto; right: 4px; top: 0; width: auto;
    background: none; text-align: right; padding: 0; line-height: 1;
  }
  .ap-timeline-label > div { display: inline-block; margin-left: 5px; font-size: 0.54rem; }
  .ap-flights {
    order: 3; width: 100%; flex: 0 0 29vh;   /* grid ~20% smaller so the map grows */
    height: 29vh; min-height: 0; border-top: none;
  }
  /* Keep the filter row on a single scrollable line so it can't crush the table. */
  .ap-flights-bar { flex-wrap: nowrap; overflow-x: auto; align-items: center; }
  .ap-flights-filters { flex-wrap: nowrap; font-size: 0.62rem; gap: 0.35rem; }
  .ap-flights-title { white-space: nowrap; }

  /* Compact low-flight warning box — ~2 lines, no space-hungry hint. */
  .ap-lowbox-head { font-size: 0.66rem; padding: 0.3rem 0.6rem; line-height: 1.3; }
  .ap-lowbox-hint { display: none; }
  .ap-lowbox-wrap { max-height: 28vh; }

  /* ── Nothing should push the page sideways: contain overflow globally ── */
  html, body { overflow-x: hidden; }

  /* ── Notable & History: vertical phone layout (map on top, list scrolls) ── */
  .fam-maparea { flex: 0 0 44vh; min-height: 220px; }
  .fam-list { padding: 0.6rem 0.7rem; }
  .fam-summary { font-size: 0.85rem; }
  .fam-summary b { font-size: 1.05rem; }
  .fam-note-line { font-size: 0.66rem; margin-bottom: 0.7rem; }
  .fam-alert { font-size: 0.78rem; padding: 0.5rem 0.7rem; }
  /* Tables never widen the page — they scroll inside their own wrapper. */
  .fam-tablewrap, .aphist-gridwrap { max-width: 100%; overflow-x: auto; }
  .fam-table, #aphist-table { font-size: 0.72rem; min-width: 0; }
  .fam-days-list { columns: 2 130px; }

  /* History form: single-column fields on a phone; info drops below the buttons. */
  .aphist-form { padding: 0.6rem; gap: 0.6rem; }
  .aphist-form-grid { grid-template-columns: 1fr 1fr; }
  .aphist-form .ap-date-btn { padding: 0.3rem 0.55rem; }
  .aphist-info { margin-left: 0; flex-basis: 100%; }
  .aphist-gridwrap { max-height: 40vh; }

  /* ── Flight replay controls scaled for a phone-width map ── */
  .rt-strip { width: 52px; }
  .rt-controls {
    bottom: 6px; padding: 3px 5px; gap: 2px; flex-wrap: wrap;
    max-width: calc(100% - 64px); justify-content: center;
  }
  .rt-controls button { padding: 2px 5px; font-size: 0.78rem; }
  .rt-clock { min-width: 0; font-size: 0.66rem; }
  .rt-tele { right: 58px; top: 6px; min-width: 118px; max-width: 132px; padding: 4px 6px; }
  .rt-tele-row { font-size: 0.62rem; }
  .rt-tele-row b { font-size: 0.72rem; min-width: 46px; }

  /* ── Outdoor AQI box: fit the card, no sideways scroll ── */
  .aq-out-head { flex-wrap: wrap; }
  .aq-out-compare { overflow-x: visible; }
  .aq-out-table { table-layout: fixed; width: 100%; }
  .aq-out-table td { word-break: break-word; }
  .aq-out-delta, .aq-out-table td:last-child { display: none; }  /* drop the Δ column */
  .aq-out-table td:first-child { width: 38%; }
}

/* Expanded grid (desktop): grid grows to fit rows and the page scrolls, instead
   of a fixed-height scrolling box. Map/timeline keep a viewport-sized slice on top. */
@media (min-width: 601px) {
  #tab-airplanes.grid-expanded { height: auto; overflow: visible; }
  #tab-airplanes.grid-expanded .ap-stage { flex: 0 0 auto; }
  #tab-airplanes.grid-expanded .ap-maparea,
  #tab-airplanes.grid-expanded .ap-timeline { height: 60vh; min-height: 0; }
  #tab-airplanes.grid-expanded .ap-flights { flex: 0 0 auto; height: auto; }
  #tab-airplanes.grid-expanded .ap-flights-wrap { overflow: visible; max-height: none; }
  #tab-airplanes.grid-expanded .ap-flights-table th { position: static; }
}

/* Tablet: the desktop layout reserves a fixed 580px for the grid, which leaves the
   map too small on a tablet's shorter screen. Shrink the grid so the map fills more. */
@media (min-width: 601px) and (max-width: 1024px) {
  #tab-airplanes:not(.grid-expanded) .ap-maparea,
  #tab-airplanes:not(.grid-expanded) .ap-timeline { height: calc(100% - 300px); }
  #tab-airplanes:not(.grid-expanded) .ap-flights { height: 300px; }
  /* Notable & History maps take more of the tablet too. */
  .fam-maparea { flex: 0 0 58vh; }
}

/* Override Leaflet for dark themes */
body.theme-tron .leaflet-tile,
body.theme-dark .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9);
}
body.theme-tron .leaflet-container,
body.theme-dark .leaflet-container {
  background: #000;
}

.ap-aircraft-icon {
  background: none !important;
  border: none !important;
}
/* Show-on-map aircraft-type filter — vertical strip centered on the left edge,
   clear of the zoom control at the top. */
.ap-typefilter {
  position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 500;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.ap-typechip-lbl {
  font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-muted);
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1px;
}
/* Hover tooltip to the right of each chip explaining the category */
.ap-typechip[data-label] { position: relative; }
.ap-typechip[data-label]:hover::after {
  content: attr(data-label);
  position: absolute; left: 118%; top: 50%; transform: translateY(-50%);
  white-space: nowrap; z-index: 700;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--accent); border-radius: 6px;
  padding: 0.2rem 0.5rem; font-family: var(--font-mono); font-size: 0.68rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); pointer-events: none;
}
.ap-typechip {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; padding: 1px 5px; font-size: 0.85rem; line-height: 1.3;
  opacity: 0.35; filter: grayscale(0.6); transition: opacity 0.12s, filter 0.12s;
}
.ap-typechip.on { opacity: 1; filter: none; border-color: var(--accent); background: rgba(0, 229, 255, 0.10); }
.ap-typechip:hover { opacity: 0.9; }
.ap-typechip-all {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; filter: none;
  color: var(--text-muted);
}

/* Non-plane category glyphs on the map (helicopter/drone/balloon/…) */
.ap-cat-emoji {
  font-size: 17px; line-height: 22px; text-align: center; width: 22px; height: 22px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

/* Category glyph + emergency badge in the grid tail cell */
.ap-grid-cat { margin-right: 0.25rem; }
.ap-grid-emg { margin-right: 0.25rem; }
.ap-detail-emg .ap-stat-k, .ap-detail-emg .ap-stat-v { color: #f56565; font-weight: 700; }

/* Emergency-squawk box (mirrors the low-flight box, always red/alarming) */
.ap-emgbox {
  flex-shrink: 0; border-bottom: 1px solid var(--border);
  border-left: 4px solid #f56565; background: rgba(245, 101, 101, 0.10);
}
.ap-emgbox-head {
  list-style: none; cursor: pointer; padding: 0.5rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; color: #f56565;
  display: flex; align-items: center; gap: 0.5rem;
  animation: ap-low-pulse 1.1s ease-in-out infinite;
}
.ap-emgbox-head::-webkit-details-marker { display: none; }
.ap-emgbox-icon { font-size: 1rem; }
.ap-emg-reason { color: #f56565; font-weight: 600; }
.ap-emg-live { color: #f56565; font-weight: 700; }

/* ── Flight replay (History focus): right-side flight timeline + transport ── */
.rt-strip {
  position: absolute; top: 0; right: 0; bottom: 0; width: 78px; z-index: 650;
  background: rgba(0, 0, 0, 0.6);
  border-left: 1px solid var(--accent);
  cursor: ns-resize;
}
.rt-strip canvas { width: 100%; height: 100%; display: block; }
.rt-controls {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 650;
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px;
  padding: 4px 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.rt-controls button {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 5px; cursor: pointer; padding: 2px 7px; font-size: 0.85rem;
}
.rt-controls button:hover { border-color: var(--accent); }
.rt-controls #rt-loop.on { background: var(--accent); border-color: var(--accent); }
.rt-controls select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; font-family: var(--font-mono); font-size: 0.72rem; padding: 2px 3px;
}
.rt-clock {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent);
  min-width: 84px; text-align: center;
}
/* Live telemetry readout — top-right, just left of the replay strip, clear of
   the bottom transport controls so nothing overlaps. */
.rt-tele {
  position: absolute; right: 88px; top: 10px; z-index: 650;
  min-width: 176px; max-width: 210px;
  background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px;
  padding: 0.5rem 0.6rem; font-family: var(--font-mono);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
/* label | value | trend — aligned columns so it reads cleanly, not compressed */
.rt-tele-row {
  display: grid; grid-template-columns: 2.6em 1fr auto; align-items: baseline;
  column-gap: 0.5rem; color: var(--text-muted); line-height: 1.7;
}
.rt-tele-row span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; color: var(--text-muted); }
.rt-tele-row b { font-size: 0.95rem; color: var(--text); font-weight: 700; }
.rt-tele-row em { font-style: normal; font-size: 0.62rem; color: var(--text-muted); text-align: right; }
.rt-tele-dim { display: block; grid-template-columns: none; font-size: 0.62rem; opacity: 0.8; margin-top: 0.15rem; }
.rt-tele-time { color: var(--accent); }

/* Numbered pass-start badge on single-flight plots (History focus / Notable) */
.ap-pass-wrap { background: none !important; border: none !important; }
.ap-pass-badge {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #04202a;
  font: 700 11px var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Low plane (<1,000 ft) — pulsing red glow: loud, right overhead */
.ap-low-alert {
  animation: ap-low-pulse 1s ease-in-out infinite;
}
@keyframes ap-low-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(245, 101, 101, 0.9)); opacity: 1; }
  50%      { filter: drop-shadow(0 0 10px rgba(245, 101, 101, 1)); opacity: 0.65; }
}
.ap-legend-pulse { animation: ap-low-pulse 1s ease-in-out infinite; }

/* Airplane popup */
.ap-popup { min-width: 120px; }
.ap-popup-nnum {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
}
.ap-popup-call {
  font-size: 0.85rem;
  color: #4a5568;
  margin-bottom: 0.2rem;
}
.ap-popup-hex {
  font-size: 0.7rem;
  color: #718096;
  font-family: monospace;
}
.ap-popup-owner {
  font-size: 0.78rem; font-weight: 600; color: #2d3748;
  margin: 0.15rem 0; line-height: 1.25;
}
.ap-popup-idlbl {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a0aec0;
  vertical-align: middle;
}
.ap-popup-uat {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  background: #e6fffa;
  color: #234e52;
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-bottom: 0.25rem;
}
.ap-popup-tbl {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  border-collapse: collapse;
  width: 100%;
}
.ap-popup-tbl td {
  padding: 0.1rem 0.4rem 0.1rem 0;
}
.ap-popup-tbl td:first-child {
  color: #718096;
  white-space: nowrap;
}