/* ─────────────────────────────────────────────────────────────────────────
 * Saddleshot — Global base styles
 *
 * Cascade order (see App.razor): tokens.css → app.css → component-scoped CSS.
 * This file owns element-level defaults only. Everything visual references a
 * token from tokens.css — never hard-code color, size, radius, or spacing.
 * Screen and component styling lives in scoped `.razor.css` files.
 * ───────────────────────────────────────────────────────────────────────── */

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

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    line-height: 1.4;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'tnum' 1;
}

/* Hierarchy is size + color, never weight. Neutralize the browser's bold
 * defaults on headings; components opt into 500 (and 600 for the largest
 * page titles) explicitly. See design-notes.md §3. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
}

a {
    color: var(--blue);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* FocusOnNavigate moves focus to the page <h1> after every navigation (for
   screen readers), giving it tabindex="-1". That programmatic focus counts as
   :focus-visible, so a non-interactive heading would otherwise draw a blue ring
   on load. Suppress the ring on elements that are only focusable this way. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Blazor server-side validation hooks (used by EditForm). */
.valid.modified:not([type=checkbox]) {
    outline: var(--border-1) solid var(--emerald);
}

.invalid {
    outline: var(--border-1) solid var(--crimson);
}

.validation-message {
    color: var(--crimson);
    font-size: var(--fs-12);
}

/* Padding wrapper for simple, single-column text pages (Not found, Error). */
.page-pad {
    padding: var(--sp-7) var(--sp-8) var(--sp-10);
    max-width: 880px;
}

/* Small text utilities used by placeholder pages until real screens land. */
.admin-note {
    color: var(--emerald);
    font-size: var(--fs-13);
}

.placeholder-note {
    color: var(--ink-muted);
    font-size: var(--fs-14);
}

/* ── Blazor unhandled-error banner (markup lives in App.razor) ── */
#blazor-error-ui {
    color-scheme: light only;
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: var(--sp-3) var(--sp-5);
    background: var(--crimson-bg);
    color: var(--ink);
    border-top: var(--border-1) solid var(--crimson-border);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.08);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--sp-4);
    top: var(--sp-2);
}