/* Self-hosted Inter - -apple-system stays first for native SF (tokens.css). */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Kills Android/Chromium tap-flash; keyword not color, so tokens-only holds. */
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Explicit rem anchor for the tokens.css type/spacing scale - 100% honors a user's browser
       font-size preference instead of hardcoding 16px. */
    font-size: 100%;
}

html,
body {
    height: 100%;
    /* No-op on iOS <16 - WKWebView Bounces=false covers overscroll there. */
    overscroll-behavior: none;
    /* Backstop against iOS WKWebView clipping at the screen edge. */
    overflow-x: hidden;
    /* Disables Android WebView font-boosting (auto text inflation). */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* width:100%, not 100vw - WebKit's 100vw can exceed clientWidth. */
#app {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    /* --text-md, not --text-base: 17px is HIG's iOS/iPadOS default reading size, and this app
       is read outdoors at arm's length. Moves with the tokens.css retune as one change - the
       h1..h6 bindings below are untouched and keep their hierarchy off the same ladder. */
    font-size: var(--text-md);
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

/* Sized to font (1em); fill:currentColor keeps icons theme-aware. Square on purpose -
   every symbol in fa-sprite.svg is re-emitted onto one shared 512x512 viewBox (HIG
   rebuild Phase 8), so this box's 1:1 aspect always matches a symbol's own aspect and
   no implicit browser letterboxing is load-bearing. A new icon added to the sprite
   MUST be re-emitted onto that same 512x512 canvas (centre + translate/scale, never a
   non-uniform stretch) or it silently reopens the old cap-height mismatch. */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-semibold);
    color: inherit;
    line-height: var(--leading-2xl);
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); letter-spacing: normal; }
h5 { font-size: var(--text-base); letter-spacing: normal; }
h6 { font-size: var(--text-sm); letter-spacing: normal; }

p {
    line-height: var(--leading-base);
}

small {
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

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

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

::selection {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

:focus {
    outline: none;
}

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

/* Script-focus only - WebKit still matches :focus-visible on tabindex=-1. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Scrollbars (Firefox) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

/* Scrollbars (WebKit/Chromium) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-subtle);
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

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

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

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

.blazor-error-boundary {
    background: var(--color-danger);
    color: var(--color-text-on-dark);
    padding: var(--space-4);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}