/* ============================================
   IdentityServer — app.css

   Deliberately almost empty. The look of this application comes from the MudBlazor theme
   (BrandingConfig -> BrandingConfigMudThemeMapper -> the single MudThemeProvider in Routes.razor)
   and from MudBlazor components and utility classes. That is what lets a client's registered brand,
   dark mode and RTL all apply on their own — anything expressed here instead is invisible to the
   theme, which is how the earlier branding, dark-mode and RTL defects got in.

   Before adding a rule here: check for a MudBlazor component, parameter or utility class that says
   the same thing. Layout constraints with no palette or type in them (a max-width on a card) belong
   inline on the component, as the Classic design's ClassicShell does. Only reach for this file when MudBlazor exposes
   no hook at all — as with the one rule below.
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* One-time-code / recovery-code entry: large, centred, widely spaced characters so a code can be
   read back a digit at a time.

   This is the single rule MudBlazor cannot express. It has to reach the <input> element inside
   MudTextField, and MudTextField exposes no InputClass or InputStyle parameter — Class and Style
   both land on the wrapper, where font-size and letter-spacing do not affect the field's text. */
.idp-otp-input input {
    font-size: 1.25rem;
    letter-spacing: 0.3em;
    text-align: center;
}

/* SIJ-22 — the third sanctioned exception, and the same kind again: MudBlazor cannot express it.

   The sign-in journey renders without a circuit (decision D1), and MudCheckBox cannot post without one — it cannot carry
   a value attribute, and the box it draws does not follow a click (SIJ-00, measured). So a journey tick box is a native
   checkbox (JourneyForms/CheckField), and this gives it the theme's colour and a size a finger can hit. Every value is a
   --mud-palette-* token or a length; selected by the component's data attribute, never a class.

   The second rule is the one other thing a circuit did on the journey: sign-up's organization fields showed only while
   their box was ticked. :has() says the same with no script — a [data-revealed] block inside a [data-reveal-group] is
   hidden while the group's revealing box is not ticked. The block is a plain element: MudBlazor's display utilities are
   !important (a MudStack is d-flex), so on one of its components this rule loses — found live (RevealedFieldsTests). */
input[type="checkbox"][data-journey-check] {
    accent-color: var(--mud-palette-primary);
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

[data-reveal-group]:not(:has(input[data-reveals]:checked)) [data-revealed] {
    display: none;
}

/* The language list (LanguageSelector), for the same reason: MudSelect's list is a popover a circuit positions, and the
   journey has none. Native, in the palette's tokens. */
select[data-journey-select] {
    font: inherit;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    padding: 0.25rem 0.5rem;
}

/* SIJ-23 — the journey's target size, the fourth sanctioned exception and the same kind again: MudBlazor has no setting
   for it.

   Research rule R8 (docs/sign-in-journey/design-research.md §1), which every design must meet: a control on the sign-in
   journey offers a target at least 44 CSS px high — web.dev's and WCAG 2.2 SC 2.5.5's size, above SC 2.5.8's 24 px floor.
   Measured in Chrome on the Classic design, at 360 px and 1280 px: its submit buttons were 36 px, provider links 32, the
   language list 29 and its button 26, the tick box's label 23 — a pixel under even the AA floor — and a standalone text
   link as little as 17. MudBlazor's largest button is below it, and nothing in the theme sets a minimum.

   One rule for every design, since the journey's layout carries the mark (ClientAccountLayout's data-journey) and the
   selectors are MudBlazor's own class names and the contract's native controls. Lengths only, no palette. A link inside a
   sentence — the agreement's terms and privacy links, inside their tick box's label — keeps the sentence's line: SC 2.5.8
   exempts a target in a line of text. */
[data-journey] .mud-button-root:not(.mud-icon-button),
[data-journey] select[data-journey-select],
[data-journey] label:has(> input[data-journey-check]) {
    min-height: 44px;
}

[data-journey] a.mud-link:not(label a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* NET-01 — the second sanctioned exception, and it is the same kind of exception as the first:
   MudBlazor cannot express it.

   These two elements live in App.razor's static shell, outside the Blazor component tree, and both
   exist to be shown when the circuit is DEAD or a render has just failed. A MudBlazor component
   needs a live circuit to render, so it cannot be one — the markup has to be in the document before
   anything goes wrong. That is why this is here and not in the theme.

   What keeps it honest: every colour below is a --mud-palette-* token, so the dialog still follows
   the active theme, dark mode and a client's registered brand, which is the whole reason the rule
   above exists. No palette values, no bespoke colours, no custom properties.

   The id and the state class names are Blazor's own — blazor.web.js toggles
   components-reconnect-{show,retrying,paused,failed,rejected,resume-failed,hide} on the dialog and
   sets display:block on #blazor-error-ui. We do not choose these names and cannot rename them,
   which is exactly why ThemingConventionTests names them individually rather than widening its rule. */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--mud-palette-overlay-dark);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex;
}

#components-reconnect-modal > div {
    max-width: 24rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-8);
}

#components-reconnect-modal h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 500;
}

#components-reconnect-modal p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

/* Only the line describing the live state is shown, so the dialog never says "reconnecting" and
   "could not reconnect" at the same time. */
#components-reconnect-modal [data-reconnect-state] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show [data-reconnect-state="retrying"],
#components-reconnect-modal.components-reconnect-retrying [data-reconnect-state="retrying"],
#components-reconnect-modal.components-reconnect-paused [data-reconnect-state="retrying"],
#components-reconnect-modal.components-reconnect-failed [data-reconnect-state="failed"],
#components-reconnect-modal.components-reconnect-rejected [data-reconnect-state="failed"],
#components-reconnect-modal.components-reconnect-resume-failed [data-reconnect-state="failed"] {
    display: block;
}

#idp-reconnect-reload {
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    font: inherit;
    cursor: pointer;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: none;
    border-radius: var(--mud-default-borderradius);
}

/* Blazor sets display:block here when a render fails, and wires the .reload anchor itself. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    text-align: center;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error);
}

#blazor-error-ui .reload {
    color: inherit;
    text-decoration: underline;
    margin-inline-start: 0.5rem;
}