:root { color-scheme: light; /* --- Material-3-derived indigo palette (2026 redesign) — cool blue-white surfaces instead of the old stone/paper work-surface look. Values lifted from the approved design comp. --- */ --ink: #0b1c30; --ink-soft: #464555; --ink-faint: #777587; --paper: #f8f9ff; --surface: #ffffff; --surface-sunken: #eff4ff; --line: #dce9ff; --line-strong: #c7c4d8; /* Aliases so nothing outside this pass has to change its variable names. */ --color-bg: var(--paper); --color-surface: var(--surface); --color-surface-sunken: var(--surface-sunken); --color-border: var(--line); --color-border-strong: var(--line-strong); --color-text: var(--ink); --color-text-muted: var(--ink-soft); --color-text-faint: var(--ink-faint); /* --- Deep: dark inverse-surface panel, now used only for the embed-snippet code card (the sidebar itself is light in this palette — see .sidebar below). --- */ --deep: #213145; --deep-surface: #2b3d54; --deep-line: #3a4d66; --deep-text: #c7d2e3; --deep-text-bright: #eaf1ff; /* --- Signal: primary indigo accent --- */ --signal: #3525cd; --signal-hover: #2a1da4; --signal-soft: #e2dfff; /* --- Brass: secondary accent for "customized / overridden" and in-progress states --- */ --brass: #92400e; --brass-soft: #fef3c7; --color-accent: var(--signal); --color-accent-hover: var(--signal-hover); --color-accent-soft: var(--signal-soft); --color-danger: #ba1a1a; --color-danger-soft: #ffdad6; --color-success: #005338; --color-success-soft: #d9fbe8; --color-warning: var(--brass); --color-warning-soft: var(--brass-soft); /* Plus Jakarta Sans / Inter / JetBrains Mono (see the tags in each page's own ) with the same native-OS stacks as before appended as fallbacks — a page that hasn't loaded the webfont link still renders with the previous system-native look rather than a missing-font fallback. */ --font-display: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* The uppercase mono "label" role (field captions, stat labels, table headers, section labels, badges) was independently hardcoded at 10.5px in six places, below the 11px functional-text floor. One token so the role stays a role, not six numbers that can drift again. */ --text-label: 11px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(11, 28, 48, 0.06); --shadow-md: 0 8px 24px rgba(11, 28, 48, 0.08); --shadow-lg: 0 20px 48px rgba(11, 28, 48, 0.18); --sidebar-width: 252px; } * { box-sizing: border-box; } /* Material Symbols (see the tag in each page's own ) render unfilled/regular weight by default — this is the one place that's configured, so every usage stays visually consistent without repeating font-variation-settings inline at each call site. */ .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; font-size: 20px; line-height: 1; display: inline-flex; vertical-align: middle; user-select: none; } body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); margin: 0; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 25px; } h2 { font-size: 17px; } h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } p { margin: 0; } a { color: var(--signal); } a:hover { color: var(--signal-hover); } /* --- Layout primitives --- */ .row { display: flex; gap: var(--space-3); align-items: center; } .stack { display: flex; flex-direction: column; gap: var(--space-3); } .spacer { flex: 1; } .container { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-4); } .container-narrow { max-width: 420px; margin: 0 auto; padding: var(--space-6) var(--space-4); } /* --- App shell (sidebar + content), used by the dashboard --- */ /* height (not min-height) + overflow-y on each pane independently: the sidebar's own content always fits, so it should never need to scroll just because .content is taller than the viewport — previously .app-shell only had a min-height, so the flex row grew past 100vh with .content's content and stretched .sidebar along with it, scrolling both together. */ .app-shell { display: flex; height: 100vh; background: var(--paper); } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--surface); border-inline-end: 1px solid var(--line); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto; color: var(--ink-soft); } .sidebar-brand { padding: 0 var(--space-2) var(--space-5); font-weight: 600; font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: var(--space-3); } .sidebar-brand .domain { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; color: var(--ink-faint); margin-top: 5px; } .sidebar-brand-row { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); } .sidebar-nav-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; background: none; text-align: start; width: 100%; } .sidebar .sidebar-nav-item:hover { background: var(--surface-sunken); color: var(--ink); } .sidebar-nav-item.active { background: var(--signal); color: #fff; font-weight: 600; box-shadow: var(--shadow-sm); } /* Same recurring specificity bug CLAUDE.md documents for button hovers (a bare :hover rule outranking an equal/lower-specificity class): .sidebar .sidebar-nav-item:hover (3 classes) beats .sidebar-nav-item.active (2 classes) on its own, so hovering the selected tab silently reverted it to the unselected gray/ink colors. Re-assert the active look at equal specificity under :hover instead of leaving it to lose. */ .sidebar .sidebar-nav-item.active:hover { background: var(--signal); color: #fff; } .sidebar-footer { margin-top: auto; padding: 0 var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-3); } .sidebar-footer .sidebar-nav-item { color: var(--ink-soft); } .sidebar-footer .sidebar-nav-item:hover { color: var(--ink); } .sidebar-nav-icon { font-size: 20px; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: inherit; } .sidebar-nav-icon svg { width: 18px; height: 18px; display: block; } /* .content scrolls full-width (flex:1) so the wheel/trackpad works anywhere over the pane, not just over the centered column; .content-inner carries the actual max-width/centering so the scrollable box isn't itself narrowed to that column. position:relative makes .content the containing block for its absolutely-positioned descendants (e.g. the visually-hidden native