.index-dashboard,
.index-dashboard__detached {
  /* Design tokens -- PatrickNeilBradley.com patriotic-editorial defaults, same
     family as index-chart (--ic-*) and index-map (--im-*). Override on the
     .index-dashboard node or an ancestor to re-theme. Declared on detached
     panels too (v0.3.0): they sit outside the shell root, so the light-context
     map re-tokening below still resolves there. */
  --id-bg:        transparent;
  --id-fg:        #1A1A2E;
  --id-muted:     #5C5C6E;
  --id-border:    #E2DBC8;
  --id-panel-bg:  #FFFFFF;
  --id-accent:    #3C3B6E;   /* Old Glory Blue */
  --id-emphasis:  #B22234;   /* Old Glory Red -- selection state only */
  --id-gap:       16px;
  --id-radius:    8px;
}
.index-dashboard {
  display: block;
  box-sizing: border-box;
  background: var(--id-bg);
  color: var(--id-fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.index-dashboard * { box-sizing: border-box; }

.index-dashboard__header { margin-bottom: var(--id-gap); }
.index-dashboard__title { font-size: 19px; font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.index-dashboard__subtitle { font-size: 13px; color: var(--id-muted); margin: 0 0 8px; }

.index-dashboard__readout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--id-border); border-radius: var(--id-radius);
  background: var(--id-panel-bg); font-size: 13px; color: var(--id-muted);
}
.index-dashboard.has-selection .index-dashboard__readout { border-color: var(--id-accent); }
.index-dashboard__readout-text { flex: 1 1 auto; min-width: 0; }
.index-dashboard.has-selection .index-dashboard__readout-text { color: var(--id-fg); font-weight: 600; }
.index-dashboard__clear {
  font: inherit; font-size: 12px; cursor: pointer;
  background: transparent; color: var(--id-accent);
  border: 1px solid var(--id-accent); border-radius: 5px; padding: 4px 10px;
}
.index-dashboard__clear[disabled] { color: var(--id-muted); border-color: var(--id-border); cursor: default; }
.index-dashboard__clear:focus-visible { outline: 2px solid var(--id-accent); outline-offset: 2px; }

.index-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(var(--id-columns, 2), minmax(0, 1fr));
  gap: var(--id-gap);
}
@media (max-width: 720px) {
  .index-dashboard__grid { grid-template-columns: 1fr; }
  .index-dashboard__panel { grid-column: span 1 !important; }
}

.index-dashboard__panel {
  min-width: 0;
  background: var(--id-panel-bg);
  border: 1px solid var(--id-border); border-radius: var(--id-radius);
  padding: 12px 14px 12px;
}
.index-dashboard__panel.is-error { border-color: var(--id-emphasis); }
.index-dashboard__panel-head { margin-bottom: 8px; }
.index-dashboard__panel-title { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.3; }
.index-dashboard__panel-caption { font-size: 12px; color: var(--id-muted); margin: 2px 0 0; }
.index-dashboard__panel-host { min-width: 0; }

/* the siblings carry their own card chrome; flatten it inside a panel */
.index-dashboard__panel-host > .index-chart { border: none; padding: 0; border-radius: 0; }
.index-dashboard__panel-host.index-map { border: none; border-radius: 0; }  /* index-map classes the mount itself */

/* index-map is dark-themed; on the dashboard's light panel its controls,
   breadcrumb, and data table would paint light text on white. Re-token those
   surfaces for the light context and keep the choropleth stage dark (the ramps
   are designed against it). A dark host can override these again. */
.index-dashboard__panel-host.index-map,
.index-dashboard__detached.index-map {
  --im-text:   var(--id-fg);
  --im-muted:  var(--id-muted);
  --im-panel2: #F8F4E9;
  --im-border: var(--id-border);
  --im-accent: var(--id-accent);
}
.index-dashboard__panel-host.index-map .index-map__stage,
.index-dashboard__panel-host.index-map .index-map__tooltip,
.index-dashboard__panel-host.index-map .index-map__legend,
.index-dashboard__detached.index-map .index-map__stage,
.index-dashboard__detached.index-map .index-map__tooltip,
.index-dashboard__detached.index-map .index-map__legend {
  --im-text: #e6edf3; --im-muted: #8b949e; --im-border: #30363d; --im-accent: #58a6ff;
}
.index-dashboard__panel-host.index-map .index-map__metric.is-active,
.index-dashboard__detached.index-map .index-map__metric.is-active { color: #FFFFFF; }

/* v0.3.0 -- detached panels: the shell renders straight into an existing page
   element (panel.mount) and adds only this tag class + is-ready / is-error.
   Deliberately unstyled -- the page owns the figure around it. */
.index-dashboard__detached { position: relative; }