/* assets/research.css — the research arm's own styles.
 *
 * build-research.mjs has always linked this file; it was never written (it lived in a
 * scratch dir that is gone), so the page rendered unstyled and full-bleed. Tokens and
 * measures are the census's, deliberately: the two volumes are one research arm and a
 * reader moving between them should not feel a change of publisher.
 */
:root{
  --ground:oklch(0.99 0.003 250);
  --panel:oklch(0.965 0.006 250);
  --ink:oklch(0.22 0.015 260);
  --muted:oklch(0.47 0.02 260);
  --rule:oklch(0.87 0.008 260);
  --accent:oklch(0.52 0.19 27);
  --link:oklch(0.42 0.11 255);
  --r:6px;
}

body{background:var(--ground);color:var(--ink);margin:0;}
main{padding-bottom:64px;}

/* One measure for every band, matching .wrap in census.css. */
.res-hero,.res-map-wrap,.res-headline,.res-table-wrap,.res-method{
  max-width:1120px;margin:0 auto;padding:0 24px;
  box-sizing:border-box;min-width:0;
}

.res-hero{padding-top:20px;padding-bottom:0;}
.res-headline{padding-top:20px;}
.res-eyebrow{
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px;
}
.res-hero h1{
  font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.028em;
  font-weight:700;margin:0 0 8px;max-width:26ch;text-wrap:balance;
}

/* Map. The SVG is the page's one big object, so it gets a ceiling: unbounded it
   renders at its own 960x600 and pushes the table off the first screen. */
.res-map-wrap{padding-top:20px;padding-bottom:8px;}
.research-map{margin:0;}
.rm-svg{display:block;width:100%;max-width:860px;height:auto;margin:0 auto;}
.rm-svg .cty{stroke:#fff;stroke-width:.3;vector-effect:non-scaling-stroke;}
.rm-svg .stl{fill:none;stroke:#6b6b6b;stroke-width:.8;vector-effect:non-scaling-stroke;pointer-events:none;}
.rm-svg .state{stroke:var(--ground);stroke-width:1;}

/* Pan and zoom. The viewport clips; the SVG inside it is what moves, so the caption
   and the rest of the page stay put. touch-action:none stops the browser scrolling
   the page when a drag starts on the map -- without it a touch drag does nothing. */
/* The viewport takes the whole measure. It used to sit at 860px inside a 1072px column,
   which made every county a ~12px target (many under 7px) in a box with dead margins --
   the map read as decoration you could not actually use. */
.rm-view{position:relative;width:100%;margin:0 auto;overflow:hidden;touch-action:none;cursor:grab;background:#f7f5f0;border-radius:10px;-webkit-user-select:none;user-select:none;}
/* user-select:none: without it every drag is also a text-selection drag, and Chrome
   hit-tests all 3,133 county paths for the selection on each mousemove. */
.rm-panel{-webkit-user-select:text;user-select:text;}
.rm-view.is-panning{cursor:grabbing;}
.rm-view .rm-svg{max-width:none;width:100%;transform-origin:0 0;will-change:transform;}
/* The hit target is the county fill. Without this a county is only hoverable on its
   0.3px border, because an SVG path with no explicit fill rule is hit-tested on its
   painted area only -- and these are painted by the fill attribute. */
.rm-svg .cty{pointer-events:all;}
.rm-svg .cty.is-hot{stroke:#111;stroke-width:1.2;}

.rm-tip{
  position:absolute;z-index:5;pointer-events:none;opacity:0;
  transform:translate(-50%,-100%);margin-top:-10px;
  background:#111;color:#fff;padding:6px 9px;border-radius:6px;
  font-size:.75rem;line-height:1.35;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.25);transition:opacity .08s;
}
.rm-tip.on{opacity:1;}

/* County names, drawn over the map once it is zoomed in far enough that a county can
   hold its own name. pointer-events:none throughout -- a label must never eat the
   click meant for the county under it. */
.rm-labels{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;will-change:transform;}
.rm-label{
  position:absolute;transform:translate(-50%,-50%);
  font-size:10.5px;line-height:1;font-weight:600;letter-spacing:.01em;
  color:#1b1b1b;white-space:nowrap;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff;
}
.rm-tip b{display:block;font-weight:600;}
.rm-tip span{color:#c9c9c9;}

.rm-ctl{position:absolute;top:12px;left:12px;z-index:4;display:flex;flex-direction:column;gap:5px;}
.rm-ctl button{
  width:32px;height:32px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.95);border:1px solid #c9c5bc;border-radius:6px;
  font-size:17px;line-height:1;color:#222;font-family:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.rm-ctl button:hover{background:#fff;border-color:#8a8a8a;}
.rm-ctl button:disabled{opacity:.4;cursor:default;}
.rm-ctl button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
/* The zoom level, so it is obvious the map IS zoomed and by how much. */
.rm-zoomlvl{
  margin-top:2px;text-align:center;font-size:.65rem;color:var(--muted);
  background:rgba(255,255,255,.9);border-radius:4px;padding:2px 0;
}
.rm-hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:4;
  margin:0;font-size:.72rem;color:#444;background:rgba(255,255,255,.92);
  padding:5px 11px;border-radius:14px;border:1px solid #e2ded5;
  transition:opacity .3s;
}
.rm-view.touched .rm-hint{opacity:0;pointer-events:none;}
@media (prefers-reduced-motion:reduce){.rm-tip{transition:none;}}

/* Detail panel. Anchored inside the map viewport rather than centred over the page:
   the map is the context, and a full-screen modal would hide the county you just
   clicked. On a narrow screen it becomes a bottom sheet, where there is no room to
   sit beside the map. */
.rm-panel{
  position:absolute;right:12px;bottom:12px;z-index:6;width:min(310px,calc(100% - 24px));
  background:#fff;border:1px solid var(--rule,#d9d5cc);border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .12s,transform .12s,visibility .12s;
}
.rm-panel.on{opacity:1;visibility:visible;transform:none;}
.rm-panel-hd{display:flex;align-items:flex-start;gap:8px;padding:12px 12px 8px;border-bottom:1px solid var(--rule,#eee);}
.rm-panel-hd h3{margin:0;font-size:.95rem;line-height:1.25;font-weight:600;}
.rm-panel-sub{margin:3px 0 0;font-size:.75rem;color:var(--muted);}
.rm-panel-x{
  margin-left:auto;flex:none;width:24px;height:24px;padding:0;cursor:pointer;
  background:none;border:0;border-radius:5px;font-size:16px;line-height:1;color:var(--muted);
}
.rm-panel-x:hover{background:#f1f1f1;color:#111;}
.rm-panel-bd{padding:10px 12px 12px;font-size:.8rem;line-height:1.5;}
.rm-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;}
.rm-row dt{color:var(--muted);margin:0;}
.rm-row dd{margin:0;text-align:right;font-weight:500;}
.rm-swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:baseline;}
.rm-panel-note{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--rule,#eee);font-size:.72rem;color:var(--muted);}
/* A correction from someone who works there outranks every inference on the page, so
   the way to send one sits next to the claim rather than only at the bottom. */
.rm-report{
  display:block;width:100%;margin:10px 0 0;padding:7px 10px;
  font:inherit;font-size:.74rem;font-weight:500;cursor:pointer;
  color:var(--ink);background:#f4f2ed;border:1px solid var(--rule,#ddd8cd);border-radius:6px;
}
.rm-report:hover{background:#ece9e1;border-color:#b9b2a4;}
.rm-report:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
/* Below this there is no room to sit beside the map, so the panel spans the width as a
   bottom sheet. !important because the script sets left/right inline to dodge the
   clicked county, which is meaningless once the panel is full width. */
@media (max-width:640px){
  .rm-panel{left:12px !important;right:12px !important;width:auto;}
}
@media (prefers-reduced-motion:reduce){.rm-panel{transition:none;}}
.rm-cap{
  margin:18px auto 0;max-width:70ch;
  font-size:.8125rem;line-height:1.6;color:var(--muted);
}
.rm-keys{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px;}
.rm-key{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.rm-key i{width:11px;height:11px;border-radius:2px;flex:none;}
.rm-hatch{
  background:repeating-linear-gradient(45deg,var(--muted) 0 2px,transparent 2px 4px);
  border:1px solid var(--rule);
}
/* The tier ramp in the legend: same colour, stepped down, the way the map draws it. */
.rm-fade{background:linear-gradient(90deg,#0072B2 0%,rgba(0,114,178,.38) 100%);}

/* Table. A 50-row table is the reference half of the page; it scrolls on its own
   rather than forcing the page sideways on a phone. */
.res-table-wrap{padding-top:40px;}
.res-table-wrap h2{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 14px;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.res-table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:520px;}
.res-table th,.res-table td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:left;}
.res-table thead th{
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500;border-bottom:1.5px solid var(--ink);
  position:sticky;top:0;background:var(--ground);
}
.res-table tbody th{font-weight:600;white-space:nowrap;}
.res-table .num{text-align:right;font-variant-numeric:tabular-nums;}

/* A thin row is one whose source cannot support a confident share. It is dimmed and
   flagged in place -- never dropped, and never silently equal to a measured row. */
.res-table tr.thin{color:var(--muted);}
.src-flag{
  display:inline-block;margin-left:8px;padding:1px 6px;border-radius:999px;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--panel);border:1px solid var(--rule);
  vertical-align:middle;white-space:nowrap;font-weight:500;
}
.src-flag.floor{color:var(--accent);border-color:color-mix(in oklch,var(--accent) 35%,var(--rule));}

.res-method{padding-top:22px;}
.res-method h2{font-size:1.0625rem;letter-spacing:-.015em;margin:0 0 8px;}
.res-method p{font-size:.875rem;line-height:1.62;color:var(--muted);max-width:80ch;margin:0 0 9px;}
.res-method a{color:var(--link);}

@media (max-width:640px){
  .res-hero{padding-top:20px;}
  .res-headline{font-size:2rem;}
  .rm-cap,.res-table{font-size:.8125rem;}
}

/* National breakdown. A proportional stacked bar, not a pie: the question is
   part-to-whole across four models, and a bar compares segment lengths honestly
   where a pie asks the eye to compare angles. Colours are the map's, so a model
   means the same thing in both. */
.m-fire-based{--m:#d55e00}
.m-private{--m:#0072b2}
.m-third-service{--m:#009e73}
.m-hospital{--m:#cc79a7}

.lede{margin:0;font-size:.9375rem;line-height:1.5;color:var(--muted);max-width:74ch;}
.lede .num{
  display:block;font-size:clamp(2.5rem,6vw,4rem);line-height:1;
  font-weight:700;letter-spacing:-.04em;color:var(--ink);
}
.map-note{
  margin:14px 0 0;
  font-size:.875rem;line-height:1.6;color:var(--muted);
}

.bar{
  display:flex;margin:22px 0 0;
  height:46px;border-radius:var(--r);overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.bar-seg{
  background:var(--m);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.8125rem;font-weight:600;min-width:0;
}
/* Below ~6% a label cannot sit inside its own segment without overflowing it. */
.bar-seg span{padding:0 6px;white-space:nowrap;}
.bar-seg[style*="width:2"] span,.bar-seg[style*="width:3"] span{font-size:.6875rem;}

.bar-key{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin:12px 0 0;
  font-size:.8125rem;color:var(--muted);
}
.key{display:inline-flex;align-items:center;gap:7px;}
.key i{width:11px;height:11px;border-radius:2px;background:var(--m);flex:none;}

.headline-note{
  margin:14px 0 0;
  font-size:.8125rem;line-height:1.6;color:var(--muted);
}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:10;}

/* Umbrella page: a diptych, one column per volume, so they read as siblings of equal
   weight -- the census is further along, but the registry is not a footnote to it.
   The pair runs wider than the text bands (out to the nav's edges) because the two
   visuals are the page's heroes. Each .vol is a subgrid over the section's rows, so the
   visuals share one top line and one height, and eyebrow, title, question, body, stats
   and standing line up across the columns row by row. */
.res-vols{
  max-width:1218px;margin:0 auto 18px;padding:22px 24px 0;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.5vw,48px);
}
.vol{display:grid;grid-template-rows:subgrid;grid-row:span 8;align-content:start;min-width:0;}
.vol-eyebrow{
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:22px 0 6px;
}
.vol h2{font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:0 0 8px;}
.vol h2 a{color:var(--ink);text-decoration:none;}
.vol h2 a:hover{text-decoration:underline;}
.vol-q{font-size:1.0625rem;line-height:1.4;color:var(--ink);margin:0 0 6px;font-weight:600;}
.vol-body{font-size:.9375rem;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:62ch;}
.vol-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;margin:0 0 14px;
  padding-top:14px;border-top:2px solid var(--ink);align-self:start;
}
.vol-stats div{min-width:0;}
.vol-stats dt{
  font-size:clamp(1.75rem,2.6vw,2.25rem);line-height:1;font-weight:800;letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.vol-stats dd{margin:6px 0 0;font-size:.8125rem;color:var(--muted);line-height:1.35;}
/* Standing is the honesty line; it is styled as a label, not as marketing. */
.vol-standing{
  font-size:.8125rem;line-height:1.5;color:var(--muted);margin:0 0 12px;
  padding-top:9px;border-top:1px solid var(--rule);align-self:start;
}
.vol-standing span{
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  margin-right:8px;
}
.vol-cta{font-size:.9375rem;font-weight:700;color:var(--link);text-decoration:none;align-self:start;}
.vol-cta:hover{text-decoration:underline;}

/* The two stages. Same frame, same top, same height (the subgrid row stretches both);
   the census is a white chart card, the atlas a tinted map plate. Charts and map scale
   with their viewBox, so labels grow with the frame instead of shrinking. */
.res-vols .vol-thumb{
  margin:0;display:flex;flex-direction:column;min-width:0;position:relative;box-sizing:border-box;
  border:1.5px solid color-mix(in oklch,var(--ink) 22%,var(--rule));border-radius:12px;
  background:#fff;box-shadow:0 1px 0 var(--rule),0 10px 28px -18px oklch(0.3 0.03 260 / .35);
  padding:16px 18px 12px;
}
.res-vols figure.vol-thumb{background:var(--panel);}
.res-vols .vol-thumb .thumb-svg{max-height:none;border:0;background:none;border-radius:0;}
.res-vols figure.vol-thumb > a{flex:1;display:flex;min-height:0;}
.res-vols figure.vol-thumb .thumb-svg{height:100%;}
.res-vols .vol-thumb figcaption{margin-top:8px;font-size:.78125rem;}
.res-vols figure.vol-thumb:has(a:hover){border-color:var(--link);}
.res-vols .slides-track{flex:1;}
.res-vols .slide{display:flex;flex-direction:column;}
.res-vols .slide > a{display:block;margin:auto 0;}
.res-vols .slide figcaption{margin-top:0;padding-top:8px;}
.res-vols .slide-t{font-size:1.25rem;font-weight:800;letter-spacing:-.022em;margin:0 0 10px;padding-right:184px;min-height:2.6em;}
.res-vols .slide-soon{flex:1;background:var(--panel);}
.res-vols .slides-nav{position:absolute;top:10px;right:12px;margin:0;}

@media (max-width:760px){
  .res-vols{grid-template-columns:1fr;padding:14px 16px 0;}
  .vol{grid-row:auto;display:block;}
  .vol > :not(.vol-thumb){margin-inline:8px;}
  .vol + .vol{margin-top:40px;}
  .vol-eyebrow{margin-top:18px;}
  .res-vols .vol-thumb{padding:12px 12px 10px;}
  .res-vols .slide-t{padding-right:0;min-height:0;font-size:1.125rem;}
  .res-vols .slides-nav{position:static;margin-top:6px;}
  .vol-stats{gap:10px 14px;}
}

/* The not-comparable table: same grid, visibly set apart from the ranked one. */
.res-sub{font-size:1.125rem;letter-spacing:-.015em;margin:38px 0 8px;}
.res-subnote{font-size:.8125rem;line-height:1.65;color:var(--muted);margin:0 0 14px;max-width:72ch;}
.res-table-excluded{opacity:.78;}


/* Tier legend in the methods section. The chip carries the SAME opacity the map uses,
   so the definition and the drawing cannot drift apart. */
.tierdl{margin:14px 0 18px;}
.tierdl dt{
  font-weight:600;font-size:.9375rem;color:var(--ink);margin-top:12px;
  display:flex;align-items:center;gap:9px;
}
.tierdl dd{margin:4px 0 0 25px;font-size:.9375rem;line-height:1.68;color:var(--muted);max-width:72ch;}
.tierchip{width:16px;height:16px;border-radius:3px;background:#0072B2;flex:none;border:1px solid rgba(0,0,0,.12);}
.tierchip.t-a{opacity:1}
.tierchip.t-b{opacity:.85}
.tierchip.t-c{opacity:.62}
.tierchip.t-d{opacity:.38}

/* Correction form. Deliberately plain: this is a utility, not a conversion surface. */
.fix-form{max-width:56ch;margin:16px 0 0;}
.fix-form label{
  display:block;margin:14px 0 5px;font-size:.8125rem;font-weight:600;color:var(--ink);
}
.fix-form label .muted{font-weight:400;color:var(--muted);}
.fix-form input,.fix-form textarea{
  width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--rule);border-radius:var(--r);
  font:inherit;font-size:.9375rem;color:var(--ink);background:#fff;
}
.fix-form textarea{resize:vertical;line-height:1.55;}
.fix-form input:focus,.fix-form textarea:focus{outline:2px solid var(--link);outline-offset:1px;border-color:var(--link);}
.fix-form button{
  margin-top:16px;padding:10px 18px;border:0;border-radius:var(--r);
  background:var(--ink);color:#fff;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;
}
.fix-form button:hover{opacity:.88}
.fix-form button:disabled{opacity:.5;cursor:default}
.form-msg{margin:12px 0 0;font-size:.875rem;line-height:1.6;color:var(--muted);min-height:1.2em;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Volume thumbnails. A card leads with a rendering of its own data, so the shape of the
   volume is legible before any of its numbers are read. */
.vol-thumb{margin:0 0 10px;}
/* The thumbs are the page's two big objects. Each is CROPPED to its own content rather
   than scaled down to fit -- scaling shrinks the chart's labels below reading size and
   letterboxes the map. The ceiling is a backstop for a wide viewport only. */
.vol-thumb a{display:block;border-radius:var(--r);}
.vol-thumb .thumb-svg{
  display:block;width:100%;height:auto;max-height:280px;
  background:#fdfcfa;border:1px solid var(--rule);border-radius:var(--r);
  transition:border-color .15s;
}
/* The picture IS the link to its volume -- a reader who clicks a chart of the data expects
   the data. The hover cue is on the border rather than a filter so the colours, which
   encode ownership and evidence, never shift under the cursor. */
.vol-thumb a:hover .thumb-svg{border-color:var(--link);}
.vol-thumb a:focus-visible{outline:2px solid var(--link);outline-offset:3px;}
.vol-thumb figcaption{
  margin-top:6px;font-size:.71875rem;line-height:1.45;color:var(--muted);
}
.vol-thumbnote{
  font-size:.78125rem;line-height:1.5;color:var(--ink);margin:0 0 10px;
  padding-left:10px;border-left:2px solid var(--accent);
}

/* Dose-variation chart. A log axis, because an 8x spread and a 2x spread cannot share a
   linear one legibly; the multiplier at the right is the honest headline per row. */
.thumb-doses{padding:2px 0;}
.thumb-doses .t-drug{font:600 12px/1 var(--sans,system-ui);fill:var(--ink);}
.thumb-doses .t-ind{font:400 10px/1 var(--sans,system-ui);fill:var(--muted);}
.thumb-doses .t-track{stroke:var(--rule);stroke-width:1;}
.thumb-doses .t-iqr{fill:#0072B2;fill-opacity:.32;}
.thumb-doses .t-med{stroke:#0072B2;stroke-width:2.5;stroke-linecap:round;}
.thumb-doses .t-x{font:700 11px/1 var(--mono,ui-monospace,monospace);fill:var(--ink);}
.thumb-doses .t-whisk{stroke:#0072B2;stroke-width:1.5;}
.thumb-doses .t-box{fill:#E69F00;stroke:#0072B2;stroke-width:1.5;}
.thumb-doses .t-med{stroke:#0b2a4a;stroke-width:2.5;}
.thumb-doses .t-agree{fill:#E69F00;stroke:#0b2a4a;stroke-width:1.5;}
.thumb-doses .t-agree-x{font:700 10px/1 var(--sans,system-ui);fill:var(--ink);}

/* Carriage chart: where agencies split. One 0-100% axis, the 25-75% zone tinted, a dashed
   line at half. The core kit is a strip of dots; each advanced drug is one dot. */
.thumb-carry .t-drug{font:600 12px/1 var(--sans,system-ui);fill:var(--ink);}
.thumb-carry .t-ind{font:400 10px/1 var(--sans,system-ui);fill:var(--muted);}
.thumb-carry .t-bar{fill:#0072B2;}
.thumb-carry .t-x{font:700 11px/1 var(--mono,ui-monospace,monospace);fill:var(--ink);}
.thumb-carry .t-track{stroke:var(--rule);stroke-width:1;}
.thumb-carry .t-split{fill:#E69F00;fill-opacity:.13;}
.thumb-carry .t-half{stroke:#0b2a4a;stroke-width:1;stroke-dasharray:3 3;}
.thumb-carry .t-zone{font:600 9px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;fill:var(--muted);}
.thumb-carry .t-zone-hi{fill:#9a6700;}
.thumb-carry .t-tick{font:400 9px/1 var(--mono,ui-monospace,monospace);fill:var(--muted);}
.thumb-carry .t-core{fill:#0072B2;fill-opacity:.55;}
.thumb-carry .t-dot{fill:#0072B2;stroke:#0b2a4a;stroke-width:1;}

/* "Why we are building this": the argument behind the arm, behind a native disclosure so
   the volumes stay above the fold. <details> needs no JS, prints open, and is open to a
   crawler regardless of state. The measure is narrower than the page: this is prose to be
   read, not a band to be scanned. */
.res-about{margin:8px 0 0;}
.res-about summary{
  display:inline-block;cursor:pointer;list-style:none;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--link);padding:5px 0;
}
.res-about summary::-webkit-details-marker{display:none;}
.res-about summary::after{content:" \203A";display:inline-block;transition:transform .15s;}
.res-about[open] summary::after{transform:rotate(90deg);}
.res-about summary:hover{text-decoration:underline;}
.res-about > p{
  font-size:.875rem;line-height:1.68;color:var(--muted);
  max-width:72ch;margin:0 0 11px;
}
.res-about > p:first-of-type{margin-top:8px;}
.res-about a{color:var(--link);}

/* ── /research/practice and /research/changes ───────────────────────────────────────
 * Two findings of the protocol census, built from the procedure, scope and timeline
 * extracts. They reuse the volume tokens above deliberately: a reader moving between
 * the census, the atlas and these should never feel a change of publisher.
 *
 * The authorization palette is Okabe-Ito, the same set the county map and the carriage
 * chart use, and it means ONE thing across all of them.
 *   BLUE      a standing order — the crew decides
 *   VERMILION contact required — a physician decides
 *   GRAY      not stated — the book names the procedure and not the authority
 * Gray is deliberately not a paler blue. "Not stated" is a different KIND of answer,
 * not a weaker version of one of the other two, and a ramp would imply it sits between
 * them on a scale it is not on.
 */
.a-seg-so{--m:#0072B2}
.a-seg-cr{--m:#D55E00}
.a-seg-un{--m:#9a968e}
.bar-seg.a-seg-so,.bar-seg.a-seg-cr,.bar-seg.a-seg-un{background:var(--m);}
.bar-key .key i.a-seg-so,.bar-key .key i.a-seg-cr,.bar-key .key i.a-seg-un{background:var(--m);}
.res-table .a-so{color:#0072B2;font-weight:600;}
.res-table .a-cr{color:#D55E00;font-weight:600;}
/* The "not stated" column stays at body weight and muted: it is a real count and must be
   readable, but it is not one of the two answers and should not compete with them. */
.res-table .a-un{color:var(--muted);}

/* Charts. These CROP rather than scale: no max-height, because a height cap shrinks the
   SVG and takes the row labels below reading size with it — the documented mistake the
   dose chart made. The figure scrolls sideways on a narrow screen instead. */
.practice-fig{margin:0;}
.practice-fig .pc-svg{
  display:block;width:100%;height:auto;min-width:560px;
  background:#fdfcfa;border:1px solid var(--rule);border-radius:var(--r);
  padding:10px 12px;box-sizing:border-box;
}
.res-map-wrap .practice-fig{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pc-svg .pc-lab{font:600 12.5px/1 var(--sans,system-ui);fill:var(--ink);}
.pc-svg .pc-st{font:500 11px/1 var(--mono,ui-monospace,monospace);fill:var(--muted);}
.pc-svg .pc-head{
  font:600 10.5px/1 var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  letter-spacing:.09em;text-transform:uppercase;fill:#0072B2;
}
.pc-svg .pc-head-cr,.pc-svg .pc-head-drop{fill:#D55E00;}
.pc-svg .pc-head-unk{fill:var(--muted);}
.pc-svg .pc-head-add{fill:#0072B2;}
.pc-svg .pc-axis{stroke:var(--ink);stroke-width:1;opacity:.55;}
.pc-svg .pc-so,.pc-svg .pc-add{fill:#0072B2;}
.pc-svg .pc-cr,.pc-svg .pc-drop{fill:#D55E00;}
.pc-svg .pc-num{font:700 11px/1 var(--mono,ui-monospace,monospace);fill:var(--ink);}
/* A count sitting INSIDE its own bar is drawn on the fill, so it inverts. */
.pc-svg .pc-in{fill:#fff;}
.pc-svg .pc-unk{font:500 11px/1 var(--mono,ui-monospace,monospace);fill:var(--muted);}
.pc-svg .pc-foot{font:400 10.5px/1 var(--sans,system-ui);fill:var(--muted);}

/* State scope verdicts. Colour carries the answer AND the word is always present, so the
   table reads identically in grayscale, in print, and to a screen reader. */
.sc-states{line-height:1.9;}
.sc-states span{
  display:inline-block;margin-right:7px;white-space:nowrap;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);font-size:11.5px;
  padding:2px 7px;border-radius:999px;border:1px solid var(--rule);
}
.sc-states abbr{text-decoration:none;font-weight:700;border-bottom:1px dotted currentColor;}
.sc-yes{color:#0072B2;background:color-mix(in oklch,#0072B2 8%,transparent);border-color:color-mix(in oklch,#0072B2 30%,var(--rule));}
.sc-no{color:#D55E00;background:color-mix(in oklch,#D55E00 8%,transparent);border-color:color-mix(in oklch,#D55E00 30%,var(--rule));}

/* The two certification chips. `unknown` and `certUndeterminable` must never look like
   degrees of the same thing: one is a fact we could not read, the other is a document
   declining to set the tier. Hollow-dashed for what we could not read; hatched and
   accent-bordered for a document that deliberately points somewhere else. */
.tierchip.t-unk{background:transparent;border:1.5px dashed var(--muted);}
.tierchip.t-und{
  background:repeating-linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 5px);
  border:1.5px solid var(--accent);
}

/* ── the change ledger ──────────────────────────────────────────────────────────── */
.ch-headline{padding-top:30px;}
.ch-headline h2{
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.18;letter-spacing:-.025em;
  margin:6px 0 10px;max-width:30ch;text-wrap:balance;
}
.ch-lede{font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:72ch;margin:0 0 16px;}
/* The quote is the evidence, so it is set as evidence: serif, a rule in the accent, and
   the citation attached to it rather than floating under the section. */
.ch-quote{
  margin:0 0 14px;padding:12px 0 12px 18px;border-left:3px solid var(--accent);
  max-width:74ch;
}
.ch-quote p{
  margin:0 0 8px;font-family:var(--serif,"Source Serif 4",Georgia,serif);
  font-size:1.0625rem;line-height:1.55;color:var(--ink);
}
.ch-quote cite{
  font-style:normal;font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11px;letter-spacing:.04em;color:var(--muted);
}
.ch-stats{gap:10px 34px;margin-top:4px;}

.ch-agency{margin:26px 0 0;}
.ch-agency h3{
  font-size:1.0625rem;letter-spacing:-.015em;margin:0 0 8px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
}
.ch-meta{
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}
.ch-table{font-size:.84375rem;}
.ch-table td{vertical-align:top;}
.ch-when{white-space:nowrap;font-family:var(--mono,ui-monospace,monospace);font-size:11px;color:var(--muted);}
.ch-what{min-width:200px;}
.ch-what strong{display:block;margin:3px 0 1px;font-size:.9375rem;}
.ch-kind{font-size:11px;color:var(--muted);}
/* ADDED can be stated plainly. STOPPED NAMING is the only phrase allowed for the other
   direction — never "removed", never "no longer permitted". The books stopped naming it;
   that is the whole of what we know. */
.ch-dir{
  display:inline-block;padding:1px 7px;border-radius:999px;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
}
.ch-add{color:#0072B2;background:color-mix(in oklch,#0072B2 10%,transparent);}
.ch-drop{color:#D55E00;background:color-mix(in oklch,#D55E00 10%,transparent);}
.ch-ev{color:var(--muted);line-height:1.55;}
.ch-ev q{font-family:var(--serif,"Source Serif 4",Georgia,serif);font-size:.9375rem;color:var(--ink);}
.ch-cite{
  display:block;margin-top:4px;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:10px;letter-spacing:.04em;color:var(--muted);
}

@media (max-width:640px){
  .ch-quote p{font-size:.9375rem;}
  .ch-agency h3{font-size:1rem;}
}

/* Findings of volume one. A narrower band under the volume cards: these answer questions
   the census raises, so they must read as its children rather than as a third volume. */
.res-findings{max-width:1120px;margin:0 auto;padding:34px 24px 0;box-sizing:border-box;}
.res-findings > h2{
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin:0 0 14px;padding-top:14px;border-top:1px solid var(--rule);
}
.find-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;}
.find{min-width:0;}
.find h3{font-size:1.0625rem;letter-spacing:-.018em;margin:0 0 4px;}
.find h3 a{color:var(--ink);text-decoration:none;}
.find h3 a:hover{text-decoration:underline;}
.find-q{font-size:.875rem;line-height:1.4;color:var(--ink);font-weight:600;margin:0 0 5px;}
.find-body{font-size:.84375rem;line-height:1.55;color:var(--muted);margin:0 0 7px;}
.find-count{
  font-size:.8125rem;color:var(--muted);margin:0;
  font-variant-numeric:tabular-nums;
}
.find-count strong{color:var(--ink);font-size:.9375rem;}
@media (max-width:760px){.find-grid{grid-template-columns:1fr;gap:24px;}}

/* "Depends": an agency whose book gives BOTH answers for one procedure, conditional on the
   presentation. Bluish-green from Okabe-Ito — a fourth answer, visibly not a blend of the
   two it sits between, because it is not a midpoint on a scale. */
.a-seg-cd{--m:#009E73}
.bar-seg.a-seg-cd{background:var(--m);}
.bar-key .key i.a-seg-cd{background:var(--m);}
.res-table .a-cd{color:#009E73;font-weight:600;}
.pc-svg .pc-cond{font:600 11px/1 var(--mono,ui-monospace,monospace);fill:#009E73;}
.pc-svg .pc-head-cond{fill:#009E73;}


/* Census findings slideshow. Scroll-snap does the sliding and the swipe; the inline script
   only wires the buttons and dots to it. */
.slides-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain;border-radius:var(--r);
}
.slides-track::-webkit-scrollbar{display:none;}
.slides-track:focus-visible{outline:2px solid var(--link);outline-offset:3px;}
.slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;}
.slide-t{margin:0 0 8px;font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);}
.slide-t span{display:block;margin-bottom:2px;font:500 10px/1.2 var(--mono,ui-monospace,monospace);letter-spacing:.14em;color:var(--muted);}
.slide figcaption{margin-top:6px;font-size:.71875rem;line-height:1.45;color:var(--muted);}
.slide-soon{
  display:flex;align-items:center;justify-content:center;aspect-ratio:440/234;padding:20px;
  box-sizing:border-box;text-align:center;font-size:.875rem;color:var(--muted);
  flex-direction:column;gap:8px;
  background:#fdfcfa;border:1px dashed var(--rule);border-radius:var(--r);
}
.slides-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;}
.slides-btn,.slides-dot{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--ink);}
.slides-btn{width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;}
.slides-btn:hover{background:var(--panel);}
.slides-dot{width:24px;height:24px;display:grid;place-items:center;}
.slides-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rule);}
.slides-dot[aria-current]::before{background:var(--ink);}
.slides-btn:focus-visible,.slides-dot:focus-visible{outline:2px solid var(--link);outline-offset:1px;}
.thumb-form .t-axis{stroke:var(--muted);stroke-width:1;}
.thumb-form .t-medline{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3;}
.thumb-form .t-x{font-size:10px;fill:var(--muted);}

/* /research/doses and /research/carry: chart on top, then a filtered, compact table.
   Without JS the filter bar stays hidden and every row shows. */
.fnd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:12px 32px;align-items:center;}
.fnd-fig{margin:0;max-width:560px;min-width:0;}
.fnd-fig .thumb-svg{display:block;width:100%;height:auto;box-sizing:border-box;padding:8px 10px;background:#fdfcfa;border:1px solid var(--rule);border-radius:var(--r);}
.fnd-fig figcaption{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:0 0 8px;}
.fnd-fig figcaption b{color:var(--ink);}
.fnd-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:12px 32px;align-items:center;}
.fnd-pair h2{margin-top:0;}
.fnd-note{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:6px 0 0;}
.fnd-rng strong{font-weight:700;color:var(--ink);}
.fnd-of{color:var(--muted);}
.fnd-hero + .res-table-wrap,.fnd-pair + .res-table-wrap{padding-top:24px;}
.res-table-wrap h2 .fnd-sub{font-size:.8125rem;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:6px;}
.fnd-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;}
.fnd-q{flex:0 1 220px;min-width:0;font:inherit;font-size:.875rem;padding:6px 10px;border:1px solid var(--rule);border-radius:var(--r);background:#fff;color:var(--ink);}
.fnd-chips{display:flex;flex-wrap:wrap;gap:6px;}
.fnd-chips button,.fnd-more button{font:inherit;font-size:.8125rem;padding:4px 10px;border:1px solid var(--rule);border-radius:999px;background:var(--ground);color:var(--ink);cursor:pointer;}
.fnd-chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--ground);}
.fnd-chips button:hover,.fnd-more button:hover{border-color:var(--muted);}
.fnd-more{margin:10px 0 0;font-size:.8125rem;color:var(--muted);display:flex;gap:10px;align-items:center;}
.fnd-table{min-width:0;}
.fnd-table th,.fnd-table td{padding:5px 8px;}
.fnd-table a{color:var(--link);}
.fnd-table td.num{white-space:nowrap;}
.fnd-drug{margin-left:8px;font-weight:400;font-size:.8125rem;color:var(--muted);}
.fnd-rng{white-space:nowrap;font-variant-numeric:tabular-nums;}
.fnd-box{width:110px;height:14px;vertical-align:middle;margin-right:10px;overflow:visible;}
.fnd-box .w{stroke:#0072B2;stroke-width:1.5;fill:none;}
.fnd-box rect{fill:#E69F00;stroke:#0072B2;stroke-width:1.5;}
.fnd-box .m{stroke:#0b2a4a;stroke-width:2.5;}
.fnd-box .agree{fill:#E69F00;stroke:#0b2a4a;stroke-width:1.5;}
.fnd-bar{display:inline-block;width:120px;height:8px;margin-right:10px;border-radius:2px;background:color-mix(in oklch,var(--rule) 60%,transparent);vertical-align:middle;overflow:hidden;}
.fnd-bar i{display:block;height:100%;background:#0072B2;}
@media (max-width:760px){
  .fnd-hero,.fnd-pair{grid-template-columns:minmax(0,1fr);}
  .fnd-box{display:block;width:90px;margin:0 0 2px;}
  .fnd-rng,.fnd-table tbody th{white-space:normal;}
  .fnd-table thead th{letter-spacing:.04em;}
  .fnd-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;}
  .fnd-chips button{flex:none;}
  .fnd-q{flex:1 1 100%;}
  .fnd-bar{width:70px;}
  .fnd-drug{display:block;margin:0;}
  .fnd-table th,.fnd-table td{padding:6px 5px;}
  .fnd-rng span{font-size:.75rem;}
}

/* Folds on /research/atlas: long reference sections behind a native disclosure. */
.res-fold{border-top:1px solid var(--rule);padding:4px 0;}
.res-fold + .res-fold{border-top:1px solid var(--rule);}
.res-fold summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;cursor:pointer;list-style:none;padding:10px 0;}
.res-fold summary::-webkit-details-marker{display:none;}
.res-fold summary::before{content:"\203A";display:inline-block;width:10px;color:var(--muted);transition:transform .15s;}
.res-fold[open] summary::before{transform:rotate(90deg);}
.res-fold summary h2{margin:0;font-size:1.0625rem;letter-spacing:-.015em;}
.res-fold summary span{font-size:.8125rem;color:var(--muted);}
.res-fold h3{font-size:.9375rem;letter-spacing:-.01em;margin:16px 0 6px;}
.res-table-wrap:has(> .res-fold){padding-top:24px;}
.res-method:has(> .res-fold){padding-top:0;}
.slide-soon strong{font-size:1.375rem;letter-spacing:-.02em;color:var(--ink);}
.slide-soon span{max-width:30ch;line-height:1.45;}
.slide-soon .soon-badge{font:600 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#0072B2;padding:6px 9px;border-radius:999px;}

/* By state: one thin 100% bar per state, grouped by how much the source can be trusted. */
.res-fold summary h3{margin:0;font-size:.9375rem;letter-spacing:-.01em;}
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px;padding:4px 0 14px;}
.st-item{display:flex;align-items:center;gap:10px;min-width:0;}
.st-item b{font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);font-size:.75rem;font-weight:500;width:2.2em;flex:none;}
.st-bar{display:flex;flex:1;height:12px;border-radius:2px;overflow:hidden;background:var(--panel);}
.st-bar i{background:var(--m);}
@media (max-width:860px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.st-grid{grid-template-columns:1fr;}}

/* ── /research/ hub at desktop width ─────────────────────────────────────────────────
 * The hub is a front page, not a reading band: one wider measure (--hub) for the volume
 * bar, hero, cards and method line so every left edge lines up, and type that scales with
 * it. Scoped to body.res-home so the census and findings pages keep the 1120 measure. */
.res-home{--hub:1320px;--hub-pad:clamp(16px,5vw,72px);}
.res-home .rbar-in,.res-home .res-hero,.res-home .res-vols,.res-home .res-method{
  max-width:calc(var(--hub) + 2 * var(--hub-pad));padding-inline:var(--hub-pad);
}
.res-home main{padding-bottom:clamp(64px,8vw,112px);}
.res-home .res-hero{padding-top:clamp(28px,3vw,48px);}
.res-home .res-eyebrow{font-size:12px;margin-bottom:12px;}
.res-home .res-hero h1{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.05;margin-bottom:18px;max-width:28ch;}
.res-home .lede{font-size:clamp(1rem,1.2vw,1.1875rem);line-height:1.55;max-width:68ch;}
.res-home .res-about{margin-top:14px;}
.res-home .res-about summary{font-size:12px;}
.res-home .res-about > p{font-size:.9375rem;}
.res-home .res-vols{
  margin-bottom:0;padding-top:clamp(28px,3.5vw,56px);column-gap:clamp(32px,4vw,64px);
}
.res-home .res-vols .vol-thumb{padding:clamp(16px,1.6vw,24px) clamp(18px,1.8vw,28px) 14px;border-radius:14px;}
.res-home .res-vols .vol-thumb figcaption{font-size:.84375rem;padding-top:12px;}
.res-home .res-vols .slide-t{font-size:clamp(1.25rem,1.5vw,1.5rem);}
.res-home .res-vols .slides-nav{top:clamp(12px,1.4vw,20px);right:clamp(14px,1.6vw,24px);}
.res-home .vol-eyebrow{font-size:12px;margin:clamp(24px,2.4vw,36px) 0 10px;}
.res-home .vol h2{font-size:clamp(1.625rem,2.6vw,2.5rem);margin-bottom:12px;}
.res-home .vol-q{font-size:clamp(1.0625rem,1.3vw,1.25rem);margin-bottom:10px;}
.res-home .vol-body{font-size:clamp(.9375rem,1.1vw,1.0625rem);margin-bottom:24px;}
.res-home .vol-stats{padding-top:20px;margin-bottom:20px;gap:14px 24px;}
.res-home .vol-stats dt{font-size:clamp(2rem,3.3vw,3rem);}
.res-home .vol-stats dd{margin-top:8px;font-size:.875rem;}
.res-home .vol-standing{font-size:.875rem;padding-top:12px;margin-bottom:18px;}
.res-home .vol-cta{font-size:1rem;}
.res-home .res-method{padding-top:clamp(40px,5vw,80px);}
.res-home .res-method h2{font-size:1.25rem;}
.res-home .res-method p{font-size:.9375rem;}
@media (max-width:760px){
  .res-home{--hub-pad:16px;}
  .res-home .res-vols{padding-top:24px;}
  .res-home .res-vols .vol-thumb{padding:12px 12px 10px;}
  .res-home .res-vols .slides-nav{top:auto;right:auto;}
}