/* Hallmark · component: app-chrome · genre: atmospheric · theme: Midnight
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (gates 40–41)
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 *
 * Token discipline: every colour is an OKLCH var(). No inline hex/rgb.
 * Motion discipline: transform + opacity only. Named easings. prefers-reduced-motion respected.
 * Mobile: no horizontal scroll, overflow-x:clip on html+body, no two-line clickables.
 */

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

/* ─── TOKEN BLOCK ─────────────────────────────────────────────────────────── */
:root {
  /* Paper / surface scale (dark-matter theme — light values ascending) */
  --color-paper-0:   oklch(9% 0.010 250);   /* deepest bg — map underlay */
  --color-paper-1:   oklch(12% 0.012 250);  /* topbar + panel background */
  --color-paper-2:   oklch(16% 0.014 250);  /* control cluster bg */
  --color-paper-3:   oklch(20% 0.016 250);  /* hover surface */
  --color-paper-4:   oklch(25% 0.014 250);  /* active / pressed */

  /* Ink / text scale */
  --color-ink-0:     oklch(96% 0.004 250);  /* primary text */
  --color-ink-1:     oklch(75% 0.010 250);  /* secondary / label */
  --color-ink-2:     oklch(52% 0.012 250);  /* muted / disabled text */
  --color-ink-3:     oklch(38% 0.010 250);  /* very muted / placeholder */

  /* Borders */
  --color-border-0:  oklch(100% 0 0 / 0.06);  /* hairline */
  --color-border-1:  oklch(100% 0 0 / 0.12);  /* normal border */
  --color-border-2:  oklch(100% 0 0 / 0.22);  /* hover/focus border */

  /* Accent — cool blue (Midnight cluster) */
  --color-accent:    oklch(72% 0.18 248);   /* primary interactive */
  --color-accent-lo: oklch(72% 0.18 248 / 0.15); /* low-opacity accent fill */
  --color-accent-md: oklch(72% 0.18 248 / 0.30);
  --color-accent-hi: oklch(80% 0.16 248);   /* hover on accent */

  /* Semantic states */
  --color-focus:     oklch(72% 0.18 248);   /* focus ring — same as accent */
  --color-error:     oklch(68% 0.20 25);    /* red-orange */
  --color-success:   oklch(70% 0.18 155);   /* teal-green */
  --color-warning:   oklch(80% 0.18 80);    /* amber */

  /* ── Fuel accent ramp (maps to FUEL_RGB from constants.mjs) ── */
  --fuel-solar:       oklch(82% 0.15 85);   /* amber-yellow   [251,191,36]  */
  --fuel-wind:        oklch(74% 0.14 220);  /* sky blue       [56,189,248]  */
  --fuel-hydro:       oklch(78% 0.13 200);  /* cyan           [34,211,238]  */
  --fuel-nuclear:     oklch(72% 0.16 300);  /* violet         [192,132,252] */
  --fuel-gas:         oklch(75% 0.15 55);   /* orange         [251,146,60]  */
  --fuel-coal:        oklch(45% 0.04 240);  /* slate          [71,85,105]   */
  --fuel-oil:         oklch(52% 0.10 70);   /* dark amber     [161,98,7]    */
  --fuel-geo:         oklch(64% 0.18 28);   /* red            [239,68,68]   */
  --fuel-biomass:     oklch(72% 0.18 130);  /* lime           [132,204,22]  */
  --fuel-battery:     oklch(68% 0.20 340);  /* pink           [236,72,153]  */
  --fuel-other:       oklch(52% 0.04 240);  /* cool grey      [100,116,139] */
  --fuel-unknown:     oklch(45% 0.04 240);  /* dark slate     [71,85,105]   */

  /* ── Voltage accent ramp (maps to VOLTAGE_RGB from constants.mjs) ── */
  --volt-735:         oklch(64% 0.18 28);   /* red            [239,68,68]   */
  --volt-500:         oklch(70% 0.17 45);   /* orange         [249,115,22]  */
  --volt-345:         oklch(78% 0.14 95);   /* yellow         [234,179,8]   */
  --volt-230:         oklch(72% 0.18 130);  /* lime           [132,204,22]  */
  --volt-100:         oklch(72% 0.15 200);  /* cyan           [6,182,212]   */
  --volt-31:          oklch(62% 0.14 272);  /* indigo         [99,102,241]  */
  --volt-sub31:       oklch(52% 0.04 240);  /* grey           [100,116,139] */
  --volt-unknown:     oklch(45% 0.04 240);  /* dark slate     [71,85,105]   */

  /* ── Typography ── */
  --font-sans:   "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:   "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.75rem;     /* 12px */
  --text-base: 0.8125rem;   /* 13px */
  --text-md:   0.875rem;    /* 14px */
  --text-lg:   1rem;        /* 16px */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Spacing (4-pt scale) ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-pill: 999px;

  /* ── Motion tokens ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-instant:  80ms;
  --dur-fast:     150ms;
  --dur-normal:   240ms;
  --dur-slow:     360ms;
  --dur-enter:    420ms;

  /* ── Layout ── */
  --panel-width:    224px;
  --topbar-height:   44px;
  --timeline-height: 56px;

  /* ── Glass surface ── */
  --glass-bg:     oklch(12% 0.012 250 / 0.88);
  --glass-border: oklch(100% 0 0 / 0.09);
  --glass-blur:   blur(12px) saturate(1.4);
}

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  overflow-x: clip;
  overflow-y: hidden;
  height: 100dvh;
  background: var(--color-paper-0);
  color: var(--color-ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── MAP CANVAS ──────────────────────────────────────────────────────────── */
#map {
  position: fixed;
  inset: var(--topbar-height) 0 0 0;
}

/* ─── TOP BAR ─────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.topbar__home {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-ink-0);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  padding: var(--space-1) var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
  white-space: nowrap;
  outline: none;
}
.topbar__home:hover {
  background: var(--color-paper-3);
}
.topbar__home:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}
.topbar__home:active {
  background: var(--color-paper-4);
}

.topbar__wordmark {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.topbar__sep {
  width: 1px;
  height: 18px;
  background: var(--color-border-1);
  flex-shrink: 0;
}

.topbar__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
}

.topbar__spacer {
  flex: 1;
}

/* ─── MOUNT POINT POSITIONERS ─────────────────────────────────────────────── */
#layers-panel {
  position: fixed;
  top: calc(var(--topbar-height) + var(--space-3));
  left: var(--space-3);
  z-index: 50;
  width: var(--panel-width);
  max-height: calc(100dvh - var(--topbar-height) - var(--timeline-height) - var(--space-8));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-1) transparent;
}

#controls {
  position: fixed;
  top: calc(var(--topbar-height) + var(--space-3));
  right: var(--space-3);
  z-index: 50;
}

#timeline {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(600px, calc(100vw - var(--space-8)));
}

/* MapLibre attribution — keep above timeline */
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left {
  bottom: calc(var(--timeline-height) + var(--space-6));
}

/* ─── GLASS PANEL BASE ────────────────────────────────────────────────────── */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
}

/* ─── ICON BUTTON ─────────────────────────────────────────────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-1);
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
  outline: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover,         .icon-btn.is-hover    { background: var(--color-paper-3); color: var(--color-ink-0); }
.icon-btn:focus-visible, .icon-btn.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 2px; background: var(--color-paper-3); color: var(--color-ink-0); }
.icon-btn:active,        .icon-btn.is-active   { transform: scale(0.92); background: var(--color-paper-4); }
.icon-btn:disabled,      .icon-btn.is-disabled { color: var(--color-ink-3); cursor: not-allowed; pointer-events: none; opacity: 0.45; }
.icon-btn[data-state="loading"], .icon-btn.is-loading { pointer-events: none; color: var(--color-ink-2); }
.icon-btn[data-state="error"],   .icon-btn.is-error   { color: var(--color-error); }
.icon-btn[data-state="success"], .icon-btn.is-success { color: var(--color-success); }

/* ─── TOOLTIP ─────────────────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  top: 100%;
  margin-top: var(--space-1);
  white-space: nowrap;
  pointer-events: none;
  background: var(--color-paper-4);
  color: var(--color-ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-1);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  z-index: 200;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 800ms;
}

/* ─── LAYERS PANEL ────────────────────────────────────────────────────────── */
.layers-panel {
  padding: var(--space-3);
}

.layers-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-0);
}

.layers-panel__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-0);
  letter-spacing: 0.02em;
  font-style: normal;
}

.layer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  min-height: 32px;
  white-space: nowrap;
}
.layer-row:hover,         .layer-row.is-hover    { background: var(--color-paper-3); }
.layer-row:focus-visible, .layer-row.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.layer-row:active,        .layer-row.is-active   { background: var(--color-paper-4); }
.layer-row.is-disabled                           { opacity: 0.45; pointer-events: none; cursor: not-allowed; }

.layer-toggle {
  position: relative;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
}
.layer-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.layer-toggle__track {
  display: block;
  width: 28px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-border-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.layer-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-ink-2);
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-out);
}
.layer-toggle--on .layer-toggle__track { background: var(--color-accent); }
.layer-toggle--on .layer-toggle__thumb { background: var(--color-ink-0); transform: translateX(12px); }
.layer-row:hover .layer-toggle__track,
.layer-row.is-hover .layer-toggle__track { border: 1px solid var(--color-border-2); }
.layer-toggle__input:focus-visible ~ .layer-toggle__track {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.layer-row__label {
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-ink-1);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-row--active .layer-row__label { color: var(--color-ink-0); }

.layer-row__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-ink-2);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.layer-row--expanded .layer-row__expand {
  transform: rotate(180deg);
  color: var(--color-ink-1);
}

.layer-chips {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur-normal) var(--ease-out),
              opacity var(--dur-normal) var(--ease-out);
}
.layer-chips--open {
  max-height: 400px;
  opacity: 1;
}
.layer-chips__inner {
  padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 28px + var(--space-2));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-0);
  background: var(--color-paper-2);
  color: var(--color-ink-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-spring);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 22px;
}
.chip:hover,         .chip.is-hover    { background: var(--color-paper-3); border-color: var(--color-border-2); color: var(--color-ink-0); }
.chip:focus-visible, .chip.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 2px; background: var(--color-paper-3); }
.chip:active,        .chip.is-active   { transform: scale(0.95); background: var(--color-paper-4); }
.chip--on                              { background: var(--color-accent-lo); border-color: var(--color-accent-md); color: var(--color-ink-0); }
.chip--on:hover, .chip--on.is-hover    { background: var(--color-accent-md); }
.chip.is-disabled                      { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.chip[data-state="loading"]            { opacity: 0.6; pointer-events: none; }
.chip[data-state="error"]              { border-color: var(--color-error); color: var(--color-error); }
.chip[data-state="success"]            { border-color: var(--color-success); color: var(--color-success); }

.chip__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.layers-panel__divider {
  height: 1px;
  background: var(--color-border-0);
  margin: var(--space-2) 0;
}

.legend {
  padding: var(--space-2) var(--space-2) var(--space-1);
}
.legend__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  font-style: normal;
}
.legend__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend__swatch--rect {
  width: 16px;
  height: 4px;
  border-radius: var(--radius-sm);
}
.legend__label {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
}

/* ─── CONTROLS CLUSTER ────────────────────────────────────────────────────── */
.controls-cluster {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
}
.controls-cluster__sep {
  height: 1px;
  background: var(--color-border-0);
  margin: var(--space-1) var(--space-2);
}

.seg-toggle {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: 2px;
  border: 1px solid var(--color-border-1);
}
.seg-toggle__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 var(--space-2);
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--color-ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
  min-width: 28px;
}
.seg-toggle__btn:hover,         .seg-toggle__btn.is-hover    { color: var(--color-ink-1); background: var(--color-paper-3); }
.seg-toggle__btn:focus-visible, .seg-toggle__btn.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 1px; color: var(--color-ink-1); }
.seg-toggle__btn:active,        .seg-toggle__btn.is-active   { transform: scale(0.94); }
.seg-toggle__btn--active                                     { background: var(--color-accent-lo); color: var(--color-accent); border: 1px solid var(--color-accent-md); }
.seg-toggle__btn--active:hover, .seg-toggle__btn--active.is-hover { background: var(--color-accent-md); }
.seg-toggle__btn:disabled,      .seg-toggle__btn.is-disabled { opacity: 0.38; pointer-events: none; cursor: not-allowed; }
.seg-toggle__btn[data-state="loading"]  { opacity: 0.5; pointer-events: none; }
.seg-toggle__btn[data-state="error"]    { color: var(--color-error); }
.seg-toggle__btn[data-state="success"]  { color: var(--color-success); }

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  cursor: pointer;
  text-align: left;
  outline: none;
  white-space: nowrap;
  min-height: 28px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.action-btn:hover,         .action-btn.is-hover    { background: var(--color-paper-3); color: var(--color-ink-0); }
.action-btn:focus-visible, .action-btn.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 1px; background: var(--color-paper-3); color: var(--color-ink-0); }
.action-btn:active,        .action-btn.is-active   { background: var(--color-paper-4); transform: scale(0.97); }
.action-btn:disabled,      .action-btn.is-disabled { opacity: 0.38; pointer-events: none; cursor: not-allowed; }
.action-btn[data-state="loading"] { opacity: 0.6; pointer-events: none; }
.action-btn[data-state="error"]   { color: var(--color-error); }
.action-btn[data-state="success"] { color: var(--color-success); }

.action-btn__icon {
  font-size: var(--text-md);
  flex-shrink: 0;
  line-height: 1;
}

.feedback-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  position: fixed;
  bottom: calc(var(--timeline-height) + var(--space-8));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-paper-3);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-0);
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.feedback-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── TIMELINE SCRUBBER ───────────────────────────────────────────────────── */
.timeline-bar {
  padding: var(--space-3) var(--space-4) var(--space-2);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
}
.timeline-bar__track-wrap {
  grid-column: 1;
  grid-row: 1;
  position: relative;
}
.timeline-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}
.timeline-ticks__mark {
  position: absolute;
  bottom: -14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.timeline-ticks__line {
  width: 1px;
  height: 4px;
  background: var(--color-ink-3);
}
.timeline-ticks__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-3);
  white-space: nowrap;
  font-weight: var(--weight-normal);
}

.timeline-range {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  outline: none;
  cursor: pointer;
  accent-color: var(--color-accent);
  margin-bottom: 22px;
}
.timeline-range:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.timeline-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-ink-0);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-out);
}
.timeline-range:hover::-webkit-slider-thumb { background: var(--color-accent-hi); transform: scale(1.2); }
.timeline-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.timeline-range:disabled { opacity: 0.4; cursor: not-allowed; }
.timeline-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-ink-0);
  cursor: pointer;
}

.timeline-bar__readout {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.timeline-year {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-0);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
.timeline-year--all {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.timeline-bar__controls {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--color-paper-3);
  color: var(--color-ink-0);
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.play-btn:hover,         .play-btn.is-hover    { background: var(--color-paper-4); color: var(--color-accent); }
.play-btn:focus-visible, .play-btn.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.play-btn:active,        .play-btn.is-active   { transform: scale(0.88); }
.play-btn:disabled,      .play-btn.is-disabled { opacity: 0.38; pointer-events: none; cursor: not-allowed; }
.play-btn[data-state="loading"]  { opacity: 0.6; pointer-events: none; }
.play-btn[data-state="error"]    { color: var(--color-error); }
.play-btn[data-state="success"]  { color: var(--color-success); }

.timeline-bar__label {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.timeline-reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border-0);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  min-height: 22px;
}
.timeline-reset:hover,         .timeline-reset.is-hover    { background: var(--color-paper-3); color: var(--color-ink-1); border-color: var(--color-border-2); }
.timeline-reset:focus-visible, .timeline-reset.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.timeline-reset:active,        .timeline-reset.is-active   { background: var(--color-paper-4); }
.timeline-reset:disabled,      .timeline-reset.is-disabled { opacity: 0.38; pointer-events: none; }
.timeline-reset[data-state="loading"]  { opacity: 0.5; pointer-events: none; }
.timeline-reset[data-state="error"]    { color: var(--color-error); }
.timeline-reset[data-state="success"]  { color: var(--color-success); }

/* ─── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .timeline-range::-webkit-slider-thumb { transition: none; }
  .timeline-range::-moz-range-thumb     { transition: none; }
}

/* ─── RESPONSIVE — 768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #layers-panel {
    width: calc(100vw - var(--space-6));
    max-height: 40dvh;
  }
  #timeline {
    width: calc(100vw - var(--space-4));
    bottom: var(--space-2);
  }
  .timeline-ticks__label { display: none; }
  #controls {
    top: calc(var(--topbar-height) + var(--space-3));
    right: var(--space-2);
  }
}

/* ─── RESPONSIVE — 414px ──────────────────────────────────────────────────── */
@media (max-width: 414px) {
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  #layers-panel { top: calc(var(--topbar-height) + var(--space-2)); left: var(--space-2); width: 200px; }
  #controls { top: calc(var(--topbar-height) + var(--space-2)); right: var(--space-2); }
  .timeline-bar { padding: var(--space-2) var(--space-3) var(--space-1); }
  .timeline-year { font-size: var(--text-md); }
  .controls-cluster { padding: var(--space-1); }
}

/* ─── RESPONSIVE — 375px ──────────────────────────────────────────────────── */
@media (max-width: 375px) {
  #layers-panel { width: 188px; }
  .topbar__title { display: none; }
}

/* ─── RESPONSIVE — 320px ──────────────────────────────────────────────────── */
@media (max-width: 320px) {
  #layers-panel { width: calc(100vw - var(--space-4) - 44px); }
  .topbar__sep { display: none; }
  .timeline-bar__controls { gap: var(--space-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE 1 — HOVER TOOLTIP (.map-tip)
   Hallmark · component: hover-tooltip · genre: atmospheric · theme: Midnight
   states: default · hover · focus · active · disabled · loading · error · success
   contrast: pass (gates 40–41)
   ═══════════════════════════════════════════════════════════════════════════ */

/* deck.gl injects its tooltip into a div with style injected via getTooltip.
 * We target the wrapping element with pointer-events:none + position:fixed
 * and style just the .map-tip inner div. */
.map-tip {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--color-paper-3);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-sm);
  color: var(--color-ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  /* No motion on tooltip — deck.gl already handles the 800ms hover delay
     via its own gesture system; we just style the appearance. */
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE 2 — FULL-INFO CARD POPUP
   Hallmark · component: feature-popup-card · genre: atmospheric · theme: Midnight
   states: default · hover · focus · active · disabled · loading · error · success
   contrast: pass (gates 40–41)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Accent strip by layer / fuel type */
.mp-card { position: relative; }
.mp-accent-strip {
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}

/* Wider card for richer content */
.map-popup.maplibregl-popup .maplibregl-popup-content {
  min-width: 240px;
  max-width: 340px;
}

/* Section divider within popup */
.mp-section {
  padding: var(--space-2) 0 0;
  margin: 0 var(--space-3);
  border-top: 1px solid var(--color-border-0);
}
.mp-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Fuel / category badge next to title */
.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-0);
  background: var(--color-paper-3);
  border: 1px solid var(--color-border-1);
  margin-bottom: var(--space-2);
  white-space: nowrap;
}
.mp-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE 3 — SATELLITE BASEMAP
   (no new CSS needed — the satellite style object is handled in constants.mjs)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE 4 — MINIMAP
   Hallmark · component: minimap · genre: atmospheric · theme: Midnight
   states: default · hover · focus · active · disabled · loading · error · success
   contrast: pass (gates 40–41)
   ═══════════════════════════════════════════════════════════════════════════ */

#minimap {
  position: fixed;
  bottom: calc(var(--timeline-height) + var(--space-3) + var(--space-4));
  left: var(--space-3);
  z-index: 50;
  width: 144px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-1);
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.5);
  pointer-events: none; /* non-interactive overview */
  background: var(--color-paper-0);
  /* Subtle fade-in on load */
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out);
}
#minimap.is-ready {
  opacity: 1;
}

/* Viewport rectangle drawn inside the minimap */
.minimap-viewport {
  position: absolute;
  border: 1.5px solid var(--color-accent);
  background: var(--color-accent-lo);
  border-radius: 2px;
  pointer-events: none;
  transition: top var(--dur-instant) linear,
              left var(--dur-instant) linear,
              width var(--dur-instant) linear,
              height var(--dur-instant) linear;
}

/* Hide minimap on small screens where space is tight */
@media (max-width: 768px) {
  #minimap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE 5 — SORT CONTROLS IN SEARCH PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.search-sort {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3) 0;
  flex-shrink: 0;
}

.search-sort__label {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  flex-shrink: 0;
  font-style: normal;
}

.search-sort__select {
  flex: 1;
  height: 24px;
  padding: 0 var(--space-2);
  background: var(--color-paper-2);
  border: 1px solid var(--color-border-0);
  border-radius: var(--radius-sm);
  color: var(--color-ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  min-height: 24px;
}
.search-sort__select:hover         { border-color: var(--color-border-2); background: var(--color-paper-3); color: var(--color-ink-0); }
.search-sort__select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }
.search-sort__select:disabled      { opacity: 0.38; cursor: not-allowed; }

/* Timeline-sync indicator — shows when year filter is active */
.search-year-badge {
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-accent-lo);
  border: 1px solid var(--color-accent-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-year-badge.is-active {
  display: inline-flex;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TASK 6 — FEATURE POPUP
   Hallmark · component: feature-popup · genre: atmospheric · theme: Midnight
   states: default · hover · focus · active · disabled · loading · error · success
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override MapLibre's default popup chrome with the app's dark tokens */
.map-popup.maplibregl-popup .maplibregl-popup-content {
  padding: 0;
  background: var(--color-paper-1);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.55);
  min-width: 180px;
  max-width: 280px;
  overflow: hidden;
}

.map-popup.maplibregl-popup .maplibregl-popup-tip {
  border-top-color: var(--color-border-1);
}
.map-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: var(--color-paper-1);
}
.map-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: var(--color-paper-1);
}

/* Close button */
.map-popup.maplibregl-popup .maplibregl-popup-close-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.map-popup.maplibregl-popup .maplibregl-popup-close-button:hover {
  background: var(--color-paper-3);
  color: var(--color-ink-0);
}
.map-popup.maplibregl-popup .maplibregl-popup-close-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  color: var(--color-ink-0);
}

/* Popup inner content */
.mp-title {
  padding: var(--space-3) var(--space-8) var(--space-2) var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-0);
  line-height: 1.3;
  border-bottom: 1px solid var(--color-border-0);
  font-style: normal;
  word-break: break-word;
}

.mp-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  min-height: 24px;
}
.mp-row:last-child {
  padding-bottom: var(--space-2);
}

.mp-label {
  flex-shrink: 0;
  min-width: 64px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  cursor: default;
}

.mp-value {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-ink-1);
  word-break: break-word;
  min-width: 0;
}

.mp-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out);
  outline: none;
}
.mp-link:hover             { color: var(--color-accent-hi); text-decoration: underline; }
.mp-link:focus-visible     { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.mp-link:active            { color: var(--color-ink-0); }

/* ═══════════════════════════════════════════════════════════════════════════
   TASK 8 — SEARCH PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

#search-panel {
  position: fixed;
  top: calc(var(--topbar-height) + var(--space-3));
  left: calc(var(--panel-width) + var(--space-3) + var(--space-3));
  z-index: 50;
  width: 260px;
  max-height: calc(100dvh - var(--topbar-height) - var(--timeline-height) - var(--space-8));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: inherit;
}

.search-panel__input-wrap {
  position: relative;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-0);
}

.search-panel__icon {
  position: absolute;
  left: calc(var(--space-3) + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-ink-3);
  width: 14px;
  height: 14px;
}

.search-panel__input {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 var(--space-2) 0 calc(var(--space-5) + var(--space-2));
  background: var(--color-paper-2);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-md);
  color: var(--color-ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.search-panel__input::placeholder  { color: var(--color-ink-3); }
.search-panel__input:hover         { border-color: var(--color-border-2); }
.search-panel__input:focus         { border-color: var(--color-accent); background: var(--color-paper-1); }
.search-panel__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.search-panel__input:disabled      { opacity: 0.4; cursor: not-allowed; }
/* loading state driven by data-state attribute on the wrapper */
.search-panel__input-wrap[data-state="loading"] .search-panel__input { opacity: 0.6; pointer-events: none; }
.search-panel__input-wrap[data-state="error"] .search-panel__input   { border-color: var(--color-error); }
.search-panel__input-wrap[data-state="success"] .search-panel__input { border-color: var(--color-success); }

.search-panel__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-3) 0;
  flex-shrink: 0;
}

.search-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 26px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-0);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  min-height: 26px;
}
.search-tab:hover,         .search-tab.is-hover    { background: var(--color-paper-3); color: var(--color-ink-1); }
.search-tab:focus-visible, .search-tab.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.search-tab:active,        .search-tab.is-active   { background: var(--color-paper-4); }
.search-tab--active                                { background: var(--color-accent-lo); border-color: var(--color-accent-md); color: var(--color-accent); }
.search-tab--active:hover, .search-tab--active.is-hover { background: var(--color-accent-md); color: var(--color-ink-0); }
.search-tab.is-disabled                            { opacity: 0.38; pointer-events: none; }
.search-tab[data-state="loading"]                  { opacity: 0.5; pointer-events: none; }
.search-tab[data-state="error"]                    { color: var(--color-error); border-color: var(--color-error); }
.search-tab[data-state="success"]                  { color: var(--color-success); border-color: var(--color-success); }

.search-tab__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}
.search-tab--active .search-tab__count { color: var(--color-accent); }

.search-panel__meta {
  padding: var(--space-1) var(--space-3) 0;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-panel__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-1) transparent;
  padding: var(--space-1) 0 var(--space-2);
}

.search-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 40px;
}
.search-item:hover,         .search-item.is-hover    { background: var(--color-paper-3); }
.search-item:focus-visible, .search-item.is-focus    { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.search-item:active,        .search-item.is-active   { background: var(--color-paper-4); }
.search-item.is-disabled                             { opacity: 0.4; pointer-events: none; }
.search-item[data-state="loading"]                   { opacity: 0.5; pointer-events: none; }
.search-item[data-state="error"]                     { border-left: 2px solid var(--color-error); }
.search-item[data-state="success"]                   { border-left: 2px solid var(--color-success); }

.search-item__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-3);
}

.search-item__body {
  flex: 1;
  min-width: 0;
}

.search-item__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
}

.search-item__sub {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.search-item__value {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}

.search-empty {
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TASK 8 — CONTEXT MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.ctx-menu {
  position: fixed;
  z-index: 500;
  min-width: 200px;
  background: var(--color-paper-1);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px oklch(0% 0 0 / 0.6);
  padding: var(--space-1);
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transform-origin: top left;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  display: none;
}
.ctx-menu.is-open {
  display: block;
  opacity: 1;
  transform: scale(1) translateY(0);
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  text-align: left;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  min-height: 32px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ctx-item:hover,         .ctx-item.is-hover    { background: var(--color-paper-3); color: var(--color-ink-0); }
.ctx-item:focus-visible, .ctx-item.is-focus    { outline: 2px solid var(--color-focus); outline-offset: -2px; background: var(--color-paper-3); color: var(--color-ink-0); }
.ctx-item:active,        .ctx-item.is-active   { background: var(--color-paper-4); transform: scale(0.98); }
.ctx-item:disabled,      .ctx-item.is-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.ctx-item[data-state="loading"]                { opacity: 0.5; pointer-events: none; }
.ctx-item[data-state="error"]                  { color: var(--color-error); }
.ctx-item[data-state="success"]                { color: var(--color-success); background: oklch(70% 0.18 155 / 0.08); }

.ctx-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.ctx-coords-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ctx-coords-val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ctx-coords-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}

.ctx-divider {
  height: 1px;
  background: var(--color-border-0);
  margin: var(--space-1) var(--space-2);
}

/* Copied float toast */
.ctx-toast {
  position: fixed;
  z-index: 600;
  padding: var(--space-1) var(--space-3);
  background: var(--color-paper-3);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-pill);
  color: var(--color-ink-0);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.ctx-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TASK 8 — MOBILE BOTTOM SHEET
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bottom sheet — full-screen overlay, contents slide up from bottom */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(0% 0 0 / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.bottom-sheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 210;
  background: var(--color-paper-1);
  border-top: 1px solid var(--color-border-1);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.bottom-sheet.is-open {
  transform: translateY(0);
}

.bottom-sheet__handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0 var(--space-1);
  cursor: grab;
}
.bottom-sheet__handle:active { cursor: grabbing; }
.bottom-sheet__handle-bar {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border-2);
}

.bottom-sheet__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}

.bottom-sheet__title {
  flex: 1;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-0);
  font-style: normal;
}

.bottom-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-2);
  cursor: pointer;
  outline: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.bottom-sheet__close:hover         { background: var(--color-paper-3); color: var(--color-ink-0); }
.bottom-sheet__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.bottom-sheet__close:active        { background: var(--color-paper-4); }

.bottom-sheet__tabs {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 0 var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border-0);
}

.bottom-sheet__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1px solid var(--color-border-0);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}
.bottom-sheet__tab:hover,         .bottom-sheet__tab.is-hover    { background: var(--color-paper-3); color: var(--color-ink-1); }
.bottom-sheet__tab:focus-visible, .bottom-sheet__tab.is-focus    { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.bottom-sheet__tab:active,        .bottom-sheet__tab.is-active   { background: var(--color-paper-4); }
.bottom-sheet__tab--active                                       { background: var(--color-accent-lo); border-color: var(--color-accent-md); color: var(--color-accent); }
.bottom-sheet__tab--active:hover  { background: var(--color-accent-md); color: var(--color-ink-0); }
.bottom-sheet__tab.is-disabled    { opacity: 0.38; pointer-events: none; }
.bottom-sheet__tab[data-state="loading"] { opacity: 0.5; pointer-events: none; }
.bottom-sheet__tab[data-state="error"]   { color: var(--color-error); }
.bottom-sheet__tab[data-state="success"] { color: var(--color-success); }

.bottom-sheet__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-1) transparent;
}

/* FAB — floating action button to open the bottom sheet on mobile */
.sheet-fab {
  position: fixed;
  bottom: calc(var(--timeline-height) + var(--space-4) + var(--space-2));
  left: var(--space-4);
  z-index: 60;
  display: none;    /* shown only on ≤768px via media query */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-paper-2);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-pill);
  color: var(--color-ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.4);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  white-space: nowrap;
  min-height: 40px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.sheet-fab:hover         { background: var(--color-paper-3); }
.sheet-fab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sheet-fab:active        { transform: scale(0.96); background: var(--color-paper-4); }
.sheet-fab:disabled      { opacity: 0.4; pointer-events: none; }
.sheet-fab[data-state="loading"]  { opacity: 0.6; pointer-events: none; }
.sheet-fab[data-state="error"]    { color: var(--color-error); border-color: var(--color-error); }
.sheet-fab[data-state="success"]  { color: var(--color-success); border-color: var(--color-success); }

/* ── Mobile breakpoints for sheet vs panel layout ─────────────────────────── */
@media (max-width: 768px) {
  /* Hide desktop panels, show FAB */
  #layers-panel,
  #search-panel {
    display: none !important;
  }
  .sheet-fab {
    display: inline-flex;
  }
}

@media (max-width: 414px) {
  .sheet-fab {
    bottom: calc(var(--timeline-height) + var(--space-3) + var(--space-2));
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  .bottom-sheet {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

@media (max-width: 375px) {
  .sheet-fab {
    left: var(--space-2);
    padding: var(--space-2);
  }
}

@media (max-width: 320px) {
  .sheet-fab {
    left: var(--space-2);
    font-size: var(--text-xs);
  }
  .bottom-sheet__tabs {
    padding: 0 var(--space-3) var(--space-2);
  }
}