/* MS25-α (incremental-memo MS24-α + bold-memo prep) — Design token foundation. Establishes a single :root palette + spacing + typography + radius + shadow + transition scale that the rest of app.css and downstream component CSS draws from. Naming mirrors the --se-* convention already in MainLayout.razor.css so the layout chrome + global styles converge. Audit: replaced the 4 competing primary colors (#1b6ec2, #1f3a5f, #0071c1, #c2410c) — orange is now the only primary accent. Status colors moved out of the primary palette into a separate --se-status-* set used only on semantic surfaces (status pills, validation messages). */ :root { /* --- Color: text + surfaces -------------------------------- */ --se-color-text-strong: #18181b; /* zinc-900 */ --se-color-text-default: #3f3f46; /* zinc-700 */ --se-color-text-muted: #71717a; /* zinc-500 */ --se-color-text-subtle: #a1a1aa; /* zinc-400 */ --se-color-text-inverse: #ffffff; --se-color-surface: #ffffff; --se-color-surface-raised: #ffffff; --se-color-surface-sunken: #fafafa; --se-color-app-bg: #f5f5f4; /* stone-50 */ --se-color-border-default: #e4e4e7; /* zinc-200 */ --se-color-border-strong: #d4d4d8; /* zinc-300 */ --se-color-border-subtle: #f4f4f5; /* zinc-100 */ /* --- Color: accent (orange) — the only primary ------------- */ --se-color-accent: #f97316; /* orange-500 */ --se-color-accent-strong: #c2410c; /* orange-700 */ --se-color-accent-soft: rgba(249, 115, 22, 0.09); --se-color-accent-ring: rgba(249, 115, 22, 0.2); /* --- Color: semantic status (only on status surfaces) ----- */ --se-color-success-bg: #d1fae5; --se-color-success-fg: #065f46; --se-color-warning-bg: #fef3c7; --se-color-warning-fg: #92400e; --se-color-danger-bg: #fee2e2; --se-color-danger-fg: #991b1b; --se-color-info-bg: #dbeafe; --se-color-info-fg: #1e40af; --se-color-neutral-bg: #e5e7eb; --se-color-neutral-fg: #6b7280; /* --- Spacing scale (multiples of 0.25rem) ----------------- */ --se-space-1: 0.25rem; --se-space-2: 0.5rem; --se-space-3: 0.75rem; --se-space-4: 1rem; --se-space-5: 1.25rem; --se-space-6: 1.5rem; --se-space-8: 2rem; --se-space-10: 2.5rem; --se-space-12: 3rem; --se-space-16: 4rem; /* --- Type scale ------------------------------------------- */ --se-text-xs: 0.72rem; --se-text-sm: 0.82rem; --se-text-base: 0.92rem; --se-text-lg: 1.05rem; --se-text-xl: 1.25rem; --se-text-2xl: 1.5rem; --se-text-3xl: 1.85rem; --se-line-tight: 1.25; --se-line-normal: 1.5; --se-line-relaxed: 1.65; /* --- Radius ---------------------------------------------- */ --se-radius-sm: 0.25rem; --se-radius: 0.375rem; --se-radius-md: 0.5rem; --se-radius-lg: 0.75rem; --se-radius-pill: 999px; /* --- Shadow ---------------------------------------------- */ --se-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --se-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --se-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04); --se-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.04); /* --- Transition ----------------------------------------- */ --se-transition: 0.15s ease; --se-transition-fast: 0.1s ease; --se-transition-slow: 0.25s ease; /* --- MS25-β.2 — Display density ------------------------- */ /* User preference: Compact / Standard / Comfortable. Applied to row-level padding via calc(base * var(--se-density)) so the same rule renders three densities without three variants. JS sets data-density="compact|comfortable" on ; default is Standard (attribute absent). */ --se-density: 1; } :root[data-density="compact"] { --se-density: 0.75; } :root[data-density="comfortable"] { --se-density: 1.25; } /* MS25-δ — Incident narrative reader, rendered inside the two-pane shell's left pane on /incidents/edit/{id}. Comfortable line-height + max-width on lines (~70ch) for readable narrative content. */ .incident-narrative-reader { color: var(--se-color-text-default); line-height: var(--se-line-relaxed); } .incident-narrative-body { margin: 0; white-space: pre-wrap; /* preserve newlines as the user typed them */ word-break: break-word; font-size: var(--se-text-base); max-width: 70ch; } .incident-narrative-empty { margin: 0; color: var(--se-color-text-muted); font-style: italic; } /* MS25-β.3 — Sidebar rail mode. The .sidebar--rail class on the layout wrapper narrows the column to 56px + hides text-bearing nav chrome (spotlight placeholder, kbd badge, link labels, group headers). Only the spotlight icon + rail-toggle button remain visible at the top. Hover over the sidebar (handled in MainLayout.razor.css) expands the column back to full width as an overlay over content — text becomes visible again on hover via the inverse of the rules below. Cross-component scope: these need to apply to NavMenu's children while keyed off MainLayout's wrapping div, so they live here in app.css (global) rather than in either component's scoped CSS. */ .sidebar.sidebar--rail .nav-spotlight-placeholder, .sidebar.sidebar--rail .nav-spotlight-hotkey { display: none; } .sidebar.sidebar--rail .nav-spotlight { width: 1.85rem; padding: 0.35rem; justify-content: center; } .sidebar.sidebar--rail .nav-link, .sidebar.sidebar--rail .nav-group-header, .sidebar.sidebar--rail .navbar-brand { visibility: hidden; } .sidebar.sidebar--rail:hover .nav-spotlight-placeholder, .sidebar.sidebar--rail:hover .nav-spotlight-hotkey { display: inline; } .sidebar.sidebar--rail:hover .nav-spotlight { width: auto; padding: 0.45rem 0.65rem; justify-content: flex-start; } .sidebar.sidebar--rail:hover .nav-link, .sidebar.sidebar--rail:hover .nav-group-header, .sidebar.sidebar--rail:hover .navbar-brand { visibility: visible; } @media (prefers-reduced-motion: reduce) { :root { --se-transition: 0s; --se-transition-fast: 0s; --se-transition-slow: 0s; } } html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; color: var(--se-color-text-default); } h1:focus { outline: none; } a, .btn-link { color: var(--se-color-accent-strong); text-decoration: none; transition: color var(--se-transition-fast); } a:hover, .btn-link:hover { color: var(--se-color-accent); text-decoration: underline; } .btn-primary { color: var(--se-color-text-inverse); background-color: var(--se-color-accent); border-color: var(--se-color-accent); } .btn-primary:hover { background-color: var(--se-color-accent-strong); border-color: var(--se-color-accent-strong); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--se-color-surface), 0 0 0 0.25rem var(--se-color-accent-ring); } .content { padding-top: 1.1rem; } /* MS25-α — Deleted the Blazor-template `.valid.modified` green outline. Decorating every touched-and-valid field with a green ring is pure template noise — modern UX surfaces validation via focus + inline messages, not always-on rings. The `.invalid` outline survives but goes through the token system. */ .invalid { outline: 1px solid var(--se-color-danger-fg); } .validation-message { color: var(--se-color-danger-fg); font-size: var(--se-text-sm); } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--se-color-accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } code { color: #c02d76; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* --- M13 additions --- */ .welcome { max-width: 780px; } .welcome .tagline { color: #566; font-size: 1.1rem; } .welcome .status-grid { list-style: none; padding: 0; margin-top: 1.5rem; } .welcome .status-grid li { padding: 0.4rem 0; border-bottom: 1px solid #eee; } .placeholder-note { background: #fff8e1; border-left: 3px solid #fbc02d; padding: 0.75rem 1rem; color: #5f4a0a; } .tenant-indicator { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; margin-left: auto; } .tenant-indicator .tenant-label { color: #666; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; } .tenant-indicator .tenant-select { font-size: 0.85rem; background: #f1f3f5; border: 1px solid #ccc; border-radius: 3px; padding: 0.2rem 0.5rem; cursor: pointer; max-width: 16rem; } .tenant-indicator .tenant-select:hover { background: #e9ecef; } /* Pre-boot skeleton — rendered from static HTML before WASM loads. */ .app-skeleton { display: grid; grid-template-columns: 250px 1fr; height: 100vh; background: #fafafa; color: #888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .skeleton-sidebar { background: var(--se-color-app-bg); color: var(--se-color-text-muted); border-right: 1px solid var(--se-color-border-default); padding: 1rem; } .skeleton-brand { font-weight: 600; padding: 0.75rem 0; color: #fff; } .skeleton-nav-item { height: 1.25rem; margin: 0.75rem 0; background: rgba(255,255,255,0.12); border-radius: 3px; } .skeleton-main { display: flex; flex-direction: column; } .skeleton-topbar { height: 3.5rem; background: #fff; border-bottom: 1px solid #eee; } .skeleton-content { padding: 2rem; } .skeleton-heading { height: 2rem; width: 40%; background: #eee; border-radius: 3px; margin-bottom: 1.5rem; } .skeleton-line { height: 1rem; background: #eee; border-radius: 3px; margin: 0.6rem 0; } .skeleton-line:nth-child(2) { width: 85%; } .skeleton-line:nth-child(3) { width: 65%; } .skeleton-progress { position: absolute; inset: auto 0 2rem 0; text-align: center; } /* --- M14 additions: list + dialog + forms --- */ .jobtitles-list { max-width: 1000px; } /* MS25-β (incremental memo Moves 5 + 4) — Page-header + empty-state primitives. .page-header is the single canonical page-top component; .list-header / .chemical-safety-hero / .readiness-page-header all share its rules via the joined selector so existing markup keeps working without a Razor sweep. New pages use .page-header directly. .empty-state replaces the bare .list-status grey-line empty message with a centered icon + title + body + CTA composition. EntityListView opts in via the EmptyAction RenderFragment parameter; callers without an action get the same shape minus the CTA slot. */ .page-header, .list-header, .chemical-safety-hero, .readiness-page-header { display: flex; flex-wrap: wrap; gap: var(--se-space-4); align-items: baseline; justify-content: space-between; margin-bottom: var(--se-space-6); padding-bottom: var(--se-space-3); border-bottom: 1px solid var(--se-color-border-default); } .page-header h1, .list-header h1, .chemical-safety-hero h1, .readiness-page-header h1, .page-header-title { margin: 0; font-size: var(--se-text-2xl); font-weight: 700; color: var(--se-color-text-strong); letter-spacing: -0.015em; line-height: var(--se-line-tight); } .page-header-subtitle, .chemical-safety-subtitle { margin: var(--se-space-2) 0 0; color: var(--se-color-text-muted); font-size: var(--se-text-base); line-height: var(--se-line-normal); flex-basis: 100%; /* drop below the title row when the actions slot is present */ } .page-header-actions { display: flex; gap: var(--se-space-2); align-items: center; flex-shrink: 0; } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--se-space-12) var(--se-space-6); background: var(--se-color-surface); border: 1px solid var(--se-color-border-default); border-radius: var(--se-radius-lg); color: var(--se-color-text-default); } .empty-state-icon { width: 3rem; height: 3rem; border-radius: var(--se-radius-md); background: var(--se-color-accent-soft); color: var(--se-color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: var(--se-space-4); } .empty-state-title { margin: 0 0 var(--se-space-2); font-size: var(--se-text-lg); font-weight: 600; color: var(--se-color-text-strong); } .empty-state-body { margin: 0 0 var(--se-space-5); max-width: 38ch; color: var(--se-color-text-muted); line-height: var(--se-line-normal); } .empty-state-action { display: flex; gap: var(--se-space-2); align-items: center; } /* MS25-α.3 (incremental memo Move 11) — Card primitive. .card is the white-surface outline card (chemical-safety overview cards, readiness signal cards, the reconciler row chrome). .card--inset is the grey-bg sub-form-row variant (affected-persons / reportability / outcome- follow-ups blocks). Existing bespoke classes are joined into the shared selector so the legacy markup picks up the chrome without a Razor sweep; per-consumer layout (display, gap, margin-bottom) stays in each consumer's block so the chrome shares but the rhythm doesn't flatten. */ .card, .chemical-safety-card, .readiness-signal-card { background: var(--se-color-surface); border: 1px solid var(--se-color-border-default); border-radius: var(--se-radius-md); padding: var(--se-space-5); box-shadow: var(--se-shadow-sm); } .card--inset, .reportability-row, .affected-persons-row, .outcome-follow-ups-row { background: var(--se-color-surface-sunken); border: 1px solid var(--se-color-border-default); border-radius: var(--se-radius-sm); padding: var(--se-space-3) var(--se-space-4); } .list-status { padding: var(--se-space-4) var(--se-space-5); background: var(--se-color-surface-sunken); border-radius: var(--se-radius); color: var(--se-color-text-muted); } .list-status-warning { background: var(--se-color-warning-bg); border-left: 3px solid var(--se-color-warning-fg); color: var(--se-color-warning-fg); } .list-status-error { background: var(--se-color-danger-bg); border-left: 3px solid var(--se-color-danger-fg); color: var(--se-color-danger-fg); display: flex; align-items: center; justify-content: space-between; gap: var(--se-space-4); } /* MS25-α.2 (incremental memo Move 3) — Data-grid primitive. Modern Linear/Vercel/Notion shape: no zebra stripes, no uppercase tracked-out header, no cool-cast hover fighting the warm-stone app background. Hairline row dividers, small-caps muted header text, full-row hover tint in the same warm neutral as the app. Optional .data-grid--sticky modifier keeps the thead pinned while a long list scrolls; pair with a height-capped scroll container around the table for use cases like the AI usage page or any drilldown that needs to keep column context while scrolling. */ .data-grid { width: 100%; border-collapse: collapse; background: var(--se-color-surface); font-size: var(--se-text-sm); color: var(--se-color-text-default); } .data-grid th, .data-grid td { /* MS25-β.2 — Vertical padding flexes with --se-density. */ padding: calc(var(--se-space-3) * var(--se-density)) var(--se-space-4); border-bottom: 1px solid var(--se-color-border-subtle); text-align: left; } .data-grid th { background: transparent; font-weight: 600; font-size: var(--se-text-xs); color: var(--se-color-text-muted); letter-spacing: 0.04em; border-bottom: 1px solid var(--se-color-border-default); /* deliberately no text-transform — the small-caps + muted color carry the header role; uppercase tracked-out felt 2015 */ } .data-grid tbody tr { transition: background-color var(--se-transition-fast); } .data-grid tbody tr:hover { background: var(--se-color-surface-sunken); } .data-grid tbody tr:last-child td { border-bottom: none; } .data-grid .col-actions { text-align: right; white-space: nowrap; } .data-grid--sticky thead th { position: sticky; top: 0; background: var(--se-color-surface); /* opaque so rows don't bleed through */ z-index: 1; } /* M172 — AI-generated summary cell on the /incidents grid. Caps the column width + ellipsizes overflow; full text on hover via the title attribute. */ .ai-summary-cell { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .ai-summary-cell--empty { color: #999; } .btn-primary { background: var(--se-color-accent); color: var(--se-color-text-inverse); border: none; padding: 0.5rem 1rem; border-radius: 3px; cursor: pointer; font-weight: 500; transition: background var(--se-transition-fast); } .btn-primary:hover:not(:disabled) { background: var(--se-color-accent-strong); } .btn-primary:hover:not(:disabled) { background: #17304f; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: #fff; color: #444; border: 1px solid #ccc; padding: 0.5rem 1rem; border-radius: 3px; cursor: pointer; } .btn-secondary:hover:not(:disabled) { background: #f5f5f5; } .btn-danger { background: #c62828; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 3px; cursor: pointer; } .btn-danger:hover:not(:disabled) { background: #8b1010; } .btn-link { background: none; border: none; color: var(--se-color-accent-strong); cursor: pointer; padding: 0.2rem 0.5rem; } .btn-link:hover { text-decoration: underline; } .btn-danger-link { color: #c62828; } /* MS25-α.4 (incremental memo Move 8) — Dialog modernisation. Slate warm-neutral scrim (no more navy tint fighting the rest of the app), .se-radius-lg corner, softer overlay shadow, three size variants for the three real use cases. Destructive-confirm dialogs (delete confirms, RCA closeout, etc.) get a 3px accent top-border via .dialog-card--destructive — same cue as GitHub's "are you sure" modals. */ .dialog-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); /* slate-900 @ 45% */ display: flex; align-items: center; justify-content: center; z-index: 1000; } .dialog-card { background: var(--se-color-surface); border-radius: var(--se-radius-lg); padding: var(--se-space-6); min-width: 400px; max-width: 520px; /* default — form variant */ /* Cap to viewport so long forms (e.g. Incident with 14 fields) don't push the action buttons off-screen — the entire card scrolls; users scroll down to reach Cancel/Save. */ max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: var(--se-shadow-lg); } .dialog-card--confirm { min-width: 320px; max-width: 24rem; } .dialog-card--wide { max-width: 48rem; } .dialog-card--destructive { border-top: 3px solid var(--se-color-accent); /* keep the rest of the chrome shared with .dialog-card; the top stripe alone is the assertive "you are about to lose data" cue. */ } .dialog-card h2 { margin-top: 0; } .dialog-message { color: #444; } .dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; } .form-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; } .form-field label { font-size: 0.85rem; font-weight: 500; color: var(--se-color-text-strong); } .form-field input, .form-field textarea, .form-field select { padding: 0.5rem 0.65rem; border: 1px solid var(--se-color-border-strong); border-radius: var(--se-radius-sm); font-family: inherit; font-size: 1rem; background: var(--se-color-surface); } /* MS25 — Explicit border on type=date because some browsers strip the surrounding box styling once the native picker overlay claims the control. Without this the date input looks unbordered next to the text inputs that DO render the outer border. Scott surfaced after the MS25-α palette consolidation made the existing #ccc border too faint against the new app background. */ .form-field input[type="date"], .form-field input[type="datetime-local"], .form-field input[type="time"] { border: 1px solid var(--se-color-border-strong); background: var(--se-color-surface); min-height: 2.4rem; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--se-color-accent); outline-offset: -1px; border-color: var(--se-color-accent); } .form-field .validation-message { color: var(--se-color-danger-fg); font-size: 0.85rem; } /* MS25 — Inline field-help. [Help("...")] on a domain property surfaces as a small `?` chip next to the field's label; click opens a popover with the supplied text. Uses HTML-native
/ for click-toggle so no JS is required. Authoring is code-co-located (attribute on the property); see se.Shared/Attributes/HelpAttribute.cs. */ .field-help { display: inline-block; margin-left: 0.35rem; position: relative; vertical-align: middle; } .field-help summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 999px; background: var(--se-color-border-default); color: var(--se-color-text-muted); font-size: 0.7rem; font-weight: 700; line-height: 1; user-select: none; transition: background var(--se-transition-fast), color var(--se-transition-fast); } .field-help summary::-webkit-details-marker { display: none; } .field-help summary::marker { display: none; content: ""; } .field-help summary:hover { background: var(--se-color-border-strong); color: var(--se-color-text-default); } .field-help[open] summary { background: var(--se-color-accent); color: var(--se-color-text-inverse); } .field-help-popover { position: absolute; top: 1.5rem; left: 0; z-index: 50; background: var(--se-color-surface); border: 1px solid var(--se-color-border-strong); box-shadow: var(--se-shadow-md); border-radius: var(--se-radius-md); padding: 0.6rem 0.8rem; font-size: 0.85rem; line-height: 1.5; color: var(--se-color-text-default); min-width: 14rem; max-width: 24rem; font-weight: 400; text-transform: none; letter-spacing: 0; } /* MS26 follow-up (performance, Slice 3) — EntityListView Virtualize placeholder. Renders during the brief moment between Virtualize asking for a row range and the ItemsProvider returning it. Same visual height as a real row so the scrollbar doesn't jump. Subtle shimmer-free skeleton (no animation — Blazor renders this briefly enough that animation would be more distracting than helpful). */ .entity-row-placeholder { opacity: 0.55; pointer-events: none; } .entity-row-title-skeleton { height: 1rem; width: 12rem; background: var(--se-color-border-subtle); border-radius: var(--se-radius-sm); margin: 0.5rem 0; } /* MS25-α.7 (incremental memo Move 7) — Content skeleton utilities. Subtler successor to the bare

Loading...

branch every list + detail page currently renders. Three building blocks: .skeleton base — pulse animation on a token bg .skeleton-block rectangular block (e.g. card preview) .skeleton-row full-width row with internal layout .skeleton-line short bar (heading / value) Compose into a list-loading shape: ~5 .skeleton-row, each carrying .skeleton-line children at varying widths. Pulses respect prefers-reduced-motion. Spinners stay on action buttons (audit- packet download, etc.) — anywhere there's no pre-existing layout to skeleton-fill. */ @keyframes se-skeleton-pulse { 0% { opacity: 0.55; } 50% { opacity: 0.85; } 100% { opacity: 0.55; } } .skeleton { background: var(--se-color-border-subtle); border-radius: var(--se-radius-sm); animation: se-skeleton-pulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.7; } } .skeleton-list { display: flex; flex-direction: column; gap: var(--se-space-3); list-style: none; margin: 0; padding: 0; } .skeleton-row { background: var(--se-color-surface); border: 1px solid var(--se-color-border-default); border-radius: var(--se-radius-md); padding: var(--se-space-3) var(--se-space-4); display: flex; flex-direction: column; gap: var(--se-space-2); } .skeleton-line { background: var(--se-color-border-subtle); border-radius: var(--se-radius-sm); height: 0.85rem; animation: se-skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-line--title { width: 60%; height: 1rem; } .skeleton-line--meta { width: 30%; height: 0.7rem; } .skeleton-line--full { width: 95%; } .skeleton-block { background: var(--se-color-border-subtle); border-radius: var(--se-radius-md); animation: se-skeleton-pulse 1.4s ease-in-out infinite; } /* MS25-α.7 — Screen-reader-only utility for live regions that pair with the skeleton (so "Loading…" still announces while the visible chrome shows the skeleton). Standard recipe — visually hidden but readable by AT. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* MS26 follow-up — RiskHeatMap shape. The component (M219, used by HazardRegister) renders an inline-SVG matrix with class names on each element, but had zero CSS rules — so SVG text inherited the body font-size (16px) and exploded against the viewBox's user-space coordinates (cells are 60×46 user units). Scott surfaced via screenshot: "Almost certain" / "Likely" / "Possible" axis labels rendered as huge overlapping text. Treatment: explicit font-size in user-space units on every text class (SVG inherits these via the SVG inheritance tree, not the HTML body); container max-width so the SVG scales gracefully on narrow screens; figure / caption / empty-state in tokenised colors. */ .risk-heatmap { margin: 0 0 1.5rem; max-width: 100%; } .risk-heatmap-title { font-size: 1.05rem; font-weight: 600; color: var(--se-color-text-strong); margin: 0 0 0.5rem; } .risk-heatmap-empty { color: var(--se-color-text-muted); font-style: italic; padding: 0.6rem 0; } .risk-heatmap-svg { display: block; width: 100%; height: auto; max-width: 720px; font-family: inherit; } .risk-heatmap-axis-label { font-size: 11px; fill: var(--se-color-text-default); font-weight: 500; } .risk-heatmap-axis-title { font-size: 12px; fill: var(--se-color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .risk-heatmap-count { font-size: 16px; fill: var(--se-color-text-strong); font-weight: 700; } .risk-heatmap-score { font-size: 9px; fill: var(--se-color-text-muted); } .risk-heatmap-cell { transition: opacity var(--se-transition-fast); } .risk-heatmap-cell:hover { opacity: 0.85; } /* MS26 follow-up — CitationPicker sub-field shape. The picker wraps a DocumentPicker, two inline labelled inputs (Page + Paragraph anchor), and a block textarea (Excerpt text). The .citation-picker-fields children used `label.inline` with no matching CSS rules, so browser-default rendering shoved labels to whatever width their text took and the input boxes didn't line up across rows. Scott surfaced via screenshot on the Obligations Citation editor — wanted "text fields lined up" with "labels left justified for these sorts of components". Treatment: 2-column grid (fixed label column + flex input column). Same pattern future composite widgets can adopt by inheriting `.citation-picker-fields label.inline` semantics. */ .citation-picker-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .citation-picker-fields label.inline { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 500; color: var(--se-color-text-strong); margin: 0; } .citation-picker-fields label.inline input { padding: 0.5rem 0.65rem; border: 1px solid var(--se-color-border-strong); border-radius: var(--se-radius-sm); font-family: inherit; font-size: 1rem; background: var(--se-color-surface); width: 100%; box-sizing: border-box; font-weight: 400; } .citation-picker-fields label.inline input:focus { outline: 2px solid var(--se-color-accent); outline-offset: -1px; border-color: var(--se-color-accent); } .citation-picker-excerpt { margin-top: 0.5rem; } /* MS25 — MultiSelectPicker shape. The component (used by PermissionKeyPicker / IndustryPacksPicker / RolePicker / DepartmentMultiPicker / JobTitlePicker / etc.) markup carried .multi-select-* class names since ADR-18 / M41 but never had any matching CSS, so it rendered as a default- browser
    with bullets + a single label-line concatenating the item name and description with no whitespace separator. Scott surfaced on Edit Role: "Approve corpus documentsAdmin- tier permission..." with the checkbox standalone above the label. Now: bullets dropped, checkbox aligned inline with the first line of the label, name + description stacked inside the label as two clear lines. */ .multi-select-picker { margin-bottom: 1rem; } .multi-select-label { font-size: 0.85rem; font-weight: 500; color: var(--se-color-text-strong); margin-bottom: 0.45rem; display: block; } .multi-select-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; border: 1px solid var(--se-color-border-default); border-radius: var(--se-radius-sm); background: var(--se-color-surface); max-height: 22rem; overflow-y: auto; /* 2026-05-23 — Defensive: bind the list to its container width so even if a sibling form widget overflows horizontally (Location- Picker's address input was the trigger; reverse-geocoded addresses run ~80+ chars), this list doesn't get pushed off the visible viewport. width:100% + min-width:0 lets the flex cross-axis honour the parent column's track width rather than expanding to fit item content. */ width: 100%; min-width: 0; box-sizing: border-box; } .multi-select-item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--se-color-border-subtle); } .multi-select-item:last-child { border-bottom: none; } .multi-select-item:hover { background: var(--se-color-surface-sunken); } .multi-select-item input[type="checkbox"] { margin: 0.22rem 0 0 0; accent-color: var(--se-color-accent); cursor: pointer; flex-shrink: 0; } .multi-select-item label { display: flex; flex-direction: column; gap: 0.15rem; cursor: pointer; flex: 1; font-weight: 400; color: inherit; } .multi-select-item-label { font-weight: 500; color: var(--se-color-text-strong); font-size: 0.92rem; } .multi-select-item-description { font-size: 0.8rem; color: var(--se-color-text-muted); line-height: 1.4; } .multi-select-empty { color: var(--se-color-text-muted); font-style: italic; padding: 0.75rem; } /* MS25 — Boolean Yes / No radio pair shape. Renders inline + tight so it visually reads as a single grouped control (the way the text inputs do as a single bordered box) rather than two competing-equal-weight labels. Used by DynamicAddFields' IsBoolean branch + FormFieldAutoSave's IsBooleanType branch. */ .form-field.form-field-boolean { border: none; padding: 0; } .form-field.form-field-boolean legend { font-size: 0.85rem; font-weight: 500; color: var(--se-color-text-strong); margin-bottom: 0.3rem; padding: 0; } .form-field-boolean-option { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.25rem; font-size: 0.95rem; color: var(--se-color-text-default); cursor: pointer; } .form-field-boolean-option input[type="radio"] { accent-color: var(--se-color-accent); cursor: pointer; } /* Edit-form variant: rendered inside FormFieldAutoSave's wrapper. */ .form-field-autosave-boolean { display: flex; gap: 1.25rem; align-items: center; padding: 0.4rem 0; } .form-field-autosave-boolean label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; font-size: 0.95rem; cursor: pointer; } .form-field-autosave-boolean input[type="radio"] { accent-color: var(--se-color-accent); cursor: pointer; } /* M272 (MS22 follow-up) — `