/* The site's stylesheet. Mobile first: the stacked layout is the default, wider screens get the
   label | bar grid from 700px up, and print gets landscape pages with the axis repeated. */

/* --- fonts (self-hosted; see fonts/README.md) ------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivo-latin-400-normal.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: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/archivo-latin-500-normal.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: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/archivo-latin-600-normal.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-latin-opsz-normal.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;
}

/* --- theme ------------------------------------------------------------------------------------ */
:root {
  --bg: #fbfaf7;
  --fg: #1f2328;
  --muted: #5d636b;
  --rule: #dcd8cf;
  --grid: #e7e3da;
  --chip: rgba(251, 250, 247, 0.92);
  --link: #2f5d8c;
  --accent: #2F5D8C;
  --marker: #b3123a;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}
.k-clinician { --c: #2F5D8C; }
.k-self_reported { --c: #7FA3C9; }
.k-preference_or_belief { --c: #4C7A6A; }
.k-modelled_trend { --c: #6E5B9E; }
.k-condom { --c: #9A7B3C; }
.k-threshold { --c: #6B7280; }
.k-unverified_claim { --c: #8B8178; }
.k-record { --c: #6D4C61; }
.k-receiving_anatomy { --c: #9C4F72; }
.tone-clinician { --c: #2F5D8C; }
.tone-pooled { --c: #6E5B9E; }
.tone-self { --c: #7FA3C9; }
.tone-ed { --c: #6B7280; }

@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --fg: #e6e4df;
    --muted: #a3a8ae;
    --rule: #33373c;
    --grid: #262a2f;
    --chip: rgba(21, 23, 26, 0.9);
    --link: #8db8e6;
    --accent: #6FA0D6;
    --marker: #e0426a;
  }
  .k-clinician { --c: #6FA0D6; }
  .k-self_reported { --c: #4F7BA8; }
  .k-preference_or_belief { --c: #6FA893; }
  .k-modelled_trend { --c: #9B85CE; }
  .k-condom { --c: #C6A15E; }
  .k-threshold { --c: #8A94A0; }
  .k-unverified_claim { --c: #8A8279; }
  .k-record { --c: #B089A2; }
  .k-receiving_anatomy { --c: #C98BA8; }
  .tone-clinician { --c: #6FA0D6; }
  .tone-pooled { --c: #9B85CE; }
  .tone-self { --c: #4F7BA8; }
  .tone-ed { --c: #8A94A0; }
}

/* --- page ------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.5 var(--sans);
  overflow-wrap: break-word;
}
svg { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; }
h1 { font-size: 1.9rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.site-header, main, .site-footer { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
.site-header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule);
}
.site-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--fg); text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.site-header nav a { text-decoration: none; }
.site-header nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.site-footer {
  margin-top: 3rem; padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 0.9rem;
}
.site-footer p { margin: 0.25rem 0; }

.intro, .prose { max-width: 44rem; font-family: var(--serif); font-size: 1.1rem; }
.prose.wide { max-width: none; }
.prose.wide > p, .prose.wide > ul, .prose.wide .licence { max-width: 44rem; }
.prose code { font-size: 0.9em; }
.explainers { max-width: 44rem; font-family: var(--serif); font-size: 1.05rem; }
.explainers .sources { margin-top: 2rem; font-size: 0.9rem; color: var(--muted); }

/* --- legend ----------------------------------------------------------------------------------- */
.legend h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.legend ul, .legend-tones { list-style: none; margin: 0 0 0.75rem; padding: 0; font-size: 0.85rem; }
.legend-kinds, .legend-tones { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.swatch {
  display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.35rem; vertical-align: -0.1rem;
  border-radius: 2px; background: var(--c);
}
.legend-styles li { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; }
.legend-styles li > span { flex: 1 1 auto; min-width: 0; }
.legend-styles .sample { width: 3rem; flex: none; --c: var(--muted); }
.legend-avg { font-weight: 600; }
.legend-nonavg { color: var(--muted); }

/* --- tabs (CSS only; the radio buttons work without JavaScript) ------------------------------- */
.tab-input, .filter-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tabbar {
  display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1.5rem 0 0.5rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.tab, .filter {
  cursor: pointer; padding: 0.4rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 0.9rem; font-weight: 500; user-select: none;
}
.filter { margin-left: auto; font-weight: 400; color: var(--muted); }
.filter::before { content: "☐ "; }
#v-length:checked ~ .tabbar .tab-length,
#v-girth:checked ~ .tabbar .tab-girth,
#v-normalised:checked ~ .tabbar .tab-normalised,
#v-studies:checked ~ .tabbar .tab-studies { background: var(--accent); border-color: var(--accent); color: var(--bg); }
#v-length:focus-visible ~ .tabbar .tab-length,
#v-girth:focus-visible ~ .tabbar .tab-girth,
#v-normalised:focus-visible ~ .tabbar .tab-normalised,
#v-studies:focus-visible ~ .tabbar .tab-studies,
#hide-extrap:focus-visible ~ .tabbar .filter { outline: 2px solid var(--link); outline-offset: 2px; }
#hide-extrap:checked ~ .tabbar .filter { color: var(--fg); border-color: var(--fg); }
#hide-extrap:checked ~ .tabbar .filter::before { content: "☑ "; }
#hide-extrap:checked ~ .panels .row.extrap { display: none; }

.panel { display: none; }
#v-length:checked ~ .panels .panel-length,
#v-girth:checked ~ .panels .panel-girth,
#v-normalised:checked ~ .panels .panel-normalised,
#v-studies:checked ~ .panels .panel-studies { display: block; }
.panel > h2 { margin-top: 1rem; }
.panel-intro { max-width: 44rem; font-family: var(--serif); font-size: 1.05rem; }

/* --- charts: stacked rows (phones, the default) ----------------------------------------------- */
.chart { position: relative; }
.chart-head {
  position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 0.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.axis-row .cell-label { font-size: 0.75rem; color: var(--muted); }
/* The axis spans its cell (it is a flex item from 700px up, and its ticks are positioned, so without a
   width it would shrink to nothing). Ticks thin out as the axis narrows: a tick classed wN shows only
   while the axis is at least N rem wide (build.py's axis_ticks); 0 and the maximum always show. */
.axis {
  position: relative; width: 100%; height: 1.2rem; container-type: inline-size;
  font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.tick:first-child { transform: none; }
.tick:last-child { transform: translateX(-100%); }
@container (width < 64rem) { .tick.w64 { display: none; } }
@container (width < 48rem) { .tick.w48 { display: none; } }
@container (width < 40rem) { .tick.w40 { display: none; } }
@container (width < 32rem) { .tick.w32 { display: none; } }
@container (width < 24rem) { .tick.w24 { display: none; } }
@container (width < 20rem) { .tick.w20 { display: none; } }
@container (width < 16rem) { .tick.w16 { display: none; } }
@container (width < 12rem) { .tick.w12 { display: none; } }
@container (width < 8rem) { .tick.w8 { display: none; } }

.row { position: relative; padding: 0.6rem 0; border-bottom: 1px solid var(--grid); }
.row.marked::before {
  content: ""; position: absolute; left: -0.6rem; top: 0.4rem; bottom: 0.4rem; width: 3px;
  border-radius: 2px; background: var(--marker);
}
.cell-label { min-width: 0; }
.label { display: block; font-size: 0.95rem; line-height: 1.25; }
.avg .label { font-weight: 600; color: var(--fg); }
.nonavg .label { font-weight: 400; color: var(--muted); }
.src { display: block; font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.cell-bar { position: relative; min-width: 0; }
.bar { display: block; width: 100%; height: auto; margin: 0.3rem 0; overflow: visible; }
.val { display: block; font-size: 0.8rem; line-height: 1.3; font-variant-numeric: tabular-nums; }

/* SVG bars: viewBox units are inches on both axes, so the drawing is 1:1 at every width */
.grid line { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Bars are opaque so the grid behind them never shows through: a faded bar (--a, ~55%) or a light fill
   (--f) is the kind colour mixed into the page background, not a transparent one. */
.b { --a: 1; --f: 1; fill: var(--c); }
.nonavg .b { --a: 0.55; }
.b-extrapolated { --f: 0.25; stroke: var(--c); stroke-width: 0.03; stroke-dasharray: 0.12 0.07; }
.b-extrapolated_beyond_data {
  --f: 0.1; stroke: var(--c); stroke-width: 0.025; stroke-dasharray: 0.01 0.05; stroke-linecap: round;
}
.b-outline { --f: 0.06; stroke: var(--c); stroke-width: 0.03; }
@supports (fill: color-mix(in srgb, red 50%, blue)) {
  .b { fill: color-mix(in srgb, var(--c) calc(var(--a) * var(--f) * 100%), var(--bg)); }
  .b-extrapolated, .b-extrapolated_beyond_data, .b-outline {
    stroke: color-mix(in srgb, var(--c) calc(var(--a) * 100%), var(--bg));
  }
}
@supports not (fill: color-mix(in srgb, red 50%, blue)) {
  .nonavg .b { opacity: 0.55; }
  .b { fill-opacity: var(--f); }
}
.orig { stroke: var(--fg); stroke-width: 0.025; stroke-dasharray: 0.06 0.05; }

/* forest plots */
.forest h3 .count { font-family: var(--sans); font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.frow { padding: 0.4rem 0; border-bottom: 1px solid var(--grid); font-size: 0.85rem; }
.frow.axis-row { padding: 0; border: 0; }
.frow .cell-label .src { display: inline; }
.track {
  position: relative; height: 0.9rem; margin: 0.25rem 0;
  background: linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / calc(100% / var(--intervals)) 100%;
}
.whisker { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--c); opacity: 0.75; }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .whisker { background: color-mix(in srgb, var(--c) 75%, var(--bg)); opacity: 1; }
}
.whisker.clip-lo { border-left: 0; }
.dot {
  position: absolute; top: 50%; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c);
  transform: translate(-50%, -50%);
}
.fval { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- charts: label | bar grid from 700px up --------------------------------------------------- */
@media (min-width: 700px) {
  .row {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 1rem; align-items: center;
    padding: 0.15rem 0; border-bottom: 0;
  }
  .axis-row { padding: 0; }
  .cell-bar { display: flex; align-items: center; min-height: 2.6rem; }
  .bar { margin: 0; }
  .val {
    position: absolute; top: 50%; left: calc(var(--tip) * 100%);
    max-width: calc((1 - var(--tip)) * 100% - 0.4rem); transform: translate(0.4rem, -50%);
  }
  .val-in {
    left: auto; right: calc((1 - var(--tip)) * 100%); max-width: calc(var(--tip) * 100% - 0.4rem);
    transform: translate(-0.4rem, -50%); text-align: right; padding: 0 0.25rem; border-radius: 3px;
    background: var(--chip);
  }
  .frow { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 19rem; gap: 0 1rem; align-items: center; padding: 0.1rem 0; border-bottom: 0; }
  .track { margin: 0; }
}

/* --- tables: scroll inside their own container, never the page -------------------------------- */
/* position: relative keeps absolutely positioned content (the visually hidden headings) inside the
   scroll box; otherwise it escapes to the page and widens it */
.table-wrap { position: relative; width: 100%; max-width: 100%; overflow-x: auto; margin: 1rem 0; -webkit-overflow-scrolling: touch; }
.data-table { border-collapse: collapse; min-width: 44rem; font-size: 0.82rem; }
.data-table caption { text-align: left; font-weight: 600; padding: 0.25rem 0; }
.data-table th, .data-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; }
.data-table thead th { border-bottom: 2px solid var(--rule); white-space: nowrap; }
.data-table tbody th { font-weight: 500; }
.data-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table .cm { color: var(--muted); font-size: 0.75rem; }
.data-table .cite { min-width: 18rem; }
.data-table tr.extrap td.n { font-style: italic; }
.report { white-space: nowrap; font-size: 0.75rem; }
button.sort {
  font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
th[aria-sort="ascending"] button.sort::after { content: " ↑"; }
th[aria-sort="descending"] button.sort::after { content: " ↓"; }
#table-measurements td, #table-studies td { min-width: 6rem; }
.downloads li { margin: 0.25rem 0; }

/* --- print: landscape, every view in turn, rows never split, axis on every page, light only ---- */
/* no paper size: the printer's own paper is used (Letter in the US, A4 elsewhere), turned landscape */
@page { size: landscape; margin: 10mm; }
@media print {
  body { font-size: 9pt; background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root { --bg: #fff; --fg: #000; --chip: #fff; }
  .site-header nav, .tabbar, .report, .filter { display: none !important; }
  .site-header, main, .site-footer { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .intro, .prose, .explainers, .panel-intro { max-width: none; font-size: 10pt; }
  .panel { display: block !important; break-before: page; }
  .row.extrap { display: table-row !important; }
  /* fixed layout: the label (and forest value) columns take their set widths, the ruler the rest */
  .chart { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
  .forest > h3 { display: table-caption; text-align: left; }
  .chart-head { display: table-header-group; position: static; }
  .chart-body { display: table-row-group; }
  .chart .row, .chart .frow { display: table-row; break-inside: avoid; page-break-inside: avoid; }
  .chart .row > .cell-label, .chart .row > .cell-bar,
  .chart .frow > .cell-label, .chart .frow > .cell-bar, .chart .frow > .fval {
    display: table-cell; vertical-align: middle; padding: 0.05rem 0.4rem 0.05rem 0;
  }
  .chart .row > .cell-label, .chart .frow > .cell-label { width: 13rem; }
  /* in a table row the marker pseudo-element would open a third column and halve the ruler; draw it on
     the label cell instead */
  .chart .row.marked::before { content: none; }
  .chart .row.marked > .cell-label { box-shadow: inset 3px 0 var(--marker); padding-left: 0.5rem; }
  .chart .frow > .fval { width: 14rem; }
  .cell-bar { position: relative; min-height: 0; }
  .val {
    position: absolute; top: 50%; left: calc(var(--tip) * 100%); max-width: calc((1 - var(--tip)) * 100% - 0.3rem);
    transform: translate(0.3rem, -50%); font-size: 7.5pt;
  }
  .val-in { left: auto; right: calc((1 - var(--tip)) * 100%); max-width: calc(var(--tip) * 100% - 0.3rem); transform: translate(-0.3rem, -50%); text-align: right; background: #fff; }
  .table-wrap { overflow: visible; }
  .data-table { min-width: 0; width: 100%; font-size: 7.5pt; }
  .data-table tr { break-inside: avoid; }
  .tables, .explainers { break-before: page; }
}