/* Light-only by project mandate (.agent/docs/ui-style-rules.md forbids
   prefers-color-scheme switching). Every colour painted explicitly.
   Palette: ONE neutral cool-grey family + ONE teal accent (#0f6b74) —
   nothing else; other hues (incl. the legacy site's blue family) are
   forbidden. Accent marks state and interaction, never decoration.
   Deliberately different from meddatax-web/STYLE_GUIDE.md: this is an
   independent product and must look like one. */

:root {
  --canvas:   #f6f8fa;   /* page ground — cool, one step off white */
  --surface:  #ffffff;   /* cards sit on the canvas */
  --sunk:     #f8fafc;
  --line:     #e3e8ef;
  --line-2:   #cbd5e1;

  --ink:      #0f172a;
  --ink-2:    #475569;
  --ink-3:    #64748b;
  --ink-4:    #94a3b8;

  /* One accent, one neutral family. Nothing else.
     Colour marks state and interaction — never decoration. */
  --accent:    #0f6b74;  /* deep teal-cyan: links, active state, interaction */
  --accent-dk: #0a4a51;
  --accent-lt: #eef6f7;
  --accent-ed: #b8d9dd;

  --done:      #94a3b8;  /* completed studies — neutral, not a second hue */
  --done-lt:   #e2e8f0;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 6px;
}

* { box-sizing: border-box; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: the page column fills the viewport, .page grows (flex: 1)
     and the footer's margin-top: auto pins it to the bottom on short pages;
     on long pages it follows the content. Never position: fixed — that
     would cover content. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* mobile URL-bar chrome: 100vh is taller than the visible viewport */
}

.page {
  /* width: 100% + max-width + auto margins: as a flex item of body,
     margin: 0 auto alone would disable cross-axis stretch and the column
     would shrink to fit-content (a wide table could pull the whole page
     narrow). */
  width: 100%; max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem 0;
  display: flex; flex-direction: column; gap: 1.125rem;
  flex: 1; /* fills the viewport column so the footer can rest on the bottom */
}
/* Direct paragraphs in the page column: the flex gap owns the vertical
   rhythm — default 1em margins would double the spacing around them. */
.page > p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dk); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.crumb { font-size: 12.5px; color: var(--ink-3); margin: 0; }

/* ── Identity ─────────────────────────────────────────── */
header.id { display: flex; flex-direction: column; gap: .5rem; }
.row { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
h1 { font-size: 1.875rem; font-weight: 680; letter-spacing: -.02em; line-height: 1.15; margin: 0; }

.pill {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5rem; border-radius: var(--r);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink-2);
  white-space: nowrap;
}
.pill.status { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent-ed); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* Footnote marker — the idiom medical literature already uses for caveats.
   Carries the exception with type, not with a second colour. */
.fn {
  font-size: .8125rem; color: var(--accent-dk); font-weight: 700;
  text-decoration: none; vertical-align: .25em; margin-left: .125rem;
}
.fn:hover { text-decoration: none; }
p.footnote { font-size: 12.5px; color: var(--ink-3); margin: 0; }
p.footnote b { color: var(--ink-2); font-weight: 700; }

.brands { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.brands b { color: var(--ink); font-weight: 600; }

/* ── Attribute line: qualitative facts, plain text ────── */
p.attrs { margin: 0; font-size: 13.5px; color: var(--ink-2); }
p.attrs b { color: var(--ink); font-weight: 600; }
p.attrs .sep { color: var(--ink-4); margin: 0 .4375rem; }

/* ── Measures: quantitative facts, rule-bounded band ────
   Kept separate from the attribute line above — these are counts,
   not properties, and a card grid would flatten that distinction. */
dl.measures {
  margin: .625rem 0 0; padding: .6875rem 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap;
}
dl.measures > div {
  display: flex; flex-direction: column-reverse; gap: .0625rem;
  padding: 0 1.375rem; min-width: 0;
  border-left: 1px solid var(--line);
}
dl.measures > div:first-child { padding-left: 0; border-left: 0; }
dl.measures dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
dl.measures dd {
  margin: 0; font-size: 1.5rem; font-weight: 640; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
dl.measures dd .of { font-size: 12.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: .1875rem; }
dl.measures .live dd { color: var(--accent); }

/* ── Section nav ──────────────────────────────────────── */
nav.jump {
  position: sticky; top: 0; z-index: 5;
  background: rgba(246,248,250,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  margin: .25rem 0 0; padding: .5rem 0;
  display: flex; gap: .25rem; overflow-x: auto;
}
nav.jump a {
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  padding: .25rem .5625rem; border-radius: var(--r); white-space: nowrap;
}
nav.jump a:hover { background: var(--surface); color: var(--accent); text-decoration: none; }

/* ── Cards ────────────────────────────────────────────── */
section.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
section.card > h2 {
  margin: 0; padding: .625rem .875rem;
  font-size: .875rem; font-weight: 640; letter-spacing: -.005em; color: var(--ink);
  border-bottom: 1px solid var(--line); background: var(--sunk);
}
.body { padding: .875rem; display: flex; flex-direction: column; gap: .875rem; }
.body > p { margin: 0; max-width: 74ch; color: var(--ink-2); }
.body > p.lead { color: var(--ink); }

/* ── Tables ───────────────────────────────────────────── */
.scroll { overflow-x: auto; margin: 0 -.875rem; padding: 0 .875rem; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: .4375rem .625rem .4375rem 0; vertical-align: top; }
thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); border-bottom: 1px solid var(--line-2); padding-bottom: .375rem; white-space: nowrap;
}
tbody tr + tr > * { border-top: 1px solid var(--line); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 1.125rem; }
tbody th[scope="row"] { font-weight: 600; white-space: nowrap; }
td.brandcol { font-weight: 600; white-space: nowrap; width: 5.75rem; }
tfoot > tr > * { border-top: 2px solid var(--line-2); font-weight: 700; }
td.n.on   { color: var(--accent); font-weight: 640; }
td.n.off  { color: var(--ink-3); }

.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--done-lt); min-width: 4.5rem; }
.bar span { display: block; height: 100%; }
.bar .on   { background: var(--accent); }
.bar .done { background: var(--done); }
td.split { width: 30%; padding-right: 0; padding-top: .6875rem; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 12px; color: var(--ink-3); margin: 0; }
.legend i { display: inline-block; width: 12px; height: 6px; border-radius: 3px; margin-right: .375rem; vertical-align: .05em; }
.legend .on { background: var(--accent); }
.legend .done { background: var(--done); }

.src { font-size: 12.5px; color: var(--ink-3); margin: 0; }

/* ── Developments (recent news) ───────────────────────── */
table.feed td { padding-top: .5rem; padding-bottom: .5rem; }
table.feed td.date { white-space: nowrap; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; width: 5.75rem; }
table.feed td.dom  { white-space: nowrap; color: var(--ink-3); font-size: 12.5px; width: 11.5rem; }
table.feed td.hl a { font-weight: 540; }

/* ── Related ──────────────────────────────────────────── */
.rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .875rem 1.5rem; }
.rel > div { min-width: 0; }
.rel h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 .4375rem; }
ul.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
ul.chips a {
  display: inline-block; padding: .1875rem .5rem; border-radius: var(--r);
  background: var(--sunk); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
ul.chips a:hover { background: var(--accent-lt); border-color: var(--accent-ed); color: var(--accent); text-decoration: none; }
ul.chips .n { color: var(--ink-4); font-variant-numeric: tabular-nums; font-size: 11px; margin-left: .25rem; }

/* ── List & home pages ────────────────────────────────── */
ul.pagelist { list-style: none; margin: 0; padding: 0; }
ul.pagelist li + li { border-top: 1px solid var(--line); }
ul.pagelist a { display: block; padding: .5625rem .125rem; font-weight: 600; }
ul.pagelist a:hover { text-decoration: none; color: var(--accent-dk); }
nav.pagenav { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; }
nav.pagenav .off { color: var(--ink-4); }
ul.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 640px) { ul.tiles { grid-template-columns: repeat(3, 1fr); } }
/* The grid stretches the <li> to the row height; the <a> must fill the whole
   cell or cards with wrapped description text end up visibly taller than
   their neighbors. */
ul.tiles li { display: flex; }
ul.tiles a { display: block; flex: 1; padding: .875rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
ul.tiles a:hover { border-color: var(--accent-ed); text-decoration: none; }
ul.tiles h2 { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 600; }
ul.tiles p { margin: 0; font-size: .8125rem; color: var(--ink-3); }

/* ── Static pages (about / privacy / terms) ───────────── */
ul.method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
ul.method li { margin: 0; max-width: 74ch; color: var(--ink-2); }
ul.method li b { color: var(--ink); font-weight: 650; }

/* ── Footer ─────────────────────────────────────────────
   margin-top: auto pins the footer to the bottom of the viewport-height
   page column (sticky footer); the border + padding mark the page end.
   Separators between the nav links are CSS pseudo-elements, not content —
   they belong to styling, not to the document. */
footer.foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 1rem 0 1.5rem;
  font-size: 12.5px; color: var(--ink-3);
  display: flex; flex-direction: column; gap: .375rem;
}
footer.foot p { margin: 0; }
footer.foot nav.footnav { display: flex; flex-wrap: wrap; gap: .125rem .875rem; margin: 0; }
footer.foot nav.footnav a { font-weight: 600; }
footer.foot nav.footnav a + a::before {
  content: "·"; color: var(--ink-4); font-weight: 500; margin-right: .875rem;
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
html { scroll-behavior: smooth; }
section.card { scroll-margin-top: 3.25rem; }

@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  dl.measures > div { padding: .25rem .875rem; flex: 1 0 44%; }
  dl.measures > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  dl.measures dd { font-size: 1.3125rem; }
  td.split { display: none; }
  table.feed td.dom { display: none; }
}