/* =========================================================================
   Our Minds Matter — Opportunity Map
   Design system. Calm, trustworthy, data-first. The signature element is the
   six-category opportunity meter grid.
   ========================================================================= */

:root {
  /* ink & paper */
  --ink:        #152238;
  --ink-soft:   #4a5768;
  --ink-faint:  #7b8798;
  --paper:      #f5f8fa;
  --surface:    #ffffff;
  --line:       #e4eaf0;
  --line-soft:  #eef2f6;

  /* brand — a calm teal-green (hope, not alarm) */
  --brand:      #1f7a63;
  --brand-600:  #14664f;
  --brand-050:  #e8f3ef;

  /* opportunity score bands (higher = better) */
  --band-high:    #157a5b;
  --band-mod:     #57a98a;
  --band-lowmod:  #e0a458;
  --band-low:     #cf6a4c;
  --band-none:    #c3cdd8;

  /* issues / alerts */
  --alert:      #c6413a;
  --alert-050:  #fbecea;
  --warn:       #d98a26;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(21,34,56,.05), 0 8px 28px -12px rgba(21,34,56,.18);
  --shadow-sm:  0 1px 2px rgba(21,34,56,.06);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 560; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 500;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--font-display); font-size: 20px; color: var(--ink);
  letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); transform: translateY(-2px); }
.brand small { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing:.09em; text-transform: uppercase; color: var(--ink-faint); }
nav.top { margin-left: auto; display: flex; gap: 4px; }
nav.top a {
  padding: 7px 13px; border-radius: 999px; color: var(--ink-soft); font-size: 14px; font-weight: 500;
}
nav.top a:hover { background: var(--line-soft); text-decoration: none; }
nav.top a.active { background: var(--ink); color: #fff; }

/* ---------- hero / breadcrumb ---------- */
.hero { padding: 34px 0 10px; }
.hero h1 { font-size: clamp(30px, 4.4vw, 46px); }
.hero p.lede { max-width: 62ch; color: var(--ink-soft); font-size: 17px; margin: 12px 0 0;
  overflow-wrap: break-word; }
.crumb { font-size: 13px; color: var(--ink-faint); margin: 26px 0 4px; display: flex; gap: 7px; align-items: center; }
.crumb a { color: var(--ink-soft); }

/* ---------- layout grids ---------- */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
.section { margin: 30px 0; }
.section > h2 { font-size: 22px; display:flex; align-items:baseline; gap:10px; }
.section > h2 .count { font-family: var(--font-body); font-size: 13px; font-weight:600; color: var(--ink-faint); }
.section-note { color: var(--ink-soft); font-size: 14.5px; margin: 4px 0 16px; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card.pad { padding: 20px 22px; }

/* ---------- map ---------- */
#map { height: 460px; border-radius: var(--radius); border: 1px solid var(--line); background: #eef3f7; }
#map.mini { height: 300px; }
.leaflet-container { font-family: var(--font-body); }
.legend {
  display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; font-size: 13px; color: var(--ink-soft);
}
.legend .sw { display:inline-flex; align-items:center; gap:7px; }
.legend .chip { width: 15px; height: 15px; border-radius: 4px; display:inline-block; }

/* ---------- opportunity meter tiles (the signature) ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px){ .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 15px 15px; cursor: default;
  transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: #cdd8e2; box-shadow: var(--shadow-sm); }
.tile .cat { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); letter-spacing:.01em; min-height: 2.4em; }
.tile .val { font-family: var(--font-display); font-size: 30px; line-height: 1; margin: 6px 0 2px; }
.tile .val small { font-family: var(--font-body); font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.tile .basis { font-size: 10.5px; font-weight: 600; letter-spacing:.06em; text-transform: uppercase; }
.meter { display: flex; gap: 4px; margin-top: 11px; }
.meter i { flex: 1; height: 7px; border-radius: 3px; background: var(--line); }
.meter i.on { background: currentColor; }
.tile.b-high    { color: var(--band-high); }
.tile.b-mod     { color: var(--band-mod); }
.tile.b-lowmod  { color: var(--band-lowmod); }
.tile.b-low     { color: var(--band-low); }
.tile.b-none    { color: var(--band-none); }
.tile .cat, .tile .basis { color: var(--ink-soft); } /* keep text neutral; meter carries color */
.tile.b-none .val { color: var(--band-none); }
.tile .why { margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); display: none; }
.tile.open .why { display: block; }
.tile .whytoggle { margin-top: 9px; background: none; border: 0; padding: 0; color: var(--brand-600); font-size: 12.5px; font-weight: 600; }
.tile.pending { border-style: dashed; }
.tile.pending .val { color: var(--band-none); font-size: 16px; padding: 7px 0; }

/* ---------- score badge (composite) ---------- */
.scorebadge { display: inline-flex; align-items:center; gap: 12px; }
.scorebadge .num {
  font-family: var(--font-display); font-size: 40px; line-height: 1;
  width: 74px; height: 74px; border-radius: 16px; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.bg-high{background:var(--band-high);} .bg-mod{background:var(--band-mod);}
.bg-lowmod{background:var(--band-lowmod);} .bg-low{background:var(--band-low);}
.bg-none{background:var(--band-none);}
.band-label { font-weight: 600; }
.tier-pill { display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--brand-050); color:var(--brand-600); }

/* ---------- ranked state list ---------- */
.ranklist { display:flex; flex-direction: column; gap: 8px; }
.rankrow {
  display:grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items:center;
  padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.rankrow:hover { border-color:#cdd8e2; }
.rankrow .rk { color: var(--ink-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.rankrow .nm { font-weight: 600; }
.rankrow .nm small { display:block; font-weight: 500; color: var(--ink-faint); font-size: 12px; }
.rankrow .sc { font-family: var(--font-display); font-size: 20px; }
.pill-band { font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; color:#fff; }

/* ---------- data tables / lists ---------- */
.rows { display:flex; flex-direction: column; gap: 10px; }
.row-item { padding: 14px 16px; border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.row-item h4 { font-family: var(--font-body); font-weight: 650; font-size: 15px; }
.row-item .meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; display:flex; flex-wrap:wrap; gap: 6px 14px; }
.tag { display:inline-block; font-size: 11px; font-weight:600; padding: 2px 8px; border-radius: 6px; background: var(--line-soft); color: var(--ink-soft); }
.tag.status-awarded{background:#e7f2ec;color:#1c6b4f;} .tag.status-enacted{background:#e8f0fb;color:#28558f;}
.tag.status-active{background:#eaf4ee;color:#2b7a56;} .tag.status-at-risk{background:var(--alert-050);color:var(--alert);}
.tag.status-awaiting-award{background:#fdf4e6;color:#a5711b;} .tag.status-proposed{background:#f0eefb;color:#5a44a8;}
.tag.lvl{background:#eef2f6;color:#4a5768;}

/* ---------- issues panel ---------- */
.issues .row-item { border-left: 3px solid var(--line); }
.issues .row-item.sev-high { border-left-color: var(--alert); }
.issues .row-item.sev-medium { border-left-color: var(--warn); }
.issues .row-item.sev-low { border-left-color: var(--brand); }
.issue-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.issue-badge .d { width:8px;height:8px;border-radius:50%; }
.st-open .d{background:var(--alert);} .st-monitoring .d{background:var(--warn);} .st-resolved .d{background:var(--brand);}
.issuecount { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--alert); }

/* ---------- filters ---------- */
.filters { display:flex; flex-wrap: wrap; gap: 10px; align-items:center; margin-bottom: 18px; }
.filters select, .filters input {
  font-family: inherit; font-size: 14px; padding: 8px 11px; border:1px solid var(--line);
  border-radius: 9px; background: var(--surface); color: var(--ink); min-width: 130px;
}
.filters .clear { background:none;border:0;color:var(--brand-600);font-weight:600;font-size:13px; }

/* ---------- misc ---------- */
.badge-status { font-size: 11.5px; color: var(--ink-faint); }
.empty { padding: 22px; text-align:center; color: var(--ink-faint); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 14px; }
.backlink { font-size: 14px; font-weight: 600; }
.kv { display:grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 14px; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin:0; }
footer.site { border-top: 1px solid var(--line); margin-top: 50px; padding: 26px 0; color: var(--ink-faint); font-size: 13px; }
.spinner { padding: 60px; text-align:center; color: var(--ink-faint); }

@media (max-width: 860px){
  .split { grid-template-columns: 1fr; }
  nav.top a { padding: 7px 10px; }
}

/* ---------- workspace: persistent map + synchronized detail ---------- */
.workspace { display: grid; grid-template-columns: minmax(320px, 40%) 1fr; gap: 24px; align-items: start; margin-top: 18px; }
.ws-map-wrap { position: sticky; top: 76px; }
.ws-map-wrap #map { height: 528px; }
.ws-detail { min-width: 0; }
.ws-detail .section:first-child { margin-top: 0; }
.ws-back { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--brand-600); margin-bottom:10px; background:none; border:0; padding:0; cursor:pointer; }
.ws-statehead { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.ws-statehead h1 { font-size: clamp(26px,3.4vw,36px); }
.selectable-hint { font-size:12px; color:var(--ink-faint); margin-top:10px; }

/* district chips row inside a state */
.dchips { display:flex; flex-direction:column; gap:7px; }
.dchip { display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center;
  padding:10px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; width:100%; text-align:left; font:inherit; }
.dchip:hover { border-color:#cdd8e2; }
.dchip.active { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-050); }
.dchip .nm { font-weight:600; font-size:14px; }
.dchip .nm small { display:block; font-weight:500; color:var(--ink-faint); font-size:11.5px; }
.dchip .sc { font-family:var(--font-display); font-size:17px; }
.dchip .pill-band { color:#fff; }
/* condensed state-page district rows: one line each */
.dchips:has(.dchip-min) { gap:4px; }
.dchip.dchip-min { padding:5px 11px; border-radius:8px; }
.dchip-min .nm { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dchip-min .nm small { display:inline; margin-left:7px; font-size:11px; }
.dchip-min .sc { font-size:13px; }
.dchip-min .sc .scorepill { font-size:12px; padding:1px 8px; border-radius:999px; color:#fff; font-weight:700; }
.wv-mini { white-space:nowrap; font-size:11.5px; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.wv-mini.wv-client { font-size:13px; }

@media (max-width: 900px){
  .workspace { grid-template-columns: 1fr; }
  .ws-map-wrap { position: static; }
  .ws-map-wrap #map { height: 340px; }
}

/* ---------- compact opportunity tiles ---------- */
.tiles.compact { grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px){ .tiles.compact { grid-template-columns: repeat(2, 1fr); } }
.tiles.compact .tile { padding: 9px 11px 10px; border-radius: 9px; cursor: default; }
.tiles.compact .tile .cat { font-size: 11px; font-weight: 600; color: var(--ink-soft); min-height: 0; line-height: 1.25; }
.tiles.compact .tile .toprow { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-top:2px; }
.tiles.compact .tile .val { font-family: var(--font-display); font-size: 21px; margin: 0; line-height: 1; }
.tiles.compact .tile .val small { font-size: 10px; color: var(--ink-faint); }
.tiles.compact .tile .basis-dot { width:7px; height:7px; border-radius:50%; background: currentColor; flex:0 0 auto; }
.tiles.compact .tile .meter { margin-top: 8px; gap: 3px; }
.tiles.compact .tile .meter i { height: 5px; border-radius: 2px; }
.tiles.compact .tile .cue { font-size: 11px; color: var(--ink-faint); margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.tiles.compact .tile.pending .val { font-size: 12px; padding: 4px 0; }
.tiles.compact .tile.expandable { cursor: pointer; }
.tiles.compact .tile.open .cue { -webkit-line-clamp: unset; overflow: visible; }
.tiles.compact .tile.open { box-shadow: var(--shadow-sm); border-color:#cdd8e2; }

/* ---------- funding groups (by category of funding) ---------- */
.fund-group { margin-bottom: 18px; }
.fund-group .fund-cat {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 8px 2px; display: flex; align-items: baseline; gap: 8px;
}
.fund-group .fund-cat .count { font-weight: 600; color: var(--ink-faint); letter-spacing: 0; }
.fund-group + .fund-group { margin-top: 22px; }

/* ---------- districts table ---------- */
.tablewrap { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.dtable th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; }
.dtable th:hover { color: var(--ink); }
.dtable th.sorted { color: var(--brand-600); }
.dtable th.num, .dtable td.num { text-align: right; }
.dtable td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tbody tr { cursor: pointer; }
.dtable tbody tr:hover { background: var(--brand-050); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td small { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 1px; }
.dtable .fitpill { display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.dtable .scorepill { display: inline-block; color: #fff; font-family: var(--font-display); font-size: 15px;
  min-width: 44px; text-align: center; padding: 4px 10px; border-radius: 8px; }
.dtable tr.band-unscored .scorepill { color: #4b5563; }
.dtable .tabular { font-variant-numeric: tabular-nums; }
@media (max-width: 700px){ .dtable th, .dtable td { padding: 9px 10px; } }

/* ---------- wave-grouped landing ---------- */
.wavegroup { margin-top: 20px; }
.wavehead { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.wavehead .count { font-weight: 600; color: var(--ink-faint); letter-spacing: 0; text-transform: none; }
.waverows { display: flex; flex-direction: column; gap: 6px; }
.waverow { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  text-decoration: none; color: inherit; }
.waverow:hover { border-color: #cdd8e2; box-shadow: var(--shadow-sm); }
.waverow .nm { font-weight: 600; font-size: 14px; min-width: 0; }
.waverow .nm small { display: block; font-weight: 500; color: var(--ink-faint); font-size: 11.5px; }
.waverow .urg { color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.waverow .u30 { font-size: 12px; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.waverow .u30.hot { color: #b3403a; font-weight: 600; }
.waverow .u30 small { font-size: 10px; }
.waverow .fundlink { font-size: 12px; font-weight: 600; color: var(--brand-600); white-space: nowrap; cursor: pointer; }
.waverow .fundlink:hover { text-decoration: underline; }
.waverow .scorepill { display: inline-block; color: #fff; font-family: var(--font-display); font-size: 15px;
  min-width: 44px; text-align: center; padding: 4px 10px; border-radius: 8px; }
@media (max-width: 640px){
  .waverow { grid-template-columns: 1fr auto auto; }
  .waverow .u30, .waverow .fundlink { display: none; }
}
.statestrip { display: flex; flex-wrap: wrap; gap: 6px; }
.statechip { border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12px;
  font-weight: 600; text-decoration: none; color: var(--ink); background: var(--surface); }
.statechip b { font-family: var(--font-display); }
.statechip:hover { box-shadow: var(--shadow-sm); }

/* ---------- per-funding-row score chips ---------- */
.scorechips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.scorechip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 2.5px 9px; white-space: nowrap; }
.scorechip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- sign-in gate ---------- */
.user-btn { display: inline-flex; align-items: center; margin-left: 6px; }
.user-btn:empty { display: none; }
#auth-gate {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--brand-050), transparent 60%),
    var(--paper);
}
#auth-gate[hidden] { display: none; }
.gate-card {
  width: 100%; max-width: 400px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.gate-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 24px; color: var(--ink); letter-spacing: -.02em;
}
.gate-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.gate-lede { color: var(--ink-soft); margin: 2px 0 18px; font-size: 15px; }
.gate-foot { margin-top: 16px; font-size: 12px; }
#clerk-signin { display: flex; justify-content: center; min-height: 220px; }

/* ---------- wave separators in the districts table ---------- */
.dtable tr.wavesep td { background: var(--brand-050); font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand-600); padding: 8px 14px; cursor: default; }
.dtable tr.wavesep td .count { font-weight: 600; color: var(--ink-faint); letter-spacing: 0; }

/* ---------- urgency legend + explainer on the landing ---------- */
.urg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 6px; }
.urg-legend .urg { color:#fff; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; }
.urg-how { flex-basis: 100%; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.urg-how summary { cursor: pointer; font-weight: 600; color: var(--brand-600); font-size: 12.5px; }
.urg-how p { margin: 8px 0 0; line-height: 1.55; max-width: 640px; }

/* ---------- scoring summary dialog ---------- */
.whybtn { background:none; border:0; padding:0; font:inherit; font-size:12px; font-weight:600;
  color: var(--brand-600); cursor:pointer; }
.whybtn:hover { text-decoration:underline; }
#score-dialog { border:0; border-radius:14px; padding:20px 22px; max-width:520px; width:calc(100vw - 48px);
  box-shadow:0 24px 60px rgba(15,34,56,.25); }
#score-dialog::backdrop { background:rgba(15,34,56,.45); }
#score-dialog .sd-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:10px; }
#score-dialog h3 { margin:0; font-size:16.5px; line-height:1.35; }
#score-dialog .sd-close { background:none; border:0; font-size:15px; cursor:pointer; color:var(--ink-faint); padding:2px; }
#score-dialog .sd-close:hover { color:var(--ink); }
#score-dialog .sd-body { font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:12px 0; }
#score-dialog a { font-size:13px; font-weight:600; color:var(--brand-600); }

/* ---------- wave headings within a state's district list ---------- */
.dchip-wavehead { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand-600); margin: 8px 2px 1px; }
.dchip-wavehead:first-child { margin-top: 0; }
.dchip-wavehead .count { font-weight: 600; color: var(--ink-faint); letter-spacing: 0; }
.urg-how .fitpill, .urg-how .urg { color:#fff; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:2.5px 8px; border-radius:999px; display:inline-block; margin:0 1px; }

/* ---------- state topline overview ---------- */
.whycard { background: var(--brand-050); border: 1px solid var(--brand); border-radius: 12px;
  padding: 14px 16px; margin: 12px 0 4px; }
.whycard .whyhead { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 6px; }
.whycard p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.tl-stats { display: flex; gap: 10px; margin: 12px 0 10px; flex-wrap: wrap; }
.tl-stat { border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 9px 15px; display: flex; flex-direction: column; min-width: 120px; }
.tl-stat b { font-family: var(--font-display); font-size: 21px; line-height: 1.1; }
.tl-stat span { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.tl-stat.hot b { color: #b3403a; }
.tl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 18px 0 4px; }
.tl-h { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-list li { font-size: 13px; line-height: 1.4; }
.tl-list a { font-weight: 600; color: var(--brand-600); text-decoration: none; }
.tl-list a:hover { text-decoration: underline; }
.tl-list small { display: block; color: var(--ink-faint); font-size: 11.5px; }
.themechips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- selected LEA label on the map ---------- */
.sel-label { background: #152238; color: #fff; border: 0; border-radius: 7px;
  padding: 4px 9px; font-size: 12px; box-shadow: 0 4px 14px rgba(15,34,56,.35); }
.sel-label::before { border-top-color: #152238; }

/* ------------------------------------------------ state structured summary */
.statesummary h3 { margin-bottom: 10px; }
.statesummary .ss-block { padding: 10px 0; }
.statesummary .ss-block + .ss-block { border-top: 1px solid var(--line); }
.statesummary .ss-head { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-600); margin-bottom: 4px; }
.statesummary p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.statesummary .ss-list { margin: 8px 0 2px; padding-left: 20px; }
.statesummary .ss-list li { font-size: 14.5px; line-height: 1.55; margin: 6px 0; }
.statesummary .ss-list li strong { color: var(--ink); }
.statesummary .ss-block p + p { margin-top: 6px; }

/* --------------------------------------------------- ranking dashboard --- */
.rank-maprow { margin: 4px 0 12px; }
#rank-map { height: 300px; border-radius: 12px; border: 1px solid var(--line); z-index: 0; }
/* tile-free maps: the polygons sit on a plain wash instead of a basemap */
#rank-map, #map { background: #eef3f7; }
/* collapsible map (closed by default) */
.rank-mapfold { margin: 4px 0 14px; }
.rank-mapfold summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px; background: var(--card, #fff); user-select: none; }
.rank-mapfold summary::-webkit-details-marker { display: none; }
.rank-mapfold summary::before { content: "▸"; transition: transform .15s; }
.rank-mapfold[open] summary { margin-bottom: 8px; }
.rank-mapfold[open] summary::before { transform: rotate(90deg); }
/* motion (30-day K-12 feed) indicator */
.mo-cell { text-align: center; width: 26px; }
.motion-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.motion-dot.on   { background: #c0392b; animation: motionflash 1.15s ease-in-out infinite; }
.motion-dot.near { background: #fff; border: 2px solid #ba7517; animation: motionflash 2.2s ease-in-out infinite; }
.motion-dot.off  { background: #e2e0d8; }
@keyframes motionflash { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(192,57,43,.35); }
  50% { opacity: .45; box-shadow: 0 0 0 5px rgba(192,57,43,0); } }
.yn-cell { text-align: center; }
.wave-pair { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; }
.wave-pair.wave-up, .wv-mini.wv-up { color: #0f6e56; background: #e3f3ec; border-radius: 6px; padding: 2px 7px; }
.wave-pair.wave-down, .wv-mini.wv-down { color: #8f281d; background: #f9e9e7; border-radius: 6px; padding: 2px 7px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 7px 13px; font-size: 13px; cursor: pointer; color: var(--ink); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--brand); color: #fff; font-weight: 600; }
/* The wrap scrolls BOTH ways with a bounded height, so the sticky header row
   actually freezes (sticky only works inside the nearest scroll container —
   with overflow-x alone the page scrolls vertically and the header slid away). */
.rank-wrap { overflow: auto; padding: 0; max-height: calc(100vh - 210px); }
.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1180px; }
.rank-table th { position: sticky; top: 0; z-index: 5; background: var(--surface); text-align: left; padding: 9px 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border-bottom: 0; box-shadow: inset 0 -2px 0 var(--line); cursor: pointer; white-space: nowrap; user-select: none; }
.rank-table th.sorted::after { content: " ▲"; font-size: 9px; }
.rank-table th.sorted.desc::after { content: " ▼"; }
.rank-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rank-table tr[data-href] { cursor: pointer; }
.rank-table tr[data-href]:hover td { background: var(--brand-050); }
.rank-table tr.rk-state td { font-weight: 600; background: #f7f6f2; }
.rank-table tr.rk-state:hover td { background: var(--brand-050); }
.rank-table tr.rk-child td:first-child { padding-left: 26px; }
.rank-table tr.rk-child td { font-weight: 400; }
.urg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.wave-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  background: var(--brand-050); border: 1px solid var(--brand); }
/* Wave color coding: W1 (short-term focus) hottest -> W4 coolest */
.wave-chip.wave-w1 { background: #dff1e6; border-color: #1c7a4d; color: #125f3f; font-weight: 700; }
.wave-chip.wave-w2 { background: #e3eef8; border-color: #4a7fb5; color: #1c5a8a; font-weight: 600; }
.wave-chip.wave-w3 { background: #faf0d8; border-color: #c9962f; color: #8a6116; }
.wave-chip.wave-w4 { background: #f1f0ec; border-color: #b9b7b1; color: #5f5e5a; }
/* "Differs from current wave": dashed ring, keeps the wave's own color */
.wave-chip.wave-diff { border-style: dashed; border-width: 1.5px; }

/* ------------------------------------------- state view: compact map ------ */
.workspace.ws-compact { grid-template-columns: minmax(250px, 27%) 1fr; }
.workspace.ws-compact .ws-map-wrap #map { height: 320px; }
.workspace.ws-compact .selectable-hint { display: none; }
@media (max-width: 900px){
  .workspace.ws-compact .ws-map-wrap #map { height: 200px; }
}

/* wave movement indicator on district rows */
.dchip { grid-template-columns: 1fr auto auto auto; }
.wv-move { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.wv-up   { background: #e7f4ec; color: #1c7a4d; border: 1px solid #9fd4b6; }
.wv-down { background: #fdecec; color: #a53d38; border: 1px solid #e7b3b0; }
.wv-hold { background: #f1f0ec; color: #5f5e5a; border: 1px solid var(--line); }

/* funding-row analysis (district pages) */
.fund-analysis { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
.fund-analysis .fa-label { display:block; font-size: 10.5px; font-weight: 700; letter-spacing:.06em;
  text-transform: uppercase; color: var(--brand-600); margin-bottom: 2px; }
.fund-analysis p { margin: 0; }
.ev-quote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--brand);
  background: var(--brand-050); font-size: 13px; line-height: 1.55; font-style: italic; border-radius: 0 8px 8px 0; }

/* --------------------------------------- ranking v2: frozen col + cells --- */
.rank-table th.frozen, .rank-table td.frozen {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  min-width: 210px; max-width: 260px; white-space: normal;
  box-shadow: 2px 0 0 var(--line); }
.rank-table thead th.frozen { z-index: 3; }
.rank-table tr.rk-state td.frozen { background: #f7f6f2; }
.rank-table tr[data-href]:hover td.frozen { background: var(--brand-050); }
.rank-table tr.rk-overview td.rk-flag { font-size: 12.5px; color: var(--ink); white-space: normal; }
.rank-table tr.rk-overview td { border-bottom: 1px dashed var(--line); }
.catcell { font-weight: 600; }
.cat-3 { background: #f9e3e1; color: #8f2f2a; }
.cat-2 { background: #fdf1e2; color: #8a5410; }
.cat-1 { background: #f0f4ee; color: #3f6b52; }
.cat-0 { background: #f4f3f0; color: #8a887f; }
.cat-none { color: var(--ink-faint); }
.cat-act { display:inline-block; font-size: 9px; font-weight: 800; letter-spacing:.06em;
  text-transform: uppercase; color: #b3403a; margin-left: 3px; vertical-align: 1px; }
.rv-cell { font-size: 12.5px; white-space: nowrap; }
.rv-done { color: #1c7a4d; font-weight: 700; }
.rv-pulse { display:inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ba7517;
  margin-right: 6px; animation: rvpulse 1.4s ease-in-out infinite; vertical-align: 0; }
@keyframes rvpulse {
  0%   { box-shadow: 0 0 0 0 rgba(186,117,23,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(186,117,23,0); }
  100% { box-shadow: 0 0 0 0 rgba(186,117,23,0); }
}

/* ranking v3 tweaks: centered category scores, no badge; client celebration */
.rank-table td.catcell { text-align: center; }
.wave-chip.wave-client { background: #e7f4ec; border-color: #1c7a4d; }
.wv-client { background: #e7f4ec; color: #1c7a4d; border: 1px solid #9fd4b6; }
/* two-column topline after consolidation */
.tl-cols.tl-cols-2 { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 860px){ .tl-cols.tl-cols-2 { grid-template-columns: 1fr; } }
/* clickable score tiles + justification flash */
.tile.linkable { cursor: pointer; }
.tile.linkable:hover { outline: 2px solid var(--brand); outline-offset: 1px; }
.row-item.just-flash { animation: justflash 2.4s ease-out; }
@keyframes justflash {
  0% { background: var(--brand-050); box-shadow: 0 0 0 2px var(--brand); }
  100% { background: transparent; box-shadow: none; }
}

/* --- Trend Report integration: W/A logo brand + return link ------------- */
.brand { align-items: center; }
.brand .wa-logo { height: 30px; width: auto; display: block; }
.back-tr { font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
  text-decoration: none; white-space: nowrap; }
.back-tr:hover { color: var(--ink); text-decoration: none; }

/* --- Key competitors bullets (state summary + competitive landscape) ------ */
.kp-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); margin: 12px 0 6px; }
.kp-sub .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.kp-list { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.kp-list li { margin: 4px 0; }
.kp-list strong { font-weight: 600; }
.kp-list .muted { font-size: 12.5px; }
.kp-cap { font-size: 11.5px; color: var(--ink-faint); margin: 6px 0 0; }

/* --- Compliance & funding (state initiatives) + Y/N icon chips ----------- */
.yn { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; }
.yn-yes { color: #0f6e56; background: #e3f3ec; }
.yn-no  { color: #8a4040; background: #f6e9e7; }
.yn-tbd { color: #8a6a1f; background: #f7efd9; }
.yn-na  { color: var(--ink-faint); background: var(--bg-soft, #f0efe9); }
.cmp-strip { margin-top: 4px; }
.cmp-sum { font-size: 13px; color: var(--ink-faint); margin: 0 0 6px; }
.cmp-list { list-style: none; margin: 0; padding: 0; }
.cmp-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.cmp-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  justify-content: space-between; font-size: 13.5px; }
.cmp-flags { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.cmp-flag { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.cmp-detail { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; margin-top: 4px; }

/* --- District key positions & W/A relationship card ---------------------- */
.contacts-card .contacts-head { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
/* .kv markup wraps each dt/dd pair in a <div>, so the label/value columns live
   INSIDE each row — the outer grid must be a single constrained column or long
   contact strings size the row to their unwrapped width. */
.contacts-kv { display: block; }
.contacts-kv > div { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 2px 14px; padding: 4px 0; }
.contacts-kv > div + div { border-top: 1px solid var(--line); }
.contacts-kv dt { white-space: normal; }
.contacts-kv dd { line-height: 1.5; min-width: 0; overflow-wrap: break-word; }
.contacts-kv dd .contact-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); }
.contacts-flags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid var(--line); }
.contacts-flags .cmp-flag { font-size: 12px; white-space: normal; }
@media (max-width: 640px){ .contacts-kv > div { grid-template-columns: 1fr; } }

/* --- Ranking overview row: compliance summary ---------------------------- */
.rk-cmp { white-space: nowrap; margin-left: 10px; color: var(--ink-faint); }
/* Funding & scores: compact/expanded toggle */
.fund-viewbar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.seg-sm button { font-size: 11px; padding: 4px 11px; }
.fund-table.compact .fund-desc { display: none; }
.fund-table.compact td { padding-top: 7px; padding-bottom: 7px; }
.fund-table.compact .fund-links { margin-top: 2px; }
.rk-deck { white-space: nowrap; margin-left: 10px; font-size: 11.5px; font-weight: 600;
  color: var(--accent, #26324f); border: 1px solid currentColor; border-radius: 999px;
  padding: 1px 9px 2px; text-decoration: none; }
.rk-deck:hover { background: var(--accent, #26324f); color: #fff; }

/* --- State summary: subhead note + consolidated funding & scores table ---- */
.statesummary .ss-head .ss-note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.fund-tbl-wrap { overflow-x: auto; padding: 0; }
.fund-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fund-table th { text-align: left; padding: 9px 10px; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line);
  background: var(--surface); white-space: nowrap; }
.fund-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.fund-table tbody tr:last-child td { border-bottom: 0; }
.fund-table td.fund-prog { white-space: normal; min-width: 260px; max-width: 460px; }
.fund-table td.fund-prog strong { font-size: 13.5px; line-height: 1.35; display: block; }
.fund-desc { font-size: 12px; color: var(--ink-faint); line-height: 1.5; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fund-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 11.5px; align-items: center; }
.fund-links a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.fund-links a:hover { text-decoration: underline; }
.fund-table td.fund-fy { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.fund-table td.catcell { text-align: center; font-weight: 600; }
.fund-table tr.just-flash td { animation: justflash 2.4s ease-out; }

/* --- collapsible map (state/district workspace) --------------------------- */
.map-toggle { display: block; margin: 0 0 8px auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.map-toggle:hover { border-color: #cdd8e2; color: var(--ink); }
.workspace.map-collapsed { grid-template-columns: auto 1fr; }
.workspace.map-collapsed .ws-map-wrap { width: auto; }
.workspace.map-collapsed .ws-map-wrap #map,
.workspace.map-collapsed .ws-map-wrap .legend,
.workspace.map-collapsed .ws-map-wrap .selectable-hint { display: none; }
.workspace.map-collapsed .map-toggle { writing-mode: vertical-rl; margin: 0; padding: 12px 5px; border-radius: 8px; }
@media (max-width: 900px){
  .workspace.map-collapsed { grid-template-columns: 1fr; }
  .workspace.map-collapsed .map-toggle { writing-mode: horizontal-tb; margin: 0 0 8px auto; padding: 4px 12px; border-radius: 999px; }
}

/* --- funding table: level group rows + mandate chips ----------------------- */
.fund-table tr.fund-lvl td { background: var(--line-soft); font-family: var(--font-body); font-size: 11px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
  padding: 6px 10px; white-space: nowrap; }
.fund-table tr.fund-lvl .count { font-weight: 600; color: var(--ink-faint); margin-left: 2px; }
.fund-mandate { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 4px; }
.fund-mandate .cmp-flag { font-size: 11px; }
.sd-mandate { border-top: 1px solid var(--line); padding-top: 10px; }

/* --- district selector chips in the funding table's group header ---------- */
.fund-table tr.fund-lvl td { white-space: normal; }
.fd-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 14px; vertical-align: middle; }
.fd-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft); }
.fd-chip:hover { border-color: #cdd8e2; color: var(--ink); }
.fd-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- issue theme chips (filter the Updates list) --------------------------- */
.issue-themes { margin: 2px 0 14px; align-items: center; }
.issue-themes .it-label { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.issue-themes .it-label small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.it-chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface); }
.it-chip:hover { border-color: #cdd8e2; color: var(--ink); }
.it-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- compact category summary row above Funding & scores ------------------- */
.cat-sumrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 12px; }
.cat-sum { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 999px; padding: 5px 13px; font-size: 12.5px;
  font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.cat-sum i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cat-sum .cs-v { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.cat-sum:hover { border-color: #cdd8e2; color: var(--ink); }
.cs-note { font-size: 11px; color: var(--ink-faint); }

/* --- sortable score columns in Funding & scores ----------------------------- */
.fund-table th.catth { cursor: pointer; user-select: none; }
.fund-table th.catth:hover { color: var(--ink); }
.fund-table th.sorted::after { content: " ▲"; font-size: 9px; }
.fund-table th.sorted.desc::after { content: " ▼"; }

#rank-q{font-family:var(--font-body);font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:250px}
#rank-q:focus{outline:none;border-color:var(--brand)}