/* ============================================================
   Intelligence Command Center (Phase C GUI)
   Popup Modal Dialog + floating pill launcher + sensor HUD drawer.
   Tokens: --panel --surface --text --muted --accent --border.
   ============================================================ */
.command-center[hidden],
.command-center-backdrop[hidden],
.sensor-hud[hidden],
.alert-center[hidden],
.command-palette[hidden] { display: none !important; }

/* Backdrop overlay */
.command-center-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2400;
  animation: ccBackdropFade 0.2s ease;
}

@keyframes ccBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Floating Launcher Pill Button */
.cc-launcher-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, #000 8%);
  border: 1px solid var(--accent, #d97706);
  color: var(--text, #fff);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4), 0 0 15px rgba(217, 119, 6, 0.25);
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cc-launcher-pill:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: #f59e0b;
  box-shadow: 0 14px 35px -4px rgba(217, 119, 6, 0.4);
}
.cc-launcher-pill i {
  color: var(--accent, #d97706);
  font-size: 15px;
}

/* Pop-up Window */
.command-center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1120px, 94vw);
  max-height: min(82vh, 760px);
  z-index: 2500;
  background: color-mix(in srgb, var(--panel) 96%, #0f172a 4%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ccModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ccModalPop {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.cc-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.cc-title { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 10px; }
.cc-title i { color: var(--accent); font-size: 16px; }
.cc-status { flex: 1; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cc-actions { display: flex; gap: 8px; }
.cc-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px;
  transition: border-color 0.2s, color 0.2s, transform 0.1s;
}
.cc-btn:hover { border-color: var(--accent); color: var(--accent); }
.cc-btn:active { transform: scale(0.94); }

/* --- threat-level legend (single source of truth = util.bandColor) --- */
.cc-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 20px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 30%, transparent);
}
.cc-legend-title { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.cc-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.cc-legend-chip::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--band); flex: none; }

.cc-body {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(320px, 1.5fr) minmax(220px, 1fr) minmax(200px, 0.9fr);
  gap: 14px; padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

@media (max-width: 900px) {
  .cc-body {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .cc-body {
    grid-template-columns: 1fr;
  }
}

.cc-col {
  min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
}

.cc-col-title { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.cc-loading { font-size: 12px; color: var(--muted); font-style: italic; padding: 2px 0; }

/* --- fire card --- */
.cc-fire-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cc-fire-title h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; }
.cc-fire-badge { display: inline-block; margin-top: 4px; padding: 1px 8px; font-size: 11px; border: 1px solid; border-radius: 999px; }
.cc-fire-select { max-width: 46%; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.cc-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; }
.cc-dl dt { color: var(--muted); }
.cc-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.cc-dashboard-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--accent);
  color: var(--accent); background: transparent; text-decoration: none;
  font-size: 12.5px; font-weight: 600; transition: background 0.2s, color 0.2s;
}
.cc-dashboard-link:hover { background: var(--accent); color: #fff; }
.cc-na { color: var(--muted); font-style: italic; }
.cc-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.cc-tab { padding: 4px 10px; font-size: 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.cc-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cc-tab-content { font-size: 12.5px; }
.cc-growth { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.cc-growth-row { display: grid; grid-template-columns: 42px 1fr 70px; align-items: center; gap: 6px; font-size: 11.5px; }
.cc-growth-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cc-growth-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 70%, var(--surface)); }
.cc-provenance { margin: 8px 0 0; font-size: 11px; color: var(--muted); }
.cc-heuristic { color: var(--muted); font-size: 10.5px; }

/* --- gauges --- */
#ccGauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gauge-dial {
  width: 74px; height: 74px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.gauge-dial[data-unavailable="true"] { background: color-mix(in srgb, var(--surface) 60%, var(--border)) !important; }
.gauge-hole {
  width: 56px; height: 56px; border-radius: 50%; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text);
}
.gauge-label { font-size: 11px; color: var(--muted); text-align: center; }
.gauge-label small { font-size: 9.5px; }

/* --- risk radar + explanation --- */
.cc-radar-row { display: flex; gap: 10px; align-items: flex-start; }
#ccRadarCanvas { flex: none; }
.cc-explain { min-width: 0; font-size: 12px; }
.cc-explain-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; }
.cc-explain-block { margin-bottom: 8px; }
.cc-explain-list { margin: 4px 0 0; padding-left: 16px; }
.cc-explain-list li { margin-bottom: 2px; }

/* --- data fusion --- */
.fusion-summary { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.fusion-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.fusion-row:last-of-type { border-bottom: 0; }
.fusion-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.fusion-row[data-status="ok"] .fusion-dot { background: #22c55e; }
.fusion-row[data-status="unavailable"] .fusion-dot { background: #ef4444; }
.fusion-label { color: var(--text); }
.fusion-source { color: var(--muted); font-size: 10.5px; grid-column: 2 / 3; }
.fusion-state { justify-self: end; }
.fusion-ok { color: #22c55e; font-weight: 600; }
.fusion-na { color: #ef4444; font-weight: 600; }
.fusion-age { grid-column: 2 / 4; font-size: 10.5px; color: var(--muted); }

/* --- alert center (bottom banner stack) --- */
.alert-center {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 1300;
  display: flex; flex-direction: column-reverse; gap: 6px; width: min(560px, 92vw);
}
.alert-banner-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid; background: var(--panel); color: var(--text);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.55); font-size: 13px;
}
.alert-banner-item[data-level="critical"] { border-color: #ef4444; }
.alert-banner-item[data-level="warning"]  { border-color: #f97316; }
.alert-banner-item[data-level="watch"]    { border-color: #eab308; }
.alert-banner-item[data-level="normal"]   { border-color: #22c55e; }
.alert-banner-flag { font-weight: 700; letter-spacing: 0.04em; font-size: 11px; color: #fff; padding: 2px 8px; border-radius: 5px; background: #6b7280; }
.alert-banner-item[data-level="critical"] .alert-banner-flag { background: #ef4444; }
.alert-banner-item[data-level="warning"]  .alert-banner-flag { background: #f97316; }
.alert-banner-item[data-level="watch"]    .alert-banner-flag { background: #eab308; color: #3f2d00; }
.alert-banner-item[data-level="normal"]   .alert-banner-flag { background: #22c55e; }
.alert-banner-msg { flex: 1; min-width: 0; }
.alert-banner-close { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; }

/* --- sensor HUD drawer --- */
.sensor-hud {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1350;
  width: min(360px, 92vw);
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: -18px 0 40px -28px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column;
}
.hud-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.hud-title { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.hud-title i { color: var(--accent); }
.hud-close { width: 28px; height: 28px; }
.hud-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
.hud-list { list-style: none; margin: 0; padding: 0; }
.hud-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 8px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 6px; }
.hud-item:hover, .hud-item.active { background: var(--surface); }
.hud-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.hud-dot--online   { background: #22c55e; }
.hud-dot--warning  { background: #eab308; }
.hud-dot--critical { background: #ef4444; }
.hud-dot--offline  { background: var(--muted); }
.hud-dot--unknown  { background: var(--border); }
.hud-name { font-weight: 500; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-metric { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); }
.hud-sub { font-size: 10.5px; color: var(--muted); flex-basis: 100%; margin-left: 17px; }
.hud-chart { height: 160px; margin-top: 10px; }

/* --- command palette (Ctrl+K) --- */
.command-palette {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0, 0, 0, 0.4); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.cp-panel { width: min(560px, 92vw); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6); }
.cp-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cp-search i { color: var(--muted); }
.cp-search input { flex: 1; border: 0; outline: none; background: transparent; color: var(--text); font-size: 15px; }
.cp-results { list-style: none; margin: 0; padding: 6px 0; max-height: 46vh; overflow-y: auto; }
.cp-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 13.5px; }
.cp-item:hover { background: var(--surface); }
.cp-hint { font-size: 11px; color: var(--muted); }

/* --- regional fire-day risk --- */
.rr-band { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--band, var(--accent)); color: var(--band, var(--accent)); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; margin: 2px 0 6px; }
.rr-prob { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.rr-model { color: var(--muted); font-weight: 500; font-size: 10.5px; }
.rr-codes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; margin: 8px 0; }
.rr-code { font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-code b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.rr-source { font-size: 10.5px; color: var(--muted); margin: 2px 0 6px; }
.rr-provenance { font-size: 10.5px; color: var(--muted); font-style: italic; line-height: 1.45; }
.rr-unavailable { font-size: 12px; color: var(--muted); font-style: italic; }

/* --- focus / investigation modes --- */
.command-center[data-mode="focus"] .cc-col:not(.cc-fire) { opacity: 0.45; }
.command-center[data-mode="focus"] .cc-fire { border-color: var(--accent); }
body[data-investigate="on"] .command-center { height: 46vh; }

/* --- Integrated Spatiotemporal Map Timeline Widget --- */
.map-timeline-dock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  /* Leaves the bottom strip free for Leaflet's credit line. */
  bottom: 52px;
  width: min(740px, calc(100% - 32px));
  /* Leaflet's tooltip (650) and popup (700) panes must not cover the HUD. */
  z-index: 900;
  background: color-mix(in srgb, var(--panel, #0f172a) 94%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.24s ease, visibility 0.24s ease;
}

.map-timeline-dock.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.map-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.map-timeline-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #f8fafc);
}

/* The timeline now sits above Leaflet's bottom strip so the copyright and
   source credits read directly beneath it. Padding lifts the interactive
   controls (zoom, legend) clear of the dock, while the attribution is pinned
   back down to the bottom edge of the map. */
.leaflet-container.timeline-visible .leaflet-bottom.leaflet-right {
  left: 0;
  right: 0;
  width: 100%;
  padding-bottom: 138px;
  /* The box is only wide so the credits can run as one line underneath the
     dock; empty space must still pan the map. */
  pointer-events: none;
  transition: padding-bottom 0.24s ease;
}

.leaflet-container.timeline-visible .leaflet-bottom.leaflet-right .leaflet-control {
  pointer-events: auto;
}

.leaflet-container.timeline-visible .leaflet-bottom.leaflet-right .leaflet-control-attribution {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  width: auto;
  text-align: right;
}

.map-timeline-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.map-timeline-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.timeline-tag-live {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.timeline-tag-past {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.timeline-tag-future {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.map-timeline-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-timeline-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  background: color-mix(in srgb, var(--surface, #1e293b) 80%, transparent);
  color: var(--text, #f8fafc);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease, max-height 0.18s ease;
}

.map-timeline-chip-btn:hover {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #ffffff;
}

.map-timeline-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  font-size: 11px;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease, max-height 0.18s ease;
}

.map-timeline-icon-btn:hover {
  color: var(--text, #f8fafc);
  background: rgba(255, 255, 255, 0.08);
}

.map-timeline-scrubber-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-ctrl-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--surface, #1e293b);
  color: var(--text, #f8fafc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11.5px;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease, max-height 0.18s ease;
  flex-shrink: 0;
}

.timeline-ctrl-btn:hover {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
  transform: translateY(-1px);
}

.timeline-ctrl-btn.active {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

.timeline-scrubber-track-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.timeline-ticks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
  padding: 0 2px;
}

.timeline-center-tick {
  color: #4ade80;
  font-weight: 700;
}

.map-timeline-slider {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(to right, rgba(245, 158, 11, 0.35) 0%, rgba(34, 197, 94, 0.65) 50%, rgba(56, 189, 248, 0.45) 100%);
  outline: none;
  accent-color: #38bdf8;
  cursor: pointer;
}

.timeline-select {
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--surface, #1e293b);
  color: var(--text, #f8fafc);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .map-timeline-dock {
    width: calc(100% - 16px);
    bottom: 56px;
    padding: 8px 10px;
  }

  /* The mode badge is the first thing to crowd the time + status on a phone. */
  .map-timeline-mode-badge {
    display: none;
  }

  /* Keep the transport buttons together and give the scrubber its own row;
     squeezing the slider between five controls made it ~90px wide. */
  .map-timeline-scrubber-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .timeline-ctrl-btn,
  .timeline-select {
    order: 1;
  }

  .timeline-scrubber-track-wrap {
    order: 2;
    flex: 1 1 100%;
  }

  /* "Now" keeps its icon and tooltip; the label is what crowds the header. */
  .map-timeline-chip-btn span {
    display: none;
  }

  .map-timeline-chip-btn {
    padding: 3px 7px;
  }

  .timeline-ticks {
    font-size: 9px;
  }

  /* On a phone the dock is ~110px (controls row + full-width slider). */
  .leaflet-container.timeline-visible .leaflet-bottom.leaflet-right {
    padding-bottom: 168px;
  }
}

/* --- 3D terrain unified control pill --- */
.gl3d-control-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}

.gl3d-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, max-height 0.2s ease;
  white-space: nowrap;
}

.gl3d-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.gl3d-btn.active {
  background: var(--accent);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

.gl3d-sub-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
}

.gl3d-sub-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease, max-height 0.2s ease;
}

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

.gl3d-sub-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (max-width: 1260px) {
  .cc-body { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .cc-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cc-body { grid-template-columns: 1fr; max-height: 58vh; }
  .command-center { max-height: 62vh; }
  #ccGauges { grid-template-columns: repeat(3, 1fr); }
}