/* Shared styles for the VHD notes site — same tokens and look as the PH notes site. */
:root {
  color-scheme: light;
  --surface-1:#fcfcfb; --plane:#f9f9f7;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
  --series-1:#2a78d6; --series-2:#eb6834;
  --status-warning:#fab219;
  /* guideline lineage identity */
  --us:#b3245f; --eu:#c98500; --kr:#13757a;
  /* class-of-recommendation convention (both guideline bodies run green -> yellow -> orange -> red) */
  --c1:#1c7c4a; --c2a:#f2b134; --c2b:#e8743b; --c3:#c0392b; --cnone:#e6eaee; --ckr:#d5ecec;
  --c1-ink:#ffffff; --c2a-ink:#1b2733; --c2b-ink:#1b2733; --c3-ink:#ffffff; --cnone-ink:#1b2733; --ckr-ink:#1b2733;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:#1a1a19; --plane:#0d0d0d;
    --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#898781;
    --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
    --series-1:#3987e5; --series-2:#d95926; --status-warning:#e3a008;
    --us:#e66b9a; --eu:#e3a33a; --kr:#3fb3b8;
    --cnone:#33373b; --cnone-ink:#e6e6e2; --ckr:#1d4b4d; --ckr-ink:#e6f4f4;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:#1a1a19; --plane:#0d0d0d;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#898781;
  --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
  --series-1:#3987e5; --series-2:#d95926; --status-warning:#e3a008;
  --us:#e66b9a; --eu:#e3a33a; --kr:#3fb3b8;
  --cnone:#33373b; --cnone-ink:#e6e6e2; --ckr:#1d4b4d; --ckr-ink:#e6f4f4;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  background:var(--plane); color:var(--text-primary); line-height:1.6;
}
a { color:var(--series-1); }

header.top {
  position:sticky; top:0; z-index:20;
  background:var(--surface-1); border-bottom:1px solid var(--border);
  padding:10px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
header.top .home { font-size:13px; text-decoration:none; color:var(--text-secondary); white-space:nowrap; }
header.top .home:hover { color:var(--text-primary); }
header.top h1 { font-size:15px; margin:0; font-weight:600; white-space:nowrap; }
nav.tabs { display:flex; gap:4px; flex-wrap:wrap; margin-left:auto; }
nav.tabs a { text-decoration:none; color:var(--text-secondary); font-size:13px; padding:7px 10px; border-radius:6px; }
nav.tabs a:hover { background:var(--grid); color:var(--text-primary); }
nav.tabs a[aria-current="page"] { color:var(--text-primary); font-weight:600; background:var(--grid); }
#themeToggle { border:1px solid var(--border); background:var(--surface-1); color:var(--text-primary);
  border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer; }
#themeToggle:hover { background:var(--grid); }
header.top .spacer { margin-left:auto; }

main { max-width:980px; margin:0 auto; padding:28px 20px 80px; }
main.narrow { max-width:840px; padding-top:40px; }
h2.page { font-size:26px; margin:0 0 6px; letter-spacing:-0.02em; }
.lede { color:var(--text-secondary); font-size:14.5px; margin:0 0 28px; }
.disclaimer { font-size:12px; color:var(--text-muted); background:var(--surface-1);
  border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin-bottom:28px; }

section { margin-bottom:52px; scroll-margin-top:64px; }
section > h2 { font-size:20px; margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--grid); }
section .subtitle { color:var(--text-secondary); font-size:13px; margin:6px 0 18px; }
h3 { font-size:15px; margin:22px 0 8px; }

.card { background:var(--surface-1); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:14px; }

/* hub cards */
.cards { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
a.tile, div.tile { display:block; text-decoration:none; color:inherit; background:var(--surface-1);
  border:1px solid var(--border); border-radius:10px; padding:18px 20px; transition:border-color .12s, transform .12s; }
a.tile:hover { border-color:var(--series-1); transform:translateY(-1px); }
.tile .k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.tile h3 { font-size:17px; margin:4px 0 6px; }
.tile p { font-size:13.5px; color:var(--text-secondary); margin:0 0 10px; }
.tile .meta { font-size:12px; color:var(--text-muted); }
div.tile.soon { opacity:.55; border-style:dashed; }
.category { margin-bottom:40px; }
.category-head { display:flex; align-items:baseline; gap:12px; margin:0 0 14px; }
.category-head h3 { font-size:20px; margin:0; }
.category-head .count { font-size:12px; color:var(--text-muted); }

.note { font-size:12.5px; color:var(--text-secondary); border-left:3px solid var(--grid); padding:8px 0 8px 14px; margin:20px 0 0; }
footer { color:var(--text-muted); font-size:12px; border-top:1px solid var(--border); margin-top:34px; padding-top:14px; }

/* KPI tiles */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.kpi { background:var(--surface-1); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.kpi .label { font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.kpi .value { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.kpi .note2 { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--grid); vertical-align:top; }
th { color:var(--text-secondary); font-weight:600; font-size:12px; }
tbody tr:hover { background:var(--grid); }
table.grid td, table.grid th { border:1px solid var(--grid); }
td.c, th.c { text-align:center; }

/* class-of-recommendation cells and chips */
.cls-I   { background:var(--c1);  color:var(--c1-ink); }
.cls-IIa { background:var(--c2a); color:var(--c2a-ink); }
.cls-IIb { background:var(--c2b); color:var(--c2b-ink); }
.cls-III { background:var(--c3);  color:var(--c3-ink); }
.cls-none{ background:var(--cnone); color:var(--cnone-ink); }
.cls-KR  { background:var(--ckr); color:var(--ckr-ink); }
table.classed tbody tr:hover { background:transparent; }
table.classed td[class^="cls-"] { border:2px solid var(--surface-1); }
.chip { display:inline-block; font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:5px; white-space:nowrap; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-secondary); margin:8px 0 12px; }
.legend .key { display:inline-flex; align-items:center; gap:6px; }
.legend .sw { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* lineage labels */
.lin { font-weight:700; white-space:nowrap; }
.lin.us { color:var(--us); } .lin.eu { color:var(--eu); } .lin.kr { color:var(--kr); }

/* figures */
figure.fig { margin:0 0 14px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px; }
figure.fig img { width:100%; height:auto; display:block; }
figure.fig figcaption { font-size:12px; color:#52514e; padding:8px 4px 2px; }

/* decision tool */
.tool { background:var(--surface-1); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 18px; }
.field label, .field .lab { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:5px; font-weight:600; }
.field select, .field input[type=number] { width:100%; padding:7px 9px; border-radius:6px; border:1px solid var(--border);
  background:var(--plane); color:var(--text-primary); font-size:13px; }
.field .hint { font-size:11px; color:var(--text-muted); margin-top:3px; }
.checks { display:flex; flex-direction:column; gap:5px; font-size:13px; }
.checks label { font-weight:400; color:var(--text-primary); display:flex; gap:7px; align-items:flex-start; margin:0; }
fieldset { border:1px solid var(--grid); border-radius:8px; padding:10px 14px 12px; margin:14px 0 0; }
fieldset legend { font-size:12px; font-weight:700; color:var(--text-secondary); padding:0 6px; }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; flex-wrap:wrap; }
.seg button { border:none; background:var(--plane); color:var(--text-secondary); font-size:13px; padding:7px 12px; cursor:pointer; }
.seg button + button { border-left:1px solid var(--border); }
.seg button[aria-pressed="true"] { background:var(--series-1); color:#fff; }
.cond[hidden] { display:none !important; }

.verdicts { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; margin-top:18px; }
.verdict { border:1px solid var(--border); border-radius:10px; background:var(--plane); overflow:hidden; display:flex; flex-direction:column; }
.verdict .vh { padding:9px 14px; font-size:13px; font-weight:700; color:#fff; display:flex; justify-content:space-between; gap:8px; }
.verdict.us .vh { background:var(--us); } .verdict.eu .vh { background:var(--eu); } .verdict.kr .vh { background:var(--kr); }
.verdict .vh .ed { font-weight:400; opacity:.9; font-size:12px; }
.verdict .vb { padding:12px 14px; font-size:13px; flex:1; }
.verdict .rec { display:flex; gap:8px; align-items:flex-start; margin-bottom:9px; }
.verdict .rec .chip { margin-top:2px; }
.verdict .rec .txt b { font-weight:700; }
.verdict .why { font-size:11.5px; color:var(--text-muted); display:block; margin-top:2px; }
.verdict .step { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:10px 0 5px; }
.verdict .step:first-child { margin-top:0; }
.diffbox { margin-top:12px; font-size:12.5px; border-left:3px solid var(--status-warning); padding:6px 0 6px 12px; color:var(--text-secondary); }

details.more summary { cursor:pointer; color:var(--series-1); font-size:12.5px; margin-top:8px; }
.src { font-size:11.5px; color:var(--text-muted); }