:root {
  --od-bg: #282c34;
  --od-bg-deep: #1e2228;
  --od-surface: #2f343d;
  --od-text: #a7b5bc;
  --od-blue: #61afef;
  --od-cyan: #9cdef2;
  --od-purple: #c678dd;
  --od-green: #63c987;
  --od-red: #e06c75;
  --od-orange: #d19a66;
  --od-yellow: #f0ad4e;
  --bg-deep: var(--od-bg);
  --bg-panel: rgba(30, 34, 40, 0.96);
  --bg-panel-strong: rgba(24, 27, 32, 0.98);
  --bg-card: rgba(47, 52, 61, 0.96);
  --bg-card-hover: #363c46;
  --bg-track: rgba(156, 222, 242, 0.12);
  --border-soft: rgba(156, 222, 242, 0.18);
  --border-strong: rgba(156, 222, 242, 0.42);
  --text-main: #edf2f4;
  --text-muted: var(--od-text);
  --text-dim: #788b94;
  --accent-cyan: var(--od-cyan);
  --accent-blue: var(--od-blue);
  --accent-purple: var(--od-purple);
  --accent-mint: var(--od-green);
  --accent-coral: var(--od-red);
  --accent-orange: var(--od-orange);
  --accent-amber: var(--od-yellow);
  --state-info: var(--od-cyan);
  --state-success: var(--od-green);
  --state-warning: var(--od-yellow);
  --state-danger: #ff6b76;
  --state-danger-text: #ff8992;
  --interactive: var(--od-red);
  --interactive-soft: rgba(224, 108, 117, 0.14);
  --info-soft: rgba(156, 222, 242, 0.12);
  --success-soft: rgba(99, 201, 135, 0.12);
  --warning-soft: rgba(240, 173, 78, 0.14);
  --danger-soft: rgba(255, 107, 118, 0.14);
  --reference: #7f929a;
  --surface-raised: #303640;
  --surface-sunken: var(--od-bg-deep);
  --surface-highlight: rgba(255, 255, 255, 0.05);
  --text-on-accent: var(--od-bg-deep);
  --focus-ring: #f0989e;
  --shadow-color: rgba(8, 11, 15, 0.34);
  --chart-grid: rgba(156, 222, 242, 0.14);
  --chart-track: rgba(156, 222, 242, 0.1);
  --shadow-panel: 0 24px 80px rgba(8, 11, 15, 0.42);
  --scroll-track: rgba(24, 27, 32, 0.62);
  --scroll-thumb: rgba(156, 222, 242, 0.3);
  --scroll-thumb-hover: rgba(224, 108, 117, 0.68);
  --ink: var(--text-main);
  --muted: var(--text-muted);
  --panel: var(--bg-panel);
  --line: var(--border-soft);
  --shadow: var(--shadow-panel);
  --accent: var(--interactive);
  --soft: var(--bg-card);
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 13% 8%, color-mix(in srgb, var(--accent-blue) 14%, transparent), transparent 27%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--accent-purple) 9%, transparent), transparent 25%),
    radial-gradient(circle at 64% 92%, color-mix(in srgb, var(--accent-mint) 8%, transparent), transparent 30%),
    var(--bg-deep);
  color: var(--ink);
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.loading-value {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  vertical-align: baseline;
}

.loading-value span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.loading-spinner {
  animation: loading-spin 820ms linear infinite;
  border: 2px solid color-mix(in srgb, var(--accent-cyan) 34%, transparent);
  border-radius: 999px;
  border-top-color: var(--accent-mint);
  flex: 0 0 auto;
  height: 0.9em;
  width: 0.9em;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
    border-color: color-mix(in srgb, var(--accent-mint) 58%, transparent);
    border-top-color: var(--accent-mint);
  }
}

/* Critical Leaflet layout. Kept local so the map works even if CDN CSS is slow. */
.leaflet-container {
  font-family: inherit;
  outline-offset: 1px;
  overflow: hidden;
  position: relative;
  touch-action: pan-x pan-y;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  left: 0;
  position: absolute;
  top: 0;
}

.leaflet-map-pane {
  z-index: 400;
}

.leaflet-tile-pane {
  z-index: 200;
}

.leaflet-overlay-pane {
  z-index: 400;
}

.leaflet-shadow-pane {
  z-index: 500;
}

.leaflet-marker-pane {
  z-index: 600;
}

.leaflet-tooltip-pane {
  z-index: 650;
}

.leaflet-popup-pane {
  z-index: 700;
}

.leaflet-control {
  pointer-events: auto;
  position: relative;
  z-index: 800;
}

.leaflet-top,
.leaflet-bottom {
  pointer-events: none;
  position: absolute;
  z-index: 1000;
}

.leaflet-top {
  top: 0;
}

.leaflet-bottom {
  bottom: 0;
}

.leaflet-left {
  left: 0;
}

.leaflet-right {
  right: 0;
}

.leaflet-left .leaflet-control {
  margin-left: 16px;
}

.leaflet-right .leaflet-control {
  margin-right: 16px;
}

.leaflet-top .leaflet-control {
  margin-top: 16px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 16px;
}

.leaflet-tile {
  border: 0;
  max-width: none;
  user-select: none;
}

.leaflet-grab {
  cursor: grab;
}

.leaflet-dragging .leaflet-grab {
  cursor: grabbing;
}

.leaflet-interactive {
  cursor: pointer;
}

.leaflet-control-zoom {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.16);
  overflow: hidden;
}

.leaflet-control-zoom a {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  display: flex;
  font-size: 1.2rem;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  width: 40px;
}

.leaflet-control-zoom a + a {
  border-top: 1px solid var(--line);
}

.leaflet-control-zoom a:hover {
  background: #f8fafc;
}

.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 11px;
  padding: 2px 6px;
}

.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
}

.leaflet-popup-content {
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  margin: 11px 14px;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.app-shell {
  height: 100vh;
  position: relative;
  width: 100vw;
}

#map {
  background: var(--bg-deep);
  height: 100%;
  width: 100%;
}

.search-panel {
  backdrop-filter: blur(18px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  left: 24px;
  max-width: min(480px, calc(100vw - 48px));
  padding: 16px;
  position: absolute;
  top: 24px;
  width: 480px;
  z-index: 700;
}

.insight-panel {
  backdrop-filter: blur(18px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  bottom: 24px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 48px);
  max-width: min(440px, calc(100vw - 48px));
  overflow-y: auto;
  padding: 18px;
  position: absolute;
  right: 24px;
  transition:
    max-width 260ms ease,
    width 260ms ease;
  width: 440px;
  z-index: 690;
}

.insight-panel.detail-open {
  max-width: min(900px, calc(100vw - 48px));
  max-height: none;
  padding-top: 58px;
  top: 188px;
  width: min(900px, calc(100vw - 48px));
}

.insight-panel.entity-open {
  max-width: min(1280px, calc(100vw - 48px));
  padding-top: 58px;
  top: 188px;
  width: min(1280px, calc(100vw - 48px));
}

.panel-close {
  align-items: center;
  background: rgba(17, 24, 39, 0.06);
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  display: flex;
  font-size: 1.25rem;
  height: 34px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  z-index: 20;
}

.panel-close:hover {
  background: rgba(17, 24, 39, 0.1);
}

.insight-panel.detail-open .panel-close,
.insight-panel.entity-open .panel-close {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 920;
}

.profile-workspace {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.insight-panel.detail-open .profile-workspace {
  grid-template-columns: minmax(360px, 440px) minmax(340px, 1fr);
}

.insight-panel.entity-open .profile-workspace {
  grid-template-columns: minmax(260px, 360px) minmax(300px, 400px) minmax(320px, 1fr);
}

.profile-main {
  min-width: 0;
}

.profile-header {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  padding-right: 34px;
}

.profile-header h2 {
  font-size: 1.45rem;
  line-height: 1.05;
  margin: 0 0 8px;
}

.profile-header p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.42;
  margin: 0;
}

.profile-summary-link {
  color: var(--accent);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  margin-top: 9px;
  text-decoration: none;
}

.profile-summary-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.score-card {
  align-items: center;
  background: var(--surface-sunken);
  border-radius: 20px;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  height: 92px;
  justify-content: center;
  width: 92px;
}

.score-card span {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.score-card small {
  color: var(--text-muted);
  font-weight: 800;
}

.profile-evidence-card {
  align-self: start;
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 42%),
    var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 14px 34px rgba(0, 0, 0, 0.16);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
}

.profile-evidence-card span,
.profile-evidence-card small {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.2;
}

.profile-evidence-card strong {
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 940;
  line-height: 1.16;
}

.metric-sections {
  display: grid;
  gap: 20px;
  margin-top: 18px;
}

.metric-section {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  padding-top: 18px;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.metric-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.metric-section-header {
  align-items: start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 11px;
  margin-bottom: 10px;
  position: relative;
  text-align: left;
  transition:
    background 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
  width: 100%;
}

.metric-section-header:hover,
.metric-section-header:focus-visible,
.metric-section-header.active {
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.08), rgba(15, 118, 110, 0.04));
  border-color: rgba(20, 83, 45, 0.16);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
  outline: 0;
}

.metric-section-header:hover {
  transform: translateY(-1px);
}

.metric-section-header.active::before {
  background: var(--accent);
  border-radius: 999px;
  bottom: 12px;
  content: "";
  left: 0;
  position: absolute;
  top: 12px;
  width: 4px;
}

.metric-section-header h3 {
  font-size: 0.98rem;
  line-height: 1.15;
  margin: 0 0 4px;
}

.metric-section-header p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0;
}

.metric-section-count {
  align-items: center;
  background: #eef7f0;
  border: 1px solid #d7eadc;
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  min-width: 26px;
  padding: 0 8px;
  position: relative;
  transition:
    background 170ms ease,
    color 170ms ease,
    transform 170ms ease;
}

.metric-section-header:hover .metric-section-count,
.metric-section-header.active .metric-section-count {
  background: var(--accent);
  color: #fff;
  transform: scale(1.04);
}

.metric-section-count::before,
.metric-section-count::after {
  background: var(--accent);
  border-radius: 999px;
  bottom: -11px;
  content: "";
  height: 2px;
  position: absolute;
  right: 7px;
  width: 10px;
}

.metric-section-header:hover .metric-section-count::before,
.metric-section-header:hover .metric-section-count::after,
.metric-section-header.active .metric-section-count::before,
.metric-section-header.active .metric-section-count::after {
  background: #fff;
}

.metric-section-count::after {
  transform: rotate(90deg);
}

.metric-section-header.active .metric-section-count::after {
  transform: rotate(0deg);
}

.metric-card,
.housing-link,
.realtor-card {
  background: var(--soft);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
}

.metric-card small {
  color: var(--muted);
  display: block;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}

.metric-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card {
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-rows: auto auto 1fr;
  min-height: 108px;
  padding: 13px;
  position: relative;
  text-align: left;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.metric-card:hover,
.metric-card:focus-visible,
.metric-card.active {
  background: #eef7f0;
  border-color: rgba(20, 83, 45, 0.24);
  box-shadow: 0 12px 30px rgba(20, 83, 45, 0.12);
  outline: 0;
}

.metric-card:hover {
  transform: translateY(-1px);
}

.metric-card-top {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.metric-card-top small {
  margin-bottom: 0;
}

.metric-cue {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 24px;
  justify-content: center;
  position: relative;
  width: 24px;
}

.metric-cue::before,
.metric-cue::after {
  background: #334155;
  border-radius: 999px;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 10px;
}

.metric-cue::after {
  transform: rotate(90deg);
}

.metric-card.active .metric-cue {
  background: #14532d;
  border-color: #14532d;
}

.metric-card.active .metric-cue::before,
.metric-card.active .metric-cue::after {
  background: #fff;
}

.metric-card.active .metric-cue::after {
  transform: rotate(0deg);
}

.metric-card strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.14;
}

.metric-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
}

.detail-card {
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  padding: 14px;
}

.detail-card-side {
  align-self: start;
  max-height: calc(100vh - 96px);
  min-height: 280px;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

.entity-detail-side {
  align-self: start;
  max-height: calc(100vh - 136px);
  min-height: 320px;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

.detail-heading {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-heading h3 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0 0 5px;
}

.detail-heading p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.38;
  margin: 0;
}

.entity-detail-heading {
  align-items: start;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 34px;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.entity-detail-heading small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 5px;
}

.entity-detail-heading h3 {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.16;
  margin: 0;
  overflow-wrap: anywhere;
}

.entity-detail-heading p {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.3;
  margin: 5px 0 0;
}

.entity-detail-close {
  align-items: center;
  background: rgba(17, 24, 39, 0.06);
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.1rem;
  font-weight: 820;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.entity-detail-close:hover,
.entity-detail-close:focus-visible {
  background: rgba(17, 24, 39, 0.1);
  outline: 0;
}

.entity-detail-body {
  display: grid;
  gap: 12px;
}

.entity-detail-body > .school-data-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.entity-detail-body > .school-data-card > .school-card-heading {
  display: none;
}

.entity-generic-card {
  background: rgba(248, 250, 252, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.entity-generic-card p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.42;
  margin: 0;
}

.entity-generic-card a {
  color: #14532d;
  font-weight: 900;
  text-decoration: none;
}

.detail-heading > span,
.detail-meta-tags span {
  background: #f1f5f9;
  border-radius: 999px;
  color: #334155;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 850;
  height: fit-content;
  padding: 7px 9px;
}

.detail-meta-tags {
  align-content: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: min(260px, 46%);
}

.detail-meta-tags span {
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: inline-flex;
  line-height: 1.05;
}

.detail-metadata-note {
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  color: #64748b;
  display: flex;
  gap: 11px;
  margin-top: 16px;
  padding: 11px 13px;
}

.detail-metadata-note-icon {
  align-items: center;
  border: 2px solid #3b82f6;
  border-radius: 999px;
  color: #2563eb;
  display: inline-flex;
  flex: 0 0 22px;
  font-size: 0.78rem;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 22px;
}

.detail-metadata-note div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.detail-metadata-note p {
  font-size: 0.73rem;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-metadata-note strong {
  color: #334155;
  font-weight: 900;
}

.detail-metadata-note a {
  color: #1d4ed8;
  font-weight: 900;
  text-decoration: none;
}

.detail-metadata-note a:hover {
  text-decoration: underline;
}

.childhood-profile-visual {
  align-items: stretch;
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 16px;
}

.childhood-profile-copy {
  display: grid;
  gap: 7px;
}

.childhood-profile-copy small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.childhood-profile-copy strong {
  color: #0f172a;
  font-size: 1.4rem;
  line-height: 1.05;
}

.childhood-profile-copy p,
.childhood-profile-helper {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.childhood-profile-action {
  align-items: center;
  background: #14532d;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  text-decoration: none;
  width: fit-content;
}

.childhood-profile-action:hover {
  background: #166534;
}

.detail-stat-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0;
}

.detail-stat-grid.is-single {
  grid-template-columns: 1fr;
}

.detail-stat {
  background: linear-gradient(180deg, #f8fafc, #eef7f0);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  min-height: 94px;
  padding: 11px;
}

.detail-stat small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
}

.detail-stat strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.18;
}

.detail-stat span {
  align-self: end;
  background:
    linear-gradient(90deg, #14532d var(--bar), transparent var(--bar)),
    rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  display: block;
  height: 6px;
}

.detail-stat.is-plain {
  gap: 7px;
  min-height: 76px;
}

.housing-price-visual {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}

.housing-price-hero,
.housing-price-kpis article,
.housing-price-note {
  background:
    radial-gradient(circle at 0 0, rgba(94, 230, 168, 0.08), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.12);
  color: var(--text-main);
}

.housing-price-hero {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(116px, 0.42fr);
  overflow: hidden;
  padding: 16px;
}

.detail-card-side .housing-price-hero {
  grid-template-columns: 1fr;
}

.housing-price-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.housing-price-copy span,
.housing-price-status small,
.housing-price-kpis span,
.housing-price-note span {
  color: var(--text-muted);
  font-family: "SFMono-Regular", "Cascadia Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.housing-price-copy strong {
  color: var(--text-main);
  display: block;
  font-size: 1.75rem;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.housing-price-copy p,
.housing-price-note p {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.42;
  margin: 0;
}

.housing-price-status {
  align-content: center;
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
}

.housing-price-status b {
  color: var(--text-main);
  font-size: 1.22rem;
  line-height: 1.05;
}

.housing-price-status em {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.housing-price-status.is-positive b {
  color: var(--accent-mint);
}

.housing-price-status.is-negative b {
  color: var(--accent-coral);
}

.housing-price-status.is-muted b {
  color: var(--text-muted);
}

.housing-price-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.housing-price-kpis article {
  display: grid;
  gap: 7px;
  min-height: 108px;
  padding: 12px;
}

.housing-price-kpis strong {
  color: var(--text-main);
  font-size: 1.03rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.housing-price-kpis small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.34;
}

.housing-price-note {
  display: grid;
  gap: 7px;
  padding: 13px;
}

.fhi-comparison-visual {
  background:
    radial-gradient(circle at 18% 10%, var(--info-soft), transparent 34%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  display: grid;
  gap: 13px;
  margin: 12px 0 14px;
  padding: 14px;
}

.fhi-comparison-values {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.fhi-comparison-value,
.fhi-comparison-delta {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
}

.fhi-comparison-value small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.fhi-comparison-value strong {
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.05;
}

.fhi-comparison-delta {
  align-content: center;
  border-radius: 999px;
  color: var(--state-success);
  font-size: 0.76rem;
  font-weight: 950;
  justify-content: center;
  line-height: 1.15;
  min-width: 104px;
  text-align: center;
  white-space: normal;
}

.fhi-comparison-delta.is-positive {
  background: var(--success-soft);
}

.fhi-comparison-delta.is-negative {
  background: var(--danger-soft);
  color: var(--state-danger-text);
}

.fhi-comparison-delta.is-neutral {
  background: var(--info-soft);
  color: var(--state-info);
}

.fhi-comparison-scale {
  height: 38px;
  position: relative;
}

.fhi-comparison-track {
  background: var(--chart-track);
  border-radius: 999px;
  height: 11px;
  left: 0;
  position: absolute;
  right: 0;
  top: 13px;
}

.fhi-comparison-marker {
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--surface-raised), 0 8px 18px var(--shadow-color);
  height: 30px;
  position: absolute;
  top: 3px;
  transform: translateX(-50%);
  width: 5px;
}

.fhi-comparison-marker.is-local {
  background: var(--interactive);
  left: var(--local-pos);
  z-index: 2;
}

.fhi-comparison-marker.is-national {
  background: var(--state-info);
  height: 24px;
  left: var(--national-pos);
  top: 6px;
}

.fhi-comparison-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 850;
  gap: 8px 12px;
  justify-content: space-between;
}

.fhi-comparison-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.fhi-comparison-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.fhi-comparison-legend i.is-local {
  background: var(--interactive);
}

.fhi-comparison-legend i.is-national {
  background: var(--state-info);
}

.fhi-difference-visual {
  background:
    radial-gradient(circle at 20% 8%, var(--info-soft), transparent 34%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  margin: 12px 0 14px;
  padding: 14px;
}

.fhi-difference-hero {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.fhi-difference-hero div,
.fhi-difference-reference {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
}

.fhi-difference-hero small,
.fhi-difference-reference span,
.fhi-difference-ruler-labels {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
}

.fhi-difference-hero strong,
.fhi-difference-reference strong {
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1;
}

.fhi-difference-hero > span {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--state-success) 28%, var(--border-soft));
  border-radius: 999px;
  color: var(--state-success);
  font-size: 0.76rem;
  font-weight: 950;
  max-width: 150px;
  padding: 8px 11px;
  text-align: center;
}

.fhi-difference-visual.is-above .fhi-difference-hero > span {
  background: var(--danger-soft);
  color: var(--state-danger-text);
}

.fhi-difference-visual.is-neutral .fhi-difference-hero > span {
  background: var(--info-soft);
  color: var(--state-info);
}

.fhi-difference-reference {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}

.fhi-difference-ruler {
  display: grid;
  gap: 8px;
  padding: 2px 6px 0;
}

.fhi-difference-ruler-line {
  background: var(--chart-track);
  border-radius: 999px;
  height: 10px;
  position: relative;
}

.fhi-difference-ruler-line::before {
  background: linear-gradient(90deg, var(--interactive), var(--state-info));
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0.28;
  position: absolute;
}

.fhi-difference-ruler i {
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--surface-raised), 0 8px 18px var(--shadow-color);
  height: 26px;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  width: 5px;
}

.fhi-difference-ruler i.is-local {
  background: var(--interactive);
  left: var(--local);
  z-index: 2;
}

.fhi-difference-ruler i.is-national {
  background: var(--state-info);
  left: var(--national);
}

.fhi-difference-ruler-labels {
  display: flex;
  justify-content: space-between;
}

.life-expectancy-visual {
  background:
    radial-gradient(circle at 18% 10%, var(--info-soft), transparent 34%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  margin: 12px 0 14px;
  padding: 14px;
}

.life-highlight-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.life-highlight-card {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
}

.life-highlight-card small,
.life-line-label strong,
.life-age-card header span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.15;
}

.life-highlight-card strong {
  color: var(--ink);
  font-size: 1.22rem;
  line-height: 1.05;
}

.life-highlight-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.18;
}

.life-highlight-card span.is-positive {
  color: var(--state-success);
}

.life-highlight-card span.is-negative {
  color: var(--state-danger-text);
}

.life-expectancy-note {
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  border-radius: 14px;
  display: grid;
  gap: 4px;
  padding: 10px 11px;
}

.life-expectancy-note strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.15;
}

.life-expectancy-note p {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.34;
  margin: 0;
}

.infection-visual {
  background:
    radial-gradient(circle at 12% 0, var(--info-soft), transparent 34%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  display: grid;
  gap: 13px;
  margin: 12px 0 14px;
  padding: 14px;
}

.infection-hero {
  display: grid;
  gap: 9px;
  grid-template-columns: 1.05fr 1.35fr;
}

.infection-total,
.infection-context,
.infection-trend,
.infection-note {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
}

.infection-total {
  align-content: center;
  grid-row: span 2;
}

.infection-total small,
.infection-context span,
.infection-trend small,
.infection-note strong,
.infection-mix-row small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.18;
}

.infection-total strong {
  color: var(--ink);
  font-size: clamp(2rem, 8vw, 3.15rem);
  letter-spacing: 0;
  line-height: 0.95;
}

.infection-total span,
.infection-context small,
.infection-note p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  margin: 0;
}

.infection-context b,
.infection-trend strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.15;
}

.infection-trend {
  border-color: var(--border-soft);
}

.infection-trend.is-up {
  border-color: color-mix(in srgb, var(--state-danger) 32%, var(--border-soft));
}

.infection-trend.is-down {
  border-color: color-mix(in srgb, var(--state-success) 32%, var(--border-soft));
}

.infection-trend.is-up strong {
  color: var(--state-danger-text);
}

.infection-trend.is-down strong {
  color: var(--state-success);
}

.infection-mix {
  display: grid;
  gap: 10px;
}

.infection-mix-strip {
  background: var(--chart-track);
  border-radius: 999px;
  display: flex;
  height: 16px;
  overflow: hidden;
}

.infection-mix-segment {
  background: hsl(calc(158 + var(--mix-index) * 28), 74%, 58%);
  flex: var(--share) 1 0;
  min-width: 3px;
}

.infection-mix-list {
  display: grid;
  gap: 7px;
}

.infection-mix-row {
  align-items: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 9px 10px;
}

.infection-dot {
  background: hsl(calc(158 + var(--mix-index) * 28), 74%, 58%);
  border-radius: 999px;
  height: 9px;
  width: 9px;
}

.infection-mix-row strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.12;
  min-width: 0;
}

.infection-mix-row b {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

.infection-source-link {
  align-items: center;
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  border-radius: 999px;
  color: var(--state-info);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 950;
  justify-content: center;
  justify-self: start;
  padding: 8px 12px;
  text-decoration: none;
}

.life-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.68rem;
  font-weight: 850;
  justify-content: space-between;
}

.life-age-stack {
  display: grid;
  gap: 9px;
}

.life-age-card {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  padding: 11px;
}

.life-age-card header {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.life-age-card header strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.life-line-list {
  display: grid;
  gap: 9px;
}

.life-line-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 68px minmax(0, 1fr) 86px;
}

.life-line-label {
  display: grid;
  gap: 2px;
}

.life-line-label span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
}

.life-line-axis {
  height: 28px;
  min-width: 0;
  position: relative;
}

.life-line-axis::before {
  background: var(--chart-track);
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 13px;
}

.life-line-span {
  background: linear-gradient(90deg, var(--interactive), var(--state-info));
  border-radius: 999px;
  height: 3px;
  left: var(--span-left);
  position: absolute;
  top: 13px;
  width: max(var(--span-width), 2%);
}

.life-line-marker {
  border-radius: 999px;
  height: 26px;
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  width: 5px;
}

.life-line-marker.is-local {
  background: var(--interactive);
  box-shadow: 0 0 0 3px var(--surface-raised), 0 6px 14px var(--shadow-color);
  left: var(--local-pos);
  z-index: 2;
}

.life-line-marker.is-national {
  background: var(--state-info);
  box-shadow: 0 0 0 3px var(--surface-raised), 0 6px 14px var(--shadow-color);
  height: 22px;
  left: var(--national-pos);
  top: 3px;
}

.life-line-delta {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.1;
  padding: 6px 7px;
  text-align: center;
}

.life-line-delta.is-positive {
  background: var(--success-soft);
  color: var(--state-success);
}

.life-line-delta.is-negative {
  background: var(--danger-soft);
  color: var(--state-danger-text);
}

.life-line-delta.is-neutral {
  background: var(--info-soft);
  color: var(--state-info);
}

.life-legend {
  gap: 12px;
  justify-content: flex-start;
}

.life-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.life-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.life-legend i.is-local {
  background: var(--interactive);
}

.life-legend i.is-national {
  background: var(--state-info);
}

.detail-card-side .detail-heading {
  display: grid;
}

.detail-card-side .detail-heading > span,
.detail-card-side .detail-meta-tags span {
  justify-self: start;
  max-width: 100%;
  white-space: normal;
}

.detail-card-side .detail-meta-tags {
  justify-content: flex-start;
  max-width: 100%;
}

.detail-card-side .detail-metadata-note {
  padding: 10px 11px;
}

.detail-card-side .municipal-efficiency-sector-grid {
  grid-template-columns: 1fr;
}

.detail-card-side .equality-pair-grid {
  grid-template-columns: 1fr;
}

.detail-card-side .weather-visual-v2,
.detail-card-side .weather-rain-hero,
.detail-card-side .weather-temp-comparison,
.detail-card-side .weather-sun-grid {
  grid-template-columns: 1fr;
}

.detail-card-side .weather-panel {
  padding: 14px;
}

.detail-card-side .weather-rain-hero {
  gap: 12px;
  min-height: 0;
}

.detail-card-side .weather-rain-summary {
  gap: 7px;
}

.detail-card-side .weather-rain-summary p {
  font-size: 0.82rem;
}

.detail-card-side .municipal-efficiency-sector-card header {
  display: grid;
  gap: 6px;
  justify-content: stretch;
}

.detail-card-side .municipal-efficiency-sector-card header span {
  justify-self: start;
  text-align: left;
}

.detail-card-side .weather-rain-chart {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 156px;
}

.detail-card-side .weather-rain-plot {
  gap: 4px;
  min-height: 156px;
}

.detail-card-side .weather-rain-axis {
  padding-bottom: 18px;
}

.detail-card-side .weather-year-bar::before {
  width: min(20px, 88%);
}

.detail-card-side .weather-year-bar b {
  font-size: 0.58rem;
}

.detail-card-side .weather-forecast-card,
.detail-card-side .weather-forecast-card.compact {
  grid-template-columns: 1fr;
}

.detail-card-side .weather-season-cards,
.detail-card-side .weather-sun-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card-side .weather-temp-head,
.detail-card-side .weather-temp-row {
  gap: 5px;
  grid-template-columns: minmax(74px, 1fr) repeat(5, minmax(30px, 0.48fr));
}

.detail-card-side .weather-temp-head span,
.detail-card-side .weather-temp-head b,
.detail-card-side .weather-temp-row span,
.detail-card-side .weather-temp-row b {
  font-size: 0.62rem;
}

.detail-card-side .chart-panel-head,
.detail-card-side .chart-bar-labels,
.detail-card-side .profile-metric-head {
  align-items: start;
  display: grid;
  gap: 6px;
}

.detail-card-side .chart-meta {
  max-width: 100%;
  text-align: left;
}

.map-hint {
  background: rgba(20, 83, 45, 0.07);
  border: 1px solid rgba(20, 83, 45, 0.12);
  border-radius: 13px;
  color: #31503d;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  margin: 0 0 12px;
  padding: 9px 10px;
}

.entity-open-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  margin: -6px 0 12px;
}

.data-bars {
  display: grid;
  gap: 10px;
}

.data-row.is-plain {
  gap: 10px;
}

.noise-risk-panel {
  display: grid;
  gap: 11px;
  margin: 12px 0;
}

.noise-risk-summary,
.noise-risk-fact,
.noise-zone-guide,
.noise-source-row,
.noise-risk-note {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  color: var(--text-main);
}

.noise-risk-summary {
  display: grid;
  gap: 9px;
  padding: 13px;
}

.noise-risk-summary.is-red {
  border-color: color-mix(in srgb, var(--state-danger) 42%, var(--border-soft));
  box-shadow: inset 4px 0 0 var(--state-danger);
}

.noise-risk-summary.is-yellow {
  border-color: color-mix(in srgb, var(--state-warning) 46%, var(--border-soft));
  box-shadow: inset 4px 0 0 var(--state-warning);
}

.noise-risk-summary.is-clear {
  border-color: color-mix(in srgb, var(--state-success) 30%, var(--border-soft));
  box-shadow: inset 4px 0 0 var(--state-success);
}

.noise-risk-summary.is-loading,
.noise-risk-summary.is-error {
  border-color: color-mix(in srgb, var(--state-info) 22%, var(--border-soft));
}

.noise-risk-summary > span,
.noise-risk-fact span,
.noise-source-row span {
  color: var(--text-muted);
  font-family: var(--mono-font);
  font-size: 0.64rem;
  font-weight: 860;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.noise-risk-title-row {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.noise-risk-title-row strong {
  color: var(--text-main);
  font-size: 1.06rem;
  line-height: 1.15;
}

.noise-risk-title-row em {
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--state-info) 24%, var(--border-soft));
  border-radius: 999px;
  color: var(--text-main);
  flex: 0 0 auto;
  font-family: var(--mono-font);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 860;
  padding: 6px 9px;
  white-space: nowrap;
}

.noise-risk-summary p,
.noise-risk-note,
.noise-source-row p,
.noise-zone-guide span {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.42;
  margin: 0;
}

.noise-risk-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.noise-risk-fact {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
}

.noise-risk-fact strong {
  color: var(--text-main);
  font-size: 0.86rem;
  line-height: 1.2;
}

.noise-zone-guide {
  display: grid;
  gap: 8px;
  padding: 11px;
}

.noise-zone-guide div {
  align-items: start;
  display: grid;
  column-gap: 8px;
  grid-template-columns: 10px 5.4rem minmax(0, 1fr);
  row-gap: 2px;
}

.noise-zone-guide i,
.noise-source-row i {
  border-radius: 999px;
  height: 10px;
  margin-top: 3px;
  width: 10px;
}

.noise-zone-guide i.is-yellow {
  background: var(--accent-amber);
  box-shadow: 0 0 0 4px rgba(242, 200, 121, 0.13);
}

.noise-zone-guide i.is-clear {
  background: var(--accent-mint);
  box-shadow: 0 0 0 4px rgba(94, 230, 168, 0.12);
}

.noise-zone-guide i.is-red {
  background: var(--accent-coral);
  box-shadow: 0 0 0 4px rgba(242, 118, 131, 0.13);
}

.noise-zone-guide strong {
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: nowrap;
}

.noise-source-list {
  display: grid;
  gap: 7px;
}

.noise-source-row {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px 11px;
}

.noise-source-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.noise-source-row strong {
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.2;
}

.noise-source-row b {
  color: var(--text-main);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: right;
}

.noise-source-row.is-red i {
  background: var(--accent-coral);
  box-shadow: 0 0 0 4px rgba(242, 118, 131, 0.13);
}

.noise-source-row.is-yellow i {
  background: var(--accent-amber);
  box-shadow: 0 0 0 4px rgba(242, 200, 121, 0.13);
}

.noise-source-row.is-clear i {
  background: var(--accent-mint);
  box-shadow: 0 0 0 4px rgba(94, 230, 168, 0.12);
}

.noise-source-row.is-error i {
  background: var(--accent-coral);
  opacity: 0.65;
}

.noise-risk-note {
  padding: 11px 12px;
}

.nve-risk-panel {
  display: grid;
  gap: 11px;
  margin: 12px 0;
}

.nve-risk-summary,
.nve-risk-fact,
.nve-risk-type-row,
.nve-risk-note {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  color: var(--text-main);
}

.nve-risk-summary {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.nve-risk-summary.is-inside {
  border-color: color-mix(in srgb, var(--state-danger) 42%, var(--border-soft));
  box-shadow: inset 4px 0 0 var(--state-danger);
}

.nve-risk-summary.is-nearby {
  border-color: color-mix(in srgb, var(--state-warning) 42%, var(--border-soft));
  box-shadow: inset 4px 0 0 var(--state-warning);
}

.nve-risk-summary.is-clear {
  border-color: color-mix(in srgb, var(--state-success) 30%, var(--border-soft));
  box-shadow: inset 4px 0 0 var(--state-success);
}

.nve-risk-summary.is-loading,
.nve-risk-summary.is-error {
  border-color: color-mix(in srgb, var(--state-info) 22%, var(--border-soft));
}

.nve-risk-kicker {
  color: var(--text-muted);
  font-family: var(--mono-font);
  font-size: 0.66rem;
  font-weight: 860;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nve-risk-status-line {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.nve-risk-status-line strong {
  color: var(--text-main);
  font-size: 1.03rem;
  line-height: 1.15;
}

.nve-risk-summary p,
.nve-risk-note {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

.nve-risk-pill {
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--state-info) 24%, var(--border-soft));
  border-radius: 999px;
  color: var(--text-main);
  flex: 0 0 auto;
  font-family: var(--mono-font);
  font-size: 0.68rem;
  font-weight: 860;
  padding: 6px 9px;
  white-space: nowrap;
}

.nve-risk-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nve-risk-fact {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
}

.nve-risk-fact span,
.nve-risk-type-row span {
  color: var(--text-muted);
  font-family: var(--mono-font);
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1.25;
}

.nve-risk-fact strong,
.nve-risk-type-row strong {
  color: var(--text-main);
  font-size: 0.86rem;
  line-height: 1.2;
}

.nve-risk-type-list {
  display: grid;
  gap: 7px;
}

.nve-risk-type-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px 11px;
}

.nve-risk-type-row i {
  background: var(--text-dim);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(95, 127, 130, 0.08);
  height: 10px;
  width: 10px;
}

.nve-risk-type-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.nve-risk-type-row b {
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1.2;
  text-align: right;
}

.nve-risk-type-row.is-inside i {
  background: var(--state-danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}

.nve-risk-type-row.is-nearby i {
  background: var(--state-warning);
  box-shadow: 0 0 0 4px var(--warning-soft);
}

.nve-risk-type-row.is-clear i {
  background: var(--state-success);
  box-shadow: 0 0 0 4px var(--success-soft);
}

.nve-risk-type-row.is-error i {
  background: var(--accent-coral);
  opacity: 0.65;
}

.nve-risk-note {
  padding: 11px 12px;
}

.chart-panel,
.no-data-state {
  background:
    radial-gradient(circle at 8% 0, rgba(20, 83, 45, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 12px;
  margin: 12px 0;
  overflow: hidden;
  padding: 13px;
}

.chart-panel-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.chart-panel-head.compact {
  margin-bottom: -2px;
}

.chart-panel-head h4 {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 920;
  line-height: 1.18;
  margin: 0 0 4px;
}

.chart-panel-head p {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  margin: 0;
}

.density-facts-panel {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

.density-category-card,
.density-fact {
  background:
    radial-gradient(circle at 10% 0, rgba(20, 83, 45, 0.07), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.density-category-card {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.density-category-card small,
.density-fact small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
}

.density-category-card strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.16;
}

.density-category-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
  margin: 0;
}

.density-fact-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.density-fact {
  display: grid;
  gap: 8px;
  min-height: 82px;
  padding: 12px;
}

.density-fact strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.18;
}

.nearby-type-summary {
  background:
    radial-gradient(circle at 12% 0, rgba(20, 83, 45, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
}

.nearby-type-summary-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.nearby-type-summary-head strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
}

.nearby-type-summary-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.nearby-type-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nearby-type-pill {
  background: rgba(20, 83, 45, 0.055);
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  display: grid;
  gap: 7px;
  min-height: 72px;
  padding: 10px;
}

.nearby-type-pill span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.15;
}

.nearby-type-pill strong {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 940;
  line-height: 1;
}

.outdoors-visual,
.worship-visual {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
}

.outdoors-hero,
.worship-hero {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.1fr) minmax(132px, 0.9fr);
}

.outdoors-hero > div,
.worship-hero > div,
.outdoors-fact-grid article,
.worship-fact-grid article,
.outdoors-method,
.worship-type-panel,
.outdoors-list,
.worship-list {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.075), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.outdoors-hero > div,
.worship-hero > div,
.outdoors-fact-grid article,
.worship-fact-grid article {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.outdoors-hero span,
.worship-hero span,
.outdoors-fact-grid span,
.worship-fact-grid span,
.outdoors-method span,
.worship-type-list b {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.outdoors-hero strong,
.worship-hero strong,
.outdoors-fact-grid strong,
.worship-fact-grid strong,
.outdoors-method > div:first-child strong,
.worship-type-panel > div:first-child strong,
.outdoors-list-head strong,
.worship-list-head strong {
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.outdoors-hero strong,
.worship-hero strong {
  font-size: 1.35rem;
}

.outdoors-hero p,
.worship-hero p,
.outdoors-fact-grid small,
.worship-fact-grid small,
.outdoors-method p,
.outdoors-method small,
.worship-type-panel p,
.worship-type-list small,
.outdoors-list-row small,
.outdoors-list-row p,
.worship-list-row small,
.worship-list-row p {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.35;
  margin: 0;
}

.outdoors-fact-grid,
.worship-fact-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outdoors-method,
.worship-type-panel,
.outdoors-list,
.worship-list {
  display: grid;
  gap: 11px;
  padding: 13px;
}

.outdoors-method-grid,
.worship-type-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outdoors-method-grid article,
.worship-type-list span,
.worship-type-empty {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
}

.outdoors-method-grid strong {
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.1;
}

.outdoors-list-head,
.worship-list-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.outdoors-list-head span,
.worship-list-head span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.outdoors-list-row,
.worship-list-row {
  align-items: start;
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  color: inherit;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 11px;
  text-decoration: none;
}

.outdoors-list-row > span,
.worship-list-row > span {
  color: var(--accent-mint);
  font-size: 0.72rem;
  font-weight: 930;
}

.outdoors-list-row strong,
.worship-list-row strong {
  color: var(--text-main);
  display: block;
  font-size: 0.92rem;
  font-weight: 940;
  line-height: 1.18;
  margin-bottom: 3px;
}

.outdoors-list-row:hover,
.outdoors-list-row:focus-visible,
.worship-list-row:hover,
.worship-list-row:focus-visible {
  border-color: rgba(94, 230, 168, 0.34);
  outline: 0;
}

.transit-facts-panel {
  background:
    radial-gradient(circle at 12% 0, rgba(20, 83, 45, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
}

.transit-fact-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.transit-fact {
  background: rgba(20, 83, 45, 0.055);
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  display: grid;
  gap: 7px;
  min-height: 92px;
  padding: 10px;
}

.transit-fact small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
}

.transit-fact strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.14;
}

.transit-fact p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.28;
  margin: 0;
}

.ownership-stack-panel {
  background:
    radial-gradient(circle at 12% 0, rgba(20, 83, 45, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 13px;
}

.ownership-stacked-bar {
  background: rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  display: flex;
  height: 22px;
  overflow: hidden;
}

.ownership-segment {
  min-width: 2px;
}

.ownership-segment.self-owner,
.ownership-legend-item.self-owner span {
  background: var(--state-info);
}

.ownership-segment.coop-owner,
.ownership-legend-item.coop-owner span {
  background: var(--accent-purple);
}

.ownership-segment.renter,
.ownership-legend-item.renter span {
  background: var(--accent-amber);
}

.ownership-stack-legend {
  display: grid;
  gap: 8px;
}

.ownership-legend-item {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
}

.ownership-legend-item span {
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.ownership-legend-item strong,
.ownership-legend-item small {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.2;
}

.ownership-legend-item small {
  color: var(--muted);
}

.echart-panel {
  gap: 13px;
}

.church-donut-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 850;
  gap: 8px 14px;
  justify-content: center;
  line-height: 1.25;
  margin-top: -6px;
}

.church-membership-panel .chart-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.church-donut-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.church-donut-legend i {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.church-donut-legend .is-member {
  background: #166534;
}

.church-donut-legend .is-non-member {
  background: #d7dfdd;
}

.church-reference-compact {
  gap: 10px;
}

.church-reference-list {
  display: grid;
  gap: 7px;
}

.church-reference-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 13px;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.church-reference-row.is-selected {
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.12), rgba(240, 253, 244, 0.82));
  border-color: rgba(20, 83, 45, 0.28);
}

.church-reference-row > div {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
}

.church-reference-row strong,
.church-reference-row b {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.16;
}

.church-reference-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.church-reference-badge {
  background: rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 6px;
}

.church-reference-row i {
  background: rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
}

.church-reference-row i em {
  background: linear-gradient(90deg, #166534, #22c55e);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar, 0%);
}

:root:not([data-theme="light"]) .church-reference-row {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 10px 28px var(--shadow-color);
}

:root:not([data-theme="light"]) .church-reference-row.is-selected {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 44%, var(--border-soft));
}

:root:not([data-theme="light"]) .church-reference-badge {
  background: var(--surface-sunken);
  border: 1px solid color-mix(in srgb, var(--interactive) 26%, var(--border-soft));
  color: var(--interactive);
}

:root:not([data-theme="light"]) .church-reference-row i {
  background: var(--chart-track);
}

:root:not([data-theme="light"]) .church-reference-row i em {
  background: var(--state-info);
}

:root:not([data-theme="light"]) .living-alone-row {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .living-alone-row-head span {
  background: var(--surface-sunken);
  border-color: color-mix(in srgb, var(--interactive) 26%, var(--border-soft));
  color: var(--interactive);
}

:root:not([data-theme="light"]) .living-alone-row.is-below .living-alone-row-head span {
  border-color: rgba(155, 231, 245, 0.24);
  color: var(--accent-cyan);
}

:root:not([data-theme="light"]) .youth-health-explanation {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .youth-health-subrow {
  border-top-color: var(--border-soft);
}

:root:not([data-theme="light"]) .youth-health-subrow.is-below .living-alone-row-head span {
  border-color: rgba(155, 231, 245, 0.24);
  color: var(--accent-cyan);
}

:root:not([data-theme="light"]) .youth-national-reference {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .mental-health-group-card,
:root:not([data-theme="light"]) .mental-health-cell {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 40%),
    var(--bg-card);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .mental-health-cell-head span {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .mental-health-cell.is-above .mental-health-cell-head span {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--state-danger) 32%, var(--border-soft));
  color: var(--state-danger-text);
}

:root:not([data-theme="light"]) .mental-health-cell.is-below .mental-health-cell-head span {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--state-success) 28%, var(--border-soft));
  color: var(--state-success);
}

:root:not([data-theme="light"]) .mental-health-cell.is-neutral .mental-health-cell-head span {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  color: var(--state-info);
}

:root:not([data-theme="light"]) .living-alone-mini-bar i {
  background: var(--chart-track);
}

:root:not([data-theme="light"]) .living-alone-mini-bar.is-local i em {
  background: var(--interactive);
}

:root:not([data-theme="light"]) .living-alone-mini-bar.is-national i em {
  background: var(--state-info);
}

:root:not([data-theme="light"]) .education-comparison-row,
:root:not([data-theme="light"]) .education-level-row,
:root:not([data-theme="light"]) .fhi-debt-summary div,
:root:not([data-theme="light"]) .population-age-compare-row,
:root:not([data-theme="light"]) .fhi-debt-mini-bar {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .education-bullet-head b,
:root:not([data-theme="light"]) .education-delta-badge,
:root:not([data-theme="light"]) .inequality-scale-head b,
:root:not([data-theme="light"]) .fhi-debt-summary b,
:root:not([data-theme="light"]) .population-age-row-foot b,
:root:not([data-theme="light"]) .fhi-debt-row-head span {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--state-info) 26%, var(--border-soft));
  color: var(--state-info);
}

:root:not([data-theme="light"]) .education-comparison-row.is-selected {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 44%, var(--border-soft));
}

:root:not([data-theme="light"]) .education-reference-badge {
  background: var(--surface-sunken);
  border: 1px solid color-mix(in srgb, var(--state-info) 26%, var(--border-soft));
  color: var(--state-info);
}

:root:not([data-theme="light"]) .fhi-debt-mini-bar.is-selected {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 44%, var(--border-soft));
}

:root:not([data-theme="light"]) .fhi-debt-badge {
  background: var(--surface-sunken);
  border: 1px solid color-mix(in srgb, var(--interactive) 26%, var(--border-soft));
  color: var(--interactive);
}

:root:not([data-theme="light"]) .population-age-track,
:root:not([data-theme="light"]) .population-gender-stack,
:root:not([data-theme="light"]) .education-bullet-track,
:root:not([data-theme="light"]) .education-comparison-row i,
:root:not([data-theme="light"]) .education-level-row i,
:root:not([data-theme="light"]) .fhi-debt-mini-bar i {
  background: var(--chart-track);
}

:root:not([data-theme="light"]) .population-age-track i,
:root:not([data-theme="light"]) .education-level-row i em {
  background: var(--state-info);
}

:root:not([data-theme="light"]) .education-comparison-row.is-selected i em,
:root:not([data-theme="light"]) .fhi-debt-mini-bar.is-local i em {
  background: var(--interactive);
}

:root:not([data-theme="light"]) .education-comparison-row.is-reference i em,
:root:not([data-theme="light"]) .fhi-debt-mini-bar.is-national i em {
  background: var(--reference);
}

.population-visual-stack {
  display: grid;
  gap: 12px;
}

.population-age-visual {
  gap: 13px;
}

.population-age-compare-rows,
.population-gender-legend {
  display: grid;
  gap: 7px;
}

.population-age-compare-row {
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 13px;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.population-age-row-head,
.population-gender-legend div {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.population-age-row-head,
.population-age-row-foot,
.population-age-track {
  grid-column: 1 / -1;
}

.population-age-row-head strong,
.population-gender-legend strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.18;
  min-width: 0;
}

.population-age-row-head span,
.population-age-row-foot b,
.population-gender-legend b {
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.12;
  text-align: right;
}

.population-age-row-foot {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.population-age-row-foot b {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  color: var(--muted);
  padding: 4px 7px;
}

.population-age-row-foot small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.16;
}

.population-age-track {
  background: rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  display: block;
  height: 7px;
  overflow: visible;
  position: relative;
}

.population-age-track i {
  background: linear-gradient(90deg, #166534, #22c55e);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.population-age-track em {
  background: var(--accent-coral);
  border: 2px solid var(--bg-card);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(242, 118, 131, 0.35);
  height: 15px;
  left: var(--reference);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
}

.population-gender-split {
  gap: 11px;
}

.population-gender-stack {
  background: rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  display: flex;
  height: 18px;
  overflow: hidden;
}

.population-gender-stack span {
  display: block;
  min-width: 2px;
  width: var(--segment);
}

.population-gender-stack .is-women,
.population-gender-legend .is-women > span {
  background: var(--accent-cyan);
}

.population-gender-stack .is-men,
.population-gender-legend .is-men > span {
  background: var(--accent-coral);
}

.population-gender-legend div {
  justify-content: start;
}

.population-gender-legend div > span {
  border-radius: 999px;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.population-gender-legend b {
  margin-left: auto;
}

.echart-host {
  min-height: var(--echart-height, 260px);
  position: relative;
  width: 100%;
}

.echart-host > div,
.echart-host canvas,
.echart-host svg {
  max-width: 100%;
}

.education-donut-panel {
  gap: 0;
  padding-block: 4px 0;
}

.education-donut-panel .echart-host {
  margin: 0;
}

.education-national-reference {
  align-items: center;
  background: rgba(20, 83, 45, 0.07);
  border: 1px solid rgba(20, 83, 45, 0.11);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: -4px 6px 10px;
  padding: 10px 12px;
}

.education-national-reference span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.2;
}

.education-national-reference strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 940;
  line-height: 1.1;
  white-space: nowrap;
}

.education-bullet-panel {
  gap: 10px;
}

.education-comparison-list,
.education-level-ladder {
  display: grid;
  gap: 7px;
}

.education-comparison-row,
.education-level-row {
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 13px;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.education-comparison-row.is-selected {
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.12), rgba(240, 253, 244, 0.82));
  border-color: rgba(20, 83, 45, 0.28);
}

.education-comparison-row > div,
.education-level-row div {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
}

.education-comparison-row strong,
.education-level-row strong,
.education-comparison-row b,
.education-level-row span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.16;
}

.education-comparison-row strong,
.education-level-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.education-comparison-row b,
.education-level-row span {
  flex: 0 0 auto;
}

.education-reference-badge {
  background: rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 6px;
}

.education-comparison-row small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  grid-column: 1 / -1;
  line-height: 1.15;
  margin-top: -2px;
}

.education-delta-badge {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  justify-self: start;
  padding: 6px 9px;
}

.education-comparison-row i,
.education-level-row i {
  background: rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
}

.education-comparison-row i em,
.education-level-row i em {
  background: linear-gradient(90deg, #166534, #22c55e);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.education-comparison-row.is-reference i em {
  background: rgba(100, 116, 139, 0.32);
}

.income-echart-panel-spacious {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 6px 0 4px;
  overflow: visible;
  padding: 0;
}

.income-echart-panel-spacious .chart-panel-head {
  padding-inline: 2px;
}

.inequality-explanation {
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
}

.inequality-explanation > div {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.inequality-explanation strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 940;
  line-height: 1.16;
}

.inequality-explanation span {
  background: rgba(20, 83, 45, 0.08);
  border: 1px solid rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 5px 8px;
}

.inequality-explanation p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
  margin: 0;
}

.inequality-explanation dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.inequality-explanation dl div {
  align-items: baseline;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 10px;
}

.inequality-explanation dt,
.inequality-explanation dd {
  margin: 0;
}

.inequality-explanation dt {
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 920;
}

.inequality-explanation dd {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.2;
  text-align: right;
}

.inequality-scale-head {
  align-items: start;
}

.inequality-scale-head div {
  display: grid;
  gap: 4px;
}

.inequality-scale-head b {
  background: rgba(20, 83, 45, 0.08);
  border: 1px solid rgba(20, 83, 45, 0.13);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 920;
  padding: 6px 8px;
  white-space: nowrap;
}

.inequality-explanation > .inequality-scale-visual {
  align-items: stretch;
  display: grid;
  gap: 8px;
  justify-content: stretch;
  margin: 2px 0;
  width: 100%;
}

.inequality-scale-track {
  border-radius: 999px;
  display: grid;
  grid-template-columns: 12.5% 12.5% 25% 25% 25%;
  height: 18px;
  min-width: 0;
  position: relative;
  width: 100%;
}

.inequality-explanation .inequality-scale-track > span {
  border: 0;
  border-radius: 0;
  color: inherit;
  display: block;
  min-width: 0;
  padding: 0;
}

.inequality-scale-track > span:first-child {
  border-radius: 999px 0 0 999px;
}

.inequality-scale-track > span:nth-child(5) {
  border-radius: 0 999px 999px 0;
}

.inequality-scale-track .is-low {
  background: rgba(94, 230, 168, 0.68);
}

.inequality-scale-track .is-moderate {
  background: rgba(155, 231, 245, 0.62);
}

.inequality-scale-track .is-clear {
  background: rgba(242, 200, 121, 0.68);
}

.inequality-scale-track .is-large {
  background: rgba(242, 118, 131, 0.64);
}

.inequality-scale-track .is-very-large {
  background: rgba(148, 163, 184, 0.54);
}

.inequality-scale-track i {
  background: var(--ink);
  border: 2px solid var(--bg-card);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
  height: 26px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
}

.inequality-scale-track i small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 860;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  white-space: nowrap;
}

.inequality-scale-track .is-local {
  background: #14532d;
  left: var(--local);
}

.inequality-scale-track .is-national {
  background: var(--accent-coral);
  left: var(--national);
}

.inequality-scale-labels {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
}

.inequality-explanation .inequality-scale-labels span {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 820;
  padding: 0;
}

.inequality-explainer-details {
  display: grid;
  gap: 9px;
}

.inequality-explainer-details summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 920;
}

.fhi-debt-compare {
  gap: 12px;
}

.fhi-debt-summary {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fhi-debt-summary div {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  display: grid;
  gap: 7px;
  padding: 10px;
}

.fhi-debt-summary span,
.fhi-debt-note {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.fhi-debt-summary strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.1;
}

.fhi-debt-summary b {
  background: rgba(100, 116, 139, 0.11);
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 9px;
}

.fhi-debt-rows {
  display: grid;
  gap: 13px;
}

.fhi-debt-row {
  display: grid;
  gap: 7px;
}

.fhi-debt-row-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 0 2px;
}

.fhi-debt-mini-bar div {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
}

.fhi-debt-row-head strong,
.fhi-debt-mini-bar span,
.fhi-debt-mini-bar b {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.16;
}

.fhi-debt-mini-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fhi-debt-row-head span {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 880;
  padding: 5px 7px;
}

.fhi-debt-bar-pair {
  display: grid;
  gap: 7px;
}

.fhi-debt-mini-bar {
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 13px;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.fhi-debt-mini-bar.is-selected {
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.12), rgba(240, 253, 244, 0.82));
  border-color: rgba(20, 83, 45, 0.28);
}

.fhi-debt-badge {
  background: rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 6px;
}

.fhi-debt-mini-bar i {
  background: rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
}

.fhi-debt-mini-bar i em {
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.fhi-debt-mini-bar.is-local i em {
  background: linear-gradient(90deg, #166534, #22c55e);
}

.fhi-debt-mini-bar.is-national i em {
  background: rgba(100, 116, 139, 0.32);
}

.living-alone-compare {
  gap: 11px;
}

.youth-health-compare {
  gap: 9px;
}

.youth-health-compare .chart-panel-head {
  margin-bottom: 0;
}

.youth-health-rows {
  gap: 8px;
}

.youth-health-row {
  padding: 10px;
}

.youth-health-topic-card {
  gap: 10px;
}

.youth-health-topic-card > .living-alone-row-head span {
  display: none;
}

.youth-health-explanation {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  margin: -2px 0 1px;
}

.youth-health-subrows {
  display: grid;
  gap: 8px;
}

.youth-health-subrow {
  border-top: 1px solid rgba(100, 116, 139, 0.12);
  display: grid;
  gap: 7px;
  padding-top: 9px;
}

.youth-health-subrow:first-child {
  border-top: 0;
  padding-top: 0;
}

.youth-health-subrow-head strong {
  font-size: 0.78rem;
}

.youth-compact-reference-pair {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}

.youth-national-reference {
  align-content: center;
  background: rgba(248, 250, 252, 0.74);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  min-width: 76px;
  padding: 7px 9px;
}

.youth-national-reference span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.05;
}

.youth-national-reference b {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.youth-environment-card {
  gap: 11px;
}

.youth-environment-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.youth-environment-legend span {
  align-items: center;
  background: color-mix(in srgb, var(--youth-env-tone, var(--accent-mint)) 9%, rgba(248, 250, 252, 0.78));
  border: 1px solid color-mix(in srgb, var(--youth-env-tone, var(--accent-mint)) 22%, rgba(15, 23, 42, 0.08));
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.66rem;
  font-weight: 860;
  gap: 6px;
  line-height: 1.1;
  padding: 6px 8px;
}

.youth-environment-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.youth-environment-sex-list {
  display: grid;
  gap: 9px;
}

.youth-environment-sex-card {
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  display: grid;
  gap: 9px;
  padding: 10px;
}

.youth-environment-sex-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.youth-environment-sex-head strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 930;
  line-height: 1.15;
}

.youth-environment-sex-head span {
  background: rgba(20, 83, 45, 0.09);
  border: 1px solid rgba(20, 83, 45, 0.13);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 5px 7px;
}

.youth-environment-bars {
  display: grid;
  gap: 9px;
}

.youth-environment-bars.is-compact {
  gap: 7px;
}

.youth-environment-distribution {
  display: grid;
  gap: 5px;
}

.youth-environment-distribution-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.youth-environment-distribution-head span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.12;
}

.youth-environment-strip {
  background: rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  display: flex;
  height: 15px;
  overflow: hidden;
}

.youth-environment-segment {
  flex: var(--share) 1 0;
  min-width: 3px;
}

.youth-environment-segment + .youth-environment-segment {
  border-left: 1px solid rgba(255, 255, 255, 0.72);
}

.youth-environment-values {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.youth-environment-values span {
  background: color-mix(in srgb, var(--youth-env-tone, var(--accent-mint)) 8%, rgba(248, 250, 252, 0.66));
  border: 1px solid color-mix(in srgb, var(--youth-env-tone, var(--accent-mint)) 20%, rgba(15, 23, 42, 0.06));
  border-radius: 10px;
  color: var(--muted);
  display: grid;
  font-size: 0.63rem;
  font-weight: 850;
  gap: 2px;
  line-height: 1.1;
  min-width: 0;
  padding: 6px;
}

.youth-environment-values b {
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 940;
  line-height: 1;
}

.youth-environment-reference {
  align-items: start;
  background: rgba(248, 250, 252, 0.62);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  display: grid;
  gap: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px;
}

.youth-environment-reference > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 930;
  line-height: 1.1;
  padding-top: 2px;
}

.youth-environment-reference > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  min-width: 0;
}

.youth-environment-reference b {
  align-items: baseline;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.6rem;
  font-weight: 850;
  gap: 4px;
  line-height: 1;
  min-width: 0;
  padding: 5px 7px;
}

.youth-environment-reference b strong {
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 950;
  white-space: nowrap;
}

.youth-environment-segment.is-satisfied,
.youth-environment-legend .is-satisfied i {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-mint) 58%, var(--bg-card-hover)),
    var(--accent-mint)
  );
}

.youth-environment-segment.is-neutral,
.youth-environment-legend .is-neutral i {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-amber) 54%, var(--bg-card-hover)),
    var(--accent-amber)
  );
}

.youth-environment-segment.is-dissatisfied,
.youth-environment-legend .is-dissatisfied i {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-coral) 58%, var(--bg-card-hover)),
    var(--accent-coral)
  );
}

.youth-environment-legend .is-satisfied,
.youth-environment-values .is-satisfied {
  --youth-env-tone: var(--accent-mint);
}

.youth-environment-legend .is-neutral,
.youth-environment-values .is-neutral {
  --youth-env-tone: var(--accent-amber);
}

.youth-environment-legend .is-dissatisfied,
.youth-environment-values .is-dissatisfied {
  --youth-env-tone: var(--accent-coral);
}

:root:not([data-theme="light"]) .youth-environment-sex-card {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 40%),
    var(--bg-card);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .youth-environment-legend span,
:root:not([data-theme="light"]) .youth-environment-values span,
:root:not([data-theme="light"]) .youth-environment-reference {
  background: color-mix(in srgb, var(--youth-env-tone, var(--state-info)) 8%, var(--bg-card));
  border-color: color-mix(in srgb, var(--youth-env-tone, var(--state-info)) 22%, var(--border-soft));
}

:root:not([data-theme="light"]) .youth-environment-reference b {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .youth-environment-sex-head span {
  background: var(--surface-sunken);
  border-color: color-mix(in srgb, var(--interactive) 26%, var(--border-soft));
  color: var(--interactive);
}

:root:not([data-theme="light"]) .youth-environment-strip {
  background: rgba(155, 231, 245, 0.12);
}

:root:not([data-theme="light"]) .youth-environment-segment + .youth-environment-segment {
  border-left-color: var(--surface-sunken);
}

.mental-health-visual {
  display: grid;
  gap: 12px;
}

.mental-health-groups {
  display: grid;
  gap: 12px;
}

.mental-health-group-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.mental-health-group-card header {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.mental-health-group-card h4 {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 940;
  margin: 0;
}

.mental-health-group-card header span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.mental-health-age-list {
  display: grid;
  gap: 8px;
}

.mental-health-age-row {
  display: grid;
  gap: 7px;
}

.mental-health-age-row > strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 930;
}

.mental-health-sex-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mental-health-cell {
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
}

.mental-health-cell.is-above {
  border-color: rgba(242, 118, 131, 0.24);
}

.mental-health-cell.is-below {
  border-color: rgba(94, 230, 168, 0.22);
}

.mental-health-cell-head {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
}

.mental-health-cell-head strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 930;
}

.mental-health-cell-head span {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 1 auto;
  font-size: 0.63rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 6px;
  text-align: right;
}

.mental-health-cell.is-above .mental-health-cell-head span {
  background: rgba(199, 82, 97, 0.1);
  border-color: rgba(199, 82, 97, 0.18);
  color: var(--accent-coral);
}

.mental-health-cell.is-below .mental-health-cell-head span {
  background: rgba(20, 83, 45, 0.09);
  border-color: rgba(20, 83, 45, 0.14);
  color: #14532d;
}

.mental-health-cell.is-neutral .mental-health-cell-head span {
  background: rgba(37, 111, 134, 0.09);
  border-color: rgba(37, 111, 134, 0.16);
  color: var(--accent-cyan);
}

.mental-health-cell-values {
  display: grid;
  gap: 2px;
}

.mental-health-cell-values span {
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 950;
}

.mental-health-cell-values small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.living-alone-rows {
  display: grid;
  gap: 9px;
}

.living-alone-row {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 15px;
  display: grid;
  gap: 9px;
  padding: 11px;
}

.living-alone-row-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.living-alone-row-head strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 930;
  line-height: 1.15;
}

.living-alone-row-head span {
  background: rgba(20, 83, 45, 0.09);
  border: 1px solid rgba(20, 83, 45, 0.13);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 5px 7px;
}

.living-alone-row.is-below .living-alone-row-head span {
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.14);
  color: #1e40af;
}

.youth-health-subrow.is-below .living-alone-row-head span {
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.14);
  color: #1e40af;
}

.living-alone-bar-pair {
  display: grid;
  gap: 7px;
}

.living-alone-mini-bar {
  display: grid;
  gap: 5px;
}

.living-alone-mini-bar > div {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.living-alone-mini-bar span,
.living-alone-mini-bar b {
  font-size: 0.72rem;
  font-weight: 880;
  line-height: 1.12;
}

.living-alone-mini-bar span {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.living-alone-mini-bar b {
  color: var(--ink);
  flex: 0 0 auto;
}

.living-alone-mini-bar i {
  background: rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
}

.living-alone-mini-bar i em {
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.living-alone-mini-bar.is-local i em {
  background: linear-gradient(90deg, #14532d, #22c55e);
}

.living-alone-mini-bar.is-national i em {
  background: linear-gradient(90deg, #2563eb, #93c5fd);
}

.death-causes-panel {
  gap: 11px;
}

.death-causes-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -2px;
}

.death-causes-legend span {
  align-items: center;
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 860;
  gap: 6px;
  line-height: 1.1;
  padding: 6px 8px;
}

.death-causes-legend span::before {
  border-radius: 999px;
  content: "";
  height: 8px;
  width: 8px;
}

.death-causes-legend .is-local::before {
  background: var(--interactive);
}

.death-causes-legend .is-national::before {
  background: var(--accent-cyan);
}

.death-causes-sex-list {
  display: grid;
  gap: 11px;
}

.death-causes-sex-card {
  background:
    radial-gradient(circle at 0 0, rgba(20, 83, 45, 0.045), transparent 38%),
    rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  padding: 11px;
}

.death-causes-sex-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.death-causes-sex-head h5 {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 930;
  line-height: 1.15;
  margin: 0;
}

.death-causes-sex-head span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.1;
}

.death-cause-age-list {
  display: grid;
  gap: 8px;
}

.death-cause-age-card {
  background: rgba(248, 250, 252, 0.54);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  overflow: hidden;
}

.death-cause-age-card.is-clickable {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.death-cause-age-card.is-clickable:hover,
.death-cause-age-card.is-clickable:focus-visible,
.death-cause-age-card.is-clickable.is-entity-selected {
  background:
    radial-gradient(circle at 0 0, rgba(94, 230, 168, 0.12), transparent 42%),
    rgba(236, 253, 245, 0.78);
  border-color: rgba(20, 83, 45, 0.22);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.death-cause-age-card.is-clickable div,
.death-cause-age-card.is-clickable aside {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.death-cause-age-card.is-clickable strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 930;
  line-height: 1.15;
}

.death-cause-age-card.is-clickable span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 770;
  line-height: 1.25;
}

.death-cause-age-card.is-clickable aside {
  justify-items: end;
  text-align: right;
}

.death-cause-age-card.is-clickable aside b {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 930;
  line-height: 1.1;
  white-space: nowrap;
}

.death-cause-age-card.is-clickable aside small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 840;
  line-height: 1.1;
  white-space: nowrap;
}

.death-cause-age-card summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  padding: 10px 11px;
}

.death-cause-age-card summary::-webkit-details-marker {
  display: none;
}

.death-cause-age-card summary::after {
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: var(--muted);
  content: "+";
  display: grid;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 940;
  height: 22px;
  place-items: center;
  width: 22px;
}

.death-cause-age-card[open] summary::after {
  content: "-";
}

.death-cause-age-card summary span,
.death-cause-age-card summary b {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 910;
  line-height: 1.1;
}

.death-cause-age-card summary b {
  color: var(--muted);
  font-size: 0.66rem;
  margin-left: auto;
}

.death-cause-rows {
  display: grid;
  gap: 8px;
}

.death-cause-row {
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.death-cause-row-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.death-cause-row-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.death-cause-row-head strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 920;
  line-height: 1.18;
}

.death-cause-row-head small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.1;
}

.death-cause-row-head > span {
  background: rgba(20, 83, 45, 0.09);
  border: 1px solid rgba(20, 83, 45, 0.14);
  border-radius: 999px;
  color: #14532d;
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 5px 7px;
}

.death-cause-row.is-above .death-cause-row-head > span {
  background: rgba(199, 82, 97, 0.1);
  border-color: rgba(199, 82, 97, 0.18);
  color: var(--accent-coral);
}

.death-cause-row.is-even .death-cause-row-head > span {
  background: rgba(37, 111, 134, 0.09);
  border-color: rgba(37, 111, 134, 0.16);
  color: var(--accent-cyan);
}

.death-cause-dumbbell {
  display: grid;
  gap: 7px;
}

.death-cause-dumbbell-labels {
  align-items: start;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.death-cause-dumbbell-labels span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.death-cause-dumbbell-labels .is-national {
  text-align: right;
}

.death-cause-dumbbell-labels b,
.death-cause-dumbbell-labels strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-cause-dumbbell-labels b {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1.1;
}

.death-cause-dumbbell-labels strong {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 920;
  line-height: 1.1;
}

.death-cause-dumbbell-axis {
  background: rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  height: 10px;
  position: relative;
}

.death-cause-dumbbell-axis::after {
  background: linear-gradient(90deg, rgba(155, 231, 245, 0.62), rgba(94, 230, 168, 0.7));
  border-radius: inherit;
  content: "";
  height: 100%;
  left: var(--start);
  min-width: 10px;
  position: absolute;
  top: 0;
  width: var(--span);
}

.death-cause-dumbbell-axis i {
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  z-index: 1;
}

.death-cause-dumbbell-axis .is-local {
  background: var(--interactive);
  left: var(--local);
}

.death-cause-dumbbell-axis .is-national {
  background: var(--accent-cyan);
  left: var(--national);
}

:root:not([data-theme="light"]) .death-causes-legend span,
:root:not([data-theme="light"]) .death-causes-sex-card,
:root:not([data-theme="light"]) .death-cause-age-card,
:root:not([data-theme="light"]) .death-cause-row {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .death-cause-age-card.is-clickable:hover,
:root:not([data-theme="light"]) .death-cause-age-card.is-clickable:focus-visible,
:root:not([data-theme="light"]) .death-cause-age-card.is-clickable.is-entity-selected {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 42%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 44%, var(--border-soft));
  box-shadow: 0 18px 40px var(--shadow-color);
}

:root:not([data-theme="light"]) .death-cause-age-card summary::after {
  background: var(--surface-sunken);
  color: var(--state-info);
}

:root:not([data-theme="light"]) .death-cause-row-head > span {
  background: var(--surface-sunken);
  border-color: color-mix(in srgb, var(--interactive) 26%, var(--border-soft));
  color: var(--interactive);
}

:root:not([data-theme="light"]) .death-cause-row.is-above .death-cause-row-head > span {
  border-color: rgba(242, 118, 131, 0.28);
  color: var(--accent-coral);
}

:root:not([data-theme="light"]) .death-cause-row.is-even .death-cause-row-head > span {
  border-color: rgba(155, 231, 245, 0.24);
  color: var(--accent-cyan);
}

.chart-engine-fallback {
  align-items: center;
  background: rgba(241, 245, 249, 0.82);
  border: 1px dashed rgba(100, 116, 139, 0.3);
  border-radius: 14px;
  color: var(--muted);
  display: flex;
  font-size: 0.78rem;
  font-weight: 760;
  height: 100%;
  justify-content: center;
  line-height: 1.35;
  margin: 0;
  min-height: 150px;
  padding: 14px;
  text-align: center;
}

.chart-summary-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chart-summary-grid article {
  background: rgba(248, 250, 252, 0.84);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.chart-summary-grid article.tone-selected {
  background: rgba(20, 83, 45, 0.09);
  border-color: rgba(20, 83, 45, 0.2);
}

.chart-summary-grid small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.18;
}

.chart-summary-grid strong {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 930;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.chart-summary-grid span {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 760;
  line-height: 1.18;
}

.echart-fallback-list {
  display: block;
}

.echart-panel.is-hydrated .echart-fallback-list {
  display: none;
}

.echart-fallback-list dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.echart-fallback-list dl div {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.echart-fallback-list dt,
.echart-fallback-list dd {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
  margin: 0;
}

.echart-fallback-list dd {
  color: var(--ink);
  text-align: right;
}

.echart-tooltip {
  max-width: 240px;
}

.echart-tooltip strong {
  display: block;
  font-weight: 900;
  margin-bottom: 6px;
}

.echart-tooltip div {
  align-items: baseline;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.echart-tooltip span {
  color: rgba(255, 255, 255, 0.72);
}

.echart-tooltip b {
  color: #fff;
  font-weight: 900;
  text-align: right;
}

.chart-meta {
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 999px;
  color: #334155;
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.15;
  max-width: 46%;
  padding: 6px 8px;
  text-align: right;
}

.chart-bar-list {
  display: grid;
  gap: 9px;
}

.chart-bar-row {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  display: grid;
  gap: 7px;
  padding: 10px;
}

.chart-bar-row.is-selected {
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.12), rgba(240, 253, 244, 0.86));
  border-color: rgba(20, 83, 45, 0.28);
}

.chart-bar-row.is-reference {
  border-color: rgba(37, 99, 235, 0.2);
}

.chart-bar-labels {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.chart-bar-labels strong,
.profile-metric-head strong {
  color: var(--ink);
  display: block;
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.chart-bar-labels small,
.profile-metric-head small {
  color: var(--muted);
  display: block;
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1.25;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.chart-bar-labels span,
.profile-metric-head b {
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 920;
  line-height: 1.1;
  text-align: right;
}

.chart-track,
.profile-metric-track {
  background: rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
  position: relative;
}

.chart-track i,
.profile-metric-track i {
  background: var(--state-info);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar, var(--value, 0%));
}

.chart-bar-row.is-reference .chart-track i {
  background: var(--reference);
}

.chart-row-notes {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 18px;
}

.chart-row-notes b,
.chart-row-notes em {
  border-radius: 999px;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  padding: 4px 6px;
}

.chart-row-notes b {
  background: rgba(20, 83, 45, 0.12);
  color: #14532d;
}

.chart-row-notes em {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.profile-metric-stack {
  gap: 10px;
}

.profile-metric-bar {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.profile-metric-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.profile-metric-track {
  height: 10px;
  margin-top: 2px;
}

.profile-metric-track em {
  background: #0f172a;
  border-radius: 999px;
  height: 16px;
  left: var(--reference);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
}

.profile-metric-track em span {
  background: #0f172a;
  border-radius: 999px;
  color: #fff;
  display: none;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  left: 50%;
  padding: 4px 6px;
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.profile-metric-bar:hover .profile-metric-track em span,
.profile-metric-bar:focus-within .profile-metric-track em span {
  display: block;
}

.profile-metric-scale {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.64rem;
  font-weight: 800;
  justify-content: space-between;
  line-height: 1.2;
}

.profile-metric-scale strong {
  color: #334155;
  font-size: 0.64rem;
  font-weight: 850;
  text-align: center;
}

.mini-trend-chart svg {
  display: block;
  height: auto;
  width: 100%;
}

.mini-trend-grid {
  stroke: rgba(15, 23, 42, 0.09);
  stroke-width: 1;
}

.mini-trend-line {
  fill: none;
  stroke: #14532d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.mini-trend-point {
  fill: #14532d;
  stroke: #fff;
  stroke-width: 2;
}

.mini-trend-label {
  fill: #64748b;
  font-size: 10px;
  font-weight: 760;
}

.no-data-state {
  background:
    radial-gradient(circle at 12% 0, rgba(100, 116, 139, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.no-data-state strong {
  color: var(--ink);
  display: block;
  font-size: 0.9rem;
  font-weight: 920;
  line-height: 1.2;
  margin-bottom: 4px;
}

.no-data-state p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
}

.no-data-state small {
  color: #64748b;
  display: block;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.3;
  margin-top: 8px;
}

.no-data-state dl {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.no-data-state dl div {
  background: rgba(241, 245, 249, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 8px;
}

.no-data-state dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 850;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.no-data-state dd {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.topic-chips span {
  background: #f8fafc;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 760;
  gap: 6px;
  padding: 7px 9px;
}

.topic-chips strong {
  color: var(--text-main);
  font-weight: 900;
}

.smilefjes-summary {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
}

.smilefjes-summary.is-muted {
  background: #f8fafc;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 15px;
  display: block;
  padding: 13px;
}

.smilefjes-summary.is-muted strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.smilefjes-summary.is-muted p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.38;
  margin: 0;
}

.smilefjes-pill {
  background: color-mix(in srgb, var(--smile-color) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--smile-color) 22%, transparent);
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  min-height: 78px;
  padding: 11px;
}

.smilefjes-pill.smile {
  --smile-color: #047857;
}

.smilefjes-pill.flat {
  --smile-color: #d97706;
}

.smilefjes-pill.sad {
  --smile-color: #dc2626;
}

.smilefjes-pill small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.smilefjes-pill strong {
  color: var(--smile-color);
  display: block;
  font-size: 1.55rem;
  line-height: 1;
}

.data-row {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  display: grid;
  gap: 7px;
  padding: 10px;
}

.data-row div {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.data-row strong {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 920;
  gap: 7px;
  line-height: 1.18;
  min-width: 0;
  overflow-wrap: anywhere;
}

.data-row.has-row-color strong::before {
  background: var(--row-color, #14532d);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
  content: "";
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.data-row small {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1.18;
  max-width: 48%;
  overflow-wrap: anywhere;
  text-align: right;
}

.data-row span {
  background:
    linear-gradient(90deg, var(--row-color, #14532d) var(--bar), transparent var(--bar)),
    #e5e7eb;
  border-radius: 999px;
  display: block;
  height: 9px;
  overflow: hidden;
}

.school-data-visual {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.school-data-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.school-data-summary article {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 244, 0.72));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  min-width: 0;
  padding: 10px;
}

.school-data-summary small,
.school-card-heading small,
.school-metric-title span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1.2;
}

.school-data-summary strong {
  color: var(--ink);
  display: block;
  font-size: 1.1rem;
  font-weight: 940;
  line-height: 1.12;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.school-data-summary span,
.school-data-note,
.school-card-heading span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.35;
  margin-top: 5px;
}

.school-data-note {
  background: rgba(240, 253, 244, 0.78);
  border: 1px solid rgba(20, 83, 45, 0.13);
  border-radius: 14px;
  color: #28513a;
  margin: 0;
  padding: 9px 11px;
}

.school-card-list {
  display: grid;
  gap: 12px;
}

.school-data-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  display: grid;
  gap: 12px;
  padding: 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, outline-color 180ms ease;
}

.school-data-card.is-map-selected,
.school-data-card.is-entity-selected,
.news-item.is-entity-selected {
  border-color: rgba(20, 83, 45, 0.42);
  box-shadow: 0 22px 56px rgba(20, 83, 45, 0.18);
  outline: 3px solid rgba(34, 197, 94, 0.16);
}

.entity-list-card {
  appearance: none;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

.entity-list-card:hover,
.entity-list-card:focus-visible {
  border-color: rgba(20, 83, 45, 0.22);
  box-shadow: 0 18px 44px rgba(20, 83, 45, 0.12);
  outline: 0;
  transform: translateY(-1px);
}

.entity-list-metrics {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.entity-list-metrics span {
  background: rgba(248, 250, 252, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
}

.entity-list-metrics small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.1;
  margin: 0;
}

.entity-list-metrics strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 940;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.entity-list-action {
  align-items: center;
  color: #14532d;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 900;
  gap: 5px;
}

.entity-list-action::after {
  content: "→";
  font-size: 0.92rem;
  line-height: 1;
}

.kindergarten-satisfaction-card {
  align-items: center;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.92));
  border: 1px solid rgba(20, 83, 45, 0.14);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 12px;
}

.kindergarten-satisfaction-card small,
.kindergarten-satisfaction-card span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.25;
}

.kindergarten-satisfaction-card strong {
  color: var(--ink);
  display: block;
  font-size: 1.26rem;
  font-weight: 960;
  line-height: 1.05;
  margin: 3px 0;
}

.kindergarten-score-pill {
  background: rgba(20, 83, 45, 0.1);
  border: 1px solid rgba(20, 83, 45, 0.14);
  border-radius: 999px;
  color: #14532d !important;
  font-size: 0.72rem !important;
  font-weight: 940 !important;
  padding: 7px 9px;
  text-align: center;
  white-space: nowrap;
}

.kindergarten-survey-block {
  gap: 9px;
}

.kindergarten-response-rate {
  align-items: center;
  background: rgba(248, 250, 252, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 13px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 10px;
}

.kindergarten-response-rate strong,
.kindergarten-survey-comparison-heading strong {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 940;
  line-height: 1.2;
}

.kindergarten-response-rate small {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.25;
  margin-top: 2px;
}

.kindergarten-response-rate span,
.kindergarten-survey-comparison-heading span {
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 940;
  line-height: 1.2;
}

.kindergarten-survey-comparison-list {
  display: grid;
  gap: 8px;
}

.kindergarten-survey-comparison {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.kindergarten-survey-comparison.is-priority {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.86));
  border-color: rgba(20, 83, 45, 0.14);
}

.kindergarten-survey-comparison-heading {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.kindergarten-survey-bars {
  display: grid;
  gap: 6px;
}

.kindergarten-survey-bar-row {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(84px, 1fr) minmax(90px, 1.3fr) auto;
}

.kindergarten-survey-bar-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kindergarten-survey-bar-row i {
  background: #e5e7eb;
  border-radius: 999px;
  display: block;
  height: 7px;
  overflow: hidden;
}

.kindergarten-survey-bar-row b {
  background: rgba(20, 83, 45, 0.9);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.kindergarten-survey-bar-row:not(.is-selected) b {
  background: rgba(15, 118, 110, 0.5);
}

.kindergarten-survey-bar-row strong {
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.school-card-heading {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.school-card-heading strong {
  color: var(--ink);
  display: block;
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.18;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.school-card-heading b {
  background: #eef2ff;
  border-radius: 999px;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 940;
  padding: 7px 9px;
}

.school-metric-block,
.school-profile-block {
  display: grid;
  gap: 7px;
}

.school-metric-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.school-metric-title strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 940;
}

.school-metric-help {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.35;
  margin: -2px 0 0;
}

.school-profile-grid {
  display: grid;
  gap: 7px;
}

.school-profile-grid div {
  align-items: baseline;
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 13px;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  padding: 9px 10px;
}

.school-profile-grid strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.school-profile-grid span {
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 940;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: right;
}

.school-metric-row {
  align-items: baseline;
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 13px;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 11px;
}

.school-metric-row strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.school-metric-row span {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 940;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.school-metric-row small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 720;
  grid-column: 1 / -1;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: left;
}

.school-metric-empty {
  background: rgba(248, 250, 252, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  padding: 10px;
}

.school-metric-empty strong {
  color: var(--ink);
  display: block;
  font-size: 0.8rem;
  font-weight: 940;
  line-height: 1.2;
}

.school-metric-empty p {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.38;
  margin: 5px 0 0;
}

.school-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.school-card-links a {
  background: rgba(20, 83, 45, 0.08);
  border: 1px solid rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  color: #14532d;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 7px 10px;
  text-decoration: none;
}

.council-visual {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  margin: 14px 0;
  overflow: hidden;
  padding: 12px;
}

.council-seat-chart {
  display: block;
  height: auto;
  width: 100%;
}

.council-seat-chart circle {
  filter: drop-shadow(0 5px 7px rgba(15, 23, 42, 0.1));
}

.council-legend {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.council-legend li {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 11px minmax(0, 1fr) auto;
}

.council-legend span {
  background: var(--party);
  border-radius: 999px;
  height: 9px;
  width: 9px;
}

.council-legend strong,
.council-legend small {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 880;
  line-height: 1.2;
}

.council-legend small {
  color: var(--muted);
  font-weight: 900;
}

.waste-visual {
  --waste-tone: var(--accent-mint);
  --waste-tone-soft: rgba(94, 230, 168, 0.13);
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.waste-hero,
.waste-practical-card,
.waste-readout {
  background:
    radial-gradient(circle at 0 0, var(--waste-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.waste-hero {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.waste-hero span,
.waste-practical-card span,
.waste-readout span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.waste-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.6rem;
  line-height: 1.05;
}

.waste-hero p,
.waste-practical-card p,
.waste-readout p,
.waste-year-meter small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.waste-practical-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.waste-practical-card {
  align-content: start;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 13px;
}

.waste-practical-card.is-highlighted {
  background:
    radial-gradient(circle at 0 0, rgba(94, 230, 168, 0.2), transparent 45%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--waste-tone) 34%, var(--border-soft));
}

.waste-practical-card strong,
.waste-readout strong {
  color: var(--text-main);
  display: block;
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.waste-year-meter {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.waste-year-meter i {
  background: var(--bg-track);
  border-radius: 999px;
  display: block;
  height: 9px;
  overflow: hidden;
}

.waste-year-meter i em {
  background: linear-gradient(90deg, var(--waste-tone), var(--accent-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--filled);
}

.waste-readout {
  border-color: color-mix(in srgb, var(--waste-tone) 24%, var(--border-soft));
  display: grid;
  gap: 10px;
  padding: 14px;
}

.waste-readout > div {
  display: grid;
  gap: 4px;
}

.car-hold-visual {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.car-hold-hero,
.car-brand-ranked-list,
.car-composition-card {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.09), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.car-hold-hero {
  border-color: color-mix(in srgb, var(--accent-mint) 28%, var(--border-soft));
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.05fr) minmax(190px, 0.95fr);
  padding: 16px;
}

.detail-card-side .car-hold-hero {
  grid-template-columns: 1fr;
}

.car-hold-hero > div:first-child {
  display: grid;
  gap: 8px;
}

.car-hold-hero span,
.car-hold-kpis span,
.car-brand-list-heading span,
.car-brand-list-heading strong,
.car-composition-heading span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.car-hold-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.5rem;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.car-hold-hero p,
.car-hold-kpis p,
.car-brand-other small,
.car-composition-heading p,
.car-composition-note {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.car-hold-kpis {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card-side .car-hold-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.car-hold-kpis article {
  border-color: var(--border-soft);
  border-style: solid;
  border-width: 0 0 1px 1px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
}

.car-hold-kpis article:nth-child(odd) {
  border-left-width: 0;
}

.car-hold-kpis article:nth-last-child(-n + 2) {
  border-bottom-width: 0;
}

.car-hold-kpis strong {
  color: var(--text-main);
  font-size: 1.08rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.car-brand-ranked-list,
.car-composition-card {
  display: grid;
  gap: 0;
  padding: 14px;
}

.car-brand-list-heading,
.car-composition-heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.car-brand-list-heading strong,
.car-composition-heading strong {
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.98rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.car-brand-list-heading span {
  color: var(--text-muted);
  text-align: right;
}

.car-brand-rank-row,
.car-brand-other {
  align-items: baseline;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 8px;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  padding: 10px 0;
}

.car-brand-list-heading + .car-brand-rank-row {
  border-top: 0;
}

.car-brand-rank-row > span {
  align-items: center;
  background: rgba(155, 231, 245, 0.13);
  border: 1px solid rgba(155, 231, 245, 0.2);
  border-radius: 999px;
  color: var(--accent-cyan);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 950;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.car-brand-rank-row strong,
.car-brand-other strong,
.car-composition-row strong {
  color: var(--text-main);
  font-size: 0.86rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.car-brand-rank-row small,
.car-brand-other span,
.car-composition-row span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.car-brand-rank-row b,
.car-composition-row b {
  color: var(--accent-mint);
  font-size: 0.82rem;
  font-weight: 950;
  white-space: nowrap;
}

.car-brand-other {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.detail-card-side .car-brand-rank-row {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.detail-card-side .car-brand-rank-row small {
  grid-column: 2;
  grid-row: 2;
  white-space: normal;
}

.detail-card-side .car-brand-rank-row b {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.detail-card-side .car-brand-other {
  align-items: start;
  gap: 4px;
  grid-template-columns: 1fr;
}

.detail-card-side .car-brand-other strong,
.detail-card-side .car-brand-other small {
  justify-self: start;
  white-space: normal;
}

.car-composition-card {
  gap: 12px;
}

.car-composition-heading {
  padding-bottom: 0;
}

.detail-card-side .car-brand-list-heading,
.detail-card-side .car-composition-heading {
  display: grid;
  grid-template-columns: 1fr;
}

.detail-card-side .car-composition-heading p,
.detail-card-side .car-brand-list-heading span {
  max-width: none;
  text-align: left;
}

.car-composition-heading > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.car-composition-heading p {
  max-width: 190px;
  text-align: right;
}

.car-composition-strip {
  background: var(--bg-track);
  border-radius: 999px;
  display: flex;
  height: 16px;
  overflow: hidden;
}

.car-composition-strip span {
  background: var(--segment-tone);
  flex: 0 0 var(--segment-share);
  min-width: 0;
}

.car-composition-list {
  display: grid;
  gap: 0;
}

.car-composition-row {
  align-items: center;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 9px;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  padding: 9px 0;
}

.car-composition-row:first-child {
  border-top: 0;
}

.car-composition-row i {
  background: var(--segment-tone);
  border-radius: 999px;
  display: block;
  height: 12px;
  width: 12px;
}

.car-composition-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.car-composition-note {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.mobility-visual,
.transport-visual {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.mobility-hero-card,
.mobility-kpi-grid article,
.transport-hero,
.transport-section,
.transport-note {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.09), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.mobility-hero,
.transport-hero {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.8fr);
}

.transport-hero {
  border-color: color-mix(in srgb, var(--accent-mint) 28%, var(--border-soft));
  padding: 16px;
}

.mobility-hero-card,
.transport-hero > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mobility-hero-card {
  border-color: color-mix(in srgb, var(--accent-mint) 28%, var(--border-soft));
  padding: 16px;
}

.mobility-hero span,
.mobility-kpi-grid span,
.transport-hero span,
.transport-section header span,
.transport-list span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.mobility-hero strong,
.transport-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.42rem;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.mobility-hero p,
.mobility-hero small,
.mobility-kpi-grid p,
.transport-hero p,
.transport-section header small,
.transport-note p {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.mobility-kpi-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobility-kpi-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
}

.mobility-kpi-grid strong,
.transport-list strong,
.transport-section header strong,
.transport-note strong {
  color: var(--text-main);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.transport-note {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.transport-section {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.transport-section header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.transport-list {
  display: grid;
  gap: 0;
}

.transport-list div {
  align-items: baseline;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 0;
}

.transport-list div:first-child {
  border-top: 0;
}

.electricity-visual,
.property-tax-visual,
.municipal-fees-visual {
  --electricity-tone: var(--accent-mint);
  --electricity-tone-soft: rgba(94, 230, 168, 0.13);
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
}

.electricity-visual.is-normal {
  --electricity-tone: var(--accent-cyan);
  --electricity-tone-soft: rgba(155, 231, 245, 0.12);
}

.electricity-visual.is-high {
  --electricity-tone: var(--accent-coral);
  --electricity-tone-soft: rgba(242, 118, 131, 0.13);
}

.electricity-hero,
.electricity-kpis,
.electricity-time-grid,
.electricity-context-card,
.property-tax-hero,
.property-tax-list,
.property-tax-note,
.municipal-fees-hero,
.municipal-fees-list,
.municipal-fees-note {
  background:
    radial-gradient(circle at 0 0, var(--electricity-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.electricity-hero {
  align-items: center;
  border-color: color-mix(in srgb, var(--electricity-tone) 28%, var(--border-soft));
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.electricity-hero > div:first-child {
  padding: 14px;
}

.electricity-hero span,
.electricity-kpis span,
.electricity-context-card span,
.property-tax-hero span,
.property-tax-row span,
.municipal-fees-hero span,
.municipal-fees-row span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.electricity-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.28rem;
  line-height: 1.04;
}

.electricity-hero p,
.electricity-kpis p,
.electricity-context-card p,
.electricity-context-card small,
.property-tax-hero p,
.property-tax-row p,
.property-tax-note,
.municipal-fees-hero p,
.municipal-fees-row p,
.municipal-fees-note {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.electricity-hero-meta {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--electricity-tone) 28%, var(--border-soft));
  border-radius: 0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  justify-self: stretch;
  min-width: 0;
  padding: 10px 14px;
}

.electricity-hero-meta b {
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}

.electricity-kpis,
.electricity-time-grid {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.electricity-kpis article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 5px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 11px 14px;
}

.electricity-kpis article + article,
.electricity-time-card + .electricity-time-card {
  border-top: 1px solid var(--border-soft);
}

.electricity-kpis article p {
  grid-column: 1 / -1;
}

.electricity-kpis strong {
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-align: right;
}

.electricity-context-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.electricity-time-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 8px;
  padding: 11px 14px;
}

.electricity-time-card strong,
.electricity-context-card strong {
  color: var(--text-main);
  font-size: 0.88rem;
  line-height: 1.18;
}

.electricity-time-card ol {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.electricity-time-card li {
  align-items: baseline;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(155, 231, 245, 0.12);
  border-radius: 0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 7px 0;
}

.electricity-time-card li:first-child {
  border-top: 0;
}

.electricity-time-card li span,
.electricity-time-card li strong {
  font-size: 0.78rem;
  font-weight: 900;
}

.electricity-time-card li span {
  color: var(--text-muted);
}

.electricity-time-card li strong {
  color: var(--text-main);
  text-align: right;
  white-space: nowrap;
}

.electricity-time-card.is-cheap {
  border-color: color-mix(in srgb, var(--accent-mint) 24%, var(--border-soft));
}

.electricity-time-card.is-expensive {
  border-color: color-mix(in srgb, var(--accent-coral) 22%, var(--border-soft));
}

.electricity-context-card {
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.electricity-context-card small {
  background: rgba(155, 231, 245, 0.11);
  border: 1px solid rgba(155, 231, 245, 0.18);
  border-radius: 999px;
  color: var(--accent-cyan);
  font-weight: 900;
  padding: 6px 9px;
  white-space: nowrap;
  width: fit-content;
}

.property-tax-visual {
  --electricity-tone-soft: rgba(155, 231, 245, 0.1);
}

.property-tax-hero {
  border-color: rgba(155, 231, 245, 0.22);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(102px, auto);
  overflow: hidden;
}

.property-tax-hero > div:first-child {
  padding: 14px;
}

.property-tax-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.22rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.property-tax-hero-meta {
  align-content: center;
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border-left: 1px solid var(--border-soft);
  display: grid;
  gap: 6px;
  padding: 12px;
}

.property-tax-hero-meta b {
  color: var(--text-main);
  font-size: 0.94rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.property-tax-list {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.property-tax-row {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 13px;
}

.property-tax-row + .property-tax-row {
  border-top: 1px solid var(--border-soft);
}

.property-tax-row strong {
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.14;
  max-width: 128px;
  overflow-wrap: anywhere;
  text-align: right;
}

.property-tax-note {
  padding: 12px 14px;
}

.municipal-fees-visual {
  --electricity-tone-soft: rgba(94, 230, 168, 0.1);
}

.municipal-fees-hero {
  border-color: rgba(94, 230, 168, 0.22);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  overflow: hidden;
}

.municipal-fees-hero > div:first-child {
  padding: 14px;
}

.municipal-fees-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.22rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.municipal-fees-hero-meta {
  align-content: center;
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border-left: 1px solid var(--border-soft);
  display: grid;
  gap: 6px;
  padding: 12px;
}

.municipal-fees-hero-meta b {
  color: var(--text-main);
  font-size: 0.94rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.municipal-fees-list {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.municipal-fees-row {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 13px;
}

.municipal-fees-row + .municipal-fees-row {
  border-top: 1px solid var(--border-soft);
}

.municipal-fees-row strong {
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.14;
  max-width: 128px;
  overflow-wrap: anywhere;
  text-align: right;
}

.municipal-fees-row i {
  background: rgba(155, 231, 245, 0.14);
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
}

.municipal-fees-row em {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 0;
}

.municipal-fees-row.is-missing strong,
.municipal-fees-row.is-missing p {
  color: var(--text-dim);
}

.municipal-fees-row.is-missing em {
  opacity: 0;
}

.municipal-fees-note {
  padding: 12px 14px;
}

.childcare-payment-visual {
  --electricity-tone-soft: rgba(155, 231, 245, 0.1);
}

.childcare-payment-hero {
  border-color: rgba(155, 231, 245, 0.24);
  grid-template-columns: minmax(0, 1fr);
}

.childcare-payment-hero-comparison {
  color: var(--accent-cyan);
  display: block;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
  margin: 3px 0 7px;
}

.childcare-payment-row em {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-mint));
}

.municipal-housing-price-visual {
  --electricity-tone-soft: rgba(155, 231, 245, 0.1);
}

.municipal-housing-price-hero {
  border-color: rgba(155, 231, 245, 0.24);
}

.municipal-housing-price-hero-meta b {
  font-size: 0.82rem;
}

.municipal-housing-price-row em {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-mint));
}

.workforce-visual {
  display: grid;
  gap: 14px;
  margin: 16px 0;
}

.workforce-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workforce-summary article {
  background:
    radial-gradient(circle at 18% 0, rgba(20, 83, 45, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
}

.workforce-summary small,
.workforce-summary span,
.workforce-comparison > strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
}

.workforce-summary strong {
  color: var(--ink);
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: 950;
  line-height: 1.05;
}

.workforce-balance-card {
  background:
    radial-gradient(circle at 0 0, rgba(94, 230, 168, 0.09), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
  display: grid;
  gap: 12px;
  padding: 14px;
}

.workforce-balance-head {
  display: grid;
  gap: 3px;
}

.workforce-balance-head span,
.workforce-balance-legend b,
.workforce-balance-legend small {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
}

.workforce-balance-head strong {
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.15;
}

.workforce-balance-bar {
  background: rgba(143, 179, 181, 0.18);
  border-radius: 999px;
  display: flex;
  height: 18px;
  overflow: hidden;
}

.workforce-balance-bar i {
  display: block;
  flex: 0 0 var(--share);
  min-width: 2px;
}

.workforce-balance-bar .is-workforce,
.workforce-balance-legend .is-workforce {
  background: linear-gradient(90deg, var(--accent-mint), color-mix(in srgb, var(--accent-mint) 72%, var(--accent-cyan)));
}

.workforce-balance-bar .is-outside,
.workforce-balance-legend .is-outside {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-cyan) 68%, var(--bg-card-hover)), var(--accent-cyan));
}

.workforce-balance-bar i + i {
  border-left: 1px solid var(--bg-panel-strong);
}

.workforce-balance-legend {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workforce-balance-legend span {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  position: relative;
}

.workforce-balance-legend span > i {
  border-radius: 999px;
  height: 9px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 9px;
}

.workforce-balance-legend strong {
  color: var(--text-main);
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.workforce-comparison {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 10px;
  padding: 13px;
}

.equality-visual {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.equality-hero,
.equality-pair-grid {
  display: grid;
  gap: 10px;
}

.equality-hero {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
}

.equality-hero,
.equality-pair-card,
.equality-extra-card,
.migration-hero,
.migration-flow-grid article,
.migration-note,
.finance-hero,
.finance-kpi-grid article,
.finance-balance-list,
.plan-data-hero,
.plan-data-fact-grid article,
.plan-data-list {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.09), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
  padding: 14px;
}

.equality-visual .equality-pair-card {
  overflow: hidden;
}

.equality-hero > div:first-child {
  min-width: 0;
}

.equality-hero span,
.equality-extra-card small,
.migration-visual span,
.finance-visual span,
.plan-data-visual span,
.plan-data-list small {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.equality-hero strong,
.migration-hero strong,
.finance-hero strong,
.plan-data-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.35rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.equality-hero p,
.equality-extra-card p,
.migration-note p,
.migration-hero p,
.finance-hero p,
.finance-kpi-grid p,
.plan-data-hero p,
.plan-data-fact-grid p,
.plan-data-list p {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.equality-hero-metric,
.finance-score-pill {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.equality-hero-metric small,
.finance-score-pill small {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.equality-hero-metric b,
.finance-score-pill b {
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 950;
}

.equality-pair-grid,
.equality-extra-grid,
.migration-flow-grid,
.finance-kpi-grid,
.plan-data-fact-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.equality-pair-header {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.equality-pair-header strong {
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.18;
  min-width: 0;
  overflow-wrap: anywhere;
}

.equality-pair-header span {
  background: rgba(155, 231, 245, 0.13);
  border: 1px solid rgba(155, 231, 245, 0.22);
  border-radius: 999px;
  color: var(--accent-cyan);
  font-size: 0.68rem;
  font-weight: 900;
  justify-self: start;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  text-align: left;
}

.equality-duo {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.equality-row {
  align-items: baseline;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 0 0;
}

.equality-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.equality-row span,
.equality-row strong {
  font-size: 0.76rem;
  font-weight: 900;
}

.equality-row span {
  color: var(--text-muted);
}

.equality-row strong {
  color: var(--text-main);
  text-align: right;
  white-space: nowrap;
}

.equality-extra-card {
  display: grid;
  gap: 8px;
}

.equality-extra-card strong {
  color: var(--text-main);
  font-size: clamp(1.1rem, 4vw, 1.55rem);
  line-height: 1.12;
}

.immigration-visual {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.immigration-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.immigration-summary-grid article,
.immigration-section {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.09), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.immigration-summary-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 13px;
}

.immigration-summary-grid small,
.immigration-section > div:first-child span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.18;
}

.immigration-summary-grid strong {
  color: var(--text-main);
  font-size: clamp(1rem, 3.6vw, 1.42rem);
  font-weight: 940;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.immigration-section {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.immigration-section > div:first-child {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.immigration-section > div:first-child strong {
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 930;
  line-height: 1.16;
}

.immigration-country-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.immigration-country-grid article {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
}

.immigration-country-grid span {
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.18;
}

.immigration-country-grid strong {
  color: var(--accent-mint);
  font-size: 1.02rem;
  line-height: 1.1;
}

.immigration-country-grid small,
.immigration-trend-caption span {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 820;
}

.immigration-trend-card {
  display: grid;
  gap: 8px;
}

.immigration-trend-chart {
  background: color-mix(in srgb, var(--state-info) 3%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: block;
  min-height: 170px;
  overflow: visible;
  width: 100%;
}

.immigration-trend-chart line {
  stroke: rgba(155, 231, 245, 0.2);
  stroke-width: 1;
}

.immigration-trend-chart polyline {
  fill: none;
  stroke: var(--accent-mint);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.immigration-trend-chart circle {
  fill: var(--accent-cyan);
  stroke: var(--bg-panel-strong);
  stroke-width: 2;
}

.immigration-trend-chart text {
  fill: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 850;
  text-anchor: middle;
}

.immigration-trend-caption {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.immigration-trend-caption strong {
  color: var(--text-main);
  font-size: 0.86rem;
  text-align: right;
}

.migration-visual,
.finance-visual,
.plan-data-visual {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.migration-hero,
.finance-hero {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
}

.migration-hero {
  align-items: start;
  gap: 7px 12px;
}

.migration-hero strong {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.migration-hero p {
  grid-column: 1 / -1;
}

.migration-flow-grid article,
.finance-kpi-grid article,
.plan-data-fact-grid article {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.migration-flow-grid strong,
.finance-kpi-grid strong,
.plan-data-fact-grid strong {
  color: var(--text-main);
  font-size: 1.28rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.migration-flow-grid small {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 820;
}

.migration-note,
.finance-balance-list,
.plan-data-list {
  display: grid;
  gap: 10px;
}

.migration-note strong,
.finance-balance-list > strong,
.plan-data-list > strong {
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.18;
}

.finance-visual.is-strong .finance-hero,
.plan-data-visual.is-clear .plan-data-hero {
  border-color: color-mix(in srgb, var(--accent-mint) 32%, var(--border-soft));
}

.finance-visual.is-medium .finance-hero,
.plan-data-visual.is-nearby .plan-data-hero {
  border-color: color-mix(in srgb, var(--accent-amber) 32%, var(--border-soft));
}

.finance-visual.is-weak .finance-hero,
.migration-visual.is-negative .migration-hero,
.plan-data-visual.is-hit .plan-data-hero {
  border-color: color-mix(in srgb, var(--accent-coral) 30%, var(--border-soft));
}

.finance-score-pill {
  justify-self: end;
}

.finance-visual.is-strong .finance-score-pill {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--state-success) 34%, var(--border-soft));
}

.finance-visual.is-medium .finance-score-pill {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--state-warning) 34%, var(--border-soft));
}

.finance-visual.is-weak .finance-score-pill {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--state-danger) 34%, var(--border-soft));
}

.finance-hero strong {
  font-size: 1.12rem;
  line-height: 1.12;
  margin-top: 3px;
}

.finance-score-pill b {
  font-size: 0.95rem;
  line-height: 1.12;
}

.finance-kpi-grid strong {
  font-size: 1.02rem;
  line-height: 1.12;
}

.finance-balance-list div {
  align-items: baseline;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-top: 9px;
}

.finance-balance-list div:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.finance-balance-list strong,
.plan-data-list strong {
  color: var(--text-main);
}

.finance-balance-list div strong {
  font-size: 0.86rem;
  text-align: right;
  white-space: nowrap;
}

.plan-data-hero {
  display: grid;
  gap: 8px;
}

.plan-data-list article {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  display: grid;
  gap: 6px;
  padding: 11px;
}

.plan-data-list a {
  color: var(--accent-mint);
  font-size: 0.8rem;
  font-weight: 900;
  justify-self: start;
  text-decoration: none;
}

.plan-data-list a:hover,
.plan-data-list a:focus-visible {
  text-decoration: underline;
}

.municipal-visual {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.municipal-bar-row {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 10px;
  padding: 13px 14px;
}

.municipal-bar-row div {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.municipal-bar-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.municipal-bar-row strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 920;
  line-height: 1.2;
  text-align: right;
}

.municipal-bar-row i {
  background: rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  display: block;
  height: 9px;
  overflow: hidden;
}

.municipal-bar-row i em {
  background: linear-gradient(90deg, #14532d, #16a34a);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.municipal-reference-list {
  background:
    radial-gradient(circle at 18% 0, rgba(22, 163, 74, 0.1), transparent 30%),
    linear-gradient(180deg, #f8fafc, #ffffff);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.municipal-reference-list > strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 920;
}

.municipal-reference-list div {
  align-items: baseline;
  border-top: 1px solid rgba(100, 116, 139, 0.14);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 10px;
}

.municipal-reference-list span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 860;
}

.municipal-reference-list b {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 920;
  text-align: right;
}

.municipal-efficiency-visual,
.crime-rate-visual,
.health-care-visual {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.municipal-efficiency-visual {
  --efficiency-tone: var(--accent-mint);
  --efficiency-tone-soft: rgba(94, 230, 168, 0.14);
  gap: 12px;
}

.municipal-efficiency-visual.is-good {
  --efficiency-tone: var(--accent-cyan);
  --efficiency-tone-soft: rgba(155, 231, 245, 0.13);
}

.municipal-efficiency-visual.is-medium {
  --efficiency-tone: var(--accent-amber);
  --efficiency-tone-soft: rgba(245, 197, 107, 0.14);
}

.municipal-efficiency-visual.is-weak {
  --efficiency-tone: var(--accent-coral);
  --efficiency-tone-soft: rgba(251, 113, 133, 0.14);
}

.municipal-efficiency-hero,
.municipal-efficiency-explainer,
.municipal-efficiency-sector-card,
.municipal-efficiency-readout,
.municipal-efficiency-note,
.crime-rate-hero,
.crime-rate-ranked-list,
.crime-rate-note,
.health-care-hero,
.health-care-comparison-card,
.health-care-service-note,
.health-care-method-note {
  background:
    radial-gradient(circle at 0 0, var(--panel-tone-soft, rgba(94, 230, 168, 0.12)), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.13);
}

.municipal-efficiency-hero,
.crime-rate-hero,
.health-care-hero {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(106px, auto);
  padding: 16px;
}

.municipal-efficiency-hero {
  --panel-tone-soft: var(--efficiency-tone-soft);
  gap: 10px;
  padding: 14px;
}

.municipal-efficiency-visual .municipal-efficiency-hero strong {
  font-size: 1.2rem;
  line-height: 1.12;
  margin: 4px 0 5px;
}

.municipal-efficiency-visual .municipal-efficiency-verdict {
  min-width: 88px;
  padding: 10px;
}

.municipal-efficiency-visual .municipal-efficiency-verdict b,
.municipal-efficiency-visual .municipal-efficiency-verdict strong {
  font-size: 0.9rem;
}

.municipal-efficiency-hero > div:first-child,
.crime-rate-hero > div:first-child,
.health-care-hero > div:first-child {
  min-width: 0;
}

.municipal-efficiency-hero span,
.municipal-efficiency-readout span,
.crime-rate-ranked-list span,
.health-care-hero span,
.health-care-comparison-card span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.municipal-efficiency-hero strong,
.crime-rate-hero strong,
.health-care-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.88rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 6px 0 8px;
}

.municipal-efficiency-hero p,
.municipal-efficiency-explainer p,
.municipal-efficiency-note p,
.crime-rate-hero p,
.crime-rate-note p,
.health-care-hero p,
.health-care-comparison-card p,
.health-care-service-note p,
.health-care-method-note p {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.municipal-efficiency-verdict,
.crime-rate-period,
.health-care-main-metric {
  background: color-mix(in srgb, var(--panel-tone, var(--state-info)) 10%, var(--surface-sunken));
  border: 1px solid color-mix(in srgb, var(--panel-tone, var(--accent-mint)) 30%, var(--border-soft));
  border-radius: 14px;
  display: grid;
  gap: 5px;
  justify-items: start;
  min-width: 106px;
  padding: 12px;
}

.municipal-efficiency-verdict {
  --panel-tone: var(--efficiency-tone);
  align-self: stretch;
  align-content: center;
}

.municipal-efficiency-verdict b,
.municipal-efficiency-verdict strong,
.crime-rate-period b,
.crime-rate-period strong,
.health-care-main-metric b,
.health-care-main-metric strong {
  color: var(--text-main);
  font-size: 1.02rem;
  font-weight: 940;
  line-height: 1.1;
  margin: 0;
}

.municipal-efficiency-verdict small,
.crime-rate-period small,
.health-care-main-metric small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
}

.municipal-efficiency-explainer,
.municipal-efficiency-note,
.crime-rate-note,
.health-care-service-note,
.health-care-method-note {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.municipal-efficiency-visual .municipal-efficiency-explainer,
.municipal-efficiency-visual .municipal-efficiency-note,
.municipal-efficiency-visual .municipal-efficiency-readout {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.municipal-efficiency-explainer strong,
.municipal-efficiency-note strong,
.crime-rate-note strong,
.health-care-service-note strong,
.health-care-method-note strong {
  color: var(--text-main);
  font-size: 0.98rem;
  font-weight: 940;
  line-height: 1.16;
  margin: 0;
}

.municipal-efficiency-sector-grid {
  background:
    radial-gradient(circle at 0 0, var(--efficiency-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.municipal-efficiency-sector-card {
  --sector-tone: var(--accent-mint);
  --panel-tone-soft: rgba(94, 230, 168, 0.12);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 5px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 11px 12px;
}

.municipal-efficiency-sector-card + .municipal-efficiency-sector-card {
  border-top: 1px solid var(--border-soft);
}

.municipal-efficiency-sector-card.is-good {
  --sector-tone: var(--accent-cyan);
  --panel-tone-soft: rgba(155, 231, 245, 0.12);
}

.municipal-efficiency-sector-card.is-medium {
  --sector-tone: var(--accent-amber);
  --panel-tone-soft: rgba(245, 197, 107, 0.13);
}

.municipal-efficiency-sector-card.is-weak {
  --sector-tone: var(--accent-coral);
  --panel-tone-soft: rgba(251, 113, 133, 0.13);
}

.municipal-efficiency-sector-card header {
  align-items: start;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.municipal-efficiency-sector-card header span {
  background: color-mix(in srgb, var(--sector-tone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sector-tone) 28%, transparent);
  border-radius: 999px;
  color: var(--sector-tone);
  font-size: 0.68rem;
  font-weight: 950;
  justify-self: start;
  line-height: 1;
  max-width: 100%;
  padding: 6px 8px;
}

.municipal-efficiency-sector-card h4 {
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 930;
  line-height: 1.15;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.municipal-efficiency-sector-card strong {
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.municipal-efficiency-sector-card p {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 720;
  grid-column: 1 / -1;
  line-height: 1.32;
  margin: 0;
}

.municipal-efficiency-readout {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
}

.municipal-efficiency-readout div {
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 9px;
}

.municipal-efficiency-readout strong {
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 940;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.municipal-efficiency-readout small {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.municipal-efficiency-note {
  border-color: color-mix(in srgb, var(--efficiency-tone) 24%, var(--border-soft));
}

.municipal-efficiency-note a,
.health-care-method-note a {
  color: var(--accent-mint);
  font-size: 0.82rem;
  font-weight: 900;
  justify-self: start;
  text-decoration: none;
}

.municipal-efficiency-note a:hover,
.municipal-efficiency-note a:focus-visible,
.health-care-method-note a:hover,
.health-care-method-note a:focus-visible {
  text-decoration: underline;
}

.crime-rate-visual {
  --crime-tone: var(--accent-cyan);
  --panel-tone: var(--crime-tone);
  --panel-tone-soft: rgba(155, 231, 245, 0.12);
}

.crime-rate-hero strong {
  font-size: 2rem;
}

.crime-rate-period {
  align-content: center;
  align-self: stretch;
}

.crime-rate-ranked-list {
  counter-reset: crime-row;
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.crime-rate-ranked-list li {
  align-items: center;
  counter-increment: crime-row;
  display: grid;
  gap: 12px;
  grid-template-columns: 28px minmax(0, 1fr) minmax(76px, auto);
  padding: 12px 14px;
}

.crime-rate-ranked-list li + li {
  border-top: 1px solid var(--border-soft);
}

.crime-rate-ranked-list li::before {
  background: color-mix(in srgb, var(--crime-tone) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--crime-tone) 30%, transparent);
  border-radius: 999px;
  color: var(--crime-tone);
  content: counter(crime-row);
  display: grid;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 950;
  height: 24px;
  place-items: center;
  width: 24px;
}

.crime-rate-ranked-list small {
  color: var(--text-muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.2;
  margin-bottom: 3px;
}

.crime-rate-ranked-list span {
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 930;
}

.crime-rate-ranked-list b {
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.14;
  text-align: right;
}

.crime-rate-note {
  border-color: color-mix(in srgb, var(--crime-tone) 24%, var(--border-soft));
}

.crime-district-visual {
  --crime-tone: var(--accent-cyan);
  --trend-tone: var(--accent-mint);
  --panel-tone: var(--crime-tone);
  --panel-tone-soft: rgba(155, 231, 245, 0.12);
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
}

.crime-district-visual.is-up {
  --trend-tone: var(--accent-coral);
}

.crime-district-visual.is-down {
  --trend-tone: var(--accent-mint);
}

.crime-district-visual.is-flat,
.crime-district-visual.is-muted {
  --trend-tone: var(--accent-cyan);
}

.crime-district-hero,
.crime-trend-card,
.crime-category-chart,
.crime-district-note {
  background:
    radial-gradient(circle at 0 0, var(--panel-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.13);
  color: var(--text-main);
}

.crime-district-hero {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  padding: 16px;
}

.detail-card-side .crime-district-hero {
  grid-template-columns: 1fr;
}

.crime-district-hero > div:first-child,
.crime-trend-card > div:first-child {
  min-width: 0;
}

.crime-district-hero span,
.crime-trend-card span,
.crime-category-heading span,
.crime-category-chart small,
.crime-share-card small {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.crime-district-hero strong,
.crime-trend-card strong {
  color: var(--text-main);
  display: block;
  font-size: 1.88rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 6px 0 8px;
  overflow-wrap: anywhere;
}

.crime-district-hero p,
.crime-trend-card p,
.crime-district-note p {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.crime-share-card {
  align-content: center;
  align-items: center;
  background: color-mix(in srgb, var(--crime-tone) 13%, var(--bg-card-hover));
  border: 1px solid color-mix(in srgb, var(--crime-tone) 30%, var(--border-soft));
  border-radius: 14px;
  display: grid;
  gap: 8px;
  justify-items: start;
  min-width: 118px;
  padding: 12px;
}

.crime-share-card b {
  color: var(--text-main);
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1.05;
}

.crime-share-card i {
  background:
    radial-gradient(circle, var(--bg-card-hover) 0 50%, transparent 51%),
    conic-gradient(var(--crime-tone) calc(var(--share) * 1%), rgba(155, 231, 245, 0.16) 0);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crime-tone) 26%, transparent);
  display: block;
  height: 54px;
  width: 54px;
}

.crime-trend-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.crime-trend-card strong {
  color: var(--trend-tone);
  font-size: 1.28rem;
  margin-bottom: 6px;
}

.crime-trend-meter {
  background: rgba(155, 231, 245, 0.14);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.crime-trend-meter span {
  background: linear-gradient(90deg, var(--trend-tone), color-mix(in srgb, var(--trend-tone) 56%, transparent));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: calc(var(--trend) * 1%);
}

.crime-category-chart {
  overflow: hidden;
}

.crime-category-heading {
  align-items: baseline;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 13px 14px 11px;
}

.crime-category-heading strong {
  color: var(--text-main);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.16;
}

.crime-category-heading span {
  color: var(--text-muted);
  flex: 0 0 auto;
}

.crime-category-chart ol {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crime-category-chart li {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
}

.crime-category-chart li + li {
  border-top: 1px solid var(--border-soft);
}

.crime-category-row-head {
  align-items: baseline;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.crime-category-row-head strong {
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 930;
  line-height: 1.2;
  min-width: 0;
}

.crime-category-row-head b {
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.1;
  text-align: right;
}

.crime-category-track {
  background: rgba(155, 231, 245, 0.13);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.crime-category-track span {
  background: linear-gradient(90deg, var(--crime-tone), var(--accent-mint));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: calc(var(--bar) * 1%);
}

.crime-category-chart small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.crime-district-note {
  border-color: color-mix(in srgb, var(--crime-tone) 24%, var(--border-soft));
  display: grid;
  gap: 8px;
  padding: 13px 14px;
}

.crime-district-note strong {
  color: var(--text-main);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.16;
}

.health-care-visual {
  --health-tone: var(--accent-mint);
  --panel-tone: var(--health-tone);
  --panel-tone-soft: rgba(94, 230, 168, 0.13);
}

.health-care-visual.is-medium {
  --health-tone: var(--accent-amber);
  --panel-tone-soft: rgba(245, 197, 107, 0.14);
}

.health-care-visual.is-weak {
  --health-tone: var(--accent-coral);
  --panel-tone-soft: rgba(251, 113, 133, 0.14);
}

.health-care-main-metric {
  align-content: center;
  align-self: center;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--health-tone) 16%, transparent), transparent 48%),
    var(--bg-card-hover);
  min-width: 126px;
  min-height: 112px;
}

.health-care-hero strong {
  font-size: 1.2rem;
  line-height: 1.12;
  margin: 4px 0 6px;
}

.health-care-main-metric b,
.health-care-main-metric strong {
  font-size: 0.96rem;
  line-height: 1.12;
}

.health-care-comparison-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.health-care-comparison-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
}

.health-care-comparison-card.is-good {
  --panel-tone-soft: rgba(94, 230, 168, 0.13);
}

.health-care-comparison-card.is-neutral {
  --panel-tone-soft: rgba(155, 231, 245, 0.12);
}

.health-care-comparison-card.is-missing {
  --panel-tone-soft: rgba(148, 163, 184, 0.1);
}

.health-care-comparison-card header {
  display: grid;
  gap: 7px;
  justify-content: stretch;
}

.health-care-comparison-card h4 {
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 930;
  line-height: 1.18;
  margin: 0;
}

.health-care-comparison-card strong {
  color: var(--text-main);
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.12;
}

.health-care-service-note strong,
.health-care-method-note strong {
  font-size: 0.9rem;
}

.health-care-comparison-card span {
  background: color-mix(in srgb, var(--health-tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--health-tone) 24%, transparent);
  border-radius: 999px;
  color: var(--accent-mint);
  justify-self: start;
  max-width: 100%;
  padding: 5px 8px;
  text-align: left;
}

.health-care-comparison-card.is-missing strong,
.health-care-comparison-card.is-missing span {
  color: var(--text-muted);
}

.health-care-service-note {
  border-color: color-mix(in srgb, var(--health-tone) 22%, var(--border-soft));
}

@media (max-width: 640px) {
  .municipal-efficiency-hero,
  .municipal-efficiency-sector-grid,
  .municipal-efficiency-readout,
  .crime-rate-hero,
  .health-care-hero,
  .health-care-comparison-grid {
    grid-template-columns: 1fr;
  }

  .municipal-efficiency-verdict,
  .crime-rate-period,
  .health-care-main-metric {
    justify-self: start;
  }

  .municipal-efficiency-sector-card header,
  .health-care-comparison-card header {
    display: grid;
  }

  .municipal-efficiency-sector-card header span,
  .health-care-comparison-card span {
    justify-self: start;
    text-align: left;
  }

  .crime-rate-ranked-list li {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .crime-rate-ranked-list b {
    grid-column: 2;
    text-align: left;
  }
}

.law-fulfillment-visual {
  --law-tone: var(--accent-mint);
  --law-tone-soft: rgba(94, 230, 168, 0.14);
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.law-fulfillment-hero,
.law-fulfillment-explainer,
.law-fulfillment-section,
.law-fulfillment-note {
  background:
    radial-gradient(circle at 0 0, var(--law-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.13);
}

.law-fulfillment-hero {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 104px;
  padding: 16px;
}

.law-fulfillment-hero > div:first-child {
  min-width: 0;
}

.law-fulfillment-hero span,
.law-fulfillment-strength-grid span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.law-fulfillment-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.9rem;
  line-height: 1.04;
  margin: 6px 0 8px;
}

.law-fulfillment-hero p,
.law-fulfillment-explainer p,
.law-fulfillment-section-heading p,
.law-fulfillment-note p {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.law-fulfillment-score {
  display: grid;
  grid-template-areas: "stack";
  min-height: 96px;
  min-width: 96px;
  place-items: center;
}

.law-fulfillment-score i,
.law-fulfillment-score b,
.law-fulfillment-score small {
  grid-area: stack;
}

.law-fulfillment-score i {
  background: conic-gradient(var(--law-tone) var(--score), var(--bg-track) 0);
  border-radius: 999px;
  display: block;
  height: 92px;
  position: relative;
  width: 92px;
}

.law-fulfillment-score i::after {
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-soft);
  border-radius: inherit;
  content: "";
  inset: 10px;
  position: absolute;
}

.law-fulfillment-score b {
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.1;
  z-index: 1;
}

.law-fulfillment-score small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  transform: translateY(19px);
  z-index: 1;
}

.law-fulfillment-explainer,
.law-fulfillment-section,
.law-fulfillment-note {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.law-fulfillment-explainer strong,
.law-fulfillment-section-heading h4,
.law-fulfillment-note strong {
  color: var(--text-main);
  font-size: 0.98rem;
  line-height: 1.16;
  margin: 0 0 4px;
}

.law-fulfillment-section-heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.law-fulfillment-section-heading > strong {
  background: var(--law-tone-soft);
  border: 1px solid color-mix(in srgb, var(--law-tone) 34%, transparent);
  border-radius: 999px;
  color: var(--law-tone);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  padding: 6px 8px;
  white-space: nowrap;
}

.law-fulfillment-expected {
  display: grid;
  gap: 9px;
}

.law-fulfillment-expected > div:not(.law-fulfillment-expected-track) {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.law-fulfillment-expected span,
.law-fulfillment-area-row span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.22;
}

.law-fulfillment-expected strong,
.law-fulfillment-area-row strong,
.law-fulfillment-strength-grid strong {
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 940;
  line-height: 1.16;
}

.law-fulfillment-expected-track {
  background: var(--bg-track);
  border-radius: 999px;
  height: 11px;
  overflow: hidden;
  position: relative;
}

.law-fulfillment-expected-track i {
  border-radius: inherit;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.law-fulfillment-expected-track .is-expected {
  background: rgba(155, 231, 245, 0.28);
  width: var(--expected);
}

.law-fulfillment-expected-track .is-actual {
  background: linear-gradient(90deg, var(--law-tone), var(--accent-cyan));
  width: var(--actual);
}

.law-fulfillment-area-list {
  display: grid;
  gap: 10px;
}

.law-fulfillment-area-row {
  display: grid;
  gap: 8px;
}

.law-fulfillment-area-row > div {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.law-fulfillment-area-row i {
  background: var(--bg-track);
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
}

.law-fulfillment-area-row i em {
  background: linear-gradient(90deg, var(--accent-amber), var(--law-tone));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.law-fulfillment-strength-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.law-fulfillment-strength-grid article {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.law-fulfillment-note {
  border-color: color-mix(in srgb, var(--law-tone) 24%, var(--border-soft));
}

.law-fulfillment-note a {
  color: var(--accent-mint);
  font-size: 0.82rem;
  font-weight: 900;
  justify-self: start;
  text-decoration: none;
}

.law-fulfillment-note a:hover,
.law-fulfillment-note a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .law-fulfillment-hero,
  .law-fulfillment-strength-grid {
    grid-template-columns: 1fr;
  }

  .law-fulfillment-score {
    justify-self: start;
  }

  .law-fulfillment-section-heading {
    display: grid;
  }

  .law-fulfillment-section-heading > strong {
    justify-self: start;
  }
}

.culture-index-visual {
  background:
    radial-gradient(circle at 14% 0, rgba(20, 83, 45, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
}

.culture-index-visual > div {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.culture-index-visual > div + div {
  border-top: 1px solid rgba(100, 116, 139, 0.14);
  padding-top: 11px;
}

.culture-index-visual > div strong {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 930;
}

.culture-index-visual > div span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: right;
}

.culture-index-visual ol {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.culture-index-visual li {
  align-items: center;
  background: rgba(248, 250, 252, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) minmax(82px, auto);
  padding: 9px 10px;
}

.culture-index-visual li.is-current {
  background: rgba(20, 83, 45, 0.09);
  border-color: rgba(20, 83, 45, 0.2);
}

.culture-index-visual li b {
  align-items: center;
  background: #ecfdf5;
  border-radius: 999px;
  color: #14532d;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 930;
  height: 26px;
  justify-content: center;
}

.culture-index-visual li span {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 880;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.culture-index-visual li strong {
  color: #475569;
  font-size: 0.76rem;
  font-weight: 900;
  text-align: right;
}

.senior-visual {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0;
}

.senior-card,
.senior-projection-card {
  background:
    radial-gradient(circle at 20% 0, rgba(22, 163, 74, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
  min-width: 0;
  padding: 14px;
}

.senior-card {
  display: grid;
  gap: 12px;
}

.senior-card small,
.senior-projection-card small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 920;
  line-height: 1.2;
  margin-bottom: 6px;
}

.senior-card strong,
.senior-projection-card strong {
  color: var(--ink);
  display: block;
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.senior-card p,
.senior-projection-card p {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.3;
  margin: 7px 0 0;
}

.senior-card > span {
  background:
    linear-gradient(90deg, #14532d var(--bar), rgba(20, 83, 45, 0.12) 0),
    rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  display: block;
  height: 9px;
}

.senior-projection-card {
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.senior-projection-bars {
  align-self: center;
  display: grid;
  gap: 10px;
}

.senior-projection-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 44px minmax(0, 1fr) minmax(92px, auto);
}

.senior-projection-row b {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 930;
}

.senior-projection-row i {
  background: rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  display: block;
  height: 11px;
  overflow: hidden;
  position: relative;
}

.senior-projection-row i em,
.senior-projection-row i strong {
  border-radius: inherit;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.senior-projection-row i em {
  background: rgba(20, 83, 45, 0.22);
  width: var(--base);
}

.senior-projection-row i strong {
  background: linear-gradient(90deg, #14532d, #16a34a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  width: var(--target);
}

.senior-projection-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 880;
  text-align: right;
  white-space: nowrap;
}

.senior-compact-visual {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
}

.senior-compact-panel {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.12);
  display: grid;
  gap: 11px;
  padding: 13px;
}

.senior-compact-hero {
  display: grid;
  gap: 5px;
}

.senior-compact-hero span,
.senior-compact-row span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.senior-compact-hero strong {
  color: var(--text-main);
  font-size: 1.12rem;
  font-weight: 940;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.senior-compact-hero p,
.senior-compact-note,
.senior-compact-row small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.36;
  margin: 0;
}

.senior-compact-list {
  display: grid;
  gap: 0;
}

.senior-compact-row {
  align-items: center;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 7px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 0;
}

.senior-compact-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.senior-compact-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.senior-compact-row strong {
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 940;
  line-height: 1.12;
  text-align: right;
  white-space: nowrap;
}

.senior-compact-row i {
  background: var(--bg-track);
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
}

.senior-compact-row i em {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.senior-compact-note {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.weather-visual {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr);
  margin: 16px 0;
}

.weather-visual-card {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  overflow: hidden;
  padding: 16px;
}

.weather-card-header {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.weather-card-header > span {
  background: #ecfdf5;
  border: 1px solid rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  color: #166534;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 6px 8px;
}

.weather-visual-card small,
.weather-mini-card small,
.weather-daylight-card small,
.weather-terrain-summary small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.weather-visual-card strong {
  display: block;
  font-size: clamp(1.18rem, 4.6vw, 1.82rem);
  line-height: 1.1;
}

.weather-visual-card p,
.weather-daylight-card p,
.weather-terrain-summary p {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.35;
  margin: 6px 0 0;
}

.weather-rain-gauge {
  align-items: center;
  background:
    radial-gradient(circle at 16% 50%, rgba(14, 165, 233, 0.14), transparent 26%),
    linear-gradient(135deg, #eff6ff, #ecfdf5);
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 16px;
  padding: 12px;
}

.weather-rain-gauge span {
  background:
    linear-gradient(90deg, #0f766e var(--wet), rgba(15, 118, 110, 0.14) 0),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.65) 22px 24px);
  border-radius: 999px;
  display: block;
  height: 14px;
}

.weather-rain-gauge b {
  color: #065f46;
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.weather-bar-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.weather-compare-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(82px, 0.85fr) minmax(80px, 1fr) minmax(72px, auto);
}

.weather-compare-row span,
.weather-compare-row b {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.weather-compare-row i {
  background: rgba(15, 118, 110, 0.1);
  border-radius: 999px;
  display: block;
  height: 9px;
  overflow: hidden;
}

.weather-compare-row i em {
  background: linear-gradient(90deg, #14b8a6, #0f766e);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.weather-compare-row.is-home span,
.weather-compare-row.is-home b {
  color: var(--ink);
}

.weather-compare-row.is-home i em {
  background: linear-gradient(90deg, #14532d, #16a34a);
}

.weather-temperature-card {
  grid-column: 1 / -1;
}

.weather-season-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

.weather-season-strip article {
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.8), rgba(248, 250, 252, 0.92));
  border: 1px solid rgba(20, 83, 45, 0.1);
  border-radius: 14px;
  min-width: 0;
  padding: 11px;
}

.weather-season-strip strong {
  font-size: clamp(1rem, 3.6vw, 1.38rem);
}

.weather-season-strip i {
  background:
    linear-gradient(90deg, #0f766e var(--bar), rgba(15, 118, 110, 0.12) 0),
    #e5e7eb;
  border-radius: 999px;
  display: block;
  height: 8px;
  margin-top: 10px;
}

.weather-temp-table {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.weather-temp-head,
.weather-temp-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(96px, 1fr) repeat(4, minmax(48px, 0.54fr));
}

.weather-temp-head span,
.weather-temp-head b,
.weather-temp-row span,
.weather-temp-row b {
  font-size: 0.74rem;
  font-weight: 900;
}

.weather-temp-head {
  color: var(--muted);
  padding: 0 8px;
}

.weather-temp-row {
  background: rgba(248, 250, 252, 0.76);
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 12px;
  padding: 8px;
}

.weather-temp-row b {
  color: var(--muted);
  text-align: right;
}

.weather-temp-row.is-home {
  background: #ecfdf5;
  border-color: rgba(20, 83, 45, 0.16);
}

.weather-temp-row.is-home span,
.weather-temp-row.is-home b {
  color: var(--ink);
}

.weather-side-stack {
  display: grid;
  gap: 10px;
}

.weather-mini-card,
.weather-daylight-card,
.weather-terrain-summary {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 15px;
  padding: 12px;
}

.weather-mini-card strong {
  font-size: 1rem;
  line-height: 1.18;
}

.weather-mini-card span {
  background:
    linear-gradient(90deg, #14532d var(--bar), transparent var(--bar)),
    #e5e7eb;
  border-radius: 999px;
  display: block;
  height: 8px;
  margin-top: 10px;
}

.weather-daylight-card {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weather-daylight-card strong {
  font-size: 1.05rem;
  line-height: 1.08;
}

.weather-terrain-summary {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 116px;
}

.weather-terrain-summary strong {
  font-size: 1rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.terrain-horizon {
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center, #ffffff 0 20%, transparent 21%),
    radial-gradient(circle at center, rgba(20, 83, 45, 0.08), rgba(15, 118, 110, 0.02) 64%, transparent 65%);
  border: 1px solid rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  margin: 0;
  max-width: 116px;
  position: relative;
}

.terrain-horizon span {
  background: linear-gradient(180deg, #14532d, #10b981);
  border-radius: 999px;
  bottom: 50%;
  box-shadow: 0 7px 18px rgba(20, 83, 45, 0.18);
  height: var(--height);
  left: calc(50% - 3px);
  position: absolute;
  transform: rotate(var(--angle)) translateY(-9px);
  transform-origin: 50% 100%;
  width: 6px;
}

.terrain-horizon b {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(20, 83, 45, 0.12);
  border-radius: 999px;
  color: var(--ink);
  display: flex;
  font-size: 0.66rem;
  font-weight: 950;
  inset: 36%;
  justify-content: center;
  position: absolute;
}

.weather-visual-v2 {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.8fr) minmax(230px, 0.82fr);
  margin: 16px 0;
}

.weather-panel {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(17, 24, 39, 0.05);
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}

.weather-rain-hero {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(145px, 0.62fr) minmax(0, 1.38fr);
  min-height: 270px;
}

.weather-rain-summary {
  align-content: start;
  display: grid;
  gap: 10px;
}

.weather-rain-summary small,
.weather-forecast-card small,
.weather-season-card small,
.weather-sun-tiles small,
.weather-sun-facts span,
.weather-data-note strong {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 920;
}

.weather-rain-summary > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.weather-rain-summary strong {
  color: var(--ink);
  font-size: clamp(1.5rem, 5vw, 2.15rem);
  line-height: 1.05;
}

.weather-rain-summary p {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.weather-rain-summary b {
  background: #dcfce7;
  border-radius: 999px;
  color: #166534;
  font-size: 0.8rem;
  font-weight: 950;
  justify-self: start;
  padding: 9px 13px;
}

.weather-rain-chart {
  display: grid;
  gap: 10px;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 224px;
}

.weather-rain-axis {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 0.69rem;
  font-weight: 820;
  justify-content: space-between;
  padding: 2px 0 24px;
  text-align: right;
}

.weather-rain-plot {
  align-items: end;
  border-bottom: 1px solid rgba(100, 116, 139, 0.28);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(var(--years, 10), minmax(12px, 1fr));
  min-height: 224px;
  padding-top: 10px;
  position: relative;
}

.weather-ref-line {
  border-top: 1px dashed rgba(100, 116, 139, 0.55);
  bottom: var(--ref);
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}

.weather-ref-line em {
  background: rgba(248, 250, 252, 0.92);
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
  padding-left: 6px;
  position: absolute;
  right: 0;
  top: -18px;
}

.weather-year-bar {
  align-items: end;
  display: flex;
  height: 100%;
  justify-content: center;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.weather-year-bar::before {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16);
  content: "";
  height: var(--bar);
  width: min(28px, 86%);
}

.weather-year-bar b {
  bottom: -22px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 820;
  position: absolute;
}

.weather-forecast-stack {
  display: grid;
  gap: 14px;
}

.weather-forecast-card {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 54px minmax(0, 1fr);
}

.weather-forecast-card.compact {
  grid-template-columns: minmax(0, 1fr) 94px;
}

.weather-card-icon {
  background:
    radial-gradient(circle at 48% 38%, #cbd5e1 0 22%, transparent 23%),
    radial-gradient(circle at 34% 50%, #94a3b8 0 20%, transparent 21%),
    radial-gradient(circle at 62% 54%, #94a3b8 0 19%, transparent 20%);
  height: 52px;
  position: relative;
  width: 52px;
}

.weather-card-icon::after {
  color: #3b82f6;
  content: "///";
  font-size: 1.12rem;
  font-weight: 950;
  left: 12px;
  letter-spacing: 2px;
  position: absolute;
  top: 32px;
  transform: rotate(-18deg);
}

.weather-forecast-card strong {
  color: var(--ink);
  display: block;
  font-size: clamp(1.35rem, 5vw, 1.86rem);
  line-height: 1.05;
  margin-top: 6px;
}

.weather-forecast-card p {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.35;
  margin: 6px 0 10px;
}

.weather-forecast-card > div > span {
  background:
    linear-gradient(90deg, #14532d var(--bar), rgba(20, 83, 45, 0.14) 0),
    #e5e7eb;
  border-radius: 999px;
  display: block;
  height: 8px;
}

.weather-daily-bars {
  align-items: end;
  display: flex;
  gap: 5px;
  height: 74px;
}

.weather-daily-bars span {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  border-radius: 2px 2px 0 0;
  display: block;
  flex: 1;
  height: var(--bar);
}

.weather-rain-profile {
  grid-template-columns: 1fr;
}

.rain-profile-panel {
  --rain-blue: #0ea5e9;
  --rain-cyan: #06b6d4;
  --rain-mint: #22c55e;
  --rain-peak: #f59e0b;
  padding: 0;
}

.rain-profile-hero {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(34, 197, 94, 0.07)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.92));
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(142px, 0.42fr);
  padding: 18px;
}

.rain-profile-kicker,
.rain-profile-main-metric span,
.rain-profile-stats span,
.rain-section-heading p {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.rain-profile-kicker {
  font-family: "SFMono-Regular", "Cascadia Mono", "Consolas", ui-monospace, monospace;
}

.rain-profile-hero h4,
.rain-section-heading h5 {
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.12;
  margin: 8px 0 8px;
}

.rain-profile-hero p,
.rain-section-heading p {
  color: var(--muted);
  font-size: 0.87rem;
  font-weight: 740;
  line-height: 1.38;
  margin: 0;
}

.rain-profile-main-metric {
  align-content: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 16px;
  display: grid;
  justify-items: start;
  min-width: 0;
  padding: 14px;
}

.rain-profile-main-metric strong {
  color: var(--ink);
  font-size: clamp(1.45rem, 5vw, 2.15rem);
  line-height: 1;
  margin: 7px 0 6px;
  white-space: nowrap;
}

.rain-profile-main-metric em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 820;
}

.rain-profile-stats {
  background: rgba(100, 116, 139, 0.13);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rain-profile-stats div {
  background: rgba(255, 255, 255, 0.66);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
}

.rain-profile-stats strong {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.1;
}

.rain-profile-stats small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.rain-profile-section {
  border-top: 1px solid rgba(100, 116, 139, 0.14);
  display: grid;
  gap: 14px;
  padding: 17px 18px;
}

.rain-section-heading {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.rain-section-heading h5 {
  font-size: 0.98rem;
  margin: 0 0 5px;
}

.rain-section-heading > strong {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.1;
  white-space: nowrap;
}

.rain-comparison-bars {
  display: grid;
  gap: 10px;
}

.rain-reference-cities {
  border-top: 1px solid rgba(14, 165, 233, 0.14);
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding-top: 11px;
}

.rain-reference-cities > span {
  color: var(--muted);
  font-family: "SFMono-Regular", "Cascadia Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

.rain-reference-city-list {
  display: grid;
  gap: 8px;
}

.rain-comparison-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(106px, 0.82fr) minmax(0, 1fr) minmax(70px, auto);
}

.rain-comparison-row span,
.rain-forecast-day span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.rain-comparison-row i,
.rain-forecast-day i {
  background: rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  display: block;
  height: 11px;
  overflow: hidden;
}

.rain-comparison-row i::before,
.rain-forecast-day i::before {
  background: rgba(100, 116, 139, 0.66);
  border-radius: inherit;
  content: "";
  display: block;
  height: 100%;
  width: var(--bar);
}

.rain-comparison-row.is-home i::before {
  background: linear-gradient(90deg, var(--rain-mint), var(--rain-cyan));
}

.rain-comparison-row strong {
  color: var(--ink);
  font-size: 0.84rem;
  text-align: right;
}

.rain-history-echart {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.rain-history-echart-host {
  margin-top: 4px;
}

.rain-history-fallback dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rain-forecast-days {
  display: grid;
  gap: 8px;
}

.rain-forecast-day {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px minmax(0, 1fr) minmax(66px, auto);
}

.rain-forecast-day i::before {
  background: linear-gradient(90deg, var(--rain-cyan), var(--rain-mint));
}

.rain-forecast-day strong {
  color: var(--ink);
  font-size: 0.82rem;
  text-align: right;
}

.rain-forecast-day.is-peak i::before {
  background: linear-gradient(90deg, var(--rain-peak), #fb7185);
}

.rain-forecast-day.is-peak strong {
  color: #b45309;
}

.rain-empty {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.38;
  margin: 0;
}

.detail-card-side .rain-profile-hero {
  grid-template-columns: 1fr;
}

.detail-card-side .rain-profile-hero {
  gap: 12px;
  padding: 15px;
}

.detail-card-side .rain-profile-main-metric {
  justify-items: start;
}

.detail-card-side .rain-profile-section {
  padding: 14px 15px;
}

.detail-card-side .rain-section-heading {
  display: grid;
}

.detail-card-side .rain-comparison-row {
  gap: 8px;
  grid-template-columns: minmax(92px, 0.82fr) minmax(0, 1fr) minmax(58px, auto);
}

.detail-card-side .rain-history-echart-host {
  min-height: 250px;
}

.detail-card-side .rain-forecast-day {
  grid-template-columns: 48px minmax(0, 1fr) minmax(58px, auto);
}

.weather-temp-section,
.weather-sun-grid,
.weather-data-note {
  grid-column: 1 / -1;
}

.weather-section-heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.weather-section-heading h4,
.weather-sun-arc-card h4 {
  color: var(--ink);
  font-size: 1rem;
  margin: 0 0 4px;
}

.weather-section-heading p {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.weather-section-heading > strong {
  color: var(--ink);
  font-size: clamp(1.2rem, 4vw, 1.65rem);
  white-space: nowrap;
}

.weather-season-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

.weather-temp-section .weather-season-cards {
  margin-top: 0;
}

.weather-season-card {
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  min-width: 0;
  padding: 14px;
  position: relative;
}

.weather-season-card .season-symbol {
  color: #15803d;
  font-size: 1.15rem;
  font-weight: 950;
  position: absolute;
  right: 14px;
  top: 12px;
}

.weather-season-card strong {
  color: var(--ink);
  display: block;
  font-size: clamp(1.25rem, 4.4vw, 1.7rem);
  line-height: 1.08;
  margin-top: 10px;
}

.weather-season-card p {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.38;
  min-height: 38px;
}

.weather-season-card i {
  background: rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
}

.weather-season-card i::before {
  background: linear-gradient(90deg, #14532d, #16a34a);
  border-radius: inherit;
  content: "";
  display: block;
  height: 100%;
  width: var(--bar);
}

.weather-temp-comparison {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}

.weather-sun-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
}

.weather-sun-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.weather-sun-tiles div {
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  padding: 12px;
}

.weather-sun-tiles strong {
  color: var(--ink);
  display: block;
  font-size: 1.1rem;
  margin: 4px 0;
}

.weather-sun-tiles p {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.weather-sun-arc {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(251, 191, 36, 0.16) 0 42%, transparent 43%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border-bottom: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 220px 220px 0 0;
  height: 170px;
  margin: 16px auto 0;
  max-width: 420px;
  position: relative;
}

.weather-sun-arc::before {
  border: 2px solid rgba(245, 158, 11, 0.72);
  border-bottom: 0;
  border-radius: 220px 220px 0 0;
  content: "";
  inset: 22px 38px 0;
  position: absolute;
}

.sun-dot {
  background: #fbbf24;
  border: 4px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.28);
  height: 26px;
  left: calc(50% - 13px);
  position: absolute;
  top: 14px;
  width: 26px;
}

.weather-sun-arc b,
.weather-sun-arc strong {
  color: var(--ink);
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.weather-sun-arc b {
  bottom: 48px;
  font-size: 0.72rem;
}

.weather-sun-arc strong {
  bottom: 24px;
  font-size: 1.18rem;
}

.weather-sun-arc small {
  bottom: 14px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.25;
  position: absolute;
}

.weather-sun-arc .sunrise {
  left: 8px;
}

.weather-sun-arc .sunset {
  right: 8px;
  text-align: right;
}

.weather-sun-facts {
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 15px;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 13px;
}

.weather-sun-facts div {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.weather-sun-facts b {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 950;
}

.weather-data-note {
  align-items: center;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(248, 250, 252, 0.98));
  border: 1px solid rgba(20, 83, 45, 0.1);
  border-radius: 16px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.weather-data-note p {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.4;
  margin: 0;
}

.drinking-water-visual {
  --water-tone: var(--accent-mint);
  --water-tone-soft: rgba(94, 230, 168, 0.14);
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.drinking-water-visual.is-good {
  --water-tone: var(--accent-cyan);
  --water-tone-soft: rgba(155, 231, 245, 0.12);
}

.drinking-water-visual.is-watch {
  --water-tone: var(--accent-amber);
  --water-tone-soft: rgba(242, 200, 121, 0.14);
}

.drinking-water-visual.is-weak {
  --water-tone: var(--accent-coral);
  --water-tone-soft: rgba(242, 118, 131, 0.14);
}

.drinking-water-hero,
.drinking-water-kpis article,
.drinking-water-section,
.drinking-water-note {
  background:
    radial-gradient(circle at 0 0, var(--water-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.13);
}

.drinking-water-hero {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 104px;
  padding: 16px;
}

.drinking-water-hero-copy {
  min-width: 0;
}

.drinking-water-hero-copy span,
.drinking-water-kpis span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.drinking-water-hero-copy strong {
  color: var(--text-main);
  display: block;
  font-size: 2rem;
  line-height: 1.02;
  margin: 6px 0 8px;
}

.drinking-water-hero-copy p,
.drinking-water-kpis p,
.drinking-water-section-heading p,
.drinking-water-note p,
.drinking-water-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.drinking-water-score-ring {
  display: grid;
  grid-template-areas: "stack";
  justify-items: center;
  min-height: 96px;
  min-width: 96px;
  place-items: center;
}

.drinking-water-score-ring i,
.drinking-water-score-ring b,
.drinking-water-score-ring small {
  grid-area: stack;
}

.drinking-water-score-ring i {
  background: conic-gradient(var(--water-tone) var(--score), var(--bg-track) 0);
  border-radius: 999px;
  display: block;
  height: 92px;
  position: relative;
  width: 92px;
}

.drinking-water-score-ring i::after {
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-soft);
  border-radius: inherit;
  content: "";
  inset: 10px;
  position: absolute;
}

.drinking-water-score-ring b {
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.1;
  z-index: 1;
}

.drinking-water-score-ring small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  transform: translateY(19px);
  z-index: 1;
}

.drinking-water-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.drinking-water-kpis article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
}

.drinking-water-kpis strong {
  color: var(--text-main);
  font-size: 1.1rem;
  line-height: 1.12;
}

.drinking-water-kpis i {
  background: var(--bg-track);
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
}

.drinking-water-kpis i em {
  background: linear-gradient(90deg, var(--water-tone), var(--accent-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.drinking-water-section,
.drinking-water-note {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.drinking-water-section-heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.drinking-water-section-heading h4,
.drinking-water-note strong {
  color: var(--text-main);
  font-size: 0.98rem;
  line-height: 1.16;
  margin: 0 0 4px;
}

.drinking-water-section-heading > strong {
  background: var(--water-tone-soft);
  border: 1px solid color-mix(in srgb, var(--water-tone) 34%, transparent);
  border-radius: 999px;
  color: var(--water-tone);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  padding: 6px 8px;
  white-space: nowrap;
}

.drinking-water-comparison {
  display: grid;
  gap: 9px;
}

.drinking-water-comparison > div:not(.drinking-water-comparison-track) {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.drinking-water-comparison span,
.drinking-water-year-strip b {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.drinking-water-comparison strong,
.drinking-water-year-strip strong {
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 940;
}

.drinking-water-comparison-track {
  background: var(--bg-track);
  border-radius: 999px;
  height: 11px;
  overflow: hidden;
  position: relative;
}

.drinking-water-comparison-track i {
  border-radius: inherit;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.drinking-water-comparison-track .is-national {
  background: rgba(155, 231, 245, 0.28);
  width: var(--national);
}

.drinking-water-comparison-track .is-local {
  background: linear-gradient(90deg, var(--water-tone), var(--accent-cyan));
  width: var(--local);
}

.drinking-water-comparison small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 820;
}

.drinking-water-year-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}

.drinking-water-year-strip span {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
}

.drinking-water-year-strip span.is-latest {
  background: var(--water-tone-soft);
  border-color: color-mix(in srgb, var(--water-tone) 38%, var(--border-soft));
}

.drinking-water-note {
  border-color: color-mix(in srgb, var(--water-tone) 22%, var(--border-soft));
}

.drinking-water-note a {
  color: var(--accent-mint);
  font-size: 0.82rem;
  font-weight: 900;
  justify-self: start;
  text-decoration: none;
}

.drinking-water-note a:hover,
.drinking-water-note a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .drinking-water-hero,
  .drinking-water-kpis {
    grid-template-columns: 1fr;
  }

  .drinking-water-score-ring {
    justify-self: start;
  }

  .drinking-water-section-heading {
    display: grid;
  }

  .drinking-water-section-heading > strong {
    justify-self: start;
  }
}

.air-quality-visual {
  display: grid;
  gap: 14px;
}

.air-quality-visual {
  --air-tone: var(--accent-mint);
  --air-tone-soft: rgba(94, 230, 168, 0.14);
}

.air-quality-visual.is-moderate {
  --air-tone: var(--accent-amber);
  --air-tone-soft: rgba(242, 200, 121, 0.14);
}

.air-quality-visual.is-poor {
  --air-tone: var(--accent-coral);
  --air-tone-soft: rgba(242, 118, 131, 0.14);
}

.air-quality-visual.is-neutral {
  --air-tone: var(--accent-cyan);
  --air-tone-soft: rgba(155, 231, 245, 0.12);
}

.air-quality-hero,
.air-quality-kpis article,
.air-quality-section,
.air-quality-reference-echart {
  background:
    radial-gradient(circle at 0 0, var(--air-tone-soft), transparent 40%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.air-quality-hero {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 104px;
  overflow: hidden;
  padding: 16px;
}

.air-quality-hero-copy {
  min-width: 0;
}

.air-quality-hero-copy span,
.air-quality-kpis span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
}

.air-quality-hero-copy strong {
  color: var(--text-main);
  display: block;
  font-size: 1.9rem;
  line-height: 1.05;
  margin: 6px 0 8px;
}

.air-quality-hero-copy p,
.air-quality-section-heading p,
.air-quality-kpis p,
.air-quality-component-row small,
.air-quality-reference-row small,
.air-quality-station-card small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.air-quality-score-ring {
  display: grid;
  grid-template-areas: "stack";
  justify-items: center;
  min-height: 96px;
  min-width: 96px;
  place-items: center;
}

.air-quality-score-ring i,
.air-quality-score-ring b,
.air-quality-score-ring small {
  grid-area: stack;
}

.air-quality-score-ring i {
  background: conic-gradient(var(--air-tone) var(--score), var(--bg-track) 0);
  border-radius: 999px;
  display: block;
  height: 92px;
  position: relative;
  width: 92px;
}

.air-quality-score-ring i::after {
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-soft);
  border-radius: inherit;
  content: "";
  inset: 10px;
  position: absolute;
}

.air-quality-score-ring b {
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 940;
  line-height: 1.1;
  max-width: 70px;
  text-align: center;
  transform: translateY(-5px);
  z-index: 1;
}

.air-quality-score-ring small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  transform: translateY(19px);
  z-index: 1;
}

.air-quality-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.air-quality-kpis article {
  min-width: 0;
  padding: 12px;
}

.air-quality-kpis strong {
  color: var(--text-main);
  display: block;
  font-size: 1.05rem;
  line-height: 1.16;
  margin: 7px 0 5px;
}

.air-quality-section,
.air-quality-reference-echart {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
}

.air-quality-section-heading,
.air-quality-reference-echart .chart-panel-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.air-quality-section-heading h4,
.air-quality-reference-echart .chart-panel-head h4 {
  color: var(--text-main);
  font-size: 0.98rem;
  line-height: 1.16;
  margin: 0 0 4px;
}

.air-quality-reference-echart .chart-panel-head p {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.38;
}

.air-quality-component-list,
.air-quality-reference-list,
.air-quality-station-list {
  display: grid;
  gap: 9px;
}

.air-quality-component-row,
.air-quality-reference-row {
  align-items: center;
  display: grid;
  gap: 10px;
}

.air-quality-component-row {
  grid-template-columns: minmax(94px, 0.9fr) minmax(72px, auto) minmax(84px, 1fr);
}

.air-quality-component-row strong,
.air-quality-reference-row b,
.air-quality-reference-row strong,
.air-quality-station-card strong,
.air-quality-station-card b {
  color: var(--text-main);
}

.air-quality-component-row > span {
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.air-quality-component-row i,
.air-quality-reference-row i {
  background: var(--bg-track);
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
}

.air-quality-component-row i em,
.air-quality-reference-row i em {
  background: linear-gradient(90deg, var(--air-tone), var(--accent-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.air-quality-reference-echart .echart-host {
  min-height: var(--echart-height, 260px);
}

.air-quality-reference-row {
  grid-template-columns: minmax(116px, 1fr) minmax(72px, 0.8fr) minmax(58px, auto);
  padding-top: 9px;
}

.air-quality-reference-row + .air-quality-reference-row {
  border-top: 1px solid var(--border-soft);
}

.air-quality-reference-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.air-quality-reference-row.is-home {
  color: var(--accent-mint);
}

.air-quality-reference-row strong {
  font-size: 0.84rem;
  text-align: right;
  white-space: nowrap;
}

.air-quality-station-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.air-quality-station-card {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: grid;
  gap: 9px;
  padding: 12px;
}

.air-quality-station-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.air-quality-station-card > div > span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
}

.air-quality-station-card strong {
  font-size: 0.92rem;
  line-height: 1.2;
}

.air-quality-station-card b {
  background: var(--air-tone-soft);
  border: 1px solid color-mix(in srgb, var(--air-tone) 38%, transparent);
  border-radius: 999px;
  color: var(--air-tone);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 950;
  justify-self: start;
  padding: 4px 8px;
}

.air-quality-station-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.air-quality-station-card p span {
  background: var(--bg-track);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 820;
  padding: 4px 7px;
}

@media (max-width: 640px) {
  .air-quality-hero,
  .air-quality-component-row,
  .air-quality-reference-row,
  .air-quality-station-list {
    grid-template-columns: 1fr;
  }

  .air-quality-score-ring {
    justify-self: start;
  }

  .air-quality-component-row > span,
  .air-quality-reference-row strong {
    text-align: left;
  }
}

.nodnett-visual {
  margin: 16px 0;
}

.nodnett-signal {
  background:
    radial-gradient(circle at 22% 50%, rgba(22, 163, 74, 0.2), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  min-height: 132px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.nodnett-signal::before {
  background:
    linear-gradient(90deg, rgba(22, 163, 74, 0.3) var(--signal), rgba(226, 232, 240, 0.72) 0),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.72) 18px 20px);
  border-radius: 999px;
  bottom: 20px;
  content: "";
  height: 12px;
  left: 18px;
  position: absolute;
  right: 18px;
}

.nodnett-signal span {
  background: conic-gradient(from 180deg, rgba(22, 163, 74, 0.9) var(--signal), rgba(226, 232, 240, 0.82) 0);
  border-radius: 999px;
  display: block;
  height: 58px;
  margin-bottom: 12px;
  position: relative;
  width: 58px;
}

.nodnett-signal span::after {
  background: #ffffff;
  border-radius: 999px;
  content: "";
  inset: 10px;
  position: absolute;
}

.nodnett-signal.is-uncovered span {
  background: conic-gradient(from 180deg, rgba(180, 83, 9, 0.9) var(--signal), rgba(226, 232, 240, 0.82) 0);
}

.nodnett-signal b,
.nodnett-signal small {
  display: block;
  position: relative;
  z-index: 1;
}

.nodnett-signal b {
  font-size: 1rem;
  line-height: 1.15;
}

.nodnett-signal small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  margin-top: 4px;
}

.nodnett-coverage-visual {
  --nodnett-tone: var(--accent-mint);
  --nodnett-tone-soft: rgba(94, 230, 168, 0.14);
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.nodnett-coverage-visual.is-nearby {
  --nodnett-tone: var(--accent-amber);
  --nodnett-tone-soft: rgba(242, 200, 121, 0.14);
}

.nodnett-coverage-visual.is-uncovered {
  --nodnett-tone: var(--accent-coral);
  --nodnett-tone-soft: rgba(242, 118, 131, 0.14);
}

.nodnett-status-card,
.nodnett-fact-grid article,
.nodnett-explainer {
  background:
    radial-gradient(circle at 0 0, var(--nodnett-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.nodnett-status-card {
  display: grid;
  gap: 8px;
  padding: 17px;
}

.nodnett-status-card > span {
  background: var(--nodnett-tone-soft);
  border: 1px solid color-mix(in srgb, var(--nodnett-tone) 40%, transparent);
  border-radius: 999px;
  color: var(--nodnett-tone);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 950;
  justify-self: start;
  letter-spacing: 0;
  padding: 5px 9px;
}

.nodnett-status-card strong {
  color: var(--text-main);
  font-size: 1.45rem;
  line-height: 1.08;
}

.nodnett-status-card p,
.nodnett-fact-grid p,
.nodnett-explainer p {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.42;
  margin: 0;
}

.nodnett-fact-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
}

.nodnett-fact-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
}

.nodnett-fact-grid span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.nodnett-fact-grid strong,
.nodnett-explainer strong {
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.18;
}

.nodnett-explainer {
  border-color: color-mix(in srgb, var(--nodnett-tone) 24%, var(--border-soft));
  display: grid;
  gap: 7px;
  padding: 14px;
}

.nodnett-explainer a {
  color: var(--accent-mint);
  font-size: 0.82rem;
  font-weight: 900;
  justify-self: start;
  text-decoration: none;
}

.nodnett-explainer a:hover,
.nodnett-explainer a:focus-visible {
  text-decoration: underline;
}

.police-visual,
.shelter-visual,
.senior-home-visual {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}

.police-summary-card,
.police-category-grid article,
.shelter-hero,
.shelter-radius-grid article,
.senior-home-hero,
.senior-home-section,
.senior-home-note {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.1), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.12);
}

.police-summary-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.police-summary-card > div:first-child > span,
.shelter-hero > span,
.senior-home-hero span,
.senior-home-section-heading p,
.senior-home-service-grid span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.police-summary-card strong,
.shelter-hero strong,
.senior-home-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.65rem;
  line-height: 1.06;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.police-summary-card p,
.shelter-hero p,
.shelter-radius-grid small,
.senior-home-hero p,
.senior-home-section-heading p,
.senior-home-service-grid small,
.senior-home-note p {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.38;
  margin: 0;
}

.police-summary-card p,
.shelter-hero p,
.senior-home-hero p {
  margin-top: 8px;
}

.police-summary-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.police-summary-facts span {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.police-summary-facts b,
.police-summary-facts small,
.police-category-grid span,
.police-category-grid strong,
.shelter-radius-grid span,
.shelter-radius-grid strong,
.shelter-radius-grid small,
.senior-home-service-grid span,
.senior-home-service-grid strong,
.senior-home-service-grid small {
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.police-summary-facts b {
  color: var(--text-main);
  font-size: 0.83rem;
  font-weight: 930;
}

.police-summary-facts small {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 820;
}

.police-category-grid,
.shelter-radius-grid,
.senior-home-service-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.police-category-grid article,
.shelter-radius-grid article,
.senior-home-service-grid article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.police-category-grid span,
.shelter-radius-grid span {
  color: var(--accent-cyan);
  font-size: 0.74rem;
  font-weight: 900;
}

.police-category-grid strong,
.shelter-radius-grid strong,
.senior-home-service-grid strong {
  color: var(--text-main);
  font-size: 1.02rem;
  font-weight: 950;
}

.shelter-hero {
  border-color: color-mix(in srgb, var(--accent-mint) 24%, var(--border-soft));
  padding: 16px;
}

.shelter-radius-grid article {
  background:
    radial-gradient(circle at 0 0, rgba(94, 230, 168, 0.1), transparent 42%),
    var(--bg-card);
}

.nodnett-coverage-visual {
  gap: 12px;
}

.nodnett-status-card {
  gap: 6px;
  padding: 13px;
}

.nodnett-status-card strong {
  font-size: 1.14rem;
  line-height: 1.14;
}

.nodnett-status-card p,
.nodnett-fact-grid p,
.nodnett-explainer p {
  font-size: 0.78rem;
  line-height: 1.36;
}

.nodnett-fact-grid {
  background:
    radial-gradient(circle at 0 0, var(--nodnett-tone-soft), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.nodnett-fact-grid article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 5px;
  padding: 10px 12px;
}

.nodnett-fact-grid article + article {
  border-top: 1px solid var(--border-soft);
}

.nodnett-fact-grid strong,
.nodnett-explainer strong {
  font-size: 0.94rem;
}

.nodnett-explainer {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.police-summary-card {
  gap: 12px;
  padding: 13px;
}

.police-summary-card strong,
.shelter-hero strong {
  font-size: 1.16rem;
  line-height: 1.14;
  margin-top: 4px;
}

.police-summary-card p,
.shelter-hero p,
.shelter-radius-grid small {
  font-size: 0.78rem;
  line-height: 1.36;
}

.police-summary-facts,
.police-category-grid,
.shelter-radius-grid {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.police-summary-facts span,
.police-category-grid article,
.shelter-radius-grid article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 12px;
}

.police-summary-facts span + span,
.police-category-grid article + article,
.shelter-radius-grid article + article {
  border-top: 1px solid var(--border-soft);
}

.police-category-grid article,
.shelter-radius-grid article {
  gap: 4px;
}

.police-category-grid strong,
.shelter-radius-grid strong {
  font-size: 0.94rem;
  line-height: 1.14;
}

.shelter-hero {
  padding: 13px;
}

.crime-rate-hero,
.crime-district-hero {
  gap: 12px;
  padding: 14px;
}

.crime-rate-hero strong,
.crime-district-hero strong {
  font-size: 1.18rem;
  line-height: 1.14;
  margin: 4px 0 6px;
}

.crime-rate-period,
.crime-share-card {
  min-width: 98px;
  padding: 10px;
}

.crime-share-card i {
  height: 44px;
  width: 42px;
}

.crime-share-card b,
.crime-trend-card strong {
  font-size: 0.98rem;
  line-height: 1.12;
}

.crime-trend-card,
.crime-district-note,
.crime-rate-note {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.crime-trend-card {
  gap: 8px;
}

.crime-district-hero p,
.crime-trend-card p,
.crime-district-note p,
.crime-rate-hero p,
.crime-rate-note p {
  font-size: 0.78rem;
  line-height: 1.36;
}

.senior-home-hero {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.05fr) minmax(140px, 0.95fr);
  padding: 14px;
}

.senior-home-hero.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.senior-home-hero > div {
  background: transparent;
  border: 0;
  min-width: 0;
  padding: 0;
}

.senior-home-hero > div:first-child {
  border-color: transparent;
}

.senior-home-hero strong {
  font-size: 1.16rem;
  line-height: 1.14;
  margin-top: 4px;
}

.senior-home-section,
.senior-home-note {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 10px;
  padding: 0;
}

.senior-home-section-heading {
  display: grid;
  gap: 5px;
}

.senior-home-section-heading strong,
.senior-home-note strong {
  color: var(--text-main);
  font-size: 0.94rem;
  line-height: 1.18;
}

.senior-home-section-heading p {
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 720;
}

.senior-home-service-grid article {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border-soft);
  padding: 10px 0;
}

.senior-home-service-grid article:first-child {
  border-top: 0;
  padding-top: 0;
}

.senior-home-service-grid {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  gap: 0;
  grid-template-columns: 1fr;
  padding: 12px;
}

.senior-home-projection-list {
  display: grid;
  gap: 10px;
}

.senior-home-projection-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(82px, 0.52fr) minmax(0, 1fr) minmax(52px, auto);
}

.senior-home-projection-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.senior-home-projection-row b {
  color: var(--text-main);
  font-size: 0.84rem;
  font-weight: 930;
}

.senior-home-projection-row span,
.senior-home-projection-row small {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.2;
}

.senior-home-projection-row i {
  background: var(--bg-track);
  border-radius: 999px;
  display: block;
  height: 10px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.senior-home-projection-row i em,
.senior-home-projection-row i strong {
  border-radius: inherit;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.senior-home-projection-row i em {
  background: rgba(155, 231, 245, 0.25);
  width: var(--base);
}

.senior-home-projection-row i strong {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
  width: var(--target);
}

.senior-home-projection-row small {
  color: var(--accent-mint);
  text-align: right;
  white-space: nowrap;
}

.senior-projection-visual,
.senior-competence-visual {
  display: grid;
  gap: 13px;
  margin: 14px 0 0;
}

.senior-projection-hero-v2,
.senior-competence-hero {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.12);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(138px, 0.9fr);
  padding: 13px;
}

.senior-projection-hero-v2 > div,
.senior-competence-hero > div,
.senior-projection-age-grid article,
.senior-reference-panel,
.senior-reference-grid article,
.senior-projection-note-v2,
.senior-competence-reference,
.senior-competence-grid article,
.senior-competence-pressure {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.senior-projection-hero-v2 > div,
.senior-competence-hero > div {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.senior-projection-age-grid article,
.senior-reference-grid article,
.senior-competence-grid article,
.senior-competence-pressure,
.senior-projection-note-v2 {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.senior-reference-panel,
.senior-competence-reference {
  display: grid;
  gap: 11px;
  padding: 13px;
}

.senior-projection-hero-v2 span,
.senior-competence-hero span,
.senior-projection-age-grid span,
.senior-reference-grid span,
.senior-competence-grid span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.senior-projection-hero-v2 strong,
.senior-competence-hero strong,
.senior-projection-age-grid strong,
.senior-reference-panel > div:first-child strong,
.senior-reference-grid strong,
.senior-projection-note-v2 strong,
.senior-competence-reference > div:first-child strong,
.senior-competence-grid strong,
.senior-competence-pressure strong {
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.senior-projection-hero-v2 strong,
.senior-competence-hero strong {
  font-size: 1.14rem;
  line-height: 1.16;
}

.senior-reference-panel,
.senior-competence-reference,
.senior-competence-pressure,
.senior-projection-note-v2 {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.senior-reference-grid article,
.senior-competence-grid article,
.senior-projection-age-grid article {
  box-shadow: none;
}

.senior-projection-hero-v2 p,
.senior-competence-hero p,
.senior-projection-age-grid p,
.senior-reference-panel p,
.senior-reference-grid small,
.senior-projection-note-v2 p,
.senior-competence-reference p,
.senior-competence-grid small,
.senior-competence-pressure p {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.36;
  margin: 0;
}

.senior-projection-age-grid,
.senior-reference-grid,
.senior-competence-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.senior-reference-grid,
.senior-competence-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.senior-reference-panel.is-muted {
  opacity: 0.78;
}

@media (max-width: 640px) {
  .police-summary-facts,
  .police-category-grid,
  .shelter-radius-grid,
  .mobility-hero,
  .mobility-kpi-grid,
  .transport-hero,
  .transport-list div,
  .senior-home-hero,
  .senior-home-service-grid,
  .senior-home-projection-row,
  .outdoors-hero,
  .worship-hero,
  .outdoors-fact-grid,
  .worship-fact-grid,
  .outdoors-method-grid,
  .worship-type-list,
  .senior-projection-hero-v2,
  .senior-competence-hero,
  .senior-projection-age-grid,
  .senior-reference-grid,
  .senior-competence-grid {
    grid-template-columns: 1fr;
  }

  .senior-home-projection-row small {
    text-align: left;
  }
}

.news-list {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.news-item {
  background: #f8fafc;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  padding: 11px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.news-item.is-clickable {
  cursor: pointer;
}

.news-item.has-index {
  display: grid;
  gap: 0 8px;
  grid-template-columns: 18px minmax(0, 1fr);
}

.news-item-index {
  align-items: flex-start;
  align-self: start;
  background: transparent;
  border-radius: 0;
  color: #94a3b8;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 850;
  height: auto;
  justify-content: flex-start;
  line-height: 1.2;
  padding-top: 3px;
  width: auto;
}

.news-item-index::before {
  content: "#";
}

.news-item.has-index p,
.news-item.has-index a {
  grid-column: 2;
}

.news-item.is-clickable:hover,
.news-item:focus-within {
  background: #fff;
  border-color: rgba(20, 83, 45, 0.16);
  transform: translateY(-1px);
}

.news-item.is-clickable:focus-visible {
  outline: 3px solid rgba(20, 83, 45, 0.18);
  outline-offset: 2px;
}

.news-item.is-map-selected {
  background: #fff;
  border-color: rgba(20, 83, 45, 0.38);
  box-shadow: 0 18px 44px rgba(20, 83, 45, 0.14);
  outline: 3px solid rgba(34, 197, 94, 0.14);
}

.news-item strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.22;
  margin-bottom: 4px;
}

.news-item small {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.25;
}

.news-item p {
  color: #4b5563;
  font-size: 0.8rem;
  line-height: 1.36;
  margin: 8px 0 0;
}

.news-item a {
  color: var(--accent);
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 900;
  margin-top: 9px;
  text-decoration: none;
}

.news-item a:hover {
  text-decoration: underline;
}

.housing-link {
  align-items: center;
  background: linear-gradient(135deg, var(--accent-coral), #f1b867);
  color: #fff;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 15px 16px;
  text-decoration: none;
  transition:
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

.housing-link:hover,
.housing-link:focus-visible {
  box-shadow: 0 14px 34px rgba(242, 118, 131, 0.2);
  filter: brightness(1.04);
  outline: 0;
  transform: translateY(-1px);
}

.housing-link span {
  font-weight: 900;
}

.housing-link small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 750;
  max-width: 46%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtor-card {
  margin-top: 10px;
  padding: 14px;
}

.realtor-card > small {
  color: var(--muted);
  display: block;
  font-size: 0.73rem;
  font-weight: 850;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.realtor-card div {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.realtor-card strong {
  font-size: 1rem;
}

.realtor-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
}

.realtor-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 8px 0 12px;
}

.realtor-card p:last-child {
  margin-bottom: 0;
}

.realtor-card a {
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
}

.realtor-card a:hover {
  text-decoration: underline;
}

.brand-row {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.eyebrow {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 4px;
  text-transform: uppercase;
}

h1 {
  font-size: 1.35rem;
  line-height: 1.08;
  margin: 0;
}

.status-dot {
  background: #eef7f0;
  border: 1px solid #cfe7d4;
  border-radius: 999px;
  color: #166534;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 800;
  max-width: 128px;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-form {
  align-items: center;
  background: #f8fafc;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 54px;
  overflow: hidden;
}

.search-form:focus-within {
  border-color: rgba(20, 83, 45, 0.42);
  box-shadow: 0 0 0 4px rgba(20, 83, 45, 0.12);
}

.search-form input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 1rem;
  min-width: 0;
  outline: 0;
  padding: 0 16px;
}

.search-form input::placeholder {
  color: #8a939e;
}

.search-form button {
  align-self: stretch;
  background: var(--ink);
  border: 0;
  color: #fff;
  font-weight: 850;
  min-width: 78px;
  padding: 0 18px;
}

.search-form.is-searching button {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

.search-form.is-searching button .loading-spinner {
  border-color: rgba(255, 255, 255, 0.36);
  border-top-color: #fff;
  height: 1em;
  width: 1em;
}

.search-results {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.14);
  display: grid;
  gap: 4px;
  margin-top: 10px;
  max-height: 285px;
  overflow-y: auto;
  padding: 6px;
}

.result-button {
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  text-align: left;
}

.result-button:hover,
.result-button:focus-visible,
.result-button[aria-current="true"] {
  background: #f1f5f2;
  outline: 0;
}

.result-button span {
  font-weight: 820;
  line-height: 1.2;
}

.result-button small,
.result-message {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.result-message {
  padding: 12px;
}

.result-message--loading {
  align-items: center;
  display: flex;
  gap: 9px;
}

.result-message--loading .loading-spinner {
  font-size: 1rem;
}

.result-message--choice {
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}

.search-marker {
  filter: drop-shadow(0 10px 16px rgba(17, 24, 39, 0.35));
}

.map-layer-notice {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.14);
  display: flex;
  gap: 10px;
  left: 0;
  margin: 0 auto;
  max-width: min(520px, calc(100vw - 32px));
  padding: 9px 13px 9px 10px;
  position: absolute;
  right: 0;
  top: 22px;
  width: max-content;
  z-index: 710;
}

.map-layer-notice > span {
  background: var(--notice-color, var(--accent));
  border-radius: 999px;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--notice-color, var(--accent)) 16%, transparent);
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.map-layer-notice strong,
.map-layer-notice small {
  display: block;
  line-height: 1.18;
}

.map-layer-notice strong {
  font-size: 0.82rem;
}

.map-layer-notice small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
  margin-top: 2px;
}

.map-poi-marker-wrap {
  background: transparent;
  border: 0;
}

.map-poi-marker {
  align-items: center;
  background: var(--poi, #14532d);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow:
    0 12px 28px rgba(17, 24, 39, 0.28),
    0 0 0 6px color-mix(in srgb, var(--poi, #14532d) 16%, transparent);
  color: #fff;
  display: flex;
  font-size: 0.72rem;
  font-weight: 950;
  height: 32px;
  justify-content: center;
  line-height: 1;
  width: 32px;
}

.distance-line {
  stroke-linecap: round;
}

.plan-data-polygon {
  filter: drop-shadow(0 8px 14px rgba(22, 101, 52, 0.14));
  stroke-linejoin: round;
}

.nve-hazard-polygon {
  filter: drop-shadow(0 10px 18px rgba(127, 29, 29, 0.16));
  stroke-linejoin: round;
}

.nodnett-coverage-overlay {
  filter: saturate(1.2) drop-shadow(0 10px 18px rgba(21, 128, 61, 0.16));
  mix-blend-mode: multiply;
}

.nodnett-coverage-frame {
  stroke-dasharray: 8 8;
  stroke-linecap: round;
}

.map-focus-ring {
  pointer-events: none;
}

.map-selected-feature {
  filter: drop-shadow(0 12px 20px rgba(249, 115, 22, 0.24));
  pointer-events: none;
  stroke-linejoin: round;
}

@media (max-width: 980px) {
  .insight-panel.detail-open,
  .insight-panel.entity-open {
    max-width: min(560px, calc(100vw - 48px));
    width: min(560px, calc(100vw - 48px));
  }

  .insight-panel.detail-open .profile-workspace,
  .insight-panel.entity-open .profile-workspace {
    grid-template-columns: 1fr;
  }

  .detail-card-side,
  .entity-detail-side {
    max-height: none;
    position: static;
  }

  .detail-stat-grid {
    grid-template-columns: 1fr;
  }

  .weather-visual {
    grid-template-columns: 1fr;
  }

  .weather-visual-v2,
  .weather-rain-hero,
  .weather-temp-comparison,
  .weather-sun-grid,
  .senior-visual,
  .senior-projection-card {
    grid-template-columns: 1fr;
  }

  .waste-visual,
  .waste-practical-grid,
  .car-hold-hero,
  .car-hold-kpis,
  .car-brand-list-heading,
  .car-brand-rank-row,
  .car-brand-other,
  .car-composition-heading,
  .car-composition-row,
  .electricity-hero,
  .electricity-kpis,
  .electricity-time-grid,
  .electricity-context-card,
  .property-tax-hero,
  .municipal-fees-hero,
  .equality-hero,
  .equality-pair-grid,
  .equality-extra-grid,
  .immigration-summary-grid,
  .immigration-country-grid,
  .migration-hero,
  .migration-flow-grid,
  .finance-hero,
  .finance-kpi-grid,
  .plan-data-fact-grid {
    grid-template-columns: 1fr;
  }

  .finance-score-pill {
    justify-self: start;
  }

  .electricity-hero-meta {
    justify-self: start;
  }

  .property-tax-hero-meta {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }

  .municipal-fees-hero-meta {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }

  .car-composition-heading p,
  .car-brand-list-heading span {
    max-width: none;
    text-align: left;
  }

  .weather-terrain-summary {
    grid-template-columns: minmax(0, 1fr) 126px;
  }
}

/* Review fixes: clearer facts, calmer assessments, and chart-safe layouts. */
.finance-hero {
  grid-template-columns: minmax(0, 1fr);
}

.migration-hero {
  grid-template-columns: minmax(0, 1fr);
}

.migration-hero strong {
  justify-self: start;
  text-align: left;
}

.migration-flow-grid strong {
  font-size: 1.02rem;
}

.municipal-count-visual {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.municipal-count-hero,
.municipal-count-note {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.1);
  display: grid;
  gap: 7px;
  padding: 13px;
}

.municipal-count-hero span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
}

.municipal-count-hero strong {
  color: var(--text-main);
  font-size: 1.45rem;
  line-height: 1.08;
}

.municipal-count-hero p,
.municipal-count-note p {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
}

.municipal-count-note {
  background: transparent;
  box-shadow: none;
}

.municipal-count-note strong {
  color: var(--text-main);
  font-size: 0.86rem;
}

.senior-compact-row {
  align-items: start;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  padding: 11px 0;
}

.senior-compact-row strong {
  max-width: 150px;
  white-space: normal;
}

.senior-compact-row.is-missing {
  opacity: 0.68;
}

.senior-compact-row.is-missing strong {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.senior-competence-hero > div {
  align-items: baseline;
  display: grid;
  gap: 5px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.senior-competence-hero > div > span {
  grid-column: 1;
}

.senior-competence-hero > div > strong {
  grid-column: 2;
  text-align: right;
}

.senior-competence-hero > div > p,
.senior-competence-assessment-line {
  grid-column: 1 / -1;
}

.senior-competence-assessment-line {
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 7px;
  padding-top: 10px;
}

.senior-competence-assessment-line > strong {
  font-size: 0.86rem;
  text-align: right;
}

.senior-competence-assessment-line > p {
  grid-column: 1 / -1;
}

.inequality-scale-head > div > span {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 0;
}

.inequality-scale-legend {
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inequality-scale-legend > div {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 6px 0;
}

.inequality-scale-legend > div + div {
  border-left: 1px solid var(--border-soft);
  margin-left: 10px;
  padding-left: 10px;
}

.inequality-scale-legend i {
  background: #14532d;
  border-radius: 999px;
  height: 8px;
  width: 8px;
}

.inequality-scale-legend .is-national i {
  background: var(--accent-coral);
}

.inequality-scale-legend strong,
.inequality-scale-legend span {
  background: transparent;
  border: 0;
  color: var(--text-main);
  font-size: 0.7rem;
  min-width: 0;
  padding: 0;
}

.inequality-scale-legend span {
  color: var(--text-muted);
  text-align: right;
}

@media (min-width: 981px) {
  .insight-panel.detail-open #insight-content,
  .insight-panel.entity-open #insight-content {
    scrollbar-gutter: auto;
  }
}

@media (max-width: 980px) {
  .insight-panel:not(.detail-open):not(.entity-open) {
    max-height: min(calc(48dvh + 54px), 78dvh);
  }
}

@media (max-width: 980px) and (max-height: 600px) {
  .insight-panel.detail-open,
  .insight-panel.entity-open {
    bottom: 0;
    max-height: calc(100dvh - 12px);
    top: auto;
  }
}

@media (max-width: 520px) {
  .senior-competence-hero > div,
  .senior-competence-assessment-line,
  .inequality-scale-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .senior-competence-hero > div > strong,
  .senior-competence-assessment-line > strong {
    grid-column: 1;
    text-align: left;
  }

  .inequality-scale-legend > div + div {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
    margin-left: 0;
    padding-left: 0;
  }
}

/* Mobile data cards open as an inline accordion; desktop keeps the side panel. */
@media (max-width: 980px) {
  .metric-grid > .mobile-inline-detail {
    align-self: stretch;
    grid-column: 1 / -1;
    margin: -2px 0 2px;
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding: 14px;
    position: static;
    scroll-margin-top: 8px;
    width: 100%;
  }

  .metric-card.active + .mobile-inline-detail {
    border-color: color-mix(in srgb, var(--interactive) 34%, var(--border-soft));
    box-shadow:
      inset 0 1px 0 var(--surface-highlight),
      0 14px 34px var(--shadow-color);
  }

  .mobile-inline-detail .detail-heading {
    margin-bottom: 14px;
  }

  .mobile-inline-detail[hidden] {
    display: none;
  }
}

@media (max-width: 640px) {
  .search-panel {
    border-radius: 18px;
    left: 12px;
    max-width: calc(100vw - 24px);
    padding: 13px;
    top: 12px;
    width: calc(100vw - 24px);
  }

  .weather-card-header,
  .weather-rain-gauge,
  .weather-daylight-card,
  .weather-terrain-summary,
  .weather-season-cards,
  .weather-sun-tiles,
  .housing-price-kpis,
  .equality-extra-grid,
  .school-data-summary,
  .entity-list-metrics,
  .senior-projection-row {
    grid-template-columns: 1fr;
  }

  .senior-projection-row span {
    text-align: left;
    white-space: normal;
  }

  .weather-rain-chart {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .rain-profile-hero,
  .rain-profile-stats {
    grid-template-columns: 1fr;
  }

  .rain-profile-hero {
    padding: 14px;
  }

  .rain-profile-section {
    padding: 14px;
  }

  .rain-section-heading {
    display: grid;
  }

  .rain-comparison-row {
    gap: 8px;
    grid-template-columns: minmax(92px, 0.82fr) minmax(0, 1fr) minmax(58px, auto);
  }

  .rain-history-echart-host {
    min-height: 250px;
  }

  .rain-forecast-day {
    grid-template-columns: 48px minmax(0, 1fr) minmax(58px, auto);
  }

  .chart-panel,
  .no-data-state {
    border-radius: 14px;
    padding: 11px;
  }

  .chart-panel-head,
  .chart-bar-labels,
  .profile-metric-head,
  .chart-summary-grid,
  .no-data-state dl {
    display: grid;
    grid-template-columns: 1fr;
  }

  .weather-forecast-card,
  .weather-forecast-card.compact {
    grid-template-columns: 1fr;
  }

  .weather-card-header {
    display: grid;
  }

  .weather-card-header > span {
    justify-self: start;
  }

  .weather-rain-gauge b {
    white-space: normal;
  }

  .weather-season-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weather-temp-head,
  .weather-temp-row {
    gap: 6px;
    grid-template-columns: minmax(78px, 1fr) repeat(5, minmax(34px, 0.5fr));
  }

  .weather-temp-head span,
  .weather-temp-head b,
  .weather-temp-row span,
  .weather-temp-row b {
    font-size: 0.66rem;
  }

  .terrain-horizon {
    justify-self: center;
  }

  .brand-row {
    margin-bottom: 11px;
  }

  h1 {
    font-size: 1.12rem;
  }

  .search-form {
    min-height: 50px;
  }

  .search-form button {
    min-width: 68px;
    padding: 0 14px;
  }

  .leaflet-right .leaflet-control {
    margin-right: 12px;
  }

  .leaflet-bottom .leaflet-control {
    margin-bottom: 12px;
  }

  .map-layer-notice {
    left: 12px;
    margin: 0;
    right: 12px;
    top: auto;
    bottom: calc(48vh + 16px);
    max-width: none;
    width: auto;
  }

  .insight-panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    left: 0;
    max-height: 48vh;
    max-width: none;
    padding: 16px 14px 18px;
    right: 0;
    width: 100vw;
  }

  .insight-panel.detail-open {
    max-width: none;
    max-height: 68vh;
    top: auto;
    width: 100vw;
  }

  .insight-panel.entity-open {
    max-height: 82vh;
    max-width: none;
    top: auto;
    width: 100vw;
  }

  .insight-panel.detail-open .panel-close,
  .insight-panel.entity-open .panel-close {
    position: absolute;
    right: 14px;
    top: 14px;
  }

  .profile-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-card-side,
  .entity-detail-side {
    min-height: 0;
  }

  .score-card {
    border-radius: 17px;
    height: 78px;
    width: 78px;
  }

  .score-card span {
    font-size: 1.65rem;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: auto;
  }
}

/* Night Atlas visual theme */
body::before {
  background:
    repeating-radial-gradient(ellipse at 18% 12%, rgba(155, 231, 245, 0.055) 0 1px, transparent 1px 24px),
    repeating-radial-gradient(ellipse at 88% 72%, rgba(155, 231, 245, 0.04) 0 1px, transparent 1px 30px),
    linear-gradient(135deg, var(--info-soft), transparent);
  content: "";
  inset: 0;
  opacity: 0.42;
  pointer-events: none;
  position: fixed;
  z-index: 650;
}

::selection {
  background: rgba(155, 231, 245, 0.26);
  color: var(--text-main);
}

#map {
  background: var(--bg-deep);
}

.leaflet-tile-pane {
  filter: saturate(0.65) brightness(0.78) contrast(1.08);
}

.leaflet-control-zoom {
  border: 1px solid var(--border-soft) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.leaflet-control-zoom a {
  background: color-mix(in srgb, var(--bg-panel-strong) 94%, transparent);
  border-color: var(--border-soft);
  color: var(--accent-cyan);
  transition:
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus-visible {
  background: var(--interactive-soft);
  color: var(--interactive);
  box-shadow: inset 0 0 0 1px rgba(155, 231, 245, 0.12);
}

.leaflet-control-attribution {
  backdrop-filter: blur(10px);
  background: rgba(7, 20, 21, 0.76);
  color: var(--text-dim);
}

.leaflet-control-attribution a {
  color: var(--accent-cyan);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-panel);
  color: var(--text-main);
}

.leaflet-popup-content {
  color: var(--text-main);
}

.search-panel,
.insight-panel {
  background:
    radial-gradient(circle at 18% 0, rgba(155, 231, 245, 0.08), transparent 34%),
    repeating-radial-gradient(ellipse at 100% 0, rgba(155, 231, 245, 0.045) 0 1px, transparent 1px 26px),
    var(--bg-panel);
  border-color: var(--border-soft);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(217, 247, 244, 0.06);
  color: var(--text-main);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    max-width 260ms ease,
    width 260ms ease;
}

.search-panel {
  border-radius: 24px;
  padding: 18px;
}

.insight-panel {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

.status-dot {
  display: none !important;
}

.brand-row {
  grid-template-columns: minmax(0, 1fr);
}

.eyebrow,
.detail-heading > span,
.detail-meta-tags span,
.detail-metadata-note,
.chart-meta,
.metric-card small,
.metric-section-count,
.result-button small,
.map-layer-notice small,
.school-data-summary small,
.school-card-heading small,
.school-metric-title span,
.entity-detail-heading small,
.entity-list-metrics small,
.weather-rain-summary small,
.weather-forecast-card small,
.weather-season-card small,
.weather-sun-tiles small,
.weather-data-note strong {
  font-family: "SFMono-Regular", "Cascadia Mono", "Consolas", ui-monospace, monospace;
}

.eyebrow {
  color: var(--state-info);
  letter-spacing: 0.08em;
}

h1,
.profile-header h2,
.detail-heading h3,
.entity-detail-heading h3,
.chart-panel-head h4,
.weather-section-heading h4,
.weather-sun-arc-card h4 {
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.profile-header p,
.detail-heading p,
.entity-detail-heading p,
.metric-section-header p,
.metric-card p,
.result-button small,
.result-message,
.chart-panel-head p,
.chart-summary-grid span,
.chart-meta,
.no-data-state p,
.school-data-summary span,
.school-data-note,
.entity-generic-card p,
.entity-list-metrics small,
.weather-rain-summary p,
.weather-rain-summary > span,
.weather-forecast-card p,
.weather-season-card p,
.weather-sun-tiles p,
.weather-data-note p {
  color: var(--text-muted);
}

.search-form {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.search-form:focus-within {
  background: rgba(10, 28, 29, 0.94);
  border-color: var(--accent-cyan);
  box-shadow:
    0 0 0 4px rgba(155, 231, 245, 0.12),
    0 16px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(217, 247, 244, 0.06);
}

.search-form input {
  color: var(--text-main);
}

.search-form input::placeholder {
  color: var(--text-dim);
}

.search-form button {
  background: linear-gradient(135deg, var(--accent-coral), #ff9a8f);
  color: #152526;
  text-shadow: none;
  transition:
    filter 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.search-form button:hover,
.search-form button:focus-visible {
  box-shadow: 0 0 0 4px rgba(242, 118, 131, 0.13);
  filter: brightness(1.05);
  outline: 0;
}

.search-results {
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg-panel-strong) 96%, transparent);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-panel);
}

.result-button {
  color: var(--text-main);
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.result-button:hover,
.result-button:focus-visible,
.result-button[aria-current="true"] {
  background: rgba(155, 231, 245, 0.1);
  color: var(--accent-cyan);
  transform: translateY(-1px);
}

.panel-close,
.entity-detail-close {
  background: color-mix(in srgb, var(--bg-panel-strong) 90%, transparent);
  border: 1px solid var(--border-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  color: var(--text-main);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.panel-close:hover,
.panel-close:focus-visible,
.entity-detail-close:hover,
.entity-detail-close:focus-visible,
.insight-panel.detail-open .panel-close,
.insight-panel.entity-open .panel-close {
  background: var(--interactive-soft);
  border-color: var(--border-strong);
  color: var(--accent-cyan);
  outline: 0;
}

.panel-close:hover,
.entity-detail-close:hover {
  transform: translateY(-1px);
}

.score-card {
  background:
    radial-gradient(circle at 50% 45%, rgba(155, 231, 245, 0.14), transparent 52%),
    linear-gradient(180deg, var(--bg-card), var(--surface-sunken));
  border: 1px solid rgba(155, 231, 245, 0.24);
  box-shadow:
    0 0 0 4px rgba(155, 231, 245, 0.06),
    0 0 0 8px rgba(242, 118, 131, 0.05),
    0 22px 54px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(217, 247, 244, 0.08);
  color: var(--accent-cyan);
}

.score-card small {
  color: rgba(217, 247, 244, 0.72);
}

.metric-section {
  border-top-color: rgba(155, 231, 245, 0.11);
}

.metric-section-header {
  color: var(--text-main);
}

.metric-section-header:hover,
.metric-section-header:focus-visible,
.metric-section-header.active {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 42%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.metric-section-header.active::before {
  background: linear-gradient(180deg, var(--accent-mint), var(--accent-cyan));
  box-shadow: 0 0 18px rgba(94, 230, 168, 0.24);
}

.metric-section-count {
  background: rgba(94, 230, 168, 0.09);
  border-color: rgba(94, 230, 168, 0.18);
  color: var(--accent-mint);
}

.metric-section-header:hover .metric-section-count,
.metric-section-header.active .metric-section-count {
  background: var(--interactive);
  color: var(--text-on-accent);
}

.metric-section-count::before,
.metric-section-count::after,
.metric-section-header:hover .metric-section-count::before,
.metric-section-header:hover .metric-section-count::after,
.metric-section-header.active .metric-section-count::before,
.metric-section-header.active .metric-section-count::after {
  background: currentColor;
}

.metric-card,
.housing-link,
.realtor-card,
.detail-card,
.detail-card-side,
.entity-detail-side,
.entity-generic-card,
.detail-stat,
.chart-panel,
.ownership-stack-panel,
.density-category-card,
.density-fact,
.nearby-type-summary,
.nearby-type-pill,
.transit-facts-panel,
.transit-fact,
.no-data-state,
.chart-summary-grid article,
.education-national-reference,
.inequality-explanation,
.inequality-explanation dl div,
.profile-metric-bar,
.data-row,
.school-data-summary article,
.school-data-card,
.entity-list-card,
.entity-list-metrics span,
.kindergarten-satisfaction-card,
.kindergarten-response-rate,
.kindergarten-survey-comparison,
.school-metric-row,
.school-metric-empty,
.weather-mini-card,
.weather-daylight-card,
.weather-terrain-summary,
.weather-panel,
.weather-season-card,
.weather-sun-tiles div,
.weather-sun-facts,
.weather-data-note,
.nodnett-signal {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.055), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 36px rgba(0, 0, 0, 0.16);
  color: var(--text-main);
}

.metric-card:hover,
.metric-card:focus-visible,
.metric-card.active,
.entity-list-card:hover,
.entity-list-card:focus-visible,
.school-data-card.is-map-selected,
.school-data-card.is-entity-selected,
.news-item.is-entity-selected,
.kindergarten-survey-comparison.is-priority {
  background:
    radial-gradient(circle at 0 0, rgba(94, 230, 168, 0.12), transparent 42%),
    var(--bg-card-hover);
  border-color: rgba(94, 230, 168, 0.34);
  box-shadow:
    0 0 0 1px rgba(94, 230, 168, 0.08),
    0 20px 56px rgba(0, 0, 0, 0.24);
}

.metric-card.active {
  outline: 2px solid rgba(94, 230, 168, 0.12);
}

.theme-dark .income-echart-panel-spacious {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.metric-card strong,
.detail-stat strong,
.chart-summary-grid strong,
.education-national-reference strong,
.inequality-explanation strong,
.inequality-explanation dt,
.data-row strong,
.transit-fact strong,
.school-data-summary strong,
.school-card-heading strong,
.entity-list-metrics strong,
.kindergarten-satisfaction-card strong,
.kindergarten-response-rate span,
.kindergarten-survey-comparison-heading span,
.kindergarten-survey-comparison-heading strong,
.kindergarten-survey-bar-row strong,
.weather-rain-summary strong,
.weather-forecast-card strong,
.weather-section-heading > strong,
.weather-season-card strong,
.weather-sun-tiles strong,
.weather-sun-facts b,
.weather-sun-arc b,
.weather-sun-arc strong,
.terrain-horizon b {
  color: var(--text-main);
}

.metric-card small,
.detail-stat small,
.chart-summary-grid small,
.education-national-reference span,
.inequality-explanation p,
.inequality-explanation dd,
.transit-fact small,
.transit-fact p,
.school-data-summary small,
.school-card-heading small,
.entity-list-metrics small,
.kindergarten-satisfaction-card small,
.kindergarten-satisfaction-card span,
.kindergarten-response-rate small,
.kindergarten-survey-bar-row span,
.weather-rain-axis,
.weather-year-bar b,
.weather-ref-line em,
.weather-temp-row span,
.weather-temp-row b,
.weather-season-card small,
.weather-sun-tiles small,
.weather-sun-arc small {
  color: var(--text-muted);
}

.metric-cue {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

.metric-cue::before,
.metric-cue::after {
  background: var(--accent-cyan);
}

.metric-card.active .metric-cue {
  background: var(--accent-mint);
  border-color: var(--accent-mint);
  box-shadow: 0 0 18px rgba(94, 230, 168, 0.22);
}

.metric-card.active .metric-cue::before,
.metric-card.active .metric-cue::after {
  background: var(--text-on-accent);
}

.detail-heading > span,
.detail-meta-tags span,
.school-card-heading b,
.kindergarten-score-pill,
.inequality-explanation span,
.smilefjes-pill,
.topic-chips span {
  background: rgba(155, 231, 245, 0.09);
  border: 1px solid var(--border-soft);
  color: var(--accent-cyan) !important;
}

.detail-metadata-note {
  background:
    linear-gradient(135deg, var(--info-soft), transparent),
    var(--bg-card);
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  box-shadow: inset 0 1px 0 var(--surface-highlight);
  color: var(--text-muted);
}

.detail-metadata-note-icon {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.detail-metadata-note strong,
.detail-metadata-note a {
  color: var(--accent-cyan);
}

.map-hint,
.entity-open-hint,
.school-data-note {
  background: rgba(94, 230, 168, 0.08);
  border-color: rgba(94, 230, 168, 0.16);
  color: #baf7dc;
}

.childhood-profile-action,
.housing-link {
  background: linear-gradient(135deg, rgba(242, 118, 131, 0.98), rgba(242, 200, 121, 0.92));
  color: #152526;
}

:root:not([data-theme="light"]) .childhood-profile-visual {
  background:
    radial-gradient(circle at 8% 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .childhood-profile-copy small {
  color: var(--accent-cyan);
}

:root:not([data-theme="light"]) .childhood-profile-copy strong {
  color: var(--text-main);
}

:root:not([data-theme="light"]) .childhood-profile-copy p,
:root:not([data-theme="light"]) .childhood-profile-helper {
  color: var(--text-muted);
}

.childhood-profile-action:hover,
.childhood-profile-action:focus-visible,
.housing-link:hover,
.housing-link:focus-visible {
  box-shadow: 0 14px 34px rgba(242, 118, 131, 0.2);
  filter: brightness(1.04);
  outline: 0;
  transform: translateY(-1px);
}

.realtor-card a,
.entity-generic-card a,
.entity-list-action,
.detail-metadata-note a,
.result-button[aria-current="true"] span {
  color: var(--accent-mint);
}

.chart-track,
.profile-metric-track,
.population-age-bars i,
.detail-stat span,
.data-row span,
.kindergarten-survey-bar-row i,
.weather-mini-card span,
.weather-forecast-card > div > span,
.weather-season-card i {
  background: var(--bg-track);
}

.chart-track i,
.profile-metric-track i,
.profile-metric-track em,
.population-age-bars i em,
.detail-stat span,
.data-row span,
.weather-mini-card span,
.weather-forecast-card > div > span,
.weather-season-card i::before {
  background:
    linear-gradient(90deg, var(--row-color, var(--state-info)) var(--bar), transparent var(--bar)),
    var(--bg-track);
}

.chart-bar-row.is-reference .chart-track i,
.kindergarten-survey-bar-row:not(.is-selected) b {
  background: color-mix(in srgb, var(--reference) 58%, transparent);
}

.profile-metric-track em {
  background: var(--accent-coral);
  box-shadow: 0 0 14px rgba(242, 118, 131, 0.28);
}

.profile-metric-track em span,
.chart-row-notes b,
.chart-row-notes em {
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
}

.chart-row-notes b {
  color: var(--accent-mint);
}

.chart-row-notes em {
  color: var(--text-muted);
}

.kindergarten-survey-bar-row b,
.terrain-horizon span {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
}

.data-row.has-row-color strong::before {
  box-shadow: 0 0 0 2px var(--surface-sunken);
}

.weather-year-bar::before,
.weather-daily-bars span {
  background: linear-gradient(180deg, var(--accent-cyan), #3aaed0);
  box-shadow: 0 10px 22px rgba(155, 231, 245, 0.14);
}

.weather-ref-line {
  border-top-color: rgba(155, 231, 245, 0.34);
}

.weather-ref-line em {
  background: var(--surface-sunken);
}

.weather-rain-summary b {
  background: rgba(94, 230, 168, 0.12);
  color: var(--accent-mint);
}

:root:not([data-theme="light"]) .rain-profile-panel {
  --rain-blue: #38bdf8;
  --rain-cyan: var(--accent-cyan);
  --rain-mint: var(--accent-mint);
  background:
    radial-gradient(circle at 10% 0, rgba(155, 231, 245, 0.08), transparent 38%),
    var(--bg-card);
}

:root:not([data-theme="light"]) .rain-profile-hero {
  background:
    linear-gradient(135deg, var(--info-soft), transparent),
    var(--bg-card);
  border-bottom-color: var(--border-soft);
}

:root:not([data-theme="light"]) .rain-profile-main-metric,
:root:not([data-theme="light"]) .rain-profile-stats div {
  background: var(--bg-card);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .rain-profile-stats {
  background: rgba(155, 231, 245, 0.13);
}

:root:not([data-theme="light"]) .rain-profile-section,
:root:not([data-theme="light"]) .rain-reference-cities {
  border-color: rgba(155, 231, 245, 0.16);
}

:root:not([data-theme="light"]) .rain-profile-hero h4,
:root:not([data-theme="light"]) .rain-section-heading h5,
:root:not([data-theme="light"]) .rain-profile-main-metric strong,
:root:not([data-theme="light"]) .rain-profile-stats strong,
:root:not([data-theme="light"]) .rain-section-heading > strong,
:root:not([data-theme="light"]) .rain-comparison-row strong,
:root:not([data-theme="light"]) .rain-forecast-day strong {
  color: var(--text-main);
}

:root:not([data-theme="light"]) .rain-profile-kicker,
:root:not([data-theme="light"]) .rain-profile-main-metric span,
:root:not([data-theme="light"]) .rain-profile-main-metric em,
:root:not([data-theme="light"]) .rain-profile-stats span,
:root:not([data-theme="light"]) .rain-profile-stats small,
:root:not([data-theme="light"]) .rain-profile-hero p,
:root:not([data-theme="light"]) .rain-section-heading p,
:root:not([data-theme="light"]) .rain-reference-cities > span,
:root:not([data-theme="light"]) .rain-comparison-row span,
:root:not([data-theme="light"]) .rain-forecast-day span,
:root:not([data-theme="light"]) .rain-empty {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .rain-comparison-row i,
:root:not([data-theme="light"]) .rain-forecast-day i {
  background: rgba(155, 231, 245, 0.13);
}

:root:not([data-theme="light"]) .rain-comparison-row:not(.is-home) i::before {
  background: rgba(155, 231, 245, 0.48);
}

:root:not([data-theme="light"]) .rain-forecast-day.is-peak strong {
  color: #f7d28a;
}

.weather-sun-arc {
  background:
    radial-gradient(ellipse at 50% 100%, var(--warning-soft) 0 42%, transparent 43%),
    linear-gradient(180deg, var(--bg-card), var(--surface-sunken));
  border-bottom-color: color-mix(in srgb, var(--state-warning) 42%, var(--border-soft));
}

.weather-sun-arc::before {
  border-color: rgba(242, 200, 121, 0.74);
  border-bottom: 0;
}

.sun-dot {
  background: var(--accent-amber);
  border-color: rgba(14, 34, 35, 0.92);
  box-shadow: 0 0 28px rgba(242, 200, 121, 0.32);
}

.terrain-horizon {
  background:
    radial-gradient(circle at center, rgba(155, 231, 245, 0.13) 0 20%, transparent 21%),
    radial-gradient(circle at center, rgba(94, 230, 168, 0.11), rgba(155, 231, 245, 0.02) 64%, transparent 65%);
  border-color: rgba(155, 231, 245, 0.18);
}

.terrain-horizon b {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

.chart-engine-fallback,
.no-data-state {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
  color: var(--text-muted);
}

.map-layer-notice {
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg-panel-strong) 90%, transparent);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-panel);
  color: var(--text-main);
}

.map-poi-marker {
  background: var(--poi, var(--accent-mint));
  border-color: var(--surface-sunken);
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.36),
    0 0 0 5px color-mix(in srgb, var(--poi, var(--accent-mint)) 18%, transparent);
  color: var(--text-on-accent);
}

.map-poi-marker.is-selected,
.map-poi-marker:hover {
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.42),
    0 0 0 7px rgba(242, 118, 131, 0.22),
    0 0 24px rgba(155, 231, 245, 0.22);
}

.search-marker {
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 14px rgba(155, 231, 245, 0.18));
}

@media (max-width: 700px) {
  .search-panel {
    border-radius: 18px;
    padding: 13px;
  }

  .search-form {
    min-height: 50px;
  }

  .search-form button {
    min-width: 68px;
    padding: 0 14px;
  }
}

/* Theme switcher and contrast pass */
.brand-row {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.brand-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: end;
}

.theme-toggle {
  align-items: center;
  background: color-mix(in srgb, var(--bg-panel-strong) 88%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.22);
  color: var(--text-muted);
  display: inline-grid;
  flex: 0 0 auto;
  font-family: "SFMono-Regular", "Cascadia Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  letter-spacing: 0.04em;
  min-height: 34px;
  overflow: hidden;
  padding: 3px;
  position: relative;
  text-transform: uppercase;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.theme-toggle::before {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-mint));
  border-radius: inherit;
  bottom: 3px;
  content: "";
  left: 3px;
  position: absolute;
  top: 3px;
  transform: translateX(0);
  transition: transform 180ms ease;
  width: calc(50% - 3px);
}

.theme-toggle[data-theme="light"]::before {
  transform: translateX(100%);
}

.theme-toggle span,
.theme-toggle b {
  color: inherit;
  min-width: 46px;
  padding: 7px 9px;
  position: relative;
  text-align: center;
  transition: color 160ms ease;
  z-index: 1;
}

.theme-toggle:not([data-theme="light"]) span,
.theme-toggle[data-theme="light"] b {
  color: var(--text-on-accent);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--border-strong);
  box-shadow:
    0 0 0 4px rgba(155, 231, 245, 0.1),
    0 16px 36px rgba(0, 0, 0, 0.22);
  outline: 0;
}

.app-menu-button {
  align-items: center;
  background: color-mix(in srgb, var(--bg-panel-strong) 88%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.22);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  height: 34px;
  justify-content: center;
  padding: 0;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
  width: 34px;
}

.app-menu-button span {
  background: var(--text-main);
  border-radius: 999px;
  display: block;
  height: 2px;
  width: 15px;
}

.app-menu-button:hover,
.app-menu-button:focus-visible,
.app-menu-button[aria-expanded="true"] {
  border-color: var(--border-strong);
  box-shadow:
    0 0 0 4px rgba(155, 231, 245, 0.1),
    0 16px 36px rgba(0, 0, 0, 0.22);
  outline: 0;
}

.app-menu-button:active {
  transform: translateY(1px);
}

.app-info-overlay {
  align-items: center;
  background: rgba(4, 13, 14, 0.54);
  backdrop-filter: blur(8px);
  display: grid;
  inset: 0;
  padding: 24px;
  position: absolute;
  z-index: 980;
}

.app-info-panel {
  background:
    linear-gradient(135deg, rgba(155, 231, 245, 0.045), transparent 42%),
    var(--bg-panel-strong);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-panel);
  color: var(--text-main);
  display: grid;
  gap: 0;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0 auto;
  max-height: min(820px, calc(100vh - 48px));
  max-width: min(920px, calc(100vw - 48px));
  overflow: hidden;
  width: 920px;
}

.app-info-header {
  align-items: start;
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 20px 22px;
}

.app-info-header h2 {
  font-size: 1.34rem;
  line-height: 1.08;
  margin: 0;
}

.app-info-close {
  align-items: center;
  background: rgba(155, 231, 245, 0.08);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-main);
  display: flex;
  font-size: 1.1rem;
  height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 34px;
}

.app-info-close:hover,
.app-info-close:focus-visible {
  background: rgba(155, 231, 245, 0.14);
  border-color: var(--border-strong);
  outline: 0;
}

.app-info-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.app-info-nav {
  border-right: 1px solid var(--border-soft);
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
}

.app-info-nav button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.2;
  padding: 11px 12px;
  text-align: left;
}

.app-info-nav button:hover,
.app-info-nav button:focus-visible,
.app-info-nav button.active {
  background: rgba(94, 230, 168, 0.1);
  border-color: rgba(94, 230, 168, 0.24);
  color: var(--text-main);
  outline: 0;
}

.app-info-content {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.52;
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 22px 24px;
  scroll-padding-bottom: 24px;
}

.app-info-content:focus {
  outline: 0;
}

.app-info-content a {
  color: var(--accent-mint);
  font-weight: 900;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.app-info-content a:hover,
.app-info-content a:focus-visible {
  text-decoration: underline;
}

.app-info-content p {
  margin: 0 0 13px;
}

.app-info-content h3 {
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.18;
  margin: 20px 0 7px;
}

.app-info-source-list {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: grid;
  margin: 16px 0;
  overflow: hidden;
}

.app-info-source-item {
  background: var(--bg-card);
  display: grid;
  gap: 7px;
  padding: 13px 14px;
}

.app-info-source-item + .app-info-source-item {
  border-top: 1px solid var(--border-soft);
}

.app-info-source-item h3 {
  margin: 0;
}

.app-info-source-item p {
  font-size: 0.82rem;
  line-height: 1.42;
  margin: 0;
}

.app-info-source-item dl {
  margin: 0;
}

.app-info-source-item dl div {
  display: grid;
  gap: 2px;
}

.app-info-source-item dt {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-info-source-item dd {
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.app-info-note {
  background: rgba(155, 231, 245, 0.08);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.42;
  padding: 11px 12px;
}

.analytics-preferences {
  margin: 18px 0;
}

.analytics-preferences h3 {
  margin: 0 0 7px;
}

.analytics-preferences p {
  margin-bottom: 10px;
}

.analytics-preferences button {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text-main);
  font-size: 0.76rem;
  font-weight: 850;
  min-height: 36px;
  padding: 8px 12px;
}

.analytics-preferences button:hover,
.analytics-preferences button:focus-visible {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent);
  outline: 0;
}

.analytics-consent {
  bottom: 18px;
  left: 18px;
  margin: 0 auto;
  max-width: 840px;
  position: fixed;
  right: 18px;
  z-index: 1600;
}

.analytics-consent-card {
  align-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-cyan) 7%, transparent), transparent 48%),
    var(--bg-panel-strong);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-panel);
  color: var(--text-main);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px 20px;
}

.analytics-consent-copy {
  min-width: 0;
}

.analytics-consent-label {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0 0 5px;
  text-transform: uppercase;
}

.analytics-consent h2 {
  font-size: 1.06rem;
  line-height: 1.2;
  margin: 0 0 6px;
}

.analytics-consent-copy > p:last-child {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0;
}

.analytics-consent-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  min-width: 154px;
}

.analytics-consent-actions button {
  border-radius: 11px;
  font-size: 0.76rem;
  font-weight: 900;
  min-height: 39px;
  padding: 9px 13px;
}

.analytics-consent-accept {
  background: var(--interactive);
  border: 1px solid var(--interactive);
  color: var(--text-on-accent);
}

.analytics-consent-reject {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
}

.analytics-consent-actions button:hover,
.analytics-consent-actions button:focus-visible {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent);
  outline: 0;
}

@media (max-width: 680px) {
  .analytics-consent {
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  .analytics-consent-card {
    align-items: stretch;
    gap: 14px;
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .analytics-consent-actions {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .analytics-consent-actions {
    grid-template-columns: 1fr;
  }
}

.contact-intro {
  border-bottom: 1px solid var(--border-soft);
  margin: 0 0 18px;
  padding: 0 0 16px;
}

.contact-intro .contact-intro-label {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.contact-intro h3 {
  font-size: 1.16rem;
  margin: 0 0 7px;
}

.contact-intro p:last-child {
  margin-bottom: 0;
  max-width: 64ch;
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-field {
  color: var(--text-main);
  display: grid;
  gap: 7px;
  min-width: 0;
}

.contact-field > span {
  font-size: 0.78rem;
  font-weight: 850;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  color: var(--text-main);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  min-width: 0;
  padding: 11px 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  width: 100%;
}

.contact-field select {
  color-scheme: inherit;
}

.contact-field textarea {
  min-height: 142px;
  resize: vertical;
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
  border-color: var(--border-strong);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent);
  outline: 0;
}

.contact-field small {
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.35;
}

.contact-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.contact-consent {
  align-items: start;
  color: var(--text-muted);
  display: grid;
  font-size: 0.78rem;
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.4;
}

.contact-consent input {
  accent-color: var(--interactive);
  height: 17px;
  margin: 1px 0 0;
  width: 17px;
}

.contact-consent input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus-ring) 42%, transparent);
  outline-offset: 2px;
}

.contact-form-footer {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 44px;
}

.contact-submit {
  background: var(--interactive);
  border: 1px solid color-mix(in srgb, var(--interactive) 72%, var(--border-strong));
  border-radius: 12px;
  color: var(--text-on-accent);
  font-size: 0.84rem;
  font-weight: 900;
  min-height: 42px;
  padding: 10px 18px;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 28%, transparent);
  filter: brightness(1.06);
  outline: 0;
}

.contact-submit:disabled {
  cursor: wait;
  filter: saturate(0.55);
  opacity: 0.72;
}

.app-info-content .contact-form-status {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.app-info-content .contact-form-status.is-success {
  color: var(--state-success);
}

.app-info-content .contact-form-status.is-error {
  color: var(--state-danger-text);
}

@media (max-width: 620px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-footer {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .contact-submit {
    width: 100%;
  }
}

.news-item,
.chart-bar-row,
.municipal-reference-list,
.culture-index-visual,
.council-visual,
.municipal-bar-row,
.senior-card,
.senior-projection-card,
.weather-visual-card,
.weather-rain-gauge,
.weather-compare-row,
.weather-temperature-card,
.weather-season-strip article,
.school-profile-grid div,
.waste-card,
.workforce-summary article,
.workforce-comparison,
.car-hold-hero,
.car-brand-ranked-list,
.car-composition-card,
.electricity-hero,
.electricity-kpis,
.electricity-time-grid,
.electricity-context-card,
.property-tax-hero,
.property-tax-list,
.property-tax-note,
.municipal-fees-hero,
.municipal-fees-list,
.municipal-fees-note,
.equality-pair-card,
.equality-extra-card,
.immigration-summary-grid article,
.immigration-section,
.smilefjes-summary.is-muted,
.smilefjes-pill,
.topic-chips span {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.055), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 36px rgba(0, 0, 0, 0.16);
  color: var(--text-main);
}

.chart-bar-row.is-selected,
.weather-temp-row.is-home,
.weather-compare-row.is-home,
.culture-index-visual li.is-current {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 44%, var(--border-soft));
}

:root:not([data-theme="light"]) .weather-temp-head {
  color: var(--text-dim);
}

:root:not([data-theme="light"]) .weather-temp-row {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 38%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow: inset 0 1px 0 var(--surface-highlight);
}

:root:not([data-theme="light"]) .weather-temp-row.is-home {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 44%, var(--border-soft));
}

:root:not([data-theme="light"]) .weather-temp-row span,
:root:not([data-theme="light"]) .weather-temp-row b {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .weather-temp-row.is-home span,
:root:not([data-theme="light"]) .weather-temp-row.is-home b {
  color: var(--text-main);
}

.chart-bar-row.is-reference {
  border-color: rgba(155, 231, 245, 0.28);
}

.news-item.is-clickable:hover,
.news-item:focus-within,
.news-item.is-map-selected {
  background:
    radial-gradient(circle at 0 0, rgba(94, 230, 168, 0.12), transparent 42%),
    var(--bg-card-hover);
  border-color: rgba(94, 230, 168, 0.34);
  box-shadow:
    0 0 0 1px rgba(94, 230, 168, 0.08),
    0 20px 56px rgba(0, 0, 0, 0.24);
}

.news-item strong,
.chart-bar-labels strong,
.chart-bar-labels span,
.municipal-reference-list > strong,
.municipal-reference-list b,
.municipal-bar-row strong,
.culture-index-visual strong,
.weather-visual-card strong,
.weather-rain-gauge b,
.weather-compare-row b,
.weather-temp-row.is-home span,
.weather-temp-row.is-home b,
.senior-card strong,
.senior-projection-card strong,
.waste-card strong,
.workforce-summary strong,
.car-hold-hero strong,
.car-hold-kpis strong,
.car-brand-list-heading strong,
.car-brand-rank-row strong,
.car-brand-other strong,
.car-composition-heading strong,
.car-composition-row strong,
.electricity-hero strong,
.electricity-hero-meta b,
.electricity-kpis strong,
.electricity-time-card strong,
.electricity-context-card strong,
.property-tax-hero strong,
.property-tax-hero-meta b,
.property-tax-row strong,
.municipal-fees-hero strong,
.municipal-fees-hero-meta b,
.municipal-fees-row strong,
.equality-pair-header strong,
.equality-row strong,
.equality-extra-card strong,
.immigration-summary-grid strong,
.immigration-section > div:first-child strong,
.council-legend strong,
.topic-chips strong,
.smilefjes-summary.is-muted strong {
  color: var(--text-main);
}

.news-item small,
.news-item p,
.municipal-reference-list span,
.municipal-bar-row span,
.weather-visual-card p,
.weather-compare-row span,
.senior-card p,
.senior-projection-card p,
.waste-card small,
.waste-card p,
.workforce-summary small,
.workforce-summary span,
.workforce-comparison > strong,
.car-hold-hero p,
.car-hold-kpis p,
.car-brand-rank-row small,
.car-brand-other span,
.car-brand-other small,
.car-composition-heading p,
.car-composition-row span,
.car-composition-note,
.electricity-hero p,
.electricity-kpis p,
.electricity-context-card p,
.electricity-time-card li span,
.property-tax-hero p,
.property-tax-row p,
.property-tax-note,
.municipal-fees-hero p,
.municipal-fees-row p,
.municipal-fees-note,
.equality-row span,
.equality-extra-card small,
.immigration-summary-grid small,
.immigration-section > div:first-child span,
.council-legend small,
.topic-chips span,
.smilefjes-summary.is-muted p {
  color: var(--text-muted);
}

.news-item-index {
  color: color-mix(in srgb, var(--text-muted) 86%, var(--accent-cyan));
}

.news-item a,
.entity-list-action,
.realtor-card a {
  color: var(--accent-mint);
}

.municipal-reference-list div {
  border-top-color: rgba(155, 231, 245, 0.14);
}

.municipal-bar-row i,
.weather-compare-row i,
.weather-season-strip i,
.waste-card span,
.equality-row i,
.equality-extra-card span {
  background: var(--bg-track);
}

.municipal-bar-row i em,
.weather-compare-row i em,
.weather-season-strip i em,
.waste-card span,
.equality-extra-card span {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
}

.equality-men i em {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-mint));
}

.equality-women i em {
  background: linear-gradient(90deg, var(--accent-coral), var(--accent-amber));
}

:root[data-theme="light"] {
  --bg-deep: #eef1f2;
  --bg-panel: rgba(251, 252, 252, 0.97);
  --bg-panel-strong: rgba(255, 255, 255, 0.99);
  --bg-card: #ffffff;
  --bg-card-hover: #f3f6f6;
  --bg-track: #e4eaec;
  --border-soft: #cbd7da;
  --border-strong: #7b9da6;
  --text-main: #20292f;
  --text-muted: #52636d;
  --text-dim: #71818a;
  --accent-cyan: #27768a;
  --accent-blue: #326a8a;
  --accent-purple: #775a8c;
  --accent-mint: #247044;
  --accent-coral: #b94752;
  --accent-orange: #9b5d32;
  --accent-amber: #8a5b12;
  --state-info: var(--accent-cyan);
  --state-success: var(--accent-mint);
  --state-warning: var(--accent-amber);
  --state-danger: #b23543;
  --state-danger-text: #a72f3d;
  --interactive: var(--accent-coral);
  --interactive-soft: rgba(185, 71, 82, 0.1);
  --info-soft: rgba(39, 118, 138, 0.1);
  --success-soft: rgba(36, 112, 68, 0.1);
  --warning-soft: rgba(138, 91, 18, 0.11);
  --danger-soft: rgba(178, 53, 67, 0.1);
  --reference: #63727a;
  --surface-raised: #ffffff;
  --surface-sunken: #e8edef;
  --surface-highlight: rgba(255, 255, 255, 0.9);
  --text-on-accent: #ffffff;
  --focus-ring: var(--accent-coral);
  --shadow-color: rgba(32, 41, 47, 0.12);
  --chart-grid: rgba(32, 41, 47, 0.14);
  --chart-track: #e4eaec;
  --shadow-panel: 0 24px 80px rgba(32, 41, 47, 0.15);
  --scroll-track: rgba(32, 41, 47, 0.07);
  --scroll-thumb: rgba(82, 99, 109, 0.34);
  --scroll-thumb-hover: rgba(185, 71, 82, 0.62);
  --ink: var(--text-main);
  --muted: var(--text-muted);
  --panel: var(--bg-panel);
  --line: var(--border-soft);
  --shadow: var(--shadow-panel);
  --accent: var(--interactive);
  --soft: var(--bg-card);
  color-scheme: light;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 13% 8%, color-mix(in srgb, var(--accent-blue) 10%, transparent), transparent 27%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--accent-purple) 6%, transparent), transparent 25%),
    radial-gradient(circle at 64% 92%, color-mix(in srgb, var(--accent-mint) 6%, transparent), transparent 30%),
    var(--bg-deep);
}

:root[data-theme="light"] body::before {
  background:
    repeating-radial-gradient(ellipse at 18% 12%, rgba(37, 111, 134, 0.07) 0 1px, transparent 1px 24px),
    repeating-radial-gradient(ellipse at 88% 72%, rgba(23, 109, 74, 0.045) 0 1px, transparent 1px 30px);
  opacity: 0.28;
}

:root[data-theme="light"] .leaflet-tile-pane {
  filter: saturate(0.78) brightness(1.02) contrast(0.98);
}

:root[data-theme="light"] .leaflet-popup-content-wrapper,
:root[data-theme="light"] .leaflet-popup-tip,
:root[data-theme="light"] .leaflet-tooltip {
  background: rgba(248, 252, 251, 0.96);
  border-color: rgba(21, 47, 49, 0.18);
  box-shadow: 0 18px 48px rgba(14, 34, 35, 0.18);
  color: var(--text-main);
}

:root[data-theme="light"] .leaflet-popup-content {
  color: var(--text-main);
}

:root[data-theme="light"] .search-panel,
:root[data-theme="light"] .insight-panel {
  background:
    radial-gradient(circle at 18% 0, rgba(37, 111, 134, 0.08), transparent 34%),
    repeating-radial-gradient(ellipse at 100% 0, rgba(37, 111, 134, 0.035) 0 1px, transparent 1px 26px),
    var(--bg-panel);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] .search-form {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(21, 47, 49, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 28px rgba(14, 34, 35, 0.06);
}

:root[data-theme="light"] .search-form:focus-within {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(37, 111, 134, 0.38);
  box-shadow:
    0 0 0 4px rgba(37, 111, 134, 0.12),
    0 16px 44px rgba(14, 34, 35, 0.1);
}

:root[data-theme="light"] .search-form button {
  background: linear-gradient(135deg, var(--accent-coral), #e37c74);
  color: #f7fbfa;
}

:root[data-theme="light"] .search-results {
  background: rgba(248, 252, 251, 0.96);
  border-color: rgba(21, 47, 49, 0.14);
  box-shadow: 0 18px 48px rgba(14, 34, 35, 0.14);
}

:root[data-theme="light"] .result-button {
  background: transparent;
  color: var(--text-main);
}

:root[data-theme="light"] .result-button:hover,
:root[data-theme="light"] .result-button:focus-visible,
:root[data-theme="light"] .result-button[aria-current="true"] {
  background: rgba(37, 111, 134, 0.09);
  color: var(--accent-cyan);
}

:root[data-theme="light"] .result-button[aria-current="true"] span {
  color: var(--accent-cyan);
}

:root[data-theme="light"] .result-button small,
:root[data-theme="light"] .result-message {
  color: var(--text-muted);
}

:root[data-theme="light"] .result-message--choice {
  border-bottom-color: rgba(21, 47, 49, 0.14);
}

:root[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 30px rgba(14, 34, 35, 0.1);
}

:root[data-theme="light"] .theme-toggle::before {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-mint));
}

:root[data-theme="light"] .theme-toggle[data-theme="light"] b {
  color: #f7fbfa;
}

:root[data-theme="light"] .app-menu-button,
:root[data-theme="light"] .app-info-close {
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 30px rgba(14, 34, 35, 0.1);
}

:root[data-theme="light"] .app-menu-button span {
  background: var(--text-main);
}

:root[data-theme="light"] .app-info-overlay {
  background: rgba(13, 31, 32, 0.28);
}

:root[data-theme="light"] .app-info-panel {
  background:
    linear-gradient(135deg, rgba(37, 111, 134, 0.08), transparent 42%),
    rgba(248, 252, 251, 0.96);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] .app-info-source-item {
  background: rgba(255, 255, 255, 0.56);
}

:root[data-theme="light"] .app-info-note {
  background: rgba(37, 111, 134, 0.08);
}

:root[data-theme="light"] .panel-close,
:root[data-theme="light"] .entity-detail-close,
:root[data-theme="light"] .metric-cue,
:root[data-theme="light"] .leaflet-control-zoom a {
  background: rgba(249, 253, 252, 0.92);
  color: var(--text-main);
}

:root[data-theme="light"] .panel-close:hover,
:root[data-theme="light"] .panel-close:focus-visible,
:root[data-theme="light"] .entity-detail-close:hover,
:root[data-theme="light"] .entity-detail-close:focus-visible {
  background: var(--bg-card-hover);
  color: var(--accent-cyan);
}

:root[data-theme="light"] .score-card {
  background:
    radial-gradient(circle at 50% 45%, rgba(37, 111, 134, 0.14), transparent 52%),
    linear-gradient(180deg, #f8fbfa, #e9f2ef);
  border-color: rgba(37, 111, 134, 0.22);
  box-shadow:
    0 0 0 4px rgba(37, 111, 134, 0.07),
    0 0 0 8px rgba(199, 82, 97, 0.045),
    0 22px 54px rgba(14, 34, 35, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: var(--accent-cyan);
}

:root[data-theme="light"] .score-card small {
  color: var(--text-muted);
}

:root[data-theme="light"] .metric-section-count,
:root[data-theme="light"] .detail-heading > span,
:root[data-theme="light"] .detail-meta-tags span,
:root[data-theme="light"] .school-card-heading b,
:root[data-theme="light"] .kindergarten-score-pill,
:root[data-theme="light"] .smilefjes-pill,
:root[data-theme="light"] .topic-chips span {
  background: rgba(37, 111, 134, 0.08);
  border-color: rgba(37, 111, 134, 0.14);
  color: var(--accent-cyan) !important;
}

:root[data-theme="light"] .metric-section-header:hover,
:root[data-theme="light"] .metric-section-header:focus-visible,
:root[data-theme="light"] .metric-section-header.active {
  background:
    linear-gradient(135deg, rgba(23, 109, 74, 0.08), rgba(37, 111, 134, 0.04)),
    rgba(255, 255, 255, 0.64);
  border-color: rgba(23, 109, 74, 0.16);
  color: var(--text-main);
}

:root[data-theme="light"] .metric-section-header.active::before {
  background: linear-gradient(180deg, var(--accent-mint), var(--accent-cyan));
  box-shadow: 0 0 14px rgba(23, 109, 74, 0.18);
}

:root[data-theme="light"] .metric-section-header p {
  color: var(--text-muted);
}

:root[data-theme="light"] .metric-section-header:hover,
:root[data-theme="light"] .metric-section-header:focus-visible,
:root[data-theme="light"] .metric-section-header.active,
:root[data-theme="light"] .metric-card:hover,
:root[data-theme="light"] .metric-card:focus-visible,
:root[data-theme="light"] .metric-card.active,
:root[data-theme="light"] .entity-list-card:hover,
:root[data-theme="light"] .entity-list-card:focus-visible,
:root[data-theme="light"] .news-item.is-clickable:hover,
:root[data-theme="light"] .news-item:focus-within,
:root[data-theme="light"] .news-item.is-map-selected {
  box-shadow:
    0 0 0 1px rgba(23, 109, 74, 0.08),
    0 20px 52px rgba(14, 34, 35, 0.12);
}

:root[data-theme="light"] .housing-link {
  background: linear-gradient(135deg, rgba(242, 118, 131, 0.82), rgba(242, 200, 121, 0.78));
  box-shadow: 0 10px 24px rgba(14, 34, 35, 0.08);
  color: var(--text-main);
}

:root[data-theme="light"] .housing-link small {
  color: rgba(19, 41, 43, 0.68);
}

:root[data-theme="light"] .housing-link:hover,
:root[data-theme="light"] .housing-link:focus-visible {
  background: linear-gradient(135deg, rgba(242, 118, 131, 0.9), rgba(242, 200, 121, 0.84));
  box-shadow:
    0 0 0 1px rgba(199, 82, 97, 0.12),
    0 14px 30px rgba(14, 34, 35, 0.1);
  filter: none;
  transform: none;
}

:root[data-theme="light"] .detail-metadata-note,
:root[data-theme="light"] .map-hint,
:root[data-theme="light"] .entity-open-hint,
:root[data-theme="light"] .school-data-note {
  background:
    linear-gradient(135deg, rgba(37, 111, 134, 0.07), rgba(23, 109, 74, 0.045)),
    rgba(255, 255, 255, 0.72);
  color: var(--text-muted);
}

:root[data-theme="light"] .housing-price-hero,
:root[data-theme="light"] .housing-price-kpis article,
:root[data-theme="light"] .housing-price-note {
  background:
    radial-gradient(circle at 0 0, rgba(37, 111, 134, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.78);
  border-color: rgba(37, 111, 134, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 28px rgba(14, 34, 35, 0.08);
}

:root[data-theme="light"] .housing-price-status {
  background: rgba(37, 111, 134, 0.07);
  border-color: rgba(37, 111, 134, 0.14);
}

:root[data-theme="light"] .no-data-state,
:root[data-theme="light"] .chart-engine-fallback {
  background:
    radial-gradient(circle at 12% 0, rgba(37, 111, 134, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 249, 247, 0.88));
  border-color: rgba(37, 111, 134, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 28px rgba(14, 34, 35, 0.08);
  color: var(--text-muted);
}

:root[data-theme="light"] .no-data-state strong,
:root[data-theme="light"] .no-data-state dd {
  color: var(--text-main);
}

:root[data-theme="light"] .no-data-state p,
:root[data-theme="light"] .no-data-state small,
:root[data-theme="light"] .no-data-state dt {
  color: var(--text-muted);
}

:root[data-theme="light"] .no-data-state dl div {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(21, 47, 49, 0.1);
}

:root[data-theme="light"] .chart-row-notes b,
:root[data-theme="light"] .chart-row-notes em,
:root[data-theme="light"] .profile-metric-track em span {
  background: rgba(248, 252, 251, 0.96);
  color: var(--text-main);
}

:root[data-theme="light"] .leaflet-control-attribution,
:root[data-theme="light"] .map-layer-notice {
  background: rgba(248, 252, 251, 0.86);
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .brand-row {
    gap: 10px;
  }

  .nve-risk-facts {
    grid-template-columns: 1fr;
  }

  .noise-risk-facts {
    grid-template-columns: 1fr;
  }

  .noise-risk-title-row,
  .noise-source-row {
    align-items: start;
  }

  .noise-source-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .noise-source-row b {
    grid-column: 2;
    text-align: left;
  }

  .noise-zone-guide div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .noise-zone-guide strong,
  .noise-zone-guide span {
    grid-column: 2;
  }

  .nve-risk-status-line,
  .nve-risk-type-row {
    align-items: start;
  }

  .nve-risk-type-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .nve-risk-type-row b {
    grid-column: 2;
    text-align: left;
  }

  .theme-toggle {
    font-size: 0.62rem;
    min-height: 32px;
  }

  .theme-toggle span,
  .theme-toggle b {
    min-width: 40px;
    padding: 7px;
  }

  .brand-actions {
    gap: 6px;
  }

  .app-menu-button {
    height: 32px;
    width: 32px;
  }

  .app-info-overlay {
    align-items: stretch;
    padding: 12px;
  }

  .app-info-panel {
    border-radius: 18px;
    max-height: calc(100vh - 24px);
    max-width: calc(100vw - 24px);
    width: 100%;
  }

  .app-info-header {
    padding: 15px;
  }

  .app-info-header h2 {
    font-size: 1.14rem;
  }

  .app-info-layout {
    grid-template-columns: 1fr;
  }

  .app-info-nav {
    border-bottom: 1px solid var(--border-soft);
    border-right: 0;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding: 10px;
  }

  .app-info-nav button {
    font-size: 0.78rem;
    padding: 9px 10px;
    white-space: nowrap;
  }

  .app-info-content {
    max-height: none;
    padding: 15px;
  }
}

/* Dark-mode specificity fixes for older nested visual components. */
:root:not([data-theme="light"]) .detail-card .data-row,
:root:not([data-theme="light"]) .detail-card-side .data-row,
:root:not([data-theme="light"]) .immigration-section .data-row,
:root:not([data-theme="light"]) .culture-index-visual li {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 42%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 10px 26px var(--shadow-color);
  color: var(--text-main);
}

:root:not([data-theme="light"]) .noise-risk-summary,
:root:not([data-theme="light"]) .noise-risk-fact,
:root:not([data-theme="light"]) .noise-zone-guide,
:root:not([data-theme="light"]) .noise-source-row,
:root:not([data-theme="light"]) .noise-risk-note,
:root:not([data-theme="light"]) .nve-risk-summary,
:root:not([data-theme="light"]) .nve-risk-fact,
:root:not([data-theme="light"]) .nve-risk-type-row,
:root:not([data-theme="light"]) .nve-risk-note {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 42%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 10px 26px var(--shadow-color);
}

/* Browser-feedback pass: truthful scales and clearer comparison layouts. */
.church-donut-legend .is-member {
  background: var(--state-info);
}

.church-donut-legend .is-non-member {
  background: var(--chart-track);
}

.fhi-debt-summary,
.fhi-debt-summary div,
.fhi-debt-row,
.fhi-debt-row-head,
.fhi-debt-mini-bar {
  min-width: 0;
}

.fhi-debt-summary b {
  display: block;
  justify-self: stretch;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.fhi-debt-row-head {
  align-items: baseline;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.fhi-debt-row-head span {
  justify-self: end;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}

.municipal-fees-row,
.childcare-payment-row {
  align-items: start;
  gap: 6px 16px;
  padding-block: 13px;
}

.municipal-fees-row > div,
.childcare-payment-row > div {
  min-width: 0;
}

.municipal-fees-row strong,
.childcare-payment-row strong {
  min-width: 92px;
}

.equality-hero {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.equality-hero-head {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  min-width: 0;
}

.equality-hero-head > div:first-child {
  min-width: 0;
}

.equality-hero-explanation {
  border-top: 1px solid var(--border-soft);
  padding-top: 11px;
}

.senior-projection-summary-head,
.senior-projection-assessment > div,
.senior-competence-metric-head {
  align-items: baseline;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.senior-projection-summary-head strong,
.senior-projection-assessment > div strong,
.senior-competence-metric-head strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
}

.senior-projection-assessment {
  display: grid;
  gap: 6px;
}

.senior-competence-hero > div {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr);
}

.senior-competence-assessment-line {
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.senior-competence-assessment-line > strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}

.senior-competence-grid article header {
  align-items: start;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

.senior-competence-delta {
  background: color-mix(in srgb, var(--state-info) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--state-info) 24%, var(--border-soft));
  border-radius: 999px;
  color: var(--text-muted) !important;
  justify-self: end;
  max-width: 210px;
  overflow-wrap: anywhere;
  padding: 4px 7px;
  text-align: right;
}

.health-care-comparison-card header {
  align-items: start;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

.health-care-comparison-card header span {
  justify-self: end;
  max-width: 210px;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal;
}

.health-care-comparison-value {
  align-items: baseline;
  display: grid;
  gap: 8px 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.health-care-comparison-value p {
  max-width: 220px;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 520px) {
  .equality-hero-head,
  .senior-projection-summary-head,
  .senior-projection-assessment > div,
  .senior-competence-metric-head,
  .senior-competence-grid article header,
  .health-care-comparison-card header,
  .health-care-comparison-value {
    grid-template-columns: minmax(0, 1fr);
  }

  .senior-projection-summary-head strong,
  .senior-projection-assessment > div strong,
  .senior-competence-metric-head strong,
  .senior-competence-delta,
  .health-care-comparison-card header span,
  .health-care-comparison-value p {
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }

  .fhi-debt-row-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .fhi-debt-row-head span {
    justify-self: start;
    text-align: left;
  }
}

:root:not([data-theme="light"]) .noise-risk-title-row em {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  color: var(--state-info);
}

:root:not([data-theme="light"]) .noise-risk-summary.is-red {
  border-color: color-mix(in srgb, var(--state-danger) 46%, var(--border-soft));
  box-shadow:
    inset 4px 0 0 var(--state-danger),
    0 12px 32px var(--shadow-color);
}

:root:not([data-theme="light"]) .noise-risk-summary.is-yellow {
  border-color: color-mix(in srgb, var(--state-warning) 42%, var(--border-soft));
  box-shadow:
    inset 4px 0 0 var(--state-warning),
    0 12px 32px var(--shadow-color);
}

:root:not([data-theme="light"]) .noise-risk-summary.is-clear {
  border-color: color-mix(in srgb, var(--state-success) 34%, var(--border-soft));
  box-shadow:
    inset 4px 0 0 var(--state-success),
    0 12px 32px var(--shadow-color);
}

:root:not([data-theme="light"]) .nve-risk-pill {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  color: var(--state-info);
}

:root:not([data-theme="light"]) .nve-risk-summary.is-inside {
  border-color: color-mix(in srgb, var(--state-danger) 46%, var(--border-soft));
  box-shadow:
    inset 4px 0 0 var(--state-danger),
    0 12px 32px var(--shadow-color);
}

:root:not([data-theme="light"]) .nve-risk-summary.is-nearby {
  border-color: color-mix(in srgb, var(--state-warning) 42%, var(--border-soft));
  box-shadow:
    inset 4px 0 0 var(--state-warning),
    0 12px 32px var(--shadow-color);
}

:root:not([data-theme="light"]) .nve-risk-summary.is-clear {
  border-color: color-mix(in srgb, var(--state-success) 34%, var(--border-soft));
  box-shadow:
    inset 4px 0 0 var(--state-success),
    0 12px 32px var(--shadow-color);
}

:root:not([data-theme="light"]) .culture-index-visual li.is-current,
:root:not([data-theme="light"]) .detail-card .data-row.is-selected,
:root:not([data-theme="light"]) .detail-card-side .data-row.is-selected {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 44%, var(--border-soft));
}

:root:not([data-theme="light"]) .detail-card .data-row strong,
:root:not([data-theme="light"]) .detail-card-side .data-row strong,
:root:not([data-theme="light"]) .immigration-section .data-row strong,
:root:not([data-theme="light"]) .culture-index-visual li span {
  color: var(--text-main);
}

:root:not([data-theme="light"]) .detail-card .data-row small,
:root:not([data-theme="light"]) .detail-card-side .data-row small,
:root:not([data-theme="light"]) .immigration-section .data-row small,
:root:not([data-theme="light"]) .culture-index-visual li strong {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .culture-index-visual li b {
  background: rgba(94, 230, 168, 0.12);
  border: 1px solid rgba(94, 230, 168, 0.2);
  color: var(--accent-mint);
}

:root:not([data-theme="light"]) .detail-card .data-row span,
:root:not([data-theme="light"]) .detail-card-side .data-row span,
:root:not([data-theme="light"]) .immigration-section .data-row span {
  background:
    linear-gradient(90deg, var(--row-color, var(--state-info)) var(--bar), transparent var(--bar)),
    var(--bg-track);
}

:root:not([data-theme="light"]) .fhi-comparison-visual {
  background:
    radial-gradient(circle at 18% 8%, var(--info-soft), transparent 34%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 14px 36px var(--shadow-color);
}

:root:not([data-theme="light"]) .fhi-comparison-value,
:root:not([data-theme="light"]) .fhi-comparison-delta {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .fhi-comparison-value small,
:root:not([data-theme="light"]) .fhi-comparison-legend {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .fhi-comparison-value strong {
  color: var(--text-main);
}

:root:not([data-theme="light"]) .fhi-comparison-delta.is-positive {
  background: var(--success-soft);
  color: var(--state-success);
}

:root:not([data-theme="light"]) .fhi-comparison-delta.is-negative {
  background: var(--danger-soft);
  color: var(--state-danger-text);
}

:root:not([data-theme="light"]) .fhi-comparison-delta.is-neutral {
  background: var(--info-soft);
  color: var(--state-info);
}

:root:not([data-theme="light"]) .fhi-comparison-track {
  background: var(--chart-track);
}

:root:not([data-theme="light"]) .fhi-comparison-marker {
  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 16px var(--info-soft);
}

:root:not([data-theme="light"]) .fhi-difference-visual {
  background:
    radial-gradient(circle at 18% 8%, var(--info-soft), transparent 34%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 14px 36px var(--shadow-color);
}

:root:not([data-theme="light"]) .fhi-difference-hero div,
:root:not([data-theme="light"]) .fhi-difference-reference {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .fhi-difference-hero small,
:root:not([data-theme="light"]) .fhi-difference-reference span,
:root:not([data-theme="light"]) .fhi-difference-ruler-labels {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .fhi-difference-hero strong,
:root:not([data-theme="light"]) .fhi-difference-reference strong {
  color: var(--text-main);
}

:root:not([data-theme="light"]) .fhi-difference-hero > span {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--state-success) 28%, var(--border-soft));
  color: var(--state-success);
}

:root:not([data-theme="light"]) .fhi-difference-visual.is-above .fhi-difference-hero > span {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--state-danger) 28%, var(--border-soft));
  color: var(--state-danger-text);
}

:root:not([data-theme="light"]) .fhi-difference-visual.is-neutral .fhi-difference-hero > span {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  color: var(--state-info);
}

:root:not([data-theme="light"]) .fhi-difference-ruler-line {
  background: var(--chart-track);
}

:root:not([data-theme="light"]) .fhi-difference-ruler i {
  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 16px var(--info-soft);
}

:root:not([data-theme="light"]) .life-expectancy-visual {
  background:
    radial-gradient(circle at 18% 8%, var(--info-soft), transparent 34%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 14px 36px var(--shadow-color);
}

:root:not([data-theme="light"]) .life-highlight-card,
:root:not([data-theme="light"]) .life-age-card,
:root:not([data-theme="light"]) .life-expectancy-note {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .life-highlight-card small,
:root:not([data-theme="light"]) .life-highlight-card span,
:root:not([data-theme="light"]) .life-expectancy-note p,
:root:not([data-theme="light"]) .life-line-label strong,
:root:not([data-theme="light"]) .life-age-card header span,
:root:not([data-theme="light"]) .life-legend {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .life-highlight-card strong,
:root:not([data-theme="light"]) .life-expectancy-note strong,
:root:not([data-theme="light"]) .life-age-card header strong,
:root:not([data-theme="light"]) .life-line-label span {
  color: var(--text-main);
}

:root:not([data-theme="light"]) .life-highlight-card span.is-positive {
  color: var(--state-success);
}

:root:not([data-theme="light"]) .life-highlight-card span.is-negative {
  color: var(--state-danger-text);
}

:root:not([data-theme="light"]) .life-line-axis::before {
  background: var(--chart-track);
}

:root:not([data-theme="light"]) .life-line-span {
  background: linear-gradient(90deg, var(--interactive), var(--state-info));
}

:root:not([data-theme="light"]) .life-line-marker.is-local {
  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 16px var(--interactive-soft);
}

:root:not([data-theme="light"]) .life-line-marker.is-national {
  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 16px var(--info-soft);
}

:root:not([data-theme="light"]) .life-line-delta {
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .life-line-delta.is-positive {
  background: var(--success-soft);
  color: var(--state-success);
}

:root:not([data-theme="light"]) .life-line-delta.is-negative {
  background: var(--danger-soft);
  color: var(--state-danger-text);
}

:root:not([data-theme="light"]) .life-line-delta.is-neutral {
  background: var(--info-soft);
  color: var(--state-info);
}

:root:not([data-theme="light"]) .infection-visual {
  background:
    radial-gradient(circle at 12% 0, var(--info-soft), transparent 34%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 14px 36px var(--shadow-color);
}

:root:not([data-theme="light"]) .infection-total,
:root:not([data-theme="light"]) .infection-context,
:root:not([data-theme="light"]) .infection-trend,
:root:not([data-theme="light"]) .infection-note,
:root:not([data-theme="light"]) .infection-mix-row {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:not([data-theme="light"]) .infection-total small,
:root:not([data-theme="light"]) .infection-context span,
:root:not([data-theme="light"]) .infection-context small,
:root:not([data-theme="light"]) .infection-trend small,
:root:not([data-theme="light"]) .infection-total span,
:root:not([data-theme="light"]) .infection-note strong,
:root:not([data-theme="light"]) .infection-note p,
:root:not([data-theme="light"]) .infection-mix-row small {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) .infection-total strong,
:root:not([data-theme="light"]) .infection-context b,
:root:not([data-theme="light"]) .infection-trend strong,
:root:not([data-theme="light"]) .infection-mix-row strong,
:root:not([data-theme="light"]) .infection-mix-row b {
  color: var(--text-main);
}

:root:not([data-theme="light"]) .infection-trend.is-up strong {
  color: var(--state-danger-text);
}

:root:not([data-theme="light"]) .infection-trend.is-down strong {
  color: var(--state-success);
}

:root:not([data-theme="light"]) .infection-mix-strip {
  background: var(--chart-track);
}

:root:not([data-theme="light"]) .infection-source-link {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  color: var(--state-info);
}

/* First screen call-to-action. The search panel starts as a larger centered hero
   and compacts into the working position once the user searches. */
.search-panel {
  left: 50%;
  max-width: min(720px, calc(100vw - 48px));
  padding: 24px;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 48px));
}

.search-panel h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.02;
  max-width: 560px;
}

.search-panel .eyebrow {
  font-size: 0.78rem;
}

.search-panel .brand-row {
  margin-bottom: 20px;
}

.search-panel .search-form {
  border-radius: 22px;
  min-height: 72px;
}

.search-panel .search-form input {
  font-size: 1.14rem;
  padding: 0 24px;
}

.search-panel .search-form button {
  font-size: 1.05rem;
  min-width: 112px;
  padding: 0 26px;
}

.search-panel.search-panel--compact {
  left: 24px;
  max-width: min(480px, calc(100vw - 48px));
  padding: 18px;
  top: 24px;
  transform: none;
  width: 480px;
}

.search-panel.search-panel--compact h1 {
  font-size: 1.35rem;
  line-height: 1.08;
  max-width: none;
}

.search-panel.search-panel--compact .eyebrow {
  font-size: 0.72rem;
}

.search-panel.search-panel--compact .brand-row {
  margin-bottom: 14px;
}

.search-panel.search-panel--compact .search-form {
  border-radius: 16px;
  min-height: 54px;
}

.search-panel.search-panel--compact .search-form input {
  font-size: 1rem;
  padding: 0 16px;
}

.search-panel.search-panel--compact .search-form button {
  font-size: 1rem;
  min-width: 78px;
  padding: 0 18px;
}

.search-panel.search-panel--animating {
  pointer-events: none;
  transition: none !important;
}

@media (max-width: 700px) {
  .search-panel {
    max-width: calc(100vw - 24px);
    padding: 16px;
    top: 42%;
    width: calc(100vw - 24px);
  }

  .search-panel h1 {
    font-size: 1.45rem;
  }

  .search-panel .brand-row {
    margin-bottom: 14px;
  }

  .search-panel .search-form {
    border-radius: 18px;
    min-height: 58px;
  }

  .search-panel .search-form input {
    font-size: 1rem;
    padding: 0 14px;
  }

  .search-panel .search-form button {
    min-width: 72px;
    padding: 0 14px;
  }

  .search-panel.search-panel--compact {
    left: 12px;
    max-width: calc(100vw - 24px);
    padding: 13px;
    top: 12px;
    width: calc(100vw - 24px);
  }

  .search-panel.search-panel--compact h1 {
    font-size: 1.12rem;
  }

  .search-panel.search-panel--compact .search-form {
    border-radius: 16px;
    min-height: 50px;
  }

  .search-panel.search-panel--compact .search-form button {
    min-width: 68px;
    padding: 0 14px;
  }
}

@media (min-width: 981px) {
  .insight-panel.detail-open,
  .insight-panel.entity-open {
    overflow: hidden;
  }

  .insight-panel.detail-open #insight-content,
  .insight-panel.entity-open #insight-content,
  .insight-panel.detail-open .profile-workspace,
  .insight-panel.entity-open .profile-workspace {
    height: 100%;
    min-height: 0;
  }

  .insight-panel.detail-open .profile-workspace,
  .insight-panel.entity-open .profile-workspace {
    align-items: stretch;
  }

  .insight-panel.detail-open .profile-main,
  .insight-panel.detail-open .detail-card-side,
  .insight-panel.entity-open .profile-main,
  .insight-panel.entity-open .detail-card-side,
  .insight-panel.entity-open .entity-detail-side {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .insight-panel.detail-open .detail-card-side,
  .insight-panel.entity-open .detail-card-side,
  .insight-panel.entity-open .entity-detail-side {
    position: static;
  }
}

:root[data-theme="light"] .weather-sun-arc {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(242, 200, 121, 0.32) 0 41%, rgba(255, 249, 235, 0.64) 42%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 245, 0.96));
  border-bottom-color: rgba(176, 109, 18, 0.34);
  box-shadow:
    inset 0 -34px 78px rgba(242, 200, 121, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

:root[data-theme="light"] .weather-sun-arc::before {
  border-color: rgba(176, 109, 18, 0.58);
  border-bottom: 0;
}

:root[data-theme="light"] .sun-dot {
  background: #d98a17;
  border-color: #f8fbfa;
  box-shadow:
    0 8px 22px rgba(176, 109, 18, 0.24),
    0 0 0 4px rgba(242, 200, 121, 0.16);
}

:root[data-theme="light"] .weather-sun-arc b,
:root[data-theme="light"] .weather-sun-arc strong {
  color: var(--text-main);
}

:root[data-theme="light"] .weather-sun-arc small {
  color: var(--text-muted);
}

/* Miljø og risiko: compact, calmer detail panels. */
.noise-risk-panel,
.nve-risk-panel,
.weather-visual-v2,
.drinking-water-visual,
.air-quality-visual {
  gap: 10px;
}

.noise-risk-title-row strong,
.nve-risk-status-line strong {
  font-size: 0.96rem;
  letter-spacing: 0;
}

.noise-risk-summary,
.nve-risk-summary {
  gap: 7px;
  padding: 12px 13px;
}

.noise-zone-guide,
.noise-source-list,
.nve-risk-facts,
.nve-risk-type-list,
.drinking-water-kpis,
.air-quality-kpis,
.air-quality-station-list,
.weather-season-cards,
.weather-sun-tiles,
.weather-sun-facts,
.rain-profile-stats {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  gap: 0;
  overflow: hidden;
}

.noise-zone-guide,
.nve-risk-facts,
.drinking-water-kpis,
.air-quality-kpis,
.weather-sun-tiles,
.weather-sun-facts,
.rain-profile-stats {
  grid-template-columns: 1fr;
}

.noise-zone-guide,
.noise-source-list,
.nve-risk-type-list {
  padding: 0;
}

.noise-zone-guide div,
.noise-source-row,
.nve-risk-fact,
.nve-risk-type-row,
.drinking-water-kpis article,
.air-quality-kpis article,
.air-quality-station-card,
.weather-season-card,
.weather-sun-tiles div,
.weather-sun-facts div,
.rain-profile-stats div {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

.noise-zone-guide div,
.noise-source-row,
.nve-risk-fact,
.nve-risk-type-row,
.drinking-water-kpis article,
.air-quality-kpis article,
.air-quality-station-card,
.weather-sun-tiles div,
.weather-sun-facts div,
.rain-profile-stats div {
  border-top: 1px solid var(--border-soft);
}

.noise-zone-guide div:first-child,
.noise-source-row:first-child,
.nve-risk-fact:first-child,
.nve-risk-type-row:first-child,
.drinking-water-kpis article:first-child,
.air-quality-kpis article:first-child,
.air-quality-station-card:first-child,
.weather-sun-tiles div:first-child,
.weather-sun-facts div:first-child,
.rain-profile-stats div:first-child {
  border-top: 0;
}

.noise-zone-guide div,
.noise-source-row,
.nve-risk-type-row {
  padding: 10px 11px;
}

.nve-risk-fact,
.drinking-water-kpis article,
.air-quality-kpis article,
.air-quality-station-card,
.weather-sun-tiles div,
.weather-sun-facts div,
.rain-profile-stats div {
  padding: 10px 12px;
}

.noise-risk-note,
.nve-risk-note,
.drinking-water-note,
.weather-data-note {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 2px 1px 0;
}

.drinking-water-hero,
.air-quality-hero {
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 86px;
  padding: 14px;
}

.drinking-water-hero-copy strong,
.air-quality-hero-copy strong {
  font-size: 1.24rem;
  line-height: 1.12;
  margin: 5px 0 7px;
}

.drinking-water-score-ring,
.air-quality-score-ring {
  min-height: 82px;
  min-width: 82px;
}

.drinking-water-score-ring i,
.air-quality-score-ring i {
  height: 78px;
  width: 78px;
}

.drinking-water-score-ring i::after,
.air-quality-score-ring i::after {
  inset: 9px;
}

.drinking-water-score-ring b,
.air-quality-score-ring b {
  font-size: 0.78rem;
  max-width: 58px;
}

.drinking-water-score-ring small,
.air-quality-score-ring small {
  font-size: 0.62rem;
  transform: translateY(16px);
}

.drinking-water-kpis strong,
.air-quality-kpis strong {
  font-size: 0.96rem;
  line-height: 1.16;
}

.drinking-water-section,
.air-quality-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 0 8px;
}

.drinking-water-section + .drinking-water-section,
.air-quality-section + .air-quality-section,
.air-quality-reference-echart + .air-quality-section {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.drinking-water-section-heading h4,
.drinking-water-note strong,
.air-quality-section-heading h4,
.air-quality-reference-echart .chart-panel-head h4 {
  font-size: 0.9rem;
  letter-spacing: 0;
}

.air-quality-component-row,
.air-quality-reference-row {
  gap: 8px;
}

.air-quality-reference-echart {
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  padding: 12px;
}

.air-quality-station-list {
  grid-template-columns: 1fr;
}

.air-quality-station-card p span {
  font-size: 0.68rem;
}

.weather-panel {
  border-radius: 14px;
  padding: 13px;
}

.weather-rain-hero {
  gap: 12px;
  grid-template-columns: minmax(128px, 0.54fr) minmax(0, 1.46fr);
}

.weather-rain-summary {
  gap: 8px;
}

.weather-rain-summary strong,
.weather-forecast-card strong,
.rain-profile-main-metric strong {
  font-size: 1.14rem;
  line-height: 1.12;
}

.weather-section-heading > strong,
.weather-season-card strong,
.weather-sun-tiles strong,
.weather-sun-facts b,
.weather-sun-arc strong {
  font-size: 0.96rem;
  line-height: 1.16;
}

.weather-sun-arc b {
  font-size: 0.82rem;
}

.weather-rain-summary p,
.weather-forecast-card p,
.weather-season-card p,
.weather-sun-tiles p,
.weather-data-note p,
.rain-profile-hero p,
.rain-section-heading p {
  font-size: 0.8rem;
}

.rain-profile-hero {
  gap: 12px;
  padding: 14px;
}

.rain-profile-main-metric {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.rain-profile-section {
  gap: 11px;
  padding: 14px;
}

.weather-season-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weather-temp-section .weather-season-cards {
  margin-bottom: 12px;
}

.weather-sun-arc-card {
  display: grid;
  gap: 10px;
}

.weather-sun-arc-card .weather-sun-arc {
  height: 170px;
  justify-self: center;
  margin: 14px auto 0;
  max-width: 420px;
  width: 100%;
}

.weather-sun-arc-card .weather-sun-arc b {
  bottom: 48px;
  font-size: 0.72rem;
}

.weather-sun-arc-card .weather-sun-arc strong {
  bottom: 24px;
  font-size: 1.12rem;
}

.weather-sun-arc-card .weather-sun-arc small {
  bottom: 14px;
  font-size: 0.68rem;
}

@media (max-width: 700px) {
  .drinking-water-hero,
  .air-quality-hero,
  .weather-rain-hero,
  .rain-profile-hero {
    grid-template-columns: 1fr;
  }

  .drinking-water-score-ring,
  .air-quality-score-ring {
    justify-self: start;
  }

  .weather-season-cards {
    grid-template-columns: 1fr;
  }
}

/* Helse: calmer FHI and infection cards. */
.infection-visual,
.fhi-comparison-visual,
.fhi-difference-visual,
.life-expectancy-visual,
.mental-health-visual {
  gap: 10px;
}

.infection-visual,
.fhi-comparison-visual,
.fhi-difference-visual,
.life-expectancy-visual {
  padding: 13px;
}

.infection-hero,
.fhi-comparison-values,
.life-highlight-grid,
.infection-mix-list,
.mental-health-groups {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  gap: 0;
  overflow: hidden;
}

.infection-hero,
.life-highlight-grid,
.mental-health-groups {
  grid-template-columns: 1fr;
}

.infection-total,
.infection-context,
.infection-trend,
.fhi-comparison-value,
.fhi-comparison-delta,
.life-highlight-card,
.infection-mix-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

.infection-total,
.infection-context,
.infection-trend,
.life-highlight-card,
.infection-mix-row {
  border-top: 1px solid var(--border-soft);
  padding: 10px 12px;
}

.infection-total:first-child,
.life-highlight-card:first-child,
.infection-mix-row:first-child {
  border-top: 0;
}

.infection-total {
  grid-row: auto;
}

.infection-total strong {
  font-size: 1.42rem;
  line-height: 1.08;
}

.infection-context b,
.infection-trend strong,
.fhi-comparison-value strong,
.fhi-difference-hero strong,
.fhi-difference-reference strong,
.life-highlight-card strong,
.mental-health-cell-values span {
  font-size: 1rem;
  line-height: 1.14;
}

.infection-total small,
.infection-context span,
.infection-trend small,
.infection-note strong,
.infection-mix-row small,
.fhi-comparison-value small,
.fhi-comparison-legend,
.fhi-difference-hero small,
.fhi-difference-reference span,
.fhi-difference-ruler-labels,
.life-highlight-card small,
.life-line-label strong,
.life-age-card header span,
.mental-health-group-card header span,
.mental-health-age-row > strong {
  font-size: 0.68rem;
  letter-spacing: 0;
}

.infection-total span,
.infection-context small,
.infection-note p,
.fhi-difference-hero > span,
.life-highlight-card span,
.life-expectancy-note p,
.mental-health-cell-values small {
  font-size: 0.76rem;
  line-height: 1.34;
}

.infection-mix-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.infection-mix-row small {
  grid-column: 2;
}

.infection-note,
.life-expectancy-note {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 1px 0;
}

.fhi-comparison-values {
  align-items: stretch;
  grid-template-columns: 1fr;
}

.fhi-comparison-value,
.fhi-comparison-delta {
  padding: 10px 12px;
}

.fhi-comparison-value + .fhi-comparison-delta,
.fhi-comparison-delta + .fhi-comparison-value {
  border-top: 1px solid var(--border-soft);
}

.fhi-comparison-delta {
  border-radius: 0;
  justify-content: start;
  min-width: 0;
  text-align: left;
}

.fhi-difference-hero {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.fhi-difference-hero div,
.fhi-difference-reference {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 12px;
}

.fhi-difference-hero > span {
  border-radius: 0;
  max-width: none;
  padding: 9px 12px;
  text-align: left;
}

.fhi-difference-reference {
  border-top: 1px solid var(--border-soft);
}

.life-highlight-grid {
  grid-template-columns: 1fr;
}

.life-age-card {
  border-radius: 14px;
  box-shadow: none;
  padding: 10px;
}

.life-line-row {
  gap: 7px;
  grid-template-columns: 58px minmax(0, 1fr);
}

.life-line-delta {
  grid-column: 2;
  justify-self: start;
}

.mental-health-group-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 12px;
}

.mental-health-group-card + .mental-health-group-card {
  border-top: 1px solid var(--border-soft);
}

.mental-health-group-card h4 {
  font-size: 0.92rem;
  letter-spacing: 0;
}

.mental-health-sex-grid {
  background: color-mix(in srgb, var(--state-info) 3%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  gap: 0;
  overflow: hidden;
}

.mental-health-cell {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 9px 10px;
}

.mental-health-cell + .mental-health-cell {
  border-left: 1px solid var(--border-soft);
}

.death-causes-sex-card,
.death-cause-row {
  box-shadow: none;
}

.death-cause-age-card.is-clickable aside b,
.death-cause-row-head > span {
  font-size: 0.78rem;
}

@media (max-width: 700px) {
  .mental-health-sex-grid {
    grid-template-columns: 1fr;
  }

  .mental-health-cell + .mental-health-cell {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
}

/* Oppvekst: calmer school, kindergarten and youth detail panels. */
.childhood-profile-visual,
.school-data-visual,
.kindergarten-data-visual,
.youth-health-compare {
  gap: 10px;
}

.childhood-profile-visual {
  border-radius: 14px;
  padding: 13px;
}

.childhood-profile-copy {
  gap: 6px;
}

.childhood-profile-copy strong {
  font-size: 1.08rem;
  line-height: 1.13;
}

.childhood-profile-copy p,
.childhood-profile-helper {
  font-size: 0.78rem;
  line-height: 1.36;
}

.childhood-profile-action {
  font-size: 0.78rem;
  min-height: 36px;
  padding: 8px 12px;
}

.school-data-summary {
  grid-template-columns: 1fr;
}

.school-data-summary article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.school-data-summary strong {
  font-size: 1.02rem;
  line-height: 1.12;
  margin-top: 3px;
}

.school-data-summary span,
.school-data-note,
.school-card-heading span {
  font-size: 0.76rem;
  line-height: 1.34;
}

.school-data-note {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 1px;
}

.school-card-list {
  gap: 8px;
}

.school-data-card {
  border-radius: 14px;
  box-shadow: none;
  gap: 10px;
  padding: 12px;
}

.school-card-heading {
  gap: 8px;
}

.school-card-heading small,
.school-metric-title span {
  font-size: 0.68rem;
}

.school-card-heading strong {
  font-size: 0.92rem;
  line-height: 1.16;
  margin-top: 3px;
}

.school-card-heading b {
  font-size: 0.62rem;
  line-height: 1.1;
  max-width: 104px;
  overflow-wrap: anywhere;
  padding: 5px 7px;
  text-align: center;
}

.entity-list-action {
  font-size: 0.72rem;
}

.entity-list-metrics,
.school-profile-grid,
.kindergarten-survey-comparison-list {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  gap: 0;
  overflow: hidden;
}

.entity-list-metrics {
  grid-template-columns: 1fr;
}

.entity-list-metrics span,
.school-profile-grid div,
.kindergarten-survey-comparison {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

.entity-list-metrics span,
.school-profile-grid div {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 10px;
}

.entity-list-metrics span + span,
.school-profile-grid div + div,
.kindergarten-survey-comparison + .kindergarten-survey-comparison {
  border-top: 1px solid var(--border-soft);
}

.entity-list-metrics small,
.kindergarten-satisfaction-card small,
.kindergarten-satisfaction-card span,
.kindergarten-response-rate small,
.kindergarten-survey-bar-row span,
.school-profile-grid strong,
.school-metric-row small,
.school-metric-empty p {
  font-size: 0.7rem;
  line-height: 1.28;
}

.entity-list-metrics strong,
.school-profile-grid span,
.school-metric-row span {
  font-size: 0.76rem;
  line-height: 1.16;
}

.school-metric-title strong {
  font-size: 0.76rem;
}

.school-metric-help {
  font-size: 0.72rem;
  line-height: 1.34;
}

.school-metric-row,
.school-metric-empty,
.kindergarten-response-rate {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border-soft);
  box-shadow: none;
  padding: 8px 0;
}

.school-metric-title + .school-metric-row,
.school-metric-title + .school-metric-empty,
.school-metric-help + .school-metric-row {
  border-top: 0;
  padding-top: 2px;
}

.school-metric-row strong,
.school-metric-empty strong,
.kindergarten-response-rate strong,
.kindergarten-survey-comparison-heading strong {
  font-size: 0.76rem;
  line-height: 1.18;
}

.kindergarten-satisfaction-card {
  border-radius: 13px;
  box-shadow: none;
  padding: 10px;
}

.kindergarten-satisfaction-card strong {
  font-size: 1rem;
  line-height: 1.12;
}

.kindergarten-score-pill {
  background: transparent;
  border: 0;
  font-size: 0.68rem !important;
  line-height: 1.14;
  padding: 0;
  text-align: right;
  white-space: normal;
}

.kindergarten-response-rate span,
.kindergarten-survey-comparison-heading span,
.kindergarten-survey-bar-row strong {
  font-size: 0.74rem;
}

.kindergarten-survey-comparison {
  padding: 9px 10px;
}

.kindergarten-survey-bar-row {
  gap: 6px;
  grid-template-columns: minmax(72px, 0.9fr) minmax(72px, 1fr) auto;
}

.school-card-links {
  gap: 6px;
}

.school-card-links a {
  font-size: 0.72rem;
  padding: 6px 8px;
}

.youth-health-compare {
  padding: 13px;
}

.youth-health-compare .chart-panel-head h4 {
  font-size: 0.9rem;
}

.youth-health-compare .chart-panel-head p,
.youth-health-explanation {
  font-size: 0.74rem;
  line-height: 1.34;
}

.youth-health-rows {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  gap: 0;
  overflow: hidden;
}

.youth-health-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 12px;
}

.youth-health-row + .youth-health-row {
  border-top: 1px solid var(--border-soft);
}

.youth-health-subrow {
  gap: 6px;
  padding-top: 8px;
}

.youth-health-subrow-head {
  align-items: start;
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

.youth-health-subrow-head strong {
  font-size: 0.76rem;
}

.youth-health-subrow-head span {
  font-size: 0.62rem;
  justify-self: start;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.living-alone-mini-bar span,
.living-alone-mini-bar b,
.youth-national-reference b {
  font-size: 0.7rem;
}

.youth-national-reference {
  border-radius: 10px;
  min-width: 68px;
  padding: 6px 8px;
}

.youth-environment-sex-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.youth-environment-sex-card + .youth-environment-sex-card {
  border-top: 1px solid var(--border-soft);
  padding-top: 9px;
}

.youth-environment-values {
  grid-template-columns: 1fr;
}

.youth-environment-values span {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Nærområdet: calmer proximity detail panels. */
.density-facts-panel,
.nearby-type-summary,
.transit-facts-panel {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  gap: 0;
  margin: 10px 0;
  overflow: hidden;
  padding: 0;
}

.density-category-card,
.density-fact,
.nearby-type-pill,
.transit-fact {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

.density-category-card {
  border-bottom: 1px solid var(--border-soft);
  gap: 5px;
  padding: 12px;
}

.density-category-card strong {
  font-size: 1rem;
  line-height: 1.14;
}

.density-category-card p {
  font-size: 0.76rem;
  line-height: 1.34;
}

.density-category-card small,
.density-fact small,
.nearby-type-summary-head span,
.nearby-type-pill span,
.transit-fact small,
.transit-fact p {
  font-size: 0.7rem;
  line-height: 1.28;
}

.density-fact-grid,
.nearby-type-grid,
.transit-fact-grid {
  gap: 0;
  grid-template-columns: 1fr;
}

.density-fact,
.nearby-type-pill,
.transit-fact {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 12px;
}

.density-fact + .density-fact,
.nearby-type-pill + .nearby-type-pill,
.transit-fact + .transit-fact {
  border-top: 1px solid var(--border-soft);
}

.density-fact strong,
.nearby-type-pill strong,
.transit-fact strong {
  font-size: 0.82rem;
  line-height: 1.14;
  text-align: right;
}

.nearby-type-summary-head {
  border-bottom: 1px solid var(--border-soft);
  padding: 11px 12px;
}

.nearby-type-summary-head strong {
  font-size: 0.8rem;
}

.transit-fact {
  align-items: start;
  grid-template-columns: minmax(72px, 0.75fr) minmax(0, 1fr);
}

.transit-fact p {
  grid-column: 1 / -1;
}

.mobility-visual,
.outdoors-visual,
.worship-visual {
  gap: 10px;
  margin-top: 12px;
}

.mobility-hero,
.mobility-kpi-grid,
.outdoors-hero,
.worship-hero,
.outdoors-fact-grid,
.worship-fact-grid {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.mobility-hero-card,
.mobility-kpi-grid article,
.outdoors-hero > div,
.worship-hero > div,
.outdoors-fact-grid article,
.worship-fact-grid article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 10px 12px;
}

.mobility-hero-card + .mobility-hero-card,
.mobility-kpi-grid article + article,
.outdoors-hero > div + div,
.worship-hero > div + div,
.outdoors-fact-grid article + article,
.worship-fact-grid article + article {
  border-top: 1px solid var(--border-soft);
}

.mobility-hero strong,
.outdoors-hero strong,
.worship-hero strong {
  font-size: 1rem;
  line-height: 1.14;
}

.mobility-kpi-grid strong,
.outdoors-fact-grid strong,
.worship-fact-grid strong,
.outdoors-method-grid strong {
  font-size: 0.82rem;
  line-height: 1.14;
}

.mobility-hero p,
.mobility-hero small,
.mobility-kpi-grid p,
.outdoors-hero p,
.worship-hero p,
.outdoors-fact-grid small,
.worship-fact-grid small,
.outdoors-method p,
.outdoors-method small,
.worship-type-panel p,
.worship-type-list small,
.outdoors-list-row small,
.outdoors-list-row p,
.worship-list-row small,
.worship-list-row p {
  font-size: 0.74rem;
  line-height: 1.34;
}

.outdoors-method,
.worship-type-panel,
.outdoors-list,
.worship-list {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  gap: 9px;
  padding: 12px;
}

.outdoors-method-grid,
.worship-type-list {
  gap: 0;
  grid-template-columns: 1fr;
}

.outdoors-method-grid article,
.worship-type-list span,
.worship-type-empty {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 8px 0;
}

.outdoors-method-grid article + article,
.worship-type-list span + span {
  border-top: 1px solid var(--border-soft);
}

.outdoors-list-row,
.worship-list-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 9px 0;
}

.outdoors-list-row + .outdoors-list-row,
.worship-list-row + .worship-list-row {
  border-top: 1px solid var(--border-soft);
}

.outdoors-list-row strong,
.worship-list-row strong,
.outdoors-list-head strong,
.worship-list-head strong,
.outdoors-method > div:first-child strong,
.worship-type-panel > div:first-child strong {
  font-size: 0.84rem;
  line-height: 1.16;
}

/* Hvem bor her: calmer people, economy and participation panels. */
.population-visual-stack,
.education-bullet-panel,
.living-alone-compare,
.fhi-debt-compare,
.politics-visual,
.car-hold-visual {
  gap: 10px;
}

.population-age-visual,
.population-gender-split,
.education-bullet-panel,
.living-alone-compare,
.fhi-debt-compare,
.inequality-explanation,
.ownership-stack-panel,
.church-reference-compact {
  border-radius: 14px;
  padding: 12px;
}

.population-age-compare-rows,
.population-gender-legend,
.education-comparison-list,
.education-level-ladder,
.living-alone-rows,
.fhi-debt-summary,
.fhi-debt-rows,
.church-reference-list,
.ownership-stack-legend,
.politics-party-list {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  gap: 0;
  overflow: hidden;
}

.fhi-debt-summary {
  grid-template-columns: 1fr;
}

.population-age-compare-row,
.population-gender-legend div,
.education-comparison-row,
.education-level-row,
.living-alone-row,
.fhi-debt-summary div,
.fhi-debt-mini-bar,
.church-reference-row,
.ownership-legend-item,
.politics-party-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  padding: 9px 11px;
}

.population-age-compare-row + .population-age-compare-row,
.population-gender-legend div + div,
.education-comparison-row + .education-comparison-row,
.education-level-row + .education-level-row,
.living-alone-row + .living-alone-row,
.fhi-debt-summary div + div,
.fhi-debt-mini-bar + .fhi-debt-mini-bar,
.church-reference-row + .church-reference-row,
.ownership-legend-item + .ownership-legend-item,
.politics-party-row + .politics-party-row {
  border-top: 1px solid var(--border-soft);
}

.population-age-row-head strong,
.population-gender-legend strong,
.education-comparison-row strong,
.education-level-row strong,
.living-alone-row-head strong,
.fhi-debt-row-head strong,
.fhi-debt-mini-bar span,
.fhi-debt-mini-bar b,
.church-reference-row strong,
.church-reference-row b,
.ownership-legend-item strong,
.politics-party-row strong {
  color: var(--text-main);
  font-size: 0.76rem;
  line-height: 1.15;
}

.population-age-row-head span,
.population-age-row-foot small,
.population-age-row-foot b,
.population-gender-legend b,
.education-comparison-row b,
.education-level-row span,
.education-comparison-row small,
.education-delta-badge,
.living-alone-row-head span,
.living-alone-mini-bar span,
.living-alone-mini-bar b,
.fhi-debt-row-head span,
.fhi-debt-summary span,
.fhi-debt-summary b,
.fhi-debt-note,
.church-reference-badge,
.ownership-legend-item small,
.politics-party-row span {
  font-size: 0.68rem;
  line-height: 1.18;
}

.fhi-debt-summary strong {
  font-size: 0.92rem;
  line-height: 1.12;
}

.income-echart-panel-spacious .chart-panel-head h4,
.population-age-visual .chart-panel-head h4,
.population-gender-split .chart-panel-head h4,
.education-bullet-panel .chart-panel-head h4,
.living-alone-compare .chart-panel-head h4,
.fhi-debt-compare .chart-panel-head h4,
.church-reference-compact .chart-panel-head h4 {
  font-size: 0.9rem;
  letter-spacing: 0;
}

.income-echart-panel-spacious .chart-panel-head p,
.population-age-visual .chart-panel-head p,
.population-gender-split .chart-panel-head p,
.education-bullet-panel .chart-panel-head p,
.living-alone-compare .chart-panel-head p,
.fhi-debt-compare .chart-panel-head p,
.church-reference-compact .chart-panel-head p {
  font-size: 0.76rem;
  line-height: 1.34;
}

.population-age-row-foot b,
.education-delta-badge,
.living-alone-row-head span,
.fhi-debt-row-head span,
.fhi-debt-summary b,
.church-reference-badge {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  padding: 0;
  white-space: normal;
}

.population-age-track,
.education-comparison-row i,
.education-level-row i,
.living-alone-mini-bar i,
.fhi-debt-mini-bar i,
.church-reference-row i,
.politics-party-row i {
  background: var(--bg-track);
  height: 6px;
}

.population-age-track i,
.education-comparison-row.is-selected i em,
.education-level-row i em,
.living-alone-mini-bar.is-local i em,
.fhi-debt-mini-bar.is-local i em,
.church-reference-row.is-selected i em {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
}

.education-comparison-row.is-selected,
.fhi-debt-mini-bar.is-selected,
.church-reference-row.is-selected,
.population-age-compare-row.has-reference {
  background: rgba(94, 230, 168, 0.045);
}

.education-reference-badge,
.fhi-debt-badge {
  background: rgba(94, 230, 168, 0.1);
  color: var(--accent-mint);
  font-size: 0.6rem;
  padding: 3px 5px;
}

.population-gender-stack {
  height: 14px;
}

.ownership-stacked-bar {
  height: 15px;
  margin: 8px 0 10px;
}

.ownership-stack-panel {
  display: grid;
  gap: 10px;
}

.ownership-stack-legend {
  display: grid;
}

.ownership-legend-item {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 12px minmax(0, 1fr) auto;
}

.ownership-legend-item span {
  height: 10px;
  width: 10px;
}

.inequality-explanation {
  gap: 11px;
  margin: 12px 0 0;
}

.inequality-explanation strong {
  font-size: 0.98rem;
  line-height: 1.14;
}

.inequality-explanation p,
.inequality-explainer-details summary {
  font-size: 0.76rem;
  line-height: 1.36;
}

.inequality-explanation dl {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.045), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  gap: 0;
  overflow: hidden;
}

.inequality-explanation dl div {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.inequality-explanation dl div + div {
  border-top: 1px solid var(--border-soft);
}

.politics-visual {
  display: grid;
  margin-top: 12px;
}

.politics-hero,
.politics-party-list {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--party, var(--accent-mint)) 16%, transparent), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.14);
}

.politics-hero {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.politics-hero > div:first-child {
  padding: 13px;
}

.politics-hero span,
.politics-hero-meta span {
  color: var(--accent-cyan);
  display: block;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.politics-hero strong {
  color: var(--text-main);
  display: block;
  font-size: 1.14rem;
  line-height: 1.08;
}

.politics-hero p {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.36;
  margin: 0;
}

.politics-hero-meta {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 4px;
  padding: 10px 13px;
}

.politics-hero-meta b {
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.18;
}

.politics-party-row {
  display: grid;
  gap: 6px;
}

.politics-party-row > div {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.politics-party-row i {
  border-radius: 999px;
  display: block;
  overflow: hidden;
}

.politics-party-row i em {
  background: var(--party, var(--accent-mint));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.car-hold-hero,
.car-brand-ranked-list,
.car-composition-card {
  border-radius: 14px;
}

.car-hold-hero {
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: 0;
}

.car-hold-hero > div:first-child {
  padding: 13px;
}

.car-hold-hero strong {
  font-size: 1.12rem;
}

.car-hold-hero p,
.car-hold-kpis p,
.car-brand-rank-row small,
.car-brand-other span,
.car-brand-other small,
.car-composition-heading p,
.car-composition-row span,
.car-composition-note {
  font-size: 0.74rem;
  line-height: 1.34;
}

.car-hold-kpis {
  background: color-mix(in srgb, var(--state-info) 3%, var(--surface-sunken));
  border-top: 1px solid var(--border-soft);
  grid-template-columns: 1fr;
}

.car-hold-kpis article {
  border-width: 0;
  border-top: 1px solid var(--border-soft);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 12px;
}

.car-hold-kpis article:first-child {
  border-top: 0;
}

.car-hold-kpis article p {
  grid-column: 1 / -1;
}

.car-hold-kpis strong,
.car-brand-list-heading strong,
.car-composition-heading strong {
  font-size: 0.86rem;
  line-height: 1.14;
}

.car-brand-ranked-list,
.car-composition-card {
  padding: 12px;
}

.car-brand-rank-row,
.car-brand-other,
.car-composition-row {
  padding: 8px 0;
}

.car-brand-rank-row {
  grid-template-columns: 22px minmax(0, 1fr) auto;
}

.car-brand-rank-row b {
  grid-column: 2 / -1;
  justify-self: start;
}

.car-brand-rank-row > span {
  font-size: 0.66rem;
  height: 22px;
  width: 22px;
}

.church-membership-panel .chart-summary-grid {
  gap: 0;
}

.church-membership-panel .chart-summary-grid article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0;
}

.church-membership-panel .chart-summary-grid article + article {
  border-top: 1px solid var(--border-soft);
}

.church-membership-panel .chart-summary-grid strong {
  font-size: 0.9rem;
}

.church-donut-legend span {
  font-size: 0.72rem;
}

@media (max-width: 700px) {
  .population-age-row-head,
  .population-age-row-foot,
  .education-comparison-row > div,
  .education-level-row div,
  .living-alone-row-head,
  .fhi-debt-row-head,
  .politics-party-row > div {
    align-items: start;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr;
  }

  .population-age-row-head span,
  .population-age-row-foot b,
  .education-comparison-row b,
  .education-level-row span,
  .politics-party-row span {
    text-align: left;
  }

  .car-brand-list-heading,
  .car-composition-heading {
    display: grid;
  }
}

/* Follow-up polish: compact health, senior and plan detail cards. */
.mental-health-definition-panel,
.fhi-waiting-note {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-muted);
  display: grid;
  gap: 9px;
  padding: 2px 0 0;
}

.mental-health-definition-panel strong,
.fhi-waiting-note strong {
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.18;
}

.mental-health-definition-panel dl {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.07), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
}

.mental-health-definition-panel dl div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.mental-health-definition-panel dl div + div {
  border-top: 1px solid var(--border-soft);
}

.mental-health-definition-panel dt {
  color: var(--accent-cyan);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
}

.mental-health-definition-panel dd,
.mental-health-definition-panel p,
.fhi-waiting-note p {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.36;
  margin: 0;
}

.fhi-waiting-visual {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
}

.fhi-waiting-hero,
.fhi-waiting-kpis,
.fhi-waiting-bars {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.fhi-waiting-hero {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  padding: 13px;
}

.fhi-waiting-hero span,
.fhi-waiting-main small,
.fhi-waiting-kpis span,
.fhi-waiting-bars header span,
.fhi-waiting-row span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.fhi-waiting-hero strong,
.fhi-waiting-main b,
.fhi-waiting-kpis strong,
.fhi-waiting-bars header strong,
.fhi-waiting-row strong {
  color: var(--text-main);
  font-weight: 940;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.fhi-waiting-hero strong {
  display: block;
  font-size: 1.1rem;
  margin: 4px 0;
}

.fhi-waiting-hero p,
.fhi-waiting-kpis small,
.fhi-waiting-row small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.34;
  margin: 0;
}

.fhi-waiting-main {
  background: color-mix(in srgb, var(--state-info) 4%, var(--surface-sunken));
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.fhi-waiting-main b {
  font-size: 1rem;
}

.fhi-waiting-kpis {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fhi-waiting-kpis div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
}

.fhi-waiting-kpis div:nth-child(even) {
  border-left: 1px solid var(--border-soft);
}

.fhi-waiting-kpis div:nth-child(n + 3) {
  border-top: 1px solid var(--border-soft);
}

.fhi-waiting-kpis strong {
  font-size: 0.96rem;
}

.fhi-waiting-bars {
  display: grid;
  gap: 0;
  padding: 12px;
}

.fhi-waiting-bars header {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 9px;
}

.fhi-waiting-row {
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 7px;
  padding: 9px 0;
}

.fhi-waiting-row div {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.fhi-waiting-row strong {
  font-size: 0.88rem;
  text-align: right;
}

.fhi-waiting-row i {
  background: var(--bg-track);
  border-radius: 999px;
  display: block;
  height: 7px;
  overflow: hidden;
}

.fhi-waiting-row i em {
  background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
}

.fhi-waiting-note a {
  color: var(--accent-mint);
  font-size: 0.8rem;
  font-weight: 900;
  justify-self: start;
  text-decoration: none;
}

.senior-projection-hero-v2,
.senior-competence-hero {
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: 0;
}

.senior-projection-hero-v2 > div,
.senior-competence-hero > div {
  padding: 12px 13px;
}

.senior-projection-hero-v2 > div + div,
.senior-competence-hero > div + div {
  border-top: 1px solid var(--border-soft);
}

.senior-projection-age-list {
  background:
    radial-gradient(circle at 0 0, rgba(155, 231, 245, 0.08), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.05);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.senior-projection-age-row {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: 44px minmax(74px, auto) minmax(0, 1fr);
  padding: 10px 12px;
}

.senior-projection-age-row + .senior-projection-age-row {
  border-top: 1px solid var(--border-soft);
}

.senior-projection-age-row span {
  color: var(--accent-cyan);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

.senior-projection-age-row strong {
  color: var(--text-main);
  font-size: 0.96rem;
  font-weight: 940;
  line-height: 1.14;
}

.senior-projection-age-row small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.3;
  text-align: right;
}

.senior-reference-grid,
.senior-competence-grid {
  grid-template-columns: 1fr;
}

.senior-reference-grid article,
.senior-competence-grid article {
  padding: 10px 12px;
}

.senior-projection-note-v2 p,
.senior-competence-reference p,
.senior-competence-grid small {
  font-size: 0.76rem;
}

.plan-data-visual {
  gap: 11px;
}

.plan-data-hero,
.plan-data-fact-grid article,
.plan-data-list {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(217, 247, 244, 0.04);
  padding: 12px;
}

.plan-data-hero strong {
  font-size: 1.05rem;
  line-height: 1.15;
}

.plan-data-hero p,
.plan-data-fact-grid p,
.plan-data-list p {
  font-size: 0.76rem;
  line-height: 1.34;
}

.plan-data-fact-grid {
  grid-template-columns: 1fr;
}

.plan-data-fact-grid article {
  gap: 5px;
}

.plan-data-fact-grid strong {
  font-size: 0.98rem;
}

.plan-data-list {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.plan-data-list article {
  gap: 5px;
  padding: 10px 11px;
}

.plan-data-list strong {
  font-size: 0.9rem;
  line-height: 1.18;
}

@media (max-width: 700px) {
  .fhi-waiting-hero,
  .fhi-waiting-kpis,
  .senior-projection-age-row {
    grid-template-columns: 1fr;
  }

  .fhi-waiting-kpis div:nth-child(even),
  .fhi-waiting-kpis div:nth-child(n + 3) {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }

  .fhi-waiting-kpis div:first-child {
    border-top: 0;
  }

  .senior-projection-age-row small {
    text-align: left;
  }
}

/* Launch polish: persistent panel controls and theme-aware scroll surfaces. */
.insight-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.panel-toolbar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg-panel-strong) 94%, transparent);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  min-height: 54px;
  padding: 5px 10px;
  position: relative;
  z-index: 930;
}

.panel-toolbar .panel-close,
.insight-panel.detail-open .panel-toolbar .panel-close,
.insight-panel.entity-open .panel-toolbar .panel-close {
  align-items: center;
  background: rgba(155, 231, 245, 0.08);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(217, 247, 244, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.16);
  color: var(--text-main);
  display: inline-flex;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  min-width: 44px;
  padding: 0 0 3px;
  position: static;
  text-transform: none;
  width: 44px;
}

.panel-toolbar .panel-close:hover,
.panel-toolbar .panel-close:focus-visible,
.insight-panel.detail-open .panel-toolbar .panel-close:hover,
.insight-panel.detail-open .panel-toolbar .panel-close:focus-visible,
.insight-panel.entity-open .panel-toolbar .panel-close:hover,
.insight-panel.entity-open .panel-toolbar .panel-close:focus-visible {
  background: rgba(94, 230, 168, 0.14);
  border-color: var(--accent-mint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-mint) 20%, transparent);
  color: var(--accent-mint);
  outline: 0;
  transform: none;
}

.insight-panel #insight-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
}

.insight-panel .profile-header {
  padding-right: 0;
}

#insight-content,
.profile-main,
.detail-card-side,
.entity-detail-side,
.app-info-content,
.search-results {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

#insight-content::-webkit-scrollbar,
.profile-main::-webkit-scrollbar,
.detail-card-side::-webkit-scrollbar,
.entity-detail-side::-webkit-scrollbar,
.app-info-content::-webkit-scrollbar,
.search-results::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

#insight-content::-webkit-scrollbar-track,
.profile-main::-webkit-scrollbar-track,
.detail-card-side::-webkit-scrollbar-track,
.entity-detail-side::-webkit-scrollbar-track,
.app-info-content::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

#insight-content::-webkit-scrollbar-thumb,
.profile-main::-webkit-scrollbar-thumb,
.detail-card-side::-webkit-scrollbar-thumb,
.entity-detail-side::-webkit-scrollbar-thumb,
.app-info-content::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

#insight-content::-webkit-scrollbar-thumb:hover,
.profile-main::-webkit-scrollbar-thumb:hover,
.detail-card-side::-webkit-scrollbar-thumb:hover,
.entity-detail-side::-webkit-scrollbar-thumb:hover,
.app-info-content::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}

:root[data-theme="light"] .panel-toolbar {
  background: rgba(248, 252, 251, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

:root[data-theme="light"] .panel-toolbar .panel-close,
:root[data-theme="light"] .insight-panel.detail-open .panel-toolbar .panel-close,
:root[data-theme="light"] .insight-panel.entity-open .panel-toolbar .panel-close {
  background: rgba(37, 111, 134, 0.07);
  border-color: rgba(37, 111, 134, 0.18);
  color: var(--text-main);
}

:root[data-theme="light"] .panel-toolbar .panel-close:hover,
:root[data-theme="light"] .panel-toolbar .panel-close:focus-visible {
  background: rgba(23, 109, 74, 0.1);
  border-color: var(--accent-mint);
  color: var(--accent-mint);
}

@media (min-width: 981px) {
  .insight-panel.detail-open,
  .insight-panel.entity-open {
    padding-top: 0;
  }

  .insight-panel.detail-open .panel-toolbar + #insight-content,
  .insight-panel.entity-open .panel-toolbar + #insight-content {
    flex: 1 1 auto;
    height: auto;
    overflow: hidden;
  }
}

@media (max-width: 980px) {
  .insight-panel,
  .insight-panel.detail-open,
  .insight-panel.entity-open {
    padding: 0;
  }

  .panel-toolbar {
    min-height: 54px;
    padding: 5px 8px;
  }

  .panel-toolbar .panel-close,
  .insight-panel.detail-open .panel-toolbar .panel-close,
  .insight-panel.entity-open .panel-toolbar .panel-close {
    height: 44px;
    min-width: 44px;
    width: 44px;
  }

  .insight-panel #insight-content {
    padding: 14px 14px max(18px, env(safe-area-inset-bottom));
  }

  .insight-panel.detail-open .profile-main,
  .insight-panel.detail-open .detail-card-side,
  .insight-panel.entity-open .profile-main,
  .insight-panel.entity-open .detail-card-side,
  .insight-panel.entity-open .entity-detail-side {
    max-height: none;
    overflow: visible;
    position: static;
  }
}

/* Atom-derived semantic color system.
   Blue = interaction/selection, cyan = information, green = positive,
   amber/orange = caution and red = negative/error. */
::selection {
  background: var(--interactive-soft);
  color: var(--text-main);
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

body::before {
  background:
    repeating-radial-gradient(
      ellipse at 18% 12%,
      color-mix(in srgb, var(--state-info) 8%, transparent) 0 1px,
      transparent 1px 24px
    ),
    repeating-radial-gradient(
      ellipse at 88% 72%,
      color-mix(in srgb, var(--accent-purple) 6%, transparent) 0 1px,
      transparent 1px 30px
    );
  opacity: 0.34;
}

.search-panel,
.insight-panel {
  background:
    radial-gradient(circle at 18% 0, var(--interactive-soft), transparent 35%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-purple) 7%, transparent), transparent 28%),
    var(--bg-panel);
  border-color: var(--border-soft);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 var(--surface-highlight);
}

.panel-toolbar {
  background: color-mix(in srgb, var(--bg-panel-strong) 94%, transparent);
  border-bottom-color: var(--border-soft);
  box-shadow: inset 0 1px 0 var(--surface-highlight);
}

.search-form {
  background: color-mix(in srgb, var(--surface-sunken) 72%, var(--bg-card));
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 10px 28px var(--shadow-color);
}

.search-form:focus-within {
  background: var(--bg-card-hover);
  border-color: var(--interactive);
  box-shadow:
    0 0 0 4px var(--interactive-soft),
    0 16px 44px var(--shadow-color);
}

.search-form input::placeholder {
  color: var(--text-dim);
}

.search-form button,
.childhood-profile-action,
.housing-link {
  background: var(--interactive);
  color: var(--text-on-accent);
}

.search-form button:hover,
.search-form button:focus-visible,
.childhood-profile-action:hover,
.childhood-profile-action:focus-visible,
.housing-link:hover,
.housing-link:focus-visible {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--interactive) 24%, transparent);
  filter: brightness(1.05);
}

.housing-link small,
.search-form.is-searching button .loading-spinner {
  color: color-mix(in srgb, var(--text-on-accent) 82%, transparent);
}

.search-form.is-searching button .loading-spinner {
  border-color: color-mix(in srgb, var(--text-on-accent) 36%, transparent);
  border-top-color: var(--text-on-accent);
}

.theme-toggle,
.app-menu-button,
.app-info-close,
.panel-toolbar .panel-close,
.entity-detail-close,
.leaflet-control-zoom a {
  background: color-mix(in srgb, var(--bg-panel-strong) 88%, transparent);
  border-color: var(--border-soft);
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 10px 26px var(--shadow-color);
}

.theme-toggle::before {
  background: var(--state-info);
}

.theme-toggle:not([data-theme="light"]) span,
.theme-toggle[data-theme="light"] b {
  color: var(--text-on-accent);
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.app-menu-button:hover,
.app-menu-button:focus-visible,
.panel-toolbar .panel-close:hover,
.panel-toolbar .panel-close:focus-visible,
.entity-detail-close:hover,
.entity-detail-close:focus-visible,
.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus-visible {
  background: var(--interactive-soft);
  border-color: var(--interactive);
  box-shadow: 0 0 0 3px var(--interactive-soft);
  color: var(--interactive);
  outline: 0;
}

.metric-section {
  border-top-color: var(--border-soft);
}

.metric-section-header:hover,
.metric-section-header:focus-visible,
.metric-section-header.active {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card);
  border-color: color-mix(in srgb, var(--interactive) 32%, var(--border-soft));
  box-shadow: 0 14px 38px var(--shadow-color);
}

.metric-section-header.active::before {
  background: linear-gradient(180deg, var(--interactive), var(--state-info));
  box-shadow: 0 0 16px color-mix(in srgb, var(--interactive) 25%, transparent);
}

.metric-section-count,
.detail-heading > span,
.detail-meta-tags span,
.topic-chips span {
  background: var(--interactive-soft);
  border-color: color-mix(in srgb, var(--interactive) 24%, var(--border-soft));
  color: var(--interactive) !important;
}

.metric-section-header:hover .metric-section-count,
.metric-section-header.active .metric-section-count {
  background: var(--interactive);
  color: var(--text-on-accent) !important;
}

.metric-section-count::before,
.metric-section-count::after,
.metric-section-header:hover .metric-section-count::before,
.metric-section-header:hover .metric-section-count::after,
.metric-section-header.active .metric-section-count::before,
.metric-section-header.active .metric-section-count::after {
  background: currentColor;
}

.metric-card,
.housing-link,
.realtor-card,
.detail-card,
.detail-card-side,
.entity-detail-side,
.entity-generic-card,
.detail-stat,
.chart-panel,
.chart-summary-grid article,
.inequality-explanation,
.profile-metric-bar,
.data-row,
.no-data-state,
.news-item,
.weather-panel,
.senior-card,
.senior-projection-card,
.waste-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--state-info) 5%, transparent), transparent 40%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 12px 34px var(--shadow-color);
  color: var(--text-main);
}

.metric-card:hover,
.metric-card:focus-visible,
.metric-card.active,
.news-item.is-clickable:hover,
.news-item:focus-within,
.news-item.is-map-selected,
.news-item.is-entity-selected,
.chart-bar-row.is-selected,
.weather-temp-row.is-home,
.weather-compare-row.is-home,
.culture-index-visual li.is-current {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 46%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 45%, var(--border-soft));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--interactive) 12%, transparent),
    0 18px 48px var(--shadow-color);
}

.metric-card.active {
  outline: 2px solid var(--interactive-soft);
}

.metric-cue {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

.metric-cue::before,
.metric-cue::after {
  background: var(--interactive);
}

.metric-card.active .metric-cue {
  background: var(--interactive);
  border-color: var(--interactive);
  box-shadow: 0 0 16px color-mix(in srgb, var(--interactive) 28%, transparent);
}

.metric-card.active .metric-cue::before,
.metric-card.active .metric-cue::after {
  background: var(--text-on-accent);
}

.result-button:hover,
.result-button:focus-visible,
.result-button[aria-current="true"] {
  background: var(--interactive-soft);
  color: var(--interactive);
}

.profile-summary-link,
.news-item a,
.entity-list-action,
.entity-generic-card a,
.realtor-card a,
.detail-metadata-note a {
  color: var(--interactive);
}

.detail-metadata-note,
.chart-meta,
.app-info-note {
  background: color-mix(in srgb, var(--info-soft) 72%, var(--bg-card));
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  color: var(--text-muted);
}

.detail-metadata-note-icon {
  border-color: var(--state-info);
  color: var(--state-info);
}

.detail-metadata-note strong,
.chart-meta strong {
  color: var(--text-main);
}

.chart-meta {
  max-width: 54%;
}

.echart-fallback-list dt,
.profile-metric-scale strong {
  color: var(--text-muted);
}

.echart-fallback-list dd {
  color: var(--text-main);
}

.chart-bar-row.is-reference {
  border-color: color-mix(in srgb, var(--reference) 34%, var(--border-soft));
}

.chart-bar-fill,
.profile-metric-fill,
.municipal-bar-row i em,
.waste-card span,
.waste-year-meter i em {
  background: var(--state-info);
}

.fhi-comparison-delta.is-positive,
.life-line-delta.is-positive,
.life-highlight-card span.is-positive {
  background: var(--success-soft);
  color: var(--state-success);
}

.fhi-comparison-delta.is-negative,
.life-line-delta.is-negative,
.life-highlight-card span.is-negative {
  background: var(--danger-soft);
  color: var(--state-danger-text);
}

.fhi-comparison-delta.is-neutral,
.life-line-delta.is-neutral {
  background: var(--info-soft);
  color: var(--state-info);
}

.finance-visual.is-strong .finance-hero,
.plan-data-visual.is-clear .plan-data-hero {
  background:
    radial-gradient(circle at 0 0, var(--success-soft), transparent 44%),
    var(--bg-card);
  border-color: color-mix(in srgb, var(--state-success) 38%, var(--border-soft));
}

.finance-visual.is-medium .finance-hero,
.plan-data-visual.is-nearby .plan-data-hero {
  background:
    radial-gradient(circle at 0 0, var(--warning-soft), transparent 44%),
    var(--bg-card);
  border-color: color-mix(in srgb, var(--state-warning) 38%, var(--border-soft));
}

.finance-visual.is-weak .finance-hero,
.migration-visual.is-negative .migration-hero,
.plan-data-visual.is-hit .plan-data-hero {
  background:
    radial-gradient(circle at 0 0, var(--danger-soft), transparent 44%),
    var(--bg-card);
  border-color: color-mix(in srgb, var(--state-danger) 36%, var(--border-soft));
}

.inequality-scale-track .is-low {
  background: color-mix(in srgb, var(--state-success) 78%, var(--bg-card));
}

.inequality-scale-track .is-moderate {
  background: color-mix(in srgb, var(--state-info) 72%, var(--bg-card));
}

.inequality-scale-track .is-clear {
  background: color-mix(in srgb, var(--state-warning) 74%, var(--bg-card));
}

.inequality-scale-track .is-large {
  background: color-mix(in srgb, var(--state-danger) 70%, var(--bg-card));
}

.inequality-scale-track .is-very-large {
  background: color-mix(in srgb, var(--accent-purple) 62%, var(--bg-card));
}

.inequality-scale-track .is-local,
.inequality-scale-legend i {
  background: var(--interactive);
}

.inequality-scale-track .is-national,
.inequality-scale-legend .is-national i {
  background: var(--reference);
}

.weather-rain-gauge span {
  background:
    linear-gradient(90deg, var(--state-info) var(--wet), var(--info-soft) 0),
    repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      color-mix(in srgb, var(--text-main) 22%, transparent) 22px 24px
    );
}

.weather-compare-row i,
.weather-season-strip i {
  background: var(--bg-track);
}

.weather-compare-row i em {
  background: linear-gradient(90deg, var(--state-info), var(--interactive));
}

.weather-compare-row.is-home i em {
  background: linear-gradient(90deg, var(--interactive), var(--state-info));
}

.weather-season-strip i {
  background: linear-gradient(90deg, var(--state-info) var(--bar), var(--bg-track) 0);
}

.nodnett-signal::before {
  background:
    linear-gradient(90deg, var(--state-success) var(--signal), var(--bg-track) 0),
    repeating-linear-gradient(
      90deg,
      transparent 0 18px,
      color-mix(in srgb, var(--text-main) 18%, transparent) 18px 20px
    );
}

.nodnett-signal span {
  background: conic-gradient(from 180deg, var(--state-success) var(--signal), var(--bg-track) 0);
}

.nodnett-signal span::after {
  background: var(--bg-card);
}

.nodnett-signal.is-uncovered span {
  background: conic-gradient(from 180deg, var(--state-warning) var(--signal), var(--bg-track) 0);
}

.church-donut-legend .is-member {
  background: var(--interactive);
}

.church-donut-legend .is-non-member {
  background: var(--chart-track);
}

.mini-trend-grid {
  stroke: var(--chart-grid);
}

.mini-trend-line {
  stroke: var(--interactive);
}

.mini-trend-point {
  fill: var(--interactive);
  stroke: var(--bg-card);
}

.mini-trend-label {
  fill: var(--text-muted);
}

:root:not([data-theme="light"]) .leaflet-tile-pane {
  filter: saturate(0.62) brightness(0.8) contrast(1.08) hue-rotate(2deg);
}

:root[data-theme="light"] .leaflet-tile-pane {
  filter: saturate(0.82) brightness(1.03) contrast(0.97);
}

:root[data-theme="light"] .search-panel,
:root[data-theme="light"] .insight-panel,
:root[data-theme="light"] .panel-toolbar,
:root[data-theme="light"] .search-form,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .app-menu-button,
:root[data-theme="light"] .app-info-close,
:root[data-theme="light"] .panel-toolbar .panel-close {
  box-shadow:
    0 18px 54px var(--shadow-color),
    inset 0 1px 0 var(--surface-highlight);
}

/* Match the specificity of the legacy per-theme layer while keeping one logic. */
:root:is([data-theme="light"], :not([data-theme="light"])) .search-panel,
:root:is([data-theme="light"], :not([data-theme="light"])) .insight-panel {
  background:
    radial-gradient(circle at 18% 0, var(--interactive-soft), transparent 35%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-purple) 7%, transparent), transparent 28%),
    var(--bg-panel);
  border-color: var(--border-soft);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .panel-toolbar {
  background: color-mix(in srgb, var(--bg-panel-strong) 94%, transparent);
  border-bottom-color: var(--border-soft);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .search-form {
  background: color-mix(in srgb, var(--surface-sunken) 72%, var(--bg-card));
  border-color: var(--border-soft);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .search-form:focus-within {
  background: var(--bg-card-hover);
  border-color: var(--interactive);
  box-shadow:
    0 0 0 4px var(--interactive-soft),
    0 16px 44px var(--shadow-color);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .search-form button,
:root:is([data-theme="light"], :not([data-theme="light"])) .housing-link,
:root:is([data-theme="light"], :not([data-theme="light"])) .childhood-profile-action {
  background: var(--interactive);
  color: var(--text-on-accent);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .search-results {
  background: color-mix(in srgb, var(--bg-panel-strong) 96%, transparent);
  border-color: var(--border-soft);
  box-shadow: 0 18px 48px var(--shadow-color);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .result-button {
  background: transparent;
  color: var(--text-main);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .result-button:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .result-button:focus-visible,
:root:is([data-theme="light"], :not([data-theme="light"])) .result-button[aria-current="true"] {
  background: var(--interactive-soft);
  color: var(--interactive);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .housing-link small {
  color: color-mix(in srgb, var(--text-on-accent) 82%, transparent);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .theme-toggle::before {
  background: var(--state-info);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .metric-section-header:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .metric-section-header:focus-visible,
:root:is([data-theme="light"], :not([data-theme="light"])) .metric-section-header.active {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 44%),
    var(--bg-card);
  border-color: color-mix(in srgb, var(--interactive) 32%, var(--border-soft));
  box-shadow: 0 14px 38px var(--shadow-color);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .metric-section-header.active::before {
  background: linear-gradient(180deg, var(--interactive), var(--state-info));
  box-shadow: 0 0 16px color-mix(in srgb, var(--interactive) 25%, transparent);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .metric-section-count,
:root:is([data-theme="light"], :not([data-theme="light"])) .detail-heading > span,
:root:is([data-theme="light"], :not([data-theme="light"])) .detail-meta-tags span,
:root:is([data-theme="light"], :not([data-theme="light"])) .topic-chips span {
  background: var(--interactive-soft);
  border-color: color-mix(in srgb, var(--interactive) 24%, var(--border-soft));
  color: var(--interactive) !important;
}

:root:is([data-theme="light"], :not([data-theme="light"])) .metric-section-header:hover .metric-section-count,
:root:is([data-theme="light"], :not([data-theme="light"])) .metric-section-header.active .metric-section-count {
  background: var(--interactive);
  color: var(--text-on-accent) !important;
}

:root:is([data-theme="light"], :not([data-theme="light"])) .metric-card:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .metric-card:focus-visible,
:root:is([data-theme="light"], :not([data-theme="light"])) .metric-card.active,
:root:is([data-theme="light"], :not([data-theme="light"])) .news-item.is-clickable:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .news-item:focus-within,
:root:is([data-theme="light"], :not([data-theme="light"])) .news-item.is-map-selected,
:root:is([data-theme="light"], :not([data-theme="light"])) .news-item.is-entity-selected {
  background:
    radial-gradient(circle at 0 0, var(--interactive-soft), transparent 46%),
    var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--interactive) 45%, var(--border-soft));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--interactive) 12%, transparent),
    0 18px 48px var(--shadow-color);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .metric-cue {
  background: var(--surface-sunken);
  border-color: var(--border-soft);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .metric-card.active .metric-cue {
  background: var(--interactive);
  border-color: var(--interactive);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .detail-metadata-note,
:root:is([data-theme="light"], :not([data-theme="light"])) .chart-meta,
:root:is([data-theme="light"], :not([data-theme="light"])) .app-info-note {
  background: color-mix(in srgb, var(--info-soft) 72%, var(--bg-card));
  border-color: color-mix(in srgb, var(--state-info) 28%, var(--border-soft));
  color: var(--text-muted);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .panel-toolbar .panel-close,
:root:is([data-theme="light"], :not([data-theme="light"])) .entity-detail-close,
:root:is([data-theme="light"], :not([data-theme="light"])) .leaflet-control-zoom a {
  background: color-mix(in srgb, var(--bg-panel-strong) 88%, transparent);
  border-color: var(--border-soft);
  color: var(--text-main);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .insight-panel.detail-open .panel-toolbar .panel-close,
:root:is([data-theme="light"], :not([data-theme="light"])) .insight-panel.entity-open .panel-toolbar .panel-close {
  background: color-mix(in srgb, var(--bg-panel-strong) 88%, transparent);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 10px 26px var(--shadow-color);
  color: var(--text-main);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .panel-toolbar .panel-close:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .panel-toolbar .panel-close:focus-visible,
:root:is([data-theme="light"], :not([data-theme="light"])) .entity-detail-close:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .entity-detail-close:focus-visible,
:root:is([data-theme="light"], :not([data-theme="light"])) .leaflet-control-zoom a:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .leaflet-control-zoom a:focus-visible {
  background: var(--interactive-soft);
  border-color: var(--interactive);
  color: var(--interactive);
}

:root:is([data-theme="light"], :not([data-theme="light"])) .insight-panel.detail-open .panel-toolbar .panel-close:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .insight-panel.detail-open .panel-toolbar .panel-close:focus-visible,
:root:is([data-theme="light"], :not([data-theme="light"])) .insight-panel.entity-open .panel-toolbar .panel-close:hover,
:root:is([data-theme="light"], :not([data-theme="light"])) .insight-panel.entity-open .panel-toolbar .panel-close:focus-visible {
  background: var(--interactive-soft);
  border-color: var(--interactive);
  box-shadow: 0 0 0 3px var(--interactive-soft);
  color: var(--interactive);
}

:root:not([data-theme="light"]) .detail-card .data-row,
:root:not([data-theme="light"]) .detail-card-side .data-row,
:root:not([data-theme="light"]) .immigration-section .data-row,
:root:not([data-theme="light"]) .culture-index-visual li {
  background:
    radial-gradient(circle at 0 0, var(--info-soft), transparent 42%),
    var(--bg-card);
  border-color: var(--border-soft);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 10px 26px var(--shadow-color);
}