@worca/app 1.2.0 → 1.3.0

package/ui/public/style.css

@@ -8,46 +8,79 @@
 @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
 
 :root{
-  --bg:#F1F1EF;
-  --panel:#FFFFFF;
-  --ink:#19191B;
-  --ink-2:#5C5C63;
-  --ink-3:#9A9AA1;
-  --line:#ECECEA;
-  --line-2:#E3E3E0;
-  --field:#F6F6F4;
-
-  --green-bg:#E2F3DF; --green:#5BAE5B; --green-ink:#2F7A38;
-  --peach-bg:#FCEEDA; --peach:#EFA63C; --peach-ink:#B5751A;
-  --red-bg:#FBE3E0;  --red:#E76A5A;  --red-ink:#C5483A;
-  --blue-bg:#DEEFF7; --blue:#5BA6CC; --blue-ink:#3782A8;
-  --violet-bg:#EAE6F8; --violet:#8C7FD6; --violet-ink:#6353B8;
-  --amber-bg:#FCE8C8; --amber:#E6962A; --amber-ink:#A66510;
-  --seq:#B7B7BC;
+  /* Theme (spec 2026-09-04 §4.1): every colour token is light-dark(<light>, <dark>).
+     The light arm is the "Refined" palette exactly as it always was; the dark arm is
+     the warm-charcoal palette of spec §3. The MODE is the color-scheme property:
+     `light dark` here follows the OS; the two [data-theme] rules after this block
+     force one. The six status bases have equal arms and stay plain (D13).
+     Never restate a token's hex anywhere else — several tests count occurrences. */
+  color-scheme:light dark;
+
+  --bg:light-dark(#F1F1EF,#161614);
+  --canvas-2:light-dark(#FBFBF9,#1B1B19);
+  --panel:light-dark(#FFFFFF,#222220);
+  --surface:light-dark(#FFFFFF,#34342F);
+  --field:light-dark(#F6F6F4,#2C2C29);
+  --field-focus:light-dark(#FFFFFF,#2E2E2B);
+  --ink:light-dark(#19191B,#ECECE8);
+  --ink-2:light-dark(#5C5C63,#B4B4AE);
+  --ink-3:light-dark(#9A9AA1,#9E9E98);
+  --on-ink:light-dark(#FFFFFF,#161614);
+  --on-status:light-dark(#FFFFFF,#161614);
+  --line:light-dark(#ECECEA,#30302D);
+  --line-2:light-dark(#E3E3E0,#494944);
+
+  --green-bg:light-dark(#E2F3DF,#1C2F1D);  --green:#5BAE5B;  --green-ink:light-dark(#2F7A38,#8FD48F);
+  --peach-bg:light-dark(#FCEEDA,#33261A);  --peach:#EFA63C;  --peach-ink:light-dark(#B5751A,#F2B96A);
+  --red-bg:light-dark(#FBE3E0,#34201D);    --red:#E76A5A;    --red-ink:light-dark(#C5483A,#F08C7E);
+  --blue-bg:light-dark(#DEEFF7,#1A2A33);   --blue:#5BA6CC;   --blue-ink:light-dark(#3782A8,#86C4E3);
+  --blue-ink-strong:light-dark(#2B6A8C,#86C4E3);   /* inline link text at small sizes: 5.9:1 on white (--blue-ink is 3.8:1) */
+  --violet-bg:light-dark(#EAE6F8,#262336); --violet:#8C7FD6; --violet-ink:light-dark(#6353B8,#B3A8EE);
+  --amber-bg:light-dark(#FCE8C8,#332715);  --amber:#E6962A;  --amber-ink:light-dark(#A66510,#F0B45A);
+  --seq:light-dark(#B7B7BC,#8E8E92);   /* text role too (.ask-thinking-meter): 4.85:1 on panel */
 
   /* Question/ask amber wash (design §9, C3). --amber-bg is the SOLID amber; this
-     is the pale field it sits on. Task 11 adds --amber-wash-2/--amber-line/
-     --radio-ring beside it. */
-  --amber-wash:#FEF7EC;
-
-  /* Question panel (design §9): the remaining literals in the Running mockup that
-     no existing token already carries. The two hexes §9 also lists as "new" are
-     NOT added — they are already the values of --violet (:24) and --peach-ink
-     (:21); use those tokens.
-     Do NOT name those two hexes here, or anywhere else in this stylesheet: Task 12
-     asserts each appears EXACTLY ONCE, and its regex reads the raw file, so a
-     mention inside a comment counts as a second occurrence and reds the test. */
-  --amber-wash-2:#FEFAF3; --amber-line:#F5D9A8; --radio-ring:#D6D6D2;
+     is the pale field it sits on, with its line and the radio ring. */
+  --amber-wash:light-dark(#FEF7EC,#322816);
+  --amber-wash-2:light-dark(#FEFAF3,#2B2314); --amber-line:light-dark(#F5D9A8,#6A5228); --radio-ring:light-dark(#D6D6D2,#4A4A45);
+  /* Ask Worca run card head wash (mockup 2026-09-06): Worca-authored, same hue as the Auto tag. */
+  --violet-wash:light-dark(#F6F4FC,#211E2E);
+
+  /* Semantic tokens introduced by the theme work (spec §3.2). Each light arm is
+     the literal it replaced, so the light theme did not move. */
+  --on-ink-wash:light-dark(rgba(255,255,255,.18),rgba(22,22,20,.18));
+  --on-ink-wash-2:light-dark(rgba(255,255,255,.22),rgba(22,22,20,.22));
+  --on-ink-code:light-dark(rgba(255,255,255,.14),rgba(22,22,20,.14));
+  --panel-wash:light-dark(rgba(255,255,255,.7),rgba(236,236,232,.12));
+  --knob:light-dark(#FFFFFF,#ECECE8);
+  --scrim:light-dark(rgba(25,25,27,.42),rgba(0,0,0,.62));
+  --scrim-soft:light-dark(rgba(25,25,27,.34),rgba(0,0,0,.55));
+  --selection:light-dark(rgba(25,25,27,.16),rgba(236,236,232,.22));
+  --ava-a:light-dark(#CFCFCA,#4A4A46); --ava-b:light-dark(#A8A8A2,#6A6A64);
+  --h-blue-ink:light-dark(#2E6E8E,#9FD3EE); --h-green-ink:light-dark(#3B7C3B,#9BD69B); --h-peach-ink:light-dark(#8A5A16,#F2C27A);
+  --drop-ring:light-dark(#D8EFD6,#2A4A2C);
+  --trunc-ink:light-dark(#994466,#E39BBE);
+  --chip-ink:light-dark(#555555,#B4B4AE);
 
   --r-card:24px;
   --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);
+  --shadow:0 6px 28px light-dark(rgba(25,25,27,.05),rgba(0,0,0,.45)), 0 1px 2px light-dark(rgba(25,25,27,.04),rgba(0,0,0,.35));
+  --shadow-soft:0 2px 12px light-dark(rgba(25,25,27,.04),rgba(0,0,0,.35));
+  --shadow-pop:0 6px 28px light-dark(rgba(25,25,27,.10),rgba(0,0,0,.55)),0 1px 2px light-dark(rgba(25,25,27,.06),rgba(0,0,0,.4));
+  --shadow-sheet:0 18px 60px light-dark(rgba(25,25,27,.14),rgba(0,0,0,.65)),0 2px 6px light-dark(rgba(25,25,27,.06),rgba(0,0,0,.4));
+  --shadow-hover:0 6px 18px light-dark(rgba(25,25,27,.10),rgba(0,0,0,.55));
+  --shadow-menu:0 12px 34px light-dark(rgba(25,25,27,.12),rgba(0,0,0,.6));
+  --knob-shadow:0 1px 3px light-dark(rgba(0,0,0,.18),rgba(0,0,0,.6));
   --ask-dock-clearance:96px;
 
   --sans:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
   --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 }
+:root[data-theme="light"]{color-scheme:light;}
+:root[data-theme="dark"]{color-scheme:dark;}
+/* Paper is white: a forced dark scheme would print light ink on it. (@media print
+   is a medium query, not a scheme query — D5 holds.) */
+@media print{:root{color-scheme:light;}}
 
 /* ---------- base reset ---------- */
 *{box-sizing:border-box;}
@@ -78,7 +111,7 @@ body{
 .sidebar{
   width:298px;flex:0 0 298px;
   background:var(--panel);
-  padding:26px 18px 22px;
+  padding:26px 18px 10px;
   display:flex;flex-direction:column;
   border-right:1px solid var(--line);
   overflow-y:auto;
@@ -86,51 +119,64 @@ body{
              width .2s cubic-bezier(.65,.02,.28,1);
 }
 .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;}
+.brand .logo{display:block;height:34px;aspect-ratio:512/190;background:var(--ink);
+  -webkit-mask:url(/assets/worca-logo-mask.png) center/contain no-repeat;mask:url(/assets/worca-logo-mask.png) center/contain no-repeat;}
 
-.nav{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;}
+.nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;}
 .nav button{
   display:flex;align-items:center;gap:13px;width:100%;margin:0;
-  padding:11px 13px;border:0;border-radius:13px;
+  padding:8px 13px;border:0;border-radius:13px;
   background:transparent;color:var(--ink-2);
-  font-family:inherit;font-size:inherit;line-height:inherit;font-weight:500;
+  font-family:inherit;font-size:13px;line-height:inherit;font-weight:500;
   text-align:left;cursor:pointer;
   transition:background .15s,color .15s;
 }
 .nav button svg{width:19px;height:19px;flex:0 0 auto;stroke-width:1.9;}
 .nav button:hover{background:var(--field);color:var(--ink);}
-.nav button.active{background:var(--ink);color:#fff;}
-.nav button.active svg{stroke:#fff;}
+.nav button.active{background:var(--ink);color:var(--on-ink);}
+.nav button.active svg{stroke:var(--on-ink);}
 .nav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
-.nav-sect{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
-  color:var(--ink-3);padding:14px 13px 2px;user-select:none;}
-.nav-sep{margin-top:auto;border-top:1px solid var(--line);}
+/* Sentence case, not caps: the markup already ships "Activity"/"Build"/"Manage",
+   so the label is whatever the HTML says. The .11em tracking and the 10.5px size
+   existed to keep ALL-CAPS legible; sentence case needs neither, and at 10.5px a
+   lowercase x-height reads a size smaller than caps did, so the size goes up as
+   the tracking comes down.
+   The padding is deliberately lopsided — 24px above, 5px below. A heading
+   belongs to the items UNDER it, so the big gap has to fall between groups, not
+   between a heading and its own first row. */
+.nav-sect{font-size:11.5px;font-weight:600;letter-spacing:.01em;text-transform:none;
+  color:var(--ink-3);padding:24px 13px 5px;user-select:none;}
+/* Settings is the only row that hangs between two edges — the divider above it
+   and the spend card below — so both gaps are set here and in .side-foot's
+   padding-top, and they must stay equal. 8 + the 2px .nav gap = the 10px the
+   foot pads with. */
+.nav-sep{margin-top:auto;margin-bottom:8px;border-top:1px solid var(--line);}
 /* Primary action: outlined at rest so it doesn't fight the dark current-view
    fill; border thickness is absorbed into padding to keep row height equal. */
 .nav button.nav-cta{border:1.5px solid var(--ink);color:var(--ink);font-weight:600;
-  padding:9.5px 11.5px;}
+  padding:6.5px 11.5px;}
 .nav button.nav-cta:hover{background:var(--field);}
-.nav button.nav-cta.active{background:var(--ink);border-color:var(--ink);color:#fff;}
+.nav button.nav-cta.active{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
 .nav-count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
   display:grid;place-items:center;font-size:11.5px;font-weight:700;}
-.nav-count.n-amber{background:var(--amber);color:#fff;}
+.nav-count.n-amber{background:var(--amber);color:var(--on-status);}
 .nav-count.n-grey{background:var(--field);color:var(--ink-3);}
-.nav button.active .nav-count{background:rgba(255,255,255,.18);color:#fff;}
+.nav button.active .nav-count{background:var(--on-ink-wash);color:var(--on-ink);}
 /* Running split-badges: green = work in flight, amber = paused count. Green is
    applied by app.js ONLY while the count is >0 — at zero the badge falls back to
    n-grey, the inert-inventory treatment History/Projects/Workspaces use, so a
    permanently green pill cannot dilute the green that should catch the eye.
    Both keep their colour on the dark active fill (the generic active rule above
    would wash them into translucent white). */
-.nav-count.n-run{background:var(--green);color:#fff;}
-.nav-count.n-paused{background:var(--amber);color:#fff;position:relative;margin-left:6px;}
+.nav-count.n-run{background:var(--green);color:var(--on-status);}
+.nav-count.n-paused{background:var(--amber);color:var(--on-status);position:relative;margin-left:6px;}
 .nav-count[hidden]{display:none;}   /* author display:grid beats the UA [hidden] rule */
-.nav button.active .nav-count.n-run{background:var(--green);color:#fff;}
-.nav button.active .nav-count.n-paused{background:var(--amber);color:#fff;}
+.nav button.active .nav-count.n-run{background:var(--green);color:var(--on-status);}
+.nav button.active .nav-count.n-paused{background:var(--amber);color:var(--on-status);}
 /* Tiny pause flag pinned at the badge's top-right corner. Scoped under
    .nav-count so it outranks the generic `.nav button svg` sizing rule. */
 .nav-count .pause-flag{position:absolute;top:-5px;right:-6px;width:13px;height:13px;padding:2px;
-  border-radius:50%;background:var(--amber-ink);border:1.5px solid var(--panel);fill:#fff;}
+  border-radius:50%;background:var(--amber-ink);border:1.5px solid var(--panel);fill:var(--on-status);}
 
 /* Parent roll-up "needs you" dot on the Running nav item (sidebar + topnav) */
 .nav-rollup {
@@ -138,7 +184,7 @@ body{
   background: var(--amber); margin-left: 6px; flex: 0 0 auto;
   animation: pulse 1.3s ease-in-out infinite;
 }
-.nav button.active .nav-rollup { background: #fff; }
+.nav button.active .nav-rollup { background: var(--on-ink); }
 
 /* Child pipeline rows nested under Running — tree-connector style (mirrors the
    sub-agents tree: a vertical spine on the left with a branch into each dot). */
@@ -220,10 +266,14 @@ body{
 .side-project .sp-select{padding:11px 38px 11px 13px;font-size:13.5px;font-weight:600;border-radius:12px;}
 .nav-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
   color:var(--ink-3);padding:8px 12px 6px;}
-.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:14px;}
+/* The three numbers are one number: the toggle hangs between the spend card and
+   the rail's bottom edge exactly as Settings hangs between the divider and that
+   same card, so padding-top (above Settings), gap (above the toggle) and
+   .sidebar's padding-bottom (below it) all read 10px. */
+.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:10px;}
 .user{display:flex;align-items:center;gap:11px;padding:6px 8px;}
 .user .ava{width:36px;height:36px;border-radius:50%;flex:0 0 auto;
-  background:linear-gradient(135deg,#cfcfca,#a8a8a2);}
+  background:linear-gradient(135deg,var(--ava-a),var(--ava-b));}
 .user .who{font-weight:600;line-height:1.2;}
 .user .who small{display:block;color:var(--ink-3);font-weight:500;font-size:11.5px;}
 
@@ -242,12 +292,12 @@ body{
    The compact top-nav (<1080px) is a SIBLING above the views inside .main, so a
    plain height:100% here would push the track past the viewport and
    overflow:hidden would clip both screens' bottoms off-screen. */
-body.view-history .main{display:flex;flex-direction:column;overflow:hidden;padding:0;}
+body.view-history .main,body.view-projects .main{display:flex;flex-direction:column;overflow:hidden;padding:0;}
 /* .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 9-button nav from being squeezed once .main is a column. */
-body.view-history .topnav{margin:12px 32px 0;flex:0 0 auto;}
+body.view-history .topnav,body.view-projects .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;}
 .topbar h1{font-size:26px;font-weight:700;letter-spacing:-.025em;margin:0 0 4px;}
@@ -285,7 +335,7 @@ body.view-history .topnav{margin:12px 32px 0;flex:0 0 auto;}
 .n-red{background:var(--red-bg);color:var(--red-ink);}
 .n-blue{background:var(--blue-bg);color:var(--blue-ink);}
 .n-violet{background:var(--violet-bg);color:var(--violet-ink);}
-.n-amber{background:var(--amber);color:#fff;}
+.n-amber{background:var(--amber);color:var(--on-status);}
 .n-grey{background:var(--field);color:var(--ink-3);}
 
 /* ---------- Grid ---------- */
@@ -316,7 +366,7 @@ input[type="text"],input[type="number"],textarea,select{
 .input::placeholder,.textarea::placeholder,
 input[type="text"]::placeholder,input[type="number"]::placeholder,textarea::placeholder{color:var(--ink-3);}
 .input:focus,.select:focus,.textarea:focus,
-input[type="text"]:focus,input[type="number"]:focus,textarea:focus,select:focus{outline:none;background:#fff;border-color:var(--ink);}
+input[type="text"]:focus,input[type="number"]:focus,textarea:focus,select:focus{outline:none;background:var(--field-focus);border-color:var(--ink);}
 .input:focus-visible,.select:focus-visible,.textarea:focus-visible,
 input[type="text"]:focus-visible,input[type="number"]:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 .textarea,textarea{resize:vertical;min-height:120px;line-height:1.5;}
@@ -344,10 +394,10 @@ input[type="file"]{font-size:12.5px;color:var(--ink-3);background:transparent;bo
 .info-tip:hover{border-color:var(--ink);color:var(--ink);}
 .info-tip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 /* The shared floating bubble (created once by app.js, filled per icon). */
-.info-bubble{position:fixed;z-index:70;background:var(--ink);color:#fff;border-radius:10px;
+.info-bubble{position:fixed;z-index:70;background:var(--ink);color:var(--on-ink);border-radius:10px;
   padding:10px 13px;font-size:12px;line-height:1.5;max-width:340px;box-shadow:var(--shadow);
   pointer-events:none;}
-.info-bubble code{font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.14);
+.info-bubble code{font-family:var(--mono);font-size:11px;background:var(--on-ink-code);
   border-radius:4px;padding:1px 4px;}
 .info-bubble .tip-desc{display:block;}
 .info-bubble .tip-line{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;opacity:.75;}
@@ -358,7 +408,7 @@ input[type="file"]{font-size:12.5px;color:var(--ink-3);background:transparent;bo
 .icon-btn{width:48px;flex:0 0 48px;border-radius:var(--r-ctrl);border:1.5px solid var(--line-2);
   background:var(--field);cursor:pointer;display:grid;place-items:center;color:var(--ink-2);
   font-size:18px;transition:background .15s,color .15s;}
-.icon-btn:hover{background:#fff;color:var(--ink);}
+.icon-btn:hover{background:var(--surface);color:var(--ink);}
 
 /* project selector row */
 .project-row{display:flex;gap:11px;align-items:center;}
@@ -385,7 +435,7 @@ input[type="file"]{font-size:12.5px;color:var(--ink-3);background:transparent;bo
 .seg{display:inline-flex;background:var(--field);border-radius:12px;padding:4px;gap:4px;}
 .seg button{font-family:inherit;font-weight:600;font-size:13px;color:var(--ink-2);
   background:transparent;border:none;padding:8px 20px;border-radius:9px;cursor:pointer;transition:.15s;}
-.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-soft);}
+.seg button.on{background:var(--surface);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
@@ -405,7 +455,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* file picker */
 .file{display:flex;align-items:center;gap:13px;background:var(--field);border:1.5px dashed var(--line-2);
   border-radius:var(--r-ctrl);padding:13px 15px;}
-.file .pick{background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:8px 14px;
+.file .pick{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:8px 14px;
   font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--ink);white-space:nowrap;}
 .file .state{color:var(--ink-3);font-size:12.5px;}
 .file-load{display:inline-block;margin-top:8px;}
@@ -458,7 +508,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .ta-hl > textarea.textarea,
 .ta-hl > textarea.textarea:focus{display:block;position:relative;z-index:1;
   background:transparent;color:transparent;caret-color:var(--ink);}
-.ta-hl > textarea.textarea::selection{background:rgba(25,25,27,.16);}
+.ta-hl > textarea.textarea::selection{background:var(--selection);}
 /* font-weight/style/variant/stretch are the ONLY text-layout properties the two
    layers do not already share: Chrome's UA `font: -webkit-small-control`
    shorthand on <textarea> resets them, while this div would inherit them from
@@ -470,7 +520,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .ta-hl-back{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
   line-height:1.5;white-space:pre-wrap;overflow-wrap:break-word;border-color:transparent;
   font-weight:400;font-style:normal;font-variant:normal;font-stretch:normal;}
-.ta-hl:focus-within .ta-hl-back{background:#fff;}
+.ta-hl:focus-within .ta-hl-back{background:var(--field-focus);}
 .mention-ok{color:var(--blue-ink);}
 
 /* High Contrast forces the textarea's transparent text back to CanvasText while
@@ -487,7 +537,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .switch{width:44px;height:26px;border-radius:999px;background:var(--line-2);position:relative;
   cursor:pointer;flex:0 0 auto;transition:background .18s;}
 .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
-  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:left .18s;}
+  background:var(--knob);box-shadow:var(--knob-shadow);transition:left .18s;}
 .switch.on{background:var(--green);}
 .switch.on::after{left:21px;}
 .switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
@@ -495,10 +545,10 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* ---------- buttons ---------- */
 .actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;}
-.btn-ghost{background:#fff;border:1.5px solid var(--line-2);color:var(--ink);font-family:inherit;
+.btn-ghost{background:var(--surface);border:1.5px solid var(--line-2);color:var(--ink);font-family:inherit;
   font-weight:600;font-size:13.5px;padding:13px 20px;border-radius:999px;cursor:pointer;transition:.15s;}
 .btn-ghost:hover{background:var(--field);}
-.btn-go{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border:none;
+.btn-go{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--on-ink);border:none;
   font-family:inherit;font-weight:600;font-size:14px;padding:14px 28px;border-radius:999px;cursor:pointer;
   transition:transform .15s,filter .15s;}
 .btn-go:hover{transform:translateY(-1px);filter:brightness(1.08);}
@@ -506,13 +556,13 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* generic .btn / .btn-primary (question + gate JS, old markup) restyled to pills */
 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
-  background:#fff;border:1.5px solid var(--line-2);color:var(--ink);font-family:inherit;
+  background:var(--surface);border:1.5px solid var(--line-2);color:var(--ink);font-family:inherit;
   font-weight:600;font-size:13.5px;padding:13px 20px;border-radius:999px;cursor:pointer;
   transition:background .15s,filter .15s,transform .15s,border-color .15s;}
 .btn:hover:not(:disabled){background:var(--field);}
 .btn:disabled{opacity:.45;cursor:not-allowed;}
 .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
-.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff;}
+.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
 .btn-primary:hover:not(:disabled){background:var(--ink);transform:translateY(-1px);filter:brightness(1.08);}
 .btn-danger{background:var(--red-bg);border-color:transparent;color:var(--red-ink);}
 .btn-danger:hover:not(:disabled){background:var(--red-bg);filter:brightness(.97);}
@@ -543,7 +593,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .agents-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);}
 .agents-title{font-weight:700;font-size:13px;}
 .agents-wf{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ink-2);
-  background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;
+  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;
   max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .agents-wf:empty{display:none;}
 .agents-summary{color:var(--ink-3);font-size:12px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -555,7 +605,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .agents-actions{display:flex;gap:6px;flex:0 0 auto;}
 .agents-actions .btn-mini{font-size:11.5px;padding:5px 10px;}
 
-.agent-row{border-top:1px solid var(--line);background:#fff;}
+.agent-row{border-top:1px solid var(--line);background:var(--panel);}
 .agent-row:first-child{border-top:none;}
 .agent-row-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;
   background:none;border:none;font-family:inherit;font-size:13px;text-align:left;cursor:pointer;color:inherit;}
@@ -579,7 +629,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .agent-desc{display:block;margin-bottom:9px;color:var(--ink-3);font-size:12px;line-height:1.45;overflow-wrap:anywhere;}
 .agent-row-body .picks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
 .agent-row-body .select-wrap{width:180px;}
-.agent-row-body .select{padding:10px 36px 10px 13px;font-size:13px;border-radius:11px;background:#fff;border-color:var(--line-2);}
+.agent-row-body .select{padding:10px 36px 10px 13px;font-size:13px;border-radius:11px;background:var(--surface);border-color:var(--line-2);}
 .agent-origin{display:block;margin-top:4px;color:var(--ink-3);font-size:11.5px;}
 .fb-field{margin-bottom:10px;}
 .fb-field:last-child{margin-bottom:0;}
@@ -625,10 +675,15 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .advanced[open] .adv-chev{transform:rotate(90deg);}
 .advanced-body{padding-top:12px;}
 .advanced-body .switch-row{margin-top:4px;}
+/* `.switch-row{display:flex}` (:537) beats the UA [hidden] rule (this file's own footgun), so the
+   Auto row and its hint need explicit rules. The .sw-input bridge (:3370) requires `.switch` to be
+   the input's NEXT sibling — the markup keeps them adjacent. */
+#hitl-row[hidden]{display:none;}
+#hitl-row[hidden]+#hitlHint{display:none;}
 
 /* per-step model/effort controls (app.js: .step-config / .step-model / .step-effort / .step-current) */
 .step-config{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;}
-.step-config select{width:auto;font-size:12.5px;padding:8px 30px 8px 11px;border-radius:10px;background:#fff;border-color:var(--line-2);}
+.step-config select{width:auto;font-size:12.5px;padding:8px 30px 8px 11px;border-radius:10px;background:var(--surface);border-color:var(--line-2);}
 .step-config select:disabled{opacity:.6;cursor:not-allowed;}
 .step-current{flex-basis:100%;width:100%;text-align:right;margin-top:2px;color:var(--ink-3);font-size:11.5px;}
 
@@ -639,7 +694,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .btn-clear{background:var(--field);border:none;border-radius:10px;padding:8px 15px;font-family:inherit;
   font-weight:600;font-size:12.5px;cursor:pointer;color:var(--ink-2);transition:.15s;}
 .btn-clear:hover{background:var(--line-2);}
-.log{background:#fff;border:1px solid var(--line);border-radius:16px;min-height:260px;max-height:380px;overflow-y:auto;
+.log{background:var(--panel);border:1px solid var(--line);border-radius:16px;min-height:260px;max-height:380px;overflow-y:auto;
   padding:18px 20px;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--ink-2);
   white-space:pre-wrap;word-break:break-word;}
 .log .t{color:var(--ink-3);}
@@ -730,7 +785,10 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    the global 100%-width select rule; min-width:0 lets bar and pills shrink) */
 .log-filters{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;min-width:0;}
 .log-filters .log-f{font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;
-  background:#fff;color:var(--ink-2);max-width:150px;width:auto;min-width:0;}
+  background:var(--surface);color:var(--ink-2);max-width:150px;width:auto;min-width:0;}
+/* input[type=search] is outside the ::placeholder rule at the top of the file; the UA
+   default grey is 2.6:1 on the dark --surface. Light: #5C5C63 instead of #757575 — both pass. */
+.log-filters .log-search::placeholder{color:var(--ink-2);}
 /* search is the only pill that grows (own max-width beats the pill cap above);
    copy pins to the bar's right edge via the auto margin */
 .log-filters .log-search{flex:1 1 160px;max-width:340px;}
@@ -773,7 +831,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .qblock{padding:13px 0 0;}
 .qtext{font-weight:500;font-size:13px;margin:0 0 9px;display:flex;align-items:flex-start;
   gap:9px;line-height:1.45;}
-.qtext .qn{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--ink);color:#fff;
+.qtext .qn{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--ink);color:var(--on-ink);
   font-family:var(--mono);font-size:10.5px;font-weight:600;display:grid;place-items:center;margin-top:1px;}
 /* the option column and the free-text field line up under the number circle */
 .qopts{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin:0 0 7px;padding-left:28px;}
@@ -834,12 +892,38 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    becomes space-between, and `margin-right:auto` on the counter achieves that
    WITHOUT a second .qpanel-foot rule that the footer test would then contradict. */
 .qanswered{margin-right:auto;font:500 11.5px var(--mono);color:var(--ink-3);}
+
+/* ---------- the `workflow` question arm (spec §7.4): Auto's proposal in a qpanel ---------- */
+.qpanel-workflow .qpanel-head .qcount{font-family:var(--mono);font-weight:600;letter-spacing:.06em;}
+.qbody{display:flex;flex-direction:column;margin-top:12px;}
+.qbody>*{min-width:0;}
+.qnote{margin:12px 0;padding:10px 12px;background:var(--amber-wash-2);border:1px solid var(--amber-line);border-radius:10px;font-size:13px;line-height:1.5;color:var(--ink-2);}
+.qnote b{font-weight:600;color:var(--ink);}
+/* The revise echo already carries its own 12px bottom margin — one child-selector
+   deeper than the generic name margin below, so it wins wherever both match. */
+.ask-wfcard-body>.qnote+.ask-wfcard-namewrap{margin-top:0;}
+.qtune{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:16px;font-size:13px;}
+.qtune th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:400;height:32px;padding:0 8px;border-bottom:1px solid var(--line);white-space:nowrap;}
+.qtune td{height:44px;padding:0 8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.qtune th:first-child,.qtune td:first-child{padding-left:0;}
+.qtune td:first-child{font-weight:500;color:var(--ink);}
+.qtune .select-wrap{width:150px;max-width:100%;}
+.qtune .select-wrap select{height:34px;border-radius:10px;}
+.qtune-sw{display:inline-block;position:relative;vertical-align:middle;}
+/* (no disabled rule here: `.sw-input:disabled + .switch{opacity:.5;cursor:not-allowed}` already exists) */
+.qfree-area{margin-top:12px;min-height:64px;resize:vertical;line-height:1.5;}
+.qfree-area[hidden]{display:none;}
+.qfree.qfree-err{border-color:var(--red);}
+.qcancel{margin-right:auto;height:36px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:var(--red-ink);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;}
+.qcancel:hover{background:var(--red-bg);}
+.qcancel:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.qopen[hidden]{display:none;}
 .rd-questions .qanswered{font-size:12.5px;}
 
 /* ---------- Gate (cycle gate) ---------- */
 .gate-intro{font-size:13px;color:var(--ink-2);margin:0 0 14px;line-height:1.5;}
 .issues{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px;}
-.issue{background:#fff;border:1px solid var(--line);border-left-width:3px;border-radius:11px;padding:12px 14px;}
+.issue{background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:11px;padding:12px 14px;}
 .issue.sev-critical{border-left-color:var(--red);}
 .issue.sev-major{border-left-color:var(--peach);}
 .issue.sev-minor{border-left-color:var(--amber);}
@@ -891,7 +975,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .retained-banner ul{margin:9px 0;padding-left:20px;}
 .retained-banner li+li{margin-top:8px;}
 .retained-banner code{display:block;margin-top:4px;padding:7px 9px;border-radius:8px;
-  background:rgba(255,255,255,.7);color:var(--ink);font-family:var(--mono);font-size:11.5px;
+  background:var(--panel-wash);color:var(--ink);font-family:var(--mono);font-size:11.5px;
   white-space:pre-wrap;word-break:break-all;}
 .retained-banner a{color:var(--amber-ink);font-weight:700;}
 .hist-empty{color:var(--ink-3);font-size:13px;padding:22px 4px;text-align:center;}
@@ -908,7 +992,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
   font-size:12.5px;color:var(--ink-2);cursor:pointer;white-space:nowrap;
   transition:border-color .12s,color .12s,background .12s;}
 .hist-pill:hover{border-color:var(--ink-3);color:var(--ink);}
-.hist-pill.active{background:var(--ink);border-color:var(--ink);color:#fff;}
+.hist-pill.active{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
 .hist-pill .pill-count{font-size:11px;font-weight:600;opacity:.7;}
 
 /* ---------- History per-project sticky sections (All Projects view) ---------- */
@@ -919,7 +1003,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hist-group-head .pill-count{font-size:11.5px;font-weight:600;color:var(--ink-3);}
 
 /* ---------- Saved-markdown viewer ---------- */
-.viewer{font-family:var(--mono);font-size:12.5px;line-height:1.7;background:#FBFBF9;border:1px solid var(--line);
+.viewer{font-family:var(--mono);font-size:12.5px;line-height:1.7;background:var(--canvas-2);border:1px solid var(--line);
   border-radius:16px;padding:18px 20px;max-height:480px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0;}
 
 /* ---------- scrollbars ---------- */
@@ -955,7 +1039,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    of the (locked) Refined stylesheet: the viewer modal + the responsive
    top-nav shown only when the sidebar is hidden (<1080px). */
 .viewer-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
-  padding:24px;background:rgba(25,25,27,.42);}
+  padding:24px;background:var(--scrim);}
 /* Confirm dialog must stack ABOVE the plugin/wizard modal (equal .viewer-modal z-index,
    but #confirm-modal precedes #plugin-modal in the DOM). */
 #confirm-modal.viewer-modal{z-index:60;}
@@ -986,7 +1070,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
     background:transparent;color:var(--ink-2);font-family:inherit;font-weight:600;font-size:13px;
     cursor:pointer;transition:.15s;}
   .topnav button:hover{background:var(--field);color:var(--ink);}
-  .topnav button.active{background:var(--ink);color:#fff;}
+  .topnav button.active{background:var(--ink);color:var(--on-ink);}
   .topnav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
   .topnav-sep{flex:0 0 1px;background:var(--line-2);margin:6px 2px;}
 }
@@ -1029,6 +1113,12 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    the bare `.diff-add`/`.diff-del` rules further down. */
 .hist-diff{display:inline-flex;gap:6px;font-family:var(--mono);font-size:12px;font-weight:700;}
 
+/* Spec §7.5: the "Auto → ‹workflow name›" badge, in all three headers. */
+.auto-badge{display:inline-flex;align-items:center;max-width:220px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  background:var(--violet-bg);color:var(--violet-ink);flex:0 0 auto;}
+.auto-badge[hidden]{display:none;}
+.auto-badge.is-deciding{background:var(--amber-bg);color:var(--amber-ink);}
+.rc-acts .auto-badge{max-width:160px;}
 .hist-merge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;white-space:nowrap;}
 .hist-merge[hidden]{display:none;}
 .hist-merge.ok{background:var(--green-bg);color:var(--green-ink);}
@@ -1043,7 +1133,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    UA anchor — browser blue, underlined — and MERGED would lose its grey. */
 .hist-pr-link,.hd-pr-link{font-size:12px;font-weight:600;color:var(--green-ink);text-decoration:none;white-space:nowrap;}
 .hist-pr-link:hover,.hd-pr-link:hover{text-decoration:underline;}
-.hist-pr-link.merged,.hd-pr-link.merged{color:var(--muted, #888);}
+.hist-pr-link.merged,.hd-pr-link.merged{color:var(--ink-3);}
 
 /* Discard-worktree button. The class moved from the retired card accordion to the
    detail screen's banner block; nothing about it was card-position-dependent. */
@@ -1054,8 +1144,8 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hist-discard[hidden]{display:none;}
 /* This block is SHARED with the Plugins view's `.pl-remove`; the retired
    `.hist-delete` arms were removed from the selector lists, the block stays. */
-.pl-remove{display:inline-flex;align-items:center;gap:6px;background:var(--red-ink,#d9534f);
-  border:1.5px solid var(--red-ink,#d9534f);color:#fff;font-family:inherit;font-weight:600;
+.pl-remove{display:inline-flex;align-items:center;gap:6px;background:var(--red-ink);
+  border:1.5px solid var(--red-ink);color:var(--on-status);font-family:inherit;font-weight:600;
   font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;}
 .pl-remove:hover:not(:disabled){filter:brightness(0.95);}
 .pl-remove:disabled{opacity:.6;cursor:default;}
@@ -1073,7 +1163,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .export-done.hidden{display:none;}
 .export-done-head{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:12px;}
 .export-done-check{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
-  background:var(--green-bg,#e6f4ea);color:var(--green-ink,#1e6b3a);font-weight:700;font-size:14px;}
+  background:var(--green-bg);color:var(--green-ink);font-weight:700;font-size:14px;}
 .export-done-lines{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:12.5px;}
 .export-done-lines dt{color:var(--ink-3);font-weight:600;}
 .export-done-lines dd{margin:0;color:var(--ink);word-break:break-all;}
@@ -1087,20 +1177,21 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .export-row{padding:4px 2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
 .export-conflict-row{flex-direction:column;align-items:flex-start;}
 .export-tag{display:inline-block;min-width:58px;text-align:center;border-radius:6px;padding:1px 6px;font-weight:700;font-size:11px;}
-.export-create{background:var(--green-bg,#e6f7ec);color:var(--green-ink,#137a3b);}
+.export-create{background:var(--green-bg);color:var(--green-ink);}
 .export-update{background:var(--field);color:var(--ink);}
 .export-no-op{background:var(--field);color:var(--ink-3);}
-.export-warn,.export-conflict{background:var(--red-bg,#fde8e8);color:var(--red-ink,#b42323);}
+.export-warn,.export-conflict{background:var(--red-bg);color:var(--red-ink);}
 .export-orphan{background:var(--field);color:var(--ink-3);}
 .export-choices{display:flex;gap:12px;margin:4px 0 2px 64px;}
-.export-choice{font-size:12.5px;color:var(--ink-2);cursor:pointer;}
+.export-choice{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer;}
+.export-choice input[type="radio"]{margin:0;}
 /* Per-agent fan-out toggle in the New Pipeline rows. */
 .fanout-toggle {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: var(--muted, #888);
+  color: var(--ink-3);
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -1137,16 +1228,40 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .ws-head:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
 .ws-h-meta{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
 .ws-h-meta .ws-name{font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink);}
-.ws-h-meta .ws-projects{display:block;width:100%;font-family:var(--mono);font-size:12px;color:var(--ink-3);}
+.ws-h-meta .ws-projects{display:block;width:100%;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ws-projects .mono{font-size:12px;color:var(--ink-2);}
+.ws-projects .tm-home-mark{margin-right:5px;}
+.ws-sum-warn{color:var(--amber-ink);} .ws-sum-bad{color:var(--red-ink);}
+.tm-icon{width:14px;height:14px;color:var(--ink-2);flex:0 0 auto;}
 .ws-stale[hidden]{display:none;}
 .ws-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
 .ws-actions .btn-ghost{padding:7px 12px;font-size:12px;}
-.ws-card .chev{width:15px;height:15px;flex:0 0 auto;color:var(--ink-3);}
 .ws-detail{padding:0 20px 18px;border-top:1px dashed var(--line-2);}
 .ws-detail[hidden]{display:none;}
-.ws-desc-view{margin-top:14px;}
+.ws-desc{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
+/* The wizard's project rows show each path as a sub-line (new on this branch): --ink-2 clears
+   4.5:1 on white, the generic .opt-sub --ink-3 does not. */
+.wiz-proj.opt-row .opt-sub{color:var(--ink-2);}   /* three classes: outranks the generic .opt-row .opt-sub declared later */
+.ws-desc-view{margin-top:8px;}
 .ws-desc-edit[hidden]{display:none;}
-.ws-delete{display:inline-flex;align-items:center;gap:6px;background:var(--red-ink,#d9534f);border:1.5px solid var(--red-ink,#d9534f);color:#fff;font-family:inherit;font-weight:600;font-size:12px;padding:7px 12px;border-radius:8px;cursor:pointer;}
+.ws-desc-edit .md-tabs{margin-bottom:8px;}
+.ws-desc-preview[hidden]{display:none;}
+/* A markdown-by-contract body (workspace description, its edit preview, a task-source
+   body) keeps the .viewer frame but drops the pre look once it actually rendered:
+   sans type, normal flow (marked emits its own breaks) and no stray outer margins. */
+.viewer.artifact-markdown,.sp-prev-body.artifact-markdown{white-space:normal;font-family:var(--sans);font-size:13px;line-height:1.55;}
+.artifact-markdown>:first-child{margin-top:0;}
+.artifact-markdown>:last-child{margin-bottom:0;}
+.artifact-markdown :is(h1,h2,h3){font-size:14px;font-weight:600;}
+.artifact-markdown h1{font-size:15px;}
+.artifact-markdown :is(ul,ol){padding-left:22px;margin:6px 0;}
+.artifact-markdown li{margin:2px 0;}
+.artifact-markdown p{margin:6px 0;}
+.md-preview{min-height:72px;}
+.md-preview:empty::before{content:'Nothing to preview yet';color:var(--ink-2);}
+#wiz-desc-tabs{margin-left:auto;}
+#wiz-desc-preview[hidden]{display:none;}
+.ws-delete{display:inline-flex;align-items:center;gap:6px;background:var(--red-ink);border:1.5px solid var(--red-ink);color:var(--on-status);font-family:inherit;font-weight:600;font-size:12px;padding:7px 12px;border-radius:8px;cursor:pointer;}
 .ws-delete:hover:not(:disabled){filter:brightness(0.95);}
 .ws-delete:disabled{opacity:.6;cursor:default;}
 
@@ -1154,7 +1269,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .wiz-step.hidden{display:none;}
 .wiz-proj-list{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line-2);border-radius:var(--r-ctrl);padding:6px;background:var(--field);}
 .wiz-proj{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;cursor:pointer;font-size:13.5px;color:var(--ink);}
-.wiz-proj:hover{background:#fff;}
+.wiz-proj:hover{background:var(--surface);}
 .wiz-proj input{margin:0;cursor:pointer;}
 .wiz-proj.missing{color:var(--ink-3);cursor:not-allowed;}
 
@@ -1177,11 +1292,11 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* Phase track: graph → investigate → synthesize. */
 .wiz-phase-track{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 14px;}
 .wiz-phase-track [data-phase]{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--field);border:1px solid var(--line);border-radius:999px;padding:6px 14px;}
-.wiz-phase-track [data-phase].active{color:#fff;background:var(--ink);border-color:var(--ink);}
+.wiz-phase-track [data-phase].active{color:var(--on-ink);background:var(--ink);border-color:var(--ink);}
 
 /* History pill "WS" badge for workspace runs. */
 .hist-pill.ws::before{content:'WS';font-size:9px;font-weight:800;letter-spacing:.06em;background:var(--violet-bg);color:var(--violet-ink);border-radius:5px;padding:2px 5px;margin-right:2px;}
-.hist-pill.ws.active::before{background:rgba(255,255,255,.22);color:#fff;}
+.hist-pill.ws.active::before{background:var(--on-ink-wash-2);color:var(--on-ink);}
 
 /* ========================================================================== */
 /* Run-flow — the SHARED decor the v2 graph renderer sits inside. The .run-flow */
@@ -1190,14 +1305,14 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* 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-wrap{position:relative;margin:0 0 18px;border-radius:18px;border:1px solid var(--line);overflow-x:auto;overflow-y:hidden;background-color:var(--canvas-2);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%;}
 /* 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;}
-.run-flow .nstat.done{background:var(--green);} .run-flow .nstat.done svg{stroke:#fff;stroke-width:3;}
-.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;}
+.run-flow .nstat.done{background:var(--green);} .run-flow .nstat.done svg{stroke:var(--on-status);stroke-width:3;}
+.run-flow .nstat.paused{background:var(--amber);} .run-flow .nstat.paused svg{fill:var(--on-status);}
+.run-flow .nstat.stopped{background:var(--red);} .run-flow .nstat.stopped svg{stroke:var(--on-status);stroke-width:3;}
 
 .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-paused{border-color:color-mix(in srgb, var(--amber) 55%, var(--line-2));animation:nodeGlowAmber 2.2s ease-in-out infinite;}
@@ -1283,8 +1398,8 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
   text-transform:uppercase; letter-spacing:.04em; opacity:.6; line-height:20px; }
 .agent-chips { display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; }
 .agent-chip { font-size:11px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; }
-.agent-chip.prod { background:#E2F3DF; }
-.agent-chip.cons { background:#DEEFF7; }
+.agent-chip.prod { background:var(--green-bg); }
+.agent-chip.cons { background:var(--blue-bg); }
 .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); }
@@ -1313,7 +1428,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* (2) space between the header pills and the expanded markdown body */
 .agent-detail { margin-top:14px; }
-.agent-origin.origin-user { background:#EAE6F8; }
+.agent-origin.origin-user { background:var(--violet-bg); }
 .agents-group-label { font-size:12px; font-weight:700; opacity:.65; margin:18px 0 8px; text-transform:uppercase; letter-spacing:.06em; }
 .agent-actions { display:flex; gap:8px; }
 .chip-select { display:flex; flex-wrap:wrap; gap:8px; }
@@ -1324,7 +1439,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    .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. */
+   A keyed row is the control (see the shell block below); a keyless row keeps the default cursor. */
 #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;}
@@ -1340,21 +1455,47 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
   font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
   color:var(--ink-3);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;
 }
-/* Neutral bin button — same size/shape as .pl-del but stays neutral on hover (no red, ever). */
-.proj-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:center;
-}
-.proj-del:hover{border-color:var(--ink-3);color:var(--ink);background:var(--field);}
-.proj-del:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
-.proj-del svg{width:16px;height:16px;stroke-width:1.9;}
+/* ---------- Projects two-screen shell (twin of the History track) ---------- */
+.view[data-view="projects"]{flex:1 1 auto;min-height:0;padding:0;position:relative;}
+.proj-shell{position:relative;height:100%;overflow:hidden;}
+/* NO top padding on the scroller: the detail's sticky .pd-tabs must pin flush, as .hd-tabs does. */
+.proj-screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:0 32px 40px;
+  transition:transform .46s cubic-bezier(.65,.02,.28,1);}
+.proj-screen-list .topbar{padding-top:26px;}
+.proj-screen-list{transform:translateX(0);}
+.proj-screen-detail{transform:translateX(100%);padding:0;background:var(--bg);}
+.proj-shell.detail-open .proj-screen-list{transform:translateX(-100%);}
+.proj-shell.detail-open .proj-screen-detail{transform:translateX(0);}
+.proj-shell.no-anim .proj-screen{transition:none;}
+/* A keyed row IS the control (role=button): pointer + hover tint, the .hist-head idiom. The
+   keyless row keeps #projects-list .pl-row's default cursor. */
+#projects-list .pl-row[role="button"]{cursor:pointer;transition:background .12s;}
+#projects-list .pl-row[role="button"]:hover{background:var(--field);}
+#projects-list .pl-row[role="button"]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+.proj-open{flex:0 0 auto;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;}
+.proj-open:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
+/* Project page header: the card, title and Back ride the hd- rules; these are its own lines. */
+.pd-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;margin-top:10px;
+  font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere;}
+.pd-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;}
+.pd-spacer{flex:1 1 24px;}
+.pd-error{margin-top:12px;color:var(--red-ink);font-size:12.5px;}
+.pd-error[hidden]{display:none;}
+/* Overview: a path is long with no natural break, so its value wraps at body size; the LAST RUN
+   card is a real <button> — reset the UA look so it reads like its siblings. */
+.pd-ov-value.pd-ov-wrap{font-size:13px;overflow-wrap:anywhere;}
+.pd-ov-missing{color:var(--red-ink);}
+button.pd-ov-card{text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;}
+button.pd-ov-card:hover{border-color:var(--ink-3);}
+/* Memory tab: the same grid Settings → Memory paints (.mem-host); its message line sits above. */
+.pd-sec-memory .form-msg{margin:0 0 10px;}
 
 /* Guardrails row editors (used by the Guardrails view) */
 .gr-list{display:flex;flex-direction:column;margin-bottom:8px;}
 .gr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;}
 .gr-row:last-child{border-bottom:none;}
-.gr-rm{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);font-size:11px;transition:.12s;}
+.gr-rm{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-3);font-size:11px;transition:.12s;}
 .gr-rm:hover{color:var(--red-ink);border-color:var(--red);background:var(--red-bg);}
 .gr-empty{color:var(--ink-3);font-size:12px;padding:6px 0;}
 
@@ -1366,30 +1507,30 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* ── domain tag: palette sections + filter chips, workflow badge + filter ── */
 .pal-chips{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin-bottom:8px;}
-.pal-chip{font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid var(--line,#d8d8de);background:var(--card,#fff);cursor:pointer;text-transform:capitalize;}
+.pal-chip{font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel);cursor:pointer;text-transform:capitalize;}
 .pal-chip.off{opacity:.45;text-decoration:line-through;}
 .pal-section{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
 .pal-section .pal-head{grid-column:1/-1;}
 .pal-section.collapsed .agent-pill,.pal-section.collapsed .pal-head{display:none;}
-.pal-head{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#8a8a92);margin:6px 0 4px;}
-.pl-domain{font-size:10px;padding:1px 6px;border-radius:999px;background:var(--chip,#eee);color:var(--muted,#777);text-transform:capitalize;vertical-align:middle;}
+.pal-head{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 4px;}
+.pl-domain{font-size:10px;padding:1px 6px;border-radius:999px;background:var(--field);color:var(--ink-3);text-transform:capitalize;vertical-align:middle;}
 .wf-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
 
 /* Run Results view (Layer 1 mechanical + Layer 2 overview) */
 .results-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
-.results-chip{font-size:12px;background:var(--chip-bg,#f1f1f4);border:1px solid var(--line);border-radius:999px;padding:2px 10px;}
-.results-clean{color:var(--green-ink,#1a7f37);font-size:13px;padding:6px 0;}
+.results-chip{font-size:12px;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:2px 10px;}
+.results-clean{color:var(--green-ink);font-size:13px;padding:6px 0;}
 .results-files{margin-top:10px;}
 .results-files-h{font-weight:700;font-size:13px;margin-bottom:4px;}
 .results-files ul{list-style:none;padding:0;margin:0;font-family:ui-monospace,monospace;font-size:12px;}
 .results-files li{padding:2px 0;}
-.results-overview-btn{margin:6px 0;font-size:12px;padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;}
+.results-overview-btn{margin:6px 0;font-size:12px;padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;}
 .results-overview-btn:disabled{opacity:.6;cursor:default;}
-.results-narrative{font-size:13px;line-height:1.5;background:var(--chip-bg,#f7f7fa);border-radius:10px;padding:10px 12px;margin:8px 0;}
+.results-narrative{font-size:13px;line-height:1.5;background:var(--field);border-radius:10px;padding:10px 12px;margin:8px 0;}
 .issue-origin{font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:999px;font-weight:700;}
 .origin-agent{background:var(--blue-bg);color:var(--blue-ink);}
-.origin-review{background:var(--chip-bg,#eee);color:#555;}
-.results-trunc{font-size:11px;color:#946;margin-top:6px;}
+.origin-review{background:var(--field);color:var(--chip-ink);}
+.results-trunc{font-size:11px;color:var(--trunc-ink);margin-top:6px;}
 
 /* ---- Plugins view ---- */
 /* Available/Marketplaces render as one wrapper div inside the .run-list, so the
@@ -1414,8 +1555,8 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .pl-consent-h{font-weight:700;font-size:12.5px;margin:10px 0 4px;}
 .pl-consent-row{font-size:12.5px;padding:2px 0;}
 .pl-secret{display:inline-flex;margin-left:8px;background:var(--red-bg);color:var(--red-ink);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;}
-.pl-setup-cmd{background:var(--chip-bg,#f7f7fa);border-radius:8px;padding:4px 8px;margin-top:3px;}
-.pl-diffstat{background:var(--chip-bg,#f7f7fa);border-radius:10px;padding:10px 12px;font-size:12px;overflow-x:auto;max-height:220px;}
+.pl-setup-cmd{background:var(--field);border-radius:8px;padding:4px 8px;margin-top:3px;}
+.pl-diffstat{background:var(--field);border-radius:10px;padding:10px 12px;font-size:12px;overflow-x:auto;max-height:220px;}
 .pl-commit{font-size:12px;padding:2px 0;}
 .pl-doc-row{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:12.5px;}
 .pl-doc-row .hint{margin-top:0;}
@@ -1440,10 +1581,10 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .sp-results{margin-top:8px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:12px;}
 .sp-row{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px;}
 .sp-row:last-child{border-bottom:none;}
-.sp-row:hover{background:var(--chip-bg,#f7f7fa);}
+.sp-row:hover{background:var(--field);}
 .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-label{background:var(--field);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. */
@@ -1469,7 +1610,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .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;}
+.src-badge{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;background:var(--field);border-radius:999px;padding:2px 10px;}
 .src-badge-plugin{font-weight:700;}
 .src-report-wrap{display:inline-flex;gap:8px;align-items:center;margin-left:10px;}
 
@@ -1494,8 +1635,8 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .grv-editor-actions{justify-content:flex-end;margin-top:14px;}
 /* ---- Guardrail wizard (Step 1 + read-only view) ---- */
 .grv-wizard .grv-source-list{display:grid;gap:8px;margin:12px 0;max-height:46vh;overflow-y:auto;}
-.grv-source-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line,#d8d8de);border-radius:10px;cursor:pointer;}
-.grv-source-row:hover{background:var(--chip-bg,#f7f7fa);}
+.grv-source-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;}
+.grv-source-row:hover{background:var(--field);}
 .grv-source-name{flex:1 1 auto;font-size:14px;}
 .grv-wizard-actions{justify-content:flex-end;margin-top:14px;}
 .grv-editor .switch.disabled{opacity:.5;pointer-events:none;}
@@ -1531,6 +1672,9 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .stat-meter{display:block;height:6px;border-radius:999px;background:var(--blue-bg);margin-top:10px;overflow:hidden;}
 .stat-meter .stat-meter-fill{display:block;height:100%;border-radius:999px;background:var(--blue-ink);}
 .charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
+/* Team metrics stacks two charts-grids (weekly charts, then the breakdown tables);
+   without this the rows touch while every other gap is 14px. */
+.charts-grid + .charts-grid{margin-top:14px;}
 .chart-card{padding:20px 22px;}
 .chart-fig{margin:0;}
 .chart-svg{display:block;width:100%;height:auto;}
@@ -1543,7 +1687,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* hit rect paints above the bars (DOM order) — hover must stay translucent */
 .ch-hit:hover{fill:var(--ink);fill-opacity:.05;}
 .ch-hit:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
-.chart-tip{position:fixed;z-index:70;background:var(--ink);color:#fff;border-radius:10px;
+.chart-tip{position:fixed;z-index:70;background:var(--ink);color:var(--on-ink);border-radius:10px;
   padding:8px 11px;font-size:12px;line-height:1.45;pointer-events:none;box-shadow:var(--shadow);}
 .chart-tip .tip-head{font-weight:600;}
 .chart-tip .tip-val{font-family:var(--mono);}
@@ -1551,6 +1695,163 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
   clip:rect(0 0 0 0);white-space:nowrap;border:0;}
 
+/* ---------- Team metrics page (boards 1–3) ---------- */
+/* style.css has no global [hidden]{display:none} (see its own notes at :324 / :677): an author
+   display:flex beats the UA [hidden] rule, so every hidden-toggled flex container needs this.
+   .tm-enable-err is a .hint, and .hint{display:block} beats the UA [hidden] rule too, so without
+   it the empty error line is always visible in the Enable dialog. */
+#tm-custom[hidden],#tm-sync[hidden],#tm-filters[hidden],.ws-home[hidden],#stats-tm-hint[hidden],
+.tm-enable-err[hidden],#wiz-metrics-pre[hidden]{display:none;}
+.tm-sync-error{white-space:pre-wrap;margin:0;}
+section[data-view="team-metrics"] .topbar{align-items:flex-start;}
+.sync-chip{margin-left:auto;display:flex;align-items:center;}
+.sync-chip-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 12px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);font-size:12.5px;max-width:520px;}
+.sync-chip-inner .dot.green{background:var(--green);} .sync-chip-inner .dot.amber{background:var(--amber);} .sync-chip-inner .dot.red{background:var(--red);}
+.sync-chip-inner .tm-sync-error{flex-basis:100%;color:var(--red-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.tm-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;}
+.tm-scope-wrap .select{min-width:240px;}
+.tm-group{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin-left:auto;}
+.tm-custom{display:flex;align-items:center;gap:6px;} .tm-custom .input{width:150px;}
+.tm-active-filters{display:flex;gap:8px;margin:-8px 0 14px;}
+.tm-home-hint{display:block;margin:-8px 0 14px;}
+.tm-stats-hint{margin-left:auto;align-self:center;}
+#tm-body.is-loading{opacity:.6;}
+/* Loading affordances (docs/team-metrics.md "Loading"): a shimmer bar for skeleton cells — the
+   Ask panel's sweep, on a block — and the History Refresh spinner recipe on the chip's button. */
+.skel{display:inline-block;height:11px;width:60%;border-radius:6px;vertical-align:middle;
+  background:linear-gradient(90deg,var(--field) 25%,var(--line) 50%,var(--field) 75%);background-size:220% 100%;
+  animation:ask-shimmer 1.6s linear infinite;}
+.skel.w25{width:25%;}.skel.w40{width:40%;}.skel.w60{width:60%;}.skel.w70{width:70%;}
+.skel.skel-lg{height:22px;margin:6px 0;}
+.skel.skel-block{display:block;width:100%;height:150px;border-radius:10px;margin-top:10px;}
+.skel-row{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);}
+.skel-row:last-child{border-bottom:0;}
+.tm-skeleton .card-head{margin-bottom:6px;}
+.tm-skeleton .stat-sub .skel{margin-top:6px;}
+.tm-busy-spin{width:12px;height:12px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink);animation:ws-spin .9s linear infinite;}
+.sync-chip-inner .tm-checking{color:var(--ink-2);}
+.tm-refresh.busy{position:relative;color:transparent;pointer-events:none;}
+.tm-refresh.busy::after{content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;border-radius:50%;
+  border:2px solid var(--line-2);border-top-color:var(--ink);animation:ws-spin .9s linear infinite;}
+/* Workspace card while /scopes is out: the same table, shimmer cells, and a "checking metrics…" summary. */
+.ws-sum-pending{background:linear-gradient(90deg,var(--ink-3) 0%,var(--ink) 50%,var(--ink-3) 100%);background-size:220% 100%;
+  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ask-shimmer 2.4s linear infinite;}
+.ws-home-inner.is-pending .ws-projects-tbl td{padding-top:9px;padding-bottom:9px;}
+.tm-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
+.tm-tbl th{text-align:left;font-weight:600;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
+.tm-tbl th[data-sort]{cursor:pointer;} .tm-tbl th.num,.tm-tbl td.num{text-align:right;}
+.tm-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);}
+.tm-tbl tbody tr[data-filter-dim]{cursor:pointer;} .tm-tbl tbody tr[data-filter-dim]:hover,.tm-tbl tbody tr.on{background:var(--field);}
+.tm-tbl tr.dim td{color:var(--ink-3);}
+.tm-runs-foot{display:flex;align-items:center;gap:12px;margin-top:8px;}
+.tm-share{display:inline-block;width:90px;height:6px;border-radius:3px;background:var(--field);vertical-align:middle;}
+.tm-share-fill{display:block;height:100%;border-radius:3px;background:var(--blue);}
+.tm-runs{margin-top:18px;} .tm-runs-head{display:flex;align-items:center;justify-content:space-between;}
+.tm-run-tbl .tm-title{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.badge.grey{background:var(--field);color:var(--ink-2);}
+.tm-empty{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .tm-empty .card{padding:22px;}
+.tm-step{font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--ink-2);}
+.tm-empty-foot{display:block;margin-top:14px;}
+/* New light-theme text must clear 4.5:1 (the contrast proof's baseline shrinks, never grows):
+   the empty state's hints and the muted history line use --ink-2, not --ink-3, and the inline
+   link is a darker blue than --blue-ink (3.8:1 on white). */
+.tm-empty .hint,.tm-empty-foot{color:var(--ink-2);}
+.linkish{background:none;border:0;padding:0;color:var(--blue-ink-strong);font:inherit;cursor:pointer;text-decoration:underline;}
+@media (max-width:1080px){ .tm-empty{grid-template-columns:1fr;} .tm-group{margin-left:0;} }
+.hd-tm.st-ok{color:var(--green-ink)} .hd-tm.st-warn{color:var(--amber-ink)} .hd-tm.st-err{color:var(--red-ink)} .hd-tm.st-muted{color:var(--ink-2)}
+
+/* Team metrics — Projects cell (board 4) */
+#projects-list .tm-slot{flex:0 1 420px;min-width:0;}
+/* border-left + padding-left are board 4's divider between the project row and the cell
+   (mockup `.tm-cell{border-left:1px solid var(--line);padding-left:18px;min-width:420px}`);
+   the 420px sizing lives on .tm-slot above so the cell itself can still wrap. */
+/* Two fixed rows (title / status) in column 1, the control column spanning both
+   rows in column 2, and any hint on a full-width third row. A grid, not a
+   wrapping flex line: the control used to fall under the status text whenever
+   the 420px slot got tight, reading as detached from the "Team metrics" title. */
+.tm-cell{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
+  column-gap:14px;row-gap:3px;align-items:center;font-size:12.5px;
+  padding-left:18px;border-left:1px solid var(--line);}
+.tm-cell .tm-line{grid-column:1;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0;}
+/* One line, always: the dot never shrinks and a long status ellipsizes rather than
+   wrapping under itself (the row's two-line shape is the whole point of the grid). */
+.tm-cell .tm-line .tm-dot{flex:0 0 auto;}
+.tm-cell .tm-status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.tm-cell .muted,.ws-home .muted{color:var(--ink-3);}   /* scoped: a global .muted would recolour .agents-summary.muted (:599) */
+.tm-cell .tm-label{grid-column:1;grid-row:1;font-weight:600;color:var(--ink-2);}
+/* board 8 aligns "Metrics home" and "Members" on one column (mockup `.ws-home .lbl{width:96px}`) */
+.ws-home .tm-label{width:96px;flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ink-3);}
+.tm-cell .tm-hint{grid-column:1 / -1;grid-row:3;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+/* The home note is explanatory, not a raw stderr line: let it wrap instead of truncating. */
+.tm-cell .tm-home-for{white-space:normal;line-height:1.4;}
+.tm-cell .tm-actions{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:10px;justify-self:end;}
+.tm-dot.green{background:var(--green);} .tm-dot.amber{background:var(--amber);} .tm-dot.red{background:var(--red);} .tm-dot.grey{background:var(--ink-3);}
+/* Enable dialog (boards 5/6) */
+/* `.field > label` (display:block, margin-bottom) would otherwise beat this and stack the radio above the title */
+.radio-card,.field > label.radio-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--r-ctrl,14px);margin:8px 0 0;cursor:pointer;font-weight:500;font-size:13px;}
+.radio-card input[type="radio"]{flex:0 0 auto;margin:2px 0 0;}
+/* :has(), not a render-time .on class: changing the Attribution radio does not re-render the body */
+.radio-card:has(> input:checked){border-color:var(--ink);background:var(--field);}
+.radio-card.disabled{opacity:.55;cursor:not-allowed;}
+.radio-card-text{display:flex;flex-direction:column;gap:4px;}
+.tm-warn{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--amber-bg);color:var(--amber-ink);}
+.tm-delegate-wrap{margin-top:8px;}
+/* Wizard (board 7) */
+.wiz-track{display:flex;gap:18px;list-style:none;padding:0;margin:0 0 18px;font-size:12.5px;color:var(--ink-2);}
+.wiz-track li span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--field);margin-right:6px;font-weight:700;}
+.wiz-track li.on{color:var(--ink);font-weight:600;} .wiz-track li.on span{background:var(--ink);color:var(--on-ink);}
+.wiz-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;}
+.wiz-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-top:1px solid var(--line);}
+/* The metrics-home picker's radio + slug: the label had no rule, so the radio touched the text. */
+.wiz-row-pick{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;}
+.wiz-row-pick input[type="radio"]{flex:0 0 auto;margin:0;}
+/* In the 600px sheet the slug must not break mid-word, and a wrapped status keeps its dot on
+   the first line instead of floating between the two. */
+.tm-home-list .wiz-row-pick{flex:1 1 auto;}
+.tm-home-list .wiz-row-name{white-space:nowrap;}
+/* fixed column: "On · since …" lines up across rows whether or not a second line follows */
+.tm-home-list .wiz-row-status{flex:0 0 200px;width:200px;align-items:flex-start;line-height:1.4;}
+.tm-home-list .wiz-row-status .tm-dot{flex:0 0 auto;margin-top:5px;}
+.wiz-row-status-lines{display:flex;flex-direction:column;min-width:0;}
+.wiz-row-status-sub{color:var(--ink-3);}
+.wiz-row:first-child{border-top:0;} .wiz-row.off{opacity:.55;}
+.wiz-row-status{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:12.5px;margin-left:auto;}
+.wiz-metrics-actions{display:flex;align-items:center;gap:10px;}
+/* Workspace card (board 8): one projects table with the metrics home marked by the Team metrics icon */
+.ws-home{padding:12px 0 0;font-size:12.5px;}
+.ws-home[hidden]{display:none;}
+.ws-tbl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
+.ws-tbl-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
+.ws-members-summary{color:var(--ink-3);font-size:12.5px;}
+.ws-projects-tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px;}
+.ws-projects-tbl th{text-align:left;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:6px 14px 6px 0;border-bottom:1px solid var(--line);}
+.ws-projects-tbl td{padding:7px 14px 7px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2);line-height:1.5;}
+.ws-projects-tbl tr:last-child td{border-bottom:0;}
+.ws-projects-tbl tr[hidden]{display:none;}
+.ws-col-project{white-space:nowrap;color:var(--ink);}
+.tm-home-mark{display:inline-flex;align-items:center;vertical-align:-3px;}
+.ws-col-branch{white-space:normal;overflow-wrap:anywhere;}
+/* fixed proportions so the centred runs column sits between branch and status, not against status */
+.ws-projects-tbl{table-layout:fixed;}
+.ws-projects-tbl th:nth-child(1){width:31%;} .ws-projects-tbl th:nth-child(2){width:26%;} .ws-projects-tbl th:nth-child(3){width:27%;} .ws-projects-tbl th:nth-child(4){width:16%;}
+.ws-col-runs{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
+.ws-projects-tbl th.ws-col-runs{text-align:right;}
+.ws-col-status{white-space:nowrap;}
+.ws-metric{display:flex;align-items:center;gap:7px;line-height:1.5;}
+.ws-mark{width:14px;height:14px;flex:0 0 auto;}
+.ws-mark.ok{color:var(--green);} .ws-mark.bad{color:var(--red-ink);}
+.ws-metric.bad{color:var(--red-ink);}
+.ws-member.home td{color:var(--ink);}
+.ws-members-more{margin-top:8px;}
+.ws-home-hint{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--ink-3);line-height:1.45;}
+.ws-home-hint.warn{color:var(--amber-ink);}
+.ws-home-hint .tm-dot{flex:0 0 auto;}
+/* Group by, now in the Spend per week card head: compact, right-aligned by .card-head's space-between. */
+.chart-card .card-head .tm-group{margin:0;}
+.chart-card .card-head .select-sm{padding:5px 30px 5px 10px;font-size:12px;line-height:1.3;}
+.tm-route-list{list-style:none;padding:0;margin:8px 0 0;} .tm-route-list li.failed{color:var(--red-ink);}
+.tm-route-list .tm-stderr{white-space:pre-wrap;margin:4px 0 0;}
+
 /* ---------- Sidebar spend indicator ---------- */
 .spend-ind{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r-ctrl);
   background:var(--field);padding:10px 12px;cursor:pointer;font-family:inherit;}
@@ -1625,7 +1926,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* ── Chat connectivity (chat-connectivity-design.md §4.8) ─────────────────── */
 .pl-channels { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
-.pl-channel-warn { color: var(--red, #e5484d); font-weight: 600; }
+.pl-channel-warn { color: var(--red); font-weight: 600; }
 .pl-config-h { font-weight: 600; margin: 14px 0 6px; font-size: 13px; }
 .chat-events, .chat-channels { margin: 8px 0; }
 .chat-event-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; cursor: pointer; }
@@ -1637,7 +1938,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* ---- Models view (configurable-models-design.md §4.10) ---- */
 .mv-list{display:grid;gap:18px;}
 .mv-section{display:grid;gap:10px;}
-.mv-hide-builtin-row{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line-2,#e6e6ec);border-radius:10px;}
+.mv-hide-builtin-row{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;}
 .mv-hide-builtin-row .hint{margin:0;}
 .mv-section-title{margin:4px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;opacity:.75;}
 .mv-card{padding:16px 20px;display:flex;align-items:center;gap:14px;}
@@ -1646,7 +1947,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .mv-name{font-size:14.5px;}
 .mv-summary{display:block;margin:6px 0 0;word-break:break-all;}
 .mv-card .btn-ghost{flex:0 0 auto;padding:7px 12px;font-size:12px;}
-.mv-builtin{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line-2,#e6e6ec);border-radius:10px;}
+.mv-builtin{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;}
 .mv-builtin .mv-summary{margin:0;flex:1 1 auto;text-align:right;}
 .mv-editor{padding:18px 22px;}
 .mv-editor-title{margin:0 0 14px;font-size:15px;}
@@ -1678,18 +1979,18 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .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;}
+.mv-cost-rate-unit{color:var(--ink-3);font-size:11.5px;white-space:nowrap;}
 
 /* ---- Model plugins (design §9.6): plugin cards + export wizard ---- */
 .mv-secret{display:block;margin:4px 0 0;}
-.mv-secret.err{color:var(--red,#c0392b);}
+.mv-secret.err{color:var(--red);}
 .mvx-step{display:grid;gap:8px;margin:0 0 16px;}
 .mvx-step-title{margin:0;font-size:13px;}
 .mvx-model{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}
 .mvx-env-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
 .mvx-env-key{flex:0 0 34%;font-size:12.5px;word-break:break-all;}
 .mvx-env-row .select{flex:0 0 auto;}
-.mvx-warn{color:var(--red,#c0392b);}
+.mvx-warn{color:var(--red);}
 .pl-baseurl{word-break:break-all;}
 
 /* ---------- History two-screen shell ---------- */
@@ -1709,19 +2010,19 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* style.css has NO base .mono rule (only ancestor-scoped ones), so class="mono"
    alone renders in Poppins. Scope a base rule to the new subtrees only — a
    global one would touch every other view. */
-.hd .mono,.hist-card .mono,#shipit-modal .mono{font-family:var(--mono);}
+.hd .mono,.pd .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 —
    `.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. */
-.hd-header{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
+.hd-header,.pd-header{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
   box-shadow:var(--shadow);margin:20px 32px 0;padding:20px 24px 18px;}
-.hd-row1{display:flex;align-items:center;gap:14px;}
-.hd-title{margin:0;min-width:0;flex:1;font:700 22px/1.25 var(--sans);letter-spacing:-.02em;
+.hd-row1,.pd-row1{display:flex;align-items:center;gap:14px;}
+.hd-title,.pd-title{margin:0;min-width:0;flex:1;font:700 22px/1.25 var(--sans);letter-spacing:-.02em;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-.hd-body{padding:0 32px 40px;}
+.hd-body,.pd-body{padding:0 32px 40px;}
 .hd-graph{margin-top:18px;}
 /* History detail only: a run-graph node is a link into the Logs tab's `source`
    filter (wireHdGraphLogLinks). `.linked` is added only when the run HAS a Logs
@@ -1791,23 +2092,55 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hd-branch-copy.copied + .hd-copied{display:inline;}
 .hd-spacer{flex:1 1 24px;}
 /* .btn-ghost (388-389) sets no `display` and already gives border-radius:999px —
-   these two icon+label buttons need the flex row themselves or their SVG lands on
+   the icon+label buttons here need the flex row themselves or their SVG lands on
    the text baseline with no gap (unlike .hd-archive below, which ships its own).
    They also need .btn-ghost's `padding:13px 20px` cut to the compact scale, or the
    row mixes heights. Every other place this file pairs .btn-ghost with compact
    controls does the same override (.hist-pr, .ws-actions, .pl-actions,
-   .grv-actions, .mv-card). */
-.hd-back,.hd-resume{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;}
+   .grv-actions, .mv-card).
+   .hd-report has no icon, but it stands in the SAME row as .hd-archive and needs the
+   same padding for the same reason: on .btn-ghost's own 13px it measured 48px beside
+   a 38px Archive (headless Chrome, both themes). */
+.hd-back,.hd-resume,.hd-report,.pd-back,.pd-new,.pd-history{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;}
 .hd-resume[hidden]{display:none;}
+/* Same trap as the fallback issue link in the report modal: the author `display`
+   above beats the UA's `[hidden]{display:none}`, and this button ships hidden. */
+.hd-report[hidden]{display:none;}
+
+/* ---- the header's ⋯ overflow menu (Archive + Report this run) ---- */
+/* The wrapper is the positioning context; the menu hangs off its right edge so it
+   cannot push the row wider or escape the card on a narrow window. */
+.hd-more-wrap{position:relative;display:inline-flex;}
+.hd-more{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
+  border:1.5px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);
+  cursor:pointer;transition:background .15s,border-color .15s;}
+.hd-more[hidden]{display:none;}
+.hd-more:hover,.hd-more[aria-expanded="true"]{background:var(--field);border-color:var(--ink-3);}
+.hd-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;min-width:214px;
+  display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--panel);
+  border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow-menu);}
+.hd-menu[hidden]{display:none;}
+/* Both items shed their pill dressing in here and become full-width rows. Higher
+   specificity than the standalone rules above, which still hold nowhere else. */
+.hd-menu .hd-archive,.hd-menu .hd-report{width:100%;justify-content:flex-start;gap:10px;
+  padding:9px 11px;border:0;border-radius:12px;background:transparent;
+  font:600 13px var(--sans);text-align:left;}
+.hd-menu .hd-archive{color:var(--red-ink);}
+.hd-menu .hd-archive:hover:not([disabled]){background:var(--red-bg);border-color:transparent;}
+/* Amber, the exact twin of Archive's red: both rows report a problem, and reporting
+   a run is a lighter act than destroying it. --amber-ink is the readable text tone in
+   both themes (--amber itself is the solid chip colour). */
+.hd-menu .hd-report{color:var(--amber-ink);}
+.hd-menu .hd-report:hover{background:var(--amber-bg);}
 /* 9px, not the 8px its siblings use: this one is 12.5px type against .hd-back's
    13.5px, so equal padding renders it 36px tall in a row of 38px buttons
    (measured in headless Chrome). The extra pixel per side matches .hd-pr, which
    is the same type size and already pays it. */
-.hd-archive{display:flex;align-items:center;gap:8px;padding:9px 15px;border:1.5px solid var(--red-bg);
+.hd-archive,.pd-remove{display:flex;align-items:center;gap:8px;padding:9px 15px;border:1.5px solid var(--red-bg);
   border-radius:999px;background:var(--panel);font:600 12.5px var(--sans);color:var(--red-ink);cursor:pointer;}
 .hd-archive[hidden]{display:none;}
-.hd-archive:hover:not([disabled]){background:var(--red-bg);border-color:var(--red);}
-.hd-archive[disabled]{opacity:.55;cursor:not-allowed;}
+.hd-archive:hover:not([disabled]),.pd-remove:hover:not([disabled]){background:var(--red-bg);border-color:var(--red);}
+.hd-archive[disabled],.pd-remove[disabled]{opacity:.55;cursor:not-allowed;}
 /* align-items:flex-start, NOT the default stretch: `.badge.hist-retained-badge`
    (696) and `.hist-discard` (856) are inline-flex with no width, so a stretching
    column blows both up to the full body width. Only the two BANNERS want the full
@@ -1829,41 +2162,41 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 
 /* Destructive confirm (spec §5.2). The id keeps it out of .btn-primary's way with
    no !important. confirmModal removes the class on close, so it never leaks. */
-#confirm-ok.danger{background:var(--red-ink);border-color:var(--red-ink);color:#fff;}
+#confirm-ok.danger{background:var(--red-ink);border-color:var(--red-ink);color:var(--on-status);}
 
 /* ---------- History detail: section tabs ---------- */
-.hd-tabs{position:sticky;top:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
+.hd-tabs,.pd-tabs{position:sticky;top:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
   padding:18px 0 14px;background:var(--bg);}
-.hd-tab{display:flex;align-items:center;gap:9px;padding:10px 17px;border:1.5px solid var(--line);
+.hd-tab,.pd-tab{display:flex;align-items:center;gap:9px;padding:10px 17px;border:1.5px solid var(--line);
   border-radius:999px;background:var(--panel);font:600 13.5px var(--sans);color:var(--ink-2);cursor:pointer;}
-.hd-tab:hover{border-color:var(--ink-3);color:var(--ink);}
-.hd-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
-.hd-tab-badge{padding:2px 8px;border-radius:999px;background:var(--field);color:var(--ink-3);
+.hd-tab:hover,.pd-tab:hover{border-color:var(--ink-3);color:var(--ink);}
+.hd-tab.active,.pd-tab.active{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
+.hd-tab-badge,.pd-tab-badge{padding:2px 8px;border-radius:999px;background:var(--field);color:var(--ink-3);
   font:600 10.5px var(--mono);}
-.hd-tab.active .hd-tab-badge{background:var(--blue-bg);color:var(--blue-ink);}
-.hd-sec{margin-top:4px;}
+.hd-tab.active .hd-tab-badge,.pd-tab.active .pd-tab-badge{background:var(--blue-bg);color:var(--blue-ink);}
+.hd-sec,.pd-sec{margin-top:4px;}
 /* Explicit twin, not redundancy insurance: the UA [hidden] rule is (0,0,0) and
    loses to any author `display`, so the moment a later task gives .hd-sec (or a
    .hd-sec-* body) a display value, the inactive panels would all render at once. */
-.hd-sec[hidden]{display:none;}
+.hd-sec[hidden],.pd-sec[hidden]{display:none;}
 
 /* ---------- 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-count-add:light-dark(#176B4D,#6CCB93);
+  --hd-count-del:light-dark(#B31D28,#F0868E);
 }
 .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-syntax-comment:light-dark(#5B6167,#8B949E);
+  --hd-syntax-keyword:light-dark(#B31D28,#FF7B72);
+  --hd-syntax-type:light-dark(#9A3E00,#FFA657);
+  --hd-syntax-string:light-dark(#176B4D,#7EE787);
+  --hd-syntax-literal:light-dark(#713BB8,#D2A8FF);
+  --hd-syntax-title:light-dark(#075C82,#79C0FF);
 }
 .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;}
@@ -1923,37 +2256,102 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .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);}
+   display:contents, so a thread can never live inside a row (same rule as
+   `.hd-dl-hunk` and `.hd-dl-more` above). The block is a quiet strip on the
+   canvas tone; every comment on it is one raised surface card. */
+.hd-cmt-block,.hd-cmt-detached{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;
+  padding:14px 18px 16px;background:var(--canvas-2);border-top:1px solid var(--line);border-bottom: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);
+
+/* A thread is a plain stack — the root card, then the indented reply column —
+   and never a card itself. The rail sits at x=20px of the thread box and each
+   reply row draws its own elbow, exactly like `.nav-child` under Running. */
+.hd-cmt-thread{position:relative;display:flex;flex-direction:column;max-width:720px;
+  animation:wr-rise .18s cubic-bezier(.2,.7,.3,1) both;}
+.hd-cmt-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);}
+.hd-cmt-block>.hd-cmt-card{max-width:720px;}
+.hd-cmt-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:20px;
+  padding:12px 14px 0;font-size:11px;color:var(--ink-2);}
+.hd-cmt-author{font:600 12px var(--sans);color:var(--ink);}
+.hd-cmt-time{color:var(--ink-2);font-size:11px;}
+.hd-cmt-time::before{content:'·';margin-right:8px;color:var(--line-2);}
+.hd-cmt-tag{padding:2px 8px;border-radius:999px;background:var(--green-bg);color:var(--green-ink);font:600 10.5px var(--sans);}
+.hd-cmt-sent{padding:2px 8px;border-radius:999px;background:var(--field);color:var(--ink-2);font:500 10.5px var(--mono);}
+.hd-cmt-where{padding:6px 14px 0;font-size:11px;color:var(--ink-2);}
+.hd-cmt-quote{margin:6px 14px 0;padding:6px 10px;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-body{padding:6px 14px 12px;color:var(--ink);font:400 13px/1.5 var(--sans);white-space:pre-wrap;word-break:break-word;}
+.hd-cmt-body.ask-md{font:400 13px/1.5 var(--sans);white-space:normal;}
+.hd-cmt-body.ask-md>:first-child{margin-top:0;}
+.hd-cmt-body.ask-md>:last-child{margin-bottom:0;}
+.hd-cmt-thread.resolved .hd-cmt-body{color:var(--ink-2);}
+.hd-cmt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
+  padding:8px 14px;border-top:1px solid var(--line);}
+.hd-cmt-actions{display:flex;align-items:center;gap:2px;margin-right:-4px;}
+
+/* The Worca mark: inline in the head, left of the name, on every card Worca
+   wrote (root or reply). Tinted var(--ink): black on light, white on dark. */
+.hd-cmt-mark{width:16px;height:16px;flex:0 0 auto;background:var(--ink);
+  -webkit-mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;-webkit-mask-mode:luminance;
+  mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;mask-mode:luminance;}
+
+.hd-cmt-btn{height:26px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);
+  font:500 12px var(--sans);line-height:26px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
+.hd-cmt-btn:hover{background:var(--field);color:var(--ink);}
+.hd-cmt-btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
+.hd-cmt-btn:disabled{opacity:.5;cursor:default;}
+.hd-cmt-delete:hover{color:var(--red-ink);background:var(--red-bg);}
+.hd-cmt-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:-9px;}
+.hd-cmt-btn.hd-cmt-reply{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;line-height:1;
+  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);}
+.hd-cmt-btn.hd-cmt-reply:hover{border-color:var(--ink);background:var(--surface);color:var(--ink);}
+.hd-cmt-save{height:28px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--on-ink);
+  font-weight:600;line-height:28px;}
+.hd-cmt-save:hover{background:var(--ink);color:var(--on-ink);filter:brightness(1.08);}
+.hd-cmt-err{padding:0 14px;color:var(--red-ink);font-size:11.5px;}
 .hd-cmt-err:empty{display:none;}
+
+/* The reply column. Row geometry: the card's head line centre is 21px below the row
+   top (1px border + 12px padding + half of the 15px name line), so the elbow is
+   31px tall counting the 10px column gap it starts in, and the spine picks up
+   again at that same 21px. Every row — the user's, Worca's, the composer — reaches
+   the card edge; nothing sits on the rail. */
+.hd-cmt-replies{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
+.hd-cmt-thread.collapsed .hd-cmt-replies{display:none;}
+.hd-cmt-replies>.hd-cmt-reply-row{position:relative;display:block;padding:0 0 0 52px;}
+.hd-cmt-replies>.hd-cmt-reply-row::before{content:"";position:absolute;left:20px;top:-10px;width:30px;height:31px;
+  border-left:1.5px solid var(--line-2);border-bottom:1.5px solid var(--line-2);
+  border-bottom-left-radius:7px;pointer-events:none;}
+.hd-cmt-replies>.hd-cmt-reply-row:not(:last-child)::after{content:"";position:absolute;left:20px;top:21px;bottom:-10px;
+  width:1.5px;background:var(--line-2);pointer-events:none;}
+
+/* The composer is the same surface card with the focus ring moved onto the
+   card, so the borderless textarea inside reads as part of it. */
+.hd-cmt-composer{display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s;}
+.hd-cmt-composer:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--selection);}
+.hd-cmt-composer-title{display:flex;align-items:center;justify-content:space-between;gap:10px;
+  padding:12px 14px;border-bottom:1px solid var(--line);font:600 13px var(--sans);color:var(--ink);}
+.hd-cmt-tabs{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--field);}
+.hd-cmt-tab{height:22px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--ink-2);
+  font:500 11.5px var(--sans);cursor:pointer;}
+.hd-cmt-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--knob-shadow);}
+/* The same Text / Preview tab recipe for the other markdown editors (workspace description, wizard step 3). */
+.md-tabs{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--field);}
+.md-tab{height:22px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--ink-2);
+  font:500 11.5px var(--sans);cursor:pointer;}
+.md-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--knob-shadow);}
+.hd-cmt-input{width:100%;min-height:72px;padding:12px 14px;border:0;background:transparent;color:var(--ink);
+  font:400 13px/1.5 var(--sans);resize:vertical;}
+.hd-cmt-input::placeholder{color:var(--ink-2);}
+.hd-cmt-input:focus{outline:none;}
+.hd-cmt-preview{padding:12px 14px;min-height:72px;}
+.hd-cmt-preview:empty::before{content:'Nothing to preview yet';color:var(--ink-2);}
+.hd-cmt-composer .hd-cmt-actions{justify-content:flex-end;gap:4px;margin:0;padding:0 12px 12px;}
+.hd-cmt-block[hidden],.hd-cmt-detached[hidden],.hd-cmt-thread[hidden],.hd-cmt-card[hidden],.hd-cmt-badge[hidden],.hd-cmt-add[hidden],.hd-cmt-input[hidden],.hd-cmt-preview[hidden]{display:none;}
+@media (prefers-reduced-motion: reduce){.hd-cmt-thread{animation:none;}}
+/* ---------- end diff comments ---------- */
 /* 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
@@ -1968,7 +2366,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .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;
+  border:none;border-radius:5px;background:var(--blue);color:var(--on-status);
   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;
@@ -1980,7 +2378,6 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .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;}
@@ -2059,11 +2456,27 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hd-ov-chip.clean,.hd-ov-chip.st-done{background:var(--green-bg);color:var(--green-ink);}
 .hd-ov-chip.warn,.hd-ov-chip.st-paused{background:var(--amber-bg);color:var(--amber-ink);}
 .hd-ov-chip.st-stopped,.hd-ov-chip.st-error{background:var(--red-bg);color:var(--red-ink);}
-.hd-ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
-.hd-ov-card{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);}
-.hd-ov-label{font:600 10.5px var(--sans);letter-spacing:.14em;color:var(--ink-3);}
-.hd-ov-value{margin-top:10px;font-size:22px;color:var(--ink);}
-.hd-ov-sub{margin-top:6px;font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere;}
+.hd-ov-grid,.pd-ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
+.hd-ov-card,.pd-ov-card{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);}
+/* Agent memory (agent-memory-design.md §6): what this run wrote into worca's memory. */
+.hd-ov-mem{padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column;gap:8px;}
+.hd-ov-mem .mono{font-family:var(--mono);}
+.hd-mem-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
+.hd-mem-node{color:var(--ink-3);min-width:90px;}
+/* A linked chip is a real <button> (B6): reset the UA look so it reads as the span next to it. The
+   kind colour rules below are compound (.hd-mem-chip.hd-mem-*, 0,2,0) so they outrank
+   button.hd-mem-chip's color reset (0,1,1) — source order alone would not. */
+.hd-mem-chip{padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;}
+button.hd-mem-chip{background:transparent;font:inherit;font-family:var(--mono);font-size:12px;line-height:inherit;color:inherit;cursor:pointer;}
+button.hd-mem-chip:hover{background:var(--field);}
+button.hd-mem-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.hd-mem-chip.hd-mem-add{color:var(--green-ink);}
+.hd-mem-chip.hd-mem-mod{color:var(--blue-ink);}
+.hd-mem-chip.hd-mem-del{color:var(--ink-3);text-decoration:line-through;}
+.hd-mem-chip.hd-mem-rej{color:var(--red-ink);}
+.hd-ov-label,.pd-ov-label{font:600 10.5px var(--sans);letter-spacing:.14em;color:var(--ink-3);}
+.hd-ov-value,.pd-ov-value{margin-top:10px;font-size:22px;color:var(--ink);}
+.hd-ov-sub,.pd-ov-sub{margin-top:6px;font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere;}
 .hd-ov-task{padding:22px 24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);}
 .hd-ov-task-h{font:600 13px var(--sans);}
 /* overflow-wrap:anywhere like its sibling .hd-ov-sub — prompts routinely carry
@@ -2075,6 +2488,37 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .hd-ov-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
 .hd-ov-tag{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:11.5px;color:var(--ink-2);}
 
+/* Settings → Memory and the project page's Memory tab (agent-memory-design.md §10).
+   The namespace is `mem-*`: `mv-*` is Settings → Models. */
+.mem-host{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);gap:18px;align-items:start;}
+.mem-host > .mem-health{grid-column:1 / -1;}
+.mem-health-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
+.mem-counters{font-size:12.5px;color:var(--ink-3);}
+.mem-reasons{margin:12px 0 0 18px;padding:0;font-size:13px;color:var(--ink-2);}
+.mem-reasons li{margin:4px 0;}
+.mem-actions{margin-top:12px;align-items:center;gap:10px;}
+.mem-health-head .mem-defrag{margin-left:auto;}
+.mem-defrag svg{display:block;flex:none;}
+.mem-host-hint{display:block;margin-top:8px;}
+.mem-list,.mem-history{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;}
+.mem-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
+.mem-list-title{font:600 10.5px var(--sans);letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;}
+.mem-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:var(--r-ctrl);cursor:pointer;}
+.mem-row:hover{background:var(--field);}
+.mem-row.on{background:var(--field);box-shadow:inset 0 0 0 1px var(--line-2);}
+.mem-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+.mem-row-main{min-width:0;flex:1;}
+.mem-row-name{font-size:13px;color:var(--ink);}
+.mem-row-hook{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere;}
+.mem-row-meta{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
+.mem-editor{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;margin-bottom:18px;}
+.mem-editor .mem-text{min-height:260px;}
+.mem-snap{display:flex;align-items:center;gap:12px;padding:6px 8px;font-size:12.5px;}
+.mem-snap-id{color:var(--ink-2);}
+.mem-snap-count{color:var(--ink-3);flex:1;}
+.mem-host .mono{font-family:var(--mono);}
+@media (max-width:900px){.mem-host{grid-template-columns:1fr;}}
+
 /* ---------- History detail: Agents tab ---------- */
 .hd-ag-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
   overflow:hidden;margin-bottom:18px;}
@@ -2123,7 +2567,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    of its own — its colour, its removed underline and the MERGED grey all come from
    the `.hist-pr-link` selector lists at :848-:850, extended in place. */
 .hd-pr{padding:9px 18px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);
-  font:600 12.5px var(--sans);color:#fff;cursor:pointer;flex:0 0 auto;}
+  font:600 12.5px var(--sans);color:var(--on-ink);cursor:pointer;flex:0 0 auto;}
 .hd-pr[hidden]{display:none;}
 .hd-pr:hover{opacity:.88;}
 .hd-pr-link{flex:0 0 auto;font:600 12.5px var(--sans);}
@@ -2162,7 +2606,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .shipit-branch{color:var(--ink);word-break:break-all;}
 .shipit-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;}
 .shipit-ok{padding:11px 22px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);
-  font:600 13.5px var(--sans);color:#fff;cursor:pointer;}
+  font:600 13.5px var(--sans);color:var(--on-ink);cursor:pointer;}
 .shipit-err{margin-top:12px;}
 /* MANDATORY twin: the node is `class="hint err" hidden`, and `.hint` (:283) sets
    display:block — an author rule always beats the UA `[hidden]{display:none}`.
@@ -2170,6 +2614,19 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    stray node in the a11y tree). */
 .shipit-err[hidden]{display:none;}
 
+/* Fork support: push-remote + base-repo selects. Left-aligned inside the centered
+   card; the global select{width:100%} fills each grid cell. */
+.shipit-remotes{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:14px;text-align:left;}
+.shipit-remotes[hidden]{display:none;}
+.shipit-remote-field label{display:block;margin:0 0 6px 2px;font:600 11.5px/1.2 var(--sans);color:var(--ink-2);
+  text-transform:uppercase;letter-spacing:.04em;}
+.shipit-remotes .select{padding:10px 36px 10px 12px;font-size:13px;}
+.shipit-remotes .select-wrap::after{right:13px;}
+.shipit-remotes select:disabled{opacity:.55;cursor:not-allowed;}
+.shipit-remotes-hint{grid-column:1/-1;margin:0;font-size:12px;color:var(--ink-3);word-break:break-all;}
+.shipit-remotes-hint:empty{display:none;}
+@media (max-width:520px){.shipit-remotes{grid-template-columns:1fr;}}
+
 /* Reduced motion for the three ship-it animations. This block MUST sit AFTER the
    rules that declare them: `@media` contributes no specificity, so naming
    `.shipit-card` in the kill list at :763 would tie at (0,1,0) and LOSE on source
@@ -2214,7 +2671,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .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);}
+.hist-open:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
 /* "Copied" caption on the card — same CSS-only mechanism as .hd-copied */
 .hist-copied{display:none;font:500 11px var(--sans);color:var(--green-ink);}
 .hist-branch-copy.copied + .hist-copied{display:inline;}
@@ -2222,12 +2679,13 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* ---------- focus visibility (History redesign) ----------
    Every other interactive control in this stylesheet carries a ring (.btn,
    .btn-go, .btn-stop, .nav button, .hist-head, .seg button, .info-tip, .ws-head,
-   .proj-del, .ch-hit); none of the new controls did. `.btn-ghost` declares no
+   .ch-hit); none of the new controls did. `.btn-ghost` declares no
    ring to inherit and carries no `btn` class, so `.hd-back`, `.hd-resume` and
    `.shipit-cancel` had nothing at all — which matters most for `.hd-back`, the
    node openHistDetail focuses programmatically, and for the `.hd-tab` tablist.
    `.hd-diff-file` already has its own (inset) ring and is not repeated here. */
-.hd-tab:focus-visible,.hd-back:focus-visible,.hd-resume:focus-visible,
+.hd-tab:focus-visible,.hd-back:focus-visible,.hd-resume:focus-visible,.pd-tab:focus-visible,.pd-back:focus-visible,.pd-new:focus-visible,.pd-history:focus-visible,.pd-remove:focus-visible,.pd-sec:focus-visible,.proj-open:focus-visible,.pd-ov-link:focus-visible,
+.hd-more:focus-visible,.hd-report:focus-visible,
 .hd-archive:focus-visible,.hd-pr:focus-visible,.hd-pr-link:focus-visible,
 .hd-branch-copy:focus-visible,.hd-sec:focus-visible,.hist-open:focus-visible,
 .hist-branch-copy:focus-visible,.shipit-ok:focus-visible,.shipit-cancel:focus-visible{
@@ -2303,7 +2761,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
    would show both buttons. Re-state it at the cluster's specificity. */
 .rc-acts .btn-pause[hidden],.rc-acts .btn-resume[hidden]{display:none;}
 .rc-open{border:1px solid var(--line);color:var(--ink-2);}
-.rc-open:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
+.rc-open:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
 .rc-open:focus-visible,.rc-branch-copy:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 /* ---------- Running redesign: shared keyframes (C2 — declared ONCE, here) ----------
    @keyframes are name-resolved, not cascaded, so their position relative to the
@@ -2332,7 +2790,7 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
   width:32px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;
   color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s;}
 .run-density .rc-dseg:hover{color:var(--ink);}
-.run-density .rc-dseg[aria-pressed="true"]{background:var(--ink);color:#fff;}
+.run-density .rc-dseg[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);}
 .run-density .rc-dseg:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 /* One body per density. The other is display:none — which zeroes its scrollers, so
    setRunDensity stashes .log scrollTop + .run-flow-wrap scrollLeft across the flip. */
@@ -2495,7 +2953,7 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
 .rd-tab{display:flex;align-items:center;gap:9px;padding:10px 17px;border:1.5px solid var(--line);
   border-radius:999px;background:var(--panel);font:600 13.5px var(--sans);color:var(--ink-2);cursor:pointer;}
 .rd-tab:hover{border-color:var(--ink-3);color:var(--ink);}
-.rd-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
+.rd-tab.active{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
 .rd-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 .rd-tab-badge{padding:2px 8px;border-radius:999px;background:var(--field);color:var(--ink-3);
   font:600 10.5px var(--mono);}
@@ -2656,8 +3114,15 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
    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%;}
+.brand .logo-mark{display:none;width:32px;height:32px;border-radius:50%;background:var(--ink);
+  -webkit-mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;-webkit-mask-mode:luminance;
+  mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;mask-mode:luminance;}
+/* The foot is a column flex, so the button parks itself: flex-end pins it to
+   the rail's right edge under the spend block while expanded, and the collapsed
+   override below re-centres it in the 76px rail — `align-self` on the child
+   out-ranks the `align-items:center` the collapsed foot sets. */
 .side-toggle{display:flex;align-items:center;justify-content:center;
+  align-self:flex-end;
   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;}
@@ -2670,21 +3135,27 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
    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;
+.sidebar.collapsed{width:76px;flex:0 0 76px;padding:26px 18px 10px;
   scrollbar-width:none;}
 .sidebar.collapsed::-webkit-scrollbar{width:0;height:0;}
-.sidebar.collapsed .brand{flex-direction:column;gap:6px;margin-bottom:8px;padding:0;}
+/* The nav must not jump when the rail collapses: the first tile sits at
+   26 + 34 + 24 = 84px expanded (sidebar padding-top + wordmark + .brand
+   margin-bottom), so the rail keeps the same 26px top padding above and makes
+   up the difference below. 26, not 24, because the round mark is 32px tall
+   against the wordmark's 34 — the gap absorbs the 2px so the sum still lands
+   on 84. */
+.sidebar.collapsed .brand{flex-direction:column;gap:6px;margin-bottom:26px;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{width:40px;height:40px;margin:0;border-radius:12px;
+  align-self:center;}
+/* One bare chevron, pointing wherever the rail is about to go. It is NOT
+   mirrored in CSS: scaleX(-1) shifts a chevron's visual mass off the button's
+   centre, so applySidebarCollapsed rewrites the path's `d` and the arrow stays
+   optically centred in both states. Sizes: 23px under the spend block, 26px on
+   the rail. stroke-width lives in the markup, not here — 2 in a 24-unit viewBox
+   is a ~2px stroke at both sizes, which a lone arrow needs and the old boxed
+   glyph did not. */
 .sidebar.collapsed .side-toggle svg{width:26px;height:26px;}
 
 /* `:not(.rail-tile)` is LOAD-BEARING on both rules below. Run tiles are
@@ -2722,8 +3193,8 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
    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{background:var(--ink);color:var(--on-ink);}
+.sidebar.collapsed .nav button.nav-cta svg{stroke:var(--on-ink);}
 .sidebar.collapsed .nav button.nav-cta:hover{filter:brightness(.55);}
 
 /* Section headers keep their text node — ui-nav-sections.test.mjs:26-35 asserts
@@ -2731,7 +3202,6 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
    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;
@@ -2758,8 +3228,13 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
 .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);}
+/* The rail reproduces the expanded 10px on all four edges around Settings and
+   the toggle. padding-top is 9, not 10, because the foot's own 1px border-top
+   is what the tile is measured from — the two together are the 10. The nav-sep
+   override does the same arithmetic against the 6px collapsed .nav gap. */
+.sidebar.collapsed .nav-sep{width:26px;margin-top:auto;margin-bottom:4px;}
+.sidebar.collapsed .side-foot{align-items:center;gap:10px;
+  padding-top:9px;border-top:1px solid var(--line);}
 
 /* ---- rail run tiles ---- */
 /* Scoped `.nav .rail-tile` (0,2,0) for the same reason `.nav .nav-child` is
@@ -2789,7 +3264,7 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
    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.active{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
 .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
@@ -2810,7 +3285,7 @@ body.view-running .topnav{margin:12px 32px 0;flex:0 0 auto;}
 .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;}
+  background:var(--amber);color:var(--on-status);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
@@ -2864,24 +3339,65 @@ body.rail-collapsed .ask-dock{left:76px;}
 .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;}
+  box-shadow:var(--shadow-pop);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%;}
+/* "Thinking" on the collapsed pill: the label shimmers, the same sweep the live
+   thinking row paints on .ask-thinking-label (gradient clipped to the glyphs,
+   swept by the shared ask-shimmer keyframes). At rest the label needs no rule:
+   the pill's own color/weight paint it. Toggled with the .is-live class by
+   ask-panel.mjs updateSendStop(), alongside the mark<->orb morph below. */
+.ask-pill.is-live .ask-pill-label{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-pill-logo{width:22px;height:22px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--ink);
+  -webkit-mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;-webkit-mask-mode:luminance;
+  mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;mask-mode:luminance;}
+/* The mark slot: the masked logo and the pill's own thinking orb stacked in one
+   22px host. A CSS mask clips children, so the orb is a SIBLING of the masked
+   span, absolutely stacked on it; the host is what the pill's flex row sizes,
+   so the label and the kbd never move. The morph between them is these
+   transitions, keyed off .is-live: lighting shrinks and fades the mark while
+   the orb fades in (.52s — the canvas grows its dots out of the centre on the
+   same clock, thinking-orb morphTo, so no CSS scale on the orb: a scaled
+   canvas would blur them); resting is the slow, eased-out way back (.8s, over
+   the wave's .45s fade). A transition reads its timing from the AFTER-change
+   style, so the live rules carry the morph-in duration and the rest rules the
+   morph-back one. Under prefers-reduced-motion the `*{transition:none}`
+   blanket makes this an instant swap and the orb snaps its tween too; no rule
+   of its own is needed. */
+.ask-pill-mark{position:relative;width:22px;height:22px;flex:0 0 auto;display:inline-block;line-height:0;}
+.ask-pill-mark>.ask-pill-logo{position:absolute;inset:0;
+  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
+.ask-pill-mark>.ask-orb{position:absolute;inset:0;opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1);}
+.ask-pill.is-live .ask-pill-mark>.ask-pill-logo{opacity:0;transform:scale(.35);
+  transition-duration:.52s;transition-timing-function:cubic-bezier(.4,0,.7,.2);}
+.ask-pill.is-live .ask-pill-mark>.ask-orb{opacity:1;transition-duration:.52s;transition-timing-function:cubic-bezier(.2,.7,.3,1);}
 .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;}
 
+/* Content cap. The sheet grows to the full dock, what is INSIDE it does not: the
+   transcript column and the composer box share --ask-col-max and centre under it,
+   so at the default 821px sheet nothing moves and a wide sheet reads as a column.
+   --ask-col-inset is the box's distance from the sheet edge (the band padding until
+   the cap bites, then the centring remainder) — the composer popovers stay children
+   of the sheet (their max-height:70% means the sheet's height) and anchor to it.
+   --ask-box-top is the sheet bottom → box top distance with an empty one-line
+   composer: 14px band padding + box (1 border + 8 padding + ~36 textarea + 4 gap +
+   31 row + 8 padding + 1 border); the jump pill and the popovers float above it. */
 .ask-sheet{pointer-events:auto;position:relative;display:flex;flex-direction:column;overflow:hidden;
-  width:min(782px,100%);height:min(669px,calc(100% - 20px));max-width:100%;max-height:calc(100% - 20px);
+  width:min(821px,100%);height:min(669px,calc(100% - 20px));max-width:100%;max-height:calc(100% - 20px);
+  --ask-col-max:880px;--ask-col-inset:max(16px,calc(50% - var(--ask-col-max) / 2));--ask-box-top:103px;
   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);
+  box-shadow:var(--shadow-sheet);
   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-header-logo{width:20px;height:20px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--ink);
+  -webkit-mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;-webkit-mask-mode:luminance;
+  mask:url(/assets/worca-mark-mask.png) center/contain no-repeat;mask-mode:luminance;}
 .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;
@@ -2896,9 +3412,23 @@ body.rail-collapsed .ask-dock{left:76px;}
 .ask-icon-btn:hover{background:var(--field);color:var(--ink);}
 .ask-icon-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 
+/* `overflow-anchor:auto` is the UA default, stated here on purpose: it is the
+   only thing that keeps the text being read still while the activity block above
+   it grows a tool row mid-turn, and a later `overflow-anchor:none` anywhere up
+   the chain would silently switch it off. */
 .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;}
+  padding:18px 20px 8px;overflow-anchor:auto;}
+/* .ask-transcript is only the scrollport; every message lands in this column
+   (ask-panel.mjs renderTranscript), which carries the stack + gap and the cap. */
+.ask-transcript-col{width:100%;max-width:var(--ask-col-max);margin-inline:auto;display:flex;flex-direction:column;gap:16px;}
+.ask-msg{display:flex;flex-direction:column;gap:6px;}
+/* The entry rise is OPT-IN, per message. A live row is patched in place, but a
+   structural flush (ask-start, ask-done, a new message) still rebuilds the whole
+   column — so an `animation` on the bare `.ask-msg` replayed the 10px rise and
+   the fade on every message already on screen. ask-panel.mjs stamps the
+   attribute from its ledger of rows the transcript has shown before, and on
+   nothing else. */
+.ask-msg[data-ask-enter]{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;}
@@ -2939,6 +3469,7 @@ body.rail-collapsed .ask-dock{left:76px;}
    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-pill.is-live .ask-pill-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;
@@ -2997,14 +3528,11 @@ body.rail-collapsed .ask-dock{left:76px;}
 
 .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);}
@@ -3014,7 +3542,6 @@ body.rail-collapsed .ask-dock{left:76px;}
 .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);
@@ -3029,15 +3556,226 @@ body.rail-collapsed .ask-dock{left:76px;}
 .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;
+/* ---------- run proposal card v2 (ui/public/ask-panel.mjs buildCardForm; mockup 2026-09-06) ----------
+   The v1 card rules above still apply to this root (.ask-card); every override below
+   is written at higher specificity than the rule it replaces. Tokens only. */
+.ask-card.ask-rp{gap:0;padding:0;overflow:hidden;border-radius:18px;border:1.5px solid var(--line-2);box-shadow:var(--shadow-soft);animation:wr-rise .26s cubic-bezier(.2,.7,.3,1) both;}
+.ask-rp>*{min-width:0;}
+.ask-rp-head{padding:16px 18px 14px;background:linear-gradient(180deg,var(--violet-wash),var(--panel) 92%);border-bottom:1px solid var(--line);}
+.ask-rp-eyebrow{display:flex;align-items:center;gap:8px;height:20px;}
+.ask-rp-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-ink);font-weight:700;}
+.ask-rp-kicker::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--violet);margin-right:7px;vertical-align:1px;}
+.ask-rp-from{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);}
+.ask-rp-title{margin:8px 0 0;display:flex;align-items:center;gap:8px;}
+.ask-rp-edit{font-size:11px;color:var(--ink-3);white-space:nowrap;}
+.ask-rp-why{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:66ch;}
+.ask-rp-sec{padding:14px 18px;border-bottom:1px solid var(--line);}
+.ask-rp-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:22px;flex-wrap:wrap;}
+.ask-rp-sec-title{font-weight:600;font-size:12.5px;color:var(--ink);}
+.ask-rp-sec-sub{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto;}
+.ask-rp-mini{height:22px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;}
+.ask-rp-mini:hover{background:var(--field);color:var(--ink);}
+.ask-rp .ask-card-seg{gap:3px;padding:3px;border-radius:999px;background:var(--field);margin-left:auto;}
+.ask-rp .ask-card-seg-btn{height:24px;padding:0 12px;border:0;font-size:11.5px;}
+.ask-rp .ask-card-seg-btn.on{background:var(--ink);color:var(--on-ink);}
+.ask-rp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;}
+.ask-rp-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;}
+.ask-rp-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
+.ask-rp-label{font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
+.ask-rp-hint{font-weight:400;text-transform:none;letter-spacing:0;}
+.ask-rp :is(select,input[type="text"]){height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:11px;background:var(--field);font-size:12.5px;}
+.ask-rp .ask-rp-title input{flex:1 1 auto;min-width:0;height:auto;border:0;background:transparent;padding:2px 0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;border-bottom:1.5px dashed transparent;border-radius:0;color:var(--ink);}
+.ask-rp .ask-rp-title input:hover{border-bottom-color:var(--line-2);}
+.ask-rp .ask-rp-title input:focus-visible{box-shadow:none;outline:none;border-bottom-color:var(--violet);background:transparent;}
+.ask-rp-wfdesc{font-size:11.5px;color:var(--ink-3);}
+.ask-rp-wfdesc b{font-weight:600;color:var(--ink-2);}
+.ask-rp-agents{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--canvas-2);}
+.ask-rp-tile{display:flex;flex-direction:column;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--panel);}
+.ask-rp-tile:first-child{border-top:0;}
+.ask-rp-tile.mod{background:var(--amber-wash);}
+.ask-rp-tile-l1{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
+.ask-rp-tile-l2{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;padding-left:16px;}
+.ask-rp-acc{width:6px;height:26px;border-radius:3px;flex:0 0 auto;background:var(--ink-3);}
+.ask-rp-acc.violet{background:var(--violet);} .ask-rp-acc.blue{background:var(--blue);} .ask-rp-acc.green{background:var(--green);} .ask-rp-acc.peach{background:var(--peach);} .ask-rp-acc.red{background:var(--red);} .ask-rp-acc.amber{background:var(--amber);}
+.ask-rp-name{display:flex;flex-direction:column;min-width:0;line-height:1.25;flex:1 1 140px;}
+.ask-rp-name b{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);}
+.ask-rp-name small{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ask-rp-m{color:var(--amber-ink);font-weight:700;}
+.ask-rp .ask-rp-tile select{height:32px;padding:0 10px;border-radius:10px;font-size:12px;background:var(--surface);}
+.ask-rp-model{flex:0 1 170px;}
+.ask-rp-eff{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--field);border:1px solid var(--line);position:relative;}
+.ask-rp-eff button{height:24px;padding:0 7px;border:0;border-radius:999px;background:transparent;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink-3);cursor:pointer;transition:.12s;}
+.ask-rp-eff button:hover{color:var(--ink);}
+.ask-rp-eff button.on{background:var(--ink);color:var(--on-ink);}
+.ask-rp-eff button[disabled]{opacity:.35;cursor:default;}
+.ask-rp-eff.unset button{visibility:hidden;}
+.ask-rp-eff.unset::after{content:"inherits workflow";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-3);}
+.ask-rp-ctl{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2);}
+.ask-rp-ctl>span:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
+.ask-rp-sw{display:inline-flex;align-items:center;position:relative;}
+.ask-rp-sw input{position:absolute;opacity:0;width:1px;height:1px;}
+.ask-rp-knob{width:32px;height:18px;border-radius:999px;background:var(--line-2);position:relative;transition:.15s;cursor:pointer;}
+.ask-rp-knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--knob);transition:.15s;}
+.ask-rp-sw input:checked+.ask-rp-knob{background:var(--ink);}
+.ask-rp-sw input:checked+.ask-rp-knob::after{transform:translateX(14px);}
+.ask-rp-sw input:disabled+.ask-rp-knob{opacity:.4;cursor:not-allowed;}
+.ask-rp-sw input:focus-visible+.ask-rp-knob{outline:2px solid var(--ink);outline-offset:2px;}
+.ask-rp-agents-foot{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);}
+.ask-rp-lane-msg{padding:12px 14px;font-size:12px;color:var(--ink-3);}
+.ask-card.ask-rp textarea.ask-rp-brief{width:100%;min-height:150px;max-height:420px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--field);font-size:13px;line-height:1.6;resize:vertical;}
+.ask-rp-brief-foot{display:flex;align-items:center;gap:12px;margin-top:8px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap;}
+.ask-rp-brief-foot kbd{font-family:var(--mono);font-size:10px;padding:1px 5px;border:1px solid var(--line-2);border-radius:5px;background:var(--panel);color:var(--ink-2);}
+.ask-rp-count{margin-left:auto;}
+.ask-rp-pills{display:flex;gap:6px;flex-wrap:wrap;}
+.ask-rp-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:var(--panel);border:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;color:var(--ink-2);}
+.ask-rp-pill button{border:0;background:none;padding:0;color:var(--ink-3);font-family:inherit;cursor:pointer;}
+.ask-rp-foot{display:flex;align-items:center;gap:10px;padding:12px 18px 14px;background:var(--canvas-2);flex-wrap:wrap;}
+.ask-rp-foot .ask-card-open-np{font-size:12px;font-weight:500;}
+.ask-rp-summary{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-align:right;margin-left:auto;}
+.ask-rp-foot .ask-card-not-now{height:34px;padding:0 14px;font-size:12.5px;}
+.ask-rp-foot .ask-card-start{height:36px;padding:0 18px 0 15px;font-size:12.5px;color:var(--on-ink);box-shadow:var(--shadow-pop);}
+.ask-rp-foot .ask-card-start svg{width:11px;height:11px;}
+.ask-rp .ask-card-err{padding:0 18px 10px;}
+.ask-rp .ask-card-scope-warn{margin:12px 18px 0;}
+.ask-pop-at{width:288px;padding:6px;border-radius:14px;max-height:min(320px,60%);overflow-y:auto;}
+@media (max-width:640px){.ask-rp-grid,.ask-rp-grid.two{grid-template-columns:1fr;}}
+@media (prefers-reduced-motion: reduce){.ask-card.ask-rp{animation:none;} .ask-rp *{transition:none!important;}}
+
+/* ---------- workflow card chrome (ui/public/ask-panel.mjs buildWorkflowCard; mockup 2026-09-05 §A-§C) ---------- */
+.ask-card.ask-wfcard{gap:0;padding:16px 18px;border-width:1px;animation:wr-rise .2s cubic-bezier(.2,.7,.3,1) both;}
+.ask-wfcard>*{min-width:0;}
+.ask-wfcard-head{display:flex;align-items:center;gap:8px;height:24px;}
+.ask-wfcard-title{font-weight:600;font-size:15px;line-height:1.35;color:var(--ink);white-space:nowrap;}
+.ask-wfcard-round{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--field);color:var(--ink-2);font-family:var(--mono);font-size:10.5px;white-space:nowrap;}
+.ask-wfcard-spacer,.ask-wfcard-actions .ask-card-actions-spacer{flex:1 1 auto;}
+.ask-wfcard-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--violet-bg);color:var(--violet-ink);white-space:nowrap;}
+.ask-wfcard-head+.ask-wfcard-body{margin-top:12px;}
+.ask-wfcard-body>.ask-wfcard-hint{margin-top:8px;font-size:12px;line-height:1.5;color:var(--ink-3);}
+.ask-wfcard-saved{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);}
+.ask-wfcard-saved svg{flex:0 0 auto;stroke:var(--green);}
+.ask-wfcard-saved span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ask-wfcard-savedline{margin-top:4px;font-size:13px;line-height:1.55;color:var(--ink-2);}
+.ask-wfcard-savedline+.ask-wfcard-graph{margin-top:16px;}
+.ask-wfcard .ask-card-err{margin-top:8px;}
+.ask-wfcard-actions{display:flex;align-items:center;gap:8px;margin-top:20px;}
+.ask-wfcard-actions .ask-card-start,.ask-wfcard-actions .ask-card-not-now,.ask-wfcard-actions .ask-card-open-np{height:36px;font-size:13px;}
+.ask-wfcard-actions .ask-card-start{padding:0 18px;}
+.ask-wfcard-actions .ask-card-not-now{padding:0 16px;}
+/* .ask-pop-chip itself lives with the other popover panels (below .ask-pop): both
+   selectors are (0,1,0) on the same element, so a rule written here would lose its
+   radius to .ask-pop's on source order alone. */
+.ask-pop-cap{padding:8px 10px 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ask-pop-chip .ask-model-item.on{background:var(--field);}
+.ask-pop-effort{display:flex;align-items:center;gap:4px;padding:8px 10px 6px;}
+.ask-pop-effort-label{font-size:12px;color:var(--ink-2);margin-right:auto;white-space:nowrap;}
+.ask-pop-effort .ask-effort-pill{width:auto;height:24px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-2);font-weight:600;font-size:11px;white-space:nowrap;}
+.ask-pop-effort .ask-effort-pill.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
+.ask-pop-effort-none{font-size:11px;color:var(--ink-3);}
+@media (prefers-reduced-motion: reduce){.ask-card.ask-wfcard{animation:none;}}
+
+/* ---------- metrics card chrome (ui/public/ask-panel.mjs buildMetricsCard; docs/team-metrics.md "Ask Worca") ---------- */
+.ask-card.ask-mcard{gap:0;padding:16px 18px;border-width:1px;}
+.ask-mcard>*{min-width:0;}
+.ask-mcard-head{display:flex;align-items:center;gap:8px;height:24px;}
+.ask-mcard-title{font-weight:600;font-size:15px;line-height:1.35;color:var(--ink);white-space:nowrap;}
+.ask-mcard-kind{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--field);color:var(--ink-2);font-family:var(--mono);font-size:10.5px;white-space:nowrap;}
+.ask-mcard-body{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5;color:var(--ink-2);}
+.ask-mcard-summary{display:flex;align-items:flex-start;gap:8px;font-weight:600;color:var(--ink);}
+.ask-mcard-summary svg{flex:0 0 auto;margin-top:3px;stroke:var(--green);}
+.ask-mcard-target{font-size:12.5px;color:var(--ink-3);}
+.ask-mcard-note{font-size:12.5px;color:var(--ink-3);font-style:italic;}
+.ask-mcard-effects{margin:4px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-2);}
+.ask-mcard-effects li{margin:2px 0;}
+.ask-mcard-detail{font-size:12.5px;color:var(--ink-2);}
+.ask-mcard-failed{font-size:12.5px;color:var(--red-ink);}
+.ask-mcard-hint{font-size:12px;color:var(--ink-3);}
+.ask-mcard-results{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px;}
+.ask-mcard-results li{padding:3px 0;}
+.ask-mcard-results li.is-failed{color:var(--red-ink);}
+.ask-mcard-results li.is-skipped{color:var(--ink-3);}
+.ask-mcard-actions{display:flex;align-items:center;gap:8px;margin-top:14px;}
+.ask-mcard.is-applied .ask-mcard-head{opacity:.9;}
+
+/* ---------- Auto proposal body (ui/public/auto-proposal.mjs) — one body, two hosts (mockup §D/§F) ----------
+   Rhythm top→bottom: name → 8 → reasoning → 16 → chips → 8 → fingerprint → 16 → graph → 12 → loops → 16 → match → 8 → meta.
+   Per-child margins so every host keeps the same gaps. */
+.ask-wfcard-body{display:flex;flex-direction:column;min-width:0;}
+.ask-wfcard-body>*{margin:0;min-width:0;}
+.ask-wfcard-namerow{display:flex;align-items:baseline;gap:10px;}
+.ask-wfcard-namewrap+*{margin-top:8px;}
+/* The name leads the CARD order (no predecessor, no margin) but sits mid-list in the
+   question panel (reason → signals → fingerprint → name → graph), where it would butt
+   against the 11px mono fingerprint line. The `*+` guard keeps the card's first child flush. */
+.ask-wfcard-body>*+.ask-wfcard-namewrap{margin-top:12px;}
+.ask-wfcard-name{flex:0 1 auto;min-width:0;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ask-wfcard-edit{flex:0 0 auto;border:0;background:transparent;padding:0;color:var(--ink-3);font-family:var(--sans);font-size:11px;line-height:1.35;white-space:nowrap;cursor:pointer;border-radius:4px;}
+.ask-wfcard-edit svg{width:11px;height:11px;margin-right:4px;vertical-align:-1px;stroke:currentColor;fill:none;stroke-width:2;}
+.ask-wfcard-edit:hover{color:var(--ink);}
+.ask-wfcard-edit:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ask-wfcard-nameedit[hidden],.ask-wfcard-namerow[hidden]{display:none;}
+.ask-wfcard-field{display:block;width:100%;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--field);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:500;outline:none;}
+.ask-wfcard-field:focus{border-color:var(--ink);background:var(--field-focus);}
+.ask-wfcard-fieldhint{margin-top:8px;font-size:11px;line-height:1.35;color:var(--ink-3);}
+.ask-wfcard-reason{font-size:13px;line-height:1.55;color:var(--ink-2);max-width:62ch;}
+.ask-wfcard-signals{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
+.ask-wfcard-sig{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-family:var(--mono);font-size:11px;line-height:1;background:var(--field);color:var(--ink-2);white-space:nowrap;}
+.ask-wfcard-sig.kind{background:transparent;border:1px solid var(--ink);color:var(--ink);font-weight:700;}
+.ask-wfcard-sig.size{background:var(--violet-bg);color:var(--violet-ink);}
+.ask-wfcard-fp{margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ask-wfcard-fp .k{margin-right:8px;}
+.ask-wfcard-graph{position:relative;margin-top:16px;min-height:120px;overflow:hidden;border:1px solid var(--line);border-radius:12px;
+  background:var(--canvas-2) radial-gradient(circle,var(--line-2) 1.1px,transparent 1.1px);background-size:22px 22px;transition:height .24s cubic-bezier(.2,.7,.3,1);}
+.ask-wfcard-loops{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:0;list-style:none;}
+.ask-wfcard-loop{position:relative;padding-left:22px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-2);}
+.ask-wfcard-loop::before{content:"↻";position:absolute;left:0;top:0;width:14px;text-align:center;color:var(--amber);font-size:13px;line-height:16px;}
+.ask-wfcard-loop b{font-weight:700;color:var(--amber-ink);}
+.ask-wfcard-match{position:relative;margin-top:16px;padding-left:24px;font-size:13px;line-height:1.55;color:var(--ink-2);}
+.ask-wfcard-match svg{position:absolute;left:0;top:3px;width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
+.ask-wfcard-match b{font-weight:600;color:var(--ink);}
+.ask-wfcard-match.is-hit{color:var(--green-ink);}
+.ask-wfcard-warnings{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
+.ask-wfcard-warn{font-size:13px;line-height:1.5;color:var(--amber-ink);background:var(--amber-wash);border:1px solid var(--amber-line);border-radius:10px;padding:8px 12px;}
+.ask-wfcard-meta{margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
+@media (prefers-reduced-motion: reduce){.ask-wfcard-graph{transition:none;}}
+
+/* ---------- workflow card build (ui/public/auto-build.mjs; mockup §B/§F motion) ---------- */
+.ask-wfcard-graph .gv-world .node{transition:opacity .28s cubic-bezier(.2,.7,.3,1),translate .28s cubic-bezier(.2,.7,.3,1);}
+.ask-wfcard-graph .gv-world .node.is-hid{opacity:0;translate:0 8px;}
+.ask-wfcard-graph .gv-wires path.wire{transition:opacity .42s cubic-bezier(.4,0,.2,1);}
+.ask-wfcard-graph .gv-wires path.wire.is-hid,.ask-wfcard-graph .gv-world .wbadge.is-hid{opacity:0;}
+.ask-wfcard-match.is-hid,.ask-wfcard-loops.is-hid{opacity:0;}
+.ask-wfcard-match,.ask-wfcard-loops{transition:opacity .2s ease;}
+.ask-wfcard-trace{display:flex;flex-direction:column;margin:12px 0 0;padding:0;list-style:none;}
+.ask-wfcard-step{display:flex;align-items:center;gap:12px;height:28px;font-size:13px;color:var(--ink-3);}
+.ask-wfcard-step .st-ico{width:14px;height:14px;flex:0 0 14px;display:grid;place-items:center;}
+.ask-wfcard-step .st-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);}
+.ask-wfcard-step .st-check{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2.4;display:none;}
+.ask-wfcard-step .st-label{font-weight:500;white-space:nowrap;}
+.ask-wfcard-step .st-meter{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
+.ask-wfcard-step.is-live .st-label{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-wfcard-step.is-live .st-dot,.ask-wfcard-step.is-done .st-dot{display:none;}
+.ask-wfcard-step.is-done{color:var(--ink-2);}
+.ask-wfcard-step.is-done .st-check{display:block;}
+@media (prefers-reduced-motion: reduce){
+  .ask-wfcard-step.is-live .st-label{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink-2);animation:none;}
+}
+
+.ask-jump{position:absolute;left:0;right:0;bottom:calc(var(--ask-box-top) + 9px);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;}
+  box-shadow:var(--shadow-hover);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;
+/* The band is the padded outer strip (no border-top: the box is the separation);
+   the box holds chips → textarea → msg → row, rounded and bordered, on the same
+   cap as the transcript column. Panel background, not field: the textarea keeps
+   the contrast baseline (scripts/verify-theme-cdp.mjs) it has today. */
+.ask-composer{position:relative;flex:0 0 auto;padding:10px 16px 14px;display:flex;flex-direction:column;}
+.ask-composer-box{width:100%;max-width:var(--ask-col-max);margin-inline:auto;padding:8px 10px;
+  border:1px solid var(--line-2);border-radius:16px;background:var(--panel);
   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;}
@@ -3082,11 +3820,19 @@ body.rail-collapsed .ask-dock{left:76px;}
 .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;}
+  padding:6px;box-shadow:var(--shadow-menu);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;}
+/* The composer popovers hug the box (--ask-col-inset, see .ask-sheet) and float
+   just above it (--ask-box-top); agents/worktrees keep their old offsets left of
+   the model popover. */
+.ask-pop-scope{left:var(--ask-col-inset);bottom:calc(var(--ask-box-top) + 6px);width:300px;max-height:min(420px,70%);overflow-y:auto;}
+.ask-pop-model{right:var(--ask-col-inset);bottom:calc(var(--ask-box-top) + 6px);width:292px;border-radius:18px;}
+.ask-pop-runinfo{right:calc(var(--ask-col-inset) + 66px);bottom:calc(var(--ask-box-top) + 6px);width:326px;z-index:4;}
+/* The chip picker (ask-panel.mjs openChipPicker) is the only JS-positioned panel: a band
+   chip sits wherever the transcript scrolled it. Its rows are the WHOLE model catalog, so
+   the menu outgrows the sheet, which clips -- the same cap .ask-pop-scope carries keeps
+   the Effort row reachable, and chipPickerTop() flips it above the chip when that fits. */
+.ask-pop-chip{width:288px;padding:6px;border-radius:14px;max-height:min(420px,70%);overflow-y:auto;}
 .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;}
@@ -3135,9 +3881,16 @@ body.rail-collapsed .ask-dock{left:76px;}
 /* 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. */
+   the row's 10px gap collapse with it and the title moves to the left edge.
+   Two independent arms: green = the chat's own turn is thinking, violet = the
+   chat follows a live run (track_run / a card launch). Each span collapses on
+   its own, so tracking-only shows one violet dot at the edge. Both armed: the
+   spans sit under the pick's 10px gap, and the tracking dot pulls itself back
+   6px so the pair reads 4px apart instead of a full slot. */
 .ask-thread-dot{display:none;}
 .ask-thread-dot.ask-dot-live{display:block;}
+.ask-thread-dot.ask-dot-track{display:block;background:var(--violet);animation:wr-pulse 1.6s ease-in-out infinite;}
+.ask-thread-dot.ask-dot-live+.ask-thread-dot.ask-dot-track{margin-left:-6px;}
 .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;}
@@ -3153,9 +3906,9 @@ body.rail-collapsed .ask-dock{left:76px;}
 .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
+/* .ask-pop-worktrees inherits .ask-pop-runinfo's 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-pop-worktrees{min-width:340px;right:calc(var(--ask-col-inset) + 157px);}
 .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;}
 
@@ -3166,9 +3919,9 @@ body.rail-collapsed .ask-dock{left:76px;}
    size as inline width/height and clamps it to the dock; the max-* pair on
    .ask-sheet above is the backstop that keeps a stale inline size inside the
    dock (the rail collapsing changes the dock width without a window resize).
-   The floor (JS-only, the stylesheet default 782×669: the sheet grows, never
+   The floor (JS-only, the stylesheet default 821×669: the sheet grows, never
    shrinks) is not a CSS min-* on purpose — that would overflow narrow viewports
-   that width:min(782px,100%) handles today.
+   that width:min(821px,100%) handles today.
    Corners: the sheet clips at its rounded corner (inner radius = --r-card minus
    the 1px border), so a square corner grip's straight inset lines fall almost
    entirely outside the clip and only a ~3px sliver ever shows. Each corner is
@@ -3194,17 +3947,77 @@ body.rail-collapsed .ask-dock{left:76px;}
    grip's visible band hugs the border, well outside the button box. */
 .ask-header .ask-icon-btn{position:relative;z-index:6;}
 
+/* ---------- run progress card (ui/public/ask-run-card.mjs; the live view of a pipeline run in the transcript) ----------
+   Stateless: every value is repainted from the app's run store or GET /api/ask/runs/:id. Tokens only.
+   The run-state ornaments are restated for THIS host: the run-monitor block is scoped to its own host class
+   (pinned by test/ui-run-hosts.test.mjs), and keyframes are name-resolved — referenced here, declared once there.
+   Reduced motion: the dock blanket (.ask-dock *{animation:none !important;}) covers every ELEMENT below — never a
+   pseudo-element (they do not inherit `animation`), so nothing here animates a ::before/::after (D25; pinned). Pips scale with
+   --gv-scale (geometry.mjs) because the flow card is drawn at 0.65 while the world transform stays identity.
+   Every rule that restates a v2-canvas base rule carries .gv-world: the base lives LATER in this file, so a
+   two-class .ask-rc-graph .wbadge would tie on specificity and lose (the budget pill would keep painting its
+   "3×" under the fired "2×"). Pinned by the cascade test in test/ui-ask-style.test.mjs. */
+.ask-card.ask-rc{gap:0;padding:16px 18px;border-width:1px;animation:wr-rise .2s cubic-bezier(.2,.7,.3,1) both;}
+.ask-rc>*{min-width:0;}
+.ask-rc-head{display:flex;align-items:center;gap:8px;height:28px;}
+.ask-rc-kicker{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--violet-bg);color:var(--violet-ink);white-space:nowrap;}
+.ask-rc-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:700;white-space:nowrap;}
+.ask-rc-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;}
+.ask-rc.is-live .ask-rc-dot{animation:dotpulse 1.3s ease-in-out infinite;}
+.ask-rc-pill.st-peach{background:var(--peach-bg);color:var(--h-peach-ink);}
+.ask-rc-pill.st-blue{background:var(--blue-bg);color:var(--h-blue-ink);}
+.ask-rc-pill.st-violet{background:var(--violet-bg);color:var(--violet-ink);}
+.ask-rc-pill.st-green{background:var(--green-bg);color:var(--h-green-ink);}
+.ask-rc-pill.st-red{background:var(--red-bg);color:var(--red-ink);}
+.ask-rc-pill.st-amber{background:var(--amber-bg);color:var(--amber-ink);}
+.ask-rc-spacer{flex:1 1 auto;}
+.ask-rc-open{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--panel);font-weight:600;font-size:12px;text-decoration:none;white-space:nowrap;transition:.15s;}
+.ask-rc-open:hover{filter:brightness(1.08);}
+.ask-rc-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ask-rc-title{margin-top:12px;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ask-rc-sub{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ask-rc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;}
+.ask-rc-stat{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--field);}
+.ask-rc-stat-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
+.ask-rc-stat-v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
+.ask-rc-active{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
+.ask-rc-active[hidden]{display:none;}
+.ask-rc-agent{--c:var(--ink-3);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:999px;border:1px solid color-mix(in srgb, var(--c) 45%, var(--line));background:color-mix(in srgb, var(--c) 12%, var(--panel));color:var(--ink);font-size:11.5px;font-weight:600;white-space:nowrap;}
+.ask-rc-agent-dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 auto;animation:dotpulse 1.3s ease-in-out infinite;}
+.ask-rc-banner{margin-top:12px;padding:9px 12px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--amber-ink);background:var(--amber-wash);border:1px solid var(--amber-line);}
+.ask-rc-banner[hidden]{display:none;}
+.ask-rc-reason{margin-top:10px;font-size:12px;color:var(--red-ink);}
+.ask-rc-reason[hidden]{display:none;}
+.ask-rc-graph{position:relative;margin-top:14px;min-height:120px;overflow:hidden;border:1px solid var(--line);border-radius:12px;cursor:pointer;
+  background:var(--canvas-2) radial-gradient(circle,var(--line-2) 1.1px,transparent 1.1px);background-size:22px 22px;transition:height .24s cubic-bezier(.2,.7,.3,1);}
+.ask-rc-graph[hidden]{display:none;}
+.ask-rc-graph .gv-world .node.is-active{border-color:color-mix(in srgb, var(--c) 55%, var(--line-2));animation:nodeGlow 2.2s ease-in-out infinite;}
+.ask-rc-graph .gv-world .node.is-paused{border-color:color-mix(in srgb, var(--amber) 55%, var(--line-2));animation:nodeGlowAmber 2.2s ease-in-out infinite;}
+.ask-rc-graph .gv-world .node.is-stopped,.ask-rc-graph .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);}
+.ask-rc-graph .gv-world .node.is-skipped{opacity:.35;border-style:dashed;}
+.ask-rc-graph .gv-world .node.is-done::after,.ask-rc-graph .gv-world .node.is-paused::after,.ask-rc-graph .gv-world .node.is-stopped::after,.ask-rc-graph .gv-world .node.is-error::after{content:"";position:absolute;top:calc(-8px * var(--gv-scale));right:calc(-8px * var(--gv-scale));width:calc(21px * var(--gv-scale));height:calc(21px * var(--gv-scale));border-radius:50%;box-shadow:var(--shadow-soft);z-index:3;color:var(--on-status);font:800 calc(12px * var(--gv-scale))/calc(21px * var(--gv-scale)) var(--sans);text-align:center;}
+.ask-rc-graph .gv-world .node.is-done::after{content:"✓";background:var(--green);}
+.ask-rc-graph .gv-world .node.is-paused::after{content:"❚❚";font-size:calc(8px * var(--gv-scale));background:var(--amber);}
+.ask-rc-graph .gv-world .node.is-stopped::after,.ask-rc-graph .gv-world .node.is-error::after{content:"×";background:var(--red);}
+.ask-rc-graph .gv-world .node:has(> .ngate)::after{content:none;}
+.ask-rc-graph .gv-world .ngate{animation:dotpulse 1.3s ease-in-out infinite;}
+.ask-rc-graph .gv-wires path.wire-live{stroke-dasharray:6 6;stroke-width:2.4;animation:wireDash .6s linear infinite;}
+.ask-rc-graph .gv-world .wbadge{font-size:0;line-height:0;padding:0;border:0;background:none;}
+.ask-rc-graph .wbadge:not(:has(> .wfired)){display:none;}
+.ask-rc-graph .gv-world .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);}
+
 /* ---------- 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
+   gutters reserve only 40px. One late override lifts the BOTTOM padding of all seven
    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);}
+   order is load-bearing -- this must follow the .main, .run-screen/.rd-body,
+   .hist-screen/.hd-body and .proj-screen/.pd-body base rules and precede the
+   reduced-motion block below. The -list screen classes are targeted, NOT
+   .run-screen/.hist-screen/.proj-screen, so the -detail scrollports keep padding:0 for
+   their sticky tab bars and take clearance via .rd-body/.hd-body/.pd-body instead;
+   body.view-history/.view-running/.view-projects .main keep padding:0 by specificity. */
+.main,.run-screen-list,.hist-screen-list,.proj-screen-list,.rd-body,.hd-body,.pd-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
@@ -3345,7 +4158,7 @@ input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
   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:hover{background:var(--ink-3);color:var(--on-ink);}
 .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;}
@@ -3362,7 +4175,166 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
    (0,1,0) `animation:none` here would LOSE the source-order tie against any
    `animation:wr-*` rule appended after it — exactly the trap documented at
    :748-763 for the four legacy names and at :1927-1940 for the ship-it set. */
+/* ---------- Getting started (docs/getting-started.md) ---------- */
+/* The shelf sits ABOVE the New pipeline form at the form's own width (.grid.single
+   caps the card at 864px, centred), so it reads as the page's first card, not a
+   side panel. Painted by getting-started.mjs; [hidden] when hidden or unknown. */
+.gs-host{max-width:960px;margin:0 auto;}
+.gs-host[hidden]{display:none;}
+.gs-card{padding:20px 22px 22px;}
+.gs-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
+.gs-head h2{margin:0;flex:1;font-size:16px;font-weight:600;}
+.gs-progress{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
+.gs-hide{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;
+  text-decoration:underline;text-underline-offset:3px;}
+.gs-hide:hover{color:var(--ink);}
+/* Equal tiles that fill the row and wrap 4 -> 2 -> 1: symmetric, never a 3+1 orphan. */
+.gs-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
+@media (max-width:760px){.gs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
+@media (max-width:440px){.gs-tiles{grid-template-columns:1fr;}}
+.gs-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
+  border:1.5px solid var(--line);border-radius:var(--r-ctrl);background:var(--surface);
+  padding:12px 14px 13px;font:inherit;font-size:13px;line-height:1.35;color:var(--ink);text-align:left;cursor:pointer;
+  transition:border-color .2s,transform .15s;}
+.gs-tile:hover{border-color:var(--violet);transform:translateY(-1px);}
+.gs-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+/* Unfinished tiles arrive in sequence — the tile lands, then its drawing paints
+   (backwards fill keeps it invisible until its turn). */
+.gs-tile.reveal{animation:gs-tile-in .4s ease-out backwards;animation-delay:var(--tile-delay,0s);}
+@keyframes gs-tile-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
+.gs-vig{width:96px;margin:2px 0 0;}
+.gs-vig svg{width:100%;height:auto;display:block;}
+.gs-label{font-weight:600;}
+.gs-mark{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
+  border:1.5px solid var(--line-2);display:grid;place-items:center;color:transparent;font-size:11px;font-weight:700;
+  transition:background .3s,border-color .3s,color .3s;}
+/* Done recedes: the mark fills with ink (the wizard tracker's own idiom), the
+   label mutes and strikes, the drawing loses its colour. What is still to do
+   keeps full ink and its accent — the shelf IS a progress meter. */
+.gs-tile.done .gs-mark{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
+.gs-tile.done .gs-label{color:var(--ink-2);font-weight:500;text-decoration:line-through;text-decoration-thickness:1px;}
+.gs-tile.done .gs-vig{opacity:.45;filter:saturate(.3);}
+
+/* Vignette vocabulary: hollow nodes, wires, frames; ONE accent (violet) per scene. */
+.gs-node{fill:var(--panel);stroke:var(--ink-3);stroke-width:2;}
+.gs-node.gs-accent{fill:var(--violet);stroke:var(--violet);}
+.gs-wire{fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round;}
+.gs-wire.gs-accent{stroke:var(--violet);}
+.gs-frame{fill:var(--field);stroke:var(--ink-3);stroke-width:2;}
+.gs-glyph{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
+.gs-spark.gs-accent{fill:var(--violet);stroke:none;}
+.gs-chart{fill:none;stroke:var(--violet);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
+.gs-ring-mark{fill:none;stroke:var(--violet);stroke-width:2;opacity:.45;}
+/* Motion grammar: pop (overshoot) for marks, a slow draw for wires. Every element's
+   delay is its own slot plus the tile's slot, so one vignette finishes before the
+   next begins. `.static` (a done tile) paints the finished picture, no motion. */
+.play .gs-pop{transform-box:fill-box;transform-origin:center;
+  animation:gs-pop .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--tile-delay,0s) + var(--d,0s));}
+@keyframes gs-pop{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:none;}}
+.play .gs-draw{stroke-dasharray:1;stroke-dashoffset:1;
+  animation:gs-draw var(--t,.6s) cubic-bezier(.45,0,.3,1) both;animation-delay:calc(var(--tile-delay,0s) + var(--d,0s));}
+@keyframes gs-draw{to{stroke-dashoffset:0;}}
+
+/* Sidebar pill under New pipeline: mounted by app.js (not in the shell — the 10-button
+   nav census stays), styled by .nav button; the count wears the accent. */
+.gs-pill-host[hidden]{display:none;}
+/* The pill wears the guide's own violet and its halo, so it reads as "the tour is
+   here" from any view — the one animated thing in the rail. */
+.nav button.gs-pill{font-weight:600;color:var(--violet-ink);border:1.5px solid var(--violet);padding:6.5px 11.5px;
+  animation:gs-pill-glow 2.4s ease-out infinite;}
+.nav button.gs-pill:hover{background:var(--violet-bg);color:var(--violet-ink);}
+.nav button.gs-pill.active{background:var(--violet-bg);border-color:var(--violet);color:var(--violet-ink);animation:none;}
+.nav button.gs-pill.active svg{stroke:var(--violet-ink);}
+.nav button.gs-pill.active .gs-pill-count{background:var(--panel);color:var(--violet-ink);}
+.nav button.gs-pill svg{stroke:var(--violet-ink);}
+/* Violet ink on the violet wash (not white on solid violet: 3.4:1 at 11px fails the light gate). */
+.nav button.gs-pill .gs-pill-count{background:var(--violet-bg);color:var(--violet-ink);font-family:var(--mono);font-size:11px;}
+@keyframes gs-pill-glow{
+  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--violet) 50%,transparent);}
+  70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--violet) 0%,transparent);}
+  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--violet) 0%,transparent);}
+}
+
+/* Settings › General › Getting started */
+.gs-settings-row{display:flex;align-items:center;gap:16px;justify-content:space-between;}
+.gs-settings-row .btn{white-space:nowrap;flex:0 0 auto;}
+.gs-settings-text{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5;}
+
+/* ---------- Welcome + Connect Claude Code dialogs ---------- */
+.ob-welcome{width:min(92vw,600px);padding:30px 34px 26px;animation:wr-rise .28s cubic-bezier(.2,.7,.3,1) both;}
+.ob-eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
+.ob-headline{margin:0;font-size:27px;font-weight:600;letter-spacing:-.01em;line-height:1.2;}
+.ob-headline em{font-style:italic;color:var(--violet-ink);}
+.ob-hero{display:block;width:100%;height:auto;margin:10px 0 12px;}
+.ob-thread{stroke-width:2.5;}
+.ob-loop{stroke:var(--ink-3);stroke-dasharray:1;}
+.ob-doors{display:flex;flex-direction:column;gap:8px;}
+.ob-door{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
+  border:1.5px solid var(--line-2);border-radius:var(--r-ctrl);background:var(--surface);color:var(--ink);
+  font:inherit;font-weight:600;font-size:14px;text-align:left;cursor:pointer;transition:border-color .15s,background .15s;}
+.ob-door:hover{border-color:var(--ink);background:var(--field);}
+.ob-door:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.ob-door-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--violet-bg);color:var(--violet-ink);flex:0 0 auto;}
+.ob-door-icon svg{width:19px;height:19px;}
+.ob-door-arrow{margin-left:auto;color:var(--ink-2);font-size:18px;line-height:1;}
+.ob-skip{display:block;margin:16px auto 0;background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ink-2);
+  cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
+.ob-skip:hover{color:var(--ink);}
+.ob-claude{width:min(92vw,560px);padding:24px;}
+.ob-claude-lead,.ob-claude-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);}
+.ob-claude-lead strong{color:var(--ink);}
+.ob-claude code{font-family:var(--mono);font-size:12px;background:var(--field);padding:1px 5px;border-radius:6px;}
+.ob-claude-cmd{margin:12px 0;padding:12px 14px;background:var(--field);border-radius:12px;overflow:auto;}
+.ob-claude-cmd code{background:none;padding:0;font-size:12.5px;}
+.ob-claude-note a{color:var(--blue-ink-strong);}
+.ob-claude-status{min-height:18px;margin-top:12px;font-size:13px;line-height:1.45;}
+.ob-claude-status.ok{color:var(--green-ink);}
+.ob-claude-status.err{color:var(--red-ink);}
+
+/* ---------- Spotlight guide (guide-spot.mjs) ---------- */
+/* Layering: spotlight ABOVE the Ask dock (40) and BELOW every .viewer-modal (50),
+   so a dialog the target opens simply covers it. The target is elevated over the
+   scrim by z-index (no cutout mask) and stays fully interactive; `.guide-lift`
+   raises an ancestor that owns a stacking context the target cannot escape.
+   `pointer` (a target inside an open dialog) drops the scrim and rides above the
+   modal layer instead. */
+.guide-scrim{position:fixed;inset:0;z-index:44;background:var(--scrim);}
+/* !important: a control may carry its own id-level position/z-index (#prompt has z-index:1) that
+   would otherwise beat this transient class and leave the ringed control UNDER the scrim. */
+.guide-target{position:relative !important;z-index:45 !important;}
+.guide-lift{z-index:45 !important;}
+.guide-lift-static{position:relative;}
+/* A lifted select wrapper keeps its chevron ON TOP of the elevated select (the
+   pseudo-element would otherwise paint under the child's z-index). */
+.select-wrap.guide-lift::after{z-index:46;}
+/* The ring never fades — it is the answer to "which control?". The pulse is a
+   halo radiating OUT of it, so the mark stays solid and the motion draws the eye. */
+.guide-ring{position:fixed;z-index:46;pointer-events:none;border:2.5px solid var(--violet);border-radius:18px;
+  animation:guide-pulse 1.8s ease-out infinite;}
+@keyframes guide-pulse{
+  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--violet) 55%,transparent);}
+  100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--violet) 0%,transparent);}
+}
+.guide-balloon{position:fixed;z-index:47;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
+  max-width:300px;padding:11px 14px 10px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-ctrl);
+  box-shadow:var(--shadow-pop);color:var(--ink);font-size:13px;line-height:1.45;}
+.guide-balloon::before{content:'';position:absolute;top:-6px;left:calc(var(--arrow-x,20px) - 5px);width:10px;height:10px;
+  background:var(--panel);border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);transform:rotate(45deg);}
+.guide-balloon.above::before{top:auto;bottom:-6px;transform:rotate(225deg);}
+.guide-skip{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;
+  text-decoration:underline;text-underline-offset:3px;}
+.guide-skip:hover{color:var(--ink);}
+.guide-ring[hidden],.guide-balloon[hidden]{display:none;}
+.guide-layer.pointer .guide-ring{z-index:72;}
+.guide-layer.pointer .guide-balloon{z-index:73;}
+
+
 @media (prefers-reduced-motion: reduce){
+  /* Getting started: tiles land drawn, vignettes paint finished, the guide ring holds a still halo. */
+  .gs-tile.reveal,.play .gs-pop,.play .gs-draw,.ob-welcome,.guide-ring,.nav button.gs-pill{animation:none;}
+  .nav button.gs-pill{box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 25%,transparent);}
+  .play .gs-draw{stroke-dashoffset:0;}
+  .guide-ring{box-shadow:0 0 0 6px color-mix(in srgb,var(--violet) 30%,transparent);}
   /* #stop-modal is a top-level overlay, outside the shell — named explicitly. */
   #stop-modal .card{animation:none;}
   /* PSEUDO-ELEMENTS DO NOT INHERIT `animation`, so the `*` blanket below cannot
@@ -3381,6 +4353,7 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
      .run-shell one below. */
   .ask-dock *{animation:none !important;}
   .run-shell *{animation:none !important;}
+  .proj-shell *{animation:none !important;}
 }
 
 /* ========================================================================== */
@@ -3393,7 +4366,7 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
 /* 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;}
+  background:var(--canvas-2) 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;}
@@ -3409,29 +4382,52 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
 .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;
+  width:var(--gv-node-w);background:var(--panel);border:var(--gv-border) solid var(--line-2);border-radius:calc(16px * var(--gv-scale));
   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{height:var(--gv-head-h);display:flex;align-items:center;gap:calc(8px * var(--gv-scale));padding:0 calc(11px * var(--gv-scale));
+  border-radius:calc(14.5px * var(--gv-scale)) calc(14.5px * var(--gv-scale)) 0 0;font-size:max(9px,calc(13px * var(--gv-scale)));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.gv-world .nhead svg{width:calc(15px * var(--gv-scale));height:calc(15px * var(--gv-scale));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-flow{background:var(--ink);color:var(--on-ink);}
 .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-blue{background:var(--blue-bg);color:var(--h-blue-ink);}
+.gv-world .h-green{background:var(--green-bg);color:var(--h-green-ink);}
 .gv-world .h-red{background:var(--red-bg);color:var(--red-ink);}
-.gv-world .h-peach{background:#FCEEDA;color:#8A5A16;}
+.gv-world .h-peach{background:var(--peach-bg);color:var(--h-peach-ink);}
 .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;}
+/* the chip band (A2/A26): model · effort · flags, ONE line between the head and the body, on the panel (never on a
+   tinted head). Chips are the mockup's one unfloored font — 10px mono, 13px tall at .65 — so the band's inner 137px
+   holds "Sonnet 5 · medium · asks" (mockup F); the model chip ellipsises first. */
+.gv-world .nband{height:var(--gv-band-h);display:flex;align-items:center;gap:3px;padding:0 calc(3px * var(--gv-scale));overflow:hidden;}
+.gv-world .bchip{display:inline-block;flex:0 0 auto;height:calc(20px * var(--gv-scale));line-height:calc(20px * var(--gv-scale));padding:0 calc(6.15px * var(--gv-scale));
+  border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:700;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
+/* 6.15 / 4.6 × 0.65 = the mockup's 4px / 3px chip paddings (its .fl-chip is fixed px; ours scales, no hard-coded px in node CSS) */
+.gv-world .bchip.model{flex:0 1 auto;background:var(--ink);color:var(--on-ink);}
+.gv-world .bchip.model.is-unset{background:var(--field);color:var(--ink-3);}
+.gv-world .bchip.effort{background:var(--field);color:var(--ink-2);}
+.gv-world .bchip.flag{padding:0 calc(4.6px * var(--gv-scale));background:var(--amber-bg);color:var(--amber-ink);}
+.gv-world .bchip.flag.q{background:var(--red-bg);color:var(--red-ink);}
+.gv-world button.bchip{border:0;font-family:var(--mono);font-weight:700;cursor:pointer;color:inherit;}
+.gv-world button.bchip:hover,.gv-world button.bchip[aria-expanded="true"]{box-shadow:0 0 0 2px var(--line-2);}
+.gv-world button.bchip:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
+/* A36: a port row is ONE line by construction (its height is --gv-row-h); at the 9px floor the Task/OR captions
+   ("prompt + attached files", "forwards freshest input") wrapped to two lines inside the 15.6px row and ate --gv-pad-b
+   (measured in Chrome at 0.65: .prow.cap scrollHeight 19 vs clientHeight 16). The mockup's .fl .prow is nowrap; a caption
+   that STILL does not fit ellipsises. NO overflow:hidden on .prow itself — the port dots hang outside it. */
+.gv-world .prow{position:relative;height:var(--gv-row-h);display:flex;align-items:center;gap:calc(7px * var(--gv-scale));padding:0 calc(13px * var(--gv-scale));white-space:nowrap;}
+.gv-world .prow.cap .pt{min-width:0;overflow:hidden;text-overflow:ellipsis;}
 .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);}
+/* nowrap without a guard would let a long port NAME (plugin agents mint their own ids)
+   spill past the card border at every scale — .pn is a flex item, so it needs min-width:0
+   before it will shrink. Same treatment the caption above gets. */
+.gv-world .prow .pn{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:max(9px,calc(12.5px * var(--gv-scale)));font-weight:500;}
+.gv-world .prow .pt{font-family:var(--mono);font-size:max(9px,calc(10px * var(--gv-scale)));line-height:1.3;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
@@ -3439,12 +4435,13 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
    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;
+.gv-world .prow .chip{flex:0 0 auto;font-family:var(--mono);font-weight:700;font-size:max(9px,calc(10px * var(--gv-scale)));line-height:1.4;
+  padding:calc(1px * var(--gv-scale)) calc(7px * var(--gv-scale));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);}
+.gv-world .psep::after{content:"";position:absolute;left:calc(13px * var(--gv-scale));right:calc(13px * var(--gv-scale));top:calc(4px * var(--gv-scale));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);
@@ -3453,21 +4450,26 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
 .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;
+.gv-world .dot.void{background:var(--panel);border:calc(2px * var(--gv-scale)) solid var(--ink-3);}
+.gv-world .dot.any{background:var(--panel);border:calc(2px * var(--gv-scale)) solid var(--ink);}
+.gv-world .dia{position:absolute;top:calc(8px * var(--gv-scale));right:calc(-1 * (4px * var(--gv-scale) + var(--gv-border)));width:calc(8px * var(--gv-scale));height:calc(8px * var(--gv-scale));
   background:var(--amber);border-radius:2px;transform:rotate(45deg);}
-.gv-world .gdot{background:var(--field);border:2px dashed var(--seq);}
+.gv-world .gdot{background:var(--field);border:calc(2px * var(--gv-scale)) 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 .gdot{background:var(--panel);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-ok .dot,.gv-world .prow.drop-ok .gdot{transform:scale(1.35);box-shadow:0 0 0 3px var(--drop-ring);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;}
+  background:var(--red);border:2px solid var(--panel);cursor:pointer;z-index:3;}
+/* the wire badge is the SECOND unfloored font (A26/A35 — the mockup's .fl .wbadge{font-size:10px;line-height:14px}); at scale 1 this is today's 10px/1.4 */
 .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;}
+  color:var(--amber-ink);border:1px solid var(--amber);border-radius:999px;padding:calc(1px * var(--gv-scale)) calc(7px * var(--gv-scale));
+  font-family:var(--mono);font-size:10px;line-height:14px;pointer-events:none;}
+/* flow mode (A3): the stage is as tall as its rows — the host reads it back — and the world never transforms */
+.gv-stage.gv-flow{position:relative;inset:auto;width:100%;}
+/* A35: a flow host is never inside a click-to-open card, so its cards/badges may take pointer events (head + chip tooltips) */
+.gv-static.gv-flow .node,.gv-static.gv-flow .wbadge{pointer-events:auto;}
 /* 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
@@ -3513,7 +4515,7 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
 .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;
+.gv-world .nrun{position:absolute;top:-9px;right:16px;display:flex;gap:6px;background:var(--panel);
   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);
@@ -3542,7 +4544,7 @@ html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;}
 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{background:var(--field-focus);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;}
@@ -3575,6 +4577,21 @@ input.gv-name:focus-visible{outline:none;}
 .gv-ins-rail[data-tab="agents"] > .gv-ins-body{display:none;}
 .gv-ins-rail[data-tab="info"] > .gv-agents-pane{display:none;}
 
+/* The nav cluster rides the canvas, clear of the rail: 352px is the open rail's
+   340 plus a 12px gutter, 40px the collapsed 28 plus the same gutter — the
+   INSET_OPEN / INSET_COLLAPSED pair above, so change them together. The sibling
+   selector only works because #gv-nav FOLLOWS #gv-ins-rail in index.html. */
+.gv-nav{position:absolute;z-index:6;bottom:12px;right:352px;display:flex;flex-direction:column;gap:6px;}
+.gv-ins-rail[data-open="collapsed"] ~ .gv-nav{right:40px;}
+.gv-nav-btn{width:30px;height:30px;padding:0;display:grid;place-items:center;
+  border:1px solid var(--line-2);border-radius:9px;background:var(--panel);color:var(--ink-2);
+  box-shadow:var(--shadow-soft);cursor:pointer;line-height:1;font-family:inherit;
+  transition:background .12s,color .12s,opacity .12s;}
+.gv-nav-btn:hover:not(:disabled){background:var(--field);color:var(--ink);}
+.gv-nav-btn:disabled{opacity:.42;cursor:default;box-shadow:none;}
+.gv-nav-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+.gv-nav-btn svg{display:block;}
+
 .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;}
@@ -3596,7 +4613,7 @@ input.gv-name:focus-visible{outline:none;}
 .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[aria-selected="true"]{background:var(--surface);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;}
@@ -3619,12 +4636,14 @@ input.gv-name:focus-visible{outline:none;}
    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;}
+.ins-panel .ins-select:focus,.ins-panel .ins-number:focus{background:var(--field-focus);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;}
+   draws its own with .select-wrap::after — so the rail's `select()` now wraps it in
+   .ins-select-wrap and the chevron is a token-coloured ::after (dark mode: a baked-hex data-URI cannot follow the ink). */
+.ins-panel .ins-select{padding-right:30px;}
+.ins-select-wrap{position:relative;display:block;}
+.ins-select-wrap::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;
+  border-right:1.8px solid var(--ink-2);border-bottom:1.8px solid var(--ink-2);transform:translateY(-65%) rotate(45deg);pointer-events:none;}
 .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;}
@@ -3650,9 +4669,9 @@ input.gv-name:focus-visible{outline:none;}
 .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 .dot.any{background:var(--panel);border:2px solid var(--ink);}
+.ins-pitem .dot.void{background:var(--panel);border:2px solid var(--ink-3);}
+.ins-pitem .gdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--panel);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;}
@@ -3668,11 +4687,11 @@ input.gv-name:focus-visible{outline:none;}
   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{outline:none;background:var(--field-focus);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;
+.gv-retry{border:1.5px solid var(--line-2);background:var(--surface);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);}
 
@@ -3699,7 +4718,7 @@ input.gv-name:focus-visible{outline:none;}
 .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);
+  background:var(--panel);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;}
@@ -3714,7 +4733,7 @@ input.gv-name:focus-visible{outline:none;}
   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);}
+  background:var(--panel);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 —
@@ -3735,7 +4754,7 @@ input.gv-name:focus-visible{outline:none;}
 .gv-saved-tab{display:flex;align-items:center;gap:8px;padding:7px 13px;border:1.5px solid var(--line);
   border-radius:999px;background:var(--panel);font:600 12.5px var(--sans);color:var(--ink-2);cursor:pointer;}
 .gv-saved-tab:hover{border-color:var(--ink-3);color:var(--ink);}
-.gv-saved-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
+.gv-saved-tab.active{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
 .gv-saved-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 .gv-saved-tab-badge{padding:1px 7px;border-radius:999px;background:var(--field);color:var(--ink-3);font:600 10.5px var(--mono);}
 .gv-saved-tab.active .gv-saved-tab-badge{background:var(--blue-bg);color:var(--blue-ink);}
@@ -3752,7 +4771,7 @@ input.gv-name:focus-visible{outline:none;}
 /* 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;}
+  border:1px solid var(--line-2);border-radius:10px;background:var(--canvas-2);}
 .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;}
@@ -3765,6 +4784,7 @@ input.gv-name:focus-visible{outline:none;}
 .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-origin.pl-auto{background:var(--violet-bg);border-color:var(--violet-bg);color:var(--violet-ink);font-family:var(--sans);letter-spacing:.04em;}
 /* Delete: the bin icon in the pipeline Archive button's dress (.hd-archive — red
    ink on a red-bg hairline pill, fills on hover), icon-only at row-action size. */
 .gv-saved .pl-del{flex:0 0 auto;width:34px;height:34px;border-radius:999px;border:1.5px solid var(--red-bg);
@@ -3782,14 +4802,14 @@ input.gv-name:focus-visible{outline:none;}
 
 /* ---------- 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::backdrop{background:var(--scrim-soft);}
 .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-field input:focus{outline:none;background:var(--field-focus);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;}
@@ -3820,6 +4840,11 @@ input.gv-name:focus-visible{outline:none;}
    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;}
+/* The Auto deciding placeholder (spec §7.3). The host never gets gv-host/gv-wrap-static
+   (mountRunGraph adds those), so it supplies its own box; (0,2,0) beats the base .run-flow. */
+.run-flow.auto-deciding-host{display:flex;align-items:center;justify-content:center;min-height:120px;padding:24px;width:auto;}
+.auto-deciding{gap:12px;}
+.auto-deciding .auto-deciding-label{font-size:13px;}
 .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) */
@@ -3832,7 +4857,7 @@ input.gv-name:focus-visible{outline:none;}
 .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,.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:var(--on-status);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);}
@@ -3872,10 +4897,26 @@ input.gv-name:focus-visible{outline:none;}
 /* 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;}
+/* gesture hint chip (D10) */
+.rg-hint{position:absolute;left:12px;bottom:10px;padding:4px 9px;border-radius:999px;background:color-mix(in srgb, var(--ink) 72%, transparent);color:var(--on-ink);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;}
+/* The whole monitor canvas is a pan surface (drag from a card, a wire or the
+   void), so the stage AND the card body advertise `grab`. Everything is scoped
+   to .gv-wrap-monitor (D19): `gv-host` is on the Running LIST CARD's host too,
+   and that preview has no gestures at all. `cursor` is inherited only by
+   children that declare none, and the cards do — :4346 default, :4360/:4368
+   pointer, :4391 History's pointer — so a live pan says `grabbing` through the
+   house blanket idiom (`X, X *{… !important}`) rather than a specificity arms
+   race. Measured in Chrome 152: without the blanket the cursor under a dragged
+   card reads `default` while the stage reads `grabbing`. The clickable rows,
+   gate and link keep `pointer` at rest — they are later at equal specificity. */
+.gv-wrap-monitor .run-flow.gv-host .gv-world .node{cursor:grab;}
+.gv-wrap-monitor .run-flow.gv-host .gv-stage{cursor:grab;}
+.gv-wrap-monitor .run-flow.gv-host .gv-stage.panning,.gv-wrap-monitor .run-flow.gv-host .gv-stage.panning *{cursor:grabbing !important;}
+/* The composer's own `.gv-nav` is rail-aware (right:352px). A run wrap has no
+   inspector rail, so the cluster hugs the corner; the hint chip sits bottom-LEFT
+   so the two never overlap. Later in the file AND more specific — either wins. */
+.run-flow-wrap.gv-wrap-monitor > .gv-nav{right:12px;bottom:12px;}
 @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;}
@@ -3893,3 +4934,109 @@ input.gv-name:focus-visible{outline:none;}
 .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);}
+
+/* ---------- per-step artifacts (Phase 3 UI) ---------- */
+/* Run-level grouped browser (Running + History "Artifacts" tab): one card per
+   node, a step header, and clickable artifact rows. Mirrors the .rd-ag-group card
+   shell so the two detail tabs read as one system. */
+.artifact-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
+.artifact-group + .artifact-group{margin-top:14px;}
+.artifact-group-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);}
+.artifact-group-head b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;}
+.artifact-cycle{padding:8px 20px 0;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3);}
+.artifact-empty{padding:18px 20px;color:var(--ink-2);}
+
+/* Per-node affordance inside an Agents-tab group card. */
+.node-artifacts{flex:0 0 100%;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
+.artifact-toggle{appearance:none;border:1px solid var(--line-2);background:var(--field);color:var(--ink);
+  font:600 11.5px var(--sans);padding:4px 12px;border-radius:999px;cursor:pointer;}
+.artifact-toggle:hover{border-color:var(--blue);color:var(--blue-ink);}
+.artifact-toggle[aria-expanded="true"]{background:var(--blue-bg);color:var(--blue-ink);border-color:var(--blue);}
+.artifact-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
+/* An author `display:flex` outranks the UA's `[hidden]{display:none}`, so the
+   collapsed state (`body.hidden = true` in buildNodeArtifactAffordance) must be
+   restated here or the toggle can never close the list. */
+.artifact-list[hidden]{display:none;}
+
+/* A single clickable artifact row (kind chip · name · byte size). */
+.artifact-group .artifact-row{border-top:1px solid var(--line);}
+.artifact-group-head + .artifact-row,.artifact-cycle + .artifact-row{border-top:none;}
+.artifact-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
+  appearance:none;border:none;background:transparent;cursor:pointer;
+  padding:11px 20px;font:500 12.5px var(--sans);color:var(--ink);}
+.artifact-list .artifact-row{padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--field);}
+.artifact-row:hover{background:var(--field);}
+.artifact-list .artifact-row:hover{border-color:var(--blue);}
+.artifact-kind{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
+  padding:2px 8px;border-radius:6px;background:var(--violet-bg);color:var(--violet-ink);}
+.artifact-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.artifact-bytes{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--ink-3);}
+
+/* Typed viewers rendered into the shared #viewer modal by renderArtifact. The
+   host resets the enclosing <pre>'s white-space:pre so each viewer owns its own. */
+.artifact-view{white-space:normal;}
+.artifact-text,.artifact-json,.artifact-diff{margin:0;font-family:var(--mono);font-size:12px;line-height:1.55;
+  white-space:pre-wrap;word-break:break-word;color:var(--ink);}
+.artifact-diff{white-space:pre;overflow-x:auto;}
+.artifact-diff-line{display:block;}
+.artifact-diff-line.add{background:var(--green-bg);color:var(--green-ink);}
+.artifact-diff-line.del{background:var(--red-bg);color:var(--red-ink);}
+.artifact-diff-line.hunk{color:var(--blue-ink);background:var(--field);}
+.artifact-diff-line.meta{color:var(--ink-3);}
+.artifact-markdown{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink);}
+.artifact-markdown h1,.artifact-markdown h2,.artifact-markdown h3{line-height:1.3;margin:1em 0 .5em;}
+.artifact-markdown pre{background:var(--field);border:1px solid var(--line);border-radius:10px;
+  padding:12px;overflow-x:auto;font-family:var(--mono);font-size:12px;}
+.artifact-markdown code{font-family:var(--mono);font-size:.92em;}
+.artifact-markdown :not(pre) > code{background:var(--field);border-radius:5px;padding:1px 5px;}
+.artifact-markdown a{color:var(--blue-ink);}
+.artifact-markdown table{border-collapse:collapse;}
+.artifact-markdown th,.artifact-markdown td{border:1px solid var(--line-2);padding:5px 9px;}
+
+/* ---- Report this run modal ---- */
+/* Wider than a confirm (it carries a JSON preview), narrower than the viewer. */
+.report-modal .card{width:min(680px,100%);}
+/* Every action lives in a sticky header instead of at the foot of a scrolling card.
+   The card is the scroll container (.viewer-modal .card{overflow:auto}), so `top:0`
+   sticks to its padding edge; the negative margins pull the block out over the card's
+   24px padding so its opaque background covers the full width AND the strip above it,
+   which the JSON preview would otherwise scroll through. The radius keeps it from
+   painting square corners over the card's rounded ones. */
+/* top:-24px, not 0. A sticky element clamps at the SCROLLPORT's top inset, which for
+   this card is its padding edge — 24px below the border. At top:0 the block pins there
+   and the 24px strip above it stays transparent, so the form scrolls through it in
+   plain sight (measured over CDP: the opt-in labels showed above the title). Pulling
+   the inset up by exactly the card's padding pins the block flush to the border edge
+   instead, where its own background covers the strip. */
+.report-modal .report-top{position:sticky;top:-24px;z-index:2;background:var(--panel);
+  margin:-24px -24px 16px;padding:24px 24px 14px;border-bottom:1px solid var(--line);
+  border-radius:var(--r-card) var(--r-card) 0 0;}
+/* The error/filed slots carry their own top margin, and the header's padding closes
+   the block — a margin here would only add a gap when both are hidden, which is most
+   of the time. */
+.report-modal .report-top .card-head{margin-bottom:0;}
+.report-head-actions{display:flex;align-items:center;gap:9px;}
+/* Wrap rather than overflow the 680px card on a narrow window. */
+.report-modal .confirm-actions{flex-wrap:wrap;}
+.report-field{margin-bottom:14px;}
+.report-field > label{display:block;font-weight:600;font-size:12.5px;margin-bottom:6px;}
+.report-field textarea.textarea{resize:vertical;min-height:64px;font-size:13.5px;}
+.report-modal #report-preview{max-height:300px;margin:0;font-size:12px;}
+.report-optins .confirm-checkbox + .confirm-checkbox{margin-top:8px;}
+.report-optin-hint{display:block;margin-top:3px;color:var(--ink-2);font-size:11.5px;line-height:1.4;}
+.report-error{margin:10px 0 0;color:var(--red-ink);font-size:12.5px;}
+.report-error[hidden]{display:none;}
+.report-filed{margin:10px 0 0;font-size:12.5px;}
+.report-filed[hidden]{display:none;}
+/* The issue link is an <a> so it opens in a real new tab; keep it button-shaped.
+   SCOPED to .report-modal: an unscoped `.confirm-actions a.btn` would reach into every
+   confirm/export/stop dialog in the app, and the :not([href]) rule below would silently
+   grey out any future anchor another modal adds before it has an href. */
+.report-modal .confirm-actions a.btn{display:inline-flex;align-items:center;text-decoration:none;}
+/* …but an author `display` beats the UA's `[hidden]{display:none}` at any specificity,
+   so the rule above would render the fallback link while app.js believes it is hidden.
+   (`el.hidden` is true, the element is on screen — jsdom cannot see this, CDP can.) */
+.report-modal .confirm-actions a.btn[hidden]{display:none;}
+/* No href => the preview is still building. Make that legible rather than letting a
+   dead-looking button sit there (D24). */
+.report-modal .confirm-actions a.btn:not([href]){opacity:.5;pointer-events:none;}