/* site/css/labs.css — the Labs chapter (root #labs): the lab bench, the four labs (site/lab/*.js) and the terminal
   card that sits under them. Owner: lane L3 (phase 2, wave 2). Tokens only (new ones carry the --m-labs- prefix).
   Every state a lab shows is given three ways: colour, shape or pattern, and a text label. Motion is a 200 ms
   transform/opacity at most and is removed under prefers-reduced-motion (the shell's global rule). */
#labs{--m-labs-ok:var(--green);--m-labs-warn:var(--copper);--m-labs-bad:var(--terra);--m-labs-stage:color-mix(in srgb,var(--bg) 60%,var(--panel))}
#labs>.labs-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:grid;gap:18px}

/* ---- bench ---- */
#labs .lab-bench{border:1px solid var(--hair2);border-radius:var(--r);background:var(--panel);overflow:hidden}
#labs .lab-tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--hair2);overflow-x:auto;scrollbar-width:none}
#labs .lab-tabs::-webkit-scrollbar{display:none}
#labs .lab-tab{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:8px 14px;border:0;border-radius:12px;background:transparent;color:var(--dim);font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
#labs .lab-tab .lt-n{font-size:11px;color:var(--gold-t);letter-spacing:.08em}
#labs .lab-tab:hover{color:var(--ink);background:var(--panel2)}
#labs .lab-tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
#labs .lab-tab[aria-selected="true"] .lt-n{color:var(--bg);opacity:.7}
#labs .lab-panel{padding:clamp(18px,2.4vw,28px)}
#labs .lab-panel[hidden]{display:none}
#labs .lab-head{max-width:70ch}
#labs .lab-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-t);margin:0 0 8px}
#labs .lab-t{font-size:clamp(21px,2.2vw,26px);font-weight:700;margin:0;letter-spacing:-.02em}
#labs .lab-s{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:var(--dim)}
#labs .lab-stage{margin-top:18px;border:1px solid var(--hair2);border-radius:var(--rs);background:var(--m-labs-stage);padding:16px;min-height:300px;position:relative}
#labs .lab-failed .lab-stage::after{content:"…";color:var(--faint)}
#labs .lab-q{margin-top:16px;display:grid;gap:8px}
#labs .lab-q .meta{margin:0}
#labs .lab-q blockquote{margin:0;padding:2px 14px;border-inline-start:2px solid var(--gold);font-size:13.5px;line-height:1.65;color:var(--dim);transition:color .3s,border-color .3s}
#labs .lab-q.is-hit blockquote{color:var(--ink);border-color:var(--terra)}
#labs .lab-cap{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--faint)}
#labs .lab-cap .lab-case{color:var(--gold-t);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
#labs .lab-cap .lab-case:hover{text-decoration-thickness:2px}

/* ---- shared lab controls ---- */
#labs .lab-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#labs .lab-ctl .btn{min-height:36px;padding:7px 13px;font-size:12.5px}
#labs .btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
#labs .btn.is-bad{border-color:var(--m-labs-bad);color:var(--m-labs-bad)}
#labs .btn.is-bad:hover{background:color-mix(in srgb,var(--m-labs-bad) 10%,transparent)}
#labs .lab-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 8px;font-family:var(--f-mono)}
#labs fieldset.lab-radios{border:0;margin:0;padding:0;min-width:0}
#labs fieldset.lab-radios legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:0;margin-bottom:8px}
#labs .lab-radios .opts{display:flex;flex-wrap:wrap;gap:6px}
#labs .lab-radios label{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px;border:1px solid var(--hair2);border-radius:99px;font-size:13px;color:var(--dim);cursor:pointer;background:transparent;transition:border-color .2s,color .2s,background .2s}
#labs .lab-radios label:hover{border-color:var(--gold);color:var(--ink)}
#labs .lab-radios input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#labs .lab-radios label:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--bg)}
#labs .lab-radios label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
#labs .lab-status{font-family:var(--f-mono);font-size:12.5px;line-height:1.6;color:var(--dim);min-height:1.6em}
#labs .lab-status b{color:var(--ink);font-weight:500}
#labs .lab-log{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:132px;overflow:auto;font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--dim)}
#labs .lab-log li{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:8px;padding:2px 0;border-top:1px solid var(--hair2)}
#labs .lab-log li:first-child{border-top:0}
#labs .lab-log li i{color:var(--faint)}
#labs .lab-log li.is-bad{color:var(--m-labs-bad)}
#labs .lab-log li.is-ok{color:var(--m-labs-ok)}
#labs .lab-two{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){#labs .lab-two{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
#labs .lab-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--hair2);color:var(--dim)}
#labs .lab-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
#labs .lab-tag.is-ok::before{background:var(--m-labs-ok)}#labs .lab-tag.is-warn::before{background:var(--m-labs-warn)}#labs .lab-tag.is-bad::before{background:var(--m-labs-bad)}
#labs .lab-tag.is-ok{color:var(--m-labs-ok);border-color:color-mix(in srgb,var(--m-labs-ok) 45%,var(--hair2))}
#labs .lab-tag.is-warn{color:var(--m-labs-warn);border-color:color-mix(in srgb,var(--m-labs-warn) 45%,var(--hair2))}
#labs .lab-tag.is-bad{color:var(--m-labs-bad);border-color:color-mix(in srgb,var(--m-labs-bad) 45%,var(--hair2))}
#labs table.lab-table{width:100%;border-collapse:collapse;font-size:12.5px}
#labs table.lab-table th,#labs table.lab-table td{padding:6px 8px;border-top:1px solid var(--hair2);text-align:start;vertical-align:top}
#labs table.lab-table th{font-weight:500;color:var(--ink)}
#labs table.lab-table thead th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border-top:0}
#labs table.lab-table tr.is-miss td,#labs table.lab-table tr.is-miss th{color:var(--m-labs-bad)}
#labs pre.lab-code{margin:0;padding:12px 14px;border-radius:var(--rs);background:var(--dark);color:var(--onDarkDim);font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
#labs pre.lab-code .k{color:#FF8A50}#labs pre.lab-code .c{color:#8A94A7}#labs pre.lab-code .del{color:#FF8787}#labs pre.lab-code .add{color:#6BD889}

/* ---- 01 SAQR ---- */
#labs .sq-fac{width:100%;height:auto;display:block;max-width:420px;margin:0 auto}
#labs .sq-fac .sq-floor{fill:none;stroke:var(--hair2);stroke-dasharray:3 4}
#labs .sq-fac .sq-fov{fill:var(--gold);opacity:.10;transition:opacity .3s}
#labs .sq-fac .sq-cam.is-crit .sq-fov{opacity:.03}
#labs .sq-fac .sq-cam.is-elev .sq-fov{fill:var(--m-labs-warn)}
#labs .sq-fac .sq-cam.is-crit .sq-fov{fill:var(--m-labs-bad)}
#labs .sq-fac .sq-ring-bg{fill:var(--paper);stroke:var(--hair2);stroke-width:1}
#labs .sq-fac .sq-ring{fill:none;stroke:var(--m-labs-ok);stroke-width:4;stroke-linecap:round;transition:stroke .3s}
#labs .sq-fac .sq-cam.is-elev .sq-ring{stroke:var(--m-labs-warn);stroke-dasharray:4 3}
#labs .sq-fac .sq-cam.is-crit .sq-ring{stroke:var(--m-labs-bad);stroke-dasharray:2 3}
#labs .sq-fac .sq-id{font-family:var(--f-mono);font-size:12px;fill:var(--ink);font-weight:500}
#labs .sq-fac .sq-st{font-family:var(--f-body);font-size:9.5px;fill:var(--dim)}
#labs .sq-fac .sq-cam.is-sel .sq-ring-bg{stroke:var(--gold);stroke-width:2}
#labs .sq-fac .sq-cam{cursor:pointer}
#labs .sq-fac .sq-cam.is-crit .sq-id{fill:var(--m-labs-bad)}
#labs .sq-fac .sq-hub{fill:var(--panel2);stroke:var(--hair2)}
#labs .sq-fac .sq-hub-t{font-family:var(--f-mono);font-size:9px;fill:var(--faint)}
#labs .sq-fac .sq-link{stroke:var(--hair2);stroke-width:1}
#labs .sq-fac .sq-cam.is-crit .sq-link-x{stroke:var(--m-labs-bad);stroke-width:1.5}
#labs .sq-lane{width:100%;height:auto;display:block}
#labs .sq-lane .sq-band{fill:var(--m-labs-bad);opacity:.07}
#labs .sq-lane .sq-band.warn{fill:var(--m-labs-warn)}
#labs .sq-lane .sq-thr{stroke:var(--hair2);stroke-dasharray:4 4}
#labs .sq-lane .sq-axis{font-family:var(--f-mono);font-size:10px;fill:var(--faint)}
#labs .sq-lane .sq-trace{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round}
#labs .sq-lane .sq-inj{fill:var(--m-labs-bad);opacity:.16}
#labs .sq-lane .sq-now{stroke:var(--ink);stroke-width:1}
#labs .sq-lane .sq-dot{fill:var(--ink)}
#labs .sq-ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#labs .sq-tile{border:1px solid var(--hair2);border-radius:var(--rs);padding:9px 10px;font-size:12px;line-height:1.4;display:grid;gap:3px;background:var(--paper);transition:opacity .3s}
#labs .sq-tile b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
#labs .sq-tile .sq-tile-s{color:var(--dim)}
#labs .sq-tile.is-elev .sq-tile-s{color:var(--m-labs-warn)}
#labs .sq-tile.is-crit{opacity:.55;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--hair2) 6px 7px)}
#labs .sq-tile.is-crit b{text-decoration:line-through}
#labs .sq-tile.is-crit .sq-tile-s{color:var(--m-labs-bad)}
#labs .sq-decide{margin-top:12px;padding:10px 14px;border-radius:var(--rs);border:1px solid var(--hair2);font-size:13.5px;color:var(--dim);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
#labs .sq-decide b{font-family:var(--f-head);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.02em}
#labs .sq-grid{display:grid;gap:14px}
@media (min-width:900px){#labs .sq-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
@media (max-width:560px){#labs .sq-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 02 RLS ---- */
#labs .rl-ask{display:grid;gap:14px}
@media (min-width:700px){#labs .rl-ask{grid-template-columns:repeat(3,minmax(0,auto));gap:18px}}
#labs .rl-result{margin-top:14px;display:grid;gap:12px}
#labs .rl-status{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-family:var(--f-mono);font-size:12.5px;color:var(--dim)}
#labs .rl-status .rl-code{color:var(--ink);font-weight:500}
#labs .rl-layers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#labs .rl-layer{border:1px solid var(--hair2);border-radius:var(--rs);padding:8px 10px;font-size:12px;line-height:1.45;color:var(--dim);display:grid;gap:2px}
#labs .rl-layer b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500}
#labs .rl-layer.is-ok{border-color:color-mix(in srgb,var(--m-labs-ok) 45%,var(--hair2))}#labs .rl-layer.is-ok span{color:var(--m-labs-ok)}
#labs .rl-layer.is-bad{border-color:var(--m-labs-bad)}#labs .rl-layer.is-bad span{color:var(--m-labs-bad)}
#labs .rl-layer.is-skip{opacity:.55}
#labs .rl-rows{display:grid;gap:6px}
#labs .rl-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:6px 10px;border:1px solid var(--hair2);border-radius:8px;font-family:var(--f-mono);font-size:12px;color:var(--ink)}
#labs .rl-row.is-hid{color:var(--faint);border-style:dashed;text-decoration:line-through}
#labs .rl-row .rl-mark{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid currentColor}
#labs .rl-row.is-hid .rl-mark{text-decoration:none}
#labs .rl-break{margin-top:16px;display:grid;gap:12px}
#labs .rl-probes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#labs .rl-probe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--hair2);border-radius:8px;font-size:12.5px;line-height:1.45;color:var(--dim)}
#labs .rl-probe .lab-tag{margin-top:2px}
#labs .rl-probe.is-fail{border-color:var(--m-labs-bad);color:var(--ink)}
#labs .rl-count{font-size:14px;color:var(--ink)}
#labs .rl-count b{font-family:var(--f-head);font-weight:800;font-size:26px;letter-spacing:-.02em}
#labs .rl-wm{position:absolute;inset-inline-end:14px;top:12px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--hair2);padding:3px 8px;border-radius:6px;pointer-events:none}

/* ---- 03 Halqat ---- */
#labs .hq-lanes{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){#labs .hq-lanes{grid-template-columns:repeat(4,minmax(0,1fr))}}
#labs .hq-lane{border:1px solid var(--hair2);border-radius:var(--rs);padding:10px 12px;min-height:150px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;background:var(--paper);transition:border-color .3s}
#labs .hq-lane[aria-current="step"]{border-color:var(--gold)}
#labs .hq-lane.is-end{background:transparent;border-style:dashed}
#labs .hq-role{font-size:12.5px;font-weight:500;color:var(--ink);display:flex;gap:8px;align-items:center;justify-content:space-between}
#labs .hq-role i{font-family:var(--f-mono);font-size:10px;color:var(--faint);letter-spacing:.08em}
#labs .hq-slot{min-height:56px;display:grid;align-items:start}
#labs .hq-note{border:1px solid var(--hair);border-radius:8px;background:var(--panel);padding:8px 10px;font-size:12px;line-height:1.45;color:var(--dim);display:grid;gap:3px;transform-origin:center;animation:hqIn .2s var(--ease)}
@keyframes hqIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#labs .hq-note b{color:var(--ink);font-weight:500;font-size:12.5px}
#labs .hq-note .lab-tag{justify-self:start;margin-top:3px}
#labs .hq-acts{display:flex;flex-wrap:wrap;gap:6px}
#labs .hq-acts .btn{min-height:32px;padding:5px 11px;font-size:12px}
#labs .hq-refuse{margin-top:14px;padding:12px 14px;border-radius:var(--rs);border:1px solid var(--m-labs-bad);background:color-mix(in srgb,var(--m-labs-bad) 7%,transparent);font-size:13.5px;line-height:1.6;color:var(--ink);display:grid;gap:6px}
#labs .hq-refuse[hidden]{display:none}
#labs .hq-refuse b{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-labs-bad);font-weight:500}
#labs .hq-table{margin-top:14px}
#labs .hq-table tr.is-miss{background:color-mix(in srgb,var(--m-labs-bad) 8%,transparent)}
#labs .hq-table td.hq-none{font-family:var(--f-mono);color:var(--m-labs-bad)}

/* ---- 04 Dhaleel (#demo) ---- */
#labs .sh-wrap{display:grid;gap:12px}
#labs .sh-canvas{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--hair2);cursor:crosshair;background:var(--paper);touch-action:manipulation}
#labs .sh-canvas:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#labs .sh-ctl{display:grid;gap:12px;align-items:center}
@media (min-width:760px){#labs .sh-ctl{grid-template-columns:minmax(0,1fr) minmax(0,auto)}}
#labs .sh-sun{display:grid;gap:4px;min-width:200px}
#labs .sh-sun label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
#labs .sh-sun input[type=range]{width:100%;accent-color:var(--gold);margin:0}
#labs .sh-sun output{font-family:var(--f-mono);font-size:12px;color:var(--dim)}
#labs .sh-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--dim)}
#labs .sh-legend span{display:inline-flex;align-items:center;gap:6px}
#labs .sh-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid var(--hair2)}
#labs .sh-legend .l-b i{background:var(--dim)}#labs .sh-legend .l-s i{background:color-mix(in srgb,var(--ink) 18%,var(--paper))}#labs .sh-legend .l-u i{background:color-mix(in srgb,var(--gold) 22%,var(--paper))}
#labs .sh-legend .l-c i{background:var(--gold);border-color:var(--gold)}#labs .sh-legend .l-p i{background:var(--cyan);border-color:var(--cyan)}
#labs .sh-help{font-size:12px;color:var(--faint)}

/* ---- terminal card under the bench ---- */
#labs .labs-term{display:grid;gap:8px 20px;align-items:center}
@media (min-width:900px){#labs .labs-term{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;grid-template-rows:auto auto auto}
  #labs .labs-term .meta{grid-column:1;grid-row:1}#labs .labs-term h3{grid-column:1;grid-row:2}#labs .labs-term>p{grid-column:1;grid-row:3}
  #labs .labs-term .term-preview{grid-column:2;grid-row:1/4;margin:0}#labs .labs-term .btn{grid-column:3;grid-row:1/3;align-self:center}#labs .labs-term .hint{grid-column:3;grid-row:3}}

@media (max-width:700px){
  #labs .lab-tab{font-size:12.5px;padding:8px 10px;gap:6px}
  #labs .lab-stage{padding:12px;min-height:240px}
  #labs .lab-log{max-height:110px}
}