create-pmos 0.14.0 → 0.16.0

package/workspace/public/styles.css

@@ -1,1444 +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);
-
-  --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;
-  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
-  --sans:"Space Grotesk Variable",ui-sans-serif,system-ui,-apple-system,sans-serif;
-
-  /* layout knobs the JS adjusts (rail width, library/document split) */
-  --rail-w:400px; --libsplit:44%;
-
-  /* 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);
-
-  --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. */
-.app{display:grid; 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}
-.body[data-reader="off"]>.rail{display:none}
-/* docked bottom, the reader is a wide short pane under the terminal, not a column beside it */
-.body[data-reader="bottom"]>.rail{border-left:0;border-top:1px solid var(--border)}
-.body[data-reader="bottom"] .railgrip{display:none}
-.body[data-side="right"]>.side{border-right:0;border-left:1px solid var(--border)}
-.body[data-reader="left"]>.rail{border-left:0;border-right:1px solid var(--border)}
-.body[data-reader="left"] .railgrip{left:auto;right:-3px}
-
-/* ── 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. */
-.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. */
-.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}
-
-/* ── right rail: the library over the document reader ── */
-.rail{border-left:1px solid var(--input);background:var(--sidebar);position:relative;
-  display:flex;flex-direction:column;min-height:0;min-width:0}
-/* drag the rail's own edge — a document read at 340px is a column of ten words */
-.railgrip{position:absolute;left:-4px;top:0;bottom:0;width:8px;z-index:5;cursor:col-resize}
-.railgrip::after{content:"";position:absolute;inset:0 3px;border-radius:var(--radius-sm);background:transparent}
-.railgrip:hover::after,.railgrip:focus-visible::after{background:var(--brand)}
-.rail .lib-pane{flex:1 1 var(--libsplit);min-height:34px}
-.rail .doc-pane{flex:1 1 calc(100% - var(--libsplit));min-height:34px}
-.rail .doc-pane[hidden]{display:none}
-.rail .pane[data-fold="off"]{flex:0 0 auto}
-.railsplit{flex:none;height:7px;cursor:row-resize;background:var(--muted);
-  border-block:1px solid var(--border);position:relative}
-.railsplit[hidden]{display:none}
-.railsplit::after{content:"";position:absolute;inset:2px 42% 2px 42%;border-radius:var(--radius-sm);background:var(--input)}
-.railsplit:hover::after,.railsplit:focus-visible::after{background:var(--brand)}
-
-/* library — two lenses over one file set: initiatives (how the PM thinks) / folders (how the
-   repo is laid out). The initiative lens joins a unit of work's scattered artifacts. */
-/* shadcn Tabs: an inset --muted track, the selected lens lifted onto --background. Four lenses
-   have to survive a narrow rail, so the group is allowed to SHRINK and scroll rather than push
-   the refresh control off the end of the header — which is what a fixed-width group did. */
-.lens{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 document reader (bottom of the rail) ── */
-.doc-pane .cap{padding-right:6px;gap:6px}
-/* the crumb is a FILE PATH — mono earns its place. It yields space to the controls beside it
-   rather than shouldering them off the end of the header. */
-.doc-pane .crumb{margin-left:auto;font-family:var(--mono);font-size:var(--text-2xs);
-  color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
-  direction:rtl;text-align:right;max-width:50%;min-width:0;flex:0 1 auto}
-/* `ghost` icon button, matching the other cap controls instead of being the one outlined box */
-.doc-pane .x{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm);
-  border:0;background:transparent;color:var(--muted-foreground);font-size:var(--text-sm);
-  transition:background-color var(--duration-fast) var(--ease-emphasized),
-             color var(--duration-fast) var(--ease-emphasized)}
-.doc-pane .x:hover{background:var(--destructive);color:var(--primary-foreground)}
-.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 reader's track from the template at this width and sets data-float,
-     so the grid here is sidebar + terminal and the reader floats over the terminal rather than
-     squeezing it below a usable width. Docked BOTTOM it keeps its row and does not float. */
-  .body[data-float="on"]>.rail{position:absolute;top:0;right:0;bottom:0;left:auto;
-    width:min(420px,86vw);z-index:30;box-shadow:-18px 0 50px -30px var(--shadow)}
-  .body[data-float="on"][data-reader="left"]>.rail{right:auto;left:0;
-    box-shadow:18px 0 50px -30px var(--shadow)}/* Split is forced OFF below this width by applyLayout() — two terminal groups inside what is
-     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 column at a time + a bottom switcher; the terminal is the priority pane.
-   The 3-column desktop layout above is untouched at wide widths — everything here is inside the
-   ≤760 query (or the .mobmenu, which is display:none until then). Touch targets ≥44px; the control
-   bar sends the keys a phone keyboard lacks straight to the PTY. ── */
-.mobmenu{display:none}
-@media (max-width:760px){
-  /* an extra row above the status strip carries the control bar + switcher */
-  .app{grid-template-rows:44px minmax(0,1fr) auto 28px}
-  /* collapse to a single column; the switcher decides which pane is shown. These are DIRECT
-     declarations and the layout writes custom properties, so the phone's arrangement wins here
-     whatever layout the desktop is on — the two systems never fight (R9). */
-  .body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);grid-template-areas:none;position:relative}
-  /* 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}
-  .body>.side,.body>.term-col,.body>.rail{display:none}
-  .body[data-mview="sessions"]>.side{display:flex}
-  .body[data-mview="terminal"]>.term-col{display:flex}
-  .body[data-mview="library"]>.rail,
-  .body[data-reader="off"][data-mview="library"]>.rail{display:flex}
-  /* the rail is a full-width pane here, not the floating overlay the ≤1100 rule makes it */
-  .body[data-float="on"]>.rail,.rail{position:static;width:auto;box-shadow:none;z-index:auto;
-    border-left:0;border-top:0}
-  .railgrip,.railsplit,.side>.edge{display:none}  /* edge-drag is a pointer affordance; the switcher owns layout on touch */
-  .cap .grip,.lay-chip{display:none}              /* and so is the whole layout control (R9) */
-  .side>.pane{flex:1 1 0}
-  /* one group on a phone, always — the split is a desktop arrangement */
-  .groups{flex-direction:column}
-  .group+.group{display:none}
-
-  /* the mobile menu: a terminal control bar (terminal view only) over the pane switcher */
-  /* min-width:0 lets this grid item shrink below its content min-size, so the control bar's
-     fixed-width buttons scroll inside it instead of widening the whole page */
-  .mobmenu{display:block;min-width:0;background:var(--muted);border-top:1px solid var(--border);
-    padding-bottom:env(safe-area-inset-bottom)}
-  .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}
-  .mobtabs{display:flex}
-  .mobtabs button{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
-    gap:2px;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;color:var(--muted-foreground);
-    border-top:2px solid transparent;background:var(--muted)}
-  .mobtabs button+button{border-left:1px solid var(--border)}
-  .mobtabs button[aria-selected="true"]{color:var(--brand);border-top-color:var(--brand);background:var(--accent)}
-  @media (prefers-reduced-motion:reduce){.mobtabs button,.ctrlbar button{transition:none}}
-
-  /* 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}
-}
-
-/* ── 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}