/* House style for the lab's public research sites.
   Tokens pasted whole from the lab web aesthetic; the palette is the lab's, not the CSPRP
   print palette, so this site matches the other research sites rather than the reports.
   The mobile @media block is LAST on purpose: placed earlier it loses the cascade at equal
   specificity and only some rules apply. */

:root {
  color-scheme: light;
  --plane:#f6f3ec; --surface-1:#fffdf8;          /* warm paper, never grey */
  --text-primary:#1c2833; --text-secondary:#4a5765; --muted:#7f8c9b;
  --border:#e2dac9; --hair:#ece4d6; --grid:#ece4d6; --axis:#d9d0be;
  --gold:#9a8535; --navy:#1a2a5e;                 /* the Lab's two colors */
  --series-1:#1a2a5e; --series-2:#b2544a; --series-3:#9a8535;
  --accent-wash:#efe6d2;
  --shadow:0 1px 2px rgba(27,58,92,.06), 0 2px 10px rgba(27,58,92,.07);
  --shadow-lift:0 6px 22px rgba(27,58,92,.14);
  --display:"Space Grotesk",Inter,-apple-system,sans-serif;
  --body:Inter,-apple-system,system-ui,"Segoe UI",sans-serif;
  --serif:"Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#14161a; --surface-1:#1b1e24;
  --text-primary:#e7e3da; --text-secondary:#b3aea3; --muted:#8b8579;
  --border:#2c3037; --hair:#24272d; --grid:#2a2e35; --axis:#3a3f47;
  --gold:#c2a54e; --navy:#7ea3d8;
  --series-1:#7ea3d8; --series-2:#d1786c; --series-3:#c2a54e;
  --accent-wash:#2b3a4a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

header, nav.tabs, main, footer { max-width: 780px; margin: 0 auto; }

/* ---- the three signature elements ------------------------------------------------------ */

.rule::before {
  content: ""; display: block; width: 46px; height: 3px;
  background: var(--gold); margin-bottom: 11px; border-radius: 1px;
}

.eyebrow {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin: 0 0 5px;
}

blockquote {
  border-left: 3px solid var(--gold); padding-left: 16px; margin: 0;
  font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--text-primary);
}

/* ---- header ---------------------------------------------------------------------------- */

header { padding: 34px 0 8px; }

h1 {
  font-family: var(--display); font-weight: 600; font-size: 30px;
  line-height: 1.22; letter-spacing: -.012em; margin: 0 0 10px;
}
h1 a { color: var(--text-primary); text-decoration: none; }
h1 a:hover { color: var(--navy); }

.byline { margin: 0 0 12px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; }
.byline a { color: var(--navy); }

.statline {
  margin: 14px 0 4px; font-size: 12.5px; color: var(--text-secondary);
  letter-spacing: .01em;
}

/* The finding, above the sketch and the download buttons. Ron, 31 August 2026: it had been the
   opening line of the fourth panel down. Set larger than body text and against the gold rule,
   so it reads as the page's claim rather than as an introduction to one. */
.standfirst {
  font-size: 18.5px; line-height: 1.5; color: var(--text-primary);
  margin: 4px 0 26px; max-width: 62ch;
  border-left: 3px solid var(--gold); padding-left: 18px;
}
@media (max-width: 640px) { .standfirst { font-size: 16.5px; padding-left: 13px; } }

.mono { font-family: var(--mono); }
.small { font-size: 12.5px; }

/* ---- hero ------------------------------------------------------------------------------ */

/* The hero draws the finding rather than decorating the page. Ron, 31 August 2026: the
   fixed-count police result "is the core finding ... how do we make this most prominent". The
   two bars that go left are the finding, and the police bar is picked out in the accent color. */
.hero { margin: 10px 0 6px; }
.hero svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero .hbar { fill: var(--series-1); opacity: .34; }
.hero .hbar.up { fill: var(--series-1); opacity: .34; }
.hero .hbar.down { fill: var(--series-2); opacity: .55; }
.hero .hbar.down.key { opacity: 1; }
.hero .hzero { stroke: var(--axis); stroke-width: 1; }
.hero .hlab { font-family: var(--body); font-size: 14.5px; fill: var(--text-primary); }
.hero .hval { font-family: var(--mono); font-size: 12.5px; fill: var(--text-secondary); }
.hero .hval.down { fill: var(--series-2); }
.hero .hax {
  font-family: var(--mono); font-size: 11px; fill: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.hero figcaption {
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-top: 8px;
}
@media (max-width: 640px) { .hero .hlab { font-size: 12.5px; } }

/* ---- nav ------------------------------------------------------------------------------- */

nav.tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--border); margin: 18px auto 0; padding-bottom: 0;
}
nav.tabs a, nav.tabs .here {
  font-family: var(--display); font-size: 13.5px; font-weight: 500;
  padding: 9px 13px; text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
nav.tabs a { color: var(--text-secondary); }
nav.tabs a:hover { color: var(--navy); border-bottom-color: var(--hair); }
nav.tabs .here { color: var(--text-primary); border-bottom-color: var(--gold); }

/* ---- prose ----------------------------------------------------------------------------- */

main { padding-top: 26px; }

h2 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 40px 0 12px; }
h3 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 32px 0 10px; }
main > h2:first-child, main > h3:first-child { margin-top: 6px; }

p { margin: 0 0 16px; }
a { color: var(--navy); }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: .9em; background: var(--accent-wash);
       padding: 1px 4px; border-radius: 3px; }
:root[data-theme="dark"] code { background: var(--surface-1); }

/* ---- the plain layer --------------------------------------------------------------------- */

/* A short passage written for a reader, above the paper's own prose. It carries the gold spine
   so it reads as a different voice from the manuscript underneath it. */
.plain {
  border-left: 3px solid var(--gold); padding: 2px 0 2px 16px;
  margin: 0 0 22px; background: none;
}
.plain .eyebrow { margin-bottom: 4px; }
.plain p:last-child {
  margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text-primary);
}

/* ---- named comparisons ------------------------------------------------------------------- */

/* A visitor arriving at the front page cannot construct a comparison URL, because building one
   means already knowing which two groups are worth comparing. These are destinations. */
.presets { margin: 22px 0 26px; }
.presets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.presets li { margin: 0; }
.presets a {
  font-family: var(--display); font-size: 14.5px; font-weight: 500; text-decoration: none;
  display: block;
}
.presets a:hover { color: var(--gold); }
.presets .what {
  display: block; font-family: var(--body); font-size: 13px; font-weight: 400;
  line-height: 1.45; color: var(--text-secondary);
}
@media (min-width: 700px) { .presets ul { grid-template-columns: 1fr 1fr; gap: 14px 26px; } }

/* ---- contents list ---------------------------------------------------------------------- */

.toc {
  background: var(--surface-1); border: 1px solid var(--hair); border-radius: 6px;
  box-shadow: var(--shadow); padding: 14px 18px 16px; margin: 0 0 30px;
}
.toc .eyebrow { margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 3px; }
.toc a {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14px; line-height: 1.45; text-decoration: none;
  color: var(--text-secondary); padding: 3px 0;
}
.toc a:hover { color: var(--navy); }
.toc a.on { color: var(--text-primary); font-weight: 500; }
.toc .tocn {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  min-width: 14px; flex: none;
}
.toc a.on .tocn { color: var(--gold); }

/* The list was a fixed panel in the left margin on wide screens. Ron, 31 August 2026: it read
   as awkward, so it is a card at the top of the page at every width. It scrolls away with the
   rest of the page, which is what a contents list at the head of a document does. */
.toc ol { columns: 2; column-gap: 26px; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* ---- the findings panel on the landing page --------------------------------------------- */

/* The results as numbers, above any prose. Rendered server-side from site_numbers.json so it
   is there without JavaScript and cannot disagree with the paper. */
.panel .sub {
  display: block; font-family: var(--body); font-weight: 400; font-size: 12.5px;
  line-height: 1.4; color: var(--muted); margin-top: 2px;
}
td.num.big { font-family: var(--mono); font-size: 17px; font-weight: 500;
             color: var(--text-primary); }
.panel .tablewrap { box-shadow: none; border: none; background: none; }
.panel table { font-size: 14px; }
.panel table td { padding: 9px 10px 9px 0; }
.panel .eyebrow { margin-bottom: 6px; }
.panel .tabnote { margin-bottom: 0; }

/* ---- the sixteen-year chart -------------------------------------------------------------- */

/* Two lines carry the finding and six do not, so color marks which lines to read rather than
   decorating all eight. */
figure.chart { padding: 16px 14px 12px; }
figure.chart svg { display: block; width: 100%; height: auto; }
.chart .cg { stroke: var(--grid); stroke-width: 1; }
.chart .cax { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.chart .cl { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .cl.other { stroke: var(--axis); stroke-width: 1.5; }
.chart .cl.fall { stroke: var(--series-2); stroke-width: 2.5; }
.chart .cl.rise { stroke: var(--series-1); stroke-width: 2.5; }
.chart .clab { font-family: var(--display); font-size: 11.5px; font-weight: 500; }
.chart .clab.fall { fill: var(--series-2); }
.chart .clab.rise { fill: var(--series-1); }

/* ---- figures --------------------------------------------------------------------------- */

figure {
  margin: 26px 0; padding: 14px; background: var(--surface-1);
  border: 1px solid var(--hair); border-radius: 6px; box-shadow: var(--shadow);
}
/* The figures are opaque white PNGs, because the Word documents use the same files and want
   them that way. In dark mode they would be white slabs on a near-black page, so the card
   holding them is light on purpose and the caption stays on the page's own colours. */
:root[data-theme="dark"] figure:has(img) {
  background: #f2efe8; border-color: #cfc7b6;
}
:root[data-theme="dark"] figure:has(img) figcaption {
  color: #4a5765; border-top: 1px solid #ddd5c6; padding-top: 9px;
}
:root[data-theme="dark"] figure:has(img) .fignum { color: #1c2833; }
/* :has() is widely supported now; this is the fallback for anything that lacks it, which
   simply keeps the white plate readable rather than styling the caption. */
@supports not selector(figure:has(img)) {
  :root[data-theme="dark"] figure { background: #f2efe8; border-color: #cfc7b6; }
  :root[data-theme="dark"] figcaption { color: #4a5765; }
}
/* the SVG chart draws itself from the tokens, so it must not get the light plate */
:root[data-theme="dark"] figure.chart {
  background: var(--surface-1); border-color: var(--hair);
}
:root[data-theme="dark"] figure.chart figcaption {
  color: var(--text-secondary); border-top: none; padding-top: 0;
}
:root[data-theme="dark"] figure.chart .fignum { color: var(--text-primary); }
figure img { width: 100%; height: auto; display: block; }
figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.fignum { font-family: var(--display); font-weight: 600; color: var(--text-primary); }

/* the line under an exhibit group's heading, saying what the group answers */
.what { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 18px; }

/* ---- tables ---------------------------------------------------------------------------- */

.tabcap a, .fignum a { color: inherit; text-decoration: none; }
.tabcap a:hover, .fignum a:hover { color: var(--gold); }
/* an exhibit linked to from elsewhere should not sit under the top of the window */
[id^="table-"], [id^="figure-"], #the-swap, .panel[id] { scroll-margin-top: 18px; }
/* the permalink on the hero chart, so it can be sent on its own */
.permalink { white-space: nowrap; }
.tabcap {
  font-family: var(--display); font-size: 14.5px; font-weight: 600;
  margin: 34px 0 8px; color: var(--text-primary);
}
.tabnote { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin: 8px 0 26px; }

/* The pipeline's own number for the same table. The site numbers exhibits in the order it
   presents them, so this is what a reader holding the manuscript or reading tables.json
   matches against. Quiet: it is a footnote to the caption, not part of it. */
.srcnum {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--text-secondary); margin-left: 8px; white-space: nowrap;
}

.tablewrap {
  overflow-x: auto; background: var(--surface-1); border: 1px solid var(--hair);
  border-radius: 6px; box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 7px 11px; text-align: left; border-bottom: 1px solid var(--hair); }
th {
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  color: var(--text-secondary); background: var(--surface-1);
}
td.num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
/* a wide table keeps its row label in view, or the reader loses which row the numbers are for */
.rowlab {
  position: sticky; left: 0; background: var(--surface-1);
  border-right: 1px solid var(--hair); min-width: 190px;
}
tbody tr:last-child td { border-bottom: none; }

/* ---- explorer -------------------------------------------------------------------------- */

.explorer { margin: 22px 0; }

.dims { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dim {
  font-family: var(--display); font-size: 12.5px; font-weight: 500;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
}
.dim[aria-expanded="true"] { border-color: var(--gold); color: var(--text-primary); }
.dim .badge {
  display: inline-block; margin-left: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); vertical-align: middle;
}

/* One line saying what the chips do. The mechanism was there and invisible: the page opened on
   all 13,167 schools with nothing to say the headings were clickable. */
.hint { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 10px; }

/* Comparing two groups. Which group the chips are editing has to be obvious, or a click lands
   on the wrong one. */
.sides { display: inline-flex; gap: 0; margin-right: 8px; }
.sidebtn {
  font-family: var(--display); font-size: 12.5px; font-weight: 500; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary);
}
.sidebtn:first-child { border-radius: 20px 0 0 20px; }
.sidebtn:last-child { border-radius: 0 20px 20px 0; border-left: none; }
.sidebtn[aria-pressed="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--plane);
}
.cmp {
  font-family: var(--display); font-size: 12.5px; font-weight: 500; cursor: pointer;
  padding: 6px 11px; border: 1px dashed var(--border); border-radius: 20px;
  background: none; color: var(--navy);
}
.cmp[aria-pressed="true"] { border-style: solid; border-color: var(--gold); }
.active .which {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold); margin-right: 4px;
}

/* The difference column: color carries direction, the number carries size. */
td.diff { font-weight: 500; }
td.diff.up { color: var(--series-1); }
td.diff.down { color: var(--series-2); }
td.diff.flat { color: var(--muted); }
tr.countrow td { border-top: 2px solid var(--hair); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.chip {
  font-family: var(--mono); font-size: 12px; padding: 4px 9px;
  border: 1px solid var(--hair); border-radius: 4px;
  background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
}
.chip:hover { border-color: var(--gold); color: var(--text-primary); }
.chip[aria-pressed="true"] { border-color: var(--gold); background: var(--accent-wash);
                             color: var(--text-primary); }
.chip .n { color: var(--muted); margin-left: 6px; }

.active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px;
          min-height: 26px; }
.active .tag {
  font-family: var(--mono); font-size: 12px; padding: 4px 9px;
  border: 1px solid var(--gold); border-radius: 4px; background: var(--accent-wash);
  cursor: pointer;
}
.active .tag .dim { all: unset; color: var(--muted); }
.active .clear { font-family: var(--display); font-size: 12.5px; color: var(--navy);
                 background: none; border: none; cursor: pointer; }
.active .copylink {
  font-family: var(--display); font-size: 12.5px; color: var(--navy); cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 10px; margin-left: auto;
}
.active .copylink:hover { border-color: var(--gold); }

.panel {
  background: var(--surface-1); border: 1px solid var(--hair); border-radius: 6px;
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 18px;
}
.panel h3 { margin: 0 0 4px; font-size: 15px; }
.panel .n { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0 0 14px; }

.bars { display: grid; grid-template-columns: 168px 1fr 54px; gap: 5px 10px; align-items: center; }
.bars .lab { font-size: 13px; color: var(--text-secondary); }
.bars .track { background: var(--accent-wash); border-radius: 2px; height: 15px; }
.bars .fill { background: var(--series-1); height: 15px; border-radius: 2px; }
.bars .fill.gov { background: var(--series-1); }
.bars .fill.com { background: var(--series-3); }
.bars .val { font-family: var(--mono); font-size: 12.5px; text-align: right; }

.suppressed { font-family: var(--mono); font-size: 13px; color: var(--series-2); }

/* ---- data & code panel ----------------------------------------------------------------- */

.actions { margin: 16px 0 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.primary {
  font-family: var(--display); font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: 5px; border: 1px solid var(--navy);
  background: var(--navy); color: var(--plane); cursor: pointer; text-decoration: none;
  display: inline-block;
}
.primary:hover { box-shadow: var(--shadow-lift); color: var(--plane); }
.secondary { font-family: var(--display); font-size: 13.5px; color: var(--navy); }

/* the R session */
.rnote { font-size: 13px; line-height: 1.55; color: #93a4b8; margin: 0 0 10px; }
.rnote a { color: #7ee08a; }
.ic { font-family: var(--mono); background: #172029; color: #d9e2ec;
      padding: 1px 4px; border-radius: 3px; }
#rcode {
  width: 100%; min-height: 132px; resize: vertical;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  background: #0b0f14; color: #d9e2ec; border: 1px solid #2a3340; border-radius: 5px;
  padding: 10px 12px;
}
.rbar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.rbar button {
  font-family: var(--mono); font-size: 12px; padding: 5px 11px; cursor: pointer;
  background: #172029; border: 1px solid #2a3340; border-radius: 4px; color: #d9e2ec;
}
.rbar button:hover { border-color: #7ee08a; }
#rstatus { font-family: var(--mono); font-size: 11.5px; color: #5f7186; margin-left: auto; }
#rout {
  margin: 0; padding: 10px 12px; background: #0b0f14; border: 1px solid #2a3340;
  border-radius: 5px; max-height: 320px; overflow: auto;
}
#rout code { font-family: var(--mono); font-size: 12.5px; color: #d9e2ec;
             background: none; padding: 0; white-space: pre; }

details#tools { margin: 18px 0 8px; }
/* The collapsed bar is the terminal too, not a card that opens onto one. Ron, 31 August 2026:
   make it techy, black. It reads the same in both themes on purpose: a terminal does not
   change color with the page. */
details#tools > summary {
  font-family: var(--mono); font-size: 13px; font-weight: 500; cursor: pointer;
  padding: 11px 14px; border: 1px solid #222a35; border-radius: 6px;
  background: #10141a; color: #d9e2ec; list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0;
}
details#tools > summary:hover { border-color: #33414f; }
details#tools[open] > summary {
  border-radius: 6px 6px 0 0; border-bottom-color: transparent;
}
details#tools > summary::-webkit-details-marker { display: none; }
details#tools .prompt { font-family: var(--mono); color: #7ee08a; margin-right: 9px; }
details#tools .dim2 { color: #5f7186; font-size: 12px; margin-left: 10px; }

/* The live badge, as on the Hansard site: this panel runs a real R session in the tab, and
   nothing else on the page says so. */
.livebadge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-family: var(--mono); font-size: 11px; color: #7ee08a;
  border: 1px solid #2a4a33; background: #16241b; border-radius: 20px;
  padding: 2px 9px; margin-left: 10px;
}
.livebadge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #7ee08a;
  animation: livepulse 1.8s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .livebadge .dot { animation: none; } }

.toolbody {
  background: #10141a; border-radius: 0 0 6px 6px; margin-top: 0; padding: 14px;
  border: 1px solid #222a35; border-top: 1px solid #1c242e;
}
.tabsrow { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tt {
  font-family: var(--mono); font-size: 12px; padding: 5px 10px; cursor: pointer;
  background: transparent; border: 1px solid #2a3340; border-radius: 4px; color: #93a4b8;
}
.tt[aria-selected="true"] { color: #d9e2ec; border-color: #4a5b70; background: #172029; }
.toolnote { font-family: var(--mono); font-size: 11px; color: #5f7186; margin-left: auto;
            align-self: center; }
.tp { margin: 0; overflow-x: auto; }
.tp code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.62; color: #d9e2ec;
  background: none; padding: 0; white-space: pre;
}
.tp .cm { color: #6f8296; }
.tp .st { color: #7ee08a; }
.hidden { display: none; }

/* ---- footer ---------------------------------------------------------------------------- */

footer {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-secondary);
}
footer p { margin: 0 0 9px; }
/* The lockup sits at the top of the page. On the Mothers and Sons cover it is at the foot of
   the title page; Ron asked for the top here, 31 August 2026. */
header .lockup { max-width: 430px; width: 100%; height: auto; display: block; margin-bottom: 22px; }
:root[data-theme="dark"] header .lockup { filter: invert(1) hue-rotate(180deg); opacity: .85; }

/* The eight are used on every page and were named on only one of them. */
.eightnote {
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  border-left: 3px solid var(--hair); padding-left: 14px; margin: 0 0 26px;
}
.eightnote strong { color: var(--text-primary); font-weight: 600; }

.share { position: absolute; top: 16px; right: 20px; display: flex; gap: 8px; }
.share button, .share a {
  font-family: var(--mono); font-size: 13px; background: none; border: none;
  color: var(--muted); cursor: pointer; text-decoration: none; padding: 3px 5px;
}
.share button:hover, .share a:hover { color: var(--navy); }

/* ---- print: LAST but one, before the mobile block ---------------------------------------- */

/* Academics print. Without this, a printed page carried the tab bar, the terminal panel, the
   hero, the contents card and the share icons, and the tables clipped at the paper's edge. */
@media print {
  :root { color-scheme: light; }
  html, body {
    background: #fff !important; color: #000 !important;
    font-size: 10.5pt; padding: 0; margin: 0;
  }
  header, main, footer { max-width: none; }

  /* the page's furniture, which is not the paper */
  nav.tabs, .hero, .presets, details#tools, .share, .actions,
  .dims, .chips, .active, .hint, .toc { display: none !important; }

  /* the explorer is a tool, so it prints as a pointer to itself rather than as a dead widget */
  #explorer::after {
    content: "The explorer is interactive. See school-connectivity.pages.dev/explorer";
    font-style: italic;
  }
  #explorer > * { display: none !important; }

  a { color: #000; text-decoration: none; }
  /* a printed link is useless without its destination */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }

  h1 { font-size: 16pt; }
  h2 { font-size: 13pt; page-break-after: avoid; }
  h3 { font-size: 11.5pt; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* an exhibit should not be split across a page break, and a table cannot scroll on paper */
  figure, .panel { page-break-inside: avoid; box-shadow: none; border: 1px solid #ccc;
                   background: #fff !important; }
  figcaption, .tabnote, .what { color: #333 !important; }
  .tablewrap { overflow: visible !important; box-shadow: none; border: none; }
  table { font-size: 8.5pt; page-break-inside: avoid; }
  td, th { border-bottom: 1px solid #ddd; }
  .rowlab { position: static !important; background: none !important; }
  td.num { white-space: normal; }

  footer { border-top: 1px solid #999; page-break-inside: avoid; }
  footer .lockup { max-width: 300px; filter: none !important; }
}

/* ---- mobile: LAST in the file ---------------------------------------------------------- */

@media (max-width: 640px) {
  body { padding: 0 14px 48px; font-size: 15.5px; }
  h1 { font-size: 23px; }
  h2 { font-size: 19px; }
  header { padding-top: 26px; }
  .share { position: static; justify-content: flex-end; margin-bottom: 6px; }
  nav.tabs { gap: 0; }
  nav.tabs a, nav.tabs .here { padding: 8px 9px; font-size: 12.5px; }
  /* Arriving from a named comparison, the table sat 97px below the fold on a phone: the
     dimension pills wrapped to three lines and the copy-link took a row of its own. */
  .dim, .cmp, .sidebtn { font-size: 11.5px; padding: 5px 9px; }
  .dims { gap: 4px; }
  .active { gap: 4px; }
  .active .copylink { margin-left: 0; padding: 3px 8px; font-size: 11.5px; }
  .active .tag { font-size: 11.5px; padding: 3px 7px; }
  #exptitle { margin-bottom: 8px; }
  .hint { margin-bottom: 8px; }
  .bars { grid-template-columns: 116px 1fr 46px; gap: 4px 7px; }
  .bars .lab { font-size: 12px; }
  .rowlab { min-width: 128px; }
  figure { padding: 10px; }
  footer .lockup { max-width: 100%; }
}

/* ---- the adjudication panel on the theory page ------------------------------------------- */
/* Ron, 31 August 2026: "something that shows we are adjudicating between the two". Three rows,
   two prediction columns, and what the survey shows. The marks carry the direction so the row
   can be read across without reading the words. */
.adjudication th { vertical-align: bottom; font-size: 13px; }
.adjudication th .who {
  display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  color: var(--text-secondary); margin-top: 3px; letter-spacing: 0;
}
.adjudication td.rowlab { font-size: 13px; line-height: 1.45; min-width: 15rem; }
.adjudication td.predcell { text-align: center; vertical-align: middle; white-space: nowrap; }
.adjudication td.found { font-size: 12.5px; line-height: 1.45; min-width: 14rem; }
.pred {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
}
.pred.up   { color: #1a5e33; background: #e8f2ea; border-color: #cfe3d5; }
.pred.down { color: #7a2b2b; background: #f6eaea; border-color: #e7d2d2; }
.pred.none { color: var(--text-secondary); background: transparent; border-color: var(--hair); }
.pred.up::before   { content: "\2191 "; }
.pred.down::before { content: "\2193 "; }
.pred.none::before { content: "\2013 "; }
.fits {
  display: block; margin-top: 5px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold);
}
[data-theme="dark"] .pred.up   { color: #8fd3a6; background: #17281d; border-color: #26402e; }
[data-theme="dark"] .pred.down { color: #e2a1a1; background: #2a1a1a; border-color: #432929; }
@media (max-width: 700px) { .adjudication td.rowlab { min-width: 12rem; } }

/* ---- the two-mode schematic on the approach tab ------------------------------------------ */
/* Our own drawing of the shape of the two studies. The figures in Metz, Leifeld and Ingold
   (2019) belong to the journal, so the page links the article rather than reproducing them. */
.schematic { margin: 26px 0 30px; }
.schematic svg { display: block; width: 100%; height: auto; }
.schematic .node.actor { fill: var(--series-1); }
.schematic .node.org { fill: var(--series-3); }
.schematic .edge { stroke: var(--axis); stroke-width: .7; fill: none; opacity: .75; }
.schematic .edge.among { stroke: var(--series-2); stroke-width: .9; opacity: .8; }
.schematic .divider { stroke: var(--hair); stroke-width: 1; }
.schematic .cap {
  font-family: var(--display); font-size: 9px; font-weight: 600; fill: var(--text-primary);
}
.schematic .sub { font-family: var(--mono); font-size: 7.5px; fill: var(--text-secondary); }
.schematic figcaption {
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-top: 10px;
}

/* The questionnaire's own wording, inside the validation panel's row labels. Ron, 3 September
   2026: "put the actual questions in the table so they are evident." Set as a list in the
   serif face so the questions read as quoted material rather than as more of the label. */
ul.asked {
  margin: 6px 0 4px; padding-left: 18px; list-style: none;
  font-family: var(--serif); font-size: 13.5px; line-height: 1.45;
  color: var(--text-primary);
}
ul.asked li { margin: 0 0 2px; position: relative; }
ul.asked li::before {
  content: "\201C"; position: absolute; left: -14px; color: var(--gold); font-size: 15px;
}

/* The boundary of the claim, at the top of the front page. Ron, 3 September 2026: "make this
   EXTREMELY CLEAR on the website". The finding is about the mix and not the level, and a reader
   who takes it for a level claim will check and find it overstated. Set apart from the two
   paragraphs above it so it cannot be skimmed past as more of the same. */
.standfirst.caution {
  font-size: 15.5px; border-left-color: var(--series-2);
  color: var(--text-secondary); margin-top: -14px;
}