/* Phasor — the lab. Loaded after style.css: same tokens, same parts. */

.dim { color: var(--ink3); }
.night .dim { color: var(--ntext2); }
.msg { margin: 0; font-size: 13.5px; color: var(--ink2); min-height: 1.3em; }
.msg.bad { color: var(--bad); }
.night .msg { color: var(--ntext2); }
.night .msg.bad { color: var(--sig2); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.sec.tight { padding: clamp(64px, 8vw, 112px) 0; }

/* ---------- header ---------- */
.lab-head .statrow b { font-size: clamp(20px, 5.6vw, 26px); }
@media (max-width: 420px) { .lab-head .statrow div { padding: 14px 12px; } .lab-head .statrow span { font-size: 9.5px; } }

/* ---------- composer + output ---------- */
.lab-main { padding: clamp(24px, 4vw, 44px) 0 clamp(64px, 8vw, 112px); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .lab-grid { grid-template-columns: minmax(0, 1fr); } }

.comp { display: grid; gap: 16px; }
.comp > .panel-h { margin-bottom: 0; }
.lane-tag { font: 500 11.5px/1 var(--mono); color: var(--ink2); border: 1px dashed var(--line2); border-radius: 999px; padding: 7px 11px; white-space: nowrap; }
.lane-tag.holder { color: var(--sig); border: 1px solid var(--sig); background: var(--sigbg); }
.crow { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.clab { font: 500 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); }
.crow .hint { grid-column: 2; font-size: 13px; color: var(--ink3); line-height: 1.45; }
@media (max-width: 600px) { .crow { grid-template-columns: minmax(0, 1fr); } .crow .hint { grid-column: 1; } }
.sizes { justify-self: start; }
.sizes button { min-width: 34px; padding: 7px 10px; font: 500 13.5px/1.2 var(--mono); }
.sizes button[disabled] { opacity: .32; cursor: not-allowed; }
.chips.presets { margin: 0; }
.chips.presets .chip { cursor: pointer; }

.gates { display: grid; gap: 8px; }
.gg { display: flex; flex-wrap: wrap; gap: 6px; }
.gb { min-width: 44px; height: 40px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card); font: 500 14px/1 var(--mono); color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.gb:hover { border-color: var(--ink); }
.gb[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gb.two { color: var(--sig); }
.gb.two[aria-pressed="true"] { background: var(--sig); border-color: var(--sig); color: #fff; }
.gb[disabled] { opacity: .32; cursor: not-allowed; }
@media (max-width: 420px) { .gb { min-width: 40px; padding: 0 8px; } }

.angle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.angle label { font: 500 13px var(--mono); color: var(--ink2); white-space: nowrap; min-width: 9.5em; }
.angle label b { color: var(--sig); font-weight: 500; font-size: 15px; }
.angle .ahint { grid-column: 1 / -1; font-size: 13px; color: var(--ink2); }

.cstatus { margin: 0; font-size: 14px; color: var(--ink2); min-height: 1.5em; }
.cstatus b { color: var(--ink); font: 500 13.5px var(--mono); }
.wires { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line2); border-radius: 12px; background-color: var(--paper); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 46px 46px; background-position: 66px 3px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.wires svg { display: block; max-width: none; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; }
.wires text { font: 500 12.5px var(--mono); fill: var(--ink); }
.wires .ql { fill: var(--ink3); font-size: 11px; }
.wires .k0 { fill: var(--ink2); }
.wires .wire line { stroke: var(--ink); stroke-width: 1.2; opacity: .5; }
.wires .wire.on .ql, .wires .wire.on .k0 { fill: var(--sig); }
.wires .wire.on line { stroke: var(--sig); opacity: 1; }
.wires .meas rect { fill: var(--card); stroke: var(--ink2); stroke-width: 1.1; }
.wires .meas path, .wires .meas line { stroke: var(--ink2); stroke-width: 1.2; fill: none; }
.wires .hit { fill: transparent; pointer-events: all; cursor: crosshair; outline: none; }
.wires .hit:hover, .wires .hit:focus-visible { fill: rgba(229, 72, 31, .05); }
.wires .hit:focus-visible { stroke: var(--sig); stroke-width: 1; stroke-dasharray: 3 3; }
.wires [data-i] { cursor: pointer; outline: none; }
.wires .g1 rect { fill: var(--card); stroke: var(--ink); stroke-width: 1.3; transition: stroke .12s, fill .12s; }
.wires .g1 text { text-anchor: middle; font-size: 13px; }
.wires .g1.ga text { font-size: 11.5px; }
.wires .g1 .an { font-size: 8.5px !important; fill: var(--ink2); }
.wires .g2 line, .wires .g2 path { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.wires .g2 .dot, .wires .ghost .dot { fill: var(--ink); }
.wires .g2 .tg { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.wires .gh { fill: transparent; pointer-events: all; stroke: none; }
.wires [data-i]:hover .g1 rect, .wires .g1[data-i]:hover rect, .wires .g1[data-i]:focus-visible rect { stroke: var(--sig); fill: #fff5f1; }
.wires .g2[data-i]:hover line, .wires .g2[data-i]:hover path, .wires .g2[data-i]:hover .tg, .wires .g2[data-i]:focus-visible line, .wires .g2[data-i]:focus-visible path, .wires .g2[data-i]:focus-visible .tg { stroke: var(--sig); }
.wires .g2[data-i]:hover .dot, .wires .g2[data-i]:focus-visible .dot { fill: var(--sig); }
.wires .g2[data-i]:hover .gh, .wires .g2[data-i]:focus-visible .gh { fill: var(--sigbg); }
.wires .ghost { opacity: .35; pointer-events: none; }
.wires .pend { fill: var(--sig); animation: pend 1.1s ease-in-out infinite; }
@keyframes pend { 50% { opacity: .3; } }

.cfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cbtns { display: flex; gap: 8px; }
.gcount { font: 13px var(--mono); color: var(--ink2); }
.gcount.over { color: var(--bad); }
.run { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
@media (max-width: 560px) { .run { grid-template-columns: minmax(0, 1fr); } }

.out { display: grid; gap: 14px; position: sticky; top: 84px; }
@media (max-width: 1000px) { .out { position: static; } }
.out > .panel-h { margin-bottom: 0; }
.out .mode { font: 500 11.5px/1 var(--mono); color: var(--ink3); letter-spacing: .02em; }
.out .mode.meas { color: var(--sig); }
.otop { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; min-width: 0; }
.otop b { font: 400 clamp(36px, 4vw, 50px)/1 var(--mono); letter-spacing: -.04em; color: var(--sig); white-space: nowrap; }
.otop span { font-size: 14px; color: var(--ink2); }
#outCv { width: 100%; height: 210px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font: 12px var(--mono); color: var(--ink3); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--ink); }
.legend i.gh { background: rgba(22, 21, 15, .14); }
.otl { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; border-top: 1px solid var(--line); padding-top: 14px; }
.otl li { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; gap: 4px 12px; align-items: center; font: 13px var(--mono); }
.otl li b { font-weight: 500; text-align: right; }
.otl li em { grid-column: 1 / -1; font-style: normal; color: var(--ink3); font-size: 11.5px; margin-top: -2px; }
.otl li em:empty { display: none; }
.onote { margin: 0; font-size: 12.5px; color: var(--ink3); }

/* ---------- job record ---------- */
.rec { margin-top: 18px; padding: 24px; }
.rec-t { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-width: 0; }
.rec-t b { font: 400 24px/1 var(--mono); color: var(--sig2); letter-spacing: -.02em; }
.rec-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rec .pill { border-color: var(--nline); color: var(--ntext2); }
.rec-a { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-g { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 860px) { .rec-g { grid-template-columns: minmax(0, 1fr); } }
.rec .qasm { margin: 10px 0 0; background: var(--night2); border: 1px solid var(--nline); border-radius: 10px; padding: 14px 16px; font: 12.5px/1.7 var(--mono); color: var(--ntext); max-height: 320px; overflow: auto; white-space: pre; }
.rec .kv dd .ket { color: var(--sig2); }
.rec .kv dd.words { word-break: normal; overflow-wrap: anywhere; }
.rec .vlog { background: var(--night2); border: 1px solid var(--nline); margin-top: 18px; min-height: 0; }
.rec-empty { margin: 0; color: var(--ntext2); }
.rec-f { margin-top: 12px; }
.rec-f .verdict:empty { display: none; }

/* ---------- apps ---------- */
.apps { padding: 22px; }
.apps > .seg { margin-bottom: 24px; }
@media (max-width: 560px) { .apps { padding: 16px; } .apps > .seg { border-radius: 18px; } }
.comp .msg:empty { display: none; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 860px) { .app-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.app-in { display: grid; gap: 14px; align-content: start; }
.f { display: grid; gap: 8px; min-width: 0; }
.f > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--ink2); }
.f > span em { font: normal 12px var(--mono); color: var(--ink3); text-align: right; }
.f > span em.bad { color: var(--bad); }
textarea.inp { resize: vertical; min-height: 168px; font: 14px/1.55 var(--mono); }
.f2 { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.dact { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.how { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: how; display: grid; gap: 14px; }
.how li { counter-increment: how; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font-size: 14.5px; color: var(--ink2); }
.how li::before { content: counter(how, decimal-leading-zero); font: 500 12px/1.9 var(--mono); color: var(--sig); }
.dres-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.winners { list-style: none; margin: 14px 0 16px; padding: 0; border-top: 1px solid var(--line2); }
.winners li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.winners li span { font: 500 12px var(--mono); color: var(--sig); }
.winners li b { font: 400 28px/1.1 var(--serif); overflow-wrap: anywhere; }
.winners li em { grid-column: 2; font: normal 12px var(--mono); color: var(--ink3); }
.dres-f { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dres-f .verdict:empty { display: none; }
#dLog { margin-top: 14px; min-height: 0; }

.call-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 40px; align-items: end; margin-bottom: 18px; }
.call-cd { font: 400 clamp(40px, 5vw, 56px)/1 var(--mono); letter-spacing: -.04em; margin-top: 10px; }
.call-p { margin: 0; color: var(--ink2); max-width: 62ch; font-size: 14.5px; }
.call-p b { color: var(--sig); }
@media (max-width: 700px) { .call-h { grid-template-columns: minmax(0, 1fr); } }
.call-s { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--ink2); padding: 12px 0; border-top: 1px solid var(--line); margin-bottom: 14px; }
.call-s b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.call-s .mine-s { color: var(--sig); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.cgrid.dense { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.cc { border: 1px solid var(--line2); background: var(--card); border-radius: 8px; padding: 10px 10px 9px; text-align: left; display: grid; gap: 7px; font: 13px var(--mono); color: var(--ink); min-width: 0; transition: border-color .15s, background .15s; }
.cc:hover:not([disabled]) { border-color: var(--ink); }
.cc i { display: block; height: 3px; background: var(--paper2); border-radius: 3px; position: relative; overflow: hidden; }
.cc i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--ink3); border-radius: 3px; }
.cc em { font-style: normal; font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cc[aria-pressed="true"] em { color: #a8a497; }
.cc[aria-pressed="true"] i { background: rgba(241, 238, 230, .2); }
.cc[aria-pressed="true"] i::after { background: var(--sig2); }
.cc.mine { border-color: var(--sig); box-shadow: inset 0 0 0 1px var(--sig); }
.cc.mine em { color: var(--sig); }
.cc[disabled] { cursor: default; }
.cc[disabled]:not(.mine) { opacity: .7; }
.call-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px; }
.call-pick { font-size: 14.5px; color: var(--ink2); }

.lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 640px) { .lanes { grid-template-columns: minmax(0, 1fr); } }
.ln { border: 1px solid var(--line2); border-radius: 14px; padding: 20px; background: var(--paper); min-width: 0; }
.ln.cur { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--card); }
.ln-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ln > b { display: block; font: 400 clamp(40px, 4.4vw, 54px)/1 var(--serif); margin: 14px 0 14px; }
.ln ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink2); }
.ln li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ln li span:last-child { color: var(--ink); text-align: right; }
.lane-me { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--paper2); }
.lane-me p { margin: 0; color: var(--ink2); max-width: 70ch; }
.lane-me b { color: var(--ink); font-weight: 500; }
.lane-n { margin: 14px 0 0; font-size: 13.5px; color: var(--ink3); max-width: 80ch; }

.hw { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 860px) { .hw { grid-template-columns: minmax(0, 1fr); } }
.hw-n { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.hw-n div { display: grid; gap: 8px; align-content: start; }
.hw-n b { font: 400 clamp(40px, 5vw, 60px)/1 var(--mono); letter-spacing: -.04em; }
.hw-n div:last-child b { color: var(--sig); }
.hw-n em { font-style: normal; font-size: 13px; color: var(--ink3); }
.prog { height: 8px; background: var(--paper2); border-radius: 8px; overflow: hidden; }
.prog u { display: block; height: 100%; background: var(--sig); border-radius: 8px; text-decoration: none; }
.hw-p { margin: 12px 0 0; font-size: 15px; }
.hw-p b { font-weight: 500; color: var(--sig); }
.hw-x { margin: 14px 0 0; font-size: 14px; color: var(--ink2); max-width: 60ch; }
.ladder { list-style: none; margin: 0; padding: 0; align-self: start; }
.ladder li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 14px; padding: 13px 0; border-top: 1px solid var(--line); align-items: baseline; }
.ladder li:last-child { border-bottom: 1px solid var(--line); }
.ladder li span { font: 500 13px var(--mono); color: var(--ink3); }
.ladder li b { font: 400 24px/1.1 var(--serif); }
.ladder li em { grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--ink3); font-family: var(--mono); }
.ladder li.done em { color: var(--ok); }
.ladder li.ready em, .ladder li.next em { color: var(--sig); }
.ladder li.next span { color: var(--sig); }
.ladder li.ahead b { color: var(--ink3); }

/* ---------- ask ---------- */
.chat { border: 1px solid var(--nline); border-radius: 16px; overflow: hidden; background: var(--night2); }
.chat-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--nline); font: 500 12px/1.3 var(--mono); color: var(--ntext2); letter-spacing: .02em; }
.chat-st { display: inline-flex; align-items: center; gap: 9px; }
.aid { width: 7px; height: 7px; border-radius: 50%; background: var(--ntext2); flex: none; }
.aid.on { background: #4ade80; }
.aid.off { background: #e0b44c; }
.chat-log { padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; min-height: 240px; max-height: 480px; overflow-y: auto; }
.cm { max-width: min(78%, 680px); display: grid; gap: 6px; justify-items: start; }
.cm .who { font: 500 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ntext2); }
.cm .tx { font-size: 15px; line-height: 1.55; color: var(--ntext); overflow-wrap: anywhere; }
.cm .tx p { margin: 0 0 8px; }
.cm .tx p:last-child { margin: 0; }
.cm .tx code { font: 13px var(--mono); background: var(--night3); padding: 1px 5px; border-radius: 4px; }
.cm.me { align-self: flex-end; justify-items: end; }
.cm.me .tx { background: var(--night3); border-radius: 12px 12px 4px 12px; padding: 10px 14px; }
.cm.ai .tx { border-left: 2px solid var(--sig2); padding-left: 14px; }
.cm.ai .btn { margin-top: 4px; }
.cm.wait .tx { color: var(--ntext2); animation: pend 1.1s ease-in-out infinite; }
.cm.sys { max-width: none; align-self: stretch; }
.cm.sys .tx { font: 13px/1.6 var(--mono); color: var(--ntext2); border: 1px dashed var(--nline); border-radius: 10px; padding: 12px 14px; width: 100%; }
.chips.sugg { padding: 0 18px; margin: 0 0 14px; }
.night .chip { border-color: var(--nline); color: var(--ntext2); cursor: pointer; text-align: left; }
.night .chip:hover { border-color: var(--ntext2); color: var(--ntext); }
.chat-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px 18px 8px; border-top: 1px solid var(--nline); align-items: end; }
.chat-in textarea.inp { resize: none; min-height: 50px; font: 15px/1.45 var(--sans); }
.chat > .msg { padding: 0 18px 14px; }
@media (max-width: 560px) { .cm { max-width: 92%; } .chat-in { grid-template-columns: minmax(0, 1fr); } .chat-in .btn { justify-self: end; } }

/* ---------- process table ---------- */
.psp { padding: 18px 22px 16px; }
.tblw { overflow-x: auto; }
#psT td.nm { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#psT td { white-space: nowrap; }
#psT tr.cur td { background: var(--sigbg); }
#psT tr.click:focus-visible { outline: 2px solid var(--sig); outline-offset: -2px; }
#psT .empty { padding: 30px 0; }
.ps-f { display: flex; justify-content: center; padding-top: 16px; }
.ps-f:has(> [hidden]) { padding-top: 0; }
@media (max-width: 640px) { .psp { padding: 16px 14px 12px; } #psT td.nm { max-width: 120px; } #psT th, #psT td { padding-right: 10px; } }