/* School-days page. Loaded after explorer.css, which carries the design
   tokens, the type scale and the base page rules. Nothing here redefines a
   token: the palette is specified once, in CLAUDE.md, and read from there.

   The heatmap uses the six-step ranking ramp rather than a continuous
   gradient. A continuous scale would let a cell land anywhere in the range,
   and the guarantee that black text clears 9:1 on every step would go with it
   -- which matters here more than anywhere else on the site, because every
   cell prints its own number. Six steps also survive greyscale and colour
   deficiency, since lightness falls at every step. */

.wrap.school{max-width:1600px;margin:0 auto;padding:22px 5% 72px;
  display:flex;flex-direction:column;gap:34px}
@media (max-width:640px){.wrap.school{padding:16px 4% 56px;gap:26px}}

/* The masthead runs the full width of the column. explorer.css caps
   .standfirst at 62ch, which reads as an indented block; CLAUDE.md records
   that the max-width caps were removed deliberately, so it is undone here
   rather than inherited. */
/* The masthead runs the full width of the column: the actions used to sit
   beside it and now live in the sticky block below, which gives the title the
   whole measure back. explorer.css caps .standfirst at 62ch, which reads as an
   indented block, and CLAUDE.md records that the caps were removed on purpose,
   so it is undone here rather than inherited. */
.masthead{padding:0;margin:0}
.masthead .mast-text{min-width:0}
.masthead h1{font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,5vw,46px);line-height:1.1;margin:0 0 16px;
  letter-spacing:-.01em;padding:0}
.masthead .eyebrow,.masthead .standfirst{padding:0;margin-left:0}
.wrap.school .standfirst{max-width:none}

.panel{background:var(--surface);border:1px solid var(--hair);padding:26px 26px 30px;
  display:flex;flex-direction:column;gap:18px}
@media (max-width:640px){.panel{padding:18px 16px 22px}}
.panel h2{font-family:var(--font-display);font-weight:400;font-size:27px;margin:0;line-height:1.2}
.panel h3{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.panel p{margin:0;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.panel p.small{font-size:15px;color:var(--muted)}
.panel p strong{color:var(--ink);font-weight:600}

/* controls */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  padding:14px 16px;background:var(--surface-2);border:1px solid var(--hair)}
.controls label{font-size:14.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.controls select{font-family:var(--font-ui);font-size:14.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:2px;padding:5px 8px}
.controls select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.controls .gloss{flex-basis:100%;margin:0;font-size:14px;color:var(--muted)}
.toggle{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:var(--ink-2);cursor:pointer}

/* heatmap */
.gridwrap{overflow-x:auto;display:flex;justify-content:center}

/* Wide enough, and the two margin charts stand beside the grid in the space
   the grid does not use -- the grid is capped, so on a full-width column that
   space would otherwise be padding. Narrower than that, they replace the grid
   behind a toggle rather than being stacked underneath it, because a reader on
   a small screen wants one of the two, not both in sequence. */
/* The charts sit centred against the grid rather than hanging from its top
   edge: two short panels beside a tall table read as an afterthought pinned to
   the corner otherwise. */
.gridrow{display:flex;gap:24px;align-items:stretch}
/* The grid takes only the width it needs and sits hard left, so everything
   left over goes to the charts rather than to padding either side of a table
   that is capped anyway. */
.gridrow .gridwrap{flex:1 1 auto;justify-content:flex-start;min-width:0}
.sidecharts{flex:0 0 33%;max-width:33%;display:flex;flex-direction:column;
  justify-content:center;gap:20px}
.sidechart svg{display:block;width:100%;height:auto;overflow:visible}
.sidechart .t{font-family:var(--font-ui);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--muted);font-weight:600}
/* One user unit in these charts is one real pixel -- the script sizes the
   viewBox to the panel -- so these are true sizes and hold whether the chart
   stands beside the grid or replaces it. */
.sidechart .ax{font-family:var(--font-mono);font-size:13.5px;fill:var(--muted);
  font-variant-numeric:tabular-nums}
.sidechart .axis{stroke:var(--axis)}
.sidechart .gridline{stroke:var(--grid)}
.sidechart .zero{stroke:var(--axis);stroke-dasharray:3 2}
.sidechart .sline{fill:none;stroke:var(--s-all);stroke-width:2.5}
.sidechart .sdot{fill:var(--s-all)}
.sidechart .sdot.ns{fill:var(--surface);stroke:var(--muted);stroke-width:1.8}
.sidechart circle{cursor:help}
.graphtoggle{display:none}

@media (max-width:1019px){
  .sidecharts{display:none}
  .graphtoggle{display:inline-flex}
  .gridrow.graphs .gridwrap{display:none}
  /* Standing in for the grid, the pair should not swell to the width of the
     column: a line chart of twelve points does not get more readable for being
     a thousand pixels wide, it just gets flatter. */
  .gridrow.graphs .sidecharts{display:flex;flex:1 1 auto;max-width:520px;
    margin:0 auto}
  /* On its own again, the grid goes back to the middle of the column. */
  .gridrow .gridwrap{margin:0 auto;justify-content:center}
}
/* Sized so the whole grid clears a laptop viewport without scrolling. Each
   cell is a third smaller than it was in both directions; the table no longer
   fills the column and is centred instead, which keeps it square rather than
   letting it stretch wide and short on a big monitor. */
table.heat{border-collapse:collapse;width:100%;max-width:545px;margin:0 auto;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px}
table.heat th{font-family:var(--font-ui);font-weight:500;font-size:12px;color:var(--muted);
  padding:4px 6px;text-align:left;white-space:nowrap}
table.heat thead th{text-align:center}
/* Cells are sized so the whole grid comes out roughly square at a typical
   reading width: eight columns across, thirteen rows down. A wide, shallow
   strip is harder to read across and gives a small hover target on the very
   thing the page wants people to explore. */
table.heat td{padding:3px;text-align:center;color:var(--ink);
  border:1px solid var(--surface);min-width:37px;height:40px;vertical-align:middle}
table.heat td .big{display:block;font-size:13px;line-height:1.2;
  font-variant-numeric:tabular-nums}
table.heat td.thin .big{color:var(--muted)}
table.heat td.r1{background:var(--ramp-1)}
table.heat td.r2{background:var(--ramp-2)}
table.heat td.r3{background:var(--ramp-3)}
table.heat td.r4{background:var(--ramp-4)}
table.heat td.r5{background:var(--ramp-5)}
table.heat td.r6{background:var(--ramp-6)}
/* A cell under the ten-death line keeps its colour -- the pattern is still
   worth seeing -- but prints nothing, and is hatched so it cannot be mistaken
   for a measured zero. */
table.heat td.thin{background-image:repeating-linear-gradient(
  45deg,transparent 0 4px,rgba(18,18,26,.10) 4px 5px)}

.legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.legend .sw{width:26px;height:13px;display:inline-block;border:1px solid var(--hair)}

/* the two ratio tables */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:720px){.pair{grid-template-columns:1fr}}
table.ratios,table.tests{border-collapse:collapse;width:100%;font-size:15px}
table.ratios th,table.tests th{font-weight:500;text-align:left;color:var(--ink-2);
  padding:5px 10px 5px 0;white-space:nowrap}
table.ratios thead th,table.tests thead th{font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
table.ratios td,table.tests td{padding:5px 10px 5px 0;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.ratios td.num,table.tests td.num{text-align:right;color:var(--ink);font-weight:500}
table.ratios td.num.ns,table.tests td.num.ns{color:var(--muted);font-weight:400}
table.ratios td.ci,table.tests td.ci{font-size:13px;color:var(--muted)}
table.ratios tr.ref th{color:var(--muted)}
table.ratios tbody tr:hover,table.tests tbody tr:hover{background:var(--surface-2)}
table.tests td.vs{font-family:var(--font-ui);color:var(--muted)}

/* tiles */
/* The four tiles sit directly under the grid and carry no intervals and no
   method notes -- the grid above already gives both on hover, and a tile that
   has to be read is not doing a tile's job. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.tiles{grid-template-columns:1fr}}
.tiles .tile{background:var(--surface-2);border:1px solid var(--hair);
  padding:16px 16px 18px;display:flex;flex-direction:column;gap:2px}
.tiles .tile .big{font-family:var(--font-display);font-size:26px;font-weight:500;
  line-height:1.15;color:var(--ink)}
.tiles .tile .lab{font-family:var(--font-ui);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:2px}
.tiles .tile .pct{font-family:var(--font-mono);font-size:30px;line-height:1.1;
  color:var(--ink);margin-top:2px}
.tiles .tile .pct.ns{color:var(--muted)}
.tiles .tile .sub{font-family:var(--font-mono);font-size:14px;color:var(--ink-2);
  margin-top:2px}
.tiles .tile .sub .vs{font-family:var(--font-ui);color:var(--muted)}

/* charts */
figure.chart{margin:0;display:flex;flex-direction:column;gap:10px}
figure.chart svg{display:block;width:100%;height:auto;overflow:visible}
figure.chart figcaption{font-size:14px;color:var(--muted);line-height:1.5}
.chart .axis line,.chart .axis path{stroke:var(--axis);fill:none}
.chart .gridline{stroke:var(--grid)}
.chart .tick{font-family:var(--font-mono);font-size:11.5px;fill:var(--muted)}
.chart .atitle{font-family:var(--font-ui);font-size:21px;fill:var(--ink-2)}
.chart .serieslabel{font-family:var(--font-ui);font-size:13px;font-weight:600}
.chart .break{fill:rgba(18,18,26,.045)}
.chart .breaklab{font-family:var(--font-ui);font-size:12px;fill:var(--muted)}
.chart .modelline{fill:none;stroke:var(--s-all);stroke-width:2}

/* Two year colours for the pandemic chart. The site's purple and blue are
   reserved for girls and boys; reusing them on a chart that is not split by
   sex would mislead anyone moving between sections. Deep salmon against deep
   teal is one of the safest pairs under all three dichromacies, they differ in
   lightness as well as hue, and both lines are labelled at their right-hand
   end -- so colour is never the only channel here either. */
:root{--y2020:#c2452d;--y2021:#1d7874;
  /* the height of the two sticky rows; they must match */
  --barrow:46px}

.chart .line{fill:none;stroke-width:2}
/* The ordinary year is a band with its line through the middle, so the reader
   sees the range a month normally sits in rather than a single value they
   might read as exact. */
.chart .baseband{fill:rgba(18,18,26,.10);stroke:none}
.chart .line.ybase{stroke:var(--s-all);stroke-width:1.5;opacity:.55}
.chart .line.yobs{stroke:var(--y2020);stroke-width:2.5}
.chart .dot.yobs{fill:var(--y2020)}
.chart .bar{stroke-width:1.25}
.chart .bar.yobs{stroke:var(--y2020);opacity:.45}
/* How much school was open: context behind the data, deliberately faint, and
   an estimate rather than a measurement. Nothing is divided by it. */
.chart .inperson{fill:rgba(29,120,116,.10);stroke:rgba(29,120,116,.35);
  stroke-width:1;stroke-dasharray:3 2}
.chart .pctick{fill:rgba(29,120,116,.75)}
.chart .yearlab{font-family:var(--font-ui);font-size:14px;font-weight:600;fill:var(--ink-2)}
.chart .yearsplit{stroke:var(--hair-strong);stroke-width:1;stroke-dasharray:2 3}
.chart circle.dot{cursor:help}

.readout{background:var(--surface-2);border-left:3px solid var(--s-all);
  padding:14px 18px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.readout strong{font-family:var(--font-mono);color:var(--ink);font-weight:500}

.sources{font-size:14px;color:var(--muted);line-height:1.6}
.sources a{color:var(--ink-2)}

/* The 3x2: school months against day type. Six cells rather than eighty-four,
   each carrying enough deaths that the interval is narrow. Coloured on the
   same six-step ramp as the heatmap, ranked by rate, so the two read
   together. */
table.matrix{border-collapse:separate;border-spacing:6px;width:100%;min-width:560px}
table.matrix th{font-family:var(--font-ui);font-weight:500;font-size:13.5px;
  color:var(--muted);text-align:left;padding:4px 8px;white-space:nowrap}
table.matrix thead th{text-align:center}
table.matrix tbody th{vertical-align:middle}
table.matrix td{padding:14px 14px 12px;vertical-align:top;text-align:center;
  border:1px solid var(--hair);display:table-cell}
table.matrix td.r1{background:var(--ramp-1)}
table.matrix td.r2{background:var(--ramp-2)}
table.matrix td.r3{background:var(--ramp-3)}
table.matrix td.r4{background:var(--ramp-4)}
table.matrix td.r5{background:var(--ramp-5)}
table.matrix td.r6{background:var(--ramp-6)}
table.matrix td span{display:block}
table.matrix .big{font-family:var(--font-mono);font-size:27px;line-height:1.15;color:var(--ink)}
table.matrix td.ns .big{color:var(--ink-2)}
table.matrix .ci{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);margin-top:2px}
table.matrix .rate{font-family:var(--font-mono);font-size:14px;color:var(--ink);margin-top:8px}
table.matrix .n{font-family:var(--font-ui);font-size:12px;color:var(--ink-2);margin-top:3px}

/* person-year and death columns on the ratio tables */
table.ratios td.n,table.tests td.n{text-align:right;font-size:13px;color:var(--ink-2)}

/* Grid margins. The right-hand column compares each month with July, the
   bottom row compares each weekday with Saturday. They sit outside the ramp
   deliberately: they are a different quantity from the cells they border, and
   colouring them on the same scale would invite reading across the join. */
table.heat td.mrow,table.heat td.mcol,table.heat td.mall{background:var(--surface-2);
  border-left:2px solid var(--hair-strong);color:var(--ink);font-weight:500}
table.heat td.mcol{border-left:1px solid var(--surface);
  border-top:2px solid var(--hair-strong)}
/* The corner is both margins at once: every month, every weekday. */
table.heat td.mall{border-left:2px solid var(--hair-strong);
  border-top:2px solid var(--hair-strong);font-weight:600}
table.heat td.mrow.ns .big,table.heat td.mcol.ns .big,
table.heat td.mall.ns .big{color:var(--muted);font-weight:400}
table.heat td.mrow.ref .big,table.heat td.mcol.ref .big,
table.heat td.mall.ref .big{color:var(--muted);
  font-weight:400;font-family:var(--font-ui);font-size:11px}
table.heat tr.margin th.mhead,table.heat th.mhead{font-family:var(--font-ui);
  font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:600;white-space:nowrap}
table.heat tr.margin td{border-top:2px solid var(--hair-strong)}
table.heat td[data-tip]{cursor:help}

/* The mode selector sits under the grid it governs, so the relationship is
   obvious without a label saying so. */
.controls.under{margin-top:-4px;background:transparent;border:0;
  border-top:1px solid var(--hair);padding:12px 0 0}

/* The page-level selector. Everything below it answers to it, so it sits
   outside the panels rather than inside the first one, and sticks to the top
   once scrolled past -- on a long page the reader should never be looking at a
   figure without being able to see which children and which years it covers.
   position:sticky needs the flex parent not to clip it, hence overflow:visible
   on the wrap. */
.wrap.school{overflow:visible}
.pagebar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  min-height:var(--barrow);padding:6px 14px;box-sizing:border-box;background:var(--surface);
  border:1px solid var(--hair-strong);
  border-top:0}
.pagebar .field{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pagebar .k{font-family:var(--font-ui);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.pagebar .dash{color:var(--muted)}
.pagebar select{font-family:var(--font-ui);font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:2px;
  padding:4px 6px}
.pagebar select.agesel{font-weight:600}
/* Reset. It dims once the selection is already the default, so the control
   says whether it has anything to do rather than only what it does. */
.pagebar .reset{font-size:17px;line-height:1;padding:4px 8px;
  border:1px solid var(--hair-strong);border-radius:2px;background:var(--surface);
  color:var(--ink-2);cursor:pointer}
.pagebar .reset:hover{border-color:var(--ink-2);color:var(--ink)}
.pagebar .reset.off{color:var(--muted);border-color:var(--hair);cursor:default}
.pagebar .reset.off:hover{border-color:var(--hair);color:var(--muted)}
.pagebar select:focus-visible,.pagebar .pill:focus-visible{outline:2px solid var(--focus);
  outline-offset:1px}
/* Toggles hold their state in aria-pressed, so what a screen reader announces
   and what the code reads are the same attribute. */
.pagebar .pill{font-family:var(--font-mono);font-size:13.5px;line-height:1;
  padding:6px 9px;border:1px solid var(--hair-strong);border-radius:2px;
  background:var(--surface);color:var(--muted);cursor:pointer}
.pagebar .pill[aria-pressed="true"]{background:var(--ink);color:var(--chip-ink);
  border-color:var(--ink)}
.pagebar .pill:hover{border-color:var(--ink-2)}
#sk-sex-f[aria-pressed="true"]{background:var(--s-f);border-color:var(--s-f)}
#sk-sex-m[aria-pressed="true"]{background:var(--s-m);border-color:var(--s-m)}
/* Inline with the controls rather than on a line of its own: it is the answer
   to what they are set to, and it costs the bar no extra height. It wraps to
   its own line only when the row runs out of room. */
.pagebar .gloss{margin:0;font-size:12.5px;color:var(--muted);
  font-family:var(--font-mono);white-space:nowrap}
@media (max-width:859px){.pagebar .gloss{flex-basis:100%;white-space:normal}}
/* Once stuck, the description line would double the bar's height on every
   scroll. It stays for the first screen and folds away after. */
@media (max-width:859px){
  .pagebar{gap:8px 12px;padding:10px 12px}
  .pagebar label{font-size:13.5px}
  .pagebar .gloss{font-size:12.5px}
}

/* Help, reporting guidance and the selector travel together down the page.
   Two full-width buttons over the bar they belong to: the pair a reader might
   need in a hurry sits above the controls rather than beside a heading they
   have already scrolled past. */
.stickybar{position:sticky;top:0;z-index:20;display:flex;flex-direction:column}

/* One row, exactly the height of the bar below it. The two are set from the
   same variable rather than left to work out the same by accident, and both
   children are centred inside a fixed height rather than padded to it -- the
   details was taking .action's padding and its summary's on top, so that half
   of the row stood 24px taller than the link beside it. */
.stickybar .actionbar{display:flex;flex-wrap:nowrap;gap:0;height:var(--barrow);
  border:1px solid var(--hair-strong);border-bottom:0;background:var(--surface)}
.stickybar .actionbar > *{flex:1 1 50%;min-width:0;height:100%;
  border:0;background:var(--surface)}
.stickybar .actionbar > *:first-child{border-right:1px solid var(--hair)}
.stickybar .actionbar a.action,
.stickybar details.action > summary{
  display:flex;align-items:center;justify-content:center;gap:4px;
  height:100%;padding:0 14px;box-sizing:border-box;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.stickybar details.action{padding:0;position:relative}
.stickybar details.action[open] > summary{background:var(--surface-2)}
/* The help text drops over the page rather than growing the bar. A sticky bar
   that changes height when opened pushes everything the reader was looking at,
   and this one is one row high whether it is open or not. */
.stickybar .actionbody{position:absolute;left:-1px;right:-1px;top:100%;
  text-align:left;max-width:none;padding:14px 16px 16px;
  background:var(--surface);border:1px solid var(--hair-strong);border-top:0;
  box-shadow:0 6px 18px rgba(18,18,26,.10);z-index:5;white-space:normal}
@media (max-width:559px){
  .stickybar .actionbar a.action,
  .stickybar details.action > summary{font-size:13.5px;padding:0 8px}
}

/* The mode selector reads as a legend: a square equals this. It sits with the
   heading, where the heading leaves plenty of room, rather than under the grid
   labelled "Show" -- which described it as a display option when it is the key
   to what every square means. */
.panelhead{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 20px}
.panelhead h2{margin:0}
.legend{display:inline-flex;align-items:center;gap:8px}
.legend .swatch{width:26px;height:20px;display:inline-block;
  background:var(--ramp-4);border:1px solid var(--surface);
  outline:1px solid var(--hair)}
.legend .eq{font-family:var(--font-mono);font-size:16px;color:var(--muted)}
.legend select{font-family:var(--font-ui);font-size:14.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:2px;
  padding:5px 8px;font-weight:500}
.legend select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Nothing left in the row below the grid but the graphs toggle, and on a wide
   screen not even that. */
.controls.under:empty,.controls.under:has(> :only-child.graphtoggle){border-top:0}
@media (min-width:1020px){#sk-gridmodes{display:none}}


/* The pandemic chart's legend, above the drawing rather than described in a
   paragraph beneath it -- a screenshot of the chart never carried the
   paragraph. Swatches are the drawing's own colours, referenced rather than
   restated, so they cannot fall out of step with the chart. */
.sk-legend{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;
  margin:0 0 10px;font-family:var(--font-ui);font-size:14.5px;
  color:var(--ink-2)}
.sk-legend .li{display:inline-flex;align-items:center;gap:7px}
.sk-legend b{font-weight:500;color:var(--ink-2)}
.sk-legend .sw{display:inline-block;flex:0 0 auto}
.sk-legend .sw-open{width:16px;height:12px;
  background:rgba(29,120,116,.10);border:1px dashed rgba(29,120,116,.55)}
.sk-legend .sw-model{width:20px;height:0;
  border-top:2px solid var(--s-all);opacity:.75}
.sk-legend .sw-obs{width:20px;height:0;border-top:2.5px solid var(--y2020)}