/* ARETE training platform — page stylesheet.
* Extracted from training.html on 2026-06-01 (Batch 3).
* Edit this file directly; no rebuild step required — express.static
* serves it from /assets/training.css. The HTML tag is in
* training.html's .
*
* The second style block in training.html (inside a JS template
* literal that builds the PDF/print report) stays inline — it is
* not page CSS but report-specific print rules generated on demand.
*/
:root{--edps-blue:#282875;--edps-blue-l:#3a3a9e;--edps-yellow:#ffcc00;--navy:#282875;--navy-l:#3a3a9e;--blue:#4b4dc0;--coral:#c75a2a;--green:#1d7a3f;--gold:#b8860b;--red:#b22222;--accent:#3f40a8;--accent-d:#2c2c86;--accent-soft:#eef1fc;--accent-line:#cdd0ee;--bg:#f2f3fa;--card:#fff;--text:#2a2a3a;--ts:#67687d;--border:#d6d7ea;--bl:#e7e8f5;--ib:#f7f8fd;--hl:#eef1fc;--sh:0 1px 3px rgba(20,20,55,.10)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Source Sans 3',system-ui,sans-serif;font-size:14px;color:var(--text);background:var(--bg);line-height:1.55}
.app{max-width:1060px;margin:0 auto;background:var(--bg);min-height:100vh}
header{background:#fff;color:var(--edps-blue);padding:18px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:3px solid var(--edps-yellow)}
header h1{font-family:system-ui,-apple-system,sans-serif;font-size:20px;font-weight:700;letter-spacing:0.5px;color:var(--edps-blue)}
header .sub{font-size:11px;color:var(--ts);margin-top:2px}
.tb{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.btn{background:var(--edps-blue);border:none;color:#fff;padding:6px 12px;border-radius:3px;cursor:pointer;font-size:11px;font-family:inherit;font-weight:600;transition:all .15s;letter-spacing:.3px;text-transform:uppercase}
.btn:hover{background:var(--edps-blue-l)}
nav{background:var(--edps-blue-l);display:flex;overflow-x:auto}
nav button{background:none;border:none;color:rgba(255,255,255,.7);padding:14px 18px;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap}
nav button:hover{color:#fff;background:rgba(255,255,255,.05)}
nav button.active{color:#fff;border-bottom-color:var(--edps-yellow);background:var(--edps-blue)}
.pnl{display:none;padding:24px 28px 40px}.pnl.active{display:block}
.crd{background:var(--card);border:1px solid var(--bl);border-radius:6px;padding:20px;margin-bottom:16px;box-shadow:var(--sh)}
h2{font-family:system-ui,-apple-system,sans-serif;font-size:17px;color:var(--edps-blue);margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--edps-blue);font-weight:600}
h3{font-size:14px;color:var(--blue);margin:18px 0 8px;font-weight:600}
h4{font-size:12px;color:var(--coral);margin:14px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.fld{margin-bottom:12px}.fld label{display:block;font-weight:600;font-size:12px;margin-bottom:3px;color:var(--navy)}
.req{color:var(--coral)}
.fld input[type=text],.fld input[type=date],.fld input[type=number],.fld textarea,.fld select{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;background:var(--ib);transition:border-color .15s}
.fld textarea{min-height:50px;resize:vertical}.fld select{cursor:pointer;background:var(--hl)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(46,109,173,.12)}
.fld .ht{font-size:11px;color:var(--ts);margin-top:2px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>.fld{flex:1;min-width:180px}
.sb{background:var(--ib);border:1px solid var(--bl);border-radius:5px;padding:14px;margin-bottom:10px}
.sb.imp{background:#fef8f4;border-color:#e8d5c8}
.sb .q{font-weight:600;font-size:12px;color:var(--navy);margin-bottom:4px}
.sb .g{font-size:11px;color:var(--ts);margin-bottom:8px;line-height:1.5}
.sr{display:flex;gap:10px;flex-wrap:wrap}.sr>.fld{flex:1;min-width:120px}.sr>.fld.j{flex:2.5;min-width:220px}
.shdr{background:var(--navy);color:#fff;padding:8px 14px;border-radius:4px;margin:18px 0 10px;font-weight:600;font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.shdr.ih{background:var(--coral)}.shdr.ah{background:var(--gold)}
.dc{border:2px solid var(--edps-blue);border-radius:6px;margin-bottom:16px;overflow:hidden}
.dc .dh{background:var(--edps-blue);color:#fff;padding:8px 14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;border-bottom:1px solid var(--edps-blue-l)}
.dc .db{padding:16px}
.rmbtn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 12px;border-radius:3px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit}.rmbtn:hover{background:var(--red)}
.addb{background:var(--card);border:2px dashed var(--blue);color:var(--blue);padding:12px;border-radius:6px;text-align:center;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;margin-bottom:16px}.addb:hover{background:#eef4fb}
.rg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ri{display:flex;justify-content:space-between;padding:5px 10px;background:var(--ib);border-radius:3px;font-size:12px}
.ri .l{color:var(--ts)}.ri .v{font-weight:700;color:var(--navy)}
.rp{text-align:center;padding:16px;margin:10px 0;border-radius:8px}
.rp .sc{font-family:'Source Serif 4',serif;font-size:40px;font-weight:600}
.rp .lv{font-size:18px;font-weight:700;margin-top:2px;letter-spacing:.5px}
.rl{background:#e8f5e9;color:var(--green)}.rr{background:#fff8e1;color:var(--gold)}.rh{background:#fce4ec;color:var(--red)}
.ay{padding:8px 14px;margin-bottom:6px;border-radius:5px;font-size:13px;font-weight:600;background:#fce4ec;color:var(--red);border-left:4px solid var(--red)}
.an{padding:8px 14px;margin-bottom:6px;border-radius:5px;font-size:13px;font-weight:500;background:#e8f5e9;color:var(--green);border-left:4px solid var(--green)}
.af{background:var(--card);border:1px solid var(--bl);border-radius:4px;padding:8px 10px;margin-bottom:5px;display:flex;gap:8px;align-items:flex-start}
.af input[type=checkbox]{margin-top:3px;accent-color:var(--coral)}
.af .afc{flex:1}.af .afl{font-size:12px;font-weight:600}
.af .afe{width:100%;margin-top:3px;padding:4px 8px;border:1px solid var(--border);border-radius:3px;font-size:11px;font-family:inherit;background:var(--ib)}
.pb{background:var(--bl);height:4px;border-radius:2px;margin:8px 0;overflow:hidden}.pb .f{height:100%;border-radius:2px;transition:width .3s;background:var(--blue)}
.wb{background:#fff3e0;border:1px solid #ffe0b2;border-radius:6px;padding:12px;margin:12px 0;font-size:12px;color:#bf5600}
table.ref{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:12px}
table.ref th{background:var(--navy);color:#fff;padding:7px 10px;text-align:left;font-weight:600;font-size:11px}
table.ref td{padding:7px 10px;border:1px solid var(--bl);vertical-align:top}table.ref tr:nth-child(even){background:var(--ib)}
table.mx{width:100%;border-collapse:collapse;margin:14px 0;text-align:center;font-size:12px}
table.mx th,table.mx td{padding:8px;border:1px solid var(--border);font-weight:600}table.mx th{background:var(--navy);color:#fff}
.cl{background:#e8f5e9}.cr{background:#fff8e1}.ch{background:#fce4ec}
.summary-hero{background:var(--navy);color:#fff;border-radius:8px;padding:24px;margin-bottom:16px;text-align:center}
.summary-hero .sh-score{font-family:'Source Serif 4',serif;font-size:52px;font-weight:600}
.summary-hero .sh-level{font-size:22px;font-weight:700;letter-spacing:1px;margin-top:4px}
.summary-hero .sh-sub{font-size:12px;opacity:.7;margin-top:8px}
.action-panel{background:var(--card);border:2px solid var(--navy);border-radius:8px;padding:20px;margin-bottom:16px}
.action-panel h3{margin:0 0 12px;color:var(--navy);font-size:15px}
.ds-result-card{background:var(--card);border:1px solid var(--bl);border-radius:6px;padding:16px;margin-bottom:12px;box-shadow:var(--sh)}
.ds-result-card .drc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ds-result-card .drc-name{font-weight:600;font-size:14px;color:var(--navy)}
.ds-result-card .drc-badge{padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700;color:#fff}
.badge-low{background:var(--green)}.badge-risk{background:var(--gold)}.badge-high{background:var(--red)}
.calc-detail{font-size:12px;color:var(--ts);background:var(--ib);border-radius:4px;padding:8px 12px;margin:8px 0;font-family:'Source Serif 4',serif}
details.meth>summary{cursor:pointer;font-family:system-ui,-apple-system,sans-serif;font-size:17px;color:var(--edps-blue);font-weight:600;padding:12px 0 8px;border-bottom:2px solid var(--edps-blue);list-style:none;user-select:none}
details.meth>summary::-webkit-details-marker{display:none}
details.meth>summary::before{content:'+';display:inline-block;width:18px;font-size:16px;font-weight:bold;color:var(--edps-blue);transition:transform .2s}
details.meth[open]>summary::before{content:'\2212'}
details.meth .meth-body{padding-top:12px}
@media print{body{background:#fff;font-size:11px}.app{box-shadow:none}header,.tb,nav,.addb,.rmbtn,.btn{display:none!important}.pnl{display:block!important;padding:12px;page-break-inside:avoid}details.meth{display:block}details.meth>summary{pointer-events:none}details.meth .meth-body{display:block!important}}
/* Visually hidden but exposed to assistive technology — used by aria-describedby helpers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Workflow diagram on the Instructions tab */
.wf-diagram{width:100%;max-width:1000px;margin:16px auto 8px;display:block;height:auto}
.wf-step{cursor:pointer;transition:transform .15s}
.wf-step:hover, .wf-step:focus{outline:none}
.wf-step:hover circle, .wf-step:focus circle{fill:#003f7a}
.wf-step:hover .wf-title, .wf-step:focus .wf-title{fill:#003f7a;text-decoration:underline}
.wf-step:focus circle{stroke:#ff9800;stroke-width:4}
/* Step reminder banner reused across tabs 1-5 */
.step-reminder{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#e3f2fd 0%,#fff 100%);border-left:4px solid #282875;border-radius:4px;padding:10px 14px;margin-bottom:12px;font-size:12px}
.step-reminder .sr-badge{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#282875;color:#fff;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:18px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,0.18)}
.step-reminder .sr-body{flex:1;line-height:1.4}
.step-reminder .sr-head{font-weight:700;color:#282875;font-size:13px}
.step-reminder .sr-hint{color:#555;font-size:11px;margin-top:2px}
/* Toolbar dropdown menu items */
.menu-item:hover, .menu-item:focus{background:#f0f4fa;outline:none}
/* Full-screen overlay modal (Settings, About) */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:30px 20px;overflow-y:auto;animation:overlay-in 0.15s ease-out}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.overlay-panel{background:#fff;border-radius:8px;width:100%;max-width:1000px;box-shadow:0 10px 40px rgba(0,0,0,0.25);animation:panel-in 0.2s ease-out}
@keyframes panel-in{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
.overlay-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:2px solid #ffcc00;background:var(--edps-blue,#282875);color:#fff;border-radius:8px 8px 0 0}
.overlay-header h2{color:#fff;margin:0;font-size:18px;font-family:Georgia,serif}
.overlay-close{background:none;border:1px solid rgba(255,255,255,0.4);color:#fff;cursor:pointer;font-size:18px;padding:4px 12px;border-radius:4px;line-height:1}
.overlay-close:hover{background:rgba(255,255,255,0.15)}
.overlay-body{padding:20px 24px;max-height:calc(100vh - 160px);overflow-y:auto}
/* Step navigation (Back / Next) at the bottom of each working tab */
.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding:16px 0;border-top:1px solid #e0e0e0}
.step-nav .sn-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:none;border-radius:5px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.step-nav .sn-next{background:var(--edps-blue,#282875);color:#fff}
.step-nav .sn-next:hover{background:#003f7a}
.step-nav .sn-back{background:#fff;color:var(--navy,#282875);border:1px solid #ccc}
.step-nav .sn-back:hover{background:#f0f4fa}
.step-nav .sn-hint{font-size:11px;color:var(--ts,#888);max-width:300px;text-align:center}
/* Grouped scoring box: parent fieldset wraps the three likelihood / impact
children in a single labelled container, so the L1/L2/L3 and I1/Vol/I2
factors are visually nested under their parent heading. */
fieldset.score-group{border:2px solid var(--navy, #282875);border-radius:8px;padding:14px 16px 16px;margin:0 0 14px;background:#fff;position:relative}
fieldset.score-group.impact{border-color:var(--coral, #d63a30)}
fieldset.score-group>legend{font-weight:700;color:var(--navy, #282875);background:#282875;color:#fff;padding:4px 12px;border-radius:4px;font-size:12px;letter-spacing:0.2px;margin-left:4px}
fieldset.score-group.impact>legend{background:#b8860b}
fieldset.score-group>.score-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
@media (max-width:840px){fieldset.score-group>.score-grid{grid-template-columns:1fr}}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--edps-blue);color:#fff;padding:8px 16px;font-size:14px;text-decoration:none}
.skip-link:focus{left:0;outline:3px solid #ffcc00;outline-offset:2px}
/* Global focus-visible ring so keyboard users can see where they are. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="tab"]:focus-visible, [role="radiogroup"]:focus-visible{outline:3px solid #ffcc00;outline-offset:2px;box-shadow:0 0 0 1px var(--edps-blue,#282875)}
[role="tab"]:focus-visible{outline-offset:-3px}
/* Suppress the flash of uncompiled template ({{ ... }}) before PetiteVue mounts.
PetiteVue strips the v-cloak attribute the moment it compiles an element, so
anything still carrying it has not been hydrated yet and must stay hidden. */
[v-cloak]{display:none !important}
.toast{position:fixed;bottom:24px;right:24px;z-index:1000;padding:12px 20px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.18);font-size:13px;font-weight:600;max-width:340px;animation:toast-in 0.18s ease-out}
.toast-success{background:#e8f5e9;color:#1b5e20;border:1px solid #66bb6a}
.toast-error{background:#ffebee;color:#b71c1c;border:1px solid #ef5350}
.toast-info{background:#e3f2fd;color:#0d47a1;border:1px solid #64b5f6}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.full-width .app{max-width:100%;padding:0 20px}
.tl-flow{display:flex;align-items:flex-start;gap:0;margin:8px 0 12px}
.tl-step{flex:1;text-align:center;position:relative}
.tl-step .tl-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--edps-blue);color:#fff;font-size:12px;font-weight:700;margin-bottom:6px}
.tl-step.tl-done .tl-num{background:var(--green)}
.tl-step .tl-lbl{font-size:11px;font-weight:600;color:var(--navy);margin-bottom:4px}
.tl-step .tl-hint{font-size:9px;color:var(--ts);margin-bottom:3px;min-height:24px;line-height:1.3}
.tl-step .tl-arrow{position:absolute;top:14px;right:-12px;color:var(--border);font-size:18px}
.tl-step:last-child .tl-arrow{display:none}
.cia-box{background:linear-gradient(135deg,#e3f2fd 0%,#fce4ec 100%);border:2px solid var(--edps-blue);border-radius:8px;padding:14px;margin-bottom:12px}
.cia-box h4{color:var(--edps-blue);font-size:13px;margin:0 0 4px;text-transform:none;letter-spacing:0}
.cia-box .cia-hint{font-size:10px;color:var(--ts);margin-top:6px;line-height:1.4}
.cia-chk{display:flex;gap:16px;margin-top:8px}
.cia-chk label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;cursor:pointer;padding:6px 14px;border-radius:6px;border:2px solid var(--border);transition:all .15s}
.cia-chk label:has(input:checked){border-color:var(--edps-blue);background:rgba(40,40,117,0.08)}
.cia-chk label input{width:16px;height:16px;accent-color:var(--edps-blue)}
.risk-viz{margin-bottom:16px}
.risk-viz h3{color:var(--navy);margin:0 0 12px;font-size:14px;font-weight:600}
.viz-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
*:focus-visible{outline:2px solid var(--edps-blue);outline-offset:2px;border-radius:2px}
nav button:focus-visible{outline-color:var(--edps-yellow)}
@media(max-width:768px){
header{flex-direction:column;align-items:flex-start;padding:16px;gap:16px;}
.tb{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:4px;}
.pnl{padding:16px;}
.row,.sr{flex-direction:column;gap:12px;}
.fld input,.fld select,.fld textarea{font-size:16px;} /* prevents iOS zoom */
.crd{padding:14px;}
}
/* ========================================================================
* GUIDED MODE WIZARD STYLES
* ========================================================================
* Used only when state.mode === 'guided'. Kept self-contained so removing
* the wizard would just mean stripping this block plus the v-if branches
* in the body. Class names are prefixed `wiz-` to avoid clashing with the
* expert-mode CSS, except where reuse is intentional (.btn).
*/
/* Wizard body width: previously 920 px while the parent .app is 1060 px,
producing a visibly narrower body than the header above. Aligned to
1060 px so the wizard cards span the same width as the header banner.
Reported during the 2026-06-01 S2 walkthrough. */
.wiz-shell{max-width:1060px;margin:0 auto;padding:0 24px}
.wiz-progress{padding:12px 0 8px;border-bottom:1px solid var(--bl);background:#fff;position:sticky;top:0;z-index:10}
.wiz-progress-inner{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:11px;color:var(--ts);max-width:1060px;margin:0 auto;padding:0 24px;width:100%}
.wiz-step{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:14px;background:#eef2f7;color:var(--ts);white-space:nowrap;font-size:10.5px}
.wiz-step.done{background:#d4edda;color:var(--green,#1d7a3f)}
.wiz-step.current{background:var(--edps-blue);color:#fff;font-weight:600}
/* Clickable variant — only applied to already-completed steps. Visually a
button: cursor pointer, subtle hover, no default button chrome. */
.wiz-step-clickable{border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}
.wiz-step-clickable:hover{background:#a5d6a7;border-color:var(--green,#1d7a3f)}
.wiz-step-clickable:focus-visible{outline:2px solid var(--edps-blue);outline-offset:1px}
/* Yellow flag — steps the trainee must fill in the pre-loaded workshop tools
(S2 + Inject 1), where almost everything else is pre-decided. Driven by
input_step in WIZARD_STEPS + the wiz-step-input binding in training.html.
Placed after .done/.current so it wins on equal specificity. */
.wiz-step.wiz-step-input{background:#fff3cf;color:#7a5c00;border:1px solid #e6b800;font-weight:600}
.wiz-step.wiz-step-input.current{background:#f4b400;color:#3a2c00}
.wiz-step-clickable.wiz-step-input:hover{background:#ffe28a;border-color:#c79100}
.wiz-bar{flex:0 0 12px;height:2px;background:#eef2f7;border-radius:1px}
.wiz-bar.done{background:var(--green,#1d7a3f)}
@media (max-width:720px){
.wiz-progress-inner{padding:0 14px;gap:3px 4px}
.wiz-step{font-size:10px;padding:2px 6px}
.wiz-bar{display:none}
}
.wiz-card{background:#fff;border:1px solid var(--bl);border-radius:8px;padding:24px 28px;margin:18px 0;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.wiz-card h2{margin:0 0 6px;font-family:Georgia,serif;color:var(--navy);font-size:22px;font-weight:600;line-height:1.3}
.wiz-card .lead{margin:0 0 18px;color:var(--ts);font-size:14px;line-height:1.55}
.wiz-options{display:flex;flex-direction:column;gap:10px;margin:14px 0}
/* Two-column grid for the harms list (Step 4 — Harms). Single column on
narrow viewports via the @media (max-width:720px) rule below. */
.wiz-harms-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
@media (max-width:720px){
.wiz-harms-grid{grid-template-columns:1fr}
}
.wiz-option{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:2px solid var(--bl);border-radius:6px;cursor:pointer;background:#fff;transition:all .12s;text-align:left;font-family:inherit;font-size:14px;color:var(--navy);width:100%}
.wiz-option:hover{border-color:var(--edps-blue);background:#f3f8ff}
.wiz-option.selected{border-color:var(--edps-blue);background:#eef4fb;box-shadow:0 0 0 1px var(--edps-blue)}
.wiz-option-radio{flex-shrink:0;width:16px;height:16px;border-radius:50%;border:2px solid var(--bl);margin-top:2px;position:relative;background:#fff}
.wiz-option.selected .wiz-option-radio{border-color:var(--edps-blue)}
.wiz-option.selected .wiz-option-radio::after{content:'';position:absolute;inset:2px;border-radius:50%;background:var(--edps-blue)}
.wiz-option-check{flex-shrink:0;width:16px;height:16px;border-radius:3px;border:2px solid var(--bl);margin-top:2px;position:relative;background:#fff}
.wiz-option.selected .wiz-option-check{border-color:var(--edps-blue);background:var(--edps-blue)}
.wiz-option.selected .wiz-option-check::after{content:'\2713';position:absolute;top:-3px;left:1px;color:#fff;font-size:13px;font-weight:bold}
.wiz-option-body{flex:1}
.wiz-option-title{font-weight:600;color:var(--navy);margin-bottom:2px}
.wiz-option-hint{font-size:12px;color:var(--ts);line-height:1.5}
.wiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--bl)}
.wiz-expert{margin:14px 0;border:1px solid var(--bl);border-radius:5px;background:var(--ib,#fafbfd)}
.wiz-expert summary{padding:8px 12px;cursor:pointer;font-size:12px;font-weight:600;color:var(--blue);user-select:none}
.wiz-expert summary:hover{background:#eef4fb}
.wiz-expert[open] summary{border-bottom:1px solid var(--bl)}
.wiz-expert .body{padding:12px 14px;font-size:12px;color:var(--ts);line-height:1.55}
.wiz-warn{background:#fff8e1;border:1px solid #ffd54f;border-radius:5px;padding:10px 13px;margin:10px 0;font-size:12.5px;color:#5d4500}
.wiz-warn b{color:#7e5700}
.wiz-success{background:#e8f5e9;border:1px solid #81c784;border-radius:5px;padding:10px 13px;margin:10px 0;font-size:12.5px;color:#1b5e20}
.wiz-example-card{padding:8px 12px;background:var(--ib,#fafbfd);border-left:3px solid var(--bl);border-radius:0 4px 4px 0;font-size:12px;color:var(--ts);line-height:1.5;margin:8px 0}
.wiz-divergence-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.wiz-divergence-table th,.wiz-divergence-table td{padding:8px 10px;border:1px solid var(--bl);text-align:left;vertical-align:top}
.wiz-divergence-table th{background:var(--ib,#fafbfd);font-weight:600;font-size:12px}
.wiz-divergence-table input[type=number],.wiz-divergence-table input[type=text],.wiz-divergence-table select{width:100%;padding:5px 7px;font-size:12px;border:1px solid var(--border,#cdd5e0);border-radius:3px}
.wiz-result-headline{padding:18px 22px;border-radius:8px;margin:14px 0;text-align:center}
.wiz-result-headline.low{background:#e8f5e9;border:2px solid #81c784}
.wiz-result-headline.risk{background:#fff8e1;border:2px solid #ffb74d}
.wiz-result-headline.high{background:#ffebee;border:2px solid #ef5350}
.wiz-result-headline .level{font-size:24px;font-weight:700;font-family:Georgia,serif;margin-bottom:6px}
.wiz-result-headline.low .level{color:#1b5e20}
.wiz-result-headline.risk .level{color:#856404}
.wiz-result-headline.high .level{color:#b71c1c}
.wiz-result-headline .obligations{font-size:13px;color:var(--navy);margin-top:8px;line-height:1.55}
.wiz-summary-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.wiz-summary-table th,.wiz-summary-table td{padding:9px 12px;border-bottom:1px solid var(--bl);text-align:left}
.wiz-summary-table th{background:var(--ib,#fafbfd);font-weight:600;font-size:12px;color:var(--ts);text-transform:uppercase;letter-spacing:0.4px}
.wiz-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.3px;text-transform:uppercase}
.wiz-tag-low{background:#c8e6c9;color:#1b5e20}
.wiz-tag-risk{background:#fff3cd;color:#856404}
.wiz-tag-high{background:#ffcdd2;color:#b71c1c}
.mode-toggle{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--bl);border-radius:5px;padding:4px 8px;font-size:12px;margin-right:8px}
.mode-toggle label{font-weight:600;color:var(--ts);font-size:11px;text-transform:uppercase;letter-spacing:0.4px;margin:0}
.mode-toggle select{border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--navy);cursor:pointer;padding:2px 4px}
.mode-toggle select:focus{outline:none;background:#eef4fb;border-radius:3px}
/* === Training pedagogical debrief === */
.t-verdict{font-family:system-ui;font-size:11px;font-weight:600;padding:2px 8px;border-radius:3px;text-align:center;display:inline-block}
.t-verdict.t-ok{background:#c8e6c9;color:#1b5e20}
.t-verdict.t-warn{background:#fff3cd;color:#856404}
.t-verdict.t-pending{background:#eceff1;color:#546e7a;font-style:italic}
.t-prompt{background:linear-gradient(135deg,#fff8e1 0%,#fffde7 100%);border:1px solid #ffd54f;border-left:4px solid #b8860b;border-radius:8px;padding:18px 22px;margin:18px 0;font-family:Georgia,serif}
.t-prompt h3{margin:0 0 6px;color:#5d4037;font-size:16px}
.t-prompt p{margin:4px 0 12px;color:#3e2723;font-size:13px;line-height:1.55}
.t-prompt .actions{display:flex;gap:10px;flex-wrap:wrap}
.t-debrief{margin-top:20px;padding-top:20px;border-top:2px solid var(--bl)}
.t-debrief-summary{background:linear-gradient(135deg,#fff8e1 0%,#fffde7 100%);border:1px solid #ffd54f;border-radius:8px;padding:18px 22px;margin:14px 0}
.t-debrief-summary.match{background:linear-gradient(135deg,#e8f5e9 0%,#f1f8e9 100%);border-color:#a5d6a7}
.t-debrief-table{width:100%;border-collapse:collapse;font-family:system-ui;font-size:12px;margin:14px 0}
.t-debrief-table th,.t-debrief-table td{border:1px solid #ddd;padding:8px 10px;text-align:left;vertical-align:top}
.t-debrief-table th{background:var(--navy);color:#fff;font-weight:600;font-size:11px}
.t-debrief-table td.your{background:#fff8e1}
.t-debrief-table td.edpb{background:#e8f5e9;font-weight:600;color:#1b5e20}
.t-debrief-table.hidden-edpb td.edpb{filter:blur(5px);user-select:none}
.t-lessons{background:#e3f2fd;border-left:4px solid #282875;padding:14px 18px;margin:14px 0;border-radius:6px}
.t-lessons h4{margin:0 0 8px;color:#282875;font-size:14px}
.t-lessons ul{margin:6px 0;padding-left:22px}
.t-lessons li{margin:4px 0;font-size:13px;line-height:1.5}
/* Scenario card states on the welcome screen */
.t-scenario-card{border:1px solid var(--bl);border-radius:6px;padding:10px 12px;background:#fafafa;margin:6px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}
.t-scenario-card.locked{opacity:.55;background:#f4f3f0;border-style:dashed}
.t-scenario-card .lock-pill{font-family:system-ui;font-size:10px;font-weight:600;background:#e0e0e0;color:#666;padding:2px 8px;border-radius:10px;letter-spacing:.5px}
.t-scenario-card.unlocked .lock-pill{background:#c8e6c9;color:#1b5e20}
/* Welcome-screen section header */
.t-section-title{font-family:system-ui;font-size:13px;font-weight:700;color:var(--navy);margin:18px 0 6px;padding-bottom:4px;border-bottom:2px solid var(--accent);text-transform:uppercase;letter-spacing:.5px}
/* ARETE top bar (discussion guide + inject button) */
.t-topbar{max-width:1060px;margin:14px auto 0;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;font-family:system-ui;font-size:11px}
.t-topbar button{background:#fff;color:var(--navy);border:1px solid var(--navy);padding:5px 12px;border-radius:3px;font-weight:600;cursor:pointer}
.t-topbar button.back-to-hub{margin-right:auto;background:#fafaf8;border-color:#9e9e9e;color:#424242}
.t-topbar button.back-to-hub:hover{background:#fff;border-color:var(--navy);color:var(--navy)}
.t-topbar button.inject{background:#fff3cd;border-color:#b8860b;color:#5d4037}
.t-topbar button.inject.opened{background:#c8e6c9;border-color:var(--green);color:#1b5e20}
/* Discussion guide panel (ARETE, collapsible) */
.t-discussion{max-width:1060px;margin:8px auto;background:#e3f2fd;border:1px solid #90caf9;border-radius:6px;padding:14px 18px;font-family:Georgia,serif;color:#0d47a1}
.t-discussion h4{margin:0 0 8px;font-size:14px;color:var(--navy)}
.t-discussion h5{margin:10px 0 4px;font-size:13px;color:#0d47a1}
.t-discussion ol{margin:4px 0 8px;padding-left:22px}
.t-discussion li{margin:4px 0;font-size:13px;line-height:1.5}
/* Inject modal */
.t-inject-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.t-inject-modal .panel{background:#fff;border-radius:8px;max-width:640px;width:100%;padding:24px 28px;border-top:6px solid #b8860b;max-height:90vh;overflow-y:auto}
.t-inject-modal h3{margin:0 0 4px;color:#5d4037;font-family:Georgia,serif;font-size:18px}
.t-inject-modal .label{font-family:system-ui;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#b8860b;font-weight:700;margin-bottom:6px}
.t-inject-modal .body{font-size:14px;line-height:1.6;color:#3e2723;margin:10px 0}
.t-inject-modal .body p{margin:8px 0}
.t-inject-modal .revised{background:#fff8e1;border-left:3px solid #b8860b;padding:10px 14px;border-radius:3px;margin-top:14px;font-size:13px;color:#3e2723}
.t-inject-modal .actions{display:flex;justify-content:flex-end;margin-top:14px}
.t-inject-modal button{background:var(--navy);color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-family:system-ui;font-size:12px;font-weight:600}
/* ==========================================================================
ARETE pre-work hub — full-page responsive layout (replaces overlay panel)
========================================================================== */
/* ==========================================================================
ARETE Training Platform (.t-pf-*)
Single-page programme platform with sticky sidebar TOC, persistent header
banner (the one-message), and 9 anchored sections following the
Blueprint v0.3 "before/during/after" cadence.
========================================================================== */
.t-pf{min-height:100vh;background:var(--bg);color:var(--text);font-family:Georgia,'Times New Roman',serif}
.t-pf-header{background:#fff;border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:60;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.t-pf-header-row{max-width:1280px;margin:0 auto;padding:14px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.t-pf-brand h1{margin:0;font-size:26px;color:var(--navy);font-family:Georgia,serif;letter-spacing:-0.5px;line-height:1}
.t-pf-brand p{margin:3px 0 0;font-size:11px;color:var(--ts);font-family:system-ui;letter-spacing:.2px}
/* Banner masthead — seated as a hero "card" aligned to the content frame
(same max-width + gutters as .t-pf-body) on the warm page background, with
an indigo-tinted shadow sampled from the artwork so it shares the page's
card language instead of reading as a pasted strip. */
/* Native masthead — a live, full-bleed indigo brand band that replaces the
thin Header_ARETE strip. Deep-indigo gradient matched to the ARETE wordmark
artwork; the EDPS logo + ARETE wordmark are extracted to transparent PNGs
(arete-edps-logo.png / arete-wordmark.png) and sit on the left, with the
course context bound to COURSE_META (date/venue stay editable) on the right.
Responsive: the meta block drops below the brand lock-up on narrow screens. */
.t-pf-masthead{display:block;margin:0 0 32px;padding:0;border:0;border-radius:0;background:linear-gradient(100deg,#13133b 0%,#1d1d57 38%,#282875 64%,#3a3ba2 100%);box-shadow:0 8px 26px rgba(16,16,52,.28);position:relative;overflow:hidden}
.t-pf-masthead::after{content:'';position:absolute;inset:0;background:radial-gradient(130% 150% at 85% 12%,rgba(108,110,224,.32),transparent 58%);pointer-events:none}
.t-pf-mast-inner{position:relative;max-width:1280px;margin:0 auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.t-pf-mast-brand{display:flex;align-items:center;gap:18px;min-width:0}
.t-pf-mast-logo{height:58px;width:auto;flex:0 0 auto;display:block}
.t-pf-mast-divider{flex:0 0 auto;width:1px;align-self:stretch;min-height:56px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.42),transparent)}
.t-pf-mast-id{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.t-pf-mast-wordmark{height:37px;width:auto;display:block}
.t-pf-mast-tagline{font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#cbcdf4}
.t-pf-mast-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
.t-pf-mast-meta-kicker{font-family:system-ui,-apple-system,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#9ea0ea}
.t-pf-mast-meta-venue{font-family:system-ui,-apple-system,sans-serif;font-size:13px;font-weight:600;color:#f3f3fb;line-height:1.3}
.t-pf-mast-meta-date{font-family:system-ui,-apple-system,sans-serif;font-size:14px;font-weight:700;letter-spacing:.3px;color:#fff}
@media(max-width:760px){
.t-pf-mast-inner{padding:18px;gap:14px}
.t-pf-mast-brand{gap:12px}
.t-pf-mast-logo{height:44px}
.t-pf-mast-divider{min-height:42px}
.t-pf-mast-wordmark{height:28px}
.t-pf-mast-tagline{font-size:10.5px;letter-spacing:.4px}
.t-pf-mast-meta{align-items:flex-start;text-align:left;padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.16);padding-top:12px;width:100%}
}
.t-pf-banner{background:#eef1fc;border:1px solid #cdd0ee;border-left:4px solid var(--accent);border-radius:6px;padding:8px 16px;font-family:Georgia,serif;display:flex;flex-direction:column;justify-content:center}
.t-pf-banner-label{font-family:system-ui;font-size:10px;color:#4a4b86;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.t-pf-banner-text{font-size:14px;color:#312f4f;font-style:italic;line-height:1.35;margin-top:2px}
.t-pf-user{font-family:system-ui;text-align:right;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-end;min-width:160px}
.t-pf-user label{display:block;font-size:10px;color:var(--ts);margin-bottom:3px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.t-pf-user input{padding:7px 11px;border:1px solid var(--border);border-radius:4px;font-size:13px;min-width:200px;background:#fff;font-family:Georgia,serif}
.t-pf-user input:focus{border-color:var(--navy);outline:none}
.t-pf-user-handle{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--ts);font-weight:600;letter-spacing:.2px;max-width:280px}
.t-pf-user-icon{flex:0 0 14px;font-size:13px;line-height:1}
.t-pf-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Georgia,serif;font-weight:400;color:var(--navy)}
/* Header buttons (admin panel for facilitators, sign-out for everyone). */
.t-pf-header-code-btn{display:block;width:100%;font-family:system-ui;font-size:11px;font-weight:600;color:var(--navy);background:#eef1fc;border:1px solid var(--accent);padding:5px 10px;border-radius:4px;cursor:pointer;text-align:center;transition:background .15s}
.t-pf-header-code-btn:hover{background:#e3e7fb}
.t-pf-header-signout{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;font-size:15px;line-height:1;color:#4a4b86;background:#fff;border:1px solid var(--border);border-radius:50%;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.t-pf-header-signout:hover{background:#fdecea;border-color:#d9534f;color:#b71c1c}
.t-pf-header-code{background:#eef1fc;border-top:1px solid var(--accent);padding:14px 28px;font-family:system-ui;animation:t-pf-slide-down .18s ease-out}
.t-pf-header-code-row{max-width:1180px;margin:0 auto}
.t-pf-header-code label{display:block;font-size:12px;font-weight:600;color:#312f4f;margin-bottom:6px}
.t-pf-header-code .t-pf-code-row{display:flex;gap:10px;align-items:center}
.t-pf-header-code .t-pf-code-row input{flex:1;padding:9px 12px;border:1px solid var(--accent);border-radius:4px;font-size:14px;font-family:monospace;background:#fff;text-transform:uppercase;letter-spacing:1px;color:var(--navy)}
.t-pf-header-code .t-pf-code-row input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(40,40,117,0.15)}
.t-pf-header-code .t-pf-code-row button{background:var(--navy);color:#fff;border:none;padding:9px 18px;border-radius:4px;font-family:system-ui;font-weight:600;cursor:pointer}
.t-pf-header-code .t-pf-code-row button:hover{background:#003875}
.t-pf-header-code-hint{font-size:11px;color:var(--ts);margin:6px 0 0;font-style:italic}
@keyframes t-pf-slide-down{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:980px){
.t-pf-header-code{padding:14px 18px}
}
.t-pf-body{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;padding:0 28px}
/* ---- Sidebar ----
The production HTML has a global "nav { background: var(--edps-blue-l) }"
that bleeds into every