/* AI Labs on worksbetter.ai: the app styles of rvd125/renzo-ai-lab web/lab.css, scoped under .wb-lab and re-pointed at
   the theme tokens by ops/labs/port-css.py, then the Works Better overrides (ops/labs/labs-overrides.css).
   Generated: edit the overrides or the script, not this file. */
.wb-lab{--ink:var(--char);--ink-2:#35393D;--ink-3:var(--muted);--paper:var(--sheet);--page:var(--paper);--white:#fff;--accent:var(--char);--accent-dk:#000;--c-claude:var(--orange);--c-claude-lt:#FFE2CC;--c-rule:#3DD27A;--c-person:var(--yellow);--c-app:#8FA2FF;--c-trigger:#C9CDD1;--d-bg:var(--char);--d-panel:#202326;--d-card:var(--char-2);--d-card-2:#2E3134;--d-line:var(--char-3);--d-line-2:#4A4F55;--d-ink:#F1F2F3;--d-ink-2:#C9CDD1;--d-ink-3:#A9AFB5;--ok:#3DD27A;--bad:#FF7A6B;--warn:var(--yellow);--serif:var(--display);--sans:var(--body)}
/* Resets inserted before the lab rules (ops/labs/port-css.py): the theme has generic classes with the same names as
   the lab's (.node, .lines, .approve, .menu, .no), and element rules the lab used to reset itself. Inside .wb-lab
   they go back to neutral, so the lab's own rules below decide. */
.wb-lab{font-size:16px;line-height:1.6}
.wb-lab [hidden]{display:none!important}
.wb-lab p{margin:0}
.wb-lab h2,.wb-lab h3{color:inherit;font-weight:600;text-transform:none;letter-spacing:normal}
.wb-lab button,.wb-lab input,.wb-lab select,.wb-lab textarea{font:inherit;color:inherit}
.wb-lab .node{width:auto;height:auto;border-radius:0;background:none;border:0;display:block;place-items:normal;font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit;position:static;z-index:auto}
.wb-lab .lines{margin:0;padding:0;list-style:none;font-family:inherit;font-size:inherit;color:inherit}
.wb-lab .lines li{display:block;justify-content:normal;gap:normal;padding:0;border-bottom:0}
.wb-lab .lines li.flag{color:inherit}
.wb-lab .approve{display:block;margin-top:0;gap:normal;flex-wrap:nowrap;align-items:normal}
.wb-lab .approve span{font-size:inherit;color:inherit}
.wb-lab .menu{display:block}
.wb-lab .no{display:revert;font-family:inherit;font-weight:inherit;background:none;color:inherit;padding:0;font-size:inherit;margin:0}
.wb-lab .fine{font-size:13px;color:var(--ink-3)}
.wb-lab .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:8px;border:0;background:var(--accent);color:#fff;font:600 15px/1.15 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.wb-lab .btn:hover{background:var(--accent-dk);color:#fff}
.wb-lab .btn:disabled{opacity:.5;cursor:default}
.wb-lab .btn.sm{min-height:36px;padding:0 14px;font-size:14px}
.wb-lab .btn.big{min-height:52px;padding:0 26px;font-size:16px}
.wb-lab .btn.claude{background:var(--c-claude);color:#1b0f0a}
.wb-lab .btn.claude:hover{background:#e58a6c;color:#1b0f0a}
.wb-lab .spark{display:inline-block;width:12px;height:12px;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.wb-lab .ask{background:var(--d-bg);color:var(--d-ink);border-radius:16px;padding:20px;box-shadow:0 30px 60px -30px rgba(17,18,20,.55);min-width:0}
.wb-lab .ask-label{display:block;font:600 15px/1.3 var(--sans);margin-bottom:10px;color:var(--d-ink)}
.wb-lab .ask textarea{width:100%;background:var(--d-card);border:1px solid var(--d-line-2);border-radius:10px;padding:12px 14px;color:var(--d-ink);resize:vertical;min-height:110px;line-height:1.5}
.wb-lab .ask textarea:focus{outline:2px solid var(--c-claude);outline-offset:1px}
.wb-lab .ask-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.wb-lab .ask .fine{color:var(--d-ink-3)}
.wb-lab .ex{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--d-line)}
.wb-lab .ex-h{width:100%;font-size:13px;color:var(--d-ink-3)}
.wb-lab .chip{border:1px solid var(--d-line-2);background:var(--d-card);color:var(--d-ink);border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer}
.wb-lab .chip:hover,.wb-lab .chip[aria-pressed=true]{border-color:var(--c-claude);color:#fff}
.wb-lab .studio{background:var(--d-bg);color:var(--d-ink);padding-bottom:20px;scroll-margin-top:0}
.wb-lab .bar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px max(16px,env(safe-area-inset-left,0px));background:rgba(17,18,20,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--d-line)}
.wb-lab .bar-l,.wb-lab .bar-r{display:flex;align-items:center;gap:10px;min-width:0}
.wb-lab .bar-l{flex:1 1 280px}
.wb-lab .bar-r{flex-wrap:wrap}
.wb-lab .title-in{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 8px;font:600 18px/1.2 var(--sans);color:var(--d-ink)}
.wb-lab .title-in:hover,.wb-lab .title-in:focus{border-color:var(--d-line-2);outline:0}
.wb-lab .pill{flex:none;font:500 12px/1 var(--mono);letter-spacing:.04em;padding:6px 10px;border-radius:999px;background:var(--d-card-2);color:var(--d-ink-2);border:1px solid var(--d-line-2)}
.wb-lab .pill.live{color:#fff;border-color:var(--c-claude);box-shadow:0 0 0 3px rgba(217,119,87,.18)}
.wb-lab .pill.ok{color:var(--ok);border-color:var(--ok)}
.wb-lab .pill.bad{color:var(--bad);border-color:var(--bad)}
.wb-lab .tbtn{min-height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--d-line-2);background:var(--d-card);color:var(--d-ink);cursor:pointer;font-size:14px;white-space:nowrap}
.wb-lab .tbtn:hover{border-color:var(--d-ink-3)}
.wb-lab .tbtn:disabled{opacity:.45;cursor:default}
.wb-lab .tbtn.wide{width:100%;margin-top:10px}
.wb-lab .btn.run{background:var(--c-claude);color:#1b0f0a;min-height:40px}
.wb-lab .btn.run:hover{background:#e58a6c;color:#1b0f0a}
.wb-lab .btn.run.stop{background:var(--d-card-2);color:var(--d-ink);border:1px solid var(--d-line-2)}
.wb-lab .tri{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.wb-lab .menu-wrap{position:relative}
.wb-lab .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--d-card-2);border:1px solid var(--d-line-2);border-radius:10px;padding:6px;min-width:220px;z-index:30;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.wb-lab .menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:9px 10px;color:var(--d-ink);cursor:pointer;font-size:14px}
.wb-lab .menu button:hover{background:var(--d-card)}
.wb-lab .grid{display:grid;grid-template-columns:250px minmax(0,1fr) 360px;min-height:680px}
.wb-lab .lib,.wb-lab .log{background:var(--d-panel);border-right:1px solid var(--d-line);padding:16px;min-width:0}
.wb-lab .log{border-right:0;border-left:1px solid var(--d-line);display:flex;flex-direction:column;max-height:calc(100vh - 64px);position:sticky;top:64px;align-self:start}
.wb-lab .lib-head,.wb-lab .log-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.wb-lab .log-head .fine,.wb-lab .lib .fine{color:var(--d-ink-3)}
.wb-lab .lib-tip{margin-bottom:10px}
.wb-lab .lib h4{margin:16px 0 6px;font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--d-ink-3)}
.wb-lab .lib-item{display:grid;grid-template-columns:10px 1fr;gap:4px 10px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:8px;padding:8px;cursor:pointer;color:var(--d-ink)}
.wb-lab .lib-item:hover{background:var(--d-card);border-color:var(--d-line-2)}
.wb-lab .lib-item .dot{margin-top:7px}
.wb-lab .lib-item b{font-weight:600;font-size:14px}
.wb-lab .lib-item small{grid-column:2;color:var(--d-ink-3);font-size:12.5px;line-height:1.4}
.wb-lab .x{background:none;border:0;color:var(--d-ink-2);font-size:24px;line-height:1;cursor:pointer;display:none}
.wb-lab .dot{width:10px;height:10px;border-radius:50%;background:var(--c-trigger);flex:none}
.wb-lab .k-claude .dot,.wb-lab .dot.claude{background:var(--c-claude)}
.wb-lab .k-rule .dot,.wb-lab .dot.rule{background:var(--c-rule)}
.wb-lab .k-person .dot,.wb-lab .dot.person{background:var(--c-person)}
.wb-lab .k-app .dot,.wb-lab .dot.app{background:var(--c-app)}
.wb-lab .canvas{position:relative;padding:28px clamp(12px,3vw,40px) 60px;background-color:var(--d-bg);background-image:radial-gradient(var(--d-line) 1px,transparent 1px);background-size:20px 20px;min-width:0}
.wb-lab .flow{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch}
.wb-lab .node{--k:var(--c-trigger);position:relative;background:var(--d-card);border:1px solid var(--d-line-2);border-radius:14px;transition:box-shadow var(--d-med),border-color var(--d-med),opacity var(--d-med),transform var(--d-med);min-width:0}
.wb-lab .node::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;border-radius:14px 0 0 14px;background:var(--k)}
.wb-lab .node.claude{--k:var(--c-claude)}
.wb-lab .node.rule{--k:var(--c-rule)}
.wb-lab .node.person{--k:var(--c-person)}
.wb-lab .node.app{--k:var(--c-app)}
.wb-lab .node.enter{animation:wb-lab-pop var(--d-slow) var(--ease-out) both}
@keyframes wb-lab-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.wb-lab .node.running{border-color:var(--k);box-shadow:0 0 0 1px var(--k),0 0 36px -6px var(--k)}
.wb-lab .node.waiting{border-color:var(--k);box-shadow:0 0 0 1px var(--k),0 0 30px -8px var(--k);animation:breathe var(--d-loop) var(--ease-io) 4}
@keyframes breathe{50%{box-shadow:0 0 0 1px var(--k),0 0 44px -4px var(--k)}}
.wb-lab .node.done{border-color:color-mix(in srgb,var(--k) 55%,var(--d-line-2))}
.wb-lab .node.skipped{opacity:.5}
.wb-lab .node.failed{border-color:var(--bad)}
.wb-lab .node-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 14px 14px 18px;cursor:pointer}
.wb-lab .badge{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k);font:600 11px/1 var(--mono)}
.wb-lab .badge .spark{width:18px;height:18px}
.wb-lab .node-t{min-width:0}
.wb-lab .kicker{display:block;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--k)}
.wb-lab .node-t b{display:block;font-size:16px;font-weight:600;color:var(--d-ink);overflow-wrap:anywhere}
.wb-lab .node-t small{display:block;color:var(--d-ink-3);font-size:13px;overflow-wrap:anywhere}
.wb-lab .gate{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:500 12px/1.3 var(--mono);color:var(--d-ink-2);background:var(--d-card-2);border:1px dashed var(--d-line-2);border-radius:6px;padding:3px 7px;overflow-wrap:anywhere}
.wb-lab .st{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--d-line-2);color:var(--d-ink-3);font:600 13px/1 var(--mono)}
.wb-lab .node.running .st,.wb-lab .node.waiting .st{border-color:var(--k);border-top-color:transparent}.wb-lab .node.running .st{animation:spin var(--d-loop) linear infinite}
.wb-lab .node.done .st{background:var(--ok);border-color:var(--ok);color:#0d1f17}
.wb-lab .node.failed .st{background:var(--bad);border-color:var(--bad);color:#2a0d09}
@keyframes spin{to{transform:rotate(360deg)}}
.wb-lab .tools{display:flex;gap:4px}
.wb-lab .ib{width:30px;height:30px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--d-ink-3);cursor:pointer;font-size:14px;line-height:1}
.wb-lab .ib:hover{border-color:var(--d-line-2);color:var(--d-ink)}
.wb-lab .node-r{display:flex;align-items:center;gap:6px}
.wb-lab .bts{border-top:1px solid var(--d-line);padding:12px 16px 16px 18px}
.wb-lab .bts-h{display:flex;align-items:center;gap:8px;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-ink-3);margin-bottom:8px}
.wb-lab .lines{list-style:none;margin:0;padding:0;font:13px/1.55 var(--mono);color:var(--d-ink-2)}
.wb-lab .lines li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;padding:2px 0;overflow-wrap:anywhere;animation:line var(--d-med) var(--ease-out) both}
@keyframes line{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.wb-lab .lines .i{color:var(--d-ink-3)}
.wb-lab .lines .ok .i{color:var(--ok)}
.wb-lab .lines .bad .i{color:var(--bad)}
.wb-lab .lines .ai .i{color:var(--c-claude)}
.wb-lab .lines .ai{color:var(--d-ink)}
.wb-lab .lines .net .i{color:var(--c-app)}
.wb-lab .lines .wait{color:var(--c-person)}
.wb-lab .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.wb-lab .tab{border:1px solid var(--d-line-2);background:transparent;color:var(--d-ink-2);border-radius:6px;padding:4px 10px;font:500 12px/1.4 var(--mono);cursor:pointer}
.wb-lab .tab[aria-selected=true]{background:var(--d-card-2);color:var(--d-ink);border-color:var(--d-ink-3)}
.wb-lab .pane{margin-top:8px}
.wb-lab pre.code{margin:0;max-height:320px;overflow:auto;background:#0c0d0f;border:1px solid var(--d-line);border-radius:8px;padding:12px;font:12.5px/1.5 var(--mono);color:#d7d5cf;white-space:pre-wrap;overflow-wrap:anywhere}
.wb-lab .out-card{background:#0c0d0f;border:1px solid var(--d-line);border-radius:8px;padding:12px;margin-top:10px}
.wb-lab .kv{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:4px 14px;font-size:14px}
.wb-lab .kv dt{color:var(--d-ink-3);font:12.5px/1.6 var(--mono)}
.wb-lab .kv dd{margin:0;color:var(--d-ink);overflow-wrap:anywhere}
.wb-lab .kv dd.null{color:var(--warn);font-style:italic}
.wb-lab .mail{white-space:pre-wrap;font-size:14px;line-height:1.55;color:var(--d-ink)}
.wb-lab .mail .subj{font-weight:600;margin-bottom:8px;display:block}
.wb-lab .approve{margin-top:12px;border:1px solid var(--c-person);border-radius:10px;padding:14px;background:color-mix(in srgb,var(--c-person) 8%,transparent)}
.wb-lab .approve p{color:var(--d-ink);margin-bottom:10px}
.wb-lab .approve .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wb-lab .approve input{flex:1 1 180px;min-width:0;background:var(--d-card);border:1px solid var(--d-line-2);border-radius:8px;padding:8px 10px;color:var(--d-ink)}
.wb-lab .btn.yes{background:var(--ok);color:#0d1f17}
.wb-lab .btn.no{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.wb-lab .wire{position:relative;height:46px;display:flex;justify-content:center;align-items:center}
.wb-lab .wire::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--d-line-2)}
.wb-lab .wire.hot::before{background:linear-gradient(var(--c-claude),var(--d-line-2))}
.wb-lab .wire .pulse{position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--c-claude);box-shadow:0 0 14px var(--c-claude);animation:travel var(--d-slow) var(--ease-io) forwards}
@keyframes travel{to{top:calc(100% - 10px);opacity:.2}}
.wb-lab .plus{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;border:1px solid var(--d-line-2);background:var(--d-bg);color:var(--d-ink-3);cursor:pointer;opacity:0;transition:opacity var(--d-fast);font-size:16px;line-height:1}
.wb-lab .wire:hover .plus,.wb-lab .plus:focus,.wb-lab .plus.on{opacity:1}
.wb-lab .plus.on{border-color:var(--c-claude);color:var(--c-claude)}
.wb-lab .end{margin:6px auto 0;text-align:center;font:500 12px/1.4 var(--mono);color:var(--d-ink-3);letter-spacing:.06em;text-transform:uppercase}
.wb-lab .summary{margin-top:22px;border:1px solid var(--d-line-2);border-radius:14px;padding:18px;background:linear-gradient(135deg,rgba(217,119,87,.12),rgba(124,150,255,.06))}
.wb-lab .summary h3{color:var(--d-ink);font:600 20px/1.25 var(--serif);margin-bottom:6px}
.wb-lab .summary p{color:var(--d-ink-2);font-size:15px}
.wb-lab .summary .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.wb-lab .summary a.btn{color:#1b0f0a}
.wb-lab .empty{max-width:560px;margin:60px auto;text-align:center;color:var(--d-ink-3)}
.wb-lab .issues{max-width:720px;margin:0 auto 14px;border:1px solid var(--warn);border-radius:10px;padding:10px 14px;color:var(--warn);font-size:14px}
.wb-lab .issues ul{margin:4px 0 0;padding-left:18px}
.wb-lab .building{max-width:720px;margin:0 auto 18px;border:1px solid var(--c-claude);border-radius:14px;padding:18px;background:rgba(217,119,87,.07)}
.wb-lab .building h3{display:flex;align-items:center;gap:10px;color:var(--d-ink);font-size:17px;margin-bottom:8px}
.wb-lab .building h3 .spark{color:var(--c-claude);animation:spin calc(var(--d-loop) * 2) linear 2}
.wb-lab .edit{border-top:1px solid var(--d-line);padding:14px 16px 16px 18px;display:grid;gap:12px}
.wb-lab .f{display:grid;gap:5px;min-width:0}
.wb-lab .f>span{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-ink-3)}
.wb-lab .f input,.wb-lab .f select,.wb-lab .f textarea,.wb-lab .rowc input,.wb-lab .rowc select{width:100%;min-width:0;background:#0c0d0f;border:1px solid var(--d-line-2);border-radius:8px;padding:8px 10px;color:var(--d-ink);font-size:14px}
.wb-lab .f textarea{resize:vertical;line-height:1.5}
.wb-lab .f select,.wb-lab .rowc select{appearance:auto}
.wb-lab .rowc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 30px;gap:6px;align-items:center}
.wb-lab .rowc.map{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) 30px}
.wb-lab .edit .acts{display:flex;gap:8px;flex-wrap:wrap}
.wb-lab .gate-ed{display:grid;gap:6px;border:1px dashed var(--d-line-2);border-radius:8px;padding:10px}
.wb-lab .gate-ed label.cb{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--d-ink-2)}
.wb-lab .log-list{list-style:none;margin:6px 0 12px;padding:0;overflow:auto;flex:1;min-height:200px;font:12.5px/1.5 var(--mono);color:var(--d-ink-2)}
.wb-lab .log-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:3px 0;border-bottom:1px dashed #22252a;overflow-wrap:anywhere}
.wb-lab .log-list li.muted{display:block;color:var(--d-ink-3);border:0;font-family:var(--sans);font-size:14px}
.wb-lab .log-list .t{color:var(--d-ink-3)}
.wb-lab .log-list .ai{color:var(--d-ink)}
.wb-lab .log-list .bad{color:var(--bad)}
.wb-lab .log-list .ok{color:var(--ok)}
.wb-lab .log-list .step{color:var(--c-claude);font-weight:600}
.wb-lab .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--d-line);padding-top:12px}
.wb-lab .stats>div{background:var(--d-card);border:1px solid var(--d-line);border-radius:8px;padding:8px 10px;min-width:0}
.wb-lab .stats .k{display:block;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-ink-3)}
.wb-lab .stats .v{display:block;font:600 14px/1.4 var(--mono);color:var(--d-ink);overflow-wrap:anywhere}
.wb-lab .studio-fine{margin-top:16px;font-size:13px;color:var(--d-ink-3)}
@media (max-width:1180px){.wb-lab .grid{grid-template-columns:minmax(0,1fr) 340px}.wb-lab .lib{position:fixed;inset:auto 0 0 0;max-height:72vh;overflow:auto;z-index:40;border:0;border-top:1px solid var(--d-line-2);border-radius:16px 16px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.5);transform:translateY(105%);transition:transform var(--d-med);padding-bottom:max(16px,env(safe-area-inset-bottom))}.wb-lab .lib.open{transform:none}.wb-lab .x{display:block}}
@media (max-width:860px){.wb-lab .grid{grid-template-columns:minmax(0,1fr)}.wb-lab .log{position:static;max-height:none;border-left:0;border-top:1px solid var(--d-line)}.wb-lab .log-list{max-height:340px}.wb-lab .bar{gap:8px;padding-block:8px}.wb-lab .bar-l{flex-basis:100%}.wb-lab .title-in{font-size:16px;padding:4px 6px}.wb-lab .bar-r{width:100%;flex-wrap:nowrap;gap:6px}.wb-lab .tbtn{min-height:36px;padding:0 10px;font-size:13.5px}.wb-lab .bar-r .btn.run{margin-left:auto;min-height:36px;padding:0 14px}.wb-lab .lg{display:none}.wb-lab .log{top:auto}.wb-lab .node-head{grid-template-columns:auto minmax(0,1fr);}.wb-lab .node-r{grid-column:1/-1;justify-content:space-between}.wb-lab .rowc{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px}.wb-lab .rowc .v{grid-column:1/3}}
.wb-lab .modal{position:fixed;inset:0;z-index:60;background:rgba(8,9,10,.7);display:grid;place-items:center;padding:16px}
.wb-lab .modal-card{background:var(--d-panel);color:var(--d-ink);border:1px solid var(--d-line-2);border-radius:14px;width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column}
.wb-lab .modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--d-line)}
.wb-lab .modal-head h2{color:var(--d-ink);font-size:17px}
.wb-lab .modal .x{display:block}
.wb-lab .modal-body{padding:16px;overflow:auto}
.wb-lab .modal-body pre.code{max-height:none}
.wb-lab .modal-body p{color:var(--d-ink-2);margin-bottom:10px;font-size:14px}
.wb-lab .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:var(--d-card-2);color:var(--d-ink);border:1px solid var(--d-line-2);border-radius:10px;padding:10px 16px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:calc(100vw - 32px)}
/* Works Better look for the AI Labs app (appended to labs.css by ops/labs/port-css.py). */
.wb-lab{color:var(--char)}
.wb-lab .btn{border-radius:4px;border:2px solid var(--char);background:var(--char);color:var(--white);font-family:var(--body);font-weight:800}
.wb-lab .btn:hover{background:var(--white);color:var(--char)}
.wb-lab .btn.claude{border-color:var(--orange);background:var(--orange);color:var(--char);box-shadow:4px 4px 0 var(--yellow)}
.wb-lab .btn.claude:hover{background:#FF8A33;color:var(--char)}
.wb-lab .btn.run{border-color:var(--yellow);background:var(--yellow);color:var(--char)}
.wb-lab .btn.run:hover{background:var(--white);border-color:var(--white)}
.wb-lab .tbtn{border-radius:4px}
.wb-lab .pill{font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.wb-lab .fine{font-size:.8rem}
/* The ask box sits in the page head's right column, as the dark card the other pages use there. */
.wb-lab .ask{border-radius:6px;box-shadow:10px 10px 0 var(--orange);margin:0}
.wb-lab .ask .ask-label{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.05;text-transform:uppercase;letter-spacing:.005em}
/* The studio is a full-width dark band, like the demo cards. */
.wb-lab .studio{border-top:2px solid var(--char);border-bottom:2px solid var(--char)}
.wb-lab .studio-fine{color:var(--d-ink-3)}
.wb-lab .modal-head h2{font-family:var(--display);text-transform:uppercase}
/* Page parts outside the app (page-ai-labs.php) */
.phead .wrap:has(>.ph-ask){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.lab-meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin:14px 0 0}
.lab-meta span{padding:3px 9px;border:1px solid var(--char);font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.lab-meta span:first-child{background:var(--orange);border-color:var(--orange)}
.lab-notes{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.lab-notes li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.lab-notes a{font-weight:800;line-height:1.3}
.lab-notes li>span{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.lab-notes p{margin:0;font-size:.92rem}
/* The "who does what" cards and the fit cards. The same rules are in build.css (the n8n page, the build pages); AI Labs carries its own copy so the
   page does not load the 20 KB build.css for 2 KB of rules (WB-PERF-7). Keep the two in step. */
.roles-flow{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.roles-flow li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 14px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.roles-flow{counter-reset:rf}
.roles-flow li:not(:last-child):after{content:"→";position:absolute;top:22px;right:-17px;z-index:2;width:16px;text-align:center;font-weight:800;color:var(--arrow)}
.rf-i{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--char);color:var(--orange);font-family:var(--mono);font-weight:800}
.roles-flow b{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.05;text-transform:uppercase}
.roles-flow li>span:last-child{font-size:.92rem;line-height:1.45}
.roles-flow .ai{background:var(--char);color:var(--white);box-shadow:5px 5px 0 var(--orange)}
.roles-flow .ai .rf-i{background:linear-gradient(135deg,#FF6B00,#FFB04C);color:var(--char)}
.roles-flow .ai>span:last-child{color:#E6E8EA}
.roles-flow .you{border-top:8px solid var(--yellow)}
.roles-flow .you .rf-i{background:var(--yellow);color:var(--char)}
@media (max-width:1000px){.roles-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.roles-flow li:after{display:none}
  .roles-flow li:before{counter-increment:rf;content:counter(rf,decimal-leading-zero);content:counter(rf,decimal-leading-zero) / "";position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
  .roles-flow .ai:before{color:#C9CDD1}}
@media (max-width:560px){.roles-flow{grid-template-columns:1fr}}
/* The fit and not-fit cards under "Who it is for" (also in build.css) */
.fitgrid{gap:18px;margin-bottom:20px}
.fitgrid>div{padding:16px 18px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.fitgrid>div:first-child{border-top:8px solid #1E8A43}
.fitgrid>div:last-child{border-top:8px solid #C7362F}
.fitgrid .mini-h{margin-top:0}
.fitgrid .bullets{padding-left:0;list-style:none}
.fitgrid .bullets li{display:flex;gap:10px;align-items:flex-start}
.fitgrid .bullets li::before{content:"✓";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#1E8A43;color:var(--white);font-weight:800;font-size:.72rem}
.fitgrid>div:last-child .bullets li::before{content:"✕";background:#C7362F}
#kinds .roles-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.phead .wrap:has(>.ph-ask){grid-template-columns:1fr;gap:24px}#kinds .roles-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#kinds .roles-flow{grid-template-columns:1fr}}
/* The step header's open/close control is a real button (app.js, worksbetter.ai change) */
.wb-lab .node-head{grid-template-columns:minmax(0,1fr) auto}
.wb-lab .node-toggle{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.wb-lab .node-t{display:block}
@media (max-width:860px){.wb-lab .node-head{grid-template-columns:minmax(0,1fr);gap:8px 12px;padding-block:12px}.wb-lab .log-list{min-height:72px}}
/* The closed bottom sheet (under 1180px) is hidden, not just moved off screen, so its buttons take no keyboard focus */
@media (max-width:1180px){.wb-lab .lib{visibility:hidden;transition:transform var(--d-med),visibility 0s var(--d-med)}.wb-lab .lib.open{visibility:visible;transition:transform var(--d-med)}}

/* ---- 17 Oct 2026 audit (labs): no layout shift during a run, one status line, notices that stay, touch sizes ---- */
/* Without JavaScript the builder is dead, so it is hidden and the note in the hero says why (RND-06). */
html:not(.js) .wb-lab .ask,html:not(.js) .wb-lab .studio{display:none}
.wb-lab .lab-nojs{background:var(--d-bg);color:var(--d-ink);border-radius:6px;padding:20px;box-shadow:10px 10px 0 var(--orange)}
.wb-lab .lab-nojs strong{color:var(--yellow)}
/* The note beside the description box, and its error line */
.wb-lab .ask-note{margin:10px 0 0;font-size:.8rem;line-height:1.45}
.wb-lab .ask-err{margin:8px 0 0;color:var(--bad);font-size:14px}
.wb-lab .ask textarea[aria-invalid=true]{border-color:var(--bad)}
.wb-lab #askCount{white-space:nowrap}
.wb-lab .ask #askGo[aria-disabled=true]{opacity:.55;cursor:default}
.wb-lab .ex-h{margin:0;font:500 13px/1.4 var(--body);letter-spacing:0;text-transform:none}
/* Status tags: the step the run is on, and the backup-model notice (yellow, so it is noticed) */
.wb-lab .pill:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.wb-lab .pill.warn{background:var(--yellow);border-color:var(--yellow);color:var(--char);font-weight:700}
.wb-lab .bnote{margin:0 0 10px;padding:8px 12px;border:1px solid var(--yellow);border-radius:8px;background:color-mix(in srgb,var(--yellow) 12%,transparent);color:var(--yellow);font-size:13.5px;line-height:1.45}
.wb-lab .summary .bnote{margin:12px 0 0}
@media (max-width:560px){.wb-lab .pill .xl{display:none}}
/* A run updates the steps in place. The step it is on opens as a panel over the steps below it, so nothing moves.
   The tools and + buttons keep their space and are only hidden while a run is going; the summary has reserved space. */
.wb-lab .canvas.busy .tools,.wb-lab .canvas.busy .plus{visibility:hidden}
.wb-lab .node{scroll-margin-top:92px}
.wb-lab .node.peek{z-index:6}
.wb-lab .node.peek .bts{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:7;max-height:min(58vh,440px);overflow:auto;background:var(--d-card);border:1px solid var(--k);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.wb-lab .sumslot{min-height:210px;margin-top:22px}
.wb-lab .sumslot .summary{margin-top:0}
.wb-lab .sum-hint{display:grid;place-items:center;min-height:188px;margin:0;padding:12px;border:1px dashed var(--d-line-2);border-radius:14px;color:var(--d-ink-3);font-size:14px;text-align:center}
.wb-lab .log-list{flex:none;height:min(360px,calc(100vh - 380px));min-height:200px}
.wb-lab .btn.run{min-width:9.5rem;justify-content:center}
.wb-lab .btn.run.stop,.wb-lab .btn.run.stop:hover{background:var(--d-card-2);border-color:var(--d-line-2);color:var(--d-ink)}
.wb-lab .node-toggle:focus-visible{outline:2px solid var(--yellow);outline-offset:6px;border-radius:6px}
/* Messages that stay until dismissed */
.wb-lab .notice{display:flex;gap:12px;align-items:center;justify-content:space-between;max-width:720px;margin:0 auto 14px;padding:10px 14px;border:1px solid var(--yellow);border-radius:10px;color:var(--d-ink)}
.wb-lab .notice p{flex:1;font-size:14px}
.wb-lab .notice.bad{border-color:var(--bad)}
.wb-lab .building.err{border-color:var(--bad);background:rgba(255,122,107,.07)}
.wb-lab .building.err h3 .spark{animation:none}
.wb-lab .building .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
/* Library group titles are h3 now (heading order); the dialog title is a paragraph */
.wb-lab .lib h3{margin:16px 0 6px;font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--d-ink-3)}
.wb-lab .modal-title{margin:0;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.3;text-transform:uppercase;color:var(--d-ink)}
/* Touch: every control at least 44px (RNM-12). The toolbar wraps instead of overflowing at 320. */
@media (pointer:coarse),(max-width:860px){
.wb-lab .tbtn,.wb-lab .btn.run,.wb-lab .btn.sm,.wb-lab .btn.claude,.wb-lab .chip,.wb-lab .title-in,.wb-lab .tab,.wb-lab .lib-item,.wb-lab .bar-r .btn.run,.wb-lab .gate-ed label.cb{min-height:44px}
.wb-lab .ib,.wb-lab .x{min-width:44px;min-height:44px}
.wb-lab .plus{width:44px;height:44px}
.wb-lab .f input,.wb-lab .f select,.wb-lab .rowc input,.wb-lab .rowc select,.wb-lab .approve input{min-height:44px}
.wb-lab .rowc{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 44px}
.wb-lab .rowc.map{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) 44px}
}
@media (max-width:860px){
/* The toolbar wraps to the left, so the Export menu opens from the button's left edge: it stays on screen (WB-EX-2) */
.wb-lab .menu{right:auto;left:0}
.wb-lab .rowc{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}
.wb-lab .bar-r{flex-wrap:wrap}
.wb-lab .bar-r .btn.run{min-width:6rem}
.wb-lab .node{scroll-margin-top:132px}
.wb-lab .log-list{height:260px;max-height:none;min-height:0}
.wb-lab .sumslot{min-height:260px}
.wb-lab .sum-hint{min-height:238px}
}
@media (max-height:500px){.wb-lab .bar{position:static}}
/* Phones: the small stat labels are at least 11 px (.69rem), as in the diagrams */
@media (max-width:700px){.wb-lab .stats .k{font-size:.69rem}}
/* With a mouse the small controls are a little bigger than the 24 px minimum (touch is 44 px above) (WB-EX-12) */
@media (pointer:fine) and (min-width:861px){
.wb-lab .ib{width:32px;height:32px}
.wb-lab .plus{width:32px;height:32px}
.wb-lab .chip,.wb-lab .title-in{min-height:40px}
}
/* The sitewide "Book a workflow audit" bar is not shown here: it covered the Approve button, and the page has its own
   "Build this for my business" button. Nothing else on this page needs the bottom padding it reserved (WB-EX-3, WB-MOT-3). */
.mbar{display:none!important}
html{scroll-padding-bottom:0}