/* ============================================================
   Pneumonia · Master Discriminator (ported from the approved
   prototype pneumonia_master_discriminator.html). Self-contained widget.
   ALL selectors are scoped under .pmd and the design tokens live on
   .pmd (NOT :root) so nothing leaks to the page and no page style
   reaches in — the prototype's generic class names (.card/.chip/.btn/
   .grid/.row/.badge/.score/.count/.bar/.mode…) are all prefixed with
   `.pmd `. The tool's data / modes / logic / captions / scoring are
   unchanged (see pneumonia-discriminator.js). No browser storage.
   ============================================================ */
.pmd {
  --ink:#111111; --muted:#5b6470; --line:#e3e6ea; --panel:#f7f8fa; --bg:#fff;
  --typ:#e11d48; --atyp:#0d9488; --vir:#7c3aed;
  --ok:#16a34a; --bad:#dc2626; --miss:#f59e0b;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--font);color:var(--ink);max-width:860px;margin:0 auto;padding:4px;
}
.pmd *{box-sizing:border-box}
.pmd h2{font-size:19px;margin:0 0 2px}
.pmd .lead{font-size:13px;color:var(--muted);margin:0 0 12px}
.pmd .modes{display:flex;gap:6px;margin-bottom:14px}
.pmd .mode{flex:1;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:650;
  font-size:14px;padding:9px;border-radius:11px;cursor:pointer;transition:.15s}
.pmd .mode[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pmd .groups{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.pmd .grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pmd .glabel{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);
  text-transform:uppercase;width:80px;flex-shrink:0}
.pmd .chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;
  font-weight:600;padding:5px 11px;border-radius:20px;cursor:pointer;transition:.14s;white-space:nowrap}
.pmd .chip:hover{border-color:#c3c9d1}
.pmd .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pmd .chip.lit{background:var(--ink);color:#fff;border-color:var(--ink)}
.pmd .chip.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.pmd .chip.bad{background:var(--bad);color:#fff;border-color:var(--bad)}
.pmd .chip.miss{background:#fff;color:var(--miss);border-color:var(--miss);border-style:dashed}
.pmd .chip.mute{opacity:.3}
.pmd .display .chip{cursor:default}
.pmd .bar{display:flex;align-items:center;gap:12px;margin:14px 0 10px;font-size:13.5px}
.pmd .count{font-weight:700}
.pmd .clear{margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-weight:600;font-size:13px;padding:7px 14px;border-radius:9px;cursor:pointer}
.pmd .clear:hover{background:var(--panel)}
.pmd .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pmd .card{border:1px solid var(--line);border-radius:13px;padding:12px 13px;background:var(--bg);transition:.18s;cursor:default}
.pmd .clickcards .card{cursor:pointer}
.pmd .card.dim{opacity:.22;filter:grayscale(.5)}
.pmd .card.hit{border-width:2px;box-shadow:0 3px 14px rgba(0,0,0,.07)}
.pmd .card.hit.typ{border-color:var(--typ)} .pmd .card.hit.atyp{border-color:var(--atyp)} .pmd .card.hit.vir{border-color:var(--vir)}
.pmd .card.ok{border:2px solid var(--ok)} .pmd .card.bad{border:2px solid var(--bad)}
.pmd .cname{font-weight:700;font-size:14px;margin-bottom:6px;line-height:1.2}
.pmd .badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:2px 7px;border-radius:6px;color:#fff;margin-bottom:8px}
.pmd .badge.typ{background:var(--typ)} .pmd .badge.atyp{background:var(--atyp)} .pmd .badge.vir{background:var(--vir)}
.pmd .row{font-size:12px;line-height:1.5;color:#222}
.pmd .row b{color:var(--muted);font-weight:700}
.pmd .card.solo{outline:2px dashed;outline-offset:3px;border-radius:14px}
.pmd .card.solo.typ{outline-color:var(--typ)} .pmd .card.solo.atyp{outline-color:var(--atyp)} .pmd .card.solo.vir{outline-color:var(--vir)}
.pmd .quizbar{display:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:14px}
.pmd .qprompt{font-size:15px;line-height:1.5}
.pmd .qprompt .big{font-weight:750;font-size:16px}
.pmd .qclues{margin-top:6px;font-size:13.5px;color:#222}
.pmd .qctrl{display:flex;align-items:center;gap:10px;margin-top:11px}
.pmd .btn{border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:650;font-size:13.5px;
  padding:8px 16px;border-radius:9px;cursor:pointer}
.pmd .btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.pmd .btn:disabled{opacity:.4;cursor:default}
.pmd .score{margin-left:auto;font-weight:700;font-size:13.5px;color:var(--muted)}
.pmd .fb{margin-top:8px;font-size:13.5px;font-weight:650;min-height:18px}
.pmd .fb.good{color:var(--ok)} .pmd .fb.wrong{color:var(--bad)}
.pmd .hint{font-size:12.5px;color:var(--muted);margin:2px 0 10px}
</content>
</invoke>