/* Base layer: reset, typography, shared utilities */

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans-ui);
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: var(--type-body-weight);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans-ui);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: var(--heading-letter-spacing);
    text-wrap: balance;
}

p,
li,
dd,
dt,
figcaption {
    color: var(--text-primary);
}

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

strong,
b {
    font-weight: inherit;
}

html,
body {
    scrollbar-gutter: stable both-edges;
}

body.body--locked {
    overflow: hidden;
    touch-action: none;
}

.blackout,
.site-header__backdrop,
.sidebar-backdrop,
.media-lightbox__backdrop {
    background: var(--overlay-backdrop-bg);
    -webkit-backdrop-filter: var(--overlay-backdrop-filter);
    backdrop-filter: var(--overlay-backdrop-filter);
}

@media (max-width: 900px) {
    :root {
        --section-padding: var(--layout-padding-tablet);
    }
}

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

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

:where(
    .page-dock,
    .page-dock__main,
    .content-body,
    .title-row,
    .title-actions,
    .section-head__inner,
    .account-layout,
    .media-layout,
    .audio-page-layout,
    [data-learn-grid],
    .team-grid
) > * {
    min-width: 0;
}

:where(
    .table-intro,
    .page-subtitle,
    .description-container p,
    .account-staff-feedback-url,
    .media-card-title,
    .media-card-desc,
    .search-suggestion__title,
    .text-meta,
    .copy-line
) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

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

/* Unified keyboard focus state for interactive controls. */
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

@supports not selector(:focus-visible) {
    :where(
        a,
        button,
        input,
        select,
        textarea,
        summary,
        [role="button"],
        [tabindex]:not([tabindex="-1"])
    ):focus {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
    }
}

:where(button, input, select, textarea):disabled {
    cursor: not-allowed;
}

:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    select,
    textarea
) {
    min-height: var(--control-height-md);
    border: var(--border-width-base) solid var(--border-color-default);
    border-radius: var(--control-radius);
    padding: 0 var(--space-4);
    background-color: var(--field-bg-color);
    color: var(--text-primary);
    box-sizing: border-box;
}

:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    textarea
)::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

textarea {
    min-height: calc(var(--control-height-md) * 2);
    padding: var(--space-3) var(--space-4);
}

:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    select,
    textarea
):hover {
    border-color: var(--border-color-hover);
}

:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    select,
    textarea
):focus-visible {
    border-color: var(--border-color-focus);
    box-shadow: var(--state-focus-ring-shadow);
    outline: none;
}

:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    select,
    textarea
):disabled {
    opacity: 0.55;
    background-color: var(--bg-color);
    color: var(--text-secondary);
    border-color: var(--border-color-default);
}

:where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    select,
    textarea
):invalid {
    border-color: var(--chip-outline-danger);
    background-color: var(--theme-surface-danger-soft);
}

.skip-link {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    padding: 10px 14px;
    border-radius: var(--control-radius);
    background-color: var(--brand-color);
    color: var(--theme-action-primary-fg);
    font-weight: var(--type-control-weight);
    text-decoration: none;
    transform: translateY(-200%);
    z-index: 2000;
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: var(--focus-ring-width) solid var(--theme-action-primary-fg);
    outline-offset: var(--focus-ring-offset);
}

.content {
    padding-block: 0;
    padding-inline: clamp(10px, 1.4vw, 18px);
    margin: var(--content-offset-top) 0 var(--content-offset-bottom);
    position: relative;
    flex: 1 0 auto;
}

.game-page .content {
    background: transparent;
}

.game-page {
    --game-teal: 37, 171, 149;
    --game-sky: 56, 189, 248;
    --game-pink: 236, 72, 153;
    --game-violet: 168, 85, 247;
    --game-amber: 245, 158, 11;
    --game-orange: 249, 115, 22;
    --game-ink: 15, 23, 42;
    --game-accent: var(--game-teal);
}

.content-fade-out,
.content-fade-enter {
    opacity: 1;
    transform: none;
}


p, li {
    color: var(--text-primary);
    font-size: inherit;
    line-height: inherit;
}

h1, h2, h3 {
    color: var(--text-primary);
    font-weight: var(--type-h2-weight);
    letter-spacing: var(--heading-letter-spacing);
    margin: 0;
}

h1 {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    font-weight: var(--type-h1-weight);
    letter-spacing: var(--heading-letter-spacing);
    padding: 0;
}

h2 {
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
    font-weight: var(--type-h2-weight);
    letter-spacing: var(--heading-letter-spacing);
}

h3 {
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
    font-weight: var(--type-h3-weight);
    letter-spacing: var(--heading-letter-spacing);
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

sup {
    font-size: var(--type-control-size);
}

.page-subtitle {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--page-subtitle-size);
    color: var(--text-secondary);
    line-height: var(--type-body-line);
    max-width: 720px;
}

.type-h1,
.text-h1 {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    font-weight: var(--type-h1-weight);
    letter-spacing: var(--heading-letter-spacing);
}

.type-h2,
.text-h2 {
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
    font-weight: var(--type-h2-weight);
    letter-spacing: var(--heading-letter-spacing);
}

.type-h3,
.text-h3 {
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
    font-weight: var(--type-h3-weight);
    letter-spacing: var(--heading-letter-spacing);
}

.text-lead {
    font-size: var(--type-lead-size);
    line-height: var(--type-lead-line);
    font-weight: var(--type-lead-weight);
    color: var(--text-secondary);
}

.text-body {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: var(--type-body-weight);
}

.text-caption,
.text-label {
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    font-weight: var(--type-caption-weight);
}

.text-muted,
.text-description {
    font-size: var(--type-muted-size);
    line-height: var(--type-muted-line);
    font-weight: var(--type-muted-weight);
    color: var(--color-text-muted);
}

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

.text-secondary {
    color: var(--color-text-secondary);
}

:where(table) {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.table-scroll,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.table-scroll > table,
.table-responsive > table {
    width: max-content;
    min-width: 100%;
}


/* Utilities migrated from former js-styles.css */
.none {
    opacity: 0;
    pointer-events: none;
}

.blurred {
    filter: blur(60px);
}

.overflow-hidden {
    overflow: hidden;
}