:root{
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --line:#e3e6ea;
  --line-2:#eef0f3;
  --ink:#10151c;
  --ink-2:#4a5563;
  --ink-3:#78838f;
  --brand:#14507d;
  --brand-2:#1c6ba5;
  --brand-wash:#eef4f9;
  --dem:#2f6bb5;
  --gop:#b3383a;
  --ind:#5f6b7a;
  --ok:#2f7d5c;
  --elect:#9a6b12;
  --elect-wash:#fbf2e0;
  --radius:12px;
  --radius-sm:8px;
  --shadow-1:0 1px 2px rgba(16,21,28,.05), 0 1px 3px rgba(16,21,28,.04);
  --shadow-2:0 4px 12px rgba(16,21,28,.08), 0 2px 4px rgba(16,21,28,.04);
  --shadow-3:0 24px 60px rgba(16,21,28,.18);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The `hidden` attribute only wins a tie on specificity, not on cascade
   origin — any author-stylesheet class that sets `display` (`.grid`,
   `.level`, `.coverage-track`, …) silently overrides the browser's own
   `[hidden]{display:none}` rule, since normal author rules always beat
   normal user-agent rules regardless of specificity. `!important` here is
   deliberate and the fix, not a hack: it's what makes `hidden` reliably
   mean hidden on any element, no matter what other classes it carries. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.55; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:19px;transition:opacity .15s}
.brand:hover{opacity:.75}
.brand .seal{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:linear-gradient(145deg,var(--brand-2),var(--brand));
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700;
  font-family:'Source Serif 4',Georgia,serif;
}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{
  padding:7px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);
  transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--line-2);color:var(--ink)}
.nav-links a.active{color:var(--brand);background:var(--brand-wash);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;position:relative}

/* ---------- locate ---------- */
.locate{background:var(--surface);border-bottom:1px solid var(--line)}
.locate-grid{display:flex;align-items:center;justify-content:space-between;gap:48px}
.locate-inner{padding:44px 0 40px;max-width:660px;flex:1 1 480px}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand);
  background:var(--brand-wash);padding:5px 11px;border-radius:999px;margin-bottom:16px
}
h1{
  font-family:'Source Serif 4',Georgia,serif;font-weight:700;
  font-size:clamp(28px,4.2vw,40px);line-height:1.15;letter-spacing:-.02em;margin-bottom:10px
}
.sub{color:var(--ink-2);font-size:16px;max-width:52ch}
.searchbar{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.field{
  flex:1 1 320px;display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--radius);padding:0 14px;height:50px;
  transition:border-color .15s,box-shadow .15s;
}
.field:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(28,107,165,.14)}
.field svg{flex:none;color:var(--ink-3)}
.field input{border:none;outline:none;background:none;width:100%;font-size:15px}
.field select{
  border:none;outline:none;background:none;width:100%;font-size:15px;color:var(--ink);
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
.field select:invalid{color:var(--ink-3)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:var(--radius);font-size:15px;font-weight:600;
  background:var(--brand);color:#fff;transition:background .15s,transform .05s;white-space:nowrap
}
.btn:hover{background:#0f4066}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{height:36px;padding:0 14px;font-size:13.5px;border-radius:var(--radius-sm)}
.hint{margin-top:12px;font-size:13px;color:var(--ink-3)}
.hint b{color:var(--ink-2);font-weight:600}

.coverage-track{display:block;margin-top:18px;max-width:360px;border-radius:var(--radius-sm);padding:2px;transition:background .15s}
.coverage-track:hover{background:var(--line-2)}
.coverage-track:hover .coverage-track-link{color:var(--brand)}
.coverage-track-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--ink-3);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600
}
.coverage-track-head span:last-child{
  text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink-2)
}
/* Matches the coverage map's own county-tier color (see coverage.html/
   coverage-state.html's COLOR_FULL) rather than the site's brand blue —
   this number and bar visualize the exact same metric the map's fill
   encodes, so they should read as one color system, not two. */
.coverage-track-head b{color:#0f7a4a;font-weight:700}
.coverage-bar{height:6px;border-radius:999px;background:var(--line-2);overflow:hidden}
.coverage-bar-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#4ade95,#0f7a4a);
  transition:width .6s cubic-bezier(.32,.72,0,1)
}
.coverage-track-link{margin-top:7px;font-size:12.5px;color:var(--ink-3);font-weight:500;transition:color .15s}

/* Hero-whitespace map preview — a smaller, non-interactive echo of
   coverage.html's real map, so there's something to look at (and some
   context for what this project even is) before an address is entered.
   Hidden until real data loads (see loadCoverage() in the inline script)
   and hidden entirely below the width where it'd cramp the search form. */
.locate-map-preview{
  display:block;flex:0 0 380px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;transition:box-shadow .15s,border-color .15s,transform .15s
}
.locate-map-preview:hover{box-shadow:var(--shadow-2);border-color:#d3d8df;transform:translateY(-2px)}
.locate-map-preview-head{margin-bottom:10px}
.locate-map-preview-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-bottom:14px}
.locate-map-preview svg{width:100%;height:auto;display:block}
.locate-map-preview .state-shape,.locate-map-preview .state-dc{stroke:var(--surface-2);stroke-width:0.7}
.locate-map-preview-link{margin-top:12px;font-size:12.5px;color:var(--ink-3);font-weight:500;text-align:right;transition:color .15s}
.locate-map-preview:hover .locate-map-preview-link{color:var(--brand)}

/* "Recently added" feed inside the map-preview card — the literal recent
   git log for data/local + data/federal (see /coverage/recent in api.py),
   so the "we're constantly adding coverage" claim is backed by real,
   dynamically-updating activity rather than a static blurb. */
.locate-recent{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.locate-recent-head{
  font-size:11px;color:var(--ink-3);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600
}
.locate-recent-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.locate-recent-list li{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--ink-2);line-height:1.4
}
.locate-recent-list li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locate-recent-list li span:last-child{flex:0 0 auto;color:var(--ink-3)}

@media (max-width:980px){
  .locate-map-preview{display:none}
}

/* ---------- results header ---------- */
main{padding:32px 0 40px}
.state{display:none}
.state.on{display:block}
.placeorb{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-1);margin-bottom:22px
}
.placeorb .loc{display:flex;align-items:center;gap:12px}
.placeorb .pin{
  width:38px;height:38px;border-radius:10px;background:var(--brand-wash);color:var(--brand);
  display:grid;place-items:center;flex:none
}
.placeorb .loc b{display:block;font-size:15px}
.placeorb .loc span{font-size:13px;color:var(--ink-3)}
.placeorb-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.tally{display:flex;gap:8px;flex-wrap:wrap}
.tally .chip{
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:13px;color:var(--ink-2)
}
.tally .chip b{color:var(--ink);font-weight:600}

.clear-btn{
  display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  padding:6px 13px;border-radius:999px;transition:all .15s
}
.clear-btn:hover{color:var(--ink);border-color:var(--ink-3);background:var(--surface-2)}
.clear-btn svg{color:var(--ink-3)}

.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{
  padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);
  border:1px solid var(--line);background:var(--surface);transition:all .15s
}
.pill:hover{border-color:var(--ink-3);color:var(--ink)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.filterfield{
  margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);height:38px;padding:0 12px;min-width:230px
}
.filterfield input{border:none;outline:none;background:none;width:100%;font-size:14px}
.filterfield svg{color:var(--ink-3);flex:none}

/* ---------- sections + cards ---------- */
.level{margin-bottom:34px}
.level-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.level-head h2{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.level-head .rule{font-size:13px;color:var(--ink-3)}
.level-head .count{margin-left:auto;font-size:13px;color:var(--ink-3)}

.subgroup-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.subgroup-nav-link{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  transition:all .15s
}
.subgroup-nav-link:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface-2)}
.subgroup-nav-link span{color:var(--ink-3);font-variant-numeric:tabular-nums}

.subgroups{display:flex;flex-direction:column;gap:26px;scroll-margin-top:16px}
.subgroup{scroll-margin-top:16px}
.subgroup-head{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;width:100%;
  padding:4px 0;border-radius:var(--radius-sm);transition:opacity .15s
}
.subgroup-head:hover{opacity:.75}
.subgroup-head h3{font-size:14.5px;font-weight:650;color:var(--ink-2);letter-spacing:-.005em;text-align:left}
.subgroup-head .subgroup-count{margin-left:auto;font-size:12px;color:var(--ink-3)}
.subgroup-chevron{display:flex;color:var(--ink-3);transition:transform .18s}
.subgroup-head[aria-expanded="false"] .subgroup-chevron{transform:rotate(-90deg)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.grid + .cabinet-toggle{margin-top:16px}
.cabinet-toggle + .grid{margin-top:16px}

.cabinet-toggle{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font-size:13.5px;font-weight:500;transition:all .15s
}
.cabinet-toggle:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface-2)}
.cabinet-toggle[aria-expanded="true"]{color:var(--brand);border-color:#c6d9e8;background:var(--brand-wash)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-1);cursor:pointer;position:relative;
  transition:box-shadow .18s,border-color .18s,transform .18s;
  display:flex;flex-direction:column;gap:13px
}
.card:hover{box-shadow:var(--shadow-2);border-color:#d3d8df;transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.card .top{display:flex;gap:12px;align-items:flex-start}
.mono{
  width:48px;height:48px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-weight:600;font-size:16px;color:#fff;letter-spacing:.02em
}
.mono-photo{
  width:48px;height:48px;border-radius:10px;flex:none;object-fit:cover;
  background:var(--line-2);border:1px solid var(--line)
}
.card .who{min-width:0;flex:1}
.card .name{font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.card .office{font-size:13px;color:var(--ink-2);margin-top:2px}
.card .dist{font-size:12.5px;color:var(--ink-3);margin-top:3px}

/* A declared winner who hasn't taken office yet — rare enough that this
   only ever shows up for a handful of cards at a time, right around an
   election. Amber rather than any party color or --ok (already means
   "live"/positive elsewhere) so it reads as "pending," not as an outcome
   judgment. */
.card.elect{border-color:#e4cf9e;background:linear-gradient(var(--elect-wash),var(--surface) 70px)}
.badge-elect{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:var(--elect-wash);color:var(--elect);font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:1px
}
.party{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:2px 8px;border-radius:999px;margin-top:7px;letter-spacing:.02em
}
.party i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.party.D{color:var(--dem);background:rgba(47,107,181,.1)}
.party.R{color:var(--gop);background:rgba(179,56,58,.1)}
.party.I{color:var(--ind);background:rgba(95,107,122,.12)}

.card .meta{display:flex;gap:14px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:11px}
.card .meta div b{display:block;color:var(--ink-2);font-weight:600;font-size:12.5px}

.card.lookup{cursor:default;border-style:dashed}
.card.lookup:hover{transform:none;box-shadow:var(--shadow-1);border-color:var(--line)}
.card.lookup .lookup-link{width:100%}

.lookup-select-input{
  width:100%;height:42px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:14px;color:var(--ink);background:var(--surface);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
.lookup-select-input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(28,107,165,.14)}
.lookup-selected:empty{display:none}
.lookup-selected .card{box-shadow:none;cursor:pointer}
.lookup-fallback{font-size:12.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.lookup-fallback:hover{color:var(--ink-2)}

.acts{display:flex;gap:6px}
.act{
  flex:1;height:34px;border:1px solid var(--line);border-radius:var(--radius-sm);
  display:grid;place-items:center;color:var(--ink-2);transition:all .15s
}
.act:hover{background:var(--brand-wash);border-color:#c6d9e8;color:var(--brand)}

/* ---------- sticky bar ---------- */
.actionbar{
  position:sticky;bottom:16px;margin-top:26px;
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:14px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:var(--shadow-3)
}
.actionbar .t{font-size:14.5px;font-weight:600}
.actionbar .d{font-size:13px;color:#a9b4c1}
.actionbar .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.actionbar .btn{background:#fff;color:var(--ink);height:38px;padding:0 16px;font-size:14px;border-radius:var(--radius-sm)}
.actionbar .btn:hover{background:#e9edf1}
.actionbar .btn.line{background:transparent;color:#fff;border:1px solid #39424f}
.actionbar .btn.line:hover{background:#1c242e}

.empty{text-align:center;padding:60px 20px;color:var(--ink-3)}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(16,21,28,.4);opacity:0;pointer-events:none;transition:opacity .22s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(468px,100%);background:var(--surface);
  z-index:90;transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;box-shadow:var(--shadow-3)
}
.drawer.on{transform:none}
.drawer-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.drawer-head .mono{width:56px;height:56px;font-size:19px}
.drawer-head .mono-photo{width:56px;height:56px}
.drawer-head h3{font-family:'Source Serif 4',Georgia,serif;font-size:21px;line-height:1.2;letter-spacing:-.01em}
.drawer-head .office{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.x:hover{background:var(--line-2);color:var(--ink)}
.drawer-body{overflow-y:auto;padding:20px 22px 28px;flex:1}
.dsec{margin-bottom:24px}
.dsec h4{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.contact a,.contact span{
  display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;color:var(--ink-2);transition:all .15s
}
.contact a:hover{background:var(--brand-wash);border-color:#c6d9e8;color:var(--brand)}
.bill{display:block;padding:12px 0;border-bottom:1px solid var(--line-2)}
.bill:last-child{border-bottom:none}
.bill .no{font-size:11.5px;font-weight:700;color:var(--brand);letter-spacing:.04em}
.bill .ti{font-size:14px;font-weight:550;margin-top:2px;line-height:1.4}
.bill .st{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.news{display:block;padding:11px 0;border-bottom:1px solid var(--line-2)}
.news:last-child{border-bottom:none}
.news .h{font-size:13.8px;font-weight:500;line-height:1.4}
.news .s{font-size:12px;color:var(--ink-3);margin-top:3px}
.votes{display:flex;flex-direction:column;gap:9px}
.vote{display:flex;align-items:center;gap:11px;font-size:13.5px}
.vote .tag{
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;flex:none;width:52px;text-align:center
}
.vote .tag.y{background:rgba(47,125,92,.12);color:var(--ok)}
.vote .tag.n{background:rgba(179,56,58,.1);color:var(--gop)}
.vote .tag.a{background:var(--line-2);color:var(--ink-3)}
.vote span{color:var(--ink-2);min-width:0}

/* ---------- auth / activity modals ----------
   Centered overlay, distinct from .drawer (which slides in from the
   right for an official's detail view) — shares .scrim with it, since
   only one of drawer/modal is ever open at a time. */
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);width:min(400px,calc(100% - 32px));
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-3);
  z-index:90;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3)}
.modal-close:hover{background:var(--line-2);color:var(--ink)}
.modal-body{padding:28px 26px 24px}
.modal-body h3{font-family:'Source Serif 4',Georgia,serif;font-size:21px;letter-spacing:-.01em;margin-bottom:6px}
.modal-sub{font-size:13.5px;color:var(--ink-2);margin-bottom:20px;line-height:1.5}
.modal-field{margin-bottom:10px;height:46px}
.modal-error{
  font-size:13px;color:var(--gop);background:rgba(179,56,58,.08);border-radius:var(--radius-sm);
  padding:9px 12px;margin-bottom:12px;
}
.modal-switch{margin-top:16px;text-align:center;font-size:13.5px;color:var(--ink-2)}
.modal-switch a{color:var(--brand);font-weight:600}
.modal-switch a:hover{text-decoration:underline}

.activity-stats{display:flex;gap:10px;margin-bottom:18px}
.activity-stat{
  flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;text-align:center;
}
.activity-stat b{display:block;font-size:24px;font-family:'Source Serif 4',Georgia,serif;color:var(--brand)}
.activity-stat span{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.activity-recent-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto}
.activity-recent-list li{
  display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-2);
  padding:9px 0;border-bottom:1px solid var(--line-2);
}
.activity-recent-list li:last-child{border-bottom:none}
.activity-recent-list .what{color:var(--ink);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-recent-list .when{flex:none;color:var(--ink-3)}
.activity-empty{font-size:13.5px;color:var(--ink-3);padding:8px 0}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,24px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:all .22s;z-index:100;box-shadow:var(--shadow-3)
}
.toast.on{opacity:1;transform:translate(-50%,0)}

footer{border-top:1px solid var(--line);background:var(--surface);padding:24px 0}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.note{
  background:#fdf8ec;border:1px solid #f0e2c4;color:#7a5b1c;border-radius:var(--radius-sm);
  padding:10px 14px;font-size:12.5px;margin-bottom:22px
}

/* ---------- coverage map page ---------- */
.cov-page{padding:36px 0 64px}
.cov-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;font-size:13.5px;color:var(--ink-2)}
.cov-legend b{color:var(--ink)}

/* The two-part key: fill gradient (federal & state baseline through +
   county coverage — one continuum, not two separate facts) and hatch
   (local, present/absent overlay). The map's boundary stroke is just a
   plain boundary now, not a third data channel — it doesn't need its own
   key entry, since the fill baseline already carries the federal/state
   story more visibly than a thin border ever could. */
.cov-key{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:18px;font-size:12.5px;color:var(--ink-3)}
.cov-key-item{display:flex;align-items:center;gap:8px}
.cov-key-swatch{display:block;width:22px;height:14px;border-radius:3px;flex:none}
.cov-key-hatch{
  background:#f0dbfb;border:1.5px solid #6b1f9e;
  background-image:repeating-linear-gradient(45deg,#9d3fd6 0,#9d3fd6 2px,transparent 2px,transparent 6px);
  background-blend-mode:normal
}
.cov-legend-scale{display:flex;align-items:center;gap:0;height:14px;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.cov-legend-scale span{display:block;width:14px;height:100%}
.cov-map-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow-1);margin-bottom:28px;position:relative
}
.cov-map-card svg{width:100%;height:auto;display:block}
.state-shape{stroke:var(--surface);stroke-width:0.8;cursor:pointer;transition:fill .15s,stroke-width .15s}
.state-shape:hover,.state-shape.hover{stroke:var(--ink);stroke-width:1.6}
.state-dc{cursor:pointer;stroke:var(--surface);stroke-width:0.9;transition:fill .15s,stroke-width .15s}
.state-dc:hover,.state-dc.hover{stroke:var(--ink);stroke-width:1.6}
.cov-tooltip{
  position:fixed;pointer-events:none;z-index:70;
  background:var(--ink);color:#fff;padding:9px 13px;border-radius:var(--radius-sm);
  font-size:12.5px;line-height:1.6;box-shadow:var(--shadow-3);opacity:0;transform:translateY(4px);
  transition:opacity .12s,transform .12s;max-width:240px
}
.cov-tooltip.on{opacity:1;transform:translateY(0)}
.cov-tooltip b{display:block;font-size:13.5px;font-weight:650;margin-bottom:3px}
.cov-tooltip .pct{color:#9fd4b8;font-weight:600}
.cov-tooltip .pct.zero{color:#c9d0d8;font-weight:400}

.cov-table-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);overflow:hidden
}
.cov-table-card + .cov-table-card,.cov-table-card + .cov-local-empty{margin-top:20px}
.cov-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cov-table th{
  text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);
  cursor:pointer;user-select:none;white-space:nowrap
}
.cov-table th:hover{color:var(--ink)}
.cov-table th.num{text-align:right}
.cov-table td{padding:10px 16px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:middle}
.cov-table tr:last-child td{border-bottom:none}
.cov-table td.num{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.cov-table .state-name{color:var(--ink);font-weight:600}
.cov-bar-cell{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.cov-bar-track{width:90px;height:6px;border-radius:999px;background:var(--line-2);overflow:hidden;flex:none}
.cov-bar-fill{height:100%;border-radius:999px}
.cov-bar-pct{width:40px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

.cov-local-empty{padding:20px 16px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ---------- state-level county drill-down (coverage-state.html) ---------- */
.cov-breadcrumb{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);text-decoration:none;margin-bottom:14px;transition:color .15s}
.cov-breadcrumb:hover{color:var(--brand)}
.county-shape{stroke:var(--surface);stroke-width:0.8;transition:fill .15s,stroke-width .15s}
.county-shape:hover,.county-shape.hover{stroke:var(--ink);stroke-width:1.6}
.cov-state-unavailable{padding:60px 16px;text-align:center;color:var(--ink-3);font-size:14px}
.cov-state-unavailable a{color:var(--brand);text-decoration:underline}

@media (max-width:640px){
  .cov-bar-track{width:56px}
  .cov-table th,.cov-table td{padding:9px 10px}
}

/* ---------- static content pages (About, etc.) ---------- */
.page{padding:52px 0 64px;max-width:760px}
.page h2{
  font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:26px;
  letter-spacing:-.01em;margin:40px 0 14px
}
.page h2:first-child{margin-top:0}
.page p{color:var(--ink-2);margin-bottom:14px;max-width:66ch}
.page ul{color:var(--ink-2);margin:0 0 14px 20px}
.page li{margin-bottom:6px}
.pull{
  font-family:'Source Serif 4',Georgia,serif;font-size:20px;line-height:1.5;color:var(--ink);
  border-left:3px solid var(--brand-2);padding-left:18px;margin:24px 0;max-width:60ch
}
.tierlist{display:grid;gap:10px;margin:18px 0 24px}
.tierlist div{
  display:flex;align-items:baseline;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:12px 14px
}
.tierlist b{flex:0 0 90px;color:var(--ink)}
.tierlist span{color:var(--ink-2);font-size:14px}
.tierlist .live{color:var(--ok);font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.tierlist .soon{color:var(--ink-3);font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.tierlist .building{color:var(--brand-2);font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase}

@media (max-width:860px){
  .level:last-of-type{padding-bottom:8px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .nav-links{display:none}
  .filterfield{margin-left:0;width:100%}
  .searchbar .field, .searchbar > button{flex:1 1 100% !important}
  .contact{grid-template-columns:1fr}
  .locate-inner{padding:32px 0 28px}
  .grid{grid-template-columns:1fr}
  .actionbar{padding:10px 12px;gap:10px;flex-wrap:nowrap;align-items:center}
  .actionbar .d{display:none}
  .actionbar .t{font-size:13.5px;line-height:1.3}
  .actionbar .sp{gap:6px}
  .actionbar .btn{height:34px;padding:0 12px;font-size:13px}
  .actionbar .btn.line{display:none}
}