/* --------------------------------------------------------------------------- Density UI tokens. Semantic variables resolved per theme on the document root; every component reads these, so a theme change is a single variable swap. Light is the shipped theme. The dark block below is the same token set from the Density UI library and activates on - nothing sets that attribute yet, so the application is light until a theme switch is built. There are no --color-* aliases any more: every stylesheet reads the Density names directly. --------------------------------------------------------------------------- */ :root { color-scheme: light; --font-family-sans: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; --font-family-icon: "Material Symbols Rounded"; /* 4px grid */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --radius-sm: 5px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; /* Density is a bordered system, not a shadowed one. Elevation is reserved for things that float above the page: menus, sheets, dialogs. */ --shadow-sm: none; --shadow-md: 0 4px 12px rgb(9 9 11 / 0.06); --shadow-lg: 0 12px 32px rgb(9 9 11 / 0.14); /* Overlay elevation is directional - a dialog casts down, a right-hand drawer casts left, a bottom sheet casts up. The reference is authored dark-first and its values are near-black at half opacity; under a white dialog on a light page that reads as a grey smear rather than lift, so light keeps the geometry and drops the alpha to sit with --shadow-lg. */ --shadow-overlay: 0 28px 70px rgb(9 9 11 / 0.18); --shadow-drawer: -24px 0 60px rgb(9 9 11 / 0.16); --shadow-sheet: 0 -20px 50px rgb(9 9 11 / 0.16); /* One scrim for every overlay. A scrim darkens whatever is behind it, so the value is the same in both themes - restated in the dark block rather than left to inherit, so the token is complete where it is read. */ --overlay-scrim: rgb(8 8 10 / 0.55); --duration-fast: 150ms; --duration-normal: 220ms; --easing-standard: cubic-bezier(0.16, 1, 0.3, 1); /* Overlays only - a drawer, a bottom sheet, a modal dialog and the scrim behind them. Hover, state changes and press stay on --easing-standard. The asymmetry is the point. An overlay arrives over 260ms on a curve that is quick off the mark and then settles, and leaves over 200ms on one that barely moves for the first third and is gone by the end: something coming towards you is worth watching land, something leaving is not worth waiting for. --easing-standard is itself a hard decelerate, so the enter curve is a small change; the exit curve, and the fact that there is an exit at all, is the visible one. */ --easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --easing-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --duration-overlay-in: 260ms; --duration-overlay-out: 200ms; --container-max: 1080px; --bg-app: #f7f7f8; --bg-surface: #ffffff; --bg-surface-2: #f4f4f5; --bg-surface-hover: #eeeef0; --bg-surface-3: #e7e7ea; --bg-menu: #ffffff; --tooltip-bg: #1f1f23; --tooltip-fg: #fafafa; --border-subtle: rgb(9 9 11 / 0.10); --border-strong: rgb(9 9 11 / 0.18); --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #65656e; --accent-primary: #4f46e5; --accent-hover: #4338ca; --accent-link: #4338ca; --accent-fg: #ffffff; --accent-soft: rgb(79 70 229 / 0.10); --accent-border: rgb(79 70 229 / 0.26); --accent-ring: rgb(79 70 229 / 0.28); --ok-fg: #047857; --ok-soft: rgb(4 120 87 / 0.10); --ok-border: rgb(4 120 87 / 0.24); --warn-fg: #92400e; --warn-soft: rgb(180 83 9 / 0.10); --warn-border: rgb(180 83 9 / 0.24); --danger-fg: #be123c; --danger-soft: rgb(190 18 60 / 0.09); --danger-border: rgb(190 18 60 / 0.24); --info-fg: #1d4ed8; --info-soft: rgb(29 78 216 / 0.09); --info-border: rgb(29 78 216 / 0.22); --idle-fg: #52525b; --idle-soft: rgb(9 9 11 / 0.05); --idle-border: rgb(9 9 11 / 0.14); --weekend-bg: rgb(9 9 11 / 0.04); --picker-filter: none; --focus-ring: 0 0 0 1px var(--accent-primary), 0 0 0 4px var(--accent-ring); } :root[data-theme="dark"] { color-scheme: dark; --shadow-md: 0 4px 12px rgb(0 0 0 / 0.35); --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.45); --shadow-overlay: 0 28px 70px rgb(0 0 0 / 0.55); --shadow-drawer: -24px 0 60px rgb(0 0 0 / 0.50); --shadow-sheet: 0 -20px 50px rgb(0 0 0 / 0.50); --overlay-scrim: rgb(8 8 10 / 0.55); /* Motion does not change with the theme. Restated rather than left to inherit, for the same reason as the scrim above: the token set is read here, so it is complete here. */ --easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --easing-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --duration-overlay-in: 260ms; --duration-overlay-out: 200ms; --bg-app: #09090b; --bg-surface: #111113; --bg-surface-2: #18181b; --bg-surface-hover: #1f1f23; --bg-surface-3: #27272a; --bg-menu: #1b1b1f; --tooltip-bg: #27272a; --tooltip-fg: #fafafa; --border-subtle: rgb(255 255 255 / 0.08); --border-strong: rgb(255 255 255 / 0.16); --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #8b8b94; --accent-primary: #6366f1; --accent-hover: #818cf8; --accent-link: #a5b4fc; --accent-fg: #ffffff; --accent-soft: rgb(99 102 241 / 0.16); --accent-border: rgb(99 102 241 / 0.34); --accent-ring: rgb(99 102 241 / 0.40); --ok-fg: #34d399; --ok-soft: rgb(16 185 129 / 0.14); --ok-border: rgb(16 185 129 / 0.30); --warn-fg: #fbbf24; --warn-soft: rgb(245 158 11 / 0.14); --warn-border: rgb(245 158 11 / 0.30); --danger-fg: #fb7185; --danger-soft: rgb(244 63 94 / 0.14); --danger-border: rgb(244 63 94 / 0.32); --info-fg: #93c5fd; --info-soft: rgb(59 130 246 / 0.14); --info-border: rgb(59 130 246 / 0.30); --idle-fg: #a1a1aa; --idle-soft: rgb(255 255 255 / 0.06); --idle-border: rgb(255 255 255 / 0.14); --weekend-bg: rgb(255 255 255 / 0.035); --picker-filter: invert(0.68); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg-app); color: var(--text-primary); font-family: var(--font-family-sans); line-height: 1.45; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 13px; } a { color: var(--accent-link); text-decoration: none; transition: color var(--duration-fast) var(--easing-standard); } a:hover { color: var(--accent-primary); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; } button, input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--space-3); line-height: 1.2; } h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; } h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; } p { margin-top: 0; margin-bottom: var(--space-3); font-size: 12px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; } code { font-family: var(--font-family-mono); font-size: 0.92em; padding: 0.1em 0.35em; border-radius: var(--radius-sm); background: var(--bg-surface-2); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } h1:focus, main:focus { outline: none; box-shadow: none; } ::selection { background: var(--accent-soft); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--picker-filter); cursor: pointer; } /* --- Layout primitives ---------------------------------------------------- */ .app-stack { display: grid; gap: var(--space-3); } .app-surface { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .app-card { padding: 14px; } .app-eyebrow { display: inline-block; margin-bottom: var(--space-2); font-family: var(--font-family-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .app-lead { font-size: 12px; line-height: 1.55; color: var(--text-secondary); } .app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* --- Buttons -------------------------------------------------------------- */ .app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard); } .app-btn:hover { text-decoration: none; } .app-btn:active { transform: scale(0.98); } .app-btn-primary { background: var(--accent-primary); color: var(--accent-fg); } .app-btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); } .app-btn-secondary { background: var(--bg-surface-2); color: var(--text-primary); border-color: var(--border-strong); } .app-btn-secondary:hover { background: var(--bg-surface-hover); color: var(--text-primary); } .app-btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .app-btn-ghost:hover { background: var(--bg-surface-hover); color: var(--text-primary); } /* The second of the two button sizes. Density has 32px and 24px and nothing between them; the small one is for a control that rides inside another piece of chrome - a drawer header, a toolbar - where a 32px button would be the loudest thing in the row. */ .app-btn--sm { height: 24px; padding: 0 8px; font-size: 12px; } .app-btn:disabled, .app-btn--disabled { background: var(--bg-surface-2); border-color: var(--border-subtle); color: var(--text-muted); cursor: not-allowed; transform: none; } /* Density's filter pill. The geometry was already here and used nowhere, while two pages each grew their own filter bar to different numbers - a 36px tray on the poll list, a 28px pill at 14.4px on notifications - and disagreed about which way the active state moved: one lightened the fill, the other darkened it. This is the reference's answer, and both now read it. */ .app-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 12px; } button.app-pill { font-family: inherit; line-height: 1; cursor: pointer; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard); } button.app-pill:hover { background: var(--bg-surface-hover); color: var(--text-primary); } button.app-pill:active { transform: scale(0.98); } button.app-pill:focus-visible { outline: 0; box-shadow: var(--focus-ring); } .app-pill--on, button.app-pill--on:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-link); } /* The count rides inside the pill rather than beside it, so a filter and how much it holds are one target instead of two. */ .app-pill__count { font-family: var(--font-family-mono); font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.7; } .app-text-danger { color: var(--danger-fg); } .app-muted { color: var(--text-muted); } /* A label a screen reader reads and nothing else shows - for a control whose purpose is obvious by sight and nameless without it, like a search field marked only by its icon. */ .app-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Forms ---------------------------------------------------------------- */ .form-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-field { display: grid; gap: 5px; } .form-field--wide { grid-column: 1 / -1; } .form-field label { font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--text-secondary); } .form-input { width: 100%; min-height: 30px; padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface-2); color: var(--text-primary); font-size: 13px; transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard); } textarea.form-input { min-height: 76px; line-height: 1.5; resize: vertical; } .form-input::placeholder { color: var(--text-muted); } .form-input:hover { background: var(--bg-surface-hover); } .form-input:focus { outline: none; background: var(--bg-surface-2); border-color: var(--accent-primary); box-shadow: var(--focus-ring); } .form-input--invalid, .form-input--invalid:focus { border-color: var(--danger-border); } .field-hint { font-size: 11px; color: var(--text-muted); } .field-error { font-size: 11px; color: var(--danger-fg); } /* --- Banners -------------------------------------------------------------- */ .message-banner { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface-2); font-size: 12px; line-height: 1.5; color: var(--text-secondary); } .message-banner strong { font-size: 12.5px; font-weight: 600; color: var(--text-primary); } .message-banner--danger { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger-fg); } .message-banner--danger strong { color: var(--danger-fg); } .message-banner--success { border-color: var(--ok-border); background: var(--ok-soft); color: var(--ok-fg); } .message-banner--success strong { color: var(--ok-fg); } .message-banner--soft { border-color: var(--border-subtle); background: var(--bg-surface-2); } /* --- Framework error banner ----------------------------------------------- */ #blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 10px 44px 10px 14px; background: var(--danger-soft); border-top: 1px solid var(--danger-border); color: var(--danger-fg); font-size: 12px; box-shadow: var(--shadow-lg); } #blazor-error-ui .reload { margin-inline-start: var(--space-3); font-weight: 600; } #blazor-error-ui .dismiss { position: absolute; top: 8px; right: 12px; cursor: pointer; } @media (max-width: 44.99rem) { .form-grid { grid-template-columns: 1fr; } .app-actions { flex-direction: column; align-items: stretch; } .app-btn { width: 100%; height: 40px; } } /* Anything that waits for an animation must know about this block. It zeroes every duration with !important, so an animation declared here still never runs - and never fires `animationend`. That is why the overlay exit is timed rather than event-driven, and why OverlayTransition asks the browser whether reduced motion is on and skips its wait outright when it is. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Skip link ------------------------------------------------------------ */ /* Every layout already had
and nothing pointed at it, so a keyboard user tabbed the whole sidebar on every page. Off-screen until focused, rather than display:none, which would take it out of the tab order and defeat the point. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 14px; border: 1px solid var(--accent-primary); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font-size: 13px; font-weight: 500; text-decoration: none; } .skip-link:focus-visible, .skip-link:focus { left: 8px; top: 8px; outline: 2px solid var(--accent-primary); outline-offset: 2px; }