is rendered into every page by MainLayout. It must be hidden by default; Blazor flips it to `display: block` when an unhandled circuit exception fires. The legacy site.css carried this rule but isn't loaded any more — moving it here so the rule survives the migration. */ #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 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; } /* ----- Focus visible (global) ----------------------------- Replaces ad-hoc `outline: none !important` rules that exist across the codebase. Pages should not override this. */ :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand-soft); border-radius: var(--r-sm); } .plx-darksurface :focus-visible { /* Inset-style focus on dark backgrounds (e.g. sidebar items) */ box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(124, 58, 237, .55); } /* ========================================================= App shell — the 232px sidebar + 56px topbar grid layout used by MainLayout.razor. These rules used to live in MainLayout.razor.css with `::deep` prefixes, but Blazor scoped CSS can't style a component's own root element via `::deep` (it compiles to `[scope] .selector` which requires the scope attribute on an ANCESTOR, but `.plx-shell` is itself a root of the layout component). Moved here so the rules actually apply. ========================================================= */ .plx-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; background: var(--surface); } .plx-shell-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } /* ----- Sidebar -------------------------------------------- */ .plx-sidebar { background: var(--grad-rail); color: #fff; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; overflow: hidden; border-right: 1px solid rgba(167, 139, 250, .08); } .plx-sb-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; } .plx-sb-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--grad-cta); box-shadow: 0 4px 14px rgba(167, 139, 250, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-weight: 500; color: #fff; font-size: 16px; flex-shrink: 0; } .plx-sb-name { font-weight: 600; font-size: var(--t-base); letter-spacing: -0.01em; flex: 1; } .plx-sb-close-mobile { display: none; color: rgba(255, 255, 255, .65); } .plx-sb-ws { appearance: none; margin: 4px 12px 12px; padding: 8px 10px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #fff; display: flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; cursor: pointer; transition: background var(--motion-quick); text-align: left; } .plx-sb-ws:hover { background: rgba(255, 255, 255, .08); } .plx-sb-ws-init { width: 22px; height: 22px; border-radius: 5px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex-shrink: 0; } .plx-sb-ws-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plx-sb-ws .mi { color: rgba(255, 255, 255, .5); font-size: 14px; } .plx-sb-search { margin: 0 12px 14px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 12px; } .plx-sb-search .mi { color: rgba(255, 255, 255, .5); font-size: 16px; } .plx-sb-search input { flex: 1; appearance: none; background: transparent; border: 0; color: #fff; font: inherit; font-size: 12px; outline: none; min-width: 0; } .plx-sb-search input::placeholder { color: rgba(255, 255, 255, .5); } .plx-sb-search .plx-kbd { font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .12); padding: 1px 5px; border-radius: var(--r-sm); flex-shrink: 0; } .plx-sb-nav { flex: 1; overflow-y: auto; padding: 0 8px; scrollbar-width: thin; } .plx-sb-nav::-webkit-scrollbar { width: 4px; } .plx-sb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border-radius: 2px; } .plx-sb-group { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, .4); padding: 14px 10px 6px; font-weight: 500; } .plx-sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-md); /* Spec (handoff §App-shell): items are 13px Inter / 500. The earlier `font: inherit` shorthand was clobbering size + weight to body defaults (14px / 400). Set explicitly so