/* dRX · lab-sheet world.
   White report paper, ink, hairline rules, one clinical teal, flags drawn as marks.
   Faces are self-hosted (assets/fonts, OFL): Sarabun for the form, Red Hat Mono for results. */

@font-face { font-family: "Sarabun"; src: url("/assets/fonts/sarabun-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/sarabun-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/sarabun-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/sarabun-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("/assets/fonts/redhatmono-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  --paper: oklch(1 0 0);
  --bench: oklch(0.972 0.005 225);
  --ink: oklch(0.24 0.025 245);
  --ink-2: oklch(0.43 0.022 245);
  --ink-3: oklch(0.6 0.016 240);
  --rule: oklch(0.885 0.008 235);
  --rule-soft: oklch(0.935 0.006 235);

  --teal: oklch(0.47 0.085 212);
  --teal-deep: oklch(0.37 0.075 216);
  --teal-wash: oklch(0.962 0.016 212);
  --on-teal: oklch(1 0 0);
  --on-teal-2: oklch(0.9 0.025 212);

  --flag-high: oklch(0.54 0.17 38);
  --flag-low: oklch(0.49 0.15 258);
  --flag-bound: oklch(0.47 0.13 305);
  --reference: oklch(0.6 0.03 235);
  --ok: oklch(0.47 0.1 160);
  --highlight: oklch(0.91 0.14 97);
  --focus: oklch(0.7 0.16 70);
  --caution-wash: oklch(0.975 0.022 85);

  --series-1: oklch(0.47 0.085 212);
  --series-2: oklch(0.7 0.14 72);
  --series-3: oklch(0.45 0.12 278);
  --series-4: oklch(0.62 0.1 152);
  --series-5: oklch(0.56 0.13 350);
  --series-6: oklch(0.55 0.025 240);
  --seq-0: oklch(0.975 0.01 212);
  --seq-1: oklch(0.64 0.085 214);

  --font-sans: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Thonburi", system-ui, sans-serif;
  --font-mono: "Red Hat Mono", "Sarabun", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 6px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --measure: 62ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-sticky: 10;
  --z-skip: 50;

  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  caret-color: var(--teal);
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scrollbar-color: var(--ink-3) var(--rule-soft); }
body { min-height: 100dvh; margin: 0; display: flex; flex-direction: column; }
::selection { background: var(--highlight); color: var(--ink); }

h1, h2, h3 { line-height: 1.3; text-wrap: balance; color: var(--ink); }
h1 { font-size: 1.875rem; font-weight: 800; margin: 0 0 var(--space-2); }
h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--space-3); }
h3 { font-size: 1.125rem; font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
p, li, dd { max-width: var(--measure); }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; }
mark { background: var(--highlight); color: inherit; padding: 0 0.1em; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-5) 0; }

.container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.secondary { color: var(--ink-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: absolute; left: var(--space-4); top: -4rem; z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4); background: var(--paper); color: var(--teal-deep);
  border: 2px solid var(--teal); border-radius: var(--radius); font-weight: 700;
  transition: top 160ms var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

/* ── Report header band ───────────────────────────────────────────── */
.site-header { background: var(--teal); color: var(--on-teal); }
.site-header :focus-visible { outline-color: var(--highlight); }
.header-row { display: flex; align-items: center; gap: var(--space-5); min-height: 3.75rem; }
.brand { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; color: var(--on-teal); text-decoration: none; white-space: nowrap; }
.brand strong { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }
.brand span { font-size: 0.875rem; color: var(--on-teal-2); }
.site-nav { flex: 1; min-width: 0; }
.nav-list { display: flex; gap: 0.125rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.nav-list::-webkit-scrollbar { display: none; }
.nav-list a {
  display: block; padding: 0.4rem 0.6rem; border-radius: var(--radius);
  color: var(--on-teal); text-decoration: none; font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color 160ms var(--ease-out);
}
.nav-list a:hover { background: oklch(1 0 0 / 0.14); }
.nav-list a.active, .nav-list a[aria-current="page"] { background: var(--paper); color: var(--teal-deep); }
.header-meta { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.accession {
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 4px; background: var(--paper); color: var(--teal-deep);
}
.signout button {
  min-height: 0; padding: 0.25rem 0.55rem; border: 1px solid oklch(1 0 0 / 0.45); border-radius: var(--radius);
  background: none; color: var(--on-teal); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.signout button:hover { background: oklch(1 0 0 / 0.14); }
.signout button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.language-switch { display: flex; border: 1px solid oklch(1 0 0 / 0.45); border-radius: var(--radius); overflow: hidden; }
.language-switch a { padding: 0.25rem 0.55rem; color: var(--on-teal); text-decoration: none; font-size: 0.875rem; font-weight: 600; }
.language-switch a:hover { background: oklch(1 0 0 / 0.14); }
.language-switch a[aria-current="true"] { background: var(--paper); color: var(--teal-deep); }

main { flex: 1; padding-block: var(--space-5) var(--space-7); }

/* ── Page header: a report's specimen line ────────────────────────── */
.page-header { padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 2px solid var(--ink); }
.page-header > p { color: var(--ink-2); }
.page-header > p:last-child { margin-bottom: 0; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.9375rem; margin-bottom: var(--space-2); }
.title-en { display: block; font-size: 1rem; font-weight: 600; color: var(--ink-2); margin-top: var(--space-1); }

.meta-strip {
  display: flex; flex-wrap: wrap; margin: var(--space-4) 0 0; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
}
.meta-strip > div { padding: var(--space-2) var(--space-4); border-right: 1px solid var(--rule); min-width: 7rem; }
.meta-strip > div:last-child { border-right: 0; }
.meta-strip dt { font-size: 0.8125rem; color: var(--ink-2); }
.meta-strip dd { margin: 0; font-weight: 700; font-size: 0.9375rem; display: flex; align-items: center; gap: var(--space-2); }

/* ── Sections are ruled panels, not boxes ─────────────────────────── */
.card { border-top: 2px solid var(--ink); padding-top: var(--space-4); margin-top: var(--space-6); }
.page-header + .card, .page-header + section.card { margin-top: 0; border-top: 0; padding-top: 0; }
.page-header + .next-peek { margin-top: 0; }
tr.total-row > * { font-weight: 700; border-top: 1.5px solid var(--ink); }
table.coverage td.coverage-cell { min-width: 9rem; }
.coverage-cell .pct { font-family: var(--font-mono); font-weight: 600; font-size: 0.875rem; }
.coverage-cell .bar { display: block; height: 5px; margin-top: 0.3rem; max-width: 9rem; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.dx-name { display: inline-flex; align-items: center; gap: var(--space-2); }
td.share-cell { min-width: 9rem; }
.share-cell .bar { display: block; height: 5px; margin: 0.3rem 0 0 auto; max-width: 8rem; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.share-cell .bar i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--teal); border-radius: 3px; margin-left: auto; }
.coverage-cell .bar i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--teal); border-radius: 3px; }
.card > :last-child { margin-bottom: 0; }
.section-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.section-head h2 { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.section-head .en { color: var(--ink-2); font-size: 0.9375rem; }
.section-head .source { margin-left: auto; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); }

.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.icon-md { width: 1.75rem; height: 1.75rem; }
.icon-lg { width: 2.25rem; height: 2.25rem; }
.icon-xl { width: 3rem; height: 3rem; }

/* ── Marks and flags ──────────────────────────────────────────────── */
.mark { width: 0.72em; height: 0.72em; flex: none; display: inline-block; vertical-align: -0.02em; overflow: visible; }
.mark-high path { fill: var(--flag-high); }
.mark-low path { fill: var(--flag-low); }
.mark-bound path { fill: var(--flag-bound); }
.mark-absent circle { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.mark-hidden rect { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-dasharray: 2.2 1.6; }
.mark-reference circle { fill: var(--reference); }
.mark-check path { fill: none; stroke: var(--ok); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mark-cross path { fill: none; stroke: var(--flag-high); stroke-width: 1.9; stroke-linecap: round; }
.flag { display: inline-flex; align-items: center; gap: 0.3em; font-weight: 700; white-space: nowrap; }
.flag-high { color: var(--flag-high); }
.flag-low { color: var(--flag-low); }
.flag-bound { color: var(--flag-bound); }
.flag-absent, .flag-hidden, .flag-reference { color: var(--ink-2); }
.flag-check { color: var(--ok); }
.flag-cross { color: var(--flag-high); }

.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.05rem 0.5rem;
  border: 1px solid currentColor; border-radius: 4px; font-size: 0.8125rem; font-weight: 700; line-height: 1.5;
  white-space: nowrap; background: var(--paper);
}
.chip-full { color: var(--ok); }
.chip-partial, .chip-bound { color: var(--flag-bound); }
.chip-not_feasible { color: var(--flag-high); }
.chip-gap { color: var(--ink-2); border-style: dashed; }

/* ── Result tables ────────────────────────────────────────────────── */
.table-scroll { width: 100%; overflow-x: auto; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
caption { caption-side: top; text-align: left; color: var(--ink-2); font-size: 0.875rem; padding-bottom: var(--space-2); }
thead th {
  text-align: left; vertical-align: bottom; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
  padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--ink); white-space: nowrap; background: var(--paper);
}
tbody th, tbody td { padding: 0.55rem var(--space-3); border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
tbody th { font-weight: 600; }
tbody tr:hover > * { background: var(--teal-wash); }
td.num, th.num { text-align: right; }
td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.875rem; white-space: nowrap; }
.masked { color: var(--ink-2); }
.qns {
  display: inline-flex; align-items: center; gap: 0.3em; padding: 0 0.35em; border: 1px dashed var(--ink-3); border-radius: 3px;
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); cursor: help;
}
th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
th a:hover { color: var(--ink); }
.sort-caret { width: 0.65rem; height: 0.65rem; opacity: 0.35; }
th[aria-sort="ascending"] .sort-caret, th[aria-sort="descending"] .sort-caret { opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ink); }

/* ── Buttons and forms ────────────────────────────────────────────── */
.button, button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.5rem; padding: 0.45rem 1rem; border: 1.5px solid var(--teal); border-radius: var(--radius);
  background: var(--paper); color: var(--teal-deep); font: inherit; font-weight: 700; text-decoration: none; line-height: 1.3;
  cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.button:hover { background: var(--teal-wash); text-decoration: none; }
.button.primary { background: var(--teal); color: var(--on-teal); }
.button.primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.button.secondary { border-color: var(--rule); color: var(--ink-2); }
.button[aria-disabled="true"], .button:disabled { opacity: 0.5; cursor: not-allowed; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button-row.downloads { margin-top: var(--space-4); }
.result-table { margin-top: var(--space-5); }
.result-table td, .result-table th { white-space: nowrap; }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  min-height: 2.5rem; padding: 0.4rem 0.65rem; border: 1px solid oklch(0.78 0.01 235); border-radius: var(--radius);
}
input::placeholder { color: var(--ink-2); opacity: 1; }
input:hover, select:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--teal); }
label { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }

.search-form { display: grid; grid-template-columns: minmax(16rem, 1fr) auto auto auto; gap: var(--space-3); align-items: end; }
.search-form.card { border-top: 0; padding-top: 0; margin-top: 0; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3) var(--space-4); align-items: end; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field.actions { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ── Key-value results (replaces tile grids) ──────────────────────── */
.metric-grid, .kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.metric-grid > div, .kpi { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; border-top: 0; border-left: 0; }
.metric-grid dt, .kpi dt { font-size: 0.8125rem; color: var(--ink-2); }
.metric-grid dd, .kpi dd { margin: 0.1rem 0 0; font-family: var(--font-mono); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.headline-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.coverage-card { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.coverage-card h3 { margin-top: 0; }
.coverage-badge { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 0.9375rem; padding-block: 0.15rem; }
.coverage-badge strong { font-family: var(--font-mono); font-weight: 600; }

/* ── Catalog: a test menu, not a card wall ────────────────────────── */
.query-group { margin-top: var(--space-6); }
.query-group h2 { border-bottom: 2px solid var(--ink); padding-bottom: var(--space-2); margin-bottom: 0; }
.card-grid { display: block; }
.query-card {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; grid-template-areas: "id title status" "id question n" "id dims dims";
  column-gap: var(--space-4); row-gap: 0.15rem; align-items: baseline;
  padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none;
  transition: background-color 160ms var(--ease-out);
}
.query-card:hover { background: var(--teal-wash); }
.query-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.query-card .query-id { grid-area: id; font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--teal-deep); }
.query-card h3 { grid-area: title; margin: 0; font-size: 1rem; }
.query-card > p { grid-area: question; margin: 0; font-size: 0.9375rem; }
.query-card .chip { grid-area: status; justify-self: end; }
.query-card .headline-number { grid-area: n; justify-self: end; font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.query-card .match-dimensions { grid-area: dims; }
.query-id { font-family: var(--font-mono); font-weight: 700; color: var(--teal-deep); }
.match-dimensions, .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; }
.match-dimensions code, .tag-list code { padding: 0 0.4rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--bench); font-size: 0.8125rem; }

.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; margin-top: var(--space-5); border-top: 2px solid var(--ink); }
.link-card {
  display: grid; gap: 0.15rem; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
.link-card strong { color: var(--teal-deep); }
.link-card:hover strong { text-decoration: underline; }

/* ── Comments, caveats, interpretation ────────────────────────────── */
.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3);
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border: 1px solid oklch(0.85 0.04 85); border-radius: var(--radius); background: var(--caution-wash);
}
.callout > .icon { grid-row: span 4; width: 1.75rem; height: 1.75rem; margin-top: 0.1rem; }
.callout > p { grid-column: 2; }
.callout-title { font-weight: 700; margin-bottom: var(--space-1); }
.callout > :last-child { margin-bottom: 0; }

.login { max-width: 24rem; margin: var(--space-6) auto; text-align: center; }
.login .icon-xl { margin-bottom: var(--space-2); }
.login-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); text-align: left; }
.login-form .field.actions { justify-content: flex-start; }
.login-error {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3); border-left: 3px solid var(--flag-high); background: var(--caution-wash);
  color: var(--ink); font-weight: 600; text-align: left;
}
.login-error .icon { width: 1.25rem; height: 1.25rem; flex: none; }
.empty-state { text-align: center; padding-block: var(--space-6); }
.empty-state .icon { width: 3rem; height: 3rem; margin-bottom: var(--space-2); }
.empty-state p { margin-inline: auto; color: var(--ink-2); }

.sql-details { margin-top: var(--space-5); border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.table-details { margin-top: var(--space-4); }
.table-details summary { cursor: pointer; font-weight: 700; color: var(--teal-deep); }
.table-details .table-scroll { margin-top: var(--space-3); max-height: 28rem; overflow-y: auto; }
.chart-reading { margin: var(--space-3) 0 0; }
.chart-reading strong { font-family: var(--font-mono); }
.sql-details summary { cursor: pointer; font-weight: 700; color: var(--teal-deep); }
.sql-details pre { overflow-x: auto; padding: var(--space-4); margin: var(--space-3) 0 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bench); line-height: 1.5; }

/* ── Charts: rules live in svg.rs (CHART_CSS) and are appended when this file is served ── */
.chart-unavailable { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); margin-top: var(--space-4); }

/* ── Report footer ────────────────────────────────────────────────── */
.site-footer { margin-top: auto; border-top: 1px solid var(--rule); padding: var(--space-4) 0 var(--space-6); color: var(--ink-2); font-size: 0.8125rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-items: baseline; }
.footer-grid p { margin: 0; max-width: none; }
.footer-grid strong { color: var(--ink); font-weight: 600; }
.footer-grid .mono { font-family: var(--font-mono); }
.footer-credits { width: 100%; color: var(--ink-2); }

/* ═══ Insights: the population lab report ═══════════════════════════ */
.insights { --sheet-gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.sheet-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5); border-radius: 0; background: var(--teal); color: var(--on-teal);
}
/* The brand line and the as-of chip already sit in the site header; the band repeats the brand
   only in Present mode, where the header is hidden. */
.sheet-band .band-brand { display: none; }
.insights.is-presenting .sheet-band .band-brand { display: block; }
body:has(.insights) .header-meta .accession { display: none; }
.band-title { display: grid; gap: 0.15rem; min-width: 0; }
.band-brand { font-size: 0.875rem; color: var(--on-teal-2); }
.band-brand strong { color: var(--on-teal); font-size: 1.125rem; font-weight: 800; }
.sheet-band h1 { color: var(--on-teal); font-size: clamp(1.6rem, 2.4vw, 2.4rem); margin: 0; }
.sheet-band h1 .en { display: block; font-size: 0.5em; font-weight: 600; color: var(--on-teal-2); margin-top: 0.15rem; }
.band-accession { margin-left: auto; padding: 0.25rem 0.7rem; border-radius: 4px; background: var(--paper); color: var(--teal-deep); font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }

.first-view { display: grid; grid-template-columns: minmax(13.5rem, 0.9fr) minmax(0, 3fr) minmax(15rem, 1.1fr); gap: var(--sheet-gap); margin-top: var(--space-5); align-items: start; }

.specimen h2, .panel-head h2 { font-size: 1.125rem; }
.specimen { font-size: 0.9375rem; }
.specimen h2 { padding-bottom: var(--space-2); border-bottom: 1.5px solid var(--ink); margin-bottom: var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); }
.specimen h2 .en, .panel-head .en { font-weight: 400; color: var(--ink-2); font-size: 0.875rem; }
.specimen dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem var(--space-3); margin: 0; align-items: baseline; }
.specimen dt { color: var(--ink-2); }
.specimen dd { margin: 0; }
.specimen dd.result { font-family: var(--font-mono); font-weight: 700; font-size: 1.125rem; }
.nowrap { white-space: nowrap; }
.legend { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.3rem; font-size: 0.8125rem; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: var(--space-2); }
.legend .mark { width: 0.8rem; height: 0.8rem; }

.panel { padding-top: var(--space-4); }
.panel-head { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-2); border-bottom: 2px solid var(--ink); }
.panel-head h2 { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 1.375rem; }
.panel-head .unit { color: var(--ink-2); font-size: 0.9375rem; }
.panel-head .source { margin-left: auto; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); }
.first-view .panel { padding-top: 0; }
.first-view .panel-head h2 { font-size: 1.25rem; }

.analytes { width: 100%; border-collapse: collapse; }
.first-view > *, .insight-body > * { min-width: 0; }
.analytes th, .analytes td { border-bottom: 1px solid var(--rule); padding: 0.9rem var(--space-3) 0.9rem 0; vertical-align: middle; background: none; }
.analytes tbody tr:hover > * { background: none; }
.analytes thead th { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-block: var(--space-2); }
.analytes .analyte { font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: var(--space-2); }
.analytes .analyte small { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.8125rem; }
.analytes .result { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.analytes .ref { font-family: var(--font-mono); color: var(--ink-2); text-align: right; white-space: nowrap; font-size: 0.9375rem; }
.analytes .flag { font-size: 1rem; }
.analytes .range-cell { width: 34%; min-width: 10rem; }
.analytes tr.is-key .analyte-label { background: linear-gradient(transparent 12%, var(--highlight) 12% 88%, transparent 88%); padding-inline: 0.25rem; margin-inline: -0.25rem; border-radius: 3px; }
.analytes tr.is-key .result { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }

/* reference → result track */
.range { position: relative; height: 1.5rem; container-type: inline-size; }
.range::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--rule); }
.range .span { position: absolute; top: calc(50% - 1.5px); height: 3px; left: calc(var(--from) * 1%); width: calc((var(--to) - var(--from)) * 1%); background: var(--flag-high); opacity: 0.45; border-radius: 3px; transform-origin: left center; }
.range.down .span { left: calc(var(--to) * 1%); width: calc((var(--from) - var(--to)) * 1%); background: var(--flag-low); transform-origin: right center; }
.range .ref-dot, .range .res-mark { position: absolute; top: 50%; left: 0; }
.range .ref-dot { width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; transform: translateX(calc(var(--from) * 1cqw)); }
.range .res-mark { width: 1.05rem; height: 1.05rem; margin: -0.55rem 0 0 -0.525rem; transform: translateX(calc(var(--to) * 1cqw)); }
.range .ref-dot .mark, .range .res-mark .mark { width: 100%; height: 100%; display: block; }
tr.is-key .range .span { opacity: 1; height: 4px; top: calc(50% - 2px); }
.range-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-2); }
.analytes tfoot td { border-bottom: 0; padding-top: var(--space-2); padding-bottom: 0; }

.panel-foot { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); justify-content: space-between; margin-top: var(--space-2); font-size: 0.8125rem; color: var(--ink-2); }
.panel-foot a { font-weight: 600; }

.next-peek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--teal-wash); border-radius: var(--radius); font-size: 0.9375rem; text-decoration: none; color: var(--ink); }
.next-peek strong { display: inline-flex; align-items: center; gap: var(--space-2); }
.next-peek .peek-value { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.next-peek:hover { background: oklch(0.94 0.022 212); }

.interpretation { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: var(--space-4); }
.interpretation h2 { font-size: 1.125rem; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.interpretation p { font-size: 1.125rem; line-height: 1.6; margin-bottom: var(--space-2); }
.interpretation p.en { font-size: 0.9375rem; color: var(--ink-2); margin-bottom: 0; }
.aside-actions { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.aside-actions .button { width: 100%; min-height: 3rem; font-size: 1.125rem; }

.insight-panel { margin-top: clamp(2.5rem, 5vw, 4rem); }
.insight-body { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(15rem, 1fr); gap: var(--sheet-gap); margin-top: var(--space-4); align-items: start; }
.insight-body .interpretation { position: sticky; top: var(--space-4); }

/* health panel: incidence across age bands */
.band-table { width: 100%; border-collapse: collapse; }
.band-table th, .band-table td { padding: 0.7rem var(--space-2); border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.band-table thead th { font-size: 0.8125rem; color: var(--ink-2); font-weight: 600; text-align: center; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.band-table tbody th { text-align: left; white-space: nowrap; }
.band-table tbody th .analyte { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.band-table td .pct { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; display: block; }
.band-table td .bar { display: block; height: 6px; margin: 0.3rem auto 0; width: 80%; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.band-table td .bar i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--teal); border-radius: 3px; }
.band-table td.is-key { background: linear-gradient(transparent 6%, var(--highlight) 6% 94%, transparent 94%); }
.band-table td.is-key .bar i { background: var(--flag-high); }

/* case cost panel: interquartile interval with median and P90 */
.interval { position: relative; height: 1.6rem; container-type: inline-size; }
.interval::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--rule); }
.interval .iqr { position: absolute; top: 25%; height: 50%; left: calc(var(--p25) * 1%); width: calc((var(--p75) - var(--p25)) * 1%); background: var(--teal-wash); border: 1.25px solid var(--teal); border-radius: 3px; }
.interval .tail { position: absolute; top: calc(50% - 0.75px); height: 1.5px; left: calc(var(--p75) * 1%); width: calc((var(--p90) - var(--p75)) * 1%); background: var(--ink-3); }
.interval .median { position: absolute; top: 12%; height: 76%; width: 3px; left: calc(var(--p50) * 1%); margin-left: -1.5px; background: var(--ink); }
.interval .p90 { position: absolute; top: 50%; width: 0.9rem; height: 0.9rem; margin: -0.45rem 0 0 -0.45rem; left: calc(var(--p90) * 1%); }
.interval .p90 .mark { width: 100%; height: 100%; display: block; }

/* prevention panel */
.coverage-table td .pct { font-family: var(--font-mono); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.coverage-table td.low .pct { color: var(--flag-low); }

/* season panel */
.season-scroll { overflow-x: auto; scrollbar-width: thin; }
.season-grid { display: grid; grid-template-columns: 9rem repeat(var(--months, 12), minmax(2.9rem, 1fr)); gap: 3px; align-items: stretch; }
.season-grid .season-band { grid-row: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: 0.8125rem; color: var(--ink-2); padding: 0.2rem 0; border-bottom: 1.5px solid var(--ink-3); white-space: nowrap; }
.season-grid .month { font-size: 0.8125rem; color: var(--ink-2); text-align: center; padding-bottom: var(--space-1); white-space: nowrap; }
.season-grid .row-label { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 0.9375rem; padding-right: var(--space-2); background: var(--paper); }
.season-grid .corner { background: var(--paper); }
.season-grid .cell { position: relative; min-height: 2.75rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; border-radius: 3px; color: var(--ink); }
.season-grid .cell.is-key { outline: 3px solid var(--highlight); outline-offset: -1px; }
.season-grid .cell .mark { position: absolute; top: 3px; right: 3px; width: 0.6rem; height: 0.6rem; }

/* breed panel */
.breed-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.breed-row { display: grid; grid-template-columns: minmax(11rem, 1.1fr) 6rem minmax(0, 2.4fr); gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.breed-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.breed-name small { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.8125rem; }
.breed-n { font-family: var(--font-mono); text-align: right; color: var(--ink-2); font-size: 0.875rem; }
.breed-dx { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.breed-dx span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9375rem; }
.breed-dx b { font-family: var(--font-mono); font-weight: 600; }
.breed-dx span.is-key b { background: var(--highlight); padding: 0 0.2rem; border-radius: 3px; }

/* method & limits panel */
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); column-gap: var(--space-5); border-top: 1px solid var(--rule); }
.limit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.limit .icon { grid-row: span 3; width: 2rem; height: 2rem; }
.limit h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: var(--space-2); }
.limit p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.limit.absent { border: 1px dashed var(--ink-3); border-radius: var(--radius); padding-left: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 900px) { .limit.absent { grid-column: span 2; } }
.limit.absent h3 .secondary { font-weight: 600; }
.sign-off { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.875rem; color: var(--ink-2); }
.sign-off strong { color: var(--ink); }
.limit.absent .icon { filter: grayscale(1); opacity: 0.55; }

.present-counter { display: none; }

/* signature motion: the result travels from the reference once.
   The resting state is the final state; the animation only replays it from the start when a
   panel first enters view, so nothing depends on the observer firing. */
@media (prefers-reduced-motion: no-preference) {
  .panel.is-revealed .range .res-mark { animation: result-travel 900ms var(--ease-out) both; }
  .panel.is-revealed .range .span { animation: result-span 900ms var(--ease-out) both; }
  .panel.is-revealed .interval .iqr, .panel.is-revealed .interval .tail { animation: result-fade 600ms var(--ease-out) both; }
  @keyframes result-travel { from { transform: translateX(calc(var(--from) * 1cqw)); } }
  @keyframes result-span { from { transform: scaleX(0); } }
  @keyframes result-fade { from { opacity: 0; } }
}

/* ── Present mode: one panel per screen, fixed order ──────────────── */
html:has(.insights.is-presenting) { scroll-snap-type: y mandatory; font-size: clamp(1rem, 1.1vw, 1.375rem); }
body:has(.insights.is-presenting) .site-header,
body:has(.insights.is-presenting) .site-footer,
.insights.is-presenting .aside-actions .button:not([data-present-toggle]) { display: none; }
body:has(.insights.is-presenting) main.container { padding: 0; width: min(100rem, 100% - 4rem); }
.insights.is-presenting .range { height: 2.2rem; }
.insights.is-presenting .range .span { height: 5px; top: calc(50% - 2.5px); opacity: 0.6; }
.insights.is-presenting tr.is-key .range .span { height: 6px; top: calc(50% - 3px); opacity: 1; }
.insights.is-presenting .range .res-mark { width: 1.45rem; height: 1.45rem; margin: -0.725rem 0 0 -0.725rem; }
.insights.is-presenting .range .ref-dot { width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; }
.insights.is-presenting .panel-foot, .insights.is-presenting .legend, .insights.is-presenting .range-scale { font-size: 0.875rem; }
.insights.is-presenting .slide { min-height: 100dvh; scroll-snap-align: start; padding-block: clamp(1.5rem, 4vh, 3rem); margin: 0; display: flex; flex-direction: column; justify-content: center; }
.insights.is-presenting .sheet-band { margin-top: 0; }
.insights.is-presenting .present-counter {
  display: inline-flex; position: fixed; right: 1.25rem; bottom: 1rem; z-index: var(--z-sticky);
  font-family: var(--font-mono); font-size: 0.875rem; padding: 0.2rem 0.6rem; border-radius: 4px; background: var(--ink); color: var(--paper);
}
.insights.is-presenting .next-peek { display: none; }
.insights.is-presenting .interpretation p { font-size: 1.25rem; }
.insights.is-presenting .first-view { grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 3.3fr) minmax(15rem, 1fr); }
.insights.is-presenting .analytes .range-cell { width: 28%; min-width: 7rem; }

/* ── A2 example record (one pet's full history, loaded on demand) ── */
.pet-record .section-head .record-flag { margin-left: auto; font-size: 0.875rem; }
.pet-record[aria-busy="true"] { opacity: 0.55; cursor: progress; transition: opacity 160ms var(--ease-out); }
.record-lead { max-width: var(--measure); color: var(--ink-2); }
.record-lead strong { color: var(--ink); }
.record-rule { margin-top: var(--space-2); max-width: var(--measure); }
.record-rule summary { cursor: pointer; font-weight: 600; color: var(--teal-deep); }
.record-rule ul { margin: var(--space-2) 0 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); color: var(--ink-2); }
.record-rule strong { font-family: var(--font-mono); color: var(--ink); }
.pet-record .muted { color: var(--ink-2); font-weight: 400; }
.record-empty { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.record-time {
  display: grid; grid-template-columns: minmax(13rem, auto) minmax(0, 1fr); gap: var(--space-4) var(--space-6);
  align-items: start; margin: var(--space-4) 0 var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule);
}
.time-total { margin: 0; }
.time-value {
  margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--teal-deep);
}
.time-value .unit { margin-left: 0.3rem; font-size: 1.125rem; font-weight: 600; color: var(--ink-2); }
.time-label { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.time-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: 0.9375rem; }
.timing-detail { margin-bottom: var(--space-2); }
.timing-detail summary { cursor: pointer; font-weight: 600; color: var(--teal-deep); }
.timing-detail .table-scroll { margin-top: var(--space-2); }
.time-facts .num, .entry-cost .num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.time-facts .measured { color: var(--ink-2); }
.record-time .button-row { grid-column: 1 / -1; }
table.timing td.step { font-weight: 700; white-space: nowrap; }
table.timing code { font-size: 0.875rem; }
table.timing tr.subtotal > * { font-weight: 700; border-top: 1.5px solid var(--ink); }
table.timing tr.grand > * { color: var(--teal-deep); }
.record-profile { margin-top: var(--space-5); }
.record-profile dd .icon { width: 1.1em; height: 1.1em; }
.record-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--space-6) var(--space-6); margin-top: var(--space-6);
}
.record-block { min-width: 0; }
.record-block h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 0; padding-bottom: var(--space-2); border-bottom: 2px solid var(--ink); }
.record-block h3 .en, .chart-head h3 .en { font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
.record-block .chart-frame { margin: 0; }
.pet-record td.wrap { white-space: normal; min-width: 10rem; }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-4); border-top: 2px solid var(--ink); scroll-margin-top: var(--space-4); }
.chart-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.chart-foot { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.chart-timeline { list-style: none; margin: 0; padding: 0; }
.chart-entry { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-4); max-width: none; padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.entry-when { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); font-weight: 700; }
.entry-time { font-family: var(--font-mono); font-weight: 400; font-size: 0.875rem; color: var(--ink-2); }
.entry-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.entry-body { min-width: 0; }
.entry-body > :first-child { margin-top: 0; }
.vitals { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0 0 var(--space-3); }
.vitals div { display: flex; align-items: baseline; gap: var(--space-2); }
.vitals dt { font-size: 0.8125rem; color: var(--ink-2); }
.vitals dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 0.875rem; }
.entry-dx { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.entry-dx .chip { color: var(--teal-deep); }
.entry-notes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.entry-notes dt { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); padding-top: 0.15rem; }
.entry-notes dd { margin: 0; max-width: var(--measure); white-space: pre-line; overflow-wrap: anywhere; }
table.rx th, table.rx td { padding-block: 0.4rem; }
table.rx td.usage { min-width: 12rem; }
.entry-cost { margin: var(--space-2) 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 0.9375rem; }
.pager a { font-weight: 700; }
.pager-edge { color: var(--ink-2); }
.pager-status { font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 640px) {
  .pet-record .section-head .record-flag { margin-left: 0; }
  .record-time { grid-template-columns: 1fr; }
  .chart-entry { grid-template-columns: 1fr; gap: var(--space-2); }
  .entry-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
  .entry-notes { grid-template-columns: 1fr; gap: var(--space-1); }
  .entry-notes dd { margin-bottom: var(--space-2); }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .first-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .first-view .panel { grid-column: 1 / -1; grid-row: 1; }
  .insight-body { grid-template-columns: minmax(0, 1fr); }
  .insight-body .interpretation { position: static; }
}
@media (max-width: 900px) {
  .header-row { flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); }
  .site-nav { order: 3; flex-basis: 100%; }
  .header-meta { margin-left: auto; }
  .search-form, .grid { grid-template-columns: minmax(0, 1fr); }
  .season-grid { grid-template-columns: 7rem repeat(var(--months, 12), 2.9rem); width: max-content; }
  .season-grid .row-label, .season-grid .corner { position: sticky; left: 0; z-index: 1; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 1.5rem, 1200px); }
  h1 { font-size: 1.375rem; }
  .first-view { grid-template-columns: minmax(0, 1fr); }
  .first-view .panel { grid-row: auto; }
  .analytes thead { display: none; }
  .analytes, .analytes tbody, .analytes tfoot { display: block; width: 100%; }
  .analytes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 0.15rem; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
  .analytes th, .analytes td { border: 0; padding: 0; }
  .analytes tbody th { grid-column: 1; grid-row: 1; }
  .analytes td.result { grid-column: 2; grid-row: 1; }
  .analytes td.ref-cell, .analytes td.p90-cell { grid-column: 1; grid-row: 2; text-align: left; font-size: 0.875rem; }
  .analytes td.flag-cell, .analytes td.n-cell { grid-column: 2; grid-row: 2; justify-self: end; font-size: 0.875rem; }
  .analytes td.range-cell { display: block; grid-column: 1 / -1; grid-row: 3; width: auto; min-width: 0; margin-top: var(--space-2); }
  .analytes td[data-label]::before { content: attr(data-label) " "; font-family: var(--font-sans); font-size: 0.75rem; color: var(--ink-2); }
  .analytes tfoot tr { border-bottom: 0; padding: var(--space-1) 0 0; }
  .analytes tfoot td:not(.range-cell) { display: none; }
  .analytes tfoot td.range-cell { grid-row: 1; margin-top: 0; }
  .band-table thead { display: none; }
  .band-table, .band-table tbody { display: block; width: 100%; }
  .band-table tr { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
  .band-table th, .band-table td { border: 0; padding: 0.15rem 0; }
  .band-table tbody th { grid-column: 1 / -1; padding-bottom: var(--space-2); }
  .band-table td { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
  .band-table td::before { content: attr(data-label); font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
  .band-table td .bar { display: none; }
  .band-table td .pct { font-size: 0.875rem; }
  .sheet-band { padding: var(--space-3) var(--space-4); }
  .band-accession { margin-left: 0; }
  .breed-row { grid-template-columns: minmax(0, 1fr) auto; }
  .breed-dx { grid-column: 1 / -1; }
  .query-card { grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "id title" "id question" "id status" "id n" "id dims"; }
  .query-card .chip, .query-card .headline-number { justify-self: start; }
  .meta-strip > div { flex: 1 1 45%; border-bottom: 1px solid var(--rule); }
  .accession { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  :root { font-size: 11pt; }
  .site-header, .language-switch, .skip-link, .button-row, .aside-actions, .next-peek, .sql-details { display: none; }
  main { padding: 0; }
  .card, .panel, figure { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

.chart-frame { margin: 1.5rem 0 0; break-inside: avoid; overflow-x: auto; }
@media (max-width: 720px) { .chart-frame svg { min-width: 680px; } }
.chart-frame svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-frame figcaption { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-2, #4b5866); }
.chart-frame figcaption strong { color: var(--ink, #1c2733); font-size: 0.9375rem; }
.chart-frame .chart-meta { font-family: var(--font-mono, ui-monospace, Menlo, monospace); }
svg .grid-line { stroke: var(--rule-soft, #e8ecef); stroke-width: 1; }
svg .axis-line { stroke: var(--ink, #1c2733); stroke-width: 1.25; }
svg .tick { fill: var(--ink-2, #4b5866); font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; }
svg .cat { fill: var(--ink-2, #4b5866); font-family: var(--font-sans, sans-serif); font-size: 12px; }
svg .value { fill: var(--ink, #1c2733); font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; font-weight: 600; }
svg .value-inv { fill: #fff; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; font-weight: 600; }
svg .series-label { font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 700; }
svg .legend-text { fill: var(--ink, #1c2733); font-family: var(--font-sans, sans-serif); font-size: 12px; }
svg .s1 { fill: var(--series-1, #1d6b78); stroke: var(--series-1, #1d6b78); }
svg .s2 { fill: var(--series-2, #c98a1c); stroke: var(--series-2, #c98a1c); }
svg .s3 { fill: var(--series-3, #4b47a3); stroke: var(--series-3, #4b47a3); }
svg .s4 { fill: var(--series-4, #4d9a6c); stroke: var(--series-4, #4d9a6c); }
svg .s5 { fill: var(--series-5, #b04877); stroke: var(--series-5, #b04877); }
svg .s6 { fill: var(--series-6, #6b7684); stroke: var(--series-6, #6b7684); }
svg text.s1, svg text.s2, svg text.s3, svg text.s4, svg text.s5, svg text.s6 { stroke: none; }
svg rect.bar { stroke: none; }
svg rect.seg { stroke: var(--paper, #fff); stroke-width: 1; }
svg polyline.line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
svg circle.dot { stroke: var(--paper, #fff); stroke-width: 1.5; }
svg .box-iqr { fill: var(--teal-wash, #eef6f7); stroke: var(--teal, #1d6b78); stroke-width: 1.25; }
svg .box-median { stroke: var(--ink, #1c2733); stroke-width: 2.5; }
svg .box-whisker { stroke: var(--ink-3, #8a95a1); stroke-width: 1.25; }
svg .box-p90 { fill: var(--flag-high, #c2410c); }
svg .grid-cell { fill: var(--paper, #fff); stroke: var(--rule, #dde3e8); }
svg .cell-empty { fill: var(--paper, #fff); stroke: var(--ink-3, #8a95a1); stroke-width: 1; stroke-dasharray: 3 2; }
svg .grid-value { fill: var(--ink, #1c2733); font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 22px; font-weight: 600; }
svg .grid-label { fill: var(--ink-2, #4b5866); font-family: var(--font-sans, sans-serif); font-size: 12px; }
svg .grid-head { fill: var(--ink, #1c2733); font-family: var(--font-sans, sans-serif); font-size: 13px; font-weight: 700; }
svg .ts-monthly { fill: none; stroke: var(--series-1, #1d6b78); stroke-width: 1.25; stroke-linejoin: round; }
svg .ts-average { fill: none; stroke: var(--ink, #1c2733); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
svg .ts-hidden { fill: none; stroke: var(--ink-2, #4b5866); stroke-width: 2; stroke-dasharray: 3 2; }
svg .ts-marker { stroke: var(--ink-3, #8a95a1); stroke-width: 1; stroke-dasharray: 4 3; }
svg .ts-marker-label { fill: var(--ink-2, #4b5866); font-family: var(--font-sans, sans-serif); font-size: 11px; }
svg .ts-peak { fill: var(--flag-high, #c2410c); stroke: var(--paper, #fff); stroke-width: 1.5; }
svg .ts-peak-label { fill: var(--ink, #1c2733); font-family: var(--font-sans, sans-serif); font-size: 13px; font-weight: 700; }
svg .ts-hit { fill: transparent; }
svg .year-tick { stroke: var(--ink, #1c2733); stroke-width: 1; }
.chart-frame.ts-frame { direction: rtl; }
.chart-frame.ts-frame > * { direction: ltr; }