/* Hand-written rather than a framework: this is a document-shaped site, and 300 lines
   of CSS is smaller and more legible than any dependency that would do the same job. */

:root {
  --bg:        #fbfaf8;
  --surface:   #ffffff;
  --border:    #e3e0da;
  --text:      #22201d;
  --muted:     #6b665e;
  --faint:     #8e887e;
  --accent:    #1f6f5c;
  --accent-bg: #e8f2ef;

  /* Flag colours. Deliberately not red/green alone -- they carry a text label too,
     because colour-blind readers must not lose the distinction. */
  --low:       #1a5f9e;
  --low-bg:    #e6eff7;
  --high:      #a8472a;
  --high-bg:   #fbeee9;
  --normal:    #2d6a4f;
  --warn:      #8a6d1f;
  --warn-bg:   #fdf6e3;

  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #16181a;
    --surface:   #1d2022;
    --border:    #32363a;
    --text:      #e6e3de;
    --muted:     #a09a92;
    --faint:     #837d75;
    --accent:    #6bbfa5;
    --accent-bg: #1b2e29;
    --low:       #7ab5e8;
    --low-bg:    #16273a;
    --high:      #e8a288;
    --high-bg:   #33201a;
    --normal:    #7fc9a4;
    --warn:      #d9bb6a;
    --warn-bg:   #2e2718;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  /* The full medallion, faint, behind everything. `fixed` keeps it still while the page
     scrolls, so it reads as a watermark on the paper rather than part of the content.
     Its opacity is baked into the PNG by `mra logo`; see logo.py BACKDROP_ALPHA. */
  background: var(--bg) url("/empeiria/static/logo-backdrop.png") no-repeat fixed center 96px / min(720px, 68vw) auto;
}

/* Side columns: a caduceus down each edge, after the logo. Three parts: the winged head
   (snakes-head.svg) pinned to the top, the tails (snakes-tail.svg) to the bottom, and the
   twist (snakes.svg) repeated between them. The padding reserves the caps' heights, and the
   twist is drawn in the content box only, so it never shows behind a cap.
   `round` stretches the twist slightly so a whole number of turns fits: it then ends where
   the snakes are furthest apart, which is exactly where the head and tail pick them up.
   Fixed to the window and drawn above the sticky header, so the column always runs the
   full height. Purely decorative: no clicks, and hidden where the window is too narrow to
   keep it clear of the content. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 56px;
  padding: 96px 0 72px;      /* the head and tail caps' heights at 56px wide */
  background:
    url("/empeiria/static/snakes-head.svg") no-repeat center top / 56px auto border-box border-box,
    url("/empeiria/static/snakes-tail.svg") no-repeat center bottom / 56px auto border-box border-box,
    url("/empeiria/static/snakes.svg") no-repeat round center top / 56px auto content-box content-box;
  pointer-events: none;
  z-index: 11;
}
body::before { left: 0; }
body::after { right: 0; }
@media (max-width: 1040px) {
  body::before, body::after { display: none; }
}

/* Narrow windows and phones: the watermark moves onto body::before, free here because the
   side columns are hidden. Two reasons. iOS Safari ignores `background-attachment: fixed`,
   so on a phone the medallion scrolled away with the top of the page; a fixed element stays
   put everywhere. And at 68vw it sat small near the top; here it fills the window's width,
   centred in the space below the header, and shrinks only on a short landscape window. */
@media (max-width: 1040px) {
  body { background-image: none; }
  body::before {
    display: block;
    left: 0;
    right: 0;
    width: auto;
    padding: 0;
    background: url("/empeiria/static/logo-backdrop.png") no-repeat center calc(50% + 40px) / min(96vw, 82vh) auto;
    z-index: -1;
  }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------------------------------------------------------------- site header */

header.site {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
header.site .brand { font-weight: 650; font-size: 1.2rem; color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; }
/* No clipping needed: `mra logo` makes the logo's background transparent. */
header.site .brand-logo { width: 64px; height: 64px; display: block; }
header.site nav { display: flex; gap: 16px; font-size: 0.9rem; margin-left: auto; }
header.site nav a { color: var(--muted); }

/* ------------------------------------------------------------------- search */

.searchbar { position: relative; width: 100%; }
.searchbar input {
  width: 100%;
  padding: 11px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.searchbar input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

.hero { padding: 48px 0 8px; }
.hero h1 { font-size: 1.9rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.hero p.lede { color: var(--muted); margin: 0 0 24px; font-size: 1.05rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  font-size: 0.85rem;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.hits { margin-top: 20px; }
.hit {
  display: block;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 9px;
  color: inherit;
}
.hit:hover { border-color: var(--accent); text-decoration: none; }
.hit .title { font-weight: 600; }
.hit .snippet { color: var(--muted); font-size: 0.9rem; margin-top: 3px; }
.hit .snippet mark { background: var(--accent-bg); color: inherit; padding: 0 2px; }

.kind {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  margin-right: 8px;
  vertical-align: 2px;
}

.empty { color: var(--muted); padding: 24px 0; }

/* -------------------------------------------------------------- detail pages */

article > h1 { font-size: 1.75rem; margin: 32px 0 4px; letter-spacing: -0.01em; }
article > h2 { font-size: 1.05rem; margin: 34px 0 10px; letter-spacing: 0.01em; }

.aliases { color: var(--muted); font-size: 0.92rem; margin-bottom: 14px; }
.aliases code { font-family: var(--mono); font-size: 0.85rem; }

.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }

/* Provenance badges. These must stay visible -- a page that renders unverified data
   as confident prose defeats the entire audit system behind it. */
.badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.unverified { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.badge.verified   { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.badge.neutral    { background: transparent; color: var(--faint); border-color: var(--border); }
.badge code { font-family: var(--mono); }

table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { font-weight: 600; font-size: 0.8rem; text-transform: uppercase;
     letter-spacing: 0.05em; color: var(--faint); }
td.num { font-family: var(--mono); white-space: nowrap; }

/* The optimal band is contested and must read as secondary to the lab range. */
td.optimal { color: var(--muted); font-family: var(--mono); font-size: 0.88rem; }

.flag { font-weight: 600; }
.flag.low  { color: var(--low); }
.flag.high { color: var(--high); }
.flag.normal { color: var(--normal); }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.card .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
               color: var(--faint); margin-bottom: 4px; }

/* The symptom interpretation note. Prominent by design: it is the only thing keeping
   a reverse lookup from reading as a diagnosis. */
.note {
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  padding: 13px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 16px 0 22px;
  font-size: 0.94rem;
}

.rel { color: var(--muted); font-size: 0.86rem; font-family: var(--mono); }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 7px 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

.dir {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 7px;
}
.dir.high   { background: var(--high-bg); color: var(--high); }
.dir.low    { background: var(--low-bg);  color: var(--low); }
.dir.either { background: transparent; color: var(--faint); border: 1px solid var(--border); }

.spec { font-size: 0.78rem; color: var(--faint); }
.spec.characteristic { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------- clinical / plain register */

.register-toggle { display: flex; gap: 0; border: 1px solid var(--border);
                   border-radius: var(--radius); overflow: hidden; }
.register-toggle button {
  font: inherit;
  font-size: 0.82rem;
  padding: 4px 12px;
  border: 0;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.register-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Plain is the default view; the toggle flips which register is hidden. */
body[data-register="plain"] .reg-clinical { display: none; }
body[data-register="clinical"] .reg-plain { display: none; }

.explain { margin-bottom: 18px; }
.explain h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); margin: 0 0 5px; font-weight: 600;
}
.explain p { margin: 0; }
.explain .grade { font-size: 0.72rem; color: var(--faint); font-family: var(--mono); }

footer.site {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 22px 0;
  color: var(--faint);
  font-size: 0.85rem;
}
footer.site .attribution { font-size: 0.76rem; }

/* Related molecules: an enzyme's reaction, or captioned figures. */
.related-block { margin-top: 14px; }
.related-block .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
                        color: var(--faint); margin-bottom: 6px; }
.reaction { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.reaction .op { font-size: 1.4rem; color: var(--muted); }
.related-mol { margin: 0; display: inline-flex; flex-direction: column; align-items: center;
               max-width: 170px; }
.related-mol.wide { max-width: 320px; margin-right: 16px; vertical-align: top; }
.related-mol svg { width: 100%; height: auto; border-radius: 4px; display: block; }
.related-mol figcaption { font-size: 0.78rem; color: var(--muted); text-align: center;
                          margin-top: 4px; line-height: 1.35; }

/* 3D model panel: collapsible, below the 2D drawing. */
.viewer-3d { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius);
             background: var(--surface); padding: 10px 14px; }
.viewer-3d summary { cursor: pointer; font-weight: 600; }
.viewer-3d-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.viewer-3d-picker button { font: inherit; font-size: 0.82rem; padding: 3px 10px;
                           border: 1px solid var(--border); border-radius: 999px;
                           background: transparent; color: var(--muted); cursor: pointer; }
.viewer-3d-picker button.active { border-color: var(--accent); color: var(--accent); }
/* 3Dmol draws on a white plate, like the 2D drawings, so it stays legible in dark mode. */
.viewer-3d-canvas { position: relative; width: 100%; height: 320px; margin-top: 10px;
                    background: #fff; border-radius: 4px; }
.viewer-3d-note { margin-top: 8px; }
.viewer-3d-legend { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.82rem;
                    color: var(--muted); display: grid; gap: 3px; }
.viewer-3d-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
                            margin-right: 7px; vertical-align: -1px; }

/* A marker named inside prose. Quieter than a navigation link -- a dotted underline in
   the text colour -- so a paragraph that mentions four markers still reads as prose. */
a.marker-link {
  color: inherit;
  text-decoration: underline dotted var(--accent);
  text-underline-offset: 3px;
}
a.marker-link:hover { color: var(--accent); text-decoration-style: solid; }

/* Formula line under a marker's name. */
.formula-line { margin: -6px 0 12px; display: flex; gap: 10px; align-items: baseline;
                flex-wrap: wrap; }
.formula { font-family: var(--mono); font-size: 1.15rem; color: var(--text); }
.formula-class { font-size: 0.85rem; color: var(--muted); }

/* Check-a-value form and its result. */
.check-form { margin: 8px 0 4px; }
.check-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.check-fields label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); gap: 3px; }
.check-fields input, .check-fields select { font: inherit; font-size: 0.95rem; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--text); min-width: 90px; height: 34px; box-sizing: border-box; }
.check-fields input[name="value"] { width: 130px; }
.check-fields input[name="age"] { width: 80px; }
.check-unit { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); padding-bottom: 7px; }
.check-fields button { font: inherit; height: 34px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--accent); color: var(--surface); cursor: pointer; }
.check-result { margin: 10px 0 14px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); }
.check-result p { margin: 6px 0 0; }
.check-headline { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.check-flag { font-weight: 600; }
/* Flags carry a text label too, never colour alone. */
.check-result.flag-normal { border-color: var(--normal); }
.check-result.flag-normal .check-flag { color: var(--normal); }
.check-result.flag-low, .check-result.flag-critical_low { border-color: var(--low); background: var(--low-bg); }
.check-result.flag-low .check-flag, .check-result.flag-critical_low .check-flag { color: var(--low); }
.check-result.flag-high, .check-result.flag-critical_high { border-color: var(--high); background: var(--high-bg); }
.check-result.flag-high .check-flag, .check-result.flag-critical_high .check-flag { color: var(--high); }
.check-result.error { border-color: var(--warn); background: var(--warn-bg); }

/* Range bar. A picture of the table beneath it, on one shared scale per marker. */
.rangebar { margin: 18px 0 10px; }
.rangebar-row { display: flex; align-items: flex-start; gap: 10px; }
.rb-compare-row .rangebar-label { font-size: 0.72rem; color: var(--faint); padding-top: 0; }
.rangebar-label {
  flex: 0 0 160px; font-size: 0.8rem; color: var(--muted); padding-top: 4px;
  overflow-wrap: anywhere;
}
.rangebar svg { flex: 1 1 auto; width: 100%; display: block; overflow: visible; }
/* min-width: 0 lets the bar shrink beside its label on a phone; the gradient-definitions
   svg stays zero-size instead of taking the width rule above. */
.rangebar-row svg { min-width: 0; flex-basis: 0; }
.rangebar svg.rb-defs { width: 0; height: 0; }
.rb-axis { stroke: var(--border); stroke-width: 1; }
.rb-normal { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.5;
             vector-effect: non-scaling-stroke; }
.rb-normal.open-right { fill: url(#rb-fade-right); stroke: none; }
.rb-normal.open-left  { fill: url(#rb-fade-left);  stroke: none; }
.rb-stop { stop-color: var(--accent); stop-opacity: 0.35; }
.rb-optimal { fill: var(--accent); opacity: 0.45; }
.rb-compare { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 3 2;
              vector-effect: non-scaling-stroke; }
.rb-value { stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rangebar-ticks { position: relative; flex: 1 1 auto; height: 30px; font-family: var(--mono);
                  font-size: 0.72rem; color: var(--faint); }
.rangebar-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rangebar-ticks .rb-value-label { top: 16px; color: var(--text); font-weight: 600; }
.rangebar figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 14px; }
.rb-key { display: inline-block; width: 14px; height: 8px; margin: 0 4px 0 10px;
          vertical-align: middle; border-radius: 2px; }
.rb-key:first-child { margin-left: 0; }
.rb-key-normal  { background: var(--accent-bg); border: 1.5px solid var(--accent); }
.rb-key-optimal { background: var(--accent); opacity: 0.45; }
.rb-key-compare { border: 1.2px dashed var(--faint); }

.htmx-request .spinner { visibility: visible; }
.spinner { visibility: hidden; font-size: 0.8rem; color: var(--faint); }

@media (max-width: 640px) {
  header.site .wrap { flex-wrap: wrap; }
  /* Nine links do not fit one phone-width row; let them wrap instead of widening the page. */
  header.site nav { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 6px 14px; }
  .hero { padding-top: 28px; }
  .rangebar-label { flex-basis: 104px; }
  /* A table wider than a phone scrolls inside itself rather than widening the page. */
  main table { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------- chemistry & assays */

.structure {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}
.structure-drawing svg {
  /* RDKit draws bonds in dark ink on its own white background; keeping that plate is
     what stays legible when the rest of the page is dark. */
  border-radius: 4px;
  max-width: 100%;
  height: auto;
  display: block;
}
.structure dl { margin: 0; display: grid; grid-template-columns: auto 1fr;
                gap: 4px 14px; font-size: 0.9rem; min-width: 260px; }
.structure dt { color: var(--faint); }
.structure dd { margin: 0; font-family: var(--mono); font-size: 0.85rem;
                word-break: break-all; }

/* 3D is a deliberate stub: SMILES carries connectivity, not coordinates, and fetching
   conformers would break the app's offline guarantee. Styled as a quiet placeholder
   rather than hidden, so the absence is visible and intentional. */

.no-structure {
  border-left: 3px solid var(--border);
  padding: 10px 14px;
  color: var(--muted);
  font-size: 0.93rem;
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.assay { border: 1px solid var(--border); border-radius: var(--radius);
         background: var(--surface); padding: 14px 16px; margin-bottom: 10px; }
.assay h4 { margin: 0 0 2px; font-size: 0.98rem; }
.assay .family { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
                 color: var(--faint); }
.assay .secondary { opacity: 0.85; }
.assay ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.9rem; color: var(--muted); }

/* why_intervals_differ is the field that turns an existing disclaimer into an
   explanation, so it gets the same visual weight as the symptom caveat. */
.why-differ {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  padding: 11px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 10px;
  font-size: 0.92rem;
}

/* My results: a person's own record, kept in the browser (templates/my_results.html). */
.personal-note { margin-bottom: 14px; }
.record-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.record-actions button, .my-results td button, .upload {
  font: inherit; font-size: 0.9rem; padding: 6px 14px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--accent); color: var(--surface); cursor: pointer;
}
.record-actions button.quiet, .my-results td button.quiet, .upload {
  background: transparent; color: var(--accent);
}
.my-results td button.quiet { padding: 2px 10px; font-size: 0.8rem; border-color: var(--border); color: var(--muted); }
.upload { position: relative; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.unsaved { font-size: 0.85rem; color: var(--high); }
.file-message { min-height: 1.2em; font-size: 0.9rem; color: var(--muted); margin: 4px 0 0; }
.file-message.bad { color: var(--high); }
.my-results #analysis { margin-top: 10px; }
.my-results #analysis table { margin: 6px 0 10px; }
.series-chart { margin: 12px 0 6px; }
.series-chart svg { width: 100%; height: auto; display: block; }
.series-chart figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.sc-grid { stroke: var(--border); stroke-width: 1; }
.sc-tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.sc-band { fill: var(--accent-bg); }
.sc-edge { stroke: var(--accent); stroke-width: 1.2; opacity: 0.7; }
.sc-line { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.sc-point { stroke: var(--surface); stroke-width: 1.5; }
.sc-normal { fill: var(--normal); }
.sc-low { fill: var(--low); }
.sc-high { fill: var(--high); }
.sc-none { fill: var(--faint); }
.sc-censored { fill: var(--surface); stroke-width: 2; }
.sc-censored.sc-low { stroke: var(--low); }
.sc-censored.sc-high { stroke: var(--high); }
.sc-censored.sc-normal { stroke: var(--normal); }
.my-results textarea { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 0.85rem;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); margin-bottom: 8px; }
.report-table { margin-top: 10px; font-size: 0.88rem; }
.report-table td.report-line { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); max-width: 220px; }
.report-table tr.needs-check { background: var(--high-bg); }
.report-table ul.issues { margin: 0; padding-left: 16px; font-size: 0.8rem; }

/* Coverage page */
.coverage-metrics td.why { color: var(--muted); font-size: 0.86rem; }
.meter-cell { white-space: nowrap; }
.meter { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--border);
  vertical-align: middle; margin-right: 6px; overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--accent); }
.coverage-markers td.mark { text-align: center; color: var(--normal); }
.coverage-markers td.gap { color: var(--faint); }
.coverage-markers td.num.gap { color: var(--high); }
/* A wide table scrolls inside its own box on a phone instead of widening the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Browse by body (templates/body.html) */
.body-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: start; }
.body-figure-wrap { margin: 0; position: sticky; top: 12px; }
.body-figure { position: relative; }
.body-figure svg { width: 100%; height: auto; display: block; max-height: 78vh; }
.body-figure .organ, .body-figure .organ * {
  fill: var(--accent) !important; fill-opacity: 0.28 !important; stroke: none !important;
  cursor: pointer; transition: fill-opacity 0.12s;
}
.body-figure .organ.hot, .body-figure .organ.hot * { fill-opacity: 0.9 !important; }
.body-figure .organ:focus { outline: none; }
.body-figure .organ:focus * { fill-opacity: 0.9 !important; }
.body-figure-wrap { position: relative; }
.body-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 9px; font-size: 0.85rem; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.body-tip .rel { font-family: inherit; font-size: 0.8rem; color: var(--muted); }
.body-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 8px; }
.body-switch button { font: inherit; font-size: 0.85rem; padding: 4px 14px; border: 0;
  background: var(--surface); color: var(--muted); cursor: pointer; }
.body-switch button[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.body-figure-wrap figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }
.body-system { margin-bottom: 14px; }
.body-system h3 { font-size: 1rem; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.body-system .chips { margin-top: 0; }
.body-system .chip.hot { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.body-system .chip.not-drawn, .body-system .chip.off-figure { border-style: dashed; }
.not-drawn-list .rel { margin-left: 6px; }
@media (max-width: 640px) {
  .body-layout { grid-template-columns: 1fr; }
  .body-figure-wrap { position: static; max-width: 280px; margin: 0 auto; }
}

/* Coverage: definition of done, features, history */
.dod { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; margin-bottom: 8px; }
.dod-goal { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.dod-goal header { display: flex; gap: 8px; align-items: baseline; }
.dod-goal h3 { font-size: 0.98rem; margin: 0; flex: 1; }
.dod-key { font-family: var(--mono); font-size: 0.8rem; color: var(--faint); }
.dod-status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dod-done .dod-status { color: var(--normal); }
.meter.wide { width: 100%; margin: 8px 0 6px; }
.dod-goal ul { list-style: none; margin: 0; padding: 0; }
.dod-goal li { display: grid; grid-template-columns: 18px 1fr auto; column-gap: 6px; padding: 5px 0;
  border-top: 1px solid var(--border); font-size: 0.88rem; }
.dod-mark { font-weight: 700; }
li.dod-met .dod-mark { color: var(--normal); }
li.dod-partial .dod-mark { color: var(--accent); }
li.dod-not-met .dod-mark { color: var(--high); }
li.dod-needs-a-person .dod-mark { color: var(--faint); }
.dod-kind { font-size: 0.72rem; color: var(--faint); white-space: nowrap; }
.dod-detail { grid-column: 2 / 4; font-size: 0.8rem; color: var(--muted); }
.dod-detail code { font-size: 0.72rem; word-break: break-all; }
.ui-goals { list-style: none; padding: 0; columns: 2 240px; font-size: 0.9rem; }
.ui-goals li { padding: 2px 0; break-inside: avoid; display: flex; gap: 8px; align-items: baseline; }
.ui-status { flex: 0 0 118px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--faint); }
.ui-done .ui-status { color: var(--normal); }
.ui-awaiting-review .ui-status { color: var(--accent); }
.history td, .history th { white-space: nowrap; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; }
@media (max-width: 640px) { .dod { grid-template-columns: 1fr; } }
/* Body map: selection and the info card */
.body-figure .organ.sel, .body-figure .organ.sel * { fill-opacity: 0.95 !important; fill: var(--high) !important; }
.body-system .chip.sel { background: var(--high); color: var(--surface); border-color: var(--high); }
.body-system.sel h3 a { color: var(--high); }
.body-side { min-width: 0; }
.body-card { border: 1px solid var(--border); border-left: 3px solid var(--high); border-radius: var(--radius);
  background: var(--surface); padding: 12px 16px; margin-bottom: 18px; }
.body-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.body-card header > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.body-card h2 { margin: 0; font-size: 1.15rem; }
.body-card h3 { font-size: 0.9rem; margin: 12px 0 4px; }
.body-card p { margin: 8px 0; font-size: 0.93rem; }
.body-card-close { font: inherit; font-size: 1.3rem; line-height: 1; border: 0; background: none;
  color: var(--muted); cursor: pointer; padding: 0 4px; }
.card-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-label { font-size: 0.78rem; color: var(--muted); margin-right: 2px; }
.body-card .chip { font: inherit; font-size: 0.8rem; padding: 2px 9px; }
.card-list { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.card-list.markers { columns: 2 180px; }
.card-list li { break-inside: avoid; }
.card-more { margin-top: 12px; font-size: 0.9rem; }
.card-list .rel { font-family: inherit; font-size: 0.8rem; color: var(--faint); }
.my-results tr.note-row td { border-top: 0; padding-top: 0; font-size: 0.8rem; color: var(--muted); font-family: inherit; }

/* Home page: the body map under the search */
.home-body { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); }
.home-section-title { font-size: 1.35rem; margin: 0 0 4px; }
.explain-status { font-size: 0.85rem; color: var(--muted); margin: 6px 0 10px; }
.explain h3 .badge { font-size: 0.68rem; vertical-align: middle; margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Home: body map first, then search (user request 2026-10-02) */
.home-first { margin-top: 28px; padding-top: 0; border-top: 0; }
.home-search { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.not-drawn { margin-top: 14px; font-size: 0.9rem; }
.not-drawn summary { cursor: pointer; color: var(--muted); }
.not-drawn-list .rel { font-family: inherit; }
.practice { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; background: var(--surface); }
.practice h3, .lab-method-heading { font-size: 1rem; margin: 0 0 6px; }
.lab-method-heading { margin-top: 4px; }