/* DearDoctor doctor training — shared styles for the /training multi-page knowledge base. */
:root{
  --bg:#F7F8F5; --panel:#fff; --ink:#171B1A; --muted:#4D5B54; --line:#DCE3D8;
  --brand:#A5CF46; --brand-d:#171B1A; --brand-l:#D5E8A9;
  --ok-bg:#e7f6ec; --ok-line:#c7e8d2; --ok-ink:#1c6b39;
  --warn-bg:#fff8e1; --warn-line:#f0e2a8; --warn-ink:#6b571a;
  --draft-bg:#fdecec; --draft-line:#f3c9c9; --draft-ink:#a3271f;
  --radius:14px; --maxc:900px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@font-face{font-family:Manrope;src:url("/assets/fonts/Manrope.ttf") format("truetype");font-weight:200 800;font-display:swap}
body{margin:0;font-family:Manrope,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px}
a{color:#171B1A;text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{color:#171B1A;font-weight:600}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:30;background:#171B1A;color:#fff;
  display:flex;align-items:center;gap:14px;padding:12px 20px;flex-wrap:wrap}
.topbar .brand{font-weight:700;font-size:16px;text-decoration:none;color:#fff;white-space:nowrap}
.topbar .brand span{opacity:.8;font-weight:400}
.topbar a.home{color:#fff;text-decoration:none;font-size:14px;background:rgba(255,255,255,.16);
  padding:6px 12px;border-radius:8px;white-space:nowrap}
.topbar .grow{flex:1 1 auto}
.topbar input[type=search]{border:0;border-radius:9px;padding:9px 12px;font-size:14px;width:min(320px,42vw);
  background:rgba(255,255,255,.95);color:var(--ink)}

/* ---- layout ---- */
.layout{display:flex;gap:0;max-width:none;margin:0;align-items:flex-start}
.sidenav{flex:0 0 250px;position:sticky;top:57px;align-self:flex-start;max-height:calc(100vh - 57px);
  overflow:auto;padding:20px 12px 40px 20px}
.sidenav h4{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 8px 6px}
.sidenav a{display:block;text-decoration:none;color:var(--ink);font-size:14px;padding:7px 10px;border-radius:8px}
.sidenav a:hover{background:var(--brand-l)}
.sidenav a.active{background:var(--brand-l);color:#171B1A;font-weight:600}
.sidenav a.soon{color:#a2a8b3;pointer-events:none}
.sidenav a.soon::after{content:"soon";font-size:10px;background:#eceef2;color:#8a93a3;border-radius:6px;padding:1px 6px;margin-left:6px;text-transform:uppercase;letter-spacing:.03em}

/* ================= unified app header + two-level nav ================= */
.apphdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  background:#171B1A;color:#fff;border-bottom:1px solid #171B1A;padding:8px 18px;min-height:46px;box-sizing:border-box}
.apphdr .hlogo{display:flex;align-items:center;text-decoration:none}
.apphdr .hlogo img{height:30px;width:auto;display:block}
.apphdr .hspace{flex:1 1 auto}
.apphdr .hdrsearch{flex:0 1 520px;min-width:120px;box-sizing:border-box;border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;font-size:14px;background:#faf9fc;color:var(--ink)}
.apphdr .hdrsearch:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 2px var(--brand-l)}
.apphdr .sswrap{position:relative;flex:0 1 520px;min-width:120px;display:flex}
.apphdr .sswrap .hdrsearch{flex:1 1 auto;width:100%;min-width:0}
mark.sshit{background:#ffe58a;color:inherit;border-radius:2px;padding:0 1px}
.apphdr .sswrap .ssresults{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(40,20,60,.18);
  max-height:72vh;overflow:auto;padding:6px;text-align:left}
.ssresults .sshdr{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 10px 4px}
.ssresults .sshdr.sssub{border-top:1px solid var(--line);margin-top:4px}
.ssresults .ssitem{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.ssresults .ssitem:hover{background:var(--bg)}
.ssresults .sstitle{display:block;font-weight:600;font-size:13.5px}
.ssresults .ssblurb{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.ssresults .ssblurb mark{background:#ffe58a;color:inherit;border-radius:2px;padding:0 1px}
/* Secondary header action. White on deep teal is 11.55:1. Not a filled button, and not faded. */
.apphdr .logout,.topbar .logout{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:#fff;opacity:1;text-decoration:none;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:6px 12px;white-space:nowrap}
.apphdr .logout:hover,.topbar .logout:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;opacity:1}
.apphdr .logout:focus-visible,.topbar .logout:focus-visible{outline:2px solid #fff;outline-offset:2px;
  background:rgba(255,255,255,.16);border-color:#fff;color:#fff;opacity:1}
.apphdr .logout svg,.topbar .logout svg{color:inherit;opacity:1}
.adminwrap{position:relative}
.adminwrap[hidden]{display:none}
.adminbtn{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#171B1A;background:#fff;
  border:0;border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit}
.adminbtn:hover{background:#D5E8A9}
.adminpop{position:absolute;top:38px;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);width:214px;overflow:hidden;display:none;z-index:60}
.adminpop.open{display:block}
.adminpop .ahd{padding:6px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#4D5B54;background:#F7F8F5}
.adminpop a{display:block;padding:9px 12px;font-size:13.5px;color:var(--ink);text-decoration:none}
.adminpop a:hover{background:var(--brand-l)}
.adminpop a .soon{font-size:10px;color:#8a93a3;margin-left:6px;text-transform:uppercase;letter-spacing:.03em}
.adminpop .editmodetoggle{display:block;width:100%;text-align:left;padding:9px 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--brand-d);background:#F7F8F5;border:0;border-bottom:1px solid var(--line);cursor:pointer}
.adminpop .editmodetoggle:hover{background:var(--brand-l)}
.adminpop .editmodetoggle b{font-weight:800}

/* 1st-level main nav */
.mainnav{flex:0 0 300px;box-sizing:border-box;position:sticky;top:46px;align-self:flex-start;max-height:calc(100vh - 46px);
  overflow:auto;padding:18px 12px 30px 16px;background:#171B1A;color:#fff}
.mnlabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#D5E8A9;padding:0 8px 6px}
.mainnav a{display:flex;align-items:center;gap:9px;text-decoration:none;color:#F7F8F5;font-size:14px;
  padding:8px 10px;border-radius:9px;margin-bottom:1px}
.mainnav a .ni{display:inline-flex;width:18px;justify-content:center;align-items:center;color:inherit;opacity:.85}
.mainnav a .ni svg{width:17px;height:17px;display:block}
.mainnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.mainnav a.active{background:#D5E8A9;color:#171B1A;font-weight:600}
.mainnav a.active .ni{opacity:1}
/* `.mainnav a{display:flex}` (specificity class+element) beats the UA `[hidden]{display:none}`
   rule, so a hidden nav link would still SHOW. The manager links are injected hidden and only
   un-hidden for managers via nav.js — without this override they leaked to every logged-in user
   (doctors saw the Managers menu). Force any hidden nav item to stay hidden until revealed. */
.mainnav [hidden]{display:none!important}

/* Collapsible manager groups (nav.js). Header is a button styled like a nav link; the body holds
   the indented sub-links and collapses via .collapsed. .mainnav-prefixed so these beat `.mainnav a`. */
.mainnav .mn-group{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;font:inherit;font-size:14px;color:#F7F8F5;padding:8px 10px;border-radius:9px;margin-bottom:1px}
.mainnav .mn-group:hover{background:rgba(255,255,255,.1);color:#fff}
.mainnav .mn-group .ni{display:inline-flex;width:18px;justify-content:center;align-items:center;color:inherit;opacity:.85}
.mainnav .mn-group .ni svg{width:17px;height:17px;display:block}
.mn-chev{margin-left:auto;display:inline-flex;transition:transform .15s;opacity:.6}
.mn-chev svg{width:14px;height:14px;display:block}
.mainnav .mn-group.open .mn-chev{transform:rotate(90deg)}
.mn-groupbody.collapsed{display:none}
.mainnav .mn-sub{display:flex;align-items:center;text-decoration:none;color:#F7F8F5;font-size:13.5px;
  padding:6px 10px 6px 37px;border-radius:9px;margin-bottom:1px}
.mainnav .mn-sub:hover{background:rgba(255,255,255,.1);color:#fff}
.mainnav .mn-sub.active{background:#D5E8A9;color:#171B1A;font-weight:600}

/* 2nd-level nav — nested panel connected to the main nav (Training & Resources only) */
.subnav{flex:0 0 176px;position:sticky;top:46px;align-self:flex-start;max-height:calc(100vh - 60px);overflow:auto;
  margin:14px 0 0;padding:12px 10px 24px;background:#F7F8F5;border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:0 12px 12px 12px}
.subnav{flex-basis:190px}
.subnav .navsearch{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:13px;background:#fff;color:var(--ink);margin:0 0 12px}
.subnav .navgroup:last-child{margin-bottom:0}
/* sub-nav links (Modules list + On this page anchors) — one per line, like the main nav */
.subnav a{display:block;text-decoration:none;color:var(--ink);font-size:13.5px;line-height:1.35;
  padding:6px 9px;border-radius:8px}
.subnav .navgroup a:hover{background:var(--brand-l)}
.subnav .ng-mod a.active{background:#171B1A;color:#fff;font-weight:600}
.subnav .ng-page a.active{background:#171B1A;color:#fff}
/* 2nd-level peer items (the record Training, Teaching sessions, Other Videos) — same level as the
   Learning Modules header bar, each a clickable coloured bar */
.subnav .navgroup a.navhead{display:block;background:var(--brand);color:#171B1A;text-decoration:none;
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:6px 11px;border-radius:0}
.subnav .navgroup a.navhead:hover{background:var(--brand-d);color:#fff}
.subnav .navgroup a.navhead.active{background:#171B1A;color:#fff}

/* 3rd-level "On this page" — its own pop-out panel next to the Modules sub-nav (module pages only) */
.pagenav{flex:0 0 178px;position:sticky;top:46px;align-self:flex-start;max-height:calc(100vh - 60px);overflow:auto;
  margin:14px 0 0 10px;padding:12px 10px 20px;background:#fff;border:1px solid var(--line);
  border-left:3px solid #A5CF46;border-radius:0 12px 12px 12px;box-shadow:0 6px 18px rgba(31,36,48,.07)}
.pagenav .navgroup{margin:0}
.pagenav a{display:block;text-decoration:none;color:var(--ink);font-size:13.5px;line-height:1.35;padding:6px 9px;border-radius:8px}
.pagenav .navgroup a:hover{background:#D5E8A9;color:#171B1A}
.pagenav .ng-page a.active{background:#171B1A;color:#fff}

.content{flex:1 1 auto;min-width:0;max-width:var(--maxc);margin:0 auto;padding:26px 26px 90px}

/* ---- headings / prose ---- */
.content h1{font-size:30px;line-height:1.2;margin:4px 0 6px}
.content .lede{color:var(--muted);font-size:17px;margin:0 0 4px}
.content h2{font-size:22px;margin:34px 0 10px;padding-top:10px;border-top:1px solid var(--line)}
.content h3{font-size:17px;margin:20px 0 6px}
.content p,.content li{font-size:16px}
.content ul,.content ol{padding-left:22px}
.content li{margin:3px 0}
.provenance{font-size:12.5px;color:var(--muted);margin:2px 0 0;font-style:italic}
.crumb{font-size:13px;color:var(--muted);margin:0 0 8px}
.crumb a{color:var(--muted)}

/* ---- callouts ---- */
.callout{border-radius:12px;padding:14px 16px;margin:16px 0;border:1px solid var(--line)}
.callout h3{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.callout.key{background:var(--brand-l);border-color:#768479}
.callout.key h3{color:var(--brand-d)}
.callout.do{background:var(--ok-bg);border-color:var(--ok-line)}
.callout.do h3{color:var(--ok-ink)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout.warn h3{color:var(--warn-ink)}
.callout.draft{background:var(--draft-bg);border-color:var(--draft-line)}
.callout.draft h3{color:var(--draft-ink)}
.callout ul{margin:0;padding-left:20px}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}

/* ---- tables ---- */
table.data{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.data th,table.data td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{background:#F7F8F5;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
table.data tr:last-child td{border-bottom:0}

/* ---- resource + research cards ---- */
.reslist{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.reslist a{display:flex;align-items:center;gap:10px;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--ink)}
.reslist a:hover{border-color:var(--brand);background:#D5E8A9}
.reslist .ic{font-size:16px;flex:0 0 auto}
.reslist .t{font-weight:600}
.reslist .s{color:var(--muted);font-size:13px}
.reslist .meta{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}

details.rs{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin:8px 0}
details.rs>summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none;display:flex;gap:8px;align-items:baseline}
details.rs>summary::-webkit-details-marker{display:none}
details.rs>summary .one{font-weight:400;color:var(--muted);font-size:14px}
details.rs[open]>summary{border-bottom:1px solid var(--line)}
details.rs .rsbody{padding:6px 16px 14px}
details.rs .rsbody h4{margin:12px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--brand-d)}
details.rs .rsbody .cav{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;padding:8px 12px;font-size:14px;color:var(--warn-ink)}
.rslink{font-size:13px}

/* ---- module grid (home) ---- */
.hero{padding:30px 26px 6px;max-width:var(--maxc);margin:0 auto}
.hero h1{font-size:30px;margin:0 0 6px}
.hero p{color:var(--muted);font-size:17px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
  max-width:var(--maxc);margin:14px auto;padding:0 26px 80px}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;transition:border-color .12s,transform .12s}
.card:hover{border-color:var(--brand);transform:translateY(-1px)}
.card.soon{opacity:.6;pointer-events:none}
.card .tag{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);font-weight:700}
.card h3{margin:6px 0 4px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px}
.card .pill{display:inline-block;font-size:11px;background:#eceef2;color:#8a93a3;border-radius:6px;padding:1px 7px;text-transform:uppercase;letter-spacing:.03em;margin-top:8px}
mark{background:#fff1a8;padding:0 2px}

/* ---- videos ---- */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;margin:12px 0}
.vidcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ytfacade{position:relative;aspect-ratio:16/9;cursor:pointer;background:#000}
.ytfacade img{width:100%;height:100%;object-fit:cover;display:block}
.ytfacade .ytplay{position:absolute;inset:0;margin:auto;width:54px;height:54px;border:0;border-radius:50%;
  background:rgba(122,79,158,.92);cursor:pointer}
.ytfacade .ytplay::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.ytfacade iframe{width:100%;height:100%;border:0;display:block}
.vidcap{font-size:13.5px;color:var(--muted);padding:9px 12px;margin:0}
/* protected Cloudflare Stream players */
.ytfacade.cf-video{cursor:pointer}
.ytfacade.cf-video.cf-loading{opacity:.65}
.ytfacade.cf-video.cf-error::after{content:"Couldn't load — check you're signed in";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:#e3e7ed;font-size:13px;padding:16px;text-align:center}
.cf-wm{position:absolute;z-index:5;top:8%;left:6%;pointer-events:none;white-space:nowrap;
  font:600 12px system-ui,-apple-system,sans-serif;color:rgba(255,255,255,.5);
  text-shadow:0 1px 3px rgba(0,0,0,.7);transition:top 1.2s ease,left 1.2s ease}

/* ---- glossary ---- */
dl.glossary,dl.qref{margin:12px 0;display:grid;gap:0}
dl.glossary dt,dl.qref dt{font-weight:700;color:var(--brand-d);margin-top:12px}
dl.glossary dd,dl.qref dd{margin:2px 0 0;padding:0 0 10px;border-bottom:1px solid var(--line);color:var(--ink)}

/* ---- legacy hub content compatibility ----
   Existing clinical sections (ported from the single-page hub) use these class names.
   Styled here to match the new look so the content renders cleanly on module pages. */
.block{margin:0 0 18px}
.bhead{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;
  margin:22px 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 8px;text-transform:none;letter-spacing:0}
.pill.site{background:#eef0f3;color:#8a93a3}
.pill.proto{background:var(--ok-bg);color:var(--ok-ink)}
.pill.draftpill{background:var(--draft-bg);color:var(--draft-ink)}
.body h3{font-size:17px;margin:18px 0 6px;color:var(--ink)}
.body p,.body li{font-size:16px}
a.clink,a.extlink{color:var(--brand-d)}
.src{font-size:12.5px;color:var(--muted);font-style:italic}
/* callout boxes */
.box,.boxblock{border-radius:12px;padding:14px 16px;margin:16px 0;border:1px solid var(--line);background:var(--panel)}
.box.clinic{background:var(--ok-bg);border-color:var(--ok-line)}
.box.draft{background:var(--draft-bg);border-color:var(--draft-line)}
.box.takeaway,.takeaway{background:var(--brand-l);border:1px solid #768479;border-radius:12px;padding:14px 16px;margin:16px 0}
.dbanner{display:block;font-weight:700;color:var(--draft-ink);margin-bottom:6px}
/* pdf chips */
.pdfbtn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin:4px 6px 4px 0;color:var(--ink);font-size:14px;font-weight:600}
.pdfbtn:hover{border-color:var(--brand);background:#D5E8A9}
.pdfico{flex:0 0 auto}
/* teaching-session materials (PDF list + manager upload, teaching-sessions.html) */
.sessdocs{padding:0 12px}
.sessdocs:empty{display:none}
.sd-list{padding-bottom:8px}
.sd-item{display:inline-flex;align-items:center}
.sd-item .pdfbtn{font-size:13px;padding:6px 10px}
.sd-del{border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:2px 8px 2px 2px;margin-right:2px}
.sd-del:hover{color:#b3261e}
.sd-manage{border-top:1px dashed var(--line);padding:9px 0 11px;margin-top:2px}
.sd-upbtn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.sd-upbtn:hover{border-color:var(--brand);background:#D5E8A9}
.sd-upbtn:disabled{opacity:.6;cursor:default}
.sd-vlink{margin-top:9px;font-size:12.5px;color:var(--muted)}
.sd-vlink span{display:block;margin-bottom:5px}
.sd-vlink input{width:62%;max-width:280px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;margin-right:6px}
.sd-vlink button{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 10px;font-size:12.5px;font-weight:600;cursor:pointer}
.sd-vlink button:hover{border-color:var(--brand)}
/* images */
.inlineimg,.asset img,.body img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);margin:12px 0}
/* bare tables in legacy content */
.body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.body table th,.body table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.body table th{background:#F7F8F5;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.modnum{display:none}

/* ---- coloured / collapsible nav groups ---- */
.navgroup{margin:0 0 16px;border-left:4px solid var(--line)}
.navgroup h4{margin:0 0 4px;padding:6px 11px;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.navgroup .ni{display:inline-flex;width:18px;justify-content:center;align-items:center;margin-right:4px;vertical-align:-3px;color:inherit;opacity:.9}
.navgroup .ni svg{width:16px;height:16px;display:block}
/* group hue = header bar + left line share the colour; selected link is a deeper shade so it stands out */
.ng-team{border-left-color:#A5CF46}
.ng-team h4{background:#171B1A}
.ng-team a:hover{background:#D5E8A9;color:#171B1A}
.ng-team a.active{background:#171B1A;color:#fff}
.ng-mod{border-left-color:var(--brand)}
.ng-mod h4{background:var(--brand)}
.ng-mod a:hover{background:var(--brand-l);color:var(--brand-d)}
.ng-mod a.active{background:#171B1A;color:#fff;font-weight:600}
.ng-page{border-left-color:#A5CF46}
.ng-page h4{background:#171B1A}
.ng-page a:hover{background:#D5E8A9;color:#171B1A}
.ng-page a.active{background:#171B1A;color:#fff}
/* collapsible Modules group — white +/- disc on the coloured header bar */
.ngtoggle{cursor:pointer;user-select:none}
.ngtoggle .ngchev{flex:0 0 auto;position:relative;width:24px;height:24px;border-radius:50%;background:#fff;font-size:0;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.ngtoggle .ngchev::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:2.6px;border-radius:2px;background:var(--brand)}
.ngtoggle .ngchev::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.6px;height:11px;border-radius:2px;background:var(--brand);opacity:0;transition:opacity .12s}
.ngtoggle:hover .ngchev{background:#D5E8A9}
.navgroup.collapsed .ngbody{display:none}
.navgroup.collapsed .ngtoggle .ngchev::after{opacity:1}

/* ---- floating action buttons + Ask the guide panel ---- */
/* Desktop: dock on the LEFT (permanent-sidebar side) so it never clashes with scrolling content on
   the right. The ≤820px block below returns it to the right, where the nav becomes a drawer. */
.fabwrap{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fab{border:0;border-radius:24px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 18px rgba(40,20,60,.22);display:inline-flex;align-items:center;gap:8px;color:#fff}
.fab.ask{background:var(--brand)}
.fab.chat{background:#1f7a8c}
.fab svg{width:18px;height:18px;flex:0 0 auto}
.askpanel{position:fixed;left:18px;bottom:78px;z-index:61;width:min(390px,92vw);height:min(540px,72vh);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(40,20,60,.3);
  display:none;flex-direction:column;overflow:hidden}
.askpanel.open{display:flex}
.askhead{background:var(--brand);color:#171B1A;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:600}
.askhead button{background:transparent;border:0;color:#171B1A;font-size:20px;cursor:pointer;line-height:1}
.askmsgs{flex:1;overflow:auto;padding:14px;font-size:14px}
.askmsg{margin:0 0 14px;line-height:1.5;white-space:pre-wrap}
.askmsg.u{color:var(--brand-d);font-weight:600}
.askmsg .who{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:2px;font-weight:600}
.askintro{color:var(--muted);font-size:13px}
.askform{display:flex;gap:6px;border-top:1px solid var(--line);padding:10px}
.askform input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px}
.askform button{border:0;background:var(--brand);color:#171B1A;border-radius:10px;padding:0 14px;font-weight:600;cursor:pointer}

/* Expandable "Key points" / research summaries (Resources page + module bottoms) */
.reslist li{list-style:none}
details.ressum{margin:6px 0 2px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
details.ressum>summary{cursor:pointer;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--brand-d);list-style:none;user-select:none}
details.ressum>summary::-webkit-details-marker{display:none}
details.ressum>summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--ink);transition:transform .15s}
details.ressum[open]>summary::before{transform:rotate(90deg)}
details.ressum[open]>summary{border-bottom:1px solid var(--line)}
.ressum .rsbody{padding:10px 14px 12px;font-size:13.5px;line-height:1.5}
.ressum .rsbody .rspurpose{margin:0 0 7px;color:var(--muted);font-style:italic}
.ressum .rsbody ul{margin:0 0 8px;padding-left:18px}
.ressum .rsbody li{list-style:disc;margin:4px 0}
.ressum .rslink{margin:0}
.ressum .rslink a{font-size:13px;font-weight:600;color:var(--brand-d);text-decoration:none}
#research-summaries{border-top:1px solid var(--line);margin-top:26px}

/* Content protection: no text selection on training content (deterrent).
   Editors, form fields, chat and the assistant keep selection so they stay usable. */
body:not(.editing) .content{-webkit-user-select:none;-ms-user-select:none;user-select:none}
.content [contenteditable="true"],.content input,.content textarea{-webkit-user-select:text;user-select:text}
.content img{-webkit-user-drag:none;user-drag:none}

/* Contacts block in the left menu */
.mainnav .footcontacts{margin:16px 4px 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:12px}
.mainnav .footcontacts>summary{cursor:pointer;font-weight:700;color:#fff;list-style:none;display:flex;align-items:center;gap:6px;padding:2px 6px}
.mainnav .footcontacts>summary::-webkit-details-marker{display:none}
.mainnav .footcontacts>summary::after{content:"＋";margin-left:auto;color:var(--muted);font-weight:700}
.mainnav .footcontacts[open]>summary::after{content:"－"}
.mainnav .footcontact{margin:8px 6px;line-height:1.5;color:#F7F8F5}
.mainnav .footcontact a{display:inline;background:none;padding:0;color:#D5E8A9;text-decoration:underline;font-size:12px;word-break:break-word}
.mainnav .footcontact a:hover{background:none;text-decoration:underline}
.mainnav .footcontacts .fcedit{margin-left:6px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;padding:0 4px}
.mainnav .footcontacts .fcedit:hover{color:var(--brand-d)}
.mainnav .footcontacts .fcbody.fcediting{outline:1px dashed var(--brand);outline-offset:2px;border-radius:6px;background:#fff}

/* Edit mode (managers) */
/* Edit-mode helpers dock on the RIGHT (the FABs now own the bottom-left), so they never overlap. */
.editlinkbtn{position:fixed;right:18px;bottom:16px;z-index:9500;background:#fff;color:var(--brand-d);border:1px solid var(--brand);
  border-radius:24px;padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(45,28,70,.2)}
.editlinkbtn:hover{background:var(--brand-l)}
.editbtn{position:fixed;right:18px;bottom:16px;z-index:9500;background:var(--brand);color:#171B1A;border:0;
  border-radius:24px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(45,28,70,.28)}
.editbtn:hover{background:#b8dd66;color:#171B1A}
.editstatus{position:fixed;right:18px;bottom:62px;z-index:9500;background:#1f2430;color:#fff;font-size:12px;
  padding:5px 11px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.25)}
body.editing [data-edit]{outline:1px dashed var(--brand);outline-offset:3px;border-radius:4px;cursor:text}
body.editing [data-edit]:hover{outline-color:var(--brand-d);background:rgba(122,79,158,.05)}
body.editing [data-edit]:focus{outline:2px solid var(--brand);background:#fff}

/* Nav drawer — desktop: transparent wrapper so the 3 nav columns keep their grid slots */
.navdrawer{display:contents}
.navtoggle{display:none}
.navclose{display:none}
.navbackdrop{display:none}

@media(max-width:820px){
  .sidenav{display:none}
  /* Sidebar is off-canvas, so an unpadded .wrap sits flush with the screen edge. */
  .layout>.wrap{padding-left:16px;padding-right:16px}
  .content{padding:20px 18px 80px;width:100%;min-width:0}
  .content h1{font-size:25px}
  /* Nav is a left drawer on mobile — keep the FABs on the right, clear of it. */
  .fabwrap{left:auto;right:12px;bottom:12px;align-items:flex-end}
  .askpanel{left:auto;right:12px}

  /* Hamburger in the header (far left) */
  .apphdr .navtoggle{display:inline-flex;align-items:center;gap:6px;order:-1;background:var(--brand);color:#171B1A;
    border:0;border-radius:9px;padding:8px 11px;font-size:14px;font-weight:600;cursor:pointer;flex:0 0 auto}
  .apphdr .navtoggle svg{width:18px;height:18px}
  /* Search drops to its own full-width second row so it isn't squashed */
  .apphdr{flex-wrap:wrap;row-gap:8px}
  .apphdr .sswrap{order:10;flex:1 1 100%;max-width:none;min-width:0}

  /* Pre-JS (before the columns are wrapped): hide raw columns so content is full width, no flash */
  .layout>.mainnav,.layout>.subnav,.layout>.pagenav{display:none}

  /* The nav columns become a single slide-in drawer */
  .navdrawer{display:block;position:fixed;top:0;left:0;width:86%;max-width:340px;height:100vh;height:100dvh;
    background:#171B1A;z-index:80;transform:translateX(-100%);transition:transform .25s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 0 40px rgba(20,16,30,.3);padding:12px 12px 48px}
  body.navopen .navdrawer{transform:none}
  .navdrawer .mainnav,.navdrawer .subnav,.navdrawer .pagenav{position:static;top:auto;max-height:none;
    flex:none;width:auto;overflow:visible;margin:0 0 6px}
  .navdrawer .mainnav{padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .navdrawer .navclose{display:block;margin:0 0 4px auto;background:none;border:0;color:#fff;
    font-size:28px;line-height:1;padding:0 6px;cursor:pointer}

  .navbackdrop{display:block;position:fixed;inset:0;background:rgba(20,16,30,.45);z-index:70;
    opacity:0;visibility:hidden;transition:opacity .25s}
  body.navopen .navbackdrop{opacity:1;visibility:visible}
}