/* Base styles, design tokens and accessibility primitives (NFR-9, WCAG 2.2 AA).
   Contrast notes (text on its background): body #1b1b1f on #fff 17:1; muted #4a4f5a on #fff 8:1;
   link #0b4fb3 on #fff 7.6:1; white on button #1a4fc4 7:1; white on danger #a8190f 7.6:1. */

:root {
    --color-text: #1b1b1f;
    --color-muted: #4a4f5a;
    --color-bg: #ffffff;
    --color-surface: #f4f6fa;
    --color-border: #6b7280;
    --color-border-soft: #c9ced8;
    --color-link: #0b4fb3;
    --color-primary: #1a4fc4;
    --color-primary-text: #ffffff;
    --color-danger: #a8190f;
    --color-danger-bg: #fdecea;
    --color-header: #14213d;
    --color-header-text: #ffffff;
    --focus-color: #1a4fc4;
    --focus-color-on-dark: #ffd60a;
    --focus-width: 3px;
    --radius: 0.375rem;
    --space: 1rem;
    --tap-size: 2.75rem;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-wrap: anywhere;
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 0.75rem; }

a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover { text-decoration-thickness: 2px; }

code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.lead { max-width: 60rem; }
.muted, .hint { color: var(--color-muted); }
.hint { font-size: 0.9rem; }

/* Visible focus on every interactive element, for keyboard users (WCAG 2.4.7, 2.4.11).
   Two rings (outline plus a contrasting halo) keep it visible on light and dark backgrounds. */
:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 calc(var(--focus-width) + 2px) #ffffff;
}

/* Headings and the main region receive programmatic focus on navigation; they do not need a ring. */
h1:focus, h2:focus, h3:focus, main:focus { outline: none; box-shadow: none; }

/* Hidden visually, still read by screen readers. */
.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;
}

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    color: var(--color-link);
    border: 2px solid var(--color-text);
    border-radius: var(--radius);
    font-weight: 600;
}

.skip-link:focus { top: 0.5rem; }

.noscript-notice {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--color-danger-bg);
    border-bottom: 2px solid var(--color-danger);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    :focus-visible { outline: var(--focus-width) solid Highlight; box-shadow: none; }
    .badge, .button { border: 2px solid ButtonText; }
}

/* Blazor's unhandled-error bar. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: #fff3cd;
    color: var(--color-text);
    border-top: 3px solid #7a5b00;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
}

#blazor-error-ui .reload { margin-inline: 0.75rem; }
#blazor-error-ui .dismiss { min-height: 2rem; cursor: pointer; }