:root{
  /* Clinical navy and a fresh green on white: navy carries headings and the
     main actions, green marks labels, progress and the Start button. */
  --bg:#ffffff; --fg:#253650; --text:#3a4455; --muted:#667085; --rule:#e3e8ef;
  --card:#fff; --accent:#253650; --accent-soft:#eef2f8;
  --brand:#64ab41; --brand-ink:#4c8a2f; --brand-soft:#eff7ea; --band:#f2f8ee; --navy:#253650;
  --ok:#2f7a4a; --ok-soft:#e5f3ea; --warn:#8a6d1f; --warn-soft:#f7f0db;
  --clin:#2f5d8a; --clin-soft:#eaf1f8; --hot:#b4542a; --hot-soft:#fbeee6;
  --shadow:0 1px 2px rgba(37,54,80,.05), 0 8px 24px rgba(37,54,80,.07);
  --shadow-lg:0 2px 6px rgba(37,54,80,.06), 0 24px 60px rgba(37,54,80,.12);
  --r:14px;
  --serif:'Noto Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Noto Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Noto Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --code:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1726; --fg:#eef2f8; --text:#d3dae6; --muted:#9aa6b8; --rule:#253249;
  --card:#152036; --accent:#9fd07f; --accent-soft:#1d2d24;
  --brand:#8cc96a; --brand-ink:#9fd07f; --brand-soft:#1b2a22; --band:#121d30; --navy:#0b1220;
  --ok:#7fc0a0; --ok-soft:#1e2a24; --warn:#d8bb6a; --warn-soft:#2b2519;
  --clin:#8fb6de; --clin-soft:#1b2430; --hot:#e8a07a; --hot-soft:#2e2019;
  --shadow:none; --shadow-lg:0 20px 50px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --bg:#0f1726; --fg:#eef2f8; --text:#d3dae6; --muted:#9aa6b8; --rule:#253249;
  --card:#152036; --accent:#9fd07f; --accent-soft:#1d2d24;
  --brand:#8cc96a; --brand-ink:#9fd07f; --brand-soft:#1b2a22; --band:#121d30; --navy:#0b1220;
  --ok:#7fc0a0; --ok-soft:#1e2a24; --warn:#d8bb6a; --warn-soft:#2b2519;
  --clin:#8fb6de; --clin-soft:#1b2430; --hot:#e8a07a; --hot-soft:#2e2019;
  --shadow:none; --shadow-lg:0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  line-height:1.6;-webkit-text-size-adjust:100%;overflow-x:clip}
h1,h2,h3{color:var(--fg)}
a{color:inherit}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;display:flex;gap:14px;align-items:center;
  padding:12px 24px;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);flex-wrap:wrap;
  box-shadow:0 1px 0 rgba(37,54,80,.02),0 4px 16px rgba(37,54,80,.04)}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:21px;font-weight:700;
  text-decoration:none;letter-spacing:-.02em;white-space:nowrap;color:var(--fg)}
.brand-mark{width:26px;height:26px;border-radius:7px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='15' fill='%23253650'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M16 13h15a19 19 0 0 1 0 38H16zM24 21v22h7a11 11 0 0 0 0-22z'/%3E%3Ccircle cx='31' cy='32' r='5.5' fill='%237cc254'/%3E%3C/svg%3E") center/100% no-repeat}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-mark{box-shadow:0 0 0 1px #34476a}}
:root[data-theme="dark"] .brand-mark{box-shadow:0 0 0 1px #34476a}
header nav{display:flex;gap:2px}
header nav a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--fg);
  padding:7px 11px;border-radius:8px}
header nav a:hover{background:var(--accent-soft)}
header nav a.on{color:var(--brand-ink);box-shadow:inset 0 -2px 0 var(--brand);border-radius:0}
@media(max-width:600px){header nav{flex-wrap:wrap;min-width:0}header nav a{padding:6px 9px}}
.search-wrap{position:relative;flex:1;min-width:180px;max-width:460px;margin-left:auto}
#q{width:100%;padding:9px 14px;border:1px solid var(--rule);border-radius:10px;
  background:var(--card);color:var(--fg);font:inherit;font-size:14px}
#q:focus{outline:2px solid var(--brand);outline-offset:-1px}
#results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
  border:1px solid var(--rule);border-radius:11px;box-shadow:var(--shadow);
  max-height:min(64vh,460px);overflow:auto;z-index:60}
#results a{display:block;padding:9px 13px;text-decoration:none;
  border-bottom:1px solid var(--rule)}
#results a:last-child{border-bottom:0}
#results a:hover,#results a.sel{background:var(--accent-soft)}
#results .rt{font-size:14px;font-weight:500}
#results .rm{font-size:12px;color:var(--muted);font-family:var(--mono)}
#results .empty{padding:14px;color:var(--muted);font-size:14px}
/* Round icon buttons: search (phones), theme, account. */
.iconbtn{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--rule);background:var(--card);color:var(--fg);cursor:pointer;padding:0}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* The theme button shows what a click switches to: a moon in light, a sun in dark. */
.theme-toggle .i-sun,.theme-toggle .t-light{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun,:root[data-theme="dark"] .theme-toggle .t-light{display:inline}
:root[data-theme="dark"] .theme-toggle .i-moon,:root[data-theme="dark"] .theme-toggle .t-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun,:root:not([data-theme="light"]) .theme-toggle .t-light{display:inline}
  :root:not([data-theme="light"]) .theme-toggle .i-moon,:root:not([data-theme="light"]) .theme-toggle .t-dark{display:none}
}
#searchbtn{display:none}
/* Until the search box fits beside the menu, it is a button that opens it under the header. */
@media(max-width:1000px){
  header{flex-wrap:nowrap}
  header nav{flex:1}
  #searchbtn{display:inline-grid}
  header .search-wrap{display:none}
  header.searching{flex-wrap:wrap}
  header.searching .search-wrap{display:block;flex:1 1 100%;order:3;max-width:none;margin:0}
}
.acct{position:relative}
/* Drop-down menus: the account menu, and the phone's More sheet. */
.menu{background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:6px;min-width:210px}
.menu[hidden]{display:none}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;border:0;background:none;
  text-decoration:none;color:var(--fg);font:inherit;font-size:15px;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--accent-soft)}
.menu hr{border:0;border-top:1px solid var(--rule);margin:6px 4px}
.menu .signout{color:var(--hot)}
.menu-who{margin:4px 12px 8px;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-who:empty{display:none}
#acctmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:70}

main{max-width:1160px;margin:0 auto;padding:30px 20px 80px}
.loading{color:var(--muted);padding:50px 0;text-align:center}

/* ---------- home ---------- */
/* Full-width bands break out of main's column. */
.band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:max(20px,calc(50vw - 560px));
  padding-right:max(20px,calc(50vw - 560px))}
.center{text-align:center}
.home-hero{margin-top:-30px;background:var(--band);text-align:center;padding-top:72px;padding-bottom:150px}
.eyebrow{margin:0 0 10px;color:var(--brand-ink);font-size:clamp(18px,2.2vw,24px);font-weight:600}
.home-hero h1{font-size:clamp(34px,5.4vw,56px);font-weight:700;margin:0 0 16px;letter-spacing:-.02em;line-height:1.1}
.lede{color:var(--text);font-size:clamp(16px,1.7vw,19px);font-weight:300;line-height:1.6;max-width:62ch;margin:0 auto}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.btn.xl{padding:13px 26px;font-size:16.5px;font-weight:500;border-radius:8px;letter-spacing:.01em}
.btn.ghost{background:transparent;border-color:var(--fg);color:var(--fg)}
.btn.ghost:hover{background:var(--card)}
.btn.block{display:flex;justify-content:center;width:100%}
/* Page headers elsewhere (question bank, progress). */
.hero{margin:6px 0 28px}
.hero h1{font-size:clamp(28px,4.2vw,42px);font-weight:700;margin:0 0 10px;letter-spacing:-.02em;line-height:1.15}
.hero p{color:var(--text);font-size:17px;font-weight:300;max-width:62ch;margin:0}
.hero .why{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hero .why li{font-size:14.5px;line-height:1.45;color:var(--muted);padding-left:12px;
  border-left:3px solid var(--brand)}
.hero .why b{color:var(--fg)}

/* The white panel that rides up over the hero. */
.overview{position:relative;margin:-96px 0 0;display:grid;gap:36px;grid-template-columns:1fr;
  background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:36px;box-shadow:var(--shadow-lg)}
@media(min-width:900px){.overview{grid-template-columns:1fr 360px;padding:44px}}
.ov-main h2{font-size:clamp(26px,3vw,34px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em;line-height:1.2}
.ov-sub{font-size:19px;font-weight:300;color:var(--fg);margin:0 0 20px}
.ov-main>p{color:var(--text);font-weight:300;font-size:16px;line-height:1.75;margin:0 0 14px;max-width:62ch}
.ov-main>p b{font-weight:600;color:var(--fg)}
.ov-feats{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ov-feats li{display:flex;gap:12px;align-items:flex-start;background:var(--band);border-radius:12px;padding:14px 16px}
.ov-feats .ico{width:26px;height:26px;color:var(--brand-ink);flex:none;margin-top:1px}
.ov-feats b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.ov-feats span{font-size:13px;color:var(--muted)}
.ov-outline{background:var(--band);border-radius:18px;padding:22px 20px;align-self:start;
  display:flex;flex-direction:column;gap:14px}
.ov-outline h3{font-size:24px;font-weight:300;margin:0 0 2px}
.ol-list{max-height:430px;overflow:auto;margin:0 -8px;padding:0 8px;
  mask-image:linear-gradient(#000 88%,transparent)}
.ol-row{display:flex;gap:12px;align-items:center;padding:9px 6px;border-radius:10px;text-decoration:none}
.ol-row:hover{background:var(--card)}
.ol-n{font-size:12px;font-weight:600;color:var(--brand-ink);min-width:20px;font-variant-numeric:tabular-nums}
.ol-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ol-t b{font-size:15px;font-weight:600;line-height:1.3}
.ol-t small{font-size:12px;color:var(--muted)}
.ol-go{color:var(--muted);font-size:18px}
.ol-row:hover .ol-go{color:var(--brand-ink)}

.statband{background:var(--navy);color:#fff;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));padding-top:44px;padding-bottom:44px;
  margin-top:56px;margin-bottom:40px;text-align:center}
.statband b{display:block;font-size:clamp(30px,3.6vw,42px);font-weight:700;line-height:1.1;color:#9fd07f}
.statband span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#d7deea}

.tools-sec{margin:56px 0 10px}
.tools-sec h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;margin:0 0 10px;letter-spacing:-.02em;line-height:1.2}
.tools{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:34px}
.tool{display:flex;flex-direction:column;gap:6px;padding:22px;background:var(--card);border:1px solid var(--rule);
  border-radius:18px;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s}
.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.tool-i{width:48px;height:48px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);
  display:grid;place-items:center;margin-bottom:8px}
.tool-i .ico{width:26px;height:26px}
.tool b{font-size:17px;font-weight:600}
.tool span:last-child{font-size:14px;color:var(--muted);line-height:1.5}
@media(prefers-reduced-motion:reduce){.tool,.part{transition:none}}
@media(max-width:600px){
  .home-hero{padding-top:48px;padding-bottom:120px}
  .overview{padding:22px 18px;border-radius:18px}
  .statband{grid-template-columns:repeat(2,1fr)}
}
#qcta,#resume,#installslot>.qcta{margin:0 0 16px}
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin:26px 0 34px}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:15px 17px;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--serif);font-size:29px;line-height:1.1;font-weight:700}
.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;font-family:var(--mono)}
h2.sec{font-family:var(--serif);font-size:26px;margin:38px 0 16px;font-weight:700;letter-spacing:-.02em}
.parts{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.part{display:block;text-decoration:none;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);padding:17px 19px;
  box-shadow:var(--shadow);transition:transform .15s,border-color .15s,box-shadow .15s}
.part:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow-lg)}
.part .n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--brand-ink);
  letter-spacing:.09em}
.part h3{font-family:var(--serif);font-size:17px;margin:5px 0 11px;font-weight:600;
  line-height:1.25}
.bar{height:5px;border-radius:3px;background:var(--rule);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .t1{background:var(--brand)}
.bar .t2{background:color-mix(in srgb,var(--brand) 38%,transparent)}
.part .meta{font-size:12px;color:var(--muted);margin-top:8px;font-family:var(--mono)}

/* ---------- browse ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 18px;align-items:center}
.filters input{flex:1;min-width:200px;padding:8px 12px;border:1px solid var(--rule);
  border-radius:8px;background:var(--card);color:var(--fg);font:inherit;font-size:14px}
.filters input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.filters select,.filters button{padding:7px 11px;border:1px solid var(--rule);
  border-radius:8px;background:var(--card);color:var(--fg);font:inherit;font-size:13px;
  cursor:pointer}
.count{font-size:13px;color:var(--muted);font-family:var(--mono);margin-left:auto}
.tlist{display:flex;flex-direction:column;gap:7px}
.trow{display:flex;gap:13px;align-items:baseline;padding:11px 15px;
  background:var(--card);border:1px solid var(--rule);border-radius:10px;
  text-decoration:none}
.trow:hover{border-color:var(--accent)}
.trow.empty{opacity:.5}
.trow .id{font-family:var(--mono);font-size:12px;color:var(--accent);min-width:46px}
.trow .ti{flex:1;font-size:15px}
.trow .bk{font-family:var(--mono);font-size:11px;color:var(--muted);
  white-space:nowrap}
/* A family of topics: one row that opens to its topics */
.tgroup>summary{list-style:none;cursor:pointer}
.tgroup>summary::-webkit-details-marker{display:none}
.tgroup>summary .ti{font-weight:600}
.tg-n{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted);margin-left:4px}
.tg-chev{color:var(--muted);font-size:18px;line-height:1;transition:transform .15s}
.tgroup[open]>summary{border-color:var(--accent)}
.tgroup[open] .tg-chev{transform:rotate(90deg)}
.tg-kids{display:flex;flex-direction:column;gap:6px;margin:6px 0 2px 22px;padding-left:12px;border-left:2px solid var(--rule)}
.tg-kids .trow{padding:9px 13px}
@media(prefers-reduced-motion:reduce){.tg-chev{transition:none}}
@media(max-width:600px){
  .tlist .trow{flex-wrap:wrap;row-gap:4px}
  .tlist .trow .ti{min-width:0}
  .tlist .trow .bk{order:3;flex-basis:100%;white-space:normal;padding-left:59px}
  .tg-chev{order:2}
  .tg-kids{margin-left:8px}
  .filters select{max-width:100%;min-width:0}
}

/* ---------- badges ---------- */
.badge{display:inline-block;font-family:var(--mono);font-size:10.5px;
  padding:2.5px 8px;border-radius:20px;letter-spacing:.05em;white-space:nowrap;
  border:1px solid transparent;vertical-align:middle}
.b-t1{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.b-t2{background:var(--card);color:var(--muted);border-color:var(--rule)}
.b-t3{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.b-hy{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ---------- topic page ---------- */
.crumb{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:9px}
.crumb a{color:var(--accent);text-decoration:none}
.topic h1{font-family:var(--serif);font-size:clamp(26px,4vw,40px);margin:0 0 13px;
  letter-spacing:-.02em;line-height:1.12}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.booktabs{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 20px;
  border-bottom:1px solid var(--rule);padding-bottom:11px}
.booktabs button{padding:7px 13px;border:1px solid var(--rule);border-radius:8px;
  background:var(--card);color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.booktabs button.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.booktabs button:hover:not(.on){color:var(--fg)}
/* Books inside one merged section: small pills, lighter than the page tabs. */
.mtabs{display:flex;gap:5px;flex-wrap:wrap;margin:2px 0 10px}
.mtabs button{padding:3px 10px;border:1px solid var(--rule);border-radius:14px;
  background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.mtabs button.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.mtabs button:hover:not(.on){color:var(--fg)}
.mcell h4{font-size:14.5px;margin:16px 0 2px}
.mcell h4:first-child{margin-top:4px}
.sec-block{margin:0 0 26px;scroll-margin-top:78px}
.sec-block h3{font-family:var(--serif);font-size:20px;margin:0 0 4px;font-weight:600}
/* Section headings fold their body away, so a long topic reads as a list. */
.sec-head{display:flex;width:100%;gap:10px;align-items:baseline;justify-content:space-between;
  padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sec-head .chev{font-size:13px;color:var(--muted);transition:transform .15s}
.sec-block.closed .sec-body{display:none}
.sec-block.closed .sec-head .chev{transform:rotate(-90deg)}
.sec-block.closed h3{margin:0}
@media(prefers-reduced-motion:reduce){.sec-head .chev{transition:none}}
.sec-src{font-family:var(--mono);font-size:11px;color:var(--accent);
  letter-spacing:.05em;margin-bottom:9px}
.md{font-size:15.5px;line-height:1.72;max-width:74ch;color:var(--text)}
.md p{margin:0 0 .85em}
.md ul,.md ol{margin:0 0 .85em;padding-left:1.35em}
.md li{margin:0 0 .42em}
.md strong{color:var(--accent);font-weight:600}
.md code{font-family:var(--code);font-size:.88em;background:var(--card);
  padding:.1em .38em;border-radius:4px}
.md h4{font-size:16px;margin:1.2em 0 .4em;font-family:var(--serif)}
.md hr{border:0;border-top:1px solid var(--rule);margin:1.3em 0}
.md table{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 1em}
.md th,.md td{border:1px solid var(--rule);padding:6px 9px;text-align:left}
.tablewrap{overflow-x:auto}

.panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px 18px;margin:0 0 22px;box-shadow:var(--shadow)}
.panel h3{font-family:var(--serif);font-size:17px;margin:0 0 4px}
.panel .hint{font-size:12px;color:var(--muted);margin:0 0 11px;font-family:var(--mono)}
.ddchips{display:flex;gap:7px;flex-wrap:wrap}
.dd{display:inline-block;padding:5px 11px;border-radius:20px;font-size:13.5px;
  text-decoration:none;border:1px solid var(--accent);color:var(--accent);
  background:var(--accent-soft)}
.dd:hover{background:var(--accent);color:var(--bg)}
.dd.plain{border-style:dashed;border-color:var(--rule);color:var(--muted);
  background:transparent;cursor:default}

/* One disease's differentials: a card per book, read top to bottom. */
.dd-book{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:10px;padding:14px 18px;margin:0 0 16px}
.dd-book h3{font-family:var(--serif);font-size:18px;margin:0 0 6px}
.dd-book h4{font-size:14.5px;margin:14px 0 2px}
.topic > .hint{color:var(--muted);margin:-4px 0 18px}

.toc{position:sticky;top:78px;align-self:start;font-size:13px;max-height:calc(100vh - 100px);
  overflow:auto}
.toc a{display:block;padding:3px 0;color:var(--muted);text-decoration:none;
  border-left:2px solid transparent;padding-left:10px}
.toc a:hover{color:var(--fg);border-left-color:var(--accent)}
/* The section on screen, as you scroll. */
.toc a.here{color:var(--fg);border-left-color:var(--accent);background:var(--accent-soft)}
.layout{display:grid;gap:32px;grid-template-columns:1fr}
/* Fit phone width: wide tables scroll in .tablewrap, long unspaced words wrap. */
.topic{overflow-wrap:break-word}
.layout .body{min-width:0}
@media(min-width:1000px){.layout{grid-template-columns:1fr 210px}
  .layout .toc{order:2}.layout .body{order:1}}
@media(max-width:999px){.toc{display:none}}

/* Phone reading aids: a section picker in place of the hidden TOC, a header
   that slides away while reading, and a back-to-top button. */
/* Reading controls: the section picker (phones only; desktop has the TOC),
   quick read and collapse-all. On phones the row stays under the header. */
.jump{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.jump select{display:none}
.jump input{flex:1 1 220px;min-width:0;padding:9px 12px;border:1px solid var(--rule);border-radius:9px;
  background:var(--card);color:var(--fg);font:inherit;font-size:14px}
.jump input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.jump .count{margin-left:0}
.jump .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.body.quick .sec-block[data-bg]{display:none}
@media(max-width:999px){
  .jump{position:sticky;top:0;z-index:35;padding:8px 0;flex-wrap:wrap;
    background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px)}
  .jump select{display:block;flex:1;min-width:0;padding:9px 12px;border:1px solid var(--rule);border-radius:9px;
    background:var(--card);color:var(--fg);font:inherit;font-size:14px}
}
/* ---------- phone navigation ---------- */
/* Seven links wrapped onto two lines and ate the screen; on phones they
   become a bar at the thumb end, with the rest behind More. */
#tabbar,#moresheet{display:none}
@media(max-width:700px){
  header nav,header .acct,header #theme{display:none}
  header{justify-content:space-between}
  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:58;
    border-top:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 96%,transparent);
    backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom)}
  #tabbar a,#tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 2px 6px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;
    text-decoration:none;cursor:pointer;min-height:52px;justify-content:center}
  #tabbar .ti-i{font-size:17px;line-height:1}
  #tabbar a.on{color:var(--accent)}
  #moresheet{display:block;position:fixed;right:10px;bottom:calc(60px + env(safe-area-inset-bottom));z-index:59}
  #moresheet[hidden]{display:none}
  #moresheet a,#moresheet button{padding:10px 12px}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
header{transition:transform .2s ease}
@media(max-width:700px){header.hide{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){header{transition:none}}
#totop{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:55;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--card);
  color:var(--fg);font-size:19px;line-height:1;box-shadow:var(--shadow);cursor:pointer}
#totop:hover{border-color:var(--accent);color:var(--accent)}

.notice{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);
  border-radius:10px;padding:13px 16px;font-size:14px;margin:0 0 20px}
footer{background:var(--navy);padding:34px 20px;text-align:center;
  color:#c9d2e0;font-size:13px}
footer p{margin:0 auto;max-width:70ch}
footer p + p{margin-top:8px}
footer a{color:#e3e9f2}

/* question search */
.qsearch input{flex:1}
mark.hit{background:var(--warn-soft);color:inherit;border-radius:3px;padding:0 1px}
#results a.qfind{border-top:1px solid var(--rule)}
#results a.qfind .rt{color:var(--accent)}

/* exam essentials: the first thing on a topic page */
.essentials{border-left:4px solid var(--accent)}
.essentials .hint{margin:0 0 8px}
.ess-list{margin:0;padding-left:1.25em;max-width:none}
.ess-list li{margin:0 0 .55em}
.ess-src{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:11px;
  color:var(--muted);text-decoration:none;white-space:nowrap}
.ess-src:hover{color:var(--accent)}

/* consolidated five-book synthesis */
.consolidated{border-left:4px solid var(--accent);margin:22px 0 6px}
.cons-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cons-head h3{margin:0;flex:1 1 auto}
.cons-head .hint{flex:1 1 100%;margin:4px 0 8px}
.cons-toggle{padding:5px 11px;border:1px solid var(--rule);border-radius:8px;background:transparent;color:var(--fg);cursor:pointer;font:inherit;font-size:13px}
.cons-body h2{font-family:var(--serif);font-size:22px;margin:22px 0 8px}
.cons-body h3{font-size:17px;margin:16px 0 6px}
.cons-body table{font-size:13.5px}

/* ---------- star, note and card tools on a question ---------- */
.qstar{border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.qstar.on{color:var(--warn)}
.qstar:hover{color:var(--accent)}
.qtools{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.qnotebox{margin:10px 0 0}
.qnote-read{margin:0;padding:10px 12px;border-left:3px solid var(--warn);background:var(--warn-soft);
  border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.6;white-space:pre-line}
.qnote-edit{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--rule);border-radius:9px;
  background:var(--bg);color:var(--fg);font:inherit;font-size:15px;resize:vertical}
.qnote-edit:focus{outline:2px solid var(--accent);outline-offset:-1px}
.qauto-line{margin:-4px 0 18px}
.qauto-line label{display:inline-flex;gap:8px;align-items:center;cursor:pointer}

/* ---------- exam mode ---------- */
/* The clock turns warn-coloured in the last five minutes. */
#eclock.low{color:var(--warn);font-weight:600}
.exam-nav{justify-content:space-between;flex-wrap:wrap;gap:8px}
/* Every question at a glance: answered, flagged, and where you are. */
.exam-grid{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 30px}
.eg{width:34px;height:34px;border:1px solid var(--rule);border-radius:8px;background:var(--card);
  color:var(--muted);font-family:var(--mono);font-size:12px;cursor:pointer}
.eg.done{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.eg.flag{border-color:var(--warn);color:var(--warn)}
.eg.on{outline:2px solid var(--accent);outline-offset:1px;color:var(--fg)}

/* ---------- your progress ---------- */
/* A week's two bars share a column: questions answered and cards reviewed. */
.weeks{display:flex;gap:6px;align-items:flex-end;min-height:150px;padding-bottom:4px}
.wk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.wk-bars{display:flex;gap:3px;align-items:flex-end;height:110px;width:100%;justify-content:center}
.wk-bars i{display:block;width:9px;min-height:2px;border-radius:3px 3px 0 0}
.wk-q,.wk-key i.wk-q{background:var(--accent)}
.wk-r,.wk-key i.wk-r{background:var(--ok)}
.wk-n{font-family:var(--mono);font-size:11px;color:var(--muted);min-height:1em}
.wk-d{font-family:var(--mono);font-size:9.5px;color:var(--muted);white-space:nowrap}
.wk-key{margin:10px 0 0}
.wk-key i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:2px}

/* ---------- question bank ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1px solid var(--rule);
  border-radius:8px;font-weight:500;background:var(--card);color:var(--fg);font:inherit;font-size:14px;
  text-decoration:none;cursor:pointer;line-height:1.3;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.outline{border-color:var(--brand);color:var(--brand-ink);background:transparent}
.btn.outline:hover{background:var(--brand-soft)}
.btn.go{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn.go:hover{filter:brightness(1.06);color:#fff}
@media(max-width:700px){header{padding:10px 16px}header .btn.go{display:none}.brand-tag{display:none}}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn.primary:hover{filter:brightness(1.08);color:var(--bg)}
.btn.small{padding:4px 10px;font-size:12.5px;border-radius:7px}
.btn.big{padding:12px 18px;font-size:15px;font-weight:600;flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;text-align:left}
.btn.big small{font-weight:400;font-size:12.5px;opacity:.75}
.btn.disabled{opacity:.45;pointer-events:none}
.qactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.qnow{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:22px 24px;margin:0 0 16px}
.qnow div{flex:1;min-width:240px}
.qnow h2{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 4px}
.qnow p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.qnow .btn.big{flex-direction:row;align-items:center;justify-content:center;padding:14px 26px;font-size:16px}
@media(max-width:600px){.qnow{padding:18px}.qnow .btn.big{width:100%}}
.qmore{margin:0 0 6px}
.qmore summary{cursor:pointer;color:var(--muted);font-size:14px;font-weight:600;padding:6px 0;list-style:none}
.qmore summary::-webkit-details-marker{display:none}
.qmore summary::before{content:"+ ";font-weight:700}
.qmore[open] summary::before{content:"− "}
.qmore summary:hover{color:var(--fg)}
.qreset .btn{margin-top:4px}
.qstart{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 10px}
.qpart .bar .t1{background:var(--ok)}
.qrow{flex-wrap:wrap}
.qrow .ti a{text-decoration:none}
.qrow .ti a:hover{color:var(--accent)}
.qrow-act{display:flex;gap:6px}
.ltitle{font-family:var(--serif);font-size:clamp(24px,3.6vw,34px);margin:0 0 6px;letter-spacing:-.02em}

/* ETAS chapter tiles */
.etas-tile .etas-icon{font-size:30px;line-height:1;margin:0 0 8px}
.book-includes{font-size:13px;line-height:1.55;color:var(--muted);margin:8px 0 0}
.book-includes span{font-family:var(--mono);font-size:11px;opacity:.8}

/* ---------- bank page ---------- */
.qhero{margin-bottom:20px}
.qhero .qyou{margin-top:10px;font-size:14.5px;font-weight:400;color:var(--muted)}
.qhero .qyou b{color:var(--fg);font-weight:600}
.qlast{display:flex;gap:16px;align-items:center;justify-content:space-between;text-decoration:none;
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);
  border-radius:12px;padding:12px 16px;margin:0 0 14px;font-weight:600}
.qlast small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.qlast .btn{flex:none;background:var(--card)}
.qmodes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 10px}
.qmode{display:flex;flex-direction:column;gap:3px;text-decoration:none;background:var(--card);
  border:1px solid var(--rule);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);
  transition:border-color .15s,transform .15s}
.qmode:hover{border-color:var(--brand);transform:translateY(-1px)}
.qmode b{font-size:16px}
.qmode span{font-size:13.5px;color:var(--muted);line-height:1.45}
.qlinks{font-size:14px;color:var(--muted);margin:0 0 22px;display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.qlinks a{color:var(--fg);font-weight:500}
.qlinks label{margin-left:auto;display:inline-flex;gap:6px;align-items:center;cursor:pointer}
@media(max-width:600px){.qlinks label{margin-left:0}}
.qsearch{margin-bottom:0}

/* By source: a shelf per kind of book, each book drawn as a cover */
.shelf{margin:0 0 30px}
.shelf-h{font-size:18px;font-weight:700;margin:0}
.shelf-note{font-size:13.5px;color:var(--muted);margin:2px 0 14px}
.covers{display:grid;gap:18px 14px;grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
.cv{display:flex;flex-direction:column;gap:6px;min-width:0}
.cover{--c:var(--muted);--c-soft:var(--card);
  aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  padding:14px 12px 12px 18px;border-radius:4px 10px 10px 4px;text-decoration:none;
  background:var(--c-soft);border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  box-shadow:inset 7px 0 0 var(--c),var(--shadow);transition:transform .15s,box-shadow .15s}
.cover:hover{transform:translateY(-3px);box-shadow:inset 7px 0 0 var(--c),var(--shadow-lg)}
.cover:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.cv-kind{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.cv-name{font-size:19px;font-weight:700;line-height:1.15;color:var(--fg);overflow-wrap:break-word;
  padding-top:10px;border-top:2px solid color-mix(in srgb,var(--c) 45%,transparent)}
.cv-n{font-size:12px;color:var(--muted);line-height:1.4}
.cv-you{display:block;margin-top:4px;color:var(--c);font-weight:600}
.cover .bar{margin-top:6px;background:color-mix(in srgb,var(--c) 18%,transparent)}
.cover .bar .t1{background:var(--c)}
.cv-read{font-size:13px;color:var(--muted);text-decoration:none;align-self:flex-start}
.cv-read:hover{color:var(--fg);text-decoration:underline}
@media(max-width:600px){
  .covers{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .cover{padding:10px 8px 10px 14px}
  .cv-kind{font-size:10.5px;letter-spacing:0;text-transform:none}
  .cv-name{font-size:15px;padding-top:7px}
  .cv-n{font-size:11px}
}
.k-major{--c:var(--brand-ink);--c-soft:var(--brand-soft)}
.k-accessory{--c:var(--clin);--c-soft:var(--clin-soft)}
.k-paid{--c:var(--hot);--c-soft:var(--hot-soft)}
/* The paid shelf: its one cover beside the list of books it holds */
.paid-shelf{display:grid;gap:18px;grid-template-columns:150px minmax(0,1fr);align-items:start}
.paid-shelf .covers{grid-template-columns:1fr}
@media(max-width:600px){.paid-shelf{grid-template-columns:minmax(0,1fr)}.paid-shelf .covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.incl{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.incl h3{font-size:14px;font-weight:600;margin:0 0 8px}
.incl ul{list-style:none;margin:0;padding:0;columns:2 220px;column-gap:24px}
.incl li{display:flex;justify-content:space-between;gap:10px;break-inside:avoid;
  padding:5px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.incl li b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.qsetup .incl{margin:14px 0}

/* By topic: each part folds open to its topics */
.tpart{background:var(--card);border:1px solid var(--rule);border-radius:12px;margin:0 0 8px}
.tpart>summary{display:flex;gap:14px;align-items:center;padding:13px 16px;cursor:pointer;list-style:none}
.tpart>summary::-webkit-details-marker{display:none}
.tpart[open]>summary{border-bottom:1px solid var(--rule)}
.tp-n{font-size:12px;font-weight:600;color:var(--brand-ink);min-width:22px}
.tp-t{flex:1;min-width:0;font-weight:600;font-size:15.5px}
.tp-m{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.tp-t .bar{margin-top:7px;max-width:260px}
.tpart>summary::after{content:"";width:8px;height:8px;flex:none;border:solid var(--muted);
  border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 4px 4px}
.tpart[open]>summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.tpart .tlist{padding:10px}
.qsetup-more{margin-top:16px}

/* setup */
.qsetup h1{font-family:var(--serif);font-size:clamp(24px,3.6vw,34px);margin:0 0 4px;letter-spacing:-.02em}
.qopt{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0}
.qopt label{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);min-width:72px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:6px 12px;border:1px solid var(--rule);border-radius:8px;background:transparent;
  color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.seg button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}
kbd{font-family:var(--code);font-size:11px;padding:1px 6px;border:1px solid var(--rule);border-radius:5px;
  background:var(--card)}

/* session bar */
.qbar{position:sticky;top:61px;z-index:40;display:flex;gap:14px;align-items:center;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);
  padding:10px 0 12px;margin:-10px 0 16px;border-bottom:1px solid var(--rule)}
.qbar-l{flex:1;min-width:0}
.qtitle{font-family:var(--serif);font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.qprog{height:4px;border-radius:2px;background:var(--rule);margin-top:6px;overflow:hidden}
.qprog i{display:block;height:100%;background:var(--accent);transition:width .25s}
.qscore{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}

/* card */
.qcard{overflow-wrap:break-word;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:20px 22px;
  margin:0 0 16px;box-shadow:var(--shadow)}
.qmeta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.qn{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.05em;margin-right:4px}
.qmeta .badge{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
.qnote{font-size:13px;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn);
  border-radius:8px;padding:7px 11px;margin:0 0 12px}
.stem{font-size:17px;line-height:1.55;max-width:78ch;margin:0 0 16px;white-space:pre-line}
.opts{display:grid;gap:8px;max-width:78ch}
.optrow{display:flex;gap:6px;align-items:stretch}
/* Cross-out: the option stays tappable, only dimmed and struck through. */
.opt-x{flex:none;width:38px;border:1px solid var(--rule);border-radius:10px;background:transparent;
  color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.opt-x:hover{color:var(--fg);border-color:var(--muted)}
.opt-x[aria-pressed="true"]{color:var(--clin);border-color:var(--clin)}
.opt.struck .ot{text-decoration:line-through;text-decoration-thickness:1.5px}
.opt.struck:not(.ok):not(.bad){opacity:.45}
.opt.ok.struck .ot{text-decoration:none}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:11px 14px;
  border:1px solid var(--rule);border-radius:10px;background:var(--bg);color:var(--fg);
  font:inherit;font-size:15px;line-height:1.45;cursor:pointer;transition:border-color .1s,background .1s}
.opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.opt:disabled{cursor:default;opacity:.85}
.opt .l{font-family:var(--mono);font-size:12px;font-weight:600;min-width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
  border:1px solid var(--rule);color:var(--muted);flex:none;margin-top:1px}
.opt.sel{border-color:var(--accent)}
.opt.ok{border-color:var(--ok);background:var(--ok-soft);opacity:1}
.opt.ok .l{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.bad{border-color:#b3453a;background:color-mix(in srgb,#b3453a 12%,var(--card));opacity:1}
.opt.bad .l{background:#b3453a;border-color:#b3453a;color:#fff}
.verdict{margin:14px 0 0;font-size:14.5px;font-weight:600;padding:8px 12px;border-radius:8px;display:inline-block}
.verdict.ok{color:var(--ok);background:var(--ok-soft)}
.verdict.bad{color:#b3453a;background:color-mix(in srgb,#b3453a 12%,var(--card))}
.verdict.none{color:var(--muted);background:var(--bg);font-weight:500}
.expl{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--accent);background:var(--bg);
  border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.6;max-width:78ch;white-space:pre-line}
.expl b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px}
.qnav{display:flex;justify-content:flex-end;gap:8px;margin:0 0 30px}

/* The same concept asked in several banks. */
.badge.b-hyq{background:var(--hot-soft);color:var(--hot);border-color:var(--hot)}

/* The answer box: one clinical-blue card, a labelled part per idea. */
.xbox{margin:16px 0 0;max-width:78ch;border:1px solid var(--rule);border-radius:12px;
  background:var(--card);overflow:hidden}
.xsec{padding:12px 16px;border-top:1px solid var(--rule)}
.xsec:first-child{border-top:0}
.xsec h4{margin:0 0 5px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--clin)}
.xsec p{margin:0;font-size:15px;line-height:1.6;white-space:pre-line}
.xbottom{background:var(--clin-soft)}
.xbottom p{font-weight:600}
.xpearl p::before{content:"◆ ";color:var(--clin)}
.xdispute{background:var(--warn-soft)}
.xdispute h4{color:var(--warn)}
.xwhy{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xwhy li{display:flex;gap:10px;font-size:14.5px;line-height:1.5}
.xwhy .xl{font-family:var(--mono);font-size:12px;font-weight:600;min-width:22px;height:22px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
  border:1px solid var(--rule);color:var(--muted);margin-top:1px}
.xwhy .xopt{display:block;color:var(--muted);font-size:13px}
.xref p{font-size:14px}
.xlinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.xnote{margin:0;padding:8px 16px;font-size:12px;color:var(--muted);background:var(--bg);
  border-top:1px solid var(--rule)}

/* results */
.qresult{text-align:center;padding:26px 20px}
.qresult h1{font-family:var(--serif);font-size:56px;margin:0;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.qresult .qactions{justify-content:center;margin-top:16px}
.bk.weak{color:var(--warn)}
.qpanel{border-left:4px solid var(--ok)}

/* home CTA */
.qcta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--rule);border-left:4px solid var(--brand);border-radius:var(--r);
  padding:18px 20px;margin:0 0 8px;box-shadow:var(--shadow)}
.qcta div{flex:1;min-width:220px}
.qcta h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 3px}
.qcta p{margin:0;color:var(--muted);font-size:14px}
@media(max-width:600px){.qbar{top:100px}.qcard{padding:16px}.stem{font-size:16px}}

/* ---------- flashcard review ---------- */
.rwrap{max-width:720px;margin:0 auto}
.rwrap .qprog i{transition:none}
.rcard{cursor:pointer;padding:26px 28px;-webkit-tap-highlight-color:transparent}
.rcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rcard .md{max-width:none}
.rtopic{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:14px}
.rtopic:hover{color:var(--accent);text-decoration:underline}
.rhead{font-size:13px;font-weight:600;color:var(--muted);margin:-6px 0 8px}
.rterm{font-size:22px;font-weight:700;line-height:1.3;color:var(--fg)}
.rask{font-size:17px;color:var(--muted);margin-top:4px}
.rcard .rq{font-size:18px;line-height:1.55;white-space:pre-line}
.rcard .ra{white-space:pre-line;margin-top:18px;padding-top:16px;border-top:1px dashed var(--rule)}
.rpage{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-8px 0 20px}
.rpage .badge{text-decoration:none}
.rtap{font-size:13px;color:var(--muted);margin:20px 0 0}
@keyframes rflip{50%{transform:perspective(900px) rotateY(90deg)}}
.rcard.flipping{animation:rflip .3s ease-in-out}
@media (prefers-reduced-motion:reduce){.rcard.flipping{animation:none}}

/* Grade buttons sit right under the card; on phones they dock at the bottom. */
.rdock{margin-top:14px}
.rdock .rshow{width:100%;justify-content:center;padding:14px;font-size:16px;font-weight:600;min-height:52px}
.rgrades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rgrade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:64px;
  padding:8px 4px;border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--fg);
  font:inherit;cursor:pointer;touch-action:manipulation}
.rgrade b{font-size:15px;font-weight:600}
.rgrade span{font-size:12px;color:var(--muted)}
.rgrade span:empty{display:none}
.rgrade.g1{border-color:#b3453a;color:#b3453a}
.rgrade.g2{border-color:var(--warn);color:var(--warn)}
.rgrade.g3{border-color:var(--ok);color:var(--ok)}
.rgrade.g4{border-color:var(--accent);color:var(--accent)}
.rgrade:hover{background:var(--accent-soft)}
.rdock kbd{margin-left:6px}
.rdock .rshow kbd{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 45%,transparent)}
.rgrade kbd{margin:3px 0 0}
@media (hover:none){.rdock kbd{display:none}}
@media(max-width:700px){
  .rwrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .rcard{padding:20px 18px}
  .rterm{font-size:20px}
  .rdock{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;border-top:1px solid var(--rule);
    background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .rdock-in{max-width:720px;margin:0 auto}
}

/* ---------- body maps ---------- */
:root{--bm-skin:#eef1f5;--bm-line:#c7d0dc;--bm-hi:#d0453e;--bm-lo:#f4bdb5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bm-skin:#24304a;--bm-line:#3a4864;--bm-hi:#ff6f61;--bm-lo:#6e3a3a}}
:root[data-theme="dark"]{--bm-skin:#24304a;--bm-line:#3a4864;--bm-hi:#ff6f61;--bm-lo:#6e3a3a}
.bm-head{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.bm-head h3{margin:0}
.bm-legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.bm-legend span{display:inline-flex;gap:6px;align-items:center}
.bm-legend i{width:12px;height:12px;border-radius:3px;border:1px solid var(--bm-line);display:inline-block}
.bm-legend i.bm-l2{background:var(--bm-hi)}
.bm-legend i.bm-l1{background:var(--bm-lo)}
.bm-maps{display:flex;gap:28px;flex-wrap:wrap}
.bm-map{margin-top:14px;flex:1 1 300px;min-width:0}
.bm-map h4{margin:0 0 6px;font-size:15px}
.bm-figs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.bm-fig{margin:0;text-align:center}
.bm-fig svg{display:block;height:330px;width:auto}
.bm-fig.face{align-self:center}
.bm-fig.face svg{height:190px}
.bm-fig figcaption{font-size:11.5px;color:var(--muted);margin-top:2px}
.bm-r{fill:var(--bm-skin);stroke:var(--bm-line);stroke-width:1;stroke-linejoin:round}
.bm-r.bm-l1{fill:var(--bm-lo)}
.bm-r.bm-l2{fill:var(--bm-hi)}
.bm-eye{fill:var(--muted);opacity:.55;pointer-events:none}
.bm-list{font-size:14px;line-height:1.6;margin:8px 0 4px}
.bm-src{font-family:var(--mono);font-size:11px;color:var(--muted);margin:2px 0 0}
.bm-compare{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:12px}
.bm-cmp{border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.bm-cmp>a{text-decoration:none;color:var(--fg);font-size:14px}
.bm-cmp>a:hover{color:var(--accent)}
.bm-map.compact{margin-top:6px}
.bm-map.compact h4{font-size:12.5px;font-weight:400;color:var(--muted)}
.bm-map.compact .bm-fig svg{height:200px}
@media(max-width:600px){.bm-fig svg{height:250px}.bm-fig.face svg{height:150px}.bm-map.compact .bm-fig svg{height:160px}}

/* ---------- mind maps ---------- */
.mm-open{display:flex;gap:12px;align-items:center;justify-content:space-between;text-decoration:none;color:var(--fg);
  border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin-top:8px}
.mm-open:hover{border-color:var(--accent)}
.mm-open small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.mm-topics{margin:4px 0 14px}
.mm-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.mm-switch{display:inline-flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden}
.mm-switch button{border:0;background:var(--card);color:var(--fg);font:inherit;font-size:13.5px;padding:6px 14px;cursor:pointer}
.mm-switch button+button{border-left:1px solid var(--rule)}
.mm-switch button[aria-pressed="true"]{background:var(--accent);color:var(--bg);font-weight:600}
.mm-mapbox{height:72vh;min-height:420px;border:1px solid var(--rule);border-radius:14px;background:var(--card);overflow:hidden}
.mm-mapbox[hidden]{display:none}
.mm-mapbox{position:relative}
.mm-drawing{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:var(--muted);font-size:14px;pointer-events:none}
.mm-svg{width:100%;height:100%;display:block}
.mm-mapbox .markmap,.mm-mapbox svg{color:var(--fg);--markmap-text-color:var(--fg);--markmap-font:400 13.5px/19px var(--sans);--markmap-circle-open-bg:var(--card);--markmap-highlight-node-bg:#ffe08a}
.mm-mapbox .markmap-foreign{color:var(--fg)}
.mm-mapbox .markmap-foreign strong{font-weight:600;color:var(--fg)}
.markmap-foreign .mm-pg{margin-left:6px}
.markmap-foreign .mm-root{font-weight:700;font-size:18px}
.markmap-foreign .mm-br{font-weight:650;font-size:14.5px}
.markmap-foreign mark{background:#ffe08a;color:inherit;border-radius:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .markmap-foreign mark{background:#6b5319}}
:root[data-theme="dark"] .markmap-foreign mark{background:#6b5319}
@media(max-width:640px){.mm-mapbox{height:64vh;min-height:360px}}
.mm-recall{display:inline-flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
.mm-recall[hidden],.mm-tools .btn[hidden]{display:none}
#mmq{flex:1 1 200px;min-width:0;padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--fg);font:inherit}
.mm-tree,.mm-tree ul{list-style:none;margin:0;padding:0}
.mm-tree{display:flex;flex-direction:column;gap:10px}
.mm-branch{--mmc:hsl(var(--mmh) 55% 45%);border:1px solid var(--rule);border-left:5px solid var(--mmc);border-radius:12px;
  background:var(--card);padding:6px 12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mm-branch{--mmc:hsl(var(--mmh) 60% 65%)}}
:root[data-theme="dark"] .mm-branch{--mmc:hsl(var(--mmh) 60% 65%)}
.mm-branch>details>summary,.mm-bare{font-weight:700;font-size:16px;color:var(--mmc)}
.mm summary{cursor:pointer;padding:5px 0;list-style:none;display:flex;gap:8px;align-items:baseline}
.mm summary::-webkit-details-marker{display:none}
.mm summary::before{content:"▸";color:var(--muted);font-size:12px;flex:none;transition:transform .12s}
.mm details[open]>summary::before{transform:rotate(90deg)}
.mm summary .mm-t{flex:1;min-width:0}
.mm-n{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400}
.mm-pg{font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--rule);border-radius:10px;padding:0 6px;font-weight:400;white-space:nowrap}
.mm ul ul,.mm details>ul{margin-left:14px;padding-left:10px;border-left:1px dashed var(--rule)}
.mm-node>details>summary{font-weight:600}
.mm-h>details>summary,.mm-leaf.mm-h{color:var(--fg)}
.mm-leaf{padding:3px 0 3px 18px;line-height:1.5;font-size:14.5px;position:relative}
.mm-leaf::before{content:"";position:absolute;left:5px;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.mm-leaf .mm-pg{margin-left:6px}
.mm mark{background:#ffe08a;color:inherit;border-radius:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mm mark{background:#6b5319}}
:root[data-theme="dark"] .mm mark{background:#6b5319}
.mm.recall .mm-leaf:not(.shown) .mm-t{color:transparent;background:var(--accent-soft);border-radius:4px;cursor:pointer;user-select:none}
.mm.recall .mm-leaf:not(.shown) .mm-t *{color:transparent}
@media(prefers-reduced-motion:reduce){.mm summary::before{transition:none}}
@media(max-width:600px){.mm ul ul,.mm details>ul{margin-left:6px;padding-left:8px}.mm-leaf{font-size:14px}}

/* ---------- drawn diagrams (BMZ) ---------- */
:root{--dg-cell:#f8e6ec;--dg-cell-line:#d9b3c1;--dg-nuc:#b48aa8;--dg-corn:#e9c9a8;--dg-ll:#fdf3d8;--dg-ld:#7a6a9b;--dg-fib:#7a6a9b;
  --dg-dermis:#fbf4ef;--dg-coll:#e6cdb8;--dg-epi:#7b4bc4;--dg-llc:#d9770b;--dg-sub:#0f8f86;--dg-pap:#4c8a2f;--dg-mix:#667085}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dg-cell:#3a2734;--dg-cell-line:#6b4a5c;--dg-nuc:#8d6684;--dg-corn:#6b5440;
  --dg-ll:#3d3620;--dg-ld:#b3a6dc;--dg-fib:#b3a6dc;--dg-dermis:#231e1c;--dg-coll:#4f4035;--dg-epi:#b59af0;--dg-llc:#f5a14a;--dg-sub:#4fd1c5;--dg-pap:#8cc96a;--dg-mix:#9aa6b8}}
:root[data-theme="dark"]{--dg-cell:#3a2734;--dg-cell-line:#6b4a5c;--dg-nuc:#8d6684;--dg-corn:#6b5440;
  --dg-ll:#3d3620;--dg-ld:#b3a6dc;--dg-fib:#b3a6dc;--dg-dermis:#231e1c;--dg-coll:#4f4035;--dg-epi:#b59af0;--dg-llc:#f5a14a;--dg-sub:#4fd1c5;--dg-pap:#8cc96a;--dg-mix:#9aa6b8}
.dg-sets{margin:4px 0 12px}
.dg-body{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.dg-svg{flex:0 1 380px;width:100%;max-width:420px;height:auto;display:block}
.dg-side{flex:1 1 320px;min-width:0;overflow-x:auto}
.dg-lab{font:500 10px var(--sans);fill:var(--muted)}
.dg-cell{fill:var(--dg-cell);stroke:var(--dg-cell-line);stroke-width:1}
.dg-nuc{fill:var(--dg-nuc);opacity:.75}
.dg-gran{fill:var(--dg-nuc)}
.dg-desm{fill:var(--dg-ld)}
.dg-corn{fill:var(--dg-corn)}
.dg-hd{fill:var(--dg-ld)}
.dg-ll{fill:var(--dg-ll)}
.dg-af{stroke:var(--dg-ld);stroke-width:.8;opacity:.6}
.dg-ld{fill:var(--dg-ld)}
.dg-fib{fill:none;stroke:var(--dg-fib);stroke-width:1.4}
.dg-dermis{fill:var(--dg-dermis)}
.dg-coll{fill:none;stroke:var(--dg-coll);stroke-width:2}
.dg-mk circle{stroke:var(--card);stroke-width:2}
.dg-mk text{font:700 9.5px var(--sans);fill:#fff;text-anchor:middle;pointer-events:none}
.dg-mk.dg-epi circle{fill:var(--dg-epi)}.dg-mk.dg-ll circle{fill:var(--dg-llc)}.dg-mk.dg-sub circle{fill:var(--dg-sub)}
.dg-mk.dg-pap circle{fill:var(--dg-pap)}.dg-mk.dg-mix circle{fill:var(--dg-mix)}
.dg-mixline{stroke:var(--dg-mix);stroke-width:2;stroke-dasharray:3 3}
.dg-mk.dim{opacity:.28}
.dg-mk.focus circle{stroke:var(--fg);stroke-width:3}
.dg-mk.focus{opacity:1}
.dg-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dg-table th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--rule)}
.dg-table td{padding:6px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.4}
.dg-table tr{cursor:pointer}
.dg-table tr.dim{opacity:.5}
.dg-table tr.on td{background:var(--accent-soft)}
.dg-table tr.focus td{background:var(--accent-soft);font-weight:500}
.dg-dot{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;
  color:#fff;font:700 10.5px var(--sans);padding:0 4px}
i.dg-dot{min-width:11px;height:11px;padding:0;margin-right:5px;vertical-align:-1px}
.dg-dot.dg-epi{background:var(--dg-epi)}.dg-dot.dg-ll{background:var(--dg-llc)}.dg-dot.dg-sub{background:var(--dg-sub)}
.dg-dot.dg-pap{background:var(--dg-pap)}.dg-dot.dg-mix{background:var(--dg-mix)}
.dg-key{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:10px 0 2px}
@media(max-width:600px){.dg-table{font-size:12.5px}.dg-table td{padding:5px 4px}}
:root{--dg-pigc:#8a5a3c;--dg-solidc:#e7b8c6;--dg-fluidc:#cfe6f7;--dg-fluidl:#7fb3d9;--dg-pusc:#f3e2a6;--dg-pusl:#c9a53e;--dg-whealc:#f6c9d3;
  --dg-bloodc:#9b2d4a;--dg-crustc:#c99a4e;--dg-rawc:#e46b7d;--dg-scarc:#efe2e4;--dg-skinc:#f6e9e4;--dg-lesc:#c25a6a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dg-pigc:#c99a7a;--dg-solidc:#7a4a5c;--dg-fluidc:#24405a;--dg-fluidl:#7fb3d9;--dg-pusc:#5a4c22;
  --dg-pusl:#d9b75a;--dg-whealc:#6e3a48;--dg-bloodc:#e0708c;--dg-crustc:#a07a3c;--dg-rawc:#e46b7d;--dg-scarc:#4a3a40;--dg-skinc:#3a2d2a;--dg-lesc:#e88a98}}
:root[data-theme="dark"]{--dg-pigc:#c99a7a;--dg-solidc:#7a4a5c;--dg-fluidc:#24405a;--dg-fluidl:#7fb3d9;--dg-pusc:#5a4c22;
  --dg-pusl:#d9b75a;--dg-whealc:#6e3a48;--dg-bloodc:#e0708c;--dg-crustc:#a07a3c;--dg-rawc:#e46b7d;--dg-scarc:#4a3a40;--dg-skinc:#3a2d2a;--dg-lesc:#e88a98}
.dg-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(max-width:600px){.dg-cards{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.dg-card{padding:8px 9px}.dg-card b{font-size:14px}.dg-card p{font-size:12.5px}}
.dg-card{border:1px solid var(--rule);border-radius:12px;padding:10px 12px;background:var(--card)}
.dg-card b{display:block;font-size:15px;margin:6px 0 2px}
.dg-card p{margin:0;font-size:13px;line-height:1.45}
.dg-card .dg-ex{color:var(--muted);margin-top:4px}
.dg-mini{display:block;width:100%;height:auto;border-radius:8px;background:var(--card)}
.dg-pig{fill:var(--dg-pigc)}
.dg-solid{fill:var(--dg-solidc);stroke:var(--dg-cell-line);stroke-width:1}
.dg-fluid{fill:var(--dg-fluidc);stroke:var(--dg-fluidl);stroke-width:1.5}
.dg-pus{fill:var(--dg-pusc);stroke:var(--dg-pusl);stroke-width:1.5}
.dg-wheal{fill:var(--dg-whealc)}
.dg-oedema{fill:var(--dg-whealc);opacity:.85}
.dg-roof{fill:none;stroke:var(--dg-cell-line);stroke-width:3;stroke-linecap:round}
.dg-cystwall{fill:var(--dg-cell);stroke:var(--dg-cell-line);stroke-width:3}
.dg-cystin{fill:var(--dg-pusc)}
.dg-blood{fill:var(--dg-bloodc)}
.dg-scale{fill:var(--card);stroke:var(--dg-cell-line);stroke-width:1}
.dg-crust{fill:var(--dg-crustc)}
.dg-raw{fill:var(--dg-rawc)}
.dg-bg{fill:var(--card)}
.dg-scar{fill:var(--dg-scarc)}
.dg-scarline{stroke:var(--dg-cell-line);stroke-width:1.2}
.dg-skin{fill:var(--dg-skinc)}
.dg-skinpale{fill:var(--dg-skinc)}
.dg-les{fill:var(--dg-lesc);stroke:var(--dg-lesc)}
.dg-line{fill:none;stroke:var(--dg-lesc);stroke-linecap:round;stroke-linejoin:round}
.dg-morph .dg-sets{flex-wrap:wrap}

/* ---------- algorithm practice ---------- */
/* Trap rose (Step 8) marks a wrong turn: distinct from the question bank's
   brick red for a wrong answer, because a wrong turn is kept and learned from. */
:root{--trap:#c03a63;--trap-soft:#fbe9ef}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--trap:#f08ba8;--trap-soft:#3a1f28}}
:root[data-theme="dark"]{--trap:#f08ba8;--trap-soft:#3a1f28}

.awrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;
  min-height:calc(100dvh - 150px);padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.atitle{font-family:var(--serif);font-size:20px;margin:0 0 2px;letter-spacing:-.01em}
.asub{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0 0 12px;letter-spacing:.04em}

/* breadcrumb trail of the path so far */
.atrail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 12px;
  margin:0 -16px 0;padding-inline:16px;scroll-snap-type:x proximity}
.atrail::-webkit-scrollbar{display:none}
.astep{flex:none;scroll-snap-align:end;display:flex;align-items:center;gap:6px;max-width:150px;
  padding:5px 10px;border:1px solid var(--rule);border-radius:20px;background:var(--card);
  font-size:12px;color:var(--muted);text-decoration:none;white-space:nowrap}
.astep b{font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis}
.astep i{font-style:normal;font-family:var(--mono);font-size:11px}
.astep.ok{border-color:var(--ok);color:var(--ok)}
.astep.ok i{color:var(--ok)}
.astep.wrong{border-color:var(--trap);background:var(--trap-soft);color:var(--trap)}
.astep.wrong b{color:var(--trap)}
.astep.find{border-style:dashed}
.astep.now{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.astep.now b{color:var(--accent)}

/* the finding a fork reveals */
.afind{display:flex;gap:10px;align-items:flex-start;border:1px dashed var(--rule);border-radius:10px;
  background:var(--card);padding:10px 13px;margin:0 0 14px;font-size:14px}
.afind .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);flex:none;padding-top:2px}

.aq{font-size:17.5px;line-height:1.5;margin:0 0 16px;max-width:60ch}
.aopts{display:grid;gap:9px;margin-top:auto}
.aopts .opt{align-items:center}
.opt.trap{border-color:var(--trap);background:var(--trap-soft);opacity:1}
.opt.trap .l{background:var(--trap);border-color:var(--trap);color:#fff}
.awhy{margin:8px 0 0;padding:10px 12px;border-left:3px solid var(--trap);background:var(--trap-soft);
  border-radius:0 8px 8px 0;font-size:14px;line-height:1.55;color:var(--fg)}
.awhy b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--trap);margin-bottom:3px}
.anote{margin:8px 0 0;padding:10px 12px;border-left:3px solid var(--ok);background:var(--ok-soft);
  border-radius:0 8px 8px 0;font-size:14px;line-height:1.55}
.anote b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ok);margin-bottom:3px}
.adock{position:fixed;left:0;right:0;bottom:0;z-index:45;border-top:1px solid var(--rule);
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.adock-in{max-width:720px;margin:0 auto;display:flex;gap:10px;align-items:center}
.adock .btn{flex:1;justify-content:center;padding:13px;font-size:16px;font-weight:600;min-height:50px}
.ahint{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;margin:10px 0 0}
@media (hover:none){.aopts kbd,.ahint kbd{display:none}}

/* end screen */
.aend h1{font-family:var(--serif);font-size:26px;margin:0 0 4px;letter-spacing:-.01em}
.ascore{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.ascore .stat{flex:1;min-width:92px;padding:11px 13px}
.ascore .stat b{font-size:24px}
.ascore .stat.bad b{color:var(--trap)}
.arefs{display:flex;gap:7px;flex-wrap:wrap}

/* flowchart */
.flowwrap{margin:6px 0 4px;overflow-x:hidden}
svg.flow{width:100%;height:auto;display:block;font-family:var(--sans)}
.fc-edge{fill:none;stroke:var(--rule);stroke-width:2}
.fc-edge.on{stroke:var(--accent);stroke-width:2.5}
.fc-box{fill:var(--card);stroke:var(--rule);stroke-width:1}
.fc-dot{fill:var(--rule)}
.fc-node.on .fc-box{stroke:var(--accent)}
.fc-node.on .fc-dot{fill:var(--accent)}
.fc-node.wrong .fc-box{stroke:var(--trap);fill:var(--trap-soft)}
.fc-node.wrong .fc-dot{fill:var(--trap)}
.fc-node.off{opacity:.55}
.fc-node.k-end .fc-box{stroke-dasharray:none;stroke-width:1.5}
.fc-head{font-size:10.5px;letter-spacing:.07em;fill:var(--muted);font-family:var(--mono)}
.fc-node.wrong .fc-head{fill:var(--trap)}
.fc-node.on.k-end .fc-head{fill:var(--accent)}
.fc-text{font-size:13px;fill:var(--fg)}
.fc-sub{font-size:12px}
.fc-sub.fc-answer{fill:var(--ok)}
.fc-sub.fc-chosen{fill:var(--trap)}
.fclegend{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;
  color:var(--muted);margin:10px 0 0}
.fclegend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;
  margin-right:5px;vertical-align:middle;border:1px solid currentColor}
.fclegend .l-route{color:var(--accent)}
.fclegend .l-wrong{color:var(--trap)}

/* Arabic interface: chrome flips, the questions stay English and left-to-right */
:root[lang="ar"] .awrap,:root[lang="ar"] .atrail,:root[lang="ar"] .adock-in{direction:rtl}
:root[lang="ar"] .aq,:root[lang="ar"] .opt,:root[lang="ar"] .afind,:root[lang="ar"] .awhy,
:root[lang="ar"] .anote,:root[lang="ar"] .astep b,:root[lang="ar"] svg.flow{direction:ltr;text-align:left}

/* end screen: the turns you missed */
.amiss{border-left:3px solid var(--trap);padding:2px 0 2px 12px;margin:0 0 16px}
.amiss p{margin:0 0 4px;font-size:14px;line-height:1.5}
.amiss-q{font-weight:500}
.amiss-bad{color:var(--trap)}
.amiss-why{color:var(--muted)}
.amiss-ok{color:var(--ok)}
.asteps{font-size:15px;line-height:1.55;padding-left:1.3em;margin:0 0 18px}
.asteps li{margin:0 0 7px}

/* the panel on a disease page */
.algopanel{border-left:4px solid var(--accent)}
.algometa{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0}

/* admin report */
.admintable{border-collapse:collapse;width:100%;font-size:14px}
.admintable th,.admintable td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
.admintable th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.admintable .hint{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* Books side by side: one row per idea, one column per book. Wide screens
   put the columns next to each other; a phone stacks them, each under its
   own book name, which is the only reading that fits a narrow screen. */
.cmp-note{margin:0 0 22px}
.cmp-row{margin:0 0 34px;border-top:1px solid var(--rule);padding-top:16px}
.cmp-row h3{font-family:var(--serif);font-size:21px;margin:0 0 14px;font-weight:600}
/* Columns take the width they need to stay readable and wrap when they run
   out of room, so two books sit side by side and five become two rows of
   cards rather than five unreadable ribbons. */
.cmp-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.cmp-cell{min-width:0;background:var(--card);border:1px solid var(--rule);
  border-radius:10px;padding:14px 16px}
.cmp-cell>.sec-src{margin-bottom:12px}
.cmp-sec+.cmp-sec{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px}
.cmp-sec h4{font-size:14px;margin:0 0 8px;font-weight:600}
.cmp-sec .md{font-size:14.5px}
/* Comparing needs the width: the page-side contents list steps aside. */
.layout.comparing .toc{display:none}
@media(min-width:1000px){.layout.comparing{grid-template-columns:1fr}}

/* A question's own pictures, recovered from its source. Tap for full size. */
.qfigs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.qfigs a{display:block;min-width:0;max-width:100%}
.qfigs img{display:block;max-width:100%;max-height:340px;border-radius:8px;
  border:1px solid var(--rule);background:var(--card)}

/* Room for the phone navigation bar: anything else docked at the bottom sits
   above it. Last in the file so it beats the rules that place them at 0. */
@media(max-width:700px){
  .rdock{bottom:calc(56px + env(safe-area-inset-bottom))}
  #totop{bottom:calc(66px + env(safe-area-inset-bottom))}
}

/* Paid shelf: the "Others" tile and its locked notice */
.b-paid{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);margin-left:8px;vertical-align:middle}
.part.locked .etas-icon{opacity:.6}
.part.locked .qactions .btn{opacity:.75}
.locked-note{margin:8px 0 0;font-size:13px;color:var(--warn)}

/* "Report a problem" form under a question card. */
.qreportbox .seg{margin:0 0 8px}
.qreportbox .qnote-edit{width:100%;box-sizing:border-box}

/* ---------- paywall (Arabic, right to left) ----------
   Shown under a locked topic's first section. The Worker sent only that
   section; this is the way in, not a cover over hidden text. */
[lang="ar"]{font-family:'Noto Sans Arabic','Noto Sans',system-ui,sans-serif;line-height:1.8}
.paywall{margin:22px 0 8px;padding:24px 18px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--brand-soft);text-align:center;box-shadow:var(--shadow)}
.paywall h3{margin:4px 0 8px;font-size:21px;color:var(--fg)}
.paywall p{margin:0 auto 10px;max-width:520px;color:var(--text);font-size:16px}
.paywall .pw-lock{font-size:28px;line-height:1}
.paywall .pw-count{font-size:14px;color:var(--muted);margin-bottom:2px}
.paywall .pw-books{font-size:13px;color:var(--muted);font-family:var(--sans)}
.pw-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pw-actions .btn{flex:1 1 180px;max-width:280px;justify-content:center;min-height:48px;
  padding:12px 20px;font-size:16px;font-weight:600}
.paywall .pw-free{margin:16px 0 0;font-size:15px}
.lockscreen{margin:40px auto;max-width:560px}

/* ---------- trial banner and reminder (access.js) ---------- */
#accessbar{padding:8px 16px;font-size:14px;border-bottom:1px solid var(--rule)}
#accessbar .ab-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px 12px;flex-wrap:wrap}
#accessbar.ab-trial{background:var(--brand-soft);color:var(--brand-ink)}
#accessbar.ab-ending,#accessbar.ab-expired{background:var(--warn-soft);color:var(--warn);font-weight:600}
#accessbar .btn{min-height:36px}
dialog.remind{border:0;border-radius:var(--r);padding:22px 20px;width:min(420px,calc(100vw - 32px));
  background:var(--card);color:var(--fg);box-shadow:var(--shadow-lg)}
dialog.remind::backdrop{background:rgba(15,23,38,.45)}
dialog.remind h3{margin:0 0 8px;font-size:20px}
dialog.remind p{margin:0;color:var(--text)}
.remind-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.remind-actions .btn{flex:1 1 140px;justify-content:center;min-height:46px;font-size:16px}

/* Suspend / report under a flashcard, and the line that confirms them. */
.linkbtn{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--accent)}
.rtools{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:10px 2px 0;font-size:13px}
.rnote{color:var(--muted);margin-left:auto}
.rnote .linkbtn{color:var(--accent);font-weight:600}
.rtools + .qreportbox{margin-top:10px;padding:12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.rsuspend-too{display:flex;gap:8px;align-items:center;margin:8px 0 0;font-size:13.5px;cursor:pointer}
.rcard .rmine{margin:0 0 14px 8px;font-size:11.5px;vertical-align:top}

/* Flashcard decks: every topic with cards, grouped by part. */
.rd-h{font-family:var(--serif);font-size:26px;margin:4px 0 14px}
.rd-all{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 18px;margin-bottom:14px}
.rd-all small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.rd-all .btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.rd-search{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--rule);border-radius:9px;
  background:var(--bg);color:var(--fg);font:inherit;margin:0 0 12px}
.rd-part{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);margin:0 0 8px}
.rd-part summary{display:flex;gap:10px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.rd-part summary::-webkit-details-marker{display:none}
.rd-part summary::before{content:"▸";color:var(--muted);transition:transform .15s}
.rd-part[open] summary::before{transform:rotate(90deg)}
.rd-pn{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--brand-ink);white-space:nowrap}
.rd-pt{flex:1;min-width:0;font-weight:600;line-height:1.3}
.rd-pt small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.rd-c{font-size:13px;color:var(--muted);white-space:nowrap}
.rd-due{color:var(--accent)}
.rd-done{color:var(--ok)}
.rd-topics{list-style:none;margin:0;padding:0 8px 8px}
.rd-topics li{display:flex;gap:10px;align-items:center;padding:8px 6px;border-top:1px solid var(--rule)}
.rd-tt{flex:1;min-width:0;color:var(--fg);text-decoration:none;font-size:14.5px}
.rd-tt:hover{color:var(--accent);text-decoration:underline}
.rd-id{font-family:var(--mono);font-size:11px;color:var(--muted);margin-right:4px}
.rd-back{color:inherit}
@media(max-width:700px){
  .rd-part summary,.rd-topics li{flex-wrap:wrap}
  .rd-pt,.rd-tt{flex-basis:calc(100% - 60px)}
  .rd-c{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.rd-part summary::before{transition:none}}
.rd-free{padding:12px 16px;margin:0 0 12px;font-size:14.5px}
.rd-lock{white-space:nowrap}