/* Yatsar — shared styles. * * All color comes from the semantic tokens below — never hardcode a color in * a rule, an inline style, or JS. Light theme = the :root defaults; the dark * theme overrides the same tokens under html[data-theme="dark"] (set by the * admin-console toggle, see theme.js). Per-Agent Themes (future) override * these tokens as inline custom properties on of the published page, * which wins over both scopes. Token list + scopes: docs/app/frontend.md. */ :root { color-scheme: light; /* actions */ --primary: #6a3fcc; /* primary buttons, user bubble, active toggle */ --primary-hover: #5a33b0; --on-primary: #ffffff; /* text/icons on --primary */ --secondary: #5f5973; /* metadata chrome: badges, tool chips */ /* surfaces */ --surface: #f4f5f7; /* page / chat background */ --surface-raised: #ffffff; /* panels, cards, bubbles, inputs */ --surface-hover: #f8f9fb; /* content */ --text: #211c33; --text-muted: #5f5973; --border: #e5e3ec; --border-strong: #d5d2e0; /* accent (violet): links, selection, activity */ --accent: #6a3fcc; --accent-surface: #efe9fb; /* selection wash */ --accent-text: #5b2bb0; /* readable accent text on --accent-surface */ /* focus (#401): NEUTRAL, Theme-aware — the visible focus ring is a quiet grey, not the violet brand accent. Dark-on-light here, light-on-dark in dark mode. */ --focus-ring: #484553; /* status (--success-surface ratified by #421 per Decision 75's rule-of-two; soft-green wash re-expressed from prototype #393 --wf-success-soft). --warning/--warning-surface landed with the Tasks triage list (#498): a deadline is a THIRD status, not a member of the Skill identity family — a Theme repainting Skill gold must not repaint "Due today". The values are the amber the system already ships; the roles are now Themeable like the rest. --warning-border ratified by #540 (Decision 75's rule-of-two): #538's Explorer needs-attention badge and the Full API read-write pill are two bordered warning consumers, and the value is exactly the mix #538 wrote inline — color-mix(in srgb, --warning 35%, --border) — re-expressed as a token so the border is Themeable with the pair it belongs to. */ --success: #1f8a4c; --success-surface: #e6f3eb; --warning: #8a5a00; --warning-surface: #fbf1d8; --warning-border: #c5b399; --danger: #c23934; --danger-surface: #fbeae9; --danger-border: #f1c7c5; /* semantic identity families (#401, migration brief #396) — Agent green, Skill gold, File blue, Notification rose. base = tint/text/icon hue; -surface = quiet fill wash; -text = readable label on -surface; -strong = AA-safe solid fill behind white (Notification has none). Themeable values, stable roles; part of the theme.py -> style.css -> dom-utils.js -> frontend.md parity contract (tests/test_token_parity.py). The -strong pair is dark enough for white text in BOTH modes, so it carries one value. Connector stays NEUTRAL — never a fifth identity family. 2026-08-12 (#658): Tasks and Notifications swapped dress — the rose family below now paints TASKS (token names keep the parity contract), while Notification surfaces ride the violet accent/primary. */ --agent: #1f8a4c; --agent-surface: #e6f4ec; --agent-text: #14663a; --agent-strong: #1a7a43; --skill: #c68a1a; --skill-surface: #fbf1d8; --skill-text: #8a5a00; --skill-strong: #9a6600; --file: #2f74c0; --file-surface: #e8f1fb; --file-text: #245a96; --file-strong: #265988; --notification: #b14f7b; --notification-surface: #f8e8ef; --notification-text: #87375c; --notification-strong: #a8476f; /* type */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ----- internal scale tokens (#65) — design constants, NOT themeable ----- A Theme is colors only (docs/design/theming.md); these are tokenized for OUR consistency and never set by any Theme. Ported value-preserving from docs/design/design-system.css; new components use these from the start, existing rules migrate off raw px per-surface in later slices. */ /* spacing rhythm */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 18px; --space-9: 24px; --space-10: 36px; /* radius */ --radius-sm: 6px; --radius: 8px; /* default: buttons, inputs, toggles, sidebar items */ --radius-md: 10px; /* cards, popovers */ --radius-card: 14px; /* agent card, dialog */ --radius-pill: 999px; /* chat-bubble tail — deliberate asymmetry, shared so a new bubble surface can't diverge (backlog L3): user/assistant/form all compose these. */ --bubble-radius: 14px; --bubble-tail: 4px; /* type ramp */ --fs-eyebrow: 11px; --fs-meta: 12px; --fs-body-sm: 13px; --fs-body: 14px; --fs-h2: 15px; --fs-title: 16px; --fs-brand: 18px; --fs-h1: 22px; /* display: the Workspace greeting question ("What can we work on?") — larger than a page h1, fluid to the viewport (new-design-base / #388 wf-hero). */ --fs-display: clamp(25px, 3vw, 36px); --fw-normal: 400; --fw-emph: 600; --fw-bold: 700; /* elevation — one color method: color-mix on --text (theme-aware). Elevation rule (#401): ordinary shell, Card, Row, and Panel surfaces stay FLAT. --shadow-focal is the one restrained lift reserved for the single focal surface (the new-chat composer); temporary layers use --shadow-popover (dropdowns/popovers) and --shadow-modal (dialogs). */ --shadow-focal: 0 14px 36px color-mix(in srgb, var(--text) 22%, transparent); --shadow-popover: 0 6px 24px color-mix(in srgb, var(--text) 18%, transparent); --shadow-modal: 0 12px 40px color-mix(in srgb, var(--text) 25%, transparent); --scrim: color-mix(in srgb, var(--text) 35%, transparent); /* motion */ --motion-fast: .12s ease; --motion-slide: .22s ease; /* z-index ladder (--z-tooltip: hover hints float above open temporary layers, below the modal) */ --z-takeover: 5; --z-dropdown: 20; --z-popover: 30; --z-tooltip: 60; --z-modal: 100; /* state */ --opacity-disabled: .5; } html[data-theme="dark"] { color-scheme: dark; --primary: #8b63e6; --primary-hover: #9d78ee; --on-primary: #ffffff; --secondary: #bbb8c4; /* Dark surfaces: neutral CHARCOAL (#401 / #386) — replaces the retired purple-black family. Neutral greys so the violet brand accent and the four identity families read against a quiet base. */ --surface: #17171a; --surface-raised: #202023; --surface-hover: #2c2c30; --text: #f0eff3; --text-muted: #bbb8c4; --border: #39383f; --border-strong: #54515d; --accent: #a47ff0; --accent-surface: #2e2350; --accent-text: #c9b3f7; --focus-ring: #e1dde8; /* neutral focus, light-on-dark */ --success: #4ade80; --success-surface: #263b31; --warning: #e6b84a; --warning-surface: #342a10; --warning-border: #766543; --danger: #f87171; --danger-surface: #3a1a1a; --danger-border: #602c2c; /* identity families (dark) — Themeable hues, stable roles. -strong keeps its single value (dark enough for white in both modes). */ --agent: #4ade80; --agent-surface: #123322; --agent-text: #6ee7a0; --agent-strong: #1a7a43; --skill: #e6b84a; --skill-surface: #342a10; --skill-text: #f0cf6b; --skill-strong: #9a6600; --file: #75b7ff; --file-surface: #142d49; --file-text: #9acaff; --file-strong: #265988; --notification: #ee86b1; --notification-surface: #442033; --notification-text: #f4adca; --notification-strong: #a8476f; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; } button { font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); border-radius: 8px; padding: 5px 12px; } button:hover { border-color: var(--border-strong); background: var(--surface-hover); } button.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } button.danger { color: var(--danger); } button:disabled { opacity: var(--opacity-disabled); cursor: default; } /* Visible keyboard focus on every button (#401): the NEUTRAL, Theme-aware --focus-ring is the resolved standard for focus everywhere (it replaced the violet --accent ring; the accent brand colour is no longer a focus signal). */ button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* number/date/email/search share the base control styling (backlog H3) so #cfg-budget and the chat Form inputs stop getting raw user-agent chrome. */ input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input[type=search], select, textarea { font: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--surface-raised); color: var(--text); } /* Text-input focus is RESTRAINED (#401): a neutral border + caret rather than the full focus ring, so composing does not sit inside a loud outline. */ input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=date]:focus, input[type=email]:focus, input[type=search]:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus-ring); caret-color: var(--text); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Selectable list row (#65, backlog H1) — ONE primitive behind what were six * bespoke rows. The canonical selectable-row look: flex, the .sel selected * state, --surface-hover hover, an optional .ico slot. The validator list, * the attach-a-Form list and the field-designer list compose * it (and the FileTree, #63); variant classes carry only true deltas. * Defined early so a variant's later rules win on equal specificity. */ .list-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; color: var(--text); } .list-row:hover { background: var(--surface-hover); } .list-row.sel { background: var(--accent-surface); color: var(--accent-text); } .list-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -1px; } .list-row .ico { width: var(--space-8); text-align: center; flex: none; } /* A registry glyph is a BLOCK by default (CJ, 2026-08-06; backlog DR37). * * WHY this is the default rather than a list of controls that opt in: an SVG is * an inline box, so it sits on a text baseline and its host reserves descender * space BELOW the glyph. A `place-items: center` control then centers that * TALLER box rather than the mark, and an 18px glyph reads ~3px high. It bites * whenever a control wraps its icon in a NESTED span — which is how almost every * icon host in this codebase is built. The bug therefore recurred per component, * and #599's fix (one `:is(...)` list of every icon-only control) still had to be * JOINED by hand — a list #599 itself forgot to join in the same branch. So the * rule belongs at the source: `icons.js` stamps every glyph `.ico`, and every * `.ico` is a block. Nothing to remember. * * `svg.ico` is deliberately narrow — it matches the REGISTRY's output only. * Hand-inlined SVGs (canvas-shell's 16x16 Canvas-core marks, workspace.js's * agent/skill spark marks) carry no `.ico`, so hosts that mix registry and * hand-cut glyphs keep their own rule; those are marked where they appear. * * A glyph set inline WITHIN A TEXT RUN is the one real exception: it needs its * baseline back, so it re-declares `display: inline` alongside its * `vertical-align` (see .ws-greet .gr-kw). Positioning the HOST instead — an * inline-block wrapper with the vertical-align on it, .ws-kind-word's shape — is * the better pattern and needs no exception at all. */ svg.ico { display: block; } /* Unified sidebar nav (#41). sidebar.js wraps each admin page's body into * .app-content and prepends #app-sidebar; body becomes a flex row. */ /* #49: override the base `html, body { height: 100% }` so the body grows with * content — that gives the sticky sidebar (its containing block) room to stick; * otherwise the body is capped at one viewport and the nav scrolls away. */ body.has-sidebar { display: flex; min-height: 100vh; height: auto; margin: 0; } .app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } #app-sidebar { flex: none; width: 252px; display: flex; flex-direction: column; gap: 2px; padding: 0; background: var(--surface-raised); border-right: 1px solid var(--border); /* #49: pin the nav and let IT scroll (not the page) when its own content * exceeds the screen — 100dvh so mobile browser chrome never clips the * bottom item; overflow-y:auto shows a scrollbar only when needed. */ position: sticky; top: 0; height: 100dvh; overflow: visible; transition: width var(--motion-fast); } #app-sidebar.collapsed { width: 64px; } .sb-rail-head { flex: none; min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 10px; } .sb-brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; overflow: hidden; } .sb-brand:hover { text-decoration: none; } .sb-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: var(--radius-md); color: var(--surface-raised); background: var(--text); font-size: 16px; font-weight: 800; } .sb-brand-copy { min-width: 0; } .sb-brand-copy strong, .sb-brand-copy span { display: block; white-space: nowrap; } .sb-brand-copy strong { font-size: 16px; } .sb-brand-copy span { color: var(--text-muted); font: 10px/1.35 var(--mono); letter-spacing: .05em; } .sb-collapse { width: 34px; height: 34px; margin-left: auto; padding: 0; display: grid; place-items: center; flex: none; color: var(--text-muted); background: transparent; border-color: transparent; } .sb-collapse:hover { color: var(--text); background: var(--surface-hover); } .sb-nav-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 2px 10px 12px; } .sb-nav { display: flex; flex-direction: column; gap: 2px; } /* The Builder rail sections (.sb-builder / .sb-sep, #44/#55/#137) are GONE as of 2026-08-08 (CJ). Every Module's sub-menu had been reduced to a single item naming the place you already were, so the Agent (#609), Skill and Validator Builders all dropped theirs and mark their Module current in the main rail instead. With no consumers the relocation mechanism went too, and these rules with it. `.sb-item` / `.sb-ico` / `.sb-label` stay — the main rail and the Workspace settings rail are their live users. */ /* Nav item (#65, M7): ONE definition of the sidebar + Settings sub-nav row look. The prefixed classes alias it; new navs use .nav-item directly. */ .nav-item, .sb-item, .settings-subnav button { display: flex; align-items: center; gap: var(--space-5); min-height: 38px; padding: 8px 9px; border-radius: var(--radius); font-size: var(--fs-body); color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; } .nav-item:hover, .sb-item:hover, .settings-subnav button:hover { background: var(--surface-hover); text-decoration: none; } .nav-item.active, .sb-item.active, .settings-subnav button.active { background: var(--accent-surface); color: var(--accent-text); font-weight: var(--fw-emph); } .sb-item:focus-visible, .sb-collapse:focus-visible, .sb-brand:focus-visible, .sb-profile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .sb-ico { width: 22px; display: grid; place-items: center; flex: none; } .sb-ico svg { width: 18px; height: 18px; } .sb-rail-foot { flex: none; position: relative; padding: 8px 10px 10px; border-top: 1px solid var(--border); } .sb-profile { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 6px; border-color: transparent; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left; } .sb-profile:hover { background: var(--surface-hover); } .sb-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--accent-text); background: var(--accent-surface); font-weight: var(--fw-emph); } .sb-profile-copy { min-width: 0; flex: 1; } .sb-profile-copy strong, .sb-profile-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sb-profile-copy strong { font-size: var(--fs-body-sm); } .sb-profile-copy span { color: var(--text-muted); font-size: var(--fs-meta); } .sb-profile-more { display: grid; place-items: center; color: var(--text-muted); } .sb-profile-menu { position: absolute; left: calc(100% + 8px); bottom: 10px; z-index: var(--z-popover); min-width: 190px; padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-popover); } .sb-profile-menu[hidden] { display: none; } .sb-menu-item { width: 100%; display: block; padding: 8px 9px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; text-decoration: none; } .sb-menu-item:hover { background: var(--surface-hover); text-decoration: none; } .sb-menu-item.danger { color: var(--danger); } .sb-menu-divider { height: 1px; margin: 5px 4px; background: var(--border); } .sb-menu-form { margin: 0; } #app-sidebar.collapsed .sb-label, #app-sidebar.collapsed .sb-brand-copy, #app-sidebar.collapsed .sb-profile-copy, #app-sidebar.collapsed .sb-profile-more, #app-sidebar.collapsed .sb-collapse { display: none; } #app-sidebar.collapsed .sb-rail-head, #app-sidebar.collapsed .sb-profile { justify-content: center; } #app-sidebar.collapsed .sb-brand { justify-content: center; } #app-sidebar.collapsed .sb-nav-scroll, #app-sidebar.collapsed .sb-rail-foot { padding-inline: 10px; } #app-sidebar.collapsed .sb-item { justify-content: center; padding-inline: 8px; } .topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: var(--surface-raised); border-bottom: 1px solid var(--border); } /* display:flex above out-specifies the UA [hidden] rule — restore it so a * .topbar can be hidden (e.g. the skills page topbar in the full-screen edit * view, #64). */ .topbar[hidden] { display: none; } .topbar .brand { font-weight: 700; letter-spacing: .02em; } .topbar .brand a { color: var(--text); } .topbar .brand .dot { color: var(--accent); } /* per-Agent Theme logo (#30) — replaces the Yatsar mark when set */ .topbar .brand-logo { display: block; height: 26px; max-width: 180px; object-fit: contain; } .topbar .spacer { flex: 1; } .flex-spacer { flex: 1; } .login-panel { max-width: 360px; } .login-form { display: flex; flex-direction: column; gap: var(--space-3); } .chat-root { flex: 1; min-height: 0; display: flex; } /* A pill does not wrap — the base anatomy, promoted out of the Hub's Unclaimed queue by the 2026-08-11 design review; see `.badge` in the spec sheet (`shared/design-system/design/design-system.css`) for the argument. A no-op on every badge this file paints today: all sixteen are short topbar page labels in a wide flex bar. */ .badge { font-family: var(--mono); font-size: 11px; color: var(--secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } /* Shared eyebrow micro-label (backlog L1): the uppercase-muted section-label recipe that was hand-repeated 4× (dash-table headers, takeover-sub, publish-panel section labels, fd-ctl-label). New labels use .eyebrow; the existing instances migrate to it as their surfaces are next touched. */ .eyebrow { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } /* Screen-reader-only text (#270) — the standard clip pattern. For labels that must be announced by AT but not painted (users.html connector selects, icon-button names). Not display:none — that hides from AT too. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------- admin ---------- */ /* Tier-2 content shell (#66): full-width, one gutter, no left-pin. The console's content pages (Agents, Skills, Validators, Dashboard) share one width rule so moving between them feels like one app, not four. */ .admin-wrap { max-width: none; margin: 24px 0; padding: 0 36px; } .admin-wrap h1 { font-size: 22px; margin: 0 0 4px; } .admin-wrap .sub { color: var(--text-muted); margin: 0 0 22px; } /* Module-list header (#142): the h1 + sub on the left, the page's primary "Create a …" action on the right — the unified Module-page header row. */ .module-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); } .module-head > button { flex: none; } .new-agent { display: flex; gap: 8px; margin-bottom: 26px; } .new-agent input { flex: 1; } /* The two action-row lists (Agents, Skills, #66) tile as a responsive card grid so the action buttons ride their own card instead of stranding from the name. */ .card-grid, #list, #skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .agent-card { position: relative; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; } /* status overlay: published-version + validator badges ride the top-right corner, overlapping the border, so they never crowd or wrap the name. The surface fill lets a pill sit cleanly across the hairline. */ .card-status { position: absolute; top: -11px; right: 14px; display: flex; gap: 6px; } .card-status .pub-badge { margin: 0; background: var(--surface-raised); } .agent-card .name { font-weight: 600; font-size: 15px; } .agent-card .meta { color: var(--text-muted); font-size: 12px; } .agent-card .grow { flex: 1; } .agent-card .warn { color: var(--warning); font-size: 12px; } /* the card's action buttons, on their own row at the foot of the tile */ .card-actions { display: flex; flex-wrap: wrap; gap: 8px; } .empty-note { color: var(--text-muted); text-align: center; padding: 40px 0; } /* compact variant (backlog L7): the one empty-state for narrow panes — e.g. the grants library. (.editor-placeholder stays reserved for the file-editor "pick a file" affordance.) */ .empty-note.compact { padding: var(--space-5) 0; font-size: var(--fs-body-sm); } /* ---------- builder layout ---------- */ .builder { display: grid; height: 100vh; /* The topbar is OPTIONAL — the Builder UI surface can render without the global chrome (e.g. a standalone Theme takeover, or a reference mockup). Default to a single full-height content row; add the auto topbar row only when a `.topbar` child is present. Hardcoding `auto 1fr` collapsed the content to 0 height when no topbar filled the auto row. (:has() is already used in this file — see .attach-check.) */ grid-template-rows: 1fr; /* ONE column that may shrink below its content. Without this the implicit column is `auto` (= minmax(auto, max-content)), whose `auto` MINIMUM is the content's min-content width — so the column floored at whatever the widest row inside needed and the whole page scrolled sideways, clipping the Admin sidebar and the command bar's last control. It also made the 980px bench query inert: the narrow tracks were applied and then handed a container wider than the viewport, so they never took effect. minmax(0, 1fr) lets the column track the viewport and pushes the compressing down to the regions that own it (.bench-work's tracks, .bench-command's fields). */ grid-template-columns: minmax(0, 1fr); } .builder:has(> .topbar) { grid-template-rows: auto 1fr; } /* `display: grid` above out-specifies the UA [hidden] rule — restore it so a page that toggles a `.builder` editor view via the hidden attribute (the Connector/Validator Editors) actually hides it (same pattern as .topbar[hidden] / .mode-toggle[hidden]). */ .builder[hidden] { display: none; } /* Mode-switching body (#55): the persistent topbar above, then this 1fr row * that holds the Agent Editor and the full-area takeovers/overlays. The body * is the --surface page the editor cards float on (gutter padding below). */ #builder-body { position: relative; min-height: 0; background: var(--surface); padding: var(--space-8); } /* `.pane` is the loose card vocabulary still used by the Connector wizard and Workspace surfaces; the Builders (Agent/Skill/Validator) now compose over the shared Context Bench (.bench-*, #422/#423) instead of the old .builder-main / .skill-build-grid tracks + .pane-resize gutters, which were removed with the migration. */ .pane { min-height: 0; display: flex; flex-direction: column; background: var(--surface-raised); } .pane-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); flex-wrap: nowrap; } .pane-head .title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Three-zone center-pane head (#139; hardened #151, DESIGN.md Decision 40): equal-flex side zones flank the centered toggle, so the filename + Rename (or the draft-agent title) read top-left and the actions top-right while the toggle stays dead-center. The pattern serves EVERY editor pane-head toggle — Editor⇄Agent (Agent) and Editor⇄Config (Connector). Equal flex:1 1 0 zones keep it centered; the side zones may shrink (min-width:0) and the head NEVER wraps (flex-wrap:nowrap), so a too-narrow pane keeps all three zones on one row and the filename ellipsizes (.title above) instead of dropping the actions to a second line. The .mode-toggle keeps its intrinsic width (flex:0 0 auto) so it never squeezes. NB: do NOT give .ed-controls a display here — it would out-specify the .ed-controls[hidden] rule and break the toggle's show/hide. (The bench Work head carries the same three zones — see .bench-panel-head .ph-side — and the Agent Builder centers Source/Preview there; the floating .pane-editor > .view-toggle is the other posture.) */ .pane-head .ph-side { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; } .pane-head .mode-toggle { flex: 0 0 auto; } /* The actions zone never shrinks below its buttons (min-width:max-content), so on a narrow editor pane the right zone keeps its full width instead of overflowing its equal-flex box leftward over the centered toggle — the filename (left zone, min-width:0) ellipsizes to make room instead (#155/#159 density: Save·Revert·Delete). Still truly centered when the pane is wide. */ .pane-head .ph-side-right { justify-content: flex-end; min-width: max-content; } /* file tree */ /* The file tree (#63): rows are the shared .list-row + an .ico glyph slot (retiring the old .tree .row / .skill-files .row — backlog H1). The tree only tightens density, styles its icon column, and ellipsizes long names. */ .tree { overflow: auto; flex: 1; padding: var(--space-4) var(--space-3); font-size: var(--fs-body-sm); } .tree .node { border-radius: var(--radius-sm); } .tree .list-row { padding: var(--space-2) var(--space-4); gap: var(--space-3); } .tree .list-row .ico { width: var(--space-7); color: var(--text-muted); } .tree .list-row.sel .ico { color: var(--accent-text); } .tree .tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree .tree-empty { color: var(--text-muted); cursor: default; } .tree .kids { margin-left: var(--space-7); } /* …except in the Agent / Skill editor's File Explorer, whose rows ARE the Workspace File Explorer's rows (`.ws-fe-*`, the Utility block far below) — same checkbox, chevron, file glyphs and File-blue selected treatment, because the two are one surface wearing two hosts. `.tree` there supplies only the scroll box and the compact rail's type size; the `.list-row` rules above are left for the Canvas Folder core (`.ws-fx`), which still composes them. Net-new is the one row that Explorer has no equivalent for: the placeholder an expanded-but-empty folder shows, so an open folder never reads as a failed fetch. It is a row, so it indents with the rest — but it is not selectable, so it takes no hover. */ .tree .ws-fe-empty-row { color: var(--text-muted); font-size: var(--fs-meta); cursor: default; } .tree .ws-fe-empty-row:hover { color: var(--text-muted); background: none; } /* editor */ .pane-editor { position: relative; } /* Form picker (#37): a small dropdown under a pane-head. Its one instance is the First Interaction pane's Attach button (#609 edit 9 retired the editor's own Insert Form picker), so the posture that used to live in .fi-form-pane's override is folded in here — one instance, one rule. */ .if-picker { position: absolute; top: 46px; right: var(--space-5); z-index: 20; min-width: 180px; max-height: 50%; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-popover); } .if-picker[hidden] { display: none; } /* .list-row delta: a single-line