/* Portal-specific odds and ends. Everything visual lives in css/rukukwe/: tokens.css for the design
   tokens, rk.css for the components. Only things the framework injects and the design system has no
   opinion about belong here. */

/* Blazor's unhandled-error strip, restyled to the design's danger pair instead of the template's
   yellow-on-red. Shown by blazor.web.js when a circuit fails. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background: var(--danger-soft);
    color: var(--danger-ink);
    font: var(--text-small);
    border-top: 1px solid var(--danger);
    box-shadow: var(--shadow-md);
}

#blazor-error-ui .reload { color: var(--danger-ink); font-weight: 500; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: auto; font-size: 16px; line-height: 1; }

.blazor-error-boundary {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--danger-soft);
    color: var(--danger-ink);
    font: var(--text-small);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* The focus outline the router puts on a page's h1 after navigation is redundant next to the
   design system's focus ring, and it looks like a mistake on a page title. */
h1:focus { outline: none; box-shadow: none; }