/*
 * Copyright (c) 2026 Philip Necsulescu.
 * All rights reserved.
 */

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    font-family: "Segoe UI", sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 18% 22%, var(--wood-glow-a), transparent 20%),
        radial-gradient(circle at 74% 38%, var(--wood-glow-b), transparent 22%),
        linear-gradient(180deg, var(--white-10), var(--wood-wash)),
        repeating-linear-gradient(
            90deg,
            var(--wood-line-light) 0 1px,
            transparent 1px 48px,
            var(--wood-line-dark) 48px 52px,
            transparent 52px 96px
        ),
        repeating-linear-gradient(
            90deg,
            var(--wood-light) 0 48px,
            var(--wood-band-soft) 48px 96px,
            var(--wood-mid) 96px 144px,
            var(--wood-band-warm) 144px 192px,
            var(--wood-dark) 192px 240px,
            var(--wood-band-cream) 240px 288px
        ),
        repeating-linear-gradient(
            90deg,
            var(--wood-grain) 0 4px,
            transparent 4px 24px,
            var(--wood-grain-light) 24px 28px,
            transparent 28px 52px
        ),
        repeating-linear-gradient(
            180deg,
            transparent 0 80px,
            var(--wood-plank-line) 80px 84px,
            transparent 84px 160px
        );
}

h1,
h2,
h3 {
    letter-spacing: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

h1 {
    font-size: var(--h1-font-size);
    line-height: calc(var(--h1-font-size) + 4px);
}

h2 {
    font-size: var(--h2-font-size);
    line-height: calc(var(--h2-font-size) + 4px);
}

h3 {
    font-size: var(--h3-font-size);
    line-height: calc(var(--h3-font-size) + 4px);
}

.page-shell {
    width: min(1180px, calc(100% - 32px));
    min-width: 0;
    margin: 0 auto;
    padding: 0 0 64px;
}

.location-link,
.club-link,
.table-location-link,
.table-clear-filters,
.table-pagination-link,
.detail-location-link,
.detail-source-link,
.report-link {
    text-decoration: none;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 12px 16px;
    border: 4px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: var(--panel);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.action-button:hover,
.action-button:focus-visible {
    background: var(--ball-dot-yellow);
    color: var(--ink);
    outline: none;
}

.action-button:disabled,
.action-button:disabled:hover,
.action-button:disabled:focus-visible {
    border-color: var(--accent-rule);
    background: var(--accent-soft-panel);
    color: var(--muted-warm-soft);
    cursor: not-allowed;
}

.framed-panel-content {
    min-width: 0;
    border: var(--card-border-external) solid var(--accent);
    border-radius: 0;
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--panel) 100%);
    box-shadow: 0 16px 40px var(--shadow-soft);
}

.eyebrow {
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: var(--font-size-small);
    color: var(--accent-dark);
}

.error-shell {
    padding-bottom: 64px;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: var(--card-section-gap);
}

@media (max-width: 800px) {
    body {
        font-size: var(--mobile-body-font-size);
        line-height: var(--mobile-body-line-height);
    }

    :where(.page-shell, .listing-section, .detail-shell, .report-shell).mobile-type-content :where(p, a, button, input, select, label, span, strong, time, li, dt, dd, th, td, caption, legend, output) {
        font-size: var(--mobile-body-font-size);
        line-height: var(--mobile-body-line-height);
    }

    .action-button {
        font-size: var(--mobile-body-font-size);
        line-height: var(--mobile-body-line-height);
    }

    .eyebrow {
        font-size: var(--font-size-regular);
        line-height: var(--mobile-small-line-height);
        letter-spacing: 0;
    }
}

@media (max-width: 640px) {
    .page-shell {
        width: min(1180px, calc(100% - 16px));
        padding-top: 0;
    }

    .error-actions {
        flex-direction: column;
    }

    .error-actions .action-button {
        width: 100%;
    }
}