/* pediatricsuicides.ca -- shared chart + page styling.

   The block between the BEGIN/END markers below is lifted verbatim from the
   <style> block of pediatric-suicide-rates.html and is regenerated from it.
   Everything after the END marker is this project's own and is preserved
   across regenerations -- the markers exist because a rebuild once silently
   dropped project rules that had been appended in the wrong place.

   Design tokens are specified in CLAUDE.md "Design system": one light theme,
   girls purple, boys sky blue, combined black, a light-blue-to-salmon ramp for
   rankings. Body is 17.5px; y-axis titles are 21px, deliberately; text blocks
   run the full section width. Do not "tidy" any of those. */

/* ===== BEGIN lifted from pediatric-suicide-rates.html ===== */
:root{
  color-scheme: light;
  /* One theme, deliberately. This is a page about children dying; it should
     read as a clear, quiet document in daylight, not as a console. The dark
     palette was removed rather than made lighter, so there is one set of
     colours to reason about and no second palette to keep validated. */
  --plane:#faf9f7;
  --surface:#ffffff;
  --surface-2:#f4f2ef;
  --ink:#12121a;
  --ink-2:#4a4a55;
  --muted:#7a7a85;
  --grid:#e6e3de;
  --axis:#c9c5be;
  --hair:rgba(18,18,26,.10);
  --hair-strong:rgba(18,18,26,.18);
  /* Series. Girls purple, boys sky blue, combined black.
     Purple and blue are the one pair that collapses under red-green colour
     deficiency, so they are separated by lightness as well as hue: measured
     across normal vision and all three dichromacies the worst separation
     between them is 2.96:1, against a 3:1 target. Combined is much darker
     than both and carries no hue at all. Every chart also labels its series
     at the end of the line, so colour is never the only channel. */
  --s-f:#4c1d95;
  --s-m:#2196e3;
  --s-all:#12121a;
  /* The trend lines drawn over the rates on "Over time". A shade off the
     series they belong to rather than a colour of their own -- the dash is
     what says "fitted", and a fourth and fifth hue on a chart that already
     carries three would be read as two more series. Darker for the two that
     are already light enough to darken; lighter for combined, which is
     near-black and has nowhere darker to go. */
  --s-f-trend:#37156b;
  --s-m-trend:#186ca3;
  --s-all-trend:#59595f;
  --s-f-band:rgba(76,29,149,.14);
  --s-m-band:rgba(33,150,227,.18);
  /* Faint washes for the two halves of a ratio chart, so which sex is higher
     reads without arithmetic. Light enough that gridlines, tick labels and the
     series itself all stay legible on top. */
  --s-m-wash:rgba(33,150,227,.075);
  --s-f-wash:rgba(76,29,149,.06);
  /* Ranking ramp: light blue at the bottom to salmon at the top. Lightness
     falls at every step, so the order survives greyscale and colour
     deficiency, and every step keeps black text above 9:1. */
  --ramp-1:#ecf2f9;
  --ramp-2:#e0eaf2;
  --ramp-3:#e5dfd8;
  --ramp-4:#e7d1c5;
  --ramp-5:#e9bfb2;
  --ramp-6:#e8a89b;
  --chip:#12121a;
  --chip-ink:#faf9f7;
  --focus:#4c1d95;
  --edit:#4c1d95;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--plane);color:var(--ink);
  font-family:var(--font-ui);font-size:17.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.page{max-width:1060px;margin:0 auto;padding:22px 24px 72px;display:flex;flex-direction:column;gap:28px}
@media (max-width:640px){.page{padding:16px 16px 56px;gap:22px}}

/* editing */
.editbar{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  min-height:30px;font-size:13.5px;color:var(--muted);
}
.editbar.hide{display:none}
.editbar .grow{flex:1}
button.ghost.hide{display:none}
.modeswitch{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.modeswitch input{accent-color:var(--focus);width:16px;height:16px;cursor:pointer;margin:0}
body:not(.detail) .detail-only{display:none}
body.detail .simple-only{display:none}
button.ghost{
  appearance:none;background:var(--surface);border:1px solid var(--hair-strong);border-radius:2px;
  font-family:var(--font-ui);font-size:13.5px;color:var(--ink-2);padding:6px 12px;cursor:pointer;
}
button.ghost:hover{color:var(--ink);border-color:var(--ink-2)}
button.ghost[aria-pressed="true"]{background:var(--chip);color:var(--chip-ink);border-color:var(--chip)}
button.ghost[disabled]{opacity:.5;cursor:default}
body.editing [data-t]{
  outline:1px dashed var(--edit);outline-offset:4px;border-radius:2px;
}
body.editing [data-t]:focus{outline:2px solid var(--edit);background:var(--surface-2)}

.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 14px}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,5.4vw,54px);line-height:1.06;letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance}
.standfirst{font-family:var(--font-display);font-size:clamp(17px,2.1vw,20px);line-height:1.5;color:var(--ink-2);max-width:62ch;margin:0}
.rule{height:1px;background:var(--hair);border:0;margin:0}

.notes{background:var(--surface);border:1px solid var(--hair);border-left:3px solid var(--s-f);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.notes h2{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0}
.notes p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.notes strong{color:var(--ink);font-weight:600}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--hair);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.tile .lab{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tile .val{font-family:var(--font-display);font-size:38px;line-height:1;letter-spacing:-.02em}
.tile .val.ns{font-size:29px;color:var(--ink-2)}
.tile .sub{font-size:13.5px;color:var(--ink-2);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tile .note{font-size:13.5px;color:var(--muted)}

/* Tabs that look like tabs. The underlined version read as a row of links,
   and people did not realise the views were switchable. Each is now a box
   joined to the panel below it, and the selected one opens into that panel by
   covering the dividing line. */
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:0 6px;
  border-bottom:1px solid var(--hair-strong)}
.tab{appearance:none;background:var(--surface-2);
  border:1px solid var(--hair-strong);border-bottom:1px solid transparent;
  border-radius:5px 5px 0 0;font-family:var(--font-ui);font-size:15.5px;
  font-weight:500;color:var(--ink-2);padding:9px 15px;cursor:pointer;
  margin-bottom:-1px;transition:background .12s,color .12s}
.tab:hover{background:var(--surface);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);
  font-weight:600;border-bottom-color:var(--surface)}
.tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

.panel{background:var(--surface);border:1px solid var(--hair);display:flex;flex-direction:column}
.viewhead{padding:22px 22px 0;display:flex;flex-direction:column;gap:6px}
.viewhead h2{font-family:var(--font-display);font-weight:400;font-size:27px;margin:0;letter-spacing:-.01em}
.viewhead p{margin:0;font-size:16px;color:var(--ink-2);max-width:70ch}

.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;padding:18px 22px;border-bottom:1px solid var(--hair)}
.ctl{display:none;flex-direction:column;gap:6px}
.ctl.on{display:flex}
.ctl > .lab{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.ctl .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
select{
  appearance:none;font-family:var(--font-ui);font-size:15.5px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--hair-strong);border-radius:2px;padding:6px 27px 6px 10px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
input[type=text].nameinput{
  font-family:var(--font-ui);font-size:15.5px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--hair-strong);border-radius:2px;padding:6px 10px;width:19ch;
}
select:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.seg{display:inline-flex;border:1px solid var(--hair-strong);border-radius:2px;overflow:hidden}
.seg button{appearance:none;background:var(--surface-2);border:0;border-right:1px solid var(--hair-strong);font-family:var(--font-ui);font-size:15px;color:var(--ink-2);padding:7px 13px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--chip);color:var(--chip-ink);font-weight:500}
.ctl.wide{flex:1 1 100%}
.ctl .sep{color:var(--muted);font-size:14.5px}
body[data-cmode="sel"] .contmode{display:none}
body[data-cmode="cont"] .selmode{display:none}
.months{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:center}
.months button{
  appearance:none;background:var(--surface-2);border:1px solid var(--hair-strong);border-radius:2px;
  font-family:var(--font-mono);font-size:13px;color:var(--ink-2);padding:5px 7px;cursor:pointer;min-width:35px;
}
.months button[aria-pressed="true"]{background:var(--chip);color:var(--chip-ink);border-color:var(--chip)}
.months .allbtn{font-family:var(--font-ui);font-size:13px;padding:4px 8px;margin-left:4px}
.toggle{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--ink-2);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--focus);width:15px;height:15px;cursor:pointer;margin:0}
.swatch{width:11px;height:11px;border-radius:2px;flex:none}

.chartwrap{padding:6px 10px 0;position:relative}
svg{display:block;width:100%;height:auto;overflow:visible}
.tt{position:absolute;pointer-events:none;z-index:5;opacity:0;transition:opacity .12s;background:var(--surface);border:1px solid var(--hair-strong);box-shadow:0 6px 22px rgba(0,0,0,.13);padding:9px 12px;font-size:13.5px;min-width:160px}
.tt .t-h{font-weight:600;margin-bottom:5px;font-size:13.5px}
.tt .t-r{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-2);line-height:1.6}
.tt .t-r b{color:var(--ink);font-weight:500}

.legend{display:flex;flex-wrap:wrap;gap:16px;padding:4px 22px 0}
.legend.stack{flex-direction:column;align-items:flex-start;gap:6px}
.legend .item{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ink-2)}
.cap{margin:2px 22px 0;font-size:14px;color:var(--muted)}

.readout{margin:18px 22px 0;padding:16px 18px;background:var(--surface-2);border:1px solid var(--hair);display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.readout p{margin:0;font-size:16.5px;line-height:1.6;max-width:78ch}
.readout .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}
button.copy{appearance:none;background:var(--surface);border:1px solid var(--hair-strong);border-radius:2px;font-family:var(--font-ui);font-size:13.5px;color:var(--ink-2);padding:6px 12px;cursor:pointer;flex:none}
button.copy:hover{color:var(--ink);border-color:var(--ink-2)}

details.tablewrap{margin:14px 22px 0;border-top:1px solid var(--hair);padding-top:12px}
details.tablewrap table{width:100%;table-layout:auto}
details.tablewrap summary{cursor:pointer;font-size:14.5px;color:var(--ink-2);list-style:none;display:inline-flex;gap:7px;align-items:center}
details.tablewrap summary::-webkit-details-marker{display:none}
details.tablewrap summary::before{content:"+";font-family:var(--font-mono);color:var(--muted)}
details[open].tablewrap summary::before{content:"\2212"}
.tablescroll{overflow-x:auto;margin-top:12px;max-height:460px;overflow-y:auto}
table{border-collapse:collapse;font-size:13.5px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;width:100%}
th,td{text-align:right;padding:5px 10px;border-bottom:1px solid var(--grid);white-space:nowrap}
th{position:sticky;top:0;background:var(--surface);color:var(--muted);font-weight:500;font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
th:first-child,td:first-child{text-align:left}

.method{margin:16px 22px 22px;font-size:14px;line-height:1.65;color:var(--muted)}
footer{display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--ink-2)}
footer h2{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0}
footer p{margin:0;line-height:1.6}
footer code{font-family:var(--font-mono);font-size:13px}
.warn{color:var(--ink);font-weight:500}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ===== END lifted ===== */

/* ---------- the sex control on a phone ----------
   Beside the years, not under them. Five buttons is a row of its own at
   375px, and the row it takes is the one the chart wanted. Closed, the
   control is the current pick and nothing else -- "M+F" -- and a tap opens
   the other four over the top of what follows rather than pushing it down,
   so the vertical space the whole page has been fighting for stays won.

   The open panel is absolutely positioned at fixed offsets, which is only
   safe because all five buttons show in DOM order once open: the stack is
   the same five rows every time, whichever one is pressed. */
@media (max-width:640px){
  /* The legend loses the line explaining the dashes. On a phone it wrapped to
     its own row above the chart, and it was explaining a dashed line sitting
     directly under it in the same colour -- a caption for something already
     obvious, costing a row the chart wanted. It stays on wider screens,
     where it costs nothing. */
  .legend .item.trendnote{display:none}
  .controls{gap:12px 16px}
  #c-range,#c-sex{flex:1 1 auto}
  .sexseg{position:relative;height:34px;overflow:visible}
  .sexseg > button{height:34px;line-height:20px;padding:6px 12px;
    font-size:14px;white-space:nowrap}
  .sexseg > button[aria-pressed="false"]{display:none}
  .sexseg > button[aria-pressed="true"]::after{content:" \25be";
    color:var(--muted)}
  .sexseg.open > button{display:block;position:absolute;left:0;
    width:max-content;min-width:100%;z-index:40;background:var(--surface);
    border:1px solid var(--hair-strong);border-bottom-width:0}
  .sexseg.open > button:last-child{border-bottom-width:1px}
  .sexseg.open > button:nth-child(1){top:0}
  .sexseg.open > button:nth-child(2){top:34px}
  .sexseg.open > button:nth-child(3){top:68px}
  .sexseg.open > button:nth-child(4){top:102px}
  .sexseg.open > button:nth-child(5){top:136px}
  .sexseg.open > button[aria-pressed="true"]{background:var(--chip);
    color:var(--chip-ink)}
  .sexseg.open > button[aria-pressed="true"]::after{content:""}
}

/* Baked sections: means restriction, Indigenous youth, provincial coverage.
   These are generated at build time rather than drawn in the browser, so the
   numbers are in the page source like every other headline figure here. */
.means-wrap{display:grid;grid-template-columns:minmax(150px,270px) 1fr;gap:18px;
  align-items:start;padding:18px 22px 4px}
@media (max-width:720px){.means-wrap{grid-template-columns:1fr;gap:8px}}
.means-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.means-key li{height:34px;display:flex;flex-direction:column;justify-content:center;
  font-size:14.5px;color:var(--ink-2);line-height:1.2}
.means-key.wide li{height:30px}
.means-key .k{color:var(--ink)}
.means-key .s{font-size:12px;color:var(--muted);text-transform:lowercase}
@media (max-width:720px){.means-key{display:none}}
.means-chart svg{display:block;width:100%;height:auto;overflow:visible}
#indigenous .notes{margin:18px 22px 0}
#indigenous .readout p{max-width:none}
.prov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px;
  padding:18px 22px 0}
@media (max-width:640px){.prov-grid{grid-template-columns:1fr}}
.prov-panel svg{display:block;width:100%;height:auto;overflow:visible}
#provincial .notes{margin:18px 22px 0}

/* Source citation. The organisation stays visible in both reading modes --
   the reader who has not ticked "Explanations" is the one most likely to want
   to check a figure. The per-dataset detail collapses: closed, each is a chip
   on a shared row; open, it takes a full row. Built on <details> rather than
   scripted tabs so it works with JavaScript off and keyboard behaviour comes
   for free. */
.srcnote{margin:0 0 12px}
.srcgrid{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.srcitem{flex:0 1 auto;max-width:100%;background:var(--surface);
  border:1px solid var(--hair-strong);border-radius:2px}
.srcitem[open]{flex-basis:100%;background:var(--surface-2)}
.srcitem>summary{cursor:pointer;list-style:none;padding:7px 12px;
  font-size:14px;color:var(--ink-2);display:flex;gap:8px;align-items:baseline;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srcitem>summary::-webkit-details-marker{display:none}
.srcitem>summary::before{content:"+";font-family:var(--font-mono);
  color:var(--muted);flex:none}
.srcitem[open]>summary::before{content:"\2212"}
.srcitem>summary:hover{color:var(--ink)}
.srcitem>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.srcn{font-size:12px;color:var(--muted);font-family:var(--font-mono)}
.srcbody{padding:2px 12px 12px;display:flex;flex-direction:column;gap:6px;
  font-size:14px;color:var(--ink-2)}
.srcbody .srcgrid{margin-top:4px}
.srcfull{margin:0;color:var(--ink)}
.srcmeta{font-size:13px;color:var(--muted)}
.srcbody a{color:var(--ink-2);word-break:break-all;
  font-family:var(--font-mono);font-size:12.5px}
.srcbody a:hover{color:var(--ink)}

/* State tile grid. Equal tiles, one hue at varying lightness -- readable under
   every form of colour vision deficiency because it never asks anyone to tell
   two hues apart. */
.mapwrap{padding:18px 22px 6px}
.maplegend{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  padding:4px 22px 0;font-size:13px;color:var(--ink-2);
  font-family:var(--font-mono)}
.maplegend .lg{display:inline-flex;align-items:center;gap:6px}
.maplegend .lg i{width:14px;height:12px;border-radius:2px;display:block}
.maplegend .lg-note{font-family:var(--font-ui);color:var(--muted);flex:1 1 100%}
.statepanel{border-top:1px solid var(--hair);margin-top:18px}
.statepanel-head{padding:18px 22px 0}
.statepanel-head h3{font-family:var(--font-display);font-weight:400;
  font-size:22px;margin:0 0 4px}
.statepanel-head p{margin:0;font-size:14.5px;color:var(--muted)}
#statechart,#bucketChart{display:block;width:100%;height:auto;overflow:visible}

/* The hidden radios are FIXED, not absolute, and that is load-bearing.

   Clicking a <label for=x> focuses input#x, and a browser scrolls a newly
   focused element into view. `.panel` is a flex container, and the static
   position of an absolutely-positioned child of a flex container is the
   container's content-box start -- not where the element sits in source
   order. So all ten of a section's radios were pinned at the top of the
   panel, above its heading and standfirst, and clicking "Boys" scrolled the
   page up 565px to reach an input that was 546px above the button that was
   pressed. Worse on a phone, where the heading wraps to more lines.

   Fixed at the viewport origin, the input is always already in view, so
   focusing it scrolls nothing. It keeps its place in the DOM, which is what
   the sibling selectors below read, and it stays focusable, which is what
   gives keyboard users the :focus-visible outline on the labels.

   Map mode toggle. A radio pair driven by CSS, so switching maps works with
   JavaScript off and both sets of numbers stay in the page source. */
.mm-radio{position:fixed;top:0;left:0;opacity:0;pointer-events:none;
  width:0;height:0}
.mapmodes{padding:16px 22px 0}
.mapmodes .seg label{
  appearance:none;background:var(--surface-2);border:1px solid var(--hair-strong);
  border-right:0;font-family:var(--font-ui);font-size:15px;color:var(--ink-2);
  padding:7px 14px;cursor:pointer;user-select:none}
.mapmodes .seg label:last-child{border-right:1px solid var(--hair-strong)}
#mm-all:checked ~ .mapmodes .seg label[for="mm-all"],
#mm-buckets:checked ~ .mapmodes .seg label[for="mm-buckets"],
#mm-lfl:checked ~ .mapmodes .seg label[for="mm-lfl"]{
  background:var(--chip);color:var(--chip-ink);border-color:var(--chip);font-weight:500}
.mm-radio:focus-visible ~ .mapmodes .seg label{outline:2px solid var(--focus);outline-offset:2px}
.mapbody .mapmode{display:none}
#mm-all:checked ~ .mapbody .mapmode-all,
#mm-lfl:checked ~ .mapbody .mapmode-lfl,
#mm-buckets:checked ~ .mapbody .mapmode-buckets{display:block}
/* The rate-over-time panel belongs to picking one state. In buckets mode the
   sorter replaces it rather than sitting under it. */
#mm-buckets:checked ~ .statepanel{display:none}
.statemap{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.statemap .tile-g{cursor:pointer}
.statemap .tile-g:hover rect,.statemap .tile-g:focus rect{stroke:var(--ink);stroke-width:2}
.statemap .tile-g:focus{outline:none}
.statemap .tile-g.sel rect{stroke:var(--ink);stroke-width:2.5}
.tt .t-sub{font-weight:400;color:var(--muted);font-size:12px}
.urbanchart{padding:18px 22px 0}
.urbanchart svg{display:block;width:100%;height:auto;max-width:760px;overflow:visible}

/* Two charts that mean the same thing, side by side. They share one scale
   (set in Python, not here) so the bar lengths are comparable across the
   pair; the only thing CSS must not do is let one panel render wider than
   the other, which would undo that. Hence 1fr 1fr and min-width:0. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;align-items:start}
.duo .duopanel{margin:0;min-width:0}
.duo .duopanel svg{display:block;width:100%;height:auto;overflow:visible}
.duo figcaption{font-family:var(--font-ui);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:0 0 6px}
/* Stacked well before a phone. Two 478-unit panels side by side in a 720px
   window are 350 units wide each, which scales their 15-unit labels to ten
   pixels -- the pair reads as a pair long after it has stopped being legible
   as a chart. Below this they stack full width; below 720 they switch to the
   phone drawing entirely. */
@media (max-width:880px){.duo{grid-template-columns:1fr;gap:22px}}
/* Which population each map is actually showing, stated under the toggle
   rather than only in the paragraphs below it. */
.modenote{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.modenote-lfl{color:var(--s-f)}
.mapmodes .modenote{display:none}
#mm-all:checked ~ .mapmodes .modenote-all,
#mm-lfl:checked ~ .mapmodes .modenote-lfl,
#mm-buckets:checked ~ .mapmodes .modenote-buckets{display:block}
/* The unit beside a headline figure. Small and quiet: it says what the number
   is measured in, it is not part of the number. Doubles as the "n.s." marker,
   where the figure stays visible and greyed rather than being replaced. */
.tile .val .unit{font-family:var(--font-ui);font-size:13.5px;color:var(--muted);
  letter-spacing:0;margin-left:5px;white-space:nowrap}
.tile .val.ns{font-size:38px;color:var(--ink-2)}
.tile .val.ns .unit{color:var(--muted)}

/* ===== shared page furniture =====
   Components that more than one page uses: the attribution under a figure, the
   two standing actions, the local editor's chrome, an empty slot, a prose
   block and the tooltip. They lived in school.css when the school page was the
   only page with them; the landing page has them too, and a second copy is how
   two pages drift apart. Anything genuinely page-specific -- the school page's
   sticky variants, for one -- stays where it was. */

/* Attribution. Under every figure in the page, and inside the two SVG charts
   as well, so a screenshot carries its source rather than arriving somewhere
   else unlabelled. */
/* Sits with the figure above it rather than floating between two things:
   right-justified, pulled up close, and a shade larger so it reads as a
   caption rather than as fine print. */
p.credit{font-size:13.5px;color:var(--muted);margin:-8px 0 0;
  font-family:var(--font-ui);text-align:right}
.chart text.credit{font-family:var(--font-ui);font-size:11px;fill:var(--muted)}
/* Two standing actions, at the top of the page and again at the foot. They are
   the same markup twice: a reader who has scrolled to the bottom of a page
   about children dying should not have to scroll back up to find a number. */
.actionbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
/* Narrow: full-width rows, not columns. Two of these fit side by side; three
   do not -- at 380px each column is a dozen characters wide and every label
   wraps to three lines. Stacked they are three thin rows that each open in
   place, which is less height than three wrapped columns and reads as a list
   of things you can tap rather than a squeezed toolbar. */
@media (max-width:859px){
  .actionbar{flex-direction:column;gap:6px;align-items:stretch}
  .actionbar .action{width:100%;font-size:13.5px;font-weight:500}
  /* The report link is an anchor, not a details, so it needs the row layout
     spelled out or its arrow sits tight against the label instead of at the
     end like the + on the two beside it. */
  a.action.report{padding:9px 14px;display:flex;align-items:center;
    justify-content:space-between;gap:10px}
  a.action.report::after{margin-left:auto}
  details.action > summary{padding:9px 14px;font-size:13.5px;
    display:flex;align-items:center;justify-content:space-between;gap:10px}
  details.action > summary::after{margin-left:auto;font-size:15px}
  .actionbody{padding:0 14px 12px;font-size:15px;line-height:1.55;
    max-width:none}
  .action.cite .apa{font-size:14px;padding-left:1.4em;text-indent:-1.4em;
    max-width:none}
}

/* Under 640 the three actions go back to ONE ROW. The stacked rule above was
   written when the labels were "Reporting about suicide?" and "Researchers'
   citation", which at 380px is three wrapped lines each; shortened to one
   word they fit across, and three taps on one row is a toolbar rather than a
   third of the first screenful.
   The labels are replaced rather than the markup changed, so the desktop bar
   still reads in full and the copy in content/ is still the one thing being
   edited. An OPEN block takes the whole width -- flex-basis 100% wraps it
   onto its own row -- because a panel of crisis numbers in a third of a
   phone is not readable. */
@media (max-width:640px){
  .actionbar{flex-direction:row;flex-wrap:wrap;gap:6px}
  /* On an excluded country's page the three do not share a row. Reporters and
     Citation are the pair a journalist uses; "Struggling?" is the one a person
     in trouble uses, and it should not be a third of a row shared with two
     editorial links. */
  .excluded .actionbar .action.help{flex:1 0 100%}
  .actionbar .action{width:auto;flex:1 1 0;min-width:0}
  .actionbar details.action>summary{padding:9px 4px;gap:3px;
    justify-content:center;font-size:0}
  .actionbar details.action>summary::before{font-size:12.5px;
    font-weight:600;white-space:nowrap}
  .actionbar .action.report>summary::before{content:"Reporters"}
  .actionbar .action.cite>summary::before{content:"Citation"}
  .actionbar .action.help>summary::before{content:"Struggling?"}
  .actionbar details.action>summary::after{margin:0;font-size:12.5px}
  .actionbar details.action[open]{flex:1 0 100%}
  .actionbar details.action[open]>summary{justify-content:space-between;
    padding:9px 14px}
}
.action{font-family:var(--font-ui);font-size:15px;font-weight:500;
  border:1px solid var(--hair-strong);background:var(--surface);color:var(--ink);
  padding:11px 18px;text-decoration:none;display:inline-block;cursor:pointer}
.action:hover{border-color:var(--ink-2);background:var(--surface-2)}
.action:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
details.action{padding:0;border-color:var(--s-f)}
details.action > summary{list-style:none;padding:11px 18px;cursor:pointer;
  font-weight:600;color:var(--s-f)}
details.action > summary::-webkit-details-marker{display:none}
details.action > summary::after{content:" +";color:var(--muted);font-weight:400}
details.action[open] > summary::after{content:" \2212"}
details.action[open]{border-color:var(--s-f);background:var(--surface)}
/* WHO's own grade on a country's data, where it is a poor one. Directly under
   the drawing, before the numbers that come from it, and marked off by a rule
   rather than a box: it is a caveat on what is above, not a separate panel. */
.qualnote{margin:14px 22px 0;padding:0 0 0 12px;
  border-left:3px solid var(--map-other);
  font-size:15px;line-height:1.55;color:var(--ink-2);max-width:none}
.qualnote strong{color:var(--ink);font-weight:600}
/* Louder than the quality note, and above it. That one says the counting was
   poor; this one says the counting stopped, which a reader has to know before
   they read a single figure on the page. */
.stalenote{margin:14px 22px 0;padding:9px 12px;font-size:15.5px;
  line-height:1.5;color:var(--ink);background:var(--plane);
  border-left:3px solid var(--s-f);max-width:none}
/* Fills the retrieval bracket with today and copies the line. The one thing
   in a reference a reader has to type themselves, and the thing they forget. */
.citecopy{appearance:none;margin:10px 0 0;cursor:pointer;
  font-family:var(--font-ui);font-size:13px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--hair-strong);
  border-radius:2px;padding:6px 11px}
.citecopy:hover{color:var(--ink);border-color:var(--ink-2)}
.citecopy:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:640px){
  .qualnote{margin:12px 14px 0;font-size:14.5px}
}
.actionbody{padding:0 18px 16px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.actionbody strong{color:var(--ink);font-weight:600}
a.action.report{border-color:var(--hair-strong);color:var(--ink-2)}
a.action.report::after{content:" \2197";color:var(--muted)}
/* Local copy editor. Present only when the page is opened from localhost or a
   file:// URL -- see the guard in school.js -- so the published site has no
   editing surface and nothing to authenticate. */
.skedit{display:flex;align-items:center;gap:10px;justify-content:flex-end;
  min-height:30px;font-size:13.5px;color:var(--muted);margin-bottom:-14px}
.skedit.hide{display:none}
.skedit button{appearance:none;background:var(--surface);
  border:1px solid var(--hair-strong);border-radius:2px;font-family:var(--font-ui);
  font-size:13.5px;color:var(--ink-2);padding:6px 12px;cursor:pointer}
.skedit button:hover{color:var(--ink);border-color:var(--ink-2)}
.skedit .grow{flex:1}
body.editing [data-t]{outline:1px dashed rgba(76,29,149,.45);outline-offset:3px}
body.editing [data-t]:focus{outline:2px solid var(--edit);background:var(--surface-2)}

/* A slot the author has left empty contributes nothing to the page: no row, no
   gap, no stray punctuation. It still exists in the markup, so the local
   editor can reach it, and it reappears the moment anything is written into
   it. While editing it shows the hint that says what belongs there -- text
   that never reaches a reader, because it lives in an attribute. */
[data-t].blank{display:none}
body.editing [data-t].blank{display:block;min-height:1.5em}
body.editing [data-t][data-hint]:empty::before{
  content:"▸ " attr(data-hint);
  color:var(--muted);font-style:italic;opacity:.75}
body.editing figcaption [data-t].blank{display:inline-block;min-width:12em}
/* Tooltip. The browser's own is one long line; this is a small stacked card,
   which is the only readable shape for five facts about one square. Pointer
   events off so it can never sit between the cursor and the thing it
   describes. */
.sktip{position:fixed;z-index:60;display:none;pointer-events:none;
  max-width:280px;padding:9px 11px;
  background:var(--ink);color:var(--chip-ink);
  border-radius:3px;box-shadow:0 6px 20px rgba(18,18,26,.22);
  font-family:var(--font-ui);font-size:13px;line-height:1.45}
.sktip .h{font-weight:600;margin-bottom:3px}
.sktip .l{font-family:var(--font-mono);font-size:12.5px;opacity:.85;
  font-variant-numeric:tabular-nums}
/* A prose block is a container of paragraphs, not one run of text with breaks
   in it, so two paragraphs get the space between them that they are asking
   for. Pressing enter in the editor makes a new one; shift-enter still makes a
   line break inside the current paragraph, which is what it is for. */
.panel .prose{margin:0}
.panel .prose p{margin:0 0 .85em;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.panel .prose p:last-child{margin-bottom:0}
.panel .prose.small p{font-size:15px;color:var(--muted)}
.panel .prose p strong{color:var(--ink);font-weight:600}
.panel .prose a{color:var(--s-f)}
body.editing [data-t].prose.blank{display:block;min-height:1.5em}

/* ===== country pages =====
   The standing warning is a details now: four dense paragraphs closed by
   default, so a reader meets the figures rather than a screen of preamble, and
   the heading still says exactly what it is. A details opens with JavaScript
   off, which for this content is the point. */
details.notes{display:block}
details.notes > summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;gap:12px}
details.notes > summary::-webkit-details-marker{display:none}
details.notes > summary::after{content:"+";margin-left:auto;color:var(--muted);
  font-family:var(--font-ui);font-size:17px;line-height:1;font-weight:400}
details.notes[open] > summary::after{content:"\2212"}
details.notes > summary:focus-visible{outline:2px solid var(--focus);
  outline-offset:3px}
details.notes > summary h2{margin:0}
details.notes[open] > summary{margin-bottom:14px}
details.notes p + p{margin-top:10px}

/* A two-state switch. Shared furniture: the landing page's map style and age
   band use it, and so does the state map's multi-select. It lived in
   world.css, which only the landing page loads, so on the state map it was a
   button with no styling at all -- no track, no knob, and its labels running
   together into one line of nonsense. */
/* One control with two states, not two buttons: the map is either geographic
   or tiles, and a pair of buttons said it was a choice among many. */
.switch{appearance:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--hair-strong);
  font-family:var(--font-ui);font-size:13.5px;color:var(--muted);
  padding:5px 10px;cursor:pointer}
.switch:hover{border-color:var(--ink-2)}
.switch .lab{color:var(--muted);font-weight:400;letter-spacing:.04em}
.switch i{position:relative;width:30px;height:16px;border-radius:8px;
  background:var(--grid);transition:background .14s;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;
  width:12px;height:12px;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 2px rgba(18,18,26,.35);transition:transform .14s}
.switch[aria-checked="false"] .on,
.switch[aria-checked="true"] .off{color:var(--ink);font-weight:600}
.switch[aria-checked="true"] i{background:var(--s-f)}
.switch[aria-checked="true"] i::after{transform:translateX(14px)}
/* A switch may carry one label or a value on each side; both have to read as
   a sentence. With one label it is the label that lights, not a second word. */
.switch .lab{color:var(--muted);font-weight:400;letter-spacing:.04em}
.switch[aria-checked="true"] .lab{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .switch i,.switch i::after{transition:none}
}

/* A method note that is available without being in the way. */
details.method{margin:16px 22px 22px}
details.method > summary{list-style:none;cursor:pointer;font-size:14px;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
details.method > summary::-webkit-details-marker{display:none}
details.method > summary::after{content:"+";color:var(--muted)}
details.method[open] > summary::after{content:"\2212"}
details.method > summary:focus-visible{outline:2px solid var(--focus);
  outline-offset:3px}
details.method p{margin:10px 0 0;font-size:14px;line-height:1.65;
  color:var(--muted)}

/* Text runs the full width of the page. The caps were set when the body was a
   single column of prose; with figures beside it they only made a ragged right
   edge that changed from block to block. */
.page .standfirst,.page .viewhead p,.page .readout p,.page .notes p,
.page .method,.page footer p{max-width:none}

/* ===== compare buckets =====
   Four groups of states, tested against each other. The colours are the two
   series colours plus the two the school page already uses for its pandemic
   years, so the page adds no new hues; every bucket is also lettered A to D
   and lists its states, so colour is never the only thing telling them apart. */
:root{--bk1:#4c1d95;--bk2:#2196e3;--bk3:#c2452d;--bk4:#1d7874}
.buckets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 22px 0}
.buckets .blab{font-family:var(--font-ui);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin-right:2px}
.bkt{appearance:none;font-family:var(--font-ui);font-size:14px;font-weight:600;
  color:var(--ink);background:var(--surface);cursor:pointer;
  border:1px solid var(--hair-strong);border-left:5px solid var(--c);
  padding:7px 12px;display:inline-flex;align-items:center;gap:7px}
.bkt.b1{--c:var(--bk1)}.bkt.b2{--c:var(--bk2)}
.bkt.b3{--c:var(--bk3)}.bkt.b4{--c:var(--bk4)}
.bkt .n{font-family:var(--font-mono);font-size:12px;color:var(--muted);
  font-weight:400}
.bkt:hover{border-color:var(--ink-2);border-left-color:var(--c)}
.bkt[aria-pressed="true"]{background:var(--c);color:var(--chip-ink);
  border-color:var(--c)}
.bkt[aria-pressed="true"] .n{color:var(--chip-ink);opacity:.8}
.bkt:focus-visible,.bclear:focus-visible{outline:2px solid var(--focus);
  outline-offset:2px}
.bclear{appearance:none;background:none;border:0;font-family:var(--font-ui);
  font-size:13.5px;color:var(--muted);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.bclear:hover{color:var(--ink)}
.bhint{margin:8px 22px 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.bctl{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  padding:10px 22px 0;font-family:var(--font-ui);font-size:14px;
  color:var(--ink-2)}
.bctl select{font-family:var(--font-ui);font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hair-strong);padding:5px 8px}
.bctl .toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
/* A tile carries its bucket's colour, and its letter, so the grouping reads
   without the legend and without relying on hue alone. */
.map-buckets .tile-g rect{transition:fill .1s}
.map-buckets .tile-g.bk1 rect{fill:var(--bk1)}
.map-buckets .tile-g.bk2 rect{fill:var(--bk2)}
.map-buckets .tile-g.bk3 rect{fill:var(--bk3)}
.map-buckets .tile-g.bk4 rect{fill:var(--bk4)}
.map-buckets .tile-g.bk1 text,.map-buckets .tile-g.bk2 text,
.map-buckets .tile-g.bk3 text,.map-buckets .tile-g.bk4 text{
  fill:var(--chip-ink)}

/* ===== country page controls =====
   The two comparison windows sat one per row because .ctl.wide takes the full
   width. They are the same shape and they are read against each other, so at a
   width that fits them they go side by side. */
@media (min-width:900px){
  #c-A,#c-B{flex:1 1 calc(50% - 22px);min-width:0}
}
/* The position of a label is not a setting while there are no labels. It
   showed "Middle of bar" beside an unticked box, which reads as what the chart
   is doing rather than as what it would do. */
#c-labels select:disabled{opacity:.45;cursor:not-allowed}

/* The standing warning has to look like it opens. A plus on both sides, big
   enough to be the thing a reader reaches for, and it turns into a minus when
   the block is open. */
details.notes > summary{position:relative;padding:2px 44px;justify-content:center;
  text-align:center}
details.notes > summary::before,details.notes > summary::after{
  content:"+";position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--font-ui);font-size:26px;line-height:1;font-weight:400;
  color:var(--s-f);margin:0}
details.notes > summary::before{left:6px}
details.notes > summary::after{right:6px;margin-left:0}
details.notes[open] > summary::before,details.notes[open] > summary::after{
  content:"\2212"}
details.notes > summary:hover::before,details.notes > summary:hover::after{
  color:var(--ink)}
details.notes > summary h2{flex:1}

/* The Data-and-method block folds. It is three dense paragraphs of statistical
   method that a reader needs once and a journalist on deadline needs never, so
   it opens on request rather than occupying a screen on the way to the help
   information. The heading keeps its own tag inside the summary so it stays
   editable and stays a heading for a screen reader. */
.methodfold{margin:0 0 6px}
.methodfold>summary{list-style:none;cursor:pointer;display:flex;
  align-items:baseline;gap:10px;padding:2px 0}
.methodfold>summary::-webkit-details-marker{display:none}
.methodfold>summary h2{margin:0}
.methodfold>summary::after{content:"+";font-family:var(--font-ui);font-size:22px;
  line-height:1;color:var(--s-f)}
.methodfold[open]>summary::after{content:"\2212"}
.methodfold>summary:hover h2{color:var(--s-f)}
.methodfold>p:first-of-type{margin-top:10px}

/* Citations lifted out of the sections that wrote them. */
.srcsub{font-family:var(--font-ui);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:20px 0 8px}
.srcnote.extra{margin:0 0 8px}

/* The urbanisation view grid: three axes -- group, sex, mechanism -- each a
   set of hidden radios read by sibling selectors. The radios appear in that
   order in the document so a triple of :checked selectors can name one cell.
   Same mechanism as the state map's switch: no JavaScript, works with it off,
   keyboard behaviour for free.

   Mechanism exists for all children only, because the firearm extract carries
   no race breakdown. On a race view the control hides and the cell pins to
   all methods, so arriving there with the mechanism radio on Firearm cannot
   name a chart that was never drawn and leave an empty panel. */
.urbanmodes{padding:16px 22px 0}
.urbanmodes .seg{display:flex;flex-wrap:wrap}
.urbanmodes .seg.urbansex,.urbanmodes .seg.urbanmech{margin-top:8px}
#um-white:checked ~ .urbanmodes .seg.urbanmech,
#um-black:checked ~ .urbanmodes .seg.urbanmech,
#um-hisp:checked ~ .urbanmodes .seg.urbanmech{display:none}
.urbanmode{display:none}
#um-all:checked ~ #us-both:checked ~ #uk-all:checked ~ .urbanbody .urbanmode-all-both-all,
#um-all:checked ~ #us-both:checked ~ #uk-gun:checked ~ .urbanbody .urbanmode-all-both-gun,
#um-all:checked ~ #us-both:checked ~ #uk-other:checked ~ .urbanbody .urbanmode-all-both-other,
#um-all:checked ~ #us-boys:checked ~ #uk-all:checked ~ .urbanbody .urbanmode-all-boys-all,
#um-all:checked ~ #us-boys:checked ~ #uk-gun:checked ~ .urbanbody .urbanmode-all-boys-gun,
#um-all:checked ~ #us-boys:checked ~ #uk-other:checked ~ .urbanbody .urbanmode-all-boys-other,
#um-all:checked ~ #us-girls:checked ~ #uk-all:checked ~ .urbanbody .urbanmode-all-girls-all,
#um-all:checked ~ #us-girls:checked ~ #uk-gun:checked ~ .urbanbody .urbanmode-all-girls-gun,
#um-all:checked ~ #us-girls:checked ~ #uk-other:checked ~ .urbanbody .urbanmode-all-girls-other,
#um-white:checked ~ #us-both:checked ~ .urbanbody .urbanmode-white-both-all,
#um-white:checked ~ #us-boys:checked ~ .urbanbody .urbanmode-white-boys-all,
#um-white:checked ~ #us-girls:checked ~ .urbanbody .urbanmode-white-girls-all,
#um-black:checked ~ #us-both:checked ~ .urbanbody .urbanmode-black-both-all,
#um-black:checked ~ #us-boys:checked ~ .urbanbody .urbanmode-black-boys-all,
#um-black:checked ~ #us-girls:checked ~ .urbanbody .urbanmode-black-girls-all,
#um-hisp:checked ~ #us-both:checked ~ .urbanbody .urbanmode-hisp-both-all,
#um-hisp:checked ~ #us-boys:checked ~ .urbanbody .urbanmode-hisp-boys-all,
#um-hisp:checked ~ #us-girls:checked ~ .urbanbody .urbanmode-hisp-girls-all{display:block}
#um-all:checked ~ .urbanmodes .seg label[for="um-all"],
#um-white:checked ~ .urbanmodes .seg label[for="um-white"],
#um-black:checked ~ .urbanmodes .seg label[for="um-black"],
#um-hisp:checked ~ .urbanmodes .seg label[for="um-hisp"],
#us-both:checked ~ .urbanmodes .seg label[for="us-both"],
#us-boys:checked ~ .urbanmodes .seg label[for="us-boys"],
#us-girls:checked ~ .urbanmodes .seg label[for="us-girls"],
#uk-all:checked ~ .urbanmodes .seg label[for="uk-all"],
#uk-gun:checked ~ .urbanmodes .seg label[for="uk-gun"],
#uk-other:checked ~ .urbanmodes .seg label[for="uk-other"]{
  background:var(--chip);color:var(--chip-ink);border-color:var(--chip);
  font-weight:500}
.urbanmodes .modenote{display:none}
#um-all:checked ~ #us-both:checked ~ #uk-all:checked ~ .urbanmodes .modenote-all-both-all,
#um-all:checked ~ #us-both:checked ~ #uk-gun:checked ~ .urbanmodes .modenote-all-both-gun,
#um-all:checked ~ #us-both:checked ~ #uk-other:checked ~ .urbanmodes .modenote-all-both-other,
#um-all:checked ~ #us-boys:checked ~ #uk-all:checked ~ .urbanmodes .modenote-all-boys-all,
#um-all:checked ~ #us-boys:checked ~ #uk-gun:checked ~ .urbanmodes .modenote-all-boys-gun,
#um-all:checked ~ #us-boys:checked ~ #uk-other:checked ~ .urbanmodes .modenote-all-boys-other,
#um-all:checked ~ #us-girls:checked ~ #uk-all:checked ~ .urbanmodes .modenote-all-girls-all,
#um-all:checked ~ #us-girls:checked ~ #uk-gun:checked ~ .urbanmodes .modenote-all-girls-gun,
#um-all:checked ~ #us-girls:checked ~ #uk-other:checked ~ .urbanmodes .modenote-all-girls-other,
#um-white:checked ~ #us-both:checked ~ .urbanmodes .modenote-white-both-all,
#um-white:checked ~ #us-boys:checked ~ .urbanmodes .modenote-white-boys-all,
#um-white:checked ~ #us-girls:checked ~ .urbanmodes .modenote-white-girls-all,
#um-black:checked ~ #us-both:checked ~ .urbanmodes .modenote-black-both-all,
#um-black:checked ~ #us-boys:checked ~ .urbanmodes .modenote-black-boys-all,
#um-black:checked ~ #us-girls:checked ~ .urbanmodes .modenote-black-girls-all,
#um-hisp:checked ~ #us-both:checked ~ .urbanmodes .modenote-hisp-both-all,
#um-hisp:checked ~ #us-boys:checked ~ .urbanmodes .modenote-hisp-boys-all,
#um-hisp:checked ~ #us-girls:checked ~ .urbanmodes .modenote-hisp-girls-all{display:block}
#um-white:checked ~ .urbanmodes .modenote,
#um-black:checked ~ .urbanmodes .modenote,
#um-hisp:checked ~ .urbanmodes .modenote,
#uk-gun:checked ~ .urbanmodes .modenote,
#uk-other:checked ~ .urbanmodes .modenote{color:var(--s-f)}
.mm-radio:focus-visible ~ .urbanmodes .seg label{
  outline:2px solid var(--focus);outline-offset:2px}

/* The firearm chart's rate/share switch. Same CSS-only pattern as the
   urbanisation and state ones: hidden radios, sibling selectors, no
   JavaScript. The two are not interchangeable readings of one number -- a
   falling share can mean fewer firearm deaths or more of everything else --
   so both are drawn and the note under the switch says which is which. */
.firemodes{padding:16px 22px 0}
.firemodes .seg{display:flex;flex-wrap:wrap}
.firemode{display:none}
#fm-rate:checked ~ .firebody .firemode-rate,
#fm-share:checked ~ .firebody .firemode-share{display:block}
#fm-rate:checked ~ .firemodes .seg label[for="fm-rate"],
#fm-share:checked ~ .firemodes .seg label[for="fm-share"]{
  background:var(--chip);color:var(--chip-ink);border-color:var(--chip);
  font-weight:500}
.firemodes .modenote{display:none}
#fm-rate:checked ~ .firemodes .modenote-rate,
#fm-share:checked ~ .firemodes .modenote-share{display:block}
.mm-radio:focus-visible ~ .firemodes .seg label{
  outline:2px solid var(--focus);outline-offset:2px}

/* ---------------------------------------------------------------- topbar --
   One thin bar on every page: the site name back to the landing page, a
   menu of everywhere a reader can go, and a way to reach Tyler. Sticky, so
   the way out is always one click away rather than a scroll to the top.

   The menu is details/summary, not a select: it needs two labelled groups,
   and like every other control here it has to work with JavaScript off. */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  gap:14px;padding:0 22px;height:44px;background:var(--surface);
  border-bottom:1px solid var(--hair-strong);
  font-family:var(--font-ui);font-size:13px}
.topbar .brand{font-weight:600;letter-spacing:.08em;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.topbar .brand:hover{color:var(--s-f)}
.pagemenu{position:relative;margin-left:auto}
.pagemenu>summary{list-style:none;cursor:pointer;white-space:nowrap;
  padding:5px 12px;border:1px solid var(--hair-strong);border-radius:2px;
  background:var(--surface-2);color:var(--ink-2);user-select:none}
.pagemenu>summary::-webkit-details-marker{display:none}
.pagemenu>summary::after{content:" \25be";color:var(--muted)}
.pagemenu>summary:hover{border-color:var(--ink-2);color:var(--ink)}
.pagemenu[open]>summary{background:var(--chip);color:var(--chip-ink);
  border-color:var(--chip)}
.navmenu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;max-height:min(70vh,32rem);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--hair-strong);
  border-radius:2px;padding:6px 0;box-shadow:0 6px 22px rgba(18,18,26,.13)}
.navmenu a{display:block;padding:7px 16px;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.navmenu a:hover{background:var(--surface-2);color:var(--s-f)}
.navmenu a[aria-current="page"]{font-weight:600}
.navmenu a[aria-current="page"]::after{content:" \2022";color:var(--s-f)}
.navhead{margin:8px 16px 3px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.navhead:first-child{margin-top:2px}
.topbar /* The tracker's door in the top bar: an icon, with its name beside it where
   there is room. Left of the page menu, because it is the one page that is
   about all the others at once. The label goes at 640px -- the icon alone
   still reads, and the bar has three other things to fit by then. */
.navtrack{display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:5px 10px;border:1px solid var(--hair-strong);border-radius:3px;
  color:var(--ink-2);text-decoration:none;font-size:14px;line-height:1}
.navtrack svg{width:16px;height:16px;display:block}
.navtrack:hover{color:var(--ink);border-color:var(--ink-2)}
.navtrack.here{color:var(--ink);border-color:var(--ink-2);
  background:var(--surface)}
@media (max-width:640px){
  .navtrack .navtracklab{display:none}
  .navtrack{padding:5px 8px}
}
.navcontact{color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:5px 12px;border:1px solid var(--hair-strong);border-radius:2px}
.topbar .navcontact:hover{border-color:var(--s-f);color:var(--s-f)}
.pagemenu>summary:focus-visible,.topbar a:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:620px){
  .topbar{padding:0 14px;gap:10px;font-size:12px}
  .topbar .brand{font-size:11px;letter-spacing:.05em}
  .topbar .navcontact{padding:5px 8px}
  /* "Contact Dr. Black" is the widest thing in the bar and on a 375px screen
     it squeezes the page menu. Same link, same address, shorter label. The
     TEXT is replaced rather than the markup changed, so the desktop bar is
     not touched at all -- which is the anchor this redesign is working
     against. */
  .topbar .navcontact{font-size:0}
  .topbar .navcontact::after{content:"Contact";font-size:12px}
}

/* ------------------------------------------------ the working view -------
   /admin/ is built locally and gitignored: it is never committed and never
   deployed, which is the whole of its privacy and is real privacy in a way a
   password in a public page source would not have been. */
.availgroup{border-top:1px solid var(--hair);padding:10px 0}
.availgroup>summary{cursor:pointer;font-family:var(--font-ui);font-size:16px;
  padding:6px 0;list-style:none}
.availgroup>summary::-webkit-details-marker{display:none}
.availgroup>summary::before{content:"+ ";color:var(--s-f);font-weight:600}
.availgroup[open]>summary::before{content:"\2212 "}

/* A list, not a table. These rows carry free text of wildly different lengths
   -- a one-word band beside a three-line citation -- and fixed columns made
   them collide. A list lets each field take the room it needs and wrap. */
.availlist{list-style:none;margin:0;padding:0}
.availlist>li{padding:11px 0 12px;border-bottom:1px solid var(--hair)}
.availlist>li.ispub{background:var(--surface-2);padding-left:12px;
  padding-right:12px;margin:0 -12px}
.availname{margin:0;font-family:var(--font-ui);font-size:15.5px;font-weight:600;
  color:var(--ink)}
.availfacts{margin:3px 0 0;font-size:13px;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:4px 18px}
.availfacts b{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:5px}
.availline{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.availline .alab{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:6px}
.availline.blocked .alab{color:var(--s-f)}
.availline.why{color:var(--muted);font-size:13px}
/* ---------- the changelog ----------
   One block per version, newest first. The version number carries the eye
   down the page, so it is the largest thing on it; the open one is marked
   because a figure quoted off an open version has to be quoted with the date
   it was read. */
.changelog .release{padding:20px 0 4px;border-top:1px solid var(--hair)}
.changelog .release:first-of-type{border-top:0;padding-top:8px}
.changelog .release h2{display:flex;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin:0 0 4px;font-weight:400}
.changelog .rver{font-family:var(--font-mono);font-size:30px;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.changelog .rtitle{font-family:var(--font-display);font-size:24px;
  color:var(--ink-2);line-height:1.15}
.changelog .rmeta{margin:0 0 10px;font-family:var(--font-ui);font-size:13.5px;
  color:var(--muted);max-width:none}
.changelog .release.open .rmeta{color:var(--s-f)}
.changelog .rlist{margin:0;padding-left:1.15rem;display:flex;
  flex-direction:column;gap:7px}
.changelog .rlist li{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:640px){
  .changelog .rver{font-size:25px}
  .changelog .rtitle{font-size:20px}
  .changelog .rlist li{font-size:15.5px}
}

/* ?chrome=off -- the chart and nothing else. For the vetting tool, which
   shows one page's every view side by side and has no room for the masthead,
   the tabs, the readout or the footer in each of them. */
.chrome-off .topbar,.chrome-off .masthead,.chrome-off .actionbar,
.chrome-off .tabs,.chrome-off .readout,.chrome-off .tablewrap,
.chrome-off .method,.chrome-off footer,.chrome-off .sitefoot,
.chrome-off .notes,.chrome-off .srcall,.chrome-off .vetted,
.chrome-off .controls{display:none!important}
.chrome-off .page{padding:6px!important;gap:0!important}
.chrome-off .panel{border:0!important}

/* A note the reviewer left for the reader. Not the vetting paperwork: this
   is Tyler noticing something while looking and deciding it should be said
   out loud, so it reads as an aside in his voice rather than as a warning. */
.revnote{margin:24px 0 0;padding:14px 16px;background:var(--plane);
  border-left:3px solid var(--s-f)}
.revnote .rnlab{margin:0 0 6px;font-family:var(--font-ui);font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.revnote p{margin:0 0 8px;font-size:16.5px;line-height:1.6;color:var(--ink-2);
  max-width:none}
.revnote p:last-child{margin-bottom:0}
@media (max-width:640px){
  .revnote{padding:12px 14px}
  .revnote p{font-size:15.5px}
}

/* ---------- the reviewed-on block ----------
   At the foot of a country page, shut. It is a claim about the page, so it
   is read after the page rather than announced before it, and it is quiet:
   a badge that shouted would be doing the opposite of what the narrower
   wording was for. Open, it is a list of what was and was not checked --
   the second list being the honest half, and the one that stops "reviewed"
   from being read as "verified". */
.vetted{margin:26px 0 0;border-top:1px solid var(--hair);padding-top:14px}
.vetted > summary{cursor:pointer;list-style:none;display:flex;
  align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  font-family:var(--font-ui);font-size:14px;color:var(--muted)}
.vetted > summary::-webkit-details-marker{display:none}
.vetted > summary::after{content:"+";font:400 17px/1 var(--font-mono);
  color:var(--ink-3);margin-left:auto}
.vetted[open] > summary::after{content:"\2212"}
.vetted > summary:hover .vlab{color:var(--ink)}
.vetted > summary:focus-visible{outline:2px solid var(--focus);
  outline-offset:3px}
.vetted .vlab{color:var(--ink-2);font-weight:600}
.vetted .vwhen{font-family:var(--font-mono);color:var(--ink-2)}
.vetted .vproc{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3)}
.vetted .vbody{padding:6px 0 4px;max-width:none}
.vetted .vsum{margin:8px 0 0;font-size:16.5px;line-height:1.6;
  color:var(--ink-2);max-width:none}
.vetted .vhead{margin:16px 0 4px;font-family:var(--font-ui);font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.vetted ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;
  gap:6px}
.vetted li{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.vetted ul.vnot li{color:var(--muted)}
.vetted .vnote,.vetted .vlimit{margin:14px 0 0;font-size:14.5px;
  line-height:1.55;color:var(--muted);max-width:none}
@media (max-width:640px){
  .vetted{margin:20px 0 0}
  .vetted > summary{font-size:13.5px}
  .vetted .vsum{font-size:15.5px}
  .vetted li{font-size:14.5px}
}

#availfilter{font-family:var(--font-ui);font-size:14px;padding:7px 12px;
  border:1px solid var(--hair-strong);border-radius:2px;background:var(--surface);
  color:var(--ink);width:100%;max-width:340px}
.availlist>li[hidden]{display:none}

.pubtag{font-family:var(--font-ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--chip-ink);background:var(--chip);
  padding:1px 6px;border-radius:2px;white-space:nowrap;margin-left:6px}

/* The roadmap block on the landing page. Four counts belong on one line:
   they are a single sentence -- published, gettable, chaseable, hopeless --
   and stacking them into a grid reads as four separate facts. Smaller than
   the summary tiles above them on purpose; these are context, not the
   headline. They wrap to two and then one as the width runs out. */
.roadtiles{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hair-strong);
  border-radius:2px;overflow:hidden;margin:2px 0 0}
.roadtiles .tile{flex:1 1 0;min-width:150px;margin:0;border:0;border-radius:0;
  border-left:1px solid var(--hair);padding:12px 16px;background:var(--surface)}
.roadtiles .tile:first-child{border-left:0}
.roadtiles .tile .lab{font-size:10.5px;letter-spacing:.08em}
.roadtiles .tile .val{font-size:30px;line-height:1.05;margin:2px 0 1px}
.roadtiles .tile .note{font-size:12px;line-height:1.35}
@media (max-width:860px){
  .roadtiles .tile{flex:1 1 45%;min-width:0}
  .roadtiles .tile:nth-child(3){border-left:0}
  .roadtiles .tile:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media (max-width:460px){
  .roadtiles .tile{flex:1 1 100%;border-left:0;border-top:1px solid var(--hair)}
  .roadtiles .tile:first-child{border-top:0}
  .roadtiles .tile .val{font-size:26px}
}

@media (max-width:700px){
  .availtable{font-size:12.5px;table-layout:auto}
  .availtable th:nth-child(5),.availtable td:nth-child(5){display:none}
}

/* The citation, sitting beside the two standing links. A reference is meant to
   be copied whole, so it gets a hanging indent and its own measure rather than
   wrapping into the prose around it. */
.action.cite .apa{font-family:var(--font-body);font-size:15px;line-height:1.55;
  padding-left:2em;text-indent:-2em;margin:10px 0;
  color:var(--ink);user-select:all}
.action.cite .citeurl{word-break:break-all}
.footcite{margin:14px 0 0}
.footcite>summary{cursor:pointer;font-family:var(--font-ui);font-size:14px;
  color:var(--ink-2);list-style:none;padding:6px 0}
.footcite>summary::-webkit-details-marker{display:none}
.footcite>summary::before{content:"+ ";color:var(--s-f);font-weight:600}
.footcite[open]>summary::before{content:"\2212 "}
.footcite .actionbody{font-size:14.5px;color:var(--ink-2)}

/* ------------------------------------------------------------ site foot --
   On every page, carrying the crisis numbers itself, so non-negotiable 5 is
   satisfied by the footer rather than by remembering to put help information
   in each template. */
.sitefoot{border-top:1px solid var(--hair-strong);margin:40px 0 0;
  padding:20px 22px 34px;background:var(--surface-2)}
.sitefoot .action.help{display:block;margin:0 0 16px;
  background:var(--surface)}
.sitefoot .disclaim{margin:0 0 10px;font-size:13.5px;line-height:1.6;
  color:var(--ink-2)}
.sitefoot .disclaim b{color:var(--ink)}
.sitefoot .legal{margin:0;font-family:var(--font-ui);font-size:12.5px;
  color:var(--muted)}
.sitefoot .legal a{color:var(--ink-2)}
.sitefoot .legal a:hover{color:var(--s-f)}
@media (max-width:859px){
  .sitefoot{padding:16px 14px 28px}
  .sitefoot .disclaim{font-size:13px}
}

/* ------------------------------------------------ definition compare -------
   Two counts of the same children, for the England and Wales coding
   comparison. Defined here rather than beside the series colours because
   lines 15-196 are a byte-identical lift of the reference stylesheet and the
   parity check proves it; a token added there would break that proof.

   Deliberately outside the sex palette: this pair is not girls-and-boys and
   must not read as it. The page's own series keeps combined black, and the
   accredited count takes a dark warm red -- the furthest hue from purple,
   blue and the ramp. Separated by lightness as well as hue (black L*8.5
   against red L*37, a 3.9:1 ratio, above the 3:1 target the series colours
   are held to), so the pair survives greyscale and all three dichromacies,
   and the legend names both lines so colour is never the only channel. */
:root{
  --def-ons:#a8342a;
  --def-ons-band:rgba(168,52,42,.13);
}

/* Terms and privacy: prose pages, nothing else on them. */
.legalpage .panel{padding:22px 26px 28px}
.legalpage .panel p{font-size:16px;line-height:1.65;
  margin:0 0 12px;color:var(--ink-2)}
.legalpage .panel h2{font-family:var(--font-ui);font-size:15px;font-weight:600;
  letter-spacing:.01em;color:var(--ink);margin:26px 0 8px;
  padding-top:14px;border-top:1px solid var(--hair)}
.legalpage .panel h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legalpage .panel h3{font-family:var(--font-ui);font-size:14px;font-weight:600;
  color:var(--ink);margin:16px 0 6px}
.legalpage .panel p.clause{padding-left:1.8em;text-indent:-1.8em;
  margin:0 0 6px}
.legalpage .panel a{color:var(--s-f)}

/* The privacy policy brought two elements the terms page never needed: bullet
   lists and the retention table. No measure on either -- the panel is the
   container that decides width. */
.legalpage .panel ul{font-size:16px;line-height:1.65;color:var(--ink-2);
  margin:0 0 12px;padding-left:1.25em}
.legalpage .panel li{margin:0 0 5px}
.legalpage .panel table{border-collapse:collapse;width:100%;
  font-family:var(--font-ui);font-size:14.5px;margin:2px 0 16px}
.legalpage .panel th,.legalpage .panel td{text-align:left;vertical-align:top;
  padding:8px 14px 8px 0;border-bottom:1px solid var(--hair);color:var(--ink-2)}
.legalpage .panel th{color:var(--ink);font-weight:600}

/* ------------------------------------------------------- full width -------
   Every text measure removed, and the ones inside the lifted reference block
   overridden here rather than edited there, so the parity check still proves
   the stylesheet came from the reference untouched.

   A cap on a paragraph is a bug on this site, not a refinement. It matters
   most on a narrow screen, where a ch measure plus padding leaves text
   scrunched into the left of an otherwise empty column. If a paragraph reads
   too wide the SECTION is too wide -- fix the container. */
.standfirst,.viewhead p,.readout p,.actionbody,.disclaim,.availline,
.legalpage p,.legalpage .panel p,.action.cite .apa,.footcite .actionbody,
.sitefoot .action.help,.page .method,.page footer p,.cap,.srcnote,
.prose .standfirst,.prose .panel p,.prose .notes p{
  max-width:none}

/* ---------------------------------------------- a page that is prose ------
   Guernsey and Alderney has six to nine pediatric deaths in twenty years.
   There is no rate to draw and no chart to draw it on, so the page is the
   header, the standing warning, the paragraphs and the sources -- the site's
   own furniture with the machinery taken out, not a different design. */
.wrap.prose{padding-top:26px;padding-bottom:72px;display:flex;
  flex-direction:column;gap:26px}
.wrap.prose > header{margin:0}
.wrap.prose .panel{padding:24px 26px 28px;gap:0}
/* A page that is a promise. Big enough to be the answer to "is this here
   yet", quiet enough not to look like a figure. */
.soonline{font-family:var(--font-display);font-size:clamp(22px,3vw,30px);
  line-height:1.2;color:var(--ink-2);margin:22px 0 0}
.backline{margin:18px 0 0;font-family:var(--font-ui);font-size:15px}
.backline a{color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--hair-strong)}
.backline a:hover{color:var(--ink)}
.wrap.prose .panel h2{font-family:var(--font-display);font-weight:400;
  font-size:27px;letter-spacing:-.01em;margin:26px 0 12px}
.wrap.prose .panel h2:first-child{margin-top:0}
.wrap.prose .panel p{margin:0 0 .85em;font-size:17.5px;line-height:1.65;
  color:var(--ink-2)}
.wrap.prose .panel p:last-child{margin-bottom:0}
.wrap.prose .panel p strong{color:var(--ink);font-weight:600}
.wrap.prose .panel a{color:var(--s-f)}
.wrap.prose .notes{gap:10px}
.wrap.prose .notesbody{display:flex;flex-direction:column;gap:10px}
.wrap.prose .sources h2{font-family:var(--font-ui);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0 0 12px}

/* The container: 1600px, which is the 16:9 width a 1920 monitor still leaves a
   margin around. Wider than the 1060 this had and far wider than the 700-odd a
   text column usually gets -- narrow columns waste a screen that was bought to
   be looked at -- but it stops an ultrawide from running a sentence across
   three feet of desk.

   The gutter is a percentage rather than a fixed pad, so it scales: 80px
   against the capped container, and a proportional margin on a phone where a
   fixed 24px would have been a third of the screen. */
.page,.wrap.landing,.wrap.school,.wrap.legalpage,.wrap.admin,.wrap.prose{
  max-width:1600px;margin-left:auto;margin-right:auto;
  padding-left:5%;padding-right:5%}
/* The bar and the foot span the viewport so their background reaches the edge,
   but their CONTENTS have to line up with the container between them. Past
   1600px a plain 5% pad would keep pushing them outward while the page below
   stopped moving, so they take the container's own geometry instead. */
.topbar,.sitefoot{padding-left:max(5%, calc((100% - 1600px) / 2 + 80px));
  padding-right:max(5%, calc((100% - 1600px) / 2 + 80px))}
@media (max-width:640px){
  .page,.wrap.landing,.wrap.school,.wrap.legalpage,.wrap.admin,.wrap.prose{
    padding-left:4%;padding-right:4%}
  .topbar,.sitefoot{padding-left:4%;padding-right:4%}
}

/* ------------------------------------------- two drawings, one chart ------
   A baked SVG scales with its viewBox. A 680-unit drawing rendered into the
   330px a phone actually offers multiplies every coordinate by 0.49, so a
   14-unit label lands on screen at seven pixels. Nothing about the font
   declaration is wrong; the whole coordinate system is being shrunk.

   So `barchart.pair` emits the chart twice -- once laid out in a column beside
   the bars, once with the label above a full-width bar in a 400-unit box that
   renders close to 1:1 on a phone -- and CSS picks one. Both come from the
   same rows through the same function, so a number cannot differ between them.

   720px is the switch: below it the wide drawing is being scaled under about
   0.8 and its smallest type drops below eleven pixels. The narrow one is
   capped so it does not blow up to headline size on a small tablet. */
.respond>.narrowonly{display:none}
@media (max-width:720px){
  .respond>.wideonly{display:none}
  .respond>.narrowonly{display:block}
  .respond>.narrowonly svg{max-width:560px}
}

/* ------------------------------------------------------ the phone -------
   Every block inside a panel was inset 22px from each side. On a 390px screen
   that is an eighth of the width spent on nothing, and it lands on top of the
   4% page gutter that is already there -- the same "full width, no indents"
   rule the container follows, applied one level down.

   The chart wrapper goes to zero: the drawing is the thing that most needs
   the pixels, and its own padding is now measured by chartBox() rather than
   assumed, so dropping it here hands the axis twenty more pixels. */
@media (max-width:640px){
  .chartwrap{padding:6px 0 0}
  .legend{padding:4px 12px 0}
  .cap{margin:2px 12px 0}
  details.tablewrap{margin:14px 12px 0}
  .urbanchart{padding:14px 12px 0}
  .prov-grid{padding:14px 12px 0}
  .means-wrap{padding:14px 12px 4px}
  #indigenous .notes,#provincial .notes{margin:14px 12px 0}
  /* The readout is a paragraph and a Copy button on one flex row. Narrow, the
     button held its width and the sentence was squeezed into what was left,
     so the text takes the whole row and the button drops under it. */
  .readout{margin:14px 12px 0;padding:13px 14px;flex-wrap:wrap;gap:10px}
  .readout p{flex:1 1 100%}
  .readout button.copy{margin-left:auto}
}


/* The help block holds the shared crisis line and, where a jurisdiction has
   one, its own -- Canada's names the Hope for Wellness Helpline. Two
   paragraphs rather than a run-on, and an empty one takes no space, because a
   page whose slot is blank should not leave a gap in the box. */
.action.help .actionbody p{margin:0 0 .55em}
.action.help .actionbody p:last-child{margin-bottom:0}
.action.help .actionbody p:empty{display:none}

/* --------------------------------------------- the panel, made shorter ---
   Vertical space is the scarce thing on a phone, and the panel was spending
   it on rows that say what a legend or a heading says already. */

/* The uncertainty switch is gone at every width. Intervals are always shown;
   there is no reason to offer turning them off, and the control was a row of
   its own on every chart that has one. */
#c-ci{display:none}

/* One label, written twice; CSS picks. Short below 720px, which is where four
   full tab names stop fitting on one line. */
.lab-short{display:none}
@media (max-width:720px){
  .lab-full{display:none}
  .lab-short{display:inline}
  .tabs{gap:3px;padding:0 4px}
  .tab{font-size:14px;padding:8px 10px}
  /* Years shown and Sex on one row: the two selects and the three sex boxes
     both come in, so the panel opens with one row of controls instead of
     three. */
  .controls{padding:14px 12px;gap:10px 14px}
  .controls select{font-size:14px;padding:5px 22px 5px 8px;
    background-position:calc(100% - 11px) calc(50% + 1px),
                        calc(100% - 7px) calc(50% + 1px)}
  .controls .toggle{gap:5px;font-size:14.5px}
  .controls .toggle input{width:14px;height:14px}
  .controls .swatch{width:10px;height:10px}
  .controls .ctl .row{gap:5px}
  .legend{padding:4px 12px 0;gap:12px}
  /* The mode switches get the same inset as everything else in the panel, and
     the ethnicity row -- All / White / Black / Hispanic -- then fits on one
     line, which is what it is for. */
  .mapmodes{padding:14px 12px 0}
  .mapmodes .seg label{padding:7px 10px;font-size:14.5px}
}

/* An empty block should take no height. The engine leaves several of these
   standing -- a caption with nothing to say on a view that has no caption, a
   method note the same -- and each was a blank line in the middle of a page
   that is trying to be shorter. */
.cap:empty,.method:empty,.viewhead p:empty,.viewhead h2:empty,.panel .prose:empty,
.page footer p:empty,.notes p:empty,.readout p:empty{display:none}
body.editing .cap:empty,body.editing .method:empty,
body.editing .viewhead p:empty,body.editing .panel .prose:empty{display:block}

/* Four boxes become four lines. The same tile carries both -- `.tline` and the
   pieces it is composed from -- so the phone and the desktop can never show
   different numbers, which two separately written versions would manage
   inside a week. */
.tline{display:none}
@media (max-width:720px){
  .tiles{grid-template-columns:1fr;gap:0;
    background:var(--surface);border:1px solid var(--hair)}
  .tile{padding:9px 14px;border:0;border-top:1px solid var(--hair);gap:0}
  .tile:first-child{border-top:0}
  .tile .lab,.tile .val,.tile .sub,.tile .note{display:none}
  .tline{display:block;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
}

/* A note that opens from its own first sentence. The claim is left inside the
   paragraph -- one string, one data-t, the editor still owns the whole of it
   -- and hidden here once the note is open, so it is not read twice. */
.notefold{border-top:1px solid var(--hair)}
.notefold:first-of-type{border-top:0}
.notefold>summary{cursor:pointer;list-style:none;padding:8px 0;
  font-size:16.5px;line-height:1.5;color:var(--ink);font-weight:600;
  display:flex;gap:8px;align-items:baseline}
.notefold>summary::-webkit-details-marker{display:none}
.notefold>summary::before{content:"+";color:var(--s-f);font-weight:600;
  font-family:var(--font-mono);flex:none}
.notefold[open]>summary::before{content:"\2212"}
.notefold>p{margin:0 0 10px;padding-left:18px}
.notefold[open]>p>strong:first-child{display:none}
/* Except while editing: the lead is part of the string being edited, and
   hiding it would show the author half of their own paragraph. */
body.editing .notefold[open]>p>strong:first-child{display:inline}
/* The notes block is a flex column with a gap; these carry their own rules. */
.notes .notefold{margin:0}
.notes>.notefold+.notefold{margin-top:-10px}

/* The same idea for a chart caption: the first sentence says what the drawing
   is, which is all most readers want, and the paragraph of how-to-read-it sits
   behind it. */
.capfold>summary{cursor:pointer;list-style:none;font-size:14px;
  color:var(--muted);padding:2px 0;display:flex;gap:7px;align-items:baseline}
.capfold>summary::-webkit-details-marker{display:none}
.capfold>summary::before{content:"+";color:var(--s-f);font-weight:600;
  font-family:var(--font-mono);flex:none}
.capfold[open]>summary::before{content:"\2212"}
.capfold>.cap{padding-left:17px}
#indigenous .capfold{margin:2px 22px 0}
@media (max-width:640px){#indigenous .capfold{margin:2px 12px 0}}

/* ------------------------------------------- the standing warning opens ---
   Closed, this block was a heading between two plus signs, and a plus sign is
   a convention rather than a promise: nothing about the bar said what was
   behind it or how much. Its first paragraph now shows through, fading out --
   the affordance a reader already knows from every article they have read
   this year, and it says what the block is about as well as that it opens.

   The preview is a build-time copy of the real paragraph, not the paragraph
   itself: the real one has to stay in the body, which is what the open state
   shows. It is aria-hidden, so a screen reader gets the heading as the
   button's name and the body once, not twice. */
details.notes.standing > summary{flex-direction:column;align-items:stretch;
  gap:9px;padding:10px 44px 12px}
details.notes.standing > summary::before,
details.notes.standing > summary::after{top:12px;transform:none}
details.notes.standing[open] > summary{margin-bottom:12px}
.notes .peek{position:relative;max-height:4.8em;overflow:hidden;
  text-align:left;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.notes .peek p{margin:0}
/* The fade is an overlay in the panel's own colour rather than a mask: it is
   the same white the block sits on, and it needs no mask support to be exact. */
.notes .peek::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2.6em;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,
    var(--surface) 85%)}
details.notes.standing[open] > summary .peek{display:none}
@media (max-width:640px){
  details.notes.standing > summary{padding:8px 30px 10px}
  details.notes.standing > summary::before{left:2px}
  details.notes.standing > summary::after{right:2px}
  .notes .peek{max-height:5.4em;font-size:15.5px}
}

/* --------------------------------------------------------- the title -----
   `text-wrap: balance` on h1 came from the reference page, where the title was
   four words. On a real one it is a squeeze: measured on the England and Wales
   page in a 1130px column, it set the two lines to 643px and 581px -- barely
   half the width each, with the whole right-hand side empty. Balancing is for
   a heading that nearly fits on one line, not for one that genuinely needs
   two.

   `pretty` fills the line and still refuses to leave a single word stranded on
   the last one, which is the part worth keeping. Browsers without it fall back
   to ordinary wrapping, which is also fine -- the failure mode is a full line,
   not a short one. Overridden here rather than edited above so the parity
   check still proves the stylesheet came from the reference untouched. */
h1{text-wrap:pretty}

/* --------------------------------------------------- the sibling pages ----
   A country can publish through more than one registry -- the United Kingdom
   through three -- and each is its own page here. A reader landing on
   Scotland had no way to know the other two existed, and no reason to guess
   that the UK is three statistics rather than one. The map card said so; the
   pages did not.

   The page you are on is marked rather than linked, so the strip reads as a
   set you are inside rather than as three links out. */
.registries{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:0}
.registries .reg-lab{flex:1 1 100%;font-family:var(--font-ui);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:500}
.registries a,.registries .reg-here{font-family:var(--font-ui);font-size:15px;
  padding:7px 14px;border:1px solid var(--hair-strong);border-radius:2px;
  line-height:1.2}
.registries a{color:var(--ink-2);text-decoration:none}
.registries a:hover{color:var(--s-f);border-color:var(--s-f)}
.registries a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.registries .reg-here{background:var(--chip);color:var(--chip-ink);
  border-color:var(--chip);font-weight:500}
@media (max-width:640px){
  .registries{gap:6px 8px}
  .registries a,.registries .reg-here{font-size:14px;padding:6px 11px}
}

/* Japan's method chart, switched between both sexes and each one. Same
   hidden-radio pattern as the American firearm and urbanisation charts, so it
   needs no JavaScript and keeps working with it off. */
#jm-both:checked ~ .jmethodmodes .seg label[for="jm-both"],
#jm-boys:checked ~ .jmethodmodes .seg label[for="jm-boys"],
#jm-girls:checked ~ .jmethodmodes .seg label[for="jm-girls"]{
  background:var(--chip);color:var(--chip-ink);border-color:var(--chip);
  font-weight:500}
.jmethodbody .jmethod{display:none}
#jm-both:checked ~ .jmethodbody .jmethod-both,
#jm-boys:checked ~ .jmethodbody .jmethod-boys,
#jm-girls:checked ~ .jmethodbody .jmethod-girls{display:block}
.mm-radio:focus-visible ~ .jmethodmodes .seg label{
  outline:2px solid var(--focus);outline-offset:2px}

/* --------------------------------------------------- pooled trend ----------
   The switching rules themselves are generated by pooledtrend.stylesheet()
   and inlined in the landing page, because which spans exist depends on the
   data: a country publishing one more year can add a button, and a rule list
   written by hand here would silently stop matching. Only the things that do
   not depend on the data live in this file. */
.pooledtrend .ptmodes{display:flex;flex-wrap:wrap;gap:14px}
/* Each button is a name and, under it, what that name costs. Both groups
   carry a count now, because the two switches are not independent: the
   jurisdictions a span can pool depend on whether a sex split is being asked
   for, and vice versa. */
.pooledtrend .ptmodes .seg label,.pooledtrend .ptmodes .seg span.off{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.pooledtrend .ptmodes .c{font-size:12.5px;opacity:.75;font-weight:400;
  font-family:var(--font-mono)}
.pooledtrend .ptmodes .seg span.off{
  appearance:none;background:var(--surface-2);border:1px solid var(--hair-strong);
  border-right:0;font-family:var(--font-ui);font-size:15px;color:var(--ink-2);
  padding:7px 14px;opacity:.42;cursor:not-allowed;user-select:none}
.pooledtrend .ptmodes .seg > :last-child{border-right:1px solid var(--hair-strong)}
.mm-radio:focus-visible ~ .ptmodes .seg label{
  outline:2px solid var(--focus);outline-offset:2px}
.pooledtrend .ptsub{font-family:var(--font-ui);font-size:15px;
  color:var(--ink-2);margin:14px 22px 4px}
.pooledtrend .ptchart{padding:0 14px}
.pooledtrend .ptchart svg{width:100%;height:auto;display:block}
.pooledtrend .ptlist{margin:0;padding-left:1.15em;font-size:16px;
  line-height:1.6}
.pooledtrend .ptlist li{margin:0 0 8px}

/* Provenance for the coverage-bar denominator: at the foot of the sources,
   quiet, and never beside the figure it belongs to. */
.srcfoot{font-family:var(--font-ui);font-size:13.5px;color:var(--ink-2);
  margin:14px 0 0}

/* ------------------------------------------------------- self-hosted type ---
   These faces used to come from fonts.googleapis.com, which meant every
   visitor's browser handed their IP address and User-Agent to Google LLC in
   the United States before a word of the page rendered. The privacy policy
   says server logs and usage statistics do not leave Canada, and a stylesheet
   request from a third country is exactly the kind of thing that sentence is
   about. It is also the fact pattern LG Muenchen I ruled on in 2022 (3 O
   17493/20), which matters because the policy claims GDPR compliance and
   because the readers this site is written for include children.

   So the files are served from this origin. Same bytes Google was serving --
   fetched from their CDN once, at the versions pinned here -- under the SIL
   Open Font License, which both families carry. Where Google served one
   variable file under several weights, it is declared here once with a weight
   RANGE rather than downloaded several times under different names.

   font-display:swap keeps text visible while they load, which is what the
   Google URL asked for too. */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}


/* A second line in the help summary, for a page whose readers may not read
   English. It sits INSIDE the closed <details>, because an invitation nobody
   can read is not an invitation. */
.action.help .helpsub{display:block;font-weight:400;margin-top:3px;
  font-size:15px;line-height:1.5;color:var(--ink-2)}

/* The page menu carries a hundred and twenty-nine countries. Sticky continent
   headings over one long scroll were the old answer and were not enough: the
   list was still a hundred and twenty-nine rows deep and a reader had to know
   roughly where their country sat before scrolling could help. The regions
   are collapsed groups now, all shut, and `name` on the details makes them an
   exclusive accordion in the browser itself -- opening one closes the last,
   with no script and no state to keep. The region you are already in opens
   itself, because that is the one you are most likely to move within. */
.navgroup>summary{list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.navgroup>summary::-webkit-details-marker{display:none}
.navgroup>summary::before{content:"\203a";font-size:15px;line-height:1;
  letter-spacing:0;color:var(--axis);transition:transform .12s ease}
.navgroup[open]>summary::before{transform:rotate(90deg)}
.navgroup>summary:hover{color:var(--ink-2);background:var(--surface-2)}
.navgroup[open]>summary{color:var(--ink-2)}
/* How many pages are in the group, so a reader can tell Africa from Europe
   before opening either. */
.navgroup .navn{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:0;color:var(--axis)}
.navgroup>a{padding-left:30px}
/* The filter box. Sticky, because the menu scrolls under it once a region is
   open, and the box is the way back out. */
.navfind{position:sticky;top:0;z-index:2;background:var(--surface);
  padding:6px 10px 7px;border-bottom:1px solid var(--hair)}
.navfind:empty{display:none}
.navfind input{width:100%;font:inherit;font-size:13px;padding:6px 9px;
  border:1px solid var(--hair-strong);border-radius:2px;
  background:var(--surface-2);color:var(--ink)}
.navfind input:focus{outline:2px solid var(--focus);outline-offset:1px}
.navmenu .nomatch{display:none}
@media (max-width:620px){
  .navmenu{position:fixed;left:12px;right:12px;top:auto;min-width:0;
    max-height:66vh}
}

/* The research download list. Files, sizes, and what each one is. */
.dllist{list-style:none;margin:18px 0 26px;padding:0}
.dllist li{margin:0 0 18px;padding:0 0 0 0}
.dllist a{font-family:var(--font-mono);font-size:16px}
.dllist .dlsize{font-family:var(--font-mono);font-size:12.5px;
                color:var(--ink-2);opacity:.75;margin-left:10px}
.dllist p{margin:4px 0 0}

/* The download pointer inside the researchers' citation box. */
/* The author identifier, under the reference it belongs to. Small: a
   researcher who needs an ORCID knows what it is, and everyone else should
   read past it. */
.citeorcid{font-size:14px;color:var(--muted);margin:.5em 0 0}
.citeorcid a{color:var(--s-f)}
.citedl{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hair)}

/* The server-rendered line chart (source/linechart.py) and the sex selector
   for Taiwan's method-over-time section. The radio pattern mirrors the one
   the method bars use; the ids differ because the two sit in sibling
   sections and a shared id would let one drive the other. */
/* The bars are capped at 760 because a horizontal bar chart with a 250px
   label column stops gaining from extra width. A time series does not: every
   extra pixel is another year of resolution, so it takes the panel. */
.urbanchart svg.lchart{max-width:none}
.lchart .lc-ax{font-family:var(--font-mono);font-size:13px;fill:var(--ink-2)}
.lchart .lc-yt{font-family:var(--font-ui);font-size:15px;fill:var(--ink-2)}
.lclegend{margin:2px 0 10px}
#tm-both:checked ~ .tmtrendmodes .seg label[for="tm-both"],
#tm-boys:checked ~ .tmtrendmodes .seg label[for="tm-boys"],
#tm-girls:checked ~ .tmtrendmodes .seg label[for="tm-girls"]{
  background:var(--ink);color:#fff}
.tmtrendbody .tmtrend{display:none}
#tm-both:checked ~ .tmtrendbody .tmtrend-both,
#tm-boys:checked ~ .tmtrendbody .tmtrend-boys,
#tm-girls:checked ~ .tmtrendbody .tmtrend-girls{display:block}