/*! Ergonomic Setup Configurator © 2026 Adriaan Mostert. All rights reserved. Proprietary; no copying or reuse. See LICENSE. */
:root{
  --bg:#eef1f5; --panel:#ffffff; --panel2:#f7f9fc; --ink:#191d23; --muted:#5b636f;
  --line:#d6dbe2; --line2:#e7ebf1; --accent:#256b48; --accent-ink:#ffffff;
  --fixed:#256b48; --pref:#6b4ec4; --warn-bg:#fbeae7; --warn-ink:#8e2c1d; --warn-line:#e0a89d;
  --note-bg:#fff6e2; --note-ink:#7a5a14; --chip:#eef2f7; --focus:#2f6fed;
  --dia-bg:#fbfcfe; --dia-floor:#c8d0da; --dia-furn:#8c97a6; --dia-furn2:#aeb8c4;
  --dia-body:#bfe0cc; --dia-bodyline:#2f6f4f; --dia-joint:#1f5a3c; --dia-screen:#3a4655;
  --ov-sight:#3a52d6; --ov-band:#d99100; --ov-fov:#0e9aa7; --ov-horizon:#8a93a0;
  --alert:#cf3a22; --alert-ink:#ffffff; --amber:#b5790a; --amber-ink:#ffffff;
  --shadow:0 1px 3px rgba(20,30,45,.08),0 4px 16px rgba(20,30,45,.06);
}
html[data-theme="dark"]{
  --bg:#0f1318; --panel:#171c22; --panel2:#1d232b; --ink:#e9edf2; --muted:#9aa4b1;
  --line:#2a323c; --line2:#222931; --accent:#43a877; --accent-ink:#06120c;
  --fixed:#5ec08e; --pref:#a98bf0; --warn-bg:#3a201b; --warn-ink:#f2ab9d; --warn-line:#6e3a30;
  --note-bg:#352a12; --note-ink:#f0cd86; --chip:#222a33; --focus:#6fa0ff;
  --dia-bg:#141a21; --dia-floor:#39434f; --dia-furn:#5d6876; --dia-furn2:#444e5a;
  --dia-body:#214a35; --dia-bodyline:#5ec08e; --dia-joint:#7fd6a6; --dia-screen:#cdd6e0;
  --ov-sight:#8ea2ff; --ov-band:#f0b73a; --ov-fov:#52c7d6; --ov-horizon:#7d8794;
  --alert:#ff6f5e; --alert-ink:#1a0f0c; --amber:#f0b73a; --amber-ink:#241a06;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
a{color:var(--focus)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}

/* Header */
header.app{
  display:flex; align-items:center; gap:18px; padding:12px 20px;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
header.app h1{font-size:17px; margin:0; font-weight:650; letter-spacing:.2px; white-space:nowrap}
header.app .sub{color:var(--muted); font-size:12.5px; margin-top:1px}
.spacer{flex:1}
.posture-toggle{display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:3px}
.posture-toggle button{
  border:0; background:transparent; padding:8px 18px; border-radius:8px; cursor:pointer;
  font-weight:600; color:var(--muted);
}
.posture-toggle button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow)}
.hbtn{
  border:1px solid var(--line); background:var(--panel2); color:var(--ink); padding:8px 12px;
  border-radius:9px; cursor:pointer; font-size:13px; display:inline-flex; align-items:center; gap:6px;
}
.hbtn:hover{border-color:var(--muted)}
.saved{font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; min-width:128px}
.saved .dot{width:8px;height:8px;border-radius:50%;background:var(--fixed)}

/* Layout */
main{display:grid; grid-template-columns:300px minmax(440px,1fr) 360px; gap:16px; padding:16px 20px; align-items:start; position:relative}
@media (max-width:1340px){ main{grid-template-columns:280px minmax(380px,1fr) 330px; gap:12px; padding:12px} }
.col{min-width:0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.col-centre{position:sticky; top:74px}

/* Inputs */
.group{border-bottom:1px solid var(--line2)}
.group:last-child{border-bottom:0}
.group > .ghead{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; gap:8px; padding:12px 14px; font-weight:650; font-size:13.5px;
}
.group > .ghead .tw{transition:transform .15s; color:var(--muted)}
.group.collapsed > .ghead .tw{transform:rotate(-90deg)}
.group.collapsed > .gbody{display:none}
.gbody{padding:4px 14px 12px}
.field{padding:8px 0; border-top:1px solid var(--line2)}
.field:first-child{border-top:0}
.field .frow{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
.field label.flbl{font-size:13px; cursor:pointer; display:inline-flex; gap:6px; align-items:center}
.field .num{width:74px; text-align:right; padding:4px 6px; border:1px solid var(--line); border-radius:7px; background:var(--panel2)}
.field input[type=range]{width:100%; margin:8px 0 2px; accent-color:var(--accent)}
.field .unit{color:var(--muted); font-size:11.5px}
.qmark{
  border:1px solid var(--line); background:var(--panel2); color:var(--muted); border-radius:50%;
  width:17px;height:17px; font-size:11px; line-height:15px; text-align:center; cursor:pointer; flex:none; padding:0;
}
.qmark:hover{color:var(--accent); border-color:var(--accent)}
.field.invalid .num{border-color:var(--warn-line); background:var(--warn-bg)}
.field .err{color:var(--warn-ink); font-size:11.5px; margin-top:3px; display:none}
.field.invalid .err{display:block}

/* Centre / diagram */
.dia-head{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line2); flex-wrap:wrap}
.dia-head h2{font-size:14px; margin:0; font-weight:650}
.overlay-toggles{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.ovt{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:20px; padding:3px 5px 3px 9px; font-size:12px; background:var(--panel2)}
.ovt input{accent-color:var(--accent)}
.ovt .swatch{width:11px;height:11px;border-radius:3px;flex:none}
.ovt .qmark{width:15px;height:15px;line-height:13px;font-size:10px}
#sceneWrap{padding:8px; position:relative}
.dia-status{position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px; font-size:12.5px; font-weight:650; cursor:pointer; border:1px solid transparent; box-shadow:var(--shadow); max-width:60%}
.dia-status.ok{background:var(--panel2); color:var(--fixed); border-color:var(--fixed)}
.dia-status.compromise{background:var(--note-bg); color:var(--note-ink); border-color:var(--warn-line)}
.dia-status.out{background:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-line)}
.dia-status .ico{font-weight:800}
svg#scene{display:block; width:100%; height:auto; max-height:76vh; background:var(--dia-bg); border-radius:10px}
.dia-caption{padding:6px 14px 12px; color:var(--muted); font-size:12px}

/* SVG element styling */
#scene .floor{stroke:var(--dia-floor); stroke-width:2}
#scene .mat{fill:var(--dia-furn2); opacity:.5}
#scene .furn{fill:var(--dia-furn2); stroke:var(--dia-furn); stroke-width:1}
#scene .furn-line{stroke:var(--dia-furn); stroke-width:3; fill:none; stroke-linecap:round}
#scene .desk{fill:var(--dia-furn); }
#scene .screen{fill:var(--dia-screen); stroke:var(--dia-screen)}
#scene .screen-face{fill:var(--dia-bg); stroke:var(--dia-screen); stroke-width:1.5}
#scene .limb{stroke:var(--dia-bodyline); fill:none; stroke-linecap:round; stroke-linejoin:round}
#scene .body-fill{fill:var(--dia-body); stroke:var(--dia-bodyline); stroke-width:1.5; stroke-linejoin:round}
#scene .head{fill:var(--dia-body); stroke:var(--dia-bodyline); stroke-width:2}
#scene .joint{fill:var(--dia-joint)}
#scene .mark{fill:none}
#scene text{fill:var(--muted); font-size:10px; font-family:inherit}
#scene .dimline{stroke:var(--muted); stroke-width:.8; stroke-dasharray:3 3; opacity:.7}
#scene .ov-sight{stroke:var(--ov-sight); stroke-width:2}
#scene .ov-horizon{stroke:var(--ov-horizon); stroke-width:1.2; stroke-dasharray:5 4}
#scene .ov-band{fill:var(--ov-band); opacity:.18; stroke:none}
#scene .ov-band-edge{stroke:var(--ov-band); stroke-width:1; stroke-dasharray:2 3}
#scene .ov-fov{fill:var(--ov-fov); opacity:.10; stroke:var(--ov-fov); stroke-width:.8}
#scene .zone-dist{fill:var(--ov-fov); opacity:.09}
#scene .zone-dist-edge{stroke:var(--ov-fov); stroke-width:1; stroke-dasharray:4 3; opacity:.8; fill:none}
#scene .zone-aoa{stroke:var(--ov-fov); stroke-width:1; stroke-dasharray:1 3; opacity:.7}
#scene .zone-top{fill:var(--accent); opacity:.12}
#scene .zone-top-edge{stroke:var(--accent); stroke-width:1; stroke-dasharray:4 3; opacity:.75; fill:none}
#scene .zone-elbow{fill:var(--pref); opacity:.14; stroke:var(--pref); stroke-width:.8}
#scene .zone-tilt{fill:var(--ov-band); opacity:.16; stroke:none}
#scene .zone-tilt-edge{stroke:var(--ov-band); stroke-width:1; opacity:.8}
#scene .zone-ideal{stroke:var(--accent); stroke-width:1.4; stroke-dasharray:2 2; opacity:.95}
#scene .zone-lbl{fill:var(--ink); font-size:9.5px; font-weight:600}
#scene .flag-out{fill:none; stroke:var(--alert); stroke-width:3.5}
#scene .flag-amber{fill:none; stroke:var(--amber); stroke-width:3.5}
#scene .gap-out{stroke:var(--alert); stroke-width:1.6}
#scene .gap-amber{stroke:var(--amber); stroke-width:1.6}
#scene .flagged{cursor:pointer}
#scene .badge-out-bg{fill:var(--alert)} #scene .badge-amber-bg{fill:var(--amber)}
#scene .badge-out-tx{fill:var(--alert-ink); font-size:10px; font-weight:700}
#scene .badge-amber-tx{fill:var(--amber-ink); font-size:10px; font-weight:700}
#scene .chip-bg-ok{fill:var(--accent)} #scene .chip-bg-out{fill:var(--alert)} #scene .chip-bg-amber{fill:var(--amber)}
#scene .chip-tx{font-size:11px; font-weight:700}
#scene .chip-tx-ok{fill:var(--accent-ink)} #scene .chip-tx-out{fill:var(--alert-ink)} #scene .chip-tx-amber{fill:var(--amber-ink)}
#scene .ov-lbl{fill:var(--ink); font-size:10px; font-weight:600}
#scene .hl{outline:none}
#scene .flash{animation:flash 1.6s ease}
@keyframes flash{0%,100%{filter:none}30%{filter:drop-shadow(0 0 6px var(--focus))}}

/* Outputs */
.col-right h2.rtitle, .col-left h2.ltitle{font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:0; padding:12px 14px 6px}
.ogroup{padding:0 0 4px}
.ogroup .oghead{font-size:12.5px; font-weight:700; color:var(--muted); padding:10px 14px 4px; letter-spacing:.3px}
.setup-link{display:block; width:calc(100% - 28px); margin:2px 14px 6px; text-align:left; background:var(--panel2); border:1px solid var(--accent); color:var(--accent); border-radius:8px; padding:7px 10px; font-size:12.5px; font-weight:650; cursor:pointer}
.setup-link:hover{background:var(--accent); color:var(--accent-ink)}
.orow{padding:9px 14px; border-top:1px solid var(--line2); cursor:pointer}
.orow:hover{background:var(--panel2)}
.orow .otop{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
.orow .olbl{font-size:13px; font-weight:600; display:flex; gap:6px; align-items:center}
.orow .oval{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
.orow .ometa{display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap}
.tag{font-size:11px; padding:1px 7px; border-radius:20px; border:1px solid var(--line); background:var(--chip); color:var(--muted)}
.tag.src{cursor:pointer}
.tag.src:hover{border-color:var(--accent); color:var(--accent)}
.marker{font-size:11px; display:inline-flex; gap:4px; align-items:center; padding:1px 7px; border-radius:20px; border:1px solid}
.marker.fixed{color:var(--fixed); border-color:var(--fixed)}
.marker.pref{color:var(--pref); border-color:var(--pref)}
.orow.warn{background:var(--warn-bg)}
.orow .warnbox{margin-top:6px; font-size:12px; color:var(--warn-ink); background:transparent; border:1px solid var(--warn-line); border-radius:8px; padding:6px 8px; display:flex; gap:6px}
.orow .notebox{margin-top:6px; font-size:12px; color:var(--note-ink); background:var(--note-bg); border-radius:8px; padding:6px 8px; display:flex; gap:6px}
.orow.disabled{opacity:.55}
.bandwrap{margin-top:8px}
.bandwrap .blabels{display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); margin-top:2px}
.bandwrap input[type=range]{width:100%; accent-color:var(--pref); margin:2px 0 0}
.subval{color:var(--muted); font-size:11.5px; margin-top:3px}

/* Explainer */
.scrim{position:fixed; inset:0; background:rgba(10,15,22,.32); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40}
.scrim.open{opacity:1; pointer-events:auto}
aside.explainer{
  position:fixed; top:0; right:0; height:100%; width:430px; max-width:92vw; background:var(--panel);
  border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(10,15,22,.18); transform:translateX(100%);
  transition:transform .22s ease; z-index:41; display:flex; flex-direction:column;
}
aside.explainer.open{transform:translateX(0)}
.exp-head{display:flex; align-items:flex-start; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line2)}
.exp-head .etype{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--accent); font-weight:700}
.exp-head h3{margin:3px 0 0; font-size:18px}
.exp-close{margin-left:auto; border:1px solid var(--line); background:var(--panel2); border-radius:8px; width:32px;height:32px; cursor:pointer; font-size:16px; flex:none}
.exp-body{padding:16px 18px; overflow:auto}
.exp-body p{margin:0 0 12px}
.exp-section-h{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; margin:16px 0 6px}
.conflict-end{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px}
.conflict-end .ce-val{font-weight:700; margin-bottom:3px}
.srclist{list-style:none; padding:0; margin:0}
.srclist li{border:1px solid var(--line2); border-radius:10px; padding:9px 11px; margin-bottom:7px}
.srclist .sname{font-weight:650; font-size:13px}
.srclist .sclause{color:var(--muted); font-size:12px}
.srclist .surl{font-size:11.5px; word-break:break-all; color:var(--muted)}
.unsourced{display:inline-flex; gap:6px; align-items:center; border:1px dashed var(--warn-line); color:var(--warn-ink); background:var(--warn-bg); border-radius:8px; padding:6px 9px; font-size:12px; margin:2px 0 12px}
.relchips{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.foot{padding:10px 20px 26px; color:var(--muted); font-size:11.5px; text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.howcue{font-size:11px; color:var(--muted); line-height:1.35; margin-top:3px}
.group[data-role="actual"]>.ghead{color:var(--pref)}
/* mode toggle + profile switcher in header */
.mode-toggle{display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:3px}
.mode-toggle button{border:0; background:transparent; padding:7px 14px; border-radius:8px; cursor:pointer; font-weight:600; color:var(--muted); font-size:13px}
.mode-toggle button[aria-pressed="true"]{background:var(--pref); color:#fff; box-shadow:var(--shadow)}
.profile-wrap{position:relative}
.profile-menu{position:absolute; top:110%; right:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); min-width:220px; z-index:50; padding:6px; display:none}
.profile-menu.open{display:block}
.profile-menu .pm-item{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--ink)}
.profile-menu .pm-item:hover{background:var(--panel2)}
.profile-menu .pm-item.active{font-weight:700; color:var(--accent)}
.profile-menu hr{border:0; border-top:1px solid var(--line2); margin:5px 0}
/* generic modal (splash, wizard, manager) */
.modal-scrim{position:fixed; inset:0; background:rgba(10,15,22,.45); display:none; align-items:flex-start; justify-content:center; z-index:60; overflow:auto; padding:40px 16px}
.modal-scrim.open{display:flex}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 48px rgba(10,15,22,.3); width:100%; max-width:600px; margin:auto}
.modal.wide{max-width:680px}
.modal-head{padding:18px 22px 6px}
.modal-head h2{margin:0; font-size:20px}
.modal-head p{margin:6px 0 0; color:var(--muted); font-size:13.5px}
.modal-body{padding:14px 22px}
.modal-foot{padding:14px 22px 20px; display:flex; align-items:center; gap:10px; justify-content:space-between}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0}
@media (max-width:560px){ .tiles{grid-template-columns:1fr} }
.tile{text-align:left; border:1px solid var(--line); background:var(--panel2); border-radius:12px; padding:16px; cursor:pointer; display:flex; flex-direction:column; gap:8px; min-height:150px}
.tile:hover{border-color:var(--accent)}
.tile .tico{font-size:22px}
.tile h3{margin:0; font-size:16px}
.tile p{margin:0; color:var(--muted); font-size:12.5px; line-height:1.4; flex:1}
.tile .go{align-self:flex-start; background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:7px 14px; font-weight:650; font-size:13px}
.tile.plan .go{background:var(--pref)}
.btn-primary{background:var(--accent); color:var(--accent-ink); border:0; border-radius:9px; padding:9px 18px; font-weight:650; cursor:pointer}
.btn-ghost{background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:9px 16px; cursor:pointer}
.btn-link{background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:13px; text-decoration:underline}
.profchips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px}
.profchip{border:1px solid var(--line); background:var(--panel2); border-radius:20px; padding:6px 12px; cursor:pointer; font-size:13px}
.profchip:hover{border-color:var(--accent); color:var(--accent)}
.stepper{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px}
.stepper .st{font-size:11.5px; color:var(--muted); padding:3px 8px; border-radius:20px; border:1px solid var(--line2)}
.stepper .st.cur{color:var(--accent); border-color:var(--accent); font-weight:700}
.stepper .st.done{color:var(--fixed)}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.seg button{border:0; background:var(--panel2); padding:8px 12px; cursor:pointer; color:var(--muted); font-size:13px}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); font-weight:650}
.wfield{margin:12px 0}
.wfield label{display:block; font-size:13px; font-weight:600; margin-bottom:5px}
.wfield .howcue{margin-top:4px}
.estlist{display:grid; grid-template-columns:1fr auto auto; gap:4px 12px; align-items:center; font-size:13px}
.estlist .ev{font-variant-numeric:tabular-nums; font-weight:650; text-align:right}
.estlist .echip{font-size:10.5px; color:var(--muted); border:1px solid var(--line2); border-radius:20px; padding:1px 7px}
.estlist .echip.measured{color:var(--fixed); border-color:var(--fixed)}
.wnote{background:var(--note-bg); color:var(--note-ink); border-radius:8px; padding:8px 10px; font-size:12px; margin:8px 0}
.tilewrap{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.seg-tile{border:1px solid var(--line); background:var(--panel2); border-radius:9px; padding:8px 12px; cursor:pointer; font-size:13px; color:var(--ink)}
.seg-tile:hover{border-color:var(--accent)}
.seg-tile.sel{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:650}
.qrow{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:6px 0; font-size:13px; border-top:1px solid var(--line2)}
.yn{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.yn button{border:0; background:var(--panel2); padding:5px 12px; cursor:pointer; color:var(--muted); font-size:12.5px}
.yn button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); font-weight:650}
/* setup-progress status card */
.progress-card{margin:10px 14px 4px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); padding:10px 12px}
.progress-card h3{margin:0 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.progress-card .pc-sub{font-size:11.5px; color:var(--muted); margin-bottom:7px}
.pc-item{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:transparent; padding:5px 6px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--ink)}
.pc-item:hover{background:var(--panel)}
.pc-item .pc-ico{width:18px; height:18px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; border:1px solid var(--line)}
.pc-item.done .pc-ico{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.pc-item.todo .pc-ico{color:var(--muted)}
.pc-item .pc-lbl{flex:1}
.pc-item .pc-val{color:var(--muted); font-size:11.5px}