/* ─── CSS CUSTOM PROPERTIES ──────────────────────────── */
:root {
  --header-h:86px; /* header bar height; panels below use 100vh minus this */
  --bg:#EFEFEF;
  --surf:#FFFFFF;
  --surf2:#EEF1F7;
  --t1:#0F1923;
  --t2:#4B5A70;
  --t3:#8A96AA;
  --border:#DDE3EE;
  --accent:#2A3587;
  --cta:#2A3587;
  --header-bg:#000000;
  --header-text:#FFFFFF;
  --header-icon:#FFFFFF;
  --transit:#2A3587;
  --equity:#BD312D;
  --compare:#1A7F3A;
  --side-bg:#EFEFEF;
  --side-text:#000000;
  --side-muted:rgba(0,0,0,.55);
  --side-tint:rgba(0,0,0,.05);
  --hover-bg:#1e272e;
  --hover-text:#FFFFFF;
  --eq-red:#BD312D;
  --eq-blue:#2A3587;
  --eq-orange:#EA580C;
  --eq-green:#16A34A;
  --eq-purple:#7C3AED;
  --chart-red:#E53935;
  --chart-green:#16A34A;
  --chart-orange:#EA580C;
}

html.dark, :root[data-theme="dark"] {
  --bg:#161616;
  --surf:#1A1A1A;
  --surf2:#242424;
  --t1:#E8EDF5;
  --t2:#8A96AA;
  --t3:#5A6477;
  --border:#333333;
  --accent:#7B8FE8;
  --cta:#7B8FE8;
  --header-bg:#000000;
  --header-text:#FFFFFF;
  --header-icon:#FFFFFF;
  --side-bg:#1F1F1F;
  --side-text:#FFFFFF;
  --side-muted:rgba(255,255,255,.6);
  --side-tint:rgba(255,255,255,.08);
  --hover-bg:#2A2A2A;
  --hover-text:#FFFFFF;
  --eq-red:#BD312D;
  --eq-orange:#FB923C;
  --eq-green:#4ADE80;
  --eq-purple:#A78BFA;
  --eq-blue:#7B8FE8;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not(.light) {
    --bg:#161616;
    --surf:#1A1A1A;
    --surf2:#242424;
    --t1:#E8EDF5;
    --t2:#8A96AA;
    --t3:#5A6477;
    --border:#333333;
    --accent:#7B8FE8;
    --cta:#7B8FE8;
    --header-bg:#000000;
    --header-text:#FFFFFF;
    --header-icon:#FFFFFF;
    --side-bg:#1F1F1F;
    --side-text:#FFFFFF;
    --side-muted:rgba(255,255,255,.6);
    --side-tint:rgba(255,255,255,.08);
    --hover-bg:#2A2A2A;
    --hover-text:#FFFFFF;
    --eq-red:#BD312D;
    --eq-orange:#FB923C;
    --eq-green:#4ADE80;
    --eq-purple:#A78BFA;
    --eq-blue:#7B8FE8;
  }
}

/* ─── SHARED BASE ─────────────────────────────────────── */
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  font-family:'Sora',sans-serif;
  height:100vh;
  overflow:hidden;
  background:var(--bg,#f0f2f5);
  color:var(--t1,#0F1923);
  transition:background .25s ease,color .25s ease;
}

.view {
  display:none;
  height:100vh;
  overflow:hidden;
}

.view.active {
  display:block;
}

.container {
  display:flex;
  gap:0;
  flex-wrap:wrap;
  align-content:start;
  height:100vh;
  overflow:hidden;
  padding:0;
}

/* Equity view: no container override needed — uses flex-wrap:wrap like transit */

/* ── Header (nth-child(1)) ── */
.item:nth-child(1) {
  width:100%;
  height:var(--header-h);
  background:var(--header-bg,#000000);
  border-bottom:12px solid var(--panel,#2A3587);
  border-radius:0;
  display:flex;
  align-items:center;
  padding:0 24px;
  color:var(--header-text,#FFFFFF);
  font-weight:600;
  font-size:32px;
  gap:12px;
  flex-shrink:0;
  position:relative;
}

.header-view-label {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  color:#FFFFFF;
  pointer-events:none;
  text-transform:uppercase;
}

/* Panel colour — drives header stroke, tabs and sidebar heading */
#view-transit { --panel:var(--transit); }
#view-equity  { --panel:var(--equity); }
#view-compare { --panel:var(--compare); }

/* ── Logo: white artwork on the black header (public/assets/logo.svg + wordmark.svg) ── */
.logo-home-btn img { display:block; width:auto; }

.header-right {
  margin-left:auto;
  display:flex;
  gap:12px;
  align-items:center;
}

.header-btn, .header-btn-auth {
  background:transparent;
  color:var(--header-icon,#2A3587);
  font-size:12px;
  padding:4px 12px;
  border-radius:6px;
  cursor:pointer;
  border:none;
  transition:transform .2s ease;
}

.header-btn:hover, .header-btn-auth:hover {
  transform:scale(1.4);
}

.header-btn2 {
  background:#1A7F3A;
  color:#FFFFFF;
  font-size:12px;
  padding:8px 16px;
  border-radius:16px;
  cursor:pointer;
  border:none;
  transition:transform .2s ease;
  font-weight:700;
  font-family: 'Sora';
}

.header-btn2:hover {
  transform:scale(1.05);
}

.header-breadcrumb {
  background:rgba(255,255,255,.12);
  border: none;
  border-radius:9999px;
  padding:7px 16px;
  margin-left:16px;
  color:#FFFFFF;
  font-size:12px;
  font-weight:600;
  font-family:'Sora',sans-serif;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}

.header-breadcrumb:hover {
  background:rgba(255,255,255,.2);
  transform:scale(1.03);
}


html.dark .cmp-compare-heading, [data-theme="dark"] .cmp-compare-heading {
  color:#1A7F3A;
}

/* ══ VIEW 1 — TRANSIT METRICS ═══════════════════════════
nth-child(2) = left sidebar
nth-child(3) = right panel
════════════════════════════════════════════════════════ */
#view-transit .item:nth-child(2) {
  width:25%;
  height:calc(100vh - var(--header-h));
  background:var(--side-bg);
  color:var(--side-text);
  border-radius:0;
  padding:20px 16px;
  overflow-y:auto;
  flex-shrink:0;
}

#view-transit .item:nth-child(3) {
  flex-grow:1;
  height:calc(100vh - var(--header-h));
  background:var(--surf,white);
  border-radius:0;
  display:flex;
  flex-direction:column;
  padding:20px;
  gap:12px;
  overflow-y:auto;
  position:relative;
}


/* ── Transit sidebar ── */
.title-container {
  display:flex;
  align-items:center;
  padding:0 4px;
  margin-bottom:24px;
  background:transparent;
  border-bottom:3px solid var(--panel,#2A3587);
  padding-bottom:16px;
}

.sidebar-title {
  font-size:26px;
  font-weight:800;
  width:100%;
  padding:0;
  letter-spacing:-0.01em;
  color:var(--panel,#2A3587);
}

.sidebar-rows {
  display:flex;
  gap:10px;
  flex-direction:column;
}

.row-item {
  width:100%;
  padding:0 0 14px;
}

.section-label {
  display:block;
  width:100%;
  padding:0 4px;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:10px;
  color:var(--cat-color,var(--side-text));
}

.sub-label {
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  margin:6px 0 4px;
  display:block;
  color:var(--t3);
}

.metric-rows {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 4px;
}

.metric-row {
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
  height:24px;
}

.metric-row .icon {
  height:100%;
  width:18px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  color:var(--cat-color,var(--side-text));
}

.metric-row .label {
  height:100%;
  flex-grow:1;
  display:flex;
  align-items:center;
  font-size:13px;
  font-weight:400;
  color:var(--side-text);
}

.metric-row .value {
  height:100%;
  display:flex;
  align-items:center;
  font-size:13px;
  font-weight:600;
  color:var(--side-text);
  white-space:nowrap;
}

/* Category colour — applied to the section label text and its icons */
.sec-access,   .freq-grp-access  { --cat-color:#4D57D7; }
.sec-travel,   .freq-grp-travel  { --cat-color:#469FE1; }
.sec-journey,  .freq-grp-journey { --cat-color:#10A2BC; }
.sec-vehicle,  .freq-grp-vehicle { --cat-color:#0FBE8C; }
.sec-transfers,.freq-grp-xfers   { --cat-color:#2D974B; }

/* ── Tab bar ── */
.tab-bar {
  display:flex;
  margin:4px 0 16px;
  width:100%;
}

/* Transit tabs sit flush against the top/sides of the sidebar */
#view-transit .tab-bar {
  margin:-20px -16px 20px;
  width:auto;
}

/* Panel tabs (transit + equity) — rectangular, panel colour.
   Averages fills the row alone; halves once Frequency appears (state selected) */
.tab-btn,
.mode-btn {
  flex:1;
  text-align:center;
  padding:12px 10px;
  font-size:12px;
  font-weight:700;
  font-family:'Sora',sans-serif;
  text-transform:uppercase;
  white-space:nowrap;
  border:none;
  border-radius:0;
  background:color-mix(in srgb, var(--panel,#2A3587) 80%, transparent);
  color:rgba(255,255,255,.8);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}

.tab-btn:hover,
.tab-btn:focus-visible,
.mode-btn:hover,
.mode-btn:focus-visible {
  color:#FFFFFF;
}

.tab-btn.active,
.mode-btn.active {
  background:var(--panel,#2A3587);
  color:#FFFFFF;
}

.tab-view {
  display:none;
}

.tab-view.active {
  display:block;
}

/* ── Frequency accordion ── */
#tab-frequency {
  color:var(--side-text);
}

.freq-rows {
  display:flex;
  flex-direction:column;
  gap:0;
}

.freq-group {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

/* Group label = same coloured text label as the Averages tab */
.freq-group-label {
  display:block;
  width:100%;
  padding:0 4px;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--cat-color,var(--side-text));
  margin-bottom:6px;
}

.freq-item {
  border-radius:8px;
  overflow:hidden;
}

.freq-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  font-size:13px;
  font-weight:400;
  color:var(--side-text);
  cursor:pointer;
  user-select:none;
  background:var(--side-tint);
  border-radius:8px;
  transition:background .15s;
}

.freq-header:hover { background:color-mix(in srgb, var(--side-tint), var(--side-text) 6%); }

.freq-chevron {
  font-size:10px;
  color:var(--cat-color,var(--side-text));
  transition:transform .2s;
}

.freq-chevron.open {
  transform:rotate(180deg);
}

.freq-body {
  display:none;
  padding:10px 12px;
  background:var(--side-tint);
  border-radius:0 0 8px 8px;
}

.freq-body.open {
  display:block;
}

/* ── Frequency bar charts ── */
.mchart {
  padding:4px 0 8px;
}

.mc-inner {
  display:flex;
  gap:4px;
  align-items:flex-end;
}

.mc-y {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:90px;
  font-size:10px;
  color:var(--t3,#999);
  padding-right:4px;
  flex-shrink:0;
}

.mc-bars {
  display:flex;
  gap:4px;
  align-items:flex-end;
  height:90px;
  flex:1;
}

.mc-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  gap:2px;
  justify-content:flex-end;
  height:100%;
  min-width:0;
}

.mc-bar {
  width:100%;
  border-radius:2px 2px 0 0;
  min-height:4px;
}

.mc-lbl {
  font-size:9px;
  color:var(--t3,#999);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  max-width:100%;
}

.mc-title {
  font-size:9px;
  color:var(--t3,#999);
  text-align:center;
  margin-top:4px;
}

/* ── Transit right panel toolbar ──
   Skeleton layout: [category + metric | legends] / divider */
.mtoolbar {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(160px,1fr);
  gap:12px 24px;
  flex-shrink:0;
}

.mpick {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  min-width:0;
}

.mtoolbar-legend {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.mtoolbar-divider {
  grid-column:1 / -1;
  border:0;
  border-top:2px solid var(--transit);
  margin:4px 0 0;
}

.mpick-label,
.mpick-metric-label {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  color:#1D2668;
  white-space:nowrap;
  text-align:left;
  letter-spacing:0;
}

.mpick-metric-label {
  margin-top:4px;
}

/* Category pill row — auto-width, left-aligned */
.transit-cat-group {
  display:flex;
  flex-direction:row;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.transit-cat-pill {
  flex:0 0 auto;
  text-align:center;
  padding:6px 16px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  font-family:'Sora',sans-serif;
  border:none;
  border-radius:0;
  cursor:pointer;
  background:#EDEDED;
  color:#8A8A8A;
  transition:background .15s,color .15s,transform .15s;
  white-space:nowrap;
}

.transit-cat-pill:hover {
  transform:scale(1.05);
}

/* Metric select — pill tinted with the active category colour (set in JS) */
.msel {
  border:none;
  border-radius:0;
  padding:6px 34px 6px 16px;
  font-size:11px;
  font-weight:700;
  font-family:inherit;
  background-color:#4D57D7;
  color:#FFFFFF;
  cursor:pointer;
  outline:none;
  width:auto;
  min-width:180px;
  max-width:100%;
  display:block;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}

.msel:focus-visible {
  outline:2px solid #1D2668;
  outline-offset:2px;
}

.msel option {
  background:#FFFFFF;
  color:#000000;
}

.tgap {
  flex:1;
}

.legend-box {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.litem {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--t2,#555);
}

.lsw {
  width:14px;
  height:14px;
  border-radius:3px;
  flex-shrink:0;
}

/* ── Map breadcrumb ── */
.map-bc {
  display:none;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:4px 0;
  flex-shrink:0;
  font-size:12px;
  color:var(--t3,#999);
}

.map-bc.visible {
  display:flex;
}

.bc-btn {
  background:transparent;
  border:none;
  padding:3px 4px;
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
  color:var(--t1);
  font-weight:700;
  transition:color .15s;
}

.bc-btn:hover {
  color:var(--accent,#2A3587);
  background:transparent;
}

.bc-sep {
  color:var(--t3);
}

.bc-state-crumb {
  font-weight:700;
  color:var(--t1);
  font-size:12px;
  cursor:default;
}
.bc-state-crumb.at-county {
  cursor:pointer;
  color:var(--t1);
}
.bc-state-crumb.at-county:hover {
  color:var(--accent,#2A3587);
}

.bc-current {
  font-weight:700;
  color:var(--t1);
  font-size:12px;
}

/* ── 50-state grid ── */
.state-panel-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}

.state-panel-hint {
  font-size:11px;
  color:var(--t3,#a4b0be);
  text-align:right;
  margin-left:auto;
}

.equity-cta-row {
  display:none;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.equity-cta-btn {
  background:#BD312D;
  color:white;
  border:none;
  border-radius:8px;
  padding:10px 22px;
  font-size:14px;
  font-weight:600;
  font-family:'Sora',sans-serif;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background .2s ease,transform .2s ease;
}

.equity-cta-btn:hover {
  background:#9B1F1C;
  transform:scale(1.02);
}

/* Equity floating pill — over the map, below the toolbar border */
.equity-hdr-btn {
  position:absolute;
  bottom:20px;
  right:20px;
  z-index:10;
  background:#BD312D;
  color:white;
  border:none;
  border-radius:9999px;
  padding:10px 24px;
  font-size:13px;
  font-weight:700;
  font-family:'Sora',sans-serif;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s ease;
}

.equity-hdr-btn:hover {
  transform:scale(1.05);
}

.state-grid-50 {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:6px;
  width:100%;
}

.state-btn-50 {
  background:var(--surf2,#e8eaed);
  border:2px solid transparent;
  border-radius:6px;
  padding:10px 4px;
  font-size:12px;
  font-weight:600;
  color:var(--t2,#555);
  cursor:pointer;
  text-align:center;
  font-family:'Sora',sans-serif;
  transition:background .15s,color .15s,transform .15s;
}

.state-btn-50:hover {
  background:var(--hover-bg,#1e272e);
  color:var(--hover-text,white);
  transform:scale(1.06);
}

/* ── D3 geographic map ── */
.map-area-d3 {
  width:100%;
  flex:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  min-height:0;
  position:relative;
}

.us-map-svg {
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
}

.us-map-svg:active {
  cursor:grabbing;
}

/* ── Map zoom controls ── */
.map-zoom-ctrls {
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:row;
  gap:8px;
  z-index:5;
}

.map-zoom-btn {
  width:26px;
  height:26px;
  background:#EDEDED;
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  line-height:1;
  color:var(--t2,#555);
  transition:background 0.15s;
  padding:0;
}

.map-zoom-btn:hover {
  background:#DCDCDC;
}

.map-zoom-btn svg {
  pointer-events:none;
}

/* ── Map dim: unselected states/counties fade on selection ── */
.map-state-path.dimmed {
  opacity:0.18;
}

.map-county-path.dimmed {
  opacity:0.45;
}

.map-state-path {
  cursor:pointer;
  stroke:#fff;
  stroke-width:0.5;
  transition:opacity 0.2s;
}

.map-state-path:hover {
  opacity:.8;
}

.map-state-path.selected {
  stroke:var(--accent,#2A3587);
  stroke-width:2.5;
  filter:brightness(.92);
}

.map-county-path {
  cursor:pointer;
  stroke:#fff;
  stroke-width:0.35;
  transition:opacity 0.2s;
}

.map-county-path:hover {
  opacity:.8;
}

.map-county-path.selected {
  stroke:var(--accent,#2A3587);
  stroke-width:2;
  filter:brightness(.92);
}

.map-county-path.no-data {
  cursor:default;
  opacity:.5;
}

.map-loading {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--t3);
  font-size:13px;
  height:200px;
  width:100%;
}

/* ── Map hover tooltip pill ── */
#map-tooltip {
  position:fixed;
  z-index:9999;
  pointer-events:none;
  background:var(--surf,#fff);
  color:var(--t1,#0F1923);
  border:1px solid var(--border,#DDE3EE);
  border-radius:999px;
  padding:5px 14px;
  font-size:12px;
  font-weight:600;
  font-family:'Sora',sans-serif;
  white-space:nowrap;
  opacity:0;
  transition:opacity .1s;
  transform:translateY(-50%);
}

#map-tooltip.tip-show {
  opacity:1;
}

/* ── Load-error notice (showLoadError) ── */
.load-error {
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:10000;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(560px, calc(100vw - 32px));
  padding:12px 16px;
  border-radius:10px;
  background:#7C2320;
  color:#FFFFFF;
  font-size:13px;
  font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}

.load-error[hidden] {
  display:none;
}

.load-error-close {
  background:none;
  border:none;
  color:#FFFFFF;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
}

/* ── Themed scrollbars ── */
#view-transit .item:nth-child(2),
#view-transit .item:nth-child(3),
#view-compare .item:nth-child(2),
.equity-sidebar, .graph-area {
  scrollbar-width:thin;
  scrollbar-color:var(--border,#DDE3EE) transparent;
}

#view-transit .item:nth-child(2)::-webkit-scrollbar,
#view-transit .item:nth-child(3)::-webkit-scrollbar,
#view-compare .item:nth-child(2)::-webkit-scrollbar,
.equity-sidebar::-webkit-scrollbar,
.graph-area::-webkit-scrollbar {
  width:5px;
  height:5px;
}

#view-transit .item:nth-child(2)::-webkit-scrollbar-track,
#view-transit .item:nth-child(3)::-webkit-scrollbar-track,
#view-compare .item:nth-child(2)::-webkit-scrollbar-track,
.equity-sidebar::-webkit-scrollbar-track,
.graph-area::-webkit-scrollbar-track {
  background:transparent;
}

#view-transit .item:nth-child(2)::-webkit-scrollbar-thumb,
#view-transit .item:nth-child(3)::-webkit-scrollbar-thumb,
#view-compare .item:nth-child(2)::-webkit-scrollbar-thumb,
.equity-sidebar::-webkit-scrollbar-thumb,
.graph-area::-webkit-scrollbar-thumb {
  background:var(--border,#DDE3EE);
  border-radius:999px;
}

html.dark #view-transit .item:nth-child(2)::-webkit-scrollbar-thumb,
html.dark #view-transit .item:nth-child(3)::-webkit-scrollbar-thumb,
html.dark #view-compare .item:nth-child(2)::-webkit-scrollbar-thumb,
html.dark .equity-sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] #view-transit .item:nth-child(2)::-webkit-scrollbar-thumb,
[data-theme="dark"] #view-transit .item:nth-child(3)::-webkit-scrollbar-thumb,
[data-theme="dark"] #view-compare .item:nth-child(2)::-webkit-scrollbar-thumb {
  background:#1E3040;
}

/* ── Dark mode: sidebars follow --side-bg / --side-text tokens ── */
html.dark #view-transit .item:nth-child(3),
[data-theme="dark"] #view-transit .item:nth-child(3),
html.dark #view-compare .item:nth-child(3),
[data-theme="dark"] #view-compare .item:nth-child(3),
html.dark .graph-area,
[data-theme="dark"] .graph-area { background:#111111; }


@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not(.light) #view-transit .item:nth-child(3),
  :root:not([data-theme="light"]):not(.light) #view-compare .item:nth-child(3),
  :root:not([data-theme="light"]):not(.light) .graph-area { background:#111111; }
}

/* ── Dark mode: sidebar title white — panel colours are too dark on the dark sidebar ── */
html.dark .sidebar-title,[data-theme="dark"] .sidebar-title { color:#FFFFFF; }

html.dark .mtoolbar-divider,[data-theme="dark"] .mtoolbar-divider { border-top-color:rgba(255,255,255,.25); }

/* ── Dark mode: TRANSIT labels white ── */
html.dark .mpick-label,[data-theme="dark"] .mpick-label,
html.dark .mpick-metric-label,[data-theme="dark"] .mpick-metric-label { color:#fff; }

/* ── Dark mode: inactive transit category pills ── */
html.dark .transit-cat-pill:not(.active),[data-theme="dark"] .transit-cat-pill:not(.active) { background:#2A2A2A; color:#919191; }

/* ── Dark mode: legend items + hint text ── */
html.dark .litem,[data-theme="dark"] .litem { color:#BCBCBC; }
html.dark .state-panel-hint,[data-theme="dark"] .state-panel-hint { color:#BCBCBC; }

/* ── Dark mode: dropdowns neutral (strip blue from --surf) ── */


/* ── Dark mode: zoom buttons neutral ── */
html.dark .map-zoom-btn,[data-theme="dark"] .map-zoom-btn { background:#1A1A1A; border-color:#333; color:#BCBCBC; }
html.dark .map-zoom-btn:hover,[data-theme="dark"] .map-zoom-btn:hover { background:#252525; }

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not(.light) .sidebar-title { color:#FFFFFF; }
  :root:not([data-theme="light"]):not(.light) .mpick-label,
  :root:not([data-theme="light"]):not(.light) .mpick-metric-label { color:#fff; }
  :root:not([data-theme="light"]):not(.light) .transit-cat-pill:not(.active) { background:#2A2A2A; color:#919191; }
  :root:not([data-theme="light"]):not(.light) .litem { color:#BCBCBC; }
  :root:not([data-theme="light"]):not(.light) .state-panel-hint { color:#BCBCBC; }
  :root:not([data-theme="light"]):not(.light) .mtoolbar-divider { border-top-color:rgba(255,255,255,.25); }
  :root:not([data-theme="light"]):not(.light) .map-zoom-btn { background:#1A1A1A; border-color:#333; color:#BCBCBC; }
  :root:not([data-theme="light"]):not(.light) .map-zoom-btn:hover { background:#252525; }
}

/* ── County grid ── */
.county-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:6px;
  width:100%;
  overflow-y:auto;
  flex:1;
  min-height:0;
}

.county-btn {
  background:var(--surf2,#e8eaed);
  border:2px solid transparent;
  border-radius:6px;
  padding:8px 6px;
  font-size:11px;
  font-weight:600;
  color:var(--t2,#555);
  cursor:pointer;
  text-align:center;
  font-family:'Sora',sans-serif;
  transition:background .15s,color .15s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.county-btn:hover {
  background:var(--hover-bg,#1e272e);
  color:var(--hover-text,white);
}

/* ══ VIEW 2 — EQUITY METRICS  (CSS Grid — reliable, no flex conflicts)
   #eq-body     = grid container: left-col (25%) | graph-area (1fr)
   #eq-left-col = sub-grid: tab-bar (auto) | sidebar (1fr)
   #eq-tab-bar  = tab buttons row
════════════════════════════════════════════════════════ */

/* Body row ─ two-column grid */
#eq-body {
  width: 100%;
  height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}

/* Left column ─ stacks tab-bar then sidebar (one dark red panel) */
#eq-left-col {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  overflow: hidden;
  background: var(--side-bg);
  color: var(--side-text);
}

/* Tab bar — flush rectangular tabs, styled with .tab-btn above */
#eq-tab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
}

/* Equity sidebar — fills remaining row after tab bar */
.equity-sidebar {
  overflow-y: auto;
  background: transparent;
  padding: 0 16px 24px;
  min-height: 0;
}

/* Graph / output area */
.graph-area {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surf, #ffffff);
}

/* "Selected state:" label + state pill-select */
.ctrl-state-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:34px;
}

.ctrl-state-label {
  font-size:14px;
  font-weight:600;
  color:var(--side-text);
  white-space:nowrap;
}

.eq-state-select {
  flex:1;
  min-width:0;
  font-family:'Sora',sans-serif;
  font-size:13px;
  font-weight:700;
  background-color:#BD312D;
  border:none;
  border-radius:9999px;
  padding:8px 34px 8px 16px;
  color:#FFFFFF;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

.eq-state-select option {
  background:#FFFFFF;
  color:#000000;
}

.eq-metric-group {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:4px;
}

.cluster-state-header {
  font-size:13px;
  font-weight:700;
  color:#BD312D;
  text-align:center;
  padding:6px 8px 4px;
  margin:0;
}

.eq-section-label {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:10px;
  display:block;
  color:var(--t1);
}

.control-group {
  margin-bottom:18px;
}

.equity-cat-group {
  display:flex;
  gap:8px;
  flex-direction:column;
  align-items:center;
}

.cat-pill {
  display:flex;
  width:100%;
  background:var(--surf2,#e8eaed);
  border:none;
  border-radius:6px;
  padding:8px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
  font-family:'Sora',sans-serif;
  color:var(--t1);
}

.cat-pill.on {
  background:#BD312D;
  color:white;
}

.cat-pill:hover:not(.on) {
  background:var(--surf2);
}

.pill-single {
  display:flex;
  width:100%;
  background:var(--surf2,#e8eaed);
  border:none;
  border-radius:6px;
  padding:8px 28px 8px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
  font-family:'Sora',sans-serif;
  color:var(--t1);
  outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.pill-single {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A96AA'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.pill-single option {
  background:var(--surf,#fff);
  color:var(--t1,#0F1923);
}

.view-btn,.run-btn {
  width:100%;
  color:#fff;
  border:none;
  border-radius:20px;
  background:#BD312D;
  padding:10px 0;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  transition:opacity .15s;
  background:#BD312D;
}

/* ── Control cards (equity + compare) — standard_card layout ─────────
   Background = category colour (set in JS via _paintCtrlCard, which also
   sets --card-color for the folder tab). */
.ctrl-card {
  position:relative;
  border-radius:0 20px 20px 20px;
  padding:18px 20px 20px;
  color:#FFFFFF;
  text-align:left;
  margin:30px 0 18px;
  background:#4D57D7;
}

/* Second card needs its own gap plus room for its folder tab */
.ctrl-card[data-tab] + .ctrl-card[data-tab] {
  margin-top:58px;
}

/* Folder tab above the card (equity cards carry data-tab="Transit|Equity") */
.ctrl-card[data-tab]::before {
  content:attr(data-tab);
  position:absolute;
  bottom:100%;
  left:0;
  padding:7px 24px;
  border-radius:20px 20px 0 0;
  background:color-mix(in srgb, var(--card-color,#4D57D7) 80%, transparent);
  color:rgba(255,255,255,.85);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ctrl-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.ctrl-card-title {
  font-size:16px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0;
}

.ctrl-card-icon {
  flex-shrink:0;
  width:44px;
  height:44px;
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ctrl-card-icon svg {
  width:44px;
  height:44px;
  fill:currentColor;
}

.ctrl-card-label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin:0 0 6px;
  color:#FFFFFF;
  text-align:left;
}

/* custom select shell */
.custom-select {
  position:relative;
  margin:0 0 12px;
  text-align:left;
}

.dependent-dropdown {
  width:100%;
}

/* Metric / sub-metric pills are shorter than the category pill */
.dependent-dropdown .custom-select {
  width:72%;
}

.dependent-dropdown.is-hidden {
  display:none;
}

/* trigger button — dark translucent pill */
.select-trigger {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:34px;
  padding:0 38px 0 16px;
  border:0;
  border-radius:9999px;
  color:#FFFFFF;
  background:rgba(0,0,0,.2);
  font-family:'Sora',sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}

.select-trigger:hover:not(:disabled) {
  background:rgba(0,0,0,.28);
}

.select-trigger:disabled {
  cursor:default;
  opacity:1;
}

.select-value {
  width:100%;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* chevron arrow */
.select-arrow {
  position:absolute;
  right:16px;
  width:8px;
  height:8px;
  border-right:2.5px solid #FFFFFF;
  border-bottom:2.5px solid #FFFFFF;
  transform:rotate(45deg) translateY(-3px);
  transition:transform 160ms ease;
  pointer-events:none;
}

.custom-select.is-open .select-arrow {
  transform:rotate(225deg) translate(-2px,-2px);
}

/* dropdown list */
.select-options {
  position:absolute;
  z-index:200;
  top:calc(100% + 4px);
  left:0;
  min-width:100%;
  width:max-content;
  max-width:280px;
  max-height:260px;
  overflow-y:auto;
  display:none;
  margin:0;
  padding:4px 0;
  border-radius:12px;
  background:#FFFFFF;
  list-style:none;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
}

.custom-select.is-open .select-options {
  display:block;
}

/* option items */
.select-option {
  padding:8px 14px;
  background:#FFFFFF;
  color:#000000;
  font-family:'Sora',sans-serif;
  font-size:12px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:background-color 100ms ease;
}

.select-option:hover,
.select-option:focus,
.select-option.is-selected {
  outline:none;
  background:#EFEFEF;
}

/* Primary sidebar action — panel-coloured button, white text */
.ctrl-action-btn {
  width:100%;
  color:#FFFFFF;
  border:none;
  border-radius:12px;
  padding:12px 20px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  transition:opacity .15s,transform .15s;
  background:var(--panel,#BD312D);
  margin-top:6px;
}

.ctrl-action-btn:hover:not(:disabled) {
  transform:scale(1.02);
}

/* ── end card dropdowns ───────────────────────────────────────────── */

.mc-y {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100px;
  font-size:9px;
  color:var(--t3,#999);
  padding-right:4px;
  flex-shrink:0;
  text-align:right;
}

.mc-bars {
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:100px;
  flex:1;
}

.mc-lbl {
  font-size:9px;
  color:var(--t3,#999);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  height:40px;
  max-width:100%;
  overflow:hidden;
  text-align:left;
}

/* Scatter + Cluster panels */
#chartArea {
  flex:1;
  display:flex;
  position:relative;
  width:100%;
  height:100%;
}

#scatterStateGrid {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  gap:6px;
  overflow:auto;
}

.tt {
  position:absolute;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:11px;
  padding:5px 8px;
  border-radius:5px;
  pointer-events:none;
  display:none;
  z-index:10;
  white-space:nowrap;
}

#clusterPanel {
  display:none;
  flex:1;
  flex-direction:column;
  width:100%;
  height:100%;
  overflow:auto;
}

/* Graph header (scatter + cluster): centered title, divider */
.graph-title {
  font-size:18px;
  font-weight:700;
  text-align:center;
  color:var(--t1);
  margin:0 0 12px;
}

.graph-title-vs {
  font-weight:400;
  color:var(--t3);
}

.graph-divider {
  border:0;
  border-top:2px solid var(--equity);
  margin:0 0 16px;
  flex-shrink:0;
}

.cluster-header {
  width:100%;
  margin-bottom:20px;
}

/* Cluster legend — quadrant pills with the thresholds for this selection */
.cluster-legend {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cluster-legend-pill {
  flex:1 1 180px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:14px 18px;
  border:none;
  border-radius:10px;
  color:#FFFFFF;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .12s, filter .12s;
}

.cluster-legend-pill:hover,
.cluster-legend-pill:focus-visible {
  transform:translateY(-1px);
  filter:brightness(1.06);
}

.cluster-legend-pill.is-light { color:#3D2E00; }

.cluster-legend-more {
  font-size:10px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  opacity:.95;
}

.cluster-legend-name {
  font-size:12px;
  font-weight:700;
}

.cluster-legend-rule {
  font-size:10px;
  opacity:.9;
}

.cluster-legend-note {
  margin-top:10px;
  font-size:11px;
  color:var(--t2);
}

.lsq {
  width:12px;
  height:12px;
  border-radius:2px;
  flex-shrink:0;
}

.cluster-bc {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  font-size:12px;
  flex-shrink:0;
}

.bc-crumb {
  background:none;
  border:1px solid var(--border,#e0e0e0);
  border-radius:999px;
  padding:3px 10px;
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
  color:var(--t2);
}

.bc-sep {
  color:var(--t3);
}

.bc-active-txt {
  font-weight:600;
  color:var(--t1);
}

#clusterMap {
  flex:1;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.map-nav {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:16px;
  width:100%;
}

.map-nav-label {
  font-size:12px;
  color:var(--t3,#8A96AA);
  text-align:center;
}

.county-nav {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:16px;
  width:100%;
}

.county-nav-label {
  font-size:12px;
  color:var(--t3,#8A96AA);
  font-weight:600;
}

.region-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:6px;
  width:100%;
  max-width:500px;
}

.region-btn {
  background:var(--surf2,#e8eaed);
  border:none;
  border-radius:6px;
  padding:8px 10px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s;
  color:var(--t1);
}

.region-btn:hover {
  background:var(--hover-bg,#1e272e);
  color:var(--hover-text,white);
}

/* ══ VIEW 3 — COMPARE ════════════════════════════════════
nth-child(2) = left sidebar
nth-child(3) = right panel
════════════════════════════════════════════════════════ */
#view-compare .item:nth-child(2) {
  width:25%;
  height:calc(100vh - var(--header-h));
  background:var(--side-bg);
  color:var(--side-text);
  border-radius:0;
  padding:24px 16px;
  overflow-y:auto;
  flex-shrink:0;
}

.cmp-side {
  display:flex;
  flex-direction:column;
  gap:24px;
}

.cmp-side-label {
  font-size:14px;
  font-weight:700;
  margin-bottom:14px;
}

/* Selected-state rows: abbreviation pill · full name · remove */
.cmp-state-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cmp-state-row {
  display:flex;
  align-items:center;
  gap:14px;
}

.cmp-state-name {
  flex:1;
  font-size:13px;
  font-weight:500;
}

.cmp-remove-btn {
  background:none;
  border:none;
  padding:4px;
  cursor:pointer;
  display:flex;
  opacity:.8;
  transition:opacity .15s,transform .15s;
}

.cmp-remove-btn:hover {
  opacity:1;
  transform:scale(1.15);
}

.cmp-remove-btn svg {
  width:11px;
  height:11px;
  stroke:var(--side-text);
  stroke-width:2.2;
  stroke-linecap:round;
}

.cmp-empty,
.cmp-sel-count {
  font-size:11px;
  color:var(--side-muted);
}

.cmp-sel-count {
  margin-top:12px;
}

.cmp-edit-btn {
  margin-top:12px;
  background:none;
  border:none;
  padding:0;
  font-family:'Sora',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--side-muted);
  cursor:pointer;
}

.cmp-edit-btn:hover {
  color:var(--side-text);
}

#view-compare .item:nth-child(3) {
  flex-grow:1;
  height:calc(100vh - var(--header-h));
  background:var(--surf,#ffffff);
  border-radius:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.sidebar-section {
  margin-bottom:28px;
}

.section-title {
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:8px;
  display:block;
  color:var(--t1);
}

.ctrl-label {
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--t3,#999);
}

.state-chip {
  background:#1A7F3A;
  color:#FFFFFF;
  border-radius:999px;
  min-width:50px;
  padding:5px 12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
}

.state-grid-wrap {
  flex:1;
  overflow:auto;
  padding:12px;
}

.state-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:6px;
}

.state-btn {
  background:var(--surf2,#e8eaed);
  border:none;
  border-radius:6px;
  padding:10px 4px;
  font-size:12px;
  font-weight:600;
  color:var(--t2,#555);
  cursor:pointer;
  text-align:center;
  font-family:'Sora',sans-serif;
  transition:background .15s;
}

.state-btn:hover {
  background:var(--hover-bg,#1e272e);
  color:var(--hover-text,white);
}

.state-btn.selected {
  background:#1A7F3A;
  color:#FFFFFF;
  border:2px solid #145f2c;
}

.state-btn.maxed {
  opacity:.4;
  pointer-events:none;
  cursor:not-allowed;
}

/* ── Compare D3 map ── */
.cmp-map-wrap {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  padding:4px 8px 8px;
  gap:6px;
}

.cmp-map-hint {
  font-size:12px;
  font-weight:400;
  color:var(--side-muted);
  flex-shrink:0;
  margin:0;
  padding:0;
  list-style-position:inside;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:3px;
  list-style-type:disc;
}

.cmp-map-container {
  width:50%;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  overflow:hidden;
}

.map-cmp-path {
  cursor:pointer;
  stroke:#fff;
  stroke-width:0.5;
  transition:fill .15s,opacity .12s;
}

.map-cmp-path:hover {
  opacity:.8;
}

.map-cmp-path.cmp-selected {
  fill:#1A7F3A !important;
  stroke:#145f2c;
  stroke-width:1.5;
}

.map-cmp-path.cmp-maxed {
  cursor:not-allowed;
  opacity:.35;
}

.comp-chart {
  flex:1;
  display:flex;
  flex-direction:column;
  background:transparent;
  border-radius:8px;
  overflow:hidden;
  min-height:0;
  margin:12px;
}

.chart-title {
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--t2,#666);
  padding:10px 12px 2px;
  text-align:center;
}

.chart-legend {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:4px 12px 8px;
  justify-content:center;
}

.leg-item {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:var(--t2,#666);
}

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

.leg-line {
  width:14px;
  height:3px;
  border-radius:2px;
  flex-shrink:0;
}

.chart-canvas-wrap {
  flex:1;
  position:relative;
  overflow:hidden;
  min-height:0;
}

.chart-canvas-wrap canvas {
  position:absolute;
  inset:60px 80px;
}


.cmp-compare-heading {
  font-size:15px;
  font-weight:700;
  letter-spacing:.3px;
  color:#9A7500;
  text-align:center;
  display:block;
}

.cmp-mode-row {
  display:grid;
  grid-template-columns:1fr 1fr;
}

.cmp-mode-btn {
  padding:8px 0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:none;
  border-radius:20px 20px 0 0;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  /* inactive tab: a light tint of the sidebar text colour, so it sits quietly on the sidebar in both themes */
  background:color-mix(in srgb, var(--side-text) 12%, transparent);
  color:var(--side-muted);
  transition:background .15s,color .15s;
}

.cmp-mode-btn:hover:not(.active) {
  color:var(--side-text);
  background:color-mix(in srgb, var(--side-text) 18%, transparent);
}

.cmp-mode-btn.active {
  background:color-mix(in srgb, var(--card-color,#4D57D7) 90%, #000);
  color:#FFFFFF;
}

/* Card sits flush under the tabs */
.cmp-metric-picker .ctrl-card {
  margin:0;
  border-radius:0 0 20px 20px;
}

.cmp-float-compare-btn {
  position:absolute;
  bottom:20px;
  left:20px;
  background:#1A7F3A;
  color:#FFFFFF;
  font-size:13px;
  padding:10px 24px;
  border-radius:9999px;
  border:none;
  cursor:pointer;
  z-index:10;
  transition:transform .2s ease;
  font-weight:700;
  font-family:'Sora';
}
.cmp-float-compare-btn:hover {
  transform:scale(1.05);
}

.cmp-add-counties-btn {
  width:100%;
  padding:8px 12px;
  border:1.5px solid var(--side-text);
  border-radius:9999px;
  background:none;
  color:var(--side-text);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .15s,color .15s,border-color .15s;
}

.cmp-add-counties-btn:hover,
.cmp-add-counties-btn.open {
  background:var(--side-tint);
}

#cmp-county-picker {
  padding:8px 2px 0;
}

.cmp-county-picker-group {
  margin-bottom:10px;
}

.cmp-county-picker-lbl {
  font-size:11px;
  font-weight:700;
  color:var(--side-text);
  margin-bottom:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.cmp-county-picker-count {
  font-size:10px;
  font-weight:400;
  color:var(--side-muted);
}

.cmp-county-list {
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:120px;
  overflow-y:auto;
}

.cmp-county-item {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--side-text);
  cursor:pointer;
  padding:2px 4px;
  border-radius:4px;
}

.cmp-county-item:hover {
  background:var(--side-tint);
}

.cmp-county-item input[type=checkbox] {
  accent-color:#1A7F3A;
  cursor:pointer;
}

.mc-pills {
  display:flex;
  gap:6px;
}

.mc-pill {
  flex:1;
  padding:7px 0;
  font-size:12px;
  font-weight:600;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  color:white;
  opacity:.45;
  transition:opacity .15s;
}

.mc-pill.on {
  opacity:1;
}

#mcTransit {
  background:var(--accent,#2A3587);
}

#mcEquity {
  background:#BD312D;
}

.sub-sel-wrap {
  position:relative;
}

.sub-sel-wrap select {
  width:100%;
  background:var(--surf2,#EEF1F7);
  border:1px solid var(--border,#DDE3EE);
  border-radius:6px;
  padding:8px 28px 8px 10px;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
  color:var(--t1);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A96AA'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  transition:border-color .15s;
}

.sub-sel-wrap select:focus {
  border-color:var(--accent,#2A3587);
}

.sub-sel-wrap select option {
  background:var(--surf2,#EEF1F7);
  color:var(--t1,#0F1923);
}

/* Racing Sans One for title */
.app-title {
  font-family:'Racing Sans One',sans-serif;
  font-size:28px;
  letter-spacing:1px;
}

/* Logo + wordmark home button */
.logo-home-btn {
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  flex-shrink:0;
  text-decoration:none;
  transition:opacity .15s ease;
}

.logo-home-btn:hover {
  opacity:.8;
}

/* ══ AUTH MODAL ══════════════════════════════════════════════════ */
.auth-overlay {
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.62);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.auth-overlay.open {
  opacity:1;
  pointer-events:all;
}

.auth-overlay .auth-card {
  background:#fff;
  border-radius:16px;
  width:100%;
  max-width:420px;
  overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,0.36);
  transform:translateY(18px);
  transition:transform .22s ease;
  max-height:90vh;
  overflow-y:auto;
}

.auth-overlay.open .auth-card {
  transform:translateY(0);
}

.auth-card .card-header {
  background:#1E2530;
  padding:28px 24px 24px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.auth-card .brand-logo {
  width:160px;
  flex-shrink:0;
}

.auth-card .brand-wordmark {
  width:260px;
  height:auto;
  margin-top:-36px;
}

.auth-close-btn {
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(255,255,255,0.14);
  border:none;
  color:#fff;
  border-radius:50%;
  width:30px;
  height:30px;
  cursor:pointer;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:background .15s;
  font-family:'Sora',sans-serif;
}

.auth-close-btn:hover {
  background:rgba(255,255,255,0.28);
}

.auth-card .tab-bar {
  display:flex;
  background:#f5f5f5;
  border-bottom:1px solid #e8e8e8;
  margin-bottom:4px;
}

.auth-card .tab {
  flex:1;
  padding:16px;
  text-align:center;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  color:#999;
  background:transparent;
  border:none;
  font-family:'Sora',sans-serif;
  transition:color .2s;
}

.auth-card .tab.active {
  background:#1E2530;
  color:#fff;
}

.auth-card .card-body {
  padding:28px 24px 24px;
}

.auth-card .ascreen {
  display:none;
}

.auth-card .ascreen.active {
  display:block;
}

.auth-card .progress-bar-wrap {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:24px;
  width:100%;
}

.auth-card .progress-segment {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.auth-card .progress-segment svg {
  width:28px;
  height:28px;
}

.auth-card .progress-track {
  width:100%;
  background:#e8e8e8;
  border-radius:2px;
  overflow:hidden;
  height:4px;
}

.auth-card .progress-fill {
  height:100%;
  background:#1E2530;
  border-radius:2px;
  width:0%;
  transition:width .3s ease;
}

.auth-card .progress-connector {
  flex:1;
  height:3px;
  background:#e8e8e8;
  position:relative;
  overflow:hidden;
}

.auth-card .progress-connector-fill {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:0%;
  background:#1E2530;
  transition:width .3s ease;
}

.auth-card .form-group {
  background:#f5f5f5;
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:10px;
}

.auth-card .form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.auth-card .form-row .form-group {
  margin-bottom:0;
}

.auth-card label {
  display:block;
  font-size:11px;
  color:#888;
  margin-bottom:4px;
  font-weight:500;
  font-family:'Sora',sans-serif;
}

.auth-card input, .auth-card select, .auth-card textarea {
  width:100%;
  border:none;
  background:transparent;
  font-size:14px;
  color:#1a1a1a;
  outline:none;
  font-family:'Sora',sans-serif;
}

.auth-card textarea {
  resize:none;
  height:80px;
}

.auth-card select {
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  padding-right:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0 center;
}

.auth-card .field-error {
  font-size:11px;
  color:#c0392b;
  margin-top:4px;
  display:none;
}

.auth-card .field-note {
  font-size:12px;
  color:#1A7F3A;
  margin-top:8px;
  display:none;
}

.auth-card .btn-primary {
  padding:14px 28px;
  background:#1E2530;
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  margin:10px auto 0;
  display:block;
  transition:opacity .2s;
  font-family:'Sora',sans-serif;
}

.auth-card .btn-primary:hover {
  opacity:.88;
}

.auth-card .btn-primary.full-width {
  width:100%;
}

.auth-card .auth-footer {
  text-align:center;
  margin-top:18px;
  font-size:13px;
  color:#666;
  line-height:2;
}

.auth-card .auth-footer a {
  color:#1E2530;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}

.auth-card .auth-footer .guest-link {
  font-style:italic;
  font-weight:400;
  color:#888;
}

.auth-card .auth-footer .guest-link span {
  font-weight:700;
  color:#1E2530;
  font-style:italic;
}

.auth-card .step-nav {
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}

.auth-card .btn-back {
  padding:14px 18px;
  background:#f0f0f0;
  color:#333;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  font-family:'Sora',sans-serif;
  flex-shrink:0;
}

.auth-card .btn-back:hover {
  background:#e4e4e4;
}

/* ── Equity panel: one-line description under the sidebar title ── */
.panel-blurb {
  margin:-12px 4px 20px;
  font-size:13px;
  line-height:1.45;
  color:var(--side-muted);
}

/* ── Scatter: note under the plot ── */
.graph-note {
  margin:0;
  padding-top:18px;
  font-size:11px;
  color:var(--t2);
  text-align:center;
}
.graph-title-unit {
  font-weight:400;
  color:var(--t2);
}

/* ── Cluster group popup ── */
.cl-pop-overlay {
  position:fixed;
  inset:0;
  z-index:9000;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.cl-pop {
  background:var(--surf);
  color:var(--t1);
  border-radius:14px;
  width:100%;
  max-width:520px;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 12px 48px rgba(0,0,0,.35);
}
.cl-pop-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  color:#fff;
}
.cl-pop-head.is-light { color:#3D2E00; }
.cl-pop-head h3 { margin:0; font-size:17px; font-weight:800; }
.cl-pop-head p { margin:4px 0 0; font-size:12px; opacity:.9; }
.cl-pop-close {
  background:none;
  border:none;
  color:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.cl-pop-body { padding:16px 20px 20px; font-size:13px; line-height:1.5; }
.cl-pop-body p { margin:0 0 12px; }
.cl-pop-body ul { margin:0 0 12px; padding-left:18px; }
.cl-pop-body li { margin-bottom:6px; }
.cl-pop-sub { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--t2); margin:14px 0 6px; }
.cl-pop-counties { font-size:12px; color:var(--t2); }

/* ── Compare: county search ── */
.cmp-county-chips {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:6px;
}
.cmp-county-chip {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 4px 2px 8px;
  font-size:11px;
  border-radius:999px;
  background:var(--side-tint);
  color:var(--side-text);
}
.cmp-county-chip button {
  border:none;
  background:none;
  color:var(--side-muted);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
}
.cmp-county-search {
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  font:inherit;
  font-size:12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surf);
  color:var(--t1);
}
.cmp-county-results {
  display:flex;
  flex-direction:column;
  margin-top:2px;
  max-height:220px;
  overflow-y:auto;
}
.cmp-county-result {
  text-align:left;
  border:none;
  background:none;
  font:inherit;
  font-size:12px;
  padding:4px 8px;
  border-radius:4px;
  color:var(--side-text);
  cursor:pointer;
}
.cmp-county-result:hover,
.cmp-county-result:focus-visible { background:var(--side-tint); }
.cmp-county-none { font-size:11px; color:var(--side-muted); padding:4px 8px; }

/* ── Auth: lead text, headings, reset link, code input ── */
.auth-card .auth-lead { font-size:13px; line-height:1.5; color:#555; margin:0 0 16px; }
.auth-card .auth-h { font-size:18px; font-weight:800; color:#1E2530; margin:0 0 8px; }
.auth-card .auth-forgot { text-align:right; margin-top:10px; font-size:12.5px; }
.auth-card .auth-forgot a { color:#1E2530; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.auth-card .auth-code { font-size:22px; letter-spacing:.35em; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.auth-card .btn-primary:disabled { opacity:.6; cursor:default; }

/* ── Metric info (i) buttons and popover ── */
.tv-info-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:4px; padding:0; flex-shrink:0;
  border-radius:50%; border:1.2px solid currentColor; background:transparent;
  font:italic 700 9.5px/1 Georgia,'Times New Roman',serif; color:inherit; opacity:.55;
  cursor:pointer; vertical-align:middle; transition:opacity .15s,transform .15s;
}
.tv-info-btn:hover, .tv-info-btn:focus-visible { opacity:1; transform:scale(1.12); }
.tv-info-onbar { color:var(--t2); margin-left:8px; width:18px; height:18px; font-size:11px; }
.tv-info-card { color:inherit; margin-left:auto; }
.tv-info-panel { margin-left:auto; width:22px; height:22px; font-size:12.5px; color:var(--t2); }
.tv-info-pop-panel { padding:16px 18px 14px; }
.tv-info-lead { color:var(--t2); }
.tv-info-list { margin-top:10px; border-top:1px solid var(--border); }
.tv-info-group {
  margin:12px 0 2px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--transit);
}
.tv-info-item { padding:7px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent); }
.tv-info-item:last-child { border-bottom:none; }
.tv-info-item-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tv-info-item-head b { font-size:12.5px; }
.tv-info-item .tv-info-mode { font-size:9px; padding:1px 6px; flex-shrink:0; }
.tv-info-pop .tv-info-item p { margin:3px 0 0; font-size:12px; line-height:1.45; }
.tv-info-item .tv-info-note { font-size:11.5px; }
.tv-info-pop .tv-mode-transit { color:color-mix(in srgb,var(--transit) 60%,var(--t1)); }
.metric-row { height:auto; min-height:24px; }
.metric-row .label { line-height:1.3; flex-wrap:wrap; }
.tv-info-pop {
  position:fixed; z-index:10000; background:var(--surf); color:var(--t1);
  border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  box-shadow:0 10px 32px rgba(0,0,0,.22); font-size:12.5px; line-height:1.5;
  max-height:70vh; overflow-y:auto;
}
.tv-info-pop[hidden] { display:none; }
.tv-info-pop h4 { margin:0 0 6px; font-size:14px; font-weight:700; }
.tv-info-pop p { margin:8px 0 0; }
.tv-info-note { color:var(--t2); }
.tv-info-src { color:var(--t3); font-size:11.5px; }
.tv-info-mode { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.tv-mode-transit { background:color-mix(in srgb,var(--transit) 14%,transparent); color:var(--transit); }
.tv-mode-car     { background:color-mix(in srgb,#EA580C 14%,transparent); color:#C2410C; }
.tv-mode-both    { background:color-mix(in srgb,#0FBE8C 16%,transparent); color:#0B8A66; }
.tv-mode-census  { background:color-mix(in srgb,var(--equity) 14%,transparent); color:var(--equity); }

/* ══ AI — assistant panel + chart analysis cards ═════════════════
   One look for everything AI: indigo → violet → pink accent, sparkle icon, compact text. */
:root {
  --ai-a:#4F46E5; --ai-b:#7C3AED; --ai-c:#DB2777;
  --ai-grad:linear-gradient(135deg,var(--ai-a) 0%,var(--ai-b) 55%,var(--ai-c) 100%);
  --ai-tint:color-mix(in srgb,var(--ai-b) 5%,var(--surf));
}
@keyframes tv-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ── Launcher ── */
.tvc-fab {
  position:fixed; right:20px; bottom:20px; z-index:8000;
  height:46px; padding:0 18px 0 14px; border-radius:999px; border:none; cursor:pointer;
  background:var(--ai-grad); color:#fff; display:flex; align-items:center; gap:8px;
  font:600 13px 'Sora',sans-serif; letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(79,70,229,.35); transition:transform .18s ease,box-shadow .18s ease;
}
.tvc-fab:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(79,70,229,.45); }
.tvc-fab svg { width:18px; height:18px; flex-shrink:0; }
body.tvc-open .tvc-fab { display:none; }

/* ── Panel ── */
.tvc-panel {
  position:fixed; right:20px; bottom:20px; z-index:8001;
  width:min(390px,calc(100vw - 32px)); height:min(590px,calc(100vh - 110px));
  background:var(--surf); color:var(--t1); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 24px 60px rgba(15,25,35,.28); display:flex; flex-direction:column; overflow:hidden;
  animation:tvc-in .18s ease-out;
}
@keyframes tvc-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.tvc-panel[hidden] { display:none; }
.tvc-head { display:flex; align-items:center; gap:6px; padding:10px 8px 10px 12px; position:relative; border-bottom:1px solid var(--border); }
.tvc-head::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ai-grad); }
.tvc-avatar { width:30px; height:30px; border-radius:10px; background:var(--ai-grad); color:#fff; display:grid; place-items:center; flex-shrink:0; margin-right:4px; }
.tvc-title { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.tvc-title strong { font-size:13.5px; }
.tvc-title span { font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvc-icon-btn { width:30px; height:30px; border:none; border-radius:9px; background:transparent; color:var(--t2); cursor:pointer; display:grid; place-items:center; font-size:14px; flex-shrink:0; }
.tvc-icon-btn:hover { background:var(--surf2); color:var(--t1); }
.tvc-history { max-height:45%; overflow-y:auto; border-bottom:1px solid var(--border); background:var(--surf2); padding:6px; }
.tvc-hrow { display:flex; align-items:stretch; gap:4px; }
.tvc-hopen { flex:1; min-width:0; text-align:left; border:none; background:none; padding:7px 10px; border-radius:9px; cursor:pointer; font:inherit; color:var(--t1); display:flex; flex-direction:column; }
.tvc-hopen span { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvc-hopen small { font-size:10.5px; color:var(--t3); }
.tvc-hopen:hover { background:var(--surf); }
.tvc-hdel { border:none; background:none; color:var(--t3); cursor:pointer; padding:0 10px; border-radius:9px; }
.tvc-hdel:hover { color:var(--equity); background:var(--surf); }
.tvc-body { flex:1; overflow-y:auto; padding:14px 14px 8px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; }
.tvc-welcome p { font-size:13px; line-height:1.55; margin:0; color:var(--t2); }
.tvc-welcome strong { color:var(--t1); }
.tvc-note { font-size:11.5px; color:var(--t2); background:var(--surf2); border-radius:10px; padding:8px 10px; margin:0; }
.tvc-resume {
  display:flex; flex-direction:column; gap:1px; width:100%; margin:0 0 12px; padding:8px 12px; text-align:left;
  border:1px solid color-mix(in srgb,var(--ai-b) 35%,var(--border)); border-radius:12px; background:var(--ai-tint);
  color:var(--t1); font:inherit; cursor:pointer; transition:border-color .15s;
}
.tvc-resume:hover { border-color:var(--ai-b); }
.tvc-resume span { font-size:12px; font-weight:700; color:var(--ai-b); }
.tvc-resume small { font-size:11.5px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvc-limit {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--t2); background:var(--surf2); border-radius:10px; padding:8px 10px;
}
.tvc-limit button {
  flex-shrink:0; border:none; border-radius:999px; padding:5px 12px; background:var(--ai-grad); color:#fff;
  font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
}
.tvc-msg { display:flex; flex-direction:column; max-width:100%; }
.tvc-user { align-items:flex-end; }
.tvc-bubble { font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.tvc-user .tvc-bubble { background:var(--ai-grad); color:#fff; padding:8px 12px; border-radius:16px 16px 4px 16px; max-width:85%; white-space:pre-wrap; }
.tvc-assistant .tvc-bubble { background:var(--surf2); padding:9px 12px; border-radius:16px 16px 16px 4px; max-width:96%; }
.tvc-bubble p { margin:0 0 7px; } .tvc-bubble p:last-child { margin-bottom:0; }
.tvc-bubble ul, .tvc-bubble ol { margin:4px 0 7px; padding-left:18px; }
.tvc-bubble li { margin-bottom:3px; }
.tvc-bubble code { font-size:11.5px; background:rgba(0,0,0,.07); padding:1px 5px; border-radius:4px; }
.tvc-bubble .tvc-h { font-weight:700; margin-top:6px; }
.tvc-table { overflow-x:auto; margin:6px 0 8px; }
.tvc-table table { border-collapse:collapse; font-size:11.5px; width:100%; }
.tvc-table th, .tvc-table td { border-bottom:1px solid var(--border); padding:4px 8px; text-align:left; white-space:nowrap; }
.tvc-table th { font-weight:700; }
.tvc-err { color:var(--equity); }
.tvc-typing { display:inline-flex; gap:4px; padding:4px 0; }
.tvc-typing i { width:6px; height:6px; border-radius:50%; background:var(--ai-b); opacity:.3; animation:tvc-blink 1.2s infinite ease-in-out; }
.tvc-typing i:nth-child(2) { animation-delay:.15s; } .tvc-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes tvc-blink { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }
.tvc-meta { display:flex; align-items:flex-start; gap:8px; margin-top:4px; font-size:11px; color:var(--t3); }
.tvc-meta:empty { display:none; }
.tvc-sources { flex:1; min-width:0; }
.tvc-sources summary { cursor:pointer; }
.tvc-sources p { margin:4px 0 0; color:var(--t2); line-height:1.45; }
.tvc-fb { display:flex; gap:2px; margin-left:auto; }
.tvc-fb button { border:none; background:none; cursor:pointer; padding:2px 4px; border-radius:6px; opacity:.45; font-size:12.5px; }
.tvc-fb button:hover, .tvc-fb button.on { opacity:1; background:var(--surf2); }
.tvc-input { display:flex; align-items:flex-end; gap:6px; margin:6px 12px 6px; padding:5px 5px 5px 12px; border:1px solid var(--border); border-radius:16px; background:var(--surf); transition:border-color .15s,box-shadow .15s; }
.tvc-input:focus-within { border-color:var(--ai-b); box-shadow:0 0 0 3px color-mix(in srgb,var(--ai-b) 15%,transparent); }
.tvc-input textarea { flex:1; resize:none; border:none; outline:none; padding:7px 0; font:inherit; font-size:13px; line-height:1.4; background:transparent; color:var(--t1); max-height:140px; }
.tvc-send { width:34px; height:34px; flex-shrink:0; border:none; border-radius:11px; background:var(--ai-grad); color:#fff; cursor:pointer; display:grid; place-items:center; }
.tvc-send svg { width:16px; height:16px; }
.tvc-send:disabled, .tvc-input textarea:disabled { opacity:.5; cursor:default; }
.tvc-foot { font-size:10px; color:var(--t3); text-align:center; padding:0 14px 9px; margin:0; }

/* ── Chart analysis card ── */
.tv-insight {
  /* the analysis text must not widen its flex column, or the map column wraps below the panel */
  contain:inline-size; max-width:100%;
  position:relative; margin-top:12px; padding:10px 12px 10px 12px; border-radius:14px; border:1px solid transparent;
  background:linear-gradient(var(--ai-tint),var(--ai-tint)) padding-box, var(--ai-grad) border-box;
  box-shadow:0 4px 16px rgba(79,70,229,.08); color:var(--t1); font-size:12.8px; line-height:1.55; text-align:left;
}
.tv-insight[hidden] { display:none; }
.tv-insight.is-idle { padding:0; box-shadow:none; cursor:pointer; }
/* "✦ AI ANALYSIS: <chart> · Analyze now ›" — centred on one line; only the chart name shortens to fit */
.tv-insight-bar {
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; min-height:44px;
  border:none; border-radius:13px; background:transparent; color:var(--t1); cursor:pointer;
  font:600 12.5px 'Sora',sans-serif; white-space:nowrap; transition:background .15s ease;
}
.tv-insight-bar:hover:not(:disabled) { background:color-mix(in srgb,var(--ai-b) 10%,transparent); }
.tv-insight-bar:hover:not(:disabled) .tv-insight-icon { transform:scale(1.08); }
.tv-insight-bar:focus-visible { outline:2px solid var(--ai-b); outline-offset:2px; }
.tv-insight-bar:disabled { cursor:default; }
.tv-insight-bar .tv-insight-icon { transition:transform .15s ease; }
.tv-insight-bar-name {
  flex-shrink:0; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--ai-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tv-insight-bar-label { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--t1); font-weight:600; }
.tv-insight-bar-go { flex-shrink:0; color:var(--ai-b); font-weight:700; }
.tv-insight-bar-go::before { content:'·'; color:var(--t3); font-weight:600; margin-right:8px; }
.tv-insight-bar-name + .tv-insight-bar-go::before { margin-left:0; }
.tv-insight-bar:disabled .tv-insight-bar-go { color:var(--t3); font-weight:600; }
.tv-insight-mini .tv-insight-bar { min-height:36px; padding:7px 10px; font-size:12px; gap:6px; }
.tv-insight-head { display:flex; align-items:center; gap:8px; min-height:24px; }
.tv-insight-icon { width:22px; height:22px; border-radius:7px; background:var(--ai-grad); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.tv-insight-title { flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; overflow:hidden; }
.tv-insight-title b {
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  background:var(--ai-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tv-insight-title small { font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-insight-ask { border:1px solid var(--border); background:var(--surf); color:var(--t2); border-radius:999px; padding:2px 10px; font:600 11px 'Sora',sans-serif; cursor:pointer; flex-shrink:0; }
.tv-insight-ask:hover { color:var(--ai-b); border-color:var(--ai-b); }
.tv-insight-toggle { border:none; background:none; color:var(--t3); width:24px; height:24px; border-radius:7px; cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:transform .2s ease; }
.tv-insight-toggle:hover { background:var(--surf); color:var(--t1); }
.tv-insight.is-collapsed .tv-insight-toggle { transform:rotate(180deg); }
.tv-insight.is-collapsed .tv-insight-main { display:none; }
.tv-insight-main { margin-top:6px; }
.tv-insight-body { max-height:calc(1.55em * 4); overflow:hidden; position:relative; }
.tv-insight.is-expanded .tv-insight-body { max-height:none; }
.tv-insight-main:has(.tv-insight-more:not([hidden])) .tv-insight-body::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.6em; pointer-events:none;
  background:linear-gradient(transparent,var(--ai-tint));
}
.tv-insight.is-expanded .tv-insight-body::after { display:none; }
.tv-insight-body p { margin:0 0 5px; } .tv-insight-body p:last-child { margin-bottom:0; }
.tv-insight-body ul, .tv-insight-body ol { margin:0 0 5px; padding-left:18px; }
.tv-insight-body li { margin-bottom:2px; }
.tv-insight-body strong { font-weight:700; }
.tv-insight-more { border:none; background:none; padding:3px 0 0; font:600 11.5px 'Sora',sans-serif; color:var(--ai-b); cursor:pointer; }
.tv-insight-more[hidden] { display:none; }
.tv-insight-note { margin:0; color:var(--t2); font-size:12px; }
.tv-insight-retry { margin-left:8px; border:none; background:var(--ai-grad); color:#fff; border-radius:999px; padding:3px 11px; font:600 11px 'Sora',sans-serif; cursor:pointer; vertical-align:middle; }
.tv-insight-skel i {
  display:block; height:8px; border-radius:5px; margin:6px 0;
  background:linear-gradient(90deg,var(--surf2) 25%,color-mix(in srgb,var(--ai-b) 22%,var(--surf2)) 50%,var(--surf2) 75%);
  background-size:200% 100%; animation:tv-shimmer 1.4s linear infinite;
}
.tv-insight-skel i:nth-child(1) { width:94%; } .tv-insight-skel i:nth-child(2) { width:100%; } .tv-insight-skel i:nth-child(3) { width:62%; }
/* placements */
.tv-insight-map { flex-shrink:0; margin:10px 0 0; }
.tv-insight-docked { flex-shrink:0; margin:0 24px 14px; }
.tv-insight-mini { margin:10px 0 2px; padding:8px 10px; font-size:12px; box-shadow:none; }
.tv-insight-mini .tv-insight-icon { width:18px; height:18px; border-radius:6px; }
.tv-insight-mini .tv-insight-icon svg { width:11px; height:11px; }
.tv-insight-mini .tv-insight-title small { display:none; }
.tv-insight-mini .tv-insight-body { max-height:calc(1.55em * 3); }
.tv-insight.is-guest { box-shadow:none; }

/* ══ MOBILE / TABLET ═════════════════════════════════════
   Panels stack: header → map / chart → sidebar; the page scrolls instead of each panel.
════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  :root { --header-h:60px; }
  body { height:auto; min-height:100vh; overflow-x:hidden; overflow-y:auto; }
  .view { height:auto; min-height:100vh; overflow:visible; }
  .container { height:auto; overflow:visible; }

  .item:nth-child(1) { padding:0 12px; border-bottom-width:6px; gap:6px; position:sticky; top:0; z-index:60; }
  .logo-home-btn { display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .logo-home-btn .logo-icon { height:36px; }
  .logo-home-btn .logo-wordmark { height:38px; }
  .header-view-label { display:none; }
  .header-right { gap:2px; min-width:0; }
  .header-btn, .header-btn-auth { padding:8px; }
  .header-btn:hover, .header-btn-auth:hover { transform:none; }
  .header-btn2 { padding:7px 12px; font-size:11px; }
  .header-breadcrumb { margin-left:4px; padding:6px 10px; font-size:11px; max-width:38vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  #view-transit .item:nth-child(2), #view-compare .item:nth-child(2) {
    width:100%; height:auto; overflow:visible; order:2; padding:20px 16px 90px;
  }
  #view-transit .item:nth-child(3), #view-compare .item:nth-child(3) {
    width:100%; height:auto; min-height:70vh; overflow:visible; order:1; padding:14px 12px;
  }
  #view-transit .tab-bar { margin:-20px -16px 20px; }
  .map-area-d3 { min-height:55vh; flex:none; }

  #eq-body { grid-template-columns:1fr; height:auto; overflow:visible; }
  #eq-left-col { overflow:visible; order:2; }
  .equity-sidebar { overflow:visible; padding-bottom:90px; }
  .graph-area { order:1; min-height:75vh; overflow:visible; }

  .county-grid { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); max-height:50vh; }
  .tv-insight-docked { margin:0 12px 12px; }

  .tvc-fab { right:14px; bottom:14px; height:44px; padding:0 15px 0 12px; font-size:12.5px; }
  .tvc-panel { right:0; bottom:0; width:100vw; height:100dvh; max-height:100dvh; border-radius:0; border:none; animation:none; }
  .tvc-input { margin-bottom:max(8px, env(safe-area-inset-bottom)); }
  .tv-insight-title small { display:none; }
  .tvc-input textarea { font-size:16px; }
  body.tvc-open { overflow:hidden; }

  .auth-overlay { padding:12px; align-items:flex-end; }
  .auth-overlay .auth-card { max-height:calc(100dvh - 24px); }
  .auth-card input, .auth-card select, .auth-card textarea { font-size:16px; }
  .tv-info-btn { width:18px; height:18px; font-size:11px; }
}

@media (max-width:560px) {
  .logo-home-btn .logo-wordmark { display:none; }
  .auth-card .form-row { flex-direction:column; gap:0; }
  .auth-card .card-header { padding:20px 20px 16px; }
  .auth-card .brand-logo { width:110px; }
  .cl-pop-overlay { padding:12px; }
}