: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;
  --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}
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}
.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-inner{padding:44px 0 40px;max-width:660px}
.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}

/* ---------- 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)}

.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}

.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)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}

.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
}
.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}
.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%}

.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 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}

.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
}

/* ---------- 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}

@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}
}