/* ============================================================ Brand v3.0 — "Private Lending, Modern" Mirrors docs/brand/tokens/*.css (pl-brand@b9c9036). This block is injected app-wide from app/layout.tsx, so every surface — not just the loan page — resolves these. Two layers below the brand tokens: 1. APP ALIAS BRIDGE. The app's ~1,166 inline style objects reference short names (--bg-canvas, --text-primary, --accent, --good…). Repointing those aliases at --plm-* reskins the whole app without touching a single call site. 2. LEGACY --pl-* SHIMS. A handful of raw v2 token names are still referenced directly (--pl-font-mono, --pl-navy…). They resolve to their v3 equivalents so nothing dangles. Deliberate deviations from docs/brand, each with a reason: --accent -> --plm-link, NOT --plm-accent. Signal Blue #30A8FF is 2.57:1 on white — it cannot carry text or a 1px stroke on a light ground. The app uses --accent for link text, icon strokes and borders as well as button fills, so it must be AA-safe. --plm-link (#146FB8, 5.26:1) is the system's own answer for exactly this. The bright Signal Blue stays available as --plm-accent for fills on dark or on a filled ground, and is what the dark theme lifts to. --muted -> --plm-text-secondary, NOT --plm-text-muted. --plm-text-muted is 3.50:1 on white, under AA, and every one of the app's ~31 --muted call sites is small meta text. Darkening it is not an option: any value reaching 4.5:1 is a gray outside the Slate ramp, which AGENTS.md forbids. --warn and --pending both -> --plm-warning-*. v2 had five states (adding Brass "pending" and Ember "caution"); v3 has four. The collapse is the system's intent, but it does mean "awaiting docs" and "past due" now read the same. Worth a look once the component pass starts. ============================================================ */ :root { /* ── Ink / Navy: surfaces + type ───────────────────── */ --plm-navy-950: #0B1520; --plm-navy-900: #101D2C; --plm-navy-800: #16273A; --plm-navy-700: #1E3449; --plm-navy-600: #2A4762; --plm-navy-500: #3A5B7A; /* ── Signal Blue: brand voice, links, active states ── */ --plm-blue-50: #EFF7FF; --plm-blue-100: #DBEDFF; --plm-blue-200: #B9DBFF; --plm-blue-300: #8AC5FF; --plm-blue-400: #55B2FF; --plm-blue-500: #30A8FF; --plm-blue-600: #1A8AE0; --plm-blue-700: #146FB8; --plm-blue-800: #135A93; --plm-blue-900: #144B77; /* ── Slate: the only neutrals. Never invent a gray. ── */ --plm-slate-0: #FFFFFF; --plm-slate-25: #FAFBFC; --plm-slate-50: #F7F9FB; --plm-slate-100: #EFF3F7; --plm-slate-200: #E6EBF0; --plm-slate-300: #D3DBE3; --plm-slate-400: #A9B6C3; --plm-slate-500: #7A8B9C; --plm-slate-600: #5F7284; --plm-slate-700: #47596A; --plm-slate-800: #33424F; --plm-slate-900: #22303C; /* ── Functional states — never decorative ─────────── */ --plm-success-fg: #1A7F4E; --plm-success-bg: #E8F6EE; --plm-success-br: #BCE4CD; --plm-info-fg: #1668B8; --plm-info-bg: #E8F2FD; --plm-info-br: #BEDBF7; --plm-warning-fg: #9A6A15; --plm-warning-bg: #FDF0DD; --plm-warning-br: #F2DCB6; --plm-danger-fg: #B4342B; --plm-danger-bg: #FBE9E7; --plm-danger-br: #F3C9C4; --plm-neutral-fg: #5F7284; --plm-neutral-bg: #EFF3F7; --plm-neutral-br: #D3DBE3; /* ── Data viz: fixed categorical order, do not reorder ── */ --plm-viz-1: #101D2C; --plm-viz-2: #30A8FF; --plm-viz-3: #54C98D; --plm-viz-4: #8AC5FF; --plm-viz-5: #E9B44C; --plm-viz-6: #7A8B9C; --plm-viz-seq-1: #DBEDFF; --plm-viz-seq-2: #B9DBFF; --plm-viz-seq-3: #8AC5FF; --plm-viz-seq-4: #55B2FF; --plm-viz-seq-5: #30A8FF; --plm-viz-seq-6: #146FB8; /* ── Type: ONE family. No serif, no mono, anywhere. ── --plm-font-sans-loaded is set by next/font in layout.tsx. */ /* The fallback inside var() matters: --plm-font-sans-loaded is injected by next/font on , and if it is ever absent the whole declaration goes invalid at computed-value time and every surface drops to the browser's default serif — not to the stack listed after it. */ --plm-font-sans: var(--plm-font-sans-loaded, "Instrument Sans"), "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --plm-font-figure: var(--plm-font-sans); --plm-figure-features: tabular-nums lining-nums; --plm-weight-regular: 400; --plm-weight-medium: 500; --plm-weight-semibold: 600; --plm-weight-bold: 700; --plm-h1-size: 36px; --plm-h1-ls: -0.03em; --plm-h2-size: 28px; --plm-h2-ls: -0.025em; --plm-h3-size: 22px; --plm-h3-ls: -0.02em; --plm-h4-size: 18px; --plm-h4-ls: -0.015em; --plm-body-size: 16px; --plm-body-lh: 1.6; --plm-body-sm-size: 14px; --plm-body-sm-lh: 1.55; --plm-caption-size: 13px; --plm-caption-lh: 1.5; --plm-label-size: 12px; --plm-label-ls: 0.09em; --plm-figure-xl-size: 40px; --plm-figure-xl-ls: -0.04em; --plm-figure-lg-size: 32px; --plm-figure-lg-ls: -0.035em; --plm-figure-md-size: 24px; --plm-figure-md-ls: -0.03em; --plm-figure-sm-size: 16px; --plm-figure-sm-ls: -0.01em; /* ── Space & shape. 10px is the default radius. ────── */ --plm-space-1: 4px; --plm-space-2: 8px; --plm-space-3: 12px; --plm-space-4: 16px; --plm-space-5: 20px; --plm-space-6: 24px; --plm-space-8: 32px; --plm-space-10: 40px; --plm-space-12: 48px; --plm-space-16: 64px; --plm-space-20: 80px; --plm-space-24: 96px; --plm-radius-xs: 6px; /* tags, dense pills */ --plm-radius-sm: 10px; /* buttons, inputs — the default */ --plm-radius-md: 14px; /* cards, tables, panels */ --plm-radius-lg: 18px; /* modals, drawers, page shells */ --plm-radius-full: 999px; /* status pills */ /* ── Depth: TINT builds structure, SHADOW signals lift. Surface tint alone does not separate anything here — the bg -> surface step is only 1.06:1. Cards must carry --plm-shadow-card, or the app reads as flat as v2 did. ── */ --plm-shadow-xs: 0 1px 2px rgba(16, 29, 44, 0.05); --plm-shadow-sm: 0 1px 2px rgba(16, 29, 44, 0.05), 0 2px 6px -2px rgba(16, 29, 44, 0.08); --plm-shadow-md: 0 1px 2px rgba(16, 29, 44, 0.05), 0 8px 20px -8px rgba(16, 29, 44, 0.16); --plm-shadow-lg: 0 1px 2px rgba(16, 29, 44, 0.05), 0 18px 40px -16px rgba(16, 29, 44, 0.22); --plm-shadow-overlay: 0 1px 2px rgba(16, 29, 44, 0.06), 0 28px 60px -20px rgba(16, 29, 44, 0.32); --plm-shadow-accent: 0 6px 18px -6px rgba(48, 168, 255, 0.55); --plm-shadow-dark-md: 0 10px 24px -12px rgba(0, 0, 0, 0.6); --plm-shadow-dark-overlay: 0 24px 56px -20px rgba(0, 0, 0, 0.75); --plm-ring: 0 0 0 3px rgba(48, 168, 255, 0.35); --plm-ring-danger: 0 0 0 3px rgba(180, 52, 43, 0.28); /* ── Motion: one curve, three durations. No bounce. ── */ --plm-ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); --plm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --plm-dur-instant: 100ms; --plm-dur-standard: 180ms; --plm-dur-page: 280ms; --plm-dur-numeric: 700ms; --plm-transition-standard: all var(--plm-dur-standard) var(--plm-ease-out); /* ── Semantic surfaces — light (default) ──────────── */ --plm-bg: #FFFFFF; --plm-bg-sunken: var(--plm-slate-50); --plm-surface-1: #FFFFFF; --plm-surface-2: var(--plm-slate-50); --plm-surface-3: var(--plm-slate-100); --plm-surface-inverse: var(--plm-navy-900); --plm-border: var(--plm-slate-200); --plm-border-strong: var(--plm-slate-300); --plm-border-inverse: rgba(255, 255, 255, 0.16); --plm-text: var(--plm-navy-900); --plm-text-secondary: var(--plm-slate-600); --plm-text-muted: var(--plm-slate-500); --plm-text-inverse: #FFFFFF; --plm-text-inverse-secondary: #A9C2D6; --plm-text-on-accent: #06202F; --plm-accent: var(--plm-blue-500); --plm-accent-hover: var(--plm-blue-600); --plm-accent-quiet: var(--plm-blue-50); --plm-link: var(--plm-blue-700); --plm-link-hover: var(--plm-blue-800); --plm-shadow-card: var(--plm-shadow-sm); --plm-shadow-float: var(--plm-shadow-overlay); --plm-overlay: rgba(16, 29, 44, 0.55); /* The same overlay as two parts, for a surface that paints itself pre-dimmed instead of carrying a translucent layer (see the action rail under a modal). Keep in step with --plm-overlay. */ --plm-overlay-ink: #101D2C; --plm-overlay-alpha: 55%; /* ── App alias bridge (see header note) ───────────── */ /* Elevation must read the same way in both themes: the card is always LIGHTER than the ground it sits on. --bg-surface is the page/panel ground, so it maps to the sunken token, not to surface-2 — in dark, surface-2 (#1B2A38) is lighter than the card (#15222F) and would invert the stack. light: page #F7F9FB < card #FFFFFF < hover #F7F9FB dark: page #0B141C < card #15222F < hover #1B2A38 */ --bg-canvas: var(--plm-surface-1); --bg-surface: var(--plm-bg-sunken); --bg-hover: var(--plm-surface-2); /* Surfaces for things that FLOAT over content with no backdrop — row menus, the tag picker, the action-bar menu. They can't just be --bg-canvas. In light that works, because the card is already white and --plm-shadow-float does the lifting. In dark it does not: --plm-shadow-card is none and even the overlay shadow barely registers on a near-black ground, so a menu painted --bg-canvas over a --bg-canvas card is the same colour with a 1.2:1 hairline around it. Dark therefore steps UP the surface ramp instead (see the dark block), which is the same trick --chrome-raised uses on the navy rail. -hover has to step again, or the item hover would land on the very colour the menu is already painted. */ --bg-float: var(--plm-surface-1); --bg-float-hover: var(--plm-surface-2); /* The ground a CARD sits on, and the one place the two themes need different rungs of the ramp rather than the same token. --bg-surface is the app's general sunken tone, but under a white card it is only a 1.06:1 step: legible across a tall empty area, invisible across a 16px gutter between two cards, which reads as "the page step only happens below the cards". Light therefore drops a further rung to surface-3. It stops there — surface-3 is slate-100 and the next rung, slate-200, IS --border, so a ground painted on it would swallow every card edge. Dark cannot follow: surface-3 is #223243, LIGHTER than the #15222F card, which would float the page above the card instead. Dark stays on the sunken floor (already a wider 1.15:1 step) and takes its extra definition from --border-strong instead. */ --bg-page: var(--plm-surface-3); /* THE GROUND BEHIND A DOCUMENT. Deliberately --bg-page, which is the ground the Documents tab already puts its documents on, so a GENERATED document and a STORED one sit on the same surface in both themes. Defined once and inherited: --bg-page is already theme-aware, so this needs no dark twin. It came back after briefly being removed. The band it used to make above and below the page was never the ground's fault -- that was the document's own 20px margin and a second ground on the iframe, both of which are gone. A ground with the paper flush against it reads as a document viewer; the band read as a mistake. */ --doc-ground: var(--bg-page); --border: var(--plm-border); --border-strong: var(--plm-border-strong); --text-primary: var(--plm-text); --text-secondary: var(--plm-text-secondary); --muted: var(--plm-text-secondary); --accent: var(--plm-link); --accent-hover: var(--plm-link-hover); --accent-soft: var(--plm-accent-quiet); --accent-200: var(--plm-blue-200); /* ── Chrome — the dark ground the app frame is painted on: workspace header, left nav rail, the body behind the right pane's carved corner, the loan page's own .hdr, and the surfaces that hang off them (mobile menu, nav flyout). Deliberately NOT --plm-surface-inverse. Inverse is "the opposite of the current theme" and flips to white on dark; chrome stays dark in both themes, and only the STEP changes. Light uses navy-700 rather than Ink navy-900: against a white content pane the 900 slab read too stark. Dark keeps 900 — the ground there is already #0F1A24, so a lighter chrome would float off the page instead of framing it. --chrome-raised is for anything that must read as sitting ON the chrome (hover flyouts). Always one ramp step lighter than --chrome-bg, so the elevation cue survives both themes. */ --chrome-bg: var(--plm-navy-700); --chrome-raised: var(--plm-navy-600); /* ── The chrome scale ───────────────────────────── Everything painted ON the navy chrome: the workspace header and nav rail, the loan header, the admin header. These are literal whites at fixed alphas rather than slate tokens because chrome stays navy in BOTH themes — a theme-following colour would invert against it. Named here because they were otherwise written inline at 10 different alphas across WorkspaceShell, the loan .hdr and the admin layout, with no way to tell an intentional step from a typo. Values are exactly what those call sites used, so naming them changed nothing on screen. */ --chrome-text: #FFFFFF; /* primary */ --chrome-text-soft: rgba(255, 255, 255, 0.85); /* secondary */ --chrome-text-muted: rgba(255, 255, 255, 0.70); /* tertiary */ --chrome-text-dim: rgba(255, 255, 255, 0.45); /* disabled */ --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-hover-strong: rgba(255, 255, 255, 0.12); --chrome-active: rgba(255, 255, 255, 0.14); --chrome-border: rgba(255, 255, 255, 0.18); --chrome-border-strong: rgba(255, 255, 255, 0.30); --chrome-border-hover: rgba(255, 255, 255, 0.55); /* Error text ON the navy chrome. A constant, not a theme step: the chrome is navy in BOTH themes, so --bad (which resolves to the dark red #B4342B in light) would be the low-contrast pairing there. This is --plm-danger-on-dark, which is the ramp's answer for exactly this ground. */ --chrome-danger: #FF8F84; /* THE GAP BETWEEN AN ACTION-BAR PANEL AND THE CHROME IT OPENED FROM. One number for every panel that is not a document preview — the compose windows and the payoff options step — so they all sit the same distance off the corner where the metrics band meets the action bar. It was 24px on the compose windows and 12 on the options step, which is the sort of difference nobody chooses; they were simply written at different times. A document preview takes no inset at all: it fills the region on purpose. NAMED INTO THE --overlay-* FAMILY, and not --panel-inset, which already exists further down this file as a 16px PADDING for panel bodies. Reusing it would have redefined that value inside :root with no error anywhere — the TOKEN check only asks whether a name resolves, and a collision resolves fine. */ --overlay-inset: 12px; /* ── The ground the app frame sits on at "Normal" content width: the bands either side of it. See the --frame-max block below for the frame itself. Deliberately NOT --chrome-bg. The nav rail is navy, so a navy ground left the frame with no visible left edge at all. Nor is it a surface the app paints with (--plm-bg, --bg-surface), or the bands would read as more content rather than as the ground behind it. Light lands on slate-400. It started at slate-200 — one step darker than the sunken surface — but that read closer to the content than to a ground; slate-400 is heavier and lets the frame sit on it as a window on a desk rather than a panel on a page. Measured against the two things it has to stay clear of: 6.19:1 from the navy-700 rail, so the frame keeps a firm left edge, and 2.07:1 from the white cards. Going further toward navy is the obvious next thought and it does not work — the rail is navy-700, so navy-900 bands land at 1.33:1 against it and the frame's edge disappears outright. Slate-500 (3.65:1) is about where that separation starts to soften. Anything darker than slate-400 needs the rail colour revisited first. Dark goes the other way, to navy-950 — see the dark block, which must override this, so these two tokens live HERE rather than with --frame-max. That block and a bare :root have equal specificity, and it sits earlier in the file, so a later :root would silently win and paint the dark theme slate-200. --frame-shadow is elevation now that colour does the edge-definition work. The right edge mirrors the left (a slab lit from one side only reads as a mistake) and it sits on the frame, so the cast runs unbroken from the top of the header to the bottom of the rail. Negative spread keeps both casts tight to the edges instead of fogging the bands — same technique as the rail's own divider shadow. ── */ --frame-ground: var(--plm-slate-400); --frame-shadow: -8px 0 16px -8px rgba(0, 0, 0, 0.45), 8px 0 16px -8px rgba(0, 0, 0, 0.45); --good: var(--plm-success-fg); --good-bg: var(--plm-success-bg); --good-border: var(--plm-success-br); --info: var(--plm-info-fg); --info-bg: var(--plm-info-bg); --info-border: var(--plm-info-br); --warn: var(--plm-warning-fg); --warn-bg: var(--plm-warning-bg); --warn-border: var(--plm-warning-br); --pending: var(--plm-warning-fg); --pending-bg: var(--plm-warning-bg); --pending-border: var(--plm-warning-br); --bad: var(--plm-danger-fg); --bad-bg: var(--plm-danger-bg); --bad-border: var(--plm-danger-br); /* ── Legacy --pl-* shims for still-direct references ── --pl-success / --pl-warn / --pl-danger were referenced by .documents-upload-status but never defined in the v2 block either, so that status text has been silently inheriting its colour. Defining them here fixes it in passing. */ --pl-font-sans: var(--plm-font-sans); --pl-font-mono: var(--plm-font-sans); /* v3 bans mono; figures use tabular-nums */ --pl-white: #FFFFFF; --pl-navy: var(--plm-navy-900); --pl-ocean: var(--plm-link); --pl-ocean-900: var(--plm-navy-700); --pl-overlay: var(--plm-overlay); --pl-paper: var(--plm-bg-sunken); --pl-ink: var(--plm-text); --pl-ink-60: var(--plm-slate-600); --pl-ink-40: var(--plm-slate-400); --pl-success: var(--plm-success-fg); --pl-warn: var(--plm-warning-fg); --pl-danger: var(--plm-danger-fg); color-scheme: light; } /* ============================================================ Dark Slate — the only dark theme in v3, labelled just "Dark" in the UI. The stored value keeps the "dark-slate" spelling to match the brand's own selector in docs/brand/tokens/semantic.css. [data-theme="dark"] stays as a defensive alias: it is the retired v2 Navy-Deep theme, and nothing writes it any more (getUserTheme and widget.js both fold it forward), but a users row written before the consolidation would otherwise render unstyled. ============================================================ */ [data-theme="dark-slate"], [data-theme="dark"] { --plm-bg: #0F1A24; --plm-bg-sunken: #0B141C; --plm-surface-1: #15222F; --plm-surface-2: #1B2A38; --plm-surface-3: #223243; --plm-surface-inverse: #FFFFFF; --plm-border: #22323F; --plm-border-strong: #2E4152; --plm-border-inverse: rgba(16, 29, 44, 0.14); --plm-text: #EAF2F9; --plm-text-secondary: #93A5B6; --plm-text-muted: #7D8FA1; --plm-text-inverse: var(--plm-navy-900); --plm-text-inverse-secondary: var(--plm-slate-600); --plm-accent: var(--plm-blue-400); --plm-accent-hover: var(--plm-blue-300); --plm-accent-quiet: rgba(48, 168, 255, 0.12); --plm-link: var(--plm-blue-300); --plm-link-hover: var(--plm-blue-200); --plm-success-fg: #54C98D; --plm-success-bg: rgba(84, 201, 141, 0.13); --plm-success-br: rgba(84, 201, 141, 0.28); --plm-info-fg: #6FBBFF; --plm-info-bg: rgba(111, 187, 255, 0.13); --plm-info-br: rgba(111, 187, 255, 0.28); --plm-warning-fg: #E9B44C; --plm-warning-bg: rgba(233, 180, 76, 0.13); --plm-warning-br: rgba(233, 180, 76, 0.28); --plm-danger-fg: #FF8F84; --plm-danger-bg: rgba(255, 143, 132, 0.13); --plm-danger-br: rgba(255, 143, 132, 0.28); --plm-neutral-fg: #93A5B6; --plm-neutral-bg: rgba(147, 165, 182, 0.13); --plm-neutral-br: rgba(147, 165, 182, 0.26); /* Ink Navy is the emphasis colour on light and the FAINTEST thing on dark (1.05:1 on surface-1). Invert the emphasis rather than reorder the fixed series — matches pl-brand v3.0.1. */ --plm-viz-1: #EAF2F9; --plm-shadow-card: none; --plm-shadow-float: var(--plm-shadow-dark-overlay); /* Step the floating surfaces UP the ramp here. Light leaves these at surface-1/2 because a white card can't go lighter and the overlay shadow carries the elevation; on dark there is no usable shadow, so the value step has to do the whole job. surface-2 over a surface-1 card is the same one-step lift the app uses everywhere else. */ --bg-float: var(--plm-surface-2); --bg-float-hover: var(--plm-surface-3); /* Stays on the sunken floor — see the light block. Stepping to surface-3 here would put the page ABOVE the card. */ --bg-page: var(--plm-bg-sunken); --plm-overlay: rgba(11, 20, 28, 0.72); --plm-overlay-ink: #0B141C; --plm-overlay-alpha: 72%; /* The bridge re-resolves automatically; --muted is the one exception worth restating — on dark, secondary is 6.37:1. */ --pl-ocean: var(--plm-link); /* Chrome stays Ink navy here: on the #0F1A24 ground, 900 is the step that still frames the content instead of floating off it. */ --chrome-bg: var(--plm-navy-900); --chrome-raised: var(--plm-navy-800); /* Navy-950 is the one step below Ink — the only value left that reads as BEHIND chrome (#101D2C) and canvas (#0F1A24) both. A pure black would separate further but leaves the brand ramp, and against near-black the frame stops looking navy at all. */ --frame-ground: var(--plm-navy-950); /* Black at 0.45 barely registers on a #0B1520 ground. Deepen it so the frame still carries an edge; the value step above is doing most of the separating either way. */ --frame-shadow: -8px 0 18px -8px rgba(0, 0, 0, 0.75), 8px 0 18px -8px rgba(0, 0, 0, 0.75); color-scheme: dark; } /* ============================================================ Content width — how far the app is allowed to run on a wide monitor. The cap is on the whole APP FRAME (header + nav rail + content), not on the content alone. Capping only the content leaves the rail pinned to the viewport edge with a dead gap between it and the content pane, and the header logo stranded far left of the rail it should align with. So the frame centres as one unit on --frame-ground, and the working area moves inboard. Normal (default): the frame caps at --frame-max and centres. --content-inset adds a little breathing room ON TOP of each view's own padding, for narrower screens where the cap never binds (a 1512px laptop never reaches 1600). Full: no cap, no extra inset — the pre-existing behaviour. --frame-max is the one number to turn when tuning this. 1600 leaves the content pane ~1430 wide once the 168px nav rail is subtracted — wide enough that the list tables don't start scrolling — while pulling ~480px of margin per side out of a 2560px display and ~160px out of 1920px. ============================================================ */ :root { --frame-max: 1600px; --content-inset: 12px; /* Tab content is inset by this on every side, at BOTH widths. Distinct from --content-inset, which is the frame gutter and collapses to 0 at Full width — content running edge to edge against the pane is the one thing Full width should not do. Metrics bars are the exception and escape it; see .panel > .strip. */ --panel-inset: 16px; } :root[data-width="full"] { /* 100vw, not "none", because "none" is not an interpolable value — a transition from 1600px to "none" snaps, which is the whole reason --frame-anim below would otherwise do nothing. As a CAP the two are equivalent: every frame that reads this is already width:100% inside a viewport-width parent, so a 100vw ceiling never binds. 9999px would also be animatable and would be WRONG: the cap would race past the real width in the first few frames and the growth would visibly finish early. The target has to be the width the frame actually reaches. */ --frame-max: 100vw; --content-inset: 0px; /* Frame edges are the viewport edges — nothing to cast onto. */ --frame-shadow: none; } /* Width changes are a deliberate act by the operator, so show the move rather than teleporting between two layouts — at this size the snap reads as a glitch. One token for the three frames that cap on --frame-max (WorkspaceShell, admin/layout, #root here) plus the .content-col gutter, so they cannot drift out of step with each other. Listing a property an element never changes costs nothing. */ :root { --frame-anim: max-width 220ms ease, padding 220ms ease; } @media (prefers-reduced-motion: reduce) { :root { --frame-anim: none; } } /* Gutter helper for the workspace's list / entity views. The frame owns the cap, so this only adds the extra inset — a second max-width here would never bind anyway (the frame is always wider than what sits inside it). */ .content-col { padding-inline: var(--content-inset); transition: var(--frame-anim); } /* ── Shell list views: the table card fills the pane ────────────── Loans, Lenders, Obligors, Properties, Insurance, Draws, Distributions. All seven had the identical inline root (padding: 24px 28px 40px), so it lives here once. The card used to be content-height, which left a short list sitting in a small box with a tall run of empty --bg-page under it — the card read as floating rather than as the page's content. Now it takes the remaining height, so the layout is the same shape whether there are three rows or thirty, and there is somewhere to put the things that come later. flex-shrink: 0 the whole way down is what makes this safe. Growing is the only new behaviour: a list TALLER than the pane still overflows and .view-scroll scrolls it, exactly as before. With the default shrink of 1 a long list would be squeezed to fit instead. */ .view-scroll { display: flex; flex-direction: column; } .view-scroll > .content-col { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; } .list-view { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; /* border-box, or the 64px of vertical padding is added to a height that is already the full pane and every view scrolls by 64px. */ box-sizing: border-box; padding: 24px 28px 40px; } /* The card is the fill. NOT :last-child. Five of the six list views end with a