/* Three opt-in previews share the dashboard's content and interactions. */
:root[data-design] {
  color-scheme: light;
  --ink: #1c2e46;
  --muted: #596b80;
  --paper: #f5f7fb;
  --surface: #ffffff;
  --line: #e1e7ef;
  --accent: #245dcc;
  --teal: #087f82;
  --rail: #ffffff;
  --soft: #f1f5fa;
  --selected: #eaf1ff;
  --accent-hover: #194cae;
  --negative: #bf414b;
  --warning: #99620b;
  --chart-primary: #245dcc;
  --chart-secondary: #087f82;
  --chart-tertiary: #7662aa;
  --chart-warning: #99620b;
  --chart-negative: #bf414b;
  --chart-ink: #1c2e46;
  --chart-muted: #596b80;
  --chart-line: #d5dfea;
  --chart-grid: #edf1f6;
  --chart-tooltip: #ffffff;
  --map-empty: #dce3eb;
  --map-border: #ffffff;
  --map-price-low: #e4edfc;
  --map-price-mid: #85a9e9;
  --map-price-high: #245dcc;
  --map-count-low: #e2f2ee;
  --map-count-mid: #72b7a9;
  --map-count-high: #087f82;
}

html[data-design] button,
html[data-design] input,
html[data-design] select { background: var(--surface); }
html[data-design] button:hover { background: var(--soft); border-color: #bac9da; }
html[data-design] :is(button, a, input, select, summary):focus-visible { outline-color: var(--accent); }
html[data-design] .primary,
html[data-design] .filters > button[type=submit] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
html[data-design] .primary:hover,
html[data-design] .filters > button[type=submit]:hover { background: var(--accent-hover); }
html[data-design] .topbar { background: var(--surface); }
html[data-design] h1 { font-weight: 700; }
html[data-design] h2 { font-size: 17px; font-weight: 650; }
html[data-design] .heading { margin-bottom: 24px; }
html[data-design] .navigation { border-right: 1px solid var(--line); color: var(--muted); }
html[data-design] .rail-brand { color: var(--ink); font-size: 19px; }
html[data-design] .rail-brand small,
html[data-design] .rail-note { color: var(--muted); }
html[data-design] .navigation button { background: transparent; font-weight: 500; }
html[data-design] .navigation button:hover { background: var(--soft); }
html[data-design] .navigation .active {
  background: var(--selected); color: var(--accent); box-shadow: none; font-weight: 700;
}
html[data-design] #compare-count { background: var(--soft); color: var(--muted); }
html[data-design] #recent-detail { border-color: var(--line); }
html[data-design] .kind-switch { background: var(--soft); }
html[data-design] .kind-switch button { background: transparent; color: var(--muted); }
html[data-design] .kind-switch button[aria-pressed=true] {
  background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px #1c2e4614;
}
html[data-design] .metrics { padding-top: 24px; padding-bottom: 24px; }
html[data-design] .metric strong,
html[data-design] #metrics .metric:nth-child(n) strong { color: var(--ink); font-weight: 700; }
html[data-design] .card .metrics,
html[data-design] .compare-table th,
html[data-design] .sample-strip span { background: var(--soft); }
html[data-design] .card .metric strong { font-size: 24px; }
html[data-design] #overview-breakdowns .card h2,
html[data-design] #overview-movers h2,
html[data-design] #overview-quality h2 { color: var(--ink); }
html[data-design] .tone-red,
html[data-design] .metric.tone-red strong,
html[data-design] .metric.tone-red small,
html[data-design] #metrics .metric.tone-red strong { color: var(--negative); }
html[data-design] .tone-green,
html[data-design] .metric.tone-green strong,
html[data-design] #metrics .metric.tone-green strong { color: var(--teal); }
html[data-design] .text-warning,
html[data-design] .tone-yellow,
html[data-design] .metric.tone-yellow strong,
html[data-design] .metric.tone-yellow small,
html[data-design] #metrics .metric.tone-yellow strong { color: var(--warning); }
html[data-design] .load-error { color: var(--negative) !important; }
html[data-design] .card { box-shadow: none; }
html[data-design] .section-links button { background: transparent; }
html[data-design] #metrics-toggle { background: transparent; }
html[data-design] .feature { border-left-color: var(--line); }
html[data-design] .compare-chip,
html[data-design] .compare-add[aria-pressed=true] {
  background: var(--selected); color: var(--accent); border-color: var(--line);
}
html[data-design] #compare-tray {
  background: var(--surface); color: var(--ink); border-color: var(--line);
  box-shadow: 0 6px 24px #1c2e4614;
}
html[data-design] #open-comparison { background: var(--accent); color: #fff; border-color: var(--accent); }
html[data-design] #clear-comparison { color: var(--muted); border-color: var(--line); }
html[data-design] #feedback { background: var(--ink); color: #fff; }
html[data-design] dialog { background: var(--surface); box-shadow: 0 16px 64px #1c2e4626; }
html[data-design] .map-stage,
html[data-design] .map-chart { background: #eef3f7; }
html[data-design] .map-controls,
html[data-design] .map-legend { background: #fffffff2; border-color: var(--line); }
html[data-design] .boundary-key { color: var(--warning); }
html[data-design] .map-help .boundary-key:before { background: var(--warning); }
html[data-design] .district-label span { background: #fffffff0; color: var(--ink); }
html[data-design] .leaflet-tooltip.map-value-tooltip {
  color: var(--ink); background: var(--surface); border-color: var(--line);
}
html[data-design] .leaflet-control-attribution { background: #fffffff0 !important; color: var(--muted); }
html[data-design] .leaflet-control-attribution a { color: var(--accent); }
html[data-design] .leaflet-control-scale-line {
  background: #fffffff0; color: var(--muted); border-color: var(--muted);
}

/* The comparison control is shared, quiet, and preserves the current query. */
.design-preview {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 24px; margin: 0 0 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.design-caption { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.design-caption strong { font-size: 12px; font-weight: 650; color: var(--ink); }
.design-caption > span { font-size: 12px; color: var(--muted); }
.design-options { display: flex; flex-wrap: wrap; gap: 6px; }
.design-options a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); background: var(--surface); text-decoration: none; font-size: 12px;
}
.design-options a:hover { border-color: var(--accent); color: var(--accent); }
.design-options a[aria-current=page] {
  color: var(--accent); border-color: var(--accent); background: var(--selected); font-weight: 650;
}

/* A: white navigation, blue selection, generous but consistent spacing. */
html[data-design=clarity] main { padding: 28px 36px 48px; }
html[data-design=clarity] .card { border-radius: 12px; padding: 26px; }
html[data-design=clarity] .context-bar { border-radius: 8px; }
html[data-design=clarity] #metrics { border-top: 3px solid var(--accent); border-radius: 8px; }
html[data-design=clarity] .navigation .active { box-shadow: inset 3px 0 var(--accent); }

/* B: an analytical workspace, anchored by a navy navigation rail. */
:root[data-design=research] {
  --ink: #233247; --muted: #586779; --paper: #f1f3f6; --line: #dce2e9;
  --accent: #315477; --accent-hover: #233f5c; --selected: #e9eff5;
  --rail: #182c43; --soft: #f0f3f6;
  --chart-primary: #315477; --chart-secondary: #2a817b;
  --map-price-low: #e7edf3; --map-price-mid: #8ea8c2; --map-price-high: #315477;
}
html[data-design=research] .navigation { border: 0; color: #b8c8d9; padding-top: 32px; }
html[data-design=research] .rail-brand { color: #fff; }
html[data-design=research] .rail-brand small,
html[data-design=research] .rail-note { color: #b8c8d9; }
html[data-design=research] .navigation button { border-radius: 5px; }
html[data-design=research] .navigation button:hover { background: #243d58; }
html[data-design=research] .navigation .active { background: #2c4866; color: #fff; box-shadow: inset 3px 0 #a9c5e4; }
html[data-design=research] #compare-count { background: #36516e; color: #e2edf8; }
html[data-design=research] #recent-detail { border-color: #3d536c; }
html[data-design=research] main { padding: 24px 28px 40px; }
html[data-design=research] h1 { font-size: 26px; }
html[data-design=research] .heading { margin-bottom: 18px; }
html[data-design=research] .card { border-radius: 5px; padding: 22px; }
html[data-design=research] .metrics,
html[data-design=research] .context-bar { border-radius: 5px; }
html[data-design=research] #metrics { border-top: 3px solid #315477; padding-top: 20px; padding-bottom: 20px; }
html[data-design=research] .section-links { gap: 28px; }
html[data-design=research] .section-links button { font-size: 13px; }
html[data-design=research] .complex-row { padding-top: 14px; padding-bottom: 14px; }

/* C: a wide regional atlas, with horizontal navigation on desktop. */
:root[data-design=atlas] {
  --ink: #183d40; --muted: #526f72; --paper: #f5f9f8; --line: #dce8e5;
  --accent: #086c66; --accent-hover: #07544f; --teal: #086c66;
  --selected: #e4f2ee; --soft: #eff6f3;
  --chart-primary: #086c66; --chart-secondary: #4979a5; --chart-ink: #183d40;
  --chart-muted: #526f72; --chart-line: #d2e3dc; --chart-grid: #eaf1ee;
  --map-price-low: #e4f2ed; --map-price-mid: #82b7a8; --map-price-high: #086c66;
  --map-count-low: #e6eef7; --map-count-mid: #91b1d2; --map-count-high: #4979a5;
}
html[data-design=atlas] .card { border-radius: 10px; padding: 28px; }
html[data-design=atlas] h1 { font-weight: 650; letter-spacing: -.04em; }
html[data-design=atlas] #metrics { border: 0; background: var(--selected); border-radius: 10px; padding: 28px 0; }
html[data-design=atlas] .context-bar { background: transparent; padding: 12px 0; border-width: 1px 0; border-radius: 0; }
html[data-design=atlas] .chart-grid { gap: 24px; }
html[data-design=atlas] .section-links { gap: 32px; }

@media (min-width: 901px) {
  html[data-design=atlas] body { display: flex; flex-direction: column; }
  html[data-design=atlas] .topbar { width: 100%; padding-left: max(32px, calc((100vw - 1376px) / 2)); padding-right: max(32px, calc((100vw - 1376px) / 2)); }
  html[data-design=atlas] .navigation {
    position: static; height: auto; width: 100%; flex-direction: row; align-items: center;
    padding: 0 max(32px, calc((100vw - 1376px) / 2)); gap: 28px;
    border: 0; border-bottom: 1px solid var(--line); background: var(--surface);
  }
  html[data-design=atlas] .rail-brand,
  html[data-design=atlas] .rail-note { display: none; }
  html[data-design=atlas] .navigation button {
    min-height: 54px; padding: 12px 2px; border-radius: 0;
    border-bottom: 3px solid transparent; font-size: 13px; gap: 8px;
  }
  html[data-design=atlas] .navigation svg { width: 18px; height: 18px; }
  html[data-design=atlas] .navigation .active { background: transparent; border-bottom-color: var(--accent); }
  html[data-design=atlas] #recent-detail { margin: 0 0 0 auto; border-top: 0; }
  html[data-design=atlas] main { max-width: 1440px; margin: 0 auto; padding: 28px 32px 52px; min-height: calc(100dvh - 126px); }
  html[data-design=atlas] .heading { margin-top: 32px; margin-bottom: 28px; }
  html[data-design=atlas] h1 { font-size: 32px; }
  html[data-design=atlas] footer { width: 100%; max-width: 1440px; margin: auto; }
  html[data-design=atlas] #compare-tray { left: 32px; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .design-preview { align-items: flex-start; }
  html[data-design=clarity] main { padding-left: 24px; padding-right: 24px; }
  html[data-design=atlas] .navigation { gap: 24px; }
}
@media (max-width: 900px) {
  html[data-design] .navigation {
    border-right: 0; background: var(--surface); color: var(--muted); box-shadow: none;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  html[data-design] .navigation .active { background: var(--selected); color: var(--accent); box-shadow: none; }
  html[data-design] .navigation button:hover { background: var(--soft); }
  html[data-design] #compare-count { background: var(--selected); color: var(--accent); }
  html[data-design] main { padding: 24px 24px 110px; }
  html[data-design] .card { padding: 22px; }
  html[data-design] #metrics { padding-top: 20px; padding-bottom: 20px; }
}
@media (max-width: 600px) {
  html[data-design] main { padding: 18px 14px 110px; }
  html[data-design] h1 { font-size: 23px; }
  html[data-design] h2 { font-size: 16px; }
  html[data-design] .heading { margin: 0 0 16px; }
  .design-preview { gap: 10px; margin-bottom: 22px; padding-bottom: 14px; }
  .design-caption > span { font-size: 11px; }
  .design-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .design-options a { padding: 6px; font-size: 11px; min-height: 38px; }
  html[data-design] .card { padding: 18px 14px; border-radius: 8px; }
  html[data-design] .context-bar { padding: 12px; }
  html[data-design=atlas] .context-bar { padding: 12px 0; }
  html[data-design] .metrics,
  html[data-design] #metrics { padding: 0; }
  html[data-design] .metric strong { font-size: 25px; }
  html[data-design] .card .metric strong { font-size: 22px; }
  html[data-design] .chart-grid { gap: 14px; }
  html[data-design] .section-links { gap: 22px; }
  html[data-design] .compare-table th { background: transparent; }
}