/* ── Accessibility layer (WCAG 2.1 Level A parity with Pawn Marketplace v2.1) ──
   Additive shared file (new file per UI-UX-STANDARDS §4 rule 2 — tokens.css/app.css
   untouched). Cross-cutting by nature: keyboard-focus visibility and error
   identification must apply to every interactive control, so this file is the
   one sanctioned exception to per-feature scoping. Ported from the reference's
   app.css `:focus-visible` / `aria-invalid` rules, re-expressed on v3's
   component vocabulary (MudBlazor + fc-* classes) and Momento tokens. */

/* ── Keyboard focus visibility ──
   The reference mirrors :active on :focus-visible so keyboard users get the
   same feedback as pointer users. Brand CTAs keep that exact treatment; every
   other interactive element gets a token-based outline (MudBlazor and the
   hand-rolled fc-* buttons ship no focus indicator of their own). */
.mudbutton-ui:focus-visible,
.mudbutton-danger:focus-visible,
.mudbutton-grey:focus-visible {
    filter: brightness(0.8);
    outline: none;
}

/* .fc-btn-outlined excluded like the CTAs — its keyboard treatment is the
   press ring (PressFeedback.css), not the generic outline. */
button:not(.mudbutton-ui):not(.mudbutton-danger):not(.mudbutton-grey):not(.fc-btn-outlined):focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Focus target for FocusOnNavigate (router moves focus to the page h1).
   Headings are not pointer-interactive — suppress the outline there. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ── Error identification (WCAG 3.3.1) ──
   Native inputs flagged invalid get the reference's +2px destructive ring.
   Trigger with either `.input-error` or `aria-invalid="true"`; search inputs
   excluded (transient filtering, not form submission). MudTextField errors are
   handled by the existing .fc-input-error pattern (UI-UX-STANDARDS §18).
   #D32F2F is the documented destructive-red exception (§12.1) — v3's tokens
   deliberately keep --color-error for its own semantics. */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=search]).input-error,
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=search])[aria-invalid="true"],
select.input-error, select[aria-invalid="true"],
textarea.input-error, textarea[aria-invalid="true"] {
    border-color: #D32F2F !important;
    box-shadow: inset 0 0 0 2px #D32F2F !important;
}

/* ── EVERY errored MudBlazor field gets ONE border, in the field's own shape (reference 2026-08-20:
   "ALL errored input fields should be the same"). The rule above is right for a bare <input>, but a
   MudBlazor field's raw <input> is only the text slot — its real shape is the rounded <fieldset>
   `.mud-input-outlined-border`, which also spans the adornment (eye / Face-ID icon). Stamping the
   ring on the inner input drew a second, square red rectangle that stopped short of the adornment.
   So: clear the inner input's red, and put ONE 2px red border on the fieldset instead. The border
   class is repeated to reach (0,7,0) so it outranks each field family's own focus-ring !important. */
.mud-input input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=search])[aria-invalid="true"],
.mud-input input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=search]).input-error {
    border-color: transparent !important;
    box-shadow: none !important;
}

.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border.mud-input-outlined-border.mud-input-outlined-border.mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-input-error:focus-within .mud-input-outlined-border.mud-input-outlined-border.mud-input-outlined-border.mud-input-outlined-border {
    border: 2px solid #D32F2F !important;
    box-shadow: none !important;
}

/* ── Screen-reader utility + skip link (WCAG 2.4.1 Bypass Blocks) ──────────────── */
.fc-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Hidden until keyboard-focused, then slides in at the top-left. */
.fc-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1400;
    transform: translateY(-200%);
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-surface-default);
    color: var(--color-brand-primary);
    border: 2px solid var(--color-brand-primary);
    border-radius: 0 0 var(--radius-md) 0;
    font-family: var(--font-heading);
    font-size: var(--text-action-md-size);
    font-weight: var(--fw-bold);
    line-height: var(--text-action-md-lh);
    text-decoration: none;
    transition: transform 0.15s ease;
}
.fc-skip-link:focus,
.fc-skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}