create-pmos 0.13.0 → 0.15.0

package/workspace/public/styles.css

@@ -82,6 +82,7 @@
   --success-wash:color-mix(in oklab, var(--success) 10%, transparent);
   --warning-wash:color-mix(in oklab, var(--warning) 10%, transparent);
   --info-wash:color-mix(in oklab, var(--info) 10%, transparent);
+  --destructive-wash:color-mix(in oklab, var(--destructive) 8%, transparent);
 
   --glass:color-mix(in oklab, var(--background) 80%, transparent);
   --shadow:oklch(0.148 0.004 228.8 / 0.18);
@@ -105,11 +106,22 @@
      sans scale and mono is reserved for things that ARE code: the terminal, paths, branches,
      diffs, code spans. ── */
   --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px;
+  /* Half-steps the design reference uses between those rungs. They are named for the ROLE they
+     play rather than continuing the t-shirt scale, because that is what they are: a fixed set of
+     jobs in the navigator and the detail panel, not a general-purpose ladder. Anything outside
+     those jobs should reach for a rung above, not add a step here. */
+  --text-label:9.5px;     /* uppercase field labels — "evals", "sessions", "artifacts"          */
+  --text-tiny:10px;       /* section captions and stage keys                                    */
+  --text-meta:10.5px;     /* mono ids, counts, pills, badges                                    */
+  --text-row:11.5px;      /* the second line of a list row                                      */
+  --text-body:12.5px;     /* panel prose and session names                                      */
+  --text-title:15px;      /* the initiative name at the head of the detail panel                */
+  --text-doc:21px;        /* an <h1> inside a rendered document                                 */
   --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
   --sans:"Space Grotesk Variable",ui-sans-serif,system-ui,-apple-system,sans-serif;
 
   /* layout knobs the JS adjusts (rail width, library/document split) */
-  --rail-w:400px; --libsplit:44%;
+  --rail-w:400px;
 
   /* xterm palette tokens — the single source for the JS terminal theme (xtheme()). Dark in BOTH
      themes by design; the terminal is a terminal, not a themed surface. Concrete hex only (see
@@ -156,6 +168,7 @@
   --success-wash:color-mix(in oklab, var(--success) 10%, transparent);
   --warning-wash:color-mix(in oklab, var(--warning) 10%, transparent);
   --info-wash:color-mix(in oklab, var(--info) 10%, transparent);
+  --destructive-wash:color-mix(in oklab, var(--destructive) 12%, transparent);
 
   --glass:color-mix(in oklab, var(--background) 78%, transparent);
   --shadow:oklch(0 0 0 / 0.6);
@@ -180,7 +193,12 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 /* The rows are fixed and the middle row is minmax(0,1fr): without the 0 minimum a tall column
    (a long needs strip, a long document) grows the row past the viewport and body{overflow:hidden}
    silently clips the BOTTOM OF THE TERMINAL. Every nested column repeats the min-height:0. */
-.app{display:grid; grid-template-rows:44px minmax(0,1fr) 28px; height:100vh; height:100dvh}
+/* The COLUMN track is declared for the same reason the rows are. An implicit `auto` column sizes
+   to its widest child's min-content, so any pane that cannot shrink — a long branch chip, a deeply
+   indented navigator row — widens the whole shell and the status strip runs off the right edge of
+   a phone. minmax(0,…) makes the shell the authority on its own width. */
+.app{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:44px minmax(0,1fr) 28px;
+  height:100vh; height:100dvh}
 
 /* ── top bar ── */
 /* position+z-index so the header's own popover (the layout menu) paints ABOVE the body: the two
@@ -221,13 +239,33 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
   min-height:0}
 .side{grid-area:side} .term-col{grid-area:term} .rail{grid-area:read}
 .body[data-side="off"]>.side{display:none}
-.body[data-reader="off"]>.rail{display:none}
-/* docked bottom, the reader is a wide short pane under the terminal, not a column beside it */
-.body[data-reader="bottom"]>.rail{border-left:0;border-top:1px solid var(--border)}
-.body[data-reader="bottom"] .railgrip{display:none}
+
+/* ── collapsed column rails ────────────────────────────────────────────────────────────────
+   Collapsing is NOT the same verb as the layout system's `off`. `off` removes a column's track
+   entirely and is reached from the layout menu; collapse keeps the track at 36px and leaves a
+   labelled edge you click to get back. The distinction matters because the label is what makes
+   the column recoverable without opening a menu — a pane that vanishes with no visible way back
+   is the failure the layout engine's hasEscape() exists to prevent, and a collapse control has
+   to hold to the same standard. The rail is a real <button>, so it is tabbable and screen
+   readers announce it; the rotated text is decoration over an aria-label, never the only name. */
+/* MUST come before the `display:flex` below, and must exist at all: a rule that sets `display`
+   silently defeats the UA's `[hidden]{display:none}`, so both rails stayed in the grid as extra
+   implicit columns and pushed the app 405px wider than the viewport at 1024px. */
+.colrail[hidden]{display:none}
+.colrail{grid-row:1;background:var(--sidebar);border-right:1px solid var(--border);
+  display:flex;justify-content:center;padding-top:14px;min-width:0;
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.colrail:hover{background:var(--accent)}
+.colrail>span{writing-mode:vertical-rl;font-size:var(--text-2xs);letter-spacing:.1em;
+  color:var(--muted-foreground);font-family:var(--mono);white-space:nowrap}
+#col1Rail{grid-area:side} #col2Rail{grid-area:read}
+.body[data-col1="closed"]>.side,.body[data-col2="closed"]>.rail{display:none}
+/* the resize grips belong to an expanded column; a 36px rail has nothing to resize */
+.body[data-col1="closed"] #sideEdge,.body[data-col2="closed"] .railgrip{display:none}
 .body[data-side="right"]>.side{border-right:0;border-left:1px solid var(--border)}
-.body[data-reader="left"]>.rail{border-left:0;border-right:1px solid var(--border)}
-.body[data-reader="left"] .railgrip{left:auto;right:-3px}
+/* the panel sits between the structure column and the terminal, so its own edge is the LEFT one */
+.rail{border-left:0;border-right:1px solid var(--border)}
+.railgrip{left:auto;right:-3px}
 
 /* ── left column: the workspace — repos over running agents. Both panes fold and the column
    resizes, which is the parity the rail always had and this one never did (R11). ── */
@@ -365,6 +403,10 @@ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 
 /* one line, always: at 13px the full label wraps inside a 262px sidebar and the dashed box grows
    into a two-line slab. It ellipsizes instead — the ＋ and the first words carry the meaning. */
+/* `display:flex` beats the UA's `[hidden]{display:none}`, so hiding this from JS silently did
+   nothing — the composer stayed on screen in every mode. Any rule that sets `display` on an
+   element the code also hides has to opt back into it explicitly. */
+.newsess[hidden]{display:none}
 .newsess{display:flex;gap:8px;align-items:center;margin:10px 12px 4px;min-height:38px;padding:0 12px;
   border:1px dashed var(--border);border-radius:var(--radius-md);font-size:var(--text-xs);
   color:var(--muted-foreground);width:calc(100% - 24px);
@@ -496,6 +538,14 @@ details.hz .kv .src{font-family:var(--mono);font-size:var(--text-2xs);color:var(
 .term-col{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--term-bg)}
 /* Terminal GROUPS (R6): one by default, two side by side when the layout says split. Each group
    owns a tab strip and a host; the #needs strip and the scratchpad stay with the column. */
+/* Third rule in this file to need an explicit [hidden] because it sets `display` — the UA's
+   `[hidden]{display:none}` loses to any author display declaration, so hiding this from JS was
+   silently a no-op and the viewer opened UNDER a full-height terminal box. */
+/* When a viewer tab is active the groups box collapses to just its tab strips: the terminals are
+   covered, never unmounted, so scrollback and PTYs survive, and the strip that got you here stays
+   on screen. A viewer that hides the strip hides its own way back. */
+.groups[data-viewer="on"]{flex:none}
+.groups[data-viewer="on"] .termhost{display:none}
 .groups{flex:1;min-height:0;min-width:0;display:flex;flex-direction:row}
 .group{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--term-bg)}
 .group[hidden]{display:none}
@@ -575,28 +625,24 @@ color:var(--muted-foreground);font-size:var(--text-sm);margin-right:4px}
 .gbtn.primary{border-color:var(--warning)} .needs.accept .gbtn.primary{border-color:var(--info)}
 .wpath{width:100%;font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px}
 
-/* ── right rail: the library over the document reader ── */
+/* ── the detail-panel column. It held the library OVER a document reader; documents are tabs in
+   the terminal column now (workspace-viewer-column), so this is one pane. ── */
 .rail{border-left:1px solid var(--input);background:var(--sidebar);position:relative;
   display:flex;flex-direction:column;min-height:0;min-width:0}
 /* drag the rail's own edge — a document read at 340px is a column of ten words */
 .railgrip{position:absolute;left:-4px;top:0;bottom:0;width:8px;z-index:5;cursor:col-resize}
 .railgrip::after{content:"";position:absolute;inset:0 3px;border-radius:var(--radius-sm);background:transparent}
 .railgrip:hover::after,.railgrip:focus-visible::after{background:var(--brand)}
-.rail .lib-pane{flex:1 1 var(--libsplit);min-height:34px}
-.rail .doc-pane{flex:1 1 calc(100% - var(--libsplit));min-height:34px}
-.rail .doc-pane[hidden]{display:none}
+.rail .lib-pane{flex:1 1 auto;min-height:34px}
 .rail .pane[data-fold="off"]{flex:0 0 auto}
-.railsplit{flex:none;height:7px;cursor:row-resize;background:var(--muted);
-  border-block:1px solid var(--border);position:relative}
-.railsplit[hidden]{display:none}
-.railsplit::after{content:"";position:absolute;inset:2px 42% 2px 42%;border-radius:var(--radius-sm);background:var(--input)}
-.railsplit:hover::after,.railsplit:focus-visible::after{background:var(--brand)}
+
 
 /* library — two lenses over one file set: initiatives (how the PM thinks) / folders (how the
    repo is laid out). The initiative lens joins a unit of work's scattered artifacts. */
 /* shadcn Tabs: an inset --muted track, the selected lens lifted onto --background. Four lenses
    have to survive a narrow rail, so the group is allowed to SHRINK and scroll rather than push
    the refresh control off the end of the header — which is what a fixed-width group did. */
+.lens[hidden],.libfind[hidden],.reading[hidden],.librefresh[hidden]{display:none}
 .lens{margin-left:auto;display:inline-flex;gap:2px;border-radius:var(--radius-md);
   background:var(--muted);padding:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
 .lens::-webkit-scrollbar{display:none}
@@ -664,19 +710,23 @@ details.tree>summary:hover{color:var(--foreground)}
 .empty{padding:10px 16px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
 .empty b{color:var(--foreground)}
 
-/* ── the document reader (bottom of the rail) ── */
-.doc-pane .cap{padding-right:6px;gap:6px}
+/* ── the viewer: documents, images and summoned surfaces, as tabs in the terminal column ── */
+.viewpane{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--background)}
+.viewpane[hidden]{display:none}
+.viewpane>.cap{flex:none}
+
+.viewpane .cap{padding-right:6px;gap:6px}
 /* the crumb is a FILE PATH — mono earns its place. It yields space to the controls beside it
    rather than shouldering them off the end of the header. */
-.doc-pane .crumb{margin-left:auto;font-family:var(--mono);font-size:var(--text-2xs);
+.viewpane .crumb{margin-left:auto;font-family:var(--mono);font-size:var(--text-2xs);
   color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
   direction:rtl;text-align:right;max-width:50%;min-width:0;flex:0 1 auto}
 /* `ghost` icon button, matching the other cap controls instead of being the one outlined box */
-.doc-pane .x{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm);
+.viewpane .x{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm);
   border:0;background:transparent;color:var(--muted-foreground);font-size:var(--text-sm);
   transition:background-color var(--duration-fast) var(--ease-emphasized),
              color var(--duration-fast) var(--ease-emphasized)}
-.doc-pane .x:hover{background:var(--destructive);color:var(--primary-foreground)}
+.viewpane .x:hover{background:var(--destructive);color:var(--primary-foreground)}
 .doc-body{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;
   padding:18px 22px 64px;line-height:1.65;font-size:14px;color:var(--foreground)}
 .doc-body>*{max-width:72ch}
@@ -948,13 +998,11 @@ details.tree>summary:hover{color:var(--foreground)}
 
 /* Narrow: the rail floats over the terminal instead of squeezing it below a usable width. */
 @media (max-width:1100px){
-  /* applyLayout() drops the reader's track from the template at this width and sets data-float,
-     so the grid here is sidebar + terminal and the reader floats over the terminal rather than
-     squeezing it below a usable width. Docked BOTTOM it keeps its row and does not float. */
-  .body[data-float="on"]>.rail{position:absolute;top:0;right:0;bottom:0;left:auto;
-    width:min(420px,86vw);z-index:30;box-shadow:-18px 0 50px -30px var(--shadow)}
-  .body[data-float="on"][data-reader="left"]>.rail{right:auto;left:0;
-    box-shadow:18px 0 50px -30px var(--shadow)}/* Split is forced OFF below this width by applyLayout() — two terminal groups inside what is
+  /* applyLayout() drops the panel's track from the template at this width and sets data-float, so
+     the grid here is sidebar + terminal and the panel floats over the terminal rather than
+     squeezing it below a usable width. */
+  .body[data-float="on"]>.rail{position:absolute;top:0;bottom:0;left:0;right:auto;
+    width:min(420px,86vw);z-index:30;box-shadow:18px 0 50px -30px var(--shadow)}/* Split is forced OFF below this width by applyLayout() — two terminal groups inside what is
      left of a narrow window is two unusable terminals. The layout menu says so rather than
      silently ignoring the choice (R9). */
   .lay-narrow{display:block}
@@ -990,41 +1038,110 @@ details.tree>summary:hover{color:var(--foreground)}
 .html-pane{min-height:0}
 .html-frame{width:100%;min-height:60vh;border:1px solid var(--border);border-radius:var(--radius-md);
   background:white}   /* a standalone HTML doc assumes a light page; keyword, not hex (token-hygiene) */
-/* ── mobile (≤760px): one column at a time + a bottom switcher; the terminal is the priority pane.
+/* ── mobile (≤760px): ONE screen at a time — a back control at the top, a destination nav at the
+   bottom, and exactly one of the three real column nodes on screen.
+   The columns are never re-parented and never rebuilt; a screen chooses WHICH ONE is visible
+   through `data-mscreen` on #bodyGrid — the same node and the same mechanism the retired
+   `data-mview` used, renamed because the values now name a COLUMN (`side`/`term`/`rail`) rather
+   than a tab. That is what makes a pushed screen, a pop and a destination switch survive without
+   destroying the xterm instance or its PTY socket: the terminal is covered, never unmounted.
+   `.mobtabs` is gone — rule and markup. A bottom destination nav with a leftover three-tab strip
+   underneath it is two navigation systems at once, which is the exact condition the old partition
+   check existed to prevent; keeping it alive as a shim would fail the thing it was protecting.
+   Touch targets ≥44px; the control bar sends the keys a phone keyboard lacks straight to the PTY.
    The 3-column desktop layout above is untouched at wide widths — everything here is inside the
-   ≤760 query (or the .mobmenu, which is display:none until then). Touch targets ≥44px; the control
-   bar sends the keys a phone keyboard lacks straight to the PTY. ── */
+   ≤760 query, or is a `display:none` above it (.mobmenu, .mob). ── */
 .mobmenu{display:none}
+/* Above the breakpoint the phone bar is ABSENT rather than merely invisible (R12): this removes
+   its box, and app.js leaves the `hidden` attribute on so it is out of the accessibility tree too.
+   Both, not either — a node that is only `hidden` still loses to any author `display` below. */
+.mob{display:none}
 @media (max-width:760px){
-  /* an extra row above the status strip carries the control bar + switcher */
-  .app{grid-template-rows:44px minmax(0,1fr) auto 28px}
+  /* five rows now: top bar · phone bar · content · control bar + destination nav · status strip.
+     `height:100dvh` is load-bearing rather than decorative here — when the soft keyboard opens the
+     visual viewport shrinks and the grid shrinks with it, so the destination nav stays on screen
+     instead of sitting underneath the keys. */
+  .app{grid-template-rows:44px auto minmax(0,1fr) auto 28px;height:100dvh}
+  /* Placed EXPLICITLY rather than left to auto-placement. #mobShell ships `hidden` and only app.js
+     takes the attribute off, so at this width the shell may legitimately be out of flow for a tick
+     — and under auto-placement that shifts .body up into the `auto` row and hands minmax(0,1fr) to
+     the control bar, which collapses the terminal to nothing. Naming the rows makes the phone
+     layout independent of how many of these five children happen to be in flow. */
+  .app>.bar{grid-row:1}
+  .app>.mob{grid-row:2}
+  .app>.body{grid-row:3}
+  .app>.mobmenu{grid-row:4}
+  .app>.strip{grid-row:5}
   /* collapse to a single column; the switcher decides which pane is shown. These are DIRECT
      declarations and the layout writes custom properties, so the phone's arrangement wins here
      whatever layout the desktop is on — the two systems never fight (R9). */
-  .body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);grid-template-areas:none;position:relative}
+  /* minmax(0,1fr), not 1fr: a bare `1fr` is minmax(AUTO,1fr) and refuses to go below the pane's
+     min-content width, which is what pushed the whole app sideways once the navigator gained a
+     nesting level. The row track already had this; the column was the half that was missing. */
+  .body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:none;position:relative}
   /* the named areas are gone here, so the panes must stop asking for them — a stale `grid-area`
      places them on implicit tracks and the pane spills over the switcher it is covering */
   .body>.side,.body>.term-col,.body>.rail,.body>.drop{grid-area:auto}
+  /* THE column switch, and the whole of the exclusivity guarantee. Two of the three are
+     `display:none` at any moment, so "exactly one column has a non-zero client rect" is a property
+     of this stylesheet rather than something the reducer has to remember to enforce. A screen's
+     `column` is derived from its `kind` — list/more → side · detail → rail · terminal/doc → term —
+     so every screen the reducer can reach lands on one of these three values and no other.
+     These are DIRECT declarations and the layout engine writes custom properties, so the phone's
+     arrangement wins here whatever layout the desktop is on — the two systems never fight (R9). */
   .body>.side,.body>.term-col,.body>.rail{display:none}
-  .body[data-mview="sessions"]>.side{display:flex}
-  .body[data-mview="terminal"]>.term-col{display:flex}
-  .body[data-mview="library"]>.rail,
-  .body[data-reader="off"][data-mview="library"]>.rail{display:flex}
+  .body[data-mscreen="side"]>.side{display:flex}
+  .body[data-mscreen="term"]>.term-col{display:flex}
+  .body[data-mscreen="rail"]>.rail{display:flex}
   /* the rail is a full-width pane here, not the floating overlay the ≤1100 rule makes it */
   .body[data-float="on"]>.rail,.rail{position:static;width:auto;box-shadow:none;z-index:auto;
     border-left:0;border-top:0}
-  .railgrip,.railsplit,.side>.edge{display:none}  /* edge-drag is a pointer affordance; the switcher owns layout on touch */
+  .railgrip,.side>.edge{display:none}  /* edge-drag is a pointer affordance; the switcher owns layout on touch */
   .cap .grip,.lay-chip{display:none}              /* and so is the whole layout control (R9) */
   .side>.pane{flex:1 1 0}
   /* one group on a phone, always — the split is a desktop arrangement */
   .groups{flex-direction:column}
   .group+.group{display:none}
 
-  /* the mobile menu: a terminal control bar (terminal view only) over the pane switcher */
-  /* min-width:0 lets this grid item shrink below its content min-size, so the control bar's
-     fixed-width buttons scroll inside it instead of widening the whole page */
+  /* ── the phone's top bar: back · the screen's name · theme ──────────────────────────────────
+     Safe-area insets at BOTH ends. The shipped rule padded only the bottom, which is half the
+     problem: on a notched device a bar pinned to the top of the viewport sits UNDER the notch, so
+     the back control becomes unpressable. `min-height` includes the inset (box-sizing is
+     border-box everywhere here), so the row itself stays a full 44px below it rather than being
+     squeezed into whatever the notch leaves. The horizontal insets matter in landscape, where the
+     rounded corners eat the two ends of the bar. */
+  .mob{display:block}
+  .mob-bar{display:flex;align-items:center;gap:8px;
+    min-height:44px;padding:0 10px;   /* the plain fallback: a browser without env() drops the
+                                         declaration below entirely, and a bar with no padding at
+                                         all is worse than one that ignores the notch */
+    min-height:calc(44px + env(safe-area-inset-top));
+    padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
+    background:var(--glass);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
+  /* back is `hidden` at a destination root and pops exactly one screen otherwise. It is not
+     disabled-and-inert at a root: a control that looks available and does nothing is the thing
+     this workspace refuses to ship, so it is absent instead. */
+  .mob-back{flex:none;min-width:44px;min-height:44px;margin-left:-6px;
+    color:var(--muted-foreground);font-size:var(--text-lg);line-height:1}
+  .mob-back:active{color:var(--foreground)}
+  /* the title ELLIPSIZES rather than pushing the bar sideways — a session name or a document title
+     is arbitrary length and the two controls beside it must stay where the thumb expects them. */
+  .mob-title{flex:1;min-width:0;font-size:var(--text-base);font-weight:600;letter-spacing:-.01em;
+    color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  /* `flex:none` on both trailing controls, so the ellipsizing title above yields to them rather
+     than the other way round — that is what keeps the palette on screen at 390px. */
+  .mob-pal,.mob-theme{flex:none;min-width:44px;min-height:44px;padding:0 8px;
+    color:var(--muted-foreground);font-size:var(--text-xs)}
+  .mob-pal:active,.mob-theme:active{color:var(--foreground)}
+
+  /* the mobile menu: a terminal control bar (terminal screen only) over the destination nav.
+     min-width:0 lets this grid item shrink below its content min-size, so the control bar's
+     fixed-width buttons scroll inside it instead of widening the whole page.
+     The other end of the safe area lives here rather than on the nav, so the control bar gets the
+     insets too — in landscape the rounded corners clip both. */
   .mobmenu{display:block;min-width:0;background:var(--muted);border-top:1px solid var(--border);
-    padding-bottom:env(safe-area-inset-bottom)}
+    padding-bottom:env(safe-area-inset-bottom);
+    padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
   .ctrlbar{display:none;min-width:0;gap:5px;padding:6px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
     border-bottom:1px solid var(--border)}
   .mobmenu[data-view="terminal"] .ctrlbar{display:flex}
@@ -1034,13 +1151,20 @@ details.tree>summary:hover{color:var(--foreground)}
   .ctrlbar button:active{background:var(--accent)}
   .ctrlbar button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
   .ctrlbar .lbl{font-size:var(--text-xs);letter-spacing:.04em}
-  .mobtabs{display:flex}
-  .mobtabs button{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
-    gap:2px;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;color:var(--muted-foreground);
-    border-top:2px solid transparent;background:var(--muted)}
-  .mobtabs button+button{border-left:1px solid var(--border)}
-  .mobtabs button[aria-selected="true"]{color:var(--brand);border-top-color:var(--brand);background:var(--accent)}
-  @media (prefers-reduced-motion:reduce){.mobtabs button,.ctrlbar button{transition:none}}
+  /* Five destinations. `flex:1 1 0` with `min-width:0` is what lets "scheduled" sit beside four
+     others at 390px: the buttons share the width evenly and a label that still does not fit
+     ellipsizes inside its own button rather than widening the row. No glyph child — the LABEL is
+     the affordance, and a five-way icon row on a phone is a guessing game. */
+  .mobnav{display:flex;min-width:0}
+  .mobnav-b{flex:1 1 0;min-width:0;min-height:52px;padding:0 4px;background:var(--muted);
+    border-top:2px solid transparent;color:var(--muted-foreground);font-size:var(--text-2xs);
+    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .mobnav-b+.mobnav-b{border-left:1px solid var(--border)}
+  /* current is carried on THREE channels — the top bar (a shape), the weight, and the hue — so
+     which destination you are on survives being read without colour. */
+  .mobnav-b[aria-current="page"]{color:var(--brand);border-top-color:var(--brand);
+    background:var(--accent);font-weight:600}
+  @media (prefers-reduced-motion:reduce){.mobnav-b,.ctrlbar button{transition:none}}
 
   /* the header must fit a phone: drop the desktop "workspace" tag and let the status text ellipsize */
   .bar{gap:7px;padding:0 10px}
@@ -1051,6 +1175,18 @@ details.tree>summary:hover{color:var(--foreground)}
   .strip .right{display:none}
 }
 
+/* R8 — hover-only reveals. `opacity:0` plus a `:hover` rule leaves a touch user with a control
+   that exists, is focusable, and can never be seen: there is no hover to trigger. A coarse pointer
+   gets them at full opacity instead.
+   Keyed on (hover:none) rather than on a width, because a tablet at 900px has no hover either —
+   this is a property of the POINTER, and tying it to the phone breakpoint would leave exactly the
+   devices in between broken. Both `.wsrow .forget` and `.treerow .forget` are listed: the first is
+   the repo row's affordance and the second is the tree row's, and which of the two survives
+   §4.3's deletion of renderWorkspaces is not decidable from this file. */
+@media (hover:none){
+  .wsrow .forget,.treerow .forget,.sessrow .ren{opacity:1}
+}
+
 /* ── console surfaces (D64 Track B): needs-you · radar · metrics over file-mode state ────────── */
 /* Honesty by construction: error is unmistakably RED (--bad), empty is CALM (--teal), the loading
    skeleton (.sf-skel, reused) is neither. A broken read can only ever draw .cs-error. */
@@ -1442,3 +1578,681 @@ line-height:1.35;cursor:pointer}
 /* `n/a for this lane` must never look like `missing` — that difference is the whole of R8 */
 .dz-na{font-size:var(--text-2xs);color:var(--muted-foreground);font-style:italic;line-height:1.5;
   padding:2px 0 4px}
+
+/* ── the PM spine (workspace-pm-spine) ─────────────────────────────────────────────────────────
+   The resident navigator: Objective → Key Result → Initiative, with working trees and sessions
+   nested INSIDE an initiative as attributes of it. Indentation carries the containment, so the
+   levels are distinguished by weight and colour rather than by boxes — a box per level at four
+   levels deep is a wall. Every value here comes from the merged token layer; token-hygiene fails
+   the build on a raw hex. */
+.sp-obj{margin-bottom:10px}
+.sp-o{display:flex;align-items:baseline;gap:8px;padding:7px 10px 5px;position:sticky;top:0;z-index:1;
+  background:var(--sidebar);border-bottom:1px solid var(--border)}
+.sp-o .id{font-family:var(--mono);font-size:var(--text-2xs);font-weight:600;color:var(--foreground);flex:none}
+.sp-o .nm{font-size:var(--text-xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sp-o .ct{margin-left:auto;font-size:var(--text-2xs);color:var(--muted-foreground);background:var(--muted);
+  border-radius:var(--radius-sm);padding:1px 6px;flex:none}
+/* health budgets are PEERS of objectives (D59), marked by hue, not by demotion */
+.sp-obj[data-health="1"] .sp-o .id{color:var(--info)}
+.sp-obj[data-warn="1"] .sp-o .id{color:var(--warning)}
+.sp-obj[data-plain="1"] .sp-o .id{color:var(--muted-foreground)}
+
+.sp-kr{margin:0 0 2px}
+.sp-k{display:flex;align-items:baseline;gap:7px;padding:5px 10px 4px 18px}
+.sp-k .id{font-family:var(--mono);font-size:var(--text-2xs);color:var(--brand);flex:none}
+.sp-k .nm{font-size:var(--text-2xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sp-k .ct{margin-left:auto;font-size:var(--text-2xs);color:var(--muted-foreground);flex:none}
+
+/* the initiative — the unit of record, and now the unit you select */
+.sp-init{margin:0 0 1px}
+.sp-i{display:block;width:100%;text-align:left;padding:5px 10px 5px 26px;border-left:2px solid transparent;
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.sp-i:hover{background:var(--accent)}
+.sp-init[data-current="1"]>.sp-i{background:var(--accent);border-left-color:var(--brand)}
+.sp-i .r1{display:flex;align-items:baseline;gap:7px;min-width:0}
+.sp-i .nm{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sp-i .lane{font-size:var(--text-2xs);color:var(--muted-foreground);flex:none}
+/* an initiative with no checkout is a NORMAL state — it reads quiet, never as a fault */
+.sp-i .noit{margin-left:auto;font-size:var(--text-2xs);color:var(--muted-foreground);flex:none;font-style:italic}
+.sp-i .onit{margin-left:auto;font-size:var(--text-2xs);color:var(--muted-foreground);flex:none}
+.sp-i .r2{display:flex;align-items:baseline;gap:8px;margin-top:2px;font-size:var(--text-2xs)}
+.sp-i .stg{color:var(--muted-foreground)}
+.sp-i .nx{color:var(--brand)}
+.sp-i .bl{color:var(--destructive)}
+.sp-i .drv,.sp-i .rsn{color:var(--muted-foreground);font-style:italic;overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+/* trees nested under their initiative: the demotion made visible */
+.sp-trees{padding-left:10px}
+.sp-trees:empty{display:none}
+
+/* R5 — a FAILED spine read is unmistakably red and says why. It is never a green empty tree. */
+.sp-bad{margin:8px 10px;padding:10px 12px;border:1px solid var(--destructive);border-radius:var(--radius-md);
+  background:var(--destructive-wash);display:flex;flex-direction:column;gap:5px}
+.sp-bad b{font-size:var(--text-xs);color:var(--destructive)}
+.sp-bad span{font-size:var(--text-2xs);color:var(--foreground);line-height:1.5}
+.sp-bad .why{color:var(--muted-foreground)}
+
+/* ── the initiative's sessions, inside its own panel (workspace-pm-spine) ──────────────────────
+   The work happening ON an initiative belongs beside its ladder, not only under the checkout that
+   happens to carry the branch. Selecting one here is what puts it in the terminal column. */
+.dz-sess{margin:14px 0 4px}
+.dz-cap{display:flex;align-items:baseline;gap:7px;font-size:var(--text-xs);font-weight:500;
+  color:var(--muted-foreground);margin-bottom:6px}
+.dz-cap .ct{font-size:var(--text-2xs);background:var(--muted);border-radius:var(--radius-sm);padding:1px 6px}
+.dz-s{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;padding:6px 9px;
+  border-radius:var(--radius-sm);border-left:2px solid transparent;
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.dz-s:hover{background:var(--accent)}
+.dz-s[aria-current="true"]{background:var(--accent);border-left-color:var(--brand)}
+.dz-s .g{flex:none;font-size:var(--text-2xs)}
+.dz-s[data-state="working"] .g{color:var(--success)}
+.dz-s[data-state="quiet"] .g{color:var(--warning)}
+.dz-s[data-state="needs"] .g{color:var(--brand)}
+.dz-s[data-state="blocked"] .g{color:var(--destructive)}
+.dz-s[data-state="exited"] .g,.dz-s[data-state="idle"] .g{color:var(--muted-foreground)}
+.dz-s .nm{font-size:var(--text-sm);color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dz-s .st{margin-left:auto;flex:none;font-size:var(--text-2xs);color:var(--muted-foreground);white-space:nowrap}
+/* an initiative with no tree or no sessions is a NORMAL state and reads as prose, not as an error */
+.dz-nosess{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.55;padding:2px 0 4px}
+.dz-nosess b{font-family:var(--mono);color:var(--foreground);font-weight:400}
+.dz-start{display:inline-flex;align-items:center;margin-top:6px;min-height:30px;padding:0 11px;
+  border:1px dashed var(--border);border-radius:var(--radius-md);font-size:var(--text-xs);
+  color:var(--muted-foreground);
+  transition:color var(--duration-fast) var(--ease-emphasized),border-color var(--duration-fast) var(--ease-emphasized)}
+.dz-start:hover{color:var(--foreground);border-color:var(--ring)}
+
+/* ── the destinations (workspace-pm-spine) ────────────────────────────────────────────────────
+   ON TOP OF the initiative list they scope, not a separate nav column. Everything here is
+   PRODUCT-SPECIFIC — knowledge and scheduled tasks belong to the repository in view — so the menu
+   sits inside the product's own column, where its scope cannot be misread. */
+.spmenu{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:8px 10px 8px;
+  border-bottom:1px solid var(--border)}
+/* min-height 44px is the touch target, and it is what makes the two-row grid square up. These
+   are MODES, not links: one is always current, so the pressed state is `aria-pressed`, styled
+   here rather than left to the browser's default (which is nothing on a custom button). */
+.spm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
+  padding:7px 2px 6px;min-height:44px;
+  border-radius:var(--radius-md);color:var(--muted-foreground);
+  transition:background-color var(--duration-fast) var(--ease-emphasized),
+             color var(--duration-fast) var(--ease-emphasized)}
+.spm:hover{background:var(--accent);color:var(--accent-foreground)}
+.spm[aria-pressed="true"]{background:var(--accent);color:var(--foreground)}
+.spm .g{font-size:var(--text-base);line-height:1}
+.spm .l{font-size:var(--text-tiny);letter-spacing:.01em;line-height:1}
+
+/* ── column 1: the search box, and the lists each mode renders ─────────────────────────────── */
+.spfind-wrap{padding:10px 12px 6px}
+.spfind{display:flex;align-items:center;gap:8px;padding:7px 10px;min-height:34px;
+  border:1px solid var(--input);border-radius:var(--radius-md);background:var(--background);
+  transition:border-color var(--duration-fast) var(--ease-emphasized)}
+.spfind:focus-within{border-color:var(--ring)}
+.spfind .g{color:var(--muted-foreground);font-size:var(--text-xs);flex:none}
+.spfind input{flex:1;min-width:0;font-size:var(--text-body);background:none;border:0;outline:none;
+  color:var(--foreground);font-family:inherit}
+.spfind input::placeholder{color:var(--muted-foreground)}
+
+/* One row shape, reused by every non-product mode. They differ in what they say, not in how they
+   are built — which is why a new mode does not need a new set of rules. */
+.md-note{padding:8px 14px 4px;font-size:var(--text-row);color:var(--muted-foreground);line-height:1.5}
+.md-cap{padding:7px 14px 4px;font-family:var(--mono);font-size:var(--text-tiny);letter-spacing:.12em;
+  text-transform:uppercase;color:var(--muted-foreground);border-bottom:1px solid var(--border)}
+.md-row{display:block;width:100%;padding:8px 14px;min-height:44px;
+  border-bottom:1px solid var(--border);border-left:2px solid transparent;
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.md-row:hover{background:var(--accent)}
+.md-row[aria-current="true"]{background:var(--accent);border-left-color:var(--brand)}
+.md-row .r1{display:flex;gap:8px;align-items:baseline;min-width:0}
+.md-row .nm{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.md-row .rt{margin-left:auto;flex:none;font-size:var(--text-meta);color:var(--muted-foreground)}
+.md-row .d{display:block;font-size:var(--text-row);color:var(--muted-foreground);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.md-row .chain{display:block;font-family:var(--mono);font-size:var(--text-tiny);color:var(--info);
+  margin-top:2px;overflow-wrap:anywhere}
+.md-row .dot{flex:none;font-size:var(--text-tiny)}
+.md-row[data-live="on"] .dot{color:var(--success)}
+.md-row[data-live="off"] .dot{color:var(--muted-foreground)}
+.md-add{display:inline-flex;align-items:center;margin:10px 14px;min-height:30px;padding:0 12px;
+  background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-md);
+  font-size:var(--text-xs);color:var(--foreground);
+  transition:border-color var(--duration-fast) var(--ease-emphasized)}
+.md-add:hover{border-color:var(--ring)}
+/* A mode PMOS keeps no file for says so in full, and never renders a plausible-looking sample.
+   Faking this list would make the workspace lie about what the repository contains, which is the
+   one thing the honest-state contract forbids outright. */
+.md-none{margin:12px 14px;padding:11px 13px;border:1px dashed var(--input);
+  border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.6;color:var(--muted-foreground)}
+.md-none b{color:var(--warning);font-weight:500}
+.md-none code{font-family:var(--mono);font-size:var(--text-meta);color:var(--foreground)}
+/* "matches elsewhere" — search results that are not initiatives */
+.sp-hit{display:block;width:100%;padding:6px 12px;min-height:40px;
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.sp-hit:hover{background:var(--accent)}
+.sp-hit .k{display:block;font-family:var(--mono);font-size:var(--text-tiny);color:var(--info)}
+.sp-hit .l{display:block;font-family:var(--mono);font-size:var(--text-2xs);
+  color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sp-nomatch{padding:10px 14px;font-size:var(--text-xs);color:var(--muted-foreground);font-style:italic}
+
+/* ── column 2 · the detail panel ───────────────────────────────────────────────────────────────
+   The whole point of this column is the ANSWER to "where is this, what is next, what blocks it".
+   So the sizes here are deliberately not uniform: the next-action line is 14px — larger than the
+   stage names, the step descriptions and everything below it — because it is the one line the PM
+   is scanning for. Making every section equal weight is exactly the flaw this redesign fixes.
+   Everything else on the panel is reference material and is typed as such. */
+.d2{display:flex;flex-direction:column;min-height:0}
+.d2-head{position:sticky;top:0;z-index:2;background:var(--sidebar);
+  border-bottom:1px solid var(--border);padding:6px 8px 6px 14px;
+  font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);
+  display:flex;align-items:center;gap:8px}
+.d2-head .x{margin-left:auto;color:var(--muted-foreground);padding:3px 7px;font-size:var(--text-xs);
+  transition:color var(--duration-fast) var(--ease-emphasized)}
+.d2-head .x:hover{color:var(--foreground)}
+
+.d2-title{padding:13px 14px 11px;border-bottom:1px solid var(--border)}
+.d2-title .nm{font-family:var(--mono);font-size:var(--text-title);font-weight:600;
+  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.d2-title .tag{font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px}
+.d2-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
+.d2-pill{font-family:var(--mono);font-size:var(--text-tiny);padding:2px 6px;
+  background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-sm);
+  color:var(--muted-foreground)}
+.d2-pill[data-t="lane"]{color:var(--purple)}
+.d2-pill[data-t="anchor"]{color:var(--muted-foreground)}
+.d2-pill[data-t="flow"]{color:var(--info)}
+.d2-pill[data-t="bad"]{color:var(--destructive)}
+.d2-pill[data-t="warn"]{color:var(--warning)}
+
+/* R5 — a failed read is RED and says why. Never a tidy empty state standing in for a broken one. */
+.d2-bad{margin:12px;padding:11px 13px;border:1px solid var(--destructive);
+  border-radius:var(--radius-md);background:var(--destructive-wash)}
+.d2-bad .lbl{font-family:var(--mono);font-size:var(--text-tiny);letter-spacing:.14em;
+  text-transform:uppercase;color:var(--destructive);margin-bottom:4px;font-weight:500;display:block}
+.d2-bad .why{font-size:var(--text-body);line-height:1.55}
+
+/* the standing answer, when there is no ladder to hang it on */
+.d2-ans{margin:12px 12px 0;padding:9px 11px;font-size:var(--text-sm);line-height:1.5;
+  border-left:2px solid var(--muted-foreground);background:var(--muted)}
+.d2-ans[data-tone="warn"]{border-left-color:var(--warning);background:var(--warning-wash)}
+.d2-ans[data-tone="bad"]{border-left-color:var(--destructive);background:var(--destructive-wash)}
+.d2-ans[data-tone="info"]{border-left-color:var(--info);background:var(--info-wash)}
+.d2-ans[data-tone="ok"]{border-left-color:var(--success);background:var(--success-wash)}
+.d2-noladder{margin:10px 12px 0;padding:9px 11px;border:1px dashed var(--input);
+  border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.5;color:var(--muted-foreground)}
+
+/* the "next" tag — one vocabulary, whether it sits on a step or on the standing answer */
+.d2-next{font-family:var(--mono);font-size:var(--text-tiny);letter-spacing:.14em;
+  text-transform:uppercase;margin-right:8px;font-weight:500;color:var(--muted-foreground)}
+.d2-ans[data-tone="warn"] .d2-next,.d2-step[data-tone="warn"] .d2-next{color:var(--warning)}
+.d2-ans[data-tone="bad"] .d2-next,.d2-step[data-tone="bad"] .d2-next{color:var(--destructive)}
+.d2-ans[data-tone="info"] .d2-next,.d2-step[data-tone="info"] .d2-next{color:var(--info)}
+.d2-ans[data-tone="ok"] .d2-next,.d2-step[data-tone="ok"] .d2-next{color:var(--success)}
+
+/* the ladder */
+.d2-rail{padding:10px 0 6px}
+.d2-step{display:flex;gap:10px;padding:7px 14px 7px 12px;border-left:2px solid transparent}
+.d2-step[data-here="1"][data-tone="warn"]{border-left-color:var(--warning);background:var(--warning-wash)}
+.d2-step[data-here="1"][data-tone="bad"]{border-left-color:var(--destructive);background:var(--destructive-wash)}
+.d2-step[data-here="1"][data-tone="info"]{border-left-color:var(--info);background:var(--info-wash)}
+.d2-step[data-here="1"][data-tone="ok"]{border-left-color:var(--success);background:var(--success-wash)}
+.d2-step .dot{flex:none;width:14px;text-align:center;font-family:var(--mono);
+  font-size:var(--text-2xs);line-height:1.5}
+.d2-step[data-s="done"] .dot{color:var(--success)}
+.d2-step[data-s="current"] .dot{color:var(--brand)}
+.d2-step[data-s="pending"] .dot,.d2-step[data-s="na"] .dot{color:var(--muted-foreground)}
+.d2-step[data-s="blocked"] .dot{color:var(--destructive)}
+.d2-step .txt{min-width:0;flex:1}
+.d2-step .r1{display:flex;gap:9px;align-items:baseline;min-width:0}
+.d2-step .k{flex:none;font-family:var(--mono);font-size:var(--text-tiny);letter-spacing:.12em;
+  text-transform:uppercase;color:var(--muted-foreground)}
+.d2-step[data-here="1"] .k,.d2-step[data-s="current"] .k{color:var(--foreground)}
+.d2-step .t{font-size:var(--text-xs);color:var(--muted-foreground);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* THE line the panel exists for — larger than anything around it, and allowed to wrap */
+.d2-act{margin-top:6px;font-size:var(--text-base);line-height:1.45;text-wrap:pretty}
+.d2-cmd{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:var(--text-meta);
+  padding:4px 8px;min-height:26px;background:var(--background);border:1px solid var(--border);
+  border-radius:var(--radius-md);color:var(--info);max-width:100%;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
+  transition:border-color var(--duration-fast) var(--ease-emphasized)}
+.d2-cmd:hover{border-color:var(--ring)}
+
+/* the reference rows below the ladder — a fixed label gutter so they read as one table */
+.d2-field{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:8px 14px;
+  border-bottom:1px solid var(--border)}
+.d2-field:last-of-type{border-bottom:0}
+.d2-field>.lbl{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.12em;
+  text-transform:uppercase;color:var(--muted-foreground);padding-top:2px}
+.d2-field>.val{display:flex;flex-direction:column;gap:2px;min-width:0}
+.d2-evals{font-size:var(--text-xs);line-height:1.5;text-align:left;color:var(--warning)}
+.d2-evals[data-v="pass"]{color:var(--success)}
+.d2-evals[data-v="fail"]{color:var(--destructive)}
+.d2-evals:hover{text-decoration:underline}
+.d2-sess{display:flex;gap:8px;align-items:center;padding:5px 6px;margin:0 -6px;min-height:34px;
+  border-left:2px solid transparent;
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.d2-sess:hover{background:var(--accent)}
+.d2-sess[aria-current="true"]{border-left-color:var(--brand)}
+.d2-sess .g{flex:none;font-size:var(--text-tiny)}
+.d2-sess[data-state="working"] .g,.d2-sess[data-state="working"] .st{color:var(--success)}
+.d2-sess[data-state="quiet"] .g,.d2-sess[data-state="quiet"] .st{color:var(--warning)}
+.d2-sess[data-state="needs"] .g,.d2-sess[data-state="needs"] .st{color:var(--brand)}
+.d2-sess[data-state="blocked"] .g,.d2-sess[data-state="blocked"] .st{color:var(--destructive)}
+.d2-sess[data-state="exited"] .g,.d2-sess[data-state="exited"] .st{color:var(--muted-foreground)}
+.d2-sess .nm{font-size:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.d2-sess .st{margin-left:auto;flex:none;font-family:var(--mono);font-size:var(--text-tiny)}
+.d2-art{display:flex;gap:8px;align-items:center;padding:4px 6px;margin:0 -6px;min-width:0;
+  min-height:30px;transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.d2-art:hover{background:var(--accent)}
+.d2-art .role{flex:none;width:52px;font-family:var(--mono);font-size:var(--text-tiny);
+  letter-spacing:.1em;color:var(--info)}
+.d2-art .path{font-family:var(--mono);font-size:var(--text-tiny);color:var(--muted-foreground);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.d2-quiet{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
+.d2-quiet.italic{font-size:var(--text-row);font-style:italic}
+.d2-btn{align-self:flex-start;margin-top:4px;display:inline-flex;align-items:center;
+  min-height:30px;padding:0 12px;background:var(--secondary);border:1px solid var(--border);
+  border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--foreground);
+  transition:border-color var(--duration-fast) var(--ease-emphasized)}
+.d2-btn:hover{border-color:var(--ring)}
+.d2-btn[data-kind="primary"]{background:var(--primary);color:var(--primary-foreground);
+  border-color:transparent;font-weight:500}
+.d2-btn[data-kind="danger"]{background:none;border-color:var(--destructive);color:var(--destructive)}
+.d2-btn[data-kind="danger"]:hover{background:var(--destructive-wash)}
+.d2-acts{display:flex;gap:6px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border)}
+.d2-acts .d2-btn{margin-top:0}
+.d2-body{padding:12px 14px;border-bottom:1px solid var(--border);font-size:var(--text-sm);line-height:1.55}
+.d2-sub{padding:10px 14px 4px;font-family:var(--mono);font-size:var(--text-label);
+  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
+.d2-list{display:flex;flex-direction:column;gap:2px;padding:4px 14px 10px}
+.d2-item{display:flex;gap:9px;align-items:center;min-height:34px;padding:0 9px;
+  background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md);
+  transition:border-color var(--duration-fast) var(--ease-emphasized)}
+.d2-item:hover{border-color:var(--ring)}
+.d2-item .n{flex:none;font-family:var(--mono);font-size:var(--text-tiny);color:var(--muted-foreground)}
+.d2-item .k{font-family:var(--mono);font-size:var(--text-row);letter-spacing:.06em}
+.d2-item .kind{flex:none;width:86px;font-family:var(--mono);font-size:var(--text-label);
+  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
+.d2-item .id{font-family:var(--mono);font-size:var(--text-row);color:var(--brand)}
+.d2-item .d{font-size:var(--text-2xs);color:var(--muted-foreground);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* the panel always ends by naming where it read from — provenance, not decoration */
+.d2-foot{margin-top:auto;padding:8px 14px;border-top:1px solid var(--border);
+  font-family:var(--mono);font-size:var(--text-tiny);color:var(--muted-foreground);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.d2-empty{flex:1;display:grid;place-items:center;color:var(--muted-foreground);
+  font-size:var(--text-body);padding:20px;text-align:center}
+
+/* evals on the initiative panel — the Review-Gate record, and the honest absence of one */
+.dz-ev{margin:14px 0 4px}
+.dz-e{display:flex;align-items:baseline;gap:9px;padding:5px 0}
+.dz-e .v{font-size:var(--text-2xs);font-weight:500;border-radius:var(--radius-sm);padding:1px 7px;
+  background:var(--muted);color:var(--muted-foreground)}
+.dz-e .v[data-v="pass"]{color:var(--success)}
+.dz-e .v[data-v="fail"]{color:var(--destructive)}
+.dz-e .sc,.dz-e .co{font-size:var(--text-2xs);color:var(--muted-foreground)}
+/* a rubric never run is NOT a pass — the sentence says so rather than leaving a green blank */
+.dz-noev{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.55}
+.dz-noev b{color:var(--warning);font-weight:500}
+
+/* ═════════════════════════════════════════════════════════════════════════════════════════════
+   BUNDLE 2 — focus · product switcher · repo ingest · profiles · handoff links
+   Five feature vocabularies over the four this file already had (.sp-* .md-* .d2-* .cs-*). Each
+   gets one short prefix and otherwise reuses what exists; none of them is a fifth GENERAL
+   vocabulary. Every value goes through the D38 token layer — a literal hex, radius or font size
+   here would be a second source of truth for something the tokens already own.
+   The single rule the whole section is written around: four states, four renderings, never
+   collapsed. A failed read is RED and carries the reader's own words; a successful read of nothing
+   is calm; an absent MECHANISM is stated as an absence, in different words from "empty"; a read
+   still in flight is its own third thing. Where two of those share a style below, that is a bug.
+   ═════════════════════════════════════════════════════════════════════════════════════════════ */
+
+/* ── the [hidden] companions ──────────────────────────────────────────────────────────────────
+   The UA's `[hidden]{display:none}` loses to ANY author `display` declaration, so a node the code
+   hides stays on screen. This exact bug has shipped three times in this file — its scars are the
+   rules at .colrail, .newsess, .miniform, .group and .cap .mini, each of which was written after
+   the fact. So: every rule below that sets `display` has its companion here, up front, where the
+   set can be read in one go instead of hunted for.
+   The first ten are the set the wiring contract enumerates verbatim. They are at (0,1,1) and the
+   rules they guard are at (0,1,0), so they win whatever the source order — including against the
+   ≤760px overrides at the bottom of this section. */
+.focusbtn[hidden]{display:none}
+.fc[hidden]{display:none}
+.psw[hidden]{display:none}
+.prof[hidden]{display:none}
+.profline[hidden]{display:none}
+.ing-src[hidden]{display:none}
+.ing-opt[hidden]{display:none}
+.mob[hidden]{display:none}
+.mob-back[hidden]{display:none}
+.d2-links[hidden]{display:none}
+/* and every other display-setting rule in this section, on the same principle */
+.fc-body[hidden],.fc-item[hidden],.fc-obj[hidden],.fc-run[hidden],.fc-del[hidden],
+.fc-budget[hidden],.psw-list[hidden],.psw-add[hidden],.psw-b[hidden],.ing-log[hidden],
+.ing-row[hidden],.ing-item[hidden],.ing-anchor[hidden],.ing-ev[hidden],.prof-chip[hidden],
+.d2-link[hidden],.d2-links a[hidden],.d2-notconn[hidden],.d2-inert[hidden],
+.mob-bar[hidden],.mobnav[hidden]{display:none}
+
+/* ── focus (workspace-focus) ──────────────────────────────────────────────────────────────────
+   The one surface in column 1 that is NOT scoped by the product switcher — it joins every
+   registered repository — which is why it sits above it. Its whole value is that the list is
+   short, so the states below have to stay distinguishable at a glance:
+     failed read      → .cs-error (the existing one; RED, the reader's own message)
+     read of nothing  → .fc-none      calm, solid, the info hue
+     absent mechanism → .fc-notconn   dashed, no hue, different words
+     still deriving   → .fc-deriving  its own hue and a shimmer, neither of the above
+   .fc-none and .fc-notconn deliberately share NOTHING. An absence rendered as an empty list is
+   the watermelon this bundle exists to prevent. */
+.focusbtn{display:flex;align-items:center;gap:8px;width:calc(100% - 24px);margin:10px 12px 2px;
+  min-height:30px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-md);
+  background:var(--card);color:var(--foreground);font-size:var(--text-xs);text-align:left;
+  transition:background-color var(--duration-fast) var(--ease-emphasized),
+             border-color var(--duration-fast) var(--ease-emphasized)}
+.focusbtn:hover{background:var(--accent);border-color:var(--ring)}
+.focusbtn[aria-expanded="true"]{background:var(--accent);border-color:var(--brand);color:var(--brand)}
+.focusbtn .g{flex:none;font-size:var(--text-xs);color:var(--brand)}
+.focusbtn .l{flex:none}
+/* The badge prints badge.text — a SENTENCE ("4 need you · 1 product still deriving", "needs
+   unreadable"), never a count. So it is styled to hold prose: it takes the remaining width and
+   ellipsizes rather than widening the sidebar, and it is deliberately NOT a pill. A digit in a
+   pill invites reading it as an exact tally of a world that may contain a read which failed. */
+.focusbtn .ct{margin-left:auto;min-width:0;font-size:var(--text-2xs);color:var(--warning);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.focusbtn .ct[data-bad="1"]{color:var(--destructive)}
+
+.fc{margin:2px 0 6px;background:var(--card);
+  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
+/* its own scroll region, capped: the panel is a second reading of the same repositories and #tree
+   below it is the first, so the panel must never push the structure it was derived from off the
+   bottom of the column. */
+.fc-body{display:flex;flex-direction:column;max-height:min(58vh,540px);
+  overflow-y:auto;overscroll-behavior:contain}
+.fc-sec{padding:2px 0 8px}
+.fc-sec+.fc-sec{border-top:1px solid var(--border)}
+/* same grammar as .md-cap — the sections of this panel are peers of the mode lists beside them */
+.fc-cap{padding:7px 14px 4px;font-family:var(--mono);font-size:var(--text-tiny);letter-spacing:.12em;
+  text-transform:uppercase;color:var(--muted-foreground)}
+/* R3's contract line, first in the panel. It is prose, not a caption: the queue is only worth
+   trusting if the rule that filled it is on the same screen as the rows it excluded. */
+.fc-intro{padding:8px 14px;font-size:var(--text-row);line-height:1.55;color:var(--muted-foreground)}
+
+/* a queue row: rank + slug + product on line one, the why on line two, the read on line three.
+   `margin-left:auto` on the product tag and `flex-basis:100%` on the two lines below it are what
+   produce that shape from a flat run of siblings, with no wrapper the renderer has to remember. */
+.fc-item{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:3px;
+  width:100%;min-height:34px;padding:8px 14px 8px 12px;text-align:left;
+  border-top:1px solid var(--border);border-left:2px solid transparent;
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.fc-item:hover{background:var(--accent)}
+/* the tier tints the spine and is never the only carrier: the row prints its own `why` and sits
+   under a labelled section. Tier 1 is an integrity failure, so it takes the alarm hue. */
+.fc-item[data-tier="1"]{border-left-color:var(--destructive)}
+.fc-item[data-tier="2"]{border-left-color:var(--brand)}
+.fc-item[data-tier="2b"]{border-left-color:var(--warning)}
+.fc-item[data-tier="4"]{border-left-color:var(--muted-foreground)}
+.fc-rank{flex:none;width:16px;font-family:var(--mono);font-size:var(--text-meta);
+  color:var(--muted-foreground)}
+.fc-nm{min-width:0;font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);
+  overflow-wrap:anywhere}
+.fc-prod{margin-left:auto;flex:none;font-size:var(--text-2xs);color:var(--muted-foreground);
+  border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 6px}
+.fc-why{flex-basis:100%;padding-left:24px;font-size:var(--text-row);line-height:1.5;
+  color:var(--muted-foreground)}
+/* NOT decoration, and never dimmed below the `why` above it. This line names the files the row was
+   derived from, which is the only thing that lets the PM check the queue instead of believing it —
+   so it keeps a readable size and the mono face of the paths and timestamps it prints. */
+.fc-read{flex-basis:100%;padding-left:24px;font-family:var(--mono);font-size:var(--text-tiny);
+  line-height:1.55;color:var(--muted-foreground);overflow-wrap:anywhere}
+
+/* objectives. Four states, four renderings — and `none` (this product declares no objectives: a
+   read that succeeded) is NOT `not-read` (PMOS never got to it). Collapsing those two is how a
+   product with nothing to show and a product nobody looked at become the same row. */
+.fc-obj{display:flex;align-items:baseline;gap:8px;width:100%;min-height:30px;padding:5px 14px;
+  text-align:left;font-size:var(--text-xs);line-height:1.5;overflow-wrap:anywhere}
+.fc-obj[data-state="objective"]{color:var(--foreground)}
+.fc-obj[data-state="none"]{color:var(--muted-foreground);font-style:italic}
+.fc-obj[data-state="not-read"]{color:var(--muted-foreground);
+  border-left:2px dashed var(--input);padding-left:12px}
+.fc-obj[data-state="error"]{color:var(--destructive);background:var(--destructive-wash);
+  border-left:2px solid var(--destructive);padding-left:12px}
+
+/* an ABSENCE, said as one: PMOS holds no credential, runs no MCP client and has no sync path, so
+   there is nothing here that could be empty. A dashed rule, no hue, no dot, and the module's own
+   words. It must never be mistaken for .fc-none, which is a read that ran and found nothing. */
+.fc-notconn{margin:6px 14px 4px;padding:9px 11px;border:1px dashed var(--border);
+  border-radius:var(--radius-md);font-size:var(--text-xs);line-height:1.55;
+  color:var(--muted-foreground)}
+.fc-notconn::before{content:"— "}
+.fc-notconn b{color:var(--foreground);font-weight:500}
+/* the CALM zero: the reads worked and nothing is waiting on you. Solid hairline, the info hue this
+   file already spends on a successful empty, and no dashes anywhere. */
+.fc-none{margin:6px 14px 4px;padding:9px 11px;border:1px solid var(--info);
+  border-radius:var(--radius-md);background:var(--info-wash);
+  font-size:var(--text-xs);line-height:1.55;color:var(--foreground)}
+.fc-none::before{content:"◦ ";color:var(--info)}
+/* the THIRD state — a board still being derived. Neither empty nor broken, so it takes neither of
+   their treatments: its own hue, a heavier left edge, and a shimmer that says work is in flight
+   rather than a spinner that says the app is busy. */
+.fc-deriving{margin:6px 14px 4px;padding:9px 11px;border:1px solid var(--purple);
+  border-left-width:3px;border-radius:var(--radius-md);
+  font-size:var(--text-xs);line-height:1.55;color:var(--foreground);
+  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--purple) 12%,transparent),transparent);
+  background-size:220% 100%;animation:sfsh 1.8s linear infinite}
+.fc-deriving::before{content:"◌ ";color:var(--purple)}
+@media (prefers-reduced-motion:reduce){.fc-deriving{animation:none}}
+
+/* "12 of 105 scanned · 93 outside the board's in-flight cap" — the sentence that stops a short
+   queue being read as a complete one. */
+.fc-cov{padding:3px 14px;font-family:var(--mono);font-size:var(--text-tiny);line-height:1.6;
+  color:var(--muted-foreground);overflow-wrap:anywhere}
+.fc-run{display:flex;align-items:baseline;gap:8px;width:100%;min-height:30px;padding:5px 14px;
+  text-align:left;font-size:var(--text-xs);color:var(--foreground);
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.fc-run:hover{background:var(--accent)}
+/* Emitted ONLY for rows the module resolved a skill for. Where starts_state is 'not-resolved' the
+   renderer prints the note and no button at all — an offer PMOS cannot honour is worse than no
+   offer, so there is deliberately no disabled variant of this to reach for. */
+.fc-del{display:inline-flex;align-items:center;gap:6px;min-height:30px;margin:4px 14px 2px;
+  padding:0 11px;border:1px solid var(--brand);border-radius:var(--radius-md);
+  background:var(--brand-wash);color:var(--brand);font-size:var(--text-xs);
+  transition:background-color var(--duration-fast) var(--ease-emphasized)}
+.fc-del:hover{background:var(--accent)}
+.fc-budget{display:flex;align-items:baseline;gap:8px;padding:4px 14px;
+  font-size:var(--text-xs);line-height:1.5;color:var(--foreground)}
+.fc-budget .n{margin-left:auto;flex:none;font-family:var(--mono);font-size:var(--text-tiny);
+  color:var(--muted-foreground)}
+/* a cap the registry did not yield is ABSENT, not zero — it is drawn as unavailable, the way
+   details.hz's `.na` already is, and never as a plausible number. */
+.fc-budget .na{margin-left:auto;flex:none;font-size:var(--text-tiny);font-style:italic;
+  color:var(--muted-foreground)}
+
+/* ── product switcher (workspace-product-switcher) ────────────────────────────────────────────
+   One button per PRODUCT (a distinct repo_key), never per working tree. The buttons WRAP, and
+   that is the whole mechanism: a horizontally scrolling strip hides products off-screen with
+   nothing on screen saying they exist, which is the tidy-row-of-buttons failure this feature is
+   named after. */
+.psw{display:flex;align-items:flex-start;gap:6px;padding:6px 12px 4px}
+.psw-list{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
+.psw-add{flex:none;display:grid;place-items:center;min-width:30px;min-height:30px;
+  border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--muted-foreground);
+  font-size:var(--text-sm);
+  transition:color var(--duration-fast) var(--ease-emphasized),
+             border-color var(--duration-fast) var(--ease-emphasized)}
+.psw-add:hover{color:var(--foreground);border-color:var(--ring)}
+.psw-add[aria-expanded="true"]{border-style:solid;border-color:var(--brand);color:var(--brand)}
+.psw-b{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:1px;
+  max-width:100%;min-width:0;min-height:30px;padding:5px 9px;text-align:left;
+  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);
+  color:var(--muted-foreground);
+  transition:background-color var(--duration-fast) var(--ease-emphasized),
+             border-color var(--duration-fast) var(--ease-emphasized)}
+.psw-b:hover{background:var(--accent);border-color:var(--ring)}
+.psw-b[aria-current="true"]{background:var(--accent);border-color:var(--brand);color:var(--foreground)}
+/* R2 — the selected product carries BOTH the hue and the ▸ mark. `visibility`, not `display`, so
+   every button keeps the same width and the row does not re-wrap as you switch between them. */
+.psw-mk{flex:none;font-size:var(--text-2xs);color:var(--brand);visibility:hidden}
+.psw-b[aria-current="true"] .psw-mk{visibility:visible}
+/* NEVER `text-overflow:ellipsis`, `white-space:nowrap` or a `max-width` here. The browser suite
+   asserts scrollWidth <= clientWidth on every label at the narrowest sidebar, and a product name
+   truncated to "workspace-…" is a product you cannot tell from its sibling. It wraps instead. */
+.psw-nm{min-width:0;font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);
+  overflow-wrap:anywhere}
+.psw-b[aria-current="true"] .psw-nm{font-weight:600}
+/* EXACTLY four states and no fifth. All four are declared even where two look alike, because the
+   set is the contract: `reading…` is not `no initiative records`, and neither of them is `0`.
+   `error` is the only one drawn as a fault — and the button stays clickable under it: an
+   unreadable board is not an unreachable product. */
+.psw-ct{flex:none;font-size:var(--text-2xs);color:var(--muted-foreground)}
+.psw-ct[data-state="reading"]{color:var(--muted-foreground);font-style:italic}
+.psw-ct[data-state="empty"]{color:var(--muted-foreground)}
+.psw-ct[data-state="count"]{color:var(--muted-foreground)}
+.psw-ct[data-state="error"]{color:var(--destructive);font-weight:500}
+.psw-ct[data-state="error"]::before{content:"! ";font-family:var(--mono)}
+.psw-live{flex:none;font-size:var(--text-2xs);color:var(--success)}
+
+/* ── repo ingest (workspace-repo-ingest) ──────────────────────────────────────────────────────
+   The source choice states its consequence BEFORE the click — a folder is REGISTERED where it
+   lies, a GitHub repo is cloned, scanned and PROPOSED — so both notes sit on screen at once, one
+   under each option. `.ing-src` sets no `display` of its own (it wears `.seg`), but it still needs
+   its `[hidden]` companion above, because `.seg` is what sets display:flex on it. */
+.ing-src{margin-bottom:2px}
+.ing-opt{display:flex;flex-direction:column;gap:8px}
+.ing-note{font-size:var(--text-xs);line-height:1.55;color:var(--muted-foreground)}
+/* the scan's own log, printed as it came. `error` is RED and carries the reader's message;
+   `warn` is amber; `info` is the ordinary case and is not tinted at all — tinting everything is
+   how nothing stands out. Each level also carries a MARK, so the level survives without colour. */
+.ing-log{display:flex;flex-direction:column;margin:8px 0 4px;overflow:hidden;
+  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card)}
+.ing-row{display:flex;gap:8px;align-items:baseline;padding:5px 10px;
+  font-family:var(--mono);font-size:var(--text-tiny);line-height:1.55;
+  color:var(--muted-foreground);overflow-wrap:anywhere}
+.ing-row+.ing-row{border-top:1px solid var(--border)}
+.ing-row::before{flex:none;width:9px;text-align:center}
+.ing-row[data-level="info"]::before{content:"·"}
+.ing-row[data-level="warn"]::before{content:"!"}
+.ing-row[data-level="error"]::before{content:"✕"}
+.ing-row[data-level="warn"]{color:var(--warning)}
+.ing-row[data-level="error"]{color:var(--destructive);background:var(--destructive-wash)}
+/* one proposed record, confirmed or dismissed ON ITS OWN. There is no `.ing-confirm-all` and there
+   must never be one: an anchor written across a dozen records nobody read is a dozen pieces of
+   work anchored by nobody, every gate green. The tedium IS the gate. */
+.ing-item{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:4px;
+  padding:9px 14px;border-top:1px solid var(--border)}
+.ing-item .pth{flex-basis:100%;font-family:var(--mono);font-size:var(--text-tiny);
+  color:var(--muted-foreground);overflow-wrap:anywhere}
+/* a MARK and a WORD, never a hue on its own — the accessible name is written by the renderer.
+   `guessed` is dashed and amber because it is a claim PMOS made up, and it must not look like the
+   `declared` value beside it, which is a claim the repository made. */
+.ing-anchor{display:inline-flex;align-items:baseline;gap:5px;flex:none;padding:1px 6px;
+  font-family:var(--mono);font-size:var(--text-tiny);color:var(--muted-foreground);
+  border:1px solid var(--border);border-radius:var(--radius-sm)}
+.ing-anchor[data-a="declared"]{color:var(--foreground)}
+.ing-anchor[data-a="guessed"]{color:var(--warning);border-color:var(--warning);border-style:dashed}
+.ing-anchor[data-a="none"]{border-style:dashed}
+/* the same shape as .fc-read, for the same reason: this is the evidence the guess rests on, and a
+   guess whose evidence you cannot see is indistinguishable from a fact. */
+.ing-ev{display:block;flex-basis:100%;font-family:var(--mono);font-size:var(--text-tiny);
+  line-height:1.55;color:var(--muted-foreground);overflow-wrap:anywhere}
+.ing-bad{margin:8px 0;padding:9px 11px;border:1px solid var(--destructive);
+  border-radius:var(--radius-md);background:var(--destructive-wash);
+  font-size:var(--text-xs);line-height:1.55;color:var(--foreground)}
+.ing-bad b{color:var(--destructive);font-weight:500}
+/* how old the scan is. A proposal reviewed against a repository that has moved is the mismatch
+   applyChange refuses, so the age is on screen before you confirm rather than after. */
+.ing-stamp{font-family:var(--mono);font-size:var(--text-tiny);color:var(--muted-foreground)}
+
+/* ── profiles (workspace-profiles) ────────────────────────────────────────────────────────────
+   NOTHING in this vocabulary may render a dot, a tick, or a colour that reads as "connected".
+   PMOS has no credential store, no MCP client and no reachability check; a descriptor DECLARES mcp
+   servers, and a declaration is a string a human typed into a JSON file. A status light over it
+   would be a fabrication, whatever the file says.
+   The chips are exactly the descriptors that were read — never a hard-coded pair. */
+.prof{display:flex;flex-wrap:wrap;gap:4px}
+/* the existing `.seg [role=radio]` look, at the size a wrapping group needs */
+.prof-chip{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;min-width:0;
+  min-height:30px;padding:5px 9px;text-align:left;
+  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);
+  color:var(--muted-foreground);font-size:var(--text-xs);
+  transition:background-color var(--duration-fast) var(--ease-emphasized),
+             border-color var(--duration-fast) var(--ease-emphasized)}
+.prof-chip:hover{color:var(--foreground);border-color:var(--ring)}
+.prof-chip[aria-checked="true"]{background:var(--background);color:var(--foreground);
+  border-color:var(--brand);font-weight:500;box-shadow:0 1px 2px var(--shadow)}
+/* the declared mcp names sit at the SAME weight as the account string beside them. They are two
+   equally ordinary facts read out of one file, and typographic emphasis on the mcp list would read
+   as a claim about reachability that nothing in this repository can make. */
+.prof-mcp{font-family:var(--mono);font-size:var(--text-tiny);font-weight:400;
+  color:var(--muted-foreground);overflow-wrap:anywhere}
+.prof-note{font-size:var(--text-xs);line-height:1.55;color:var(--muted-foreground)}
+/* a descriptor that could not be used is RED and says why — and it is NOT offered as a choice,
+   while every good chip beside it still is. */
+.prof-bad{margin-top:4px;padding:8px 10px;border:1px solid var(--destructive);
+  border-radius:var(--radius-md);background:var(--destructive-wash);
+  font-size:var(--text-xs);line-height:1.55;color:var(--foreground)}
+.prof-bad b{color:var(--destructive);font-weight:500}
+/* R6 — which profile a pane was started under, as WORKSPACE chrome between the tab strip and the
+   terminal. It is never written into the pane: input written to a tmux pane goes to the AGENT, a
+   ring-buffer append is erased on the next reattach, and a line injected into scrollback is
+   indistinguishable from one the agent printed — which defeats a line whose entire purpose is
+   provenance. It continues the `.stabs` band (same --muted surface) so it reads as chrome and not
+   as the terminal's first row. The sentence is computed server-side and printed verbatim. */
+.profline{display:block;flex:none;padding:4px 10px;background:var(--muted);
+  border-bottom:1px solid var(--border);
+  font-family:var(--mono);font-size:var(--text-tiny);line-height:1.5;
+  color:var(--muted-foreground);overflow-wrap:anywhere}
+/* collapses only when there is literally no pane to describe. `profile: not recorded` is a
+   sentence and stays on screen; this is not a way to hide one. */
+.profline:empty{display:none}
+
+/* ── handoff links (workspace-jira-handoff) ───────────────────────────────────────────────────
+   `links.connected` is false on every code path in the module, so there is no connected variant
+   to write here and none is coming. The one thing that must not happen on this surface is a
+   declared string borrowing the authority of a reading. */
+.d2-links{display:flex;flex-direction:column;gap:2px;padding:4px 14px 10px}
+.d2-link{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;
+  min-height:30px;margin:0 -3px;padding:6px 9px;
+  background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md)}
+.d2-links a{min-width:0;color:var(--brand);text-decoration:underline;text-underline-offset:2px;
+  overflow-wrap:anywhere}
+/* MUST NOT be styled like .d2-pill. In this panel the pill grammar — the filled --secondary box
+   with its hairline border — means "PMOS worked this out". A typed epic key is a string a human
+   wrote into frontmatter. Lending it the derived marker's box is exactly how a declaration
+   silently borrows the authority of a reading, and it is this feature's named FAIL. So: plain mono
+   text. No background, no border, no padding, no box of any kind. */
+.d2-kind{flex:none;padding:0;background:none;border:0;white-space:nowrap;
+  font-family:var(--mono);font-size:var(--text-tiny);letter-spacing:.06em;
+  color:var(--muted-foreground)}
+/* VISIBLE TEXT inside every row — never a `title` tooltip, never one banner at the top of the
+   section standing in for all of them, never colour alone. It is deliberately not shrunk below the
+   row's own type and not dimmed further: judging this line repetitive and demoting it is the exact
+   move that lets a declared string read as a live connection. */
+.d2-notconn{display:block;flex-basis:100%;font-size:var(--text-row);line-height:1.5;
+  color:var(--muted-foreground)}
+.d2-notconn::before{content:"— "}
+/* a reference that is NOT a url — no href was constructed, because PMOS never builds a URL it was
+   not given. It reads as text you can copy, never as a link you can follow: no link hue, no solid
+   underline, and the copy control is the only thing in it that is pressable. */
+.d2-inert{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;min-width:0;
+  font-family:var(--mono);font-size:var(--text-tiny);color:var(--foreground);
+  border-bottom:1px dashed var(--input);overflow-wrap:anywhere}
+.d2-inert button{flex:none;min-height:30px;padding:0 7px;font-size:var(--text-2xs);
+  color:var(--muted-foreground);
+  transition:color var(--duration-fast) var(--ease-emphasized)}
+.d2-inert button:hover{color:var(--brand)}
+/* the build/review annotation on a ladder step. An ANNOTATION, not a verdict: it never takes the
+   step's tone hue, never the .d2-next label grammar, and nothing about it feeds `data-s` — a
+   declared field may add context to a derived verdict, it may never become one. */
+.d2-anno{font-family:var(--mono);font-size:var(--text-tiny);letter-spacing:.06em;
+  color:var(--muted-foreground)}
+
+/* ── touch targets for everything above ───────────────────────────────────────────────────────
+   ≥30px with a pointer (declared inline above) and ≥44px on a phone. This block is LAST in the
+   file on purpose: the per-component rules it raises are at the same specificity, so source order
+   is what decides, and a ≤760px block written higher up would silently lose to them. */
+@media (max-width:760px){
+  .focusbtn,.fc-item,.fc-obj,.fc-run,.fc-del,.psw-b,.psw-add,.prof-chip,
+  .ing-src button,.ing-item button,.d2-inert button{min-height:44px}
+  .d2-links a{display:inline-flex;align-items:center;min-height:44px}
+  /* the panel has the whole screen's width here, so it can afford more of its height */
+  .fc-body{max-height:min(70vh,640px)}
+}