/* ==========================================================================
   components.css
   Reusable pieces used across every view: chips, verdict panels, tables, cards, cross-reference bars, figures.
   ========================================================================== */

/* ---------- masthead ---------- */
header.mast{padding:44px 0 24px; border-bottom:2px solid var(--ink)}

/* ---------- signature: weight gauge ---------- */
.gauge{margin-top:26px; border:1px solid var(--rule); background:var(--paper); padding:20px 20px 16px}

/* ---------- nav ---------- */
nav.tabs{position:sticky; top:0; z-index:20; background:var(--field); border-bottom:1px solid var(--rule); margin-top:0; padding:9px 0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}

/* ---------- panels ---------- */


/* chips */
.chip{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:2.5px 7px; border-radius:2px; border:1px solid; white-space:nowrap; vertical-align:middle}

.chip.t{color:var(--trap); border-color:var(--trap); background:var(--trap-w)}

.chip.r{color:var(--root); border-color:var(--root); background:var(--root-w)}

.chip.f{color:var(--focus); border-color:var(--focus); background:var(--focus-w)}

.chip.n{color:var(--ink2); border-color:var(--rule2); background:#EFF3F7}

/* verdict boxes */
.verdict{border:1px solid var(--rule); border-left:4px solid var(--root); background:var(--root-w); padding:12px 14px; margin:12px 0}

.verdict.no{border-left-color:var(--trap); background:var(--trap-w)}

.verdict.fx{border-left-color:var(--focus); background:var(--focus-w)}

.verdict b{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:4px}

/* tables */
.tbl{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px}

.tbl th,.tbl td{border:1px solid var(--rule); padding:8px 10px; text-align:left; vertical-align:top}

.tbl th{background:#EDF1F5; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}

.tbl td:first-child{font-family:var(--mono); font-size:13px}

/* two-col */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:18px}

@media(max-width:760px){.cols{grid-template-columns:1fr}}

.card{border:1px solid var(--rule); padding:14px 16px; background:#FDFDFB}

.card h4{margin-top:0}

/* symptom -> root map */
.map{border:1px solid var(--rule); margin:14px 0}

.map .row{display:grid; grid-template-columns:1fr 24px 1fr; gap:0; border-bottom:1px solid var(--rule)}

.map .row:last-child{border-bottom:none}

.map .s,.map .r{padding:10px 13px; font-size:14px}

.map .s{background:var(--trap-w)}

.map .r{background:var(--root-w)}

.map .ar{display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:var(--ink3); background:#F4F7FA}

.map .hd{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); background:#EDF1F5; padding:6px 13px}

/* ---------- quiz ---------- */
.qbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}

button.act{font-family:var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; padding:10px 15px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; border-radius:2px}

button.act.ghost{background:transparent; color:var(--ink)}

button.act:hover{opacity:.86}

button.act:disabled{opacity:.4; cursor:not-allowed}

select,input[type=number]{font-family:var(--mono); font-size:12px; padding:9px 10px; border:1px solid var(--rule2); background:#fff; color:var(--ink); border-radius:2px}

/* flashcards */
.fc{border:1px solid var(--ink); background:var(--paper); padding:clamp(20px,4vw,38px); min-height:230px; display:flex; flex-direction:column; justify-content:center; cursor:pointer; position:relative}

/* scenario brief */
.brief{border:1px solid var(--ink); border-left:5px solid var(--ink); background:#F4F7FA; padding:15px 18px; margin:0 0 18px}

.brief .bl{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-bottom:8px}

.brief p{margin:0 0 8px; font-size:15.5px; line-height:1.6}

.brief p.pd{margin:0; font-family:var(--mono); font-size:12px; color:var(--ink2); border-top:1px dashed var(--rule); padding-top:8px}

.workbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; padding-top:14px; border-top:2px solid var(--ink)}

.workbar .wl{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}

button.act.sm{padding:8px 13px; font-size:11px}

.official{font-size:13.5px; color:var(--ink2); margin-top:10px}

/* confidence marker */
button.conf{font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; padding:3px 8px; margin-left:12px; border:1px solid var(--rule2); background:transparent; color:var(--ink3); border-radius:2px; cursor:pointer; vertical-align:middle; white-space:nowrap}

button.conf:hover{border-color:var(--ink); color:var(--ink)}

button.conf.on{border-color:var(--root); color:var(--root); background:var(--root-w)}

.kbd-hint{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink3); margin-left:auto}

@media(max-width:700px){.kbd-hint{display:none}}

#themebtn{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border:1px solid var(--rule2); background:transparent; color:var(--ink2); border-radius:2px; cursor:pointer; white-space:nowrap}

#themebtn:hover{border-color:var(--ink); color:var(--ink)}

/* dark theme */
html[data-theme="dark"]{
  --ink:#E6EDF3; --ink2:#A9B8C6; --ink3:#7E8FA0;
  --paper:#141B22; --field:#0E141A; --field2:#1B242D;
  --rule:#2A3742; --rule2:#3A4A57;
  --root:#4FC3AE; --trap:#E2789B; --focus:#DFAE4A; --link:#77BCE8;
  --root-w:#12302B; --trap-w:#331A24; --focus-w:#32280F;
}

/* print: a usable paper cheat sheet */


.mantra{margin:0 clamp(16px,2.5vw,26px) 22px; background:var(--ink); color:#EAF1F6; padding:16px 18px; border-radius:3px}

.mantra b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#8FB3C4; margin-bottom:6px}

.mantra p{margin:0; font-size:15px; line-height:1.55; font-style:italic}

.xr{background:none; border:none; padding:0; font:inherit; color:var(--link); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px}

.xr:hover{text-decoration-style:solid}

.xrbar{margin:14px 0 0; padding-top:11px; border-top:1px dashed var(--rule); font-family:var(--mono); font-size:11.5px; color:var(--ink3); display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.xrbar .lbl{letter-spacing:.1em; text-transform:uppercase}

.ext{font-family:var(--mono); font-size:12.5px}

.ext a{word-break:break-all}

.newbadge{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--link); padding:2px 6px; border-radius:2px; vertical-align:middle; margin-left:6px}

figure.dg{margin:18px 0; border:1px solid var(--rule); background:var(--paper); padding:14px 16px}

figure.dg svg{width:100%; height:auto; display:block}

figure.dg figcaption{font-size:13px; color:var(--ink2); margin-top:11px; padding-top:9px; border-top:1px dashed var(--rule)}

figure.dg figcaption b{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); display:block; margin-bottom:4px}

.dg text{font-family:var(--mono); font-size:11px; fill:var(--ink)}

.dg text.sm{font-size:9.5px; fill:var(--ink3)}

.dg text.lb{font-size:10px; fill:var(--ink2)}

.dg rect.box{fill:var(--paper); stroke:var(--ink); stroke-width:1.5}

.dg rect.good{fill:var(--root-w); stroke:var(--root); stroke-width:1.5}

.dg rect.bad{fill:var(--trap-w); stroke:var(--trap); stroke-width:1.5}

.dg rect.warn{fill:var(--focus-w); stroke:var(--focus); stroke-width:1.5}

.dg path,.dg line{stroke:var(--ink2); stroke-width:1.5; fill:none}

.dg path.dash,.dg line.dash{stroke-dasharray:4 3; stroke:var(--ink3)}

.dg path.no,.dg line.no{stroke:var(--trap)}

.dg path.yes,.dg line.yes{stroke:var(--root)}