/* ==========================================================================
   AkademIQ Design System — Base layer (v0.17.0)
   Reset, global typography defaults, focus handling, and a small set of
   utility classes shared across every page. Loaded after tokens.css, before
   components.css. See docs/ui/design-system.md.
   ========================================================================== */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--color-text-primary);
    background: var(--color-canvas);
    /* v0.33 Stage C (C1, AUDIT-UX-001): no "overflow-x: hidden" here any more. Since v0.17 it CLIPPED whatever was wider than the window, without a scroll
       bar - fields and buttons were simply unreachable on a phone and the defect stayed invisible. The causes were fixed in the shared styles (controls,
       form grids, card grids, wrapping of long values); wide content scrolls inside its own container (tables). Pinned by ResponsiveLayoutGuardTests and
       measured on real pages by scripts/Test-ResponsiveLayout.mjs. */
}

h1, h2, h3, h4 {
    color: var(--color-text-primary);
    line-height: 1.25;
    font-weight: 700;
    /* A long unbroken name (an institution, an e-mail address) wraps instead of widening the page. */
    overflow-wrap: anywhere;
}

dd {
    overflow-wrap: anywhere;
}

h1 { font-size: var(--text-display-size); }
h2 { font-size: var(--text-page-title-size); }
h3 { font-size: var(--text-section-title-size); }
h4 { font-size: var(--text-label-size); }

p {
    margin: 0 0 var(--space-md);
    max-width: 68ch;
}

code {
    background: var(--color-surface-sunken);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

a {
    color: var(--color-primary-text);
}

h1:focus {
    outline: none;
}

/* Visible keyboard focus everywhere (WCAG 2.2 AA - 2.4.11/2.4.7). Dark
   surfaces (sidebar, hero) define their own higher-contrast variant locally
   via --focus-ring-color-on-inverse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}

/* Skip link (WCAG 2.4.1) - visually hidden until focused, then jumps above
   everything else so keyboard users never have to tab through the whole
   sidebar/topbar to reach page content. */
.skip-link {
    position: absolute;
    top: -3rem;
    left: var(--space-md);
    z-index: 1100;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--motion-fast) var(--motion-ease);
}

.skip-link:focus {
    top: var(--space-md);
}

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

.icon {
    display: inline-block;
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success-solid);
}

.invalid {
    outline: 1px solid var(--color-danger-solid);
}

.validation-message {
    color: var(--color-danger-solid);
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Respect prefers-reduced-motion globally (WCAG 2.3.3) - every transition/
   animation in components.css and page-specific CSS is written assuming
   motion is allowed; this single rule turns all of it off at once rather
   than requiring each rule to guard itself individually. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}