*,*::before,*::after{box-sizing:border-box}
:root{
  --navy-950:#03192C;--navy-900:#05233E;--navy-800:#062F52;--navy-700:#084071;
  --navy-600:#0B5290;--navy-500:#41678A;--navy-300:#7FB4DF;--navy-200:#BCD8EF;
  --navy-100:#E3EEF8;--navy-50:#F3F8FC;
  --green:#4E972D;--green-dk:#3A7220;--green-lt:#EAF5E3;
  --amber:#B45309;--amber-lt:#FEF3C7;--red:#B42318;--red-lt:#FEE4E2;
  --orange:#C2410C;--orange-lt:#FFEDD5;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'Roboto Mono',Menlo,Consolas,monospace;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--navy-50);color:var(--navy-900);
  line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* The BETA tab is fixed to the right edge. Once the viewport is narrow enough
   that the container has no gutter of its own, body text runs underneath it, so
   the container gives back the width the tab occupies. */
@media(max-width:1190px){.wrap{padding-right:54px}}
.wrap-wide{max-width:1180px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--navy-700)}
:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}

/* ---------- chrome ---------- */
.site-head{border-bottom:1px solid var(--navy-100);background:#fff}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px}
/* Scales with the viewport rather than stepping at a breakpoint: the logo is
   wide (roughly 5.6:1), so a fixed desktop height pushes the nav onto a second
   line everywhere between tablet and laptop. */
.site-head .logo{height:clamp(32px,4.2vw,52px);width:auto;display:block}
.site-nav a{white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{padding:8px 12px;border-radius:8px;font-size:.9rem;font-weight:500;
  color:var(--navy-700);text-decoration:none}
.site-nav a:hover{background:var(--navy-50);color:var(--navy-900)}
.site-nav a.cta{background:var(--navy-900);color:#fff}
.site-nav a.cta:hover{background:var(--navy-700)}
@media(max-width:760px){.site-nav{display:none}}

.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-500)}
.card{background:#fff;border:1px solid var(--navy-100);border-radius:14px;
  box-shadow:0 1px 2px rgba(5,35,62,.06),0 12px 32px -18px rgba(5,35,62,.25)}
.pagehead{padding:34px 0 4px}
/* Was centred inside the page, which left it inset from the header on wide
   screens. Structure now runs to the container edge; only running text keeps a
   readable line length, and it keeps it by capping the paragraph, not the page. */
.pagehead--narrow>p,.pagehead--narrow>h1{max-width:34ch}
.pagehead--narrow>.lede{max-width:64ch}
h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.1;letter-spacing:-.022em;font-weight:800;
  margin:0 0 14px;color:var(--navy-950)}
h2{letter-spacing:-.015em}
.lede{font-size:1.03rem;color:var(--navy-700);max-width:64ch;margin:0}

.crumbs{font-size:.8rem;color:var(--navy-500);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:7px}
.crumbs a{color:var(--navy-500);text-decoration:none}
.crumbs a:hover{color:var(--navy-800);text-decoration:underline}

/* ---------- grade badge ---------- */
.grade-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;
  border-width:2px}
.grade-face,.grade-body,.grade-copy,.grade-actions{min-width:0}
@media(min-width:760px){.grade-wrap{grid-template-columns:minmax(0,15rem) 1fr}}
.grade-face{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:32px 24px}
.grade-letter{font-family:var(--mono);font-size:5.2rem;line-height:1;font-weight:800;letter-spacing:-.04em}
.grade-score{font-family:var(--mono);font-size:.95rem;font-weight:700}
.grade-score span{opacity:.6}
/* Copy and actions sit side by side so the card fills its container instead of
   trailing off into dead white space on the right. */
.grade-body{padding:26px 24px;display:grid;grid-template-columns:minmax(0,1fr);
  gap:18px;align-content:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .grade-body{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px}
}
.grade-body p{margin:0}
.grade-copy p{max-width:62ch}
.grade-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(min-width:900px){.grade-actions{flex-direction:column;align-items:stretch;flex:none}
  .grade-actions .btn{text-align:center;white-space:nowrap}}
.chip{display:inline-block;border-radius:999px;padding:4px 12px;font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;background:#fff;border:1px solid currentColor}
.g-A{background:var(--green-lt);color:var(--green-dk);border-color:#CFE8C1}
.g-B{background:var(--navy-100);color:var(--navy-700);border-color:var(--navy-200)}
.g-C{background:var(--amber-lt);color:var(--amber);border-color:#FCD34D}
.g-D{background:var(--orange-lt);color:var(--orange);border-color:#FDBA74}
.g-F{background:var(--red-lt);color:var(--red);border-color:#F3B9B4}
.pill{display:inline-block;font-family:var(--mono);font-size:.74rem;font-weight:700;
  padding:2px 8px;border-radius:5px}

.btn{display:inline-block;font:inherit;font-weight:700;font-size:.9rem;padding:11px 18px;border:0;
  border-radius:9px;background:var(--navy-900);color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--navy-700)}
.btn.green{background:var(--green)}.btn.green:hover{background:var(--green-dk)}
.btn.ghost{background:#fff;color:var(--navy-700);border:1px solid var(--navy-200)}
.btn.ghost:hover{background:var(--navy-50)}

/* ---------- stat strip ---------- */
/* auto-fit collapses empty tracks, so a row of 3 stats fills the width the same
   way a row of 4 does. A fixed 4-column grid left a blank cell on any page with
   fewer than four. */
.stats{display:grid;gap:1px;background:var(--navy-100);border:1px solid var(--navy-100);
  border-radius:14px;overflow:hidden;grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
/* A three-up strip never degrades to two columns: the odd item left alone in a
   half-empty row reads as a bug rather than a layout. It goes straight from
   three across to one. Four-up is safe at two, because 2x2 is still even. */
.stats--3{grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){
  .stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.stat{background:#fff;padding:15px 18px}
.stat dt{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-500)}
.stat dd{margin:5px 0 0;font-family:var(--mono);font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.stat .sub{display:block;font-family:var(--sans);font-size:.76rem;font-weight:400;color:var(--navy-500);margin-top:3px}

/* ---------- notices ---------- */
.notice{border-radius:12px;padding:16px 18px;margin:0 0 18px;font-size:.93rem}
.notice.warn{background:var(--amber-lt);color:#7c3d06;border:1px solid #FCD34D}
.notice.info{background:var(--navy-100);color:var(--navy-800);border:1px solid var(--navy-200)}
.notice strong{display:block;margin-bottom:3px}

/* ---------- charts ---------- */
.charts{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.charts{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}}
.donut{width:100%;max-width:290px;height:auto;display:block;margin:0 auto}
.donut-label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--navy-500)}
.donut-value{font-family:var(--mono);font-size:21px;font-weight:700;fill:var(--navy-900)}
.bars{width:100%;height:auto;display:block}
.bar-label{font-family:var(--sans);font-size:11px;fill:var(--navy-800)}
.bar-value{font-family:var(--mono);font-size:11px;font-weight:700;fill:var(--navy-600)}
/* minmax(0,1fr) rather than 1fr: a bare 1fr track floors at min-content, so a
   long category name widened the track and overflowed the chart column. */
.legend{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));column-gap:22px}
.legend li{display:flex;align-items:center;gap:8px;font-size:.82rem}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy-700)}
.legend .pc{font-family:var(--mono);font-weight:700;font-size:.78rem}

/* ---------- rubric checklist ---------- */
.checklist{list-style:none;margin:18px 0 0;padding:0}
.checklist li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--navy-100)}
.checklist li:last-child{border-bottom:0}
.mark{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:800;margin-top:2px}
.mark.met{background:var(--green);color:#fff}
.mark.missing{background:#fff;border:2px solid var(--navy-200);color:var(--navy-300)}
.mark.pending{background:#fff;border:2px dashed var(--navy-300)}
.ck-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.ck-head h3{font-size:.95rem;margin:0;font-weight:700}
.ck-pts{font-family:var(--mono);font-size:.76rem;font-weight:700;flex:none}
.ck-req{margin:4px 0 0;font-size:.88rem;color:var(--navy-700)}
.ck-why{margin:3px 0 0;font-size:.8rem;color:var(--navy-500)}
.scorebar{height:8px;border-radius:99px;background:var(--navy-100);overflow:hidden;margin:14px 0 0}
.scorebar span{display:block;height:100%;background:var(--green);border-radius:99px}
.deducts{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--navy-100)}
.deducts li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:.88rem}
.deducts .neg{font-family:var(--mono);font-weight:700;color:var(--red);flex:none}

/* ---------- documents ---------- */
.docs{list-style:none;margin:16px 0 0;padding:0}
.docs li{border-bottom:1px solid var(--navy-100)}
.docs li:last-child{border-bottom:0}
.docs a{display:flex;justify-content:space-between;gap:14px;padding:13px 0;text-decoration:none}
.docs a:hover .dt{text-decoration:underline}
.dt{font-size:.94rem;font-weight:600;color:var(--navy-800);margin:5px 0 2px}
.dmeta{font-size:.78rem;color:var(--navy-500)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 7px;border-radius:4px;background:var(--navy-100);color:var(--navy-700)}
.tag.mr{background:var(--green-lt);color:var(--green-dk)}
.tag.ft{background:transparent;color:var(--navy-400,#8aa6bd);font-family:var(--mono)}

/* ---------- tables ---------- */
/* Tables carry most of the substance on this site, so they get a real
   treatment: a tinted header that separates itself from the data, zebra rows to
   keep the eye on one line across a wide table, and a hover state so a reader
   can track a row with the cursor. Row borders come off once striping does the
   same job, which takes a grid of lines off every page. */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th,.tbl td{text-align:left;padding:10px 13px}
.tbl thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--navy-600);background:var(--navy-50);font-weight:700;
  border-bottom:1px solid var(--navy-200);white-space:nowrap}
.tbl tbody tr:nth-child(even){background:#F7FAFD}
.tbl tbody tr:hover{background:var(--navy-100)}
.tbl tbody th{font-size:.9rem;color:var(--navy-900);font-weight:600}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--mono);font-size:.83rem}
.tbl tfoot td,.tbl tfoot th{border-top:1px solid var(--navy-200);font-weight:700}
.scroll{overflow-x:auto}
details.data-table{margin-top:18px;border-top:1px solid var(--navy-100);padding-top:14px}
details.data-table summary{cursor:pointer;font-size:.87rem;font-weight:700;color:var(--navy-700)}

/* ---------- state grid ---------- */
.state-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));margin-top:22px}
.state-card{display:block;padding:15px 16px;text-decoration:none;color:inherit;border-radius:12px;
  background:#fff;border:1px solid var(--navy-100);transition:border-color .15s,transform .15s}
.state-card:hover{border-color:var(--navy-300);transform:translateY(-1px)}
.state-card .nm{font-weight:700;font-size:.97rem}
.state-card .ct{font-family:var(--mono);font-size:.78rem;color:var(--navy-500);margin-top:3px}

.dlist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.dlist a{display:flex;align-items:center;gap:15px;padding:13px 16px;text-decoration:none;
  color:inherit;border-radius:12px;background:#fff;border:1px solid var(--navy-100)}
.dlist a:hover{border-color:var(--navy-300)}
.dlist .gbox{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:800;font-size:1.3rem;flex:none}
.dlist .nm{font-weight:700;font-size:.97rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist .meta{font-size:.79rem;color:var(--navy-500);margin-top:2px}

/* ---------- prose ---------- */
.prose{max-width:none}
.prose>p,.prose>ul,.prose>ol,.prose>h2+p{max-width:78ch}
.prose>.card,.prose>.scroll,.prose>table{max-width:none}
.prose h2{font-size:1.32rem;margin:34px 0 10px}
.prose h3{font-size:1.02rem;margin:24px 0 6px}
.prose p{margin:0 0 13px}
.prose ul,.prose ol{margin:0 0 13px;padding-left:22px}
.prose li{margin-bottom:6px}

/* ---------- footer ---------- */
.site-foot{margin-top:60px;background:var(--navy-950);color:#AFC6DC}
.site-foot .wrap{padding:38px 20px}
.site-foot .inner{width:min(100%,68rem);margin:0 auto;text-align:center}
@media(max-width:700px){.site-foot .inner{width:100%}}
.site-foot p{margin:0;font-size:.85rem}
/* Left-aligned: four stacked paragraphs of legal text are markedly harder to
   read ragged-both-sides than ragged-right. */
.site-foot .legal{margin-top:18px;padding-top:16px;border-top:1px solid rgba(175,198,220,.22);
  color:#7794AF;font-size:.78rem;text-align:left;max-width:64rem;margin-left:auto;margin-right:auto}
.site-foot .legal p{margin:0 0 10px;font-size:.78rem}
.site-foot .legal p:last-child{margin-bottom:0}
.site-foot .legal strong{color:#CFE0EF}
.site-foot a{color:#fff}

@media print{.site-head,.site-nav,.no-print{display:none!important}body{background:#fff}}

/* ---------- search ---------- */
.dsearch{display:flex;gap:8px;max-width:34rem}
.dsearch input[type=search]{flex:1;min-width:0;font:inherit;font-size:.98rem;
  padding:12px 14px;border-radius:10px;border:1px solid var(--navy-200);background:#fff;
  color:var(--navy-900);-webkit-appearance:none}
.dsearch input[type=search]:focus{outline:none;border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(11,82,144,.16)}
.dsearch button{font:inherit;font-weight:700;font-size:.92rem;padding:12px 20px;border:0;
  border-radius:10px;background:var(--navy-900);color:#fff;cursor:pointer;white-space:nowrap}
.dsearch button:hover{background:var(--navy-700)}
.sr-only,
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Compact state index for the empty search state: a dead-end page with one
   input on it gives a reader nowhere to go, and these are 51 internal links. */
.statelinks{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.statelinks a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:9px;background:#fff;border:1px solid var(--navy-100);
  text-decoration:none;color:var(--navy-900)}
.statelinks a:hover{border-color:var(--navy-300);background:var(--navy-50)}
.statelinks .nm{font-size:.9rem;font-weight:600}
.statelinks .ct{font-family:var(--mono);font-size:.76rem;color:var(--navy-500)}

/* ---------- dense district table ---------- */
.dtable{font-size:.9rem}
.dtable thead th{position:sticky;top:0;z-index:1;box-shadow:inset 0 -1px 0 var(--navy-200)}
.dtable tbody tr:hover{background:var(--navy-100)}
.dtable th[scope=row]{font-weight:600}
.dtable a{color:var(--navy-900);text-decoration:none}
.dtable a:hover{text-decoration:underline}
.dtable td,.dtable th{white-space:nowrap}
.dtable th[scope=row]{white-space:normal;min-width:15rem}
.dstate{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:.72rem;
  color:var(--navy-400,#8aa6bd)}

/* ---------- embed panel ---------- */
.embedbox__in{margin-top:12px}
.embedbox__in p{margin:0 0 10px;font-size:.86rem;color:var(--navy-600);max-width:60ch}
.embedbox textarea{width:100%;font-family:var(--mono);font-size:.78rem;line-height:1.5;
  padding:11px 13px;border-radius:9px;border:1px solid var(--navy-200);background:var(--navy-50);
  color:var(--navy-800);resize:vertical}
.embedbox textarea:focus{outline:none;border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(11,82,144,.16)}
.embedbox__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.embedbox__ok{font-size:.82rem;font-weight:700;color:var(--green-dk)}

/* ---------- year comparison ---------- */
.yrpick{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.85rem}
.yrpick label{color:var(--navy-500);font-weight:600}
.yrpick select{font:inherit;font-size:.85rem;padding:7px 9px;border-radius:8px;
  border:1px solid var(--navy-200);background:#fff;color:var(--navy-900)}
.yrpick select:focus{outline:none;border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(11,82,144,.15)}
.yrpick button{font:inherit;font-size:.85rem;font-weight:700;padding:8px 14px;border:0;
  border-radius:8px;background:var(--navy-900);color:#fff;cursor:pointer}
.yrpick button:hover{background:var(--navy-700)}
.trend{width:100%;height:auto;display:block}
.trend-x{font-family:var(--mono);font-size:11px;fill:var(--navy-500)}

/* ---------- h1 keyword subline ---------- */
.h1-sub{display:block;margin-top:6px;font-size:.42em;font-weight:600;letter-spacing:0;
  line-height:1.35;color:var(--navy-500)}
.pagehead .h1-sub{font-size:.46em}
.poweredby{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(175,198,220,.16);
  font-size:.78rem;color:#7794AF}
.poweredby a{color:#fff;font-weight:700}

.trend-key{font-family:var(--sans);font-size:11.5px;fill:var(--navy-600)}
.trend-end{font-family:var(--mono);font-size:11px;font-weight:700}
.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:8px;
  vertical-align:1px;flex:none}

/* ---------- enterprise ---------- */
/* Explicit 3-up rather than auto-fit: with three tiers, auto-fit drops to two
   columns and orphans the third against an empty half-row. Straight to one
   column instead. */
.tiers{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
@media(max-width:640px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{padding:20px;display:flex;flex-direction:column}
.tier__name{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy-500)}
.tier__price{margin:8px 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  color:var(--navy-950)}
.tier__blurb{margin:6px 0 0;font-size:.88rem;color:var(--navy-600)}
.tier__list{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:7px;flex:1}
.tier__list li{position:relative;padding-left:19px;font-size:.88rem;color:var(--navy-700)}
.tier__list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:2px;
  border-radius:1px;background:var(--green)}
.tier .btn{align-self:flex-start}

.entform{padding:22px;margin-top:16px}
.entform__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.entform .fld{margin:0 0 14px;display:flex;flex-direction:column;gap:5px}
.entform__grid .fld{margin:0}
.entform label{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--navy-700)}
.entform input,.entform select,.entform textarea{font:inherit;font-size:.92rem;width:100%;
  padding:10px 12px;border:1px solid var(--navy-200);border-radius:9px;background:#fff;
  color:var(--navy-900)}
.entform textarea{resize:vertical;min-height:96px}
.entform input:focus,.entform select:focus,.entform textarea:focus{outline:none;
  border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(8,64,113,.12)}
.entform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.entform__note{font-size:.82rem;color:var(--navy-500)}
.entform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- mobile app shell ---------- */
:root{--tabbar-h:58px}

.tabbar{display:none}

@media(max-width:760px){
  /* Room for the fixed bar, plus the iOS home indicator. */
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}

  /* The header follows you down the page, so the logo stays a way home. */
  .site-head{position:sticky;top:0;z-index:50}
  .site-head .wrap{padding:10px 16px;gap:12px}
  .site-nav a.cta{padding:10px 14px;font-size:.85rem}

  .wrap{padding-left:16px;padding-right:16px}
  .site-head .logo{height:34px}

  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--navy-100);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -1px 10px rgba(5,35,62,.06)
  }
  .tabbar__item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:var(--tabbar-h);padding:7px 4px;text-decoration:none;
    color:var(--navy-500);font-size:.68rem;font-weight:600;letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent
  }
  .tabbar__icon{width:22px;height:22px;display:block}
  .tabbar__item.is-on{color:var(--navy-900)}
  .tabbar__item.is-on .tabbar__icon{color:var(--green)}
  .tabbar__item:active{background:var(--navy-50)}

  /* Touch targets. Anything tappable clears the 44px floor. */
  .btn{padding:13px 18px;font-size:.92rem}
  .site-nav a{padding:12px 14px}
  .crumbs{font-size:.78rem;gap:5px}

  /* Tables stay scrollable but stop pretending they are full width. */
  .scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .dtable th[scope=row]{min-width:11rem}
  .dtable{font-size:.84rem}
  .dtable td,.dtable th{padding:8px 10px}

  /* District list restacks as cards. Scoped to .dcards so the states index,
     which has four columns and reads fine as a table, is left alone. */
  .dcards{overflow-x:visible}
  .dcards .dtable,.dcards .dtable tbody,.dcards .dtable tr,
  .dcards .dtable td,.dcards .dtable th{display:block;width:auto}
  .dcards .dtable thead{display:none}
  .dcards .dtable tr{position:relative;padding:14px 56px 14px 16px;
    border-bottom:1px solid var(--navy-100)}
  .dcards .dtable tr:last-child{border-bottom:0}
  /* The card layout draws its own separators; striping on top reads as noise. */
  .dcards .dtable tbody tr:nth-child(even){background:transparent}
  .dcards .dtable th[scope=row]{padding:0 0 3px;min-width:0;white-space:normal;
    font-size:.98rem;font-weight:700;border:0}
  .dcards .dtable td{padding:0;border:0;white-space:normal;text-align:left}

  .dcards .dtable td.where{color:var(--navy-500);font-size:.82rem;margin-bottom:7px}
  .dcards .dtable td.where::before{content:none}
  .dcards .dtable td.n{display:inline-block;margin-right:15px;font-size:.82rem}
  .dcards .dtable td.n::before{content:attr(data-l) " ";font-family:var(--sans);
    font-size:.72rem;font-weight:600;color:var(--navy-500)}
  .dcards .dtable td.score{position:absolute;top:13px;right:14px;margin:0}
  .dcards .dtable td.score::before{content:none}
  /* After .td.n on purpose: same specificity, so the later rule wins and the
     row number stays hidden on a phone where the list is already ordered. */
  .dcards .dtable td.rank{display:none}

  /* Stacked legal text reads better with a little more room on a phone. */
  .site-foot .wrap{padding:30px 16px}
  .legal__cta{margin-top:12px!important}
}

/* 390px is an iPhone 14, not an edge case. Two stats abreast fit there; the
   single column is reserved for genuinely narrow devices. */
@media(max-width:359px){.stats{grid-template-columns:minmax(0,1fr)}}
@media(max-width:400px){.tabbar__item{font-size:.64rem}}

@media print{.tabbar{display:none!important}}

/* ---------- beta tab ---------- */
.betatab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:60;
  display:flex;align-items:flex-start}
.betatab__pull{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font:inherit;padding:14px 8px;border:0;border-radius:9px 0 0 9px;cursor:pointer;
  background:#4F972C;color:#fff;box-shadow:-2px 0 12px -3px rgba(5,35,62,.45);
  transition:background .15s;
}
.betatab__pull:hover{background:#3F7A23}
.betatab__icon{display:flex;align-items:center;justify-content:center;line-height:0}
.betatab__word{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:.7rem;font-weight:800;letter-spacing:.22em;
}
.betatab__h2icon{display:inline-flex;vertical-align:-3px;margin-right:7px;color:#4F972C;line-height:0}
.betatab__panel{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:min(22rem,calc(100vw - 2rem));
  background:#fff;border:1px solid var(--navy-100);border-right:0;
  border-radius:12px 0 0 12px;padding:20px 22px;
  box-shadow:-8px 0 34px -14px rgba(5,35,62,.4);
}
.betatab__panel h2{font-size:1.02rem;margin:0 0 8px}
.betatab__panel p{margin:0 0 10px;font-size:.86rem;line-height:1.55;color:var(--navy-700)}
.betatab__cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px!important}
.betatab__cta .btn{font-size:.82rem;padding:9px 14px}
.betatab__close{margin-top:12px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:700;color:var(--navy-500);text-decoration:underline}
.betatab__close:hover{color:var(--navy-900)}
@media(max-width:760px){
  .betatab{top:auto;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));right:0;transform:none}
  .betatab__pull{flex-direction:row;border-radius:9px 0 0 9px;padding:8px 13px;gap:7px}
  .betatab__word{writing-mode:horizontal-tb}
  .betatab__panel{position:fixed;right:0;left:0;top:auto;transform:none;width:100%;
    bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    border-radius:14px 14px 0 0;border-right:0;max-height:70vh;overflow-y:auto}
}