/* 150/20 kV Transformer Lab · styles */
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
/* Layout: three columns. Narrow guide on the left (parts + how it works), 3D stage in the middle,
   fault/test simulators in a right drawer that stays closed until asked for. Stacks under 860px. */
:root{
  --bg:#e6eae7; --panel:#f4f6f4; --raise:#ffffff; --ink:#1b211f; --muted:#56615c; --line:#cfd7d2;
  --scene:#dce2df; --floor:#c8d0cc;
  --accent:#a2541f; --accent-soft:#a2541f1c; --on-accent:#ffffff;
  --ok:#2e7a4c; --warn:#a8680c; --crit:#bf3626; --info:#2b64a0;
  --ph-u:#8a4a26; --ph-v:#1b211f; --ph-w:#8c968f;
  --oil:#c98a1c;
  --f-display:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1312; --panel:#151a19; --raise:#1c2221; --ink:#e1e7e3; --muted:#93a099; --line:#29322f;
    --scene:#121817; --floor:#1d2523;
    --accent:#e08d52; --accent-soft:#e08d5224; --on-accent:#1a0f07;
    --ok:#5cc489; --warn:#e6a940; --crit:#f06a58; --info:#6ea9e8;
    --ph-u:#d5895a; --ph-v:#e1e7e3; --ph-w:#76847d;
    --oil:#e0a43a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1312; --panel:#151a19; --raise:#1c2221; --ink:#e1e7e3; --muted:#93a099; --line:#29322f;
  --scene:#121817; --floor:#1d2523;
  --accent:#e08d52; --accent-soft:#e08d5224; --on-accent:#1a0f07;
  --ok:#5cc489; --warn:#e6a940; --crit:#f06a58; --info:#6ea9e8;
  --ph-u:#d5895a; --ph-v:#e1e7e3; --ph-w:#76847d;
  --oil:#e0a43a;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);overflow:hidden}
*{box-sizing:border-box}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;display:grid;--sw:296px;--dw:0px;grid-template-columns:var(--sw) minmax(0,1fr) var(--dw);grid-template-rows:minmax(0,1fr)}
.app.side-closed{--sw:0px}
.app.drawer-open{--dw:min(410px,44vw)}
.app.drawer-open.drawer-wide{--dw:min(620px,50vw)}
.side{grid-column:1;grid-row:1;min-height:0;min-width:0;overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);padding:16px 14px 32px;display:flex;flex-direction:column;gap:22px}
.app.side-closed .side{display:none}
.stage{grid-column:2;grid-row:1;position:relative;min-width:0;min-height:0;background:var(--scene);overflow:hidden}
.drawer{grid-column:3;grid-row:1;min-height:0;min-width:0;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:0 16px 32px}
#c{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#c.pick{cursor:pointer}

/* left guide */
.unit{display:grid;gap:8px}
.unit-top{display:flex;gap:8px;align-items:flex-start}
.unit h1{font-size:21px;flex:1;min-width:0}
details.specs summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 0}
details.specs summary::-webkit-details-marker{display:none}
details.specs summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.specs[open] summary::before{transform:rotate(45deg)}
details.specs dl{margin-top:8px}
.sect{display:grid;gap:2px}
.sh{font:500 11.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.grp,.demo{border-top:1px solid var(--line)}
.grp:last-child,.demo:last-child{border-bottom:1px solid var(--line)}
.grp-h{width:100%;display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:9px 2px;cursor:pointer;font:600 15.5px var(--f-display);text-align:left}
.grp-h:hover{color:var(--accent)}
.grp-h .cnt{margin-left:auto;font:11px var(--f-mono);color:var(--muted)}
.chev{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .15s}
.grp-h[aria-expanded="true"] .chev{transform:rotate(90deg)}
.plist{list-style:none;margin:0 0 8px;padding:0;display:grid}
.plist>li>button{width:100%;display:grid;grid-template-columns:54px 1fr;gap:6px;text-align:left;border:0;background:transparent;padding:6px 4px;cursor:pointer;font-size:14px;border-radius:3px}
.plist>li>button:hover{background:var(--accent-soft)}
.plist>li>button[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);font-weight:500}
.plist .no{font:10.5px var(--f-mono);color:var(--muted);padding-top:2px}
.pdetail{margin:4px 0 10px 4px;padding:10px 12px;background:var(--raise);border:1px solid var(--line);border-radius:4px;display:grid;gap:7px;font-size:13.5px;line-height:1.45}
.pdetail .row{display:flex;flex-wrap:wrap;gap:6px}
.demo-h{width:100%;display:grid;gap:1px;text-align:left;border:0;background:transparent;padding:9px 2px;cursor:pointer}
.demo-h b{font:600 15.5px var(--f-display);display:flex;align-items:center;gap:8px}
.demo-h b::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;opacity:.55}
.demo-h span{font-size:12.5px;color:var(--muted);padding-left:15px}
.demo-h:hover b{color:var(--accent)}
.demo-h[aria-pressed="true"] b{color:var(--accent)}
.demo-h[aria-pressed="true"] b::before{width:8px;height:8px;border:0;background:currentColor;opacity:1;border-radius:1px}
.demo-body{display:grid;gap:8px;padding:0 2px 14px 15px;font-size:13.5px;line-height:1.45}
.demo-body p{margin:0}
.demo-body .row{display:flex;flex-wrap:wrap;gap:6px}
.demo-body .watch{border-left:2px solid var(--line);padding-left:9px;color:var(--muted);font-size:13px}
.sideFoot{font-size:12.5px;color:var(--muted);margin-top:auto}

/* stage overlays */
.ov{position:absolute;z-index:2}
.topleft{top:14px;left:16px;display:flex;gap:8px;align-items:flex-start;max-width:calc(100% - 190px)}
.topright{top:14px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:min(300px,calc(100% - 32px))}
.selbar{display:grid;gap:7px;width:min(340px,100%);max-height:calc(100vh - 190px);overflow-y:auto;background:var(--raise);border:1px solid var(--line);border-left:3px solid var(--accent);padding:9px 10px 10px 12px;border-radius:5px;min-width:0;box-shadow:0 4px 18px #0000001f}
.sel-h{display:flex;align-items:flex-start;gap:10px}
.sel-h>div{flex:1}
.sel-d,.sel-c{margin:0;font-size:13.5px;line-height:1.45}
.sel-c{color:var(--muted)}
.sel-c b{color:var(--ink);font-weight:600}
.selbar .row{display:flex;gap:6px;flex-wrap:wrap}
.selbar .nm{font:600 15px/1.2 var(--f-display);min-width:0}
.selbar .it{font:11.5px/1.4 var(--f-mono);color:var(--muted)}
.selbar .nm{font-size:17px}
.iconbtn{border:1px solid var(--line);background:var(--raise);border-radius:3px;padding:3px 8px;cursor:pointer;font-size:13px;white-space:nowrap;line-height:1.4}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.pillbtn{border:1px solid var(--line);background:var(--raise);border-radius:5px;padding:7px 12px;cursor:pointer;font:600 14px var(--f-display);letter-spacing:.02em;box-shadow:0 2px 10px #00000014;display:inline-flex;gap:8px;align-items:center}
.pillbtn:hover{border-color:var(--accent);color:var(--accent)}
.toolbar{left:16px;bottom:16px;right:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}
.seg{display:flex;background:var(--raise);border:1px solid var(--line);border-radius:5px;overflow:hidden;pointer-events:auto;box-shadow:0 2px 10px #00000014}
.seg button{border:0;background:transparent;padding:7px 12px;cursor:pointer;white-space:nowrap;font:500 14px var(--f-display);letter-spacing:.02em;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg button:hover:not([aria-pressed="true"]){background:var(--accent-soft)}
.slider{display:flex;align-items:center;gap:8px;background:var(--raise);border:1px solid var(--line);border-radius:5px;padding:5px 10px;pointer-events:auto;font:12px var(--f-mono);color:var(--muted)}
.slider input{width:120px;accent-color:var(--accent)}
.tip{pointer-events:none;background:var(--ink);color:var(--panel);font:500 13px var(--f-display);padding:3px 8px;border-radius:3px;transform:translate(12px,-28px);white-space:nowrap}
.legend{left:16px;top:62px;background:var(--raise);border:1px solid var(--line);border-radius:5px;padding:8px 10px;font:11px var(--f-mono);color:var(--muted);width:190px}
.legend .bar{height:10px;border-radius:2px;margin:5px 0 3px;background:linear-gradient(90deg,#2b5fb3 0%,#2aa198 27%,#7cb342 45%,#f2c12e 55%,#f08a24 69%,#d7301f 83%,#780a0a 100%)}
.legend .ticks{display:flex;justify-content:space-between}
.labcard{width:min(300px,100%);max-height:calc(100vh - 150px);overflow-y:auto;background:color-mix(in srgb,var(--raise) 96%,transparent);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:6px;padding:8px 10px 10px;box-shadow:0 4px 18px #0000001f;display:grid;gap:6px}
.lc-h{display:flex;align-items:center;gap:8px}
.lc-t{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:2px 0;cursor:pointer;font:600 15px var(--f-display)}
.lc-t .chev{transform:rotate(90deg)}
.lc-t[aria-expanded="false"] .chev{transform:none}
.lc-s{margin-left:auto;font:11.5px var(--f-mono);color:var(--muted);text-align:right}
.lc-b{display:grid;gap:7px}
.lc-b .eyebrow{margin:0}
table.ltab{width:100%;border-collapse:collapse;font:12px/1.3 var(--f-mono);font-variant-numeric:tabular-nums}
table.ltab th{font-weight:500;color:var(--muted);text-align:left;padding:2px 4px 4px 0;border-bottom:1px solid var(--line)}
table.ltab td{white-space:nowrap;padding:2px 4px 2px 0;border-bottom:1px solid var(--line);vertical-align:middle}
table.ltab .r{text-align:right}
table.ltab input{width:64px;text-align:right;font:500 12.5px var(--f-mono);padding:2px 5px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink)}
table.ltab input:focus{border-color:var(--accent)}
table.ltab .rg{color:var(--muted);font-size:10px;margin-right:4px}
table.ltab .pill{font-size:10px;padding:0 5px}
table.ltab .cond{width:20px;font-size:11px}
table.ltab tr.vals td{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.lc-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;font-size:12px}
.lc-m span{display:flex;justify-content:space-between;align-items:center;gap:4px;min-width:0}
.lc-m .fcode{min-width:26px;font-size:10.5px}
.hud{width:100%;background:color-mix(in srgb,var(--raise) 94%,transparent);border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:grid;gap:7px;font-size:13px;box-shadow:0 4px 18px #0000001f}
.hud .hd{font:600 15px/1.2 var(--f-display)}
.hud dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font:12px/1.45 var(--f-mono)}
.hud dt{color:var(--muted)}
.hud dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.hud .lamps{display:flex;gap:12px;flex-wrap:wrap}
.lamp{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lamp i{width:10px;height:10px;border-radius:50%;background:var(--line);border:1px solid var(--muted)}
.lamp.warn{color:var(--warn)} .lamp.warn i{background:var(--warn);border-color:var(--warn);box-shadow:0 0 8px var(--warn)}
.lamp.crit{color:var(--crit)} .lamp.crit i{background:var(--crit);border-color:var(--crit);box-shadow:0 0 8px var(--crit)}
.lamp.ok{color:var(--ok)} .lamp.ok i{background:var(--ok);border-color:var(--ok)}
.meter{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.grad{height:8px;border-radius:2px;background:linear-gradient(90deg,#2f6fe0,#35b6c9,#f2c12e,#f08a24,#d7301f)}
.gradlab{display:flex;justify-content:space-between;font:11px var(--f-mono);color:var(--muted)}
.loading{inset:0;display:grid;place-items:center;font:500 16px var(--f-display);color:var(--muted);background:var(--scene)}
.labels{inset:0;pointer-events:none}
.tlab{position:absolute;transform:translate(-50%,-130%);font:500 12px var(--f-mono);padding:1px 5px;border-radius:3px;background:var(--raise);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tlab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.dlab{position:absolute;transform:translate(-50%,calc(-100% - 7px));font:600 12.5px/1.2 var(--f-display);padding:3px 8px;border-radius:3px;background:var(--ink);color:var(--panel);white-space:nowrap}
.dlab::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--ink)}

/* drawer: faults & tests */
.tabs{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.35fr auto;align-items:center;background:var(--panel);border-bottom:1px solid var(--line);margin:0 -16px 16px;padding:0 8px}
.tabs button[role="tab"]{border:0;background:transparent;padding:14px 4px 11px;cursor:pointer;font:600 15px var(--f-display);white-space:nowrap;letter-spacing:.03em;color:var(--muted);border-bottom:3px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs .iconbtn{margin:0 4px}
.block{display:grid;gap:10px;margin-bottom:22px}
.eyebrow{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;line-height:1.15}
h1{font-size:24px;font-weight:600}
h2{font-size:19px;font-weight:600}
h3{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:4px}
p{margin:0;max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-family:var(--f-mono);font-size:12.5px}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font:12px/1.5 var(--f-mono)}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--raise);border-radius:4px;padding:6px 10px;cursor:pointer;font:500 14px var(--f-display);letter-spacing:.02em;display:flex;gap:6px;align-items:baseline}
.chip .code{font:11px var(--f-mono);color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.chip[aria-pressed="true"] .code{color:inherit;opacity:.75}
.tlist{display:grid;gap:6px}
.tbtn{text-align:left;border:1px solid var(--line);background:var(--raise);border-radius:5px;padding:9px 12px;cursor:pointer;display:grid;gap:1px}
.tbtn b{font:600 15px var(--f-display)}
.tbtn span{font-size:13px;color:var(--muted)}
.tbtn[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.ctl{display:grid;grid-template-columns:96px 1fr 70px;align-items:center;gap:10px;font-size:14px}
.ctl input{width:100%;accent-color:var(--accent)}
.ctl output{font:12.5px var(--f-mono);text-align:right}
.demo-body .ctl{grid-template-columns:62px 1fr 52px;font-size:13px;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kpi{background:var(--raise);border:1px solid var(--line);border-radius:5px;padding:9px 11px;display:grid;gap:2px;min-width:0}
.kpi .l{font:11px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi .v{font:600 22px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted)}
.pill{display:inline-block;font:500 11px/1.6 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:0 7px;border-radius:3px;border:1px solid currentColor;white-space:nowrap}
.st-ok{color:var(--ok)}.st-warn{color:var(--warn)}.st-crit{color:var(--crit)}.st-info{color:var(--info)}.st-idle{color:var(--muted)}
.tbl-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font:12.5px/1.4 var(--f-mono);font-variant-numeric:tabular-nums}
table.data th{font-weight:500;color:var(--muted);text-align:left;border-bottom:1px solid var(--line);padding:5px 6px 5px 0}
table.data td{border-bottom:1px solid var(--line);padding:5px 6px 5px 0;vertical-align:top}
table.data td.r,table.data th.r{text-align:right}
table.data tr.clickable{cursor:pointer}
table.data tr.clickable:hover td{background:var(--accent-soft)}
.svgbox{background:var(--raise);border:1px solid var(--line);border-radius:6px;padding:8px;overflow-x:auto}
.svgbox svg{display:block;width:100%;max-width:520px;margin:0 auto;height:auto;min-width:300px}
.legendrow{display:flex;flex-wrap:wrap;gap:12px;font:12px var(--f-mono);color:var(--muted)}
.sw{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:5px;border-radius:2px}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.toggle input{accent-color:var(--accent);width:16px;height:16px}
ul.steps,ol.steps{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
ol.steps{padding-left:22px}
.note{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);border-radius:4px;padding:7px 12px;cursor:pointer;font:600 14px var(--f-display);letter-spacing:.02em;justify-self:start}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.sm{padding:4px 10px;font-size:13.5px}
.btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.4;cursor:default}

.navseg button{font-weight:600}
.io{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.iocard{align-content:start;background:var(--raise);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:5px;padding:9px 11px;display:grid;gap:4px;min-width:0}
.iocard .l{font:500 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.iocard p{margin:0;font-size:13.5px;line-height:1.45}
.eyebrow.tg{margin:14px 0 6px}
.scen-btn.tc span{display:grid;gap:1px}
.scen-btn.tc b{font-weight:600}
.scen-btn.tc i{font:400 12px/1.3 var(--f-body);font-style:normal;color:var(--muted)}
/* DGA page */
.fcode{display:inline-block;min-width:30px;text-align:center;font:600 11.5px/1.65 var(--f-mono);padding:0 6px;border-radius:3px;white-space:nowrap;vertical-align:baseline}
.fcode.ghost{background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:500}
.dh{font-size:23px}
.scen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scen-btn{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;border:1px solid var(--line);background:var(--raise);border-radius:5px;padding:7px 9px;cursor:pointer;font:500 14px/1.25 var(--f-display);min-width:0}
.scen-btn span:first-child{min-width:0}
.scen-btn:hover{border-color:var(--accent)}
.scen-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-soft)}
.cause{background:var(--raise);border:1px solid var(--line);border-radius:6px;padding:14px;display:grid;gap:9px;font-size:14.5px}
.cause .ch{font-size:19px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.ladder{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:4px}
.rung{border-top:4px solid var(--zc);background:var(--panel);padding:5px 5px 6px;display:grid;gap:1px;font-size:11.5px;line-height:1.25;opacity:.55;min-width:0}
.rung b{font:600 12px var(--f-mono)}
.rung i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.rung.on{opacity:1;background:color-mix(in srgb,var(--zc) 22%,var(--raise));outline:1.5px solid var(--zc)}
.gtab input{width:92px;text-align:right;font:500 13px var(--f-mono);padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink)}
.gtab input:focus{border-color:var(--accent)}
.gtab td{vertical-align:middle}
.cond{display:inline-block;width:22px;text-align:center;font:600 12px/1.7 var(--f-mono);border-radius:3px;color:#fff}
.cond.c1{background:var(--ok)}.cond.c2{background:#c49a17}.cond.c3{background:var(--warn)}.cond.c4{background:var(--crit)}
.kpi .v .cond{width:30px;font-size:17px}
.mtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--raise)}
.mtabs button{display:flex;justify-content:space-between;align-items:center;gap:6px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;padding:8px 9px;cursor:pointer;font:600 14px var(--f-display);text-align:left;min-width:0}
.mtabs button:nth-child(3n){border-right:0}
.mtabs button:nth-child(n+4){border-bottom:0}
.mtabs button:hover{background:var(--accent-soft)}
.mtabs button[aria-selected="true"]{background:var(--ink);color:var(--panel)}
.result{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-left:5px solid var(--zc);background:var(--raise);border-radius:5px}
.result .fcode{font-size:14px;padding:1px 8px;margin-top:1px}
.result .rt{display:grid;gap:3px;flex:1;min-width:0;font-size:13.5px}
.result .rt b{font:600 16px var(--f-display)}
.result .pill{margin-left:auto}
table.rules td{white-space:nowrap}
table.rules td:first-child{white-space:normal}
table.data tr.hit td{background:var(--accent-soft)}
table.data tr.vals td{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.rule{color:var(--muted)}
.tick{color:var(--ok);font-weight:600}.cross{color:var(--crit);font-weight:600}.ns{color:var(--muted)}
ol.chk{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13.5px}
ol.chk li.pass::marker{color:var(--ok)} ol.chk li.fail::marker{color:var(--crit)} ol.chk li.skip{color:var(--muted)}
details.guide{border:1px solid var(--line);border-radius:6px;background:var(--raise);padding:2px 12px}
details.guide>summary{cursor:pointer;font:600 15px var(--f-display);padding:8px 0;list-style:none;display:flex;align-items:center;gap:8px}
details.guide>summary::-webkit-details-marker{display:none}
details.guide>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.guide[open]>summary::before{transform:rotate(45deg)}
details.guide[open]{padding-bottom:12px}
details.guide>*:not(summary){margin-top:8px}
details.guide p,details.guide li{font-size:14px}
.pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pc h4{margin:0 0 4px;font:600 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pc ul{margin:0;padding-left:18px;display:grid;gap:3px}
.zl{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px}
.bar{display:inline-block;width:70px;height:7px;background:var(--line);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:4px}
.bar i{display:block;height:100%;background:var(--accent)}
table.cmp td{vertical-align:middle}
.basics h4{margin:6px 0 2px;font:600 14px var(--f-display)}
/* DGA context selectors, Pentagon pair */
.ctxrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13.5px}
.ctxrow label{display:flex;align-items:center;gap:6px;color:var(--muted)}
.ctxrow select,.ctxrow input{font:500 13px var(--f-mono);padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:var(--raise);color:var(--ink)}
.ctxrow input{width:84px;text-align:right}
.ctxrow select:focus,.ctxrow input:focus{border-color:var(--accent)}
.svg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.svg2 figure{margin:0;display:grid;gap:4px}
.svg2 .svgbox svg{min-width:0}
.svg2 figcaption{font:11.5px var(--f-mono);color:var(--muted);text-align:center}

/* Standards page */
#stdNav .chip[aria-selected="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font:inherit;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.linkbtn:hover{text-decoration-thickness:2px}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fstep{position:relative;background:var(--raise);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:5px;padding:9px 10px;display:grid;gap:3px;font-size:13px;min-width:0}
.fstep b{font:600 16px var(--f-display)}
.fstep span{color:var(--muted)}
.fstep i{font-style:normal;font-size:12.5px}
.fstep:not(:last-child)::after{content:"→";position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}
.scards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scard{background:var(--raise);border:1px solid var(--line);border-top:4px solid var(--zc);border-radius:5px;padding:9px 10px;display:grid;gap:3px;align-content:start;min-width:0}
.scard b{font:600 16px var(--f-display)}
.scard span{font:11.5px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.scard p{font-size:13px;line-height:1.45}
.verdict{border:1px solid var(--line);border-left:5px solid var(--zc);background:var(--raise);border-radius:5px;padding:10px 12px;display:grid;gap:5px;font-size:14px}
table.data th.c,table.data td.c{text-align:center}
table.data .hl{background:var(--accent-soft);font-weight:600}
table.norm td,table.norm th{white-space:nowrap}
table.data tr.grp td{font:600 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:10px}
table.mtc td{vertical-align:middle}
table.mtx th.vt{vertical-align:bottom;padding:4px 2px;width:34px}
table.mtx th.vt span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font:500 12px/1.2 var(--f-body);letter-spacing:0}
table.mtx td{vertical-align:middle}
.mdot{color:var(--accent);font-size:15px}
table.lim td:nth-child(2){color:var(--ok)}table.lim td:nth-child(3){color:var(--warn)}table.lim td:nth-child(4){color:var(--crit)}
table.lim td:first-child,table.lim td:last-child{color:var(--ink)}
table.calc input{width:76px}
table.calc td.r{white-space:nowrap}
#pane-std .row{display:flex;gap:8px;flex-wrap:wrap}
#pane-std table.data{font:13px/1.45 var(--f-body)}
#pane-std table.data th{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.02em}
#pane-std table.norm,#pane-std table.calc{font:12.5px/1.4 var(--f-mono);font-variant-numeric:tabular-nums}
table.lim td:last-child{min-width:190px;color:var(--muted)}
.kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi .v.cnt{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:15px;align-items:center}
.kpi .v.cnt span{display:inline-flex;gap:3px;align-items:center}
.kpi .v .fcode{font-size:13px}
@media (max-width:620px){
  .svg2{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .fstep:nth-child(2)::after{display:none}
  .scards{grid-template-columns:1fr}
}
@media (max-width:620px){
  .io{grid-template-columns:1fr}
  .ladder{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pc{grid-template-columns:1fr}
  .mtabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtabs button:nth-child(3n){border-right:1px solid var(--line)}
  .mtabs button:nth-child(2n){border-right:0}
  .mtabs button:nth-child(n+4){border-bottom:1px solid var(--line)}
  .mtabs button:nth-child(n+5){border-bottom:0}
}

@media (max-width:860px){
  .app,.app.drawer-open,.app.side-closed{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(260px,50%) minmax(0,1fr)}
  .app.side-closed:not(.drawer-open){grid-template-rows:minmax(0,1fr)}
  .stage{grid-column:1;grid-row:1}
  .side{grid-column:1;grid-row:2;border-right:0;border-top:1px solid var(--line)}
  .drawer{grid-column:1;grid-row:2;border-left:0;border-top:1px solid var(--line)}
  .app.drawer-open .side{display:none}
  .legend{width:160px}
  .topright{left:16px;right:16px;max-width:none;align-items:stretch}
  .topright .navseg button{flex:1;padding:7px 4px;font-size:13px}
  .topleft{top:62px;max-width:calc(100% - 32px)}
  .selbar{max-height:27vh}
  .hud{font-size:12px;padding:8px 10px}
}
@media (max-width:560px){
  .seg button{padding:7px 9px;font-size:13px}
  .slider input{width:90px}
  .topleft{max-width:calc(100% - 150px)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}