/* HCBS Impacts Tracker — visual system
   Type: Public Sans (USWDS) for UI/data, Source Serif 4 for the masthead.
   Map ramp (violet, ordinal, validated): light b3a4f4→3a2c92, dark cfc5fc→4c3cae.
   Status hues are fixed by the stakeholders: Proposed=red, Enacted=green,
   Paused=yellow, Reversed=blue — never reused for anything else. */

:root {
  color-scheme: light;
  --paper: #f2f2ee;
  --surface: #fdfdfc;
  --surface-2: #f7f7f4;
  --ink: #1c1d26;
  --ink-2: #54555f;
  --muted: #6b6d77;   /* ≥4.5:1 on paper, surface, and ramp-0 (WCAG 1.4.3) */
  --hairline: #e4e4dd;
  --border: rgba(28, 29, 38, 0.14);
  --accent: #4c3ab5;
  --accent-ink: #3a2c92;
  --link: #3d2fae;
  --focus: #1c1d26;

  --ramp-0: var(--surface-2);       /* no tracked actions */
  --ramp-1: #b3a4f4;
  --ramp-2: #9481e8;
  --ramp-3: #755dd6;
  --ramp-4: #5741bd;
  --ramp-5: #3a2c92;
  --tile-dim-border: #d6d6cf;

  --st-proposed: #b42c2c;   --st-proposed-bg: #fbeaea;  --st-proposed-tx: #8f1f1f;
  --st-enacted:  #1b7a1b;   --st-enacted-bg:  #e7f4e7;  --st-enacted-tx:  #135f13;
  --st-paused:   #d99a06;   --st-paused-bg:   #fdf3d9;  --st-paused-tx:   #77530a;
  --st-reversed: #2265c4;   --st-reversed-bg: #e8f0fc;  --st-reversed-tx: #17509e;
  --st-other:    #6f7180;   --st-other-bg:    #ececea;  --st-other-tx:    #4b4d55;

  /* Type-of-change direction. Shares red/green with status by design (the sheet
     colours its dropdown chips the same way); the two are separated by mark
     form, not hue. Steps chosen with the dataviz validator — deutan ΔE 12.3 in
     light, 12.2 in dark, both clearing the >=8 target. Don't hand-tune. */
  --ty-cut:  #90251d;   --ty-cut-bg:  #fbeae8;  --ty-cut-tx:  #8a2018;
  --ty-add:  #218c50;   --ty-add-bg:  #e6f4ec;  --ty-add-tx:  #17693b;
  --ty-none: #6b6d77;   --ty-none-bg: #f7f7f4;  --ty-none-tx: #54555f;

  --shadow: 0 1px 2px rgba(28, 29, 38, 0.05), 0 8px 24px -12px rgba(28, 29, 38, 0.18);
  --radius: 10px;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;

  --scrim: rgba(16, 16, 24, 0.42);
  --tile-ink-hi: #221a52;      /* abbr on light ramp steps */
  --tile-num-hi: #382e6e;
  --tile-ink-mid: #ffffff;     /* abbr on ramp step 3 */
  --tile-num-mid: rgba(255, 255, 255, 0.85);
  --count-ink: #ffffff;        /* text inside the accent count pill */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #101116;
    --surface: #16171c;
    --surface-2: #1d1e25;
    --ink: #f0f0f4;
    --ink-2: #b4b6c0;
    --muted: #8b8d97;
    --hairline: #272831;
    --border: rgba(240, 240, 244, 0.14);
    --accent: #a190ee;
    --accent-ink: #b9abf5;
    --link: #b0a1f4;
    --focus: #f0f0f4;

    --ramp-0: #1d1e25;
    --ramp-1: #cfc5fc;
    --ramp-2: #ab9bf4;
    --ramp-3: #8768e2;
    --ramp-4: #6a4fd2;
    --ramp-5: #4c3cae;
    --tile-dim-border: #30313b;

    --st-proposed: #e06060;  --st-proposed-bg: #3a1d1d;  --st-proposed-tx: #f0a3a3;
    --st-enacted:  #4cae4c;  --st-enacted-bg:  #17301a;  --st-enacted-tx:  #92d992;
    --st-paused:   #e9b13c;  --st-paused-bg:   #33290f;  --st-paused-tx:   #ecc878;
    --st-reversed: #5e97e8;  --st-reversed-bg: #16263d;  --st-reversed-tx: #9dc0f2;
    --st-other:    #8b8d97;  --st-other-bg:    #26272e;  --st-other-tx:    #c0c2ca;

    --ty-cut:  #b04a38;  --ty-cut-bg:  #38201d;  --ty-cut-tx:  #f0a79d;
    --ty-add:  #42ae62;  --ty-add-bg:  #17301f;  --ty-add-tx:  #8fd6a6;
    --ty-none: #8b8d97;  --ty-none-bg: #1d1e25;  --ty-none-tx: #b4b6c0;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.6);

    --scrim: rgba(0, 0, 0, 0.55);
    --tile-ink-hi: #191343;
    --tile-num-hi: #2e2660;
    --tile-ink-mid: #100c2e;
    --tile-num-mid: rgba(16, 12, 46, 0.8);
    --count-ink: #101116;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101116;
  --surface: #16171c;
  --surface-2: #1d1e25;
  --ink: #f0f0f4;
  --ink-2: #b4b6c0;
  --muted: #8b8d97;
  --hairline: #272831;
  --border: rgba(240, 240, 244, 0.14);
  --accent: #a190ee;
  --accent-ink: #b9abf5;
  --link: #b0a1f4;
  --focus: #f0f0f4;

  --ramp-0: #1d1e25;
  --ramp-1: #cfc5fc;
  --ramp-2: #ab9bf4;
  --ramp-3: #8768e2;
  --ramp-4: #6a4fd2;
  --ramp-5: #4c3cae;
  --tile-dim-border: #30313b;

  --st-proposed: #e06060;  --st-proposed-bg: #3a1d1d;  --st-proposed-tx: #f0a3a3;
  --st-enacted:  #4cae4c;  --st-enacted-bg:  #17301a;  --st-enacted-tx:  #92d992;
  --st-paused:   #e9b13c;  --st-paused-bg:   #33290f;  --st-paused-tx:   #ecc878;
  --st-reversed: #5e97e8;  --st-reversed-bg: #16263d;  --st-reversed-tx: #9dc0f2;
  --st-other:    #8b8d97;  --st-other-bg:    #26272e;  --st-other-tx:    #c0c2ca;

  --ty-cut:  #b04a38;  --ty-cut-bg:  #38201d;  --ty-cut-tx:  #f0a79d;
  --ty-add:  #42ae62;  --ty-add-bg:  #17301f;  --ty-add-tx:  #8fd6a6;
  --ty-none: #8b8d97;  --ty-none-bg: #1d1e25;  --ty-none-tx: #b4b6c0;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.6);

  --scrim: rgba(0, 0, 0, 0.55);
  --tile-ink-hi: #191343;
  --tile-num-hi: #2e2660;
  --tile-ink-mid: #100c2e;
  --tile-num-mid: rgba(16, 12, 46, 0.8);
  --count-ink: #101116;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 28px); }

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

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-weight: 600; text-decoration: none; transition: top 120ms ease;
}
.skip-link:focus-visible { top: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: var(--link); text-underline-offset: 2px; }

/* ---------- Header ---------- */

.site-head {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  align-items: end;
  padding-top: 26px;
  padding-bottom: 20px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { flex: none; }
.bm-1 { fill: var(--ramp-1); } .bm-2 { fill: var(--ramp-2); }
.bm-3 { fill: var(--ramp-3); } .bm-4 { fill: var(--ramp-5); }
.eyebrow {
  margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.site-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.tagline {
  grid-column: 1;
  margin: 6px 0 0 48px;
  color: var(--ink-2);
  max-width: 60ch;
}
.head-side {
  grid-column: 2; grid-row: 1 / 3;
  align-self: end;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.theme-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 12px;
  cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--muted); }
.data-status {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
}
.data-status .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; background: var(--muted); vertical-align: 1px;
}
.data-status.is-live .dot { background: var(--st-enacted); }
.data-status.is-stale .dot { background: var(--st-paused); }

/* ---------- Alerts ---------- */

.alert[hidden] { display: none; }
.alert {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  background: var(--st-paused-bg);
  color: var(--st-paused-tx);
  border: 1px solid color-mix(in srgb, var(--st-paused) 45%, transparent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13.5px;
}

/* ---------- Filters (sticky toolbar; fixed-height chip strip = no layout shift) ---------- */

.filters {
  position: sticky; top: 10px; z-index: 25;
  margin: 16px 0 14px;
  padding: 12px 14px 0;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
}

.filter-strip {
  display: flex; align-items: center; gap: 14px;
  height: 44px;                 /* fixed: chips never change the page height */
  margin-top: 6px;
  border-top: 1px solid var(--hairline);
}
.strip-chips {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  padding-right: 26px;
}
.strip-empty { font-size: 12.5px; color: var(--muted); }

/* Chips are grouped by menu with explicit connectors, so the OR-inside /
   AND-across logic is readable rather than implied by a flat pile of chips. */
.chip-group { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.cg-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); white-space: nowrap;
}
.cg-or { font-size: 11px; font-weight: 700; color: var(--muted); }
.cg-and {
  flex: none;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-radius: 99px; padding: 3px 8px;
}
.results-line {
  flex: none; margin: 0;
  font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap;
}
.results-line strong { color: var(--ink); }
.strip-clear { flex: none; min-height: 32px; padding: 4px 12px; font-size: 12.5px; }
.strip-clear:disabled { opacity: 0.45; cursor: default; }
.strip-clear:disabled:hover { color: var(--ink-2); background: none; }
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.date-pair { display: inline-flex; gap: 6px; }

select, .ms-btn, .btn-ghost {
  font: inherit; font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  min-height: 38px;
}
select:hover, .ms-btn:hover, .btn-ghost:hover { border-color: var(--muted); }

.btn-ghost {
  cursor: pointer; font-weight: 600; color: var(--ink-2);
  background: transparent;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface); }

.ms { position: relative; }
.ms-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; position: relative; }
.ms-btn .caret { transition: transform 140ms ease; color: var(--muted); }
.ms-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
/* floating badge: selection never changes the button's width */
.ms-btn .count {
  position: absolute; top: -8px; right: -8px;
  background: var(--accent); color: var(--count-ink);
  font-size: 11px; font-weight: 700; line-height: 1.5;
  border-radius: 99px; padding: 0 6.5px;
  box-shadow: 0 0 0 2px var(--surface);
}
.ms-btn.has-sel { border-color: var(--accent); }

.ms-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 268px; max-width: min(92vw, 360px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
}
.ms-pop.align-right { left: auto; right: 0; }
.ms-search {
  width: 100%; margin-bottom: 6px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 7px 10px;
}
.ms-hint {
  margin: 0 0 7px; padding: 8px 9px;
  background: var(--surface-2); border-radius: 7px;
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.ms-hint strong { color: var(--ink); }
.ms-opts { max-height: 296px; overflow-y: auto; padding: 2px; }
.ms-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer;
  font-size: 13.5px;
}
.ms-opt:hover { background: var(--surface-2); }
.ms-opt input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin: 0; }
.ms-opt .opt-label { flex: 1; min-width: 0; }
.ms-opt .opt-count {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* "+N" — this option would ADD N actions, because choices here are OR-ed. */
.ms-opt .opt-count.add { color: var(--accent); font-weight: 700; }
.ms-opt .st-dot { flex: none; }
.ms-foot {
  display: flex; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--hairline);
  margin-top: 6px; padding-top: 8px;
}
.ms-foot .btn-ghost { min-height: 32px; padding: 4px 10px; font-size: 12.5px; }
.ms-empty { padding: 10px; color: var(--muted); font-size: 13px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; white-space: nowrap;
  font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 99px;
  padding: 4px 6px 4px 11px;
  cursor: pointer;
}
.chip .x {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 13px; line-height: 1;
}
.chip:hover .x { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chip-static { cursor: default; padding-right: 11px; }

/* ---------- Layout ---------- */

.viz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 18px;
  align-items: start;
  margin: 14px 0 40px;
}
@media (max-width: 900px) {
  .viz { grid-template-columns: minmax(0, 1fr); }
}

.map-card, .panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.map-card { padding: 18px 18px 14px; }
.map-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 18px;
  margin-bottom: 14px;
}
.map-head h2, .panel h2 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
}

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-2); }
.legend .key { display: inline-flex; align-items: center; gap: 5px; }
.legend .sw {
  width: 14px; height: 14px; border-radius: 4px; display: inline-block;
  border: 1px solid rgba(28,29,38,0.08);
}

/* ---------- Tile map ---------- */

/* padding keeps the selection ring / focus outline visible on edge states */
.map-scroll { overflow-x: auto; padding: 8px; margin: -8px; }
.tile-map {
  display: grid;
  grid-template-columns: repeat(11, minmax(30px, 1fr));
  gap: 5px;
  min-width: 480px;
}
.tile {
  position: relative;
  aspect-ratio: 1;
  border: 0; padding: 0;
  border-radius: 22%;
  background: var(--ramp-0);
  box-shadow: inset 0 0 0 1px var(--tile-dim-border);
  font-family: var(--font-ui);
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  transition: transform 110ms ease, box-shadow 110ms ease;
}
.tile .abbr { font-size: clamp(10px, 1.35vw, 13.5px); font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.tile .num {
  font-size: clamp(9px, 1.1vw, 11.5px); font-weight: 600; line-height: 1;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.tile.spacer { visibility: hidden; pointer-events: none; }

.tile[data-bin="1"], .tile[data-bin="2"], .tile[data-bin="3"],
.tile[data-bin="4"], .tile[data-bin="5"] { box-shadow: none; }
.tile[data-bin="1"] { background: var(--ramp-1); }
.tile[data-bin="2"] { background: var(--ramp-2); }
.tile[data-bin="3"] { background: var(--ramp-3); }
.tile[data-bin="4"] { background: var(--ramp-4); }
.tile[data-bin="5"] { background: var(--ramp-5); }
.tile[data-bin="1"] .abbr, .tile[data-bin="2"] .abbr { color: var(--tile-ink-hi); }
.tile[data-bin="1"] .num,  .tile[data-bin="2"] .num  { color: var(--tile-num-hi); }
.tile[data-bin="3"] .abbr { color: var(--tile-ink-mid); }
.tile[data-bin="3"] .num  { color: var(--tile-num-mid); }
.tile[data-bin="4"] .abbr, .tile[data-bin="5"] .abbr { color: #ffffff; }
.tile[data-bin="4"] .num,  .tile[data-bin="5"] .num  { color: rgba(255,255,255,0.85); }

/* tracked actions exist, but none match the filters */
.tile.has-data[data-bin="0"] { box-shadow: inset 0 0 0 1px var(--tile-dim-border); }
.tile.has-data[data-bin="0"] .abbr { color: var(--ink-2); }
.tile.has-data[data-bin="0"]::after {
  content: ""; position: absolute; inset: auto auto 14% auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted); opacity: 0.55;
}

.tile:hover { transform: translateY(-2px); }
.tile[aria-pressed="true"] {
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4.5px var(--ink);
}
.tile:focus-visible { outline-offset: 3px; }

.map-hint { margin: 14px 2px 2px; font-size: 12.5px; color: var(--muted); }

/* ---------- Panel ---------- */

.panel { padding: 18px; min-height: 320px; }
.panel:focus { outline: none; }
.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 4px;
}
.panel-head .state-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; line-height: 1.15;
}
.panel-head .state-name .ab { color: var(--accent); }
.panel-sub { margin: 2px 0 12px; font-size: 13px; color: var(--ink-2); }

/* Plain-English restatement of the active query — the antidote to
   "why did more states light up when I added a filter?" */
.query-sentence {
  margin: 8px 0 0; padding: 10px 12px;
  background: var(--surface-2); border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.query-sentence b { color: var(--ink); font-weight: 700; }
.query-sentence em { font-style: italic; }
.query-sentence .op {
  color: var(--accent); font-weight: 800;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}

.panel .chip-row { margin: 0 0 12px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 18px; }
.stat {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
}
.stat .v { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.stat .l { font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }

.panel h3 {
  margin: 18px 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
}
.panel h3 .h3-note {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
.panel h3 .h3-note strong { font-weight: 700; color: var(--ink-2); }

/* bar lists (overview mini-charts) */
.barlist { display: flex; flex-direction: column; gap: 3px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  border: 0; background: none; padding: 5px 6px;
  border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.bar-row:hover { background: var(--surface-2); }
.bar-row[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.bar-row .bl { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bar-row .bl .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bv { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar-row .track {
  grid-column: 1 / -1;
  height: 5px; border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.bar-row .fill {
  display: block;
  height: 100%; border-radius: 4px;
  background: var(--accent);
  min-width: 3px;
}

.st-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--st-other);
}
.st-proposed .st-dot, .st-dot.proposed { background: var(--st-proposed); }
.st-enacted  .st-dot, .st-dot.enacted  { background: var(--st-enacted); }
.st-paused   .st-dot, .st-dot.paused   { background: var(--st-paused); }
.st-reversed .st-dot, .st-dot.reversed { background: var(--st-reversed); }
/* The "By status" bars are deliberately the plain accent violet (the .fill
   default above) — the client asked for the sheet's chip hues to stay on the
   badges and the filter menu, and off this magnitude chart. Hence no
   .bar-row .fill.proposed/.enacted/... rules here; see barList() in app.js. */

/* .st-dot is the generic 9px swatch — type of change reuses it in the filter
   menu and bar list, so these live alongside the status variants above. */
.st-dot.ty-cut  { background: var(--ty-cut); }
.st-dot.ty-add  { background: var(--ty-add); }
.st-dot.ty-none { background: var(--ty-none); }
.bar-row .fill.ty-cut  { background: var(--ty-cut); }
.bar-row .fill.ty-add  { background: var(--ty-add); }
.bar-row .fill.ty-none { background: var(--ty-none); }

/* Direction-of-change summary. Read-only: the numbers live in the legend text,
   so the bar itself is aria-hidden. "Both" is striped from the two pole colours
   rather than given a third hue — it literally shows what it means, and the
   texture doubles as a non-colour cue. */
.dirbar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--surface-2); margin: 0 0 8px;
}
.dseg { box-sizing: border-box; border-right: 2px solid var(--surface); min-width: 3px; }
.dseg:last-child { border-right: 0; }
.dseg.ty-cut  { background: var(--ty-cut); }
.dseg.ty-add  { background: var(--ty-add); }
.dseg.ty-none { background: var(--ty-none); }
.dseg.ty-mixed, .st-dot.ty-mixed {
  background: repeating-linear-gradient(135deg,
    var(--ty-cut) 0 4px, var(--ty-add) 4px 8px);
}
.dirlegend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: 12px; color: var(--ink-2);
}
.dirlegend li { display: flex; align-items: center; gap: 5px; }
.dirlegend b { color: var(--ink); }

.panel-tip {
  margin: 16px 0 0; padding: 12px;
  background: var(--surface-2); border-radius: 10px;
  font-size: 13px; color: var(--ink-2);
}

.open-state-btn {
  display: block; width: 100%;
  margin: 0 0 6px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0; border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  text-align: left;
  transition: filter 120ms ease;
}
.open-state-btn:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .open-state-btn { color: #101116; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .open-state-btn { color: #101116; }
}

/* ---------- drawer (state details) ---------- */

/* A native <dialog>, so the scrim is ::backdrop and the top layer handles
   stacking — no z-index needed against the sticky toolbar.
   no backdrop-filter here: blurring under the drawer layer triggers a
   compositing artifact in Chromium/Edge that repaints the drawer's cards */
.drawer::backdrop {
  background: var(--scrim);
  opacity: 0;
  transition: opacity 200ms ease;
}
.drawer.open::backdrop { opacity: 1; }

.drawer {
  /* reset the UA dialog defaults: centred, auto-sized, bordered, margin: auto */
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;
  max-width: none; max-height: none;
  width: min(480px, 100vw); height: 100%;
  margin: 0; padding: 0; border: 0;
  color: var(--ink);
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  box-shadow: -18px 0 48px -24px rgba(0, 0, 0, 0.35);
  flex-direction: column;
  transform: translateX(24px); opacity: 0;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}
/* a closed <dialog> is display:none, so the flex column only applies when open */
.drawer[open] { display: flex; }
.drawer.open { transform: translateX(0); opacity: 1; }

.drawer-head {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.drawer-head .state-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; line-height: 1.15;
}
.drawer-head .state-name .ab { color: var(--accent); }
.drawer-head .panel-sub { margin: 3px 0 0; }
.drawer-close { flex: none; }

.drawer-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 20px 24px;
}
.drawer-body .chip-row { margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer::backdrop { transition: none; }
}

/* ---------- map tooltip ---------- */

.map-tip {
  position: fixed; left: 0; top: 0; z-index: 55;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px; line-height: 1.35;
  box-shadow: var(--shadow);
  max-width: 240px;
}
.map-tip strong { font-size: 12.5px; }
.map-tip span { opacity: 0.75; }
.map-tip[hidden] { display: none; }

/* ---------- Action cards ---------- */

.action-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.action {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 13px 14px;
  background: var(--surface);
}
.action-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-bottom: 8px;
}
.action-top time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  border-radius: 6px; padding: 3px 8px;
  background: var(--st-other-bg); color: var(--st-other-tx);
}
.badge .st-dot { width: 7px; height: 7px; }
.badge.proposed { background: var(--st-proposed-bg); color: var(--st-proposed-tx); }
.badge.enacted  { background: var(--st-enacted-bg);  color: var(--st-enacted-tx); }
.badge.paused   { background: var(--st-paused-bg);   color: var(--st-paused-tx); }
.badge.reversed { background: var(--st-reversed-bg); color: var(--st-reversed-tx); }

.desc {
  margin: 0 0 10px;
  font-size: 13.5px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.desc.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.more-btn {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--link); cursor: pointer;
  margin: -4px 0 10px;
}

.meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 10px; }
.tag {
  font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-2);
  border-radius: 6px; padding: 3px 8px;
}
.tag.pop { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent-ink); }

/* Type of change carries direction. The inset left edge (not a border, so the
   box size is unchanged) plus the ↓/↑ glyph is what distinguishes these from
   status badges, which share the same red/green but wear a solid pill + dot. */
.tag.ty-cut  { background: var(--ty-cut-bg);  color: var(--ty-cut-tx);  box-shadow: inset 3px 0 0 var(--ty-cut); }
.tag.ty-add  { background: var(--ty-add-bg);  color: var(--ty-add-tx);  box-shadow: inset 3px 0 0 var(--ty-add); }
.tag.ty-none { background: var(--ty-none-bg); color: var(--ty-none-tx); box-shadow: inset 3px 0 0 var(--ty-none); }
.tag.ty-cut, .tag.ty-add, .tag.ty-none { padding-left: 10px; }
.ty-mark { margin-right: 4px; font-weight: 700; }
/* Held open even when empty, so a type with no direction glyph does not pull its
   label left out of the column. See typeMarkCell() in app.js. */
.ty-mark.ty-cell { display: inline-block; width: 12px; flex: none; text-align: center; }

/* Legal / Medicaid Authority. Reference metadata, not a filter dimension —
   deliberately styled as labelled text, not as .tag chips. */
.authority {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
}
.authority dt { color: var(--muted); }
.authority dd { margin: 0; color: var(--ink-2); }

.action-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.action-links a { font-weight: 600; }
.action-links .nolink { color: var(--muted); }

.hidden-actions { margin-top: 12px; }
.hidden-actions > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding: 6px 2px; border-radius: 6px; list-style-position: inside;
}
.hidden-actions[open] > summary { margin-bottom: 8px; }
.hidden-actions .action { opacity: 0.88; }

.empty-state { text-align: center; padding: 34px 12px; color: var(--ink-2); }
.empty-state .glyph { font-size: 30px; margin-bottom: 6px; }
.empty-state p { margin: 4px 0; }
.empty-state .btn-ghost { margin-top: 10px; }

/* skeleton (first load only) */
.skeleton { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.skeleton .sk { border-radius: 8px; background: var(--surface-2); height: 16px; }
.sk.w40 { width: 40%; } .sk.w70 { width: 70%; } .sk.tall { height: 84px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton .sk {
    background: linear-gradient(100deg, var(--surface-2) 40%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%, var(--surface-2) 60%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
  }
  @keyframes shimmer { to { background-position: -120% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* refetch: hold previous render, dimmed */
.is-refetching { opacity: 0.55; pointer-events: none; }

/* ---------- Footer ---------- */

.site-foot { border-top: 1px solid var(--hairline); background: var(--surface); }
.foot-inner { padding: 22px 0 30px; font-size: 12.5px; color: var(--ink-2); }
.foot-inner p { margin: 4px 0; max-width: 90ch; }
.foot-note { color: var(--muted); }

@media (max-width: 720px) {
  .head-inner { grid-template-columns: 1fr; align-items: start; }
  .head-side { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; margin-top: 6px; }
  .data-status { text-align: left; }
  .tagline { margin-left: 0; }
  .stat-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .panel { min-height: 0; }
}