/* ============================================================================
   BioMedRx Biomagnetism — Course stylesheet
============================================================================ */
:root{
  --teal:#0f7c86; --teal-d:#0b5960; --teal-l:#e6f3f4;
  --ink:#1f2a2e; --muted:#5c6b70; --line:#dce4e6; --bg:#f7fafa; --card:#ffffff;
  --amber:#c8791a; --amber-l:#fbf1e2;
  --p1:#1f6fb2;  /* pole 1 marker */
  --p2:#c0392b;  /* pole 2 marker */
  --maxw:1120px; --radius:12px; --shadow:0 1px 3px rgba(20,50,55,.08),0 6px 22px rgba(20,50,55,.06);
  /* category colors */
  --c-virus:#b0413e; --c-bacteria:#2f6f9c; --c-fungus:#7d5aa6; --c-parasite:#3f8f5b;
  --c-dysfunction:#c8791a; --c-emotional:#c65a86; --c-special:#0f7c86; --c-reservoir:#4b6b7a;
  --c-functional:#6a8a3a; --c-other:#7a8a90;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.62;font-size:16.5px}
h1,h2,h3,h4{line-height:1.25;color:var(--teal-d);font-weight:700}
h1{font-size:2rem;margin:.2em 0 .5em}
h2{font-size:1.5rem;margin:1.8em 0 .5em;padding-bottom:.25em;border-bottom:2px solid var(--teal-l)}
h3{font-size:1.18rem;margin:1.4em 0 .35em;color:var(--teal)}
h4{font-size:1.02rem;margin:1.1em 0 .3em;color:var(--ink)}
p{margin:.55em 0}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
code{background:#eef3f4;padding:.1em .35em;border-radius:4px;font-size:.9em}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(100deg,var(--teal-d),var(--teal));
  color:#fff;box-shadow:0 2px 10px rgba(11,89,96,.25)}
.topbar .wrap{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:10px 18px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:1.05rem}
.brand .logo{width:34px;height:34px;flex:0 0 auto}
.brand small{display:block;font-weight:400;font-size:.72rem;opacity:.85;letter-spacing:.03em}
.topnav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.topnav a{color:#eafafc;padding:6px 11px;border-radius:7px;font-size:.92rem;font-weight:500}
.topnav a:hover{background:rgba(255,255,255,.16);text-decoration:none}
.topnav a.active{background:rgba(255,255,255,.22)}
.menu-btn{display:none;margin-left:auto;background:rgba(255,255,255,.15);border:0;color:#fff;
  font-size:1.3rem;border-radius:8px;padding:2px 11px;cursor:pointer}

/* ---- layout ---- */
.layout{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:250px 1fr;gap:30px;
  padding:26px 18px 60px}
.sidebar{position:sticky;top:70px;align-self:start;max-height:calc(100vh - 90px);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px}
.sidebar h5{margin:.6em 0 .35em;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sidebar a{display:block;padding:6px 10px;border-radius:7px;color:var(--ink);font-size:.93rem}
.sidebar a:hover{background:var(--teal-l);text-decoration:none}
.sidebar a.active{background:var(--teal);color:#fff;font-weight:600}
.sidebar ol{margin:0;padding-left:0;list-style:none;counter-reset:mod}
.content{min-width:0}
.content.full{grid-column:1 / -1}
main{max-width:820px}
.page-wide main{max-width:100%}

/* ---- hero ---- */
.hero{background:linear-gradient(120deg,#0b5960,#0f7c86 60%,#14a0ab);color:#fff;border-radius:16px;
  padding:42px 38px;margin-bottom:8px;box-shadow:var(--shadow)}
.hero h1{color:#fff;font-size:2.3rem;margin-top:0}
.hero p{font-size:1.1rem;opacity:.95;max-width:70ch}
.hero .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;opacity:.85;font-weight:600}
.btn{display:inline-block;background:#fff;color:var(--teal-d);font-weight:600;padding:11px 20px;
  border-radius:9px;margin:16px 10px 0 0;box-shadow:var(--shadow)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4)}

/* ---- cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:18px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
a.card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(20,50,55,.13);text-decoration:none}
.card .num{font-size:.72rem;color:var(--teal);font-weight:700;letter-spacing:.08em}
.card h3{margin:.25em 0 .3em;color:var(--teal-d)}
.card p{color:var(--muted);font-size:.92rem;margin:0}
.stat{font-size:2rem;font-weight:800;color:var(--teal);line-height:1}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:16px 0}
.statgrid .card{text-align:center}

/* ---- callouts ---- */
.callout{border-left:5px solid var(--teal);background:var(--teal-l);border-radius:8px;padding:14px 18px;margin:18px 0}
.callout.warn{border-color:var(--amber);background:var(--amber-l)}
.callout.danger{border-color:#b0413e;background:#faeceb}
.callout h4{margin:.1em 0 .3em}
.callout p:last-child{margin-bottom:0}

/* ---- tables ---- */
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:.94rem;background:var(--card)}
.tbl th,.tbl td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--teal-l);color:var(--teal-d);font-weight:600;position:sticky;top:0}
.tbl tr:hover td{background:#f2f8f8}

/* ---- badges ---- */
.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:20px;
  color:#fff;white-space:nowrap;line-height:1.5}
.b-virus{background:var(--c-virus)} .b-bacteria{background:var(--c-bacteria)}
.b-fungus{background:var(--c-fungus)} .b-parasite{background:var(--c-parasite)}
.b-dysfunction{background:var(--c-dysfunction)} .b-emotional{background:var(--c-emotional)}
.b-special{background:var(--c-special)} .b-reservoir{background:var(--c-reservoir)}
.b-functional{background:var(--c-functional)} .b-other{background:var(--c-other)}

/* ---- controls (search/filter) ---- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0;
  position:sticky;top:60px;z-index:20;background:var(--bg);padding:10px 0}
.controls input[type=search],.controls select{padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font-size:.95rem;background:#fff;min-width:0}
.controls input[type=search]{flex:1 1 260px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;font-size:.82rem;
  cursor:pointer;color:var(--muted);user-select:none}
.chip.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.count-note{color:var(--muted);font-size:.88rem;margin:4px 0 10px}

/* ---- pair cards ---- */
.pairgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pair{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.pair .hd{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.pair .hd h3{margin:0;font-size:1.02rem}
.pair .es{color:var(--muted);font-size:.8rem;font-style:italic}
.pair .body{padding:8px 14px 14px;font-size:.9rem}
.pair .poles{display:flex;gap:10px;margin:6px 0}
.pole{flex:1;background:var(--teal-l);border-radius:8px;padding:7px 9px;font-size:.82rem}
.pole b{display:block;color:var(--teal-d)}
.pole.p1{border-left:4px solid var(--p1)} .pole.p2{border-left:4px solid var(--p2)}
.pair .ind{color:var(--ink);margin:6px 0}
.pair .meta{color:var(--muted);font-size:.82rem;margin-top:6px}
details.more{margin-top:6px}
details.more summary{cursor:pointer;color:var(--teal);font-size:.85rem}

/* ---- body map svg ---- */
.bm-figure{width:100%;height:auto;background:#fbfdfd;border:1px solid var(--line);border-radius:8px}
.bm-bg{fill:#fbfdfd}
.bm-body{fill:#dfeaec;stroke:#b7c9cc;stroke-width:1}
.bm-caption{fill:#8aa0a4;font-size:11px;font-weight:600;text-anchor:middle;font-family:inherit}
.bm-link{stroke:#9fb4b8;stroke-width:1.4;stroke-dasharray:3 3}
.bm-marker circle{stroke:#fff;stroke-width:1.6}
.bm-marker text{fill:#fff;font-size:10px;font-weight:700;text-anchor:middle;font-family:inherit}
.bm-p1 circle{fill:var(--p1)} .bm-p2 circle{fill:var(--p2)}
.bm-legend{display:flex;gap:16px;font-size:.82rem;color:var(--muted);margin:8px 0;flex-wrap:wrap}
.bm-legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:13px;height:13px;border-radius:50%;display:inline-block}
.dot.p1{background:var(--p1)} .dot.p2{background:var(--p2)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(15,40,44,.55);display:none;align-items:flex-start;
  justify-content:center;z-index:80;padding:30px 14px;overflow:auto}
.modal.open{display:flex}
.modal .box{background:#fff;border-radius:14px;max-width:820px;width:100%;box-shadow:var(--shadow)}
.modal .mh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal .mh h2{margin:0;border:0;font-size:1.3rem}
.modal .mb{padding:18px 20px;display:grid;grid-template-columns:300px 1fr;gap:20px}
.modal .close{background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--muted);line-height:1}
.pager{display:flex;justify-content:space-between;margin-top:22px;gap:10px}
.pager a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;flex:1;box-shadow:var(--shadow)}
.pager a:hover{text-decoration:none;border-color:var(--teal)}
.pager .lbl{font-size:.75rem;color:var(--muted)}
.pager .ttl{color:var(--teal-d);font-weight:600}
.pager .next{text-align:right}

.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.lead{font-size:1.12rem;color:var(--muted)}
.obj{background:var(--teal-l);border-radius:10px;padding:12px 18px;margin:14px 0}
.obj b{color:var(--teal-d)}
.footer{background:#0b3f44;color:#cfe6e8;margin-top:40px}
.footer .wrap{max-width:var(--maxw);margin:0 auto;padding:26px 18px;font-size:.9rem}
.footer a{color:#8fd7dd}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.kbd{font-size:.8rem;color:var(--muted)}
mark{background:#fdeeb8;padding:0 2px}
.loading{color:var(--muted);padding:30px;text-align:center}
.section-num{color:var(--teal);font-weight:700}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;max-height:none;order:2}
  .modal .mb{grid-template-columns:1fr}
  .topnav{display:none;position:absolute;top:100%;right:0;left:0;background:var(--teal-d);flex-direction:column;padding:8px}
  .topnav.show{display:flex}
  .menu-btn{display:block}
  .brand{margin-right:auto}
}
@media print{
  .topbar,.sidebar,.controls,.footer,.menu-btn,.pager{display:none!important}
  .layout{display:block;padding:0}body{background:#fff;font-size:11pt}
  .pair,.card{break-inside:avoid;box-shadow:none}
  a{color:var(--ink)}
}