/* ── Cambium Design System tokens ─────────────────────────────────────────────
   Transcribed from the Cambium Design System (Cambium.fig extraction), teal
   theme — the treatment live on www.cambium.ai (petrol ground, green accents,
   bone paper). Colorway roles in this app:
     GREEN  = the brand: chrome, historical certified results (2020/22/24)
     GOLD   = simulated / projected data (the 2026 LLM-persona poll)
     ORANGE = actions (panel action buttons + the Action · D / R views)
   Map vote-share fills stay red/blue (partisan semantics), but on a polished
   brand-anchored ramp (see app.js DEM_SHARE_STOPS), not stock ColorBrewer. */
:root {
  /* petrol — the dark brand ground */
  --petrol-900: #051C23;

  /* greens — the live cambium.ai accent family */
  --teal-700: #034C41;
  --teal-600: #067060;
  --teal-500: #0BBBA0;
  --teal-400: #0CE3C3;
  --teal-200: #A3FFCE;
  --bone-100: #F1F2ED;

  /* blues — the Dem side of the map ramp, kept for text accents */
  --blue-900: #033D6B;
  --blue-800: #064D90;

  /* map-red — the Rep side of the map ramp (deep, for text accents) */
  --map-red-800: #9E2B1B;

  /* gold — simulated / projected */
  --gold-700: #A07B2D;
  --gold-500: #DAB462;
  --gold-300: #EBD69D;
  --gold-050: #FBF4E1;

  /* orange — actions */
  --orange-500: #F05A28;
  --orange-050: #FDEFE8;

  /* neutrals + warm text */
  --neutral-000: #FFFFFF;
  --neutral-025: #FAFAFA;
  --neutral-050: #F5F5F5;
  --neutral-100: #EDF0F5;
  --neutral-300: #D9D9D9;
  --umber-900: #1A0E05;
  --umber-600: #5E4535;

  --text-heading: var(--umber-900);
  --text-body: #252324;
  --text-muted: var(--umber-600);
  --text-eyebrow: var(--teal-600);
  --border-hairline: rgba(5, 28, 35, 0.16);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-brand: cubic-bezier(0.2, 0, 0.2, 1);
}

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-body);
  background: var(--neutral-000);
}

#map { position: absolute; inset: 0; }

/* ── Side panel ─────────────────────────────────────────────────────────── */
/* Flat surface per the design system (no shadows); a petrol hairline
   separates it from the basemap. */
#panel {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  background: var(--neutral-000);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  padding: 16px 18px;
  width: 284px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* Brand header — petrol band with the teal lockup, echoing www.cambium.ai */
#brand {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; margin: 0 0 12px;
  background: var(--petrol-900);
  border-radius: 14px;
}
#brand-logo { width: 132px; height: auto; display: block; }
.brand-text { display: flex; align-items: baseline; gap: 8px; line-height: 1.2; min-width: 0; }
#brand-title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--neutral-000);
}
#brand-link { font-size: 11px; color: var(--teal-200); text-decoration: none; }
#brand-link:hover { color: var(--teal-400); text-decoration: underline; }

#panel .subtitle { margin: 0 0 12px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }

/* ── Search box (ZIP / place / state) ───────────────────────────────────── */
#search-wrap { position: relative; margin: 0 0 12px; }
#search-input {
  width: 100%; box-sizing: border-box;
  padding: 7px 12px; font-size: 12px;
  font-family: var(--font-ui);
  border: 1px solid var(--neutral-300); border-radius: 6px;
  background: var(--neutral-000); color: var(--text-body);
}
#search-input::placeholder { color: var(--text-muted); }
#search-input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 2px var(--teal-200);
}
#search-results {
  display: none; position: absolute; z-index: 20; top: calc(100% + 3px);
  left: 0; right: 0; max-height: 240px; overflow-y: auto;
  background: var(--neutral-000); border: 1px solid var(--neutral-300);
  border-radius: 6px;
}
.search-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.search-item:hover { background: var(--bone-100); }
.search-sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); flex-shrink: 0;
}

/* ── Panel action buttons ("How to use" + "Copy link") — ORANGE, pills ──── */
.panel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
#tour-btn, #share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--orange-500);
  border-radius: 30px; background: var(--neutral-000);
  color: var(--orange-500); font-family: var(--font-ui);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background 160ms var(--ease-brand), color 160ms var(--ease-brand),
              opacity 160ms var(--ease-brand);
}
#tour-btn:hover, #share-btn:hover {
  background: var(--orange-500);
  color: var(--neutral-000);
}
#tour-btn:active, #share-btn:active { transform: scale(0.985); }

/* ── Driver.js tour popover — Cambium theming ────────────────────────────── */
.driver-popover { border-radius: 20px; font-family: var(--font-ui); }
.driver-popover-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-heading);
}
.driver-popover-description { font-size: 12.5px; line-height: 1.55; color: var(--text-body); }
.driver-popover-progress-text { color: var(--text-muted); }
.driver-popover-next-btn,
.driver-popover-prev-btn {
  text-shadow: none; border-radius: 30px; font-size: 12px; font-weight: 600;
  padding: 4px 12px;
}
.driver-popover-next-btn {
  background: var(--teal-500); color: var(--petrol-900);
  border: 1px solid var(--teal-500);
}
.driver-popover-next-btn:hover { opacity: 0.88; background: var(--teal-500); }

/* ── Year / office toggles ──────────────────────────────────────────────── */
.ctrl-group { margin-bottom: 14px; }
.ctrl-label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-eyebrow); margin-bottom: 5px;
}

.btn-row { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-row button {
  flex: 1 1 auto;
  padding: 6px 0; border: 1px solid var(--neutral-300);
  border-radius: 6px; background: var(--neutral-000); cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; color: var(--text-body);
  transition: background 160ms var(--ease-brand), border-color 160ms var(--ease-brand),
              color 160ms var(--ease-brand);
}
.btn-row button:hover:not(.active):not(:disabled) { background: var(--neutral-050); }
.btn-row button:active:not(:disabled) { transform: scale(0.985); }

/* GREEN — the brand accent: historical / observed years and offices */
.btn-row button.active {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--petrol-900); font-weight: 600;
}

/* GOLD — the simulated 2026 poll. Reads as its own category even at rest. */
#year-btns button.poll-year {
  flex-basis: 100%;
  border-color: var(--gold-500);
  color: var(--gold-700);
  background: var(--gold-050);
  font-weight: 500;
}
#year-btns button.poll-year small {
  font-weight: 400; color: var(--text-muted); margin-left: 4px;
}
#year-btns button.poll-year:hover:not(.active) { background: var(--gold-300); }
#year-btns button.poll-year.active {
  background: var(--gold-500); border-color: var(--gold-500);
  color: var(--petrol-900); font-weight: 600;
}
#year-btns button.poll-year.active small { color: var(--petrol-900); }

/* In polls mode every non-action metric is simulated → gold active state. */
body.mode-polls #office-btns button.active {
  background: var(--gold-500); border-color: var(--gold-500);
  color: var(--petrol-900);
}

/* ORANGE — the Action · D / Action · R views (always, in any mode). */
#office-btns button.act-office { border-color: var(--orange-500); color: var(--orange-500); }
#office-btns button.act-office:hover:not(.active):not(:disabled) { background: var(--orange-050); }
#office-btns button.act-office.active,
body.mode-polls #office-btns button.act-office.active {
  background: var(--orange-500); border-color: var(--orange-500);
  color: var(--petrol-900); font-weight: 600;
}
#office-btns button:disabled { cursor: default; }

/* Gold "simulated poll" note shown while the 2026 poll is active */
.polls-note {
  display: none;
  margin: 8px 0 0; padding: 8px 12px;
  border-radius: 10px;
  background: var(--gold-050);
  border: 1px solid var(--gold-300);
  font-size: 11px; line-height: 1.5; color: var(--text-body);
}
body.mode-polls .polls-note { display: block; }
.polls-note-title {
  display: block;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold-700);
  margin-bottom: 2px;
}

/* ── Layer toggles ──────────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-eyebrow);
  margin: 12px 0 5px;
}
label.layer-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; cursor: pointer;
  padding: 3px 4px; border-radius: 4px;
}
label.layer-toggle:hover { background: var(--bone-100); }
label.layer-toggle input { accent-color: var(--teal-600); }
.ov-chip {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  flex-shrink: 0;
}

/* ── Legend ─────────────────────────────────────────────────────────────── */
#legend {
  margin: 12px 0 2px;
  font-size: 11px; color: var(--text-muted);
}
#legend .legend-title { margin-bottom: 4px; font-weight: 500; color: var(--text-body); }
.legend-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.swatch {
  display: inline-block; width: 16px; height: 12px; border-radius: 2px;
  flex-shrink: 0; border: 1px solid rgba(5, 28, 35, 0.08);
}

/* ── Precinct detail (right panel) ──────────────────────────────────────── */
.detail-panel {
  position: absolute; top: 12px; bottom: 12px; z-index: 11;
  width: 340px;
  box-sizing: border-box;
  background: var(--neutral-000);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  padding: 18px 20px 22px;
  overflow-y: auto;
  transition: transform 220ms var(--ease-brand), opacity 220ms var(--ease-brand);
}
#detail   { right: 12px; }             /* primary / newest */
#detail-2 { right: 364px; }            /* comparison / previous (to the left of #detail) */
.detail-panel.hidden {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
.detail-close {
  position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; line-height: 22px;
  border: 1px solid var(--neutral-300); border-radius: 6px;
  background: var(--neutral-000); cursor: pointer;
  font-size: 18px; color: var(--text-muted);
}
.detail-close:hover { background: var(--neutral-050); color: var(--text-body); }

/* When a panel is open, keep the map controls clear of the right edge */
body.detail-open .maplibregl-ctrl-top-right,
body.detail-open .maplibregl-ctrl-bottom-right { margin-right: 352px; }

/* Comparison panel only where there's room beside the control panel */
@media (max-width: 980px) { #detail-2 { display: none; } }

/* Detail header */
.d-header { margin: 0 24px 12px 0; }
.d-eyebrow {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-eyebrow);
}
.d-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-heading); margin-top: 2px;
}
.d-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.d-note { font-size: 10px; font-style: italic; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }

/* Gold "simulated" chip at the top of a polls-mode detail panel */
.sim-badge {
  display: inline-block;
  margin: 0 0 10px; padding: 3px 10px;
  border-radius: 30px;
  background: var(--gold-050); border: 1px solid var(--gold-500);
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold-700);
}

/* Shared metric grid (also used by the detail panel) */
.popup-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.popup-grid { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.popup-key { color: var(--text-muted); }
.popup-val { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.popup-section {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-eyebrow);
  grid-column: 1 / -1; border-top: 1px solid var(--neutral-100);
  padding-top: 8px; margin-top: 10px;
}

/* Demographic composition bars */
.d-bars { margin-top: 8px; }
.bar { margin: 7px 0; }
.bar-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.bar-head small { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.bar-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-track { height: 7px; border-radius: 4px; background: var(--neutral-100); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }

/* Example messaging (action view) */
.msg-theme { font-size: 12px; font-weight: 600; margin: 6px 0 3px; color: var(--text-heading); }
.msg-body { font-size: 12px; line-height: 1.5; }

/* Hover-help affordance: labels/factors that carry a title tooltip */
.has-tip { cursor: help; }
.popup-section.has-tip,
.legend-title.has-tip,
.bar-head span.has-tip {
  text-decoration: underline dotted rgba(5, 28, 35, 0.3);
  text-underline-offset: 2px;
}

/* "What primary drivers are / how they're ranked" intro above the model bars */
.drv-intro {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 2px 0 9px;
}

/* Primary drivers — signed attribution bars (blue → D, red → R) */
.drv-headline { font-size: 12px; margin: 6px 0 2px; }
.drv-headline small { color: var(--text-muted); }
.drv-row { margin: 7px 0; cursor: help; }
.drv-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.drv-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.drv-track {
  position: relative; height: 7px; border-radius: 4px; background: var(--neutral-100);
}
.drv-track::before {
  content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px;
  width: 1px; background: var(--neutral-300);
}
.drv-fill { position: absolute; top: 0; height: 100%; }
.drv-fill.d { left: 50%; background: var(--blue-800); border-radius: 0 4px 4px 0; }
.drv-fill.r { right: 50%; background: var(--map-red-800); border-radius: 4px 0 0 4px; }

.drv-retry {
  font-size: 10px; padding: 1px 10px; margin-left: 4px;
  border: 1px solid var(--neutral-300); border-radius: 30px;
  background: var(--neutral-000); cursor: pointer;
  font-family: var(--font-ui);
}
.drv-retry:hover { background: var(--neutral-050); }

@media (max-width: 640px) {
  #detail { width: auto; left: 12px; right: 12px; max-height: 55vh; top: auto; }
  #detail-2 { display: none; }   /* no room for side-by-side compare on small screens */
  body.detail-open .maplibregl-ctrl-top-right,
  body.detail-open .maplibregl-ctrl-bottom-right { margin-right: 0; }
}

/* ── Loading indicator ──────────────────────────────────────────────────── */
#loading {
  position: absolute; bottom: 20px; right: 20px; z-index: 10;
  background: var(--neutral-000); border: 1px solid var(--border-hairline);
  border-radius: 30px;
  padding: 6px 14px; font-size: 12px; color: var(--text-muted);
  display: none;
}

/* ── Attribution nudge (move above the panel area) ─────────────────────── */
.maplibregl-ctrl-bottom-left { left: 316px; }

/* ── Embed mode (?embed=1) ──────────────────────────────────────────────── */
/* For the map inside a card on another page. Both panels go: the host page
   already carries the year, office, legend and every number the detail panel
   would show, and at card width they would cover the precinct the card
   exists to show. The selected precinct still gets its highlight outline —
   that is the point of the card — and "open the full map" restores the
   panels. */
html.embed #panel,
html.embed .detail-panel { display: none !important; }
/* The whole canvas opens the full viewer, so it reads as one link. */
html.embed .maplibregl-canvas { cursor: pointer; }
html.embed .maplibregl-ctrl-bottom-left { left: 0; }
html.embed body.detail-open .maplibregl-ctrl-top-right,
html.embed body.detail-open .maplibregl-ctrl-bottom-right { margin-right: 0; }

/* Drivers 'how it was built' expander */
.drv-method { margin: 4px 0 2px; }
.drv-method > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: var(--teal-600); }
.drv-method > summary:hover { color: var(--teal-500); }