/* ControlBridge — the Control Operations Desk. * * Vanilla CSS, one file, no build step. This is the whole visual * system: [DESIGN.md](../../devdocs/design/DESIGN.md) is the * contract and this file is its implementation. §5's palette, * §6's type scale and §7's spacing/shape/elevation/density are * *checked* against this file by * [design_tokens_test.py](../server/design_tokens_test.py), so a * value that disagrees with the doc is a failing test, not a * matter of taste. * * Three rules that shape everything below, all from §4: * * 1. **Flat.** Content surfaces are separated by hairline * borders, never by shadow. A shadow means "this floats * above the workspace" — a drawer, a dialog, a menu, a * popover — and nothing else may claim it. * 2. **No gradients, no emoji, no decorative AI styling.** * Icons come from the Lucide registry * ([core/icons.js](core/icons.js)) and nowhere else. * 3. **Colour never carries meaning alone.** Every status has * words; the tint reinforces the sentence, it does not * replace it. * * All colour lives in the token block below. If you are adding a * colour literal to a rule, stop: add or reuse a token instead. * See devdocs/design/brand-tokens.md. */ /* ===================== DESIGN TOKENS ===================== Source of truth: DESIGN.md §5 (colour), §6 (type), §7 (spacing/shape/elevation). brand-tokens.md records *why* these values — their provenance in ControlBridge's own UI_STANDARDS, the two accessibility deviations, and the rules for changing them. The LEGACY alias layer (--ink/--accent/--good/…) is gone as of 2026-07-28. It existed so one restyle did not have to rewrite 260 call sites; this restyle rewrote them, and keeping a second vocabulary alive for a stylesheet that no longer speaks it is how two names for one colour drift apart. */ :root { /* ---- Palette (DESIGN.md §5) ---- */ --brand: #2563eb; --brand-dark: #1d4ed8; --brand-tint: #eff6ff; /* The LOGO's blue, not the interface's — the two are different colours on purpose (ADR-093) and this is the one the vendor marks are actually drawn in. It exists so the sign-in card can speak the brand's palette beside the brand's lockup instead of putting #2563eb next to #0061fe, which reads as a mistake rather than as a decision. STRICTLY for brand expression on the pre-auth card. It is NOT an interface accent: §5 reserves blue for actions, links, focus and selection, and that reservation is what stops a page turning into four competing blues. 5.07:1 on --surface, so it clears AA as text. */ --brand-mark: #0061fe; /* The tint's own border. --line reads as a divider against white and disappears against --brand-tint, so a selected row or an informational callout had no edge at all. */ --brand-line: #bfdbfe; --nav-bg: #0f172a; --nav-text: #f8fafc; --danger: #ef4444; --success: #16a34a; --warn: #f59e0b; --info: #2563eb; --text-primary: #0f172a; /* The standards say #64748b. Darkened by one notch, and only for a measured reason: #64748b clears AA on WHITE (4.76) but lands at 4.34 on --background #f1f5f9 — and --background, not white, is what sits behind most secondary text (page subtitles, breadcrumbs, field labels). It also failed on --warn-tint (4.32). #5a6a7e is the same slate hue and clears 4.5 on white, --background, --surface-subtle and all four tints (worst case 4.54 on --danger-tint). Found by measuring the rendered DOM, not the token table — the table looked fine. Held there by design_tokens_test.py, which recomputes every ground rather than the ones text happens to sit on today. */ --text-secondary: #5a6a7e; /* Placeholder and disabled only — 2.56 on white, which WCAG exempts for disabled controls. Never use it for content. */ --text-muted: #94a3b8; /* ---- AA-safe variants of the three semantic hues ---- The standards' --danger/--success/--warn are correct as FILLS but fail WCAG 2.2 AA as small text on white: 3.76, 3.30 and 2.15 against a 4.5 requirement. This project makes AA a per-view acceptance criterion, so each hue gets a darkened `-ink` for text and a `-tint` for its background. Same hue, legible: every -ink clears 4.5 on BOTH white and its own tint. The base hues stay untouched for fills, borders and icons. */ --danger-ink: #ca2525; --danger-tint: #fce3e3; --success-ink: #1f8143; --success-tint: #e4fbed; --warn-ink: #966513; --warn-tint: #fcf3e3; /* Tint borders, for the same reason as --brand-line: a pill or a callout needs an edge its own tint does not swallow. */ --danger-line: #efc6c6; --success-line: #b8e8ca; --warn-line: #eedcae; /* ---- Neutrals ---- */ --background: #f1f5f9; --surface: #ffffff; --surface-subtle: #f8fafc; --line: #e2e8f0; /* Emphasised boundary / control border (DESIGN.md §5). Distinct from --line: this is the one a control's own edge uses, so an input reads as interactive against a surface that --line merely divides. */ --line-strong: #cbd5e1; /* Domain vocabulary, not diagram decoration — risk, control * coverage and its absence. Ported from Original so a marker * means to a practitioner what it meant there (ADR-126). They * are HERE rather than in the diagram layer because that layer * aliases this palette and never declares its own values: a hex * there has already drifted twice, once reintroducing a colour * this palette had rejected for failing AA. */ --marker-risk: #b91c1c; /* 4.15 against white — BELOW AA's 4.5 — and legitimate only * because its glyph is a ``, a graphical object held to * the 3:1 non-text threshold. Redraw that tick as a text "✓" * and this value drops below AA. `design_tokens_test.py` * recomputes ratios, so it would go red at the redraw rather * than here — which is correct, and is exactly why the reason * has to live at the value. A green suite otherwise reads as * "the palette is fine". */ --marker-control-key: #e0443a; --marker-control-automated: #15803d; --marker-control-gap: #b45309; /* The Copilot's assistant bubble. Neutral on purpose: the other three bubbles carry meaning in their colour (you = brand fill, tool = warn tint, error = danger tint); the assistant's turn is the ordinary case and DESIGN.md §4 forbids "AI everywhere" styling, so it takes the plain grouped surface. */ --msg-ai: var(--surface-subtle); /* ---- Nav surface. Every colour here is nav-specific: --text-* are tuned for light grounds and are unreadable on #0f172a, which is why the nav carries its own small set rather than borrowing the page's. ---- */ --nav-muted: #94a3b8; --nav-hover: #1e293b; --nav-sel-bg: #1e3a8a; --nav-sel-ink: #ffffff; --nav-item-ink: #cbd5e1; --nav-link: #93c5fd; --nav-rule: #334155; /* ---- Shell geometry (DESIGN.md §3) ---- Set as tokens because three things move them: the collapse toggle, the Copilot's resize, and the breakpoints. A grid template written out per state would be four templates to keep in step. */ --topbar-h: 56px; --nav-w: 224px; --nav-w-rail: 56px; --copilot-rail: 44px; --copilot-w: 384px; --gutter: 24px; /* ---- Shape (§7): 6px controls, 8px panels, no more ---- */ --radius: 6px; --radius-panel: 8px; /* ---- Elevation (§7). ONE shadow, for things that physically overlay the workspace. Content is flat. ---- */ --shadow-overlay: 0 8px 24px rgba(15, 23, 42, .16); /* ---- Motion (§12). 80 feedback, 160 selection, 240 panel. -- */ --t-fast: 80ms; --t-mid: 160ms; --t-slow: 240ms; /* UI_STANDARDS "Typography": system stack, NO external font load. The previous stack led with 'ITC Avant Garde Gothic', which has no @font-face anywhere in this repo — so it rendered only for people who happened to have that licensed face installed, and everyone else silently got a different typeface. */ --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; } * { box-sizing: border-box; } /* The `hidden` ATTRIBUTE must always win. * * The browser's own `[hidden] { display: none }` is specificity * (0,1,0), so any rule of ours that sets `display` and names an * element plus a class — `button.btn`, `.card`, `.pane` — beats * it and the element stays on screen. That is not hypothetical: * the moment buttons gained `display: inline-flex`, the workflow * bar showed Run, Resume, Restart, Stop AND Kill at once, because * `wfControls()` hides four of them with `.hidden = true`. * * It matters beyond looking wrong. `hidden` is this app's chosen * way to hide things that must ALSO be hidden when the stylesheet * is removed — the global search's filtered-out `.card`s, the * workspace pane a narrow viewport is not showing, the run-detail * holder. view_check.py reads every view twice and compares; a * `hidden` that only works sometimes breaks that check in the * direction nobody notices, by showing MORE in the styled read. */ [hidden] { display: none !important; } html { color-scheme: light; } html, body { margin: 0; height: 100%; } body { color: var(--text-primary); font: 14px/1.45 var(--font-sans); background: var(--background); } /* The boot curtain. `cb-booting` is set by an inline script in index.html before first paint and cleared by main.js once /api/auth/me has answered (core/identity.js `cbBootDone`). Without it the browser paints the static shell immediately and a signed-out visitor watches the topbar and sidebar for the length of a round-trip before the sign-in card covers them. `visibility`, not `display: none`: the layout is still computed, so revealing costs no reflow and nothing jumps. The sign-in overlay is deliberately NOT listed — it is the one thing that may paint during boot. body keeps --background, so the curtain is the app's own colour and not a white flash. */ .cb-booting .topbar, .cb-booting .layout, .cb-booting .skip-link, .cb-booting .nav-scrim { visibility: hidden; } button, input, select, textarea { font: inherit; } a { color: var(--brand-dark); text-decoration: none; } a:hover { text-decoration: underline; } svg { display: block; } /* ONE focus indicator for the whole application (§14). Named once here so no component has to remember it, and so removing it anywhere is a visible deletion rather than an omission. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* Lucide icons (core/icons.js). One size and stroke for the whole app — a set reads as a set only if nothing varies. 16px on a 24-unit grid, and stroke-width scaled to 1.75 because lucide's default 2 goes chunky below 20px. `currentColor` is inherited, so hover and selected states recolour the icon with no second asset. */ .ico-svg { width: 16px; height: 16px; display: block; stroke-width: 1.75; flex: none; } .ico { display: inline-flex; align-items: center; justify-content: center; flex: none; } /* Copilot highlight: mark the target the agent is pointing at. A solid ring, not a glow or a pulse — §4 forbids glowing borders and §12 forbids pulsing status. It reads as "this one", which is the whole job. */ .ui-glow { outline: 3px solid var(--brand) !important; outline-offset: 2px; border-radius: var(--radius); } /* ===================== UTILITY BAR ===================== §3: 56px, search + context + account. `.topbar` and `.topbar button` are agent targets (cb_adapter SEL) — the class name is a contract, not a description. */ /* --tb-pad and --tb-gap are declared HERE, not in :root, and they have exactly ONE reader each: this rule's own `padding` and `gap`, plus the 719px block that overrides the two properties instead of restating both declarations. That is a thin reason to keep them and it is the whole reason — two custom properties are shorter than two repeated declarations, and no :root token means no DESIGN.md §5/§6 row (`design_tokens_test.py`'s `declared_tokens()` reads all scopes, and its only DESIGN.md-facing check runs DESIGN.md -> css, never the reverse). `--tint` is the existing precedent. **THE SECOND READER IS GONE.** Until ADR-154 `.brand` was a .topbar DESCENDANT that inherited both and bound its width to them, and this block warned that an override moving `padding` without moving the property would leave the mark aligned to a column edge that had shifted. ADR-154 deleted that width, so the hazard has no victim: there is nothing left to mis-align. The warning is removed rather than left standing over a deletion it no longer describes. 20px, not 16px, and only because vagent's bar is 20px (ADR-154). */ .topbar { --tb-pad: 20px; --tb-gap: 12px; display: flex; align-items: center; gap: var(--tb-gap); height: var(--topbar-h); padding: 0 var(--tb-pad); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } /* THE MARK SITS TOP-LEFT, AT VAGENT'S GEOMETRY. Product-owner decision, 2026-09-09: "the ControlBridge logo on upper left of page should have same position and size as the logo in VAgent." Measured from that repo, read-only with permission: `#top-bar { padding: 10px 20px; display: flex; align-items: center }` and `#top-left #brand-logo { height: 24px; width: auto; display: block }`. So the mark is hard left at --tb-pad, vertically centred, 24px tall — and --tb-pad is 20px above to match, which is the only reason that number moved from 16. THIS REVERSES BACKLOG 22, DELIBERATELY. From 2026-08-30 the mark was right-justified into a box derived from --nav-w so its right edge landed on the sidebar's, and the whole of that tie is gone: no width, no justify-content, no `:has()` release for the rail and the drawer, and .brand no longer reads --nav-w at all. The three release rules that used to sit here are deleted rather than left inert, because a `:has()` rule guarding a width that is now `auto` is a rule whose absence changes nothing and whose presence says otherwise. `--nav-w` is still written to `:root` by shell.js and that is still load-bearing — for `.layout.nav-rail`'s override, not for this. The reason recorded there is now the only reason. ONE THING THE TIE WAS PAYING FOR IS ALSO GONE: the 20px height was a ceiling, not a choice, because the old 160px budget could not fit 24px (177.6px at the file's 7.4011:1). With no budget there is no ceiling, which is what made vagent's 24px adoptable without a second decision. */ /* `min-width: 0` only. The `display: flex; align-items: center; gap: 10px` that used to sit here was measured to change nothing: .brand has exactly one child, .topbar already centres its items, and the img is `display: block`. A `gap` naming a second child that does not exist is an invitation to add one. vagent's `#top-left`, which this matches, is a bare
. */ .brand { min-width: 0; } .brand-logo { height: 24px; width: auto; display: block; } /* A BUTTON WEARING A FIELD'S CLOTHES. It opens the palette; the real input is in there. `font: inherit` and `text-align: left` because a button brings the OS control font and centres its text, and neither is what the topbar wants. */ .search { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 560px; min-width: 0; height: 36px; padding: 0 8px 0 11px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; } .search:hover { border-color: var(--line-strong); background: var(--surface); } /* A real outline, never a border colour: finding #6 of the 2026-07-27 guidelines audit was `outline: none` replaced by a colour change, which is invisible to a colour-blind user and is what scripts/keyboard_check.py measures rather than trusts. `:focus-visible` and not `:focus-within` — the control is one element now, and there is nothing inside it to focus. */ .search:focus-visible { border-color: var(--brand); background: var(--surface); outline: 2px solid var(--brand); outline-offset: 1px; } .search-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The shortcut, shown because a palette nobody knows about is a palette nobody opens. Hidden below 720px, where there is no keyboard to press it with and the room is needed. */ .search-key { flex: none; font: inherit; font-size: 11px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; } .topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* ---- The account control: initials in a circle --------------- Replaced a button whose visible text was the session's ROLES ("control_owner, program_manager") and whose only action was an immediate sign-out — a destructive act one click from the corner of every page, wearing a label that named neither itself nor its consequence. Now: the person's initials, opening a menu with their profile, their settings and sign-out. The tint is HASHED from the identity so the circle is recognisable rather than decorative, and stable across reloads. `hsl` with a computed hue is the one place in this stylesheet a colour is not a token — a per-person colour cannot be, and it is deliberately low-saturation so it reads as a surface rather than a status. */ .acct-wrap { position: relative; } .acct { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: .02em; } .acct.has-user { background: hsl(var(--tint, 220deg) 42% 92%); color: hsl(var(--tint, 220deg) 45% 30%); border-color: hsl(var(--tint, 220deg) 38% 82%); } .acct:hover { color: var(--text-primary); background: var(--surface-subtle); } .acct.has-user:hover { border-color: var(--brand); } /* Not `has-user` yet: the signed-out state is the word "Sign in", which needs a box rather than a circle. */ .acct:not(.has-user) { width: auto; height: 30px; padding: 0 9px; border-radius: var(--radius); font-weight: 400; } .acct-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 224px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); display: grid; gap: 1px; } .acct-menu[hidden] { display: none; } .acct-who { margin: 0; padding: 6px 10px 0; font-size: 13px; font-weight: 700; color: var(--text-primary); } .acct-roles { margin: 0; padding: 0 10px 6px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--line); margin-bottom: 5px; } .acct-link { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text-primary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; width: 100%; } .acct-link:hover { background: var(--surface-subtle); text-decoration: none; } /* Sign out is the one destructive item, so it sits below a rule and takes the danger ink on hover — not by default, which would make the menu look like a warning every time it opened. */ .acct-out { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); margin-top: 5px; } .acct-out:hover { color: var(--danger-ink); background: var(--danger-tint); } /* An icon-only control. Every one of these carries an aria-label — §14, and there is a browser check. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; min-width: 36px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: color var(--t-fast) ease-out, border-color var(--t-fast) ease-out; } .icon-btn:hover { color: var(--brand-dark); border-color: var(--brand); } .icon-btn.quiet { border-color: transparent; background: none; } .icon-btn.quiet:hover { background: var(--surface-subtle); } /* ===================== LAYOUT ===================== Three columns whose widths are tokens, so the collapse toggle, the Copilot resize and every breakpoint move the same two numbers instead of rewriting the template. */ .layout { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--copilot-rail); height: calc(100vh - var(--topbar-h)); transition: grid-template-columns var(--t-mid) ease-out; } /* The nav's two desktop states (§8): 224px expanded, 56px rail. `nav-rail`, not `nav-collapsed`: the rail is not a collapse, it is a second legible state, and the old name went with a template that set the column to 0 and hid the navigation outright. **Two classes, one presentation.** `nav-rail` is the user's stored preference; `nav-rail-auto` is the same state forced by a viewport between 720 and 1279px, where §11 prefers the icon navigation. They are separate so the forced one can be added and removed without touching the preference (§11: shell preferences degrade, they are not overwritten) — and they share every rule below, because a rail that is 56px wide while still painting 224px of group labels is not a state, it is a bug. That was the bug: the width was in a media query and the presentation was on the class. */ .layout.nav-rail, .layout.nav-rail-auto { --nav-w: var(--nav-w-rail); } /* THE NAVIGATION'S SEPARATOR (§8, §9). The Copilot's control on the other edge, and the desktop replacement for the collapse button — see the note beside it in index.html. `position: fixed`, and the alternatives were both wrong. `.sidebar` scrolls and clips its descendants, which is why the flyout lives on ; `.layout` is a grid with no positioning context, and giving it one to hold an absolutely positioned child changes where every abspos descendant of a view resolves. Fixed at `left: var(--nav-w)` needs neither, and reads the same live property `.brand` does. The 9px hit area with a 3px visible line matches `.asst-resizer` exactly: the same gesture on the same shell should not have two sizes. `margin-left: -4px` straddles the boundary — 4px inside the sidebar, 5px outside — rather than hanging the whole 9px off one side. Not centred; 9 is odd. */ .nav-resizer { position: fixed; z-index: 21; top: var(--topbar-h); bottom: 0; left: var(--nav-w); margin-left: -4px; width: 9px; cursor: col-resize; touch-action: none; border: 0; background: none; padding: 0; } .nav-resizer::after { content: ""; position: absolute; inset: 0 auto 0 3px; width: 3px; background: transparent; transition: background var(--t-fast) ease-out; } .nav-resizer:hover::after, .nav-resizer:focus-visible::after, .nav-resizer.dragging::after { background: var(--brand); } .nav-resizer:focus-visible { outline: none; } /* NO RAIL OVERRIDE IS NEEDED HERE, and the rule that used to sit at this spot was dead. `.nav-resizer` is a DOM CHILD of `.layout`, so it inherits `.layout.nav-rail`'s `--nav-w` directly — `position: fixed` changes the containing block that `left` resolves against, not custom-property inheritance. Measured while railed: the separator's computed `--nav-w` is 56px and its `left` is 56px, with no rule of its own. `.brand` needs the `:has()` release above because it is a topbar SIBLING; this is the case that looks identical and is not. */ /* THE BUTTON IS A NARROW-WIDTH CONTROL NOW. Above 720px the separator does this and the button is gone; below it the sidebar is a modal drawer (§11) and a closed drawer cannot be dragged open, so the button is the only way in and the separator would point at nothing. */ @media (min-width: 720px) { .nav-toggle { display: none; } /* THE FIELD IS CENTRED ON THE VIEWPORT, not on whatever space was left over beside the mark. Product-owner instruction, 2026-09-09: "any visible search bar I want centered in top header not right next to logo." THIS BLOCK IS THE RIGHT HOME for the three tracks, because the rule above is WHY there are three. At these widths the toggle is `display: none`, so it generates no box and takes no track, and .topbar's in-flow children are exactly .brand, .search and .topbar-right. Below 720px the button comes back, there are four children, and the flex row .topbar declares handles them as it did before — which is why this is not a change to .topbar's base rule. A wrapper around the mark would also have worked and was not used: it would put a box in index.html whose only job is to be a grid track, and the toggle's own media query already draws exactly that boundary. */ .topbar { display: grid; } /* EQUAL SIDE TRACKS ARE THE MECHANISM; the FLOOR is what stops the mechanism eating the things beside it. `minmax(0, 1fr)` on the sides was the first attempt and it is wrong in a way only a screenshot shows. At 820px the middle track claims its full 560, leaving 98px a side — under the wordmark's 178 and under the account controls' width — and a 0 floor permits exactly that: the mark was clipped mid-word and the initials circle sat on top of the Search button. Both tests stayed green, because nothing in the suite measures overlap. `max-content` as the floor gives the honest degradation. Where there is room, both sides take an equal fr share and the field lands on the viewport's centre line, which is the requirement. Where there is not, each side floors at its own content, the tracks stop being equal, and the field goes slightly off-centre rather than through its neighbours. Off-centre at 820px is a compromise; a clipped wordmark is a defect. */ .topbar { grid-template-columns: minmax(max-content, 1fr) minmax(0, 560px) minmax(max-content, 1fr); } .search { max-width: none; width: 100%; } /* `margin-left: auto` did the pushing while this was a flex row and is now the wrong instrument — the track already ends at the bar's padding, and the auto margin on top of `justify-self` reads as two rules fighting. */ .topbar-right { margin-left: 0; justify-self: end; } } /* Copilot closed is the DEFAULT (§9) — the rail is 44px and the work area gets the rest. Open widens to the user's width. */ .layout.copilot-open { --copilot-rail: var(--copilot-w); } /* ===================== PRIMARY NAVIGATION ===================== Dark navy per §4. Structure, classes and ids are agent targets (cb_adapter SEL): `#sidebar`, `.nav-item`, `.nav-head`, `[data-view]`. REDESIGNED 2026-07-29 for progressive disclosure. The problem was not font size: every hierarchy signal was shouting at once — uppercase tracked headings, icons at both levels, every group expanded, hover underlines, chevrons, badges and selection backgrounds all competing, with roughly twenty rows visible. The fix is mostly the ACCORDION (one section open, in nav.js); the rules below stop the remaining signals fighting. Four deliberate reversals of what was here: * headings are TITLE CASE at 13px semibold, not uppercase at 12px with .08em tracking. §6 permits uppercase for "short structural labels" — permits, not requires — and its stated default is sentence case. Tracked uppercase on ten headings is the loudest thing on the page; * child rows carry NO icon in this state. §8 wants icons as "supplemental cues"; at two levels in a 224px column they stop supplementing and start competing. Indentation and a left rule carry the hierarchy instead. The icons still exist and the 56px rail still draws them — see that block below; * 44px rows, up from 36. Dense-by-default (D-22) argued for 36 when twenty rows were visible at once; with one section open the whole menu is shorter at 44 than it used to be at 36, and 44 is the target floor §14 asks for; * no hover underline. `a:hover` underlines every link in the app, and a nav row is not a document link — it was the fourth treatment competing on the same element. */ .sidebar { background: var(--nav-bg); border-right: 1px solid var(--nav-hover); overflow-y: auto; overflow-x: hidden; padding: 10px 8px; display: flex; flex-direction: column; } /* 8px between sections, not a blank row. */ .nav-group + .nav-group, .nav-group + .nav-solo, .nav-solo + .nav-group, .nav-solo + .nav-solo { margin-top: 4px; } /* A section heading and a solo destination are the SAME row shape. Home, My Work and the Agent Console are one-destination groups rendered as flat rows, and they must not look like a different species of thing from the sections above and below them. */ .nav-group > .nav-head, .nav-item.nav-solo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; background: none; border: 0; cursor: pointer; text-align: left; padding: 8px 10px; border-radius: var(--radius); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--nav-item-ink); letter-spacing: normal; text-transform: none; } .nav-head:hover, .nav-item.nav-solo:hover { color: var(--nav-text); background: var(--nav-hover); text-decoration: none; } .nav-head .lbl, .nav-item.nav-solo .lbl { flex: 1; min-width: 0; } /* One chevron, quiet, and only where there is something to open. */ .nav-head .chev { color: var(--nav-muted); flex: none; transition: transform var(--t-mid); } .nav-head .chev svg { width: 16px; height: 16px; } .nav-group:not(.collapsed) .chev { transform: rotate(90deg); } .nav-group.collapsed .nav-children { display: none; } /* The open section's children hang off a rule, which is the only thing carrying the nesting once the icons are gone. */ .nav-group:not(.collapsed) > .nav-children { margin: 2px 0 2px 21px; padding-left: 10px; border-left: 1px solid var(--nav-rule); display: grid; gap: 1px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; background: none; border: 0; cursor: pointer; text-align: left; padding: 7px 10px; border-radius: var(--radius); font-size: 14px; line-height: 20px; color: var(--nav-item-ink); } .nav-item .lbl { flex: 1; min-width: 0; } .nav-item:hover { background: var(--nav-hover); color: var(--nav-text); text-decoration: none; } /* CHILD icons are hidden in this state and restored in the rail. `font-size: 0` is not used here — an icon contributes no text, so there is nothing to keep in the accessible tree, unlike a label. */ .nav-group .nav-children .nav-item > .ico { display: none; } /* Selected: a tint and a 3px structural marker. §8 asks for "blue, text, and a structural marker" — the tint and ink are the blue, the weight is the text, the inset bar is the marker. No underline and no second background. */ .nav-item.sel { color: var(--nav-sel-ink); font-weight: 700; background: var(--nav-sel-bg); box-shadow: inset 3px 0 0 var(--brand); } /* ONE badge style, on a section and on a leaf alike: compact, low contrast, hard right. A section carries the sum of its children so a closed section still reports what is inside it. */ .nav-badge-slot { display: flex; flex: none; } .badge { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--nav-hover); color: var(--nav-link); font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .nav-item.sel .badge { background: var(--brand); color: var(--nav-text); } /* ---- The footer utilities ----------------------------------- `margin-top: auto` floats them to the bottom of the column. The Agent Console is here: the product's differentiator, kept permanently reachable and no longer presented as the application's purpose. It keeps a subtle accent — the link ink and a slightly brighter icon — and loses the card, the underline and the duplicate "ControlBridge Agent" heading above it. */ .nav-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--nav-rule); } .nav-item.nav-ext { color: var(--nav-link); font-weight: 600; } .nav-item.nav-ext:hover { background: var(--nav-hover); color: var(--nav-text); } .nav-foot .nav-item > .ico { display: flex; } /* ---- The 56px icon rail (§8) -------------------------------- Labels are hidden VISUALLY and restored on hover and keyboard focus as a flyout. `font-size: 0` rather than `display: none` on the label span: the text stays in the accessible tree and in the element's textContent, which is what cb_adapter reads to name an agent target. Collapsing the rail must not change what the agent can reach. */ .layout.nav-rail .sidebar, .layout.nav-rail-auto .sidebar { padding-inline: 6px; } .layout.nav-rail .nav-head, .layout.nav-rail-auto .nav-head { position: relative; /* A 1px rule cannot be hovered. The BOX stays 12px so the name is reachable; `background-clip: content-box` with symmetric padding paints only the middle 1px, so it still reads as a hairline. `overflow: visible` because the flyout escapes the box. */ height: 12px; margin: 8px 6px; padding: 5px 0 6px; overflow: visible; font-size: 0; background: var(--nav-rule); background-clip: content-box; } /* The heading's own icon and chevron are hidden EXPLICITLY, not by clipping. This box used to be `height: 1px; overflow: hidden`, which hid them as a side effect — so the moment it grew to 12px with `overflow: visible` so the flyout could escape, both SVGs reappeared and the rail showed two icons per group with a hairline struck through them. `font-size: 0` does not shrink an SVG that carries its own width and height, and icons/icons.test.js requires that they always do (D-21). */ .layout.nav-rail .nav-head > .ico, .layout.nav-rail-auto .nav-head > .ico { display: none; } .layout.nav-rail .nav-group.collapsed .nav-children, .layout.nav-rail-auto .nav-group.collapsed .nav-children { display: block; } /* The child icons come BACK here, and this override is the whole reason the expanded tree can drop them: the 56px rail is an icon rail (§8) and children are all it has to draw. The hide rule above is more specific than the rail block, so restoring them needs saying explicitly rather than relying on order. */ .layout.nav-rail .nav-group .nav-children .nav-item > .ico, .layout.nav-rail-auto .nav-group .nav-children .nav-item > .ico { display: flex; } .layout.nav-rail .nav-item, .layout.nav-rail-auto .nav-item { position: relative; justify-content: center; gap: 0; padding: 7px 0; font-size: 0; } .layout.nav-rail .nav-item .lbl, .layout.nav-rail-auto .nav-item .lbl { flex: none; } /* The rail's corner badge was 9px, which is the same §6 violation in the place hardest to read it. 12px fits: a two-digit count is ~14px of glyph plus 6px padding inside a 56px rail. */ .layout.nav-rail .nav-item .badge, .layout.nav-rail-auto .nav-item .badge { position: absolute; top: 0; right: 1px; min-width: 18px; padding: 0 4px; font-size: 12px; line-height: 16px; text-align: center; } /* The flyout label — §8 requires that a collapsed destination expose its full label on hover AND on keyboard focus. Headings get one too: a heading reduced to a hairline is otherwise a line between two runs of icons and which group you are in is a guess. **It is a real element on ``, not a `::after`.** The first version was a pseudo-element positioned at `left: calc(100% + 8px)`, and it never appeared once: the `.sidebar` scrolls, so it carries `overflow-x: hidden`, and a scroll container clips its descendants no matter how they are positioned. `overflow-x: visible` is not available either — a box with `overflow-y: auto` computes the other axis to `auto` as well. So `shell.js` positions one fixed element outside the clip, which also keeps the label attached while the rail scrolls. Text is set with `textContent`, so the nav's own labels cannot become markup. */ .nav-flyout { position: fixed; z-index: 900; width: max-content; max-width: 220px; padding: 7px 9px; border: 1px solid var(--nav-rule); border-radius: var(--radius); color: var(--nav-text); background: var(--nav-bg); box-shadow: var(--shadow-overlay); font-size: 12px; font-weight: 600; line-height: 1.3; pointer-events: none; opacity: 0; transform: translate(4px, -50%); transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out; } .nav-flyout.on { opacity: 1; transform: translate(0, -50%); } /* ===================== WORK AREA ===================== */ .main { overflow-y: auto; padding: 16px var(--gutter) 40px; min-width: 0; } .breadcrumb { color: var(--text-secondary); font-size: 12px; margin-bottom: 8px; } .breadcrumb b { color: var(--text-primary); font-weight: 600; } /* ---- Page head (§3's hierarchy) ----------------------------- Title, one-sentence state, and the primary action on the same line. The action belongs HERE and not at the end of the page: §2 puts the next action near the task. */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; } .page-head-text { min-width: 0; } .page-head h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; } .page-head p { margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; } .page-head-actions { display: flex; gap: 8px; flex: none; } .page-head-actions:empty { display: none; } /* A section inside a page. §6: 16px/24px, 700 — a heading that does not compete with the page title for the working space. */ .section { margin: 24px 0 0; } .section > h2 { margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 700; } .section > p.section-sub { margin: -4px 0 10px; color: var(--text-secondary); font-size: 13px; } /* A short structural label. §6 limits uppercase to 12px with letter spacing, and this is the only place it is used. */ .section-label { margin: 16px 0 6px; color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* ===================== OPERATIONAL SUMMARY ===================== §3: a compact strip of four or five cells, not a mosaic of floating cards. One bordered surface, hairline-divided; every value drills into the records behind it, so each cell is a real . */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin: 0 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; } .metric { display: block; padding: 10px 13px; border-right: 1px solid var(--line); color: inherit; text-decoration: none; } .metric:last-child { border-right: 0; } a.metric:hover { background: var(--surface-subtle); text-decoration: none; } a.metric:hover .metric-v { color: var(--brand-dark); } .metric-v { display: block; font-size: 18px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; } .metric-l { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12px; } .metric.attention .metric-v { color: var(--warn-ink); } .metric.problem .metric-v { color: var(--danger-ink); } /* ===================== QUEUE-DETAIL WORKSPACE ===================== §3: queue ~40%, detail ~60%, minimum 320px and 520px. One bordered surface with an internal divider rather than two floating panels — the selection has to stay visible while the detail is read, and two cards with a gap between them read as two pages. */ .workspace { display: grid; grid-template-columns: minmax(320px, .4fr) minmax(520px, .6fr); align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; } /* The mirror ratio, for Document Intelligence review (§10): results lead, source supports. Same primitive, opposite weighting — check which surface you are building. */ .workspace.mirrored { grid-template-columns: minmax(520px, .6fr) minmax(320px, .4fr); } /* Three panes, for account mapping (§ "Three-pane mapping workspace"). 40/35/25 — Original's ResizablePanelGroup ratio as a plain grid, because the ratio reflects how much text each pane carries and was never a thing a reader needed to drag. Below 1100px they stack, register first: it is the only one of the three that is useful on its own. */ .workspace.triptych { grid-template-columns: minmax(380px, .40fr) minmax(300px, .35fr) minmax(260px, .25fr); } @media (max-width: 1100px) { .workspace.triptych { grid-template-columns: 1fr; } .workspace.triptych .pane.queue-pane { border-right: 0; border-bottom: 1px solid var(--line); } } /* The register row: identifier, then name over its type and the two claims, then the figure. The sub-lines are blocks so the name keeps the column's full width — five columns in a 40% pane is what broke "Accounts Receivable" into four lines. */ .acct-name { display: block; font-weight: 600; } .acct-claims { display: block; } .workspace.triptych .tbl td { vertical-align: top; } .workspace.triptych .tbl .num { white-space: nowrap; } .pick { display: flex; align-items: center; gap: 8px; } .bucket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* `h2` joins the list because the heading LEVEL is decided by where the panel sits, not by how it looks: the reconciliations groups facet renders its definition panel as the subject of the page, so its heading is an

and the groups section's

follows it at the same level. Selecting by tag and omitting one level meant that panel silently lost the `margin: 0` this component depends on. */ .bucket-head h2, .bucket-head h3, .bucket-head h4 { margin: 0; } .fsli-statement { margin: 4px 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); } .fsli-total { font-weight: 600; margin: 4px 0; } /* The tie-out, inside a statement-line card. Three figures on one row and a sentence beneath: the sentence is load-bearing, because a mis-signed line shows a difference of ZERO and the words are all that distinguish it from a clean row. */ .tie-out { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .tie-note { margin: 6px 0 0; font-size: 13px; } .setline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .pane { min-width: 0; display: flex; flex-direction: column; } .pane.queue-pane { border-right: 1px solid var(--line); } .pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 13px; background: var(--surface-subtle); border-bottom: 1px solid var(--line); } /* 16/24 — §6's section-title role, the same as `.section > h2`. At 14/20 the app had two sizes of section heading depending on which primitive drew it, which is a scale with a hole in it rather than a smaller heading. */ .pane-head h2, .pane-head h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; } .pane-body { min-width: 0; padding: 14px 16px; overflow-wrap: anywhere; } .pane-body.flush { padding: 0; } /* ---- One queue row (§3) ------------------------------------ Reading order is fixed by the contract: action-oriented title, identifier, due state or severity in words, reason, next action. A