/* ── SkyWatch — main.css ── */
/* Single source of truth for all shared styles.                     */
/* Do NOT redefine these components in page <style> blocks.          */
/* Phase 0 additions marked ── NEW ──                                */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@400;600;700;800&display=swap');

/* ── Theme variables ─────────────────────────────────────────────────────── */
:root {
  /* Light mode (default) */
  --bg:           #f2f4f7;
  --bg2:          #ffffff;
  --bg3:          #e8ecf2;
  --panel:        #ffffff;
  --border:       #d4dae6;
  --accent:       #0052cc;
  --accent-data:  #2563eb;  /* data value blue, distinct from interactive */
  --accent-glow:  rgba(0,82,204,0.15);
  --accent2:      #e8f0ff;
  --text:         #0d1b2e;
  --text-dim:     #64748b;
  --text-faint:   #94a3b8;

  /* Category colours */
  --military:     #dc2626;
  --police:       #7c3aed;
  --sar:          #059669;
  --medical:      #ea580c;
  --charter:      #0891b2;
  --cargo:        #d97706;
  --bizjet:       #9333ea;
  --scheduled:    #0052cc;
  --private:      #64748b;
  --transit:      #64748b;
  --offshore:     #0e7490;   /* Offshore helicopter — deep teal */
  --contractor:   #991b1b;   /* Military contractor — dark red, distinct from military */

  /* Semantic colours */
  --success:      #059669;
  --warning:      #d97706;
  --danger:       #dc2626;
  --text-on-accent: #ffffff;  /* sanctioned text-on-accent-background token — see SKYWATCH_DESIGN_SYSTEM.md */

  /* Site identity */
  --color-site-heliport: #0d9488;
  --color-site-egnv:     #db2777;

  /* Time-of-day colours */
  --color-tod-night: #4338ca;
  --color-tod-dawn:  #f97316;
  --color-tod-day:   #3b82f6;
  --color-tod-dusk:  #8b5cf6;

  /* Altitude band colours — MAP track/marker gradient (skywatch.js altColour()) */
  --color-alt-ground:   #4fc3f7;
  --color-alt-low:      #66bb6a;
  --color-alt-midlow:   #ffee58;
  --color-alt-mid:      #ffa726;
  --color-alt-high:     #ef5350;
  --color-alt-veryhigh: #ab47bc;

  /* Notable / emergency aliases */
  --color-notable:   var(--warning);
  --color-emergency: var(--danger);

  /* MAP popup context aliases (skywatch.js buildPopup()) */
  --color-orbiting:    var(--danger);
  --color-airport-ctx: var(--charter);

  /* MAP-2 multi-aircraft comparison chart — categorical series, fixed
     order, validated (dataviz skill) against --panel #ffffff: CVD
     adjacent dE 24.2, 3 slots (2/3/7) need visible labels (relief band,
     <3:1 contrast) — satisfied by the comparison legend always pairing
     a swatch with the aircraft's callsign text. Not reused for anything
     category/status-semantic — dedicated series-identity slots only. */
  --color-cmp-1: #2a78d6;
  --color-cmp-2: #1baf7a;
  --color-cmp-3: #eda100;
  --color-cmp-4: #008300;
  --color-cmp-5: #4a3aa7;
  --color-cmp-6: #e34948;
  --color-cmp-7: #e87ba4;
  --color-cmp-8: #eb6834;

  --mono:         'JetBrains Mono', monospace;
  --sans:         'Syne', sans-serif;
  --radius:       8px;
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.12);
}

[data-theme="dark"] {
  --bg:           #080d14;
  --bg2:          #0f1824;
  --bg3:          #162030;
  --panel:        #0f1824;
  --border:       #1e3050;
  --accent:       #3b82f6;
  --accent-data:  #60a5fa;  /* data value blue, lighter for dark theme */
  --accent-glow:  rgba(59,130,246,0.15);
  --accent2:      #0f2050;
  --text:         #e2eaf4;
  --text-dim:     #7a9ab8;
  --text-faint:   #3a5474;

  /* Category colours */
  --military:     #ef4444;
  --police:       #a78bfa;
  --sar:          #34d399;
  --medical:      #fb923c;
  --charter:      #22d3ee;
  --cargo:        #fbbf24;
  --bizjet:       #c084fc;
  --scheduled:    #3b82f6;
  --private:      #94a3b8;
  --transit:      #94a3b8;
  --offshore:     #22d3ee;   /* Offshore helicopter — bright teal in dark mode */
  --contractor:   #fca5a5;   /* Military contractor — light red in dark mode */

  /* Semantic colours */
  --success:      #34d399;
  --warning:      #fbbf24;
  --danger:       #ef4444;
  --text-on-accent: #ffffff;  /* same value as light theme today — kept separate so it CAN diverge */

  /* Site identity */
  --color-site-heliport: #2dd4bf;
  --color-site-egnv:     #f472b6;

  /* Time-of-day colours */
  --color-tod-night: #818cf8;
  --color-tod-dawn:  #fb923c;
  --color-tod-day:   #60a5fa;
  --color-tod-dusk:  #a78bfa;

  /* MAP-2 comparison chart — re-validated against --panel #0f1824
     (dark surface); not the same hex values as :root, contrast against
     a dark panel needs different steps than against white. */
  --color-cmp-1: #3987e5;
  --color-cmp-2: #199e70;
  --color-cmp-3: #c98500;
  --color-cmp-4: #008300;
  --color-cmp-5: #9085e9;
  --color-cmp-6: #e66767;
  --color-cmp-7: #d55181;
  --color-cmp-8: #d95926;

  --shadow:       0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.4);
}

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

html { font-size: 14px; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  transition: background .2s, color .2s;
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.nav {
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 2px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.nav-brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-brand::before {
  content: '◈';
  font-size: 16px;
}

.nav-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}

.nav a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
  white-space: nowrap;
}

.nav a:hover { color: var(--text); background: var(--bg3); }
.nav a.active {
  color: var(--accent);
  background: var(--accent2);
}

.nav-spacer { flex: 1; }

.nav-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 6px 8px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}
.nav-icon-btn:hover { color: var(--text); background: var(--bg3); }

.nav-icon-btn.nav-settings { font-size: 16px; }
.nav-icon-btn.nav-settings.active {
  color: var(--accent);
  background: var(--accent2);
}

.nav-clock {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
  min-width: 72px;
  text-align: right;
}

/* Links dropdown */
.nav-links-wrap { position: relative; }

.links-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 220px;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  display: none;
}
.links-dropdown.open { display: block; }

.links-dropdown-header {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 6px 14px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.links-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  text-decoration: none;
  transition: background .1s, color .1s;
}
.links-dropdown a:hover { background: var(--bg3); color: var(--accent); }
.links-dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Page layout ─────────────────────────────────────────────────────────── */
.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px;
}
.page-full {
  width: 100%;
  padding: 0;
  margin: 0;
}

.page-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

.page-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.page-title span {
  color: var(--text);
  font-size: 20px;
  letter-spacing: 0;
  font-family: var(--sans);
  font-weight: 800;
  margin-left: 8px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.card-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}

/* ── Stat blocks ─────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.stat-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.stat-value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.stat-unit {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 4px;
}

.stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.btn:hover { background: var(--bg2); color: var(--text); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { opacity: .9; }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { opacity: .9; }

.btn-sm {
  font-size: 9px;
  padding: 4px 10px;
  letter-spacing: .8px;
}

.btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.btn:disabled:hover { background: var(--bg3); color: var(--text-dim); }

/* ── Filter pills ─────────────────────────────────────────────────────────── */
.pill-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
  display: inline-block;
}
.pill:hover { background: var(--bg2); color: var(--text); }
.pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pill:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.pill:disabled:hover { background: none; color: var(--text-dim); }

/* ── Segmented control ────────────────────────────────── */
.seg-group {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg {
  padding: 5px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s, color .12s;
}

.seg:last-child { border-right: none; }

.seg:hover {
  background: var(--bg2);
  color: var(--text);
}

.seg.active {
  background: var(--accent);
  color: var(--bg);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  text-decoration: none;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Patterns tab — chart placeholders, stat strips, TOD table ───────────── */
.pattern-view { display: none; }
.pattern-view.active { display: block; }

.view-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: .3px;
}
.view-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 12px;
}
.view-title-row .view-title { margin-bottom: 0; }

.chart-placeholder {
  width: 100%;
  flex-shrink: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding: 16px;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.chart-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
}
.chart-placeholder-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.chart-body {
  flex: 1;
  display: flex;
  gap: 8px;
  min-height: 0;
}
.chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 8px;
  color: var(--text-faint);
  text-align: right;
  padding: 2px 0;
  width: 24px;
  flex-shrink: 0;
}
.chart-yaxis.wide { width: 48px; }
.chart-grid {
  flex: 1;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-image:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--border) 20%, transparent) 0 1px, transparent 1px calc(100%/12)),
    repeating-linear-gradient(to top, color-mix(in srgb, var(--border) 20%, transparent) 0 1px, transparent 1px calc(100%/4));
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-placeholder-centre {
  color: var(--text-faint);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}
.chart-xaxis {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--text-faint);
  margin-top: 6px;
  margin-left: 32px;
}
.chart-xaxis.wide { margin-left: 56px; }
.chart-xaxis.spaced { justify-content: space-around; }
.chart-xaxis-top {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  margin-left: 56px;
}
.chart-note {
  font-size: 9px;
  color: var(--text-dim);
  margin: 0 0 16px;
  font-style: italic;
}

/* ── Cell-grid heatmaps (Patterns HEATMAP / CALENDAR) ─────────────────────── */
.pat-cellgrid {
  display: grid;
  gap: 2px;
  width: 100%;
  height: 100%;
}
.pat-cell {
  border-radius: 2px;
  min-width: 0;
  min-height: 0;
  cursor: default;
}

/* ── Colour scale legend (heatmaps) ───────────────────────────────────────── */
.scale-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.scale-item { display: flex; align-items: center; gap: 3px; }
.scale-swatch {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ── Summary stat strip (HOURLY) ──────────────────────────────────────────── */
.summary-strip { display: flex; gap: 10px; margin-bottom: 8px; }
.summary-card {
  flex: 1;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  min-width: 0;
}
.summary-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.summary-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-data);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mini ranked rows (HOURLY top 3) ──────────────────────────────────────── */
.split-tables { display: flex; gap: 16px; }
.mini-table-col { flex: 1; min-width: 0; }
.mini-eyebrow {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.mini-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  font-size: 10px;
}
.mini-rank { color: var(--text-faint); font-weight: 700; width: 12px; }
.mini-hour { color: var(--text-dim); width: 46px; }
.mini-val { color: var(--text-dim); min-width: 60px; }
.mini-total { color: var(--accent-data); font-weight: 700; }

/* ── Enriched metric cards (HEATMAP / CALENDAR) ───────────────────────────── */
.metric-strip { display: flex; gap: 10px; margin-bottom: 8px; }
.metric-card {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.metric-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.metric-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-data);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-context {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-trend {
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-trend.up { color: var(--success); }
.metric-trend.down { color: var(--danger); }
.metric-card.warn .metric-value,
.metric-card.warn .metric-context,
.metric-card.warn .metric-trend { color: var(--warning); }

/* ── TOD breakdown table ───────────────────────────────────────────────────── */
.tod-table { width: 100%; border-collapse: collapse; font-size: 10px; margin-top: 10px; }
.tod-table th,
.tod-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--border); }
.tod-table th:first-child,
.tod-table td:first-child { text-align: left; }
.tod-table thead th {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tod-table tbody td { color: var(--text-dim); }
.tod-table tbody td.loc { color: var(--text); font-weight: 700; }
.tod-table td.total,
.tod-table th.total { color: var(--accent-data); font-weight: 700; }
.th-dawn  { background: color-mix(in srgb, var(--color-tod-dawn) 15%, transparent); }
.th-day   { background: color-mix(in srgb, var(--color-tod-day) 15%, transparent); }
.th-dusk  { background: color-mix(in srgb, var(--color-tod-dusk) 15%, transparent); }
.th-night { background: color-mix(in srgb, var(--color-tod-night) 15%, transparent); }

/* ── Location stat cards (TOWER, Decision 26) ────────────────────────────── */
.loc-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 4px solid transparent;
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  transition: background .15s, border-color .15s, opacity .15s, filter .15s;
}
.loc-card.active {
  border-top-color: var(--accent);
  background: var(--bg3);
}
.loc-card.loc-egnt     { border-left-color: var(--accent); }
.loc-card.loc-rvi      { border-left-color: var(--medical); }
.loc-card.loc-heliport { border-left-color: var(--color-site-heliport); }
.loc-card.loc-egnv     { border-left-color: var(--color-site-egnv); }

.loc-card-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}
.loc-card-counts {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 6px;
}
.loc-card-total {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Dimmed state — none/some location cards inactive (Decision 26) */
.card-dimmed {
  opacity: 0.4;
  filter: grayscale(0.5);
}

/* ── Direction indicators (TOWER Movements Dir column) ───────────────────── */
.dir-arr { color: var(--success); }
.dir-dep { color: var(--accent); }

/* ── Site chips (TOWER Movements Site column) ────────────────────────────── */
.site-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.sc-egnt     { background: color-mix(in srgb, var(--accent) 14%, transparent);              color: var(--accent); }
.sc-rvi      { background: color-mix(in srgb, var(--medical) 14%, transparent);             color: var(--medical); }
.sc-heliport { background: color-mix(in srgb, var(--color-site-heliport) 14%, transparent); color: var(--color-site-heliport); }
.sc-egnv     { background: color-mix(in srgb, var(--color-site-egnv) 14%, transparent);     color: var(--color-site-egnv); }

/* Partial-confidence flag (TOWER-003b — coverage-edge detections < 0.90) */
.confidence-flag { color: var(--warning); cursor: help; margin-left: 3px; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
.field-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.field-row:last-child { border-bottom: none; }

.field-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  min-width: 140px;
  flex-shrink: 0;
  text-align: right;
}

.field-input {
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color .15s;
  width: 100%;
  max-width: 400px;
}
.field-input:focus {
  outline: none;
  border-color: var(--accent);
}
.field-input::placeholder { color: var(--text-faint); }
.field-input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.field-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 4px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  max-width: 400px;
}

.field-content {
  flex: 1;
  min-width: 0;
}

/* ── Category tags ───────────────────────────────────────────────────────── */
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

.cat-scheduled         { background: color-mix(in srgb, var(--scheduled) 12%, transparent);  color: var(--scheduled); }
.cat-charter           { background: color-mix(in srgb, var(--charter) 12%, transparent);    color: var(--charter); }
.cat-cargo             { background: color-mix(in srgb, var(--cargo) 12%, transparent);      color: var(--cargo); }
.cat-bizjet            { background: color-mix(in srgb, var(--bizjet) 12%, transparent);     color: var(--bizjet); }
.cat-military          { background: color-mix(in srgb, var(--military) 12%, transparent);   color: var(--military); }
.cat-police            { background: color-mix(in srgb, var(--police) 12%, transparent);     color: var(--police); }
.cat-sar               { background: color-mix(in srgb, var(--sar) 12%, transparent);        color: var(--sar); }
.cat-medical           { background: color-mix(in srgb, var(--medical) 12%, transparent);    color: var(--medical); }
.cat-private           { background: color-mix(in srgb, var(--private) 12%, transparent);    color: var(--private); }
.cat-transit           { background: color-mix(in srgb, var(--transit) 12%, transparent);    color: var(--transit); }
.cat-unknown           { background: var(--bg3); color: var(--text-faint); }
/* Offshore sub-category — distinct teal, separate from private grey */
.cat-offshore_helicopter { background: color-mix(in srgb, var(--offshore) 12%, transparent); color: var(--offshore); }
/* Military contractor — dark red, distinct from military bright red */
.cat-military_contractor { background: color-mix(in srgb, var(--contractor) 12%, transparent); color: var(--contractor); }

/* Emergency chip — filled treatment */
.cat-emergency {
  background: var(--color-emergency);
  color: var(--bg);
  border-color: var(--color-emergency);
}

/* Emergency row — border + always visible */
.row-emergency td:first-child {
  border-left: 3px solid var(--color-emergency);
}
.row-emergency .cat-tag {
  background: var(--color-emergency);
  color: var(--bg);
}

/* ── Category chips (filter controls) ────────────────────────────────────
   Interactive counterpart to .cat-tag above (display-only badge). Promoted
   from docs/skywatch-components.html. Same 12% color-mix tint formula as
   .cat-tag — inline color-mix() per modifier class, no custom-property
   indirection (a --chip-colour/--chip-tint variable pair was tried first;
   the variable wasn't resolving in scope inside color-mix(), so colours
   never rendered).
   Note: NOTABLE_CATS in skywatch.js uses the key `offshore`, not
   `offshore_helicopter` — inconsistent with the naming here and in
   .cat-offshore_helicopter above. Not corrected in this pass. */
.c-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.c-chip:hover:not(.active) { opacity: 0.8; }

.c-chip.active {
  /* active state set per-modifier — no rule here */
}

/* Modifiers — inline color-mix, no variable indirection */
.c-chip-scheduled  { background: color-mix(in srgb, var(--scheduled)  12%, transparent); color: var(--scheduled); }
.c-chip-charter    { background: color-mix(in srgb, var(--charter)     12%, transparent); color: var(--charter); }
.c-chip-cargo      { background: color-mix(in srgb, var(--cargo)       12%, transparent); color: var(--cargo); }
.c-chip-bizjet     { background: color-mix(in srgb, var(--bizjet)      12%, transparent); color: var(--bizjet); }
.c-chip-military   { background: color-mix(in srgb, var(--military)    12%, transparent); color: var(--military); }
.c-chip-police     { background: color-mix(in srgb, var(--police)      12%, transparent); color: var(--police); }
.c-chip-sar        { background: color-mix(in srgb, var(--sar)         12%, transparent); color: var(--sar); }
.c-chip-medical    { background: color-mix(in srgb, var(--medical)     12%, transparent); color: var(--medical); }
.c-chip-private    { background: color-mix(in srgb, var(--private)     12%, transparent); color: var(--private); }
.c-chip-transit    { background: color-mix(in srgb, var(--transit)     12%, transparent); color: var(--transit); }
.c-chip-unknown    { background: var(--bg3); color: var(--text-faint); }
.c-chip-offshore_helicopter  { background: color-mix(in srgb, var(--offshore)    12%, transparent); color: var(--offshore); }
.c-chip-military_contractor  { background: color-mix(in srgb, var(--contractor)  12%, transparent); color: var(--contractor); }
.c-chip-emergency  { background: color-mix(in srgb, var(--danger)      12%, transparent); color: var(--danger); }

/* Active state — filled, inverted text */
.c-chip-scheduled.active  { background: var(--scheduled);  color: var(--bg); }
.c-chip-charter.active    { background: var(--charter);    color: var(--bg); }
.c-chip-cargo.active      { background: var(--cargo);      color: var(--bg); }
.c-chip-bizjet.active     { background: var(--bizjet);     color: var(--bg); }
.c-chip-military.active   { background: var(--military);   color: var(--bg); }
.c-chip-police.active     { background: var(--police);     color: var(--bg); }
.c-chip-sar.active        { background: var(--sar);        color: var(--bg); }
.c-chip-medical.active    { background: var(--medical);    color: var(--bg); }
.c-chip-private.active    { background: var(--private);    color: var(--bg); }
.c-chip-transit.active    { background: var(--transit);    color: var(--bg); }
.c-chip-unknown.active    { background: var(--text-faint); color: var(--bg); }
.c-chip-offshore_helicopter.active { background: var(--offshore);    color: var(--bg); }
.c-chip-military_contractor.active { background: var(--contractor);  color: var(--bg); }
.c-chip-emergency.active  { background: var(--danger);     color: var(--bg); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
}

.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.data-table th.sortable:hover { color: var(--text-dim); }

.sort-indicator {
  margin-left: 4px;
  color: var(--text-faint);
  font-size: 9px;
}
.data-table th.sort-asc  .sort-indicator,
.data-table th.sort-desc .sort-indicator { color: var(--accent); }

.data-table td {
  padding: 9px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg3); }

.data-table a { color: var(--accent); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

/* ── AIRCRAFT tab — column widths ────────────────────────────────────────── */
.col-reg      { min-width: 80px; }
.col-callsign { min-width: 80px; }
.col-type     { min-width: 55px; }
.col-emitter  { min-width: 45px; }
.col-operator { min-width: 150px; }
.col-cat      { min-width: 90px; }
.col-sites    { min-width: 150px; }
.col-site     { min-width: 80px; }
.col-visits   { min-width: 55px; }
.col-balance  { min-width: 70px; }
.col-duration { min-width: 60px; }
.col-date     { min-width: 90px; }
.col-hex      { min-width: 70px; }
.col-maxalt   { min-width: 70px; }

.data-table th.col-visits, .data-table td.col-visits,
.data-table th.col-maxalt, .data-table td.col-maxalt { text-align: right; }

/* ── OPERATORS tab — column widths ───────────────────────────────────────── */
.col-types     { min-width: 100px; }
.col-trend     { min-width: 60px; }
.col-movements { min-width: 70px; }

.data-table th.col-movements, .data-table td.col-movements { text-align: right; }

.types-list {
  display: block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── LOCATIONS tab — column widths ───────────────────────────────────────── */
.col-location { min-width: 90px; }
.col-arr      { min-width: 80px; }
.col-dep      { min-width: 80px; }
.col-busiest  { min-width: 90px; }
.col-freqop   { min-width: 180px; }
.col-avgday   { min-width: 90px; }

.data-table th.col-arr, .data-table td.col-arr,
.data-table th.col-dep, .data-table td.col-dep,
.data-table th.col-avgday, .data-table td.col-avgday { text-align: right; }

/* ── LOCATIONS tab — muted row (configured, no data) ─────────────────────── */
.row-muted td { color: var(--text-faint); }

/* ── AIRCRAFT tab — cell helpers ─────────────────────────────────────────── */
.c-call      { color: var(--text); font-weight: 700; }
.c-call:hover { color: var(--accent); }
.c-callsign  { color: var(--text-dim); font-family: var(--mono); text-transform: uppercase; }
.c-callsign:hover { color: var(--accent); }
.c-op        { color: var(--text-dim); }
.c-dim       { color: var(--text-dim); }
.c-dash      { color: var(--text-faint); }
.c-count     { font-family: var(--mono); font-weight: 700; color: var(--accent-data); }
.c-mono      { font-family: var(--mono); color: var(--text-dim); }
.bal-arr     { color: var(--success); }
.bal-dep     { color: var(--accent); }
.ext         { font-size: 9px; opacity: .45; margin-left: 2px; }

/* ── AIRCRAFT tab — notable row treatment ────────────────────────────────── */
.row-notable td:first-child {
  border-left: 3px solid var(--color-notable);
}

/* ── Notable contacts ────────────────────────────────────────────────────── */
.notable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.notable-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-left: 3px solid var(--accent);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none;
  display: block;
}
.notable-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.notable-card.military  { border-left-color: var(--military); }
.notable-card.police    { border-left-color: var(--police); }
.notable-card.sar       { border-left-color: var(--sar); }
.notable-card.medical   { border-left-color: var(--medical); }
.notable-card.bizjet    { border-left-color: var(--bizjet); }
.notable-card.cargo     { border-left-color: var(--cargo); }
.notable-card.private   { border-left-color: var(--offshore); }  /* offshore sub */

.notable-callsign {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.notable-reg {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.notable-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.notable-meta-item {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}
.notable-meta-item span {
  color: var(--text);
  font-weight: 500;
}

/* ── Chart container ─────────────────────────────────────────────────────── */
.chart-container {
  position: relative;
  height: 180px;
}

/* ── Grid layouts ─────────────────────────────────────────────────────────── */
.grid-2    { display: grid; grid-template-columns: 1fr 1fr;    gap: 16px; }
.grid-3    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* Kept for backward compatibility */
.two-col   { display: grid; grid-template-columns: 1fr 1fr;   gap: 16px; }
.three-col { display: grid; grid-template-columns: 2fr 1fr;   gap: 16px; }

@media (max-width: 900px) {
  .two-col, .three-col,
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .page { padding: 16px 12px; }
  .nav { padding: 0 12px; }
}

/* ── Breakdown bars ──────────────────────────────────────────────────────── */
.breakdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.breakdown-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--text-dim);
  width: 80px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.breakdown-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}

.breakdown-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .5s ease;
}

.breakdown-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Live indicator ──────────────────────────────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sar);
  margin-right: 6px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 40px 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 1px;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.mono   { font-family: var(--mono); }
.dim    { color: var(--text-dim); }
.faint  { color: var(--text-faint); }
.small  { font-size: 11px; }
.right  { text-align: right; }
.center { text-align: center; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }
.mb-20  { margin-bottom: 20px; }
.mb-24  { margin-bottom: 24px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.flex   { display: flex; align-items: center; }

/* ── Time-period pill (.t-pill) and filter option pill (.f-pill) ─────────── */
/* Two sizes: t-pill for primary time controls; f-pill for filter options.   */

.t-pill {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--mono);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg2);
  transition: color .12s, border-color .12s, background .12s;
}
.t-pill:hover  { color: var(--text); }
.t-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.t-pill.live-pill { display: flex; align-items: center; gap: 5px; }

/* Filter option pill — compact, used for Alt/Speed/Range/Heading/Time-of-day */
.f-pill {
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 9px;
  font-family: var(--mono);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg2);
  transition: color .12s, border-color .12s, background .12s;
}
.f-pill:hover  { color: var(--text); }
.f-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Filter bar (UI-001) ─────────────────────────────────────────────────── */
/* Sticky header filter bar used on MAP, Profile, TOWER, Analyse.            */
/* Same structure everywhere — contents vary by page.                        */

.fbar {
  flex-shrink: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
}
.fbar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.fbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}
/* Advanced section toggle */
.fbar-adv-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  font-family: var(--mono);
  color: var(--text-faint);
  cursor: pointer;
  padding: 3px 0;
  border-top: 1px solid var(--border);
  user-select: none;
}
.fbar-adv-toggle:hover { color: var(--text-dim); }
.fbar-adv-summary {
  font-style: italic;
  opacity: .8;
}
.fbar-adv-arrow { transition: transform .15s; }
.fbar-adv-toggle.open .fbar-adv-arrow { transform: rotate(180deg); }
.fbar-adv-row {
  display: none;
  align-items: center;
  gap: 5px;
  height: 34px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.fbar-adv-row.open { display: flex; }

/* ── Dropdown-from-pill component (UI-001) ───────────────────────────────── */
/* Usage: <div class="fdrop" id="x"></div>                                   */
/* Init:  new FilterDropdown(el, config)                                     */

.fdrop { position: relative; display: inline-block; flex-shrink: 0; }

/* The pill trigger button */
.fdrop-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg2);
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  white-space: nowrap;
}
.fdrop-pill:hover {
  border-color: var(--text-dim);
  color: var(--text);
}
.fdrop-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}
.fdrop-pill.open {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.fdrop-arr {
  font-size: 9px;
  opacity: .6;
  transition: transform .15s;
  flex-shrink: 0;
}
.fdrop-pill.open .fdrop-arr { transform: rotate(180deg); }
.fdrop-clr {
  font-size: 14px;
  line-height: 1;
  opacity: .6;
  flex-shrink: 0;
  margin-left: -1px;
}
.fdrop-clr:hover { opacity: 1; }

/* The dropdown panel */
.fdrop-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 250px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  z-index: 1200;
  display: none;
  font-family: var(--mono);
  font-size: 10px;
}
.fdrop-panel.open { display: block; }

/* "All" row at top */
.fdrop-all {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-dim);
  transition: background .1s;
}
.fdrop-all:hover { background: var(--bg3); color: var(--text); }
.fdrop-all.checked { color: var(--accent); font-weight: 600; }
.fdrop-all-lbl { flex: 1; }
.fdrop-all-count {
  font-size: 9px;
  color: var(--text-faint);
  min-width: 35px;
  text-align: right;
}

/* Group header */
.fdrop-gh {
  padding: 6px 10px 3px;
  font-size: 8px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-top: 1px solid var(--border);
}

/* Individual option row */
.fdrop-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-dim);
  transition: background .1s;
}
.fdrop-item:hover { background: var(--bg3); color: var(--text); }
.fdrop-item.checked { color: var(--accent); }
.fdrop-item.checked .fdrop-in { color: var(--accent); }
.fdrop-cb {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  background: var(--bg1);
}
.fdrop-item.checked .fdrop-cb {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fdrop-il { flex: 1; }           /* label */
.fdrop-ic {                      /* code (A7, B6...) */
  font-size: 8px;
  color: var(--text-faint);
  width: 22px;
  flex-shrink: 0;
}
.fdrop-in {                      /* count */
  font-size: 9px;
  color: var(--text-faint);
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
}