/* The Schemes Register — visual language taken from the source documents.
   Absence renders as "..." , the nil-mark used throughout Union Budget Statements
   4A/4B, never as an empty cell: a missing field should look like a deliberate
   notation, not a rendering bug. Accent is the violet of a government stamp pad. */

:root{
  --paper:#E9EAE4; --surface:#F4F5F0; --sink:#DFE1D9;
  --ink:#161D19; --muted:#4F5851; --faint:#5B645D;
  --rule:#C7CBC2; --rule-strong:#A9AFA5;
  /* Saffron, in two tones. One vivid saffron cannot be both legible at link size and
     bright at display size on this paper: #D9821F is 3.0:1 here, fine for large marks
     but under the 4.5:1 body-text floor. --stamp is the accessible tone used for links,
     the active route and small emphasis; --stamp-bright is the display tone used only
     for large type and decorative marks, where 3:1 is the applicable threshold.
     Measured on this paper: --stamp 5.10:1, --stamp-bright 3.14:1. */
  --stamp:#8F5300; --stamp-bright:#C26E0D; --stamp-soft:#8F53001F;
  --pass:#2E6B4F; --warn:#8A6114; --fail:#A33A2A;
  --nil:#5B645D;
  /* One type scale. There were 31 distinct font-size values with no relationship to
     each other, nine of them below 11px. Nothing is smaller than 12px now. */
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:21px; --fs-xl:27px;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131714; --surface:#1B211D; --sink:#0E120F;
    --ink:#E3E7E0; --muted:#A6AFA8; --faint:#8A938C;
    --rule:#303833; --rule-strong:#454F48;
    --stamp:#F0A94A; --stamp-bright:#FFB65C; --stamp-soft:#F0A94A24;
    --pass:#62B489; --warn:#D5A44E; --fail:#DF7259;
    --nil:#8A938C;
  }
}
:root[data-theme="dark"]{
  --paper:#131714; --surface:#1B211D; --sink:#0E120F;
  --ink:#E3E7E0; --muted:#A6AFA8; --faint:#8A938C;
  --rule:#303833; --rule-strong:#454F48;
  --stamp:#F0A94A; --stamp-bright:#FFB65C; --stamp-soft:#F0A94A24;
  --pass:#62B489; --warn:#D5A44E; --fail:#DF7259;
  --nil:#8A938C;
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
/* 1080 was set before the table carried six columns and a rail beside it. At that width
   the rail left the table 754px and it scrolled sideways on a desktop, which is the one
   place it should not have to. */
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
/* `text-wrap: balance` was the reason headings broke early: it equalises line lengths,
   so a two-line title is deliberately shortened on BOTH lines rather than filling the
   container. `pretty` keeps normal line filling and only avoids a one-word last line. */
h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:pretty;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.mast{border-bottom:1px solid var(--rule-strong);background:var(--surface)}
.mast-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:22px 0 16px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand .nil{font-family:var(--mono);font-size:34px;color:var(--stamp-bright);letter-spacing:.06em;
  line-height:.7;opacity:.9}
.brandname{font-family:var(--serif);font-weight:500;font-size:var(--fs-xl);
  letter-spacing:-.01em;display:block}
.brand .sub{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);
  text-transform:uppercase;letter-spacing:.13em;margin-top:3px}
.tbtn{font-family:var(--mono);font-size:var(--fs-sm);background:none;border:1px solid var(--rule);
  color:var(--muted);border-radius:2px;padding:5px 9px;cursor:pointer}
.tbtn:hover{border-color:var(--stamp);color:var(--stamp)}

.routes{border-bottom:1px solid var(--rule);background:var(--surface);overflow-x:auto}
.routes .wrap{display:flex;gap:2px}
/* min-width keeps "/" a real hit target — a single glyph with 15px of padding was a
   ~24px tap area, well under the 44px guideline, and easy to miss with a mouse too. */
/* Every route carries the SAME font-weight in every state. Weight was previously 400
   normally and 500 when active, so the active item rendered wider than the others and
   the whole row shifted sideways from page to page. The current page is marked by
   colour and the underline instead — both of which cost no width. */
.route{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;padding:12px 18px;
  color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;
  white-space:nowrap;min-width:52px;text-align:center;display:inline-block}
.route:hover{color:var(--ink)}
.route.on{color:var(--stamp);border-bottom-color:var(--stamp)}

.fresh{background:var(--sink);border-bottom:1px solid var(--rule)}
.fresh .wrap{display:flex;align-items:center;gap:10px;padding:9px 28px;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);flex-wrap:wrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--pass);flex:none}
.dot.bad{background:var(--fail)} .dot.warn{background:var(--warn)}
.fresh b{color:var(--ink);font-weight:500}
.fresh .sep{color:var(--rule-strong)}

main{padding:38px 0 76px}
.eyebrow{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.15em;color:var(--faint);margin-bottom:10px}
/* The container IS the measure. A second, narrower max-width inside .wrap meant text
   stopped well short of the edge it was already constrained by — two competing measures,
   the tighter one always winning and the container doing nothing. .measure is kept as a
   no-op hook so existing markup stays valid. */
.measure{max-width:none}
.lede{font-family:var(--serif);font-size:var(--fs-lg);line-height:1.5;margin:0 0 18px}
p{margin:0 0 15px}
.muted{color:var(--muted)}
.sec{margin-top:48px}
.sec>h2{font-size:var(--fs-lg);margin-bottom:6px}
.sec-note{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);margin-bottom:18px}
.nil{font-family:var(--mono);color:var(--nil);letter-spacing:.08em}
code{font-family:var(--mono);font-size:.88em;background:var(--sink);padding:1px 4px;
  border-radius:2px;color:var(--muted)}

/* Single column on purpose. The hero used to be a 1fr/auto grid with the nil-mark in
   the second track, which stole width from the headline and broke it into short lines
   well before the container edge. Titles and standfirsts now run the full measure. */
.hero{padding-bottom:34px;border-bottom:1px solid var(--rule)}
.hero h2{font-size:clamp(30px,4.4vw,46px);line-height:1.1;letter-spacing:-.02em;
  margin-bottom:18px;max-width:none}
.hero h2 em{font-style:italic;color:var(--stamp-bright)}
.bignil{font-family:var(--mono);font-size:64px;color:var(--stamp-bright);opacity:.16;
  line-height:.55;letter-spacing:.05em;user-select:none;margin-bottom:16px}

/* Section and page titles: full container width, never a reading measure. */
.pagetitle{font-size:clamp(27px,3.6vw,38px);line-height:1.14;letter-spacing:-.018em;
  margin-bottom:14px;max-width:none}
.sec>h2{max-width:none}

/* The standfirst sits under a title and runs the container, unlike running body copy
   which keeps a ~63ch measure via .measure. */
.standfirst{font-family:var(--serif);font-size:clamp(17px,1.7vw,21px);line-height:1.45;
  margin:0 0 18px;max-width:none;color:var(--ink)}
.standfirst.muted{color:var(--muted)}
@media (max-width:760px){.bignil{font-size:48px}}

.census{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
.cell{background:var(--surface);padding:15px 16px}
.cell .k{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.11em;color:var(--faint);margin-bottom:7px}
.cell .v{font-family:var(--serif);font-size:29px;line-height:1;font-variant-numeric:tabular-nums}
.cell .n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);margin-top:6px}

.tscroll{overflow-x:auto;border:1px solid var(--rule);background:var(--surface)}
/* The scheme and ministry columns hold the long strings; letting them wrap keeps the
   table inside its container instead of pushing every other column off the edge. */
#tbl{table-layout:fixed;width:100%}
/* Five columns, not six. The failing-checks list moved to the scheme page, where each
   one can say why it failed instead of being three codes in a narrow cell, and the
   scheme name took the width back: 31% to 42%, which is the difference between a long
   title wrapping to four lines and to two. */
#tbl th:nth-child(1),#tbl td:nth-child(1){width:35%}
#tbl th:nth-child(2),#tbl td:nth-child(2){width:13%}
#tbl th:nth-child(3),#tbl td:nth-child(3){width:10%}
#tbl th:nth-child(4),#tbl td:nth-child(4){width:21%}
#tbl th:nth-child(5),#tbl td:nth-child(5){width:13%}
#tbl th:nth-child(6),#tbl td:nth-child(6){width:8%}
.alloc{white-space:nowrap}
#tbl td{word-break:break-word;vertical-align:top}
#tbl td:nth-child(2){white-space:normal}
table{border-collapse:collapse;width:100%;font-size:var(--fs-base)}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rule)}
thead th,thead th.num{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);font-weight:500;border-bottom:1px solid var(--rule-strong);
  white-space:nowrap;background:var(--sink)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--stamp-soft)}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-base)}
.hi{color:var(--stamp);font-weight:500}
.gap{font-family:var(--mono);font-size:var(--fs-sm);color:var(--fail)}
td a{color:var(--stamp);text-decoration:none}
td a:hover{text-decoration:underline}

.callout{border-left:3px solid var(--stamp-bright);background:var(--surface);padding:18px 22px;margin:26px 0}
.callout .big{font-family:var(--serif);font-size:var(--fs-xl);line-height:1.35;margin-bottom:8px}
.callout .cite{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.warnbox{border:1px solid var(--rule);border-left:3px solid var(--warn);background:var(--surface);
  padding:15px 20px;margin:22px 0;font-size:var(--fs-base)}
.warnbox b{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.11em;
  color:var(--warn);display:block;margin-bottom:6px}

.meter{border:1px solid var(--rule-strong);background:var(--surface);margin:0 0 30px}
.meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:16px 22px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.meter-top .lbl{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.13em;color:var(--faint)}
.score{font-family:var(--serif);font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.score b{color:var(--stamp-bright);font-weight:600}
.bar{display:flex;gap:3px;margin-top:10px}
.seg{height:6px;flex:1;background:var(--rule-strong)}
.seg.p{background:var(--pass)} .seg.f{background:var(--fail)}
.checks{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:700px){.checks{grid-template-columns:1fr}}
.chk{display:flex;gap:11px;padding:12px 22px;border-bottom:1px solid var(--rule);
  align-items:flex-start;font-size:var(--fs-base)}
.chk:nth-child(odd){border-right:1px solid var(--rule)}
.mark{font-family:var(--mono);font-size:var(--fs-sm);flex:none;width:14px;line-height:1.5}
.mark.p{color:var(--pass)} .mark.f{color:var(--fail)}
.chk .why{color:var(--muted);font-size:var(--fs-sm);display:block;margin-top:2px;word-break:break-word}

.shead{border-bottom:1px solid var(--rule-strong);padding-bottom:22px;margin-bottom:28px}
.shead h2{font-size:32px;letter-spacing:-.015em}
.shead .full{font-family:var(--serif);font-size:var(--fs-md);color:var(--muted);font-style:italic;margin-top:4px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.chip{font-family:var(--mono);font-size:var(--fs-sm);border:1px solid var(--rule-strong);
  padding:3px 9px;border-radius:2px;color:var(--muted)}
.chip.live{color:var(--pass);border-color:var(--pass)}
.chip.flag{color:var(--fail);border-color:var(--fail)}

.prov{font-family:var(--mono);font-size:var(--fs-sm);width:100%;border-collapse:collapse}
.prov td{padding:8px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.prov td:first-child{color:var(--muted);white-space:nowrap;width:1%}
.prov .ts{color:var(--faint);white-space:nowrap;text-align:right}
.prov a{color:var(--stamp);text-decoration:none;border-bottom:1px solid var(--stamp-soft);
  word-break:break-all}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filters input,.filters select{font-family:var(--sans);font-size:var(--fs-base);padding:7px 10px;
  border:1px solid var(--rule-strong);border-radius:2px;background:var(--surface);color:var(--ink)}
.filters input{min-width:230px}
.dl{font:500 var(--fs-xs)/1 var(--sans);color:var(--muted);text-decoration:none;
  border:1px solid var(--rule);border-radius:999px;padding:7px 11px;white-space:nowrap}
.dl:hover{color:var(--ink);border-color:var(--ink)}
.dl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.count{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
/* Acronyms are how these schemes are actually referred to in the sector — PM-KISAN,
   MGNREGS, PMAY-G — so they are shown beside the name and are searchable. */
.acr{font-family:var(--mono);font-size:var(--fs-sm);color:var(--stamp);margin-left:8px;
  white-space:nowrap}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}

.empty{border:1px dashed var(--rule-strong);background:var(--surface);padding:34px 26px;
  text-align:center;color:var(--muted)}
.empty .big{font-family:var(--mono);font-size:40px;color:var(--nil);letter-spacing:.1em;
  display:block;margin-bottom:14px}

footer{border-top:1px solid var(--rule-strong);background:var(--surface);padding:26px 0;margin-top:60px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}

/* Which sources name a scheme. Shown per row because the register is a union now, and
   "who lists this" is the finding on any row myScheme does not appear in. */
.src{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;
  border:1px solid var(--rule-strong);border-radius:2px;padding:1px 5px;margin-right:4px;
  color:var(--muted);white-space:nowrap;display:inline-block}
.src.myscheme{color:var(--stamp);border-color:var(--stamp)}
.src.budget{color:var(--pass);border-color:var(--pass)}

/* Filter pills. Each group is single-choice; the count on every pill is the point —
   a closed dropdown hides how many schemes each option would select, which is
   information a reader wants before clicking, not after. */
.pills{display:flex;flex-direction:column;gap:9px;margin:0 0 20px}
.pillgroup{display:flex;align-items:center;gap:8px}
.pillrow{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.plabel{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--faint);min-width:104px;flex:none}
.pill{font-family:var(--sans);font-size:var(--fs-sm);line-height:1;padding:7px 11px;
  border:1px solid var(--rule-strong);border-radius:100px;background:var(--surface);
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pill:hover{border-color:var(--stamp);color:var(--ink)}
.pill.on{background:var(--stamp);border-color:var(--stamp);color:var(--paper);font-weight:500}
.pill .pn{font-family:var(--mono);font-size:var(--fs-xs);opacity:.72;font-variant-numeric:tabular-nums}
.pill.on .pn{opacity:.85}
@media (max-width:760px){.plabel{min-width:0;width:100%}}

/* The ministry combobox is the widest control and the only one that is a list rather
   than a set of choices, so it gets room to show what it is. */
.filters input#org{min-width:340px;flex:1}

/* A pill whose count is zero under the current filters. Kept clickable — it still says
   something true, that this combination is empty — but it stops looking available. */
.pill.zero{opacity:.42}
.pill.zero:not(.on){border-style:dashed}

/* The search box must not be squeezed by the ministry combobox beside it; its own
   placeholder was being truncated mid-word. */
.filters{align-items:center}
.filters input#q{min-width:330px;flex:1 1 330px}
.filters input#org{min-width:300px;flex:1 1 300px}

/* ---- schemes workspace: the table first, stats in a rail beside it ---------------- */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:22px;align-items:start}
.wmain{min-width:0}
.wrail{position:sticky;top:14px;border:1px solid var(--rule);background:var(--surface);
  padding:15px 16px}
.railhd{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--faint);margin-bottom:9px}
.railbig{font-family:var(--serif);font-size:31px;line-height:1;margin-bottom:14px;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.railof{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.railrow{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);
  padding:5px 0;border-bottom:1px solid var(--rule);color:var(--muted)}
.railrow:last-of-type{border-bottom:none}
.railrow b{color:var(--ink);font-family:var(--mono);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;font-weight:500}
.railnote{font-size:var(--fs-sm);color:var(--faint);line-height:1.45;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--rule)}

/* Mobile: the rail becomes a summary strip above the table, because on a phone the
   numbers are worth more as a header than as a column nobody scrolls to. */
@media (max-width:900px){
  .workspace{grid-template-columns:1fr}
}
@media (max-width:620px){
  .filters input#q,.filters input#org{min-width:0;flex:1 1 100%}
  .filters select{flex:1 1 100%}
  .plabel{min-width:0;width:100%;margin-bottom:2px}
  .pill{font-size:var(--fs-sm);padding:6px 10px}
  main{padding:20px 0 56px}
  .wrap{padding:0 16px}
}

/* The register is the page; the argument is context you can jump to. Putting 4,000 words
   of thesis above the table meant nobody on a phone ever reached the schemes. */
.topline{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.topline .pagetitle{margin-bottom:0}
.jump{font-family:var(--mono);font-size:var(--fs-sm);color:var(--stamp);text-decoration:none;
  border:1px solid var(--stamp);border-radius:100px;padding:7px 13px;white-space:nowrap}
.jump:hover{background:var(--stamp);color:var(--paper)}
.schemes{margin-top:0}
#argument{margin-top:54px;border-top:1px solid var(--rule-strong);padding-top:34px}

/* Scheme prose, reproduced from the source. Narrower than the tables around it because
   this is the one thing on the page meant to be read rather than scanned. */
/* No second measure. The comment above about .wrap applies here too and this was the last
   place still carrying one: 72ch stopped body text at about 55% of a 1280px container and
   left half the page empty beside every scheme description. The container is the measure. */
.prose{max-width:none;font-size:var(--fs-base)}
.prose p{margin:0 0 11px}
.prose ul{margin:0 0 12px;padding-left:20px}
.prose li{margin:0 0 5px}
.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--stamp)}
.chip.place{color:var(--stamp);border-color:var(--stamp)}

/* The place a scheme applies, with its tier beneath it. Block, not inline: without this
   the two run together as "Gujaratstate or UT". */
.sub2{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);
  margin-top:3px;letter-spacing:.04em;line-height:1.3}

/* Sticky search. With 5,438 rows the filter bar is a long way back up, so the search
   input and the live count follow you down. Only this row sticks: the pill groups are
   four more rows and pinning them would eat a third of a laptop viewport for controls
   you touch far less often than the search box. */
.filters{position:sticky;top:0;z-index:5;background:var(--paper);
  padding:10px 0 11px;margin-bottom:0;border-bottom:1px solid var(--rule)}
.pills{padding-top:14px}

/* The table header sticks under it, so a row's meaning stays visible while scrolling.
   The offset is measured rather than assumed: the filter bar wraps to two rows on a
   narrow window, and a hard-coded top would leave the header floating or overlapped. */
#tbl thead th{position:sticky;top:var(--filters-h,57px);z-index:4}

@media (max-width:620px){
  /* Wrapped controls make the bar tall on a phone; keep only the search field pinned. */
  .filters{position:static;border-bottom:none;padding:0}
  #tbl thead th{top:0}
}

/* ---- vertical budget above the table -------------------------------------------- */
/* Everything above the search box is chrome. It was costing roughly 320px on a laptop
   and more than a phone screen on mobile, so the first thing a reader saw was the
   masthead and the last thing they reached was the register. */
.mast-in{padding:15px 0 12px}
.route{padding:10px 18px}
.fresh .wrap{padding:7px 28px}
main{padding:22px 0 64px}
.topline{margin-bottom:16px}
.filters{padding:9px 0 10px}
.pills{padding-top:11px;gap:7px}

@media (max-width:900px){
  /* Label on its own line, pills scrolling beneath it. The label was sticky inside the
     scroller, which meant the pills slid under it and were unreadable behind the text. */
  .pillgroup{display:block}
  .plabel{display:block;width:auto;min-width:0;margin:0 0 4px;position:static}
  .pillrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:1px}
  .pillrow::-webkit-scrollbar{display:none}
  .pills{gap:9px}
}

@media (max-width:620px){
  .mast-in{padding:10px 0 9px;gap:10px}
  .brand h1{font-size:var(--fs-lg)}
  .brand .nil{font-size:var(--fs-xl)}
  .brand .sub{display:none}          /* the strapline repeats the page title */
  .route{padding:9px 13px;min-width:44px}
  /* Keep the two facts that matter on a phone: is it fresh, and did it verify. */
  .fresh .wrap{padding:6px 16px;gap:7px;font-size:var(--fs-xs)}
  .fresh span:nth-child(n+5){display:none}
  .topline{margin-bottom:11px;gap:8px}
  .topline .eyebrow{display:none}
  .topline .pagetitle{font-size:var(--fs-lg);line-height:1.2}
  .jump{padding:5px 10px;font-size:var(--fs-xs)}
  main{padding:12px 0 48px}
  .schemes .sec-note{font-size:var(--fs-sm);margin-bottom:8px}
}

/* ---- mobile: rows become cards, not a table ------------------------------------- */
/* Six columns at 390px wide, with table-layout:fixed percentages, wrapped the ministry
   and place columns to one character per line. A table that needs horizontal scrolling
   to read a single row is not a table any more, so on a phone each row is a block:
   name first, then everything else as one quiet meta line. */
@media (max-width:900px){
  .tscroll{border-left:none;border-right:none;overflow-x:hidden}
  #tbl{table-layout:auto;display:block;width:100%;max-width:100%}
  #tbl thead{display:none}
  #tbl tbody,#tbl tr,#tbl td{display:block;width:auto !important;max-width:100%}
  #tbl td{overflow-wrap:anywhere}
  #tbl tr{padding:12px 2px 13px;border-bottom:1px solid var(--rule)}
  #tbl tr:hover{background:none}
  #tbl td{padding:0;border:none;word-break:normal}

  #tbl td:nth-child(1){font-size:var(--fs-md);line-height:1.32;margin-bottom:6px}
  #tbl td:nth-child(1) .acr{display:block;margin:3px 0 0}
  #tbl td:nth-child(2){margin-bottom:6px}

  /* place, ministry, score and failures read as one sentence rather than four cells */
  #tbl td:nth-child(3),#tbl td:nth-child(4),
  #tbl td:nth-child(5),#tbl td:nth-child(6){display:inline;font-size:var(--fs-sm);color:var(--muted)}
  #tbl td:nth-child(4)::before,#tbl td:nth-child(5)::before,
  #tbl td:nth-child(6)::before{content:" · ";color:var(--rule-strong)}
  #tbl td:nth-child(5),#tbl td:nth-child(6){font-family:var(--mono)}
  #tbl td:nth-child(5)::after{content:" cr";font-family:var(--sans);color:var(--faint)}
  #tbl td:nth-child(6)::after{content:" passed";font-family:var(--sans);color:var(--faint)}
  /* the tier belongs beside the place here, not stacked under it */
  #tbl .sub2{display:inline;margin:0 0 0 5px;font-size:var(--fs-xs)}
}

/* ---- nav inside the masthead ---------------------------------------------------- */
/* Three links did not need a band of their own. Folding them into the header removes a
   whole row from every page, which on a phone is the difference between the search box
   being on the first screen or the second. */
.mast-in{align-items:center}
.routes{border-bottom:none;background:none;overflow:visible;
  display:flex;gap:2px;margin-left:auto;margin-right:14px}
.route{padding:7px 12px;border-bottom:2px solid transparent}
.brand{margin-right:8px}

@media (max-width:760px){
  .mast-in{flex-wrap:wrap;row-gap:6px}
  .routes{margin-left:0;margin-right:0;width:100%;order:3}
  .brand{margin-right:auto}
  .route{padding:6px 11px;min-width:40px}
}

/* ---- mobile: the rail becomes a sticky footer ----------------------------------- */
/* As a block above the table it pushed the schemes down a screen and scrolled away the
   moment you started reading. Pinned to the bottom it costs no vertical budget at the
   top and stays true while you scroll, which is the whole point of numbers that follow
   the filters. Only what fits on one line: the source breakdown and the note stay on
   the desktop rail. */
@media (max-width:900px){
  .wrail{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:20;order:0;
    display:flex;align-items:baseline;gap:13px;white-space:nowrap;
    overflow-x:auto;scrollbar-width:none;
    border:none;border-top:1px solid var(--rule-strong);
    background:var(--surface);padding:9px 16px calc(9px + env(safe-area-inset-bottom))}
  .wrail::-webkit-scrollbar{display:none}
  .wrail .railhd,.wrail .railgroup,.wrail .railnote{display:none}
  .wrail .railbig{margin:0;font-size:var(--fs-md);gap:5px;flex:none}
  .wrail .railof{font-size:var(--fs-xs)}
  .railrow{display:inline-flex;gap:6px;border-bottom:none;padding:0;font-size:var(--fs-sm);flex:none}
  main{padding-bottom:62px}
}
.railrow .sm,.pill .sm{display:none}
@media (max-width:900px){
  .railrow .lg,.pill .lg{display:none}
  .railrow .sm,.pill .sm{display:inline}
}

/* Back to top, in the rail. Appears only once there is something to go back up from. */
.railtop{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--stamp);text-decoration:none}
.railtop:hover{text-decoration:underline}

@media (max-width:900px){
  /* In the sticky footer it is a button at the end of the line, not a row. */
  .railtop{margin:0;padding:5px 10px;border:1px solid var(--stamp);border-radius:100px;
    flex:none;font-size:var(--fs-xs);margin-left:auto}
}

/* The sticky header must be opaque and sit above the pills it slides over, or a saffron
   selected pill shows through the seam as a stray line. */
.pills{position:relative;z-index:1}
#tbl thead th{background:var(--sink);box-shadow:0 -1px 0 var(--sink)}
#tbl thead th{top:calc(var(--filters-h,57px) - 1px)}

/* Sortable columns say so, and say which way. */
th.sortable{cursor:pointer}
th.sortable::after{content:"\2195";margin-left:6px;font-size:var(--fs-sm);
  color:var(--muted);opacity:1}
th.sortable.sorted{color:var(--ink)}
th.sortable.sorted::after{content:"\2191";opacity:1;color:var(--stamp)}
th.sortable.sorted.desc::after{content:"\2193"}

/* ---- target sizes and skip link -------------------------------------------------- */
/* Pills and the theme toggle were 23 to 27px tall, under the 24px minimum target size
   and well under what a thumb wants. Height comes from min-height rather than padding
   so the label stays optically centred at any font size. */
.pill{padding:8px 13px;min-height:36px}
.tbtn{padding:8px 11px;min-height:34px;display:inline-flex;align-items:center}
.jump{padding:9px 14px;display:inline-flex;align-items:center;min-height:34px}
.railtop{min-height:32px;display:flex;align-items:center}
.route{min-height:38px;display:inline-flex;align-items:center;justify-content:center}

/* Keyboard users land on the masthead first and would otherwise tab through the whole
   nav and filter bar to reach 5,438 rows. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--stamp);
  color:var(--paper);padding:10px 16px;font-family:var(--mono);font-size:var(--fs-sm);
  text-decoration:none}
.skip:focus{left:0}
main:focus{outline:none}

/* The index table must not sit in its own scroll container. .tscroll sets
   overflow-x:auto, which makes it the scrolling ancestor for anything sticky inside it,
   so the sticky header positioned itself --filters-h down from the top of the TABLE
   instead of the viewport and floated in the middle of the rows. The index table is
   table-layout:fixed with percentage columns, so it never needs to scroll sideways and
   can give the overflow up; the other tables on the site keep theirs. */
@media (min-width:901px){ .schemes .tscroll{overflow:visible} }

/* Asking for corrections. Placed after the checks and before provenance: a reader who
   has just seen a gap is the one most likely to know where the figure actually is. */
.report{border:1px solid var(--rule-strong);border-left:3px solid var(--stamp);
  background:var(--surface);padding:15px 20px;margin:26px 0;font-size:var(--fs-sm)}
.report b{display:block;margin-bottom:5px;color:var(--ink)}
.report a{display:inline-block;margin-top:9px;color:var(--stamp);font-family:var(--mono);
  border:1px solid var(--stamp);border-radius:100px;padding:8px 14px;text-decoration:none;
  min-height:34px;align-items:center}
.report a:hover{background:var(--stamp);color:var(--paper)}

/* Sources on every page, not only on the ones that happen to discuss them. A reader who
   arrives on one scheme page out of 5,438 should not have to go looking for where its
   numbers came from. */
footer .srcs{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;align-items:baseline;
  padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
footer .srcs b{grid-column:1/-1;font-family:var(--mono);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--faint);font-weight:400;
  margin-bottom:4px}
footer .srcs a{color:var(--stamp);text-decoration:none;font-size:var(--fs-sm);
  white-space:nowrap}
footer .srcs a:hover{text-decoration:underline}
footer .srcs span{color:var(--muted);font-size:var(--fs-sm)}
footer .srcs p{grid-column:1/-1;margin:10px 0 0;color:var(--faint);
  font-size:var(--fs-sm);max-width:70ch}
footer .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
footer .foot a{color:var(--stamp)}
@media (max-width:620px){footer .srcs{grid-template-columns:1fr;gap:2px 0}
  footer .srcs span{margin-bottom:7px}}

.listedby{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.listedby .lbl{font:500 var(--fs-xs)/1 var(--sans);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}