/* Base reset and document-level typography for Wingmasters PRS. */

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

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

body {
    margin: 0;
    background: var(--background);
    color: var(--on-background);
    font: var(--text-body-md);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Numeric columns align using tabular figures, per the design's "Numerical Precision" rule. */
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

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

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

.page-section {
    margin-bottom: var(--space-xl);
}

.label {
    font: var(--text-label-md);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.headline-xl { font: var(--text-headline-xl); letter-spacing: -0.02em; }
.headline-lg { font: var(--text-headline-lg); letter-spacing: -0.01em; }
.headline-md { font: var(--text-headline-md); }
.headline-sm { font: var(--text-body-lg); font-weight: 600; }

/* Material Symbols icon font. */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* A small icon, scaled to sit inline with body text rather than the 24px base. */
.material-symbols-outlined.icon-sm { font-size: 1rem; }

/* Hover-lift interaction applied by statCardHover.js. */
.is-lifted {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}