/* HKA learning portal. Serious and sharp: a dark side menu, a plain working area, sentences before charts, HKA red only where there is something to do. */
:root{
  --red:#D50032;--red-deep:#a8002a;--red-soft:#fdecef;
  --ink:#1c2430;--muted:#5b6574;--faint:#8a93a1;--line:#e2e5ea;--soft:#f2f4f7;--bg:#f7f8fa;--card:#ffffff;
  --ok:#17803d;--ok-soft:#e6f4ea;--warn:#a05f00;--warn-soft:#fff3dc;--bad:#b3261e;--idle:#7a8493;--idle-soft:#eceff3;
  --side:#10151c;--side-2:#1b2330;--side-ink:#c9d0da;--side-faint:#8893a3;
  --r:10px;--r-sm:7px;
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#e8ebf0;--muted:#a1a9b6;--faint:#7c8696;--line:#2a303a;--soft:#1c212a;--bg:#12151b;--card:#171b22;--red-soft:#3a1520;
  --ok:#52c97e;--ok-soft:#12301e;--warn:#e3a240;--warn-soft:#35260f;--bad:#f0877f;--idle:#8e94a3;--idle-soft:#22262e;
}}
*{box-sizing:border-box}
:where(svg[aria-hidden="true"]){width:1.2em;height:1.2em;flex:none}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:var(--red)}
h1{font-size:23px;line-height:1.2;margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:15px;margin:26px 0 10px;font-weight:600}
h3{font-size:15px;margin:0 0 2px;font-weight:600}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}.hide{display:none!important}.sp{flex:1}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.center{text-align:center}

/* ---------- layout: dark side menu + working area (instructors) ---------- */
body.admin{display:grid;grid-template-columns:208px minmax(0,1fr)}
body.admin.noauth{display:block}
.side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:16px 10px;position:sticky;top:0;height:100vh}
body.noauth .side{display:none}
.side .brand{display:flex;align-items:center;gap:9px;padding:0 6px 16px;color:#fff}
.side .brand img{width:26px;height:24px}
.side .brand span{font-weight:600;line-height:1.15;font-size:14px}.side .brand small{display:block;color:var(--side-faint);font-weight:400;font-size:11px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);color:var(--side-ink);text-decoration:none;font-size:14px;font-weight:500}
.side nav a:hover{background:var(--side-2);color:#fff}
.side nav a.on{background:var(--side-2);color:#fff;box-shadow:inset 3px 0 0 var(--red)}
.side nav svg{width:17px;height:17px}
.side .foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid #263040;font-size:12px;color:var(--side-faint);display:grid;gap:6px}
.side .foot button{all:unset;cursor:pointer;color:var(--side-ink);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.main{padding:22px 32px 70px;max-width:1240px;width:100%}
@media (max-width:820px){
  body.admin{display:block}
  .side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:8px 12px;gap:8px}
  .side .brand{padding:0 8px 0 0}.side nav{flex-direction:row}.side .foot{margin:0 0 0 auto;border:0;padding:0;display:flex;gap:10px;align-items:center}
  .main{padding:16px 14px 60px}
}

/* ---------- simple top bar (trainee pages) ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line)}
.top .in{max-width:900px;margin:0 auto;padding:9px 18px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600}
.top .brand img{width:26px;height:24px}
.top .brand small{display:block;font-weight:400;color:var(--muted);font-size:12px;line-height:1.1}
.wrap{max-width:900px;margin:0 auto;padding:24px 18px 70px}

/* ---------- page head, tabs, lede ---------- */
.crumb{font-size:12px;color:var(--faint);margin-bottom:4px}.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink);text-decoration:underline}
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.phead .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 18px;flex-wrap:wrap}
.tabs a{padding:9px 14px;color:var(--muted);text-decoration:none;font-weight:500;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}.tabs a.on{color:var(--ink);border-bottom-color:var(--red);font-weight:600}
.tabs .n{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:5px}
.lede{font-size:16px;line-height:1.55;margin:2px 0 12px;max-width:80ch}.lede b{font-family:var(--mono);font-weight:600}.lede .bad{color:var(--bad);font-weight:600}
.stack{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;background:var(--idle-soft)}
.stack i{display:block;height:100%}.stack .f{background:var(--ok)}.stack .p{background:#d99a1c}.stack .n{background:#cfd4dc}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:7px 0 18px}
.legend .d{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}

/* ---------- buttons ---------- */
.btn{appearance:none;border:1px solid var(--red);background:var(--red);color:#fff;border-radius:var(--r-sm);padding:7px 13px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:#c9ced6}.btn.ghost:hover{background:var(--soft)}
.btn.sm{padding:3px 9px;font-size:13px}.btn.lg{padding:10px 18px;font-size:16px}
.btn.link{background:none;border:0;color:var(--red);padding:2px 4px;font-weight:600}.btn.link:hover{background:var(--red-soft)}
.btn:disabled{opacity:.45;cursor:default}
.btn svg{width:15px;height:15px}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.card.soft{background:var(--soft);border-color:transparent}
.card.narrow{max-width:400px;margin:70px auto}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel .ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.panel .pr{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:14px}
.panel .pr:last-child{border-bottom:0}
.panel .pr .why{font-size:12px;color:var(--muted)}
.panel .pf{padding:9px 14px;border-top:1px solid var(--line);background:var(--soft);display:flex;gap:8px;flex-wrap:wrap}
.panel .empty{padding:14px;color:var(--muted);font-size:14px}
.note{background:var(--soft);border-left:3px solid var(--red);padding:9px 13px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:10px 0}
.grid{display:grid;gap:12px}
.bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--red)}.bar.grey i{background:#6b7584}
.gh{font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 4px}

/* ---------- chips and dots ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:1px 9px;font-size:12px;font-weight:500;background:var(--soft);color:var(--muted);white-space:nowrap}
.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.finished{color:var(--ok);background:var(--ok-soft)}.chip.in_progress{color:var(--warn);background:var(--warn-soft)}.chip.not_started{color:var(--idle);background:var(--idle-soft)}
.chip.plain:before{display:none}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--idle-soft);border:2px solid var(--idle)}
.dot.in_progress{background:var(--warn-soft);border-color:var(--warn)}.dot.finished{background:var(--ok);border-color:var(--ok)}

/* ---------- tables ---------- */
.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
th{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;background:var(--soft)}
tbody tr:hover{background:var(--soft)}tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.who{display:flex;align-items:center;gap:9px;min-width:150px}
.av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:11px;flex:none;background:var(--soft)!important;color:var(--muted)}
.cert{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--ok);font-size:13px}.cert svg{width:13px;height:13px}
.rowicon{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:var(--soft);color:var(--muted);flex:none}.rowicon svg{width:16px;height:16px}

/* ---------- forms ---------- */
input,textarea,select{font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid #c4cad3;border-radius:var(--r-sm);padding:7px 10px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
textarea{min-height:130px;font-family:var(--mono);font-size:13px}
label{display:block;font-weight:600;font-size:13px;margin:12px 0 4px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--red)}
input[type=search]{width:auto;flex:1;min-width:200px}
select{width:auto;max-width:100%}
form.row input:not([type=checkbox]){width:auto;flex:1;min-width:140px}
.err{color:var(--bad);font-weight:600}
pre{white-space:pre-wrap;font-family:inherit;margin:8px 0 0}
dialog{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--card);color:var(--ink);width:min(560px,94vw);max-height:92vh;overflow-y:auto;overflow-x:hidden}
dialog::backdrop{background:rgba(16,21,28,.55)}
dialog h2{margin-top:0}
.steps{display:flex;gap:6px;margin:0 0 18px;font-size:13px;color:var(--muted)}
.steps span{padding:3px 12px;border-radius:99px;background:var(--soft)}.steps span.on{background:var(--ink);color:var(--card);font-weight:600}.steps span.done{color:var(--ok)}

/* ---------- picker (many courses) ---------- */
.chipbtn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:99px;padding:2px 11px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.chipbtn.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
.picker .plist{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 10px;margin:10px 0;background:var(--card)}
.prow{display:flex;align-items:center;gap:10px;margin:0;padding:6px 2px;font-weight:400;font-size:14px;cursor:pointer;border-radius:6px}.prow:hover{background:var(--soft)}
.prow .pt,.srow .pt{flex:1;min-width:0}.prow .kind{color:var(--muted)}
.kind{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--muted)}.kind svg{width:14px;height:14px}
.srow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:14px}.srow .n{width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--muted);font-family:var(--mono);font-size:12px;display:grid;place-items:center}

/* ---------- weak points, details ---------- */
.focus{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.focus:last-child{border-bottom:0}.focus.hot .t{font-weight:600}
.tag{display:inline-block;font-size:11px;font-weight:600;color:var(--red);background:var(--red-soft);border-radius:4px;padding:0 7px;margin-bottom:3px}
.detail{padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--line);font-size:14px}.detail li{margin:4px 0}
.revisit{border-left:3px solid var(--red)}
.editbox{margin-top:10px;padding:10px 14px;background:var(--soft);border-radius:var(--r-sm)}

/* ---------- overview grid ---------- */
.matrix{border-collapse:separate;border-spacing:0}
.matrix th.vh{font-size:11px;font-weight:600;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;padding:6px 8px;writing-mode:vertical-rl;transform:rotate(180deg);height:150px;vertical-align:bottom;background:var(--card)}
.matrix th.vh a{color:var(--ink);text-decoration:none}.matrix th.vh a:hover{color:var(--red)}
.matrix .stick{position:sticky;left:0;background:var(--card);z-index:1;min-width:140px;border-right:1px solid var(--line)}
.matrix .cell{text-align:center;padding:6px 4px}

/* ---------- trainee side: a quiet list ---------- */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.lrow{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)}.lrow:last-child{border-bottom:0}
.lrow .rowicon{width:34px;height:34px}
.lrow .lt{flex:1;min-width:0}.lrow .lt b{font-weight:600;display:block}.lrow .lt span{font-size:13px;color:var(--muted)}
.lrow .prog{font-family:var(--mono);font-size:13px;color:var(--warn);min-width:44px;text-align:right}
.lrow.done .prog{color:var(--ok)}
.pagehead{margin-bottom:18px}.pagehead p{margin:4px 0 0;color:var(--muted)}
.ring{display:none}.confetti{display:none}

/* ---------- viewers ---------- */
.stage{display:flex;justify-content:center;background:#111;border-radius:var(--r-sm);padding:8px;min-height:240px}
.stage canvas{max-width:100%;background:#fff;border-radius:3px}
.viewer video{width:100%;max-height:70vh;border-radius:var(--r-sm);background:#000}
.controls{justify-content:space-between;margin-top:10px}
.done-card{text-align:center}.done-card h2{margin-top:0}.row.center{justify-content:center}
.bigcheck{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);margin:0 auto 10px}.bigcheck svg{width:28px;height:28px}

/* compatibility with older markup still used by the brief and review pages */
.hero{padding:0 0 12px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.hero .kicker{font-size:12px;font-weight:600;color:var(--muted)}.hero h1{margin:2px 0 4px}.hero p{margin:0;color:var(--muted);max-width:70ch}.hero .row{margin-top:10px}
.hero .btn.light{background:var(--red);color:#fff}.hero .btn.line-light{background:var(--card);color:var(--ink);border-color:#c9ced6}.hero .chip{background:var(--soft);color:var(--ink)}
.tile{padding:12px 16px}.tile .ico{display:none}.tile .n{font-size:24px;font-weight:600;font-family:var(--mono)}.tile .l{color:var(--muted);font-size:13px}
.g4{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tscroll{overflow-x:auto;padding:0}
.course{display:grid;grid-template-columns:auto 1fr;gap:14px}.course .tile-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--soft);color:var(--muted)}.course .meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:5px;align-items:center}.course .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.course .blurb{color:var(--muted);margin:2px 0 0}
.stamp{display:inline-flex;gap:8px;background:var(--ok-soft);color:var(--ok);font-weight:600;border-radius:99px;padding:3px 12px}
@media (max-width:640px){.focus{grid-template-columns:1fr}.main h1{font-size:20px}}
@media print{.side,.top,.btn,.tabs{display:none!important}body.admin{display:block}body{background:#fff}.main{padding:0}.noprint{display:none!important}.card,.panel{break-inside:avoid}h2{break-after:avoid}textarea{border:0}}

/* additions */
.legend .d.f{background:var(--ok)}.legend .d.p{background:#d99a1c}.legend .d.n{background:#cfd4dc}
.stack .f{background:var(--ok)}
.rowlink{font-weight:600;color:var(--ink);text-decoration:none;margin-right:8px}.rowlink:hover{color:var(--red);text-decoration:underline}
.strong{font-weight:600}
.phead h1+p{margin:4px 0 0;max-width:70ch}
.panel .pr form,form.pr{gap:12px;align-items:flex-end}
.panel .pr input[type=date]{width:auto}
td.num,.nowrap{white-space:nowrap}
.btn.link.quiet{color:var(--muted)}
.row.tight{flex-wrap:nowrap;gap:4px;justify-content:flex-end}
.row input[type=search]{flex:0 1 280px;min-width:160px}
.steps+.card{max-width:780px}
.lrow .row.tight{flex:none}
.lrow .lt span.hide-sm{display:inline}
.list+h2,.list~h2{margin-top:26px}
@media (max-width:640px){.lrow{flex-wrap:wrap}.lrow .lt{flex-basis:calc(100% - 60px)}.lrow .lt .hide-sm{display:none}.lrow .btn{margin-left:auto}}
.lrow .btn{min-width:94px;justify-content:center}
@media (max-width:480px){.tabs a{padding:9px 8px;font-size:13px}}
@media (max-width:820px){.side nav{flex-wrap:wrap}.side nav a{padding:6px 8px;font-size:13px}.side .foot{flex-wrap:wrap}.side nav svg{width:15px;height:15px}}
.chip.overdue{color:var(--bad);background:var(--red-soft)}.chip.soon{color:var(--warn);background:var(--warn-soft)}
.panel{margin-bottom:14px}.panel .pf input,.panel .pf select{width:auto}.panel .pf input[type=date]{min-width:140px}.panel .pf input[maxlength]{flex:1;min-width:140px}
.panels .panel{margin-bottom:0}
/* assign, groups and people selection */
.row .grow{flex:1;min-width:200px}
th input[type=checkbox],td input[type=checkbox]{width:auto;margin:0}
.note .row{gap:8px}
dialog .picker .plist{max-height:240px}
.ctitle{min-width:230px}.row.tight.wrapok{flex-wrap:wrap}

/* a course made of modules: the course line, then its modules in order */
.lpath{border-bottom:1px solid var(--line)}.lpath:last-child{border-bottom:0}.lpath>.lrow{border-bottom:0}
.mods{padding:0 16px 12px 64px}
.mrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-sm);font-size:14px}
.mrow .ms{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;background:var(--idle-soft);color:var(--idle);font-size:12px;font-weight:600}
.mrow .ms svg{width:13px;height:13px}
.mrow.done .ms{background:var(--ok-soft);color:var(--ok)}.mrow.doing .ms{background:var(--warn-soft);color:var(--warn)}
.mrow .mt{flex:1;min-width:0}.mrow .mt b{font-weight:500}.mrow .mt span{display:block;font-size:12px;color:var(--muted)}
.mrow.next{background:var(--soft);outline:1px solid var(--line)}.mrow.shut .mt b{color:var(--faint)}
.mrow .btn{min-width:84px;justify-content:center}
.mrow .shuttext{font-size:12px;color:var(--faint);text-align:right}
@media (max-width:640px){.mods{padding-left:16px}.mrow{flex-wrap:wrap}.mrow .mt{flex-basis:calc(100% - 40px)}}

/* course builder (instructor) */
.mlist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:6px 0 10px;background:var(--card)}
.mlist .mb{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line)}.mlist .mb:last-child{border-bottom:0}
.mlist .mn{width:22px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--faint);flex:none}
.mlist .mt{flex:1;min-width:0}.mlist .mt b{font-weight:500;display:block}.mlist .mt span{font-size:12px;color:var(--muted)}
.mlist .mb label{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin:0;white-space:nowrap}.mlist .mb input[type=checkbox]{width:auto;margin:0}
.mlist .mb .btn{padding:2px 8px;min-width:0}
.mlist .mempty{padding:14px;color:var(--muted);font-size:13px}
.pathopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:640px){.pathopts{grid-template-columns:1fr}}
.mcount{display:flex;gap:2px;align-items:center}.mdot{width:9px;height:9px;border-radius:50%;background:var(--idle-soft);border:1px solid var(--line)}.mdot.finished{background:var(--ok);border-color:var(--ok)}.mdot.in_progress{background:var(--warn);border-color:var(--warn)}
.modbars .mr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(70px,1fr);gap:14px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line)}.modbars .mr:last-child{border-bottom:0}
.segbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--idle-soft)}.segbar i{display:block;height:100%}.segbar .f{background:var(--ok)}.segbar .p{background:var(--warn)}
.modsum{padding:0 16px 10px 64px}.modsum .mods{padding:0}
.lrow .lt span.blk{display:block}

/* dialogs never grow sideways: grid and flex children may shrink below their content */
dialog .row>div,dialog .pathopts>div{min-width:0}
dialog .pathopts select{width:100%}
dialog.wide{width:min(700px,94vw)}
dialog .mlist .mt{overflow-wrap:anywhere}
dialog h3{margin-top:14px}
.note label{font-weight:400}.note label.row{flex-wrap:nowrap;align-items:flex-start}.note label.row input{margin-top:3px}

/* question sets: the trainee viewer and the instructor preview */
.qfacts,.qhist{margin:0 0 12px;padding-left:20px}.qhist{font-size:13px;color:var(--muted)}
.qstem{font-size:16px;font-weight:500;line-height:1.45;margin:0 0 14px;white-space:pre-wrap}
.qopts{display:grid;gap:8px}
.qopt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:10px 12px;font:inherit;cursor:pointer}
.qopt:hover:not([disabled]):not(.static){border-color:var(--red)}
.qopt.picked{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.qopt.right{border-color:var(--ok);background:var(--ok-soft)}.qopt.wrong{border-color:var(--bad);background:var(--red-soft)}
.qopt[disabled]{cursor:default;color:var(--ink);opacity:1}.qopt.static{cursor:default}
.qk{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--soft);color:var(--muted)}.qt{flex:1;min-width:0;overflow-wrap:anywhere}
.qfb{margin:12px 0 4px;padding:10px 12px;border-radius:var(--r-sm);background:var(--soft);white-space:pre-wrap}.qfb.ok{background:var(--ok-soft)}.qfb.bad{background:var(--warn-soft)}.qfb p{margin:4px 0 0}
.qscore{font-size:44px;font-weight:600;letter-spacing:-.02em}.qscore.ok{color:var(--ok)}.qscore.bad{color:var(--bad)}
.ok{color:var(--ok)}
.qtopic{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:12px;align-items:center;padding:6px 0}
.qrev{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:8px}.qrev summary{cursor:pointer;display:flex;gap:10px}.qrev .qopt{margin:6px 0}
.qmark{font-weight:700}.qrev.ok .qmark{color:var(--ok)}.qrev.bad .qmark{color:var(--bad)}
@media (max-width:640px){.qtopic{grid-template-columns:1fr}}

/* question set editor */
.qform .pf.col{display:flex;flex-direction:column;align-items:stretch;gap:6px}.qform textarea{min-height:60px;resize:vertical}
.qed{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);margin:0 14px 8px}.qed summary{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer}
.qnum{font-family:var(--mono);font-size:12px;color:var(--faint);min-width:28px}.qsum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qbody{padding:4px 12px 12px;border-top:1px solid var(--line)}.qbody label{display:block;margin-top:8px}.qbody label.row{display:flex}
.qoed .qo{margin:4px 0}.qoed .qo input[type=radio]{width:auto;margin:0;flex:none}.qoed .qo input:not([type]){flex:1;min-width:0}
.qlist{padding-top:4px;padding-bottom:4px}
.panel .pf.col label{margin-top:4px}
.qbody textarea,.qform textarea{font-family:var(--font)}

/* lessons: the trainee viewer and the instructor preview */
.ltoc{margin:8px 0 12px}.ltoc ol{margin:6px 0 0;padding-left:22px}.ltoc li.on a{font-weight:600;color:var(--ink);text-decoration:none}
.lpage{padding:20px 22px}.lptitle{margin:0 0 12px;font-size:20px}
.lh{font-size:17px;margin:20px 0 6px}.ltext p,.ctext p{margin:0 0 10px;line-height:1.55}.ltext ul,.ctext ul{margin:0 0 10px;padding-left:22px}.ltext li{margin-bottom:3px}
.callout{display:flex;gap:10px;align-items:flex-start;border-left:4px solid var(--idle);background:var(--soft);padding:10px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:12px 0}.callout .ctext{flex:1}.callout .ctext p:last-child{margin:0}
.callout .ck{flex:none;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-top:2px;min-width:56px}
.callout.warn{border-color:var(--warn);background:var(--warn-soft)}.callout.warn .ck{color:var(--warn)}.callout.tip{border-color:var(--ok);background:var(--ok-soft)}.callout.tip .ck{color:var(--ok)}.callout.info{border-color:var(--red)}
.lfig{margin:14px 0}.lfig img,.lfig video{max-width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line);display:block}.lfig figcaption{margin-top:4px}
.lcheck{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin:16px 0;background:var(--bg)}.lchead{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}.lq{margin-bottom:14px}.lq:last-child{margin-bottom:0}

/* lesson builder */
.llayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}.lside{position:sticky;top:12px;display:flex;flex-direction:column;gap:4px}
.lpg{display:flex;gap:8px;align-items:center;text-align:left;appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:7px 9px;font:inherit;cursor:pointer}.lpg.on{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--red)}
.lblock{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px}.lbhead{padding:6px 10px;border-bottom:1px solid var(--line);background:var(--soft)}.lbody{padding:10px 12px}.lbody>*{margin-bottom:6px}.lbody textarea{min-height:70px;resize:vertical;font-family:var(--font)}
.lthumb{max-width:260px;max-height:160px;border-radius:var(--r-sm);border:1px solid var(--line);display:block}
.lqed{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:8px;background:var(--bg)}.lqed label{display:block;margin-top:6px}
.ladd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 0 18px}
@media (max-width:820px){.llayout{grid-template-columns:1fr}.lside{position:static;flex-direction:row;flex-wrap:wrap}}
dialog label.row{font-weight:400}