/*
Product layout over Nocturne.
A NOTE ON THE `HC …dc.html` CITATIONS BELOW.
SOVERNCOMMAND-MEMBER-PRODUCT-COMPLETION-1 §4 removed every predecessor
product name from this stylesheet. The remaining `HC Command Center.dc.html`
and "Command Center design overview (5).zip" references are FILENAMES of the
frozen design artifacts this stylesheet implements — real files, under those
exact names. They cite a document, never this product.
Every colour, space, radius and shadow below comes from a Nocturne token
(readme.md: "Never hard-code a hex, a font name or a px value the tokens
already carry"). What is defined here is layout and composition — the things a
design system does not carry — and nothing else. There is no second design
language and no substituted component library.
── HC-DESK-REBUILD-1 ────────────────────────────────────────────────────────
Composition rebuilt from the verified design authority
("Command Center design overview (5).zip",
sha256 7bfea358e39486b60cb94e53af83ef2e78b749da6fcc74f99b1710b8d3ac930d).
The measures below are the authority's own, read off its markup rather than
eyeballed from a screenshot:
shell `max-width:1400px;margin:0 auto;padding:38px 32px 140px`
— HC Command Center.dc.html, the screen wrapper
header inner `max-width:1400px;margin:0 auto;padding:8px 32px;min-height:58px`
main grid `minmax(0,1fr) 330px` (mainCols, rail composition)
decision hero `minmax(0,1fr) 250px` (hero sub-grid)
decision cards `repeat(2,minmax(0,1fr))` (cardCols at 2+)
signals `repeat(3,minmax(0,1fr))` (signalsCols, no rail)
areas `repeat(auto-fit,minmax(190px,1fr))` (areaCols band)
conversations `248px minmax(0,1fr)` (+ `300px` inspector drawer)
first run `max-width:1100px`, `190px minmax(0,1fr)`
rail collapse under 1100px, per the layout-rule matrix's last row
THE BINDING RULE OF THIS FILE — SUPERSEDED IN ITS FIRST CLAUSE by
SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 1. It is the first
paragraph a reader of this stylesheet meets, and it said, in the present
tense, that Command has a composition the owner removed. Verbatim:
| THE BINDING RULE OF THIS FILE. At desktop widths the composition is
| structural. `.cmd-main` is a two-column grid and `.cmd-bands` is a
| multi-column band whether or not the account has data for every module.
WHAT IS TRUE NOW. `.cmd-main` is NO LONGER a two-column grid — it is
`display: block`, one track, at every width, and the 330px rail track it
held is gone (owner ruling 1: "Command is a focused owner-intelligence
surface, not a dashboard with a utility sidebar"). The rest of the rule
stands and is unchanged: `.cmd-bands` is still a multi-column band whether
or not the account has data for every module, a module with nothing in it
paints its honest empty/unavailable/setup state IN PLACE and keeps its
cell, and nothing here caps a module at a reading measure — the previous
build's `max-width: 82ch` on every module is what produced a ~740px column
beside dead canvas, and it is gone. Prose inside a module still wraps at a
reading measure (`.prose`, ~76ch, the authority's own treatment), because
capping a PARAGRAPH is typography and capping a MODULE is a collapsed layout.
The `main grid` row in the authority table above reads the AUTHORITY
DOCUMENT, not this stylesheet, and is accurate as a reading of it; what
this file does with that value is the ruling above.
*/
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 15.5px;
-webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The main region is focused programmatically after every route change so a
screen reader lands on the new content. That is a move, not an interaction,
so it must not paint a focus ring around the whole page. */
.main:focus, .main:focus-visible { outline: none; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
/* ------------------------------------------------------------------ boot */
.boot {
position: fixed; inset: 0; display: grid; place-items: center;
background: var(--color-bg); z-index: 10;
}
.boot[hidden] { display: none; }
/*
The boot and login brand slot. Both sit on `.boot`, whose background is
`var(--color-bg)` — it follows the global theme rather than fixing its own
polarity — so the same theme token is the correct authority here as in the
header, at the larger size these surfaces already gave the wordmark.
*/
.boot-mark {
height: 44px;
aspect-ratio: 2172 / 724;
margin: 0 auto var(--space-3);
background-image: var(--brand-logo);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.boot-message { color: var(--color-neutral-500); font-size: 14.5px; max-width: 46ch; }
.boot-message.error { color: var(--color-danger, var(--color-accent-300)); }
/* ---------------------------------------------------------------- shell */
/* ===================================================================== */
/* SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1 — THE NAVIGATION RAIL: TOKENS */
/* */
/* Authority: design/snapshots/command-shell-2026-10-06/SPEC.md (canvas */
/* 1791053051-0235, drift NONE) and design/snapshots/societi-2026-10-06/ */
/* SPEC.md (canvas 1791053029-6948). Measured off the published boards, */
/* not proposed. The rail's own rules are further down the file, BELOW */
/* `.topbar` and `.navlink`, and that position is load-bearing — see the */
/* ordering note there. */
/* */
/* RULING 1 — THE DARK RAIL DIVIDER IS #1E1E22. Carried below as a */
/* LITERAL in the dark polarity, because the boards carry a literal in */
/* all six of their dark boards. It is ONE TOKEN WITH TWO VALUES, never */
/* one shared value: the six light boards contain #1E1E22 exactly zero */
/* times, so the divider is theme-SUBSTITUTED rather than reused. */
/* ===================================================================== */
:root {
--shell-nav-full: 264px;
--shell-nav-compact: 64px;
--shell-nav-pad: 12px;
/*
The DRAWER panel is its own width, measured off `PhoneMenu.dc.html`: 312px,
not the full rail's 264px. The board gives the open menu more of the phone
than the desktop rail takes of a desktop, which is the right trade — on a
390px screen the panel IS the screen for as long as it is open.
*/
--shell-nav-drawer: 312px;
/*
The width the rail actually occupies IN THE FLOW. Every consumer reads
this one custom property, so a tier change is one declaration instead of
one override per consumer — and at the drawer tier, where the rail is
position-fixed and takes no flow space at all, setting this to 0 corrects
the body AND the viewport-fixed composer host together.
*/
--shell-nav-w: var(--shell-nav-full);
/* RULING 1 — dark. */
--shell-nav-line: #1E1E22;
--shell-nav-ground: #0B0B0C;
/*
The Societi protocol marker. The ONE hue the boards hold identical across
both themes — "the one element whose identity outranks the theme" — so it
is declared once, here, and is deliberately NOT redeclared in either light
block below. That absence is the specification, not an omission.
*/
--shell-protocol: #F25CC6;
}
/*
RULING 1 — light. The same token, its other value. Both canvases already
agree on #E1E1EA, so this introduces no new colour. The guard matches
nocturne.css's own system-preference pattern exactly, so an explicit member
choice still wins over the OS.
*/
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme="light"]) {
--shell-nav-line: #E1E1EA;
--shell-nav-ground: #EFEFF4;
}
}
[data-theme="light"] {
--shell-nav-line: #E1E1EA;
--shell-nav-ground: #EFEFF4;
}
/* ===================================================================== */
/* SOVERNCOMMAND-COMMAND-VISUAL-SYSTEM-1 — THE VISUAL SYSTEM */
/* */
/* Authority: design/snapshots/command-shell-2026-10-06/SPEC.md, canvas */
/* 1791053051-0235, and the 13 `project/` board files of that version, */
/* each verified byte-identical to the snapshot's own MANIFEST.sha256 */
/* before a value was read off it. Every literal below appears in a */
/* governing board. Nothing here was chosen. */
/* */
/* WHY THIS BLOCK EXISTS, IN THE OWNER'S OWN WORDS. */
/* */
/* The shell rebuild above this comment moved THREE tokens — */
/* `--shell-nav-line`, `--shell-nav-ground`, `--shell-protocol` — all of */
/* them scoped to the rail. The design authority had been read correctly */
/* and the VISUAL SYSTEM was never implemented: the page the rail stood */
/* beside kept a #121320 navy ground, a #9184d9 blurple accent, a #232532 */
/* panel and Inter, none of which appears anywhere on any of the twelve */
/* boards. Measured before this block was written, Command at 1440 scored */
/* 26 of 122 visual-system assertions, with ink at 0/16 and surface at */
/* 0/6 — see docs/command-visual-system/00-DELIVERY-PROOF.md. */
/* */
/* failure class: A_DESIGN_AUTHORITY_READ_BUT_VISUAL_SYSTEM_NOT_IMPLEMENTED */
/* */
/* LEGACY STYLING IS NOT DESIGN AUTHORITY. A value survives below only */
/* where a governing board explicitly shows it. The structural shell */
/* being correct bought the rail nothing here. */
/* */
/* ONE SYSTEM, TWO CALIBRATIONS — NEVER ONE SHARED VALUE. The canvas's */
/* own thesis is "dark and light are one system": same markup, same */
/* structure, substituted palette. So every token below is declared */
/* TWICE, once per polarity, and the dark literals appear zero times in */
/* the light blocks. The sole exception is `--shell-protocol` (#F25CC6), */
/* declared once above and deliberately NOT redeclared — the boards hold */
/* it identical across both themes, "the one element whose identity */
/* outranks the theme". That absence is the specification. */
/* ===================================================================== */
:root {
/* ---- GROUNDS, by major region ---- */
--vs-ground: #111113; /* page ground */
--vs-rail-ground: #0B0B0C; /* rail ground — see --shell-nav-ground */
/* ---- SURFACES / PANELS ---- */
--vs-panel: #18181B; /* card fill, composer fill, active nav fill */
--vs-track: #1F1F23; /* progress track, monogram ground */
/* ---- INK HIERARCHY — three steps, and the boards use exactly three ---- */
--vs-ink: #EDEDEF; /* primary text */
--vs-ink-body: #CFCFD6; /* body copy — the brief's own rows */
--vs-ink-muted: #9A9AA2; /* muted / secondary */
/*
---- LINE SYSTEM ----
Three line values, and they are NOT interchangeable: the boards step them
deliberately ("dark carries depth with border steps"). Held as ROLE tokens
rather than forced onto one ramp, because the roles invert between themes —
dark's composer border is DIMMER than its card border while light's is
DARKER than its card border. A single ramp cannot carry that and stay true.
*/
--vs-line-card: #34343A; /* judgment card */
--vs-line-composer: #2E2E33; /* composer panel */
--vs-line-hairline: #27272B; /* rules, bordered controls, New command */
/*
The same three, ranked strongest -> weakest for the generic ramp below.
Dark recedes toward #111113, so strongest is lightest.
*/
--vs-line-1: #34343A;
--vs-line-2: #2E2E33;
--vs-line-3: #27272B;
/* ---- PRIMARY ACCENT ---- the orb's inner circle and the Send fill, and
nothing else. It is a colour lever on the canvas, not a brand constant. */
--vs-accent: #83CAF6;
--vs-accent-ink: #0B0B0C; /* ink ON the accent */
--vs-accent-2: #8F85D3; /* the canvas's declared second option */
/*
---- THE INVERTED PAIR ---- the boards' secondary accent is not a hue at
all: it is INVERSION. The primary action and the count pill take the ink
colour as a fill and the rail ground as ink, which is why they read as the
loudest thing on the page without introducing a third colour.
*/
--vs-invert-fill: #EDEDEF;
--vs-invert-ink: #0B0B0C;
/* ---- ELEVATION ---- "Dark uses box-shadow: none throughout and separates
by fill and border alone." Shadow is a LIGHT-theme device on this canvas. */
--vs-elevation: none;
/* ---- TYPE ---- the board's own stack, verbatim, fallbacks included. */
--vs-font: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
/* ---- RADIUS ---- every value below is read off a board element. */
--vs-radius-row: 8px; /* surface rows, Search */
--vs-radius-control: 10px; /* New command, primary action, 44px buttons */
--vs-radius-collapsed: 12px; /* the collapsed queue tail */
--vs-radius-card: 14px; /* the judgment card */
--vs-radius-composer: 16px; /* the composer panel */
/*
---- MEASURE ---- SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 1.
The boards' own numbers, read off `Main.dc.html` and `MainLight.dc.html`
(version 1791053051-0235, both verified against the banked MANIFEST):
…
composer
Two things are specified there and both are adopted here. The column is
760px, centred in the space the rail leaves — NOT the shell's own measure.
And the composer is the SECOND CHILD OF THE SAME COLUMN, at the same width,
with 28px beneath it: it is part of the composition, not a bar laid over it.
THE MEASURE-760 CONFLICT IS CLOSED, IN THE BOARD'S FAVOUR. The shell
rebuild declared it rather than diverging silently, and the visual-system
unit carried it forward; the owner has now ruled. Command is a focused
owner-intelligence surface, so the two-track `.cmd-main` composition and
the right-hand Projects panel it carried are gone from this screen —
Projects has its first-class home in the rail and Command does not
duplicate it. `.main` is untouched and still the 1400px SHELL, which is a
different ruling about a different box and is the same relationship the
board draws between its own `main` and the column inside it.
*/
--vs-measure-command: 760px; /* the focused column, and the composer in it */
--vs-gap-below-composer: 28px; /* the board's own padding beneath it */
}
/* The other calibration. Same tokens, other values — see the ruling-1 pattern
established for the divider immediately above, which this mirrors exactly. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme="light"]) {
--vs-ground: #F7F7FA;
--vs-rail-ground: #EFEFF4;
--vs-panel: #FFFFFF;
--vs-track: #E4E4EC;
--vs-ink: #17171C;
--vs-ink-body: #30303A;
--vs-ink-muted: #5C5C69;
--vs-line-card: #D6D6E0;
--vs-line-composer: #CFCFDB;
--vs-line-hairline: #DDDDE6;
/* Light recedes toward #F7F7FA, so strongest is DARKEST — the rank is
preserved, the direction is not. */
--vs-line-1: #CFCFDB;
--vs-line-2: #D6D6E0;
--vs-line-3: #DDDDE6;
--vs-accent: #2B7FD9;
--vs-accent-ink: #FFFFFF;
--vs-accent-2: #6A5FC9;
--vs-invert-fill: #17171C;
--vs-invert-ink: #FFFFFF;
--vs-elevation: 0 1px 2px rgba(23,23,40,0.05), 0 8px 24px rgba(23,23,40,0.05);
}
}
[data-theme="light"] {
--vs-ground: #F7F7FA;
--vs-rail-ground: #EFEFF4;
--vs-panel: #FFFFFF;
--vs-track: #E4E4EC;
--vs-ink: #17171C;
--vs-ink-body: #30303A;
--vs-ink-muted: #5C5C69;
--vs-line-card: #D6D6E0;
--vs-line-composer: #CFCFDB;
--vs-line-hairline: #DDDDE6;
--vs-line-1: #CFCFDB;
--vs-line-2: #D6D6E0;
--vs-line-3: #DDDDE6;
--vs-accent: #2B7FD9;
--vs-accent-ink: #FFFFFF;
--vs-accent-2: #6A5FC9;
--vs-invert-fill: #17171C;
--vs-invert-ink: #FFFFFF;
--vs-elevation: 0 1px 2px rgba(23,23,40,0.05), 0 8px 24px rgba(23,23,40,0.05);
}
/* ===================================================================== */
/* THE REBIND — where the system actually reaches the page. */
/* */
/* The product's semantic tokens are not replaced, they are RE-SOURCED: */
/* every one of them now resolves to a board value. That is deliberate */
/* and it is the whole mechanism — several hundred existing rules across */
/* this file already read `--color-text`, `--color-neutral-N`, */
/* `--color-surface` and `--color-accent`, so re-sourcing the tokens */
/* carries the system into all of them at once instead of leaving the */
/* content behind again. The ramp keeps its step numbers as a RANK, which */
/* is the contract nocturne.css already documents for it. */
/* */
/* THE SELECTOR LIST IS LOAD-BEARING, NOT DECORATION. nocturne.css */
/* redeclares these same names inside `[data-theme="light"]` at (0,1,0), */
/* which beats a bare `:root` here however late this file loads. The */
/* themed selectors below carry (0,2,0) and the media-query copy matches */
/* nocturne's own selector and wins on order. Drop either and the light */
/* theme silently keeps the legacy palette while dark looks correct — */
/* which is a failure mode worth naming, because the render would look */
/* right in exactly the theme most people check first. */
/* ===================================================================== */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
--color-bg: var(--vs-ground);
--color-surface: var(--vs-panel);
--color-text: var(--vs-ink);
--color-accent: var(--vs-accent);
--color-accent-2: var(--vs-accent-2);
--color-divider: var(--vs-line-3);
/*
The neutral ramp, anchored on the boards' three inks and three lines.
The intermediate steps are the only derived values in this block, and they
are derived rather than picked: each is a 50% mix of the two board anchors
it sits between, so no step can drift away from the system it interpolates.
*/
--color-neutral-100: var(--vs-ink);
--color-neutral-200: color-mix(in srgb, var(--vs-ink) 50%, var(--vs-ink-body));
--color-neutral-300: var(--vs-ink-body);
--color-neutral-400: color-mix(in srgb, var(--vs-ink-body) 50%, var(--vs-ink-muted));
/*
500 and 600 are the SAME value on purpose. The boards carry exactly one
muted ink and spend it on both secondary text and captions; splitting it
here would invent a distinction the authority does not draw.
*/
--color-neutral-500: var(--vs-ink-muted);
--color-neutral-600: var(--vs-ink-muted);
--color-neutral-700: var(--vs-line-1);
--color-neutral-800: var(--vs-line-2);
--color-neutral-900: var(--vs-line-3);
/*
The accent ramp is a FUNCTION of two board values — the accent and the
ground it sits on — so every step is traceable and none is invented. The
boards draw the accent as a solid fill only; these steps exist for the
call sites this file already has, not because the canvas asked for a ramp.
*/
--color-accent-100: color-mix(in srgb, var(--vs-accent) 25%, var(--vs-ink));
--color-accent-200: color-mix(in srgb, var(--vs-accent) 50%, var(--vs-ink));
--color-accent-300: color-mix(in srgb, var(--vs-accent) 75%, var(--vs-ink));
--color-accent-400: color-mix(in srgb, var(--vs-accent) 90%, var(--vs-ink));
--color-accent-500: var(--vs-accent);
--color-accent-600: color-mix(in srgb, var(--vs-accent) 80%, var(--vs-ground));
--color-accent-700: color-mix(in srgb, var(--vs-accent) 60%, var(--vs-ground));
--color-accent-800: color-mix(in srgb, var(--vs-accent) 40%, var(--vs-ground));
--color-accent-900: color-mix(in srgb, var(--vs-accent) 22%, var(--vs-ground));
--color-accent-2-100: color-mix(in srgb, var(--vs-accent-2) 25%, var(--vs-ink));
--color-accent-2-200: color-mix(in srgb, var(--vs-accent-2) 50%, var(--vs-ink));
--color-accent-2-300: color-mix(in srgb, var(--vs-accent-2) 75%, var(--vs-ink));
--color-accent-2-400: color-mix(in srgb, var(--vs-accent-2) 90%, var(--vs-ink));
--color-accent-2-500: var(--vs-accent-2);
--color-accent-2-600: color-mix(in srgb, var(--vs-accent-2) 80%, var(--vs-ground));
--color-accent-2-700: color-mix(in srgb, var(--vs-accent-2) 60%, var(--vs-ground));
--color-accent-2-800: color-mix(in srgb, var(--vs-accent-2) 40%, var(--vs-ground));
--color-accent-2-900: color-mix(in srgb, var(--vs-accent-2) 22%, var(--vs-ground));
/* Semantic layer. */
--surface-raised: var(--vs-panel);
--surface-hover: color-mix(in srgb, var(--vs-ink) 6%, transparent);
/* The boards' selected state is the PANEL FILL, flat — not an accent tint.
The active Command row is #18181B dark / #FFFFFF light, which is the same
value the card and the composer take. One surface colour, three uses. */
--surface-selected: var(--vs-panel);
--border-subtle: var(--vs-line-3);
--border-strong: var(--vs-line-1);
--text-primary: var(--vs-ink);
--text-secondary: var(--vs-ink-body);
--text-muted: var(--vs-ink-muted);
--accent-hover: color-mix(in srgb, var(--vs-accent) 85%, var(--vs-ink));
--accent-subtle: color-mix(in srgb, var(--vs-accent) 14%, transparent);
--focus-ring: var(--vs-accent);
--accent-contrast: var(--vs-accent-ink);
/* Type — the board's stack, and its heading weight. */
--font-heading: var(--vs-font);
--font-body: var(--vs-font);
--font-heading-weight: 600;
/* Radius — the boards' own three, in the ramp's existing three slots. */
--radius-sm: var(--vs-radius-row);
--radius-md: var(--vs-radius-control);
--radius-lg: var(--vs-radius-card);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme="light"]) {
--color-bg: var(--vs-ground);
--color-surface: var(--vs-panel);
--color-text: var(--vs-ink);
--color-accent: var(--vs-accent);
--color-accent-2: var(--vs-accent-2);
--color-divider: var(--vs-line-3);
--color-neutral-100: var(--vs-ink);
--color-neutral-200: color-mix(in srgb, var(--vs-ink) 50%, var(--vs-ink-body));
--color-neutral-300: var(--vs-ink-body);
--color-neutral-400: color-mix(in srgb, var(--vs-ink-body) 50%, var(--vs-ink-muted));
--color-neutral-500: var(--vs-ink-muted);
--color-neutral-600: var(--vs-ink-muted);
--color-neutral-700: var(--vs-line-1);
--color-neutral-800: var(--vs-line-2);
--color-neutral-900: var(--vs-line-3);
--color-accent-100: color-mix(in srgb, var(--vs-accent) 25%, var(--vs-ink));
--color-accent-200: color-mix(in srgb, var(--vs-accent) 50%, var(--vs-ink));
--color-accent-300: color-mix(in srgb, var(--vs-accent) 75%, var(--vs-ink));
--color-accent-400: color-mix(in srgb, var(--vs-accent) 90%, var(--vs-ink));
--color-accent-500: var(--vs-accent);
--color-accent-600: color-mix(in srgb, var(--vs-accent) 80%, var(--vs-ground));
--color-accent-700: color-mix(in srgb, var(--vs-accent) 60%, var(--vs-ground));
--color-accent-800: color-mix(in srgb, var(--vs-accent) 40%, var(--vs-ground));
--color-accent-900: color-mix(in srgb, var(--vs-accent) 22%, var(--vs-ground));
--color-accent-2-100: color-mix(in srgb, var(--vs-accent-2) 25%, var(--vs-ink));
--color-accent-2-200: color-mix(in srgb, var(--vs-accent-2) 50%, var(--vs-ink));
--color-accent-2-300: color-mix(in srgb, var(--vs-accent-2) 75%, var(--vs-ink));
--color-accent-2-400: color-mix(in srgb, var(--vs-accent-2) 90%, var(--vs-ink));
--color-accent-2-500: var(--vs-accent-2);
--color-accent-2-600: color-mix(in srgb, var(--vs-accent-2) 80%, var(--vs-ground));
--color-accent-2-700: color-mix(in srgb, var(--vs-accent-2) 60%, var(--vs-ground));
--color-accent-2-800: color-mix(in srgb, var(--vs-accent-2) 40%, var(--vs-ground));
--color-accent-2-900: color-mix(in srgb, var(--vs-accent-2) 22%, var(--vs-ground));
--surface-raised: var(--vs-panel);
--surface-hover: color-mix(in srgb, var(--vs-ink) 6%, transparent);
--surface-selected: var(--vs-panel);
--border-subtle: var(--vs-line-3);
--border-strong: var(--vs-line-1);
--text-primary: var(--vs-ink);
--text-secondary: var(--vs-ink-body);
--text-muted: var(--vs-ink-muted);
--accent-hover: color-mix(in srgb, var(--vs-accent) 85%, var(--vs-ink));
--accent-subtle: color-mix(in srgb, var(--vs-accent) 14%, transparent);
--focus-ring: var(--vs-accent);
--accent-contrast: var(--vs-accent-ink);
--font-heading: var(--vs-font);
--font-body: var(--vs-font);
--font-heading-weight: 600;
--radius-sm: var(--vs-radius-row);
--radius-md: var(--vs-radius-control);
--radius-lg: var(--vs-radius-card);
}
}
/*
THE GROUND IS THE PAGE'S, NOT A COMPONENT'S. `body` already reads
`--color-bg`; this states the board's own relationship explicitly so the
rail has something to be a rail AGAINST — "#0B0B0C against a #111113 page".
Societi keeps its own ground (`--w-ground`, further down this file) because
it is governed by a different canvas, and that override is deliberately left
standing.
*/
body {
background: var(--vs-ground);
color: var(--vs-ink);
font-family: var(--vs-font);
}
/*
THE SHELL IS THE RAIL BESIDE THE BODY, NOT A STACK. `.app` was a column —
header above main — because navigation was a top bar. The governing boards
draw rail + main column with nothing above them, so `.app` is a row and the
page's own vertical stack moved into `.shell-body`.
*/
.app { display: flex; min-height: 100vh; }
.app[hidden] { display: none; }
.shell-body {
display: flex; flex-direction: column;
flex: 1 1 auto; min-width: 0; min-height: 100vh;
}
/*
SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1 — generates NO BOX by default, so
`main` and the legal footer remain direct layout children of `.shell-body`
and every route outside Command's one-screen frame lays out exactly as it did
before this wrapper existed. It becomes a real scrolling box only under
`.is-framed`, far below.
*/
.shell-scroll { display: contents; }
/* The bar is full-bleed so its rule spans the viewport; its contents sit on the
same centred 1400px measure as `.main`. Authority: the header's inner wrapper
is `max-width:1400px;margin:0 auto;padding:8px 32px;min-height:58px`. */
.topbar {
/*
§12 — three groups, not two clusters floating apart. `space-between` put the
destinations in the middle of the bar, equidistant from the brand and the
account controls, so they belonged to neither. The brand and the primary
navigation now sit ADJACENT at one deliberate interval, and the utilities
are pushed to the far edge by the nav's own auto margin.
*/
/*
SUPERSEDED IN PLACE — SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1, owner ruling.
This bar was the primary navigation and was `display: flex` at every
width. The governing boards draw NO top bar on desktop at all — rail plus
main column, nothing above them — and a header on phone only. So the bar
is `display: none` here and is turned back on, as `flex`, inside the
drawer breakpoint and nowhere else.
EVERYTHING THIS BAR'S OWN STANDING RULINGS FIXED IS UNTOUCHED, and is held
by the same gates as before: the box arithmetic below, the identity slot
holding the mark alone, the member and their utilities as one right-hand
group, and `justify-content` never becoming `space-between`. What changed
is the widths at which the bar is drawn, and what stands where the
destinations were — `#navToggle`, the one control that opens the rail at
the one width the rail is not already on screen.
*/
display: none; align-items: center; justify-content: flex-start;
gap: 0;
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §2 — the header opens to
carry the mark at an authoritative size. 58px was sized to the 22px
avatar that used to be the tallest thing in the row; the owner's ruling
is that the resulting wordmark is TOO SMALL, and the masters' own ~30%
transparent padding means the CSS box has to grow by more than the ink
is meant to. 68px with 12px padding gives a 44px content box, which
`.brand` fills exactly. The bottom rule moves from neutral-900 (all but
invisible on the light theme) to neutral-800, so the chrome actually
reads as a distinct band rather than as the page bleeding upward.
*/
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-2 §1 — OWNER REJECTION of the
previous scale ("still too timid"). Tuned against the DECOMPOSED artwork,
not a box number:
dark master ink 1800 x 473 · SYMBOL 374 x 473 · wordmark 1327 x 153
light master ink 1910 x 508 · SYMBOL 404 x 508 · wordmark 1409 x 168
The symbol occupies the FULL ink height in both masters, so symbol height
and lockup height are the same measurement — and the lockup's own ink ratio
is 3.805:1 (dark) / 3.760:1 (light).
THE TWO OWNER TARGETS CANNOT BOTH BE MET, and the artwork is why: a
145–165px lockup at a 34–38px symbol implies a ratio between 3.82:1 and
4.85:1, and this lockup is 3.80:1 — just outside it. A 58px box is the
closest simultaneous fit: symbol 37.9px (inside 34–38) with a 144.2px
lockup (0.8px under 145) on the dark master, and 153.0px lockup on the
light. The ~7% difference between the two masters is the owner's own
artwork variance, recorded in the brand lane and still not normalised —
the BOX is identical in both polarities, which is what holds header height
fixed across a theme change.
76px with 9px padding gives exactly the 58px content box the mark fills.
*/
min-height: 76px;
padding: 9px max(32px, calc((100% - 1400px) / 2 + 32px));
border-bottom: 1px solid var(--color-neutral-800);
position: sticky; top: 0; z-index: 5;
background: color-mix(in srgb, var(--color-bg) 93%, transparent);
backdrop-filter: blur(14px);
}
/* The mark, alone. Nothing shares this slot. */
.topbar-identity { display: flex; align-items: center; min-width: 0; }
/*
THE BRAND SLOT — the owner-supplied SOVERN wordmark, and nothing beside it.
It replaces two placeholders: the generated gradient tile that stood in for a
mark, and the typeset word that stood in for a wordmark. The supplied artwork
IS the wordmark, so no text is composed next to it and no suffix is appended;
"SovernCommand" remains the product's TEXT name, in and in copy.
Artwork comes from --brand-logo, a theme token (nocturne.css), so this rule
never asks which theme is active — it asks the design system for the artwork
belonging to whatever polarity is painting this surface, and a theme switch
repaints it with no script, no reload and no second source of truth.
GEOMETRY — SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §2, tuned against
VISIBLE INK rather than the box. The masters are 2172x724 with substantial
transparent padding: the dark master's ink is 1800x473 (65.3% of canvas
height), the light master's 1910x508 (70.2%). At the previous 28px box the
wordmark rendered ~18.3px of actual ink — mechanically safe, and the size
the owner has now rejected by eye. At 44px it renders ~28.7px (dark) /
~30.9px (light): the same artwork, the same ratio, roughly 1.6x the visible
presence, and still 4px inside the header's own 44px content box so the bar
cannot be pushed open. The ~2px ink difference between the two masters is
the owner's own artwork variance and is deliberately not normalised — the
BOX is identical in both polarities, which is what keeps header height
fixed across a theme change.
`aspect-ratio` is the master's own 2172:724, and `contain` refuses to crop
or stretch even if that ratio is ever wrong.
*/
.brand {
display: block;
height: 58px;
aspect-ratio: 2172 / 724;
flex-shrink: 0;
background-image: var(--brand-logo);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
/* A real initial from the member's own written name — hidden entirely
rather than shown as a placeholder glyph when no profile name exists. */
.member-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
background: var(--color-neutral-800); color: var(--color-neutral-200);
font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}
.member-avatar[hidden] { display: none; }
.sep {
width: 1px; height: 22px; background: var(--color-neutral-800);
align-self: center; margin: 0 var(--space-3);
}
.sep[hidden] { display: none; }
.workspace { font-size: 14.5px; color: var(--color-neutral-300); }
.collaborator { font-size: 14.5px; color: var(--color-neutral-500); }
/* The identity block stacks name over role, matching the approved
reference's two-line identity chip, rather than one baseline-aligned
run of text. `#memberIntent` is already omitted (empty) when the real
profile carries no role, which collapses this to one line honestly. */
.member-block { display: flex; flex-direction: column; justify-content: center; line-height: 1.3; gap: 1px; }
/* The contextual action/utility row — Theme and Sign out are account-level
controls, not destinations, so they read as their own quiet cluster
rather than sharing the primary nav's visual register. A left border
stands in for a divider without adding a second box model to reason
about. */
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
/*
§12 — the member and their account controls, as one right-hand group. The
cluster's old left border was a divider against a nav that was floating in
the middle of the bar; with the nav now anchored beside the brand there is
nothing left for it to divide, and one less rectangle is the point.
*/
.member-chip { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.member-chip:not(:has(.member-name:not(:empty))) { display: none; }
/*
SUPERSEDED — SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1, owner ruling. The
superseded doctrine and the rules it introduced are kept here VERBATIM
rather than described, because claiming text was "kept as provenance" while
in fact deleting it is one of the eight PR #2 strikes this rebuild carries
(strike c). What stood here was:
| Desktop navigation stays desktop navigation: a horizontal row of
| destinations in the header. It never becomes a hamburger, a drawer or
| a rail at any desktop width.
| .topbar-nav {
| display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
| One designed interval from the mark; everything else is pushed away.
| margin-left: 40px; margin-right: auto;
| }
| .topbar-nav:empty { display: none; }
| The two work-destination clusters (interaction vs. capability) get
| their own visual grouping — a divider between them, not just a bigger
| gap — so the row reads as two groups rather than six equally-weighted
| tabs.
| .nav-cluster { display: flex; align-items: center; gap: var(--space-1); }
| .nav-cluster:empty { display: none; }
| #nav > .nav-cluster:first-child:not(:empty) {
| padding-right: var(--space-4); border-right: 1px solid var(--color-neutral-800);
| }
THE RULING IS THE OPPOSITE OF THAT DOCTRINE: navigation IS a rail, and at
phone width it IS a drawer. The rules are removed rather than left as dead
selectors, because `.topbar-nav` and `.nav-cluster` no longer have elements —
`#nav` moved into `.shell-nav` with its id intact.
WHAT THE SUPERSEDED RULES WERE PROTECTING, AND WHERE IT LIVES NOW. The
`margin-left: 40px; margin-right: auto` pair was the MECHANISM of a separate
standing ruling — "the brand and the primary navigation are one system": the
destinations sit ADJACENT to the mark at one deliberate interval, and the
account utilities are pushed to the far edge. That ruling is NOT superseded;
only its mechanism is. In the rail the mark and the destinations are
adjacent by stacking order (`.shell-nav-head`, then `.shell-nav-actions`,
then `.shell-nav-surfaces`), and the utilities are pushed to the far edge by
`.shell-nav-foot { margin-top: auto }` — the vertical form of the same
`margin-right: auto`. `unit.command-home-authority.test.js` asserts the rail
mechanism now, at the same strictness, rather than the row's.
The two interaction/capability clusters are superseded by the boards' own,
stronger grouping: five rows under `Surfaces`, and Societi under `Protocol`
with its 8px #F25CC6 marker.
*/
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §3 — the destinations read as
a deliberate hierarchy rather than six equally-weighted browser tabs.
The selected state was a violet BORDERED PILL, which is the exact treatment
the owner ruling names as clutter ("avoid turning every control into a
purple bordered pill"). Selection is now carried by the three things that
cost no chrome — full-strength text colour, weight, and a quiet tinted
ground — with the accent present as a tint, not an outline. An unselected
destination is genuinely recessive; hovering lifts it without drawing a box.
The transparent 1px border is kept so nothing shifts by a pixel between
states.
*/
.navlink {
background: transparent; border: 1px solid transparent;
color: var(--color-neutral-500);
font-size: 14px; font-weight: 500; letter-spacing: -0.003em;
padding: 7px var(--space-4);
border-radius: var(--radius-sm); cursor: pointer;
transition: color 120ms ease, background-color 120ms ease;
}
.navlink:hover { color: var(--color-neutral-100); background: var(--surface-hover); }
.navlink[aria-current="page"] {
color: var(--color-text); font-weight: 600;
/* `--surface-selected` mixes into `--color-surface`, which on the light
theme is pure white — against the light ground that reads as no state at
all. Mixing into the accent directly gives one tint that is quietly
present in BOTH polarities. */
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
}
/* ===================================================================== */
/* SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1 — THE NAVIGATION RAIL */
/* */
/* ORDERING IS LOAD-BEARING HERE, NOT TASTE. Everything in this section */
/* is declared BELOW `.topbar` and `.navlink` on purpose. The suite's own */
/* `rule()` / `block()` helpers locate a rule by the FIRST textual */
/* occurrence of its selector, and `.navlink-glyph` / `.navlink-label` / */
/* `.navlink-count` are all prefixes of `.navlink`, while the drawer tier */
/* carries a `.topbar` rule of its own. Declaring any of them above their */
/* base rule makes every gate that reads `rule('.navlink')` or */
/* `rule('.topbar')` silently read a different rule instead — a gate that */
/* still passes while measuring the wrong thing. Keep them below. */
/* */
/* WHY `.shell-nav` AND NOT `.rail`. "rail" already means three other */
/* things in this stylesheet — `.rail` (the 248px conversations list), */
/* `.settings-rail` (the Settings topic list) and `.rail-row*` (a */
/* key/value table inside Seat steps). It meant a fourth, `.cmd-rail`, */
/* Command's 330px right-hand content rail, until */
/* SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1 removed that column on the */
/* owner's ruling. Reusing the word would corrupt */
/* live surfaces. The boards' own name for this control is carried where */
/* the boards actually put it — `aria-label="Surfaces"` on its `<nav>` — */
/* because `.surface` / `--color-surface` is already the panel-fill token, */
/* so "Surfaces" is not available as a class name either. */
/* ===================================================================== */
.shell-nav {
/* The boards' own three numbers, verbatim: 264px, `flex: none`, 12px. */
width: var(--shell-nav-w);
flex: none;
padding: var(--shell-nav-pad);
display: flex; flex-direction: column;
background: var(--shell-nav-ground);
/* RULING 1, read through the one token that has a value per polarity. */
border-right: 1px solid var(--shell-nav-line);
position: sticky; top: 0; height: 100vh;
overflow-y: auto; overflow-x: hidden;
}
/*
NO WIDTH TRANSITION ON THE RAIL, AND THAT IS A CORRECTION.
This rule carried `transition: width 140ms ease`, added as a judgment call —
"a tier change moves a real measurement, so it may be seen". It was wrong on
both counts and a real defect, caught by a test rather than by reading.
THE BOARDS DO NOT ASK FOR IT. The shell canvas's own snapshot records, under
what it does not cover: "No motion spec. The Societi canvas carries one
(`Motion.dc.html`); this one does not." So the transition was an unmarked
invention in exactly the place the rulings are measured.
AND IT MADE THE TIERS UNMEASURABLE WHILE IT RAN. `integration.societi-grid-
browser` measured the hero at 1352px against an expected full-bleed width:
1440 - 88, an animating rail caught between 264px and 64px. The whole value
of these three tiers is that a width is checkable — 264 means one ruling,
64 means another — and an animation makes the number depend on when you
look. A shell whose geometry cannot be measured deterministically cannot be
proved to follow the rulings, which is worth more than seeing the change.
The tier change is now instant, which is also what `prefers-reduced-motion`
would have forced anyway for anyone who asked for it.
*/
/* ---- the head row: the mark, and the way to close the drawer --------- */
.shell-nav-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-2); flex: none;
}
/*
The boards pad the logo 8px in from the rail's own 12px padding, in a 44px
row. The 8px is taken; the HEIGHT is the ruled artwork's, not the boards'
44px, and the reason is a collision between two owner rulings that is
declared rather than quietly resolved:
the boards draw a 22px orb SVG with "SOVERN" TYPESET beside it at
13px/600/0.3em — and a standing, CI-enforced ruling on this product
(`unit.command-home-authority.test.js`, `integration.brand-assets.test.js`)
says the brand element carries the supplied ARTWORK and never text
("nothing is typeset beside the supplied wordmark and nothing is appended
to it"), with ink floors measured out of the masters' own alpha channels
(symbol >= 34px, lockup >= 140px) that require a 58px box.
58px does not fit a 44px row, so the row is sized to the ruled artwork. The
alternative was a second, smaller brand treatment, which that same ruling
rejected by name as reading "too small".
*/
.shell-nav-mark {
display: block; height: 58px; width: 174px;
flex: none; margin-left: 8px;
background-image: var(--brand-logo);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
.shell-nav-close {
width: 40px; height: 40px; flex: none;
display: none; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--color-neutral-500); cursor: pointer;
}
.shell-nav-close:hover { color: var(--color-neutral-100); background: var(--surface-hover); }
/* ---- the two rail actions: 40px bordered, 36px muted ----------------- */
.shell-nav-actions {
display: flex; flex-direction: column; gap: var(--space-2);
flex: none; margin-top: var(--space-4);
}
.shell-nav-new,
.shell-nav-search {
display: flex; align-items: center; gap: var(--space-2);
width: 100%; text-align: left; cursor: pointer;
border-radius: var(--radius-sm); font: inherit;
padding: 0 10px;
}
.shell-nav-new {
min-height: 40px;
border: 1px solid var(--color-neutral-800);
background: transparent; color: var(--color-text);
font-size: 14px; font-weight: 500;
}
.shell-nav-new:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.shell-nav-search {
min-height: 36px;
border: 1px solid transparent; background: transparent;
color: var(--color-neutral-500); font-size: 14px; font-weight: 400;
}
.shell-nav-search:hover { color: var(--color-neutral-100); background: var(--surface-hover); }
/* ---- Surfaces: the boards' 36px rows at a 2px gap ------------------- */
.shell-nav-surfaces {
display: flex; flex-direction: column; gap: 2px;
flex: none; margin-top: var(--space-5);
}
.shell-nav-surfaces:empty { display: none; }
/*
THE GLYPH IS AN SVG, AND THAT IS LOAD-BEARING.
The compact rail (Societi at ~1440) has no visible labels, so each
destination needs an icon. Carrying one in a `<span>` is what broke the
suite the last time this surface was attempted: `textContent` ignores
`display`, so a hidden glyph span still concatenates onto the label and
`#nav .navlink:text-is("Societi")` matches ZERO elements at every width —
measured, and carried here as strike a. An inline `<svg>` contributes
nothing to `textContent`, so each link's text is exactly its label at every
tier and those selectors keep working untouched.
`.navlink-label` is NOT `aria-hidden`. Hiding it would leave `aria-label` as
the only name there is, which is precisely how a nav rendering no readable
text at all can pass a suite that only ever reads the attribute (strike d).
*/
.navlink-glyph { display: none; flex: none; line-height: 0; }
.navlink-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navlink-count {
margin-left: auto; flex: none;
font-size: 12px; font-weight: 500; color: var(--color-neutral-600);
font-variant-numeric: tabular-nums;
}
.shell-nav-surfaces .navlink,
.shell-nav-protocol .navlink {
display: flex; align-items: center; gap: 10px;
width: 100%; min-height: 36px; padding: 0 10px;
text-align: left;
}
/* ---- Protocol, and Recent ------------------------------------------- */
/* The boards' section label: 12px, 0.08em, uppercase, muted. */
.shell-nav-section {
display: block; font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--color-neutral-600);
padding: 0 10px; margin-bottom: var(--space-2);
}
.shell-nav-protocol { flex: none; margin-top: var(--space-5); }
.shell-nav-protocol:empty { display: none; }
/* The boards' 8px protocol dot. `--shell-protocol` is the one hue that does
not change with the theme, which is why it is read here and appears in no
theme block at all. */
.shell-nav-dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
margin-left: auto; background: var(--shell-protocol);
}
.shell-nav-recent { flex: none; margin-top: var(--space-5); min-width: 0; }
.shell-nav-recent:empty { display: none; }
.shell-nav-recent-item {
display: block; width: 100%; text-align: left;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--color-neutral-400); font: inherit; font-size: 14px; cursor: pointer;
padding: 7px 10px;
/* The boards ellipsise this one row. The title is never truncated in the
DOM — only painted short — and `title` carries it in full. */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell-nav-recent-item:hover { color: var(--color-neutral-100); background: var(--surface-hover); }
.shell-nav-recent-all {
display: block; width: 100%; text-align: left;
background: transparent; border: 0; padding: 6px 10px;
color: var(--color-neutral-600); font: inherit; font-size: 13px; cursor: pointer;
}
.shell-nav-recent-all:hover { color: var(--color-neutral-300); }
/* ---- the footer the boards push down with `margin-top: auto` -------- */
.shell-nav-foot {
margin-top: auto; padding-top: var(--space-4);
display: flex; flex-direction: column; gap: var(--space-3);
flex: none;
}
.shell-nav-setup:empty { display: none; }
.shell-nav-setup-card {
display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
border: 1px solid var(--color-neutral-800); border-radius: var(--radius-sm);
background: transparent; color: var(--color-text);
padding: 10px;
}
.shell-nav-setup-card:hover { background: var(--surface-hover); }
.shell-nav-setup-head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
font-size: 13px; font-weight: 500; margin-bottom: 8px;
}
.shell-nav-setup-count { color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
/* The boards' 4px progress track. */
.shell-nav-setup-track {
height: 4px; border-radius: 2px; overflow: hidden;
background: var(--color-neutral-900);
}
.shell-nav-setup-fill { display: block; height: 100%; background: var(--color-accent); }
.shell-nav-utility { min-width: 0; }
.shell-nav-utility .profile { width: 100%; }
/* ---- the drawer's scrim --------------------------------------------- */
.shell-nav-scrim {
position: fixed; inset: 0; z-index: 19;
background: color-mix(in srgb, var(--color-bg) 70%, transparent);
border: 0;
}
.shell-nav-scrim[hidden] { display: none; }
/* ---- the phone header's own two controls ---------------------------- */
/* Both are `display: none` by default and are turned on only at the drawer
width, so above it there is no toggle to find and the rail is permanent. */
.nav-toggle,
.nav-new-phone {
display: none; width: 44px; height: 44px; flex: none;
align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--color-neutral-400); cursor: pointer;
}
.nav-toggle:hover,
.nav-new-phone:hover { color: var(--color-neutral-100); background: var(--surface-hover); }
/* ===================================================================== */
/* THE THREE RAIL TIERS */
/* */
/* The three ranges below are MUTUALLY EXCLUSIVE by construction */
/* (<=900 / 901-1919 / >=1920), so no tier can win or lose a declaration */
/* to another on selector specificity. That is deliberate. */
/* */
/* NON-IMMERSIVE SURFACES — the Command shell and every other screen — */
/* take the FULL 264px rail declared above, so it holds at 1440 and all */
/* the way down to the drawer. There is NO 1920 tier for them and no */
/* 1920 rule can reach them. That is ruling 3, and ruling 4: the Command */
/* shell is not immersive, so at 1440 it draws the full rail because */
/* there 1440 is the normal state and not the compact tier. */
/* */
/* So 264px means two different things in this file and the two are kept */
/* apart on purpose: the shell's everyday desktop state, and an immersive */
/* surface's very-wide reward. `unit.presentation.test.js` holds them */
/* apart so a later pass cannot merge them into one global breakpoint. */
/* ===================================================================== */
/* ---- 901-1919: IMMERSIVE IS COMPACT, 64px, ICON-ONLY ---------------- */
/*
Ruling 2's normal-laptop tier, scoped to `html[data-world="societi"]` — the
attribute the shell already sets when an immersive world opens (app.js,
`enterSocietiWorld`), so the tier follows the world rather than being
asserted by each surface for itself. "~1440 is COMPACT" is therefore true of
immersive surfaces and of nothing else.
THE COMPACT TIER'S WHOLE CONTRACT, from the Societi SPEC: "the shell loses
its words, never its surfaces". Nothing is dropped between 1920 and 1440 —
only the text is. All six destinations stay in the rail, each keeping the
real `aria-label` that is its only name at this width.
*/
@media (min-width: 901px) and (max-width: 1919px) {
html[data-world="societi"] { --shell-nav-w: var(--shell-nav-compact); }
/*
The compact rail's padding is `12px 0` on the board (`World.dc.html`), not
the full rail's `12px`. At 64px the 12px either side would leave a 40px
content box for a 36px row and an 18px glyph, so the rows would stop being
able to centre honestly. Vertical padding only, measured, not guessed.
*/
html[data-world="societi"] .shell-nav { padding: var(--shell-nav-pad) 0; }
/* The words go. */
html[data-world="societi"] .navlink-label,
html[data-world="societi"] .navlink-count,
html[data-world="societi"] .shell-nav-new-label,
html[data-world="societi"] .shell-nav-search-label,
html[data-world="societi"] .shell-nav-section,
html[data-world="societi"] .shell-nav-recent,
html[data-world="societi"] .shell-nav-setup-head,
html[data-world="societi"] .shell-nav-setup-track,
html[data-world="societi"] .profile-name,
html[data-world="societi"] .profile-chevron,
/*
The protocol status line is words, and this tier has none of them. Left
visible it is a 380px `nowrap` row inside a 64px rail, which paints a
clipped half-sentence ("Your C…") rather than a status. Its DOT survives
below, so the connection state is still shown — which is the compact
tier's contract: the shell loses its words, never its meaning.
*/
html[data-world="societi"] .world-status > span:last-child { display: none; }
html[data-world="societi"] .world-status {
max-width: none; margin-right: 0; justify-content: center; width: 100%;
}
/* The glyphs arrive in their place — never a gap where a surface was. */
html[data-world="societi"] .navlink-glyph { display: inline-flex; }
html[data-world="societi"] .shell-nav-surfaces .navlink,
html[data-world="societi"] .shell-nav-protocol .navlink,
html[data-world="societi"] .shell-nav-new,
html[data-world="societi"] .shell-nav-search {
justify-content: center; padding: 0; gap: 0;
}
/*
The protocol dot cannot take `margin-left: auto` in a 64px centred row —
it would push the glyph off-centre — so it becomes a corner marker on the
Societi row. The marker, and its theme-invariant hue, stay present at
this tier rather than being dropped with the words.
*/
html[data-world="societi"] .shell-nav-protocol .navlink { position: relative; }
html[data-world="societi"] .shell-nav-dot {
margin-left: 0; position: absolute; top: 6px; right: 6px;
}
/* The mark narrows to its own symbol master rather than disappearing. */
html[data-world="societi"] .shell-nav-head { justify-content: center; }
html[data-world="societi"] .shell-nav-mark {
width: 34px; height: 34px; margin-left: 0;
background-image: var(--brand-mark, var(--brand-logo));
background-position: center;
}
html[data-world="societi"] .shell-nav-setup-card { padding: 8px 0; text-align: center; }
}
/* ---- 1920+: IMMERSIVE REACHES THE FULL 264px RAIL ------------------- */
/*
Ruling 2's very-wide tier, and the ONLY `min-width: 1920px` query in this
stylesheet. It is written INSIDE the immersive scope on purpose: ruling 3
forbids 1920 from becoming a universal breakpoint, so this query cannot
reach a non-immersive surface, and no token or shared layout primitive takes
a 1920 value anywhere in this file.
*/
@media (min-width: 1920px) {
html[data-world="societi"] { --shell-nav-w: var(--shell-nav-full); }
}
/* ---- <=900: THE DRAWER ---------------------------------------------- */
/*
Ruling 2's mobile tier, and the boards' own phone boards (390x844 on the
shell canvas, 390x3800 on Societi): no rail, a header, and the menu behind
the hamburger.
WHY 900px. The boards are explicitly SILENT here — both SPECs record "No
tablet tier between 390 and 1440" — so per the task this follows the
product's own existing tokens rather than inventing a threshold. 900px is
already a breakpoint in this file (the Settings block further down), and it
is the widest existing one at which a permanent 264px rail would leave the
content column narrower than the compositions inside it assume. The previous
attempt at this surface chose 640px, which is NOT a breakpoint this product
has: the string `640` appears in this file exactly once, inside prose.
THIS IS THE ONE RANGE IN WHICH THE PRIMARY NAVIGATION IS HIDDEN BY DEFAULT,
and it is hidden only because this same range supplies `#navToggle` as a
real, visible, labelled control that reveals it. `unit.presentation.test.js`
asserts that pairing by PARSING BRACE DEPTH rather than by string position,
because the `lastIndexOf('@media')` version of that test is bypassable —
proved by execution and carried here as strike b.
*/
@media (max-width: 900px) {
.topbar { display: flex; }
.nav-toggle, .nav-new-phone { display: flex; }
.shell-nav-close { display: flex; }
/*
The boards' phone header is exactly three controls — "a 44x44 Open the menu
hamburger, the Sovern mark, and a 44x44 New command plus on the right" — so
the member chip stands down here. It is not removed from the DOM and
nothing about identity becomes unreachable: the member's own monogram and
name are in the rail's footer profile button, which this header's own
toggle opens. That is the same argument the 480px block already makes for
`.member-block`, applied to the whole chip at the width the boards draw.
*/
.member-chip { display: none; }
.topbar-actions { gap: 0; }
/* The mark takes the space the destinations used to, so the two 44px
controls sit at the ends of the bar rather than clustering. */
.topbar-identity { margin-right: auto; margin-left: var(--space-2); }
.shell-nav {
display: none;
position: fixed; left: 0; top: 0; bottom: 0; height: 100%;
width: var(--shell-nav-drawer); max-width: 86vw;
z-index: 20;
}
/* The real reveal: the toggle above is what sets `nav-open`, and this is
what that class actually does. A hidden nav and a dead switch are the
same defect, and this is the line that distinguishes them. */
body.nav-open .shell-nav { display: flex; }
/*
`--shell-nav-w` is "how much horizontal space the rail takes out of the
flow", and a fixed-position drawer takes none. Setting it to 0 here gives
the body the full viewport AND pulls the viewport-fixed composer host back
to the left edge in ONE declaration, rather than one override per
consumer — so a future consumer of the rail's width cannot be forgotten
at this tier.
*/
:root { --shell-nav-w: 0px; }
.shell-body { min-width: 100%; }
}
/*
Account / Theme / Sign out stay SECONDARY UTILITIES. They sat at the same
visual weight as the work destinations — two of them as outlined buttons,
which made them the most boxed things in the bar. They are quiet text
until touched.
*/
.topbar-actions .button {
border-color: transparent; background: transparent;
color: var(--color-neutral-500); font-weight: 500;
}
.topbar-actions .button:hover {
color: var(--color-neutral-100); background: var(--surface-hover);
border-color: transparent;
}
/* The shell is a wide CENTRED measure. `.main` is a flex item of `.app`
(flex-direction: column), so a `max-width` without an auto inline margin
leaves the item at the start of the cross axis — the whole page hugs the left
edge and the rest of the canvas is dead. The auto margin is what centres it,
and it is not optional. Measure and padding are the authority's. */
.main {
flex: 1; width: 100%; max-width: 1400px; margin: 0 auto;
/*
HC-DESIGN-SLICE-1 — the bottom clearance reserves exactly the persistent
composer's own rendered footprint (app.js measures `#composerHost` with a
ResizeObserver and writes it here as `--composer-clearance`), not an
arbitrary guess at its height. `140px` is the fallback for every route the
composer host is empty on — the same "clear of the header, room to
breathe" measure this file used before the host existed.
*/
/*
SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1 — the top padding is the boards' own
64px ("Main column top padding 64px"), up from 38px. With the desktop top
bar gone, 38px put the page title hard against the viewport edge, so the
measured board value and the right answer are the same number here.
SUPERSEDED — SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 1. The
conflict this paragraph declared has been RULED ON, and the paragraph was
left standing as live doctrine saying the opposite: that the decision was
still open and still the owner's to make. Verbatim:
| THE 760px MEASURE IS A DECLARED CONFLICT, NOT AN OVERSIGHT. The shell
| boards specify "Main column 760px fixed, centred in the remaining space".
| This file keeps 1400px, because 760px cannot be adopted without deleting a
| DIFFERENT standing owner ruling: `.cmd-main` is the authority's own
| two-track `minmax(0,1fr) 330px` rail composition, declared unconditionally
| at desktop widths, and `.main` at 1400px is the width doctrine that
| Compare and Council legitimately use all of. Both are CI-enforced —
| `unit.presentation.test.js`'s "the shell stays centred and wide — 1400px"
| and the layout-rule matrix tests. A 760px column collapses that
| composition and fails those gates.
|
| Two owner rulings therefore collide on this one number, and choosing
| between them is the owner's call, not this rebuild's. What is built is the
| SHELL the boards govern — the rail, its tiers, its states — at the content
| measure the product's own standing ruling already fixed. Adopting 760 is
| one line here plus a decision about `.cmd-main`; both are recorded in
| docs/command-shell-rebuild/03-BUILD-NOTES.md so the choice cannot be lost.
WHAT IS TRUE NOW. The owner ruled for the board: Command's column is
`--vs-measure-command` (760px) on `.command-page`, and the two-track
composition the conflict was about is gone — `.cmd-main` is
`display: block`. `.main` is untouched and is still the 1400px SHELL,
which is a different box and a different ruling; the 64px above is the
board's own figure and is unaffected.
The build-notes file this cited was removed with the rest of
`docs/command-shell-rebuild/` when the revision superseded it, so the
pointer went nowhere as well as saying the wrong thing. The decision it
was protecting is recorded here instead, where the number is.
*/
padding: 64px 32px var(--composer-clearance, 140px);
}
/*
THE ONE PERSISTENT COMPOSER HOST.
`position: fixed` at shell level (index.html: a sibling of `#main`, a child
of neither the Command grid nor the thread grid) is the actual fix for the
problem `.thread-layout .composer`'s old sticky rule documented: sticky only
ever worked because the thread's flow column happened to have the document
itself as its nearest scrolling ancestor, and would misbehave the moment
that stopped being true. A fixed shell host has no such dependency — it is
anchored to the viewport, not to whichever route's grid is currently
painted inside `#main`, so Command and a thread share the exact same
anchoring with no special-casing either way.
The horizontal padding mirrors `.topbar`'s own centring formula, so the
composer's content aligns with the same 1400px measure as the header and
`.main` at every width down to the mobile breakpoint below. The host itself
takes no pointer events — only whatever is actually mounted into it does —
so the transparent margin either side of a narrower composer (Command's
`.entry` block reads narrower than 1400px on a wide desktop) never blocks a
click on anything behind it.
*/
.composer-host {
/*
SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1 — `left` is the rail's own width
rather than 0. The host is viewport-fixed, so without this it would run
underneath the permanent rail and its centring formula would be measured
against the wrong box. `--shell-nav-w` is 0 at the drawer tier, where the
rail takes no space out of the flow, so this one declaration is correct at
every tier and there is no per-tier override to forget.
*/
position: fixed; left: var(--shell-nav-w); right: 0; bottom: 0; z-index: 6;
padding: var(--space-4) max(32px, calc((100% - 1400px) / 2 + 32px));
background: color-mix(in srgb, var(--color-bg) 93%, transparent);
backdrop-filter: blur(14px);
border-top: 1px solid var(--color-neutral-900);
pointer-events: none;
}
.composer-host[hidden] { display: none; }
.composer-host > * { pointer-events: auto; }
/* ====================================================================== */
/* SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1 — THE BOARD'S ONE-SCREEN FRAME */
/* Owner ruling 2: the composer is INTEGRATED INTO THE FOCUSED COLUMN. */
/* ====================================================================== */
/*
THE DIVERGENCE THIS CLOSES WAS MEASURED BEFORE IT WAS FIXED, and the owner's
instruction was explicit that it could not be waved off as a capture
artifact without that measurement. It is not one. From the shipped CSS, via
computed rectangles at 1440x900, both themes, in the board's own content
class:
composer width board 760 render 880
composer inset from the column, each side board 0 render 116
composer gap below board 28 render 1661.2
composer painted over the judgment card board no render YES
The last line is the whole of it. The composer's painted rectangle genuinely
shared area with the judgment card's — it covered that card's primary action
on a 2550px-tall page — because the host is anchored to the VIEWPORT while
the document scrolls underneath it. `--composer-clearance` reserves the
composer's height at the END of the document, which is correct and is why
nothing is hidden once the member has scrolled to the bottom; it can do
nothing about the two thirds of the page that pass beneath the composer on
the way there.
THE BOARD HAS NO SUCH PROBLEM, AND THE REASON IS STRUCTURAL. Its `main` is a
flex column the height of the screen; the content column is `flex: 1` and the
composer is the block after it. The composer therefore takes real space out
of the frame, the content region ends where the composer begins, and nothing
can ever pass under it. That is what "integrated into the focused column"
means, and it is reproduced here rather than approximated.
WHAT IS NOT CHANGED. `.composer-host`'s own base rule above is untouched —
still `position: fixed`, still `bottom: 0`, still at shell level and not
inside either route's grid. That doctrine is HC-DESIGN-SLICE-1's fix for the
thread's sticky-in-grid bug and it is the right answer for a thread, which
scrolls a conversation that genuinely runs past the viewport. Command is the
screen the boards govern and it gets the frame the boards draw. One composer
implementation, one host, two placements — the page says which.
Desktop only. The rail is permanent above 900px, which is where these boards
speak; the phone boards are their own artboards and the canvas covers no
tablet tier, so nothing below 901px is touched by a ruling that did not
reach it.
*/
@media (min-width: 901px) {
.shell-body.is-framed {
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/*
The content region, and the whole of the fix: it is `flex: 1` inside a
frame whose remaining height the composer has already taken, so its box
ENDS above the composer instead of running beneath it. `min-height: 0` is
not optional — without it a flex item refuses to shrink below its content
and the frame grows past the screen, putting the overflow back on the
document and the composer back over the page.
The scroll is on `.shell-scroll` rather than on `.main` so that the legal
footer scrolls WITH the content, which is where it has always been. The
first version of this framed `.main` alone, and the footer — a sibling —
became a flow item of the frame instead: it took 189px out of the screen
between the decisions and the composer, most of it the
`--composer-clearance` in its own padding-bottom, which is reserved for a
composer that no longer floats over anything. Caught in the render, not in
the numbers: every assertion still passed.
*/
.shell-body.is-framed > .shell-scroll {
display: block;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* The clearance reserved room for a composer that floated over these boxes.
Nothing floats over them now, so reserving the room would be 149px of dead
space at the end of the scroll. */
.shell-body.is-framed .main { padding-bottom: 0; }
.shell-body.is-framed .site-footer { padding-bottom: var(--space-5); }
/*
The composer, in the flow of the frame at the board's own measure and with
the board's own 28px beneath it. The tinted, blurred, rule-topped bar
treatment is dropped here for the same reason the boards give: no board
draws a rule or a scrim behind the composer — the panel sits on the page
ground, and with the content no longer passing underneath there is nothing
for a scrim to do.
*/
.shell-body.is-framed > .composer-host {
position: static;
flex: none;
padding: 0 var(--space-6) var(--vs-gap-below-composer);
background: none;
backdrop-filter: none;
border-top: 0;
}
}
/* --------------------------------------------------------------- layout */
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §4 — the title now leads.
At 26px it sat within a few points of the section headings and the
decision titles beneath it, which is most of why the screen read flat:
nothing on it was clearly first. 34px at a heavier weight and tighter
tracking makes the briefing's own subject unambiguous without adding a
single new element.
*/
.page-head { margin-bottom: var(--space-8); }
.page-title {
font-family: var(--font-heading); font-weight: 600;
font-size: 34px; line-height: 1.15; letter-spacing: -0.025em;
margin: 0 0 var(--space-2);
}
.page-sub { color: var(--color-neutral-500); font-size: 14.5px; margin: 0; max-width: 76ch; }
.kicker {
font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--color-neutral-400); margin-bottom: var(--space-3);
}
/*
§5 — the page kicker states real, mechanically-composed facts ("Early ·
2 conversations": the member's real lifecycle stage and their real counts).
Set in full caps it read as a system enum being shown to a member. The
STRING is untouched — this only stops shouting it. Scoped to the page head
so every other `.kicker` in the product (Council rounds, evidence blocks)
keeps the eyebrow treatment it was designed with.
*/
.page-head .kicker {
text-transform: none; letter-spacing: 0.01em;
font-size: 13.5px; color: var(--color-neutral-500);
margin-bottom: var(--space-2);
}
/* A reading measure for PROSE, never for a module. */
.prose { max-width: 76ch; text-wrap: pretty; }
/*
SUPERSEDED — SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 1. Kept
verbatim rather than described, and marked here because it was left
unmarked: a reader arriving at this file was told, as live doctrine, a
number this screen stopped using.
| SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §4 — CENSUS RESULT, recorded
| rather than acted on: Command's own measure is ALREADY a deliberate one.
| `--width-workspace` (1120px, HC-HUMAN-USE-1's width doctrine) bounds
| `.command-page` below, centred inside the 1400px shell. The flatness the
| owner is reading is therefore not a width problem and adding a second,
| competing measure here would only have made two authorities for one number.
| Everything this unit changes on this screen is typographic, spatial and
| tonal instead.
WHAT IS TRUE NOW. `.command-page` is bounded by `--vs-measure-command`
(760px), declared below, centred inside the box the rail leaves. The census
result's own conclusion — that Command already has a deliberate measure of
its own and should not acquire a second, competing one — is the reasoning
the ruling kept; only the number changed, and it changed to one the
governing board specifies rather than one this product chose for itself.
*/
/* ============================================ Command — the composition ==
Authority: HC Command Center.dc.html.
SUPERSEDED — SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 1. This
header described a two-track composition that no longer exists, in the
present tense, immediately above the rule that removed it. Verbatim:
| `.cmd-main` is the authority's `mainCols` rail composition
| (`minmax(0,1fr) 330px`). It is declared unconditionally at desktop widths:
| the grid, the column arrangement and the module frames render regardless of
| how much data the account holds. `.cmd-bands` carries the full-width module
| band beneath it and wraps at its own count.
WHAT IS TRUE NOW. `.cmd-main` is `display: block` — ONE track, at every
width, with no `no-rail` modifier, because the state that modifier named
can no longer occur. The reasoning and the superseded declarations are
below, on the rule itself. `.cmd-bands` is unchanged and still wraps at its
own count, now on `.cmd-main`'s own measure rather than the full shell.
======================================================================= */
/*
SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 1 — THE FOCUSED COLUMN.
SUPERSEDES the width doctrine's `--width-workspace` (1120px) FOR THIS SCREEN
ONLY. Kept verbatim, because provenance claimed and not kept is a strike this
lane carries — and this quote was ABRIDGED, with the full paragraph standing
unmarked above it as live doctrine, so the file carried the same text twice
and contradicted itself about which copy was current. The full text is here
now and the duplicate is gone:
| HC-HUMAN-USE-1 — width doctrine. `.main` is the SHELL (1400px) and stays
| that width for every route, because Compare/Council legitimately use all of
| it. Command's own content does not structurally need the shell's full
| width — the owner's own screenshot is a monitor-wide composer and
| edge-to-edge decision cards, not a Compare/Council case — so Command gets
| its own, narrower WORKSPACE width, centered inside the shell. This changes
| nothing about `.cmd-main`'s own two-track grid or any `.recipe-*` rule
| inside it; it only bounds how wide that grid is allowed to become.
| .command-page { max-width: var(--width-workspace); margin: 0 auto; }
Its last sentence is the part that did not survive: `.cmd-main`'s two-track
grid is gone, so there is no longer a grid for this measure to bound — it
bounds one column.
The REASONING is untouched and is in fact what the board does — Command gets
its own measure, centred inside the shell. Only the NUMBER changes, from a
figure this product chose for itself to the one the governing board
specifies. `--width-workspace` keeps its value (declared in
`public/nocturne.css`) and its other callers — NINE, counted in this tree,
all of them `.panel` widths in `public/app.js`; the count said eleven, which
was already stale. Nothing outside Command moves.
*/
.command-page { max-width: var(--vs-measure-command); margin: 0 auto; }
/*
ONE TRACK. SUPERSEDED, owner ruling 1 — kept verbatim:
| .cmd-main {
| display: grid;
| grid-template-columns: minmax(0, 1fr) 330px;
| gap: calc(var(--space-8) * 1.6);
| align-items: start;
| }
| .cmd-main.no-rail { grid-template-columns: minmax(0, 1fr); }
| .cmd-rail { min-width: 0; display: flex; flex-direction: column;
| gap: var(--space-6); }
`.cmd-rail` held exactly one thing — the Projects panel — and the owner's
ruling is that Command does not carry it: "Command is a focused
owner-intelligence surface, not a dashboard with a utility sidebar. Projects
already has its first-class home in the rail and Command does not duplicate
it." So the track is not emptied and left reserved, it is gone, and
`renderCommand` no longer constructs an `aside` for it.
`no-rail` goes with it: a modifier that says "collapse to the one column you
now always are" is a state that cannot occur. THE PANEL RETURNS ONLY IF A
LATER APPROVED BOARD EXPLICITLY PLACES IT.
*/
.cmd-main { display: block; }
.cmd-primary {
min-width: 0; display: flex; flex-direction: column;
gap: calc(var(--space-8) * 1.2);
}
/*
THE LOWER REGION KEEPS THE COMPOSITION'S OWN MEASURE.
`.cmd-bands` used to span the full shell as a flat four-track auto-fit band,
so the cards beneath the composition sat on a different set of column edges
from the cards above them. `.cmd-lower` keeps `.cmd-bands` on the same
measure as `.cmd-main`'s own primary column.
HC-DESIGN-SLICE-3 — this used to carry a second, 330px rail track
alongside `.cmd-bands`, lined up with `.cmd-rail` above it, for
"Included and not yet on screen" (`commandDormantModule`). That module no
longer renders on default Home at all (§6C) — it explained implementation/
layout state, not member work — so there is nothing left to put in a rail
track here, and reserving 330px of permanently empty gutter would be
exactly the kind of replacement furniture §19 forbids. One column.
*/
.cmd-lower {
margin-top: calc(var(--space-8) * 1.6);
}
.cmd-bands {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
align-items: start;
}
/* A module frame. It occupies its cell whether or not it has content. */
.module {
min-width: 0;
border: 1px solid var(--color-neutral-900);
border-radius: var(--radius-md);
background: var(--color-surface);
padding: var(--space-6);
}
.module-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-4); margin-bottom: var(--space-4);
}
.module-title {
font-size: 13.5px; letter-spacing: .11em; text-transform: uppercase;
color: var(--color-neutral-300); font-weight: 400; margin: 0;
}
.module-count { font-size: 13.5px; color: var(--color-neutral-600); white-space: nowrap; }
/* The honest state a module paints when it has nothing in it. It is a state,
not a placeholder: it says what is true and what would make it true, and it
never invents a figure to fill the frame. */
.module-empty {
color: var(--color-neutral-500); font-size: 14.5px; line-height: 1.65;
text-wrap: pretty; margin: 0;
}
.module-empty + .module-empty { margin-top: var(--space-3); }
.module-empty-note {
display: block; margin-top: var(--space-3);
font-size: 13.5px; color: var(--color-neutral-600); line-height: 1.6;
}
/* ---- the entry point (Ask composer) ---- */
.entry { min-width: 0; }
/*
HC-HOME-DESIGN-RECONCILE-2 — the approved artifact's own entry composer
(`HC Command Center.dc.html`, confirmed via its `position:fixed` composer
wrapper) is a soft, rounded, floating pill — no accent border, no label
above it, no technical line below it. `--radius-lg`/`--shadow-lg` are
this design system's own existing tokens (Nocturne), not new ones.
*/
.entry .composer {
border-color: var(--color-neutral-800);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
/*
HC-DESIGN-SLICE-3 — the Command contextual execution blocker.
Lives in the composer's own immediate-response region (inside `.entry
.composer` itself) — never a Home card, never a modal,
never a global banner. `[hidden]` keeps it out of the layout entirely
when there is nothing to say, the same doctrine `.composer-host[hidden]`
already uses; there is exactly one of these per Command composer, and its
content is always replaced wholesale (never appended to), so it can never
duplicate itself.
*/
.command-blocker {
border: 1px solid var(--color-accent-800);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-top: var(--space-3);
background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.command-blocker[hidden] { display: none; }
.command-blocker-text {
margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-accent-200);
}
/* ---- your next step ---- */
/*
HC-HOME-DESIGN-RECONCILE-2 — owner ruling §3E: a next step is a nudge, not
a current blocker, so it no longer carries the accent-bordered hero
treatment a genuine decision (`.decision`) gets. Same position in the
composition — this is a visual-weight change, not a layout change.
*/
.nextstep {
display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.nextstep-text {
margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 80ch;
color: var(--color-neutral-400); text-wrap: pretty;
}
/*
HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R4 — the adviser brief. This is
the STRUCTURAL SLOT the approved reference's left-ruled synthesis
paragraph occupies, distinct from `.nextstep` (a nudge, deliberately
never given this treatment per §3E above) and from `.decision` (a
specific card, not a synthesis). It renders only when a real decision
exists — see `commandAdviserBrief`'s own comment for exactly which real
fields it is built from.
*/
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §4 — this is the BRIEFING,
and it is now the first thing the member reads after the title. It was set
at 15.5px, one point above body copy, sharing the column with a dashed
system disclaimer above it and repeating verbatim into the card below it.
It is now unmistakably the adviser's own read: larger, at the primary text
colour, on a real reading measure, with the accent rule at full strength
rather than the recessed 700 step. The rank line beneath it is a quiet
attribution, not a second paragraph.
*/
.adviser-brief {
border-left: 2px solid var(--color-accent);
padding: var(--space-1) 0 var(--space-1) var(--space-6);
margin-bottom: calc(var(--space-8) * 1.1);
}
/*
§4 — the lead states what is being asked; the line beneath it states why and
what survived. Two registers, not one flat paragraph of incident prose.
*/
.adviser-brief-lead {
margin: 0; font-size: 21px; line-height: 1.35; font-weight: 600;
letter-spacing: -0.02em; color: var(--color-text); text-wrap: pretty;
}
.adviser-brief-text {
margin: var(--space-3) 0 0; font-size: 16px; line-height: 1.6; max-width: 62ch;
color: var(--color-neutral-400); text-wrap: pretty;
}
/* `.adviser-brief-rank` is retired with the line it styled (§4): ranking now
renders only in the hero's own stake panel, beside the thing it ranks. */
/* ---- adaptive-learning honesty band (environment, not content) ---- */
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §4 — a dashed box is the
visual language of a placeholder or a debug affordance, and this band held
neither: it is a true, permanent statement about how the screen was
composed. As a footnote below the content it explains (see renderCommand,
where it MOVED) it needs a rule, not a box.
*/
.learning-honesty {
border: 0; border-top: 1px solid var(--color-neutral-800); border-radius: 0;
padding: var(--space-4) 0 0; margin-top: var(--space-4);
}
/* §10 — quiet doctrine, in the environment-statement register. Not a banner. */
.doctrine {
margin: var(--space-3) 0 0; font-size: 12.5px; line-height: 1.55;
color: var(--color-neutral-500); letter-spacing: 0.01em;
}
.learning-honesty-text {
/* No reading-measure cap: at footnote size the sentence sets on ONE line
inside Command's own 1120px workspace measure, and a second wrapped line
is exactly what pushed this into the fixed composer's rest position. The
workspace measure is the bound; a second one here only fought it. */
margin: 0; font-size: 12.5px; line-height: 1.55;
color: var(--color-neutral-600); text-wrap: pretty;
}
/* ---- sections ---- */
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §4 — GROUPING, which the
composition had almost none of: every section heading floated above its
content at the same weight as the content, so the eye had nothing telling
it where one concern ended and the next began. A heading now sits on its
own ruled band, and the sections are spaced apart rather than merely
stacked. No new element, no card added around anything.
*/
.section { min-width: 0; }
.section + .section { margin-top: calc(var(--space-8) * 1.05); }
.section-head {
display: flex; align-items: baseline; gap: var(--space-4);
justify-content: space-between;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-neutral-800);
margin-bottom: var(--space-4);
}
.section-head-label { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.section-title {
font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--color-neutral-500); font-weight: 600; margin: 0;
}
/*
§4/§8 — "What needs you" is the actionable decision; "Continue" is a list
of things already in flight. They were typographically identical. The
decision section takes full-strength text and an accent tick; everything
else keeps the recessive register above.
*/
.decisions-section .section-title { color: var(--color-text); }
.decisions-section .section-title::before {
content: ''; display: inline-block;
width: 6px; height: 6px; border-radius: 1px; margin-right: 9px;
vertical-align: 1px; background: var(--color-accent);
}
.section-sub { font-size: 13px; color: var(--color-neutral-600); }
.section-count { font-size: 13px; color: var(--color-neutral-600); }
/* ---- IN MOTION — measured state, not cards ---------------------------- */
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-2 §5/§7. The figure is the object
here: a real count, set large and in the accent, with its noun beneath it in
the recessive register. No card, no border, no tile — a task dashboard counts
things in boxes; an intelligence environment simply knows its own state.
*/
.motion { display: flex; flex-wrap: wrap; gap: calc(var(--space-8) * 2); }
.motion-measure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.motion-n {
font-family: var(--font-heading); font-size: 30px; line-height: 1;
font-weight: 600; letter-spacing: -0.03em; color: var(--color-accent-300);
font-variant-numeric: tabular-nums;
}
.motion-label { font-size: 13.5px; color: var(--color-neutral-500); }
.motion-quiet {
margin: var(--space-4) 0 0; font-size: 13px; color: var(--color-neutral-600);
}
/* ---- decision cards ---- */
.decisions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* ================================================ the seven recipes =====
Authority: `Adaptive system - matrices.md` §2 and its recipe table (:76-84),
and the prototype's own recipe→arrangement mapping
(`HC Command Center.dc.html:3652-3658`).
THE BINDING CONSTRAINT OF THIS LANE IS ENCODED IN THE SELECTORS THEMSELVES.
Every rule below is scoped to a descendant of `.cmd-main` — `.decisions`,
`.decision-cards`, `.decision-rows`, `.decision`. Not one of them sets
`grid-template-columns` on `.cmd-main`. The recipe decides how the decisions
arrange INSIDE the primary column; it never decides whether the desktop
canvas is used. A dormant capability removes a module from the composition
and nothing more.
SUPERSEDED — SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 1. The
divergence this declared was from a rail that has since been REMOVED, and
it read as a live statement that the rail is still there. Verbatim:
| Recipe 1's note in the matrices says "No rail, because there is nothing to
| put in it" (:64). That is the one place this lane knowingly diverges: the
| owner's ruling is that no state may produce a single narrow column on a
| desktop canvas, and dropping the rail at recipe 1 is exactly the mechanism
| that produced one. The rail is kept and the hero takes the full primary
| column instead. Recorded in HC-B2-05.
WHAT IS TRUE NOW. There is no rail on Command at any recipe — `.cmd-rail`
is gone and `.cmd-main` is one track — so recipe 1 no longer diverges from
the matrices here and there is nothing left to keep. The ruling the
divergence served has itself been superseded: owner ruling 1 is that
Command IS a focused single column, which is the shape the earlier ruling
was written to prevent. The hero still takes the full primary column,
which is now the whole of the composition.
The paragraph above it stands and is unchanged: no rule below sets
`grid-template-columns` on `.cmd-main`, and the recipes still decide only
how the decisions arrange inside the primary column.
======================================================================= */
/* Cards: one per row by default, two equal columns where the recipe says so. */
.decision-cards {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: var(--space-4); margin-top: var(--space-4);
}
.decision-cards:first-child { margin-top: 0; }
/* Recipe 3 — "Two equal active modules". :66 "Neither gets a rank number." */
.recipe-two-equal .decision-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Recipe 4 — "One dominant module plus two compact supporting": the hero keeps
the full column, the two supporting cards sit beneath it side by side. */
.recipe-dominant-two .decision-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipe-dominant-two .decision-card { padding: var(--space-6); }
.recipe-dominant-two .decision-card .decision-title { font-size: 16.5px; }
/* Ranked rows — recipes 5 and 7, and the Returning composition. */
.decision-rows {
display: flex; flex-direction: column;
gap: 0; margin-top: var(--space-4);
}
.decision-rows:first-child { margin-top: 0; }
/*
SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1 — the boards' collapsed queue tail:
"N more that can wait longer", with a chevron, beneath the decision stated in
full. A native <details>, so it holds its own state with no script and never
drops a row — one click shows the rest.
48px is the boards' own height for this row, and it is also the touch floor
the shell SPEC records for it ("48px on the collapsed queue row"), so the one
number satisfies both.
*/
.decision-rows-more { border-top: 1px solid var(--color-neutral-900); }
.decision-rows-more-summary {
display: flex; align-items: center; gap: var(--space-2);
min-height: 48px; cursor: pointer; list-style: none;
color: var(--color-neutral-500); font-size: 14px;
}
.decision-rows-more-summary::-webkit-details-marker { display: none; }
/* The chevron is a CSS mark, so it adds nothing to the summary's own text —
the row's words stay exactly the sentence the boards wrote. */
.decision-rows-more-summary::after {
content: ''; width: 7px; height: 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg); margin-bottom: 3px;
}
.decision-rows-more[open] > .decision-rows-more-summary::after {
transform: rotate(-135deg); margin-bottom: 0;
}
.decision-rows-more-summary:hover { color: var(--color-neutral-200); }
.decision-row {
display: grid; grid-template-columns: 34px minmax(0, 1fr);
gap: var(--space-4); align-items: start;
border: 0; border-bottom: 1px solid var(--color-neutral-900);
border-radius: 0; background: transparent;
padding: var(--space-4) 0;
}
.decision-row:first-child { border-color: var(--color-neutral-900); }
.decision-row-body { min-width: 0; }
.decision-rank {
font-size: 13.5px; color: var(--color-neutral-700);
font-variant-numeric: tabular-nums; padding-top: 3px;
}
.decision-row .decision-title { font-size: 15.5px; margin-bottom: var(--space-2); }
.decision-row .decision-title, .decision-why, .decision-lead .decision-provenance {
/* §6 — "Last attempt 40m ago · provider unavailable" is real and stays
reachable, at the weight a footnote deserves rather than the weight a
headline had. */
font-size: 12.5px; color: var(--color-neutral-600); margin-top: var(--space-4);
}
.decision-provenance { max-width: 64ch; }
.decision-why { font-size: 14.5px; margin-bottom: var(--space-3); }
/* Recipe 5 — "Compact ranked rows". Denser than the Returning stack, because
the member is looking at a queue rather than at what happened while away. */
.recipe-ranked .decision-row { padding: var(--space-3) 0; }
.recipe-ranked .decision-row .decision-why { display: none; }
/* The Returning composition — matrices §2:71, "Waiting On You takes the top."
The rows keep their reason, because the member has been away and the reason
is the thing they no longer remember; only the ranked queue hides it. */
.decision {
min-width: 0;
border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
padding: var(--space-8); background: var(--color-surface);
}
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §8 — "THIS REQUIRES YOUR
DECISION", without screaming.
The lead decision was a plain white form card whose only distinction was a
recessed accent-800 hairline that reads as noise on light and as nothing at
all on dark. It now carries three quiet signals instead of one loud one: a
3px accent edge on the side the eye enters from, real elevation off the
page, and more internal room. `border-left` replaces the full accent
outline rather than adding to it — one edge, not four.
*/
/*
§6 — SOVERN HAS BROUGHT THIS TO ME, not I HAVE A TICKET.
The card kept its border on all four sides, which is the visual grammar of a
record in a list. It now reads as something set down in front of the member:
a single accent edge on the side the eye enters from, a ground faintly tinted
toward the intelligence's own accent rather than flat surface white/grey, and
real elevation off the page. No new element, no badge, no status pill.
*/
.decision-lead {
border-color: transparent;
border-left: 3px solid var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));
box-shadow: var(--shadow-md);
padding: calc(var(--space-8) * 1.15);
}
.decision-lead .decision-title {
font-size: 21px; letter-spacing: -0.018em; font-weight: 600;
}
/*
§8 — CTA PROMINENCE. The one action on the one thing that needs the member
was a quiet outlined button, indistinguishable from "All conversations" in
the section below it. On the lead decision only, it is the primary control
it actually is. Every other decision's actions are unchanged.
*/
/* `.decision-lead` only exists in the hero arrangements. `stacked`/`ranked`
lead with a compact numbered row instead, and the top of a ranked list is
just as much "the thing that needs you" as a hero is — so the primary CTA
follows the leading decision, not the shape it happens to be drawn in. */
.decision-lead .row .button,
.decision-rows > .decision:first-child .row .button {
background: var(--color-accent); border-color: var(--color-accent);
color: var(--accent-contrast); font-weight: 500;
}
.decision-lead .row .button:hover,
.decision-rows > .decision:first-child .row .button:hover {
background: var(--accent-hover); border-color: var(--accent-hover);
color: var(--accent-contrast);
}
/* The authority's hero sub-grid: the case on the left, its stake on the right. */
.decision-hero {
display: grid; grid-template-columns: minmax(0, 1fr) 250px;
gap: calc(var(--space-8) * 1.4); align-items: start;
}
.decision-hero > * { min-width: 0; }
/*
§8 — the stake column read as an appended table cell: a hairline, a label
and one line of text, with the rest of the column empty. It is now a small
integral panel — its own quiet accent ground, aligned to the top of the
case it belongs to — so it looks like part of the same argument rather than
something bolted to the side of it.
*/
.decision-stake {
align-self: start;
border-left: 2px solid var(--color-accent-600);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
display: flex; flex-direction: column; gap: var(--space-2);
}
.decision-stake-label {
/* §13 — 11.5px was under this unit's own measured 12px type floor. The
eyebrow register survives at 12px; the floor is not negotiable. */
font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
font-weight: 600; color: var(--color-accent-400);
}
.decision-stake-value { font-size: 14px; color: var(--color-neutral-300); line-height: 1.55; }
.decision-head {
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: var(--space-3);
}
.decision-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 17.5px; line-height: 1.3; letter-spacing: -0.01em;
margin: 0 0 var(--space-3); color: var(--color-neutral-100);
}
.decision-why {
margin: 0 0 var(--space-3); font-size: 14.5px; line-height: 1.65;
color: var(--color-neutral-400); text-wrap: pretty; max-width: 76ch;
}
.decision-provenance {
margin: 0 0 var(--space-4); font-size: 13.5px; color: var(--color-neutral-600);
max-width: 76ch;
}
.decision-waiting {
border-top: 1px solid var(--color-neutral-900);
margin: 0 0 var(--space-4); padding-top: var(--space-3);
display: flex; flex-direction: column; gap: var(--space-1);
}
.waiting-item {
display: flex; justify-content: space-between; gap: var(--space-4);
width: 100%; text-align: left; background: transparent; cursor: pointer;
border: 0; padding: var(--space-1) 0;
font-size: 14.5px; color: var(--color-neutral-300);
}
.waiting-item:hover { color: var(--color-accent-200); }
/* ---- continue ---- */
.continue-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "title cue" "meta cue";
gap: 2px var(--space-4);
width: 100%; text-align: left; background: transparent; cursor: pointer;
border: 1px solid transparent; border-bottom-color: var(--color-neutral-900);
border-radius: 0; padding: var(--space-3) var(--space-2);
}
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-2 §8/§11 — Continue was a column
of bordered rectangles, which is a task queue's grammar. It becomes a ruled
list: one hairline between rows, no box around any of them, and the row
itself lights on hover. Fewer arbitrary rectangles, same rows, same actions.
*/
.continue-item {
border: 0 !important; border-radius: 0 !important; background: none !important;
border-bottom: 1px solid var(--color-neutral-900) !important;
padding-left: 0; padding-right: var(--space-4);
}
.continue-item:hover {
border-color: var(--color-accent-800); border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
/* §4 — Continue is the secondary register: real, reachable, and deliberately
quieter than the decision above it. */
.continue-title { grid-area: title; font-size: 14.5px; color: var(--color-neutral-300); }
.continue-meta { grid-area: meta; font-size: 13px; color: var(--color-neutral-600); }
.continue-cue {
grid-area: cue; align-self: center;
font-size: 13.5px; color: var(--color-neutral-700);
}
.continue-item:hover .continue-cue { color: var(--color-accent-200); }
/* ---- rail modules ---- */
.rail-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.rail-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-4); align-items: baseline;
padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-900);
font-size: 14.5px;
}
.rail-row:last-child { border-bottom: 0; }
.rail-row-key { color: var(--color-neutral-400); }
.rail-row-value { color: var(--color-neutral-200); text-align: right; }
/* ---- the operational-areas band ---- */
/* `areaCols` from the authority. It wraps at its own count and does not pad to
a fixed grid — but the band itself keeps its place in the composition and
paints its honest state when the account has no areas yet. */
.areas {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--space-6) var(--space-4);
}
.area {
min-width: 0; border-top: 1px solid var(--color-neutral-800);
padding-top: var(--space-3);
}
.area-name { font-size: 14.5px; color: var(--color-neutral-200); }
.area-meta { font-size: 13.5px; color: var(--color-neutral-600); margin-top: var(--space-1); }
/* ---------------------------------------------------------------- cards */
.panel {
min-width: 0;
background: var(--color-surface);
border: 1px solid var(--color-neutral-900);
border-radius: var(--radius-md);
padding: var(--space-6);
}
.panel + .panel { margin-top: var(--space-4); }
.panel-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 16px; margin: 0 0 var(--space-2);
}
.panel-body { color: var(--color-neutral-400); font-size: 14.5px; line-height: 1.5; max-width: 80ch; }
.hero { padding: var(--space-8); }
.hero .panel-title { font-size: 19px; }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.muted { color: var(--color-neutral-600); font-size: 13.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
/* A multi-column band for any screen that has several independent panels.
Account and Getting To Know You both use it, so neither is a single narrow
stack on a desktop canvas. */
.panel-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-6); align-items: start;
}
.panel-grid > .panel + .panel { margin-top: 0; }
.panel-wide { grid-column: 1 / -1; }
/* A panel footer: the primary action at one end, the count at the other, so the
row reads as one intentionally aligned line rather than two things that
happen to sit next to each other. */
.panel-footer {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4);
}
/* ============================================== Account composition =====
Account was one `auto-fit` grid for every card on the screen, which is why
its rows did not line up: a four-track grid gave the two top cards two
tracks and left two empty, then gave Intelligence one track and left three,
then gave Usage one and left three. The cards were all correctly sized and
the screen still read as debris.
It is now three explicit regions, because the three regions genuinely have
different shapes and a single auto-fit grid cannot express that.
======================================================================= */
/* The three upper information cards: equal widths, and `stretch` so their top
AND bottom edges line up regardless of how much copy each one carries. */
.account-top {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6); align-items: stretch;
margin-bottom: var(--space-6);
}
.account-top > .panel {
margin: 0; display: flex; flex-direction: column;
}
/* The trailing action or chip row sits on the card's bottom edge, so three
cards of different copy lengths still agree on where their last line is. */
.account-top > .panel > .row:last-child { margin-top: auto; padding-top: var(--space-4); }
/* Collaborator Profile's eight fields.
Six tracks, not three: the first six fields span two tracks each (three to a
row, as before) and the last two span three tracks each. That fills the final
row cleanly with two equal-width fields instead of leaving the third column
of a three-track grid empty. */
.profile-fields {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0 var(--space-6); margin-top: var(--space-4);
}
.profile-fields > .field { grid-column: span 2; min-width: 0; }
.profile-fields > .field:nth-last-child(-n + 2) { grid-column: span 3; }
/* Plan history takes the primary width and Usage the rail measure — the same
330px the Command rail uses, so Account and Command agree on what "the
smaller right-hand column" is. `align-items: start` keeps their TOP edges
together while letting each card end at its own content. */
.account-bottom {
display: grid; grid-template-columns: minmax(0, 1fr) 330px;
gap: var(--space-6); align-items: start;
margin-top: var(--space-6);
}
.account-bottom > .panel { margin: 0; }
/* ============================================== Projects composition ====
Existing projects are the primary content, so they take the larger column.
38/62 within the shell. */
.projects-grid {
display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
gap: var(--space-6); align-items: start;
}
/* --------------------------------------------------------------- inputs */
.input, .textarea, .select {
width: 100%; background: var(--color-bg); color: var(--color-text);
border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4); font-family: var(--font-body);
/* The composer is where the member's own words live — reading-tier size,
not a form-field default, per the owner's typography recheck. */
font-size: var(--text-md);
}
.textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-neutral-700); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field > label { font-size: 13.5px; color: var(--color-neutral-400); }
/*
`hidden` MEANS HIDDEN, EVEN HERE. The UA stylesheet's `[hidden] { display: none }`
loses to any author rule that sets `display`, so every class in this file that
sets one must say it again — `.boot`, `.app`, `.sep`, `.overlay`,
`.composer-host`, `.command-blocker` and `.member-avatar` all already do.
`.field` and `.stack` set `display: flex` and did not, which made
`el(..., { hidden: true })` inert on both. The share dialog is where that
showed: it hid its end-of-range field, its model field and the whole new-tab
block by attribute, and the member saw all three regardless — including an
"Up to message" box offered for ranges whose end the client discards.
*/
.field[hidden], .stack[hidden] { display: none; }
/*
HC-HUMAN-USE-1 — semantic action hierarchy (owner recheck: the Start
button "is an appropriate physical size, but its current subdued/gray
treatment makes it too easy to miss"). `.button` (outline, accent text)
IS already the correct SECONDARY treatment for the many contextually-
important-but-not-singular actions that use it today (Save, Create, New
conversation, Take this one — several of which appear multiple times side
by side, where a filled treatment on every one would be the "gaudy"
outcome explicitly ruled out). What was missing was a real PRIMARY tier,
reserved for the one action that begins or continues the core
intelligence interaction on a given screen — Command's Start, a thread's
Ask/Send, Sign in — and a DESTRUCTIVE tier for the one place that needs
it. Four tiers, no one-off colors: every value below is a token.
*/
.button {
border: 1px solid var(--color-accent-700); background: transparent;
color: var(--color-accent-200); font-family: var(--font-heading);
font-size: 14.5px; padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md); cursor: pointer;
}
.button:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.button:active { border-color: var(--color-accent-400); }
.button[disabled] { opacity: 0.45; cursor: not-allowed; }
/* PRIMARY — filled, high-contrast. Reserved for the single action that
starts or continues the core interaction on its screen; never more than
one per view, which is what keeps this from reading as "everything is
shouting." */
.button-primary {
border: 1px solid var(--color-accent); background: var(--color-accent);
color: var(--accent-contrast); font-weight: 600;
}
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button-primary:active { background: color-mix(in srgb, var(--color-accent) 82%, black); }
.button-primary[disabled] { opacity: 0.45; cursor: not-allowed; }
/* QUIET / TERTIARY — recedes into chrome: panel toggles, Sign out, Pin. */
.button-quiet { border-color: var(--color-neutral-800); color: var(--color-neutral-400); }
.button-quiet:hover { border-color: var(--color-neutral-700); color: var(--color-neutral-200); background: transparent; }
/* DESTRUCTIVE — the one tier `.button`'s accent treatment must never
borrow, so an irreversible action never reads as an ordinary one. */
.button-destructive { border-color: var(--error); color: var(--error); background: transparent; }
.button-destructive:hover { background: color-mix(in srgb, var(--error) 12%, transparent); }
.button-destructive:active { background: color-mix(in srgb, var(--error) 22%, transparent); }
.button-small { font-size: 13.5px; padding: var(--space-1) var(--space-3); }
/* Native file inputs are the one control the design system does not carry, and
an unstyled one is the loudest thing on a Nocturne page. Tame the button. */
input[type="file"] { font-size: 14.5px; color: var(--color-neutral-500); }
input[type="file"]::file-selector-button {
border: 1px solid var(--color-neutral-800); background: transparent;
color: var(--color-neutral-300); font-family: var(--font-heading); font-size: 14.5px;
padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
margin-right: var(--space-3); cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
border-color: var(--color-accent-700); color: var(--color-accent-200);
}
.toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 14.5px; }
.toggle input { accent-color: var(--color-accent); }
.chip {
display: inline-flex; align-items: center; gap: var(--space-1);
border: 1px solid var(--color-neutral-800); border-radius: 999px;
padding: 2px var(--space-3); font-size: 13px; color: var(--color-neutral-400);
/* An identifier (a migration filename, a key) has no spaces to wrap at; at
390 it pushed the whole page sideways. It breaks inside itself instead. */
max-width: 100%; overflow-wrap: anywhere; min-width: 0;
}
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §7 — a chip is metadata, not
a control. An outlined violet pill around a word like "Unassigned" is the
"purple-everything" register the owner ruling names. Same information,
carried by a tint instead of an outline.
*/
.chip-accent {
border-color: transparent; color: var(--color-accent-300);
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
font-size: 12.5px; letter-spacing: .01em;
}
.chip-off { opacity: 0.5; }
/* -------------------------------------------------------- conversations */
/* Authority: `248px minmax(0,1fr)`, plus a `300px` inspector drawer on the
thread. Both columns are declared at desktop widths and both keep their place
when the account has nothing filed in them. */
.conversations {
display: grid; grid-template-columns: 248px minmax(0, 1fr);
gap: calc(var(--space-8) * 1.2); align-items: start;
}
.conversations > * { min-width: 0; }
.rail { display: flex; flex-direction: column; gap: var(--space-4); }
.rail-group { border-top: 1px solid var(--color-neutral-900); padding-top: var(--space-3); }
.rail-group:first-child { border-top: 0; padding-top: 0; }
.rail-heading {
font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--color-neutral-600); margin-bottom: var(--space-2);
display: flex; justify-content: space-between; align-items: center;
}
.rail-item {
display: block; width: 100%; text-align: left; background: transparent;
border: 1px solid transparent; border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3); color: var(--color-neutral-300);
font-size: 14.5px; cursor: pointer;
}
.rail-item:hover { border-color: var(--color-neutral-800); color: var(--color-neutral-100); }
.rail-item[aria-current="true"] { border-color: var(--color-accent-700); color: var(--color-accent-200); }
.rail-item .rail-meta { display: block; font-size: 13px; color: var(--color-neutral-600); }
.rail-nested { margin-left: var(--space-4); border-left: 1px solid var(--color-neutral-900); padding-left: var(--space-2); }
/* --------------------------------------------------------------- thread */
/* The thread is the conversations rail, the thread itself, and the context
inspector: three columns, the authority's `248px minmax(0,1fr) 300px`. */
.thread-layout {
display: grid;
grid-template-columns: var(--width-rail-expanded) minmax(0, 1fr) var(--width-context);
gap: calc(var(--space-8) * 1.2); align-items: start;
}
.thread-layout > * { min-width: 0; }
.rail-collapse-toggle { align-self: flex-start; margin-bottom: var(--space-2); }
.thread-layout.nav-collapsed .rail-collapse-toggle { width: 100%; }
/*
HC-HUMAN-USE-1 — independent collapse for the rail and the inspector, at
the desktop widths where `.thread-layout` is actually three columns (the
existing 1280px/1100px breakpoints below already collapse it for space
reasons of their own — this must not fight that cascade, so it is scoped
to sit above it rather than competing on selector specificity).
Collapsing the rail narrows its track (never removes it — a compact rail
stays a rail, per the width doctrine). Closing the inspector removes its
track entirely: the grid becomes two columns, so the closed panel reserves
NOTHING, rather than collapsing to width:0 and leaving a phantom track.
*/
@media (min-width: 1281px) {
.thread-layout.nav-collapsed {
grid-template-columns: var(--width-rail-collapsed) minmax(0, 1fr) var(--width-context);
}
.thread-layout.context-closed {
grid-template-columns: var(--width-rail-expanded) minmax(0, 1fr);
}
.thread-layout.nav-collapsed.context-closed {
grid-template-columns: var(--width-rail-collapsed) minmax(0, 1fr);
}
}
.turns { display: flex; flex-direction: column; gap: calc(var(--space-8) * 1.3); margin-bottom: var(--space-6); }
/*
HC-HUMAN-USE-1 — the conversation as visual primitive.
The primary test: without reading a label, can a member tell what THEY said
from what SovernCommand answered? The request is a compact, right-leaning
note on a raised surface — "the thing I handed over" — capped short of full
width so it never competes with the answer. The response has no container
at all: it sits directly on the canvas at full reading measure, because the
answer is the page's actual content, not a reply inside a chat log.
*/
.turn { display: flex; flex-direction: column; gap: var(--space-3); }
.turn-request {
align-self: flex-end;
max-width: min(var(--measure-reading), 82%);
background: var(--surface-raised);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
color: var(--text-primary);
font-size: var(--text-sm);
line-height: 1.5;
white-space: pre-wrap;
}
.turn-response {
max-width: var(--measure-reading);
color: var(--text-primary);
font-size: var(--text-md); /* primary reading — the owner's named 16-17px tier */
white-space: pre-wrap;
line-height: 1.7;
}
/*
THE TURN THAT IS STILL BEING ASKED.
The member's own words are real and are styled exactly like any other request.
The response side is not an answer yet, so it must not look like one: muted,
italic, and quietly breathing so the surface is visibly alive while a model
takes its time. The pulse carries no information about progress — the machine
does not know how far through it is — it only says "still working", which is
the one thing that is true.
*/
/* The allowance line under the mode bar: the same quiet register as the mode
note it sits beside, without answering to that class. */
.meter-note { margin-top: var(--space-2); font-size: var(--text-xs); }
.turn-response-pending {
color: var(--text-muted);
font-style: italic;
animation: turn-pending-breathe 1.6s ease-in-out infinite;
}
@keyframes turn-pending-breathe {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.turn-response-pending { animation: none; opacity: 0.8; }
}
.turn-failure {
max-width: var(--measure-reading);
border: 1px solid var(--color-accent-800);
border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.turn-failure .why { color: var(--color-accent-200); font-size: var(--text-sm); }
.turn-failure .action { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-2); }
/* Technical metadata — context version, model, fingerprint — recedes well
below the answer it describes; it is provenance, not content. */
.turn-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.turn-meta .chip { font-size: var(--text-2xs); color: var(--text-muted); opacity: 0.8; }
/*
HC-DESIGN-SLICE-1 — `.composer` no longer carries its own placement rule.
It used to be positioned twice, once per grid it happened to render inside:
plain flow on the Command dashboard, and sticky-positioned on a thread —
which only worked because that column's nearest scrolling ancestor was the
document, the exact fragility this slice removes. Placement now belongs
entirely to `.composer-host`, the one shell-level element both Command and
a thread mount into; `.composer` itself is just the card, wherever it is
mounted.
*/
.composer { border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); }
.composer .textarea { border: 0; background: transparent; padding: var(--space-2); }
/*
HC-HOME-DESIGN-RECONCILE-2 — `.textarea`'s own base rule (line ~638) sets
`min-height: 84px` for every ordinary form use of it; Command's entry
point is not an ordinary form field, and the approved artifact's own
composer is genuinely one line tall until the member types more. Scoped
to `.entry` only — a thread's composer keeps the taller default, since it
already carries a mode switch and chooser above it.
*/
.entry .composer .textarea { min-height: 0; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mic { border: 1px solid var(--color-neutral-800); background: transparent; color: var(--color-neutral-400);
border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; flex-shrink: 0; }
.mic[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-200); }
.mic[disabled] { opacity: 0.4; cursor: not-allowed; }
/*
HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R3 — Command's own composer is a
single compact row (mic, field, send), narrower than the content column
and floating centered, matching the approved artifact's own composer
proportions rather than the full-shell-width, two-row panel this had
drifted into. `.entry-captions` held the two short factual lines that lane
restored beneath it; SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §6
reduces that to ONE — the dictation line moved onto the mic control's own
tooltip, in full. See buildPrimaryComposer.
*/
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §6 — this is the product's
SIGNATURE ENTRY POINT, not a chat box parked at the bottom of a page. It is
the one address for the intelligence, and it is what routes work to a
conversation, Compare, Council or Studio. It now reads that way: a wider,
softer, genuinely elevated shell that sits ON the page rather than in it,
a taller input surface, and a field set at reading size instead of form
size. Placement, persistence, send behaviour, dictation and routing are all
untouched — this rule set changes nothing but presence.
*/
/* The composer reads at the content column's own measure — the composition
has one axis, not two.
SOVERNCOMMAND-COMMAND-VISUAL-REVISION-1, owner ruling 2. The rule's own
stated intent is "the content column's own measure", and that is kept
exactly; what changes is that the content column is now the board's 760px
rather than the 880px this product had picked for itself. Superseded
verbatim: `.entry { max-width: 880px; margin: 0 auto; }` — measured at 880px
against a board specifying 760px, in both themes. */
.entry { max-width: var(--vs-measure-command); margin: 0 auto; }
/*
§9 — the owner's square master, at the head of the entry point. `--brand-mark`
is the same theme token nocturne.css declares beside `--brand-logo`, so this
is the supplied artwork selected by the same polarity authority: nothing
derived from the wordmark, nothing redrawn.
*/
.composer-origin {
width: 22px; height: 22px; flex-shrink: 0;
background-image: var(--brand-mark);
background-repeat: no-repeat; background-position: center;
background-size: contain;
opacity: 0.9;
}
/*
HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R5 — OWNER VISUAL REJECTION of
R3/R4's single flat surface. The approved composer is TWO nested
surfaces: `.composer` is the OUTER floating shell (substantial
padding, its own border, distinct from the page), and
`.composer-input-surface` is a SEPARATE inner rounded surface nested
inside it, holding the field and controls. Captions are children of
`.composer` (inside the outer shell), not a sibling of it.
*/
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-2 §9 — the environment's ORIGIN,
not a utility pasted over it.
Three changes, all restraint: it takes the same measure the content column
reads at rather than an unrelated width, so it belongs to the composition; it
sits on a genuinely raised surface with the intelligence's own accent in its
edge; and it carries the SOVERN mark at its head (see buildPrimaryComposer)
so the member can see whose entry point it is. It is not a hero form and it
did not grow: persistence, placement, send, keyboard, routing and dictation
are untouched.
*/
.entry .composer {
padding: var(--space-4); border-radius: 18px;
border-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-neutral-800));
background: var(--surface-raised);
box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; gap: var(--space-3);
}
/* The whole shell answers to the field inside it, so the entry point reads
as live the moment the member is in it. */
.entry .composer:focus-within { border-color: var(--color-accent-600); }
.composer-input-surface {
border: 1px solid var(--color-neutral-800); border-radius: 13px;
background: var(--color-bg); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
display: flex; align-items: center; gap: var(--space-2);
}
.composer-row .textarea { flex: 1; min-height: 0 !important; padding: 8px var(--space-2); }
.entry .composer-row .textarea { font-size: 15.5px; }
.entry .composer-row .textarea::placeholder { color: var(--color-neutral-500); }
.composer-row .button { flex-shrink: 0; }
/*
HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R5 — mic and send are compact
ROUNDED-SQUARE controls of the same size, matching Image 1 (owner
rejection: they were circular "bubbles").
FINAL CONTROL HIERARCHY CORRECTION — owner ruling: the solid purple
send fill was never the problem, so `.composer-send` no longer
overrides color at all — `.button-primary` (on the same element, see
buildPrimaryComposer) supplies that, exactly as it always has,
including its own tested hover/active/disabled states. This rule is
SHAPE only: same size and radius as `.mic` (secondary, dark/outlined,
unchanged) — a deliberate primary/secondary hierarchy sharing one
geometric family, not a fill mismatch. Bumped 30px -> 34px: the owner's
own visual review read 30px as too small.
*/
.mic, .composer-send {
width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; cursor: pointer;
}
/*
Captions live INSIDE the outer shell, directly beneath the inner input
surface, left-aligned with it — not centered, not hanging below the
composer as separate page text (both were named defects in the R5
owner rejection).
*/
/*
§6 — ONE line now lives here, not two (see buildPrimaryComposer: the
dictation privacy sentence moved onto the mic control's own tooltip, in
full). Given the room the second line used to take, it sits inset with the
input surface rather than crowding it.
*/
.entry-captions { text-align: left; padding: 0 var(--space-2); }
.composer-caption {
margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-500);
}
/*
HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R5 — the shared composer host's
own full-bleed background/blur/border-top (below) is what made Command's
composer read as a conventional page-bottom dock — a wash spanning the
ENTIRE viewport width, behind a card that is itself only 760px wide.
Suppressed specifically when Command's `.entry`-wrapped composer is the
mounted content (`:has()`, well-supported in the evergreen browsers this
product targets) — a thread's own composer, out of this lane's scope,
keeps the host's backdrop exactly as before.
*/
/*
§9 — the full-bleed dock was removed in an earlier lane because it read as
page furniture. Nothing replaced it, so content simply collided with the
composer's edge. A soft veil of the page's OWN ground is not chrome: it has
no border, no panel and no colour of its own, and it lets the column dissolve
beneath the entry point instead of being cut by it.
*/
.composer-host:has(.entry) {
background: linear-gradient(to bottom,
transparent 0%,
color-mix(in srgb, var(--color-bg) 55%, transparent) 34%,
color-mix(in srgb, var(--color-bg) 92%, transparent) 62%,
var(--color-bg) 100%);
backdrop-filter: none; border-top: none;
padding-top: calc(var(--space-8) * 1.4);
}
/* ---------------------------------------------------- context inspector */
.inspector { position: sticky; top: 78px; }
.ctx-level { border-top: 1px solid var(--color-neutral-900); padding: var(--space-3) 0; }
.ctx-level:first-of-type { border-top: 0; }
.ctx-level-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.ctx-level-name { font-size: var(--text-sm); color: var(--color-neutral-300); }
.ctx-level-count { font-size: 13px; color: var(--color-neutral-600); }
.ctx-source { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.ctx-source-label { font-size: var(--text-sm); color: var(--color-neutral-400); }
.ctx-source[data-enabled="false"] .ctx-source-label { color: var(--color-neutral-700); text-decoration: line-through; }
.ctx-source input[type="checkbox"] { accent-color: var(--color-accent); }
.fingerprint { font-family: ui-monospace, monospace; font-size: 13px; color: var(--color-neutral-600); word-break: break-all; }
/* Progressive disclosure for module-level instrumentation — technical
detail (fingerprints, hashes) that is real transparency but should not
compete with the module's actual content by default. */
.module-detail { margin-top: var(--space-2); }
.module-detail summary {
cursor: pointer; color: var(--text-muted); font-size: var(--text-xs);
list-style: none;
}
.module-detail summary::-webkit-details-marker { display: none; }
.module-detail summary::before { content: '▸ '; }
.module-detail[open] summary::before { content: '▾ '; }
.module-detail summary:hover { color: var(--text-secondary); }
.module-detail .fingerprint { margin-top: var(--space-1); }
/* -------------------------------------------------------------- overlay */
.overlay {
position: fixed; inset: 0; display: grid; place-items: center;
background: color-mix(in srgb, var(--color-bg) 82%, transparent); z-index: 20; padding: var(--space-6);
}
.overlay[hidden] { display: none; }
.overlay-card {
background: var(--color-surface); border: 1px solid var(--color-neutral-800);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
padding: var(--space-8); max-width: 520px; width: 100%;
}
.overlay-title { font-family: var(--font-heading); font-size: 17px; margin: 0 0 var(--space-3); }
.overlay-body { color: var(--color-neutral-400); font-size: 14.5px; line-height: 1.55; }
.overlay-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
/* ------------------------------------------------------------- firstrun */
/* Authority: First Run sits on its own narrower 1100px measure — it is a
composed screen at that measure, not a 660px column on a 1400px canvas. */
.firstrun { max-width: 1100px; margin: 0 auto; }
.firstrun-question { font-family: var(--font-heading); font-size: 26px; margin: 0 0 var(--space-3); letter-spacing: -0.015em; }
.firstrun-why { color: var(--color-neutral-500); font-size: 14.5px; margin-bottom: var(--space-6); max-width: 76ch; }
.firstrun-progress { display: flex; gap: 4px; margin-bottom: calc(var(--space-8) * 1.4); }
.firstrun-dot { height: 2px; flex: 1; background: var(--color-neutral-900); border-radius: 2px; }
.firstrun-dot.done { background: var(--color-accent-700); }
.firstrun-dot.current { background: var(--color-accent); }
/* The three ways in sit side by side, as the authority shows them. */
.firstrun-ways {
margin-top: calc(var(--space-8) * 1.4);
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4); align-items: start;
}
/* The question step: the prompt on the left of its reason, the authority's
`190px minmax(0,1fr)` review row. */
.firstrun-step { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: calc(var(--space-8) * 1.4); align-items: start; }
.firstrun-step > * { min-width: 0; }
.firstrun-review-row {
display: grid; grid-template-columns: 190px minmax(0, 1fr);
gap: var(--space-6); align-items: baseline;
padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-neutral-900);
margin-bottom: var(--space-3);
}
/* The recommendation offered at the third calibration question. Offered, never
pre-filled — a field the member skipped past must stay absent. */
.firstrun-suggestion {
margin-top: var(--space-4); padding: var(--space-4);
border: 1px dashed var(--color-neutral-800); border-radius: var(--radius-sm);
display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
}
/* ---------------------------------------------------------------- lists */
/*
HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R3 — Continue reads as one grouped
card (matching the decision card's own bordered surface) rather than a
set of rows whose only edge is a hairline between them and an ambiguous
boundary with the page around it.
*/
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-2 §8/§11 — the list was a panel:
a bordered, filled rectangle wrapped around rows that are themselves already
separated. That is a task queue's container. It becomes a ruled list — a
hairline above the first row and between rows, no box, no fill — so Continue
reads as things worth returning to rather than a tray of tickets.
*/
.itemlist {
display: flex; flex-direction: column;
border: 0; border-top: 1px solid var(--color-neutral-900);
border-radius: 0; padding: 0; background: none;
}
.itemlist .continue-item { border-bottom-color: var(--color-neutral-900); }
.itemlist .continue-item:last-child { border-bottom-color: transparent; }
.item {
border: 1px solid var(--color-neutral-900); border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
}
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.item-title { font-size: 15px; color: var(--color-neutral-200); }
.item-sub { font-size: 13.5px; color: var(--color-neutral-600); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-neutral-900); }
.table th { color: var(--color-neutral-600); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.table td { color: var(--color-neutral-400); }
.table-scroll { overflow-x: auto; }
.empty { color: var(--color-neutral-600); font-size: 14.5px; padding: var(--space-4) 0; }
/* ---- header identity ---- */
.member-name { font-size: 14.5px; color: var(--color-neutral-200); }
.member-intent {
font-size: 14.5px; color: var(--color-neutral-600);
max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §2 — the leading rule was
written for a single baseline-aligned run of identity text. `.member-block`
stacks name over role, so on the second line it rendered as a stray tick
hanging in front of the member's own stated role. The two lines are already
separated by being two lines.
*/
/* ==================================================== responsive =========
The layout-rule matrix's last row, and the only collapse it authorises:
"viewport under 1100px · any composition with a rail → Stacked. Rail
content follows the primary column in the same order of consequence."
Above 1100px nothing here collapses. The desktop canvas is used at every
desktop width, and 1280px is the tablet-landscape step where the thread's
third column folds into the second.
======================================================================= */
/* ------------------------------------------- HC-MODELS-1 · the workspace */
/* The mode switch, frozen design CC:746-751 — a segmented control, and a
right-aligned note beside it (CC:753). */
.mode-bar { margin-bottom: var(--space-4); gap: var(--space-6); flex-wrap: wrap; }
.mode-switch {
display: flex;
gap: var(--space-2);
padding: 3px;
border: 1px solid var(--color-neutral-900);
border-radius: var(--radius-md);
}
.mode-button {
border: 0;
background: transparent;
color: var(--color-neutral-400);
font-size: 14.5px;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
}
.mode-button:hover { color: var(--color-accent-200); }
.mode-button.is-active {
background: var(--color-neutral-900);
color: var(--color-neutral-100);
}
/* Discoverable, not hidden, and honest about not being built. Doctrine: no
locked-module graveyard, and never a dead end. */
.mode-button.is-unavailable { color: var(--color-neutral-700); }
.mode-button.is-unavailable:hover { color: var(--color-neutral-500); }
.mode-note,
/* The metering disclosure under a mode switch: same typography, its own name,
so `.mode-note` identifies exactly the note that describes the mode. */
.meter-note {
font-size: 13.5px;
color: var(--color-neutral-600);
max-width: 52ch;
text-align: right;
}
.model-select-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.model-select-wrap .select { width: auto; }
.compare-chooser { margin-bottom: var(--space-4); }
.compare-chooser .row.wrap { flex-wrap: wrap; gap: var(--space-2); margin-top: 6px; }
.chip-toggle {
cursor: pointer;
border: 1px solid var(--color-neutral-800);
background: transparent;
color: var(--color-neutral-400);
}
.chip-toggle:hover { border-color: var(--color-accent-600); color: var(--color-accent-200); }
.chip-toggle[disabled] { cursor: not-allowed; opacity: 0.45; }
.chip-toggle[disabled]:hover { border-color: var(--color-neutral-800); color: var(--color-neutral-400); }
.chip-toggle.is-on {
border-color: var(--color-accent-700);
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
color: var(--color-accent-200);
}
/* The Compare note bar, CC:815-818. */
.compare-note {
display: flex;
align-items: flex-start;
gap: var(--space-4);
flex-wrap: wrap;
border: 1px solid var(--color-accent-800);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
background: color-mix(in srgb, var(--color-accent) 5%, transparent);
font-size: 15px;
line-height: 1.65;
color: var(--color-neutral-300);
margin-bottom: var(--space-4);
}
.link-button {
border: 0;
background: transparent;
padding: 0;
color: var(--color-accent-300);
font-size: 15px;
cursor: pointer;
}
.link-button:hover { color: var(--color-accent-200); }
/* Two-column result cards, CC:819 — repeat(2, minmax(0,1fr)). */
.compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.compare-card {
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
min-width: 0;
}
.compare-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--color-neutral-900);
}
/* The model identity is a label, not a headline: distinguished by weight, not
size, so it never competes with the answer beneath it. The metadata beside
it (provider, timing, retries) recedes further still — it is provenance. */
.compare-model { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.compare-meta { font-size: var(--text-2xs); color: var(--text-muted); text-align: right; opacity: 0.85; }
.compare-card-body { padding: var(--space-6); flex: 1; }
.compare-body-text {
font-size: var(--text-md); /* primary reading — the owner's named 16-17px tier */
line-height: 1.7;
max-width: var(--measure-reading);
color: var(--text-primary);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.compare-card-foot {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-neutral-900);
}
/* Per-participant state is visible, and each card carries only its own. */
.compare-card.is-streaming { border-left: 2px solid var(--color-accent-700); }
.compare-card.is-failed,
.compare-card.is-timeout { border-left: 2px solid var(--color-neutral-700); }
.compare-card.is-completed { border-left: 2px solid transparent; }
.compare-run { display: block; }
.compare-live:empty { display: none; }
@media (max-width: 1280px) {
/* Tablet landscape: the context inspector follows the thread rather than
squeezing three columns into a width that cannot carry them. */
.thread-layout { grid-template-columns: 248px minmax(0, 1fr); }
.thread-layout > .inspector { grid-column: 1 / -1; position: static; }
.cmd-main { grid-template-columns: minmax(0, 1fr) 300px; }
.account-bottom { grid-template-columns: minmax(0, 1fr) 300px; }
/*
The band's 300px minimum track was calibrated when it spanned the whole
shell. Inside the main column it still gives three tracks at the review
width, but at tablet landscape it drops to two and leaves the third card
alone beside an empty cell. Three explicit equal tracks here, because the
band holds exactly three modules and wrapping one of them off is the
accidental empty column this pass exists to remove.
*/
.cmd-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.cmd-main { grid-template-columns: minmax(0, 1fr); }
.cmd-bands { grid-template-columns: minmax(0, 1fr); }
/* The recipes stack too, since the rail composition they sit in has stacked.
This is the matrices' own last row (:72) reaching the whole composition,
not a separate collapse. */
.recipe-two-equal .decision-cards,
.recipe-dominant-two .decision-cards { grid-template-columns: minmax(0, 1fr); }
.decision-hero { grid-template-columns: minmax(0, 1fr); }
.decision-stake { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-neutral-900); padding-top: var(--space-4); }
.conversations { grid-template-columns: minmax(0, 1fr); }
.thread-layout { grid-template-columns: minmax(0, 1fr); }
.firstrun-step { grid-template-columns: minmax(0, 1fr); }
.panel-grid { grid-template-columns: minmax(0, 1fr); }
/* Below the rail-composition breakpoint every one of this lane's grids
stacks, for the same reason the matrices give at :72 — the composition
they sit in has stacked, so a second set of columns underneath it would be
a rail with nothing beside it. */
.account-top { grid-template-columns: minmax(0, 1fr); }
.account-top > .panel > .row:last-child { margin-top: var(--space-4); padding-top: 0; }
.account-bottom { grid-template-columns: minmax(0, 1fr); }
.projects-grid { grid-template-columns: minmax(0, 1fr); }
.profile-fields { grid-template-columns: minmax(0, 1fr); }
.profile-fields > .field,
.profile-fields > .field:nth-last-child(-n + 2) { grid-column: auto; }
/* Compare's two columns stack for the same reason every other grid here
does: the composition they sit in has stacked. */
.compare-grid { grid-template-columns: minmax(0, 1fr); }
.mode-note, .meter-note { text-align: left; }
/* HC-DESIGN-SLICE-1 — same composer-footprint clearance as the desktop
rule above; only the fallback (routes with no composer mounted) and the
top/side padding are this breakpoint's own. */
.main { padding: var(--space-8) var(--space-6) var(--composer-clearance, calc(var(--space-8) * 3)); }
.topbar { padding: 8px var(--space-6); }
}
/* ---- the settings system ----------------------------------------------
A PERSISTENT MENU AND ONE FOCUSED PAGE. The menu keeps its place while the
page beside it changes, which is the whole difference between a settings
system and a long document with headings: the member always knows what else
exists and how to get there, and never scrolls past four unrelated subjects
to reach the fifth.
The rail is `position: sticky` rather than fixed so it scrolls WITH a long
page until it reaches the top, then stays — a fixed rail would float over the
header on short viewports.
*/
/* The rail and the page are ONE object, centred together. Left-jamming them
left a 530px void on the right that read as a rendering fault rather than a
layout. */
.settings {
display: grid;
grid-template-columns: 200px minmax(0, 760px);
gap: var(--space-6);
align-items: start;
justify-content: center;
padding-bottom: var(--space-8);
}
.settings-rail { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.settings-back {
align-self: flex-start; background: none; border: 0; padding: 0;
color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer;
}
.settings-back:hover { color: var(--text-primary); }
.settings-rail-head { display: flex; flex-direction: column; gap: var(--space-2); }
.settings-eyebrow {
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted); font-weight: 600;
}
.settings-menu { display: flex; flex-direction: column; gap: 2px; }
.settings-menu-item {
text-align: left; background: none; border: 0; cursor: pointer;
padding: 9px var(--space-4); border-radius: var(--radius-md);
color: var(--text-secondary); font: inherit; font-size: 14.5px;
transition: background-color 120ms ease, color 120ms ease;
}
.settings-menu-item:hover { background: var(--surface-hover); color: var(--text-primary); }
/* The current topic is stated, not merely tinted — a member should be able to
tell what they are looking at without comparing shades. */
/* The current topic was ambiguous at a glance — a pale fill on a pale ground.
A solid left marker states it instead of implying it. */
.settings-menu-item.is-current {
background: var(--surface-selected); color: var(--text-primary); font-weight: 600;
box-shadow: inset 2px 0 0 var(--color-accent);
}
/* A SETTINGS PAGE IS FOR READING AND DECIDING, so it keeps a reading measure
rather than stretching to the shell. Full-width cards pushed sentences past
1,400px and put a form's label a screen away from its field. */
.settings-page {
min-width: 0; max-width: 760px;
display: flex; flex-direction: column; gap: var(--space-4);
}
.settings-page-head { display: flex; flex-direction: column; gap: 4px; }
/* Panels stack in ONE column here, deliberately. A settings page has one
subject; a two-column grid would invite a second one back in. */
.settings-stack { display: flex; flex-direction: column; gap: var(--space-4); }
/* A credit balance is a QUANTITY, so it is shown as one. Two identical pills
reading "15,000 available" and "15,000 per month" made the member do the
subtraction themselves to learn they had spent nothing. */
.meter { display: flex; flex-direction: column; gap: var(--space-2); }
.meter-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.meter-figure { font-size: 30px; font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.meter-label { color: var(--text-secondary); font-size: 14px; }
.meter-track {
height: 6px; border-radius: 999px; background: var(--color-neutral-900); overflow: hidden;
}
.meter-fill { height: 100%; background: var(--color-accent); border-radius: 999px; }
/* ONE PRIMARY ACTION PER PAGE. Every button in the first cut was an outline,
and the same label was lavender on one page and grey on another, so there
was no rule a member could infer. */
.settings-page .button-primary {
background: var(--color-accent); border-color: var(--color-accent);
color: var(--accent-contrast);
}
.settings-page .button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* A button is a button; the underline read as a rendering fault. */
.settings-page a.button { text-decoration: none; }
/* The answer to "did that work?", stated once at the top of the page the member
was returned to. */
.notice {
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
border: 1px solid var(--border-subtle); font-size: 14.5px;
}
.notice-ok { border-color: var(--success); color: var(--text-primary); }
.notice-warn { border-color: var(--warning); color: var(--text-primary); }
.share-row { display: flex; gap: var(--space-3); align-items: center; }
.share-row .input { flex: 1 1 auto; min-width: 0; }
.share-row .button { flex: 0 0 auto; }
.linklike {
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--text-muted); font: inherit; text-decoration: underline;
}
.linklike:hover { color: var(--text-primary); }
.settings-stack > .panel { width: 100%; }
@media (max-width: 900px) {
/*
THE MOBILE NAVIGATION TAX. Wrapping eight topics across three ragged lines
pushed the page title a third of the way down the viewport, so a member met
640px of chrome before the first word of their own data.
ONE ROW THAT SCROLLS, not a drawer: §10 rules out a drawer, and a settings
menu that hides itself is the dump problem in miniature. The active chip is
scrolled into view by the shell so it is never off-screen.
*/
.settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-6); }
.settings-rail { position: static; gap: var(--space-2); }
/* "← Back to Command" and the SETTINGS eyebrow shared a baseline and read as
a wrapping accident. The eyebrow is redundant beside the H1 below it at
this width, so it stands down rather than crowding. */
.settings-rail-head { flex-direction: row; align-items: baseline; gap: var(--space-3); }
.settings-rail-head .settings-eyebrow { display: none; }
.settings-menu {
flex-direction: row; flex-wrap: nowrap; gap: var(--space-2);
overflow-x: auto; scrollbar-width: none;
/* Bleed to the shell edge so the strip reads as scrollable rather than
arbitrarily clipped, and FADE the trailing edge — a label sliced flat
mid-word ("Network & sharin") reads as broken rendering, not as a
scroller. The mask says "there is more" in the only way a strip can. */
margin: 0 calc(-1 * var(--space-4)); padding: 2px var(--space-4);
scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--space-4),
#000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--space-4),
#000 calc(100% - 28px), transparent 100%);
}
.settings-menu::-webkit-scrollbar { display: none; }
.settings-menu-item {
padding: 7px var(--space-3); font-size: 13.5px; white-space: nowrap;
border: 1px solid var(--border-subtle); border-radius: 999px; scroll-snap-align: start;
}
.settings-menu-item.is-current { box-shadow: none; border-color: var(--color-accent); }
.settings-page-head .page-title { font-size: 28px; }
/*
A TABLE THAT CANNOT FIT MUST SCROLL, NOT CLIP. Plan history was slicing its
own header mid-word — "UNTIL" rendered as "UN" — with nothing to indicate
the row continued.
*/
/*
A TABLE THAT CANNOT FIT MUST SCROLL, NOT DROP COLUMNS. Plan history was
silently losing FROM and UNTIL — the two facts a member actually reads —
with nothing to indicate the row continued.
*/
.settings-page .table-scroll {
overflow-x: auto; -webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.settings-page .table { min-width: 520px; }
}
/*
HC-DESIGN-SLICE-1 — the first phone-tier acceptance width this product has
faced (390px human-use acceptance; the audit found no breakpoint below
1100px anywhere in this file). Scoped to what actually needs it: the
composer host's own edge padding, and the two composer-internal rows wide
enough to overflow their card at this width — `.mode-switch`'s four
buttons (One model / Compare / Send to several / Council) and
`.composer-actions`'s mic/status/send row. Everything else the composer
depends on (`.row`, `.mode-bar`) already wraps.
*/
@media (max-width: 480px) {
.composer-host { padding-left: var(--space-3); padding-right: var(--space-3); }
.mode-switch { flex-wrap: wrap; }
.composer-actions { flex-wrap: wrap; row-gap: var(--space-2); }
/*
SUPERSEDED IN PART — SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1. The rule is
KEPT: the bar still wraps, because it still carries identity, the member
chip, the drawer toggle and the phone `New command`. What cannot recur is
the specific collision described below, because the nav is no longer a
flex sibling in this bar at all — it is the rail, revealed as a drawer,
which renders as a panel over the page rather than as a taller sibling
inside the row. The parenthetical "§10's own 'never a hamburger, a drawer
or a rail' holds at every width" is the superseded claim; every other word
of it still holds. Kept verbatim:
| HC-DESIGN-SLICE-4 — `.topbar` itself never wrapped as a whole (only
| `.topbar-nav`'s own links did, line ~109), so at this width its four
| flex children — identity, nav, theme toggle, sign out — stayed on one
| nowrap row while the nav's now-multi-line content grew taller than its
| siblings; `align-items: center` then centred the single-line siblings
| across that full height, landing them visually on top of the nav's own
| wrapped second line. Real member identity text made this worse (a
| longer display name has no ellipsis and does not shrink). Not a new nav
| mechanism — the same flat, always-visible row (§10's own "never a
| hamburger, a drawer or a rail" holds at every width) — just letting the
| whole bar wrap onto calm, non-overlapping rows the way `.topbar-nav`
| already wraps its own links.
*/
/*
SOVERNCOMMAND R7 — the same class of defect as `.topbar` above, found by the
390px acceptance proof: `.row-between` never wrapped as a whole. A thread's
header puts the title on one side and Pin / Branch / Archive / the project
select / Show context on the other, and at 390px those two halves cannot sit
side by side — the action group was pushed to 406px against a 390px
viewport, giving the whole page a horizontal scrollbar.
`.row` already wraps and `.row-between` did not, which is the entire bug:
the inner group wrapped its own buttons happily while the outer pair could
not drop onto a second line. Letting it wrap engages ONLY when the content
would otherwise overflow, so nothing that already fits moves.
The select is capped too. A `<select>` sizes to its widest option and does
not shrink, so a long project name would push past the edge again on its
own even once the halves stack.
*/
.row-between { flex-wrap: wrap; row-gap: var(--space-2); }
.select { max-width: 100%; }
.topbar { flex-wrap: wrap; row-gap: var(--space-2); }
/*
SUPERSEDED — SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1. Kept verbatim:
| THE CLUSTER DIVIDER IS A DESKTOP ORNAMENT. It is the right border on
| the first nav cluster, and it separates the interaction destinations
| from the capability ones — which is meaningful on one line and
| meaningless once the bar wraps, where it dangles at the end of a row
| separating nothing.
| #nav > .nav-cluster:first-child:not(:empty) { padding-right: 0; border-right: 0; }
There are no clusters left to divide: the boards group the destinations as
five rows under `Surfaces` and Societi under `Protocol`, and `#nav` is not
in this bar any more.
*/
.topbar .sep, #memberSep { display: none; }
.topbar-identity { flex-wrap: wrap; row-gap: 2px; }
/*
SUPERSEDED — SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1. Kept verbatim:
| SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-1 §3 — the wrapped bar put
| Account / Theme / Sign out ABOVE the primary destinations, because the
| actions cluster is earlier in source order and only the nav carried an
| `order`. Reading order now matches the hierarchy the header claims at
| every other width: identity, then where you can go, then account
| utilities. Both are still one flat always-visible row set — no drawer,
| no hamburger — and neither overlaps the other.
| .topbar-nav { flex: 1 1 100%; order: 2; justify-content: flex-start; }
THE READING-ORDER RULING SURVIVES, by a mechanism that no longer needs an
`order` override at all: identity, then the way to the destinations, then
the account utilities is now the bar's own SOURCE order
(`.topbar-identity`, `#navToggle`, `.topbar-actions`). The `order: 2` was
only ever needed because the nav was the LAST child; the toggle that
replaced it is the second. So the hierarchy is carried by the document
rather than by a counter-ordering, and there is no width at which the two
can be read in the wrong sequence.
*/
.topbar-actions { order: 3; }
/*
SOVERNCOMMAND-COMMAND-HOME-VISUAL-AUTHORITY-2 §13 — at phone width the
member's name and role wrapped to two and three lines inside a row that
also carries Theme and Sign out, which is legible but cramped and steals
the header's remaining calm. The avatar — a real initial from their own
written name — stays; the text is one tap away on Account. Nothing is
removed from the DOM, so nothing about identity becomes unreachable.
*/
.member-block { display: none; }
#memberSep { display: none; }
/* The actions cluster's own left border reads as clutter once it has
wrapped onto row 1 beside identity at this width, not as a divider
between two things sharing a row with the primary nav. */
.topbar-actions { padding-left: 0; border-left: none; }
}
/* ========================================================================= */
/* COUNCIL — HC-COUNCIL-1 */
/* Frozen design CC:878-1206. The accent-bordered head bar, the four tabs, */
/* the two-column position grid and the split/agree pair are the design's, */
/* not this lane's. */
/* ========================================================================= */
.council { display: contents; }
.council-panel { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
/* CC:881 — the accent-bordered head bar. */
.council-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
border: 1px solid var(--color-accent-800);
background: color-mix(in srgb, var(--color-accent) 5%, transparent);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
}
.council-lead { font-size: 14.5px; color: var(--color-neutral-100); }
.council-members { font-size: 13.5px; color: var(--color-neutral-500); }
.council-round { font-size: 13.5px; color: var(--color-accent-200); }
.council-tabbar { gap: var(--space-4); flex-wrap: wrap; }
.council-context-toggle { border-style: dashed; }
.council-context, .council-evidence {
border: 1px solid var(--color-neutral-900);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.council-context-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--space-8);
}
.council-context-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-neutral-900); }
.council-context-name { font-size: 14.5px; color: var(--color-neutral-100); }
.council-context-level { font-size: 13.5px; color: var(--color-neutral-500); }
.council-notsent { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-600); max-width: 84ch; }
.council-fingerprint code { font-size: 13.5px; color: var(--color-neutral-500); overflow-wrap: anywhere; }
/* CC:933-964 — the automatic panel. */
.council-auto {
border: 1px solid var(--color-neutral-800);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.council-auto-line { font-size: 15px; color: var(--color-neutral-100); }
.council-auto-note { font-size: 13.5px; color: var(--color-neutral-600); }
.council-progress { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.council-step {
font-size: 13.5px;
color: var(--color-neutral-600);
border: 1px solid var(--color-neutral-800);
border-radius: var(--radius-sm);
padding: 4px 10px;
}
.council-step.is-done { color: var(--color-accent-200); }
.council-step.is-current {
color: var(--color-accent-200);
border-color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.council-arrow { font-size: 13px; color: var(--color-neutral-800); }
/* CC:966-988 — round 1 and the position cards. */
.council-round-one { display: flex; flex-direction: column; gap: var(--space-4); }
.council-blind-note { font-size: 13.5px; color: var(--color-neutral-600); }
.council-positions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.council-card {
background: var(--color-surface);
border: 1px solid var(--color-neutral-800);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
.council-card.is-lead { border-color: var(--color-accent-700); }
.council-card-model { font-size: 15px; color: var(--color-neutral-100); }
.council-card-tag {
font-size: 13px;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--color-neutral-600);
}
.council-card.is-lead .council-card-tag { color: var(--color-accent-200); }
.council-card-body {
font-size: 14.5px;
line-height: 1.6;
color: var(--color-neutral-400);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.council-card-failed { font-size: 14.5px; color: var(--color-neutral-600); }
/* CC:990-1013 — the directed-exchange router. */
.council-router {
border: 1px solid var(--color-accent);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-8);
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.council-router-note { font-size: 14.5px; line-height: 1.6; color: var(--color-neutral-400); max-width: 80ch; }
.council-note { width: 100%; }
.council-router-actions { margin-top: var(--space-3); }
/* CC:1015-1036 — the exchange log. */
.council-log { display: flex; flex-direction: column; gap: var(--space-6); }
.council-log-entry { display: flex; flex-direction: column; gap: var(--space-3); }
.council-log-scope { font-size: 13.5px; color: var(--color-neutral-600); }
.council-log-routed { border-left: 2px solid var(--color-accent-700); padding-left: var(--space-6); }
.council-log-position {
font-size: 15px;
line-height: 1.65;
color: var(--color-neutral-300);
max-width: 86ch;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.council-log-instruction { font-size: 13.5px; color: var(--color-neutral-600); margin-top: var(--space-3); }
.council-log-reply {
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--space-6) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* CC:1037-1057 — the proposal and the completion bar. */
.council-proposal, .council-complete {
border: 1px solid var(--color-accent);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-8);
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.council-complete { border-color: var(--color-accent-800); flex-direction: row; align-items: center; }
.council-proposal-text { font-size: 16.5px; line-height: 1.7; color: var(--color-neutral-100); max-width: var(--measure-reading); }
.council-proposal-meta, .council-proposal-foot { font-size: 13.5px; color: var(--color-neutral-600); }
/* CC:1060-1161 — synthesis. */
.council-synthesis { display: flex; flex-direction: column; gap: var(--space-6); }
.council-resolution-by { font-size: 14.5px; color: var(--color-neutral-500); }
.council-split-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
align-items: start;
}
.council-agree, .council-split, .council-objection, .council-verdict {
border: 1px solid var(--color-neutral-800);
border-radius: var(--radius-md);
padding: var(--space-8);
}
.council-split { border-color: var(--color-accent-800); background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.council-objection { border-left: 2px solid var(--color-neutral-400); }
.council-objection-foot { font-size: 13.5px; color: var(--color-neutral-600); }
.council-list { margin: var(--space-4) 0 0; padding-left: var(--space-6); }
.council-list li { font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); margin-bottom: var(--space-3); }
.council-empty-line { font-size: 15px; color: var(--color-neutral-600); }
/* The verdict is the point of Council — it earns real elevation and an
accent edge, so it reads as the answer rather than one more transcript
card among equals. */
.council-verdict {
background: var(--surface-raised);
border-color: var(--color-accent-700);
box-shadow: var(--shadow-md);
}
.council-verdict-note { font-size: 13.5px; color: var(--color-neutral-600); }
.council-decision { width: 100%; margin-top: var(--space-4); }
/* The verdict text had no reading-measure cap at all before this pass — the
one place it matters most, now that Council's column genuinely widens in
wide-mode (below). The container earns the width; the conclusion itself
still reads at a controlled measure. */
.council-decided-text { font-size: 16.5px; line-height: 1.7; color: var(--color-neutral-100); max-width: var(--measure-reading); }
.council-decided-meta { font-size: 13.5px; color: var(--color-neutral-600); }
.council-empty { display: flex; flex-direction: column; gap: var(--space-4); }
/* CC:1183-1203 — full transcript. */
.council-transcript { display: flex; flex-direction: column; gap: var(--space-3); }
.council-transcript-entry {
border: 1px solid var(--color-neutral-900);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.council-transcript-role { font-size: 13.5px; color: var(--color-neutral-600); }
.council-chooser { display: flex; flex-direction: column; gap: var(--space-3); }
.council-controls { align-items: center; gap: var(--space-3); }
/* Under 1100px every Council grid stacks, like every other rail composition. */
@media (max-width: 1100px) {
.council-positions, .council-split-grid, .council-context-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* HC-U2 — the login surface. It is the boot screen's sibling, so it inherits
the same centred frame; only the form itself needs describing. */
.login-form {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 20px;
min-width: 280px;
text-align: left;
}
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field > span { font-size: 15px; opacity: 0.75; }
.login-field > input {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--line, rgba(255, 255, 255, 0.18));
background: var(--surface, rgba(255, 255, 255, 0.04));
color: inherit;
font: inherit;
}
/*
THE FREE-NODE FRONT DOOR.
It reuses `.login-form` and `.login-field` outright rather than introducing a
second form language on the same screen — the way in and the way back in are
the same surface, and should look like it. What is added here is only the
separation between them and the one line of lead copy.
*/
.front-door { margin-top: 22px; text-align: left; min-width: 280px; }
.front-door:not(:empty) {
border-top: 1px solid var(--line, rgba(255, 255, 255, 0.14));
padding-top: 18px;
}
.front-door-lead {
color: var(--color-neutral-500);
font-size: 14.5px;
max-width: 42ch;
margin: 0;
}
.front-door-done { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* ---- Stop wasting your AI ---- */
.your-ai-providers,
.your-ai-switches {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16.8px;
align-items: start;
}
.your-ai-number {
font-size: 2.2rem;
font-weight: 600;
line-height: 1.1;
}
.your-ai-window + .your-ai-window { margin-top: 11.2px; }
.your-ai-code {
white-space: pre-wrap;
word-break: break-all;
font-size: 0.8rem;
padding: 8.4px;
border-radius: 6px;
background: var(--surface-2, rgba(127, 127, 127, 0.12));
}
/* ---- what your AI did: receipts against the member's own windows ---- */
.your-ai-receipt { margin: 0 0 8px; }
.your-ai-allowance { margin: 6px 0 0; }
.your-ai-builds { margin: 4px 0 0; padding-left: 18px; }
.your-ai-builds li { font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------ My Products */
/* The builder surface: describe, sketch, confirm, send. Reached through
Projects; it adds no navigation seat. */
.builder-entry .panel-body { margin: 0; }
.builder-grid {
display: grid; gap: var(--space-4);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin-top: var(--space-4);
}
.builder-grid > .panel + .panel { margin-top: 0; }
@media (max-width: 900px) { .builder-grid { grid-template-columns: minmax(0, 1fr); } }
.builder-sketch {
display: block; width: 100%; height: 420px; margin: var(--space-2) 0;
border: 1px solid var(--color-neutral-800); border-radius: 8px; background: #fff;
}
.builder-compare { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.builder-compare .builder-sketch { height: 320px; }
@media (max-width: 900px) { .builder-compare { grid-template-columns: minmax(0, 1fr); } }
.builder-proposal { border-color: var(--color-accent-600); }
.builder-transcript { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.builder-turn p { margin: var(--space-1) 0 0; white-space: pre-wrap; }
.builder-turn-member { align-self: flex-end; max-width: 85%; text-align: right; }
.builder-turn-sovern { align-self: flex-start; max-width: 85%; }
.builder-list, .builder-recs, .builder-receipts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.builder-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.builder-row-name { font-weight: 600; margin-right: var(--space-2); }
.builder-state-refused, .builder-state-failed, .builder-health-down { border-color: var(--error); color: var(--error); }
.builder-health-degraded, .builder-health-stale { opacity: 0.8; }
/* Age is shown by the border STYLE, never by the colour, so an old alarm keeps
the red `.builder-health-down` gives it. */
.builder-health-aged { border-style: dashed; }
/* A live deployment at a version other than the last one sent. It stands beside
the state chip rather than replacing it: both facts, neither hidden. */
.builder-live { border-color: var(--success); color: var(--success); }
.builder-live-line { font-weight: 600; }
.builder-brief-text { margin: var(--space-2) 0; max-height: 280px; overflow: auto; white-space: pre-wrap; font-size: 0.85em; }
.builder-receipts ol, .builder-versions { margin: var(--space-1) 0 0; padding-left: var(--space-5, 20px); }
/* ===================================================================
SOVERNCOMMAND-CONVERSATION-TABS-1 — tabs, and a carried slice
The only rule here that is doing work rather than spacing is the
quotation treatment. A carried slice is NOT part of the transcript it
was carried into and must never read as though it were: the estate
refuses a grounding that rests on one (0087 HC133), and a surface that
drew it as an ordinary message would be telling the member something
the database has already refused to believe.
=================================================================== */
.sovern-tabstrip {
display: flex; flex-wrap: wrap; gap: var(--space-2);
margin-bottom: var(--space-4);
border-bottom: 1px solid var(--color-neutral-800);
padding-bottom: var(--space-2);
}
.sovern-tabstrip .navlink.is-active {
color: var(--color-neutral-100); background: var(--surface-hover);
}
.sovern-turn-head { justify-content: space-between; }
.sovern-turn-sovern { border-left: 2px solid var(--color-accent-800); }
.sovern-provenance { font-size: 12.5px; }
.sovern-digest { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Inset and rule-marked: a quotation, visibly out of the flow of what was
said in this tab. */
.sovern-quotation,
.sovern-carried {
margin-top: var(--space-3);
padding-left: var(--space-3);
border-left: 2px dashed var(--color-neutral-800);
}
.sovern-quotation .code,
.overlay-card pre.code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
max-height: 40vh; overflow: auto; color: var(--color-neutral-400);
background: var(--surface-hover); padding: var(--space-3);
border-radius: var(--radius-sm);
}
/* SOVERNCOMMAND-RESUME-1 — play aloud, the composer mic, quick tabs. */
.turn-play { padding: 2px 10px; font-size: 12.5px; }
.composer-status { font-size: 12.5px; }
.tab-quick { color: var(--color-neutral-400); }
.sovern-turn-head { gap: var(--space-2); align-items: center; }
/* SOVERNCOMMAND-RESUME-1 — the profile control. Settings opens from here;
Account is not a destination in the bar. */
.profile { position: relative; }
/*
SOVERNCOMMAND-COMMAND-SHELL-REBUILD-1 — the boards' rail footer control: a
44px button carrying a 28px monogram, the member's own name, and a chevron.
It was a bare 32px round monogram in the old header row. The monogram
itself is unchanged and is still the member's real initial, or the person
mark when they have written no name — never an invented letter.
*/
.profile-control {
display: flex; align-items: center; gap: 10px;
width: 100%; min-height: 44px; padding: 0 8px;
border-radius: var(--radius-sm); cursor: pointer;
border: 1px solid transparent;
background: transparent; color: var(--color-neutral-300);
font: inherit; font-size: 14px; text-align: left;
}
.profile-mono {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--color-neutral-800);
background: var(--color-neutral-900); color: var(--color-neutral-200);
font-size: 12px; font-weight: 600;
}
.profile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chevron { margin-left: auto; flex: none; line-height: 0; color: var(--color-neutral-600); }
.profile-control:hover, .profile-control.is-current, .profile-control[aria-expanded="true"] {
background: var(--surface-hover); color: var(--color-neutral-100);
}
.profile-control:hover .profile-mono,
.profile-control.is-current .profile-mono,
.profile-control[aria-expanded="true"] .profile-mono {
border-color: var(--color-accent-700); color: var(--color-neutral-100);
}
/*
THE MENU OPENS UPWARD, because the control it hangs from is now at the
BOTTOM of the rail. `top: calc(100% + 8px)` would put it past the viewport
edge, where a member could neither read who is signed in nor reach Sign out.
*/
.profile-menu {
position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
min-width: 220px; max-width: 86vw; padding: var(--space-2);
background: var(--color-surface); border: 1px solid var(--color-neutral-800);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.profile-menu[hidden] { display: none; }
.profile-menu-who { padding: var(--space-2); border-bottom: 1px solid var(--color-neutral-800); margin-bottom: var(--space-1); }
.profile-menu-name { font-size: 14px; color: var(--color-text); }
.profile-menu-email { font-size: 12.5px; overflow-wrap: anywhere; }
.profile-menu .profile-menu-item {
display: block; width: 100%; text-align: left; border: 0; background: transparent;
color: var(--color-text); font-size: 14px; padding: 8px var(--space-2);
border-radius: var(--radius-sm); cursor: pointer;
}
.profile-menu .profile-menu-item:hover { background: var(--color-neutral-900); }
/* ======================================================================
THE CONTRIBUTOR EXPERIENCE — My Intelligence, My Seats, My Contributions,
My Rewards, Projects I Support.
Four classes, reusing `.panel`, `.chip`, `.muted` and `.empty` for
everything else. A figure grid and a definition list are the only shapes
these screens need that this stylesheet did not already have.
THE FIGURE IS DELIBERATELY LARGE AND THE LABEL IS NOT. These numbers are
the point of the surface: a member opens it to read four counts. The
provenance list beneath them is the opposite — small, dense, and meant to
be checked rather than scanned, which is why its terms are monospaced: a
seat id and a commit ref are strings somebody compares character by
character.
====================================================================== */
.contrib-figures {
display: grid; gap: var(--space-3); margin-top: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.contrib-figure { display: flex; flex-direction: column; gap: 2px; }
.contrib-figure-value {
font-size: 30px; line-height: 1.1; font-weight: 600;
color: var(--color-neutral-100); font-variant-numeric: tabular-nums;
}
.contrib-figure-label {
font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
color: var(--color-neutral-500);
}
/* The provenance list. `dt` is the identifier's name and `dd` is the
identifier — so the value side is the one that has to be legible as an
exact string. */
.contrib-provenance {
display: grid; gap: 2px var(--space-3); margin: var(--space-3) 0 0;
grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
}
.contrib-provenance dt {
font-size: 13px; color: var(--color-neutral-500);
}
.contrib-provenance dd {
margin: 0; font-size: 13.5px; color: var(--color-neutral-200);
/* Stated in full rather than through a token: this stylesheet's design
tokens (nocturne.css) declare --font-heading and --font-body and no
monospace family, and inventing a token here would be adding one to the
design system from a feature. */
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
overflow-wrap: anywhere;
}
@media (max-width: 640px) {
.contrib-provenance { grid-template-columns: minmax(0, 1fr); }
.contrib-provenance dd { margin-bottom: var(--space-2); }
}
/* A resolved claim is bordered in the accent, because it is the one thing on
these screens that asserts something about the member's work — and it only
ever renders from a provenance object the server resolved. */
.contrib-claim { border-color: var(--color-accent-600); }
.contrib-work, .contrib-project { margin: 0; }
/*
SC-STUDIO-CREATION-MODES-1 — the Studio create surface's mode chooser.
One mode is a CONTROL PLUS ITS REASON, stacked, because the reason has to
survive a device with no pointer: it used to live in a `title`, and a title
is a tooltip that does not exist on touch at all. The grid stacks to a
single column well before 390px, so the reason stays beneath the control it
belongs to rather than beside an unrelated one.
*/
.studio-modes { display: flex; flex-direction: column; gap: var(--space-4); }
/* Control on the left, its own reason beside it — one row per mode, so no
reason can be read against the wrong control. */
.studio-mode {
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
align-items: start;
min-width: 0;
}
.studio-mode .chip-toggle {
max-width: 100%;
white-space: normal;
text-align: left;
justify-self: start;
}
.studio-mode-reason {
margin: 0;
font-size: var(--text-2xs, 12px);
line-height: 1.6;
color: var(--text-muted, var(--color-neutral-500));
border-left: 2px solid var(--color-neutral-800);
padding-left: var(--space-3);
}
/* At a phone width the reason stacks under the control it belongs to. */
@media (max-width: 640px) {
.studio-mode { grid-template-columns: minmax(0, 1fr); }
}
/*
A disabled control swallows its own click, so a press on a dead mode was
answered by silence. Taking pointer events off the control lets the press
reach the mode container, which acknowledges it — WITHOUT making the
control itself pressable. The container carries the not-allowed cursor,
since the control can no longer show one.
*/
.studio-mode:has(.studio-mode-control[disabled]) { cursor: not-allowed; }
.studio-mode-control[disabled] { pointer-events: none; }
.studio-mode.is-explaining .studio-mode-reason {
color: var(--color-accent-200);
border-left-color: var(--color-accent-700);
}
.studio-mode.is-explaining .studio-mode-control[disabled] {
border-color: var(--color-accent-700);
}
.studio-mode-feedback { margin-top: var(--space-3); min-height: 1em; }
/* Aspect/Quality on a workflow that cannot reach a generation. */
.studio-spec-inert { opacity: 0.55; }
.studio-spec-inert .select { cursor: not-allowed; }
/* =====================================================================
THE SOCIETI GRID — the approved Claude Design canvas "SovernCommand —
Societi: Enter the Grid": World / front door v4 for structure and scale,
Motion for every animation, GridPhone for 390, Main / States for the truth
marks and the evidence rail. Every px below is the board's.
===================================================================== */
/* THE WORLD. While #/societi is open the whole document — shell included — is
re-tokened to the canvas palette, in either theme, and given back on leave. */
html:root[data-world="societi"]:not([data-world-off]) {
color-scheme: dark;
--w-ground: #0E0F1A; --w-panel: #171827; --w-line: #2A2C3F; --w-text: #ECEDF4; --w-muted: #A3A6BA;
--w-accent: #5CC8A8; --w-demo: #D9B65C; --w-limited: #9FB3D9; --w-rail: #5A5E78; --w-raildim: #3B3E55;
--color-bg: var(--w-ground); --color-surface: var(--w-panel); --color-text: var(--w-text);
--color-divider: var(--w-line); --color-accent: var(--w-accent);
--color-neutral-200: #e4e7f5; --color-neutral-300: #cfd3e5; --color-neutral-400: var(--w-muted);
--color-neutral-500: #9397ab; --color-neutral-800: var(--w-line); --color-neutral-900: #1f2131;
--color-accent-200: #c9efe3; --color-accent-300: #9fe0cc; --color-accent-600: #3f9c82;
--brand-logo: url('./brand/sovern-logo-dark.png');
--brand-mark: url('./brand/sovern-icon-ldark.png');
}
html[data-world="societi"] body { background: var(--w-ground); color: var(--w-text); }
html[data-world="societi"] .topbar { background: var(--w-ground); border-bottom: 1px solid var(--w-line); }
html[data-world="societi"] .main { max-width: none; padding: 0 0 var(--composer-clearance, 0); }
html[data-world="societi"] .site-footer { display: none; }
.world-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--w-muted);
margin-right: 8px; white-space: nowrap; max-width: 380px; min-width: 0; }
.world-status > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--w-muted, #888); flex: none; }
.conn-live { background: var(--w-accent); }
.conn-connected { background: var(--w-limited); }
.conn-down { background: var(--w-demo); }
.societi { display: flex; flex-direction: column; background: var(--w-ground); color: var(--w-text);
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
/* HERO — full-bleed Grid, 760px, title over the left fade, TAL along the foot. */
.w-hero { position: relative; height: 760px; border-bottom: 1px solid var(--w-line); overflow: hidden;
background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--w-accent) 10%, var(--w-ground)) 0%, var(--w-ground) 60%); }
.grid-stage { position: absolute; inset: 0; }
.grid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.grid-canvas:active { cursor: grabbing; }
.grid-labels { position: absolute; inset: 0; pointer-events: none; }
.grid-label { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 3px; white-space: nowrap; }
.grid-label strong { font-size: 11.5px; font-weight: 600; color: var(--w-text); text-transform: capitalize;
padding: 3px 10px; border-radius: 5px; background: color-mix(in srgb, var(--w-ground) 90%, transparent);
border: 1px solid color-mix(in srgb, var(--w-accent) 60%, transparent); }
.grid-label span { font-size: 10.5px; color: var(--w-muted); }
.grid-label-you { font-size: 11.5px; font-weight: 700; color: var(--w-ground); background: var(--w-accent);
padding: 3px 12px; border-radius: 5px; }
.w-vignette { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, var(--w-ground) 0%, transparent 28%, transparent 70%, var(--w-ground) 100%); }
.w-fade-left { position: absolute; left: 0; top: 0; bottom: 0; width: 560px; pointer-events: none;
background: linear-gradient(90deg, var(--w-ground) 0%, var(--w-ground) 35%, transparent 100%); }
.w-hero-copy { position: absolute; left: 32px; top: 48px; width: 470px; display: flex; flex-direction: column; gap: 14px; }
.w-eyebrow { font-size: 12px; color: var(--w-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.grid-title { margin: 0; font-size: 72px; font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; color: var(--w-text); }
.grid-title .accent { display: block; color: var(--w-accent); }
.w-lede { margin: 0; font-size: 18px; line-height: 1.4; color: var(--w-text); opacity: 0.9; }
.w-lede2 { margin: 0; font-size: 13px; color: var(--w-muted); }
.w-lede2 strong { color: var(--w-text); }
.w-actions { display: flex; gap: 10px; margin-top: 6px; }
.w-btn { min-height: 48px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 10px;
font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.w-btn-primary { background: var(--w-accent); color: var(--w-ground); border: 0; font-weight: 700;
box-shadow: 0 0 32px color-mix(in srgb, var(--w-accent) 33%, transparent); }
.w-btn-quiet { background: color-mix(in srgb, var(--w-ground) 80%, transparent); color: var(--w-text); border: 1px solid var(--w-line); }
.w-btn:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }
.w-tal { position: absolute; left: 32px; right: 32px; bottom: 28px; display: grid;
grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 0.8fr)); gap: 28px; align-items: end; }
.w-tal-main { display: flex; flex-direction: column; gap: 6px; }
.w-label { font-size: 12px; color: var(--w-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.w-tal-line { display: flex; align-items: flex-end; gap: 18px; }
.w-tal-line .tal-value { min-width: 0; }
.w-tal-delta { max-width: 130px; line-height: 1.15; padding-bottom: 4px; }
.tal-value { font-size: 92px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; font-variant-numeric: tabular-nums;
text-shadow: 0 0 40px color-mix(in srgb, var(--w-accent) 40%, transparent); }
.w-tal-delta { font-size: 24px; font-weight: 700; color: var(--w-accent); font-variant-numeric: tabular-nums; }
.w-tal-cap { font-size: 12px; color: var(--w-muted); }
.w-tal-cap .linklike { color: var(--w-text); font-size: 12px; }
.w-tal-sub { display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--w-line); padding-left: 22px; }
.w-sub-label { font-size: 11px; color: var(--w-muted); }
.w-sub-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w-est { font-size: 10px; font-weight: 700; color: var(--w-demo); border: 1px solid var(--w-demo); border-radius: 4px; padding: 1px 5px; letter-spacing: 0.04em; }
.w-sub-note { font-size: 11px; color: var(--w-muted); }
.grid-fps { position: absolute; right: 32px; top: 14px; font-size: 10px; color: var(--w-raildim); }
.grid-fallback { position: absolute; inset: auto 32px 220px; }
/* Motion: a changed number rolls for 400ms with a glow pulse; nothing else moves it. */
.rolling { animation: w-roll .4s ease-out; }
@keyframes w-roll { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-0.3em); opacity: 0; }
55% { transform: translateY(0.3em); opacity: 0; } 100% { transform: none; opacity: 1;
text-shadow: 0 0 60px color-mix(in srgb, var(--w-accent) 70%, transparent); } }
/* TRUTH, UNDERSTATED: 10–11px, muted; the four marks of the States board. */
.truth { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.state-mark { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--w-muted); white-space: nowrap; }
.state-mark svg { width: 13px; height: 13px; flex: none; }
.state-live { color: var(--w-accent); }
.state-demonstration { color: var(--w-demo); }
.state-connected_limited { color: var(--w-limited); }
.sm-fill-live { fill: var(--w-accent); }
.sm-check { fill: none; stroke: var(--w-ground); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sm-ring-demo { fill: var(--w-ground); stroke: var(--w-demo); stroke-width: 2; }
.sm-dot-demo { fill: var(--w-demo); }
.sm-ring-limited { fill: var(--w-ground); stroke: var(--w-limited); stroke-width: 2; }
.sm-links-limited { fill: none; stroke: var(--w-limited); stroke-width: 2.4; stroke-linecap: round; }
.sm-ring-ctp { fill: var(--w-ground); stroke: var(--w-raildim); stroke-width: 2; stroke-dasharray: 4 3; }
.src-tag { font-size: 10.5px; letter-spacing: 0.04em; color: var(--w-muted, #888); text-transform: uppercase; }
.src-tag::before { content: '['; } .src-tag::after { content: ']'; }
.src-example { color: var(--w-demo, #b08a2e); }
/* TAL TRACE — a full-bleed band, no card. With no contract read, nothing is plotted. */
.w-trace { position: relative; height: 90px; border-bottom: 1px solid var(--w-line); }
.w-trace-base { position: absolute; left: 32px; right: 32px; top: 48px; border-top: 1px dashed var(--w-raildim); }
.w-trace-l { position: absolute; left: 32px; bottom: 8px; font-size: 11px; color: var(--w-muted); }
.w-trace-r { position: absolute; right: 32px; bottom: 8px; font-size: 11px; color: var(--w-accent); }
/* GROWTH — four numbers as a strip, no cards. */
.w-growth { margin: 0 32px; padding: 26px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--w-line); }
.w-growth .growth { padding: 0 24px; border-left: 1px solid var(--w-line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-growth .growth:first-child { padding-left: 0; border-left: 0; }
.growth-value { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.growth-label { font-size: 14px; margin-top: 8px; }
.growth-sub { font-size: 12px; color: var(--w-muted); }
.w-growth .truth { margin-top: 6px; }
.growth-note { font-size: 11px; color: var(--w-muted); opacity: 0.85; }
/* DOORS + PULSE */
.societi-body { margin: 28px 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.societi-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.doors-head { display: flex; justify-content: space-between; align-items: baseline; }
.doors-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--w-text); }
.doors-head span { font-size: 13px; color: var(--w-muted); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.door { --tone: var(--w-accent); position: relative; overflow: hidden; min-height: 220px; text-align: left; font: inherit;
display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border-radius: 16px; cursor: pointer;
color: var(--w-text); border: 1px solid var(--w-line);
background: linear-gradient(160deg, var(--w-panel) 0%, var(--w-ground) 100%);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.door.tone-limited { --tone: var(--w-limited); }
.door.tone-demo { --tone: var(--w-demo); }
.door-create { border-color: color-mix(in srgb, var(--w-accent) 53%, transparent);
background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--w-accent) 27%, transparent) 0%, var(--w-panel) 55%, var(--w-ground) 100%);
box-shadow: inset 0 0 60px color-mix(in srgb, var(--w-accent) 13%, transparent); }
.door-explore { background: radial-gradient(120% 90% at 80% 20%, color-mix(in srgb, var(--w-limited) 27%, transparent) 0%, var(--w-panel) 55%, var(--w-ground) 100%); }
.door-govern { background: radial-gradient(100% 80% at 50% 110%, color-mix(in srgb, var(--w-demo) 20%, transparent) 0%, var(--w-panel) 50%, var(--w-ground) 100%); }
.door:hover, .door:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 70%, transparent);
box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--tone) 45%, transparent), inset 0 0 80px color-mix(in srgb, var(--tone) 18%, transparent); }
.door:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.door-scene { position: absolute; inset: 0; }
.door-scene svg { width: 100%; height: 100%; }
.door-eyebrow { position: relative; font-size: 11px; color: var(--tone); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.door-title { position: relative; margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--w-text); text-transform: none; }
.door-copy { position: relative; font-size: 14px; opacity: 0.85; line-height: 1.45; margin-top: 6px; max-width: 300px; }
.door-counter { position: relative; font-size: 12px; color: var(--tone); margin-top: 12px; }
.door-counter strong { font-weight: 600; }
.door-counter strong.bump { animation: door-bump .6s ease-out; }
@keyframes door-bump { 0% { text-shadow: 0 0 14px var(--tone); } 100% { text-shadow: none; } }
/* scene strokes */
.ds-ring { fill: none; stroke: var(--w-accent); stroke-width: 1.5; opacity: .9; }
.ds-ring-thin { fill: none; stroke: var(--w-accent); stroke-width: .8; opacity: .5; }
.ds-ring-faint { fill: none; stroke: var(--w-accent); stroke-width: .6; opacity: .25; }
.ds-people { fill: var(--w-text); }
.ds-path { fill: none; stroke: var(--w-accent); stroke-dasharray: 5 6; opacity: .6; }
.ds-lim-ring { fill: none; stroke: var(--w-limited); stroke-width: 1.2; opacity: .9; }
.ds-lim-path { fill: none; stroke: var(--w-limited); stroke-dasharray: 4 6; opacity: .6; }
.ds-diamonds { fill: var(--w-limited); opacity: .95; }
.ds-wires { fill: none; stroke: var(--w-accent); stroke-width: 1.5; opacity: .8; }
.ds-bar { fill: var(--w-accent); opacity: .7; }
.ds-bar-faint { fill: var(--w-accent); opacity: .3; }
.ds-arc { fill: none; stroke: var(--w-demo); stroke-width: 1.4; opacity: .8; }
.ds-arc-thin { fill: none; stroke: var(--w-demo); stroke-width: .8; opacity: .5; }
.ds-diamond-lim { fill: var(--w-limited); }
/* hover plays the door's scene once (Motion board) */
.ds-draw { stroke-dasharray: 400; stroke-dashoffset: 0; }
.door:hover .ds-draw { animation: ds-draw .9s ease-out 1; }
@keyframes ds-draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.door:hover .ds-pan { animation: ds-pan 1.4s ease-in-out 1; }
@keyframes ds-pan { 0% { transform: translateX(0); } 50% { transform: translateX(-18px); } 100% { transform: translateX(0); } }
.ds-grow { transform-box: fill-box; transform-origin: left center; }
.door:hover .ds-grow { animation: ds-grow .9s ease-out 1; }
@keyframes ds-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* SAY IT */
.say-it { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--w-line); border-radius: 14px;
background: linear-gradient(90deg, var(--w-panel) 0%, var(--w-ground) 100%); margin-top: 6px; }
.say-mic { width: 52px !important; height: 52px !important; border-radius: 50% !important; flex: none;
border: 2px solid var(--w-accent) !important; background: var(--w-ground) !important; color: var(--w-accent) !important;
box-shadow: 0 0 28px color-mix(in srgb, var(--w-accent) 33%, transparent); }
.say-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.say-title { margin: 0; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--w-text); }
.say-copy { margin: 0; font-size: 13px; color: var(--w-muted); }
.say-row { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.say-row .intake-box { flex: 1; min-height: 48px; resize: vertical; background: var(--w-ground); color: var(--w-text);
border: 1px solid var(--w-line); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 14px; }
/* PULSE — the kinetic column. */
.pulse { border: 1px solid var(--w-line); border-radius: 16px; background: var(--w-panel); display: flex; flex-direction: column; overflow: hidden; }
.pulse-head { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--w-line); }
.pulse-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: var(--w-muted);
letter-spacing: 0.1em; text-transform: uppercase; }
.pulse-filter { background: transparent; color: var(--w-muted); border: 1px solid var(--w-line); border-radius: 6px; font-size: 12px; padding: 4px 6px; }
.pulse-empty { padding: 14px 20px; margin: 0; }
.pulse-list { display: flex; flex-direction: column; max-height: 760px; overflow: auto; }
.pulse-list[data-filter="real"] .is-example, .pulse-list[data-filter="examples"] .pulse-row:not(.is-example) { display: none; }
.pulse-row { display: flex; gap: 12px; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--w-line); border-left: 3px solid transparent;
background: transparent; color: var(--w-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pulse-row:hover { background: color-mix(in srgb, var(--w-text) 4%, transparent); }
.pulse-row.is-new { border-left-color: var(--w-accent); animation: pulse-in .35s ease-out, pulse-tint 6s ease-out; }
.pulse-row.is-example .pulse-title strong { color: var(--w-demo); }
.pulse-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pulse-title { line-height: 1.35; overflow-wrap: anywhere; }
.pulse-sub { font-size: 12px; color: var(--w-muted); overflow-wrap: anywhere; }
.pulse-right { white-space: nowrap; align-self: flex-start; }
.pulse-foot { padding: 12px 20px; font-size: 11px; color: var(--w-muted); border-top: 1px solid var(--w-line); margin-top: auto; }
@keyframes pulse-in { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse-tint { from { background: linear-gradient(90deg, color-mix(in srgb, var(--w-accent) 13%, transparent) 0%, transparent 60%); }
to { background: transparent; } }
/* EVIDENCE RAIL (Main board) — inside the overlay while the world is open. */
html[data-world="societi"] .overlay-card { background: var(--w-panel); color: var(--w-text); border: 1px solid var(--w-line); }
.evidence-rail .ev-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ev-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ev-col { border: 1px solid var(--w-line, #ddd); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.ev-col-title { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-muted, #777); }
.ev-line { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ev-digest { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
/* GridPhone's list of spaces — a phone treatment; the desktop has the scene. */
.w-spaces.w-panel { display: none; }
.w-panel { margin: 0 16px; padding: 18px; border: 1px solid var(--w-line); border-radius: 12px; background: var(--w-panel);
display: flex; flex-direction: column; gap: 12px; }
.w-panel-label { font-size: 11px; color: var(--w-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.w-space { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--w-line);
background: none; color: var(--w-text); font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.w-space:first-of-type { border-top: 0; padding-top: 0; }
.w-space-name { font-size: 15px; font-weight: 700; text-transform: capitalize; }
.w-space-meta { font-size: 12px; color: var(--w-muted); }
/* FOOTER */
.societi-footer { margin-top: 28px; padding: 16px 32px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-size: 12px; color: var(--w-muted); border-top: 1px solid var(--w-line); }
.societi-footer .sf-r { display: flex; gap: 14px; flex-wrap: wrap; }
.societi-footer .linklike, html[data-world="societi"] .linklike { color: var(--w-muted); font-size: 12px; text-decoration: none; }
.societi-footer .linklike:hover { color: var(--w-text); text-decoration: underline; }
.linklike { background: none; border: 0; padding: 0; color: var(--color-accent-300); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.pulse-row.is-new, .rolling, .door-counter strong.bump, .door:hover .ds-draw, .door:hover .ds-pan, .door:hover .ds-grow { animation: none !important; }
.door { transition: none; }
.door:hover { transform: none; }
}
/* 390 — GridPhone: 16px gutters, panels with a 12px radius, 11px uppercase
labels, 44px targets; the Grid is its own tall band between the words and
the numbers; the doors stack; the pulse comes after them. */
@media (max-width: 760px) {
.world-status { display: none; }
.w-hero { height: auto; display: flex; flex-direction: column; padding: 20px 0 16px; border-bottom: 0; }
.w-fade-left { display: none; }
.w-vignette { display: none; }
.w-hero-copy { position: static; width: auto; padding: 0 16px; gap: 10px; order: 1; }
.grid-title { font-size: 44px; }
.w-lede { font-size: 16px; }
.w-actions { flex-wrap: wrap; }
.w-btn { min-height: 44px; }
.grid-stage { position: relative; order: 2; height: 440px; margin: 14px 0 0; }
.w-tal { position: static; order: 3; display: flex; flex-direction: column; gap: 14px; margin: 8px 16px 0;
padding: 18px; border: 1px solid var(--w-line); border-radius: 12px; background: var(--w-panel); }
.tal-value { font-size: 40px; }
.w-tal-line { flex-wrap: wrap; align-items: baseline; }
.w-tal-delta { max-width: none; }
.w-tal-delta { font-size: 18px; }
.w-tal-sub { border-left: 0; padding-left: 0; border-top: 1px solid var(--w-line); padding-top: 10px; }
.w-sub-value { font-size: 20px; }
.grid-fps { position: static; order: 4; margin: 8px 16px 0; }
.w-trace { margin: 16px 16px 0; height: 72px; border: 1px solid var(--w-line); border-radius: 12px; }
.w-trace-base { left: 18px; right: 18px; top: 30px; }
.w-trace-l { left: 18px; right: 50px; }
.w-trace-r { right: 18px; }
.w-growth { margin: 16px 16px 0; padding: 0; grid-template-columns: 1fr 1fr; border: 1px solid var(--w-line); border-radius: 12px;
background: var(--w-panel); overflow: hidden; }
.w-growth .growth, .w-growth .growth:first-child { padding: 16px; border-left: 0; border-top: 1px solid var(--w-line); }
.w-growth .growth:nth-child(-n+2) { border-top: 0; }
.w-growth .growth:nth-child(2n) { border-left: 1px solid var(--w-line); }
.growth-value { font-size: 28px; }
.w-spaces.w-panel { display: flex; margin-top: 16px; }
.societi-body { margin: 16px 16px 0; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.doors-head { flex-direction: column; gap: 4px; }
.doors { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.door { min-height: 180px; padding: 18px; border-radius: 12px; }
.door-title { font-size: 22px; }
.say-it { flex-direction: column; border-radius: 12px; }
.say-row { flex-direction: column; }
.pulse { border-radius: 12px; }
.pulse-list { max-height: 560px; }
.ev-cols { grid-template-columns: minmax(0, 1fr); }
.societi-footer { padding: 16px; flex-direction: column; }
}
/* TAKE A DEVELOPMENT SEAT */
.seat-state { font-size: 15px; margin: 0 0 18px; }
.seat-steps { display: grid; gap: 14px; }
.seat-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px 20px;
border: 1px solid var(--color-divider); border-radius: 14px; }
.seat-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-accent-200); }
.seat-step-body { display: grid; gap: 10px; min-width: 0; }
.seat-facts { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.seat-offer { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--color-divider); }
.seat-waiting { font-size: 18px; margin: 0; }
.seat-states-legend { margin-top: 16px; font-size: 12px; }
/* The seat's facts at phone width: a label and its value stack rather than
collide ("Measuredunknown"). */
@media (max-width: 560px) {
.seat-step .rail-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.seat-step .rail-row-value { text-align: left; }
}
/* The site footer: quiet, always reachable, and never under the composer. */
.site-footer { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center;
padding: 18px 16px var(--composer-clearance, 24px); font-size: 12px; color: var(--color-neutral-500);
border-top: 1px solid var(--color-divider); }
.site-footer a { color: var(--color-neutral-500); text-decoration: none; }
.site-footer a:hover { color: var(--color-text); text-decoration: underline; }
/* CREATE A SPACE — the canvas board "One surface deep". */
.cs { padding: 32px 32px 24px; display: flex; flex-direction: column; gap: 24px; background: var(--w-ground); color: var(--w-text); }
.cs-head { display: flex; flex-direction: column; gap: 6px; }
.cs-title { margin: 0; font-size: 28px; font-weight: 700; color: var(--w-text); }
.cs-sub { margin: 0; font-size: 13px; color: var(--w-muted); }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.cs-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-panel { padding: 20px; border: 1px solid var(--w-line); border-radius: 12px; background: var(--w-panel); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs-said { margin: 0; padding: 14px; border-radius: 8px; border: 1px solid var(--w-line); background: var(--w-ground); font-size: 15px; line-height: 1.5; }
.cs-panel .textarea { background: var(--w-ground); color: var(--w-text); border: 1px solid var(--w-line); }
.cs-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cs-row-between { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cs-table { border: 1px solid var(--w-line); border-radius: 10px; overflow: hidden; }
.cs-tr { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 12px; padding: 12px 14px; font-size: 13px; border-top: 1px solid var(--w-line); }
.cs-th { border-top: 0; padding: 10px 14px; font-size: 11px; color: var(--w-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.cs-val { font-weight: 600; overflow-wrap: anywhere; }
.cs-note { margin: 0; padding: 12px 14px; border: 1px solid var(--w-line); border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--w-muted); }
.cs-foot { display: flex; flex-direction: column; gap: 12px; }
html[data-world="societi"] .cs .button-primary, html[data-world="societi"] .cs .button { min-height: 44px; }
@media (max-width: 760px) {
.cs { padding: 20px 16px; }
.cs-grid { grid-template-columns: minmax(0, 1fr); }
.cs-tr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cs-th { display: none; }
}
/* INSIDE THE GRID — the canvas boards "Grid / your-node" and "GridPhone". */
.in { padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 20px; background: var(--w-ground); color: var(--w-text); }
.in-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.in-title { margin: 4px 0 6px; font-size: 32px; font-weight: 700; color: var(--w-text); }
.in-meta { font-size: 13px; color: var(--w-muted); }
.in-meta code { color: var(--w-text); }
.in-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 420px; }
.in-path a { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--w-line);
background: var(--w-panel); color: var(--w-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.in-path a:hover { border-color: var(--w-accent); }
.in-row { display: grid; gap: 20px; align-items: stretch; }
.in-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-row-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.in-panel { padding: 18px 20px; border: 1px solid var(--w-line); border-radius: 12px; background: var(--w-panel);
display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.in-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.in-id { display: flex; align-items: center; gap: 12px; }
.in-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--w-accent); display: grid; place-items: center; font-weight: 700; }
.in-name { font-size: 15px; font-weight: 700; }
.in-sub { font-size: 12px; color: var(--w-muted); }
.in-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
.in-dl dt { color: var(--w-muted); }
.in-dl dd { margin: 0; font-weight: 600; }
.in-links, .in-link { font-size: 13px; color: var(--w-text); }
.in-links a, a.in-link { color: var(--w-text); }
.in-big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.in-bar { height: 12px; border-radius: 6px; border: 1px dashed var(--w-raildim); }
.in-note { margin: 0; font-size: 12px; color: var(--w-muted); line-height: 1.5; }
.in-space, .in-ruling { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--w-line); }
.in-space:first-of-type, .in-ruling:first-of-type { border-top: 0; padding-top: 0; }
.in-space-name { font-size: 15px; font-weight: 700; }
.in-space .in-space-name { text-transform: capitalize; }
.in-receipt { padding: 10px; border: 1px solid var(--w-line); border-radius: 8px; font-size: 13px; line-height: 1.5; }
.in-stages { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.in-stages li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--w-muted); text-transform: capitalize; text-align: center; }
.in-stages .state-mark svg { width: 22px; height: 22px; }
.in-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.in-list li { display: flex; justify-content: space-between; gap: 12px; }
.in-services { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.in-services > span { display: inline-flex; gap: 6px; align-items: center; }
.in-foot { margin: 4px 0 0; font-size: 12px; color: var(--w-muted); }
@media (max-width: 760px) {
.in { padding: 16px 0 24px; gap: 16px; }
.in-head { padding: 0 16px; }
.in-path { min-width: 0; width: 100%; }
.in-row-3, .in-row-2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.in-panel { margin: 0 16px; }
.in-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-foot { padding: 0 16px; }
}
/* Tranche 2026-10-03 item 2 — the own-key offer, wherever intelligence is refused for funding. */
.own-key-offer {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
margin: var(--space-2) var(--space-3) 0; padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
background: var(--color-neutral-900); color: var(--color-text); font-size: 14px;
}
.own-key-offer span { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
/* Tranche 2026-10-03 item 5 — the next action Sovern holds, at the head of Command. */
.cmd-next-action {
border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-neutral-900);
}
.cmd-next-action-text { font-size: 17px; color: var(--color-text); margin: var(--space-1) 0; overflow-wrap: anywhere; }
.cmd-next-action-meta { font-size: 12.5px; }
.cmd-next-action-acts { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
/* Tranche 2026-10-03 item 6a — the collaborator preset panel. */
.preset-detail, .preset-import { margin-top: var(--space-2); }
.preset-detail summary, .preset-import summary { cursor: pointer; color: var(--color-text); }
.preset-section-title { font-size: 14px; margin: var(--space-2) 0 var(--space-1); }
.preset-section ul { margin: 0; padding-left: 1.2em; }
.preset-section li { margin: 2px 0; overflow-wrap: anywhere; }
/* Tranche 2026-10-03 items 6b/6c — where the member is working, and the prospect ledger. */
.cmd-session { margin-bottom: var(--space-3); font-size: 14px; }
.cmd-session-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; overflow-wrap: anywhere; }
.cmd-session-progress { margin: var(--space-1) 0; }
.cmd-milestones { margin: var(--space-1) 0; padding-left: 1.3em; }
.cmd-milestones li { margin: 4px 0; overflow-wrap: anywhere; }
.cmd-milestones li.is-done { opacity: .7; }
.cmd-milestones li.is-current { font-weight: 600; }
.cmd-session-set, .cmd-crm-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--space-1); }
.cmd-session-set .input, .cmd-crm-add .input { flex: 1 1 160px; min-width: 0; }
.cmd-crm-list { margin: var(--space-1) 0; padding-left: 1.2em; }
.cmd-crm-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.cmd-crm-reco { overflow-wrap: anywhere; }
/* Tranche 2026-10-03 item 6c — a prospect's lane bar. */
.lane-bar { border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); font-size: 14px; }
.lane-bar-head, .lane-bar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.lane-bar-row .input { flex: 1 1 140px; min-width: 0; }
/* ==== SOVERNCOMMAND-CONVERSATIONAL-SOVERN-1 — the conversation =============
WITHDRAWN AT THE CONVERGENCE, WITH ITS RENDERER. This lane's `.sovern-*`
block styled its own `#/sovern` screen, which mainline now serves (see the
note in public/app.js). Eleven of its thirteen selectors have no consumer
left. The other two do, and that is the reason this block cannot simply be
kept: mainline's tab transcript renders `panel sovern-turn
sovern-turn-<speaker>`, and `.sovern-turn { border-left: 2px solid
var(--color-neutral-800) }` here would sit AFTER `.sovern-turn-sovern
{ border-left: 2px solid var(--color-accent-800) }` at equal specificity and
silently repaint a reviewed surface. Recoverable whole from
307e70d:public/app.css; applying this treatment to mainline's transcript is
a design decision under the owner's visual authority, not a merge
resolution. */
/* ===================================================================== */
/* SOVERNCOMMAND-COMMAND-VISUAL-SYSTEM-1 — COMPONENT TREATMENTS */
/* */
/* The token layer at the top of this file carries the SYSTEM. This */
/* section carries the TREATMENTS the governing boards draw on top of it: */
/* the values that are properties of a component rather than of the */
/* palette — type scale, radius, padding, and the two places where a */
/* board deliberately inverts rather than tints. */
/* */
/* Authority: the 13 `project/` board files of canvas 1791053051-0235, */
/* each verified against the snapshot's MANIFEST.sha256. Every number */
/* below is quoted from the board element it governs; the board's own */
/* declaration is named in the comment beside it so a reader can check */
/* the claim without opening the canvas. */
/* */
/* WHY THIS SECTION IS LAST AND SEPARATE RATHER THAN EDITED IN PLACE. */
/* The rules it supersedes carry standing owner rulings in their own */
/* comments — VISUAL-AUTHORITY-1 §6/§8's accent edge on the lead card, */
/* §5's uppercase section grammar, the composer's floating-pill treatment. */
/* Those comments are the record of WHY the build looked the way it did, */
/* and deleting them would destroy the only evidence of what this unit */
/* changed. They are left standing and superseded here, in one reviewable */
/* place, each supersession named. Legacy styling is not design authority — */
/* but the reasoning behind it is still worth being able to read. */
/* ===================================================================== */
/* ---- THE SHELL'S OWN SURFACES ---------------------------------------- */
/*
SUPERSEDES `.navlink[aria-current="page"]`'s accent tint.
Board (`Main.dc.html`, the Command row): `background: #18181B`, `color:
#EDEDEF`, `font-weight: 500`, `border-radius: 8px`. The selected state is a
FLAT PANEL FILL — the same value the card and the composer take — not a
tinted accent. The accent on these boards paints exactly two things, the
orb's inner circle and the Send button, and a third use would dilute it.
Weight 500, not 600: the board sets the active row one step above its
siblings' 400, which is a lift, not a shout.
*/
.shell-nav-surfaces .navlink[aria-current="page"],
.shell-nav-protocol .navlink[aria-current="page"] {
background: var(--vs-panel);
color: var(--vs-ink);
font-weight: 500;
border-color: transparent;
border-radius: var(--vs-radius-row);
}
/* Board: inactive rows are `#9A9AA2` at weight 400 and 14px, 36px tall. */
.shell-nav-surfaces .navlink,
.shell-nav-protocol .navlink {
color: var(--vs-ink-muted);
font-weight: 400;
font-size: 14px;
letter-spacing: normal;
border-radius: var(--vs-radius-row);
}
/* Board: `Protocol` / `Recent` — 12px, 0.08em, uppercase, muted. */
.shell-nav-section {
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--vs-ink-muted); font-weight: 400;
}
/* Board: `New command` is 40px, bordered in the hairline, weight 500, r10. */
.shell-nav-new {
border: 1px solid var(--vs-line-hairline);
border-radius: var(--vs-radius-control);
color: var(--vs-ink); font-weight: 500; font-size: 14px;
}
/* Board: `Search` is 36px, muted, no border, r8. */
.shell-nav-search {
color: var(--vs-ink-muted); font-size: 14px;
border-radius: var(--vs-radius-row);
}
/* Board: the setup card is bordered in the hairline at r10, its track #1F1F23. */
.shell-nav-setup-card {
border: 1px solid var(--vs-line-hairline);
border-radius: var(--vs-radius-control);
}
.shell-nav-setup-track { background: var(--vs-track); }
/* ---- THE MAIN COLUMN — TYPE ------------------------------------------ */
/*
Board: `h1` at 40px/600, `letter-spacing: -0.02em`, `line-height: 1.15`.
Scoped to the Command page because that is the surface these boards govern;
every other route keeps the product's own 34px title until its own canvas
says otherwise. The boards' phone value (30px) is applied at the drawer tier
below, where the boards themselves apply it.
*/
.command-page .page-title {
font-size: 40px; font-weight: 600;
letter-spacing: -0.02em; line-height: 1.15;
}
/* Board: the eyebrow above `What matters today` is 13px, muted. */
.command-page .page-head .kicker {
font-size: 13px; color: var(--vs-ink-muted); letter-spacing: normal;
}
/*
SUPERSEDES VISUAL-AUTHORITY-1 §5's uppercase section grammar AND §4/§8's
accent tick, for the judgment queue only.
Board: `<h2>` at 22px/600, sentence case, no tracking, no marker of any kind
— `Needs your judgment`. The 12.5px/0.14em/uppercase treatment with a 6px
accent square is the legacy styling the owner's finding names; it appears on
none of the twelve boards. The WORDS are untouched: the section still says
whatever `commandDecisions` says it says, which is banked truth grammar.
Every OTHER section on the page keeps the recessive uppercase register,
because the boards draw only this one section and absence is not a decision
— the snapshot's own "What this canvas does not cover" is explicit about
reading it that way.
*/
.decisions-section .section-title {
font-size: 22px; font-weight: 600;
text-transform: none; letter-spacing: normal;
color: var(--vs-ink);
}
.decisions-section .section-title::before { content: none; }
/* Board: `Ranked by what it costs to wait`, 13px, muted, right-aligned. */
.decisions-section .section-sub {
font-size: 13px; color: var(--vs-ink-muted);
}
/*
Board: the count is an INVERTED PILL beside the heading — 12px/600,
`line-height: 16px`, `padding: 2px 9px`, `border-radius: 999px`, filled with
the ink colour and set in the rail ground. It is the boards' second accent,
and it is not a hue: it is inversion. See `--vs-invert-fill`.
The board's pill carries a bare numeral and this one carries the product's
own labelled count; that difference is truth grammar and is declared as a
divergence rather than quietly normalised.
*/
.decisions-section .section-count {
font-size: 12px; font-weight: 600; line-height: 16px;
padding: 2px 9px; border-radius: 999px;
background: var(--vs-invert-fill); color: var(--vs-invert-ink);
}
/* The board's rule under the section head is the hairline, not neutral-800's
older value; the token rebind already carries it, this states the role. */
.decisions-section .section-head { border-bottom-color: var(--vs-line-hairline); }
/* ---- THE JUDGMENT CARD ----------------------------------------------- */
/*
SUPERSEDES VISUAL-AUTHORITY-1 §6/§8's accent edge, accent-tinted ground and
elevation on the lead decision.
Board (`Main.dc.html`, the one expanded `<article>`):
background #18181B (light: #FFFFFF)
border 1px #34343A (light: 1px #D6D6E0) — on ALL FOUR SIDES
border-radius 14px
padding 22px
box-shadow none (light: the two-layer ink shadow)
The accent edge, the 4% accent tint and `--shadow-md` are all legacy: no
board draws a coloured edge on this card, and the dark boards carry
`box-shadow: none` throughout — "dark carries depth with border steps". The
card is distinguished from the page by FILL and BORDER, which is exactly the
mechanism the boards use and the mechanism the §6 ruling was reaching for.
*/
.command-page .decision,
.command-page .decision-lead {
background: var(--vs-panel);
border: 1px solid var(--vs-line-card);
border-radius: var(--vs-radius-card);
padding: 22px;
box-shadow: var(--vs-elevation);
}
/* Board: the card's `h3` is 20px/600, `line-height: 1.3`. */
.command-page .decision .decision-title,
.command-page .decision-lead .decision-title {
font-size: 20px; font-weight: 600; line-height: 1.3;
letter-spacing: normal;
}
/* Board: `Sovern could not finish this…` is 14px muted at 1.5. */
.command-page .decision-why,
.command-page .decision-provenance {
font-size: 14px; color: var(--vs-ink-muted); line-height: 1.5;
}
/* Board: `Why Sovern brought this` 12px muted, its value 14px at full ink. */
.command-page .decision-stake-label {
font-size: 12px; color: var(--vs-ink-muted);
text-transform: none; letter-spacing: normal;
}
.command-page .decision-stake-value {
font-size: 14px; color: var(--vs-ink);
}
/*
Board: the stake sits BELOW the title block, separated by a 1px #27272B
rule, not beside it in a bordered sidebar. One column, one reading order.
*/
.command-page .decision-lead .decision-hero {
display: flex; flex-direction: column; gap: 12px;
align-items: stretch;
}
/*
`align-self: start` is what made the §8 stake a 250px side panel; in a single
column it collapses the element to its content and the rule above it stops
halfway across the card. The board's rule spans the full card width, so the
stake stretches.
*/
.command-page .decision-stake {
align-self: stretch; width: 100%;
border: 0; border-top: 1px solid var(--vs-line-hairline);
border-radius: 0;
padding: 12px 0 0; background: none;
display: flex; flex-direction: column; gap: 4px;
}
/* The card is one column of stacked blocks at the board's own 12px rhythm. */
.command-page .decision-lead > .decision-hero > div,
.command-page .decision .decision-head:empty { margin: 0; }
.command-page .decision-lead .decision-hero > div {
display: flex; flex-direction: column; gap: 12px;
}
/*
THE PRIMARY ACTION IS INVERTED, NOT ACCENT-FILLED.
Board: `Open the conversation` is `background: #EDEDEF; color: #0B0B0C`
(light: `#17171C` on `#FFFFFF`), `min-height: 44px`, `padding: 0 18px`,
`border-radius: 10px`, 14px/600. The accent is NOT spent here — it paints
the Send button and the orb and nothing else on these boards.
Scoped to the decision card so `.button-primary` keeps its accent fill
everywhere this canvas does not govern.
*/
.command-page .decision .row .button-primary,
.command-page .decision .row .button,
.command-page .decision-lead .row .button {
min-height: 44px;
display: inline-flex; align-items: center;
padding: 0 18px;
border-radius: var(--vs-radius-control);
background: var(--vs-invert-fill);
border: 1px solid var(--vs-invert-fill);
color: var(--vs-invert-ink);
font-size: 14px; font-weight: 600;
}
.command-page .decision .row .button:hover,
.command-page .decision-lead .row .button:hover {
background: color-mix(in srgb, var(--vs-invert-fill) 88%, var(--vs-ink-muted));
border-color: color-mix(in srgb, var(--vs-invert-fill) 88%, var(--vs-ink-muted));
}
/*
Board: the collapsed tail — `min-height: 48px`, `padding: 0 22px`,
`border: 1px solid #27272B`, `border-radius: 12px`, 14px, full ink, with the
chevron muted. A bordered row, not a top-ruled list header.
*/
.command-page .decision-rows-more { border-top: 0; }
.command-page .decision-rows-more-summary {
min-height: 48px; display: flex; align-items: center;
justify-content: space-between;
padding: 0 22px;
border: 1px solid var(--vs-line-hairline);
border-radius: var(--vs-radius-collapsed);
font-size: 14px; color: var(--vs-ink);
}
/* ---- THE BRIEF ------------------------------------------------------- */
/*
SUPERSEDES the 2px accent bar on `.adviser-brief`.
The boards' brief is a five-row label/value grid whose CONTENT this product
does not compute — see the declared divergence in
docs/command-visual-system/02-DIVERGENCES.md. What IS implemented here is the
brief's TREATMENT, which is a property of the system rather than of the copy:
no coloured edge (no board draws one anywhere), the board's own body size and
leading (15px / 1.5), the board's body ink, and the full-strength register
the board reserves for its last row.
*/
.command-page .adviser-brief {
border-left: 0;
padding-left: 0;
}
.command-page .adviser-brief-lead {
font-size: 15px; line-height: 1.5; font-weight: 600;
letter-spacing: normal; color: var(--vs-ink);
}
.command-page .adviser-brief-text {
font-size: 15px; line-height: 1.5; color: var(--vs-ink-body);
}
/* ---- THE COMPOSER ---------------------------------------------------- */
/*
SUPERSEDES HC-HOME-DESIGN-RECONCILE-2's floating-pill composer.
Board (`Main.dc.html`, bottom of the 760px column):
background #18181B (light: #FFFFFF)
border 1px #2E2E33 (light: 1px #CFCFDB) — its OWN line value,
one step from the card's, deliberately
border-radius 16px
padding 14px 14px 12px 16px
box-shadow none (light: the two-layer ink shadow)
`--shadow-lg` is a 1px neutral-500 ring plus a 40px black ambient: on the
dark boards that ring is brighter than the card border it sits beside, which
inverts the hierarchy the border steps exist to create.
*/
.entry .composer,
.composer-host .composer {
background: var(--vs-panel);
border: 1px solid var(--vs-line-composer);
border-radius: var(--vs-radius-composer);
padding: 14px 14px 12px 16px;
box-shadow: var(--vs-elevation);
}
/*
SUPERSEDES HC-HOME-APPROVED-COMPOSITION-RESTORE-1 R5's two nested surfaces.
R5 is an explicit owner visual ruling — "the approved composer is TWO nested
surfaces", an outer floating shell and a separate inner rounded surface
holding the field and controls — and it is named here rather than quietly
dissolved, because superseding a standing ruling should be visible to the
person who made it.
The governing boards draw ONE panel. `Main.dc.html` puts the textarea
directly in the panel with `border: none; background: none`, and the controls
in a plain footer row beneath it. There is no inner surface on any of the
twelve boards, in either theme. A second painted box inside the panel reads
as a field inside a field, and it is the single loudest remaining piece of
legacy composition on this screen.
So the inner surface stops painting — it keeps its layout job and loses its
border, fill and radius. Nothing moves and nothing is removed from the DOM:
if the owner reinstates R5, restoring three declarations here brings it back.
*/
.entry .composer-input-surface,
.composer-host .composer-input-surface {
border: 0; background: none; border-radius: 0; padding: 0;
}
/* Board: the textarea is 16px, no border, no fill, the page's own ink. */
.entry .composer .textarea,
.composer-host .composer .textarea,
.entry .composer-row .textarea {
font-size: 16px; color: var(--vs-ink);
background: none; border: 0;
}
/* Board: the caption beside the orb is 12px, muted. */
.composer-caption { font-size: 12px; color: var(--vs-ink-muted); }
/*
Board: both composer controls are 44x44 at `border-radius: 10px`. `Speak` is
bordered in the hairline over no fill; `Send` is the ONE place the primary
accent is spent as a fill, with the rail ground as its ink.
*/
.mic, .composer-send {
width: 44px; height: 44px; min-width: 44px; min-height: 44px;
padding: 0; border-radius: var(--vs-radius-control);
display: inline-flex; align-items: center; justify-content: center;
}
.mic {
border: 1px solid var(--vs-line-hairline);
background: none; color: var(--vs-ink);
}
.composer-send {
background: var(--vs-accent);
border: 1px solid var(--vs-accent);
color: var(--vs-accent-ink);
}
.composer-send:hover {
background: var(--accent-hover); border-color: var(--accent-hover);
}
/* ---- PHONE — the boards' own second scale --------------------------- */
/*
The phone boards (`Phone.dc.html` / `PhoneLight.dc.html`) re-scale exactly
four things and leave everything else alone: `h1` 40 -> 30, the card `h3`
20 -> 18, card padding 22 -> 18, and the composer's side padding to 12px.
The queue and the composer are otherwise unchanged, and this follows that
restraint rather than inventing a general phone scale.
The breakpoint is the shell rebuild's own drawer tier, which is banked. This
adds no breakpoint and promotes none.
*/
@media (max-width: 900px) {
.command-page .page-title { font-size: 30px; }
.command-page .decision .decision-title,
.command-page .decision-lead .decision-title { font-size: 18px; }
.command-page .decision,
.command-page .decision-lead { padding: 18px; }
.composer-host { padding-left: 12px; padding-right: 12px; }
}
/* ===================================================================== */
/* SOVERNCOMMAND-COMMAND-SHELL-AUTHORITY-CORRECTION */
/* */
/* The owner inspected signed-in production and ruled MATCHES_ACCEPTED_ */
/* STATE a FAIL on the rail. Measured against the shell authority */
/* (canvas 1791053051-0235, `Main.dc.html` / `Collapsed.dc.html`), the */
/* divergences were in this stylesheet, not in lineage or deployment: */
/* the glyphs were `display: none` on the full rail, the head-row control */
/* was `display: none` above the drawer, there was no collapsed rail mode, */
/* and the section rhythm was flatter than the board's. Each rule below */
/* quotes the board value it applies. The production SOVERN artwork is */
/* owner-ratified branding and is not touched. */
/* ===================================================================== */
/* Board: every Surfaces and Protocol row carries its 18px glyph, gap 10px. */
.navlink-glyph { display: inline-flex; }
/* Board: Actions `margin-top: 10px; gap: 6px`; Surfaces `margin-top: 14px`. */
.shell-nav-actions { margin-top: 10px; gap: 6px; }
.shell-nav-surfaces { margin-top: 14px; }
/* Board: `Protocol` / `Recent` labels — `margin-top: 18px; margin-bottom: 4px`. */
.shell-nav-protocol, .shell-nav-recent { margin-top: 18px; }
.shell-nav-section { margin-bottom: 4px; }
/* Board: Recent rows are 34px tall, `line-height: 34px`, padding 0 10px. */
.shell-nav-recent-item, .shell-nav-recent-all {
height: 34px; line-height: 34px; padding: 0 10px; border-radius: var(--vs-radius-row);
}
.shell-nav-recent-item { color: var(--vs-ink-muted); }
.shell-nav-recent-all { color: var(--vs-ink-muted); }
/* Board: footer gap 8px; profile button 44px, padding 0 8px, r10;
monogram 28px on the track ground, 12px/600, no ring. */
.shell-nav-foot { gap: 8px; }
.profile-control { border-radius: var(--vs-radius-control); color: var(--vs-ink); }
.profile-mono {
border: 0; background: var(--vs-track); color: var(--vs-ink);
font-size: 12px; font-weight: 600;
}
/* ---- the rail-mode control ------------------------------------------ */
/* Board: 40x40, r8, muted, no border, panel glyph. The X glyph belongs to
the drawer tier only. */
.shell-nav-close { border-radius: var(--vs-radius-row); color: var(--vs-ink-muted); }
.shell-nav-close-panel { display: none; }
@media (min-width: 901px) {
html:not([data-world="societi"]) .shell-nav-close { display: flex; }
html:not([data-world="societi"]) .shell-nav-close-x { display: none; }
html:not([data-world="societi"]) .shell-nav-close-panel { display: inline; }
}
/* ---- COLLAPSED — `Collapsed.dc.html`, the menu closed --------------- */
/* 64px rail, padding `12px 0`, centred column: the mark, then "Open the
menu", then New command and Search as 40px icon buttons, the surfaces as
40px icon buttons, a 24px divider, Societi, and the footer as monogram
only. Non-immersive surfaces only; Societi's own compact tier is governed
by the Societi canvas and is untouched. */
@media (min-width: 901px) {
html[data-rail="collapsed"]:not([data-world="societi"]) { --shell-nav-w: var(--shell-nav-compact); }
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav { padding: 12px 0; align-items: center; }
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-head {
flex-direction: column; justify-content: flex-start; gap: 10px;
}
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-mark {
width: 34px; height: 44px; margin-left: 0;
background-image: var(--brand-mark, var(--brand-logo)); background-position: center;
}
html[data-rail="collapsed"]:not([data-world="societi"]) .navlink-label,
html[data-rail="collapsed"]:not([data-world="societi"]) .navlink-count,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-new-label,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-search-label,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-section,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-recent,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-setup-head,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-setup-track,
html[data-rail="collapsed"]:not([data-world="societi"]) .profile-name,
html[data-rail="collapsed"]:not([data-world="societi"]) .profile-chevron,
html[data-rail="collapsed"]:not([data-world="societi"]) .world-status > span:last-child,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-dot { display: none; }
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-actions { margin-top: 6px; align-items: center; }
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-new,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-search,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-surfaces .navlink,
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-protocol .navlink {
width: 40px; min-height: 40px; height: 40px; padding: 0; gap: 0;
justify-content: center; border-radius: var(--vs-radius-control);
}
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-surfaces { margin-top: 12px; align-items: center; }
/* Board: a 24px hairline between Surfaces and Societi, `margin: 10px 0`. */
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-protocol {
margin-top: 0; display: flex; flex-direction: column; align-items: center;
}
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-protocol::before {
content: ""; width: 24px; height: 1px; margin: 10px 0; background: var(--vs-line-hairline);
}
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-foot { align-items: center; gap: 10px; }
/* Board: setup collapses to a 28px ring carrying the done count. */
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-setup-card {
width: 28px; height: 28px; padding: 0; border-radius: 50%;
border: 2px solid var(--vs-track); display: inline-flex; align-items: center; justify-content: center;
}
html[data-rail="collapsed"]:not([data-world="societi"]) .shell-nav-setup-card::after {
content: attr(data-done); font-size: 12px; font-weight: 600; color: var(--vs-ink-muted);
}
html[data-rail="collapsed"]:not([data-world="societi"]) .profile-control {
width: 40px; padding: 0; justify-content: center;
}
}
/* ===================================================================== */
/* CONVERSATIONS — one list, open one, deeper by choice */
/* Canvas 1791405577-e1ab, boards A–E, dark and light. Every value below */
/* is the board's; the palette is the shell's own `--vs-*` tokens, plus */
/* the four values only these boards introduce (menu ground, its shadow, */
/* the destructive ink, the sheet scrim). */
/* ===================================================================== */
:root {
--conv-menu-ground: #1F1F23;
--conv-menu-shadow: 0 16px 40px rgba(0,0,0,0.5);
--conv-danger: #E5837B;
--conv-scrim: rgba(0,0,0,0.55);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme="light"]) {
--conv-menu-ground: #FFFFFF;
--conv-menu-shadow: 0 1px 2px rgba(23,23,40,0.06), 0 16px 40px rgba(23,23,40,0.14);
--conv-danger: #B4372C;
--conv-scrim: rgba(23,23,40,0.32);
}
}
[data-theme="light"] {
--conv-menu-ground: #FFFFFF;
--conv-menu-shadow: 0 1px 2px rgba(23,23,40,0.06), 0 16px 40px rgba(23,23,40,0.14);
--conv-danger: #B4372C;
--conv-scrim: rgba(23,23,40,0.32);
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.conv-ico, .conv-menu-ico, .conv-search-ico, .conv-chip-chev { display: inline-flex; flex: none; line-height: 0; }
/* ---- A · the list, in the 760px column -------------------------------- */
.conv-page { width: 760px; max-width: 100%; margin: 0 auto; padding-top: 48px; font-family: var(--vs-font); color: var(--vs-ink); }
.conv-top { display: flex; flex-direction: column; gap: 14px; }
.conv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.conv-h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; color: var(--vs-ink); }
.conv-select-btn {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
border-radius: 10px; border: 1px solid var(--vs-line-hairline); background: none;
color: var(--vs-ink); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.conv-search {
display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 14px;
border-radius: 12px; border: 1px solid var(--vs-line-composer); background: var(--vs-panel);
color: var(--vs-ink-muted); box-shadow: var(--vs-elevation);
}
.conv-search-input {
flex: 1; min-width: 0; height: 40px; border: none; outline: none; background: none;
color: var(--vs-ink); font: inherit; font-size: 15px;
}
.conv-search-input::placeholder { color: var(--vs-ink-muted); }
.conv-search-clear {
width: 36px; height: 36px; flex: none; border-radius: 10px; border: none; background: none;
color: var(--vs-ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.conv-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conv-chips { display: flex; gap: 8px; }
.conv-chip {
display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
border-radius: 999px; background: none; color: var(--vs-ink); border: 1px solid var(--vs-line-hairline);
font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.conv-chip.is-active { background: var(--vs-invert-fill); color: var(--vs-invert-ink); border-color: var(--vs-invert-fill); }
.conv-chip-chev { margin-left: 2px; }
.conv-sort {
display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px;
border: none; background: none; color: var(--vs-ink-muted); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.conv-list { padding-top: 6px; padding-bottom: 12px; }
.conv-group { padding: 0 14px; margin-top: 14px; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--vs-ink-muted); }
.conv-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.conv-row {
position: relative; display: flex; align-items: center; gap: 14px; box-sizing: border-box;
min-height: 60px; padding: 11px 12px 11px 14px; border-radius: 12px;
}
.conv-row:hover, .conv-row:focus-within, .conv-row.is-selected {
background: var(--vs-panel); box-shadow: inset 0 0 0 1px var(--vs-line-card);
}
.conv-row-sovern:hover { background: none; box-shadow: none; }
.conv-row-main {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
text-decoration: none; color: var(--vs-ink);
}
.conv-row-main:hover { color: var(--vs-ink); }
.conv-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-title-strong { font-weight: 600; }
.conv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--vs-ink-muted); }
.conv-meta-nowrap { white-space: nowrap; display: block; }
.conv-dot { opacity: 0.55; }
.conv-project { display: inline-flex; align-items: center; gap: 5px; }
.conv-sovern-avatar {
width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--vs-track);
display: inline-flex; align-items: center; justify-content: center;
}
.conv-sovern-mark {
display: inline-block; width: 20px; height: 20px; flex: none;
background-image: var(--brand-mark, var(--brand-logo)); background-size: contain;
background-repeat: no-repeat; background-position: center;
}
.conv-sovern-mark.is-small { width: 16px; height: 16px; }
.conv-always {
font-size: 12px; color: var(--vs-ink-muted); border: 1px solid var(--vs-line-hairline);
border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.conv-check-spacer { width: 20px; flex: none; }
.conv-hover-actions { display: none; align-items: center; gap: 14px; }
.conv-row:hover .conv-hover-actions, .conv-row:focus-within .conv-hover-actions { display: inline-flex; }
.conv-pin {
display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
border-radius: 10px; border: 1px solid var(--vs-line-hairline); background: none;
color: var(--vs-ink); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.conv-more, .conv-unpin {
width: 40px; height: 40px; flex: none; border-radius: 10px; border: none; background: none;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.conv-more { color: var(--vs-ink-muted); }
.conv-unpin { color: var(--vs-ink); }
.conv-check {
width: 20px; height: 20px; flex: none; box-sizing: border-box; border-radius: 6px;
border: 1.5px solid var(--vs-ink-muted); background: none; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; color: var(--vs-invert-ink);
}
.conv-check.is-checked { border: none; background: var(--vs-invert-fill); }
.conv-rename {
font: inherit; font-size: 15px; font-weight: 500; color: var(--vs-ink); background: var(--vs-ground);
border: 1px solid var(--vs-line-composer); border-radius: 8px; padding: 2px 8px; min-width: 0;
}
.conv-none { padding: 18px 14px; color: var(--vs-ink-muted); font-size: 14px; margin: 0; }
/* ---- A · search with no match ----------------------------------------- */
.conv-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; text-align: center; min-height: 420px; padding-bottom: 60px;
}
.conv-empty-title { font-size: 20px; font-weight: 600; }
.conv-empty-sub { font-size: 14px; color: var(--vs-ink-muted); }
.conv-empty-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.conv-empty-btn {
min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--vs-line-hairline);
background: none; color: var(--vs-ink); font: inherit; font-size: 14px; cursor: pointer;
}
.conv-empty-btn.is-primary { border: none; background: var(--vs-invert-fill); color: var(--vs-invert-ink); font-weight: 600; }
/* ---- D · Select ------------------------------------------------------- */
.conv-selectbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px;
padding: 0 8px 0 16px; border-radius: 12px; background: var(--vs-panel);
border: 1px solid var(--vs-line-card); box-shadow: var(--vs-elevation);
}
.conv-selectbar-count { font-size: 14px; font-weight: 500; }
.conv-selectbar-actions { display: inline-flex; gap: 8px; }
.conv-bar-btn {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
border-radius: 10px; border: 1px solid var(--vs-line-hairline); background: none;
color: var(--vs-ink); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.conv-bar-btn.is-primary { border-color: var(--vs-invert-fill); background: var(--vs-invert-fill); color: var(--vs-invert-ink); font-weight: 600; }
.conv-bar-btn:disabled { opacity: 0.5; cursor: default; }
/* ---- E · the small menus, and the phone's sheet ----------------------- */
.conv-menu {
position: absolute; z-index: 60; box-sizing: border-box; padding: 6px; border-radius: 12px;
background: var(--conv-menu-ground); border: 1px solid var(--vs-line-card);
box-shadow: var(--conv-menu-shadow); display: flex; flex-direction: column; gap: 2px;
font-family: var(--vs-font);
}
.conv-menu-label { padding: 6px 10px 4px; font-size: 12px; color: var(--vs-ink-muted); }
.conv-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px;
border: none; border-radius: 8px; background: none; color: var(--vs-ink); font: inherit;
font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer; overflow: hidden; text-overflow: ellipsis;
}
.conv-menu-item:hover, .conv-menu-item:focus-visible { background: var(--vs-panel); }
.conv-menu-item.is-current { font-weight: 500; }
.conv-menu-item:disabled { opacity: 0.5; cursor: default; }
.conv-menu-ico { color: var(--vs-ink-muted); }
.conv-menu-item.is-danger, .conv-menu-item.is-danger .conv-menu-ico { color: var(--conv-danger); }
.conv-menu-rule { height: 1px; background: var(--vs-line-hairline); margin: 4px 6px; }
.conv-sheet-layer { position: fixed; inset: 0; z-index: 70; }
.conv-sheet-scrim { position: absolute; inset: 0; background: var(--conv-scrim); }
.conv-sheet {
position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 8px 12px 28px;
border-radius: 20px 20px 0 0; background: var(--conv-menu-ground); border-top: 1px solid var(--vs-line-card);
box-shadow: var(--conv-menu-shadow); display: flex; flex-direction: column; gap: 2px; font-family: var(--vs-font);
}
.conv-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--vs-line-card); margin: 2px auto 10px; }
.conv-sheet-head { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.conv-sheet-title { font-size: 16px; font-weight: 600; color: var(--vs-ink); }
.conv-sheet-meta { font-size: 13px; color: var(--vs-ink-muted); }
.conv-sheet .conv-menu-rule { margin: 2px 6px; }
.conv-sheet .conv-menu-item { height: 52px; font-size: 16px; }
/* ---- C / D · the bar above an open conversation or the panes --------- */
.conv-topbar {
height: 56px; flex: none; box-sizing: border-box; display: flex; align-items: center;
justify-content: space-between; padding: 0 16px 0 20px; border-bottom: 1px solid var(--vs-line-hairline);
font-family: var(--vs-font); color: var(--vs-ink);
}
.conv-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.conv-topbar-right { display: flex; align-items: center; gap: 8px; }
.conv-topbar-thread .conv-topbar-right { gap: 4px; }
.conv-back {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px;
border-radius: 10px; color: var(--vs-ink-muted); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.conv-topbar-rule { width: 1px; height: 20px; background: var(--vs-line-hairline); flex: none; }
.conv-topbar-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.conv-side-title { display: inline-flex; align-items: center; gap: 8px; }
.conv-topbar-meta { font-size: 13px; color: var(--vs-ink-muted); }
.conv-more.is-visible { display: inline-flex; }
/* the open conversation: the transcript in the board's 760px column */
.conv-thread-layout { display: flex; justify-content: center; gap: 24px; }
.conv-thread-column { width: 760px; max-width: 100%; padding-top: 36px; min-width: 0; }
.conv-thread-layout.has-context .conv-thread-column { flex: 0 1 760px; }
.conv-thread-layout.wide-mode .conv-thread-column { width: auto; flex: 1 1 auto; max-width: none; }
.conv-thread-layout > .inspector { flex: 0 0 320px; }
/* D · side by side: the panes fill the frame, so their divider runs full height */
html[data-surface="conv-open"] .main { display: flex; flex-direction: column; }
.conv-side-page { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.conv-panes { display: flex; min-height: 0; flex: 1; }
.conv-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--vs-line-hairline); }
.conv-pane:last-child { border-right: none; }
.conv-pane-head {
height: 52px; flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
padding: 0 12px 0 24px; border-bottom: 1px solid var(--vs-line-hairline);
}
.conv-pane-titles { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 13px; color: var(--vs-ink-muted); }
.conv-pane-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--vs-ink); text-decoration: none; }
.conv-pane-close {
width: 36px; height: 36px; flex: none; border-radius: 10px; border: none; background: none;
color: var(--vs-ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.conv-pane-body { padding: 28px 24px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
/* the board's transcript treatment, used by the panes */
.conv-bubble {
align-self: flex-end; max-width: 78%; background: var(--vs-panel); border: 1px solid var(--vs-line-card);
border-radius: 16px; padding: 12px 16px; font-size: 15px; line-height: 1.55; white-space: pre-wrap;
}
.conv-reply { display: flex; gap: 12px; align-items: flex-start; }
.conv-reply-mark {
width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--vs-track);
display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.conv-reply-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
/* the composer's caption, as every board writes it */
.conv-composer-caption { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vs-ink-muted); margin-right: auto; }
/* The surfaces own their geometry: the list its 48px top inside the 760px
column, an open conversation and the panes the full width under a 56px bar. */
html[data-surface="conv-list"] .main { padding-top: 0; }
html[data-surface="conv-open"] .main { max-width: none; padding: 0; }
/* The reply composer sits in the board's 760px column, like Command's. */
html[data-surface="conv-open"] .composer-host > .composer,
html[data-surface="conv-list"] .composer-host > .composer { max-width: var(--vs-measure-command); margin: 0 auto; }
html[data-surface^="conv"] .composer .textarea { min-height: 28px; }
/* The legal footer still scrolls with the content; on these surfaces the
content fills the frame first, so it sits below the fold as the boards
leave it rather than between the list and the Ask box. */
html[data-surface^="conv"] .shell-body.is-framed > .shell-scroll > .main { min-height: 100%; box-sizing: border-box; }
/* The list's Ask box in the boards' arrangement. */
html[data-surface="conv-list"] .composer-input-surface {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
column-gap: 8px; row-gap: 10px;
}
html[data-surface="conv-list"] .composer-input-surface .textarea { grid-column: 1 / -1; grid-row: 1; }
html[data-surface="conv-list"] .composer-input-surface .composer-origin { display: none; }
html[data-surface="conv-list"] .composer-input-surface .entry-captions {
grid-column: 1; grid-row: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0;
}
html[data-surface="conv-list"] .composer-input-surface .composer-caption { margin: 0; font-size: 12px; color: var(--vs-ink-muted); }
html[data-surface="conv-list"] .composer-input-surface .mic { grid-column: 2; grid-row: 2; }
html[data-surface="conv-list"] .composer-input-surface .composer-send { grid-column: 3; grid-row: 2; }
/* BOARD C's transcript (ConvOpen / ConvOpenPhone), scoped to the open
conversation: one 22px rhythm between every message (18px on phone), the
member's words in a bordered bubble at 15px / 1.55 with 12px 16px padding,
Sovern's reply at 15px / 1.6 beside its 28px mark. This supersedes, on this
surface only, HC-HUMAN-USE-1's 16-17px reading floor: the owner accepted
these boards on 2026-10-07, after that ruling. */
.conv-thread-column .turns { gap: 22px; margin-bottom: 22px; }
.conv-thread-column .turn { gap: 22px; }
.conv-thread-column .turn-request {
align-self: flex-end; max-width: 78%; box-sizing: border-box; margin: 0;
background: var(--vs-panel); border: 1px solid var(--vs-line-card); border-radius: 16px;
padding: 12px 16px; font-size: 15px; line-height: 1.55; color: var(--vs-ink);
}
.conv-thread-column .conv-reply { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
html[data-surface="conv-open"] .conv-thread-column .turn .conv-reply .turn-response {
margin: 0; padding: 0; flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--vs-ink);
background: none; border: 0;
}
@media (max-width: 900px) {
.conv-thread-column .turns, .conv-thread-column .turn { gap: 18px; }
}
/* ---- review corrections (independent review STRIKE at 400f9e3) -------- */
/* The boards set no line-height on the list, so rows take the font's own:
60px rows, titles at their true weight. */
.conv-page, .conv-menu, .conv-sheet { line-height: normal; }
.conv-meta, .conv-title, .conv-always { line-height: normal; }
/* The list column fills the frame so the no-match state centres in the
space between the filters and the Ask box, as ConvEmpty draws it. */
html[data-surface="conv-list"] .main { display: flex; flex-direction: column; }
.conv-page { display: flex; flex-direction: column; flex: 1; min-height: 100%; box-sizing: border-box; }
.conv-empty { flex: 1; min-height: 0; padding-bottom: 60px; }
/* Open states (ConvRowMenu, ConvFilter): the trigger is filled while its
menu is up. */
.conv-more[aria-expanded="true"] { background: var(--vs-track); color: var(--vs-ink); }
.conv-chip[aria-expanded="true"]:not(.is-active) { background: var(--vs-track); border-color: var(--vs-line-card); }
/* The open conversation's Recent row at full ink (ConvOpen). */
.shell-nav-recent-item[aria-current="page"] { color: var(--vs-ink); font-weight: 500; }
/* The composer at the boards' size on these surfaces: 16/14/12px padding,
a 28px text row, 10px to the 44px controls, no resize grip. */
html[data-surface^="conv"] .composer .textarea { resize: none; height: 28px; min-height: 28px; padding: 2px 0; }
html[data-surface="conv-list"] .composer-input-surface { padding: 0; }
/* An empty status line takes no gap. */
html[data-surface^="conv"] .composer > .muted:empty { display: none; }
/* The drawer's scrim, as the Conversations phone boards draw it. */
html[data-surface^="conv"] .shell-nav-scrim { background: rgba(0,0,0,0.62); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"])[data-surface^="conv"] .shell-nav-scrim { background: rgba(23,23,28,0.38); }
}
:root[data-theme="light"][data-surface^="conv"] .shell-nav-scrim { background: rgba(23,23,28,0.38); }
/* ---- phone: the drawer tier ------------------------------------------- */
@media (max-width: 900px) {
/* ConvPhone: the list sits 12px from each edge, the header block 2px further in. */
html[data-surface="conv-list"] .main { padding: 0 12px; }
.conv-page { width: 100%; max-width: none; margin: 0; padding: 18px 0 0; }
.conv-top { padding: 0 2px; }
/* ConvOpenPhone: the conversation's own bar is the only top bar, and the
composer sits on the ground, 8/12/16px, with no rule above it. */
html[data-surface="conv-open"] .topbar { display: none; }
html[data-surface="conv-open"] .composer-host { border-top: 0; background: none; backdrop-filter: none; padding: 8px 12px 16px; }
.conv-top { gap: 12px; }
.conv-h1 { font-size: 26px; }
.conv-select-btn { height: 40px; }
.conv-row { min-height: 58px; padding: 10px 8px 10px 12px; }
.conv-hover-actions { display: inline-flex; }
.conv-hover-actions .conv-pin { display: none; }
.conv-row:hover, .conv-row:focus-within { background: none; box-shadow: none; }
.conv-row.is-selected { background: var(--vs-panel); box-shadow: inset 0 0 0 1px var(--vs-line-card); }
.conv-unpin { width: 36px; }
.conv-topbar { padding: 0 6px; }
.conv-topbar-thread .conv-topbar-rule, .conv-topbar-thread .conv-back-label { display: none; }
.conv-back { width: 44px; height: 44px; padding: 0; justify-content: center; color: var(--vs-ink); }
.conv-thread-column { padding: 20px 16px 0; }
.conv-selectbar { height: auto; flex-wrap: wrap; padding: 8px; }
.conv-panes { flex-direction: column; }
.conv-pane { border-right: none; border-bottom: 1px solid var(--vs-line-hairline); }
}