/* QualityRelay Studio. Rules follow the COR Studio design system: images first, docked panels,
   neutral greys, colour only for meaning, one accent, AA text, tabular numbers. */
:root{
  --bg:#08090b;--vp:#050608;--panel:#0e1013;--panel2:#14171b;--panel3:#1b1f24;--border:#22262c;--border2:#30353d;
  --text:#e8eaed;--muted:#a2aab5;--faint:#848e9a;
  --accent:#76b900;--accent2:#93d42a;
  --slot:#3987e5;--tab:#e06a35;--review:#e0b000;--scrap:#6b727c;--escape:#ff5d5d;--caught:#c77dff;
  --good:#3fbf6f;--bad:#ff6b6b;
  --mono:ui-monospace,"Geist Mono",SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:13px/1.5 "Geist",system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
a{color:var(--accent2);text-decoration:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.faint{color:var(--faint)}.muted{color:var(--muted)}.small{font-size:12px}.hidden{display:none!important}
kbd{font:10.5px var(--mono);border:1px solid var(--border2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--muted);margin-left:auto}

/* app bar 44 px */
.appbar{height:44px;display:flex;align-items:center;gap:18px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:650;font-size:14px}
.brand span{color:var(--faint);font-weight:500}
.tabs{display:flex;gap:2px;height:100%}
.tabs a{display:flex;align-items:center;padding:0 12px;color:var(--muted);font-size:13px;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--text)}.tabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.context{flex:1;text-align:right;color:var(--faint);font:12px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier{font:600 10.5px var(--mono);letter-spacing:.08em;color:#08090b;background:var(--review);padding:3px 8px;border-radius:4px}
.iconbtn{width:30px;height:30px;border-radius:6px;border:1px solid var(--border2);background:var(--panel2);color:var(--text);cursor:pointer;font-size:13px}
.iconbtn:hover{background:var(--panel3)}

/* WEB-01: one colour per source family, on the app bar band and the tier badge. Never shared. */
body{--fam:var(--review);--subh:0px}
body[data-family=physical]{--fam:var(--slot)}body[data-family=agents]{--fam:var(--caught)}body[data-family=claims]{--fam:var(--border2)}
body.hassub{--subh:32px}
.appbar{box-shadow:inset 0 -2px 0 var(--fam)}
.tier{background:var(--fam)}
.tier.unverified{background:none;color:var(--bad);border:1px solid rgba(255,107,107,.5)}
.tier.small{font-size:10px;padding:1px 6px}
.tabs a.minor{color:var(--faint)}
.subnav[hidden]{display:none}
.subnav{height:32px;display:flex;align-items:center;gap:2px;padding:0 14px;background:var(--panel2);border-bottom:1px solid var(--border)}
.subnav a{padding:0 10px;height:100%;display:flex;align-items:center;color:var(--muted);font-size:12.5px;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--text)}.subnav a.on{color:var(--text);border-bottom-color:var(--fam)}
.subnote{margin-left:auto;color:var(--faint);font-size:12px}
.view{height:calc(100% - 44px - var(--subh))}
.page{overflow:auto;padding:22px 26px 40px}

/* studio */
.studio{display:grid;grid-template-columns:268px 1fr 372px;height:100%}
.studio.noinsp{grid-template-columns:268px 1fr 0}
.studio.noinsp .dock.right{display:none}
.dock{background:var(--panel);display:flex;flex-direction:column;overflow:auto;min-height:0}
.dock.left{border-right:1px solid var(--border)}.dock.right{border-left:1px solid var(--border)}
.phead{height:36px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--border);
  border-top:1px solid var(--border);font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dock .phead:first-child{border-top:0}
.pbody{padding:12px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
select,input[type=number]{display:block;width:100%;margin-top:4px;background:var(--panel2);color:var(--text);border:1px solid var(--border2);border-radius:6px;padding:6px 8px;font:13px inherit}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button{font:inherit;cursor:pointer}
.primary{width:100%;background:var(--accent);color:#08090b;border:0;border-radius:6px;padding:9px;font-weight:700;font-size:13px}
.primary:hover{background:var(--accent2)}.primary:disabled{opacity:.5;cursor:wait}
.ghost{background:var(--panel2);border:1px solid var(--border2);color:var(--text);border-radius:6px;padding:7px;font-size:12.5px}
.ghost:hover{background:var(--panel3)}
.seg{display:flex;background:var(--panel2);border:1px solid var(--border2);border-radius:6px;padding:2px;margin-bottom:12px}
.seg button{flex:1;border:0;background:none;color:var(--muted);padding:5px;border-radius:4px;font-size:12.5px}
.seg button.on{background:var(--panel3);color:var(--text);box-shadow:inset 0 0 0 1px var(--border2)}
.seg.small{margin:0;width:100%}
.hint{font-size:12px;color:var(--faint);margin:0 0 10px}
.status{font-size:12px;color:var(--faint);margin-top:8px;min-height:18px}
.story{margin:0 0 10px;color:var(--muted);font-size:12.5px;min-height:56px}
.check{display:flex!important;align-items:center;gap:7px;color:var(--text)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;font-size:12px;color:var(--muted);margin-top:6px}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.sw.slot{background:var(--slot)}.sw.tab{background:var(--tab)}.sw.review{background:var(--review)}.sw.scrap{background:var(--scrap)}.sw.escape{background:var(--escape)}.sw.caught{background:var(--caught)}

.center{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--vp)}
.viewports{flex:1;display:grid;grid-template-columns:1fr;min-height:0}
.viewports.compare{grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.vp{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(900px 500px at 50% 20%,#141a22,#050608)}
.vp canvas{display:block}
.vp.tall{height:calc(100vh - 180px);border:1px solid var(--border);border-radius:8px}
.corner{position:absolute;z-index:3;font:12px var(--mono);pointer-events:none;text-shadow:0 1px 2px #000}
.corner.tl{top:10px;left:12px;font-weight:600;letter-spacing:.04em}
.corner.tr{top:10px;right:12px;text-align:right}
.corner.bl{bottom:10px;left:12px}
.counters span{display:inline-block;margin-left:12px}.counters b{font-size:15px}.counters i{font-style:normal;color:var(--faint);margin-right:4px;font-size:11px}
.transport{height:44px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--panel);border-top:1px solid var(--border)}
.transport input[type=range]{flex:1;accent-color:var(--accent)}
.transport select{width:auto;margin:0}
.clock{min-width:48px;color:var(--muted)}
.metricstrip{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--panel);border-top:1px solid var(--border)}
.metricstrip div{padding:8px 12px;border-right:1px solid var(--border)}
.metricstrip small{display:block;color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.metricstrip b{font:600 15px var(--mono)}.metricstrip em{font:12px var(--mono);font-style:normal;margin-left:6px}
.up{color:var(--good)}.down{color:var(--bad)}

/* 3D annotations: thin */
.ann{font:11px var(--mono);color:var(--text);padding:1px 5px;border-left:1px solid var(--muted);text-shadow:0 0 3px #000,0 0 6px #000;white-space:nowrap;pointer-events:none}
.ann.sel{color:var(--accent2);border-left-color:var(--accent2)}
.readout{font:600 12px var(--mono);color:#08090b;background:var(--accent);padding:1px 6px;border-radius:3px;white-space:nowrap}
.tip{position:fixed;z-index:50;pointer-events:none;font:12px var(--mono);background:var(--panel3);border:1px solid var(--border2);padding:3px 7px;border-radius:4px}

/* inspector */
.insp h2{font-size:15px;margin:0 0 2px}
.insp .sub{color:var(--faint);font:12px var(--mono);margin-bottom:12px}
.insp section{border-top:1px solid var(--border);padding:10px 0}
.insp h4{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.kv{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12.5px}
.kv span:nth-child(odd){color:var(--muted)}.kv span:nth-child(even){font-family:var(--mono);text-align:right}
.badge{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--mono);padding:2px 8px;border-radius:99px;border:1px solid var(--border2)}
.badge.ok{color:var(--good);border-color:rgba(63,191,111,.5)}.badge.bad{color:var(--bad);border-color:rgba(255,107,107,.5)}
.badge.hold{color:var(--review);border-color:rgba(224,176,0,.5)}.badge.mute{color:var(--muted)}
.bar{height:6px;background:var(--panel3);border-radius:3px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:var(--accent)}
.tl{list-style:none;margin:0;padding:0;font-size:12px}
.tl li{display:grid;grid-template-columns:86px 1fr auto;gap:6px;padding:3px 0;border-bottom:1px dashed var(--border)}
.tl li span:last-child{font-family:var(--mono);color:var(--faint)}
.link{color:var(--accent2);cursor:pointer;font-family:var(--mono)}
.why{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:12.5px;color:var(--muted);margin-top:8px}
.why b{color:var(--text)}
.caughtlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* pages */
.pagehead{max-width:900px;margin-bottom:18px}.pagehead h1{font-size:22px;margin:0 0 6px}.pagehead p{color:var(--muted);margin:0;font-size:13.5px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px}
.card h3{font-size:14px;margin:0 0 10px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.kpi strong{display:block;font:700 26px var(--mono)}.kpi span{color:var(--muted);font-size:12.5px}
.kpi.good strong{color:var(--accent2)}.kpi.warn strong{color:var(--review)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--faint);font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:7px 9px;border-bottom:1px solid var(--border2)}
td{padding:7px 9px;border-bottom:1px solid var(--border);white-space:nowrap}
tr:hover td{background:var(--panel2)}
th.num,td.num{text-align:right}
.sid{font-family:var(--mono);color:var(--faint);margin-right:6px}
.chip{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font:600 11.5px var(--mono);padding:1px 7px;border-radius:99px;border:1px solid}
.chip.ok{color:var(--good);border-color:rgba(63,191,111,.45)}.chip.no{color:var(--bad);border-color:rgba(255,107,107,.45)}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.chart{margin:0}.chart svg{width:100%;height:auto;display:block}
.chart svg.root{--bg:var(--panel);--ink:#e8eaed;--ink2:#a2aab5;--grid:#262b32;--s1:#3987e5;--s2:#e06a35;--s3:#199e70}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.claims ul{margin:0;padding-left:18px}.claims li{margin:7px 0;color:var(--muted);font-size:13.5px}.claims li b{color:var(--text)}
.claims.ok{border-top:3px solid var(--good)}.claims.no{border-top:3px solid var(--bad)}
code{font-family:var(--mono);font-size:12px;background:var(--panel2);padding:1px 5px;border-radius:4px}
.foot{margin-top:18px}
.partsgrid{display:grid;grid-template-columns:280px 1fr;gap:12px}
.partsgrid .dock{border:1px solid var(--border);border-radius:8px;max-height:calc(100vh - 180px)}
.partlist{display:flex;flex-direction:column;gap:6px}
.partlist button{display:flex;justify-content:space-between;align-items:center;text-align:left;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 10px}
.partlist button.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.partlist small{color:var(--faint);display:block;font-size:11px}.partlist b{font:600 12.5px var(--mono)}
.verdict{margin-top:6px;padding:9px 11px;border-radius:6px;font-size:12.5px;border:1px solid var(--border2)}
.verdict.ok{border-color:var(--good)}.verdict.risk{border-color:var(--bad)}
@media (max-width:1100px){.studio{grid-template-columns:240px 1fr 0}.dock.right{display:none}.two,.charts,.partsgrid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
.viewports.compare .corner.tr{top:32px;left:12px;right:auto;text-align:left}.viewports.compare .counters span{margin:0 12px 0 0}
.metricstrip .lead{display:flex;align-items:center;color:var(--faint);font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
.camview{position:relative;height:190px;border-radius:6px;overflow:hidden;background:#000;border:1px solid var(--border2)}.camview canvas{display:block}
.camimg{width:100%;border-radius:6px;margin-top:8px;border:1px solid var(--border2)}
.filebtn{display:flex!important;align-items:center;justify-content:center;margin:0!important;color:var(--text)!important;cursor:pointer}
.livefeed div{display:grid;grid-template-columns:auto 1fr;gap:6px;padding:3px 0;border-bottom:1px dashed var(--border);font:11.5px var(--mono);color:var(--muted)}
.livefeed b{color:var(--accent2)}
.qr{background:#fff;border-radius:6px;padding:6px;display:inline-block}.qr svg{display:block;width:132px;height:132px}
.explain{font-size:12.5px;color:var(--text);line-height:1.55}

/* physical + agents pages */
.cardhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}.cardhead h3{margin:0;flex:1}
.empty{color:var(--faint);font-size:12.5px;margin:12px 2px 2px}
.chip.phys{color:var(--slot);border-color:rgba(57,135,229,.5)}.chip.hold{color:var(--review);border-color:rgba(224,176,0,.5)}.chip.mute{color:var(--muted);border-color:var(--border2)}
.agentsgrid{display:grid;grid-template-columns:280px 1fr;gap:12px;align-items:start}
.dock.boxed{border:1px solid var(--border);border-radius:8px}
.colmain{min-width:0}
.steps{list-style:none;margin:0;padding:0;font-size:12.5px}
.steps li{display:grid;grid-template-columns:150px 1fr auto;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--border)}
.steps li>span:first-child{font:11.5px var(--mono);color:var(--faint)}
.steps li>span:last-child{font-family:var(--mono);text-align:right}
.steps .bar{grid-column:2/4}
.steps.seq li{grid-template-columns:34px 190px 1fr auto}
.steps li.bad>span:nth-child(2){color:var(--bad)}
@media (max-width:1100px){.agentsgrid{grid-template-columns:1fr}.subnote{display:none}}
/* viewport camera controls */
.viewctl{position:absolute;right:12px;bottom:38px;z-index:4;display:flex;flex-direction:column;gap:4px}
.viewctl button{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(16,19,24,.78);color:#e8edf2;font:600 16px/1 var(--mono);cursor:pointer;backdrop-filter:blur(4px)}
.viewctl button:hover{background:rgba(40,46,56,.92);border-color:rgba(255,255,255,.3)}
.viewhint{position:absolute;right:54px;bottom:40px;z-index:3;max-width:210px;text-align:right;font:11px/1.5 var(--mono);color:rgba(232,237,242,.7);pointer-events:none;text-shadow:0 1px 2px #000;transition:opacity 1.2s}
.viewhint.gone{opacity:0}
.viewports.compare .viewhint{display:none}

/* ---- right dock: Agents (live analytics) | Inspector ---- */
.rtabs{display:flex;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2;background:var(--panel)}
.rtabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:10px 8px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rtabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.agentsPanel{padding:12px 14px 18px}
.ag-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ag-head h2{font-size:14px;margin:0;flex:1}
.chk{font:600 10.5px var(--mono);padding:2px 7px;border-radius:999px;border:1px solid var(--border2);color:var(--muted)}
.chk.ok{color:#a7e05a;border-color:rgba(118,185,0,.45);background:rgba(118,185,0,.08)}
.chk.bad{color:#ff9b9b;border-color:rgba(255,93,93,.5)}
.ag-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.ag-kpi{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:7px 8px}
.ag-kpi b{display:block;font:600 17px var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.ag-kpi span{font-size:10.5px;color:var(--faint);letter-spacing:.02em}
.ag-sec{border-top:1px solid var(--border);padding:10px 0 4px}
.ag-sec h4{display:flex;justify-content:space-between;margin:0 0 6px;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ag-sec h4 em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--faint);font-weight:400}
.ag-net{width:100%;height:auto;display:block}
.ag-net .edge{stroke:#3a4049;stroke-linecap:round}
.ag-net .node rect{fill:var(--panel2);stroke:var(--border2);stroke-width:1}
.ag-net .node.active rect{stroke:#8d96a0}
.ag-net .node.alarm rect{stroke:var(--escape);stroke-width:1.5}
.ag-net .node.prop rect{stroke:var(--review);stroke-width:1.5}
.ag-net text{fill:var(--text);font:600 10.5px "Geist",system-ui,sans-serif}
.ag-net text.sub{fill:var(--faint);font:500 9.5px var(--mono)}
.ag-net .pulse{fill:#e8eaed}
.ag-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px;background:var(--panel2)}
.ag-bar i{display:block;height:100%}
.ag-leg{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:11px;color:var(--muted)}
.ag-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.ag-pareto{display:grid;grid-template-columns:132px 1fr 62px;gap:4px 8px;align-items:center;font-size:11.5px}
.ag-pareto .lbl{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-pareto .trk{height:10px;background:var(--panel2);border-radius:3px;overflow:hidden}
.ag-pareto .trk i{display:block;height:100%;background:var(--review);border-radius:0 3px 3px 0}
.ag-pareto .v{font-family:var(--mono);text-align:right;color:var(--text);white-space:nowrap}
.ag-spc{width:100%;height:auto;display:block}
.ag-spc .band{fill:rgba(255,255,255,.035)}
.ag-spc .lim{stroke:#4a515b;stroke-dasharray:3 3}
.ag-spc .ctr{stroke:#5a626d}
.ag-spc text{fill:var(--faint);font:9.5px var(--mono)}
.ag-log{list-style:none;margin:0;padding:0;font-size:11.5px}
.ag-log li{display:grid;grid-template-columns:44px 1fr;gap:6px;padding:4px 0;border-bottom:1px dashed var(--border)}
.ag-log .t{font-family:var(--mono);color:var(--faint)}
.ag-log b{font-weight:600}
.ag-log .k{font:600 9.5px var(--mono);letter-spacing:.04em;padding:0 4px;border-radius:3px;margin-right:4px;background:var(--panel3);color:var(--muted)}
.ag-log .k.hold{background:rgba(224,176,0,.16);color:#f0c64a}.ag-log .k.pass{background:rgba(118,185,0,.14);color:#a7e05a}
.ag-log .k.alarm{background:rgba(255,93,93,.16);color:#ff9b9b}
.ag-roster{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:11.5px}
.ag-roster span:nth-child(odd){color:var(--muted)}.ag-roster span:nth-child(even){font-family:var(--mono);color:var(--faint);text-align:right}
.ag-cal{display:grid;grid-template-columns:1fr;gap:4px;font-size:11.5px;color:var(--muted)}
.ag-conv li{grid-template-columns:44px 1fr}

/* closed loop (CNC cell) */
.rtabs button[hidden]{display:none}
.dims{width:100%;border-collapse:collapse;font-size:11.5px;margin:4px 0}
.dims th{text-align:left;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:2px 4px;border-bottom:1px solid var(--border)}
.dims td{padding:3px 4px;border-bottom:1px dashed var(--border);font-family:var(--mono)}
.dims td:first-child{font-family:inherit;color:var(--muted)}
.dims tr.bad td{color:#ff9b9b}
.gcode2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gcode{margin:0;background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:6px 8px;font:10px/1.5 var(--mono);color:var(--muted);overflow:auto;max-height:230px;white-space:pre}
.gcode .chg{display:inline-block;width:100%;color:var(--text)}
.gcode .chg.before{background:rgba(255,93,93,.18)}.gcode .chg.after{background:rgba(118,185,0,.18)}
.ag-roster .running{color:#a7e05a}.ag-roster .halted{color:#f0c64a}.ag-roster .fault{color:#ff9b9b}
.ag-click li{cursor:pointer}.ag-click li:hover{background:var(--panel2)}
.ag-net g[data-agent]:hover rect{stroke:var(--accent)}