@worca/app 1.0.0 → 1.2.0-rc.1

package/ui/public/style.css

@@ -43,6 +43,7 @@
   --r-ctrl:14px;
   --shadow:0 6px 28px rgba(25,25,27,.05), 0 1px 2px rgba(25,25,27,.04);
   --shadow-soft:0 2px 12px rgba(25,25,27,.04);
+  --ask-dock-clearance:96px;
 
   --sans:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
   --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
@@ -65,6 +66,15 @@ body{
 .app{display:flex;height:100vh;}
 
 /* ---------- Sidebar ---------- */
+/* `width` is inert while .app is a flex row — flex-basis determines the used
+   main size, and that is what actually animates (measured: 298 -> 270.8 ->
+   125.1 -> 76 over 200ms). `width` is listed too so the fallback path animates
+   if the flex context ever changes. It must stay a TRANSITION: the blanket at
+   :905 kills every transition under prefers-reduced-motion, but only four
+   selectors' animations.
+   This comment is deliberately OUTSIDE the braces. ruleBody() in
+   test/ui-pinned-sidebar.test.mjs:16-20 captures up to the first closing brace,
+   so a comment inside a rule body truncates the capture. */
 .sidebar{
   width:298px;flex:0 0 298px;
   background:var(--panel);
@@ -72,8 +82,10 @@ body{
   display:flex;flex-direction:column;
   border-right:1px solid var(--line);
   overflow-y:auto;
+  transition:flex-basis .2s cubic-bezier(.65,.02,.28,1),
+             width .2s cubic-bezier(.65,.02,.28,1);
 }
-.brand{display:flex;align-items:center;padding:0 8px;margin-bottom:24px;}
+.brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;margin-bottom:24px;}
 .brand .logo{height:36px;width:auto;display:block;}
 
 .nav{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;}
@@ -234,7 +246,7 @@ body.view-history .main{display:flex;flex-direction:column;overflow:hidden;paddi
 /* .main's 32px gutter goes with padding:0, so the compact top-nav (<1080px, a
    SIBLING of the views inside .main) must re-apply it or it lands 20px left of
    the list content, which keeps its own 32px on .hist-screen. flex:0 0 auto
-   stops the wrapped 12-button nav from being squeezed once .main is a column. */
+   stops the wrapped 9-button nav from being squeezed once .main is a column. */
 body.view-history .topnav{margin:12px 32px 0;flex:0 0 auto;}
 .topbar{display:flex;align-items:flex-start;justify-content:space-between;
   gap:24px;margin-bottom:22px;}
@@ -293,6 +305,7 @@ body.view-history .topnav{margin:12px 32px 0;flex:0 0 auto;}
 .field > label .opt,.field .opt{color:var(--ink-3);font-weight:500;font-style:normal;}
 .hint{display:block;color:var(--ink-3);font-size:12px;margin-top:7px;line-height:1.45;}
 .hint.err{color:var(--red-ink);}
+.hint.warn{color:var(--amber-ink);}
 
 .input,.select,.textarea,.ta-hl-back,
 input[type="text"],input[type="number"],textarea,select{
@@ -355,6 +368,14 @@ input[type="file"]{font-size:12.5px;color:var(--ink-3);background:transparent;bo
 .add-project{margin-top:10px;display:flex;flex-direction:column;gap:9px;padding:14px;
   border:1.5px solid var(--line-2);border-radius:var(--r-ctrl);background:var(--field);}
 .add-project-actions{display:flex;gap:9px;justify-content:flex-end;}
+/* Settings → Chat history: a text-style destructive action so its label sits on
+   the same left edge as the "Chat history" heading and the counts line under it
+   (a pill's inner padding indented the text). Same shape as .hd-cmt-btn. */
+.ask-history-delete{border:none;background:none;padding:0;color:var(--red-ink);
+  font:600 12.5px var(--sans);cursor:pointer;line-height:1.45;}
+.ask-history-delete:hover:not(:disabled){text-decoration:underline;}
+.ask-history-delete:disabled{opacity:.45;cursor:not-allowed;}
+.ask-history-delete:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px;}
 /* path row (input + trailing button) — shared by add-project, project modal, plugin add */
 .path-row{display:flex;gap:9px;align-items:center;}
 .path-row input{flex:1 1 auto;min-width:0;}
@@ -367,6 +388,12 @@ input[type="file"]{font-size:12.5px;color:var(--ink-3);background:transparent;bo
 .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-soft);}
 .seg button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 
+/* Settings tab strip. .seg gives the pill chrome; this only spaces it from the
+   first pane's .topbar, which brings its own 22px bottom margin. */
+.settings-tabs{margin-bottom:18px;}
+/* A pane is a plain block — it is deliberately NOT .view (see index.html). */
+.settings-pane{display:block;}
+
 /* task-source fieldset (old markup) */
 fieldset.source{border:1.5px solid var(--line);border-radius:var(--r-ctrl);padding:16px;margin:0 0 18px;}
 fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--ink);}
@@ -496,6 +523,9 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .form-msg{margin:12px 0 0;font-size:12.5px;min-height:16px;}
 .form-msg.ok{color:var(--green-ink);}
 .form-msg.err{color:var(--red-ink);}
+/* saved, but with a caveat the user must act on (agent-port edit stranding a
+   saved pipeline — app.js saveAgentEdit reads PUT /api/agents/:key `warnings`). */
+.form-msg.warn{color:var(--amber-ink);}
 
 /* ---------- Pipeline config ---------- */
 /* The always-open .stage-cfg card is gone: every per-agent control now lives in
@@ -706,6 +736,14 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .log-filters .log-search{flex:1 1 160px;max-width:340px;}
 .log-filters .log-copy{flex:0 0 auto;margin-left:auto;cursor:pointer;}
 .log-filters .log-copy:hover{background:var(--line);}
+/* execution chip (P6b): hidden until a footer-row click narrows the log to ONE
+   execution; any click on it clears that axis. Scoped under .log-filters so it
+   out-ranks the .log-f pill rule above (an unscoped .log-f-exec would lose). */
+.log-filters .log-f-exec{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:2px 8px;border-radius:999px;
+  border:1px solid var(--line);background:var(--field);font-size:11px;font-weight:600;color:var(--ink-2);cursor:pointer;}
+.log-filters .log-f-exec[hidden]{display:none;}
+.log-filters .log-f-exec .lfe-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.log-filters .log-f-exec .lfe-x{color:var(--ink-3);font-weight:800;}
 /* run card: pills drop to a full-width second row under "Live log" (order puts
    the bar after the autoscroll switch so row 1 stays label ⟷ switch) */
 .run-log-head .log-filters{order:1;flex-basis:100%;}
@@ -827,6 +865,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .badge.running{background:var(--peach-bg);color:var(--peach-ink);}
 .badge.red,.badge.error,.badge.stopped{background:var(--red-bg);color:var(--red-ink);}
 .badge.waiting{background:var(--amber-bg);color:var(--amber-ink);}
+.badge.amber{background:var(--amber-bg);color:var(--amber-ink);}
 .badge.paused{background:var(--amber-bg);color:var(--amber-ink);}
 .badge.hist-retained-badge{background:var(--amber-bg);color:var(--amber-ink);}
 .badge.hist-retained-badge[hidden]{display:none;}
@@ -1017,143 +1056,6 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .pl-remove:disabled{opacity:.6;cursor:default;}
 .pl-remove svg{display:block;}
 
-/* ========================================================================== */
-/* Pipeline Composer — drag/drop canvas, wires, palette, saved list           */
-/* (ported from docs/pipeline-composer/mockups; reuses :root tokens)          */
-/* ========================================================================== */
-.builder-card{padding:0;overflow:hidden;}
-/* No top padding: sticky pins to the scrollport's PADDING edge, so a 20px inset
-   here would leave a see-through band above the pinned header for cards to
-   scroll through. The header row re-applies the inset itself (same fix shape as
-   body.view-history .main + .hist-filter). */
-.palette{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:0 24px 20px;border-bottom:1px solid var(--line);background:var(--panel);max-height:320px;overflow-y:auto;}
-.palette .p-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);width:100%;margin-bottom:-10px;padding-top:20px;padding-bottom:14px;position:sticky;top:0;z-index:2;background:var(--panel);}
-.palette .p-label svg{width:14px;height:14px;stroke:var(--ink-3);stroke-width:2;}
-.pal-filter{margin-left:auto;width:200px;padding:6px 10px;border:1.5px solid transparent;border-radius:10px;background:var(--field);color:var(--ink);font-family:inherit;font-size:12px;font-weight:500;text-transform:none;letter-spacing:normal;}
-.pal-filter::placeholder{color:var(--ink-3);}
-.pal-filter:focus{outline:none;background:#fff;border-color:var(--ink);}
-.pal-filter:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
-/* min-width:0 lets the grid item shrink under its min-content width and
-   overflow:hidden makes the card the last line of defence: without both, a
-   single unbroken 100-char description paints across its neighbours. */
-.agent-pill{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;overflow:hidden;background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:10px 12px;font-weight:600;font-size:12.5px;color:var(--ink);cursor:grab;box-shadow:var(--shadow-soft);transition:transform .12s,box-shadow .12s,border-color .12s;user-select:none;}
-.agent-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
-.agent-pill:active{cursor:grabbing;}
-.agent-pill.dragging{opacity:.35;}
-/* Dot pins to the FIRST name line (flex-start + optical nudge), because the
-   name may wrap to a second line — a centered dot would float between them. */
-.agent-pill .pdotc{width:11px;height:11px;border-radius:50%;flex:0 0 auto;margin-top:3px;}
-.agent-pill .phead{display:inline-flex;align-items:flex-start;gap:9px;max-width:100%;min-width:0;overflow-wrap:anywhere;}
-.agent-pill .pname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;overflow-wrap:anywhere;line-height:1.3;}
-/* align-self:stretch overrides the card's align-items:flex-start — otherwise
-   .pdesc shrink-to-fits to the full string width and its own overflow:hidden
-   clips against that oversized box instead of the card. */
-.agent-pill .pdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;align-self:stretch;max-width:100%;min-width:0;overflow-wrap:anywhere;font-weight:400;font-size:11.5px;line-height:1.45;color:var(--ink-2);}
-/* 3-line text budget: a name that wrapped to 2 lines (.name-2l, toggled by a
-   ResizeObserver in app.js) leaves only 1 line for the description. */
-.agent-pill.name-2l .pdesc{-webkit-line-clamp:1;}
-.agent-pill .pdesc.derived{font-style:italic;}
-
-.composer-hint {
-  margin: 0 0 10px;
-  padding: 8px 12px;
-  font-size: 12px;
-  color: var(--ink-3);
-  background: color-mix(in srgb, var(--blue) 8%, transparent);
-  border-radius: 8px;
-}
-.canvas-wrap{position:relative;overflow:auto;background-color:#FBFBF9;min-height:500px;max-height:640px;background-image:radial-gradient(circle, var(--line-2) 1.1px, transparent 1.1px);background-size:22px 22px;}
-.flow{position:relative;display:flex;align-items:center;gap:0;padding:70px 30px 50px;min-height:500px;width:max-content;min-width:100%;}
-.wires{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;}
-
-.strip{flex:0 0 16px;align-self:stretch;border-radius:12px;margin:40px 0;position:relative;transition:flex-basis .14s,background .14s;}
-.strip.full{flex:1;}
-.strip.over{flex-basis:78px;background:rgba(140,127,214,.12);outline:2px dashed var(--violet);outline-offset:-5px;}
-.strip.over::after{content:"+ step";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--violet-ink);white-space:nowrap;text-transform:uppercase;}
-
-.col{display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;align-self:center;padding:14px 10px;border-radius:20px;position:relative;z-index:1;transition:background .14s,outline-color .14s;outline:2px dashed transparent;outline-offset:0;}
-.col.over{background:rgba(91,166,204,.10);outline-color:var(--blue);}
-/* left:10px tracks .col padding:14px 10px — tag left edge lines up with card left edge (was centered, causing feedback arcs to cut through text) */
-.col .col-tag{position:absolute;top:8px;left:10px;transform:translateY(-100%);font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase;white-space:nowrap;}
-.col .col-tag em{font-style:normal;color:var(--blue-ink);}
-.col .par-hint{position:absolute;bottom:6px;left:50%;transform:translate(-50%,100%);font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--blue-ink);text-transform:uppercase;opacity:0;transition:opacity .14s;white-space:nowrap;}
-.col.over .par-hint{opacity:1;}
-
-.node{position:relative;width:230px;background:#fff;border:1.5px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow-soft);padding:13px 14px 13px 18px;display:flex;align-items:center;gap:12px;z-index:2;transition:box-shadow .12s,transform .12s;}
-.node:hover{box-shadow:var(--shadow);}
-.node::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:5px;border-radius:0 5px 5px 0;background:var(--c,#ccc);}
-.node .nic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;}
-.node .nic svg{width:19px;height:19px;stroke-width:1.85;}
-.node .nmeta{min-width:0;flex:1;}
-.node .nmeta b{display:block;font-weight:600;font-size:13.5px;line-height:1.2;letter-spacing:-.01em;}
-.node .nmeta small{display:block;color:var(--ink-3);font-size:11px;margin-top:1px;}
-.flow .node .nmeta small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
-.node .nx,.node .loop,.node .selfloop{position:absolute;border-radius:50%;background:#fff;border:1.5px solid var(--line-2);display:grid;place-items:center;cursor:pointer;opacity:0;transition:.12s;box-shadow:var(--shadow-soft);z-index:3;}
-.node .nx{top:-9px;right:-9px;width:22px;height:22px;color:var(--ink-3);font-size:12px;}
-.node .loop{right:-10px;bottom:-10px;width:25px;height:25px;}
-.node .selfloop{top:-10px;left:-10px;width:25px;height:25px;}
-.node:hover .nx,.node:hover .loop,.node:hover .selfloop{opacity:1;}
-.node .nx:hover{color:var(--red-ink);border-color:var(--red);}
-.node .loop svg{width:13px;height:13px;stroke:var(--ink-2);stroke-width:2;}
-.node .loop:hover{border-color:var(--amber);}
-.node .loop:hover svg{stroke:var(--amber-ink);}
-.node .selfloop svg{width:14px;height:14px;stroke:var(--ink-2);stroke-width:2;}
-.node .selfloop:hover{border-color:var(--violet);}
-.node .selfloop:hover svg{stroke:var(--violet-ink);}
-/* active self-cycle: always visible, violet ring (mirrors the lit toggle in the mockup) */
-.node .selfloop.on{opacity:1;background:var(--violet-bg);border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-bg);}
-.node .selfloop.on svg{stroke:var(--violet-ink);}
-.node.linking{outline:2px solid var(--amber);outline-offset:3px;}
-.node.linking .loop{opacity:1;border-color:var(--amber);background:var(--amber-bg);}
-.node.link-target{outline:2px dashed var(--amber);outline-offset:3px;cursor:pointer;}
-.node.link-target:hover{background:var(--amber-bg);}
-
-.builder-foot{display:flex;align-items:center;gap:14px;padding:16px 24px;border-top:1px solid var(--line);background:var(--panel);flex-wrap:wrap;}
-.legend{display:flex;align-items:center;gap:20px;font-size:12px;color:var(--ink-2);font-weight:600;}
-.legend .lg{display:flex;align-items:center;gap:8px;}
-.legend .ll{width:12px;height:12px;border-radius:50%;background:var(--seq);display:inline-block;flex:none;}
-.legend .ll.fb{background:var(--amber);}
-.legend .ll.sl{background:var(--violet);}
-.builder-foot .sp{flex:1;}
-.link-banner{display:inline-flex;align-items:center;gap:11px;background:var(--amber-bg);color:var(--amber-ink);font-weight:600;font-size:12.5px;padding:8px 9px 8px 15px;border-radius:999px;}
-.link-banner[hidden]{display:none;}
-.link-banner button{background:#fff;border:none;border-radius:999px;padding:5px 12px;font-family:inherit;font-weight:600;font-size:11.5px;color:var(--amber-ink);cursor:pointer;}
-.empty-flow{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-3);font-weight:600;font-size:14px;pointer-events:none;text-align:center;}
-.empty-flow svg{width:36px;height:36px;stroke:var(--line-2);stroke-width:1.6;}
-.empty-flow small{font-weight:500;font-size:12.5px;}
-
-.saved-card{margin-top:22px;padding:0;overflow:hidden;}
-.saved-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line);}
-.saved-head b{font-size:15px;font-weight:600;letter-spacing:-.01em;}
-.saved-head .cnt{color:var(--ink-3);font-size:12.5px;font-weight:600;margin-left:9px;}
-.saved-list{display:flex;flex-direction:column;}
-.pl-empty{padding:34px 24px;text-align:center;color:var(--ink-3);font-size:13px;font-weight:500;}
-.pl-item{border-bottom:1px solid var(--line);}
-.pl-item:last-child{border-bottom:none;}
-.pl-row{display:flex;align-items:center;gap:15px;padding:16px 22px;cursor:pointer;transition:background .12s;}
-.pl-row:hover{background:var(--panel);}
-.pl-caret{width:17px;height:17px;flex:0 0 auto;color:var(--ink-3);transition:transform .18s;margin-top:2px;align-self:flex-start;}
-.pl-item.open .pl-caret{transform:rotate(90deg);}
-.pl-main{flex:1;min-width:0;}
-.pl-name{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink);}
-.pl-meta{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:5px;}
-.pl-meta em{font-style:normal;color:var(--amber-ink);}
-.pl-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;}
-.pl-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-2);background:var(--field);border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 7px;}
-.pl-chip .d{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
-.pl-del{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line-2);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);transition:.12s;align-self:flex-start;}
-.pl-del:hover{border-color:var(--red);color:var(--red-ink);background:var(--red-bg);}
-.pl-del svg{width:16px;height:16px;stroke-width:1.9;}
-.pl-body{display:none;border-top:1px dashed var(--line-2);}
-.pl-item.open .pl-body{display:block;}
-.pl-readonly-tag{display:flex;align-items:center;gap:8px;padding:9px 24px;background:var(--panel);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-top:1px dashed var(--line-2);}
-.pl-readonly-tag svg{width:13px;height:13px;stroke:var(--ink-3);stroke-width:2;}
-.ro-scroll{overflow:auto;background-color:#FBFBF9;background-image:radial-gradient(circle, var(--line-2) 1.1px, transparent 1.1px);background-size:22px 22px;max-height:520px;}
-.ro-flow{position:relative;display:flex;align-items:center;padding:26px 30px;min-height:360px;width:max-content;min-width:100%;}
-.ro-flow .strip{flex:0 0 58px;align-self:stretch;margin:40px 0;}
-.ro-flow .col{pointer-events:none;}
-.ro-flow .node{width:218px;}
-
 /* Per-agent fan-out toggle in the New Pipeline rows. */
 .fanout-toggle {
   display: inline-flex;
@@ -1244,33 +1146,14 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hist-pill.ws.active::before{background:rgba(255,255,255,.22);color:#fff;}
 
 /* ========================================================================== */
-/* Run-flow — composer-style node graph for Running + History cards            */
-/* (ported from the mockup; reuses :root tokens. Node base look — accent bar,  */
-/*  border, radius, shadow — is inherited from the unscoped `.node` rule.       */
-/*  --c is set per-node inline by runNode(); these rules read it via var(--c).) */
+/* Run-flow — the SHARED decor the v2 graph renderer sits inside. The .run-flow */
+/* SCOPE STAYS: the v2 graph is hosted inside .run-flow on every page, and      */
+/* de-scoping drops `.run-flow .node.is-active` from (0,3,0) to (0,2,0), which  */
+/* ties `.gv-world .node` and loses on source order — silently killing the v2   */
+/* status border colours.                                                      */
 /* ========================================================================== */
 .run-flow-wrap{position:relative;margin:0 0 18px;border-radius:18px;border:1px solid var(--line);overflow-x:auto;overflow-y:hidden;background-color:#FBFBF9;background-image:radial-gradient(circle, var(--line-2) 1.1px, transparent 1.1px);background-size:22px 22px;}
 .run-flow{position:relative;display:flex;align-items:center;gap:44px;padding:66px 30px 52px;width:max-content;min-width:100%;}
-.run-flow .strip{flex:0 0 44px;align-self:stretch;margin:40px 0;background:none;outline:none;}
-.run-flow .col{padding:14px 8px;}
-.run-flow .col .col-tag{color:var(--ink-3);}
-
-/* Node sizing overrides — base look (accent bar ::before, border, radius,
-   soft shadow, flex layout) is inherited from the unscoped `.node` rule. */
-.run-flow .node{width:198px;padding:11px 13px 11px 16px;cursor:default;transition:opacity .25s, box-shadow .25s, border-color .25s, transform .25s;}
-.run-flow .node .nic{width:33px;height:33px;border-radius:10px;}
-.run-flow .node .nic svg{width:17px;height:17px;}
-.run-flow .node .nmeta b{font-size:12.5px;}
-.run-flow .node .nmeta small{font-size:10px;}
-.run-flow .node:hover{box-shadow:var(--shadow-soft);transform:none;}
-
-/* Always-visible per-node duration · cost (our decision; not in the mockup). */
-.run-flow .node .nrun{display:flex;align-items:center;gap:5px;margin-top:3px;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink-3);}
-.run-flow .node .nrun .dur,.run-flow .node .nrun .cost{font-family:var(--mono);color:var(--ink-3);}
-.run-flow .node .nrun .dur:empty,.run-flow .node .nrun .cost:empty{display:none;}
-/* Separator rendered only when cost is present, so a lone duration (e.g. "0s") has no dangling "·". */
-.run-flow .node .nrun .cost:not(:empty)::before{content:"·";margin-right:4px;}
-
 /* Status badge (top-right pip). */
 .run-flow .nstat{position:absolute;top:-8px;right:-8px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow-soft);z-index:3;}
 .run-flow .nstat svg{width:12px;height:12px;}
@@ -1278,19 +1161,9 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .run-flow .nstat.paused{background:var(--amber);} .run-flow .nstat.paused svg{fill:#fff;}
 .run-flow .nstat.stopped{background:var(--red);} .run-flow .nstat.stopped svg{stroke:#fff;stroke-width:3;}
 
-/* Per-status node states. */
-.run-flow .node.is-pending{opacity:.5;}
-.run-flow .node.is-pending .nmeta small{color:var(--ink-3);}
-.run-flow .node.is-done .nmeta small{color:var(--green-ink);font-weight:600;}
 .run-flow .node.is-active{border-color:color-mix(in srgb, var(--c) 55%, var(--line-2));animation:nodeGlow 2.2s ease-in-out infinite;}
-.run-flow .node.is-active .nmeta small{color:var(--c);font-weight:600;}
 .run-flow .node.is-paused{border-color:color-mix(in srgb, var(--amber) 55%, var(--line-2));animation:nodeGlowAmber 2.2s ease-in-out infinite;}
-.run-flow .node.is-paused .nmeta small{color:var(--amber-ink);font-weight:600;}
 .run-flow .node.is-stopped{border-color:color-mix(in srgb, var(--red) 50%, var(--line-2));box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 13%, transparent),var(--shadow-soft);}
-.run-flow .node.is-stopped .nmeta small{color:var(--red-ink);font-weight:600;}
-/* Per-node model · effort sub-line: stays neutral grey across all statuses
-   (matches the New-pipeline .step-current caption) and truncates with ellipsis. */
-.run-flow .node .nmeta small.nmodel{color:var(--ink-3);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 @keyframes nodeGlow{0%,100%{box-shadow:var(--shadow-soft);}50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 13%, transparent),0 8px 26px color-mix(in srgb, var(--c) 24%, transparent);}}
 @keyframes nodeGlowAmber{0%,100%{box-shadow:var(--shadow-soft);}50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--amber) 16%, transparent),0 8px 26px color-mix(in srgb, var(--amber) 26%, transparent);}}
 
@@ -1299,7 +1172,6 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    AND NOWHERE ELSE: sqPulse attaches only to .run-flow .node .fan .sq.on, so
    the tree/legend squares (.led/.sq) never animate and history (terminal
    statuses -> no .on) never pulses. */
-.run-flow .node.run-node{flex-wrap:wrap;}
 .run-flow .node .fan{flex:0 0 100%;display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);}
 .run-flow .node .fan .sq{width:7px;height:7px;border-radius:2px;background:var(--ink-3);opacity:.5;}
 .run-flow .node .fan .sq.on{background:var(--blue);opacity:1;animation:sqPulse 1.5s ease-in-out infinite;}
@@ -1346,24 +1218,21 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    name (cf. skill pills). Uses the shared violet token (defined :root, l.24) so it
    reads as agent metadata, distinct from the skill (blue) / MCP (green) pills. */
 .rd-ag-name .agent-type-pill,.hd-ag-row .agent-type-pill{font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:2px 9px;border-radius:999px;white-space:nowrap;background:var(--violet-bg);color:var(--violet-ink);}
+/* Sub-agent run model (neutral outline) — the model a spawned child actually ran on.
+   Deliberately the QUIETEST pill on the row: it is present on every sub-agent once a
+   run records one, so a filled colour would out-shout the type + graphify badges that
+   only some rows carry. Sits right after the violet type pill. The head scopes carry
+   the SAME pill for the main agent's configured model · effort (stepModelPillHtml). */
+.rd-ag-name .sub-model-pill,.hd-ag-row .sub-model-pill,.rd-ag-head .sub-model-pill,.hd-ag-head .sub-model-pill{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.01em;padding:1px 8px;border-radius:999px;white-space:nowrap;background:transparent;color:var(--ink-3);border:1px solid var(--line-2);}
 /* graphify-use count badge (amber) — how many times an agent / sub-agent invoked the
    graphify CLI. Rendered INLINE: in the phase/node header next to the status, and on a
    sub-agent row right after the violet type pill. inline-block + parent flex `gap` size
    it to its text; amber keeps it distinct from skill (blue) / MCP (green) / type (violet). */
 .graphify-pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:2px 9px;border-radius:999px;white-space:nowrap;background:var(--amber-bg);color:var(--amber-ink);}
 
-/* Loop-badge cycle-count text (renderer sizes font-size inline). */
-.run-flow .loop-badge text{font-family:var(--sans);font-weight:700;}
-
-/* Wires — dimmed by default; the live (originating) loop marches. */
-.run-flow .wires path.wire-dim{opacity:.26;}
-.run-flow .wires path.wire-live{opacity:1;stroke-width:2.4;animation:wireFlow .9s linear infinite;}
-@keyframes wireFlow{to{stroke-dashoffset:-18;}}
-
 @media (prefers-reduced-motion: reduce){
   .run-flow .node.is-active,.run-flow .node.is-paused{animation:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent),var(--shadow-soft);}
   .run-flow .node.is-paused{box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent),var(--shadow-soft);}
-  .run-flow .wires path.wire-live{animation:none;}
   .run-flow .node .fan .sq.on{animation:none;}
 }
 
@@ -1379,6 +1248,30 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .agent-chip.prod { background:#E2F3DF; }
 .agent-chip.cons { background:#DEEFF7; }
 .agent-io-none { font-size:11px; opacity:.45; line-height:20px; }
+.agent-chip.void { border-style:dashed; background:transparent; opacity:.75; }
+.agent-not-placeable { background:var(--amber-bg); color:var(--amber-ink); }
+.agent-not-placeable[hidden] { display:none; }
+
+/* ---------- Agents-view port editor ---------- */
+.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
+.agent-ports{margin-bottom:16px;}
+.agent-ports-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
+.agent-ports-head b{font-size:12.5px;font-weight:600;letter-spacing:.06em;}
+.agent-ports-head .pf-count{margin-left:auto;font-size:11px;}
+.agent-ports-list{display:flex;flex-direction:column;gap:9px;}
+.port-row{border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;background:var(--panel);}
+.port-row-top{display:flex;align-items:flex-end;gap:9px;}
+.port-row-top .field{margin:0;flex:1 1 0;min-width:0;}
+.port-row-top .pf-f-type,.port-row-top .pf-f-as,.port-row-top .pf-f-when,.port-row-top .pf-f-store{flex:0 0 104px;}
+.port-row-top .field label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;}
+.port-row-top .field[hidden]{display:none;}
+.port-row-flags{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:9px;}
+.pf-up,.pf-down,.pf-remove{flex:0 0 auto;font-size:13px;line-height:1;padding:8px 10px;}
+.pf-directive-wrap{margin-top:9px;}
+.pf-directive-wrap[hidden]{display:none;}
+.pf-hint,.pf-note{display:block;margin-top:6px;font-size:11px;}
+.pf-hint[hidden],.pf-note[hidden]{display:none;}
+.agent-caps,.agent-workspace{display:flex;flex-direction:column;gap:2px;}
 
 /* (2) space between the header pills and the expanded markdown body */
 .agent-detail { margin-top:14px; }
@@ -1389,8 +1282,17 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .chip-select label { display:inline-flex; gap:6px; align-items:center; font-size:12.5px; border:1px solid var(--line); border-radius:999px; padding:4px 10px; cursor:pointer; }
 
 /* ===== Projects management view ===== */
-/* Static rows (no expand) — neutralize the pipeline row's pointer cursor. */
-#projects-list .pl-row{cursor:default;}
+/* The card reuses the saved-pipelines class names (.saved-card/.pl-item/.pl-row/
+   .pl-main/.pl-name), but the composer's copies of those rules are scoped under
+   .gv-saved, so this view owns its own layout: card padding 0 so the head and the
+   rows share one left edge; flex rows so the bin button sits on the right.
+   Static rows (no expand) — default cursor, no hover tint. */
+#projects-list .saved-card{padding:0;overflow:hidden;}
+#projects-list .pl-item{border-bottom:1px solid var(--line);}
+#projects-list .pl-item:last-child{border-bottom:none;}
+#projects-list .pl-row{display:flex;align-items:center;gap:15px;padding:16px 20px;cursor:default;}
+#projects-list .pl-main{flex:1 1 auto;min-width:0;}
+#projects-list .pl-name{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink);}
 .proj-path{
   font-family:var(--mono);font-size:12px;color:var(--ink-2);
   margin-top:4px;word-break:break-all;
@@ -1504,10 +1406,29 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .sp-row.sel{background:var(--green-bg);color:var(--green-ink);}
 .sp-row-meta{display:inline-flex;gap:6px;align-items:center;color:var(--ink-3);font-size:11.5px;flex:0 0 auto;}
 .sp-label{background:var(--chip-bg,#f0f0f4);border-radius:999px;padding:1px 8px;font-weight:600;}
+.sp-updated{white-space:nowrap;}
+/* Task identifier ahead of the title: reads as an id, and never wraps — a long
+   title gives way before the key does. */
+.sp-key{font-family:var(--mono);color:var(--ink-3);white-space:nowrap;margin-right:7px;}
 .sp-preview{margin-top:8px;max-height:260px;overflow:auto;}
 .sp-preview .sp-prev-body{white-space:pre-wrap;font-size:12.5px;margin:6px 0 0;}
 .sp-pane .mono{font-family:var(--mono);}
 .sp-config-missing{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:11px;}
+/* Profile gate: shown INSTEAD of the pane until the project is bound to one
+   configuration of a multi-profile source. Same column shape as the
+   not-configured box above — both are "answer this before you can browse". */
+.sp-profile-gate{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:11px;}
+.sp-profile-gate .select{min-width:220px;}
+/* Standing profile row above the pane: which instance the listing below is
+   coming from. One line, quiet, but never hidden. */
+.sp-profile-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line);}
+.sp-profile-bar label{font-weight:600;font-size:12.5px;color:var(--ink-2);}
+.sp-profile-bar .select{min-width:180px;}
+/* Profile roster in plugin settings: label, picker and the two actions on one
+   row above the form they apply to. */
+.pl-profile-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
+.pl-profile-bar label{font-weight:600;font-size:12.5px;color:var(--ink-2);}
+.pl-profile-bar .select{min-width:180px;}
 
 /* ---- Plugin provenance (results header, history cards) ---- */
 .src-badge{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;background:var(--chip-bg,#f0f0f4);border-radius:999px;padding:2px 10px;}
@@ -1559,7 +1480,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* ---------- Statistics view ---------- */
 .stats-filter{display:flex;margin-bottom:18px;}
-.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
+.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;}
 .stat-tile{padding:18px 20px;}
 .stat-label{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:12.5px;font-weight:600;}
 .stat-ico{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto;}
@@ -1639,6 +1560,12 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    In the v2 card it is a direct child of .h-meta on its own line. */
 .hist-pausenote{font-size:11.5px;font-weight:600;color:var(--amber-ink);}
 .hist-pausenote.total{color:var(--red-ink);}
+.hist-pausenote.error{color:var(--red-ink);}
+.pause-error-banner{border-radius:var(--r-ctrl);padding:12px 14px;margin-top:12px;font-size:13px;background:var(--red-bg);color:var(--red-ink);}
+.pause-error-banner b{display:block;margin-bottom:4px;}
+.pause-error-banner .peb-text{color:var(--ink);font-family:var(--mono);font-size:12px;word-break:break-word;}
+.pause-error-banner .peb-hint{color:var(--ink-2);margin-top:6px;}
+.hd-banners .pause-error-banner,.rd-banners .pause-error-banner{align-self:stretch;margin:0;}
 
 @media (max-width:1080px){
   .stat-row{grid-template-columns:repeat(2,1fr);}
@@ -1685,6 +1612,20 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .mv-env-row .mv-env-copy{flex:0 0 auto;padding:6px 10px;}
 .mv-env-btns{display:flex;gap:10px;justify-content:flex-start;}
 .mv-env-btns .btn-ghost{padding:7px 12px;font-size:12px;}
+/* Pricing: the opt-in per-model cost override. Modes read like the effort row;
+   the rate grid is hidden outside per-Mtok mode (explicit — a reset elsewhere
+   must not be able to un-hide it). */
+.mv-cost-edit{display:grid;gap:10px;}
+.mv-cost-modes{display:flex;gap:14px;flex-wrap:wrap;}
+.mv-cost-mode{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;}
+.mv-cost-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;}
+.mv-cost-rates[hidden]{display:none;}
+/* Label on its own row spanning both columns, then input + unit — five rates
+   side by side leave a numeric input far too narrow to read its own value. */
+.mv-cost-rate{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;font-size:12.5px;}
+.mv-cost-rate-label{grid-column:1 / -1;}
+.mv-cost-rate .mv-cost-rate-in{min-width:0;font-family:var(--mono);font-size:12.5px;}
+.mv-cost-rate-unit{color:var(--muted,#6b7280);font-size:11.5px;white-space:nowrap;}
 
 /* ---- Model plugins (design §9.6): plugin cards + export wizard ---- */
 .mv-secret{display:block;margin:4px 0 0;}
@@ -1718,7 +1659,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hd .mono,.hist-card .mono,#shipit-modal .mono{font-family:var(--mono);}
 
 /* Card, not a full-bleed band: same border/radius/shadow language as `.card`, and
-   its own 20px/32px margin box supplies the inset the screen itself cannot — 
+   its own 20px/32px margin box supplies the inset the screen itself cannot —
    `.hist-screen-detail` keeps `padding:0` so the sticky `.hd-tabs` can still pin
    flush to the scrollport top. Inner padding drops 32 -> 24 so the title lands a
    card-like distance from the border instead of 56px from the viewport edge. */
@@ -1855,60 +1796,204 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* ---------- History detail: Diff tab ---------- */
 .hd-diff{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:18px;align-items:start;}
+.hd-diff{
+  --hd-count-add:#176B4D;
+  --hd-count-del:#B31D28;
+}
+.hd-diff .diff-add{color:var(--hd-count-add);}
+.hd-diff .diff-del{color:var(--hd-count-del);}
 @media (max-width:900px){.hd-diff{grid-template-columns:1fr;}}
 .hd-diff-list,.hd-diff-pane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
+.hd-diff-pane,.ask-md{
+  --hd-syntax-comment:#5B6167;
+  --hd-syntax-keyword:#B31D28;
+  --hd-syntax-type:#9A3E00;
+  --hd-syntax-string:#176B4D;
+  --hd-syntax-literal:#713BB8;
+  --hd-syntax-title:#075C82;
+}
 .hd-diff-list-head,.hd-diff-pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
   padding:15px 18px;border-bottom:1px solid var(--line);font-size:12.5px;}
-.hd-diff-rows{padding:6px;max-height:520px;overflow-y:auto;}
-.hd-diff-proj{padding:8px 12px 2px;color:var(--ink-3);font-size:11px;}
-.hd-diff-file{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;}
-.hd-diff-file:hover,.hd-diff-file.active{background:var(--field);}
-.hd-diff-file:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
-.hd-diff-file.deleted .hd-diff-path{opacity:.55;text-decoration:line-through;}
-.hd-diff-file.new .hd-diff-path{color:var(--green-ink);}
-/* direction:rtl ellipsizes at the START (the file name matters more than the
-   directory). It also reorders a LEADING NEUTRAL character to the end, so
-   `.github/workflows/ci.yml` would render as `github/workflows/ci.yml.` — the
-   ::before LRM (U+200E) is a strong LTR anchor that pins the dot in place while
-   keeping the start-ellipsis. It lives in CSS, not in textContent, so the
-   `/src\/a\.js/` assertions stay clean. */
-.hd-diff-file .hd-diff-path{flex:1;min-width:0;font-size:12px;color:var(--ink-2);
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left;}
-.hd-diff-file .hd-diff-path::before{content:"\200E";}
+.hd-diff-rows{padding:6px;max-height:860px;overflow-y:auto;}
 .hd-diff-counts{font-size:11.5px;white-space:nowrap;}
-/* hdFileCountsHtml's binary chip is a `.hint`, and `.hint` (style.css:283) is
+/* Binary count chips carry `.hint`, and `.hint` (style.css:283) is
    `display:block;margin-top:7px` — inside these flex rows it would sit visibly
    low. Same reset for the pane head. */
 .hd-diff-counts .hint,.hd-diff-pane-head .hint{display:inline;margin-top:0;}
-/* The `.hd-diff-path` ellipsis rule is scoped to `.hd-diff-file`, so the SAME class
-   in the pane head is unstyled and WRAPS: measured 49.8px -> 69px on a 78-char
-   path, while the identical path ellipsizes one column to the left. */
-.hd-diff-pane-head .hd-diff-path{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.hd-diff-pane-head .hd-diff-path{
+  margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  font-size:12px;font-weight:400;
+}
 /* The patch is the tall thing on this screen, so it scrolls INSIDE its pane
    rather than pushing the whole detail screen down — same cap and mechanism as
    `.hd-diff-rows` opposite it, which keeps the two panes the same height.
-   Uncapped, a real patch measured 7479px and owned the screen's whole scroll.
-
-   The grid is what makes the row TINT correct. `.hd-dl` used to size itself with
-   `width:max-content;min-width:100%`, but max-content is EACH ROW'S OWN content:
-   in a 336-row patch that produced 11 different row widths (708…1015px), so every
-   line shorter than the longest had its --green-bg/--red-bg band stop mid-pane
-   and the padding land against the text instead of the edge. A single column of
-   `minmax(max-content,1fr)` is sized by the WIDEST row (1fr keeps it filling the
-   pane when the patch is narrow) and stretch makes every row match it — measured
-   uniform at 1015px with 0 of 217 tinted rows stopping short. D4 forbids syntax
-   highlighting, so this tint is the pane's only visual signal — it has to hold. */
-.hd-diff-body{padding:12px 0;font:400 12px/1.85 var(--mono);color:var(--ink-2);
-  display:grid;grid-template-columns:minmax(max-content,1fr);
-  max-height:520px;overflow-x:auto;overflow-y:auto;}
-.hd-diff-body.hint,.hd-diff-none{padding:18px;}
-.hd-dl{padding:0 18px;white-space:pre;}
-.hd-dl-hunk{color:var(--ink-3);background:var(--field);}
-.hd-dl-add{background:var(--green-bg);}
-.hd-dl-del{background:var(--red-bg);}
-.hd-diff-trunc{padding:10px 18px 0;}
+   Uncapped, a real patch measured 7479px and owned the screen's whole scroll. */
+.hd-diff-body{
+  --hd-gutter-width:calc(3ch + 16px);
+  padding:12px 0;
+  display:grid;
+  grid-template-columns:var(--hd-gutter-width) var(--hd-gutter-width) minmax(max-content,1fr);
+  max-height:860px;
+  overflow:auto;
+  font:400 12px/1.85 var(--mono);
+  color:var(--ink-2);
+}
+.hd-diff-body.hint{display:block;margin-top:0;padding:18px;color:var(--ink-2);}
+.hd-diff-none{padding:18px;color:var(--ink-2);}
+.hd-dl-row{display:contents;}
+.hd-dl-n{
+  position:sticky;
+  z-index:2;
+  padding:0 8px;
+  text-align:right;
+  color:var(--ink-2);
+  background:var(--panel);
+  user-select:none;
+}
+.hd-dl-n-old{left:0;}
+.hd-dl-n-new{left:var(--hd-gutter-width);}
+.hd-dl-code{min-width:100%;padding:0 18px 0 10px;white-space:pre;}
+.hd-dl-hunk,.hd-diff-note{grid-column:1/-1;padding-inline:18px;}
+/* Placeholder states are display:block bodies that pad 18px themselves. */
+.hd-diff-body.hint .hd-diff-note{padding-inline:0;}
+.hd-dl-hunk{white-space:pre;color:var(--ink-2);background:var(--field);}
+.hd-diff-trunc{padding-top:10px;color:var(--ink-2);}
+/* "N of M lines shown · Show K more lines": a real grid row spanning all three
+   tracks (like the hunk header), never display:contents. */
+.hd-dl-more{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:8px 18px;user-select:none;
+  border-top:1px solid var(--line);color:var(--ink-2);font:400 12px var(--sans);}
+.hd-dl-more-btn{border:none;background:none;color:var(--blue-ink);font:500 12.5px var(--sans);
+  cursor:pointer;padding:0;}
+.hd-dl-more-btn:hover{text-decoration:underline;}
+.hd-dl-more-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px;}
+.hd-dl-row.hd-dl-add > *{background:var(--green-bg);}
+.hd-dl-row.hd-dl-del > *{background:var(--red-bg);}
+/* ---------- History detail: diff comments ---------- */
+/* A comment block is a REAL grid row spanning all three tracks — `.hd-dl-row` is
+   display:contents, so a card can never live inside a row (same rule as
+   `.hd-dl-hunk`/`.hd-diff-note` and `.hd-dl-more` above). */
+.hd-cmt-block,.hd-cmt-detached{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;
+  padding:10px 18px;background:var(--panel);border-top:1px solid var(--line);font:400 12px var(--sans);}
+.hd-cmt-detached{border-top:1px solid var(--line-2);}
+.hd-cmt-detached-head{color:var(--ink-2);font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;}
+.hd-cmt-card{display:flex;flex-direction:column;gap:6px;padding:11px 13px;border:1.5px solid var(--line);
+  border-radius:16px;background:var(--panel);}
+.hd-cmt-card.resolved{opacity:.55;}
+.hd-cmt-head{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-2);}
+.hd-cmt-author{padding:2px 8px;border-radius:999px;background:var(--blue-bg);color:var(--blue-ink);font-weight:600;}
+.hd-cmt-author.ask{background:var(--violet-bg);color:var(--violet-ink);}
+.hd-cmt-time{color:var(--ink-2);}
+.hd-cmt-tag{padding:2px 8px;border-radius:999px;background:var(--field);color:var(--ink-2);font-weight:600;}
+.hd-cmt-sent{color:var(--ink-2);}
+.hd-cmt-where{font-size:11px;color:var(--ink-2);}
+.hd-cmt-quote{padding:5px 9px;border-radius:8px;background:var(--field);color:var(--ink-2);
+  font:400 11.5px var(--mono);white-space:pre-wrap;word-break:break-word;}
+.hd-cmt-body{color:var(--ink);white-space:pre-wrap;word-break:break-word;}
+.hd-cmt-card.resolved .hd-cmt-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.hd-cmt-actions{display:flex;align-items:center;gap:12px;}
+.hd-cmt-btn{border:none;background:none;padding:0;color:var(--blue-ink);
+  font:500 11.5px var(--sans);cursor:pointer;}
+.hd-cmt-btn:hover{text-decoration:underline;}
+.hd-cmt-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px;}
+.hd-cmt-delete{color:var(--red-ink);}
+.hd-cmt-composer{display:flex;flex-direction:column;gap:8px;}
+.hd-cmt-input{width:100%;padding:8px 11px;border:1px solid var(--line-2);border-radius:10px;
+  background:var(--panel);color:var(--ink);font:400 12px var(--sans);resize:vertical;}
+.hd-cmt-err{color:var(--red-ink);font-size:11.5px;}
+.hd-cmt-err:empty{display:none;}
+/* The `+` affordance rides inside the hovered row's code cell (one shared node), so
+   the cell needs a positioning context. `left:0`, never a negative offset: a negative
+   offset would overhang `.hd-dl-n-new`, which is `position:sticky; z-index:2` with an
+   opaque `background:var(--panel)` and therefore paints OVER a z-index:1 button — the
+   overhang would be invisible at rest, not just while scrolled.
+   Be accurate about what `left:0` does: `.hd-dl-code` is `padding:0 18px 0 10px`, and
+   an absolutely-positioned child resolves `left` against the PADDING box, so the 16px
+   button spans 0-16px while the text starts at 10px — it overlaps the first ~6px of
+   `.hd-dl-sign`. That is accepted, not accidental: the button is hover-only, it is
+   what GitHub does, and the alternative (`left:10px`, or padding the cell wider)
+   either hides it under the gutter or reflows every row. */
+.hd-dl-code{position:relative;}
+.hd-cmt-add{position:absolute;left:0;top:50%;transform:translateY(-50%);
+  width:16px;height:16px;display:grid;place-items:center;padding:0;
+  border:none;border-radius:5px;background:var(--blue);color:#fff;
+  font:600 12px var(--sans);line-height:1;cursor:pointer;z-index:1;}
+.hd-cmt-add:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
+.hd-cmt-badge{flex:0 0 auto;min-width:17px;padding:1px 6px;border-radius:999px;
+  background:var(--amber-bg);color:var(--amber-ink);font:600 10.5px var(--sans);text-align:center;}
+/* The pane head says a file is refused BEFORE the user writes anything. Not hidden
+   and not a disabled button: the floor is a basename match, so it also catches
+   ordinary files (src/secrets/README.md), and the run really did change this one.
+   margin-left:auto so this third child does not re-space the head's existing pair. */
+.hd-diff-guarded{flex:0 0 auto;margin-left:auto;padding:1px 7px;border-radius:999px;
+  background:var(--amber-bg);color:var(--amber-ink);font:600 10.5px var(--sans);white-space:nowrap;}
+/* Author `display` beats the UA [hidden] rule — every toggled class needs the twin. */
+.hd-cmt-block[hidden],.hd-cmt-detached[hidden],.hd-cmt-card[hidden],.hd-cmt-badge[hidden],.hd-cmt-add[hidden]{display:none;}
+.hd-tree{display:block;}
+.hd-tree-group{display:block;}
+.hd-tree-group[hidden]{display:none;}
+.hd-tree-project{padding:9px 12px 4px;color:var(--ink-2);font:600 11px var(--mono);}
+.hd-tree-dir,.hd-tree-file{
+  width:100%;
+  border:0;
+  margin:0;
+  padding-block:9px;
+  padding-inline-end:12px;
+  background:transparent;
+  color:inherit;
+  font:inherit;
+  text-align:left;
+  appearance:none;
+  display:flex;
+  align-items:center;
+  gap:8px;
+  cursor:pointer;
+  border-radius:9px;
+}
+.hd-tree-dir,.hd-tree-file{padding-inline-start:var(--tree-indent,10px);}
+.hd-tree-dir:hover,.hd-tree-file:hover,.hd-tree-file.active{background:var(--field);}
+.hd-tree-dir:focus-visible,.hd-tree-file:focus-visible{
+  outline:2px solid var(--ink);
+  outline-offset:-2px;
+}
+.hd-tree-file .hd-diff-path{
+  flex:1;
+  min-width:0;
+  font-size:12px;
+  color:var(--ink);
+  direction:ltr;
+  text-align:left;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.hd-tree-file .hd-diff-path::before{content:none;}
+.hd-tree-file.deleted .hd-diff-path{opacity:1;color:var(--ink);text-decoration:none;}
+.hd-tree-status,.hd-tree-chevron,.hd-tree-folder-icon{flex:0 0 auto;}
+.hd-tree-status{width:18px;height:18px;display:grid;place-items:center;color:var(--ink);}
+.hd-tree-file.add .hd-tree-status{color:var(--green-ink);}
+.hd-tree-file.del .hd-tree-status{color:var(--red-ink);}
+.hd-tree-file-icon,.hd-tree-folder-icon{width:18px;height:18px;display:block;}
+.hd-tree-chevron{width:12px;height:14px;color:var(--ink-2);transition:transform .15s;}
+.hd-tree-dir[aria-expanded="true"] .hd-tree-chevron{transform:rotate(90deg);}
+.hd-tree-folder-icon{color:var(--ink);}
+.hd-tree-dir-label{
+  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-size:12px;color:var(--ink);
+}
+.hd-diff-pane :is(.hljs-comment,.hljs-quote,.hljs-punctuation){color:var(--hd-syntax-comment);}
+.hd-diff-pane :is(.hljs-keyword,.hljs-operator,.hljs-meta,.hljs-deletion){color:var(--hd-syntax-keyword);}
+.hd-diff-pane :is(.hljs-type,.hljs-built_in,.hljs-attr,.hljs-attribute,
+  .hljs-selector-class,.hljs-selector-id,.hljs-selector-tag){color:var(--hd-syntax-type);}
+.hd-diff-pane :is(.hljs-string,.hljs-regexp,.hljs-addition){color:var(--hd-syntax-string);}
+.hd-diff-pane :is(.hljs-number,.hljs-literal,.hljs-symbol,.hljs-bullet,
+  .hljs-variable,.hljs-template-variable){color:var(--hd-syntax-literal);}
+.hd-diff-pane :is(.hljs-title,.hljs-section,.hljs-name){color:var(--hd-syntax-title);}
+.hd-diff-pane :is(.hljs-comment,.hljs-quote){font-style:italic;}
+.hd-diff-pane .hint,.hd-diff-list .hint,.hd-tree .hint,.hd-diff-note{color:var(--ink-2);}
 .hd-diff-empty{margin-top:24px;padding:40px;text-align:center;color:var(--ink-2);
   background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);}
+.hd-diff-partial{margin-bottom:14px;padding:10px 14px;background:var(--amber-bg);color:var(--amber-ink);
+  border:1px solid var(--line);border-radius:var(--r-card);font:400 12.5px/1.5 var(--sans);}
 
 /* ---------- History detail: Overview tab ---------- */
 .hd-ov{display:flex;flex-direction:column;gap:18px;}
@@ -2070,6 +2155,10 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hist-diff-pill .hist-diff{display:inline-flex;gap:6px;font-weight:700;}
 .hist-diff-pill .hist-diff[hidden],.hist-nodiff[hidden]{display:none;}
 .hist-nodiff{color:var(--ink-3);}
+.hist-cmt-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 11px;
+  border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12px;color:var(--amber-ink);}
+.hist-cmt-pill[hidden]{display:none;}   /* author display:inline-flex beats the UA [hidden] rule */
+.hist-cmt-pill .hist-cmt-count{font-weight:700;}
 .hist-open{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
   border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink-2);cursor:pointer;}
 .hist-open:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
@@ -2456,7 +2545,7 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
    wire rule is `.run-flow .wires path.wire-live` and the fan rule is
    `.run-flow .node .fan .sq.on`. Each override below is one class deeper than the
    rule it beats, so it wins on specificity, not source order. */
-.rd-graph.settled .run-flow .wires path.wire-live{animation:none;}
+.rd-graph.settled .run-flow .wires path.wire-live{animation:none;stroke-dashoffset:0;}
 /* Belt-and-braces: `runStatusOf` already returns 'stopped'/'done' for every node
    once the run is halted, so a terminal graph carries no `.is-active` — these two
    are no-ops today and exist only so a future adapter change cannot resurrect the
@@ -2504,6 +2593,681 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
 .stop-confirm:disabled{opacity:.6;cursor:default;}
 .stop-cancel:focus-visible,.stop-confirm:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 
+/* ---------- Collapsible sidebar: the 76px icon rail ---------- */
+/* No rule here restyles anything the expanded 298px column already had: 21 of
+   the 39 are scoped under `.sidebar.collapsed`, and the other 18
+   (`.brand .logo-mark`, `.side-toggle*`, `.nav .rail-tile*`, `.spend-ring*`)
+   style nodes that exist only because of this feature. The <1080px breakpoint
+   (:920-922) still hides the sidebar outright and hands over to .topnav —
+   collapse is a preference that only exists above it, and the two never overlap.
+   HOUSE RULE for this whole block: no comment inside a rule body, and no
+   closing brace in any comment — ruleBody() stops its capture at the first one
+   and both would break the tests. */
+.brand .logo-mark{display:none;width:32px;height:32px;border-radius:50%;}
+.side-toggle{display:flex;align-items:center;justify-content:center;
+  width:30px;height:30px;flex:0 0 auto;padding:0;border:0;border-radius:9px;
+  background:transparent;color:var(--ink);cursor:pointer;}
+.side-toggle svg{width:23px;height:23px;}
+.side-toggle:hover{background:var(--field);color:var(--ink);}
+.side-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+
+/* 76 - 1px border-right - 36px padding = a 39px content box. But
+   ::-webkit-scrollbar (:898) makes the vertical gutter SPACE-CONSUMING, and the
+   rail's own scroll height is ~967px with four runs — on a 900px window that
+   gutter takes another 10px and shoves the icon column 5px off centre. Suppress
+   it here only; the rail still scrolls by wheel and keyboard, and the base
+   overflow-y is deliberately NOT restated (a test asserts it isn't). */
+.sidebar.collapsed{width:76px;flex:0 0 76px;padding:22px 18px 18px;
+  scrollbar-width:none;}
+.sidebar.collapsed::-webkit-scrollbar{width:0;height:0;}
+.sidebar.collapsed .brand{flex-direction:column;gap:6px;margin-bottom:8px;padding:0;}
+.sidebar.collapsed .logo{display:none;}
+.sidebar.collapsed .logo-mark{display:block;}
+.sidebar.collapsed .side-toggle{width:40px;height:40px;margin:10px 0 8px;border-radius:12px;}
+/* The glyph is a panel outline with a fixed left divider, so it must NOT be
+   mirrored: scaleX(-1) would throw the divider to the right edge and claim the
+   sidebar had moved. Only the inner chevron turns round, and applySidebarCollapsed
+   (app.js:365) rewrites its `d` instead — the box stays put in both states.
+   Both glyph sizes are the originals +30% (18 -> 23 beside the wordmark,
+   20 -> 26 on the rail). stroke-width lives in the markup, not here: at 1.2 in a
+   24-unit viewBox both sizes land on a ~1.2px hairline, so neither state needs
+   walking back. */
+.sidebar.collapsed .side-toggle svg{width:26px;height:26px;}
+
+/* `:not(.rail-tile)` is LOAD-BEARING on both rules below. Run tiles are
+   <button>s inside .nav, so without the guard the first rule would force them
+   to 40x40 and the second would hide their .child-dot and .child-q — the two
+   things a tile exists to show. `:not()` contributes its argument's
+   specificity, so the first rule is (0,4,1) and out-ranks `.nav button`
+   (:91, 0,1,1), `.nav button:hover` (:100, 0,2,1) and `.nav button.nav-cta`
+   (:109, 0,2,1). `flex:0 0 auto` is NOT decoration: .nav is a column flex
+   container whose items default to shrinkable, and these boxes are fixed-size
+   by design. */
+.sidebar.collapsed .nav{align-items:center;gap:6px;}
+.sidebar.collapsed .nav button:not(.rail-tile){position:relative;flex:0 0 auto;
+  width:40px;height:40px;padding:0;gap:0;justify-content:center;border-radius:12px;}
+/* NOT display:none. This span is the ONLY source of an accessible name for
+   every nav button — index.html carries no aria-label on any of the 12 and the
+   SVGs carry no title element — and display:none removes it from the
+   accessibility tree. Measured in Chrome: eleven buttons announced with no
+   name, and Running announced as "4" (the count span survives, so
+   name-from-contents wins). Same visually-hidden recipe as .sr-only
+   (:1603-1604), plus the clip-path .sr-only does not carry — `clip` is
+   deprecated and its successor is what modern engines honour. position:absolute
+   takes it out of flow, so the 40px square still centres its glyph, and the
+   button above is position:relative. Both
+   nav-count badges carry .nav-count, so the two :not() guards keep this off
+   them, and the child combinator keeps it off the nested nav-paused-count. */
+.sidebar.collapsed .nav button:not(.rail-tile) > span:not(.nav-count):not(.nav-rollup){
+  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
+  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
+/* New pipeline is the one filled control on the rail; outlined-at-rest only
+   makes sense next to labels. These are (0,4,1) and (0,5,1), so they outrank
+   `.nav button:hover` (:100, 0,2,1), `.nav button.nav-cta` (:109, 0,2,1),
+   `.nav button.nav-cta:hover` (:111, 0,3,1) and `.nav button.nav-cta.active`
+   (:112, 0,3,1). Without its own hover the rail's only filled control is
+   hover-dead: the (0,4,1) fill would beat the (0,3,1) hover and nothing would
+   change. brightness() keeps the mock's darker-on-hover intent inside the
+   palette, and matches ten existing hover rules in this file. */
+.sidebar.collapsed .nav button.nav-cta{background:var(--ink);color:#fff;}
+.sidebar.collapsed .nav button.nav-cta svg{stroke:#fff;}
+.sidebar.collapsed .nav button.nav-cta:hover{filter:brightness(.55);}
+
+/* Section headers keep their text node — ui-nav-sections.test.mjs:26-35 asserts
+   the source order. (They are not exposed as named a11y nodes in either state,
+   so that is NOT the reason.) 26px hairline, per the mock. */
+.sidebar.collapsed .nav-sect{width:26px;height:1px;margin:10px auto;padding:0;
+  font-size:0;letter-spacing:0;background:var(--line);overflow:hidden;}
+.sidebar.collapsed .nav-sep{width:26px;margin-top:auto;}
+
+.sidebar.collapsed .nav-count{position:absolute;top:-2px;right:-2px;margin:0;
+  min-width:17px;height:17px;padding:0 4px;font-size:10px;
+  border:2px solid var(--panel);}
+/* Two rules, not one grouped selector: grouped, the only thing a test can reach
+   is the selector TEXT, and that assertion was proven vacuous. A grey zero
+   pinned to a 40px square is noise, and the paused pill would land in the same
+   corner as the live count. #nav-paused-badge has no rule of its own anywhere
+   in this file today — it is styled by .nav-count.n-paused (:125) — so this is
+   its first, and an id keeps it at (1,2,0), well clear of the badge rule above
+   and of `.nav-count[hidden]`. The paused signal is not lost: every paused run
+   still shows its amber dot on its own tile, and updateNavCounts puts the
+   number in the button's title AND aria-label. */
+.sidebar.collapsed .nav-count.n-grey{display:none;}
+.sidebar.collapsed #nav-paused-badge{display:none;}
+/* The 2px ring is what both sibling markers on the rail get (`.child-dot` and
+   `.child-q` below) and for the same reason. The dot's centre sits at 37,37 on a
+   40px square whose corner arc is centred 28,28 with r=12, and sqrt(9^2+9^2) is
+   12.73 — so more than half the dot overhangs the button, onto the white
+   sidebar, in the #fff that `.nav button.active .nav-rollup` (:140) gives it
+   while Running is the current view. Measured in Chrome: a faint crescent
+   instead of an alert. Everything here is border-box (:52), so the ring eats
+   into the 8px, it does not grow it. */
+.sidebar.collapsed .nav-rollup{position:absolute;right:-1px;bottom:-1px;margin:0;
+  border:2px solid var(--panel);}
+
+.sidebar.collapsed .side-foot{align-items:center;gap:8px;
+  padding-top:12px;border-top:1px solid var(--line);}
+
+/* ---- rail run tiles ---- */
+/* Scoped `.nav .rail-tile` (0,2,0) for the same reason `.nav .nav-child` is
+   scoped (:149-155): it has to outrank the generic `.nav button` (:91, 0,1,1).
+   `padding` and `gap` must be restated — the collapsed `padding:0` rule
+   deliberately excludes `.rail-tile`, so a tile would otherwise inherit
+   `padding:11px 13px` and hold its initials in an 8px content box.
+   `flex:0 0 auto` keeps the fixed 36px box out of the column flex shrink. */
+.sidebar.collapsed .nav-children{align-items:center;gap:5px;margin-top:5px;}
+.nav .rail-tile{position:relative;display:flex;align-items:center;justify-content:center;
+  width:36px;height:36px;flex:0 0 auto;padding:0;gap:0;
+  border:1.5px solid var(--line-2);border-radius:11px;
+  background:var(--panel);color:var(--ink-2);
+  font-family:var(--mono);font-size:11.5px;font-weight:400;cursor:pointer;
+  transition:border-color .15s,background .15s,color .15s;}
+/* `.nav button:hover` (:100) is (0,2,1) and OUT-SPECIFIES the (0,2,0) rule above,
+   so background and color have to be restated here at (0,3,0) or a hovered tile
+   turns var(--field) grey with var(--ink) initials. The mock's hover changes the
+   border only. Specificity is decided before source order — putting this rule
+   later cannot fix it. */
+.nav .rail-tile:hover{background:var(--panel);border-color:var(--ink);color:var(--ink-2);}
+/* Three (0,3,0) rules in a row, so SOURCE ORDER decides between them:
+   `:hover` first, `.lingering` next (a hovered lingering tile stays grey), and
+   `.active` last (a selected lingering tile must not render --ink-3 text on an
+   --ink fill). `.active` also has to beat `.nav button.active` (:101, 0,2,1),
+   which it does on class count. The expanded row gets the same precedence for
+   free, on specificity: `.nav .nav-child.active` (:177) is (0,3,0) and
+   `.nav-child.lingering` (:178) is only (0,2,0). */
+.nav .rail-tile.lingering{color:var(--ink-3);}
+.nav .rail-tile.active{background:var(--ink);border-color:var(--ink);color:#fff;}
+.nav .rail-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+/* No `box-sizing:content-box`: the global border-box (:52) makes this a 9px
+   total — a 5px core inside a 2px panel ring, exactly the mock. content-box
+   would make it 13px, and 15.3px at the dotpulse peak, on a 36px tile. The
+   colour classes (:197-204) are UNSCOPED (0,2,0), so the tile's dot inherits its
+   family and its pulse for free, and this (0,3,0) rule still wins on geometry.
+   Reduced motion does NOT reach that pulse, here or on the expanded row:
+   `.child-dot{animation:none}` in the block at :914-915 is (0,1,0) and loses to
+   `.child-dot.peach{animation:dotpulse}` (0,2,0), and `.nav-rollup` is not on
+   that kill list at all. Both are pre-existing and out of this change's scope. */
+.nav .rail-tile .child-dot{position:absolute;right:-2px;bottom:-2px;margin:0;
+  width:9px;height:9px;border:2px solid var(--panel);}
+/* `margin:0` overrides the base .child-q's margin-left:6px (:207-211), which
+   would otherwise shove this absolutely-positioned badge off the corner. The
+   base `animation:pulse` is kept on purpose — a run waiting on you should
+   pulse — and the block at :914-915 names .child-q, which DOES reach it: both
+   are (0,1,0) and the kill list comes later in the file. */
+.nav .rail-tile .child-q{position:absolute;top:-5px;right:-5px;margin:0;
+  display:flex;align-items:center;justify-content:center;
+  width:15px;height:15px;border:2px solid var(--panel);border-radius:50%;
+  background:var(--amber);color:#fff;font-size:9px;font-weight:700;}
+
+/* ---- rail budget ring ---- */
+/* `.spend-ring` (0,1,0) ties `.spend-ind` (:1607-1608, 0,1,0) and wins the tie
+   on source order, which is what lets it override display / width / text-align /
+   border / border-radius / background / padding. The band rules at :1618-1622
+   are `.spend-ind.warn .spend-ind-meter` and friends — they style DESCENDANTS
+   the ring does not have, so they cannot reach it. `.spend-ind:focus-visible`
+   (:1610) is already identical to what a `.spend-ring:focus-visible` would say,
+   so no such rule is written. `:hover` is the one case order cannot fix. */
+.spend-ring{--ring-pct:0;--ring-fill:var(--blue-ink);--ring-track:var(--blue-bg);
+  display:flex;align-items:center;justify-content:center;text-align:center;
+  width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;
+  background:conic-gradient(var(--ring-fill) 0% calc(var(--ring-pct) * 1%),
+                            var(--ring-track) 0%);}
+/* `.spend-ind:hover` (:1609, background:var(--line)) is (0,2,0) and
+   OUT-SPECIFIES a bare `.spend-ring` (0,1,0) — measured in Chrome: hovering set
+   background-image to `none` and the disc to a flat neutral fill, destroying the
+   arc. Specificity is decided before source order, so the gradient has to be
+   restated at (0,2,0). brightness() supplies the hover feedback the flat fill
+   used to. */
+.spend-ring:hover{background:conic-gradient(var(--ring-fill) 0% calc(var(--ring-pct) * 1%),
+                                            var(--ring-track) 0%);
+  filter:brightness(.96);}
+.spend-ring.warn{--ring-fill:var(--amber-ink);--ring-track:var(--amber-bg);}
+.spend-ring.over{--ring-fill:var(--red-ink);--ring-track:var(--red-bg);}
+/* No total limit means no denominator: a flat neutral ring, and the centre shows
+   the amount instead of a percentage nothing backs. var(--ink-3), not
+   var(--line) — var(--line) on var(--panel) is ~1.1:1 across a 4.5px annulus, i.e.
+   an absent ring, which is not the same thing as a neutral one. */
+.spend-ring.no-limit{--ring-fill:var(--ink-3);--ring-track:var(--ink-3);}
+.spend-ring-val{display:flex;align-items:center;justify-content:center;
+  width:29px;height:29px;border-radius:50%;background:var(--panel);
+  font-family:var(--mono);font-size:9.5px;color:var(--ink-2);}
+
+/* ---------- Ask Worca (spec §10.3-§10.6; tokens only, no hex) ---------- */
+/* Fixed full-height dock over the content column; children restore pointer
+   events. z-40 sits above sticky tab lists (5) and below .viewer-modal (50)
+   and #confirm-modal (60) so page modals dim the sheet and confirmModal stays
+   reusable. Left offsets track the rail: 298px expanded, 76px collapsed
+   (.sidebar / .sidebar.collapsed own those widths). */
+.ask-dock{position:fixed;top:0;bottom:0;right:0;left:298px;z-index:40;pointer-events:none;
+  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
+  padding:0 28px 26px;transition:left .2s cubic-bezier(.65,.02,.28,1);}
+body.rail-collapsed .ask-dock{left:76px;}
+/* Below the rail breakpoint the sidebar is display:none while .collapsed may
+   still be present — restate the higher-specificity selector or left:76px wins. */
+@media (max-width:1080px){
+  .ask-dock,body.rail-collapsed .ask-dock{left:0;}
+}
+
+.ask-pill{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;
+  border:1.5px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--ink);
+  font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
+  box-shadow:0 6px 28px rgba(25,25,27,.10),0 1px 2px rgba(25,25,27,.06);transition:border-color .15s;}
+.ask-pill:hover{border-color:var(--ink);}
+.ask-pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ask-pill[hidden]{display:none;}
+.ask-pill-logo{width:22px;height:22px;border-radius:50%;}
+.ask-kbd{padding:3px 7px;border-radius:7px;background:var(--field);color:var(--ink-3);
+  font-family:var(--mono);font-weight:400;font-size:10.5px;}
+
+.ask-sheet{pointer-events:auto;position:relative;display:flex;flex-direction:column;overflow:hidden;
+  width:min(782px,100%);height:min(669px,calc(100% - 20px));background:var(--panel);
+  border:1px solid var(--line-2);border-radius:var(--r-card);
+  box-shadow:0 18px 60px rgba(25,25,27,.14),0 2px 6px rgba(25,25,27,.06);
+  animation:wr-rise .26s cubic-bezier(.2,.7,.3,1) both;}
+.ask-sheet[hidden]{display:none;}
+
+.ask-header{display:flex;align-items:center;gap:10px;padding:13px 14px 13px 16px;border-bottom:1px solid var(--line);}
+.ask-header-logo{width:20px;height:20px;border-radius:50%;}
+.ask-title{font-weight:600;font-size:13px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ask-header-spacer,.ask-composer-spacer,.ask-activity-spacer,.ask-card-actions-spacer{flex:1 1 auto;}
+.ask-scope-btn{display:inline-flex;align-items:center;gap:5px;max-width:180px;height:30px;flex:none;padding:0 9px;
+  border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink-3);
+  font:inherit;font-size:11.5px;cursor:pointer;}
+.ask-scope-btn:hover{background:var(--field);color:var(--ink);}
+.ask-scope-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ask-scope-btn.is-pinned{color:var(--ink);border-color:var(--line-2);font-weight:600;}
+.ask-scope-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ask-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;
+  border:0;border-radius:9px;background:transparent;color:var(--ink-2);cursor:pointer;transition:.15s;}
+.ask-icon-btn:hover{background:var(--field);color:var(--ink);}
+.ask-icon-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+
+.ask-transcript{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
+  padding:18px 20px 8px;display:flex;flex-direction:column;gap:16px;}
+.ask-msg{display:flex;flex-direction:column;gap:6px;animation:wr-rise .2s cubic-bezier(.2,.7,.3,1) both;}
+.ask-user-bubble{align-self:flex-end;max-width:78%;padding:10px 14px;border-radius:16px 16px 4px 16px;
+  background:var(--field);color:var(--ink);font-size:13.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;}
+.ask-user-pills{justify-content:flex-end;margin-top:0;}
+.ask-attachment-pill{padding-right:12px;}
+.ask-attachment-thumb-link{display:inline-block;line-height:0;}
+.ask-attachment-thumb{max-width:180px;max-height:130px;border-radius:8px;border:1px solid var(--line);display:block;}
+
+.ask-activity{border-left:1.5px solid var(--line);padding:2px 0 2px 14px;display:flex;flex-direction:column;gap:7px;}
+.ask-activity-head{display:flex;align-items:center;gap:9px;min-width:0;}
+.ask-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--seq);}
+.ask-dot-run{background:var(--violet);animation:wr-pulse 1.6s ease-in-out infinite;}
+.ask-dot-done{background:var(--green);animation:none;}
+.ask-dot-live{background:var(--green);}
+.ask-activity-label{font-weight:500;font-size:12px;color:var(--ink-2);white-space:nowrap;}
+.ask-activity-elapsed{font-family:var(--mono);font-size:11px;color:var(--ink-3);}
+.ask-activity-meter{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap;}
+/* The live turn is marked by the orb at the bottom of the message, so the head
+   dot only has to say running-or-not: green while the turn is live, grey once
+   it has landed. Scoped to the head — the sub-agent rows keep their own
+   violet/green vocabulary. */
+.ask-activity-head .ask-dot-run{background:var(--green);}
+.ask-activity-head .ask-dot-done{background:var(--seq);}
+
+/* ---------- Ask Worca: the live thinking row (bottom of the last message) --- */
+.ask-thinking{display:flex;align-items:center;gap:12px;min-width:0;padding:2px 0 0;}
+.ask-orb{flex:0 0 auto;}
+/* The label is painted THROUGH the text: a 220%-wide gradient clipped to the
+   glyphs and swept across them, so the highlight travels word to word. Needs
+   `color:transparent` — which is why the reduced-motion block below has to put
+   a real colour back rather than only stopping the animation. */
+.ask-thinking-label{font-weight:500;font-size:12.5px;white-space:nowrap;
+  background:linear-gradient(100deg,var(--ink-3) 0%,var(--ink-3) 34%,var(--ink) 50%,var(--ink-3) 66%,var(--ink-3) 100%);
+  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
+  animation:ask-shimmer 2.4s linear infinite;}
+.ask-thinking-meter{font-family:var(--mono);font-size:11px;color:var(--seq);white-space:nowrap;}
+@keyframes ask-shimmer{from{background-position:180% 0;}to{background-position:-60% 0;}}
+/* The `.ask-dock *` blanket at the end of this file already kills the sweep;
+   this only restores a legible fill under the clipped background. */
+@media (prefers-reduced-motion: reduce){
+  .ask-thinking-label{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink-2);}
+}
+.ask-tool-row{display:flex;align-items:center;gap:9px;min-width:0;}
+.ask-tool-op{width:38px;flex:0 0 38px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
+  text-transform:uppercase;color:var(--ink-3);}
+.ask-tool-target{min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ask-tool-note{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--seq);}
+
+.ask-agents{margin-top:3px;display:flex;flex-direction:column;gap:2px;}
+.ask-agents-cap{display:flex;align-items:center;gap:8px;padding:2px 0 3px;font-weight:600;font-size:9.5px;
+  letter-spacing:.12em;text-transform:uppercase;color:var(--seq);}
+.ask-agents-count{padding:1px 6px;border-radius:999px;background:var(--field);color:var(--ink-3);
+  font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:0;text-transform:none;}
+.ask-agent-row{display:flex;align-items:center;gap:9px;width:100%;padding:5px 7px;border:0;border-radius:9px;
+  background:transparent;text-align:left;cursor:pointer;font-family:inherit;transition:.15s;}
+.ask-agent-row:hover{background:var(--field);}
+.ask-agent-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+.ask-agent-name{min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--ink);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ask-agent-model,.ask-agent-tokens,.ask-agent-cost{flex:0 0 auto;font-family:var(--mono);font-size:10px;color:var(--ink-3);}
+.ask-agent-status{flex:0 0 auto;margin-left:auto;font-weight:500;font-size:10.5px;color:var(--ink-3);}
+.ask-agent-status.is-done{color:var(--green-ink);}
+.ask-agent-log{margin:1px 0 6px 22px;border:1px solid var(--line);border-radius:11px;overflow:hidden;}
+.ask-agent-log-head{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--line);
+  background:var(--panel);font-family:var(--mono);font-size:10px;color:var(--ink-3);}
+.ask-agent-log-type{margin-left:auto;}
+.ask-agent-log-body{max-height:104px;overflow-y:auto;padding:7px 10px;background:var(--field);
+  font-family:var(--mono);font-size:10.5px;line-height:1.75;color:var(--ink-2);}
+.ask-agent-log-line{display:flex;gap:8px;min-width:0;}
+.ask-agent-log-t{flex:0 0 auto;color:var(--seq);}
+.ask-agent-log-text{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;}
+
+.ask-answer{max-width:92%;font-size:13.5px;line-height:1.72;color:var(--ink);}
+.ask-answer-plain{white-space:pre-wrap;overflow-wrap:anywhere;}
+.ask-md :is(h1,h2,h3,h4,h5,h6){margin:14px 0 6px;font-size:13.5px;font-weight:600;color:var(--ink);}
+.ask-md h1{font-size:15px;}
+.ask-md h2{font-size:14px;}
+.ask-md p{margin:6px 0;}
+.ask-md :is(ul,ol){margin:6px 0;padding-left:22px;}
+.ask-md li{margin:2px 0;}
+.ask-md blockquote{margin:8px 0;padding:2px 12px;border-left:2px solid var(--line-2);color:var(--ink-2);}
+.ask-md hr{border:0;border-top:1px solid var(--line);margin:12px 0;}
+.ask-md a{color:var(--blue-ink);}
+.ask-md code{font-family:var(--mono);font-size:11.5px;background:var(--field);border-radius:4px;padding:1px 4px;}
+.ask-md pre{margin:8px 0;padding:10px 12px;background:var(--field);border:1px solid var(--line);
+  border-radius:10px;overflow-x:auto;}
+.ask-md pre code{background:transparent;padding:0;font-size:11px;line-height:1.6;display:block;white-space:pre;}
+.ask-md table{border-collapse:collapse;margin:8px 0;font-size:12.5px;}
+.ask-md :is(th,td){border:1px solid var(--line);padding:4px 9px;text-align:left;}
+.ask-md th{background:var(--field);font-weight:600;}
+.ask-md input[type="checkbox"]{margin-right:6px;}
+
+.ask-notice{font-size:12.5px;color:var(--ink-3);}
+.ask-notice-link{color:var(--blue-ink);}
+.ask-error-line{font-size:12.5px;color:var(--red-ink);}
+
+.ask-card{margin-top:2px;display:flex;flex-direction:column;gap:10px;padding:13px 15px;
+  border:1.5px solid var(--line);border-radius:16px;background:var(--panel);}
+.ask-card-title{font-weight:600;font-size:12.5px;color:var(--ink);}
+.ask-card-seg{display:flex;gap:4px;}
+.ask-card-seg-btn{padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;background:transparent;
+  color:var(--ink-2);font-family:inherit;font-weight:600;font-size:11px;cursor:pointer;transition:.15s;}
+.ask-card-seg-btn.on{background:var(--ink);border-color:var(--ink);color:var(--panel);}
+.ask-card-target{display:flex;flex-direction:column;gap:10px;}
+.ask-card-field{display:flex;flex-direction:column;gap:4px;}
+.ask-card-label{font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);}
+.ask-card :is(select,input[type="text"],textarea){font-size:12.5px;padding:8px 11px;border-radius:10px;}
+.ask-card textarea.ask-card-brief{min-height:0;height:auto;max-height:160px;resize:none;line-height:1.5;}
+.ask-card-members{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);}
+.ask-card-members-src summary{font-weight:600;font-size:10.5px;color:var(--ink-3);cursor:pointer;}
+.ask-card-members-src-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
+.ask-card-err{font-size:12px;color:var(--red-ink);min-height:0;}
+.ask-card-scope-warn{font-size:12px;color:var(--amber-ink);background:var(--amber-wash);
+  border:1px solid var(--amber-line);border-radius:8px;padding:6px 9px;}
+.ask-card-err:empty{display:none;}
+.ask-card-actions{display:flex;align-items:center;gap:8px;}
+.ask-card-open-np{border:0;background:transparent;padding:0;color:var(--blue-ink);font-family:inherit;
+  font-size:11.5px;cursor:pointer;}
+.ask-card-not-now{padding:8px 13px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);
+  font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;transition:.15s;}
+.ask-card-not-now:hover{background:var(--field);color:var(--ink);}
+.ask-card-start{display:flex;align-items:center;gap:7px;padding:8px 15px;border:0;border-radius:999px;
+  background:var(--ink);color:var(--panel);font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;transition:.15s;}
+.ask-card-start:hover{filter:brightness(1.08);}
+.ask-card-start:disabled{opacity:.55;cursor:default;}
+.ask-card :is(.ask-card-seg-btn,.ask-card-not-now,.ask-card-start,.ask-card-open-np):focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ask-card-stub{font-size:12.5px;color:var(--ink-3);}
+.ask-card-failed{color:var(--red-ink);}
+.ask-card-link{color:var(--blue-ink);}
+
+.ask-jump{position:absolute;left:0;right:0;bottom:104px;margin:0 auto;width:max-content;
+  display:flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;
+  background:var(--panel);color:var(--ink);font-family:inherit;font-weight:600;font-size:11.5px;cursor:pointer;
+  box-shadow:0 6px 18px rgba(25,25,27,.10);transition:border-color .15s;}
+.ask-jump:hover{border-color:var(--ink);}
+.ask-jump[hidden]{display:none;}
+.ask-jump:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+
+.ask-composer{position:relative;flex:0 0 auto;border-top:1px solid var(--line);padding:10px 12px 11px;
+  display:flex;flex-direction:column;gap:4px;}
+.ask-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 4px 4px;}
+.ask-chips[hidden]{display:none;}
+.ask-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 9px;border:1px solid var(--line);
+  border-radius:8px;background:var(--field);color:var(--ink-2);font-family:var(--mono);font-size:11px;max-width:240px;}
+.ask-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ask-chip-thumb{width:24px;height:24px;object-fit:cover;border-radius:4px;flex:none;}
+.ask-chip-x{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-family:inherit;
+  font-size:13px;line-height:1;padding:1px 4px;border-radius:5px;transition:.15s;}
+.ask-chip-x:hover{background:var(--line);color:var(--ink);}
+.ask-composer textarea.ask-input{min-height:0;height:auto;max-height:120px;resize:none;border:0;border-radius:0;
+  background:transparent;padding:6px 6px 8px;font-size:13.5px;line-height:1.6;}
+.ask-composer textarea.ask-input:focus{background:transparent;border-color:transparent;}
+.ask-composer textarea.ask-input:focus-visible{outline:none;}
+.ask-composer-msg{font-size:11.5px;color:var(--red-ink);padding:0 6px;}
+.ask-composer-msg[hidden]{display:none;}
+.ask-composer-row{display:flex;align-items:center;gap:8px;position:relative;}
+.ask-meter{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
+  color:var(--ink-3);white-space:nowrap;}
+.ask-meter-sep{color:var(--line-2);}
+.ask-meter-cost{color:var(--ink-2);}
+.ask-agents-btn{display:flex;align-items:center;gap:6px;padding:5px 8px;border:0;border-radius:8px;
+  background:transparent;color:var(--ink-3);font-family:var(--mono);font-size:10.5px;white-space:nowrap;
+  cursor:pointer;transition:.15s;}
+.ask-agents-btn:hover{background:var(--field);color:var(--ink);}
+.ask-model-btn{display:flex;align-items:center;gap:7px;padding:6px 10px;border:0;border-radius:9px;
+  background:transparent;color:var(--ink);font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer;transition:.15s;}
+.ask-model-btn:hover{background:var(--field);}
+.ask-model-btn-effort{font-weight:500;color:var(--ink-3);}
+.ask-send,.ask-stop{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;
+  flex:0 0 31px;border-radius:50%;cursor:pointer;transition:.15s;}
+.ask-send{border:0;background:var(--ink);color:var(--panel);}
+.ask-send:hover{filter:brightness(1.08);}
+.ask-send[hidden]{display:none;}
+.ask-stop{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);}
+.ask-stop:hover{border-color:var(--ink);}
+.ask-stop[hidden]{display:none;}
+.ask-composer :is(.ask-agents-btn,.ask-wt-btn,.ask-model-btn,.ask-send,.ask-stop,.ask-chip-x):focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+/* The button shares .ask-agents-btn, which is display:flex — that AUTHOR rule
+   outranks the UA [hidden]{display:none}, so without this twin the button never
+   hides and shows a permanent "0 worktrees". */
+.ask-wt-btn[hidden]{display:none;}
+
+.ask-pop{position:absolute;z-index:3;background:var(--panel);border:1px solid var(--line-2);
+  padding:6px;box-shadow:0 12px 34px rgba(25,25,27,.12);border-radius:16px;}
+.ask-pop-threads{top:46px;right:76px;width:326px;}
+.ask-pop-scope{left:16px;bottom:44px;width:300px;max-height:min(420px,70%);overflow-y:auto;}
+.ask-pop-model{right:30px;bottom:42px;width:292px;border-radius:18px;}
+.ask-pop-runinfo{right:96px;bottom:44px;width:326px;z-index:4;}
+.ask-pop-caption,.ask-pop-caption-row .ask-pop-caption{padding:8px 10px 6px;font-weight:600;font-size:10px;
+  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
+.ask-pop-caption-row{display:flex;align-items:baseline;gap:8px;}
+.ask-pop-caption-meter{margin-left:auto;padding-right:10px;font-family:var(--mono);font-size:10px;color:var(--ink-3);}
+.ask-pop-empty{padding:10px 10px 12px;font-size:12px;color:var(--ink-3);}
+.ask-pop-divider{height:1px;margin:6px 11px;background:var(--line);}
+.ask-pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:0;border-radius:12px;
+  background:transparent;text-align:left;font-family:inherit;cursor:pointer;transition:.15s;}
+.ask-pop-item:hover,.ask-pop-item:focus-visible{background:var(--field);outline:none;}
+.ask-model-name{font-weight:500;font-size:13.5px;color:var(--ink);}
+.ask-model-check{margin-left:auto;color:var(--blue-ink);font-weight:600;}
+.ask-pop-row-value{margin-left:auto;font-weight:400;font-size:12.5px;color:var(--ink-3);}
+.ask-pop-row-chev{color:var(--ink-3);}
+/* .ask-pop-model is a fixed 292px panel (256px of row content), so something in the
+   row has to give: rigid badges win every negotiation, and measured in Chrome an
+   origin badge -- "DS Fast" + "plugin: discretestack-models" + "secret not set" --
+   starved the name to 0px and spilled the row 45px past the panel, which sets no
+   overflow of its own (.ask-sheet then chops the check mark off). The row shows no
+   provenance at all now, so its only variable-width text IS the name: it shrinks to
+   a legible floor and never grows (badges keep hugging it), while the two status
+   badges opt out of shrinking -- ellipsising "⚠cost" to a bare "…" would eat the
+   warning itself. The shrink props on the base badge outlive the origin badge in
+   case a plain one returns. */
+.ask-model-tag{flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;
+  font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:2px 8px;
+  border-radius:999px;white-space:nowrap;background:var(--field);color:var(--ink-3);}
+.ask-model-tag.is-warn{flex:0 0 auto;max-width:none;background:var(--amber-bg);color:var(--amber-ink);}
+.ask-model-tag.is-err{flex:0 0 auto;max-width:none;background:var(--red-bg);color:var(--red-ink);}
+.ask-model-item .ask-model-name{flex:0 1 auto;min-width:4.5ch;overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap;}
+/* The threads list is the only scrollport in a popover: /api/ask/threads returns up
+   to 50 rows and .ask-sheet clips (overflow:hidden), so without a cap the tail is
+   unreachable. 360px caps it on a tall window; the vh term keeps it inside the sheet
+   on a short one -- the popover starts 46px down and the sheet is 100vh - 46px at most.
+   The radius clips the rows so they do not bleed over the panel's own corners. */
+.ask-threads-list{max-height:min(360px,calc(100vh - 200px));overflow-y:auto;overscroll-behavior:contain;
+  border-radius:10px;}
+.ask-thread-row{display:flex;align-items:center;border-radius:10px;}
+.ask-thread-row:hover{background:var(--field);}
+.ask-thread-pick{flex:1 1 auto;min-width:0;padding:8px 4px 8px 10px;border-radius:10px;}
+/* The date leads the meter line: bold and on --ink so it anchors the scan while
+   the ctx/cost/agent figures beside it keep the meter's grey. An inline span, so
+   the mono and the 10px come from .ask-thread-meter; nowrap is what now keeps it
+   on one line, flex:0 0 auto having gone with the left-edge column. */
+.ask-thread-when{font-weight:700;color:var(--ink);white-space:nowrap;}
+/* Scoped to the threads rows -- .ask-dot elsewhere (agents popover, agent rows,
+   the activity head) keeps showing its --seq dot. Here a dot means "this chat is
+   live", so an idle row shows none; display, not visibility, so the 6px slot and
+   the row's 10px gap collapse with it and the title moves to the left edge. */
+.ask-thread-dot{display:none;}
+.ask-thread-dot.ask-dot-live{display:block;}
+.ask-thread-col{display:flex;flex-direction:column;gap:1px;min-width:0;}
+.ask-thread-title{font-weight:500;font-size:12.5px;color:var(--ink);display:-webkit-box;
+  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
+.ask-thread-meter{font-family:var(--mono);font-size:10px;color:var(--ink-3);}
+.ask-thread-trash{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
+  flex:0 0 26px;margin-right:5px;border:0;border-radius:8px;background:transparent;color:var(--seq);
+  cursor:pointer;transition:.15s;}
+.ask-thread-trash:hover{background:var(--red-bg);color:var(--red-ink);}
+.ask-thread-trash:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ask-runinfo-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;}
+.ask-runinfo-row:hover{background:var(--field);}
+.ask-runinfo-col{display:flex;flex-direction:column;gap:1px;min-width:0;}
+.ask-runinfo-name{font-family:var(--mono);font-size:11.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ask-runinfo-sub{font-family:var(--mono);font-size:10px;color:var(--ink-3);}
+.ask-runinfo-elapsed{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--seq);}
+/* .ask-pop-worktrees inherits .ask-pop-runinfo's right/bottom offset, which is
+   calibrated for the AGENTS button; the worktrees button sits to its left. */
+.ask-pop-worktrees{min-width:340px;right:187px;}
+.ask-wt-row .ask-runinfo-sub.ask-wt-path{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;}
+.ask-wt-row .ask-thread-trash{flex:none;}
+
+/* ---------- Ask Worca dock clearance ---------- */
+/* The dock is a fixed overlay -- .ask-dock above: 26px dock padding-bottom plus the
+   ~47px pill occludes a ~73px strip at the bottom of every scrollport, while the page
+   gutters reserve only 40px. One late override lifts the BOTTOM padding of all five
+   scroll gutters to --ask-dock-clearance: 96px = 73px strip + breathing room. Source
+   order is load-bearing -- this must follow the base rules at :234, :1718, :1742,
+   :2312, :2335 and precede the reduced-motion block below. The -list screen classes
+   are targeted, NOT .run-screen/.hist-screen, so the -detail scrollports keep
+   padding:0 for their sticky tab bars and take clearance via .rd-body/.hd-body
+   instead; body.view-history/.view-running .main keep padding:0 by specificity. */
+.main,.run-screen-list,.hist-screen-list,.rd-body,.hd-body{padding-bottom:var(--ask-dock-clearance);}
+
+/* ---------- native control skins (checkbox / radio / switch / rows) -------- */
+/* Everything the browser used to draw for itself. The mark is the one .qopt
+   already draws (:761): a 1.5px --radio-ring hairline on --panel that fills
+   --green behind a white glyph, so "chosen" reads identically on a question
+   option, a checkbox, a chip and a whole row.
+   Styling the REAL <input> through appearance:none — rather than hiding it
+   behind a span — is what lets every existing emitter keep its markup:
+   :checked, :disabled, :indeterminate, label clicks and keyboard all keep
+   working with no JS. NOTHING here sets `display`, so the hidden inputs behind
+   the segmented controls (#mock, [name=target], [name=source]) stay hidden. */
+
+/* Net for anything never hand-skinned (a future <progress>, a date input, the
+   OS spell-check UI): brand green instead of the OS accent. */
+:root{accent-color:var(--green);}
+
+input[type="checkbox"],
+input[type="radio"]{
+  appearance:none;-webkit-appearance:none;
+  flex:0 0 auto;width:18px;height:18px;margin:0;padding:0;
+  border:1.5px solid var(--radio-ring);border-radius:6px;
+  background:var(--panel);cursor:pointer;vertical-align:middle;
+  transition:background-color .14s,border-color .14s;}
+input[type="radio"]{border-radius:50%;}
+input[type="checkbox"]:hover:not(:disabled),
+input[type="radio"]:hover:not(:disabled){border-color:var(--ink-3);}
+/* the identical white tick .qopt.sel uses */
+input[type="checkbox"]:checked{border-color:var(--green);
+  background:var(--green) center/11px 11px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");}
+/* "some of these are on" — set from JS, there is no HTML attribute for it */
+input[type="checkbox"]:indeterminate{border-color:var(--green);
+  background:var(--green) center/11px 11px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'><path d='M6 12h12'/></svg>");}
+/* ring, white gap and dot from one inset shadow — no pseudo-element, which a
+   replaced element cannot be relied on to render */
+input[type="radio"]:checked{border-color:var(--green);background:var(--green);
+  box-shadow:inset 0 0 0 3.5px var(--panel);}
+/* disabled reads as "fixed" (a manifest locked it), never as "broken" */
+input[type="checkbox"]:disabled,
+input[type="radio"]:disabled{background:var(--field);border-color:var(--line-2);cursor:not-allowed;}
+/* the :disabled rule above uses the `background` shorthand, which drops the
+   glyph :checked painted — so a locked-on box has to restate it */
+input[type="checkbox"]:disabled:checked{border-color:var(--seq);
+  background:var(--seq) center/11px 11px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");}
+input[type="radio"]:disabled:checked{background:var(--seq);border-color:var(--seq);
+  box-shadow:inset 0 0 0 3.5px var(--panel);}
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+/* markdown task lists (:3019 sets the gap; the blanket margin:0 above would
+   otherwise win on source order) */
+.ask-md input[type="checkbox"]{margin-right:6px;}
+
+@media (prefers-contrast:more),(forced-colors:active){
+  input[type="checkbox"],input[type="radio"]{border-color:CanvasText;}
+  input[type="checkbox"]:checked,input[type="radio"]:checked{background-color:Highlight;border-color:Highlight;}
+}
+
+/* ---- switch driven by a real checkbox ----
+   .switch (:470) is a <div role="switch"> mirrored to a hidden input by hand
+   (app.js#wireMockSwitch). One sibling selector lets the SAME pixels be driven
+   by a real <input type=checkbox>, so a new switch needs no JS and keeps its
+   semantics for free. Both spellings work; the existing .on emitters are
+   untouched. */
+.sw-input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none;}
+/* The checkbox is position:absolute; without a positioned wrapper its
+   containing block is the viewport, so its static position sits near the top
+   of the page — clicking the switch focuses it and the browser scrolls that
+   into view, jerking the whole viewport up. Anchor it to its own row. */
+:where(label, div, span):has(> .sw-input){position:relative;}
+.switch.on,
+.sw-input:checked + .switch{background:var(--green);}
+.switch.on::after,
+.sw-input:checked + .switch::after{left:21px;}
+.sw-input:focus-visible + .switch{outline:2px solid var(--ink);outline-offset:2px;}
+.sw-input:disabled + .switch{opacity:.5;cursor:not-allowed;}
+/* A 20px track needs more room between rows than the 13px box it replaced. */
+.chat-event-row,.chat-channel-row{margin:8px 0;gap:10px;}
+.switch.switch-sm{width:34px;height:20px;}
+.switch.switch-sm::after{width:15px;height:15px;top:2.5px;left:2.5px;}
+.sw-input:checked + .switch.switch-sm::after{left:16.5px;}
+
+/* ---- checkbox rows inside a .field ----
+   .check-row carried NO rule, so `.field > label` (:304) claimed it: block,
+   600 weight, 13px, 8px bottom margin — which is why "No cap" rendered as a
+   heading welded to its box. Equal specificity class-count, so the qualified
+   selectors are what win. */
+.check-row{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
+  font-weight:500;font-size:12.5px;color:var(--ink-2);}
+.field > label.check-row,
+.field > label.fanout-toggle{display:inline-flex;margin-bottom:0;font-weight:500;}
+
+/* ---- selectable rows ----
+   .qopt generalised: when a choice carries more than a word (a name plus a
+   badge, a path, a model id) the row itself is the target and the whole row
+   shows the selection. Appended here, so it wins the source-order tie against
+   the .grv-source-row / .wiz-proj / .mvx-model base rules those emitters keep
+   for their own layout; their qualified rules (.wiz-proj.missing) still win. */
+.opt-row{display:flex;align-items:center;gap:11px;width:100%;
+  padding:12px 15px;background:var(--panel);border:1.5px solid var(--line);
+  border-radius:13px;cursor:pointer;font-size:13.5px;font-weight:500;
+  color:var(--ink);transition:background .14s,border-color .14s;}
+.opt-row:hover{border-color:var(--ink-3);}
+.opt-row:has(input:checked){background:var(--green-bg);border-color:var(--green);}
+.opt-row:has(input:disabled){opacity:.55;cursor:not-allowed;background:var(--field);}
+.opt-row:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px;}
+.opt-row .opt-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.opt-row .opt-sub{flex:0 0 auto;font:400 11.5px var(--mono);color:var(--ink-3);}
+.wiz-proj-list{gap:8px;}
+
+/* ---- chips ----
+   .chip-select (:1400) already drew the pill and never had a selected state,
+   so the box inside was carrying it alone. */
+.chip-select label{transition:background .14s,border-color .14s;}
+.chip-select label:hover{border-color:var(--ink-3);}
+.chip-select label:has(input:checked){background:var(--green-bg);border-color:var(--green);}
+.chip-select label:has(input:disabled){opacity:.55;cursor:not-allowed;}
+.chip-select input{width:14px;height:14px;border-radius:5px;}
+
+/* ---- confirm/prompt modal internals ---- */
+.confirm-field{margin-bottom:14px;}
+.confirm-field > label{display:block;font-weight:600;font-size:12.5px;margin-bottom:6px;}
+.confirm-field .input{font-size:13.5px;padding:11px 14px;}
+.confirm-field .hint.err{color:var(--red-ink);}
+.confirm-checkbox{display:flex;align-items:flex-start;gap:10px;margin:0 0 4px;padding:12px 14px;
+  background:var(--field);border-radius:12px;font-size:12.5px;color:var(--ink-2);
+  cursor:pointer;line-height:1.45;}
+.confirm-checkbox.hidden{display:none;}
+.confirm-modal .card h2.danger{color:var(--red-ink);}
+
+/* ---- the rest of the UA chrome ---- */
+/* min/max/step are there to validate, not to be clicked */
+input[type="number"]{-moz-appearance:textfield;}
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
+/* the WebKit search "x" is grey-on-grey and off-grid; .field-clear replaces it */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
+.field-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);
+  width:18px;height:18px;border:none;border-radius:50%;background:var(--line-2);
+  color:var(--ink-2);font:600 11px/1 var(--sans);cursor:pointer;display:grid;
+  place-items:center;padding:0;}
+.field-clear:hover{background:var(--ink-3);color:#fff;}
+.field-clear[hidden]{display:none;}
+/* the OS disclosure triangle, everywhere — .advanced (:601) already did it locally */
+.disclosure > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;}
+.disclosure > summary::-webkit-details-marker{display:none;}
+.disclosure > summary::before{content:"";width:0;height:0;flex:0 0 auto;
+  border:4.5px solid transparent;border-left-color:var(--ink-3);
+  transition:transform .16s;transform-origin:2px 50%;}
+.disclosure[open] > summary::before{transform:rotate(90deg);}
+/* Firefox has no ::-webkit-scrollbar, so :899 never reaches it */
+html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
+
 /* ---------- reduced motion for the Running redesign ---------- */
 /* MUST be the LAST block in the file: @media contributes no specificity, so a
    (0,1,0) `animation:none` here would LOSE the source-order tie against any
@@ -2524,5 +3288,499 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
      Tasks 3/6/7/8 and silently rot the day one of them is renamed. The run-graph's
      own reduced-motion block (:1253-1258) is unaffected — it substitutes
      box-shadows, and only its redundant `animation:none` is overridden. */
+  /* Ask Worca: every element inside the dock, same blanket rationale as the
+     .run-shell one below. */
+  .ask-dock *{animation:none !important;}
   .run-shell *{animation:none !important;}
 }
+
+/* ========================================================================== */
+/* v2 node-graph canvas — EVERY geometry number comes from the --gv-* custom   */
+/* properties injectGeometry() writes on .gv-stage at mount, so the CSS box    */
+/* model cannot drift from nodeSize()/portAnchor(). Never hard-code a px       */
+/* geometry value here (test/ui-graph-css.test.mjs enforces it).               */
+/* Scoped under .gv-world because style.css still declares `.run-flow .node`   */
+/* status rules the v2 graph is hosted inside; the resets below neutralise     */
+/* every property they leak. (The UNSCOPED v1 `.node` rules are gone.)         */
+/* ========================================================================== */
+.gv-canvas{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
+  background:#FBFBF9 radial-gradient(circle,var(--line-2) 1.1px,transparent 1.1px);background-size:22px 22px;}
+.gv-stage{position:absolute;inset:0;outline:none;}
+.gv-stage.panning{cursor:grabbing;}
+.gv-stage.space{cursor:grab;}
+.gv-world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform;}
+.gv-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1;}
+/* THE rule that makes a filled ghost blob structurally impossible. */
+.gv-wires path{fill:none;stroke:var(--seq);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+.gv-wires path.loop{stroke:var(--amber);}
+.gv-wires path.sel{stroke:var(--ink);stroke-width:2.5;}
+.gv-wires path.bad{stroke:var(--red);}
+.gv-wires path.ghost{stroke:var(--ink-3);stroke-dasharray:5 4;visibility:hidden;}
+.gv-wires path.ghost.on{visibility:visible;}
+.gv-wires path.ghost.legal{stroke:var(--green);stroke-dasharray:none;}
+.gv-wires path.ghost.illegal{stroke:var(--red);}
+.gv-world .node{position:absolute;left:0;top:0;display:block;padding:0;gap:0;align-items:stretch;z-index:2;
+  width:var(--gv-node-w);background:#fff;border:var(--gv-border) solid var(--line-2);border-radius:16px;
+  box-shadow:var(--shadow-soft);cursor:grab;transition:box-shadow .12s;}
+.gv-world .node::before{content:none;}
+.gv-world .node:hover{box-shadow:var(--shadow);}
+.gv-world .node.sel{outline:2px solid var(--ink);outline-offset:2px;}
+.gv-world .node.dragging{cursor:grabbing;transition:none;}
+.gv-static .node,.gv-static .wbadge{pointer-events:none;}
+.gv-world .nhead{height:var(--gv-head-h);display:flex;align-items:center;gap:8px;padding:0 11px;
+  border-radius:14.5px 14.5px 0 0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.gv-world .nhead svg{width:15px;height:15px;flex:0 0 auto;stroke-width:1.85;}
+.gv-world .nhead .tt{overflow:hidden;text-overflow:ellipsis;}
+.gv-world .h-flow{background:var(--ink);color:#fff;}
+.gv-world .h-violet{background:var(--violet-bg);color:var(--violet-ink);}
+.gv-world .h-blue{background:#DEEFF7;color:#2E6E8E;}
+.gv-world .h-green{background:#E2F3DF;color:#3B7C3B;}
+.gv-world .h-red{background:var(--red-bg);color:var(--red-ink);}
+.gv-world .h-peach{background:#FCEEDA;color:#8A5A16;}
+.gv-world .h-amber{background:var(--amber-bg);color:var(--amber-ink);}
+.gv-world .nbody{padding:var(--gv-pad-t) 0 var(--gv-pad-b);}
+.gv-world .prow{position:relative;height:var(--gv-row-h);display:flex;align-items:center;gap:7px;padding:0 13px;}
+.gv-world .prow.out{justify-content:flex-end;}
+.gv-world .prow .pn{font-size:12.5px;font-weight:500;}
+.gv-world .prow .pt{font:10px/1.3 var(--mono);color:var(--ink-3);}
+.gv-world .prow .pt.cond{color:var(--amber-ink);}
+.gv-world .prow .mla{margin-left:auto;}
+/* The global .chip (:692) is a 7px/13px page pill — ~28px tall inside a 24px
+   --gv-row-h port row, so it spilled over the neighbouring rows of every card
+   with a loop / fan-out input (the "loop" / "⤫N" pills seen on running cards).
+   Same override the palette needs (.ap .chip); metrics mirror the loop wire's
+   .wbadge so "loop" on the port and "2×" on the wire read as one family. */
+.gv-world .prow .chip{flex:0 0 auto;font:700 10px/1.4 var(--mono);padding:1px 7px;border-radius:999px;
+  white-space:nowrap;background:var(--field);color:var(--ink-3);}
+.gv-world .prow .chip.am{background:var(--amber-bg);color:var(--amber-ink);}
+.gv-world .prow .chip.fan{background:var(--blue-bg);color:var(--blue-ink);}
+.gv-world .psep{height:var(--gv-sep-h);position:relative;}
+.gv-world .psep::after{content:"";position:absolute;left:13px;right:13px;top:4px;height:1px;background:var(--line);}
+/* dot centre = row centre: top = (ROW_H − DOT)/2; x overhang = DOT/2 + BORDER,
+   so the anchor lands exactly on node.x / node.x + NODE_W. */
+.gv-world .dot,.gv-world .gdot{position:absolute;top:calc((var(--gv-row-h) - var(--gv-dot)) / 2);
+  width:var(--gv-dot);height:var(--gv-dot);border-radius:50%;}
+.gv-world .prow.in .dot,.gv-world .prow.in .gdot{left:calc(-1 * (var(--gv-dot) / 2 + var(--gv-border)));}
+.gv-world .prow.out .dot{right:calc(-1 * (var(--gv-dot) / 2 + var(--gv-border)));}
+.gv-world .dot.md{background:var(--ink);}
+.gv-world .dot.json{background:var(--blue);}
+.gv-world .dot.void{background:#fff;border:2px solid var(--ink-3);}
+.gv-world .dot.any{background:#fff;border:2px solid var(--ink);}
+.gv-world .dia{position:absolute;top:8px;right:calc(-1 * (4px + var(--gv-border)));width:8px;height:8px;
+  background:var(--amber);border-radius:2px;transform:rotate(45deg);}
+.gv-world .gdot{background:var(--field);border:2px dashed var(--seq);}
+.gv-world .prow.gate .pn,.gv-world .prow.gate .pt{color:var(--ink-3);}
+.gv-world .prow.gate.wired .gdot{background:#fff;border-color:var(--ink);}
+.gv-world .prow.gate.wired .pn{color:var(--ink);}
+.gv-world .prow.drop-ok .dot,.gv-world .prow.drop-ok .gdot{transform:scale(1.35);box-shadow:0 0 0 3px #D8EFD6;border-color:var(--green);}
+.gv-world .prow.drop-bad .dot,.gv-world .prow.drop-bad .gdot{box-shadow:0 0 0 3px var(--red-bg);border-color:var(--red);}
+.gv-world .npip{position:absolute;top:-7px;left:-7px;width:14px;height:14px;border-radius:50%;
+  background:var(--red);border:2px solid #fff;cursor:pointer;z-index:3;}
+.gv-world .wbadge{position:absolute;transform:translate(-50%,-50%);z-index:2;background:var(--amber-bg);
+  color:var(--amber-ink);border:1px solid var(--amber);border-radius:999px;padding:1px 7px;
+  font:10px/1.4 var(--mono);pointer-events:none;}
+/* Run-mode executions footer (P6 fills it through view.setFooter, which is the
+   ONE writer of a run card's height). Heights MUST stay var(--gv-foot-h) /
+   var(--gv-exec-row-h): nodeSize bills FOOT_H for the first footer LINE and
+   EXEC_ROW_H for each extra one (a wrapped fan line, a stacked exec row's extra
+   lines), and test/ui-graph-css.test.mjs asserts style.css uses the FULL --gv-*
+   set injectGeometry writes — dropping them fails that assertion. */
+.gv-world .xfoot{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);
+  border-radius:0 0 14.5px 14.5px;overflow:hidden;background:var(--panel);}
+.gv-world .xfoot>.fan,.gv-world .xfoot>.xtoggle,.gv-world .xfoot>.xresult{height:var(--gv-exec-row-h);
+  display:flex;align-items:center;gap:7px;padding:0 11px;width:100%;box-sizing:border-box;}
+.gv-world .xfoot>:first-child{height:var(--gv-foot-h);}   /* the first line is the tall one nodeSize bills */
+.gv-world .xfoot>.fan.f2{height:calc(var(--gv-foot-h) + var(--gv-exec-row-h));}   /* two wrapped square lines */
+.gv-world .xfoot>.xtoggle{border:none;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;}
+.gv-world .xfoot>.xrow{height:var(--gv-exec-row-h);display:flex;align-items:center;gap:7px;padding:0 11px;}
+/* stacked exec rows: dur · cost on its own right-aligned line (.stack), the
+   label on up to two clamped lines above it (.l2) — run-decor execBandLayout
+   bills exactly these line counts, so the grid rows must stay --gv-exec-row-h */
+.gv-world .xfoot>.xrow.stack{height:calc(2*var(--gv-exec-row-h));display:grid;
+  grid-template-columns:auto minmax(0,1fr);grid-auto-rows:var(--gv-exec-row-h);column-gap:7px;row-gap:0;}
+.gv-world .xfoot>.xrow.stack.l2{height:calc(3*var(--gv-exec-row-h));}
+.gv-world .xfoot>.xrow.stack .led{grid-row:1;grid-column:1;}
+.gv-world .xfoot>.xrow.stack .xl{grid-row:1;grid-column:2;}
+.gv-world .xfoot>.xrow.stack .xr{grid-row:2;grid-column:2;}
+.gv-world .xfoot>.xrow.stack.l2 .xl{grid-row:1 / span 2;white-space:normal;display:-webkit-box;
+  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:var(--gv-exec-row-h);}
+.gv-world .xfoot>.xrow.stack.l2 .xr{grid-row:3;}
+/* fan squares wrap inside a fixed --gv-fan-w column (FAN_PER_ROW per line) so
+   they keep their 7px and the ×N tail keeps its right-hand column */
+.gv-world .xfoot .fsq{display:flex;flex-wrap:wrap;flex:0 0 var(--gv-fan-w);max-width:var(--gv-fan-w);
+  column-gap:3px;row-gap:7px;}
+.gv-world .xfoot .xsq{display:flex;gap:3px;flex:0 0 auto;}
+.gv-world .xfoot .xq,.gv-world .xfoot .sq{width:7px;height:7px;border-radius:2px;background:var(--line-2);flex:0 0 auto;}
+.gv-world .xfoot .xq.is-active,.gv-world .xfoot .sq.on{background:var(--blue);}
+.gv-world .xfoot .xq.is-done{background:var(--green);}
+.gv-world .xfoot .xq.is-error{background:var(--red);}
+.gv-world .xfoot .xsum,.gv-world .xfoot .xl{font-size:11.5px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.gv-world .xfoot .xr,.gv-world .xfoot .fl{margin-left:auto;font:10px/1.4 var(--mono);color:var(--ink-3);white-space:nowrap;flex:0 0 auto;}
+.gv-world .xfoot .chev{width:13px;height:13px;margin-left:auto;flex:0 0 auto;}
+.gv-world .xfoot .led{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:0 0 auto;}
+.gv-world .xfoot .xrow.is-active .led{background:var(--blue);}
+.gv-world .xfoot .xrow.is-done .led{background:var(--green);}
+.gv-world .xfoot .xrow.is-error .led{background:var(--red);}
+.gv-world .ngate{position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;
+  background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber);
+  font:9px/13px var(--sans);text-align:center;z-index:3;}
+.gv-world .nrun{position:absolute;top:-9px;right:16px;display:flex;gap:6px;background:#fff;
+  border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;font:10px/1.4 var(--mono);color:var(--ink-3);}
+.gv-world .wbadge .wfired{margin-left:5px;font-weight:700;}
+.gv-chip{position:absolute;z-index:6;pointer-events:none;background:var(--red-bg);color:var(--red-ink);
+  border:1px solid var(--red);border-radius:8px;padding:4px 8px;font-size:11px;font-weight:600;white-space:nowrap;}
+.gv-chip[hidden]{display:none;}
+@media (prefers-reduced-motion:reduce){.gv-world .node{transition:none;}}
+
+/* ========================================================================== */
+/* v2 composer shell — header bar / canvas / agents card / saved list.        */
+/* The three cards run EDGE TO EDGE (padding:0 + overflow:hidden), the way the */
+/* v1 builder card did: every band below owns its own inset, so a card keeping */
+/* the default .card 24px padding would double it and leave the head bars      */
+/* floating inside a white gutter.                                             */
+/* ========================================================================== */
+.gv-editor,.gv-saved{padding:0;overflow:hidden;}
+/* The composer view stacks its cards directly, with no .col wrapper to space
+   them — so the editor carries the house 22px card gap itself. */
+.gv-editor{margin-bottom:22px;}
+
+/* ---------- header bar ---------- */
+.gv-head{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--line);}
+.gv-head .sp{flex:1 1 auto;}
+/* The pipeline name is a TITLE, not a form field: without `width:auto` it
+   inherits the global `input[type="text"]{width:100%}` rule and eats the bar,
+   pushing the actions into a 90px column where their labels wrap. */
+input.gv-name{width:auto;flex:0 1 340px;min-width:140px;border:1.5px solid transparent;background:var(--field);
+  font:600 15px var(--sans);letter-spacing:-.01em;color:var(--ink);padding:8px 11px;border-radius:11px;
+  text-overflow:ellipsis;transition:background .15s,border-color .15s;}
+input.gv-name:focus{background:#fff;border-color:var(--ink);outline:none;}
+input.gv-name:focus-visible{outline:none;}
+.gv-errchip{background:var(--red-bg);color:var(--red-ink);border:1px solid var(--red);border-radius:999px;
+  padding:4px 11px;font:600 11.5px var(--sans);cursor:pointer;flex:0 0 auto;white-space:nowrap;}
+.gv-errchip:hover{filter:brightness(.97);}
+.gv-errchip[hidden]{display:none;}
+/* Toolbar density: .btn-ghost/.btn-go are PAGE-level pills (13–14px of vertical
+   padding, 20–28px horizontal). In a 52px bar they wrap their own labels, so
+   the bar re-states them at .btn-mini metrics — same skin, toolbar size. */
+.gv-head .btn-ghost,.gv-head .btn-go{padding:8px 15px;font-size:12.5px;white-space:nowrap;}
+.gv-head .btn-go{padding:8px 18px;}
+.gv-head .btn-go:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none;}
+
+/* ---------- canvas + the floating rail (agents + inspector) ---------- */
+/* 340px / 28px are INSET_OPEN / INSET_COLLAPSED in composer.mjs — the editor
+   subtracts them when it decides whether a drop landed on the canvas. Change
+   one and you MUST change the other (scripts/verify-composer-cdp.mjs too). */
+#gv-canvas{height:clamp(486px,63vh,729px);}
+/* A COLUMN, not a row: the tab bar is the panel's own top row when open, and
+   the bare toggle rides at the top of the grey strip when collapsed — never a
+   full-height gutter beside the content. */
+.gv-ins-rail{position:absolute;top:0;right:0;bottom:0;width:340px;z-index:6;background:var(--panel);
+  border-left:1px solid var(--line-2);display:flex;flex-direction:column;overflow:hidden;}
+.gv-ins-rail[data-open="collapsed"]{width:28px;background:var(--field);}
+.gv-ins-rail[data-open="collapsed"] .gv-ins-pane,
+.gv-ins-rail[data-open="collapsed"] .gv-tabs{display:none;}
+/* `data-tab` shows exactly one pane. Direct-child selectors: the panes are the
+   rail's own children, and nothing nested may answer to the same switch. */
+.gv-ins-rail[data-tab="agents"] > .gv-ins-body{display:none;}
+.gv-ins-rail[data-tab="info"] > .gv-agents-pane{display:none;}
+
+.gv-ins-bar{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:5px 9px 5px 0;
+  border-bottom:1px solid var(--line);}
+.gv-ins-rail[data-open="collapsed"] .gv-ins-bar{padding:0;border-bottom:none;}
+.gv-ins-toggle{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;
+  border:none;border-radius:9px;background:transparent;color:var(--ink-3);cursor:pointer;
+  line-height:1;font-family:inherit;transition:background .12s,color .12s;}
+.gv-ins-toggle:hover{background:var(--field);color:var(--ink);}
+/* The icon POINTS where the click sends the rail: right to collapse it into the
+   edge, left to pull it back out. One element, turned by the state — never two
+   glyphs that can disagree with `data-open`. */
+.gv-ins-toggle svg{display:block;flex:0 0 auto;transition:transform .15s;}
+.gv-ins-rail[data-open="collapsed"] .gv-ins-toggle svg{transform:rotate(180deg);}
+.gv-ins-rail[data-open="collapsed"] .gv-ins-toggle{flex-basis:28px;width:28px;border-radius:0;}
+.gv-ins-rail[data-open="collapsed"] .gv-ins-toggle:hover{background:var(--line);color:var(--ink);}
+.gv-ins-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+
+/* Segmented control, not two buttons: one track, the selected half raised. */
+.gv-tabs{flex:1 1 auto;display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--field);}
+.gv-tab{flex:1 1 0;padding:5px 0;border:none;border-radius:8px;background:transparent;color:var(--ink-3);
+  font:600 12px var(--sans);font-family:inherit;cursor:pointer;transition:background .12s,color .12s;}
+.gv-tab:hover{color:var(--ink);}
+.gv-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-soft);}
+.gv-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+
+.gv-ins-pane{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;}
+.gv-ins-body{padding:13px 15px 20px;}
+/* The agents pane does NOT scroll as a whole: the filter is pinned and only the
+   palette below it moves, so the search field can never scroll out of reach. */
+.gv-agents-pane{display:flex;flex-direction:column;overflow:hidden;}
+.gv-pal-head{flex:0 0 auto;padding:10px 13px;border-bottom:1px solid var(--line);}
+
+/* ---------- inspector panels (inspector.mjs markup) ---------- */
+.ins-panel{display:flex;flex-direction:column;}
+.ins-head{padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line);}
+.ins-name{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink);
+  overflow:hidden;text-overflow:ellipsis;}
+.ins-sub{margin-top:4px;font:10.5px/1.4 var(--mono);color:var(--ink-3);overflow-wrap:anywhere;}
+.ins-body-in{display:flex;flex-direction:column;gap:13px;}
+.ins-f{display:flex;flex-direction:column;gap:6px;}
+.ins-label{font-weight:600;font-size:11.5px;color:var(--ink-2);}
+/* Compact restatement of the global field skin — the page metrics (13px/15px of
+   padding, 14px text) are far too heavy for a 308px rail. */
+.ins-panel .ins-select,.ins-panel .ins-number{width:100%;padding:8px 11px;font-size:12.5px;border-radius:10px;
+  background:var(--field);border:1.5px solid transparent;color:var(--ink);font-family:inherit;}
+.ins-panel .ins-select:focus,.ins-panel .ins-number:focus{background:#fff;border-color:var(--ink);outline:none;}
+/* `select{appearance:none}` (global) strips the native arrow and the product
+   draws its own with .select-wrap::after — which the rail has no wrapper for,
+   so the chevron rides in as a background image instead. */
+.ins-panel .ins-select{padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C5C63' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat:no-repeat;background-position:right 11px center;}
+.ins-tog{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;
+  border:1px solid var(--line);border-radius:12px;background:var(--field);}
+.ins-tog input[type="checkbox"]{width:15px;height:15px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--ink);cursor:pointer;}
+.ins-tog input:disabled{cursor:not-allowed;}
+.ins-tog:has(input:disabled){opacity:.55;}
+.ins-panel .ins-f:has(.ins-select:disabled){opacity:.55;}
+.ins-tog-b{display:flex;flex-direction:column;gap:2px;min-width:0;}
+.ins-tog-t{font-weight:600;font-size:12.5px;color:var(--ink);}
+.ins-tog-h{font-size:11px;line-height:1.4;color:var(--ink-3);}
+.ins-blurb{margin:0;font-size:12px;line-height:1.55;color:var(--ink-2);}
+.ins-hint{display:block;font-size:11px;line-height:1.45;color:var(--ink-3);margin-top:-6px;}
+.ins-resolved{font:11px/1.4 var(--mono);color:var(--ink-2);background:var(--field);
+  border-radius:9px;padding:6px 9px;}
+.ins-result{font:11px/1.5 var(--mono);color:var(--ink-3);overflow-wrap:anywhere;}
+.ins-result:empty{display:none;}
+.ins-sep{height:1px;background:var(--line);margin:3px 0 1px;}
+/* Port listing: the same dot vocabulary as the canvas cards, read-only. */
+.ins-zone{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
+  color:var(--ink-3);margin:0 0 7px;}
+.ins-plist{display:flex;flex-direction:column;gap:4px;}
+.ins-plist + .ins-zone{margin-top:13px;}
+.ins-pitem{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;background:var(--field);}
+.ins-pitem .dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;}
+.ins-pitem .dot.md{background:var(--ink);}
+.ins-pitem .dot.json{background:var(--blue);}
+.ins-pitem .dot.any{background:#fff;border:2px solid var(--ink);}
+.ins-pitem .dot.void{background:#fff;border:2px solid var(--ink-3);}
+.ins-pitem .gdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#fff;border:2px dashed var(--seq);}
+.ins-pitem .pn{font-size:12px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ins-pitem .pt{font:10px/1.4 var(--mono);color:var(--ink-3);white-space:nowrap;}
+.ins-pitem .mla{margin-left:auto;}
+.ins-pitem.gate .pn{color:var(--ink-3);}
+.ins-empty .ins-blurb{color:var(--ink-3);text-align:center;padding:22px 6px;}
+
+/* ---------- the rail's agents pane ---------- */
+/* Restored from the retired v1 palette: a bare <input type="search"> matches
+   none of the global field selectors (they list text/number only), which is
+   why it fell back to the UA skin. */
+.pal-filter{display:block;width:100%;-webkit-appearance:none;appearance:none;
+  padding:7px 11px;border:1.5px solid transparent;border-radius:10px;background:var(--field);
+  color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:500;}
+.pal-filter::placeholder{color:var(--ink-3);}
+.pal-filter::-webkit-search-decoration,.pal-filter::-webkit-search-cancel-button{-webkit-appearance:none;}
+.pal-filter:focus{outline:none;background:#fff;border-color:var(--ink);}
+.pal-filter:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.gv-palette{flex:1 1 auto;min-height:0;overflow:auto;padding:13px 13px 18px;}
+.gv-pal-err{padding:22px 4px;text-align:center;font-size:13px;color:var(--ink-3);}
+.gv-retry{border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font-family:inherit;
+  font-weight:600;font-size:12px;padding:5px 13px;border-radius:999px;cursor:pointer;}
+.gv-retry:hover{background:var(--field);}
+
+.pal-group[hidden]{display:none;}
+/* Each domain is its OWN disclosure — there is no chip row above the list, so a
+   group can only be folded away through the header that names it. */
+.pal-grp{display:flex;align-items:center;gap:8px;width:100%;margin:13px 0 8px;padding:4px 6px;
+  border:none;border-radius:9px;background:transparent;color:inherit;font-family:inherit;
+  text-align:left;cursor:pointer;transition:background .12s;}
+.pal-group:first-of-type .pal-grp{margin-top:0;}
+.pal-grp:hover{background:var(--field);}
+.pal-grp:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+.pal-grp .chev{flex:0 0 auto;color:var(--ink-3);transition:transform .15s;}
+.pal-grp[aria-expanded="false"] .chev{transform:rotate(-90deg);}
+.pal-grp .lab{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}
+/* The global .chip is a 7px/13px page pill; a group header needs a count badge. */
+.pal-grp .chip{background:var(--field);color:var(--ink-3);font-weight:700;font-size:10.5px;
+  padding:1px 8px;border-radius:999px;}
+.pal-grp:hover .chip{background:var(--line);}
+.pal-grp .pinned-tag{background:transparent;border:1px solid var(--line-2);}
+.pal-pinned{border-top:1px solid var(--line);margin-top:16px;padding-top:4px;}
+/* One pill per row: the rail is a single column, and a two-up grid at 340px
+   clips the port line every pill's second line carries. */
+.pills{display:flex;flex-direction:column;gap:7px;}
+.pills[hidden]{display:none;}
+.ap{display:flex;align-items:center;gap:9px;min-width:0;border:1.5px solid var(--line-2);border-radius:12px;
+  background:#fff;padding:9px 11px;cursor:grab;text-align:left;font-family:inherit;color:var(--ink);
+  box-shadow:var(--shadow-soft);transition:transform .12s,box-shadow .12s,border-color .12s;user-select:none;}
+.ap:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow);}
+.ap:active:not(:disabled){cursor:grabbing;transform:none;}
+.ap:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ap[hidden]{display:none;}
+.ap:disabled,.ap.dim{opacity:.45;cursor:default;box-shadow:none;}
+.ap .d{width:9px;height:9px;border-radius:50%;background:var(--seq);flex:0 0 auto;}
+.ap .d[data-color="flow"]{background:var(--ink);}
+.ap .b{min-width:0;flex:1 1 auto;}
+.ap .n{display:block;font:600 12.5px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ap .p{display:block;margin-top:2px;font:10.5px/1.4 var(--mono);color:var(--ink-3);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ap .chip{flex:0 0 auto;background:var(--field);color:var(--ink-3);font-weight:700;font-size:10px;padding:1px 7px;}
+.gv-drag-ghost{position:fixed;z-index:99;pointer-events:none;border:1.5px dashed var(--ink-3);border-radius:12px;
+  background:#fff;padding:6px 10px;font:600 12px var(--sans);opacity:.9;box-shadow:var(--shadow);}
+
+/* ---------- the editor's legend footer ---------- */
+/* The key describes the CANVAS, so it belongs to the editor card as a whole —
+   canvas and rail — not to a palette card that no longer exists. */
+.gv-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;
+  padding:9px 18px;border-top:1px solid var(--line);background:var(--panel);}
+.gv-legend{font:11px/1.5 var(--mono);color:var(--ink-3);text-align:right;}
+
+/* ---------- saved pipelines ---------- */
+.saved-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
+  padding:16px 20px;border-bottom:1px solid var(--line);}
+.saved-head b{font-size:15px;font-weight:600;letter-spacing:-.01em;}
+.saved-head .cnt{color:var(--ink-3);font-size:12.5px;font-weight:600;margin-left:9px;}
+.saved-list{display:flex;flex-direction:column;}
+.gv-saved .pl-item{border-bottom:1px solid var(--line);}
+.gv-saved .pl-item:last-child{border-bottom:none;}
+.gv-saved .pl-row{display:flex;align-items:center;gap:14px;padding:12px 20px;transition:background .12s;}
+.gv-saved .pl-row:hover{background:var(--field);}
+/* The thumbnail is a fixed TILE at the head of the row: the SVG carries its own
+   width/height, so a percentage box would leave it stranded in dead space. */
+.gv-saved .pl-thumb{flex:0 0 auto;width:140px;height:54px;display:grid;place-items:center;overflow:hidden;
+  border:1px solid var(--line-2);border-radius:10px;background:#FBFBF9;}
+.gv-saved .pl-thumb svg{display:block;}
+.gv-saved .pl-thumb.is-empty{border-style:dashed;color:var(--ink-3);font:10px/1 var(--mono);
+  letter-spacing:.08em;text-transform:uppercase;}
+.gv-saved .pl-main{flex:1 1 auto;min-width:0;}
+.gv-saved .pl-name{font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.gv-saved .pl-meta{margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
+  text-transform:uppercase;color:var(--ink-3);}
+.gv-saved .pl-open{flex:0 0 auto;padding:7px 15px;font-size:12.5px;}
+.gv-saved .pl-legacy,.gv-saved .pl-origin{flex:0 0 auto;background:var(--field);border:1px solid var(--line);color:var(--ink-3);
+  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;}
+.gv-saved .pl-origin{font-family:var(--mono);letter-spacing:-.01em;}
+.gv-saved .pl-del{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line-2);
+  background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);
+  font-family:inherit;font-size:15px;line-height:1;transition:.12s;}
+.gv-saved .pl-del:hover{border-color:var(--red);color:var(--red-ink);background:var(--red-bg);}
+.gv-saved .pl-del:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.gv-saved .pl-empty{padding:30px 20px;text-align:center;color:var(--ink-3);font-size:13px;}
+.gv-archived{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
+  padding:12px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2);}
+.gv-archived[hidden]{display:none;}
+.gv-archived .pl-chip{border:1px solid var(--line-2);background:var(--field);color:var(--ink-3);
+  border-radius:999px;padding:2px 10px;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:.12s;}
+.gv-archived .pl-chip:hover{border-color:var(--red);color:var(--red-ink);background:var(--red-bg);}
+
+/* ---------- save dialog ---------- */
+.save-dialog{border:none;border-radius:18px;padding:0;box-shadow:var(--shadow);max-width:420px;width:92vw;}
+.save-dialog::backdrop{background:rgba(25,25,27,.34);}
+.save-dialog .sd-body{padding:20px 22px 18px;display:flex;flex-direction:column;gap:14px;}
+.save-dialog .sd-title{margin:0;font-size:16px;font-weight:700;letter-spacing:-.015em;}
+.save-dialog .sd-field{display:flex;flex-direction:column;gap:6px;}
+.save-dialog .sd-field label{font-weight:600;font-size:12.5px;color:var(--ink-2);}
+.save-dialog .sd-field input{width:100%;border:1.5px solid transparent;background:var(--field);
+  border-radius:11px;padding:10px 12px;font:13px var(--sans);color:var(--ink);}
+.save-dialog .sd-field input:focus{outline:none;background:#fff;border-color:var(--ink);}
+.save-dialog .sd-note{margin:0;font-size:12px;line-height:1.5;color:var(--ink-2);
+  background:var(--field);border-radius:11px;padding:9px 12px;}
+.save-dialog .sd-msg{margin:0;font-size:12px;line-height:1.5;color:var(--ink-3);white-space:pre-line;}
+.save-dialog .sd-msg:empty{display:none;}
+.save-dialog .sd-msg.err{color:var(--red-ink);}
+.save-dialog .sd-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:2px;}
+.save-dialog .sd-actions .btn-ghost,.save-dialog .sd-actions .btn-go{padding:9px 18px;font-size:13px;}
+
+@media (prefers-reduced-motion:reduce){
+  .ap:hover:not(:disabled){transform:none;}
+  /* The rotations stay — they are the icons' STATE, not motion; only the tween goes. */
+  .gv-ins-toggle svg,.pal-grp .chev{transition:none;}
+}
+
+/* ========================================================================== */
+/* Run monitor v2 — hosts + decor over the shared renderer (P6).              */
+/* Appended at the END of the file — a deliberate deviation from the spec's   */
+/* "after the v1 run-flow block" (A32): the v1 run-flow rules are 3–4-class    */
+/* selectors that TIE P5's `.gv-world` block on specificity, so only source   */
+/* order can decide; here every rule wins its tie, and the block survives      */
+/* P8's deletion of the v1 block (now done). P5's `.xfoot/.xtoggle/.xrow/      */
+/* .xresult/.ngate/.nrun/.fan/.wfired` STRUCTURE rules are the base and are    */
+/* NOT re-declared — only the states and ornaments P5 lacks live here. The     */
+/* three neutralisers below are inert since P8 deleted the v1 rules they       */
+/* cancelled; they are kept so the v2 box model is stated in ONE place.        */
+/* ========================================================================== */
+/* Host: the v1 flex column becomes an absolute box the .gv-stage (inset:0)
+   fills, so the stage rect === the wrap's padding box. A static host may be
+   widened inline (native horizontal scroll, D5); monitor wraps never scroll. */
+.run-flow.gv-host{position:absolute;top:0;left:0;bottom:0;width:auto;min-width:100%;padding:0;margin:0;display:block;gap:0;}
+.run-flow-wrap.gv-wrap{user-select:none;-webkit-user-select:none;}
+.run-flow-wrap.gv-wrap-monitor{overflow:hidden;height:var(--run-host-h,360px);}
+.rc-detailed .run-flow-wrap.gv-wrap-static{height:300px;overflow-x:auto;overflow-y:hidden;}   /* additive (Running D17) */
+.run-flow.gv-host .gv-world .node{cursor:default;}
+/* v1 descendant rules that out-rank P5's .gv-world block (3-4 classes) — one neutraliser each */
+.run-flow.gv-host .gv-world .xfoot>.fan{flex:none;flex-wrap:nowrap;margin:0;border-top:0;}
+.run-flow.gv-host .gv-world .xfoot .fl{margin-left:auto;font:700 10px/1.4 var(--mono);color:var(--ink-3);}
+.run-flow.gv-host .gv-world .nrun{margin-top:0;}
+/* two states the v1 block has no vocabulary for */
+.run-flow.gv-host .gv-world .node.is-error{border-color:color-mix(in srgb, var(--red) 50%, var(--line-2));box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 13%, transparent),var(--shadow-soft);}
+.run-flow.gv-host .gv-world .node.is-skipped{opacity:.35;border-style:dashed;}
+/* settled pips (v1's .nstat, as pseudo-elements: the view creates no pip DOM) */
+.run-flow.gv-host .gv-world .node.is-done::after,.run-flow.gv-host .gv-world .node.is-paused::after,.run-flow.gv-host .gv-world .node.is-stopped::after,.run-flow.gv-host .gv-world .node.is-error::after{content:"";position:absolute;top:-8px;right:-8px;width:21px;height:21px;border-radius:50%;box-shadow:var(--shadow-soft);z-index:3;color:#fff;font:800 12px/21px var(--sans);text-align:center;}
+.run-flow.gv-host .gv-world .node.is-done::after{content:"✓";background:var(--green);}
+.run-flow.gv-host .gv-world .node.is-paused::after{content:"❚❚";font-size:8px;background:var(--amber);}
+.run-flow.gv-host .gv-world .node.is-stopped::after,.run-flow.gv-host .gv-world .node.is-error::after{content:"×";background:var(--red);}
+.run-flow.gv-host .gv-world .node:has(> .ngate)::after{content:none;}   /* the gate pip owns the corner */
+.run-flow.gv-host .gv-world .ngate{cursor:pointer;animation:dotpulse 1.3s ease-in-out infinite;}
+/* footer leds: paused/stopped colours + the pulse P5 leaves to the run block.
+   `xqPulse` has sqPulse's body; sqPulse itself may attach ONLY to the v1 fan
+   square (test/ui-run-flow-css.test.mjs pins that), so the v2 leds get their own. */
+@keyframes xqPulse{0%,100%{opacity:1;}50%{opacity:.38;}}
+.run-flow.gv-host .gv-world .xfoot .xq.is-paused,.run-flow.gv-host .gv-world .xfoot .xrow.is-paused .led{background:var(--amber);}
+.run-flow.gv-host .gv-world .xfoot .xq.is-stopped,.run-flow.gv-host .gv-world .xfoot .xrow.is-stopped .led{background:var(--red);}
+.run-flow.gv-host .gv-world .xfoot .xq.is-active,.run-flow.gv-host .gv-world .xfoot .xrow.is-active .led{animation:xqPulse 1.5s ease-in-out infinite;}
+.run-flow.gv-host .gv-world .xrow,.run-flow.gv-host .gv-world .xresult a{cursor:pointer;}
+.run-flow.gv-host .gv-world .xrow:hover,.run-flow.gv-host .gv-world .xtoggle:hover{background:var(--field);}
+.run-flow.gv-host .gv-world .xresult a{color:var(--blue-ink);text-decoration:none;}
+.run-flow.gv-host .gv-world .xresult a:hover{text-decoration:underline;}
+/* ants on v2 wires (the v1 rule targets svg.wires; a dashoffset animation needs a dash).
+   The animation lives ON THE PATH — never on :root. The old design animated a
+   registered inherited <length> on :root as a shared clock, which forced a
+   whole-document style recalc every frame on every view (GB-scale renderer
+   memory churn; the 2026-08-31 run-detail freeze). Phase parity across wires —
+   the one thing the :root clock bought — now comes from setWireLive (view.mjs)
+   stamping a negative animation-delay from the shared document timeline. One
+   iteration travels exactly one 6+6 dash period (-12px), so the loop boundary
+   AND any restart when wire-live flips on are seamless; the retired snapping
+   keyframe travelled -18px — 1.5 periods — and visibly jumped every iteration.
+   -12px per .6s keeps 20px/s. */
+@keyframes wireDash{to{stroke-dashoffset:-12px;}}
+.run-flow.gv-host .gv-wires path.wire-live{stroke-dasharray:6 6;stroke-width:2.4;animation:wireDash .6s linear infinite;}
+.rd-graph.settled .run-flow.gv-host .gv-wires path.wire-live{animation:none;stroke-dashoffset:0;}
+/* the composer's ≤N budget pill is REPLACED by the N× delivery count in run mode (§8) */
+.run-flow.gv-host .wbadge{font-size:0;line-height:0;padding:0;border:0;background:none;}
+.run-flow.gv-host .wbadge:not(:has(> .wfired)){display:none;}
+.run-flow.gv-host .wbadge .wfired{display:inline-block;margin:0;padding:1px 7px;border-radius:999px;background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber);font:700 10px/1.4 var(--mono);}
+/* History: node click drives the Logs tab */
+.hd-graph.linked .gv-world .node[data-node-id]{cursor:pointer;}
+/* quiescence banner (.rd-banners / .hd-banners / History Overview note) */
+.run-warn{margin:0;padding:11px 15px;border-radius:12px;background:var(--amber-bg);color:var(--amber-ink);font-size:12.5px;font-weight:600;border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);align-self:stretch;}
+.run-warn[hidden]{display:none;}
+/* engaged-wheel hint chip (D8) */
+.rg-hint{position:absolute;right:12px;bottom:10px;padding:4px 9px;border-radius:999px;background:color-mix(in srgb, var(--ink) 72%, transparent);color:#fff;font-size:10.5px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .15s;z-index:5;}
+.run-flow-wrap.gv-wrap-monitor:hover > .rg-hint{opacity:1;}
+.run-flow-wrap.rg-engaged > .rg-hint{opacity:0;}
+@media (prefers-reduced-motion:reduce){
+  .run-flow.gv-host .gv-wires path.wire-live,.run-flow.gv-host .gv-world .ngate,
+  .run-flow.gv-host .gv-world .xfoot .xq.is-active,.run-flow.gv-host .gv-world .xfoot .xrow.is-active .led{animation:none;}
+  /* the first selector above already stops the path's own dash animation; pin the phase */
+  .run-flow.gv-host .gv-wires path.wire-live{stroke-dashoffset:0;}
+}
+
+/* Legacy (v1) run strip — frozen runs only; no wires, no executions footer. */
+.run-strip{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;}
+.run-strip .rchip{--c:var(--line-2);font-size:11.5px;font-weight:600;color:var(--ink-2);
+  background:var(--field);border:1px solid var(--line);border-left:3px solid var(--c);
+  border-radius:8px;padding:5px 10px;white-space:nowrap;}
+.run-strip .rchip.is-pending{opacity:.5;}
+.run-strip .rchip.is-done{color:var(--green-ink);}
+.run-strip .rchip.is-active{color:var(--c);}
+.run-strip .rchip.is-paused{color:var(--amber-ink);}
+.run-strip .rchip.is-error,.run-strip .rchip.is-stopped{color:var(--red-ink);}