create-pmos 0.15.0 → 0.16.0

package/workspace/public/styles.css

@@ -1,2258 +0,0 @@
-/* PMOS Terminal Workspace — GUI client. D38 token layer.
-   ────────────────────────────────────────────────────────────────────────────────────────────
-   The palette is the shadcn `radix-sera` style on the `mist` base colour, ported VERBATIM from
-   the sibling product's design system (its components.json + react-src/styles/app.css) so the
-   two surfaces read as one house. The port is CSS-only: the workspace stays a no-build local
-   companion app, so what comes across is the token layer + the component vocabulary, not React,
-   Tailwind or Radix.
-   Three things to know before editing:
-     1. --radius is 0. That is the style's signature, not an oversight. Everything derives from
-        it through the scale below, so re-rounding the whole app is a ONE-token change. Never
-        hardcode a px radius — the exceptions are 50% (dots) and 999px (pills/meters), which are
-        shapes rather than radii.
-     2. shadcn's --accent is a MUTED HOVER SURFACE, not a brand hue. The brand blue lives in
-        --primary (fills) and --brand (text/borders). Reaching for --accent to mean "blue" is the
-        one mistake this palette invites.
-     3. The --xt-* block must stay concrete hex/rgba: those values are read by xtheme() in app.js
-        and handed to xterm.js, whose colour parser does NOT understand oklch().
-   ──────────────────────────────────────────────────────────────────────────────────────────── */
-
-/* Vendored, not CDN-linked: this app has to render correctly with no network at all. */
-@font-face{
-  font-family:"Space Grotesk Variable";
-  src:url("/vendor/space-grotesk-var.woff2") format("woff2-variations");
-  font-weight:300 700; font-style:normal; font-display:swap;
-}
-/* Plex Mono is the terminal's face, so `swap` would be wrong here: swapping the grid out from
-   under a live xterm re-flows every row mid-session. `block` holds a short invisible period and
-   then keeps the fallback forever if the face never arrives — and app.js re-measures on
-   document.fonts.ready either way, so the grid is correct in both outcomes.
-   Both weights are real files: xterm renders bold text, and a synthesised bold on a monospace
-   face is wider than the regular one, which breaks cell alignment. */
-@font-face{
-  font-family:"IBM Plex Mono";
-  src:url("/vendor/ibm-plex-mono-400.woff2") format("woff2");
-  font-weight:400; font-style:normal; font-display:block;
-}
-@font-face{
-  font-family:"IBM Plex Mono";
-  src:url("/vendor/ibm-plex-mono-700.woff2") format("woff2");
-  font-weight:700; font-style:normal; font-display:block;
-}
-
-:root{
-  /* ── shadcn radix-sera / mist — light ── */
-  --background:oklch(1 0 0);
-  --foreground:oklch(0.148 0.004 228.8);
-  --card:oklch(1 0 0);
-  --card-foreground:oklch(0.148 0.004 228.8);
-  --popover:oklch(1 0 0);
-  --popover-foreground:oklch(0.148 0.004 228.8);
-  --primary:oklch(0.488 0.243 264.376);
-  --primary-foreground:oklch(0.97 0.014 254.604);
-  --secondary:oklch(0.967 0.001 286.375);
-  --secondary-foreground:oklch(0.21 0.006 285.885);
-  --muted:oklch(0.963 0.002 197.1);
-  --muted-foreground:oklch(0.56 0.021 213.5);
-  --accent:oklch(0.963 0.002 197.1);
-  --accent-foreground:oklch(0.218 0.008 223.9);
-  --destructive:oklch(0.577 0.245 27.325);
-  --border:oklch(0.925 0.005 214.3);
-  --input:oklch(0.925 0.005 214.3);
-  --ring:oklch(0.723 0.014 214.4);
-  --sidebar:oklch(0.987 0.002 197.1);
-  --sidebar-foreground:oklch(0.148 0.004 228.8);
-  --sidebar-primary:oklch(0.546 0.245 262.881);
-  --sidebar-border:oklch(0.925 0.005 214.3);
-
-  /* --brand is the brand blue AS TEXT OR BORDER on the current surface. --primary is tuned to
-     be a filled background (it pairs with --primary-foreground), and in dark it is far too deep
-     to read as type — so the two are separate tokens rather than one reused in both roles. */
-  --brand:oklch(0.488 0.243 264.376);
-  --brand-wash:color-mix(in oklab, var(--brand) 7%, transparent);
-
-  /* Status hues. shadcn ships --destructive only; a workspace that reports agent state needs a
-     full set, so these are authored in the same oklch space to sit with the palette. Each is
-     picked to clear text contrast on THIS theme's surfaces — hence separate light/dark values
-     rather than one hue dimmed by opacity. */
-  --success:oklch(0.52 0.14 152);
-  --warning:oklch(0.55 0.12 72);
-  --info:oklch(0.52 0.09 195);
-  --purple:oklch(0.5 0.2 300);
-  --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);
-  --term-bg:oklch(0.148 0.004 228.8);
-
-  /* ── radius scale (shadcn) — derived, never hardcoded ── */
-  --radius:0rem;
-  --radius-sm:calc(var(--radius) * 0.6);
-  --radius-md:calc(var(--radius) * 0.8);
-  --radius-lg:var(--radius);
-  --radius-xl:calc(var(--radius) * 1.4);
-
-  /* ── motion vocabulary (shadcn): one house curve, three duration tiers ── */
-  --ease-emphasized:cubic-bezier(0.4, 0, 0.2, 1);
-  --duration-fast:150ms;
-  --duration-base:250ms;
-  --duration-slow:350ms;
-
-  /* ── type scale. The workspace used to label everything in 8.5–11px uppercase mono; that
-     density was the single loudest "dated terminal dashboard" signal. Chrome now speaks the
-     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;
-
-  /* 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
-     note 3 at the top of this file). */
-  --xt-bg:#090b0c; --xt-fg:#c4ccce; --xt-cursor:#47cf79; --xt-sel:rgba(43,127,255,.3);
-  --xt-black:#090b0c; --xt-red:#ff6467; --xt-green:#47cf79; --xt-yellow:#f4b93c;
-  --xt-blue:#2b7fff; --xt-magenta:#b48df4; --xt-cyan:#53d1d0; --xt-white:#d2d9db;
-  --xt-brblack:#6f7d81; --xt-brgreen:#81e8a0; --xt-accent-text:#2b7fff; --xt-brwhite:#f9fbfb;
-}
-
-/* ── shadcn radix-sera / mist — dark. This is the workspace's DEFAULT (index.html ships
-   data-theme="dark"); the light block above is the base the toggle falls back to. ── */
-:root[data-theme="dark"]{
-  --background:oklch(0.148 0.004 228.8);
-  --foreground:oklch(0.987 0.002 197.1);
-  --card:oklch(0.218 0.008 223.9);
-  --card-foreground:oklch(0.987 0.002 197.1);
-  --popover:oklch(0.218 0.008 223.9);
-  --popover-foreground:oklch(0.987 0.002 197.1);
-  --primary:oklch(0.424 0.199 265.638);
-  --primary-foreground:oklch(0.97 0.014 254.604);
-  --secondary:oklch(0.274 0.006 286.033);
-  --secondary-foreground:oklch(0.985 0 0);
-  --muted:oklch(0.275 0.011 216.9);
-  --muted-foreground:oklch(0.723 0.014 214.4);
-  --accent:oklch(0.275 0.011 216.9);
-  --accent-foreground:oklch(0.987 0.002 197.1);
-  --destructive:oklch(0.704 0.191 22.216);
-  --border:oklch(1 0 0 / 10%);
-  --input:oklch(1 0 0 / 15%);
-  --ring:oklch(0.56 0.021 213.5);
-  --sidebar:oklch(0.218 0.008 223.9);
-  --sidebar-foreground:oklch(0.987 0.002 197.1);
-  --sidebar-primary:oklch(0.623 0.214 259.815);
-  --sidebar-border:oklch(1 0 0 / 10%);
-
-  --brand:oklch(0.623 0.214 259.815);
-  --brand-wash:color-mix(in oklab, var(--brand) 12%, transparent);
-
-  --success:oklch(0.76 0.17 152);
-  --warning:oklch(0.82 0.15 82);
-  --info:oklch(0.79 0.11 195);
-  --purple:oklch(0.72 0.15 300);
-  --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);
-  --term-bg:oklch(0.148 0.004 228.8);
-}
-
-*{box-sizing:border-box;margin:0;padding:0}
-html,body{height:100%}
-body{background:var(--background); color:var(--foreground); font-family:var(--sans);
-  font-size:var(--text-sm); line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden}
-button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
-/* shadcn's focus ring: a soft halo in --ring rather than a hard outline */
-:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-sm)}
-.mono{font-family:var(--mono)}
-
-/* Motion, ported from the sibling design system: gentle fades and small lifts, no bounce. Every
-   one of these is neutralised by the reduced-motion guard at the bottom of this file. */
-@keyframes motion-fade{from{opacity:0}to{opacity:1}}
-@keyframes motion-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
-@keyframes motion-pop-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
-
-/* 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. */
-/* 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
-   are grid siblings, and without this the later-in-DOM body wins the paint order and swallows
-   every click aimed at the menu. */
-.bar{display:flex; align-items:center; gap:10px; padding:0 12px; min-width:0; position:relative; z-index:50;
-  border-bottom:1px solid var(--border); background:var(--glass); backdrop-filter:blur(8px)}
-/* the product mark reads as a filled brand tile, the way a shadcn sidebar header does */
-.mark{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-md);
-  background:var(--primary);color:var(--primary-foreground);font-size:var(--text-xs);font-weight:600}
-.bar b{font-size:var(--text-base);font-weight:600;letter-spacing:-.01em}
-.bar .sub{font-size:var(--text-xs);color:var(--muted-foreground)}
-.bar .conn{font-size:var(--text-xs);display:inline-flex;gap:6px;align-items:center;color:var(--muted-foreground)}
-.bar .conn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-foreground)}
-.bar .conn.live{color:var(--success)} .bar .conn.live::before{background:var(--success);animation:pulse 2.2s infinite}
-.bar .conn.off{color:var(--warning)} .bar .conn.off::before{background:var(--warning)}
-@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
-.bar .right{margin-left:auto;display:flex;gap:6px}
-/* shadcn Button, `ghost` variant: no resting border or fill, the hover surface does the work */
-.ibtn{min-height:32px;min-width:36px;padding:0 10px;display:grid;place-items:center;
-  border:1px solid transparent;background:transparent;border-radius:var(--radius-md);
-  color:var(--muted-foreground);font-size:var(--text-sm);font-weight:500;
-  transition:background-color var(--duration-fast) var(--ease-emphasized),
-             color var(--duration-fast) var(--ease-emphasized)}
-.ibtn:hover{background:var(--accent);color:var(--accent-foreground)}
-.ibtn[aria-pressed="true"]{background:var(--accent);color:var(--brand)}
-
-/* ── the arrangement (workspace-layout-system) ──────────────────────────────────────────────
-   The template is COMPUTED from the current layout by applyLayout() and written into these three
-   custom properties — never as a direct grid declaration. That is deliberate: an inline
-   `grid-template-columns` would outrank the ≤760px media query below and take the phone's
-   single-column switcher with it. Custom properties lose to a later direct declaration, so the
-   two responsive systems stay in charge of their own widths (R9). */
-.body{display:grid; position:relative;
-  grid-template-columns:var(--lay-cols, 262px minmax(0,1fr) minmax(0,var(--rail-w)));
-  grid-template-rows:var(--lay-rows, minmax(0,1fr));
-  grid-template-areas:var(--lay-areas, "side term read");
-  min-height:0}
-.side{grid-area:side} .term-col{grid-area:term} .rail{grid-area:read}
-.body[data-side="off"]>.side{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)}
-/* 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). ── */
-.side{border-right:1px solid var(--border);background:var(--sidebar);min-height:0;
-  display:flex;flex-direction:column;position:relative}
-.side>.pane{flex:1 1 0}
-.side>.pane[data-fold="off"]{flex:0 0 auto}
-.side>.pane+.pane{border-top:1px solid var(--border)}
-.pane{display:flex;flex-direction:column;min-height:0;min-width:0}
-.pane-body{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;padding-bottom:10px}
-.pane[data-fold="off"]>.pane-body{display:none}
-.pane[data-fold="off"]{flex:0 0 auto}
-
-/* Pane header = shadcn's SidebarGroupLabel: 12px medium in muted-foreground, sentence case. The
-   uppercase-tracked-mono caption this replaced was the loudest dated signal in the whole app. */
-.cap{font-size:var(--text-xs);font-weight:500;
-  color:var(--muted-foreground);padding:10px 10px 8px 12px;display:flex;gap:8px;align-items:center;
-  min-height:38px;flex:none;background:var(--sidebar);border-bottom:1px solid var(--border)}
-.cap .ct{color:var(--warning);font-size:var(--text-xs);font-weight:500}
-.cap .mini{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;border-radius:var(--radius-sm);
-  border:0;background:transparent;color:var(--muted-foreground);font-size:var(--text-base);
-  transition:background-color var(--duration-fast) var(--ease-emphasized),
-             color var(--duration-fast) var(--ease-emphasized)}
-.cap .mini:hover{background:var(--accent);color:var(--accent-foreground)}
-/* a pane header that folds its body away */
-.cap .fold{display:inline-flex;align-items:center;gap:6px;font:inherit;color:var(--muted-foreground)}
-.cap .fold:hover{color:var(--foreground)}
-.cap .fold .chev{font-size:var(--text-2xs);transition:transform var(--duration-fast) var(--ease-emphasized)}
-.pane[data-fold="off"] .cap .fold .chev{transform:rotate(-90deg)}
-@media (prefers-reduced-motion:reduce){.cap .fold .chev{transition:none}}
-/* the move affordance every relocatable pane carries. Keyboard reaches every position it offers
-   through the layout menu's position controls (`.lay-pos`), so this is an accelerator and never
-   the only path (R12). That was asserted here before it was true — the menu had no position
-   controls at all, and `side:right` / `reader:bottom` were pointer-only. Review-Gate finding. */
-.cap .grip{width:22px;min-height:26px;display:grid;place-items:center;border-radius:var(--radius-sm);flex:none;
-  color:var(--muted-foreground);cursor:grab;letter-spacing:-2px;margin-left:-4px;touch-action:none}
-.cap .grip:hover{background:var(--accent);color:var(--brand)}
-.cap .grip:active{cursor:grabbing}
-
-/* a column's outer edge, dragged to resize. The rail's original .railgrip is one of these. */
-.edge{position:absolute;top:0;bottom:0;width:7px;z-index:20;cursor:col-resize;touch-action:none}
-.edge:hover,.edge.on{background:linear-gradient(90deg,transparent,var(--ring),transparent)}
-.side>.edge{right:-3px}
-.body[data-side="right"]>.side>.edge{right:auto;left:-3px}
-
-/* drop targets — visible only while a grip is being dragged */
-.drop{position:absolute;inset:0;z-index:40;display:none;grid-area:1/1/-1/-1}
-.body.dragging>.drop{display:block}
-.dz{position:absolute;border:1px dashed var(--input);border-radius:var(--radius-lg);
-  background:var(--brand-wash);display:grid;place-items:center;
-  font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground)}
-.dz.hot{border-style:solid;border-color:var(--brand);color:var(--brand);
-  background:var(--accent);box-shadow:0 0 0 1px var(--ring)}
-.dz[data-z="left"]{left:8px;top:8px;bottom:8px;width:22%}
-.dz[data-z="right"]{right:8px;top:8px;bottom:8px;width:22%}
-.dz[data-z="bottom"]{left:26%;right:26%;bottom:8px;height:30%}
-.dz[data-z="off"]{left:26%;right:26%;top:8px;height:20%}
-.dz.no{display:none}
-.laghost{position:fixed;z-index:70;pointer-events:none;padding:5px 10px;border-radius:var(--radius-md);
-  background:var(--popover);border:1px solid var(--border);color:var(--foreground);
-  font-size:var(--text-xs);box-shadow:0 8px 24px -8px var(--shadow)}
-
-/* ── the layout control ── */
-.ibtn.lay-chip{gap:7px;display:inline-flex;align-items:center;padding:0 11px}
-.ibtn.lay-chip i{font-style:normal;color:var(--muted-foreground);font-size:var(--text-xs)}
-.ibtn.lay-chip[aria-expanded="true"]{background:var(--accent);color:var(--accent-foreground)}
-/* shadcn Popover: --popover surface, hairline border, one soft elevation shadow */
-.lay-menu{position:absolute;top:40px;right:12px;z-index:60;width:272px;background:var(--popover);
-  color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px;
-  box-shadow:0 10px 38px -10px var(--shadow);animation:motion-pop-in var(--duration-fast) var(--ease-emphasized)}
-.lay-cap{font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);margin:4px 8px 6px}
-/* shadcn DropdownMenuItem */
-.lay-row{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:var(--radius-sm);
-  font-size:var(--text-sm);color:var(--popover-foreground);text-align:left;min-height:36px;
-  transition:background-color var(--duration-fast) var(--ease-emphasized)}
-.lay-row:hover{background:var(--accent);color:var(--accent-foreground)}
-.lay-row[aria-current="true"]{background:var(--accent);color:var(--brand);font-weight:500}
-.lay-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* a keyboard hint reads as a key — mono is right here, it IS a literal keystroke */
-.lay-row .kbd{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);
-  background:var(--muted);border-radius:var(--radius-sm);padding:1px 5px;flex:none}
-/* a wireframe of the arrangement — the name alone does not say what you get */
-.lay-mini{width:28px;height:18px;border:1px solid var(--input);border-radius:var(--radius-sm);
-  display:flex;gap:1px;padding:1px;flex:none;background:var(--background)}
-.lay-mini span{background:var(--input);border-radius:var(--radius-sm)}
-.lay-row[aria-current="true"] .lay-mini span{background:var(--brand)}
-.lay-act{display:flex;align-items:center;justify-content:center;min-width:26px;min-height:26px;
-  border-radius:var(--radius-sm);color:var(--muted-foreground);font-size:var(--text-xs);flex:none}
-.lay-act:hover{background:var(--secondary);color:var(--brand)}
-.lay-act.del:hover{color:var(--destructive)}
-
-/* R12 — the position controls. Every value the pointer drag can produce is a focusable button
-   here, which is what makes "the layout control can always bring a pane back" a fact about the
-   DOM rather than an argument about the grid template. */
-.lay-pos{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);display:grid;gap:4px}
-.pos-row{display:flex;align-items:center;gap:3px}
-.pos-lbl{font-size:var(--text-2xs);color:var(--muted-foreground);width:52px;flex:none}
-.pos-btn{flex:1;min-height:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;
-  gap:1px;border-radius:var(--radius-sm);border:1px solid transparent;color:var(--muted-foreground);
-  font-size:var(--text-2xs);line-height:1}
-.pos-btn i{font-style:normal;font-size:var(--text-sm)}
-.pos-btn:hover{background:var(--accent);color:var(--accent-foreground)}
-.pos-btn:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
-.pos-btn[aria-pressed="true"]{background:var(--accent);color:var(--brand);border-color:var(--ring);font-weight:500}
-/* a coarse pointer gets the 44px target R12 asks for; a mouse does not need the extra height */
-@media (pointer:coarse){.pos-btn{min-height:44px}.lay-act{min-width:44px;min-height:44px}.lay-row{padding:11px 8px}}
-.lay-add{display:block;width:100%;margin-top:4px;padding:9px;border:1px dashed var(--border);
-  border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--muted-foreground);
-  transition:color var(--duration-fast) var(--ease-emphasized),
-             border-color var(--duration-fast) var(--ease-emphasized)}
-.lay-add:hover{color:var(--foreground);border-color:var(--ring)}
-.lay-new{padding:6px 5px 2px}
-.lay-foot{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.55;
-  margin:9px 8px 4px;padding-top:8px;border-top:1px solid var(--border)}
-.lay-foot b{color:var(--foreground);font-weight:500}
-
-/* workspaces — one server, many repos; the row carries the switch + a forget affordance.
-   The row is shadcn's SidebarMenuButton: no border, the --accent surface carries state. */
-.wsrow{display:flex;align-items:stretch}
-.ws{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;min-height:40px;padding:0 8px 0 12px;
-  font-size:var(--text-sm);color:var(--sidebar-foreground);border-left:2px solid transparent;
-  transition:background-color var(--duration-fast) var(--ease-emphasized)}
-.ws:hover{background:var(--accent)}
-.ws[aria-current="true"]{border-left-color:var(--brand);background:var(--accent);font-weight:500}
-.ws .cue{color:var(--muted-foreground);font-size:var(--text-2xs);flex:none}
-/* the repo NAME is a path fragment — mono earns its place here */
-.ws .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:var(--text-xs)}
-/* shadcn Badge, `outline` variant */
-.ws .tag{font-size:var(--text-2xs);font-weight:500;color:var(--muted-foreground);
-  border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 6px;flex:none}
-.ws small{margin-left:auto;font-size:var(--text-2xs);font-weight:500;color:var(--success);flex:none}
-.wsrow .forget{width:30px;display:grid;place-items:center;color:var(--muted-foreground);font-size:var(--text-xs);opacity:0}
-.wsrow:hover .forget,.wsrow .forget:focus-visible{opacity:1}
-.wsrow .forget:hover{color:var(--destructive)}
-
-/* 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);
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
-  transition:color var(--duration-fast) var(--ease-emphasized),
-             border-color var(--duration-fast) var(--ease-emphasized)}
-.newsess:hover{color:var(--foreground);border-color:var(--ring)}
-.newsess i{font-style:normal}
-
-/* ── inline forms: name a session before it starts · add a repo by picking a folder.
-   These are the shadcn Field/Label/Input/Button primitives: a 13px medium label above a
-   36px input with a hairline --input border, and a filled primary + ghost cancel below. ── */
-.miniform{margin:8px 12px 6px;display:flex;flex-direction:column;gap:8px}
-.miniform[hidden]{display:none}
-.miniform .lbl{font-size:var(--text-sm);font-weight:500;color:var(--foreground)}
-.miniform input{min-height:36px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius-md);
-  background:transparent;color:var(--foreground);font-family:var(--sans);font-size:var(--text-sm);
-  outline:none;width:100%;
-  transition:border-color var(--duration-fast) var(--ease-emphasized),
-             box-shadow var(--duration-fast) var(--ease-emphasized)}
-.miniform input::placeholder{color:var(--muted-foreground)}
-.miniform input:focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--brand-wash)}
-.miniform .row{display:flex;gap:8px}
-/* Button, `default` variant — a filled brand action, not an outlined one */
-.miniform button{min-height:36px;padding:0 14px;border:1px solid transparent;border-radius:var(--radius-md);
-  background:var(--primary);font-size:var(--text-sm);font-weight:500;color:var(--primary-foreground);
-  transition:opacity var(--duration-fast) var(--ease-emphasized),
-             background-color var(--duration-fast) var(--ease-emphasized)}
-.miniform button:hover{opacity:.9}
-/* `ghost` variant — the dismissive half of a pair never competes with the primary */
-.miniform button.quiet{background:transparent;color:var(--muted-foreground)}
-.miniform button.quiet:hover{background:var(--accent);color:var(--accent-foreground);opacity:1}
-/* the primary way to add a repo: the machine's own folder chooser, not a typed path. `outline`
-   variant so it reads as a distinct choice rather than a second submit. */
-.miniform .pick{min-height:40px;background:transparent;border-color:var(--input);
-  color:var(--foreground);font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;gap:8px}
-.miniform .pick:hover{background:var(--accent);opacity:1}
-.miniform .hint{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
-.miniform .hint code{font-family:var(--mono);font-size:var(--text-2xs);background:var(--muted);
-  padding:1px 5px;border-radius:var(--radius-sm);color:var(--foreground)}
-/* shadcn ToggleGroup: one inset track, the selected item lifts onto the --background surface */
-.seg{display:flex;gap:2px;border:1px solid var(--border);border-radius:var(--radius-md);
-  background:var(--muted);padding:2px}
-.seg button{flex:1;min-height:30px;border:0;border-radius:var(--radius-sm);background:transparent;
-  color:var(--muted-foreground);font-size:var(--text-sm);font-weight:500;padding:0;
-  transition:background-color var(--duration-fast) var(--ease-emphasized),
-             color var(--duration-fast) var(--ease-emphasized)}
-.seg button:hover{color:var(--foreground)}
-.seg button[aria-checked="true"]{background:var(--background);color:var(--foreground);
-  box-shadow:0 1px 2px var(--shadow)}
-
-/* ── running agents ── */
-.sessrow{display:flex;align-items:stretch;position:relative}
-.sess{display:block;flex:1;min-width:0;text-align:left;padding:7px 4px 7px 11px;
-  border-left:3px solid transparent;min-height:44px}
-.sess:hover,.sessrow:hover .sess{background:var(--accent)}
-.sess[aria-current="true"]{background:var(--accent);border-left-color:var(--brand)}
-.sessrow:has(.sess[aria-current="true"]){background:var(--accent)}
-.sess .r1{display:flex;align-items:center;gap:7px}
-.sess .st{width:11px;text-align:center;font-size:var(--text-xs);flex:none}
-.sess[data-state="working"] .st{color:var(--success);animation:pulse 2.2s infinite}
-/* The five presented states take five distinct hues, because R8 requires hue to carry the state
-   on its own (as shape and word each do). green working · yellow quiet · blue NEEDS YOU ·
-   red MAYBE BLOCKED · grey exited. `needs` takes the BRAND hue rather than a danger one: a
-   finished turn is an invitation, not a failure, and red is reserved for the state that may be a
-   problem. (It read `--accent` before the shadcn port; under that palette --accent is the muted
-   hover SURFACE, so the brand hue is now --brand. Same intent, correct token.)
-   `blocked` was styled --warn while it was dead code; it is defined for real now, and must not
-   share `quiet`'s hue — a weak claim that looks exactly like no claim communicates nothing. */
-.sess[data-state="needs"] .st{color:var(--brand)}
-.sess[data-state="blocked"] .st{color:var(--destructive)}
-.sess[data-state="done"] .st{color:var(--info)}
-.sess[data-state="idle"] .st,.sess[data-state="exited"] .st{color:var(--muted-foreground)}
-@media (prefers-reduced-motion:reduce){.sess .st,.bar .conn.live::before{animation:none!important}}
-.sess .nm{font-size:var(--text-sm);font-weight:500;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.sess .sub{font-size:var(--text-xs);color:var(--muted-foreground);margin:2px 0 0 18px;display:block;
-  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.sess[data-state="needs"] .sub{color:var(--brand)}
-.sess[data-state="blocked"] .sub{color:var(--destructive)}
-/* "opening focus" — the permanent lead label on the run-title sub-line. It states plainly that the
-   title is the run's FIRST prompt (frozen, no timestamp), never its current activity. */
-.sess .sub .lead{font-size:var(--text-2xs);font-weight:500;color:var(--muted-foreground);margin-right:6px}
-/* ── harness tower (workspace-harness-tower): the state chip, the agent's own last words,
-      and the per-session harness drill-in. State is carried by SHAPE (the glyph), HUE, and the
-      WORD in the chip — three channels, so nothing depends on colour alone. ── */
-.sess[data-state="quiet"] .st{color:var(--warning)}
-/* shadcn Badge, `secondary` variant — the state WORD, one of the three channels state travels on */
-.sess .chip{margin-left:auto;flex:none;font-size:var(--text-2xs);font-weight:500;
-color:var(--muted-foreground);white-space:nowrap;background:var(--muted);
-border-radius:var(--radius-sm);padding:2px 7px}
-.sess[data-state="working"] .chip{color:var(--success)}
-.sess[data-state="quiet"] .chip{color:var(--warning)}
-.sess[data-state="needs"] .chip{color:var(--brand)}
-.sess[data-state="blocked"] .chip{color:var(--destructive)}
-.sess[data-state="exited"] .chip{color:var(--muted-foreground)}
-/* the last words WRAP — bounded to two lines here, in full in the terminal. The shipped .sub
-   stays nowrap; this is a separate line, so nothing existing changes shape. */
-.sess .says{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
-  margin:4px 0 0 18px;font-size:var(--text-xs);line-height:1.5;color:var(--muted-foreground)}
-.sess .says.na{color:var(--muted-foreground);font-style:italic}
-.sess[aria-current="true"] .says{color:var(--foreground)}
-
-details.hz{margin:0 8px 4px 14px}
-details.hz>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
-  min-height:44px;font-size:var(--text-xs);color:var(--muted-foreground)}
-details.hz>summary::-webkit-details-marker{display:none}
-details.hz>summary::before{content:"▸";font-size:var(--text-2xs)}
-details.hz[open]>summary::before{content:"▾"}
-details.hz>summary:hover{color:var(--foreground)}
-details.hz .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
-details.hz .kv{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 10px;padding:0 0 10px 15px}
-details.hz .kv dt{font-size:var(--text-xs);color:var(--muted-foreground);padding-top:1px}
-details.hz .kv dd{font-size:var(--text-xs);line-height:1.5;color:var(--foreground);min-width:0;overflow-wrap:anywhere}
-details.hz .kv dd b{color:var(--foreground);font-weight:500}
-/* an unavailable fact is DRAWN as unavailable — never as a plausible constant */
-details.hz .kv dd.na{color:var(--muted-foreground);font-style:italic}
-details.hz .kv dd.na::before{content:"— ";font-style:normal}
-details.hz .kv .src{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground)}
-
-/* rename affordance — the name is a guess at creation; it must stay editable (R11) */
-.sessrow .ren{width:30px;flex:none;display:grid;place-items:center;color:var(--muted-foreground);font-size:var(--text-xs);opacity:0}
-.sessrow:hover .ren,.sessrow .ren:focus-visible{opacity:1}
-.sessrow .ren:hover{color:var(--brand)}
-.renbox{width:100%;min-height:44px;padding:0 10px;border:1px solid var(--brand);border-radius:var(--radius-md);
-  background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs);outline:none}
-.sessrow .renbox{margin:0 8px}
-
-/* ── terminal column ── */
-.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}
-.group+.group{border-left:1px solid var(--border)}
-.group[data-focus="true"] .stabs{box-shadow:inset 0 2px 0 var(--brand)}
-.groups[data-split="off"] .group[data-focus="true"] .stabs{box-shadow:none}
-.stabs{display:flex;gap:2px;padding:6px 8px 0;background:var(--muted);flex:none;
-  border-bottom:1px solid var(--border);overflow-x:auto;min-height:44px;align-items:flex-end}
-/* tab = wrap of two SIBLING buttons (select + close) — valid interactive structure */
-.stab-wrap{flex:none;display:inline-flex;align-items:center;gap:0;
-  border:1px solid transparent;border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0}
-.stab-wrap[data-active="true"]{background:var(--term-bg);border-color:var(--border)}
-.stab{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 6px 0 12px;
-    font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-/* The ACTIVE tab is painted in --term-bg so it reads as continuous with the terminal below it —
-   and --term-bg is dark in BOTH themes (the terminal is a terminal). So its label has to come
-   from the terminal's own foreground, not the page's: --foreground here is near-black in light
-   mode, which rendered the active tab as black text on a black tab. */
-.stab-wrap[data-active="true"] .stab{color:var(--xt-brwhite)}
-.stab .g{font-size:var(--text-xs)}
-.stab-wrap[data-state="needs"] .g{color:var(--brand)} .stab-wrap[data-state="blocked"] .g{color:var(--destructive)}
-.stab-wrap[data-state="working"] .g{color:var(--success)}
-.stab-wrap[data-state="done"] .g{color:var(--info)}
-.stab-wrap[data-state="quiet"] .g{color:var(--warning)}
-.stab-wrap[data-state="idle"] .g,.stab-wrap[data-state="exited"] .g{color:var(--muted-foreground)}
-.stab-wrap .x{width:26px;min-height:38px;display:grid;place-items:center;border-radius:var(--radius-sm);
-color:var(--muted-foreground);font-size:var(--text-sm);margin-right:4px}
-.stab-wrap .x:hover{background:var(--accent);color:var(--accent-foreground)}
-/* on the dark active tab the hover surface has to be light, or the ✕ vanishes into it */
-.stab-wrap[data-active="true"] .x{color:var(--xt-brblack)}
-.stab-wrap[data-active="true"] .x:hover{background:rgba(255,255,255,.12);color:var(--xt-brwhite)}
-.stab-wrap .renbox{min-height:32px;width:150px;margin:0 6px 3px}
-
-.termhost{flex:1;position:relative;min-height:0;overflow:hidden}
-.termpane{position:absolute;inset:0;padding:8px 8px 6px 10px;display:none}
-.termpane.on{display:block}
-.termpane .xterm{height:100%}
-/* Touch scrollback: xterm's .xterm-viewport owns the scroll, but iOS Safari won't pan it by swipe
-   without an explicit touch-action + momentum flag (the terminal otherwise swallows the gesture).
-   Presentation-only; harmless on pointer devices. */
-.termpane .xterm .xterm-viewport{touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
-.termpane .xterm .xterm-screen{touch-action:pan-y}
-/* scoped to termhost (its positioned ancestor) — sidebar/tabs/needs stay clickable */
-.exited-overlay{position:absolute;inset:0;z-index:5;display:none;place-items:center;background:var(--glass)}
-.exited-overlay.on{display:grid}
-.exited-overlay .card{border:1px solid var(--input);border-radius:var(--radius-lg);background:var(--sidebar);
-  padding:16px 18px;text-align:center;max-width:340px}
-.exited-overlay .card p{font-size:var(--text-sm);color:var(--foreground);margin-bottom:10px}
-.exited-overlay .card .reason{display:block;margin-top:6px;font-family:var(--mono);font-size:var(--text-xs);
-  color:var(--warning);line-height:1.45;max-width:300px}
-.exited-overlay .card .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
-.exited-overlay .card button{min-height:44px;padding:0 16px;border:1px solid var(--brand);border-radius:var(--radius-md);
-  background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--brand)}
-.exited-overlay .card button.quiet{border-color:var(--input);color:var(--muted-foreground)}
-.exited-overlay .card button.quiet:hover{border-color:var(--destructive);color:var(--foreground)}
-/* a workspace with no sessions says so — it never shows another workspace's terminal */
-.empty-overlay{position:absolute;inset:0;z-index:4;display:none;place-items:center;padding:20px}
-.empty-overlay.on{display:grid}
-.empty-overlay .card{border:1px dashed var(--input);border-radius:var(--radius-lg);background:var(--sidebar);
-  padding:16px 18px;text-align:center;max-width:360px}
-.empty-overlay .card p{font-size:var(--text-sm);color:var(--foreground)}
-.empty-overlay .card .reason{margin-top:6px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.45}
-
-/* needs-you strips */
-.needs{border-top:1px solid var(--warning);background:var(--warning-wash);padding:10px 14px 12px;flex:none;
-  max-height:38vh;overflow-y:auto}
-.needs.accept{border-top-color:var(--info);background:var(--info-wash)}
-.needs .k{font-size:var(--text-xs);color:var(--warning)}
-.needs.accept .k{color:var(--info)}
-.needs .q{font-size:var(--text-sm);color:var(--foreground);line-height:1.5;margin:4px 0 9px;max-width:90ch}
-.needs .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-.dlink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--brand);text-decoration:underline}
-.gbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--input);
-  border-radius:var(--radius-lg);background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-.gbtn:hover{border-color:var(--warning);color:var(--foreground)}
-.needs.accept .gbtn:hover{border-color:var(--info)}
-.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}
-
-/* ── 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 auto;min-height:34px}
-.rail .pane[data-fold="off"]{flex:0 0 auto}
-
-
-/* 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}
-.lens button{min-height:24px;padding:0 7px;font-size:var(--text-2xs);font-weight:500;flex:none;
-  border-radius:var(--radius-sm);color:var(--muted-foreground);background:transparent;
-  transition:background-color var(--duration-fast) var(--ease-emphasized),
-             color var(--duration-fast) var(--ease-emphasized)}
-.lens button:hover{color:var(--foreground)}
-.lens button[aria-selected="true"]{background:var(--background);color:var(--foreground);
-  box-shadow:0 1px 2px var(--shadow)}
-/* shadcn Input */
-.libfind{margin:8px 12px 4px;min-height:34px;padding:0 12px;width:calc(100% - 24px);
-  border:1px solid var(--input);border-radius:var(--radius-md);background:transparent;color:var(--foreground);
-  font-family:var(--sans);font-size:var(--text-sm);outline:none;
-  transition:border-color var(--duration-fast) var(--ease-emphasized),
-             box-shadow var(--duration-fast) var(--ease-emphasized)}
-.libfind::placeholder{color:var(--muted-foreground)}
-.libfind:focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--brand-wash)}
-.grp{font-size:var(--text-2xs);
-  color:var(--muted-foreground);padding:8px 14px 4px}
-details.init{margin:0}
-details.init>summary{list-style:none;cursor:pointer;min-height:38px;display:flex;align-items:center;gap:7px;
-  padding:0 14px;font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground)}
-details.init>summary::-webkit-details-marker{display:none}
-details.init>summary::before{content:"▸";font-size:var(--text-2xs);color:var(--muted-foreground);transition:transform .12s;flex:none}
-details.init[open]>summary::before{transform:rotate(90deg)}
-@media (prefers-reduced-motion:reduce){details.init>summary::before{transition:none}}
-details.init>summary:hover{background:var(--accent)}
-details.init .iid{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-details.init .n{font-size:var(--text-2xs);color:var(--muted-foreground);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 4px;flex:none}
-details.init .ititle{display:none}
-.doc.art{display:flex;align-items:center;gap:8px;padding-left:28px}
-.doc.art .role{flex:none;width:66px;font-size:var(--text-2xs);color:var(--muted-foreground)}
-.doc.art .role[data-role="PRD"]{color:var(--brand)}
-.doc.art .role[data-role="rubric"],.doc.art .role[data-role="eval"]{color:var(--info)}
-.doc.art .role[data-role="design brief"],.doc.art .role[data-role="design"]{color:var(--warning)}
-.doc.art .dn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-details.tree{margin:0}
-details.tree>summary{list-style:none;cursor:pointer;min-height:38px;display:flex;align-items:center;gap:7px;
-  padding:0 14px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-details.tree>summary::-webkit-details-marker{display:none}
-details.tree>summary::before{content:"▸";font-size:var(--text-2xs);color:var(--muted-foreground);transition:transform .12s;flex:none}
-details.tree[open]>summary::before{transform:rotate(90deg)}
-@media (prefers-reduced-motion:reduce){details.tree>summary::before{transition:none}}
-details.tree>summary:hover{color:var(--foreground)}
-.tree .tree>summary{padding-left:28px}
-.tree .tree .tree>summary{padding-left:42px}
-.doc{display:block;width:100%;text-align:left;color:var(--muted-foreground);font-size:var(--text-xs);
-  padding:5px 14px 5px 30px;min-height:36px;line-height:1.3;border-left:3px solid transparent;font-family:var(--mono)}
-.tree .tree .doc{padding-left:44px}
-.tree .tree .tree .doc{padding-left:58px}
-.doc:hover{color:var(--foreground);background:var(--accent)}
-.doc.on{color:var(--brand);border-left-color:var(--brand);font-weight:600}
-/* a non-markdown file: shown so the folder map is complete, but inert (the reader is .md-only) */
-.file{display:block;width:100%;text-align:left;color:var(--muted-foreground);font-size:var(--text-xs);
-  padding:5px 14px 5px 30px;min-height:36px;line-height:1.3;border-left:3px solid transparent;
-  font-family:var(--mono);opacity:.62;cursor:default}
-.tree .tree .file{padding-left:44px}
-.tree .tree .tree .file{padding-left:58px}
-/* the library refresh (↻): hugs the lens toggle, spins briefly on click */
-.cap .librefresh{margin-left:6px;width:26px;height:26px;flex:none}
-.librefresh.spin{animation:libspin .5s linear}
-@keyframes libspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
-@media (prefers-reduced-motion:reduce){.librefresh.spin{animation:none}}
-.empty{padding:10px 16px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
-.empty b{color:var(--foreground)}
-
-/* ── 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. */
-.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 */
-.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)}
-.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}
-.doc-body h1{font-size:21px;font-weight:600;line-height:1.3;margin:4px 0 12px;color:var(--foreground);text-wrap:balance}
-.doc-body h2{font-size:16px;font-weight:600;line-height:1.35;margin:26px 0 8px;color:var(--foreground);
-  padding-bottom:5px;border-bottom:1px solid var(--border)}
-.doc-body h3{font-size:14px;font-weight:600;margin:20px 0 6px;color:var(--foreground)}
-.doc-body h4,.doc-body h5,.doc-body h6{font-size:var(--text-sm);font-weight:600;margin:16px 0 5px;color:var(--muted-foreground)}
-.doc-body p{margin:0 0 12px}
-.doc-body ul,.doc-body ol{margin:0 0 12px;padding-left:22px}
-.doc-body li{margin:0 0 5px;padding-left:2px}
-.doc-body li>ul,.doc-body li>ol{margin:5px 0 0}
-.doc-body li::marker{color:var(--muted-foreground)}
-.doc-body ul.task{list-style:none;padding-left:6px}
-.doc-body ul.task li{display:flex;gap:8px;align-items:baseline}
-.doc-body ul.task .box{flex:none;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-.doc-body ul.task .box.done{color:var(--success)}
-.doc-body code{font-family:var(--mono);font-size:var(--text-sm);color:var(--brand);background:var(--secondary);
-  padding:1.5px 5px;border-radius:var(--radius-sm);word-break:break-word}
-.doc-body pre{background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-md);
-  padding:12px 14px;overflow-x:auto;margin:0 0 14px;max-width:100%}
-.doc-body pre code{background:none;padding:0;color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.6;word-break:normal}
-.doc-body pre .lang{display:block;font-family:var(--mono);font-size:var(--text-2xs);
-  color:var(--muted-foreground);margin-bottom:7px}
-.doc-body blockquote{border-left:3px solid var(--input);background:var(--card);
-  padding:9px 14px;margin:0 0 14px;border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--muted-foreground)}
-.doc-body blockquote p:last-child{margin-bottom:0}
-.doc-body hr{border:0;border-top:1px solid var(--border);margin:22px 0}
-.doc-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
-.doc-body a:hover{color:var(--brand)}
-.doc-body strong{color:var(--foreground);font-weight:600}
-.doc-body del{color:var(--muted-foreground)}
-/* tables (rubrics ARE tables) — scroll inside their own box, never the page */
-.doc-body .tablewrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--border);border-radius:var(--radius-md);max-width:100%}
-.doc-body table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
-.doc-body th,.doc-body td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--border);vertical-align:top}
-.doc-body th{background:var(--muted);color:var(--foreground);font-weight:600;font-size:var(--text-sm);
-  letter-spacing:.03em;white-space:nowrap}
-.doc-body tbody tr:nth-child(even){background:var(--card)}
-.doc-body tbody tr:last-child td{border-bottom:0}
-/* the identity block every PMOS artifact opens with, as a card instead of raw YAML */
-.doc-body .fm{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-lg);
-  padding:10px 12px;margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
-  font-size:var(--text-sm);max-width:72ch}
-.doc-body .fm dt{font-size:var(--text-2xs);
-  color:var(--muted-foreground);padding-top:2px}
-.doc-body .fm dd{color:var(--foreground);min-width:0;overflow-wrap:anywhere}
-.doc-empty{padding:16px;color:var(--muted-foreground);font-size:var(--text-sm)}
-
-/* ── ⌘K jump palette + the in-app folder browser ── */
-.palette{position:fixed;inset:0;z-index:90;background:var(--glass);backdrop-filter:blur(3px);
-  display:grid;place-items:start center;padding-top:12vh}
-.palette-box{width:min(560px,92vw);background:var(--sidebar);border:1px solid var(--input);
-  border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 24px 80px -24px var(--shadow)}
-.palette-box input{width:100%;min-height:48px;padding:0 16px;background:var(--muted);border:0;
-  border-bottom:1px solid var(--border);color:var(--foreground);font-family:var(--mono);font-size:var(--text-base);outline:none}
-.palette-list{max-height:52vh;overflow-y:auto;padding:6px}
-.pitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;min-height:40px;padding:0 12px;
-  border-radius:var(--radius-md);font-family:var(--mono);font-size:var(--text-sm);color:var(--muted-foreground)}
-.pitem .kind{font-size:var(--text-2xs);color:var(--muted-foreground);margin-left:auto}
-.pitem.sel,.pitem:hover{background:var(--accent);color:var(--foreground)}
-.pitem .g{font-size:var(--text-xs);color:var(--muted-foreground)}
-.pitem .badge{font-size:var(--text-2xs);color:var(--success);
-  border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 4px;margin-left:auto}
-.fs-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--muted);
-  border-bottom:1px solid var(--border)}
-.fs-up{width:34px;min-height:34px;display:grid;place-items:center;border:1px solid var(--border);
-  border-radius:var(--radius-md);background:var(--secondary);color:var(--muted-foreground)}
-.fs-up:hover{border-color:var(--brand);color:var(--brand)}
-.fs-crumb{flex:1;min-width:0;font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);
-  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
-.fs-use{min-height:34px;padding:0 12px;border:1px solid var(--brand);border-radius:var(--radius-md);
-  background:var(--brand-wash);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs)}
-.fs-head .x{width:34px;min-height:34px;display:grid;place-items:center;border:1px solid var(--border);
-  border-radius:var(--radius-md);background:var(--secondary);color:var(--muted-foreground);font-size:var(--text-sm)}/* ── status strip ── */
-.strip{display:flex;align-items:center;gap:14px;padding:0 12px;border-top:1px solid var(--border);
-  background:var(--muted);font-size:var(--text-xs);color:var(--muted-foreground);min-width:0}
-.strip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* `flex:none` here would pin the hint list at its full width and push the page into a horizontal
-   scroll once the type got bigger than the 9.5px it was originally set at. It ellipsizes instead:
-   the strip is the lowest-priority text on screen and must never widen the app. */
-.strip .right{margin-left:auto;color:var(--muted-foreground);flex:0 1 auto;min-width:0}
-
-/* ── on-demand surfaces (Plan · Deliver · Measure · Report), rendered in the reader ── */
-/* phase accents — status is NEVER hue-alone: every surface pairs colour with a glyph + label */
-.sf-wrap{--plan:var(--brand);--deliver:var(--success);--measure:var(--info);--report:var(--warning)}
-.sf-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
-  padding:12px 22px;background:var(--muted);border-bottom:1px solid var(--border);margin:0 0 4px}
-.sf-views{display:inline-flex;gap:6px;flex-wrap:wrap}
-.sf-views button{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);border:1px solid var(--border);
-  border-radius:var(--radius-md);padding:4px 10px;background:var(--secondary)}
-.sf-views button:hover{border-color:var(--input);color:var(--foreground)}
-.sf-views button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
-.sf-chip{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font-size:var(--text-2xs);
-  letter-spacing:.05em;color:var(--success);border:1px solid var(--border);border-radius:99px;padding:3px 10px}
-.sf-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}
-.sf-body{padding:14px 22px 40px;display:flex;flex-direction:column;gap:16px}
-.sf-body .untr{color:var(--muted-foreground);font-style:italic;opacity:.75;font-size:var(--text-xs)}
-.sf-note{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.6;border-top:1px solid var(--border);padding-top:11px}
-
-/* focal band: what needs you (leads) */
-.sf-needs{border:1px solid var(--warning);border-radius:var(--radius-xl);overflow:hidden;
-  background:radial-gradient(120% 140% at 0 0,var(--warning-wash),transparent 60%),var(--card)}
-.sf-needs .nh{display:flex;align-items:center;gap:9px;padding:12px 15px 9px}
-.sf-needs .nh .dot{width:8px;height:8px;border-radius:50%;background:var(--warning);flex:none;box-shadow:0 0 0 4px var(--warning-wash)}
-.sf-needs .nh b{font-size:var(--text-base);color:var(--foreground)}
-.sf-needs .nh .sub{font-family:var(--mono);font-size:var(--text-xs);color:var(--warning);margin-left:auto}
-.sf-needs .need{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--border)}
-.sf-needs .need .ph{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--warning);flex:none}
-.sf-needs .need .txt{flex:1;min-width:0}
-.sf-needs .need .t{font-size:var(--text-sm);color:var(--foreground);line-height:1.45}
-.sf-needs .need .m{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:3px}
-.sf-needs .need .go{flex:none;min-height:36px;padding:0 13px;border:1px solid var(--warning);border-radius:var(--radius-md);
-  background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--warning)}
-.sf-needs .need .go:hover{background:var(--warning-wash);color:var(--foreground)}
-.sf-needs.calm{border-color:var(--info)}
-.sf-needs.calm .nh .dot{background:var(--info);box-shadow:0 0 0 4px var(--info-wash)}
-.sf-needs.calm .nh .sub{color:var(--info)}
-.sf-needs.calm .calm-body{padding:2px 15px 13px;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
-
-/* one restrained instrument (not a chart wall) */
-.sf-pulse{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
-.sf-pulse .n{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-.sf-pulse .n b{color:var(--foreground);font-size:15px;font-weight:600}
-.sf-dist{flex:1;min-width:150px;height:8px;border-radius:99px;overflow:hidden;display:flex;background:var(--accent)}
-.sf-dist i{height:100%}
-.sf-dist i[data-phase="plan"]{background:var(--plan)} .sf-dist i[data-phase="deliver"]{background:var(--deliver)}
-.sf-dist i[data-phase="measure"]{background:var(--measure)} .sf-dist i[data-phase="report"]{background:var(--report)}
-.sf-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--text-2xs);color:var(--muted-foreground)}
-
-/* the list: rows with a phase spine,not a wall of identical cards */
-.sf-grp{font-size:var(--text-2xs);color:var(--muted-foreground);padding:4px 2px 2px}
-.sf-list{display:flex;flex-direction:column}
-.sf-row{border-top:1px solid var(--border)}
-.sf-row:first-child{border-top:0}
-.sf-row>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3px auto 1fr auto auto;gap:11px;
-  align-items:center;padding:11px 4px;min-height:54px}
-.sf-row>summary::-webkit-details-marker{display:none}
-.sf-row>summary:hover{background:var(--accent)}
-.sf-spine{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--input)}
-.sf-row[data-phase="plan"] .sf-spine,.sf-rcrow[data-phase="plan"] .sf-spine{background:var(--plan)}
-.sf-row[data-phase="deliver"] .sf-spine,.sf-rcrow[data-phase="deliver"] .sf-spine{background:var(--deliver)}
-.sf-row[data-phase="measure"] .sf-spine,.sf-rcrow[data-phase="measure"] .sf-spine{background:var(--measure)}
-.sf-row[data-phase="report"] .sf-spine,.sf-rcrow[data-phase="report"] .sf-spine{background:var(--report)}
-.sf-stat .g{font-size:var(--text-xs);color:var(--muted-foreground);white-space:nowrap}
-.sf-id{font-family:var(--mono);font-size:var(--text-sm);color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
-.sf-id .ti{display:block;font-family:var(--sans);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px;
-  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.sf-metrics{display:flex;align-items:center;gap:13px;flex:none;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-.sf-metrics .m{display:flex;flex-direction:column;gap:2px}
-.sf-metrics .k{font-size:var(--text-2xs);color:var(--muted-foreground)}
-.sf-metrics b{color:var(--brand);font-size:var(--text-base)}
-.sf-prog{width:52px;height:5px;border-radius:99px;background:var(--accent);overflow:hidden;display:block}
-.sf-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--info))}
-.sf-chev{color:var(--muted-foreground);font-size:var(--text-xs);transition:transform .14s}
-.sf-row[open] .sf-chev{transform:rotate(90deg)}
-@media (prefers-reduced-motion:reduce){.sf-chev{transition:none}}
-.sf-detail{padding:2px 12px 15px 18px;display:grid;gap:11px;background:var(--muted)}
-.sf-detail h4{font-size:var(--text-2xs);color:var(--muted-foreground);margin-bottom:4px}
-.sf-detail p{font-size:var(--text-sm);color:var(--foreground);line-height:1.5}
-.sf-arts{display:flex;flex-wrap:wrap;gap:6px}
-.sf-art{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);
-  border:1px solid var(--border);border-radius:var(--radius-md);padding:4px 9px;background:var(--secondary)}
-.sf-art:hover{border-color:var(--brand);color:var(--brand)}
-.sf-art .role{font-size:var(--text-2xs);color:var(--muted-foreground)}
-
-/* roadmap (list-calendar) · okr · report */
-.sf-rc h4{font-family:var(--mono);font-size:var(--text-2xs);color:var(--brand);
-  margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--border)}
-.sf-rcrow{display:grid;grid-template-columns:3px 1fr auto;gap:10px;align-items:center;padding:7px 2px}
-.sf-rcrow .nm{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.sf-rcrow .st{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-.sf-kr{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:13px;margin-bottom:2px}
-.sf-kr .obj{font-size:var(--text-base);color:var(--foreground);font-weight:600;margin-bottom:9px}
-.sf-kr .krrow{padding:8px 0;border-top:1px solid var(--border)}
-.sf-kr .krh{display:flex;gap:9px;align-items:baseline}
-.sf-kr .krh .lab{font-family:var(--mono);font-size:var(--text-xs);color:var(--info);flex:none}
-.sf-kr .krh span:last-child{font-size:var(--text-sm);color:var(--foreground)}
-.sf-kr .lev{margin-top:5px}
-.sf-rep .lead{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:6px}
-.sf-rep h3{font-size:var(--text-base);color:var(--foreground);font-weight:600;margin:16px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--border)}
-.sf-rep ul{margin:0;padding-left:20px}
-.sf-rep li{margin-bottom:5px;font-size:var(--text-sm);color:var(--foreground);line-height:1.5}
-
-/* honest can't-produce + loading */
-.sf-fail{border:1px dashed var(--input);border-radius:var(--radius-xl);background:var(--card);padding:24px;text-align:center}
-.sf-fail .mk{width:34px;height:34px;margin:0 auto 12px;display:grid;place-items:center;border-radius:var(--radius-lg);border:1px solid var(--input);color:var(--muted-foreground);font-size:16px}
-.sf-fail h3{font-size:14px;color:var(--foreground);margin-bottom:6px}
-.sf-fail p{font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.6;max-width:48ch;margin:0 auto 5px}
-.sf-fail .miss{font-size:var(--text-xs);color:var(--warning)}
-.sf-fail code{font-family:var(--mono);color:var(--brand);background:var(--secondary);padding:1px 6px;border-radius:var(--radius-sm)}
-.sf-skel{display:flex;flex-direction:column;gap:11px}
-.sf-skel i{height:50px;border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--card),var(--accent),var(--card));background-size:200% 100%;animation:sfsh 1.3s infinite}
-@keyframes sfsh{0%{background-position:200% 0}100%{background-position:-200% 0}}
-@media (prefers-reduced-motion:reduce){.sf-skel i{animation:none;opacity:.7}}
-
-/* ── the scheduled lens (a persistent third library lens, in the library pane) ── */
-.sc-load{padding:14px;color:var(--muted-foreground);font-size:var(--text-xs)}
-.sc-wrap{--plan:var(--brand);padding:8px 10px 12px}
-.sc-sum{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--border);margin-bottom:10px}
-.sc-sum .dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none;box-shadow:0 0 0 4px var(--info-wash)}
-.sc-sum.warn .dot{background:var(--warning);box-shadow:0 0 0 4px var(--warning-wash)}
-.sc-sum .t{font-size:var(--text-sm);color:var(--foreground);min-width:0}
-.sc-sum .t b{color:var(--foreground)}
-.sc-new{margin-left:auto;min-height:30px;padding:0 11px;border:1px solid var(--brand);border-radius:var(--radius-md);background:var(--brand-wash);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs);flex:none}
-.sc-list{display:flex;flex-direction:column;gap:7px}
-.sc-row{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden}
-.sc-main{display:grid;grid-template-columns:3px auto 1fr auto;gap:10px;align-items:center;padding:10px 11px}
-.sc-rail{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--input)}
-.sc-row[data-health="armed"] .sc-rail{background:var(--brand)}
-.sc-row[data-health="running"] .sc-rail{background:var(--success);animation:pulse 1.6s infinite}
-.sc-row[data-health="failed"] .sc-rail{background:var(--destructive)}
-@media (prefers-reduced-motion:reduce){.sc-row[data-health="running"] .sc-rail{animation:none}}
-.sc-tog{position:relative;width:34px;height:20px;border-radius:99px;background:var(--accent);border:1px solid var(--input);flex:none;cursor:pointer;transition:background .15s}
-.sc-tog[aria-checked="true"]{background:var(--brand-wash);border-color:var(--brand)}
-.sc-tog .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted-foreground);transition:transform .15s,background .15s}
-.sc-tog[aria-checked="true"] .knob{transform:translateX(14px);background:var(--brand)}
-@media (prefers-reduced-motion:reduce){.sc-tog,.sc-tog .knob{transition:none}}
-.sc-id{min-width:0}
-.sc-id .nm{font-family:var(--mono);font-size:var(--text-sm);color:var(--foreground);display:flex;align-items:center;gap:6px;overflow:hidden}
-.sc-id .nm .g{color:var(--muted-foreground);font-size:var(--text-2xs);flex:none}
-.sc-id .nm .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.sc-id .nm .skill{font-size:var(--text-2xs);color:var(--purple);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 5px;flex:none}
-.sc-id .cad{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.sc-run{text-align:right;flex:none;font-size:var(--text-xs)}
-.sc-run .next{color:var(--brand)}
-.sc-run .fail{color:var(--destructive)}
-.sc-run .off{color:var(--muted-foreground)}
-.sc-more{display:flex;gap:6px;padding:0 11px 10px 24px}
-.sc-more button{min-height:30px;padding:0 9px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground)}
-.sc-more .rn{border-color:var(--brand);color:var(--brand)}
-.sc-more button:hover{border-color:var(--input);color:var(--foreground)}
-.sc-more .rn:hover{background:var(--brand-wash)}
-.sc-empty{text-align:center;padding:22px 14px}
-.sc-empty .mk{width:30px;height:30px;margin:0 auto 10px;display:grid;place-items:center;border-radius:var(--radius-md);border:1px dashed var(--input);color:var(--muted-foreground);font-size:14px}
-.sc-empty p{font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.55;max-width:32ch;margin:0 auto 11px}
-.sc-note{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);line-height:1.6;border-top:1px solid var(--border);margin-top:11px;padding-top:10px}
-.sc-note b{color:var(--purple)}
-/* create form */
-.sc-form{border:1px solid var(--brand);border-radius:var(--radius-lg);background:var(--muted);padding:12px;display:grid;gap:9px;margin:0 0 10px}
-.sc-form label{font-size:var(--text-2xs);color:var(--muted-foreground);display:block;margin-bottom:4px}
-.sc-form input,.sc-form select{width:100%;min-height:34px;padding:0 9px;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs);outline:none}
-.sc-form input:focus,.sc-form select:focus{border-color:var(--brand)}
-.sc-f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
-.sc-seg{display:flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
-.sc-seg button{flex:1;min-height:32px;background:var(--secondary);color:var(--muted-foreground);font-family:var(--mono);font-size:var(--text-2xs)}
-.sc-seg button+button{border-left:1px solid var(--border)}
-.sc-seg button[aria-pressed="true"]{background:var(--accent);color:var(--brand)}
-.sc-hint{font-size:var(--text-2xs);color:var(--muted-foreground);line-height:1.5}
-.sc-hint b{color:var(--success)}
-.sc-frow{display:flex;gap:8px}
-.sc-form .save{min-height:36px;padding:0 13px;border:1px solid var(--brand);border-radius:var(--radius-md);background:var(--brand-wash);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs)}
-.sc-form .cancel{min-height:36px;padding:0 11px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);color:var(--muted-foreground);font-family:var(--mono);font-size:var(--text-xs)}
-/* New Skill flow — the GUI that replaces editing server code (workspace-skill-authoring) */
-.sc-acts{margin-left:auto;display:flex;gap:6px;flex:none}
-.sc-new.ghost{border-color:var(--input);background:var(--secondary);color:var(--muted-foreground)}
-.sc-new.ghost:hover{border-color:var(--purple);color:var(--purple)}
-.sc-form textarea{width:100%;min-height:34px;padding:7px 9px;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs);outline:none;resize:vertical;line-height:1.5}
-.sc-form textarea:focus{border-color:var(--brand)}
-.sk-form{border-color:var(--purple)}
-.sk-head{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
-.sk-head .sk-sub{font-size:var(--text-2xs);letter-spacing:.04em;color:var(--muted-foreground);text-transform:none}
-.sc-ai{min-height:36px;padding:0 11px;border:1px solid var(--purple);border-radius:var(--radius-md);background:var(--accent);color:var(--purple);font-family:var(--mono);font-size:var(--text-xs)}
-.sc-ai:hover{background:var(--brand-wash)}
-.needs.report{border-top-color:var(--info);background:var(--info-wash)}
-.needs.report .k{color:var(--info)}/* a session that fired from a schedule carries a small badge */
-.sess .schtag{margin-left:6px;font-size:var(--text-2xs);color:var(--purple);
-  border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 4px;vertical-align:middle}
-
-/* Narrow: the rail floats over the terminal instead of squeezing it below a usable width. */
-@media (max-width:1100px){
-  /* 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}
-}
-.lay-narrow{display:none;font-size:var(--text-xs);color:var(--warning);
-  line-height:1.5;margin:6px 5px 0}
-
-/* history lens — episodic recall over this workspace's own session scrollback */
-.hi-hint{padding:14px;color:var(--muted-foreground);font-size:var(--text-xs);line-height:1.6}
-.hi-list{display:flex;flex-direction:column;gap:7px;padding:8px 10px 12px}
-.hi-row{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:9px 11px}
-.hi-head{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
-.hi-head b{font-size:var(--text-sm);color:var(--foreground)}
-.hi-meta{font-size:var(--text-xs);color:var(--muted-foreground)}
-.hi-ctx{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);white-space:pre-wrap;word-break:break-word}
-.hi-hit{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);white-space:pre-wrap;word-break:break-word;padding:2px 0}
-
-/* ── reader: multi-format preview + local images (workspace-reader-preview) ── */
-.doc-src{margin:0;padding:12px 14px;font-family:var(--mono);font-size:var(--text-sm);line-height:1.6;
-  color:var(--foreground);white-space:pre-wrap;word-break:break-word;background:var(--card);
-  border:1px solid var(--border);border-radius:var(--radius-md);overflow-x:auto}
-.doc-body img.doc-img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-md);
-  background:var(--card);display:block;margin:10px 0}
-.img-view{padding:6px 2px}
-.img-view img.doc-img{margin:0}
-.html-view{display:flex;flex-direction:column;gap:8px}
-.html-bar{display:flex;gap:6px;align-items:center}
-.html-tab{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.02em;padding:3px 9px;
-  border:1px solid var(--border);background:var(--secondary);color:var(--muted-foreground);border-radius:var(--radius-md);cursor:pointer}
-.html-tab:hover{border-color:var(--input);color:var(--foreground)}
-.html-tab.on{border-color:var(--brand);color:var(--brand);background:var(--accent)}
-.html-tab .sbx{font-size:var(--text-2xs);opacity:.7}
-.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 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 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){
-  /* 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). */
-  /* 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-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,.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 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-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}
-  .ctrlbar button{flex:1 0 auto;min-width:44px;min-height:44px;display:grid;place-items:center;
-    border:1px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);color:var(--foreground);
-    font-family:var(--mono);font-size:14px}
-  .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}
-  /* 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}
-  .bar .sub{display:none}
-  .bar .conn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
-  /* the strip's right half is a list of KEYBOARD hints (⌘K, F2, Esc) — on a phone it advertises
-     keys that are not there, so the connection state gets the whole strip instead */
-  .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. */
-.cs-error{border:1px solid var(--destructive);border-radius:var(--radius-xl);padding:16px 18px;
-  background:radial-gradient(120% 140% at 0 0,rgba(242,101,95,.14),transparent 60%),var(--card)}
-.cs-err-head{display:flex;align-items:center;gap:9px}
-.cs-err-head .mk{width:22px;height:22px;display:grid;place-items:center;border-radius:var(--radius-md);
-  background:var(--destructive);color:white;font-size:var(--text-sm);flex:none}
-.cs-err-head b{font-size:var(--text-base);color:var(--destructive)}
-.cs-err-why{margin-top:8px;font-size:var(--text-sm);color:var(--foreground);line-height:1.5}
-.cs-err-note{margin-top:7px;font-family:var(--mono);font-size:var(--text-xs);color:var(--destructive);opacity:.9;line-height:1.5}
-.cs-empty{border:1px solid var(--info);border-radius:var(--radius-xl);padding:16px 18px;
-  background:radial-gradient(120% 140% at 0 0,var(--info-wash),transparent 60%),var(--card)}
-.cs-empty>.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--info);
-  box-shadow:0 0 0 4px var(--info-wash);margin-right:8px;vertical-align:middle}
-.cs-empty b{font-size:var(--text-base);color:var(--foreground)}
-.cs-empty p{margin-top:6px;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
-.cs-empty-note{font-family:var(--mono);font-size:var(--text-xs);color:var(--info);opacity:.85}
-.cs-src{font-size:var(--text-xs);color:var(--muted-foreground)}
-.sf-chip.src::before{background:var(--info)}
-/* needs-you */
-.cs-needs{border:1px solid var(--warning);border-radius:var(--radius-xl);overflow:hidden;
-  background:radial-gradient(120% 140% at 0 0,var(--warning-wash),transparent 60%),var(--card)}
-.cs-needs .cs-h,.cs-wm .cs-h,.cs-per .cs-h{display:flex;align-items:center;gap:9px;padding:12px 15px 9px}
-.cs-needs .cs-h .dot{width:8px;height:8px;border-radius:50%;background:var(--warning);flex:none;box-shadow:0 0 0 4px var(--warning-wash)}
-.cs-h b{font-size:var(--text-base);color:var(--foreground)}
-.cs-h .src{font-size:var(--text-xs);color:var(--muted-foreground);margin-left:auto}
-.cs-need{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--border)}
-.cs-need .ph{width:3px;align-self:stretch;border-radius:var(--radius-sm);background:var(--warning);flex:none}
-.cs-need[data-kind="accept"] .ph{background:var(--brand)}
-.cs-need .txt{flex:1;min-width:0}
-.cs-need .t{font-size:var(--text-sm);color:var(--foreground);line-height:1.45}
-.cs-need .m{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-top:3px}
-/* radar + metrics cards */
-.cs-cards{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
-.cs-card{flex:1;min-width:150px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:13px 15px}
-.cs-card.warnedge{border-color:var(--warning)}
-.cs-card h4{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:7px}
-.cs-big{font-size:26px;font-weight:600;color:var(--foreground);line-height:1;display:flex;align-items:baseline;gap:6px}
-.cs-big .u{font-size:var(--text-xs);font-weight:400;color:var(--muted-foreground);font-family:var(--mono)}
-.cs-sub{margin-top:7px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
-.cs-caveat{margin-top:8px;font-size:var(--text-xs);color:var(--warning);line-height:1.5;border-top:1px solid var(--border);padding-top:7px}
-.cs-wm{margin-top:12px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
-.cs-wm .cs-h .dot{width:8px;height:8px;border-radius:50%;flex:none}
-.cs-wm .cs-h .dot.ok{background:var(--success);box-shadow:0 0 0 4px var(--info-wash)}
-.cs-wm .cs-h .dot.warn{background:var(--warning);box-shadow:0 0 0 4px var(--warning-wash)}
-.cs-wmrow{display:flex;align-items:center;gap:10px;padding:8px 15px;border-top:1px solid var(--border)}
-.cs-wmrow .rag{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted-foreground)}
-.cs-wmrow .rag.rag-green{background:var(--success)}
-.cs-wmrow .rag.rag-amber{background:var(--warning)}
-.cs-wmrow .rag.rag-red{background:var(--destructive)}
-.cs-wmrow .nm{flex:1;min-width:0;font-size:var(--text-sm);color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cs-wmrow .nm .ti{color:var(--muted-foreground);margin-left:7px;font-size:var(--text-xs)}
-.cs-wmrow .st{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);flex:none}
-.cs-none,.cs-per .cs-none{padding:10px 15px;font-size:var(--text-xs);color:var(--muted-foreground)}
-.cs-per{margin-top:12px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
-.cs-perrow{display:flex;align-items:center;gap:10px;padding:6px 15px;border-top:1px solid var(--border)}
-.cs-perrow .nm{width:40%;min-width:0;font-size:var(--text-sm);color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cs-perrow .bar{flex:1;height:6px;border-radius:var(--radius-sm);background:var(--secondary);overflow:hidden}
-.cs-perrow .bar i{display:block;height:100%;background:var(--brand);border-radius:var(--radius-sm)}
-.cs-perrow .v{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);flex:none;width:28px;text-align:right}
-
-/* ── workflow ladder (workflow-enforcement) ──────────────────────────────────────────────────
-   Where each in-flight initiative is, what is next, and what is blocking. Status is carried by a
-   glyph AND a colour, never by colour alone — the whole surface has to survive being read by
-   someone who cannot separate the red from the green, and `blocked` is the state that must never
-   be missed. `unknown` is styled as its own thing rather than a dim `done`, because collapsing the
-   two is precisely the false green this surface exists to prevent. */
-.cs-workflow>.cs-h{display:flex;align-items:center;gap:9px;padding:0 0 10px}
-.cs-workflow>.cs-h .dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;box-shadow:0 0 0 4px var(--info-wash)}
-.cs-workflow>.cs-h .dot.warn{background:var(--warning);box-shadow:0 0 0 4px var(--warning-wash)}
-.wf-degraded{border:1px solid var(--warning);border-radius:var(--radius-lg);background:var(--warning-wash);
-  padding:10px 14px;margin-bottom:12px;font-size:var(--text-sm);color:var(--foreground);line-height:1.55}
-.wf-degraded b{color:var(--warning)}
-.wf-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);
-  overflow:hidden;margin-bottom:12px}
-.wf-card[data-blocked="1"]{border-color:var(--destructive)}
-.wf-top{display:flex;align-items:center;gap:9px;padding:12px 15px 9px}
-.wf-id{font-family:var(--mono);font-size:var(--text-sm);color:var(--foreground);background:none;border:0;
-  padding:0;cursor:pointer;text-align:left}
-.wf-id:hover{color:var(--brand);text-decoration:underline}
-.wf-lane{font-family:var(--mono);font-size:var(--text-xs);
-  color:var(--muted-foreground);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 7px;background:var(--secondary)}
-.wf-here{font-family:var(--mono);font-size:var(--text-2xs);
-  color:var(--brand);border:1px solid var(--brand);border-radius:var(--radius-sm);padding:2px 7px;
-  background:var(--brand-wash)}
-.wf-more{margin-top:2px;padding:10px 15px;border:1px dashed var(--input);border-radius:var(--radius-lg);
-  font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
-.wf-anchor{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);margin-left:auto;
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
-.wf-rail{display:flex;align-items:center;gap:5px;padding:0 15px 11px;flex-wrap:wrap}
-.wf-st{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.05em;color:var(--muted-foreground)}
-.wf-st.past{color:var(--muted-foreground)}
-.wf-st.at{color:var(--foreground);border-bottom:2px solid var(--brand);padding-bottom:1px}
-.wf-sep{width:12px;height:1px;background:var(--input);flex:none}
-.wf-steps{border-top:1px solid var(--border)}
-.wf-step{display:flex;align-items:baseline;gap:9px;padding:5px 15px}
-.wf-g{font-family:var(--mono);font-size:var(--text-xs);width:11px;flex:none;text-align:center;color:var(--muted-foreground)}
-.wf-step[data-st="done"] .wf-g{color:var(--success)}
-.wf-step[data-st="blocked"] .wf-g{color:var(--destructive)}
-.wf-step[data-st="unknown"] .wf-g{color:var(--warning)}
-.wf-k{font-family:var(--mono);font-size:var(--text-xs);width:74px;flex:none;color:var(--muted-foreground)}
-.wf-step[data-st="na"] .wf-k,.wf-step[data-st="pending"] .wf-k{color:var(--muted-foreground)}
-.wf-step[data-st="blocked"] .wf-k{color:var(--destructive)}
-.wf-e{flex:1;min-width:0;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
-.wf-step[data-st="na"] .wf-e,.wf-step[data-st="pending"] .wf-e{color:var(--muted-foreground)}
-.wf-rule{font-family:var(--mono);font-size:var(--text-2xs);border:1px solid var(--destructive);border-radius:var(--radius-sm);
-  padding:1px 5px;color:var(--destructive);margin-left:5px}
-.wf-next{padding:0 15px 6px 109px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
-.wf-next[data-st="blocked"]{color:var(--warning)}
-.wf-do{border-top:1px solid var(--border);padding:10px 15px;font-size:var(--text-sm);color:var(--foreground);
-  line-height:1.5;background:var(--warning-wash)}
-.wf-do b{font-family:var(--mono);font-size:var(--text-xs);
-  color:var(--warning);margin-right:8px}
-.wf-do.ok{background:var(--info-wash)}
-.wf-do.ok b{color:var(--success)}
-
-/* ── branch awareness (workspace-session-controls) ── */
-/* the branch name IS a git ref — mono. shadcn Badge `secondary`: a filled --muted chip with no
-   border, so a long branch name sits quietly beside the product mark instead of drawing a box
-   around itself. */
-.bar .branch{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);
-  padding:3px 8px;border:0;border-radius:var(--radius-sm);background:var(--muted);
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}
-.bar .branch[hidden]{display:none}
-/* a dirty tree is a real signal, but it is ambient — it tints the chip, it does not outline it */
-.bar .branch.dirty{color:var(--warning);background:var(--warning-wash)}
-
-/* worktree housekeeping — folded away until a repo actually has extra working trees */
-.wtbox{margin-top:8px;font-size:var(--text-xs)}
-.wtbox[hidden]{display:none}
-.wtbox>summary{cursor:pointer;color:var(--muted-foreground);padding:3px 2px;list-style:none;
-  display:flex;align-items:center;gap:5px}
-.wtbox>summary::-webkit-details-marker{display:none}
-.wtbox>summary:hover{color:var(--foreground)}
-.wtrow{display:flex;align-items:baseline;gap:6px;padding:4px 2px;border-top:1px solid var(--border)}
-/* a worktree row names a BRANCH and a PATH — mono earns its place */
-.wtrow .wtb{font-family:var(--mono);color:var(--foreground);flex:1;min-width:0;overflow-wrap:anywhere}
-.wtrow .wtwhy{color:var(--muted-foreground);font-size:var(--text-2xs);flex-basis:100%;line-height:1.35}
-/* shadcn Button, `outline` variant at the small size */
-.wtrow button{flex:none;border:1px solid var(--input);border-radius:var(--radius-sm);background:transparent;
-  color:var(--foreground);font-size:var(--text-2xs);padding:2px 7px;cursor:pointer;
-  transition:border-color var(--duration-fast) var(--ease-emphasized),
-             color var(--duration-fast) var(--ease-emphasized)}
-/* removing a worktree deletes a folder — the hover states that intent in the warning hue */
-.wtrow button:hover:not(:disabled){border-color:var(--warning);color:var(--warning)}
-.wtrow button:disabled{opacity:.4;cursor:not-allowed}
-
-/* new-session branch picker — matches the miniform vocabulary */
-.brwrap{display:flex;flex-direction:column;gap:6px}
-.brwrap[hidden]{display:none}
-.brwrap select{min-height:38px;padding:0 8px;border:1px solid var(--input);border-radius:var(--radius-md);
-  background:var(--secondary);color:var(--foreground);font-family:var(--mono);font-size:var(--text-xs)}
-.brwrap select:focus{border-color:var(--brand)}
-.brwrap input[hidden]{display:none}
-.miniform .hint.warn{color:var(--warning)}
-.miniform .hint[hidden]{display:none}
-.miniform .lbl .opt{color:var(--muted-foreground);font-weight:400}
-/* the isolate toggle: the difference between "this session gets a branch" and "the whole repo
-   moves" is one line, so it reads as a sentence rather than a settings row */
-.brwrap .chk{display:flex;align-items:flex-start;gap:7px;font-size:var(--text-xs);color:var(--foreground);
-line-height:1.35;cursor:pointer}
-.brwrap .chk[hidden]{display:none}
-/* accent-color paints the native checkbox — that is a FILL, so it takes --primary (the brand
-   fill) and not --accent, which under this palette is the muted hover surface. */
-.brwrap .chk input{flex:none;margin:1px 0 0;accent-color:var(--primary);cursor:pointer}
-
-/* ── scratchpad drawer: bottom of the terminal column, collapsible, never overlays anything ── */
-.scratch{flex:none;border-top:1px solid var(--border);background:var(--sidebar);display:flex;flex-direction:column;min-height:0}
-.scratch-head{display:flex;align-items:center;gap:8px;padding:5px 10px;min-height:34px;
-  background:var(--muted);border-bottom:1px solid transparent}
-.scratch[data-open="true"] .scratch-head{border-bottom-color:var(--border)}
-.scratch-toggle{display:inline-flex;align-items:center;gap:7px;border:0;background:none;
-  font-size:var(--text-2xs);color:var(--muted-foreground);cursor:pointer}
-.scratch-toggle:hover{color:var(--foreground)}
-.scratch-toggle .chev{display:inline-block;transition:transform .15s;font-size:var(--text-2xs)}
-.scratch[data-open="true"] .scratch-toggle .chev{transform:rotate(180deg)}
-/* whose pad this is — the pad is per TAB, so the drawer names the tab it is staging for */
-.scratch-who{font-family:var(--mono);font-size:var(--text-xs);color:var(--foreground);letter-spacing:.04em;
-  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.scratch-who:not(:empty)::before{content:"· "}
-.scratch-status{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted-foreground);letter-spacing:.04em}
-.scratch-actions{margin-left:auto;display:flex;gap:6px}
-.scratch-actions .mini{min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-md);
-  background:var(--secondary);color:var(--brand);font-family:var(--mono);font-size:var(--text-xs);letter-spacing:0;cursor:pointer}
-.scratch-actions .mini:hover{border-color:var(--brand)}
-.scratch-actions .mini:disabled{color:var(--muted-foreground);border-color:var(--border);cursor:not-allowed;opacity:.6}
-.scratch-text{display:none;width:100%;box-sizing:border-box;resize:vertical;height:22vh;min-height:90px;max-height:45vh;
-  border:0;padding:10px 12px;background:var(--term-bg);color:var(--foreground);
-  font-family:var(--mono);font-size:var(--text-sm);line-height:1.5;outline:none}
-.scratch[data-open="true"] .scratch-text{display:block}
-
-/* The cap's controls carry TEXT labels, not icons, so they size to content. And `hidden` has to
-   actually hide: `.cap .mini` sets display:grid, which beats the UA's [hidden]{display:none} — the
-   attribute was being set correctly and doing nothing, so every control showed at once. Only the
-   first control takes the margin-left:auto that pushes the group right. */
-.cap .mini[hidden],.cap .x[hidden]{display:none}
-.cap .docrev{width:auto;min-width:0;padding:0 9px;font-size:var(--text-xs)}
-.cap .mini ~ .mini{margin-left:0}
-
-/* ── the document editor (workspace-doc-editor) ──────────────────────────────────────────────
-   The reader gains an edit mode. Quiet on purpose: editing a document should feel local and
-   undramatic, so there is no toolbar, no modal, and no mode banner — a control in the cap, a
-   textarea in the reader's own type, and the diff shown beside it as you type. */
-.ed-wrap{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;min-height:0}
-.ed-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;min-height:0;overflow:hidden}
-.ed-split[data-diff="off"]{grid-template-columns:minmax(0,1fr)}
-.ed-split[data-diff="off"] .ed-diff{display:none}
-.ed-ta{width:100%;height:100%;box-sizing:border-box;resize:none;border:0;outline:none;
-  padding:14px 16px;background:var(--background);color:var(--foreground);
-  font-family:var(--mono);font-size:var(--text-sm);line-height:1.8;tab-size:2}
-.ed-diff{border-left:1px solid var(--border);overflow-y:auto;background:var(--sidebar);
-  font-family:var(--mono);font-size:var(--text-xs);line-height:1.75;padding:8px 0}
-.ed-l{display:grid;grid-template-columns:3px 1fr;align-items:start}
-.ed-l .g{align-self:stretch;border-radius:var(--radius-sm);background:transparent}
-.ed-l .t{padding:0 10px;white-space:pre-wrap;word-break:break-word;color:var(--muted-foreground)}
-.ed-l.del .g{background:var(--destructive)}
-.ed-l.del .t{color:var(--muted-foreground);text-decoration:line-through;text-decoration-color:rgba(242,101,95,.5)}
-.ed-l.add .g{background:var(--success)}
-.ed-l.add .t{color:var(--foreground)}
-.ed-l.ctx .t{color:var(--muted-foreground)}
-.ed-none{padding:14px 16px;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.6}
-.ed-bar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--border);
-  background:var(--muted);font-size:var(--text-sm);color:var(--muted-foreground)}
-.ed-bar .n{font-family:var(--mono)}
-.ed-bar .n b{color:var(--success);font-weight:600}
-.ed-bar .n i{color:var(--destructive);font-style:normal;font-weight:600}
-.ed-bar input{flex:1;min-width:80px;border:1px solid var(--border);border-radius:var(--radius-md);
-  padding:6px 10px;background:var(--secondary);color:var(--foreground);font-family:var(--sans);
-  font-size:var(--text-sm);outline:none}
-.ed-bar input:focus{border-color:var(--brand)}
-.ed-bar .dirty{color:var(--warning)}
-.ed-err{margin:0 14px 8px;padding:8px 11px;border-radius:var(--radius-md);border:1px solid var(--destructive);
-  background:rgba(242,101,95,.08);font-size:var(--text-sm);line-height:1.5;color:var(--foreground)}
-
-/* the change log for one document — read, not managed */
-.hist{padding:16px 18px;max-width:640px}
-.hist h3{font-size:14px;font-weight:600;margin-bottom:3px}
-.hist .sub{font-size:var(--text-sm);color:var(--muted-foreground);margin-bottom:18px;line-height:1.6}
-.hist-row{padding:11px 0;border-top:1px solid var(--border)}
-.hist-row:first-of-type{border-top:0}
-.hist-when{font-size:var(--text-xs);color:var(--muted-foreground)}
-.hist-when b{color:var(--success);font-weight:600}
-.hist-when i{color:var(--destructive);font-style:normal;font-weight:600}
-.hist-note{margin-top:4px;font-size:var(--text-sm);color:var(--foreground);line-height:1.55}
-.hist-none{font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.6}
-
-/* ── alignment (workspace-doc-editor R5–R7) ──────────────────────────────────────────────────
-   Downstream of a save and offered, never blocking. The offer is one line that can be dismissed;
-   nothing accumulates and nothing badges.
-   Tokens follow the radix-sera port: --brand is the blue for text/borders, --primary is for fills,
-   and --accent is a muted hover surface, not a hue. Radii come from the scale — never a px. */
-.al-offer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 14px;padding:10px 12px;
-  border-radius:var(--radius-md);background:var(--brand-wash);border:1px solid var(--brand);
-  font-size:var(--text-sm);line-height:1.5;color:var(--foreground)}
-.al-offer button{font-size:var(--text-sm);color:var(--brand);padding:2px 0}
-.al-offer button:hover{text-decoration:underline}
-.al-offer button.q{color:var(--muted-foreground);margin-left:auto}
-.al{padding:16px 18px 40px;max-width:660px}
-.al-lede{font-size:var(--text-base);line-height:1.5;color:var(--foreground);margin-bottom:5px}
-.al-sub{font-size:var(--text-sm);line-height:1.6;color:var(--muted-foreground);margin-bottom:16px}
-.al-c{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border);cursor:pointer}
-.al-c:first-of-type{border-top:0}
-.al-c input{margin-top:3px;accent-color:var(--primary);width:15px;height:15px;flex:none}
-.al-p{font-size:var(--text-sm);color:var(--foreground);display:block;word-break:break-all}
-.al-why{display:block;margin-top:2px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
-.al-acts{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:14px}
-.al-acts button{font-size:var(--text-sm);color:var(--brand);padding:3px 0;min-height:30px}
-.al-acts button:hover{text-decoration:underline}
-.al-acts button.q{color:var(--muted-foreground)}
-.al-acts button:disabled{color:var(--muted-foreground);text-decoration:none;cursor:default}
-.al-note{font-size:var(--text-xs);color:var(--muted-foreground)}
-.al-d{padding:13px 0;border-top:1px solid var(--border)}
-.al-d.done{opacity:.45}
-.al-d.done .al-code,.al-d.done .al-acts{display:none}
-.al-d.done .al-p::after{content:" · settled";color:var(--success);font-family:var(--sans);font-size:var(--text-xs)}
-.al-code{margin-top:9px;font-family:var(--mono);font-size:var(--text-xs);line-height:1.75;
-  border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px 0}
-.al-err{margin-top:9px;padding:8px 11px;border-radius:var(--radius-md);border:1px solid var(--destructive);
-  background:rgba(242,101,95,.08);font-size:var(--text-sm);line-height:1.5;color:var(--foreground)}
-
-/* ── The sidebar tree (workspace-initiative-nav-build, R1–R6) ─────────────────────────────────
-   Repository → its working trees, each labelled by the initiative on its branch → sessions.
-   Replaces the old `workspaces` + `running agents` pair. Session-row styles are reused verbatim
-   from that pane — only the nesting is new. Colours go through the D38 semantic tokens: a hex
-   fallback here would be a second source of truth for a value the token layer owns, which is the
-   drift `token-hygiene` exists to catch. */
-.repo-group{margin-bottom:6px}
-.repo-head{display:flex;align-items:center;gap:6px;width:100%;padding:4px 8px;background:none;
-  border:0;color:var(--foreground);font:inherit;font-weight:600;font-size:var(--text-xs);
-  cursor:default;text-align:left}
-.repo-head .cue{color:var(--muted-foreground);font-size:var(--text-2xs)}
-.repo-head small{margin-left:auto;color:var(--muted-foreground);font-family:var(--mono);font-size:var(--text-2xs)}
-
-.treerow{border-left:2px solid transparent}
-.treerow[data-open="true"]{border-left-color:var(--border)}
-.tr-head{display:flex;align-items:flex-start}
-.tr-toggle{background:none;border:0;color:var(--muted-foreground);cursor:pointer;
-  padding:6px 2px 6px 8px;font:inherit;line-height:1.2}
-.tr-toggle .cue{font-size:var(--text-2xs)}
-.tr{flex:1;min-width:0;display:block;text-align:left;background:none;border:0;color:inherit;
-  font:inherit;padding:5px 6px 6px 0;cursor:pointer}
-.tr:hover,.tr-head:hover .tr{background:var(--accent)}
-.tr[aria-current="true"]{background:var(--accent);font-weight:500}
-.tr .r1{display:flex;align-items:baseline;gap:6px}
-.tr .r1 .g{font-size:var(--text-2xs);width:9px;flex:none}
-.treerow[data-st="working"] .r1 .g{color:var(--success)}
-.treerow[data-st="quiet"] .r1 .g,
-.treerow[data-st="idle"] .r1 .g,
-.treerow[data-st="exited"] .r1 .g{color:var(--muted-foreground)}
-.treerow[data-st="blocked"] .r1 .g{color:var(--destructive)}
-.tr .r1 .nm{font-size:var(--text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.tr .r1 .dir{margin-left:auto;flex:none;font-family:var(--mono);font-size:var(--text-2xs);
-  color:var(--muted-foreground)}
-.tr .r2{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding-left:15px;margin-top:2px;
-  font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground)}
-.tr .wf{display:inline-flex;gap:6px;align-items:baseline}
-.tr .wf .lane{color:var(--muted-foreground)}
-.tr .wf .stg{color:var(--brand)}
-.tr .wf .nx{color:var(--muted-foreground)}
-/* THE THREE-VALUED VOCABULARY (R2). Two renderings for three facts means one is always mislabelled
-   — which is how an ordinary folder came to render as an alarm on the same surface that uses
-   --destructive for a corrupt state queue. `.bl` keeps the alarm; `.gone` is the quiet, specific
-   "the read succeeded and there is nothing here"; a value is styled as neither. */
-.tr .wf .bl,.tr .r2 .bl{color:var(--destructive)}
-.tr .wf .gone,.tr .r2 .gone{color:var(--muted-foreground);opacity:.8}
-.tr .wf .drv{color:var(--muted-foreground);font-style:italic}
-.tr .needs-n{color:var(--warning)}
-.tr .rollup{color:var(--muted-foreground)}
-/* R5 — the branch a ladder was derived from, and when. Never optional when a stage is shown. */
-.tr .attrib{display:block;padding-left:15px;margin-top:2px;font-family:var(--mono);
-  font-size:var(--text-2xs);color:var(--muted-foreground)}
-.tr .attrib b{color:var(--foreground);font-weight:500}
-.tr-sessions{padding-left:14px}
-.tree-new{display:block;width:calc(100% - 8px);margin:2px 0 6px 4px;padding:4px 8px;background:none;
-  border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--muted-foreground);
-  font:inherit;font-size:var(--text-2xs);cursor:pointer;text-align:left}
-.tree-new:hover{color:var(--foreground);border-color:var(--input)}
-/* R5 — the composer's target. "run an agent here" named nothing once every repository was on
-   screen at once; this is the referent, and it updates on every selection change. */
-.miniform .where{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);
-  margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.miniform .where[data-none="1"]{color:var(--warning)}
-.cap .ct[data-bad="1"]{color:var(--destructive)}
-
-/* ── The rail's initiative dossier (R7·R8·R9) ────────────────────────────────────────────────── */
-.reading{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);
-  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12ch}
-.reading[data-away="1"]{color:var(--warning);max-width:none}
-.dz-head{padding:10px 12px 8px;border-bottom:1px solid var(--border)}
-.dz-id{font-size:var(--text-sm);font-weight:600;letter-spacing:-.01em}
-.dz-t{font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px;line-height:1.4}
-.dz-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
-.dz-meta .pill{font-family:var(--mono);font-size:var(--text-2xs);padding:2px 5px;
-  border-radius:var(--radius-sm);background:var(--secondary);color:var(--muted-foreground);
-  border:1px solid var(--border)}
-.dz-meta .pill.lane{color:var(--purple)}
-/* R5 — the branch a ladder came from, never optional beside a stage */
-.dz-attrib{margin-top:7px;font-family:var(--mono);font-size:var(--text-2xs);
-  color:var(--muted-foreground);line-height:1.5}
-.dz-attrib b{color:var(--foreground);font-weight:500}
-.dz-attrib .sub{display:block;opacity:.85}
-.dz-next{margin:9px 12px;padding:8px 10px;border-radius:var(--radius-md);background:var(--success-wash);
-  border:1px solid var(--border);font-size:var(--text-xs);color:var(--foreground);line-height:1.5}
-.dz-next b{display:block;font-family:var(--mono);font-size:var(--text-2xs);letter-spacing:.12em;
-  text-transform:uppercase;color:var(--success);margin-bottom:3px;font-weight:500}
-/* accepted AND owing, together — a green badge alone is the watermelon */
-.dz-next.owed{background:var(--warning-wash)}
-.dz-next.owed b{color:var(--warning)}
-.dz-next.done b{color:var(--muted-foreground)}
-.dz-wait{margin:9px 12px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
-.dz-wait .sub{display:block;font-size:var(--text-2xs);margin-top:3px;opacity:.85}
-.dz-none{margin:9px 12px;font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.55}
-.dz-arts{padding:0 12px 14px}
-.dz-sec{padding-top:10px}
-.dz-sec+.dz-sec{border-top:1px solid var(--border);margin-top:8px}
-.dz-sec h5{display:flex;gap:7px;align-items:baseline;font-family:var(--mono);
-  font-size:var(--text-2xs);letter-spacing:.13em;text-transform:uppercase;
-  color:var(--muted-foreground);font-weight:500;margin-bottom:5px}
-.dz-sec h5 .c{opacity:.8;letter-spacing:0}
-.dz-art{display:flex;gap:7px;align-items:baseline;width:100%;text-align:left;padding:4px 7px;
-  margin-bottom:3px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border);
-  color:inherit;font:inherit;cursor:pointer}
-.dz-art:hover{border-color:var(--input);background:var(--accent)}
-.dz-art .role{font-family:var(--mono);font-size:var(--text-2xs);letter-spacing:.1em;
-  text-transform:uppercase;color:var(--info);width:74px;flex:none}
-.dz-art .pth{font-family:var(--mono);font-size:var(--text-2xs);color:var(--muted-foreground);
-  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* `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)}
-}