@zq-silk/yui 2.15.0 → 2.17.0

package/dist/web/assets/styles/tokens.js

@@ -1,4 +1,5 @@
 import { DIVIDER_WIDTH, DOCK } from "../shared/geometry.js";
+import { motionTokenStyles } from "../shared/motion.js";
 import { themeTokenStyles } from "../shared/themes.js";
 /*
  * DESIGN TOKENS
@@ -6,8 +7,9 @@ import { themeTokenStyles } from "../shared/themes.js";
  * Geometry, type, radii, motion and the focus ring are theme-independent and
  * live once on :root. Colour and effect tokens come from the theme registry
  * (shared/themes.ts), one block per theme, so switching a theme can never move
- * or resize anything. Layout widths come from shared/geometry.ts, the same
- * source the client layout controller clamps against.
+ * or resize anything. Layout widths come from shared/geometry.ts and motion
+ * (durations, easings, stacking layers) from shared/motion.ts, the same
+ * sources the client scripts read.
  */
 export const TOKEN_STYLES = `
 :root{
@@ -17,7 +19,7 @@ export const TOKEN_STYLES = `
   --r-xs:5px;--r-sm:7px;--r-md:10px;--r-lg:14px;--r-pill:999px;
   --sidebar-w:clamp(260px,21vw,312px);--dock-w:${DOCK.initial}px;--divider-w:${DIVIDER_WIDTH}px;
   --center-max:880px;--header-h:56px;--gutter:clamp(16px,3vw,40px);
-  --t-fast:120ms;--t-med:220ms;--ease:cubic-bezier(.2,.8,.2,1);
+  ${motionTokenStyles()}
   --focus:0 0 0 2px var(--canvas),0 0 0 4px var(--accent-line);
 }
 ${themeTokenStyles()}

package/dist/web/assets/styles/ui/controls.js

@@ -27,7 +27,7 @@ export const CONTROL_STYLES = `
 .btn-link:hover:not(:disabled){background:transparent;text-decoration:underline;text-underline-offset:3px}
 .link-btn{justify-self:start;padding:0;border:0;background:none;color:var(--accent);font-size:var(--fs-xs);font-weight:500}
 .link-btn:hover{text-decoration:underline;text-underline-offset:3px}
-.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);transition:background var(--t-fast),color var(--t-fast)}
+.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
 .icon-btn:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
 .icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
 .icon-btn:disabled{opacity:.4}

package/dist/web/assets/styles/ui/forms.js

@@ -41,6 +41,6 @@ export const FORM_STYLES = `
 .shortcut-list dd{margin:0}
 
 /* Toast */
-.toast{position:fixed;left:50%;bottom:24px;z-index:90;max-width:min(520px,calc(100vw - 32px));padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-2);font-size:var(--fs-sm);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity var(--t-med),transform var(--t-med) var(--ease)}
+.toast{position:fixed;left:50%;bottom:24px;z-index:var(--z-toast);max-width:min(520px,calc(100vw - 32px));padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-2);font-size:var(--fs-sm);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
 .toast.show{opacity:1;transform:translate(-50%,0)}
 `;

package/dist/web/assets/styles/ui/surfaces.js

@@ -108,8 +108,7 @@ details[open]>summary .disclosure-chevron{transform:rotate(90deg)}
 .show-more:hover,.pager-clear:hover{color:var(--accent);border-color:var(--accent-line)}
 .show-more{justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 12px;font-weight:500}
 .loading-block{display:flex;align-items:center;gap:10px;padding:32px 8px;color:var(--ink-3)}
-.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-3);border-top-color:var(--accent);animation:spin .8s linear infinite}
-@keyframes spin{to{transform:rotate(360deg)}}
+.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-3);border-top-color:var(--accent);animation:m-spin .8s linear infinite}
 
 /* Metrics */
 .metric{display:grid;gap:4px;align-content:start;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}

package/dist/web/assets/styles/views/conversation.js

@@ -6,21 +6,55 @@
  */
 export const CONVERSATION_STYLES = `
 #dock-conversation{min-width:0}
+/* Session page: one view at a time (chat or terminal), rebuilt on a mode switch */
+.session-view{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
+.sp-modes{flex:none}
+.sp-modes .seg-btn{gap:5px}
+.sp-modes .seg-btn .icon{width:14px;height:14px;flex:none}
+.sp-modes .seg-btn[aria-disabled="true"]{opacity:.45}
+@container dock (max-width:440px){.sp-modes .seg-btn>span{display:none}.sp-modes .seg-btn{padding:0 7px}}
 .cv-head{flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px 4px 8px}
-.cv-picker{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
-/* background-color only: the shorthand would drop the global select arrow */
-.cv-session{flex:1;min-width:0;max-width:100%;height:30px;padding:0 28px 0 8px;border:0;background-color:transparent;color:var(--ink);font-weight:600;font-size:var(--fs-md);text-overflow:ellipsis;cursor:pointer;border-radius:var(--r-sm)}
-.cv-session:hover,.cv-session:focus{background-color:var(--surface-3);border:0;box-shadow:none}
-/* The global select:focus rule resets the whole background, so the arrow is restated for every state */
-.cv-session,.cv-session:hover,.cv-session:focus{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%;background-size:4px 4px;background-repeat:no-repeat}
-.cv-status{flex:none;display:flex;align-items:center;gap:6px;margin:0;padding:0 16px 6px;color:var(--ink-3);font-size:var(--fs-xs)}
+.cv-head .spacer{flex:1 1 0;min-width:0}
+/* Session picker: one readable name; current and previous Sessions on demand */
+.cv-pop.cv-picker{flex:0 1 auto;min-width:0;max-width:100%}
+.cv-picker-btn{display:flex;align-items:center;gap:4px;min-width:0;height:30px;padding:0 6px 0 8px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:var(--fs-md);cursor:pointer}
+.cv-picker-btn:hover,.cv-picker[open]>.cv-picker-btn{background:var(--surface-3)}
+.cv-picker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-picker-chevron{width:13px;height:13px;flex:none;color:var(--ink-3)}
+.cv-picker>.cv-popbody{left:0;top:calc(100% + 6px);width:min(320px,calc(100vw - 32px))}
+.cv-session-list{display:grid;gap:1px}
+.cv-session-opt{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:6px 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
+.cv-session-opt:hover,.cv-session-opt[aria-selected=true]{background:var(--surface-3)}
+.cv-so-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--idle)}
+.cv-so-dot.is-active{background:var(--ok)}
+.cv-so-dot.is-failed{background:var(--bad)}
+.cv-so-text{flex:1;min-width:0;display:grid}
+.cv-so-main,.cv-so-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-so-main{font-size:var(--fs-sm)}
+.cv-so-meta{color:var(--ink-3);font-size:var(--fs-2xs)}
+.cv-so-check{width:14px;height:14px;flex:none}
+.cv-more-sessions{justify-self:start}
+.cv-back{display:inline-flex;align-items:center;gap:3px;flex:none;white-space:nowrap}
+.cv-back .icon{width:13px;height:13px}
+.cv-back[hidden]{display:none}
+/* Status: a dot plus one word; the reason and observation time live in the tooltip */
+.cv-status{flex:0 1 auto;min-width:0;max-width:40%;display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .cv-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--idle);flex:none}
 .cv-status.is-active::before{background:var(--ok)}
 .cv-status.is-waiting::before{background:var(--warn)}
 .cv-status.is-failed::before,.cv-status.is-unknown::before{background:var(--bad)}
 .cv-status:empty{display:none}
-.cv-older{flex:none;display:flex;justify-content:center}
-.cv-older:empty{display:none}
+/* Details menu: labelled facts, then the exact identity for copying */
+.cv-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;margin:0;padding:0 4px;font-size:var(--fs-xs)}
+.cv-facts dt{color:var(--ink-3)}
+.cv-facts dd{margin:0;min-width:0;display:grid;color:var(--ink);overflow-wrap:anywhere}
+.cv-facts small{color:var(--ink-4);font-size:var(--fs-2xs)}
+.cv-identity-row{display:flex;align-items:flex-start;gap:6px;padding:0 4px;min-width:0}
+.cv-identity-row .cv-identity{flex:1;min-width:0;font-family:var(--font-mono)}
+.cv-identity-row .cv-link{display:inline-flex;align-items:center;gap:3px;flex:none}
+.cv-identity-row .icon{width:12px;height:12px}
+.cv-older{position:absolute;z-index:1;top:6px;left:50%;transform:translateX(-50%);padding:3px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface-2);box-shadow:var(--shadow-1)}
+.cv-older[hidden]{display:none}
 .cv-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
 .cv-stage .feed{gap:18px;padding:12px 16px 20px}
 .cv-jump{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--line-2);border-radius:50%;background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-1);cursor:pointer}
@@ -29,14 +63,16 @@ export const CONVERSATION_STYLES = `
 .cv-note{margin:0;color:var(--ink-3);font-size:var(--fs-xs);overflow-wrap:anywhere}
 .cv-link{padding:2px 4px;border:0;background:none;color:var(--ink-3);font-size:var(--fs-xs);cursor:pointer;border-radius:var(--r-xs)}
 .cv-link:hover{color:var(--ink);background:var(--surface-3)}
-.cv-link[hidden],.cv-stop[hidden],.cv-chip[hidden]{display:none}
+.cv-link[hidden],.cv-stop[hidden],.cv-sub[hidden],.cv-pop[hidden]{display:none}
 .cv-code{margin:6px 0 0;padding:8px 10px;max-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:var(--r-sm);background:var(--sunken);font:var(--fs-xs)/1.5 var(--font-mono)}
+.cv-note:empty{display:none}
 .cv-identity{margin:0;color:var(--ink-4);font-size:var(--fs-2xs);overflow-wrap:anywhere}
 /* Messages */
 .cv-msg{min-width:0;overflow-wrap:anywhere}
 .cv-user{align-self:flex-end;max-width:88%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
 .cv-bubble{padding:9px 14px;border-radius:18px;background:var(--info-soft);color:var(--ink);font-size:var(--fs-md);line-height:1.5}
 .cv-tag{color:var(--ink-4);font-size:var(--fs-2xs)}
+/* A leading tagged context block folds to one line; the raw text stays one click away */
 .cv-assistant{position:relative;font-size:var(--fs-md);line-height:1.6}
 /* Copy: always visible under the newest message, a hover badge on older ones */
 .cv-actions{display:flex;gap:2px;position:absolute;top:-6px;right:0;opacity:0;transition:opacity var(--t-fast)}
@@ -75,14 +111,27 @@ export const CONVERSATION_STYLES = `
 /* An empty draft reads as inactive, like the reference composers */
 .cv-box:has(.cv-input:placeholder-shown) .cv-send{background:var(--surface-3);color:var(--ink-4)}
 .cv-send:disabled{background:var(--surface-3);color:var(--ink-4);cursor:default;opacity:1}
-.cv-chip{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:3px 8px;border-radius:var(--r-pill);background:var(--tone-soft,var(--warn-soft));color:var(--tone,var(--warn));font-size:var(--fs-xs)}
-.cv-chip .icon{width:13px;height:13px;flex:none}
-.cv-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.cv-pill{display:inline-flex;align-items:center;gap:4px;max-width:180px;height:28px;padding:0 8px;border-radius:var(--r-pill);color:var(--ink-3);font-size:var(--fs-sm);list-style:none;cursor:pointer}
+.cv-notice{display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:0 6px;color:var(--ink-3);font-size:var(--fs-xs)}
+.cv-notice.is-warn{color:var(--warn)}
+.cv-notice[hidden]{display:none}
+.cv-notice .icon{width:13px;height:13px;flex:none}
+.cv-notice>span{min-width:0;overflow-wrap:anywhere}
+.cv-notice .cv-link{flex:none;margin-left:auto}
+.cv-pill{display:inline-flex;align-items:center;gap:4px;max-width:220px;height:28px;padding:0 8px;border-radius:var(--r-pill);color:var(--ink-3);font-size:var(--fs-sm);list-style:none;cursor:pointer}
 .cv-pill::-webkit-details-marker{display:none}
 .cv-pill:hover,.cv-pop[open]>.cv-pill{background:var(--surface-3);color:var(--ink)}
 .cv-pill .icon{width:13px;height:13px;flex:none}
+.cv-model-state{flex:none;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
+.cv-model-state[hidden]{display:none}
+.cv-model[data-state=pending] .cv-model-state{color:var(--accent,var(--info))}
+/* The model menu shrinks before the send button is pushed out; the state word stays whole and the model name ellipsizes */
+.cv-pop.cv-model{flex:0 1 auto;min-width:0}
+.cv-model>.cv-pill{max-width:min(220px,100%);box-sizing:border-box}
 .cv-model-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cv-model-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ok)}
+.cv-model[data-state=unknown] .cv-model-dot{background:var(--warn)}
+.cv-model[data-state=pending] .cv-model-dot{background:var(--accent,var(--info))}
+.cv-model[data-state=unknown] .cv-model-label{font-style:italic}
 .cv-hint{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:0 6px;min-width:0}
 .cv-hint:empty{display:none}
 .cv-hint .cv-note:empty{display:none}
@@ -98,9 +147,39 @@ export const CONVERSATION_STYLES = `
 .cv-pop{position:relative;flex:none}
 .cv-pop>summary{list-style:none}
 .cv-pop>summary::-webkit-details-marker{display:none}
-.cv-popbody{position:absolute;z-index:20;display:grid;gap:8px;width:min(300px,calc(100vw - 32px));max-height:min(420px,60vh);overflow:auto;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--shadow-2);box-sizing:border-box}
+.cv-popbody{position:absolute;z-index:var(--z-popover);display:grid;gap:8px;width:min(300px,calc(100vw - 32px));max-height:min(420px,60vh);overflow:auto;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--shadow-2);box-sizing:border-box}
 .cv-attach>.cv-popbody{left:0;bottom:calc(100% + 8px)}
-.cv-model>.cv-popbody{right:0;bottom:calc(100% + 8px)}
+.cv-model>.cv-popbody{right:0;bottom:calc(100% + 8px);width:min(300px,calc(100vw - 24px));gap:0;padding:6px}
+/* Model picker: two quiet facts, a short list, one action row. Background
+   polls update text in place and never toggle these controls. */
+.cv-model .cv-model-facts{grid-template-columns:auto minmax(0,1fr);gap:5px 14px;align-items:baseline;margin:0;padding:8px 10px 10px;font-size:var(--fs-xs)}
+.cv-model .cv-model-facts dt{color:var(--ink-3);white-space:nowrap}
+.cv-model .cv-model-facts dd{display:flex;align-items:baseline;gap:8px;min-width:0}
+.cv-mf-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:var(--fs-sm);font-weight:600}
+.cv-mf-value.is-empty{color:var(--ink-3);font-weight:400}
+.cv-model .cv-model-facts .cv-mf-note{flex:none;margin-left:auto;color:var(--ink-4);font-size:var(--fs-2xs);white-space:nowrap}
+.cv-mf-note[hidden]{display:none}
+.cv-model[data-state=pending] .cv-mf-note{color:var(--accent)}
+.cv-model .cv-options{gap:2px;max-height:216px;overflow:auto;min-height:0;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
+.cv-model .cv-options:empty{display:none}
+.cv-model .cv-option{gap:10px;min-height:36px;padding:6px 10px;font-size:var(--fs-sm);transition:background var(--t-fast),color var(--t-fast)}
+.cv-model .cv-option:hover:not(:disabled){background:var(--surface-3)}
+.cv-model .cv-option.is-selected{background:var(--accent-soft)}
+.cv-model .cv-option.is-selected .cv-option-name{font-weight:600}
+.cv-model .cv-option.is-selected .icon{color:var(--accent)}
+.cv-model .cv-option:disabled{cursor:default;color:var(--ink-3)}
+.cv-model .cv-option.is-selected:hover:not(:disabled){background:var(--accent-soft)}
+.cv-model .cv-option:disabled:not(.is-selected){background:transparent}
+.cv-option-mark{width:6px;height:6px;flex:none;border-radius:50%;background:transparent}
+.cv-option.is-current .cv-option-mark{background:var(--ok)}
+.cv-model .cv-option-id{display:block;flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-4);font:var(--fs-2xs)/1.4 var(--font-mono)}
+.cv-model .cv-pop-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;padding:8px 4px 2px 10px}
+.cv-model-notes{flex:1 1 140px;min-width:0;display:grid;gap:2px}
+.cv-model-notes:not(:has(.cv-note:not(:empty))){display:none}
+.cv-model .cv-pop-actions .cv-link{flex:none}
+.cv-model .cv-note:empty{display:none}
+.cv-apply{height:28px;padding:0 12px;flex:none}
+.cv-apply:disabled{background:var(--surface-3);color:var(--ink-4);opacity:1}
 .cv-menu>.cv-popbody{right:0;top:calc(100% + 6px)}
 .cv-pop-title{margin:0;padding:0 4px;color:var(--ink-3);font-size:var(--fs-xs)}
 .cv-pop-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
@@ -123,11 +202,11 @@ export const CONVERSATION_STYLES = `
 .cv-card label{display:grid;gap:4px}
 .cv-card input,.cv-card select,.cv-card textarea{min-width:0;max-width:100%;box-sizing:border-box}
 /* Keyboard focus */
-.cv-iconbtn:focus-visible,.cv-send:focus-visible,.cv-stop:focus-visible,.cv-jump:focus-visible,.cv-pill:focus-visible,.cv-option:focus-visible,.cv-link:focus-visible,.cv-cmd:focus-visible,.cv-x:focus-visible,.cv-activity>summary:focus-visible,.cv-sub>summary:focus-visible{outline:none;box-shadow:var(--focus)}
-.cv-session:focus-visible{box-shadow:var(--focus)}
+.cv-iconbtn:focus-visible,.cv-send:focus-visible,.cv-stop:focus-visible,.cv-jump:focus-visible,.cv-pill:focus-visible,.cv-option:focus-visible,.cv-link:focus-visible,.cv-cmd:focus-visible,.cv-x:focus-visible,.cv-activity>summary:focus-visible,.cv-sub>summary:focus-visible,.cv-picker-btn:focus-visible,.cv-session-opt:focus-visible{outline:none;box-shadow:var(--focus)}
 .cv-input:focus-visible{outline:none;box-shadow:none}
 @media(max-width:760px){
   .cv-user{max-width:94%}
+  .cv-status{max-width:30%}
   .cv-composer{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
 }
 `;

package/dist/web/assets/styles/views/dock.js

@@ -1,12 +1,44 @@
 /*
  * DOCK VIEW — the Discussion pane: its sub-header, the message feed with day
  * separators and bubbles, the composer, submission facets and next steps.
- * The Live session pane is views/terminal; the dock frame is layout/workspace.
+ * The session page is views/conversation and views/terminal; the dock frame is layout/workspace.
  */
 export const DOCK_STYLES = `
 .dock-head{height:auto;min-height:var(--header-h);padding-top:6px;padding-bottom:6px}
-.dock-head .seg{min-width:0;flex-wrap:wrap}
 .dock-actions{flex-shrink:0}
+/* Who the panel talks to: a title-like menu button with its target list */
+.dock-target{position:relative;min-width:0}
+.dock-target-btn{display:flex;align-items:center;gap:8px;min-width:0;height:34px;padding:0 10px 0 6px;border-radius:var(--r-md);color:var(--ink);font-size:var(--fs-md);font-weight:600;cursor:pointer;list-style:none;transition:background var(--t-fast)}
+.dock-target-btn::-webkit-details-marker{display:none}
+.dock-target-btn:hover,.dock-target[open] .dock-target-btn{background:var(--surface-3)}
+.dock-target-btn>.icon{width:14px;height:14px;flex:none;color:var(--ink-4)}
+.dock-target-icon{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent)}
+.dock-target-icon .icon{width:14px;height:14px}
+.dock-target-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dock-target-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:var(--z-popover);display:grid;gap:2px;min-width:220px;max-width:min(320px,80vw);padding:6px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-2)}
+.dock-target-menu hr{margin:4px 2px;border:0;border-top:1px solid var(--line)}
+.dock-target-options{display:grid;gap:2px}
+.dock-target-item{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:32px;padding:0 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-sm);text-align:left}
+.dock-target-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dock-target-item .icon{width:15px;height:15px;flex:none;color:var(--ink-4)}
+.dock-target-item:hover{background:var(--surface-3);color:var(--ink)}
+.dock-target-item[aria-pressed="true"]{color:var(--ink);font-weight:550}
+.dock-target-item .dock-target-check{color:var(--accent)}
+.dock-target-dot{width:7px;height:7px;margin:0 4px;flex:none;border-radius:50%;background:var(--idle)}
+.dock-target-dot.is-live{background:var(--ok)}
+/* One header row: target, view tabs, actions. The target's name wins space
+   first: icon-only tabs up to 480px, the selected label up to 560px, then
+   every label. Tabs keep aria-label and title at every width. */
+.dock{container-type:inline-size;container-name:dock}
+.dock-target{flex:0 1 auto}
+.dock-tabs{flex:0 0 auto;display:flex;min-width:0;margin-left:auto}
+.dock-tabs .seg-btn{justify-content:center;gap:5px;min-width:0}
+.dock-tabs .seg-btn .icon{width:14px;height:14px;flex:none}
+.dock-tabs .seg-btn[aria-selected="false"]>span{display:none}
+.dock-tabs .seg-btn>span{white-space:nowrap}
+@container dock (min-width:560px){.dock-tabs .seg-btn[aria-selected="false"]>span{display:inline}}
+@container dock (max-width:480px){.dock-tabs .seg-btn>span{display:none}}
+@container dock (max-width:340px){.dock-target-icon{display:none}}
 .dock-preview{display:flex;flex-direction:column;min-height:0;overflow:auto}
 .dock-preview>.feed-note{text-align:left;padding:0 12px;color:var(--ink-3)}
 .preview-services{flex:none;max-height:40%;overflow:auto}

package/dist/web/assets/styles/views/login.js

@@ -1,17 +1,21 @@
 /*
- * LOGIN VIEW — the standalone sign-in document: one centred card on the
- * canvas with the workbench brand, a password field (with reveal toggle),
- * inline error/notice states and the plain-HTTP reminder. Colour comes only
- * from theme tokens; the card collapses to the full width on narrow screens.
+ * LOGIN VIEW — the standalone sign-in document: one card centred on the
+ * canvas at every size, headed by the brand and the language control, with a
+ * password field (with reveal toggle), inline error/notice states and the
+ * plain-HTTP reminder. Colour comes only from theme tokens; on phones the
+ * card drops its frame and uses the full width.
  */
 export const LOGIN_STYLES = `
 .login-body{height:auto;min-height:100vh;min-height:100dvh;overflow:auto}
-.login-shell{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:72px 16px 48px;background:radial-gradient(120% 70% at 50% -10%,var(--accent-soft),transparent 60%),var(--canvas)}
-.login-top{position:absolute;top:16px;right:16px}
-.login-locale select{height:30px;width:auto;max-width:132px;padding:0 26px 0 9px;line-height:28px;font-size:var(--fs-xs);background-color:var(--surface)}
-.login-card{display:grid;gap:20px;width:min(400px,100%);padding:32px 28px 28px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2)}
+.login-shell{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:max(24px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px));background:radial-gradient(120% 70% at 50% -10%,var(--accent-soft),transparent 60%),var(--canvas)}
+.login-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
+.login-locale{flex:none}
+.login-locale select{height:30px;width:auto;max-width:132px;padding:0 26px 0 9px;line-height:28px;font-size:var(--fs-xs)}
+.login-card{display:grid;gap:20px;width:min(400px,100%);margin-bottom:6vh;padding:28px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2)}
 .login-brand{display:flex;align-items:center;gap:10px}
-.login-brand .brand-mark{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:17px;font-weight:700;line-height:1}
+.login-brand .brand-mark{display:block;width:32px;height:32px;flex:none;border-radius:8px;background:var(--ink);color:var(--canvas);overflow:hidden}
+.brand-glyph{display:block;width:100%;height:100%}
+.brand-dot{fill:var(--accent)}
 .login-brand .brand-name{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.02em}
 .login-heading{display:grid;gap:6px}
 .login-heading h1{font-size:var(--fs-2xl)}
@@ -29,14 +33,13 @@ export const LOGIN_STYLES = `
 .login-reveal[aria-pressed="true"] .icon-hide{display:block}
 .login-error{margin:0;color:var(--bad);font-size:var(--fs-sm);overflow-wrap:anywhere}
 .login-submit{width:100%;height:40px;font-size:var(--fs-md)}
-.login-spinner{display:none;width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:login-spin .8s linear infinite}
+.login-spinner{display:none;width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:m-spin .8s linear infinite}
 .login-form[aria-busy="true"] .login-spinner{display:inline-block}
-@keyframes login-spin{to{transform:rotate(360deg)}}
 .login-transport{display:flex;align-items:flex-start;gap:8px;margin:0;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--fs-xs)}
 .login-transport .icon{width:14px;height:14px;margin-top:2px;color:var(--warn)}
 @media(max-width:480px){
-  .login-shell{place-items:start center;padding:64px 12px 32px}
-  .login-card{padding:24px 20px;border-radius:var(--r-md)}
+  .login-shell{padding-left:0;padding-right:0;background:var(--surface)}
+  .login-card{width:100%;margin-bottom:0;padding:24px 20px;border:0;border-radius:0;box-shadow:none}
   .login-heading h1{font-size:var(--fs-xl)}
 }
 `;

package/dist/web/assets/styles/views/manage.js

@@ -1,40 +1,33 @@
 import { BREAKPOINTS } from "../../shared/geometry.js";
 /*
- * MANAGE VIEW — the frame shared by the management pages (/models and
- * /settings): a rail in the dashboard sidebar's language (brand, the fixed
- * Workbench / Models / Settings navigation with every section listed under
- * its area, the language control) beside one reading column whose sections
- * share a heading (area kicker, title, explanation). Page sheets add only
- * their own content. Below the narrow breakpoint the rail becomes a top bar:
- * brand and language, the three main destinations, then the current area's
- * sections, wrapping so every entry stays visible.
+ * MANAGE VIEW — what the management pages (/models and /settings) add to the
+ * workbench frame (layout/workspace): the section list in the sidebar slot,
+ * the language control in the top bar, and one reading column whose sections
+ * share a heading (title, explanation). The rail, the collapsible list, the
+ * top bar and the narrow-screen drawer are the workbench's own. Page sheets
+ * add only their own content.
  */
 export const MANAGE_STYLES = `
-.manage-body{display:block;height:auto;min-height:100vh;min-height:100dvh;overflow:auto}
-.manage-app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;min-height:100dvh}
 .manage-app[hidden],#models-root[hidden],#settings-root[hidden]{display:none}
+.manage-body{--sidebar-w:240px}
+body.manage-body.sidebar-collapsed{--sidebar-w:0px}
 
-/* Rail */
-.manage-rail{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line)}
-.manage-rail-head{flex:none;display:flex;align-items:center;gap:10px;height:var(--header-h);padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
-.manage-rail-head .brand{flex:1;color:var(--ink);text-decoration:none}
-.manage-locale{flex:none;min-width:0}
-.manage-locale select{height:30px;width:auto;max-width:124px;padding:0 26px 0 9px;line-height:28px;font-size:var(--fs-xs)}
-.manage-nav{display:flex;flex-direction:column;gap:6px;padding:12px 8px 20px;min-width:0}
-.manage-area{display:grid;gap:2px;min-width:0}
-.manage-primary,.manage-link{position:relative;display:flex;align-items:center;min-width:0;border-radius:var(--r-md);text-decoration:none;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
-.manage-primary span,.manage-link span{overflow:hidden;text-overflow:ellipsis}
-.manage-primary{gap:9px;height:34px;padding:0 10px;color:var(--ink-2);font-size:var(--fs-md);font-weight:550}
-.manage-primary .icon{width:16px;height:16px;flex:none;color:var(--ink-4)}
-.manage-primary:hover,.manage-link:hover{background:var(--surface-3);color:var(--ink)}
-.manage-primary[aria-current]{color:var(--ink)}
-.manage-primary[aria-current] .icon{color:var(--accent)}
-.manage-sections{display:grid;gap:1px;margin:0 0 4px 18px;padding-left:8px;border-left:1px solid var(--line);min-width:0}
-.manage-link{gap:8px;height:30px;padding:0 10px;color:var(--ink-3);font-size:var(--fs-sm);font-weight:500}
+/* Section list: only the current area's sections (the rail switches areas). */
+.manage-nav{flex:1;min-height:0;overflow-y:auto;padding:10px 8px 20px}
+.manage-area:not([data-active="true"]){display:none}
+.manage-sections{display:grid;gap:2px;min-width:0}
+.manage-link{position:relative;display:flex;align-items:center;gap:8px;min-width:0;height:34px;padding:0 10px;border-radius:var(--r-md);color:var(--ink-3);font-size:var(--fs-sm);font-weight:500;text-decoration:none;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
+.manage-link span{overflow:hidden;text-overflow:ellipsis}
+.manage-link:hover{background:var(--surface-3);color:var(--ink)}
 .manage-link[aria-current="page"]{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
-.manage-link[aria-current="page"]::before{content:"";position:absolute;left:-9px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--accent)}
+.manage-link[aria-current="page"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
 .manage-dirty{display:none;width:7px;height:7px;margin-left:auto;flex:none;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
 .manage-link[data-dirty="true"] .manage-dirty{display:inline-block}
+@media(pointer:coarse){.manage-link{height:42px}}
+
+/* Language control at the end of the top bar */
+.top-locale{flex:none;min-width:0}
+.top-locale select{height:30px;width:auto;max-width:124px;padding:0 26px 0 9px;line-height:28px;font-size:var(--fs-xs)}
 
 /* Reading column and the shared section heading */
 .manage-main{min-width:0;padding:28px var(--gutter) 72px}
@@ -50,20 +43,10 @@ export const MANAGE_STYLES = `
 .manage-body input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--accent)}
 
 @media(max-width:${BREAKPOINTS.narrow}px){
-  .manage-app{grid-template-columns:minmax(0,1fr)}
-  .manage-rail{position:static;height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
-  .manage-rail-head{height:52px}
-  .manage-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px 10px}
-  .manage-area{display:contents}
-  .manage-primary{justify-content:center;gap:7px;height:36px;padding:0 6px;font-size:var(--fs-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
-  .manage-primary[aria-current]{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -2px 0 var(--accent)}
-  /* Only the current area's sections, as a wrapping strip under the tabs. */
-  .manage-sections{display:none;grid-column:1/-1;grid-row:2;margin:4px 0 0;padding:0;border:0}
-  .manage-area[data-active="true"] .manage-sections{display:flex;flex-wrap:wrap;gap:4px}
-  .manage-link{flex:0 1 auto;max-width:100%;height:32px;padding:0 10px;border:1px solid var(--line)}
-  .manage-link[aria-current="page"]{border-color:var(--line-2)}
-  .manage-link[aria-current="page"]::before{left:10px;right:10px;top:auto;bottom:2px;width:auto;height:2px}
-  .manage-main{padding:18px 14px 56px}
+  .manage-main{padding:20px 14px 56px}
+  .manage-body .top-locale{display:none}
+  /* The top bar already names the section; the page keeps only its explanation. */
+  .manage-heading h1{display:none}
 }
 @media(max-width:${BREAKPOINTS.small}px){
   .manage-heading h1{font-size:var(--fs-xl)}

package/dist/web/assets/styles/views/page.js

@@ -8,9 +8,8 @@ export const PAGE_STYLES = `
 .page{max-width:var(--center-max);margin:0 auto;padding:0 var(--gutter) 64px}
 
 /* Page scaffolding */
-.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:36px 0 24px}
-.kicker{color:var(--accent);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
-.page-title{margin-top:6px;font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.025em}
+.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:28px 0 20px}
+.page-title{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.025em}
 .page-sub{margin-top:4px;color:var(--ink-3)}
 .page-foot{margin-top:20px;color:var(--ink-4);font-size:var(--fs-xs);text-align:center}
 .sub-head{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--fs-sm);font-weight:600}

package/dist/web/assets/styles/views/records.js

@@ -50,7 +50,7 @@ summary.work-head:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-line)}
 .timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
 .timeline::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
 .timeline-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:0 0 18px}
-.timeline-mark{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-3)}
+.timeline-mark{position:relative;z-index:var(--z-raised);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-3)}
 .kind-decision .timeline-mark{color:var(--ok);border-color:var(--ok-soft);background:var(--ok-soft)}
 .kind-milestone .timeline-mark{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}
 .kind-run .timeline-mark{color:var(--info);border-color:var(--info-soft);background:var(--info-soft)}

package/dist/web/assets/styles/views/settings.js

@@ -29,7 +29,7 @@ export const SETTINGS_STYLES = `
 .settings-receipt{white-space:pre-wrap;overflow-wrap:anywhere}
 .settings-error{color:var(--bad)!important}
 .settings-observation{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-xs)}
-.settings-search{position:sticky;top:0;z-index:1;padding:10px 0;background:var(--canvas)}
+.settings-search{position:sticky;top:var(--header-h);z-index:var(--z-raised);padding:10px 0;background:var(--canvas)}
 .settings-search input{width:100%;max-width:520px}
 #settings-status:empty,#browser-receipt:empty{display:none}
 .mono-line{overflow-wrap:anywhere}

package/dist/web/assets/styles/views/sidebar.js

@@ -1,26 +1,38 @@
 /*
- * SIDEBAR VIEW — the task index: brand and sync state, search, attention
- * pills, status filter tabs, grouped task rows, the catalog pager and the
- * footer buttons. Region sizing lives in layout/workspace.
+ * SIDEBAR VIEW — the task index: title and sync state, search, attention
+ * pills, status filter tabs, grouped task rows and the catalog pager. The
+ * brand mark is shared with the global rail. Region sizing lives in
+ * layout/workspace.
  */
 export const SIDEBAR_STYLES = `
-/* Brand and sync state */
-.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:700;line-height:1}
+/* Brand mark (global rail, management top bar) and sync state */
+.brand-mark{width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--canvas);overflow:hidden}
+.brand-glyph{display:block;width:100%;height:100%}
+.brand-dot{fill:var(--accent)}
 .brand-name{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.02em}
 .sync{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-3);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
 .sync i{width:6px;height:6px;border-radius:50%;background:var(--ink-4)}
 .sync[data-state="ok"] i{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
-.sync[data-state="syncing"] i{background:var(--info);animation:blink 1s ease-in-out infinite}
+.sync[data-state="syncing"] i{background:var(--info);animation:m-blink 1s ease-in-out infinite}
 .sync[data-state="error"] i{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
 .sync[data-state="error"]{color:var(--bad)}
-@keyframes blink{50%{opacity:.35}}
 
-/* Search and attention filters */
-.search-field{position:relative;display:flex;align-items:center;flex:none;margin:12px 12px 0}
-.search-field>.icon{position:absolute;left:10px;color:var(--ink-4);pointer-events:none}
-.search-field input{height:34px;padding:0 34px 0 32px;border-radius:var(--r-md);background:var(--surface-2)}
+/* Tools block: create, search, category and attention, on one 8px rhythm */
+.side-tools{flex:none;display:grid;gap:8px;padding:12px 12px 4px}
+.side-create{width:100%;height:34px;border-radius:var(--r-md);box-shadow:var(--shadow-1)}
+.side-create .icon{width:16px;height:16px;stroke-width:2.2}
+.side-search{display:flex;align-items:center;gap:6px;min-width:0}
+.search-field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
+.search-field>.icon{position:absolute;left:10px;width:15px;height:15px;color:var(--ink-4);pointer-events:none}
+.search-field input{height:34px;padding:0 32px 0 32px;border-radius:var(--r-md);background:var(--surface-2)}
 .search-field input::-webkit-search-cancel-button{display:none}
-.search-field kbd{position:absolute;right:8px}
+.search-field kbd{position:absolute;right:8px;pointer-events:none}
+.search-field:focus-within kbd{opacity:0}
+.side-search-body{width:34px;height:34px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2)}
+.side-search-body:hover:not(:disabled){border-color:var(--line-3)}
+.source-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
+.source-seg .seg-btn{justify-content:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
+.attention-bar:empty{display:none}
 .attention-list{display:flex;flex-wrap:wrap;gap:6px}
 .attention-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid transparent;border-radius:var(--r-pill);background:var(--tone-soft);color:var(--tone);font-size:var(--fs-xs);font-weight:500}
 .attention-pill b{font-weight:700;font-variant-numeric:tabular-nums}
@@ -59,17 +71,10 @@ export const SIDEBAR_STYLES = `
 .list-empty{display:grid;justify-items:center;gap:8px;padding:36px 16px;color:var(--ink-4);font-size:var(--fs-sm);text-align:center}
 .list-empty.is-error{color:var(--bad)}
 
-/* Catalog pager and footer */
+/* Catalog pager */
 .pager-btn{height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-xs)}
 .pager-btn:hover:not(:disabled){border-color:var(--line-3);color:var(--ink)}
 .pager-btn:disabled{opacity:.4}
 .pager-count{grid-column:2;text-align:center;color:var(--ink-4);font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
 .pager-clear{height:28px}
-.foot-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-xs);font-weight:500;min-width:0}
-.foot-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.foot-btn:hover{color:var(--ink);border-color:var(--line-3);background:var(--surface-3)}
-.foot-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
-.foot-btn kbd{margin-left:2px}
-.side-foot .icon-btn{margin-left:auto}
-.side-foot .icon-btn+.icon-btn{margin-left:0}
 `;

package/dist/web/assets/styles/views/task.js

@@ -1,29 +1,22 @@
 /*
- * TASK VIEW — the task page frame and its Overview tab: the sticky header and
- * section tabs, the hero, the "now" banner, input requests that need the
+ * TASK VIEW — the task page frame and its Overview tab: the sticky section
+ * tabs, the hero, the "now" banner, input requests that need the
  * user, decisions and planning. Rows inside the other tabs live in
  * views/records and views/delivery.
  */
 export const TASK_STYLES = `
-/* Sticky header and tab strip: both bleed through the page gutter and frost
-   the content scrolling beneath them. */
-.task-header,.tabs-wrap{position:sticky;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
-.task-header{top:0;z-index:10}
-.task-bar{display:flex;align-items:center;gap:6px;height:var(--header-h)}
-.back-btn{display:none}
-.crumbs{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-sm)}
-.crumb{padding:3px 6px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--ink-3)}
-.crumb:hover{color:var(--ink);background:var(--surface-3)}
-.crumb-sep{color:var(--ink-4)}
-.crumb-current{color:var(--ink-2);font-size:var(--fs-xs)}
+/* Section tabs: sticky under the top bar, bleeding through the page gutter
+   and frosting the content scrolling beneath them. */
+.tabs-wrap{position:sticky;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:var(--canvas)}
 .dock-toggle{height:30px}
-.task-hero{padding:14px 0 18px}
+.operator-toggle[aria-pressed="true"],.panel-toggle[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
+.task-hero{padding:28px 0 18px}
 .task-title{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.025em;line-height:1.25;overflow-wrap:anywhere}
 .task-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;color:var(--ink-3);font-size:var(--fs-xs)}
 .task-meta:empty{display:none}
 .meta-item{display:inline-flex;align-items:center;gap:5px}
 .meta-item .when{font-size:inherit}
-.tabs-wrap{top:var(--header-h);z-index:9;border-bottom:1px solid var(--line)}
+.tabs-wrap{top:var(--header-h);z-index:calc(var(--z-sticky) - 1);border-bottom:1px solid var(--line)}
 .tabs{gap:4px}
 .tab{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;height:42px;padding:0 10px;border:0;background:transparent;color:var(--ink-3);font-size:var(--fs-sm);font-weight:500}
 .tab:hover{color:var(--ink)}