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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--sa-bg);
    color: var(--sa-text);
    font-family: var(--sa-font-sans);
}

section {
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 40px);
}

.section-inner {
    max-width: 1100px;
    margin-inline: auto;
}

a { color: inherit; }

/* Legal stub pages — small max-width article body. */
.legal-page .section-inner {
    max-width: 680px;
}

.legal-page h1 {
    font-size: clamp(28px, 3.6vw, 38px);
    margin: 4px 0 24px;
}

.legal-page h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 32px 0 10px;
    color: var(--sa-text-strong);
}

.legal-page p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--sa-text);
}

.legal-eyebrow {
    margin: 0;
    font-family: var(--sa-font-mono);
    letter-spacing: var(--sa-tracking-mono);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--sa-text-muted);
}

.legal-footnote {
    margin-top: 32px !important;
    color: var(--sa-text-muted);
    font-size: 14px !important;
}

.legal-callout {
    background: var(--sa-status-warning-bg);
    color: var(--sa-status-warning-fg);
    padding: 12px 14px;
    border-radius: var(--sa-radius-md);
    font-size: 13px !important;
    line-height: 1.5;
    margin-bottom: 28px !important;
}

.legal-list {
    margin: 0 0 18px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .legal-list li {
        font-size: 15.5px;
        line-height: 1.55;
        color: var(--sa-text);
    }

    .legal-list code {
        font-size: 0.95em;
        color: var(--sa-text-strong);
    }

/* Mono helper — used inline in section bodies. */
.mono {
    font-family: var(--sa-font-mono);
    letter-spacing: var(--sa-tracking-mono);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Skip link — hidden until focused. Keyboard users can jump past the header. */
.sa-skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 1000;
    background: var(--sa-orange);
    color: var(--sa-navy);
    padding: 10px 16px;
    border-radius: var(--sa-radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

    .sa-skip-link:focus,
    .sa-skip-link:focus-visible {
        top: 12px;
        outline: 2px solid var(--sa-navy);
        outline-offset: 2px;
    }

/* Strong, brand-coloured focus ring for keyboard users everywhere. */
:focus-visible {
    outline: 2px solid var(--sa-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reset main's tabindex outline — focus on programmatic jump only, no ring. */
main:focus,
main:focus-visible {
    outline: none;
}

/* Belt-and-braces: in case Blazor injects its default reconnect / error UI
   despite the no-op handler in App.razor, force them out of the rendered
   layout AND the accessibility tree. */
#components-reconnect-modal,
#blazor-error-ui,
.components-reconnect-modal,
.blazor-error-boundary {
    display: none !important;
    visibility: hidden !important;
}