:root{
  --bg:#f4f6f8; --panel:#ffffff; --ink:#1c2530; --muted:#42505e; --line:#dde3ea;
  --brand:#12395c; --brand2:#00a7de; --ok:#177245; --warn:#9a6b00; --err:#b3261e;
  --radius:10px; --shad:0 1px 3px rgba(16,32,48,.08),0 4px 14px rgba(16,32,48,.05);
}
*{box-sizing:border-box}
body{margin:0;font:11px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
header{background:var(--brand2);color:#fff;padding:12px 22px;display:flex;align-items:center;gap:14px}
.brandlogo{height:34px;width:auto;display:block;background:#fff;padding:5px 11px;border-radius:9px;box-shadow:0 2px 6px rgba(0,0,0,.16)}
.signin-halo{display:block;height:48px;width:auto;margin:0 auto 20px}
header h1{font-size:13px;margin:0;font-weight:700;letter-spacing:.2px}
header .sub{font-size:13px;color:rgba(255,255,255,.9)}
/* ⛔ CENTRING STAYS PUT AT EVERY WIDTH. The wrap centres via margin:auto, but a bare display:grid gives a
   single IMPLICIT `auto` column that grows to its widest child's content — a wide table (an audit
   Question/What-is-missing row with a long value) then pushes the track PAST the 1080 wrap, spilling the
   panels and their right-edge buttons off the right of the window ("never settles into the middle", Phil
   9 Sep). minmax(0,1fr) pins the column to the wrap's own width so it can never grow past it; .panel
   min-width:0 lets the panel shrink to that column instead of to its content's min-content. */
.wrap{max-width:1080px;margin:12px auto;padding:0 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shad);padding:11px 13px;min-width:0}
/* A long unbreakable cell value must WRAP, not force the table (and so the panel) wider than the column. */
table.plan td,table.plan th,.rep-table td,.rep-table th,table.rpt td,table.rpt th,.unitstatus td,.unitstatus th,.dectbl td,.dectbl th{overflow-wrap:anywhere}
/* Dense data tables — a working system, not a tourist page. Tight cells; codes never wrap. */
.sw-table td,.sw-table th,table.plan td,table.plan th,table.rep-table td,table.rep-table th,table.rpt td,table.rpt th{padding:2px 8px;line-height:1.35}
.sw-table td:first-child,.sw-table th:first-child{white-space:nowrap}
/* ⛔ FIXED COLUMNS — every worklist table sizes its columns IDENTICALLY, whatever the row count/content
   (table-layout:auto sized a 1-row table differently from an 18-row one — headers wrapped "B Y", dates
   split, rows grew). Title (col 2) takes the remainder and wraps; the rest are fixed and never wrap. */
/* min-width keeps the flexible Title column (nth-child 2) from being crushed to 0 when the pinned
   columns (≈658px total) exceed a narrow viewport — which made the title char-wrap into a vertical
   stack. Below this width the .savedwork container scrolls horizontally instead (see .savedwork). */
.sw-units{table-layout:fixed;min-width:760px}
.sw-units td:nth-child(1),.sw-units th:nth-child(1){width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-units td:nth-child(2),.sw-units th:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-units td:nth-child(3),.sw-units th:nth-child(3){width:96px}
.sw-units td:nth-child(4),.sw-units th:nth-child(4){width:36px;white-space:nowrap}
.sw-units td:nth-child(5),.sw-units th:nth-child(5){width:132px}
.sw-units td:nth-child(6),.sw-units th:nth-child(6){width:38px;white-space:nowrap}
.sw-units td:nth-child(7),.sw-units th:nth-child(7){width:120px;white-space:nowrap}
.sw-units td:nth-child(8),.sw-units th:nth-child(8){width:132px;white-space:nowrap}
/* Row actions on ONE line — compact framing, not stacked. */
.sw-units td:nth-child(8) button{padding:3px 8px;margin:0 2px 0 0}
/* NEXT-cell action: the status IS the control — one click does the next step. */
.linkact{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:2px;color:var(--brand)}
.linkact.us-ok{color:var(--ok)}
.linkact.us-warn{color:var(--warn)}
.linkact:hover{filter:brightness(1.15)}
.linkact[disabled]{cursor:default;text-decoration:none;opacity:.6}
/* ⛔ CONTAINER VOCABULARY — ONE CSS, every container view. Section headings, sub-group headings, notes,
   selectable rows and left-accent blocks are CLASSES, never per-view inline styles, so a course container,
   a unit surface and the worklist share the same spacing by construction (Phil, 9 Sep: align the CSS first). */
.sechead{font-size:13px;font-weight:700;margin:14px 0 4px}
.sechead:first-child{margin-top:0}
.grouphead{margin:10px 0 2px;font-weight:600;color:var(--brand2)}
.grouphead.rev{color:#c0392b}
.block-note{margin:0 0 8px;line-height:1.5}
.unit-pick{display:flex;gap:8px;align-items:baseline;padding:3px 0}
.course-block{margin-top:14px}
.course-actions{margin-top:14px;gap:8px;align-items:center}
.lblock{margin:4px 0 8px;padding:6px 10px;border-left:3px solid var(--brand)}
.lblock.shared{border-left-color:#12395c}
.lblock.unit{border-left-color:#6a7c12}
.lblock.rev{border-left-color:#c0392b}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* ---- unified form controls: every input/select/textarea shares one look ---- */
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 11px;line-height:1.3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(0,167,222,.16)}
input::placeholder{color:#9aa7b4}
select{cursor:pointer}
input[disabled],input[readonly]{background:#f6f8fb;color:var(--muted)}
#code{width:15ch;flex:0 0 auto;text-transform:uppercase;letter-spacing:.4px}   /* holds a full code (≤12 chars) and never shrinks in its row */
#invEmail,#invName{width:200px}
textarea{width:100%;min-height:230px;line-height:1.5;font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace}
button{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:8px;padding:9px 16px;background:var(--brand2);color:#fff}
button:hover{filter:brightness(1.06)} button:disabled{opacity:.5;cursor:default}
button.ghost{background:#eef2f7;color:var(--brand)} button.sm{padding:6px 11px;font-size:11px}
.muted{color:var(--muted)} .hide{display:none!important}
.pill{display:inline-block;background:#eef2f7;border-radius:999px;padding:2px 10px;font-size:11px;color:var(--brand);margin-left:6px}
.pill.store{background:#eef2f7;color:var(--muted)}
.pill.warnpill{background:#fbeede;color:#9a6b00}
.pill.warnpill a{color:#7a5a00}
.reflink{font-size:11px;color:var(--brand2);text-decoration:none;margin-left:8px}
.reflink:hover{text-decoration:underline}
.pcgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.pcbtn{background:#eef2f7;color:var(--brand);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-size:11px;font-weight:600}
.pcbtn.active{background:var(--brand2);color:#fff;border-color:var(--brand2)}
.elhead{font-weight:700;margin:12px 0 4px;font-size:13px}
details.constraints summary{cursor:pointer;font-weight:600;color:var(--brand);margin-bottom:8px}
.lg{background:#fbfcfd;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.lg h3{margin:.2em 0 .4em;font-size:13px} .lg p{margin:.5em 0} .lg ul{margin:.4em 0 .4em 1.2em}
.item{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:10px 0;background:#fff}
.item .q{font-weight:600;font-size:11px;line-height:1.5}
.item .qtype{font-weight:400;color:var(--muted);font-size:11px;text-transform:none;letter-spacing:0}
.item .tags{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.item .ma{background:#f3f8f4;border-left:3px solid var(--ok);padding:8px 11px;margin-top:8px;border-radius:0 6px 6px 0;white-space:pre-wrap;font-size:11px;line-height:1.5}
.item .malabel{font-weight:700;color:var(--ok)}
.item .ma b{color:var(--ok)}
.item .ma.guide{background:#fbf6ec;border-left-color:#c79a3a}
.item .ma.guide .malabel{color:#a9781f}
.pcmix{font-size:11px;white-space:nowrap;margin-right:6px}
/* ONE PLACE FOR PROGRESS — a card in the centre of the window, in the same place every time.
   This is a one-thing-at-a-time process: key a unit, choose a function, wait. While it runs there
   is nothing else to do, so the progress sits in front of you instead of being hunted for. */
/* ⛔ THE PROGRESS CARD MUST NOT BLOCK THE PAGE (Phil, 13 Sep 2026: "cannot open the greyed-out PCs
   behind the progress window — a fail"). It used to be a full-screen dim modal (inset:0) that greyed and
   captured every click, so nothing behind it could be opened, and a stalled run locked the page for good.
   Now it is a non-blocking bottom card: no dim, `pointer-events:none` on the wrapper so clicks pass
   THROUGH to the page (open a PC while a run is going), and `pointer-events:auto` on the card itself so
   its Stop/Close still work. */
.nowwrap{position:fixed;left:0;right:0;bottom:18px;z-index:9999;display:flex;justify-content:center;
  pointer-events:none;background:none}
.nowwrap.hide{display:none}
.nowcard{width:min(440px,calc(100vw - 48px));background:#fff;border-radius:12px;padding:20px 22px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);position:relative;pointer-events:auto}
.nowcard .nc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nowcard .nc-title{font-size:13px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--muted)}
.nowwrap.ok .nc-title{color:var(--ok)} .nowwrap.err .nc-title{color:var(--err)} .nowwrap.warn .nc-title{color:#a9781f}
.nowcard .nb-msg{font-size:11px;line-height:1.45;color:#222;min-height:2.9em}
.nowcard .nb-track{height:5px;background:#eef1f5;border-radius:3px;overflow:hidden;margin:14px 0 8px}
.nowcard .nb-fill{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
.nowcard .nb-fill.ok{background:var(--ok)} .nowcard .nb-fill.err{background:var(--err)}
/* count + clock sit TOGETHER on the left. They used to be space-between, which pushed the clock to the
   right edge — directly under the absolutely-positioned Stop button, which hid it entirely. */
.nowcard .nc-foot{display:flex;justify-content:flex-start;gap:16px;font-size:11px;color:var(--muted);
  padding-right:70px;font-variant-numeric:tabular-nums}
.nowcard .nb-clock{color:var(--ink,#222);font-weight:600}
.nowcard .nb-close{position:absolute;right:16px;bottom:14px}
.nowcard .nb-close.hide{display:none}
/* Stop sits where Close does — the two never show at once: Stop while it runs, Close once it has. */
.nowcard .nb-stop{position:absolute;right:16px;bottom:14px}
.nowcard .nb-stop.hide{display:none}
.nowcard .nb-spin{width:15px;height:15px;border:2px solid #cfd8e3;border-top-color:var(--brand);
  border-radius:50%;animation:nbspin .8s linear infinite;flex:none}
.nowwrap.ok .nb-spin,.nowwrap.err .nb-spin,.nowwrap.warn .nb-spin{border:none;animation:none;
  width:auto;height:auto;font-weight:700;font-size:11px}
.nowwrap.ok .nb-spin::before{content:'✓';color:var(--ok)}
.nowwrap.err .nb-spin::before{content:'✕';color:var(--err)}
.nowwrap.warn .nb-spin::before{content:'!';color:#a9781f}
@keyframes nbspin{to{transform:rotate(360deg)}}
/* The teaching sits below the assessment items, plainly not one of them. */
.teachblock{margin:10px 0 4px;border-top:1px solid var(--line);padding-top:8px}
.teachblock>summary{cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;list-style:none}
.teachblock>summary::-webkit-details-marker{display:none}
.teachblock>summary::before{content:'▸ ';color:var(--muted)}
.teachblock[open]>summary::before{content:'▾ '}
.teachblock .teachstale{color:#a9781f;font-weight:400;text-transform:none;letter-spacing:0}
.teachblock .gcontent{font-size:11px;line-height:1.55;margin-top:8px;color:#333}
.teachblock .gcontent p{margin:.4em 0} .teachblock .gcontent ul{margin:.3em 0 .3em 1.1em}
.itemmethod{display:inline-flex;gap:6px;align-items:center}
.itemmethod .typetag{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.itemmethod .plansel.sm{font-size:11px;padding:2px 4px;max-width:170px}
/* An item the human has removed: still here, plainly not going out. */
.item .itemacts{float:right;display:flex;gap:8px;align-items:center;margin:-2px 0 0 10px}
.item .itemacts .muted{font-size:11px}
.item.removed{background:#fafafa;border-style:dashed;opacity:.62}
.item.removed .q{text-decoration:line-through}
.item.removed .itemacts{opacity:1}
.item.guide{background:#f6f8fc;border-color:#dbe4f0}
.item.guide .gcontent{font-size:11px;line-height:1.55;white-space:normal}
.item.guide .gcontent p{margin:.4em 0} .item.guide .gcontent ul{margin:.3em 0 .3em 1.1em}
.status{font-size:11px;padding:8px 12px;border-radius:8px;margin-top:10px}
.status.busy{background:#eef4fb;color:var(--brand)} .status.err{background:#fdeceb;color:var(--err)} .status.ok{background:#eef6f0;color:var(--ok)}
.wf-badge{display:inline-block;font-size:11px;padding:5px 12px;border-radius:999px;font-weight:600}
.wf-draft{background:#eef2f7;color:var(--brand)}
.wf-submitted{background:#fbeede;color:var(--warn)}
.wf-signed_off{background:#e7f3ea;color:var(--ok)}
.draftbanner{margin-top:10px;background:#eef4fb;border:1px solid #cfe0f5;border-radius:8px;padding:9px 12px;font-size:11px;color:var(--brand)}
.draftbanner button{margin-left:6px}
.pcline{padding:3px 0 3px 14px;border-left:2px solid #e3e9f0;margin:2px 0 2px 4px;font-size:11px;color:#33404d}
/* ---- coverage readout (is every PC assessed? = the competency determination) ---- */
/* The unit's one status line, directly under the code. */
.unitstatus{width:100%;border-collapse:collapse;margin:10px 0 4px;table-layout:fixed}
.unitstatus.hide{display:none}
.unitstatus td{border:1px solid var(--line);border-radius:0;padding:8px 12px;background:#f8fafc;vertical-align:top}
.unitstatus td:first-child{border-radius:8px 0 0 8px} .unitstatus td:last-child{border-radius:0 8px 8px 0}
.unitstatus .us-l{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:2px}
.unitstatus .us-v{display:block;font-size:11px;line-height:1.35}
.unitstatus .us-ok{color:var(--ok)} .unitstatus .us-warn{color:#8a6100}
.unitstatus .us-run{margin-left:8px;font-size:11px;padding:2px 8px;border:1px solid var(--line);
  border-radius:5px;background:#fff;color:var(--brand);cursor:pointer;font-weight:600}
.unitstatus .us-run:hover{background:#f0f5fb}
.unitstatus .us-run:disabled{opacity:.5;cursor:default}
/* RPL — its own section, plainly not one of the four outputs. */
.rplsection{margin-top:22px;padding-top:16px;border-top:2px solid var(--line)}
.rplsection-head{font-size:13px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--muted)}
.rplsection-note{font-size:11px;color:var(--muted);margin:3px 0 10px}
/* THE NEXT STEP — one action, full weight, same place. Detours below it, deliberately quieter. */
.packbar{margin:14px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.packbar.hide{display:none}
.packbar .actbtn.primary{font-size:11px;font-weight:700;padding:11px 22px;border-radius:8px;
  background:var(--brand);color:#fff;border:none;cursor:pointer}
.packbar .actbtn.primary:hover{filter:brightness(1.07)}
.packbar .actbtn.primary:disabled{opacity:.45;cursor:default}
/* The hint beside the next-step button is gone — the button names itself. Rule kept out. */
.packbar .issuedtag{font-size:11px;font-weight:700;color:var(--ok)}
.packbar .detours{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.packbar .detourbtn{font-size:11px;padding:4px 10px;border:1px solid var(--line);border-radius:5px;
  background:#fff;color:#4a5866;cursor:pointer}
.packbar .detourbtn:hover{background:#f2f6fb;color:var(--brand)}
/* What to do about a code that did not load. */
.lookup-next{margin-top:10px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:#f8fafc;font-size:11px}
.lookup-next ul{margin:6px 0 0 1.1em} .lookup-next li{margin:3px 0}
.lookup-next .us-run{margin-left:8px;font-size:11px;padding:2px 8px;border:1px solid var(--line);
  border-radius:5px;background:#fff;color:var(--brand);cursor:pointer;font-weight:600}
.lookup-next .us-run:hover{background:#f0f5fb}
.lookup-next .us-ok{color:var(--ok)} .lookup-next .us-warn{color:#8a6100}
.lookup-term{margin:0 6px;padding:4px 8px;border:1px solid var(--line);border-radius:5px;font-size:11px;min-width:230px}
/* The unit of competency as training.gov.au holds it — read here, not on their site. */
.unitsrc{margin:10px 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fbfcfd;font-size:11px}
.usrc-b{margin-bottom:14px}
.usrc-h{font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#5a6675;margin-bottom:6px}
.usrc-p{margin:0 0 6px;line-height:1.5}
.usrc-ul{margin:4px 0 0 1.1em;padding:0} .usrc-ul li{margin:3px 0;line-height:1.45}
.usrc-el{font-weight:600;margin-top:8px}
.usrc-facts td{padding:3px 8px;vertical-align:top}
.usrc-k{color:#6b7684;white-space:nowrap;width:150px}
/* Results of the name search, answered in the page — not a link out to a browser tab. */
.lookup-hits{margin:8px 0 0 0;padding:0;list-style:none}
.lookup-hits li{margin:4px 0;padding:4px 0;border-top:1px solid #eef2f6}
.coverbar{border-radius:9px;padding:11px 14px;margin:6px 0 14px;font-size:11px;border:1px solid var(--line);background:#f4f7fb}
.coverbar.ok{background:#eef6f0;border-color:#bfe0cb;color:var(--ok)}
.coverbar.warn{background:#fdf6e8;border-color:#f0dfb0;color:#7a5a00}
.coverbar b{font-weight:700}
/* The finishing step — one download for the whole set */
.packbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 14px}
/* ONE action-button shape. Same size and weight across the bar; colour carries the emphasis,
   not the dimensions — a row of buttons in different sizes reads as unrelated controls. */
.actbtn{font-weight:700;font-size:11px;padding:11px 20px;border:none;border-radius:9px;cursor:pointer;
        box-shadow:0 1px 3px rgba(16,32,48,.12);background:#eef2f7;color:var(--brand)}
.actbtn:hover:not(:disabled){background:#e2e9f1}
.actbtn.primary{background:var(--brand);color:#fff}
.actbtn.primary:hover:not(:disabled){background:#0d2a44}
.actbtn:disabled{background:#eef2f7;color:#9aa6b2;cursor:default;box-shadow:none}
.actbtn.primary:disabled{background:#c7ced6;color:#fff}
.packbtn{background:var(--brand);color:#fff;font-weight:700;font-size:11px;padding:11px 20px;border:none;border-radius:9px;cursor:pointer;box-shadow:0 1px 3px rgba(16,32,48,.12)}
.packbtn:hover:not(:disabled){background:#0d2a44}
.packbtn:disabled{background:#c7ced6;cursor:default}
/* ---- QC report modal ---- */
.kmodal{position:fixed;inset:0;background:rgba(16,32,48,.45);z-index:900;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow:auto}
.kmodal.hide{display:none}
.kmodal-card{background:#fff;border-radius:12px;box-shadow:0 18px 60px rgba(16,32,48,.28);width:100%;max-width:1040px}
.kmodal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700}
.kmodal-body{padding:18px;max-height:78vh;overflow:auto}
.rep-title{font-size:13px;font-weight:700;color:var(--brand)}
.rep-meta{margin-top:6px;font-size:11px;line-height:1.7}
.rep-meta b{color:var(--muted);font-weight:600;display:inline-block;min-width:120px}
.rep-sub{margin:18px 0 6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.rep-checks{margin:0;padding-left:18px;font-size:11px;line-height:1.8}
.rep-checks b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--brand)}
table.rep-table{width:100%;font-size:11px;border-collapse:collapse}
table.rep-table td.ctr,table.rep-table th{text-align:center}
table.rep-table td:first-child{text-align:left}
/* A status badge is ONE token — it must never break mid-word. The rep-table cells carry
   overflow-wrap:anywhere, so in a narrow pane "yes"/"no" were splitting to "ye/s","n/o"
   (Phil, 14 Sep 2026). nowrap holds every .ck badge together, in every table it appears. */
.ck{font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:4px;padding:1px 5px;white-space:nowrap}
table.rep-table td.ctr{white-space:nowrap;width:1%}
.ck.ok{background:#e7f3ea;color:var(--ok)} .ck.bad{background:#fdecea;color:var(--err)}
.ck.wn{background:#fdf6e8;color:#7a5a00} .ck.na{background:#f1f4f7;color:#9aa6b2}
/* the one-click fix bar shown inside a criterion that has an open issue */
.fixbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 14px 10px;padding:9px 12px;
        background:#fdf6e8;border:1px solid #f0dfb0;border-radius:8px;font-size:11px}
.fixbar .fixrun{font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums;flex:1;min-width:220px}
.fixbar .fixok{font-weight:700;color:var(--ok);flex:1;min-width:220px}
.fixbar .fixwarn{font-weight:700;color:var(--err);flex:1;min-width:220px}
/* PHASE GATES — a phase not yet reached, or sealed behind you, is locked for EDITING, never for
   READING. A drafted unit must always open so its work can be read — so the panel keeps full
   pointer-events (accordions are .accbar divs; killing pointer-events killed reading). Only the
   edit controls go inert, set as .disabled/readonly by lockPanelControls(); the edit-action rows
   are hidden so nothing dead-looking is left on screen. The gate bar carries the one action that
   crosses to the next phase. */
.panel.locked .elblock-acts,.panel.locked .pcedit-ctl{display:none}
.panel.locked textarea,.panel.locked input,.panel.locked select{background:#f3f4f6;color:#374151}
.phasegate{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
/* An advisory is NOT an error — dark ink, normal weight, so it reads as information, not a red flag. */
.fixbar .fixadv{color:var(--ink);flex:1;min-width:220px;line-height:1.4}
.fixbar .fixadv b{color:var(--warn)}
/* Issue queue + clickable findings */
.badge-fail{display:inline-block;background:#fdecea;color:var(--err);border:1px solid #f3c4bf;border-radius:999px;padding:1px 9px;font-weight:700;font-size:11px}
.badge-warn{display:inline-block;background:#fdf6e8;color:#7a5a00;border:1px solid #f0dfb0;border-radius:999px;padding:1px 9px;font-weight:700;font-size:11px}
.badge-ok{display:inline-block;background:#eaf6ec;color:#1e6b2e;border:1px solid #bfe3c6;border-radius:999px;padding:1px 9px;font-weight:700;font-size:11px}
table.queue{width:100%;border-collapse:collapse;margin-top:8px}
/* Match the other course/unit lists exactly — body 11px, 2px/8px cells, line-height 1.35 (like equals
   like). It used to force 13px, so the queue codes read larger than every other list (Phil, 14 Sep 2026). */
table.queue td{padding:2px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.35}
table.queue td.qacts{text-align:right;white-space:nowrap}
table.queue td.qacts button + button{margin-left:6px}
.pcacc.flash{animation:pcflash 1.6s ease}
@keyframes pcflash{0%{background:#fff6d8}60%{background:#fff6d8}100%{background:transparent}}
/* QC findings — the working list. Every row carries its own repair, so nothing has to be
   opened to find out what is wrong or hunted down to put it right. */
.qc-list{margin:10px 0 0;padding-left:0;list-style:none}
.qc-list li{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.45;
            padding:7px 8px 7px 22px;position:relative;border-top:1px solid #e6ecf2}
.qc-list li:first-child{border-top:none}
.qc-list li:before{position:absolute;left:4px;top:8px;font-weight:700}
.qc-list li.qc-fail:before{content:'✕';color:var(--err)}
.qc-list li.qc-warn:before{content:'!';color:var(--warn)}
.qc-pc{flex:0 0 auto;min-width:34px;font-weight:700;color:var(--brand)}
/* min-width:0 lets this flex item shrink below its text's intrinsic width so a long finding WRAPS
   instead of running off the right edge (Phil, 18 Aug). overflow-wrap breaks any over-long token. */
.qc-msg{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
/* ⛔ CLASS FIX, not a one-off. A flex child carrying CONTENT TEXT must be able to break a long value,
   or it stretches its row past the viewport and the whole page gains a horizontal scrollbar (the bug
   that hit the finding list). overflow-wrap is pure insurance — it only breaks a token too long to fit,
   and never changes an intentional min-width or the wrap-to-new-line behaviour these rows rely on. */
.pcedit-code,.pcedit-main,.elblock-title,.run-stage,.doccard-desc,.fixbar .fixadv,.fixbar .fixrun,
.fixbar .fixok,.fixbar .fixwarn,.linkinput,.nowcard .nc-title,.nowcard .nb-msg,
.sw-courserow,.usrc-k{overflow-wrap:anywhere;word-break:break-word}
.qc-act{flex:0 0 auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.qc-act button{white-space:nowrap}
/* Set aside — recorded, not deleted. Visibly demoted but still readable, with the reason. */
.qc-dismissed{margin-top:12px;padding-top:10px;border-top:1px dashed #cdd6e0}
.qc-dis-head{font-size:13px;font-weight:700;color:#7b8794;text-transform:uppercase;letter-spacing:.04em}
.qc-list li.qc-dis{color:#7b8794}
.qc-list li.qc-dis:before{content:'—';color:#9aa6b2}
.qc-list li.qc-dis .qc-pc{color:#7b8794}
.qc-why{color:#5c6b7a;font-style:italic}
.qc-ran{margin-top:4px;font-size:11px;color:#7b8794}
.whyinput{width:270px;font-size:11px;padding:5px 9px;border:1px solid #c7d2dd;border-radius:6px;text-transform:none}
/* A drafting button that failed says so, on the button, where the click happened. */
.btnfail{background:#fdecea!important;color:var(--err)!important;border:1px solid #f3c4bf!important}
.qcfixrow{margin-top:10px;gap:8px;flex-wrap:wrap}
/* PRODUCTION — the unit going out, kept visually apart from the outputs above it. */
.prodwait{margin-top:14px;padding-top:12px;border-top:1px solid #e3e8ee;color:#6b7684;font-size:11px}
.qcprod{margin-top:16px;padding-top:12px;border-top:1px solid #d8dee6}
.qcprod-head{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#5a6675;margin-bottom:8px}
.qcnextrow{gap:10px;flex-wrap:wrap;align-items:center}
.qcfix{margin-top:8px;font-size:11px;font-weight:600;min-height:0}
.qcfix:empty{display:none}
.qcfix.run{color:var(--brand)}
.qcfix.ok{color:var(--ok)}
.qcfix.warn{color:#7a5a00}
/* Issued — the flow has an ending, and a finished unit says so */
.issuedtag{display:inline-flex;align-items:center;background:#e7f3ea;color:#177245;border:1px solid #bcdcc6;
           border-radius:999px;padding:7px 15px;font-weight:700;font-size:11px}
.issuedpill{display:inline-block;background:#e7f3ea;color:#177245;border:1px solid #bcdcc6;
            border-radius:999px;padding:1px 9px;font-weight:700;font-size:11px}
.tickmark{color:#177245;font-weight:700;font-size:11px}
.sw-done tbody tr{opacity:.72}
.sw-done tbody tr:hover{opacity:1}
/* Criterion chips on an amber element bar — the light says there is a problem, these say where */
.elneed{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:8px}
.needpc{background:#fdf6e8;color:#7a5a00;border:1px solid #f0dfb0;border-radius:999px;
        padding:1px 9px;font-weight:700;font-size:11px;cursor:pointer;line-height:1.6}
.needpc:hover{background:#f8ecd2}
.needpc.bad{background:#fdecea;color:var(--err);border-color:#f3c4bf}
.needpc.bad:hover{background:#fbdcd8}
/* ---- one-click automatic build ---- */
.runbar{display:flex;align-items:center;gap:12px;margin:12px 0 2px;flex-wrap:wrap}
.runbtn{background:var(--ok);color:#fff;font-weight:700;font-size:11px;padding:11px 20px;border:none;border-radius:9px;cursor:pointer;box-shadow:0 1px 3px rgba(16,32,48,.12)}
.runbtn:hover{background:#12603a}
.runbtn:disabled{cursor:default}
.runbtn.running{background:var(--warn)}
/* live progress — always moving, and it SAYS when it is waiting */
.run-panel{border:1px solid var(--line);border-radius:10px;background:#fbfcfd;padding:12px 14px;margin:10px 0 4px}
.run-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.run-stage{font-weight:700;font-size:11px;color:var(--brand);flex:1;min-width:200px;font-variant-numeric:tabular-nums}
.run-count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.run-clock{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted)}
.run-track{height:8px;border-radius:999px;background:#e6ecf2;overflow:hidden}
.run-fill{height:100%;width:0;border-radius:999px;background:var(--brand2);transition:width .4s ease}
.run-fill.ok{background:var(--ok)} .run-fill.err{background:var(--err)}
.run-note{display:none;margin-top:7px;font-size:11px;color:#7a5a00;background:#fdf6e8;border:1px solid #f0dfb0;border-radius:7px;padding:5px 9px}
.run-note.show{display:block}
/* ---- element-centric editing surface (nested accordions) ---- */
.elblock{border:1px solid var(--line);border-radius:10px;margin:14px 0;padding:0;overflow:hidden;background:#fff}
.elblock-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;background:#f4f7fb;border-bottom:1px solid var(--line)}
.elblock.collapsed > .elblock-head{border-bottom:0}
.elblock-title{font-weight:700;font-size:13px;color:var(--brand);flex:1;min-width:200px}
.elblock-acts{display:flex;align-items:center;gap:8px}
.elblock-stat{font-size:11px}
/* accordion mechanics */
.accbar{cursor:pointer;user-select:none}
.caret{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .12s}
.acc:not(.collapsed) > .accbar .caret{transform:rotate(45deg)}
.acc.collapsed > .accbody{display:none}
.statusdot{flex:none;width:11px;height:11px;border-radius:50%;background:#c7ced6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.statusdot.red{background:#e0463e}
.statusdot.yellow{background:#e8a400}
.statusdot.green{background:#1f9d55}
/* Reports — token usage tables */
table.rpt{border-collapse:collapse;width:100%;font-size:11px;margin:4px 0 16px}
table.rpt th,table.rpt td{border:1px solid var(--line,#d0d7de);padding:4px 8px;text-align:right;white-space:nowrap}
table.rpt th:first-child,table.rpt td:first-child{text-align:left}
table.rpt thead th{background:#f2f5f8;font-weight:600}
table.rpt tbody tr:nth-child(even){background:#fafbfc}
/* PC accordion */
.pcacc{border-top:1px solid #eef2f6}
.elblock-body > .pcacc:first-child{border-top:0}
.pcacc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;background:#fff}
.pcacc:not(.collapsed) > .pcacc-head{border-bottom:1px solid #eef2f6;background:#fbfcfd}
.pcacc-body{padding:8px 0 12px}
.pcedit{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:10px 14px 4px;border-top:1px solid #eef2f6}
.elblock-body > .pcedit:first-child,.pcacc-body > .pcedit:first-child{border-top:0}
.pcedit-main{flex:1;min-width:260px}
.pcedit-code{font-size:11px;color:#33404d;flex:1;min-width:240px}
.pcedit-code b{color:var(--brand)}
.pcedit-plan{font-size:11px;margin-top:3px;line-height:1.5}
/* The doing-word table: one row per verb, and each row is one item to be drafted. */
.dectbl{border-collapse:collapse;width:100%;margin:4px 0 6px}
.dectbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:2px 6px;border-bottom:1px solid var(--line)}
.dectbl td{padding:2px 6px;vertical-align:top;border-bottom:1px solid var(--line)}
.dectbl td:nth-child(4){white-space:nowrap}
/* The evidence allocated to this criterion, listed. It used to be reported as a count of rows that
   is always zero by design, which read as "nothing has been allocated" on every criterion. */
.evlist{margin:2px 0 6px 0;padding-left:18px}
.evlist li{margin:0;padding:0;line-height:1.5}
/* The practical, editable in place. Type, click away, saved — no edit mode to enter or leave. */
.pracfield{padding:5px 0 7px;border-bottom:1px solid var(--line)}
.pracfield-label{font-size:11px;margin-bottom:3px}
textarea.pracedit{width:100%;box-sizing:border-box;font:inherit;font-size:11px;line-height:1.4;
  padding:5px 7px;border:1px solid var(--line);border-radius:4px;background:transparent;
  color:inherit;resize:vertical}
textarea.pracedit:focus{outline:none;border-color:#7a9ec6;background:rgba(122,158,198,.05)}
textarea.pracedit:disabled{opacity:.55}
textarea.pracedit::placeholder{color:#b3261e}
/* A checklist line: its number, its wording, and the doing words it acquits. */
.clrow{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.clnum{flex:none;width:22px;text-align:right;font-weight:600;color:var(--muted);font-size:11px;padding-top:6px}
.clbody{flex:1;min-width:0}
textarea.cltext{width:100%;box-sizing:border-box;font:inherit;font-size:11px;line-height:1.4;
  padding:5px 7px;border:1px solid var(--line);border-radius:4px;background:transparent;color:inherit;resize:vertical}
textarea.cltext:focus{outline:none;border-color:#7a9ec6;background:rgba(122,158,198,.05)}
.clacq{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:4px}
.acq{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 4px 1px 6px;
  border:1px solid var(--line);border-radius:10px;color:var(--muted)}
.acq.acqbad{color:#b3261e;border-color:#e6b4b1}
button.acqdrop{border:0;background:none;cursor:pointer;color:inherit;font-size:11px;line-height:1;padding:0 2px}
select.acqadd{font-size:11px;padding:0 2px;color:var(--muted);border:1px solid var(--line);
  border-radius:3px;background:transparent;max-width:250px}
/* The move/remove control sits with the point it acts on, quiet until you go looking for it. */
.evlist select.evmove{margin-left:8px;font-size:11px;padding:0 2px;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;background:transparent;max-width:230px}
.evlist select.evmove:hover{color:inherit}
/* Where the row came from: the criterion's own doing word, or an evidence point mapped to it. */
.dectbl td.srcpc,.dectbl td.srcke,.dectbl td.srcpe{font-weight:600;font-size:11px;white-space:nowrap}
.dectbl td.srcke{color:#7a4bbd}
.dectbl td.srcpe{color:#1b6e3c}
.dectbl td.srcpc{color:var(--muted)}
/* A row with nothing drafted against it is the finding. */
.dectbl tr.decmiss td{background:#fffaf0}
/* Phase — plan · check · do · clean up. The same phase is drafted the same way in every unit. */
.dectbl td.decphase{font-size:11px;color:var(--muted);white-space:nowrap}
/* The document a report/record doing word resolves to in the library. */
.decform{font-size:11px;color:#1b6e3c;font-weight:600}
.pcacc-body > .pcedit-plan{padding:0 14px;margin-top:0}
.pcedit-plan b{color:var(--muted);font-weight:600}
.pcedit-ctl{display:flex;align-items:center;gap:7px;flex-shrink:0}
.pcslot{padding:0 14px}
.pcslot:empty{padding:0}
.doccard.holding{opacity:.65}
/* ---- Manage view (full-page; Users / Constraints as separate tabs) ---- */
#manageView{display:grid;gap:14px}
.managebar{display:flex;align-items:center;gap:16px}
.managebar .mgtitle{margin:0;font-size:13px;letter-spacing:.6px}
.backlink{color:var(--brand);font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}
.backlink:hover{text-decoration:underline}
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabbar .tab{background:none;border:none;border-bottom:2px solid transparent;border-radius:0;padding:9px 16px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer}
.tabbar .tab:hover{color:var(--ink)}
.tabbar .tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.savedwork{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fbfcfd;margin:0 0 16px;overflow-x:auto}
.sw-head{font-weight:700;font-size:13px;margin-bottom:8px;color:#33404d}
/* Issued is reference — collapsed by default, opened to look something up. */
.sw-acc{margin-top:14px}
.sw-acchead{cursor:pointer;user-select:none;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f6f8fa;margin-bottom:0}
.sw-acchead::before{content:"▾ ";color:#7b8794}
.sw-acc.collapsed .sw-acchead::before{content:"▸ "}
.sw-acc.collapsed .sw-accbody{display:none}
.sw-accbody{padding-top:10px}
/* The status line says what each figure IS — the source sits under the label, small and quiet. */
.us-src{display:block;font-weight:400;font-size:11px;letter-spacing:.02em;color:#94a0ad;text-transform:none}
/* Where the work got to, under the state it is in. */
.us-step{display:block;font-size:11px;color:#8a95a1;margin-top:1px}
.sw-table{width:100%;font-size:11px}
.sw-table td,.sw-table th{padding:4px 8px}
/* Columns 4, 5 and 6 — Version, Issued / At last check, By — centred, header and cell together. */
.sw-table th:nth-child(4),.sw-table td:nth-child(4),
.sw-table th:nth-child(5),.sw-table td:nth-child(5),
.sw-table th:nth-child(6),.sw-table td:nth-child(6){text-align:center}
.pcref{padding:6px 14px 4px;font-size:11px;line-height:1.55}
.pcref b{color:var(--brand)}
.kbody{padding:2px 14px 8px}
.kbody:empty{padding:0}
.kstem{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:12px 0 4px}
.elblock-prac{padding:4px 14px 12px}
/* ---- final QC check ---- */
.qcpanel{border:1px solid var(--line);border-radius:10px;padding:14px;background:#fbfcfd;margin:6px 0 14px}
.qc-title{font-weight:700;color:var(--brand);font-size:13px;margin-bottom:4px}
/* The section's own action sits on its title line — nothing else competes with it. */
.qc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.qc-head .qc-title{margin-bottom:0}
.qc-result{margin-top:10px;font-size:11px;padding:10px 12px;border-radius:8px}
.qc-result:empty{display:none}
.qc-result.ok{background:#eef6f0;border:1px solid #bfe0cb;color:var(--ok)}
.qc-result.warn{background:#fdf6e8;border:1px solid #f0dfb0;color:#7a5a00}
/* ---- output document cards ---- */
.doccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0 6px}
.doccard{border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px}
.doccard-name{font-weight:700;color:var(--brand);font-size:13px;line-height:1.25}
.doccard-desc{font-size:11px;color:var(--muted);flex:1}
.doccard-hint{font-size:11px;color:var(--warn)}
.doccard-actions{display:flex;gap:8px;margin-top:8px}
.pcline b{color:var(--brand);margin-right:2px}
.pchead{margin:14px 0 4px;font-size:13px}
.audit{font-size:11px;letter-spacing:.3px;color:var(--muted);background:#f6f8fb;border:1px dashed var(--line);border-radius:6px;padding:5px 9px;margin-bottom:6px}
.audit b{color:var(--brand)}
table.plan{border-collapse:collapse;width:100%;font-size:11px;margin-top:6px}
table.plan th,table.plan td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
table.plan th{background:#eef2f7;color:var(--brand);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
#planOut table.plan td:nth-child(5){white-space:nowrap;text-transform:capitalize}
select.plansel{padding:4px 6px;font-size:11px;border-radius:6px;text-transform:capitalize}
select.plansel.changed{border-color:var(--warn);background:#fdf6e8}
.planact{white-space:nowrap}
.planact button{margin:0 2px;padding:4px 8px;font-size:11px}
.item .ma p{margin:.35em 0} .item .ma ul{margin:.3em 0 .3em 1.1em}
.subhead{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--brand2);margin:16px 0 4px;border-bottom:2px solid #e8eef6;padding-bottom:3px}
.item.practical{border-left:3px solid var(--warn)}
.cluster{font-size:11px;color:var(--warn);background:#fdf6e8;border-radius:6px;padding:5px 9px;margin:6px 0}
.instr{margin-top:6px;white-space:pre-wrap;font-size:11px}
.plist{margin:7px 0 2px;font-size:11px}.plist ul{margin:2px 0 0 18px}.plist li{margin:1px 0}
.item .ma .ckgroup{font-weight:600;margin:7px 0 1px;color:#12395c}
.genprog{margin-left:10px;font-size:11px;font-weight:600;color:var(--brand2)}
.item .q ul{margin:.4em 0 .2em 1.2em;font-weight:400}
header{position:relative}
.userbadge{margin-left:auto;font-size:11px;color:#fff;display:flex;align-items:center;gap:8px}
/* initials + superuser chips: identical box metrics so they align on the header line */
.userbadge .ini,.userbadge .su{display:inline-flex;align-items:center;height:20px;border-radius:5px;padding:0 8px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#fff;line-height:1}
.userbadge .ini{background:#2c527a}
.userbadge .su{background:#177245;letter-spacing:.3px}
.userbadge a{color:#fff;text-decoration:underline}
.linkbox{background:#f6f8fb;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.linkinput{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;background:#fff}
.signin{min-height:calc(100vh - 52px);display:flex;align-items:center;justify-content:center;padding:20px}
.signin-card{width:100%;max-width:384px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 44px rgba(16,32,48,.14);padding:30px 32px}
.signin-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:22px}
.signin-title{font-weight:750;font-size:13px;color:var(--brand2);line-height:1.15}
.signin-build{text-align:center;margin-top:18px;font-size:11px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px}
.appfoot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:16px;margin-top:22px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.appfoot .foot-brand{font-weight:700;color:var(--ink);letter-spacing:.2px}
.appfoot .foot-meta{color:var(--muted)}
.foot-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:#eef2f7;color:var(--brand);border:1px solid var(--line);border-radius:999px;padding:2px 10px;letter-spacing:.2px;white-space:nowrap}
.signin-sub{font-size:11px;color:var(--muted)}
.signin-h{font-size:11px;font-weight:650;margin:0 0 18px;color:var(--ink)}
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-size:11px;font-weight:650;letter-spacing:.2px;color:var(--muted);margin-bottom:5px}
.fld input{width:100%;padding:11px 12px;font-size:11px}
.pwwrap{position:relative;display:block}
.pwwrap input{width:100%;padding-right:66px}
.pwtoggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:#eef2f7;color:var(--brand);border-radius:7px;padding:6px 11px;font-size:11px;font-weight:600}
.signin-btn{width:100%;padding:12px;font-size:11px;margin-top:4px;border-radius:9px}
.signin-msg{min-height:18px;margin-top:11px;font-size:11px;color:var(--err);text-align:center}
.resetlink{display:block;text-align:center;margin-top:12px;font-size:11px;color:var(--brand2);text-decoration:none}
.resetlink:hover{text-decoration:underline}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #cfe0f5;border-top-color:var(--brand2);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
/* ---- in-app .docx preview (docx-preview render of the real bytes) ---- */
.docprev-overlay{position:fixed;inset:0;z-index:50;background:rgba(16,24,34,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.docprev-shell{background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(16,32,48,.35);width:min(920px,96vw);height:92vh;display:flex;flex-direction:column;overflow:hidden}
.docprev-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.docprev-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docprev-actions{display:flex;gap:8px;flex-shrink:0}
.docprev-body{flex:1;overflow:auto;background:#e9edf1;padding:20px 0}
/* docx-preview draws A4 pages; centre them and give a paper drop-shadow */
.docprev-body .docx-wrapper{background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.docprev-body .docx-wrapper>section.docx{box-shadow:0 2px 10px rgba(16,32,48,.18);margin:0!important}
/* Never auto-hyphenate words in the preview — the document itself is not hyphenated. */
.docx-wrapper, .docx, .docx *{hyphens:none!important;-webkit-hyphens:none!important;-ms-hyphens:none!important}

/* In-page confirm (kjConfirm) — replaces native confirm() so the flow runs by hand and under automation. */
.kjconfirm-wrap{position:fixed;inset:0;background:rgba(16,32,48,.45);display:flex;align-items:center;justify-content:center;z-index:2000}
.kjconfirm-box{background:#fff;border:1px solid #e9edf1;border-radius:12px;max-width:520px;width:calc(100% - 40px);padding:22px 24px;box-shadow:0 12px 44px rgba(16,32,48,.28)}
.kjconfirm-msg{white-space:pre-line;font-size:11px;line-height:1.55;color:#1a2330;margin:2px 0 18px}
.kjconfirm-actions{display:flex;justify-content:flex-end;gap:10px}
.kjconfirm-ok{background:#a9781f;border-color:#a9781f;color:#fff}
.kjconfirm-ok:hover{background:#946716;border-color:#946716}

/* ============================================================================
   TYPOGRAPHY PASS — one font, TWO sizes, nothing else.
   The sheet above was mechanically snapped to a 2-value grid: 11px and 13px.
   • 13px = content and controls — body, values, buttons, titles, table cells.
   • 11px = small eyebrow labels, tags and status chips (set below).
   Weight and colour carry the hierarchy, not size. One exception: the app brand
   title, a single step up. Mono stays only where the content is a code/id.
   ============================================================================ */

/* Raw headings — course view, Manage, anything without its own rule — sit at
   content size (weight, not size, marks them as headings) instead of the browser
   default h2 ~24px / h3 ~18px that reads as random "big text". */
h1,h2,h3,h4{font-size:13px;font-weight:700}
/* The one exception — the brand title, in the header and on the sign-in card. */
header h1,.signin-title{font-size:13px}

/* SIZE 2 · 11px — uppercase eyebrow labels, meta and status chips. The snap left
   these at content size because their base was 12–13px; they read as labels, so
   they drop a step. */
.panel h2,.subhead,.kstem,.usrc-h,.qcprod-head,.rep-sub,.qc-dis-head,
.rplsection-head,.rplsection-note,.audit,.us-src,.us-step,.qc-ran,
.pill,.pill.store,.pill.warnpill,.reflink,.cluster,.doccard-hint,
.badge-fail,.badge-warn,.issuedpill,.issuedtag,.wf-badge,.wf-draft,
.wf-submitted,.wf-signed_off,.needpc,.elneed{font-size:11px}

/* ---- SIMPLE TABLES: one clean look, EASY ROWS (comfortable even padding) ---- */
table.plan,table.rep-table,.sw-table,.dectbl,.usrc-facts,.unitstatus{font-size:11px;border-collapse:collapse;width:100%}
table.plan th,table.plan td,.sw-table th,.sw-table td,.dectbl th,.dectbl td,
table.rep-table th,table.rep-table td,.usrc-facts td,.unitstatus td{padding:7px 10px;line-height:1.45;vertical-align:top}
table.plan th,.dectbl th,table.rep-table th,.sw-table th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;background:#f4f7fb}
/* readable rows without heavy gridlines: a light rule under each, quiet zebra + hover */
.sw-table tbody tr,table.plan tbody tr,.dectbl tbody tr{border-bottom:1px solid var(--line)}
.sw-table tbody tr:nth-child(even),table.plan tbody tr:nth-child(even),.dectbl tbody tr:nth-child(even){background:#fafbfc}
.sw-table tbody tr:hover,table.plan tbody tr:hover,.dectbl tbody tr:hover{background:#f2f6fb}

/* ---- COURSE VIEW: the title is the TITLE — bigger than its own meta line, not the panel eyebrow ---- */
.coursehead{margin:6px 0 12px}
.coursehead .ch-title{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.coursehead .ch-meta{font-size:11px;color:var(--muted);margin-top:2px}
/* Clickable paths must LOOK clickable: the unit-open links and the course rows. */
a[data-openunit]{color:var(--brand2);text-decoration:underline;cursor:pointer}
a[data-openunit]:hover{color:var(--brand)}
.sw-courserow{display:flex;gap:10px;align-items:center;padding:7px 8px;cursor:pointer;border-radius:6px}
.sw-courserow b{color:var(--brand2);text-decoration:underline}
.sw-courserow:hover{background:#f2f6fb}
.sw-courserow:hover b{color:var(--brand)}
.sw-courserow .go{margin-left:auto;color:var(--brand2);font-weight:700;white-space:nowrap}
.sw-courserow:hover .go{color:var(--brand)}
.sw-subtog{cursor:pointer;padding:0 8px 8px 22px;color:var(--brand2)}
.sw-subbody{padding:0 8px 8px 22px}
/* Whole row opens on click — the row IS the control (Discard/NEXT handle their own click). */
.sw-units tbody tr{cursor:pointer}
.sw-units tbody tr:hover{background:#f2f6fb}