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

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

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

.hero { margin: 8px 0 4px; }
.hero svg { display: block; width: 100%; height: 108px; overflow: visible; }
.hero .hbar { fill: var(--series-1); }
.hero .hwash { fill: var(--axis); }
.hero .hcap { font-family: var(--mono); font-size: 10.5px; fill: var(--text-secondary); }
.hero .hlab { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }

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

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

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

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

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