/* Global styles. Almost everything is MudBlazor's; what remains here is what has to exist before
   MudBlazor's stylesheet or its runtime CSS variables do.

   The Blazor template's original contents were removed: Bootstrap-flavoured validation styles
   (.valid.modified, .invalid, .validation-message), an error-boundary block with a light
   background, and .form-floating rules. None were referenced by any component, and MudBlazor owns
   validation styling. */

/* The app is dark only, and this is what makes that true before any script runs.
   app.css is a render-blocking <link>, so it applies at first paint — whereas MudBlazor's palette
   arrives as variables on <body> once the framework initialises. Without this the page flashes
   white on every cold load.

   color-scheme also hands the dark palette to things CSS cannot reach: scrollbars, native form
   controls, and the browser's own UI inside the page. */
html {
    background-color: #101014;
    color-scheme: dark;
}

/* Routes.razor focuses the <h1> on every navigation so screen readers announce the new page. That
   focus should not paint a ring — but only when it was moved programmatically. :focus-visible
   still applies for anyone navigating by keyboard, who does need to see where they are. */
h1:focus:not(:focus-visible) {
    outline: none;
}

/* The app bar's one piece of colour: a gold hairline where it meets the content. Global rather
   than scoped because MudAppBar renders its own markup, which never carries MainLayout's scope
   attribute — the same reason the reconnect modal is themed by hand.

   color-mix keeps the palette as the single source of truth: change the gold in AppTheme and this
   follows, instead of drifting as a second copy of the hex. */
.app-bar {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}