/* Tokens from ALiF Ecosystem Map v2.1 */
:root {
  color-scheme: light;
  --navy: #1B3A5C; --teal: #2A7F8E; --teal-light: #3A9FB0; --teal-text: #26737f; --dark: #1a1a2e; --mid: #555;
  --light: #f0f5f7; --cream: #fafbfc; --white: #fff; --border: #dde3e8; --card-bg: #fff; --body-bg: #fafbfc;
  --l1: #1B3A5C; --l2: #2A7F8E; --l3: #16803C; --gold: #b8860b; --danger: #b42318; --warn: #b54708; --ok: #16803C;
  --tec: #2563eb; --eva: #7c3aed; --pra: #16803C; --eth: #db2777; --dat: #ea580c;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --radius: 12px; --focus: 0 0 0 3px rgba(42,127,142,.45);
  --on-accent: #fff;
  --header-h: 60px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --navy: #7db4e0; --teal: #5bc0cd; --teal-light: #6dd5e1; --teal-text: #5bc0cd; --dark: #e8eaed; --mid: #a0a8b4;
  --light: #1e2a38; --cream: #0f1923; --white: #162230; --border: #2a3a4e; --card-bg: #162230; --body-bg: #0f1923;
  --l1: #7db4e0; --l2: #5bc0cd; --l3: #4ade80; --gold: #e0a810; --danger: #f97066; --warn: #f59e0b; --ok: #4ade80;
  --tec: #60a5fa; --eva: #a78bfa; --pra: #4ade80; --eth: #f472b6; --dat: #fb923c;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --on-accent: #0f1923;
}
/* Follow OS preference when the user hasn't made an explicit choice via the theme toggle
 * (data-theme is only ever "light" or "dark" once set — this block covers the unset default). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #7db4e0; --teal: #5bc0cd; --teal-light: #6dd5e1; --teal-text: #5bc0cd; --dark: #e8eaed; --mid: #a0a8b4;
    --light: #1e2a38; --cream: #0f1923; --white: #162230; --border: #2a3a4e; --card-bg: #162230; --body-bg: #0f1923;
    --l1: #7db4e0; --l2: #5bc0cd; --l3: #4ade80; --gold: #e0a810; --danger: #f97066; --warn: #f59e0b; --ok: #4ade80;
    --tec: #60a5fa; --eva: #a78bfa; --pra: #4ade80; --eth: #f472b6; --dat: #fb923c;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4);
    --on-accent: #0f1923;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--body-bg); color: var(--dark); line-height: 1.55; }
h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; line-height: 1.2; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; margin-block: 1.5rem .75rem; } h3 { font-size: 1.15rem; margin-block: 1rem .5rem; }
p { margin-block: .5rem; } ul, ol { padding-inline-start: 1.25rem; margin-block: .5rem; }
a { color: var(--teal-text); }
.wrap { max-width: 860px; margin-inline: auto; padding-inline: 1rem; }
.skip-link { position: fixed; top: -100%; inset-inline-start: 16px; z-index: 1000; padding: 8px 16px; background: var(--navy); color: var(--on-accent); border-radius: 0 0 8px 8px; font-size: 13px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 0; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--card-bg); border-bottom: 1px solid var(--border); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--dark); font-weight: 600; }
.brand-mark { background: var(--navy); color: var(--on-accent); font-family: 'DM Serif Display', serif; padding: .15rem .5rem; border-radius: 6px; }
.brand small { color: var(--mid); font-weight: 500; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.progress { width: 140px; height: 6px; background: var(--light); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--l1), var(--l2), var(--l3)); transition: width .3s; }
main { padding-block: 1.5rem 3rem; min-height: 60vh; }
.site-footer { border-top: 1px solid var(--border); padding-block: 1.25rem; font-size: .85rem; color: var(--mid); }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); margin-block: 1rem; }
.card.accent { border-inline-start: 4px solid var(--teal); }
.muted { color: var(--mid); } .small { font-size: .875rem; }
.btn { font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: 8px; border: 1px solid var(--navy); background: var(--navy); color: var(--on-accent); cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn:focus-visible, .tabs button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--navy); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--dark); padding: .4rem .7rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.25rem; align-items: center; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.choice { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal) inset; }
.choice input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--teal); }
.choice-body { display: block; }
.choice-body strong { display: block; }
.choice-desc { display: block; color: var(--mid); font-size: .875rem; }
fieldset { border: 0; padding: 0; margin: 0; } legend { font-weight: 600; padding: 0; }
.scale-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; position: sticky; top: calc(var(--header-h) + 2px); z-index: 10; background: var(--body-bg); padding-block: .5rem; border-bottom: 1px solid var(--border); }
.scale-key div { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .6rem; font-size: .8rem; }
.scale-key b { display: block; font-size: .95rem; }
.group-heading { font-family: 'DM Sans', system-ui, sans-serif; margin-block: 1.5rem .5rem; color: var(--teal-text); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.item { padding: .75rem .5rem; border-bottom: 1px solid var(--border); }
.item-row { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .75rem; align-items: center; }
.item.missing { background: color-mix(in srgb, var(--danger) 12%, transparent); border-radius: 8px; }
.item-text { font-weight: 600; }
.item-n { color: var(--mid); font-variant-numeric: tabular-nums; min-width: 1.75rem; flex: none; }
.item-scale { display: flex; gap: .35rem; }
.item-scale label { flex: 0 0 2.4rem; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 600; position: relative; }
.item-scale input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.item-scale label:has(input:checked) { background: var(--teal); color: var(--on-accent); border-color: var(--teal); }
.item-scale label:has(input:focus-visible) { box-shadow: var(--focus); }
@supports not (selector(:has(*))) {
  /* Without :has(), the invisible input can't drive the label's appearance — show it instead. */
  .item-scale input { opacity: 1; position: static; margin-inline-end: .25rem; }
}
@media (max-width: 600px) { .item-row { grid-template-columns: 2.5rem 1fr; } .item-scale { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 600px) {
  .brand-text small { display: none; }
  .progress { width: 90px; }
  .brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
}
.error { color: var(--danger); font-weight: 600; }
/* charts: responsive HTML rows (see js/ui/charts.js) rather than a fixed-viewBox SVG, so
 * labels reflow and never clip on narrow viewports. */
.barchart { margin-block: .5rem 1rem; }
.bars { list-style: none; padding: 0; margin: 0; }
.bar-row { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr 3.5rem; gap: .5rem; align-items: center; padding-block: .25rem; }
.bar-label { overflow-wrap: anywhere; font-size: .85rem; }
.band-legend { font-size: .7rem; color: var(--mid); padding-block-end: .25rem; border-bottom: 1px solid var(--border); margin-block-end: .25rem; }
.band-legend-track { display: grid; grid-template-columns: 31.7fr 26.7fr 23.3fr 18.3fr; }
.band-legend-track span:not(:first-child) { border-inline-start: 1px solid var(--border); padding-inline-start: .3rem; }
.bar-track { position: relative; height: 14px; background: var(--light); border-radius: 7px; overflow: hidden; }
.bar-bands {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--l1) 12%, transparent) 0 58.4%,
    color-mix(in srgb, var(--l2) 12%, transparent) 58.4% 81.7%,
    color-mix(in srgb, var(--l3) 12%, transparent) 81.7% 100%);
}
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px; }
.bar-fill.TEC { background: var(--tec); } .bar-fill.EVA { background: var(--eva); } .bar-fill.PRA { background: var(--pra); } .bar-fill.ETH { background: var(--eth); } .bar-fill.DAT { background: var(--dat); } .bar-fill.ROLE { background: var(--navy); }
.bar-score { font-size: .85rem; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .bar-row { grid-template-columns: 1fr 3.5rem; row-gap: .15rem; }
  .bar-label { grid-column: 1 / -1; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.print-only { display: none; }
.level-pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--on-accent); }
.level-pill.L1B, .level-pill.L1A { background: var(--l1); } .level-pill.L2 { background: var(--l2); } .level-pill.L3 { background: var(--l3); }
.finding { border-inline-start: 4px solid var(--teal); padding: .5rem 1rem; margin-block: .75rem; background: var(--card-bg); border-radius: 0 8px 8px 0; }
.finding.gaps, .finding.datFlag { border-color: var(--warn); } .finding.selfCheck { border-color: var(--gold); }
.finding .caveat-note { color: var(--warn); font-size: .8rem; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-block: .5rem; }
.tabs button { font: inherit; font-size: .85rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--dark); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--teal); color: var(--on-accent); border-color: var(--teal); }
details.next { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .9rem; margin-block: .5rem; background: var(--card-bg); }
details.next summary { cursor: pointer; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
details.next summary:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); border-radius: 4px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { text-align: start; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.status { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.status.priority { color: var(--danger); } .status.complete, .status.develop, .status.full { color: var(--warn); } .status.review, .status.parallel, .status.accelerated { color: var(--teal); } .status.testout, .status.maintain, .status.skip, .status.direct, .status.eligible, .status.thresholdsMet { color: var(--ok); } .status.withheld, .status.thresholdsNotMet { color: var(--danger); }
.status.start { color: var(--teal); } .status.info { color: var(--mid); }
.ladder { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.ladder li { flex: 1 1 140px; background: var(--light); border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; } .ladder b { display: block; }
.banner { background: var(--light); border: 1px solid var(--border); padding: .75rem 1rem; border-radius: 10px; margin-block: 1rem; }
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--body-bg); padding: .5rem 1rem; border-radius: 8px; font-size: .9rem; }
@media print {
  @page { margin: 15mm }
  :root, [data-theme="dark"] {
    --dark: #000; --mid: #444; --light: #f0f0f0; --card-bg: #fff; --body-bg: #fff; --border: #999;
    --tec: #2563eb; --eva: #7c3aed; --pra: #16803C; --eth: #db2777; --dat: #ea580c;
  }
  .site-header, .btn, .btn-row, .no-print, .skip-link, .toast { display: none !important; }
  details.next > .tabs { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; } .card, .finding, details.next { box-shadow: none; break-inside: avoid; }
  details.next { display: block; } details.next > *:not(summary) { display: block !important; }
  main { padding: 0; } a { color: inherit; text-decoration: none; }
}