/* Health Research Map: the shared look (prototype version 32, Option E, colourway A3 Navy & Copper).
   One colour for Saudi data and links, one for industry, grey for test data; no red anywhere.
   Every text and ground pair here passes 4.5:1. */
/* IBM Plex Sans, carried in the site under the SIL Open Font License (fonts/IBMPlexSans-OFL.txt). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2"); }

:root {
  --ink: #111C33;
  --text: #3A4659;
  --muted: #4F5B70;
  --line: #DCE0E7;
  --line-soft: #E4E8EF;
  --ground: #FFFFFF;
  --ground-soft: #F4F5F7;
  --data: #2B4F8F;
  --data-light: #8DA3CF;
  --industry: #B5651D;
  --industry-text: #8F4E16;
  --grey: #6B7A93;
  --ties: #00826A;   /* author ties only, in papers: its own value (prototype version 32) */
  --saudi-green: #005430;   /* the header's "Saudi Arabia" only (the logo decision, option C) */
  --prov-bg: #FFF0D4; --prov-fg: #6E4300; --prov-bd: #F2C879;
  --none-bg: #EEF0F3;
  --fake-bg: #FFFFFF; --fake-fg: #4F5B70; --fake-bd: #8A92A3;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--ground); font-size: 16px; line-height: 1.55; font-variant-numeric: tabular-nums; }
a { color: var(--data); }
a:hover { color: var(--ink); }
.wrap { max-width: 1392px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ground); padding: 8px 12px; z-index: 10; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* header and menu */
.site-header { border-bottom: 1px solid var(--line); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 20px; padding-bottom: 20px; }
/* The logo, "Open Atlas" (Alaa): mark-color.svg beside the site's name in text. Its clear space is at least a
   quarter of its height on every side: the gap to the name, its own margin above and below, and the page's edge. */
.brand { --mark: 40px; display: flex; align-items: center; gap: max(12px, calc(var(--mark) / 4)); text-decoration: none; color: var(--ink); }
.brand-mark { display: block; flex: none; width: var(--mark); height: var(--mark); margin: calc(var(--mark) / 4) 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.brand-country { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--saudi-green); }
/* The name never runs onto two lines (Alaa's answer on the narrow header). From 374 px up the header has its full
   sizes. On a narrower screen the name can't fit beside the Menu button at those sizes, so the mark and the lettering
   step down together and the gaps close; the clear space stays at least a quarter of the mark's height. */
.brand-name, .brand-country { white-space: nowrap; }
@media (max-width: 373px) {
  .header-row { column-gap: 12px; }
  .brand { --mark: 36px; }
  .brand-name { font-size: 16px; }
  .brand-country { font-size: 12px; }
}
@media (max-width: 339px) {
  .header-row { column-gap: 8px; }
  .brand { --mark: 32px; gap: 10px; }
  .brand-name { font-size: 15px; }
  .brand-country { font-size: 11px; }
  html.menu-mode .menu-button { padding: 0 10px; }
}
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px; font-size: 14px; }
.site-nav a { text-decoration: none; color: var(--text); padding: 10px; border-bottom: 2px solid transparent; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--data); }

.fake-banner { background: var(--ground-soft); border-bottom: 1px dashed var(--fake-bd); font-size: 14px; color: var(--muted); padding: 10px 0; }
.fake-banner strong { color: var(--ink); }

/* type */
h1 { margin: 0; font-size: 72px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; }
h2 { margin: 0 0 8px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.16; }
h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
h2.kicker { font-size: 12px; }
.accent { color: var(--data); }
.lead { margin: 0; font-size: 18px; }
.small { font-size: 13px; line-height: 1.5; }
.muted { color: var(--muted); }
.block { display: block; }
.note { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 980px; }
.intro { max-width: 820px; font-size: 15px; color: var(--text); }

/* hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px 64px; padding: 54px 0 38px; align-items: end; }
.hero-text { max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
.hero-text p { margin: 0; }

/* view controls */
.controls { position: relative; border: 1px solid var(--line); border-radius: 4px; background: var(--ground-soft); padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.controls-title { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.control { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid #C8CFDB; border-radius: 4px; overflow: hidden; background: var(--ground); }
.segmented button { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 13px; border: 0; border-right: 1px solid var(--line-soft); background: var(--ground); color: var(--ink); cursor: pointer; min-height: 44px; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.segmented button:focus-visible { outline: 3px solid var(--data); outline-offset: -3px; }
.controls-note { font-size: 12px; color: var(--muted); max-width: 290px; line-height: 1.45; }
.live { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
/* Where the control shows in full, its title (with its ⓘ) has its own column on the left, centred from top to bottom
   of the box, and every row of choices starts at one left edge to its right (the round after pull request 51). */
@media (min-width: 721px) {
  .controls { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 12px 28px; }
  /* The rows share two columns (Alaa's decision on pull request 52): a row's label, then its buttons. So every
     group of buttons starts at one left edge, and "Year" sits to the left of that edge, after the title. */
  .controls-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 12px 0; min-width: 0; }
  .controls-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; gap: 0; min-width: 0; }
  .controls-row > .segmented { grid-column: 2; justify-self: start; }
  .controls-row > :not(.segmented) { grid-column: 1; margin-right: 10px; }
}

/* figures */
.headlines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 26px; }
.headline { padding: 26px 32px 26px 0; min-width: 0; }
.label { margin: 0 0 2px; font-size: 14px; }
.big { margin: 0; font-size: 60px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
.mid { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.mid-small { font-size: 26px; font-weight: 600; display: block; }
.data { color: var(--data); }
.industry { color: var(--industry-text); }
.industry-text { color: var(--industry-text); }
.grey { color: var(--muted); }
.badges { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; display: inline-block; }
.badge.none { background: var(--none-bg); color: var(--muted); }
.status-name { font-size: 13px; font-weight: 700; }
.badge.fake { background: var(--fake-bg); color: var(--fake-fg); border: 1px dashed var(--fake-bd); }
.source { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 1.5; }
.tiles { margin-top: 36px; }
.tile-row, .figures { gap: 20px 32px; }
.tile, .figure { border-top: 1px solid var(--line); padding-top: 14px; min-width: 0; }
.tile p, .figure p { margin-top: 0; }

/* chapters */
.chapter { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--ink); }
.timing { margin-top: 24px; background: var(--ground-soft); border: 1px solid var(--line); border-radius: 4px; padding: 18px 22px; }
.timing-items { list-style: none; margin: 0 0 8px; padding: 0; gap: 12px 24px; }
.timing-items li { display: flex; flex-direction: column; }

/* charts */
.chart { margin: 24px 0 0; min-width: 0; }
.chart figcaption { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.chart-pair, .obs-pair { gap: 24px 48px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); }
.key { display: inline-block; width: 14px; height: 10px; margin-right: 4px; vertical-align: middle; }
.key.data { background: var(--data); } .key.estimated { background: var(--data-light); }
.key.industry { background: var(--industry); } .key.grey { background: var(--grey); }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; transition: opacity 0.15s; }
.bar-row.dim { opacity: 0.35; }
.bar-stack { display: flex; flex-direction: column; gap: 3px; }
.bar-track { display: flex; height: 18px; background: var(--ground-soft); border-radius: 2px; overflow: hidden; }
.bar-track.thin { height: 8px; }
.bar { display: block; height: 100%; }
.bar.data { background: var(--data); }
.bar.estimated { background: var(--data-light); }
.bar.industry { background: var(--industry); }
.bar.grey { background: var(--grey); position: relative; }
.bar.inner { position: absolute; left: 0; top: 0; }
.bar.hatch { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.45) 0 3px, transparent 3px 6px); }
.bar-year abbr { text-decoration: none; font-size: 11px; font-weight: 700; color: var(--prov-fg); }
.bar-value { white-space: nowrap; }
.table-toggle { margin-top: 12px; font-size: 13px; }
.table-toggle summary { cursor: pointer; color: var(--data); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.table-toggle table { border-collapse: collapse; margin-top: 6px; }
.table-toggle th, .table-toggle td { text-align: right; padding: 4px 12px; border-bottom: 1px solid var(--line-soft); }
.table-toggle th:first-child { text-align: left; }
/* "Show Table" is a button in the site's style, at its chart's left edge (the round after pull request 51). */
.button-summary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 6px; background: none; font-weight: 600; font-size: 14px; color: var(--data); cursor: pointer; list-style: none; }
.button-summary::-webkit-details-marker { display: none; }
.button-summary:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
.table-wrap { overflow-x: auto; }

/* routes */
.routes { border-top: 1px solid var(--line); margin-top: 14px; }
.route { padding: 24px 24px 24px 0; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px; min-width: 0; border-bottom: 1px solid var(--line); }
.route-n { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.route-title { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.route-text { font-size: 13px; color: var(--muted); line-height: 1.5; }
.route-arrow { font-size: 20px; color: var(--data); margin-top: auto; padding-top: 14px; }

/* the status legend */
.legend-box { margin-top: 36px; background: var(--ground-soft); border: 1px solid var(--line); border-radius: 4px; padding: 24px; }
.legend-box h2 { font-size: 15px; }
.status-grid { gap: 20px; }
.status-grid p { margin: 8px 0 0; color: var(--text); }

/* footer */
.site-footer { margin-top: 36px; margin-bottom: 40px; border-top: 1px solid var(--ink); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 16px 40px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.footer-text { flex: 1 1 560px; display: flex; flex-direction: column; gap: 8px; }
.footer-text p { margin: 0; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-links a { text-decoration: none; }
.footer-links a.strong { font-weight: 600; }
.footer-links a.button { font-size: 14px; font-weight: 600; padding: 11px 15px; border-radius: 4px; background: var(--data); color: #FFFFFF; }

@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 44px; }
  h2 { font-size: 24px; }
  .big { font-size: 44px; }
  .mid { font-size: 32px; }
  .site-nav { margin-left: 0; }
}

/* counts that open their record lists, and the record panel */
button.count { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; border-bottom: 2px dotted currentColor; }
button.count:hover { color: var(--ink); }
button.count:focus-visible, .record-panel button:focus-visible { outline: 3px solid var(--data); outline-offset: 2px; }
button.small-count { border-bottom-width: 1px; min-height: 24px; }
/* Clearer cues (design rules 1.34, rule 49). A count in a table or chart opens its records: it keeps its dotted
   underline, in the link colour. "View Records" under a headline card's source line reads as a link and opens the
   same records as the card's count. The national facts opener says whether it is open, without a script. */
main table button.count, .bars button.count, .rate-rows button.count, .group-bars button.count, .matrix button.count { border-bottom-color: var(--data); }
button.view-records { font: inherit; font-size: 14px; font-weight: 600; color: var(--data); background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.view-records:hover { color: var(--ink); }
button.view-records:focus-visible { outline: 3px solid var(--data); outline-offset: 2px; }
.card-records { margin: 4px 0 0; }
details:not([open]) > summary > .when-open, details[open] > summary > .when-closed { display: none; }
.record-panel { position: fixed; inset: 0; background: rgba(17, 28, 51, 0.45); display: flex; justify-content: flex-end; z-index: 20; }
.record-sheet { background: var(--ground); width: min(720px, 100%); height: 100%; overflow-y: auto; padding: 24px 28px 32px; box-shadow: -4px 0 24px rgba(17, 28, 51, 0.2); }
.record-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.record-title { font-size: 22px; margin: 6px 0 8px; }
.record-panel button { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 8px 14px; border: 1px solid #C8CFDB; border-radius: 4px; background: var(--ground); color: var(--ink); cursor: pointer; }
.record-panel button:disabled { color: var(--muted); cursor: default; opacity: 0.6; }
.record-list { list-style: decimal; margin: 16px 0; padding-left: 22px; }
.record-list li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.record-list p { margin: 2px 0; }
.record-name { font-size: 15px; font-weight: 600; }
.record-label { color: var(--muted); }
.record-pager { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
/* The panel's states (rule 47): a loading, empty or failed list says so under its title; Retry sits with the message. */
.record-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0; font-size: 15px; }
.record-state p { margin: 0; }
body.panel-open { overflow: hidden; }

/* page heads and the Publications charts */
.page-head { padding: 44px 0 26px; }
.page-title { font-size: 52px; font-weight: 500; letter-spacing: -0.03em; margin: 0 0 12px; }
.bar-label { font-size: 13px; }
.group-bars .bar-row, .bars .bar-row { grid-template-columns: minmax(140px, 260px) minmax(0, 1fr) auto; }
.group summary { cursor: pointer; list-style: none; padding: 6px 0; min-height: 44px; }
.group summary::-webkit-details-marker { display: none; }
.group summary .bar-label::before { content: "▸ "; color: var(--data); }
.group[open] summary .bar-label::before { content: "▾ "; }
.group .types { margin: 4px 0 10px 18px; }
.outside { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }
@media (max-width: 720px) {
  .page-title { font-size: 36px; }
}

.bar.ties { background: var(--ties); }

/* ---- data tables: Health Areas, International Comparison, Institutions And Clusters */
.table-wrap { overflow-x: auto; margin-top: 20px; -webkit-overflow-scrolling: touch; }
.data-table, .areas-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.data-table caption, .areas-table caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 10px; caption-side: top; }
.data-table th, .data-table td, .areas-table th, .areas-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; text-align: right; }
.data-table thead th, .areas-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); vertical-align: bottom; }
.data-table th:first-child, .data-table td:first-child, .areas-table th:first-child { text-align: left; min-width: 220px; }
.areas-table td:last-child { text-align: left; }
.areas-table tbody th { font-weight: 600; color: var(--data); }
.rank { display: inline-block; min-width: 1.6em; color: var(--muted); font-weight: 400; }
.muted-row th, .muted-row td { background: var(--ground-soft); color: var(--muted); }
.muted-row tbody th, .areas-table .muted-row th { color: var(--muted); }
.grey-row th, .grey-row td { background: var(--none-bg); color: var(--muted); }
.areas-table .grey-row th { color: var(--muted); }
.badge.rating.close { background: #E7F0E9; color: #1F4D2C; border: 1px solid #A9C9B2; }
.badge.rating.partial { background: var(--prov-bg); color: var(--prov-fg); border: 1px solid var(--prov-bd); }
.badge.rating.no { background: var(--none-bg); color: var(--muted); border: 1px solid var(--line); }
.badge.band { font-weight: 600; }
.badge.band.none { background: var(--none-bg); color: var(--muted); border: 1px solid var(--line); }
.badge.band.low { background: #FBEEE1; color: #7A4310; border: 1px solid #E6C19E; }
.badge.band.high { background: #8F4E16; color: #FFFFFF; border: 1px solid #8F4E16; }
.rate-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr minmax(120px, auto); gap: 4px 16px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.rate-row.saudi { font-weight: 700; }
.rate-track { position: relative; height: 14px; background: var(--ground-soft); }
.rate-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #5B7BB5; }
.rate-row.saudi .rate-bar { background: var(--data); }
.rate-ref { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--ink); }
.rate-group { font-size: 12px; color: var(--muted); font-weight: 400; display: block; }
@media (max-width: 640px) {
  .rate-row { grid-template-columns: 1fr; }
  .data-table th:first-child, .areas-table th:first-child { min-width: 160px; }
}
.key.peer { background: #5B7BB5; }
.key-line { display: inline-block; width: 0; height: 12px; border-left: 2px dashed var(--ink); margin: 0 4px 0 6px; vertical-align: middle; }
.rate-rows { margin-top: 8px; }
.band-key { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.badge.band, .badge.rating { white-space: nowrap; }
.fact-list { list-style: none; padding: 0; margin: 8px 0 16px; }
.fact-list li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.matrix td { text-align: center; min-width: 72px; }
.scatter { width: 100%; max-width: 720px; height: auto; display: block; }
.scatter .axis { stroke: var(--line); stroke-width: 1; }
.scatter .equal { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 4; }
.scatter .dot { fill: var(--data); }
.scatter .tick { font-size: 11px; fill: var(--muted); }
.shortcuts { margin: 18px 0 8px; }
.shortcuts ul { list-style: none; padding: 0; margin: 0; gap: 10px 20px; }
/* The boxes of one row are one height, each title at the top of its box (Alaa's decision on pull request 52). */
.shortcuts li { display: flex; }
.shortcuts a { display: block; flex: 1 1 auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font-weight: 600; min-height: 44px; }
.shortcuts a:hover { border-color: var(--data); }
blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--line); }

/* National health facts charts (sitebuild/facts_view.py). Series slots, in fixed order: the site's data blue, then
   orange, aqua and amber (checked with the data-visualisation palette validator: colour-blind separation passes;
   aqua and amber sit below 3:1 on white, so every chart carries its figures as text or in a table). */
:root { --s1: #2B4F8F; --s2: #D95926; --s3: #1BAF7A; --s4: #C98500; }
.key.s1, .bar.s1, .seg.s1, .dot.s1 { background: var(--s1); }
.key.s2, .bar.s2, .seg.s2, .dot.s2 { background: var(--s2); }
.key.s3, .bar.s3, .seg.s3, .dot.s3 { background: var(--s3); }
.key.s4, .bar.s4, .seg.s4, .dot.s4 { background: var(--s4); }
.facts-block { margin-top: 28px; }
.facts-chart figcaption { margin-bottom: 2px; }
.facts-line { width: 100%; max-width: 720px; height: auto; display: block; margin: 6px 0; }
.facts-line .axis { stroke: var(--line); stroke-width: 1; }
.facts-line .line { fill: none; stroke-width: 2; }
.facts-line .line.s1, .facts-line .pt.s1 { stroke: var(--s1); } .facts-line .pt.s1 { fill: var(--s1); }
.facts-line .line.s2, .facts-line .pt.s2 { stroke: var(--s2); } .facts-line .pt.s2 { fill: var(--s2); }
.facts-line .line.s3, .facts-line .pt.s3 { stroke: var(--s3); } .facts-line .pt.s3 { fill: var(--s3); }
.facts-line .line.s4, .facts-line .pt.s4 { stroke: var(--s4); } .facts-line .pt.s4 { fill: var(--s4); }
.facts-line .pt { stroke: var(--ground); stroke-width: 2; }
.facts-line .band { opacity: 0.14; stroke: none; }
.facts-line .band.s1 { fill: var(--s1); } .facts-line .band.s2 { fill: var(--s2); } .facts-line .band.s3 { fill: var(--s3); } .facts-line .band.s4 { fill: var(--s4); }
.facts-line .tick { font-size: 11px; fill: var(--muted); }
.facts-line .end { font-size: 12px; fill: var(--text); }
.facts-bar-row, .dot-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.facts-bar-row .bar { border-radius: 0 2px 2px 0; }
.bar-track.thin-pair { height: 9px; margin: 1px 0; }
.seg-bar { display: flex; gap: 2px; height: 22px; margin: 8px 0 4px; }
.seg { display: block; height: 100%; }
.seg:first-child { border-radius: 2px 0 0 2px; } .seg:last-child { border-radius: 0 2px 2px 0; }
.dot-row { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.dot-stack { display: flex; flex-direction: column; gap: 6px; }
.dot-track { position: relative; height: 12px; background: var(--ground-soft); border-radius: 2px; }
.dot-int { position: absolute; top: 5px; height: 2px; }
.dot-int.s1 { background: var(--s1); } .dot-int.s2 { background: var(--s2); } .dot-int.s3 { background: var(--s3); } .dot-int.s4 { background: var(--s4); }
.dot { position: absolute; top: 1px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ground); }
.dot-row .bar-value { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.facts-differ td { white-space: nowrap; }
.facts-differ td:nth-child(3), .facts-differ td:nth-child(4) { white-space: normal; text-align: left; }
.facts-differ th[scope="rowgroup"] { text-align: left; }

.cell-note { white-space: normal; text-align: left; max-width: 28ch; }

/* A wide table scrolls inside its own box, never the page, at every width (main chat's decision). */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
details, figure, .chart { min-width: 0; max-width: 100%; }
/* Resources (sitebuild/resources_page.py) */
.res-nav ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.res-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.res-nav a[aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration: none; }
.resources h3 { margin-top: 28px; }
.resources .route { max-width: 820px; padding-left: 22px; }
.resources .route li { padding: 4px 0; }
.res-table th, .res-table td { text-align: left; }
/* Aligned tables (rules 34a and 34b): tables of one kind share each column's width, the longest content of the kind
   (static/tables.js). */

/* Phones (design rules 1.20, rule 32; Alaa's decision). Every bar chart row: its label and its value or values on
   one line, label left and values right, with its bar or bars across the full width below; the scale is unchanged.
   International Comparison's rate rows keep their own layout. Legends: a colour key never parts from its label.
   The view controls: each control on its own full-width row, its buttons in balanced rows of equal widths (the
   generated rules below). Drawn charts: the phone drawing replaces the wide one, so no text is smaller than 11 px. */
.legend-item { display: inline-flex; align-items: center; gap: 4px; }
.legend-item .key, .legend-item .key-line { margin: 0; flex: none; }
.drawn-phone { display: none; }
.drawn-phone .tick { paint-order: stroke; stroke: var(--ground); stroke-width: 3px; stroke-linejoin: round; }
@media (max-width: 720px) {
  .bar-row, .bars .bar-row, .group-bars .bar-row, .facts-bar-row, .dot-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; gap: 4px 12px; align-items: start; }
  .bar-row > .bar-year, .bar-row > .bar-label, .facts-bar-row > .bar-label, .dot-row > .bar-label { grid-area: label; }
  .bar-row > .bar-value, .facts-bar-row > .bar-value, .dot-row > .bar-value { grid-area: value; text-align: right; }
  .bar-row > .bar-track, .bar-row > .bar-stack, .facts-bar-row > .bar-track, .facts-bar-row > .bar-stack, .dot-row > .dot-stack { grid-area: bar; }
  .dot-row .bar-value { align-items: flex-end; }
  .controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; container-type: inline-size; }
  .control { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; container-type: inline-size; }
  .controls-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .controls-row:not(.control) { display: block; }
  .segmented { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1px; background: var(--line-soft); width: 100%; box-sizing: border-box; }
  .segmented button { border-right: 0; padding: 10px 8px; text-align: center; white-space: nowrap; }
  .controls-note { max-width: none; }
  .drawn-wide { display: none; }
  .drawn-phone { display: block; width: 100%; max-width: 440px; height: auto; }
}

/* The menu (design rules 1.21 and 1.22, rule 33; Alaa's choice of option D). Where the eight pages fit one row of
   tabs, they show as tabs and the button is hidden; wherever they don't (1023 px and narrower, or any width where
   the tabs would wrap), site/static/menu.js marks the page html.menu-mode: the header is one row, the logo and the
   site's name on the left and the Menu button on the right, and the button opens the same links as a panel
   straight under the header, over the page dimmed behind it. The tabs never wrap. Without scripts the links show
   as a list. */
.menu-button { display: none; }
@media (min-width: 1024px) and (max-width: 1100px) { .site-nav a { padding-left: 6px; padding-right: 6px; } }   /* the eight tabs in one row at 1024 px */
.menu-backdrop { display: none; }
html.menu-mode { --menu-pad: 48px; }
@media (max-width: 720px) { html.menu-mode { --menu-pad: 16px; } }
html.menu-mode .header-row { flex-wrap: nowrap; justify-content: space-between; }
html.menu-mode .menu-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin-left: auto;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--ground); border: 1px solid #C8CFDB; border-radius: 4px; cursor: pointer; flex: none; }
html.menu-mode .menu-button:focus-visible { outline: 3px solid var(--data); outline-offset: 2px; }
.menu-icon { position: relative; display: inline-block; width: 18px; height: 14px; }
.menu-icon span { position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.15s, opacity 0.15s; }
.menu-icon span:nth-child(1) { top: 0; } .menu-icon span:nth-child(2) { top: 6px; } .menu-icon span:nth-child(3) { top: 12px; }
.menu-button[aria-expanded="true"] .menu-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
html.menu-mode .site-nav { display: none; }
html.menu-mode body.menu-open .site-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; position: fixed; top: var(--menu-top, 0); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 0 var(--menu-pad); background: var(--ground); box-shadow: 0 8px 24px rgba(17, 28, 51, 0.18); max-height: calc(100vh - var(--menu-top, 0px)); overflow-y: auto; }
html.menu-mode body.menu-open .site-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px;
  font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); }
html.menu-mode body.menu-open .site-nav a:last-child { border-bottom: 0; }
/* the arrow is decoration: a screen reader reads each row by its page name alone (the empty text after "/") */
html.menu-mode body.menu-open .site-nav a::after { content: "→"; content: "→" / ""; color: var(--muted); font-size: 14px; }
html.menu-mode body.menu-open .site-nav a[aria-current="page"] { background: var(--ground-soft); color: var(--data); font-weight: 700; margin: 0 calc(-1 * var(--menu-pad)); padding: 0 calc(var(--menu-pad) + 4px); border-bottom-color: var(--line); }
html.menu-mode body.menu-open .site-nav a[aria-current="page"]::after { content: "You are here"; font-size: 12px; font-weight: 400; color: var(--muted); }
html.menu-mode .menu-backdrop:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, 0); z-index: 35; background: rgba(17, 28, 51, 0.4); }
html.menu-mode body.menu-open { overflow: hidden; }

/* The ⓘ (design rules 1.25, rule 36). A small circled "i" beside a title; its panel opens below the title's row
   (a native disclosure: tap, click, Enter or Space; never hover alone). The panel's running text is capped at
   about 70 characters a line; site/static/info.js keeps it inside the screen. */
/* The ⓘ stays on the line of its title's last word at every width (rule 36). The title flows as text and keeps
   room after its last word (padding, which wraps with that word); the ⓘ sits in that room and takes no width of
   its own (a negative margin as wide as itself), so it can never wrap alone. */
.title-row { display: block; position: relative; }
.title-row > h1, .title-row > h2, .title-row > h3, .title-row > p, .title-row > figcaption { display: inline; margin-bottom: 0; padding-right: 28px; }
.title-row > .info, .line-info > .info { width: 20px; margin-left: -20px; }
.line-info > p { padding-right: 24px; }
/* the view controls' title holds its ⓘ, which takes no width after the last word; the title keeps room for it */
.controls-title { padding-right: 28px; }
.controls-title > .info { width: 20px; margin-left: 8px; margin-right: -28px; }
.title-row + * { margin-top: 10px; }
.headline > .title-row + *, .figure > .title-row + *, .tile > .title-row + * { margin-top: 0; }   /* cards keep their parts level (rule 34) */
.line-info { display: block; position: relative; margin: 4px 0 0; }
.line-info > p { display: inline; margin: 0; }
.line-info > .info { vertical-align: baseline; }
.figure, .tile, .headline, .card-source, .chart, .timing { position: relative; }
.info { display: inline-block; position: static; font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.55; }
.info > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -6px -4px; border-radius: 50%; vertical-align: middle; }
.info > summary::-webkit-details-marker { display: none; }
.info > summary::marker { content: ""; }
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--data); color: var(--data); font: 700 12px/1 Georgia, "Times New Roman", serif; font-style: italic; }
.info > summary:hover .info-i, .info[open] > summary .info-i { background: var(--data); color: #fff; }
.info > summary:focus-visible { outline: 3px solid var(--data); outline-offset: 1px; }
.info-body { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: min(36rem, calc(100vw - 32px)); max-width: 70ch;
  padding: 14px 16px 12px; background: var(--ground); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 10px 28px rgba(17, 28, 51, 0.16); text-align: left; white-space: normal; }
.info-body p, .info-body ul { margin: 0 0 8px; font-size: 14px; line-height: 1.55; max-width: 70ch; }
.info-body ul { padding-left: 18px; }
.info-close { display: block; margin: 6px 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; color: var(--data);
  background: none; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
html:not(.js) .info-close { display: none; }
.simple main p.intro, .simple main p.note, .simple main p.small, .simple main p.lead { max-width: 70ch; }
.card-source { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.card-part { margin: 4px 0 0; font-size: 14px; }
.card-link { margin: 10px 0 0; font-size: 14px; }
/* Observational papers and registrations (Alaa's decision on pull request 52): each chart sits under its own cards.
   Each column of the pair is two rows of the pair's own grid, cards then chart: side by side, the two groups of
   cards share one row and so one height, and both charts' titles start level; stacked, each chart's cards sit
   directly above it. The cards have narrower places than other cards, so each group fits one row beside the other;
   the widths, and the width from which the two columns sit side by side, are in tests/grid_layout.py. */
.obs-column { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.obs-column > * { min-width: 0; }
.obs-paper-cards, .obs-registration-cards { column-gap: 20px; }
/* Methods' contents list (design rules 1.26) */
.contents { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground-soft); max-width: 52rem; }
.contents ol { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.contents li { margin: 0; }
/* List order (design rules 1.26, rule 38): the switch above a list whose rows carry counts */
.order-switch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; }
.order-word { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.order-switch .segmented button { font-size: 13px; padding: 6px 10px; }
@media (max-width: 720px) { .order-switch { display: block; } .order-switch .segmented { display: flex; flex-wrap: wrap; width: 100%; } .order-switch .segmented button { min-height: 44px; flex: 1 1 40%; } .order-word { display: none; } .contents { padding: 10px 12px; } .contents ol { gap: 2px 14px; font-size: 13px; } .contents .kicker { margin-bottom: 4px; } }   /* Clinical Studies: room between the observational charts and the matching cards */
.scope-short { display: none; }
@media (max-width: 720px) { .scope-long { display: none; } .scope-short { display: inline; } }

/* Aligned cards (design rules 1.24, rule 34). In every row of a card grid (rule 30), the same parts of each card
   sit at the same level: each card spans its grid's part rows as a subgrid, and each part has its own row, so a
   card without a part leaves that row empty and the parts after it still line up. The columns stay #41's
   (the generated block below); only the layout changes. Figure cards (headline figures, figure and facts cards,
   citation tiles) have seven rows: 1 label or heading, 2 figure, 3 detail line, 4 a second detail (the "Not shown"
   reason, a fact's sub-figures), 5 marks, 6 source or note (in the facts cards the mark and the source share
   this line), 7 a link to the figure's page. Route panels have four (number, title, text, arrow); status legends and timing items two. Spacing
   between parts comes from the parts' own margins, so an empty row takes no room; the space between rows of
   cards is the card's bottom margin. */
.headlines, .tile-row, .figures, .routes, .status-grid, .timing-items { row-gap: 0; }
.headline, .tile, .figure { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.tile, .figure { margin-bottom: 20px; }
.headline > *, .tile > *, .figure > * { grid-column: 1; min-width: 0; }
.headline > .label, .tile > .label, .figure > .label, .figure > h3, .headline > .title-row, .tile > .title-row, .figure > .title-row { grid-row: 1; }
.headline > .big, .tile > .mid, .figure > .mid, .figure > .mid-small { grid-row: 2; }
.headline > p.small:not(.muted), .tile > p.small:not(.muted), .figure > p.small:not(.muted), .headline > .card-part, .figure > .card-part { grid-row: 3; }
.tile > p.small.muted, .figure > p.small.muted, .figure > .card-subs { grid-row: 4; }
.headline > .badges, .tile > .badges, .figure > .badges { grid-row: 5; }
.headline > .source, .tile > p.small.muted:last-child, .figure > p.small.muted:last-child, .headline > .card-source, .tile > .card-source, .figure > .card-source { grid-row: 6; }
.headline > .card-link, .figure > .card-link, .headline > .card-records { grid-row: 7; }
.card-subs > p { margin: 0 0 13px; }
.route { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; gap: 0; }
.route-n { grid-row: 1; margin-bottom: 10px; } .route-title { grid-row: 2; margin-bottom: 10px; } .route-text { grid-row: 3; } .route-arrow { grid-row: 4; align-self: end; }
.status-grid > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 20px; align-content: start; }
.status-grid > * > :first-child { grid-row: 1; justify-self: start; align-self: start; }
.status-grid > * > p { grid-row: 2; }
.timing-items li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 12px; }
.timing-items li > :first-child { grid-row: 1; } .timing-items li > :nth-child(2) { grid-row: 2; }

/* Company portfolios (design rules 1.26, rule 39): one panel a row; each panel's breakdowns wrap side by side.
   The two record types sit in their own columns, never added together. */
.portfolios { display: flex; flex-direction: column; gap: 16px; margin: 12px 0 28px; }
.portfolio { border: 1px solid var(--line-soft); border-radius: 8px; padding: 14px 16px; }
.portfolio h4 { margin: 0 0 6px; font-size: 17px; }
.portfolio-counts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 10px; font-size: 14px; align-items: center; }
.portfolio-tables { display: grid; grid-template-columns: var(--pf-columns); gap: 12px 24px; align-items: start; }
/* Aligned tables (design rules 1.32, rule 34a): each panel's four breakdowns keep four fixed places (phase, health
   area, recruitment status, start year; a panel without one leaves its place empty), so tables of one kind sit in
   the same column down the page; each kind's column widths are set once, never from a table's own content. */
/* One row of four places where they fit (phase, health area, recruitment status, start year), the same share of the
   panel in every panel: the phase table has two columns and a narrower place, the other three are one kind of table
   and share one width (rule 34a). Two rows of two on narrower screens; one column on phones. */
.portfolio-tables { --pf-columns: minmax(0, 3fr) repeat(3, minmax(0, 5fr)); }
.portfolio-tables > * { min-width: 0; }
@media (max-width: 1179px) { .portfolio-tables { --pf-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .portfolio-tables { --pf-columns: minmax(0, 1fr); } .portfolio-tables > .pf-empty { display: none; } }
.mini-table { border-collapse: collapse; font-size: 13px; }
.mini-table caption { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 4px; caption-side: top; }
.mini-table th, .mini-table td { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.mini-table tbody th { text-align: left; font-weight: 400; }
.mini-table thead th { font-size: 11px; color: var(--muted); font-weight: 600; }
.portfolio-tables .order-switch .segmented button { font-size: 12px; padding: 4px 8px; }
/* Phones (720px and narrower): each panel can close. The script adds a button with the company's name and closes
   the panel; it reads this rule (is the button shown?) to know the screen is narrow, so the breakpoint lives here
   only. Wider screens and pages without the script keep every panel open. */
.pf-toggle { display: none; }
@media (max-width: 720px) {
  .pf-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: 17px; color: var(--ink); text-align: left; cursor: pointer; }
  .pf-toggle::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--muted); }
  .pf-toggle[aria-expanded="true"]::after { content: "–"; }
  .pf-toggle:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
  .portfolio:has(.pf-toggle) .pf-name { display: none; }
  .portfolio:has(.pf-toggle[aria-expanded="false"]) .portfolio-counts { margin-bottom: 0; }
  .portfolios { gap: 10px; }
  .portfolio { padding: 10px 14px; }
}

/* Long tables on phones (design rules 1.31): at 720px and narrower a table with more rows than the limit
   shows its first ten rows and a "Show All" button (static/tables.js sets .rows-limited; the limit is
   figures/rules.toml's long_tables.phone_first_rows). Without the script every row shows. */
:root { --narrow-screen: no; }
@media (max-width: 720px) { :root { --narrow-screen: yes; } }
.rows-limited tbody tr:nth-child(n + 11) { display: none; }
.show-all-line { margin: 10px 0 0; }
.show-all { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 6px; background: none; font: inherit; font-weight: 600; font-size: 14px; color: var(--data); cursor: pointer; }
.show-all[hidden] { display: none; }
.show-all:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
/* Each company's trials worldwide (rule 39's exception): a row per company, the share as a bar. */
.portfolio-world { margin: -4px 0 10px; }
.answer-links { display: block; margin-top: 4px; font-size: 14px; }
.answer-links a { margin-right: 14px; white-space: nowrap; }

/* The provisional star and its page note (design rules 1.31, rule 6): a plain "*" after the year or period, no
   tag, letter or colour; one small note at the end of the page. */
.prov-star[hidden] { display: none; }
.section-period { margin: 6px 0 0; color: var(--muted); }
.page-note { margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--muted); max-width: 90ch; }
/* "About These Figures" (rule 41): rows in body-text size, each opening its text below it. */
.about-figures h2 { margin-bottom: 6px; }
.about-row { border-bottom: 1px solid var(--line-soft); }
.about-row:first-of-type { border-top: 1px solid var(--line-soft); }
.about-row > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 16px; font-weight: 400; }
.about-row > summary::-webkit-details-marker { display: none; }
.about-row > summary::marker { content: ""; }
.about-row > summary:focus-visible { outline: 3px solid var(--data); outline-offset: 1px; }
.about-arrow { flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; }
.about-row[open] > summary .about-arrow { transform: rotate(45deg); }
.about-body { padding: 0 0 14px; max-width: 80ch; font-size: 15px; }
.about-body > p { margin: 0 0 10px; }

/* ---- Table and bar-chart layout (design rules 1.33, rule 34b) ---- */
/* Bar charts: one grid for the whole chart, so every row shares the label column and the value column (as wide as
   its longest value) and every track starts and ends at the same place. On phones the track already fills the row. */
@media (min-width: 721px) {
  .bars { display: grid; grid-template-columns: var(--bar-label, minmax(140px, 260px)) minmax(0, 1fr) max-content; gap: 8px 12px; align-items: center; }
  .bars:has(> .bar-row > .bar-year) { --bar-label: 64px; }
  .bars:has(> .facts-bar-row), .bars:has(> .dot-row) { --bar-label: minmax(120px, 34%); }
  .bars > .bar-row, .bars > .facts-bar-row, .bars > .dot-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .bars > .bar-row > .bar-value, .bars > .facts-bar-row > .bar-value, .rate-rows > .rate-row > :last-child { text-align: right; }
  .rate-rows { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) max-content; column-gap: 16px; }
  .rate-rows > .rate-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  /* the study groups' rows sit inside their own boxes: one fixed value column for the chart */
  .group-bars .group > summary.bar-row { grid-template-columns: minmax(140px, 260px) minmax(0, 1fr) var(--group-value, 11em); }
  .group-bars .group > summary.bar-row > .bar-value { text-align: right; }
  /* Charts side by side start their first rows at the same level: static/tables.js gives the shorter heads the room
     their neighbour's Order switch or subtitle line takes. The switch keeps one height. */
  .chart .order-switch { display: flex; height: var(--switch-h); margin: 0 0 4px; }
  /* a facts chart whose rows sit straight in the figure: the same shared grid, everything else across it */
  .facts-chart:has(> .dot-row) { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) max-content; column-gap: 12px; }
  .facts-chart:has(> .dot-row) > * { grid-column: 1 / -1; }
  .facts-chart:has(> .dot-row) > .dot-row { grid-template-columns: subgrid; }
}
:root { --switch-h: 46px; }

/* Tables: text columns left, number columns right, each heading like its cells (the build marks each column,
   sitebuild/tables.py). A table is no wider than its content and starts at the text edge; a table with running
   text ("has-text") fills the width, and its running text ("wrap") takes the spare. */
main table:not(.has-text) { width: auto; max-width: 100%; }
main table.has-text { width: 100%; }
main table th:not(.num):nth-child(n), main table td:not(.num):nth-child(n) { text-align: left; }
main table th.num:nth-child(n), main table td.num:nth-child(n) { text-align: right; white-space: nowrap; }
/* No broken words (design rules 1.34): a cell never breaks a word and a number never wraps. Running text keeps a
   readable width; a column of names wraps at spaces and is at most the name width, however long its longest name
   (in a narrow box it gives way down to the narrowest name width, never less); beside running text every other
   column is exactly as wide as its content. A table that still can't fit its box scrolls inside it (.table-wrap). */
main table { --text-min: 28ch; --name-max: 26ch; --name-min: 16ch; }
main table th, main table td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
main table .nb { white-space: nowrap; }
main table:not(.has-text) thead th.num:nth-child(n) { white-space: normal; }       /* a long heading wraps at spaces before a name column is squeezed */
main table.has-text th.num:nth-child(n), main table.has-text td.num:nth-child(n), main table.has-text th.fit:nth-child(n), main table.has-text td.fit:nth-child(n) { width: 1px; white-space: nowrap; }
main table th.cap:nth-child(n), main table td.cap:nth-child(n) { box-sizing: content-box; width: var(--name-max); min-width: var(--name-min); max-width: var(--name-max); white-space: normal; }
main table th.wrap:nth-child(n), main table td.wrap:nth-child(n) { box-sizing: content-box; min-width: var(--text-min); white-space: normal; }
.data-table th:first-child, .data-table td:first-child, .areas-table th:first-child { min-width: 0; }
.matrix td { min-width: 0; }
/* One heading style for every table: bold, in the ink colour, on a light tinted row with a firmer rule beneath. */
.data-table thead th, .areas-table thead th, .mini-table thead th, .table-toggle thead th, main table thead th {
  font-size: 12px; font-weight: 700; color: var(--ink); background: var(--ground-soft); border-bottom: 2px solid var(--muted); vertical-align: bottom; }
/* Methods' source entries are read top to bottom; they are not cards of a row. */
.source-entry { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.source-entry > * { margin-top: 0; margin-bottom: 8px; }

/* balanced grids: generated by tests/grid_layout.py; do not edit by hand */
:where(*):has(> .headlines, > .tile-row, > .figures, > .timing-items, > .chart-pair, > .routes, > .status-grid, > .obs-paper-cards, > .obs-registration-cards, > .obs-pair), .shortcuts { container-type: inline-size; }
.headlines { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.tile-row { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.figures { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.timing-items { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.chart-pair { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.routes { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.status-grid { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.shortcuts ul { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.obs-paper-cards { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.obs-registration-cards { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.obs-pair { display: grid; --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
@container (min-width: 600px) { .headlines:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 900px) { .headlines:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 600px) { .headlines:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 1200px) { .headlines:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1500px) { .headlines:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 600px) { .headlines:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 900px) { .headlines:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1800px) { .headlines:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 2100px) { .headlines:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 600px) { .headlines:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 1200px) { .headlines:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 2400px) { .headlines:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 552px) { .tile-row:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 844px) { .tile-row:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 552px) { .tile-row:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 1136px) { .tile-row:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1428px) { .tile-row:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 552px) { .tile-row:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 844px) { .tile-row:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1720px) { .tile-row:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 2012px) { .tile-row:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 552px) { .tile-row:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 1136px) { .tile-row:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 2304px) { .tile-row:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 552px) { .figures:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 844px) { .figures:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 552px) { .figures:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 1136px) { .figures:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1428px) { .figures:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 552px) { .figures:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 844px) { .figures:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1720px) { .figures:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 2012px) { .figures:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 552px) { .figures:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 1136px) { .figures:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 2304px) { .figures:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 424px) { .timing-items:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 648px) { .timing-items:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 424px) { .timing-items:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 872px) { .timing-items:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1096px) { .timing-items:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 424px) { .timing-items:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 648px) { .timing-items:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1320px) { .timing-items:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 1544px) { .timing-items:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 424px) { .timing-items:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 872px) { .timing-items:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 1768px) { .timing-items:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 768px) { .chart-pair:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 1176px) { .chart-pair:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 768px) { .chart-pair:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 1584px) { .chart-pair:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1992px) { .chart-pair:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 768px) { .chart-pair:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 1176px) { .chart-pair:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 2400px) { .chart-pair:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 2808px) { .chart-pair:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 768px) { .chart-pair:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 1584px) { .chart-pair:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 3216px) { .chart-pair:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 600px) { .routes:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 900px) { .routes:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 600px) { .routes:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 1200px) { .routes:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1500px) { .routes:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 600px) { .routes:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 900px) { .routes:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1800px) { .routes:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 2100px) { .routes:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 600px) { .routes:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 1200px) { .routes:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 2400px) { .routes:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 330px) { .status-grid:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 505px) { .status-grid:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 330px) { .status-grid:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 680px) { .status-grid:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 855px) { .status-grid:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 330px) { .status-grid:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 505px) { .status-grid:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1030px) { .status-grid:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 1205px) { .status-grid:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 330px) { .status-grid:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 680px) { .status-grid:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 1380px) { .status-grid:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 500px) { .shortcuts ul:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 760px) { .shortcuts ul:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 500px) { .shortcuts ul:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 1020px) { .shortcuts ul:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1280px) { .shortcuts ul:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 500px) { .shortcuts ul:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 760px) { .shortcuts ul:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1540px) { .shortcuts ul:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 1800px) { .shortcuts ul:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 500px) { .shortcuts ul:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 1020px) { .shortcuts ul:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 2060px) { .shortcuts ul:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 420px) { .obs-paper-cards:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 640px) { .obs-paper-cards:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 420px) { .obs-paper-cards:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 860px) { .obs-paper-cards:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 1080px) { .obs-paper-cards:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 420px) { .obs-paper-cards:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 640px) { .obs-paper-cards:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 1300px) { .obs-paper-cards:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 1520px) { .obs-paper-cards:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 420px) { .obs-paper-cards:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 860px) { .obs-paper-cards:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 1740px) { .obs-paper-cards:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 280px) { .obs-registration-cards:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 430px) { .obs-registration-cards:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 280px) { .obs-registration-cards:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 580px) { .obs-registration-cards:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 730px) { .obs-registration-cards:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 280px) { .obs-registration-cards:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 430px) { .obs-registration-cards:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 880px) { .obs-registration-cards:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 1030px) { .obs-registration-cards:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 280px) { .obs-registration-cards:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 580px) { .obs-registration-cards:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 1180px) { .obs-registration-cards:has(> :last-child:nth-child(8)) { --cols: 8; } }
@container (min-width: 908px) { .obs-pair:has(> :last-child:nth-child(2)) { --cols: 2; } }
@container (min-width: 1386px) { .obs-pair:has(> :last-child:nth-child(3)) { --cols: 3; } }
@container (min-width: 908px) { .obs-pair:has(> :last-child:nth-child(4)) { --cols: 2; } }
@container (min-width: 1864px) { .obs-pair:has(> :last-child:nth-child(4)) { --cols: 4; } }
@container (min-width: 2342px) { .obs-pair:has(> :last-child:nth-child(5)) { --cols: 5; } }
@container (min-width: 908px) { .obs-pair:has(> :last-child:nth-child(6)) { --cols: 2; } }
@container (min-width: 1386px) { .obs-pair:has(> :last-child:nth-child(6)) { --cols: 3; } }
@container (min-width: 2820px) { .obs-pair:has(> :last-child:nth-child(6)) { --cols: 6; } }
@container (min-width: 3298px) { .obs-pair:has(> :last-child:nth-child(7)) { --cols: 7; } }
@container (min-width: 908px) { .obs-pair:has(> :last-child:nth-child(8)) { --cols: 2; } }
@container (min-width: 1864px) { .obs-pair:has(> :last-child:nth-child(8)) { --cols: 4; } }
@container (min-width: 3776px) { .obs-pair:has(> :last-child:nth-child(8)) { --cols: 8; } }
@media (max-width: 720px) {
  @container (min-width: 147px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(2)) { --cols: 2; } }
  @container (min-width: 220px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(3)) { --cols: 3; } }
  @container (min-width: 147px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(4)) { --cols: 2; } }
  @container (min-width: 293px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(4)) { --cols: 4; } }
  @container (min-width: 366px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(5)) { --cols: 5; } }
  @container (min-width: 147px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(6)) { --cols: 2; } }
  @container (min-width: 220px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(6)) { --cols: 3; } }
  @container (min-width: 439px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(6)) { --cols: 6; } }
  @container (min-width: 512px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(7)) { --cols: 7; } }
  @container (min-width: 147px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(8)) { --cols: 2; } }
  @container (min-width: 293px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(8)) { --cols: 4; } }
  @container (min-width: 585px) { .segmented:has(> [data-dim="year"]):has(> :last-child:nth-child(8)) { --cols: 8; } }
  @container (min-width: 313px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(2)) { --cols: 2; } }
  @container (min-width: 469px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(3)) { --cols: 3; } }
  @container (min-width: 313px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(4)) { --cols: 2; } }
  @container (min-width: 625px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(4)) { --cols: 4; } }
  @container (min-width: 781px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(5)) { --cols: 5; } }
  @container (min-width: 313px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(6)) { --cols: 2; } }
  @container (min-width: 469px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(6)) { --cols: 3; } }
  @container (min-width: 937px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(6)) { --cols: 6; } }
  @container (min-width: 1093px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(7)) { --cols: 7; } }
  @container (min-width: 313px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(8)) { --cols: 2; } }
  @container (min-width: 625px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(8)) { --cols: 4; } }
  @container (min-width: 1249px) { .segmented:has(> [data-dim="scope"]):has(> :last-child:nth-child(8)) { --cols: 8; } }
  @container (min-width: 333px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(2)) { --cols: 2; } }
  @container (min-width: 499px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(3)) { --cols: 3; } }
  @container (min-width: 333px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(4)) { --cols: 2; } }
  @container (min-width: 665px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(4)) { --cols: 4; } }
  @container (min-width: 831px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(5)) { --cols: 5; } }
  @container (min-width: 333px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(6)) { --cols: 2; } }
  @container (min-width: 499px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(6)) { --cols: 3; } }
  @container (min-width: 997px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(6)) { --cols: 6; } }
  @container (min-width: 1163px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(7)) { --cols: 7; } }
  @container (min-width: 333px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(8)) { --cols: 2; } }
  @container (min-width: 665px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(8)) { --cols: 4; } }
  @container (min-width: 1329px) { .segmented:has(> [data-dim="group"]):has(> :last-child:nth-child(8)) { --cols: 8; } }
  @container (min-width: 419px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(2)) { --cols: 2; } }
  @container (min-width: 628px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(3)) { --cols: 3; } }
  @container (min-width: 419px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(4)) { --cols: 2; } }
  @container (min-width: 837px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(4)) { --cols: 4; } }
  @container (min-width: 1046px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(5)) { --cols: 5; } }
  @container (min-width: 419px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(6)) { --cols: 2; } }
  @container (min-width: 628px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(6)) { --cols: 3; } }
  @container (min-width: 1255px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(6)) { --cols: 6; } }
  @container (min-width: 1464px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(7)) { --cols: 7; } }
  @container (min-width: 419px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(8)) { --cols: 2; } }
  @container (min-width: 837px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(8)) { --cols: 4; } }
  @container (min-width: 1673px) { .segmented:has(> [data-dim="lead"]):has(> :last-child:nth-child(8)) { --cols: 8; } }
}
/* end of balanced grids */

/* ---- Compact on phones, and the find box (design rules 1.34, rules 25, 50 and 51) ---- */
/* The view controls' summary line: only on a narrow screen, and only once static/views.js has unhidden it. */
.controls-summary { display: none; }
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; font-size: 14px; }
.find label { font-weight: 600; }
.find input { font: inherit; font-size: 16px; min-height: 44px; width: min(22em, 100%); padding: 6px 10px; border: 1px solid #C8CFDB; border-radius: 4px; background: var(--ground); color: var(--ink); }
.find input:focus-visible { outline: 3px solid var(--data); outline-offset: 1px; }
tr.find-out { display: none; }
.scroll-cue { position: relative; }
@media (max-width: 720px) {
  .controls-summary:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .controls-line { font-size: 14px; font-weight: 600; }
  .controls-edit { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 8px 14px; border: 1px solid #C8CFDB; border-radius: 4px; background: var(--ground); color: var(--data); cursor: pointer; }
  .controls-edit:focus-visible { outline: 3px solid var(--data); outline-offset: 2px; }
  .controls.controls-folded { padding: 8px 12px 8px 16px; }
  .controls.controls-folded > :not(.controls-summary) { display: none; }
  /* Oversized empty gaps close: the room between a page's opening and its first section, between sections, and
     under each card, set for a narrow screen. */
  .chapter { margin-top: 32px; padding-top: 22px; }
  .page-head { padding: 28px 0 0; }
  .hero { padding: 30px 0 12px; gap: 14px; }
  .headlines { margin-top: 16px; }
  .headline { padding: 16px 0; }
  .tile, .figure { margin-bottom: 10px; }
  .res-nav ul { margin-bottom: 0; }
  /* the summary line already says what is shown: the line under the controls stays for screen readers only */
  .controls:has(.controls-summary:not([hidden])) + .live { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Research Publications By Area & Year: the area column stays in place while the years scroll; a fade and an
     arrow mark the edge until the last year is in view. */
  .matrix th:first-child { position: sticky; left: 0; z-index: 1; background: var(--ground); box-shadow: 1px 0 0 var(--line); }
  .matrix thead th:first-child { background: var(--ground-soft); }
  .scroll-cue.can-scroll::after { content: "\2192"; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 9px 6px 0 0;
    font-size: 18px; color: var(--ink); pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--ground) 70%); }
  /* Resources tables stack (rule 25): each entry is one block, the resource and its publisher, then what it
     offers, then access; nothing scrolls sideways and no word is broken. */
  main table.res-table, main table.res-table tbody, main table.res-table tr, main table.res-table td { display: block; }
  main table.res-table:nth-child(n) { width: 100%; min-width: 0; }
  main table.res-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  main table.res-table tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  main table.res-table.res-table td:nth-child(n) { box-sizing: border-box; width: auto; min-width: 0; max-width: none; white-space: normal; padding: 2px 0; border: 0; }
  main table.res-table td:first-child { font-weight: 600; }
  main table.res-table td:last-child:not(:first-child) { font-size: 13px; color: var(--muted); }
}