/* =============================================================================
   Framework chrome only.

   Everything the product looks like lives in css/tokens.css and
   css/components.css, which are the stylesheets the product owner reviewed
   (SCRUM-36) and which a test keeps in step with previews/_assets/.

   What used to be here was the Blazor template's boilerplate, loaded alongside
   Bootstrap. Both were removed because the approved design system claims the
   same class names Bootstrap does — .card, .badge, .btn, .alert, .input — so
   every property Bootstrap set and the prototype did not leaked through
   invisibly. It surfaced as a confidence badge running off the edge of a phone
   screen, caused by Bootstrap's `.badge { white-space: nowrap }`; anything else
   it was quietly overriding would have been just as hard to spot.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   The unhandled-error bar. See Components/Layout/UnhandledErrorNotice.razor.

   Hidden here and revealed by the framework, which sets display:block on the
   element with this id — so `display: none` is load-bearing, not styling. Built
   from the design tokens rather than the template's inline red bar, because it
   appears over a homeowner's half-finished answers and should look like the rest
   of the product having a bad moment, not like a different application.
   ----------------------------------------------------------------------------- */
#blazor-error-ui {
    /* Load-bearing: the framework reveals this by setting display:block inline,
       so the visible layout has to survive being block. The flex row is a child. */
    display: none;

    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;

    padding: var(--space-3) var(--space-4);
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
    border-top: 2px solid var(--status-critical);
    box-shadow: var(--shadow-3);
    font-size: var(--text-sm);
}

#blazor-error-ui .crashbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    text-align: center;
}

#blazor-error-ui .reload {
    color: inherit;
    font-weight: var(--weight-semibold);
}

.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."
}

/* -----------------------------------------------------------------------------
   FocusOnNavigate puts tabindex="-1" on the <h1> and focuses it after every
   navigation, so a screen reader announces the new page instead of leaving the
   listener at the top of an unchanged document. That part is worth keeping.

   What is not worth keeping is the ring Chrome then draws: it treats programmatic
   focus as :focus-visible, so every page opened with a blue box around its
   headline — including the landing page, whose entire job is a first impression,
   and which the approved prototype shows without one.

   Scoped to tabindex="-1" so it only ever silences the case nobody asked for. A
   heading with that attribute cannot be reached by Tab at all, so the ring never
   told a keyboard user anything they did not already know; everywhere focus is
   actually earned, the design system's indicator is untouched.

   Both properties, because the design system's indicator is an outline *and* a
   box-shadow: clearing only the outline left a fainter ring still drawn, which is
   what the first attempt at this shipped in a screenshot.
   ----------------------------------------------------------------------------- */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}