/* prairielight.css — shared shell styles (P11/P7).
 *
 * Linked from observablehq.config.js `head` so the responsive widget frame,
 * authored widget states, legend, and provenance panel are styled once for
 * every analytical page instead of being copied into each page's <style>.
 */

/* ── WCAG 2.2 AA: the three rules the scan measured (F77) ───────────────────
 *
 * `ui-verification/axe-scan.mjs` runs axe-core over every route at two widths and
 * fails on `serious`/`critical`. Three of its findings are settled here, and each
 * value was measured against the built site rather than chosen by eye.
 *
 * Contrast. The framework derives its greys with `color-mix` from #1b1e23:
 * `--theme-foreground-muted` was a 60% mix (#76787b) — 4.42:1 on white and
 * 4.09:1 on #f6f6f6 — and `--theme-foreground-faint` a 50% mix (#8d8f91), 3.24:1
 * on white. AA wants 4.5:1. A 66% mix is #6a6c6f: 5.27 / 4.87 / 4.91 / 4.68 on
 * #ffffff, #f6f6f6, #f5f7fa and #eef2f7, which are every background these two
 * tokens are used on. About 9% darker, and it keeps the visual hierarchy.
 *
 * Prose links. A link inside body copy must be distinguishable without colour
 * (axe `link-in-text-block`). A plain `main a { text-decoration: underline }`
 * loses the cascade — measured: the computed value stayed `none` because the
 * framework's own link rules win — so this rule states its precedence. The
 * selector is limited to content and the footer, so navigation and the sidebar
 * keep their own styling.
 *
 * Target size. The metric-browser facet checkboxes and the table's selection
 * checkboxes are 24x24 CSS px minimum at every width (WCAG 2.2 SC 2.5.8). */
:root {
  --theme-foreground-muted: color-mix(in srgb, #1b1e23 66%, #ffffff);
  --theme-foreground-faint: color-mix(in srgb, #1b1e23 66%, #ffffff);
}
main a[href],
#observablehq-footer a[href] {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.inputs-3a86ea-checkbox input[type="checkbox"],
th input[type="checkbox"],
td input[type="checkbox"] {
  min-width: 24px;
  min-height: 24px;
}

/* Responsive widget frame: fixed-width plots scale instead of overflowing. */
.widget-frame svg {
  max-width: 100%;
  height: auto;
}
.widget-frame {
  overflow-x: auto;
}

/* Authored loading / empty / partial / error states (P11). */
.widget-state {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-left: 4px solid var(--theme-foreground-muted);
  background: var(--theme-background-alt, #f5f7fa);
  font-size: 0.9rem;
}
.widget-state-error {
  border-left-color: #b91c1c;
}
.widget-state-partial {
  border-left-color: #b45309;
}
.widget-state-retry {
  margin-top: 0.5rem;
}
.widget-state-correlation,
.widget-state-code {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--theme-foreground-muted);
}
.widget-state-spinner {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.5rem;
  border: 2px solid var(--theme-foreground-muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: widget-spin 0.8s linear infinite;
}
@keyframes widget-spin {
  to { transform: rotate(360deg); }
}

/* Accessible legend list (P11). */
.legend {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.85rem;
}
.legend-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: baseline;
}

/* Provenance panel (P7 / UX-04). */
.provenance-panel {
  margin: 1rem 0;
  font-size: 0.9rem;
}
.provenance-summary strong {
  margin-left: 0.25rem;
}
.provenance-warning {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-left: 4px solid #b45309;
  background: #fffbeb;
  color: #7c2d12;
}
.provenance-sources {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.provenance-sources th,
.provenance-sources td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--theme-foreground-faintest, #e5e7eb);
  vertical-align: top;
}
.provenance-status-not_built,
.provenance-status-unknown {
  color: var(--theme-foreground-muted);
}
.provenance-status-synthetic {
  color: #b45309;
  font-weight: 600;
}
.provenance-status-production {
  color: #15803d;
}
.provenance-coverage,
.provenance-ledger-note {
  color: var(--theme-foreground-muted);
  margin-top: 0.5rem;
}
.provenance-missingness {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

/* ── Map accessibility (P12) ─────────────────────────────────────────────── */

/* Responsive layout: side-by-side widgets on wide screens, one column on narrow.
 * A single-column mobile layout is a hard requirement (P12 task 4). */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}
.widget-grid > * {
  min-width: 0;
}

/* The map viewport is focusable and must show where focus is. */
[data-map-viewport] {
  touch-action: manipulation;
}
[data-map-viewport]:focus-visible,
.map-control:focus-visible,
.widget-state-retry:focus-visible {
  outline: 3px solid var(--theme-foreground-focus, #2563eb);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Visible controls with names: minimum 44x44 CSS px touch targets. */
.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.25rem 0 0.5rem;
}
.map-control {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--theme-foreground-faintest, #d1d5db);
  border-radius: 4px;
  background: var(--theme-background-alt, #f8fafc);
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.map-control:hover {
  background: var(--theme-background-alt, #eef2f7);
}
.map-instructions {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--theme-foreground-muted);
}
.map-tooltip {
  pointer-events: none;
}

/* Every map ships a table of the same values (P12 task 2). */
.map-data-alternative {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.map-data-alternative > summary {
  cursor: pointer;
  color: var(--theme-foreground-muted);
}
.map-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.map-data-table th,
.map-data-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--theme-foreground-faintest, #e5e7eb);
  vertical-align: top;
}
.map-data-table td:last-child,
.map-data-table th:last-child {
  text-align: right;
}
.map-data-caption,
.map-data-note {
  margin: 0.25rem 0 0;
  color: var(--theme-foreground-muted);
}

@media (max-width: 640px) {
  .widget-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Customization workspace (P17) ───────────────────────────────────────── */

/* The 12-column canvas is set inline from the document; the mobile layout is a
 * hard requirement, so it overrides the inline grid on narrow viewports. */
.workspace-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.workspace-grid > * {
  min-width: 0;
}
.workspace-widget {
  padding: 0.75rem;
  border: 1px solid var(--theme-foreground-faintest, #d1d5db);
  border-radius: 6px;
  background: var(--theme-background, #fff);
}
.workspace-widget:focus-visible,
.workspace-control:focus-visible,
.workspace-data-view > summary:focus-visible,
.workspace-actions-menu > summary:focus-visible {
  outline: 3px solid var(--theme-foreground-focus, #2563eb);
  outline-offset: 2px;
}
.workspace-widget-title {
  margin: 0;
  font-size: 1rem;
}
.workspace-widget-description {
  margin: 0.25rem 0 0;
  color: var(--theme-foreground-muted);
  font-size: 0.9rem;
}
.workspace-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.workspace-control {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--theme-foreground-faintest, #d1d5db);
  border-radius: 4px;
  background: var(--theme-background-alt, #f8fafc);
  color: inherit;
  font: inherit;
}
.workspace-control-danger {
  border-color: #b91c1c;
  color: #b91c1c;
}
.workspace-actions-menu {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.workspace-relative-target {
  min-height: 2.75rem;
}
.workspace-data-view {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.workspace-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.workspace-data-table th,
.workspace-data-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--theme-foreground-faintest, #e5e7eb);
}
.workspace-provenance {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--theme-foreground-muted);
}
.workspace-provenance-list dt {
  font-weight: 600;
}
.workspace-announcer {
  margin: 0.75rem 0 0;
  min-height: 1.25rem;
  font-size: 0.9rem;
}
.workspace-reminder {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-left: 4px solid #b45309;
  background: #fffbeb;
  color: #7c2d12;
}
.workspace-warning {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-left: 4px solid #b91c1c;
  background: #fef2f2;
  color: #7f1d1d;
}

@media (max-width: 640px) {
  .workspace-grid {
    grid-template-columns: 1fr !important;
  }
  .workspace-grid > .workspace-widget {
    grid-column: auto / span 1 !important;
    grid-row: auto !important;
  }
  .workspace-control,
  .workspace-relative-target {
    min-height: 3rem;
  }
}


/* ── Shared shell accessibility (P34) ───────────────────────────────────── */
/* The skip link is the first focusable element on every page; it stays out of
   the way until it is focused, then appears where a keyboard user is looking. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--theme-background, #ffffff);
  color: var(--theme-foreground, #111111);
  border: 2px solid currentColor;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid currentColor;
  outline-offset: 2px;
}


/* ── Wide data tables (P34) ─────────────────────────────────────────────── */
/* A wide table must scroll inside its own box rather than widening the page:
   the accessibility harness measured 601px of horizontal overflow at 375px,
   all of it from the provenance table. The wrapper is focusable and named so a
   keyboard user can scroll it (WCAG 2.1.1), and the table keeps its native
   display so its row/column semantics survive. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.table-scroll:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}


/* ── Operator view (P35) ────────────────────────────────────────────────── */
/* The published dashboard is read-only: no toolbar, no per-widget controls. */
.operator-header { margin-bottom: 1rem; }
.operator-description { color: var(--theme-foreground-muted, #555); margin: 0.25rem 0 0.5rem; }
.operator-publication {
  font-size: 0.85rem;
  color: var(--theme-foreground-muted, #555);
  border-left: 3px solid var(--theme-foreground-faintest, #e5e7eb);
  padding-left: 0.6rem;
}
.operator-note { font-size: 0.85rem; color: var(--theme-foreground-muted, #555); margin-top: 1rem; }
.operator-empty {
  border: 1px dashed var(--theme-foreground-faintest, #e5e7eb);
  border-radius: 4px;
  padding: 1rem;
}

/* ── Workspace notices and toolbar (P34) ────────────────────────────────── */
.workspace-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-bottom: 1rem;
}
.workspace-field {
  display: inline-flex; flex-direction: column; gap: 0.15rem; font-size: 0.8rem;
  /* F45: a <select> is intrinsically as wide as its longest <option>. With the
     real catalog the metric list carries long labels ("AHRF per capita income —
     county_snapshot"), so the toolbar overflowed a 375px viewport by 112px and a
     400%-zoom viewport by 127px. min-width:0 lets the flex item shrink and
     max-width:100% clamps it to the toolbar. */
  min-width: 0;
  max-width: 100%;
}
.workspace-field select {
  min-width: 0;
  max-width: 100%;
}
.workspace-notice {
  border-left: 4px solid var(--theme-foreground-faintest, #e5e7eb);
  padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
}
.workspace-notice-alert, .workspace-notice-import, .workspace-notice-storage { border-left-color: #b45309; }
.workspace-notice-detail { font-size: 0.85rem; color: var(--theme-foreground-muted, #555); }

/* ── Widget configuration panel (F49) ──────────────────────────────────────── */
.workspace-configure {
  display: flex; flex-direction: column; gap: 0.35rem;
  border: 1px solid var(--theme-foreground-faintest, #e5e7eb);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0;
  background: var(--theme-background-alt, #f8fafc);
  font-size: 0.85rem;
}
.workspace-configure label { font-weight: 600; }
.workspace-configure input {
  width: 100%;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--theme-foreground-faintest, #cbd5e1);
  border-radius: 4px;
  font: inherit;
}
.workspace-configure-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.workspace-widget-selected { outline: 2px solid var(--theme-foreground-focus, #2563eb); outline-offset: 2px; }

/* A conditional notice or note whose condition is false renders an empty element:
   the markup is static and only its text is interpolated, so hide the husk
   rather than letting it take vertical space. */
.notice:empty,
.card p:empty { display: none; }