:root { --bg: #0b0d10; --surface: #11151a; /* Nested surfaces need a perceptible, still-restrained step from --surface on dim displays (#1562 D17). */ --surface-2: #1b222b; --border: #27303a; /* Control boundary (#1395 WS7). --border is a decorative hairline (~1.4:1 against --surface) — fine for card edges and row separators, far below the 3:1 WCAG 1.4.11 non-text floor where the border IS the control's boundary. Inputs, secondary/danger buttons, the hamburger, and outline/off pills ride this stronger token instead (3.1:1 vs --surface, 3.3:1 vs --bg). */ --border-strong: #5a6770; /* Semantic accent split (#1395 WS8, extending the #982 P&L split): --accent now means *interaction only* (links, primary buttons, focus). Success states read --success (aliases the accent hue today, so pills/dots keep visual parity while gaining their own lever), and the active-navigation marker reads --nav-active, which is deliberately NOT green: the sidebar's current-page marker competed with every CTA on the page for the one meaning the accent is reserved for (#627 "one green, one meaning"). */ --success: #3ee07f; --nav-active: #e8eaed; --text: #e8eaed; --text-dim: #9ba1a6; --accent: #3ee07f; --accent-dim: #1f6b3f; /* Same accent green at ~18% alpha. Used as a soft fill on "recommended" / "active" badges where the solid accent would out-shout the surrounding type. Sits between the subtle surface tint and the solid accent callout. Introduced for the hero card on /dashboard/connect (issue #297) — was an inline literal there. */ --accent-bg: rgba(62, 224, 127, 0.18); /* Same accent green at ~5% alpha — a barely-there tint for "featured surface" treatments where even --accent-bg would compete with the surrounding type. Used by .tier.featured to lift the focal pricing card off the page without a gradient (the system is otherwise flat by convention — issue #526). */ --accent-wash: rgba(62, 224, 127, 0.05); /* A half-step up from --accent-wash (~9% alpha), still well under the solid --accent-bg badge fill. The barely-there 5% wash was effectively invisible on the #0b0d10 surface (issue #819), so the "featured" pricing card carried no perceptible lift — and the differentiation, being hue-only, was undetectable to low-vision / colorblind users. This raises the featured surface just enough to register without the gradient the system avoids (#526); the badge + border + shadow carry the rest of the multi-signal treatment. */ --accent-wash-strong: rgba(62, 224, 127, 0.09); /* Dark text laid over a solid --accent (#3ee07f) fill — the only place a near-black foreground is correct, because accent green is a light hue and white / --text on it fails AA. Single source of truth for .btn and .tier-badge, which both paint accent-green backgrounds (#984; was inlined as the literal #062414 in both). */ --on-accent: #062414; --danger: #ff6b6b; --danger-border: rgba(255, 107, 107, 0.4); --warn: #ffb84d; --info: #6ec5ff; --info-bg: rgba(110, 197, 255, 0.12); /* Status-tint fills (#983). The .pill.* / .install-step.done status badges paint a status color at ~12% alpha over the dark surface — the same fill recipe --accent-bg (18%) / --accent-wash (5%) established for the accent. These fold the hand-written rgba() duplicates onto one definition each: --accent-bg-soft is the 12% accent fill (a half-step below the 18% --accent-bg badge); --danger-bg / --warn-bg are the 12% danger / warn fills. Alphas are the exact literals folded, so the badges are pixel-identical. */ --accent-bg-soft: rgba(62, 224, 127, 0.12); --danger-bg: rgba(255, 107, 107, 0.12); --warn-bg: rgba(255, 184, 77, 0.12); /* Semantic P&L tokens (#982). A profit/loss number's *meaning* must be separable from the brand --accent (CTA / "go" / linked-positive) and from --danger (destructive: sign-out / unlink) — the green that means "this number is good" should not be the same token as the green that means "this control is interactive," or the journaling success green. They alias the same hues today, so existing P&L color is unchanged (visual parity); but a future shift to the brand green or the danger red won't silently repaint every gain/loss value, and re-tuning the P&L palette won't touch a button. These back .pnl-pos / .pnl-neg only. Never point a brand-green interactive control (.btn) at them, and never render one inside a P&L numeric cell — that's the ambiguity #982 fixes. */ --pnl-up: #3ee07f; --pnl-down: #ff6b6b; /* Signed-in split-frame palette. Public and auth pages continue to use the dark semantic tokens above. ``body.layout-sidebar`` remaps those same roles to this paper-canvas set, while ``.sidebar`` locally remaps them back to the rail set. Keeping the component rules semantic means cards, controls, status, and P&L treatments need no page-by-page light skin. */ --app-bg: #f1f3ef; --app-surface: #ffffff; --app-surface-2: #e8ece7; --app-border: #d4dad4; --app-border-strong: #657169; --app-text: #141a16; --app-text-dim: #59655e; --app-accent: #08714d; --app-accent-dim: #055a3d; --app-accent-bg: rgba(8, 113, 77, 0.12); --app-accent-wash: rgba(8, 113, 77, 0.04); --app-accent-wash-strong: rgba(8, 113, 77, 0.08); --app-accent-bg-soft: rgba(8, 113, 77, 0.09); --app-on-accent: #ffffff; --app-danger: #b42332; --app-danger-border: rgba(180, 35, 50, 0.35); --app-danger-bg: rgba(180, 35, 50, 0.09); --app-warn: #855700; --app-warn-bg: rgba(133, 87, 0, 0.11); --app-info: #17698e; --app-info-bg: rgba(23, 105, 142, 0.10); --app-pnl-up: #08714d; --app-pnl-down: #b42332; --rail-bg: #080a0c; --rail-surface: #171b1f; --rail-border: #252b2f; --rail-border-strong: #65717a; --rail-text: #f2f4f2; --rail-text-dim: #a0a8a2; --rail-accent: #3ee07f; --app-card-shadow: 0 1px 2px rgba(14, 23, 18, 0.05), 0 10px 30px rgba(14, 23, 18, 0.04); --rail-shadow: 8px 0 28px rgba(0, 0, 0, 0.14); --radius: 8px; /* Smaller corner step for inline chips — the ``$SLOT`` placeholder pill and the nested ``.prompt-example`` callout (#761) want a tighter radius than the 8px --radius used on cards / inputs. These two sites referenced a phantom ``var(--radius-sm, 4px)`` whose token was never declared in :root, so it silently resolved to the 4px literal every time — the same class of bug #989 fixed for .insight-card's --radius-lg / --bg-elevated fallbacks. Promote it to a real token at that same 4px value; no visual change. */ --radius-sm: 4px; --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-micro: 0.75rem; /* #986 removed the 0.8125rem (13px) --fs-sm step: it packed a third size into the 12-14px band and was used interchangeably with its neighbors, earning no distinct role. Every consumer was repointed up to --fs-base-sm (14px) — a uniform +1px move that shrinks nothing (preserving the #426.1 .tile .label legibility bump). */ --fs-base-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; /* Mobile rescales for the two display sizes — h1 ramps down from --fs-xl, .card.hero h1 ramps down from --fs-2xl. Kept as explicit tokens (rather than rolling clamp() into --fs-xl / --fs-2xl) because the codebase isn't using clamp() anywhere else yet; the token surface stays consistent across breakpoints. */ --fs-h1-mobile: 1.375rem; --fs-hero-mobile: 1.625rem; /* Marketing display step (#1300). The public marketing pages set ``body.layout-marketing``, which ramps their .card.hero h1 above the app scale so the landing hero reads as display type, not a settings-screen heading. --fs-3xl-mobile is its explicit mobile companion, same no-clamp() convention as the pair above. The dashboard / auth type scale is untouched — these two tokens are consumed only under the .layout-marketing scope. */ --fs-3xl: 2.75rem; --fs-3xl-mobile: 2rem; /* Spacing scale — 4px-based, used by every gap/margin/padding declaration in the branded web surface. Twenty-six off-scale rem values had been intuited per-component before issue #523; this token series snaps them to a single rhythm so cards, rows, and tiles share consistent breathing room. Steps follow a 4px progression (--space-1 = 4px, --space-2 = 8px, …), with gaps in the numbering (skipping 7, 9-11) reserved for future additions. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ /* Font weights — three steps cover the surface. Five distinct weights had been used inconsistently before issue #527 (400 / 500 / 600 / 700 / inherited). Headings sit at --fw-bold so the UA default 700 doesn't slam light-on-dark display type; --fw- medium picks out labels and tile values that want a small step up from body without going semi-bold. The bare literal ``700`` survives only on the small-caps kicker/eyebrow pattern (micro size, uppercase, tracked) and the tier-features ✓ icon — deliberate typographic exceptions documented at each site, not a fourth token. */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* Elevation shadows (#983). The system is flat by convention (#526 — no gradients), but three surfaces use a soft drop shadow to read as raised: the featured pricing card, the abbr tooltip, and the mobile sidebar drawer. These were three hand-written rgba(0,0,0,*) box-shadow strings; the tokens capture each verbatim (visual parity) so future elevation tuning has one home. --shadow-sm is the featured-card lift, --shadow-md the tooltip pop, --shadow-lg the drawer's horizontal cast. */ --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 2px 0 16px rgba(0, 0, 0, 0.4); /* Layout measures (#2573 D02, the design system's foundation slice). The --space-* scale above covers every gap/margin/padding relationship, and Stylelint enforces it. It does not cover ``width``, ``max-width``, ``min-height`` or ``line-height``, which sit outside the literal ban in both frontend/stylelint.config.mjs and scripts/check_spacing_tokens.py. Those four properties had therefore drifted uncaught: 65ch appeared 8 times, 2.75rem 10 times, and 40rem twice, with no declared authority anywhere. docs/frontend-design-system.md is the design decision; these tokens make it executable. SPA stylesheets cannot declare a custom property at all, so a shared token is the only available home. */ /* Comfortable reading measure for prose, ledes, help and supporting notes. A genuinely tabular comparison is not prose and is not capped here. */ --measure-prose: 65ch; /* Slatemark's minimum interaction target for single-line controls, buttons and inline actions. This is a product choice, not an accessibility floor: WCAG 2.2 AA's target-size minimum is 24 CSS px with specified exceptions. Do not describe this token as the AA minimum. Deliberately separate from --fs-3xl, which happens to share the 2.75rem value for marketing display type. */ --control-target: 2.75rem; /* Purposeful control widths. Every one is a maximum applied as min(100%, maximum), so a control still fits a narrow column; none of them is a value constraint. A 10rem quantity field does not imply a numeric limit. --control-long doubles as the fallback cap for a control that has not been classified yet. */ --control-numeric: 10rem; --control-symbol: 12rem; --control-compact: 20rem; --control-text: 32rem; --control-long: 40rem; /* Line heights. Body and controls read at --lh-body, long prose at --lh-prose, and headings at --lh-heading, which is the loose end of the 1.2 to 1.35 heading band. */ --lh-body: 1.5; --lh-prose: 1.6; --lh-heading: 1.35; } * { box-sizing: border-box; } /* Native choice controls share the interaction accent (#1562 D19). The browser keeps its platform-native shape and forced-colors behavior. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* Themed scrollbars (design pass). The OS default scrollbar renders as a chunky light bar that clashes with the dark theme — most visible on the fixed sidebar's overflow-y track at viewport heights where the nav + footer exceed the fold (1080p and below), and on any long dashboard. Thin + dark across Firefox (scrollbar-*) and WebKit/Blink (::-webkit-scrollbar) so every scroll container (sidebar, main, code blocks, tooltips) recedes into the surface instead of punching a bright rectangle through the page. Track stays transparent; the thumb is the hairline --border at rest and lifts to --text-dim on hover so it reads as grabbable without ever shouting. */ html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; /* Transparent border + padding-box clip insets the thumb so it reads as a slim pill with breathing room, not a full-width slab. */ border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* WCAG 2.1 SC 2.4.7 — keyboard focus indicator. Chrome's default focus ring dims to near-invisible against the dark theme, so we draw our own. Scoped to :focus-visible so a mouse click into an input or button doesn't paint a ring. Elements that need a different offset (overflow-clipped containers, dense nav rows) override per-class below. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .btn:focus-visible { outline-offset: 3px; } .nav-item:focus-visible { outline-offset: -2px; } html { /* Lock the rem base to 16px regardless of UA quirks. Every rem value below is sized against this. */ font-size: 16px; min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; /* Antialiasing. Chosen for the dark public surface, where subpixel rendering thickens light-on-dark text and we want crisp, not chunky. This rule now also serves ``body.layout-sidebar``, the light signed-in canvas, where the treatment is a consistency choice rather than a legibility one (#2573 D02). */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; /* Sticky footer. Body is a column flex container that fills the viewport, main grows to absorb any leftover space, footer stays non-shrinking at the bottom. Works for both the public topbar layout and the signed-in sidebar layout — the sidebar is position:fixed and the hidden nav-toggle checkbox is position:absolute, so neither participates in the flex flow. */ min-height: 100vh; display: flex; flex-direction: column; } /* Signed-in application canvas. Components continue to consume the same semantic custom properties; this shell-level remap is the complete light theme boundary and prevents the public dark brand surface from drifting. */ body.layout-sidebar { --bg: var(--app-bg); --surface: var(--app-surface); --surface-2: var(--app-surface-2); --border: var(--app-border); --border-strong: var(--app-border-strong); --success: var(--app-accent); --nav-active: var(--app-text); --text: var(--app-text); --text-dim: var(--app-text-dim); --accent: var(--app-accent); --accent-dim: var(--app-accent-dim); --accent-bg: var(--app-accent-bg); --accent-wash: var(--app-accent-wash); --accent-wash-strong: var(--app-accent-wash-strong); --accent-bg-soft: var(--app-accent-bg-soft); --on-accent: var(--app-on-accent); --danger: var(--app-danger); --danger-border: var(--app-danger-border); --danger-bg: var(--app-danger-bg); --warn: var(--app-warn); --warn-bg: var(--app-warn-bg); --info: var(--app-info); --info-bg: var(--app-info-bg); --pnl-up: var(--app-pnl-up); --pnl-down: var(--app-pnl-down); color-scheme: light; } main { flex: 1 0 auto; } .footer { flex-shrink: 0; } /* Semantic emphasis follows the same three-step weight system as the headings and components instead of falling back to UA-specific boldness. Keep italic explicit too, so prose emphasis has one shared primitive even though the current platform stacks already provide a native italic face. */ strong, b { font-weight: var(--fw-bold); } em, i { font-style: italic; } /* Authored underlines use the same font-relative geometry as prose links. ``skip-ink`` keeps descenders legible instead of drawing through them. */ u, ins { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; text-decoration-skip-ink: auto; } /* Inline links need a non-color resting affordance (#1570 / WCAG 1.4.1). Accent green is intentionally close to the surrounding light body text, so color alone cannot identify a prose link. Navigation and whole-component links opt out at their component rules below; ordinary prose, help, and legal links stay underlined. */ a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; text-decoration-skip-ink: auto; } a:hover { text-decoration-thickness: 0.12em; } /* Honor the ``hidden`` attribute even on elements whose own rule sets a ``display`` (e.g. ``.tile`` is flex, ``.hero-card-link`` is block) — the UA ``[hidden]`` rule loses to any author display. Used by the client-side tool filter (#766) to show/hide cards. */ [hidden] { display: none !important; } /* Screen-reader-only label: removed from view but kept in the accessibility tree (e.g. the tool-search input's label, #766). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } code, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; } /* Skip-to-content link (#1300 P2, WCAG 2.4.1). First focusable element in the public topbar shell; parked offscreen until a keyboard user tabs onto it, then pinned over the header so Tab -> Enter jumps past the nav to
. */ .skip-link { position: absolute; left: -9999px; z-index: 100; } .skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--surface-2); color: var(--text); padding: var(--space-2) var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius); text-decoration: none; } .shell { max-width: 56rem; margin: 0 auto; padding: 0 var(--space-6); } /* Sidebar layout — opt-in via on the frontend-owned signed-in document shell. Public pages keep the topbar. Mobile drawer trick: a hidden checkbox sibling of the sidebar + scrim drives the slide-in via :checked, so the whole thing is CSS-only. Order matters: the checkbox must appear in the DOM before .sidebar and .scrim for the `~` sibling selectors below to fire. */ .nav-toggle { position: absolute; left: -9999px; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 14rem; /* The navigation rail owns its dark palette locally. Descendants such as focus rings, the active row, account identity, and Sign out therefore stay coherent without rail-specific component variants. */ --bg: var(--rail-bg); --surface: var(--rail-bg); --surface-2: var(--rail-surface); --border: var(--rail-border); --border-strong: var(--rail-border-strong); --nav-active: var(--rail-text); --text: var(--rail-text); --text-dim: var(--rail-text-dim); --accent: var(--rail-accent); background: var(--surface); border-right: 1px solid var(--border); box-shadow: var(--rail-shadow); /* env(safe-area-inset-*) keeps the brand off the iOS notch / status bar and the Sign out button clear of the home indicator. The viewport meta carries ``viewport-fit=cover`` so the env values resolve to actual insets on iPhone; on Android / desktop they're 0 and the fallback padding wins. */ padding: max(var(--space-4), calc(var(--space-3) + env(safe-area-inset-top))) var(--space-3) max(var(--space-4), calc(var(--space-2) + env(safe-area-inset-bottom))); display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; z-index: 20; } .sidebar .brand { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2); font-size: var(--fs-lg); } .brand-mark { display: block; width: var(--space-6); height: var(--space-6); flex: 0 0 auto; } .side-nav { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; } .nav-group { display: flex; flex-direction: column; gap: var(--space-1); } .job-context { margin-bottom: var(--space-4); } .context-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); width: fit-content; max-width: 100%; padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--app-card-shadow); } .context-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius); color: var(--text-dim); font-size: var(--fs-base-sm); text-decoration: none; } .context-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .context-nav a[aria-current] { color: var(--text); } /* Exact pages carry the stronger filled + bold treatment; a containing location stays outline-only. The shape/weight change keeps page versus section visible without depending on color alone (#1659). */ .context-nav a[aria-current="page"] { border-color: var(--nav-active); background: var(--surface-2); font-weight: var(--fw-bold); } .context-nav a[aria-current="location"] { border-color: var(--border-strong); } .nav-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); /* 44px min touch target (issue #626 a11y) — the rows were tightly stacked at space-2 padding. min-height + centered flex keeps the visual rhythm while meeting the target. */ min-height: 2.75rem; padding: var(--space-2); border-radius: 6px; color: var(--text-dim); font-size: var(--fs-base-sm); border-left: 2px solid transparent; text-decoration: none; line-height: 1.3; } .nav-label { flex: 1 1 auto; } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.active { color: var(--text); border-left-color: var(--nav-active); } .nav-item.active[aria-current="page"] { background: var(--surface-2); font-weight: var(--fw-bold); } .nav-item.active[aria-current="location"] { border-left-color: var(--border-strong); } .sidebar-foot { border-top: 1px solid var(--border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .sidebar-identity { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-1); } .account-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-base-sm); font-weight: var(--fw-bold); } .sidebar-foot .who { color: var(--text-dim); font-size: var(--fs-base-sm); font-family: var(--font-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-foot form { padding: 0 var(--space-1); } .sidebar-foot .btn { width: 100%; text-align: center; padding: var(--space-2) var(--space-3); font-size: var(--fs-base-sm); } /* Mobile top strip on sidebar pages — slim bar with hamburger + brand. Hidden on desktop; the sidebar carries everything there. */ .topbar.mobile-only { display: none; } /* The drawer toggle is a `span.hamburger` wrapped in a role-free `label[for="nav-toggle"]`: the label is the no-JavaScript activation path, the span is where `role="button"` is actually valid (#2604). `display: contents` drops the wrapper's box so the span stays the topbar flex item and every `.hamburger` rule below still applies. */ .hamburger-slot { display: contents; } .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; /* Reset font metrics so the SVG icon below isn't shifted by an inherited line-height (system fonts vary on Mac vs. iOS Safari and the old ☰ glyph centered differently on each). */ line-height: 1; } .hamburger:hover { background: var(--surface-2); } .hamburger svg { width: 1.25rem; height: 1.25rem; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .scrim { display: none; } /* 14rem on the main + foot margin-left is the sidebar offset (matches the .sidebar width above) — a layout constraint, not a spacing-rhythm value, so it stays a literal rather than riding on the --space-* scale. */ body.layout-sidebar main { margin-left: 14rem; padding: var(--space-12) 0 4rem; /* 4rem bottom = generous page-bottom breathing; --space-12 (3rem) would crowd the foot on long dashboards */ } body.layout-sidebar .shell { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-8); } body.layout-sidebar > .topbar:not(.mobile-only) { display: none; } body.layout-sidebar .footer { margin-left: 14rem; /* sidebar offset, see above */ background: var(--surface); } /* Mobile (≤640px): sidebar becomes a slide-in drawer. */ @media (max-width: 640px) { body.layout-sidebar > .topbar.mobile-only, body.layout-sidebar > #slatemark-browser-document-root > .topbar.mobile-only { display: flex; align-items: center; gap: var(--space-3); padding: max(var(--space-3), calc(var(--space-1) + env(safe-area-inset-top))) var(--space-4) var(--space-3); flex-direction: row; } body.layout-sidebar main { margin-left: 0; padding: var(--space-6) 0 var(--space-12); } body.layout-sidebar .shell { padding: 0 var(--space-4); } body.layout-sidebar .footer { margin-left: 0; } body.layout-sidebar .sidebar { transform: translateX(-100%); /* visibility rides the transition so the closed drawer is removed from pointer AND keyboard/AT reach (WCAG 2.4.3 / #1395 WS7) — an off-screen transform alone leaves ~30 nav links in the tab order behind the page. */ visibility: hidden; transition: transform 0.2s ease, visibility 0.2s; width: 16rem; box-shadow: var(--shadow-lg); } body.layout-sidebar .nav-toggle:checked ~ .sidebar { transform: translateX(0); visibility: visible; } body.layout-sidebar .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 15; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } body.layout-sidebar .nav-toggle:checked ~ .scrim { opacity: 1; pointer-events: auto; } } .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface); } .brand { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-md); letter-spacing: 0.02em; color: var(--text); text-decoration: none; } .topbar .brand { display: inline-flex; align-items: center; gap: var(--space-2); } .brand .dot { color: var(--accent); } .topbar-right { display: flex; align-items: center; gap: var(--space-4); } .topbar nav a { margin-left: var(--space-5); color: var(--text-dim); text-decoration: none; } .topbar nav a:first-child { margin-left: 0; } .topbar nav a:hover { color: var(--text); text-decoration: none; } /* Active-page state on the public nav (#1300 P0). The shell marks the current page's nav link with ``aria-current="page"`` (derived from the request's canonical path), and the style keys off that attribute so the semantic and visual state can't drift apart. Kept deliberately neutral — full text color plus a quiet underline; the accent green stays reserved for the CTA (#627 "one green, one meaning"). */ .topbar nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-dim); text-underline-offset: 0.45em; } /* Compact header CTA (#1300 P0). The persistent "Get started" is the only conversion element that follows the visitor down the page, so it renders as a real filled .btn at every width — sized down from the body .btn so it sits inside the header type, not on top of it. "Sign in" stays a text link; one filled control per header. */ .btn.nav-cta { padding: var(--space-1) var(--space-3); font-size: var(--fs-base-sm); white-space: nowrap; } .public-menu > summary { list-style: none; } .public-menu > summary::-webkit-details-marker { display: none; } /* Wide layouts expose the one navigation instance even while its native disclosure is closed. Hide the summary only when the browser can expose its internal content box; older engines retain a usable native menu. The sidebar hamburger (inside .topbar.mobile-only) keeps its own rules. */ @media (min-width: 701px) { @supports selector(::details-content) { .topbar.collapsible .hamburger { display: none; } .public-menu::details-content { display: contents; content-visibility: visible; } } } main { padding: var(--space-8) 0 4rem; /* 4rem bottom = generous page-bottom breathing on the public layout; --space-12 (3rem) would crowd the foot under long pages */ } /* Headings: explicit 600 so we don't inherit the UA's 700 — too heavy for light-on-dark display text. Slight negative tracking on h1 tightens the larger size optically. */ h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 0.5rem; } body.layout-sidebar main h1 { font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: -0.015em; } @media (max-width: 640px) { body.layout-sidebar main h1 { font-size: var(--fs-hero-mobile); } } /* Hero size step — opt-in via ``.card.hero`` on a landing-style card. The default h1 sits at --fs-xl (24px) so it doesn't drown sign-in / sign-up / plan card heads; the hero step kicks the landing h1 up to the documented 2rem (32px) display size so the kicker → h1 → lede stack reads as display scale rather than content-section scale. Mobile drops back to ~26px so the line doesn't wrap awkwardly under a narrow viewport. */ .card.hero h1 { font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: -0.015em; } @media (max-width: 640px) { .card.hero h1 { font-size: var(--fs-hero-mobile); } } /* Marketing display register (#1300). The public marketing pages (/, /features, /pricing, /examples, /first-workflow) opt in via ``body.layout-marketing`` set by ``page(marketing=True)``. Two moves, both scoped so the dashboard / auth surfaces keep the app scale: the hero h1 steps up to the --fs-3xl display size (the 32px app-hero size read as a settings screen on a landing page), and marketing h2 steps 20px -> 24px so section heads clear the 18px tile h3s by a legible margin instead of 2px. Element-level selectors on purpose — the heading tags themselves stay attribute-free (several copy pins assert the literal ``

`` / ``

...`` strings). */ body.layout-marketing .card.hero h1 { font-size: var(--fs-3xl); } body.layout-marketing h2 { font-size: var(--fs-xl); } @media (max-width: 640px) { body.layout-marketing .card.hero h1 { font-size: var(--fs-3xl-mobile); } body.layout-marketing h2 { font-size: var(--fs-lg); } } h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.3; margin: 0 0 0.75rem; color: var(--text); } p.kicker { /* Dim, not accent (design-critique pass): the eyebrow kicker used to paint --accent green, putting a second green attention magnet right above the hero's green CTA so first fixation split between the two. This completes the "one green, one meaning" accent discipline the rest of the marketing surface already follows: green is reserved for the CTA button and the proof column (#627), and for the analyst turn label + CTA on /examples (#817). The kicker now reads as the same quiet small-caps eyebrow used by dashboard section heads, letting the

and the CTA own the hero. --text-dim on the dark surface is ~7:1, well past AA at this size. */ color: var(--text-dim); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 0 0 0.5rem; } p.lede { color: var(--text-dim); font-size: var(--fs-md); line-height: 1.55; margin: 0 0 var(--space-8); } /* Opt-in measure cap (issue #760) — a dashboard ``.lede`` runs the full 60rem shell width by default, which is too wide for comfortable reading. Pages where the lede is body copy (not a hero line) add ``measure`` to cap it near the ~65ch readable line length, matching the ``.dim-blurb`` (60ch) treatment. Opt-in for dashboard surfaces; the marketing pages carry a blanket ~70ch cap below (#1300 P2 — uncapped ledes ran 85-90ch across the 56rem shell). */ p.lede.measure { max-width: 65ch; } /* Marketing prose measure (#1300 P2). Scoped to the public marketing shell: ledes and the /examples transcript prose cap near 70ch so paragraphs stop running the full 56rem card width. Ledes that opt into the tighter 65ch .measure are excluded here (the :not()) so the opt-in keeps winning — without it this later, higher-specificity rule would silently widen them to 70ch. */ body.layout-marketing p.lede:not(.measure), body.layout-marketing .demo-source, body.layout-marketing .demo-phase-lede, body.layout-marketing .demo-reply { max-width: 70ch; } /* "How this works" expander — demotes pipeline/drift mechanics under a plain-English lede (e.g. /dashboard/rules) so the value promise reads first and the internals are one click away. Tighten the gap to the lede above it so the two read as one unit. */ p.lede:has(+ details.how-it-works) { margin-bottom: var(--space-3); } details.how-it-works { margin: 0 0 var(--space-8); font-size: var(--fs-base-sm); color: var(--text-dim); } details.how-it-works > summary { cursor: pointer; list-style: none; color: var(--text-dim); font-weight: var(--fw-medium); } details.how-it-works > summary::-webkit-details-marker { display: none; } details.how-it-works > summary::before { content: "▸" / ""; display: inline-block; flex: 0 0 auto; margin-right: var(--space-2); transition: transform 0.15s ease; } details.how-it-works[open] > summary::before { transform: rotate(90deg); } details.how-it-works > summary:hover { color: var(--accent); } details.how-it-works > p { margin: var(--space-2) 0 0; line-height: 1.55; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); } body.layout-sidebar .card, body.layout-sidebar .tile { box-shadow: var(--app-card-shadow); } body.layout-sidebar .card { padding: var(--space-6) var(--space-8); } @media (max-width: 640px) { body.layout-sidebar .card { padding: var(--space-5); } } .card.danger { border-color: var(--danger-border); } /* Section-rhythm floor (#1308). Top-level page sections self-space via a bottom margin on their own class (.card above; .feature-pillar, .tier-grid, .demo-transcript below), but a section class that never joined the system rendered flush against its neighbor: /demo's bare `section.tile-grid` sat 0px above the setup-help card. This floor guarantees the standard gap between adjacent top-level sections. :where() keeps it at zero specificity, so any class that declares its own margin-top (.mt-*) still wins outright, and sibling margin collapsing makes the floor a no-op wherever the preceding section already carries a bottom margin of --space-4 or more (every existing page). Pinned by tests/web/test_section_rhythm.py; a new top-level section class must also join RHYTHM_AUDITED_CLASSES there. */ :where(.shell > section + section) { margin-top: var(--space-4); } .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--space-4); } /* /features capability grid (issue #816). The shared auto-fit .tile-grid collapses to a single ~90ch-wide column between ~670–840px, where its 20rem floor can no longer fit two tracks and body lines stretch past a comfortable measure. The marketing page opts into an explicit two-column grid that holds until true mobile, so the reading measure never blows out at mid-width. The two-class selector outranks the base .tile-grid rule regardless of source order. */ .tile-grid.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .tile-grid.feature-grid { grid-template-columns: 1fr; } } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } /* Flex gap owns generic tile rhythm. Zero specificity lets a component with an intentional paragraph margin override this without a fight. */ :where(.tile > p) { margin: 0; } .tile .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); /* Wrap so a long pill drops below its label rather than squeezing the label into a two-line stub when the row can't hold both on one line. */ flex-wrap: wrap; } .tile .row > .label { white-space: nowrap; } /* Long unbreakable code tokens (SLATEMARK_* env names, row ids) are the classic 320px page-overflow source (#1395 WS7): let them break anywhere rather than widen the page. */ code { overflow-wrap: anywhere; } .tile .label { color: var(--text-dim); /* #426.1 upsized this uppercase + tracked label off --fs-micro for legibility; that bump survives the #986 type-scale collapse by landing on --fs-base-sm (14px) rather than the removed 13px --fs-sm — it stays above micro and is never shrunk. */ font-size: var(--fs-base-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; } /* Focal accent-left rule, the single point of truth for the "this is the focal one" framing on tile-grid heroes (``.tile.hero``, issue #422). ``.tier.featured`` intentionally uses a different treatment (full accent border + ``--accent-wash`` bg, see below) — it sits in a grid of peers on /pricing and carries heavier emphasis than a single focal card. */ .tile.hero { border-left: 3px solid var(--accent); } /* Tile-grid hero (issue #626): the accent-left rule alone read as equal-weight against eight siblings. Lift it with a faint accent wash, a full accent-dim hairline, and a soft ring so the eye lands on the single promoted "next step" tile before the others. */ .tile.hero { background: var(--accent-wash); border-color: var(--accent-dim); border-left-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); } /* Marketing feature pillars (/features, issue #816). The capability tiles are grouped under the three named pillars the lede promises (analyst skill / journal + rules / data surface) plus a foundations group, so the page structure matches its claim instead of reading as a flat 11-up dump. The pillar

+ tile

pairing also gives screen-reader heading-nav and SEO one stop per feature. */ .feature-pillar { margin-bottom: var(--space-8); } .feature-pillar > h2 { margin-bottom: var(--space-2); } .feature-pillar > .pillar-lede { color: var(--text-dim); font-size: var(--fs-base-sm); line-height: 1.55; margin: 0 0 var(--space-4); max-width: 65ch; } /* Marketing-tile heading — the scannable title on a /features tile. Deliberately NOT .tile-title (that's a mono identifier for the tools catalog): full --text color, sentence case, and a step above the 16px body so the title is the most prominent element on the tile, not the dimmest (issue #816 inverted-hierarchy fix). Promoted from a dim to a real

so heading navigation and SEO get one stop per feature. */ .tile > h3.tile-heading { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.3; color: var(--text); margin: 0; } /* Linked move-tile titles (#1298): the six-move tiles deep-link into the /examples transcripts, but a heading is no place to spend the accent (one green, one meaning). Keep the title in --text and carry the link affordance as a quiet underline that sharpens on hover. */ .tile > h3.tile-heading a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; } .tile > h3.tile-heading a:hover { text-decoration-color: var(--text-dim); } .tile .value { font-size: var(--fs-md); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; } .tile .actions { margin-top: auto; padding-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .muted-note { color: var(--text-dim); /* Roman, not italic (issue #626): long italic runs hurt readability and these are the lowest-contrast text on the tile face. Contrast of --text-dim on --surface is ~7:1, well past the 4.5:1 AA floor. */ font-size: var(--fs-base-sm); } .tile .muted-note { padding: var(--space-3) 0; } /* Setup-stepper "skill install" sub-card. Groups the per-AI-client download picker, the install-path hint, and the attestation checkbox into one visually-cohesive block on step 2's done state. Without the frame the three pieces read as three competing affordances on a flat surface; with it they read as one "install your skill" workflow. */ .card > .muted-note:first-of-type { margin-top: 0; margin-bottom: var(--space-4); max-width: 48rem; } .section-stack > * + * { margin-top: var(--space-6); } /* Returning-user recent-record panel on Home / the dashboard (#1578). Rides .card for its section rhythm; these rules only shape the inner list and rows. ``Open `` is an explicit compact action, not prose, so it uses weight + hover feedback instead of carrying the global resting underline into every ticker row. */ .activity-recent { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .activity-recent-link { display: inline-block; font-weight: var(--fw-medium); text-decoration: none; } .activity-recent-link:hover { text-decoration: underline; text-decoration-thickness: 0.1em; } .activity-attention { margin: 0 0 var(--space-2); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .activity-scorecard { margin: 0; } .connection-row { margin: 0; } /* The card's vertical rhythm rides the .tile flex `gap` (--space-2), not the UA

margins (which never collapse in a flex column and stacked on the gap) nor the shared `.tile .muted-note` padding — both zeroed here so related content stays tight. Group boundaries add an explicit token margin on top of the base gap so unrelated groups breathe, and the biggest void inside the card no longer exceeds the page's own section rhythm (#1375). */ .connection-row p { margin: 0; } .connection-row .muted-note { padding: 0; } .connection-row .account-list-head { margin-top: var(--space-2); /* + the .tile gap ~= a group boundary */ padding: 0; } .connection-row .account-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); } /* Account rows read as a border-separated table, name + institution inline ("Roth IRA · Fidelity") rather than flung to opposite card edges with no separator (#1375). */ .connection-row .account-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); } .connection-row .account-row:last-child { border-bottom: none; } .connection-row .account-broker { color: var(--text-dim); } .connection-row .account-broker::before { content: "·"; padding-right: var(--space-2); } /* Rename: a real disclosure affordance, not inert dim text. The prior `display: inline-block` suppressed the UA marker, leaving "Rename" looking static; draw our own caret and underline on hover, grouped just under the action row (#1375). */ .connection-row .rename { margin-top: 0; } .connection-row .rename > summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); width: max-content; padding: var(--space-1) 0; list-style: none; } .connection-row .rename > summary::-webkit-details-marker { display: none; } .connection-row .rename > summary::before { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(-45deg); transition: transform 0.15s ease; } .connection-row .rename[open] > summary::before { transform: rotate(45deg); } .connection-row .rename > summary:hover { color: var(--text); text-decoration: underline; } .connection-row .rename > summary:hover::before { border-color: var(--accent); } .coming-soon { margin-top: var(--space-4); } .credentials { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: var(--space-1); } p.callout { margin: 0 0 var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: var(--radius); font-size: var(--fs-base-sm); color: var(--text); } p.callout code { font-family: var(--font-mono); /* em-relative shrink (not a token): monospace inline renders visually larger than the surrounding sans, so it scales relative to its parent rather than to a rem-based size. */ font-size: 0.88em; color: var(--text-dim); } .tool-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-3) 0 var(--space-1) 0; } /* Shared input skin (#985, extended #1206). One base, the .input class, owns the surface + border + radius + padding + text color + accent focus-border that each form system used to redeclare identically, including the coming-soon waitlist field (.notify-me-form input). Per-system deltas (width / max-width / font-family / font-size / flex / resize) stay on the individual rules below. The selector list folds in each system's existing matched set (descendant input/select/textarea) alongside .input, so no element needs class="input" added and specificity is unchanged, while a future form can just use class="input". The keyboard :focus-visible ring lives at the top of this file and is untouched; the focus selectors below only restate the accent border + non-keyboard outline-reset. A single ::placeholder treatment (dim + italic) is hoisted alongside the skin (#1206) so placeholder tone no longer varies page to page; a system's own font-family on the placeholder stays local. The systems whose last consumer retired were removed from these lists (#2591 D20). color-scheme: dark is part of the skin (#1207): it themes the native control chrome (the