/* EndoCann CME deck design system — /ECS/CME/
   Pairs with ec-shell.css, ec-pages.css (tokens/hero) and ec-evidence.css
   (table component, toast, dock, theme switcher).

   Replaces the page's 13KB inline block. Class names match the engine's DOM
   contract (.slide, .qcard, .teaching-box, …) so the renderer is untouched.
   Per-module accent colours still arrive as --th1/--th2/--th3 set on <html>. */

/* ── Deck shell ───────────────────────────────────────────────────────────── */
.cme-wrap{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter)}
/* ec-pages.css scopes the hero's vertical padding to `.ec-hero .ec-wrap`; the
   deck uses the wider .cme-wrap inside the hero, so it needs its own rule or the
   hero renders with no top/bottom padding. Matches ec-evidence.css. */
.ec-hero .cme-wrap{padding:clamp(48px,6.5vw,80px) var(--gutter) clamp(52px,7vw,84px)}
.cme-app{padding-bottom:clamp(40px,6vw,72px)}
.cme-app[data-loading] .slide{min-height:50vh;display:grid;place-items:center}
.cme-app[data-loading] .slide::after{content:"Loading the deck…";color:var(--ev-muted);
  font-family:var(--font-head);font-weight:700}
.cme-error{background:var(--ev-panel);border:1px solid var(--ev-line);
  border-left:4px solid #a8442f;border-radius:var(--r-lg);padding:22px;margin:22px 0;
  color:var(--ev-ink)}
.cme-error p{margin:8px 0 0;color:var(--ev-muted);font-size:15px}

/* Progress + module rail */
.cme-bar{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--ev-bg) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ev-line);padding:10px 0}
.cme-prog{display:flex;align-items:center;gap:12px;font-family:var(--font-head);
  font-size:12.5px;font-weight:700;color:var(--ev-muted)}
.prog-track{flex:1;height:6px;border-radius:var(--pill);background:var(--ev-inset);
  overflow:hidden}
.prog-bar{display:block;height:100%;width:0;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--th1,#0b5a37),var(--ecgold));
  transition:width .3s ease}
.module-rail{display:flex;gap:6px;overflow-x:auto;margin-top:10px;scrollbar-width:none}
.module-rail::-webkit-scrollbar{display:none}
.mod{flex:none;font:inherit;font-family:var(--font-head);font-weight:700;font-size:13px;
  color:var(--ev-muted);background:none;border:1px solid var(--ev-line);
  border-radius:var(--pill);padding:7px 14px;cursor:pointer;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.mod:hover{border-color:var(--th1,var(--ecg2));color:var(--ev-head)}
.mod.active{background:var(--th1,var(--ecg));border-color:transparent;color:#fff}

/* ── Slide card ───────────────────────────────────────────────────────────── */
.slide{position:relative;overflow:hidden;background:var(--ev-card);
  border:1px solid var(--ev-line);border-radius:var(--r-xl);
  box-shadow:var(--ev-shadow-md);margin:22px 0}
.slide-accent{height:4px;background:linear-gradient(90deg,var(--th1,#0b5a37),var(--th2,#073d26),var(--ecgold))}
.bg-orb{position:absolute;width:420px;height:420px;top:-180px;right:-120px;border-radius:50%;
  background:radial-gradient(circle,var(--th1-soft,rgba(11,90,55,.12)),transparent 70%);
  filter:blur(50px);pointer-events:none}
.slide-inner{position:relative;padding:clamp(20px,3vw,34px)}

/* Chips */
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--pill);
  background:var(--ev-inset);color:var(--ev-muted);border:1px solid var(--ev-line)}
.chip.module{background:var(--th1-soft,#eef6f0);color:var(--th1,var(--ecg));
  border-color:transparent}
.chip.ev.safety{background:#fbeee9;color:#a8442f;border-color:#f0ddd6}
.chip.ev.g1{background:#e8f5ee;color:#0b5a37;border-color:#c8e6d5}
.chip.ev.g2{background:#e7f0fb;color:#125e9c;border-color:#c7dcf3}
.chip.ev.g3{background:#fdf3e0;color:#8a6414;border-color:#f0dfba}
.chip.ev.cur{background:#eef3f7;color:#3c5666;border-color:#d6e2eb}

/* Slide typography */
.slide .title{font-family:var(--font-head);font-size:clamp(23px,3.2vw,34px);font-weight:800;
  letter-spacing:-.02em;line-height:1.15;color:var(--ev-head);margin:0 0 10px}
.slide .subtitle{margin:0 0 20px;color:var(--ev-muted);font-size:16.5px;line-height:1.6;
  max-width:70ch}

/* Callouts */
.teaching-box,.ev-note-box,.dose-note,.def-block{border-radius:var(--r);padding:16px 18px;
  margin:0 0 18px;border:1px solid var(--ev-line);background:var(--ev-inset)}
.teaching-box{border-left:4px solid var(--ecgold);background:var(--ev-panel)}
.dose-note{border-left:4px solid var(--th1,var(--ecg2))}
.def-block{border-left:4px solid var(--ecg2)}
.lab,.refs-label{display:block;font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ev-muted2);margin-bottom:6px}
.teaching-box .txt,.ev-note .txt,.dose-note .txt{color:var(--ev-ink);font-size:15.5px;
  line-height:1.62}
.def-block p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ev-ink)}
.def-block b{font-family:var(--font-head);color:var(--ev-head)}

/* Layout: visual + content */
.layout{display:grid;grid-template-columns:.62fr 1.38fr;gap:20px;align-items:start}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
.visual-panel{background:var(--ev-inset);border:1px solid var(--ev-line);
  border-radius:var(--r-lg);padding:14px;position:sticky;top:120px}
@media(max-width:860px){.visual-panel{position:static}}
.visual-head b{display:block;font-family:var(--font-head);font-size:13.5px;color:var(--ev-head)}
.visual-head span{display:block;font-size:12px;color:var(--ev-muted2);margin-bottom:8px}
.visual-wrap svg{width:100%;height:auto;display:block}
.visual-caption{margin-top:8px;font-size:12.5px;color:var(--ev-muted2);line-height:1.5}

/* Quad grid */
.quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media(max-width:560px){.quad-grid{grid-template-columns:1fr}}
.qcard{background:var(--ev-panel);border:1px solid var(--ev-line);border-radius:var(--r);
  padding:15px 16px}
.qcard-label{display:block;font-family:var(--font-head);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.qcard.def .qcard-label{color:#0b5a37}
.qcard.mech .qcard-label{color:#125e9c}
.qcard.clin .qcard-label{color:#8a6414}
.qcard.safe .qcard-label{color:#a8442f}
.qcard-body{font-size:14.5px;line-height:1.6;color:var(--ev-ink)}
.ev-note{background:var(--ev-inset);border:1px solid var(--ev-line);border-radius:var(--r);
  padding:15px 17px;margin-bottom:18px}

/* Key points + mechanism steps */
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media(max-width:560px){.kgrid{grid-template-columns:1fr}}
.kcard{background:var(--ev-panel);border:1px solid var(--ev-line);border-radius:var(--r);
  padding:15px 16px}
.kcard h3{margin:0 0 5px;font-family:var(--font-head);font-size:14.5px;font-weight:700;
  color:var(--ev-head)}
.kcard p{margin:0;font-size:14px;line-height:1.58;color:var(--ev-muted)}
.step-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.step-row{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;
  background:var(--ev-panel);border:1px solid var(--ev-line);border-radius:var(--r);
  padding:13px 15px}
.step-num{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:14px;color:#fff;
  background:var(--th1,var(--ecg2))}
.step-body{font-size:14.5px;line-height:1.58;color:var(--ev-ink)}

/* Clinical pearls (recovered content) */
.pearls{background:var(--ev-panel);border:1px solid var(--ev-line);
  border-left:4px solid var(--ecgold);border-radius:var(--r);padding:15px 18px;margin-bottom:18px}
.pearls ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.pearls li{font-size:14.5px;line-height:1.58;color:var(--ev-ink)}

/* Timeline (recovered content) */
.timeline{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.timeline li{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;
  background:var(--ev-panel);border:1px solid var(--ev-line);border-radius:var(--r);
  padding:13px 15px}
.tl-year{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--th1,var(--ecg2))}
.timeline b{font-family:var(--font-head);color:var(--ev-head);font-size:14.5px}
.timeline p{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ev-muted)}

/* Self-assessment MCQ (recovered content — had no UI at all) */
.mcq{background:var(--ev-panel);border:1px solid var(--ev-line);
  border-left:4px solid #125e9c;border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.mcq-stem{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--ev-ink);font-weight:600}
.mcq-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mcq-opt{width:100%;text-align:left;font:inherit;font-size:14.5px;color:var(--ev-ink);
  background:var(--ev-inset);border:1.5px solid var(--ev-line);border-radius:var(--r-sm);
  padding:11px 14px;cursor:pointer;transition:border-color .16s ease,background .16s ease}
.mcq-opt:hover:not(:disabled){border-color:#125e9c}
.mcq-opt:disabled{cursor:default}
.mcq-opt.is-correct{background:#e8f5ee;border-color:#0b5a37;color:#0b3320;font-weight:600}
.mcq-opt.is-wrong{background:#fbeee9;border-color:#a8442f;color:#7a2f1e}
.mcq-explain{margin-top:12px;padding-top:12px;border-top:1px solid var(--ev-line);
  font-size:14.5px;line-height:1.6;color:var(--ev-ink)}
.mcq-explain b{font-family:var(--font-head);color:var(--ev-head)}

/* Details blocks (extended notes, references) */
.slide details{background:var(--ev-panel);border:1px solid var(--ev-line);
  border-radius:var(--r);padding:2px 18px;margin-bottom:12px}
.slide summary{cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:15px;
  color:var(--ev-head);padding:14px 0;list-style:none;display:flex;justify-content:space-between;
  gap:12px;align-items:center}
.slide summary::-webkit-details-marker{display:none}
.slide .arr{color:var(--ev-accent);font-weight:800;transition:transform .2s ease}
.slide details[open] .arr{transform:rotate(45deg)}
.det-body{padding-bottom:14px}
.det-body p{margin:0 0 12px;font-size:14.5px;line-height:1.68;color:var(--ev-ink);max-width:75ch}
.det-body ul,.det-body ol{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;
  gap:8px}
.det-body li{font-size:14.5px;line-height:1.6;color:var(--ev-ink)}
.ref-list a{color:var(--ev-accent);font-weight:600;white-space:nowrap}

/* Evidence links */
.refs-wrap{border-top:1px solid var(--ev-line);padding-top:16px;margin-top:4px}
.ref-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ref-pill{font-family:var(--font-head);font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--ev-head);background:var(--ev-inset);border:1px solid var(--ev-line);
  border-radius:var(--pill);padding:7px 13px;transition:border-color .16s ease}
.ref-pill:hover{border-color:var(--ev-accent)}
.ref-pill.primary{background:var(--ecg);color:#fff;border-color:transparent}
.ref-pill .ext{opacity:.7}

/* ── Bottom navigation ────────────────────────────────────────────────────── */
.cme-nav{position:sticky;bottom:0;z-index:30;display:grid;
  grid-template-columns:.8fr 1.4fr .8fr;gap:10px;align-items:center;
  background:color-mix(in srgb,var(--ev-bg) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--ev-line);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px))}
.navbtn,.goto{min-height:46px;font:inherit;font-family:var(--font-head);font-weight:700;
  font-size:14.5px;border-radius:var(--r-sm);border:1.5px solid var(--ev-line);
  background:var(--ev-panel);color:var(--ev-head);cursor:pointer;padding:0 16px}
.navbtn:hover:not(:disabled){border-color:var(--ev-accent)}
.navbtn:disabled{opacity:.45;cursor:not-allowed}
.navbtn.primary{background:var(--ecg);color:#fff;border-color:transparent}
.navbtn.primary:hover{background:var(--ecg2)}
.goto{width:100%}

/* ── Static syllabus (crawlable; also a jump-to index) ────────────────────── */
.syllabus{margin:clamp(34px,5vw,54px) 0}
.syl-module{background:var(--ev-panel);border:1px solid var(--ev-line);
  border-radius:var(--r-lg);padding:2px 20px;margin-bottom:12px}
.syl-module>summary{cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:16px;
  color:var(--ev-head);padding:16px 0;list-style:none;display:flex;justify-content:space-between;
  gap:12px;align-items:center}
.syl-module>summary::-webkit-details-marker{display:none}
.syl-count{font-size:12.5px;font-weight:600;color:var(--ev-muted2)}
.syl-list{list-style:none;margin:0;padding:0 0 16px;display:flex;flex-direction:column;gap:2px}
.syl-list a{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;
  padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ev-ink);
  transition:background .16s ease}
.syl-list a:hover{background:var(--ev-inset)}
.syl-n{font-family:var(--font-head);font-weight:700;font-size:12.5px;color:var(--ev-muted2)}
.syl-list b{font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--ev-head);
  display:block}
.syl-list span{font-size:13px;color:var(--ev-muted);line-height:1.5}

@media print{
  .cme-bar,.cme-nav,.ec-nav,.ec-footer,.ev-themes{display:none!important}
  .slide{break-inside:avoid;box-shadow:none}
  .slide details{display:block!important}
  .det-body{display:block!important}
}