/*
 * Driftwood site-wide design contract.
 *
 * Create remains the canonical reference for standard application geometry.
 * The Profile Settings/Admin hierarchy is the canonical heading treatment.
 * This file is loaded last on every page so legacy page utilities and
 * component families converge on the same rendered contract without changing
 * behavior. Domain-specific visual states (live, warning, success, danger,
 * score verification, and the sign-in artwork) remain semantic exceptions.
 */

:root {
    --site-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --site-font-family-heading: var(--site-font-family);
    --site-heading-weight: 700;
    --site-section-heading-weight: 600;
    --site-section-heading-size: 0.875rem;
    --site-section-heading-line-height: 1.25rem;
    --site-section-heading-letter-spacing: 0.025em;
    --site-content-max: 72rem;
    --site-page-gutter: 1rem;
    --site-page-gutter-wide: 1.5rem;
    --site-control-height: 38px;
    --site-button-height: 36px;
    --site-button-font-size: 0.875rem;
    --site-button-font-weight: 600;
    --site-inline-filter-gap: 0.75rem;
    --site-inline-filter-fixed-width: 16rem;
    --site-radius-control: 0.5rem;
    --site-radius-surface: 0.8rem;
    --site-radius-card: 0.95rem;
    --site-shadow-card: 0 18px 40px rgb(15 23 42 / 0.08);
    --site-shadow-state: 0 18px 42px rgb(15 23 42 / 0.08);

    /* Surface hierarchy: page canvas -> shell -> card -> inset. Keep these
       roles stable across page families so adjacent containers retain enough
       contrast without each page inventing its own color ladder. */
    --site-surface-page: rgb(var(--color-bg-canvas));
    --site-surface-shell: rgb(var(--color-bg-subtle));
    --site-surface-card: rgb(var(--color-surface-2));
    --site-surface-inset: rgb(var(--color-bg-canvas));
    --site-surface-inset-alt: rgb(var(--color-bg-subtle));
}

html,
body {
    font-family: var(--site-font-family);
}

body[data-page]:not([data-page="signin"]) {
    background: rgb(var(--color-bg-canvas));
    color: rgb(var(--color-text-primary));
}

/* Shared Create-style navigation */
.site-nav {
    background: linear-gradient(
        135deg,
        rgb(var(--color-hero-gradient-start)) 0%,
        rgb(var(--color-hero-gradient-mid)) 52%,
        rgb(var(--color-ocean-blue)) 100%
    ) !important;
}

.site-nav > [id$="nav-shell"],
.site-nav #homepage-nav-shell,
.site-nav .runtime-nav-shell {
    width: min(100% - 2rem, var(--site-content-max));
    max-width: var(--site-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.site-nav #profile-nav-row,
.site-nav #homepage-nav-row,
.site-nav #runtime-nav-row {
    min-height: 54px;
}

.site-nav .profile-brand-link,
.site-nav .profile-brand-text,
.site-nav .homepage-brand-text,
.site-nav .results-page-brand-link,
.site-nav .dupr-history-brand-link {
    color: rgb(var(--color-gray-50)) !important;
}

.site-nav .btn-nav-primary,
.site-nav .btn-nav-secondary,
.site-nav .btn-nav-on-dark,
.site-nav .site-mobile-menu-button,
.site-nav .runtime-nav-about-button,
.site-nav .runtime-mobile-menu-button {
    min-height: var(--site-button-height);
    height: var(--site-button-height);
    padding: 0 0.9rem;
    border: 1px solid rgb(255 255 255 / 0.44);
    border-radius: var(--site-radius-control);
    background: rgb(255 255 255 / 0.14);
    color: rgb(var(--color-gray-50));
    font-size: var(--site-button-font-size);
    font-weight: var(--site-button-font-weight);
    line-height: 1;
    box-shadow: 0 6px 18px rgb(8 28 44 / 0.18);
    text-decoration: none;
}

.site-nav .btn-nav-primary:hover,
.site-nav .btn-nav-primary:focus-visible,
.site-nav .btn-nav-secondary:hover,
.site-nav .btn-nav-secondary:focus-visible,
.site-nav .btn-nav-on-dark:hover,
.site-nav .btn-nav-on-dark:focus-visible,
.site-nav .runtime-nav-about-button:hover,
.site-nav .runtime-nav-about-button:focus-visible,
.site-nav .runtime-mobile-menu-button:hover,
.site-nav .runtime-mobile-menu-button:focus-visible {
    background: rgb(255 255 255 / 0.22) !important;
    border-color: rgb(255 255 255 / 0.7) !important;
    color: rgb(var(--color-gray-50)) !important;
    outline: none;
}

.site-nav .btn-nav-icon,
.site-nav .profile-nav-home-button,
.site-nav .results-page-desktop-home-button,
.site-nav .results-page-mobile-home-button,
.site-nav .dupr-history-desktop-home-button,
.site-nav .dupr-history-mobile-home-button {
    width: var(--site-button-height);
    min-width: var(--site-button-height);
    padding: 0;
}

.site-nav #auth-buttons-desktop > *,
.site-nav #auth-buttons-mobile > * {
    min-height: var(--site-button-height) !important;
    height: var(--site-button-height) !important;
    border-radius: var(--site-radius-control) !important;
    font-size: 0.875rem !important;
}

.site-nav .homepage-mobile-menu-row,
.site-nav .runtime-mobile-menu-panel {
    border-color: rgb(var(--color-border-default));
    background: rgb(var(--color-bg-canvas));
}

/* Shared page canvas and content width */
.site-page-shell {
    min-height: calc(100vh - var(--homepage-mobile-nav-height, 52px));
    padding: 1.25rem 0;
    background: var(--site-surface-shell) !important;
}

.site-page-content {
    width: min(100% - 2rem, var(--site-content-max));
    max-width: var(--site-content-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.site-page-shell code,
.site-page-content code {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Shared standard controls. Range, checkboxes, radio buttons, score fields,
   and file inputs retain their domain-specific interaction geometry. */
.site-control,
body[data-page]:not([data-page="signin"]) main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.runtime-score-input):not(.score-input),
body[data-page]:not([data-page="signin"]) main select,
body[data-page]:not([data-page="signin"]) #profile-form-container input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body[data-page]:not([data-page="signin"]) #profile-form-container select,
body[data-page]:not([data-page="signin"]) #runtime-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.runtime-score-input),
body[data-page]:not([data-page="signin"]) #runtime-content select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--site-control-height) !important;
    min-height: var(--site-control-height) !important;
    padding: 0 0.75rem !important;
    border: 1px solid rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-control) !important;
    background-color: rgb(var(--color-surface-2)) !important;
    color: rgb(var(--color-text-primary)) !important;
    font-family: inherit;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

body[data-page]:not([data-page="signin"]) main textarea,
body[data-page]:not([data-page="signin"]) #profile-form-container textarea,
body[data-page]:not([data-page="signin"]) #runtime-content textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 5.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-control) !important;
    background-color: rgb(var(--color-surface-2)) !important;
    color: rgb(var(--color-text-primary)) !important;
    font-family: inherit;
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
}

/* Shared responsive inline-filter geometry. Desktop rows keep a useful fixed
   category picker beside a fluid text filter; mobile rows stack both controls
   at full width. The child selectors intentionally outrank the broad control
   width normalization above so utility-driven flex relationships survive. */
.site-inline-filter-row {
    display: flex;
    flex-direction: column;
    gap: var(--site-inline-filter-gap);
}

.site-inline-filter-row > :is(.site-inline-filter-fixed, .site-inline-filter-fluid),
#profile-form-container .site-inline-filter-row > :is(.site-inline-filter-fixed, .site-inline-filter-fluid) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (min-width: 768px) {
    .site-inline-filter-row {
        flex-direction: row;
        align-items: center;
    }

    .site-inline-filter-row > .site-inline-filter-fixed,
    #profile-form-container .site-inline-filter-row > .site-inline-filter-fixed {
        width: var(--site-inline-filter-fixed-width) !important;
        max-width: var(--site-inline-filter-fixed-width) !important;
        flex: 0 0 var(--site-inline-filter-fixed-width) !important;
    }

    .site-inline-filter-row > .site-inline-filter-fluid,
    #profile-form-container .site-inline-filter-row > .site-inline-filter-fluid {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }
}

/* Preserve the Profile admin gender row's intentional fixed/flexible/fixed
   layout while keeping the shared control geometry. */
@media (min-width: 768px) {
    #dupr-gender-tools .md\:flex-row > select.w-30.md\:flex-none {
        width: 7.5rem !important;
        max-width: 7.5rem !important;
        flex: 0 0 7.5rem !important;
    }

    #dupr-gender-tools .md\:flex-row > select.w-full.md\:flex {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
}

.site-control:focus,
body[data-page]:not([data-page="signin"]) main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
body[data-page]:not([data-page="signin"]) main select:focus,
body[data-page]:not([data-page="signin"]) main textarea:focus,
body[data-page]:not([data-page="signin"]) #profile-form-container input:focus,
body[data-page]:not([data-page="signin"]) #profile-form-container select:focus,
body[data-page]:not([data-page="signin"]) #profile-form-container textarea:focus,
body[data-page]:not([data-page="signin"]) #runtime-content input:focus,
body[data-page]:not([data-page="signin"]) #runtime-content select:focus,
body[data-page]:not([data-page="signin"]) #runtime-content textarea:focus {
    border-color: rgb(var(--color-ocean-blue)) !important;
    outline: 2px solid rgb(var(--color-focus-ring) / 0.35);
    outline-offset: 1px;
}

body[data-page]:not([data-page="signin"]) label:not([role="switch"]) {
    color: rgb(var(--color-text-secondary));
}

/* Canonical button families. */
:is(
    .site-button,
    .create-page-btn,
    .btn-profile-primary,
    .btn-profile-secondary,
    .btn-profile-danger,
    .btn-profile-primary-sm,
    .btn-profile-secondary-sm,
    .btn-profile-danger-sm,
    .btn-profile-ghost-sm,
    .btn-profile-sand-sm,
    .profile-admin-action-button,
    .runtime-button,
    .homepage-card-btn,
    .homepage-themed-results-button,
    .results-page-load-more,
    .dupr-create-toggle-btn,
    .signin-action-button
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--site-button-height);
    height: var(--site-button-height);
    box-sizing: border-box;
    padding: 0 1rem;
    border-radius: var(--site-radius-control);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

#profile-form-container .profile-admin-action-button {
    height: var(--site-button-height) !important;
    min-height: var(--site-button-height) !important;
    font-size: var(--site-button-font-size) !important;
    line-height: 1 !important;
}

/* Preserve utility-driven visibility for canonical controls. */
:is(
    .site-button,
    .create-page-btn,
    .btn-profile-primary,
    .btn-profile-secondary,
    .btn-profile-danger,
    .btn-profile-primary-sm,
    .btn-profile-secondary-sm,
    .btn-profile-danger-sm,
    .btn-profile-ghost-sm,
    .btn-profile-sand-sm,
    .profile-admin-action-button,
    .runtime-button,
    .homepage-card-btn,
    .homepage-themed-results-button,
    .results-page-load-more,
    .dupr-create-toggle-btn,
    .signin-action-button
).hidden {
    display: none !important;
}

:is(.create-page-btn-primary, .btn-profile-primary, .btn-profile-primary-sm, .runtime-button-primary, .btn-blue, .btn-caribbean, .btn-gold, .btn-silver) {
    border: 1px solid transparent !important;
    background: rgb(var(--color-ocean-blue)) !important;
    color: rgb(var(--color-text-on-accent)) !important;
}

:is(.create-page-btn-primary, .btn-profile-primary, .btn-profile-primary-sm, .runtime-button-primary, .btn-blue, .btn-caribbean, .btn-gold, .btn-silver):hover,
:is(.create-page-btn-primary, .btn-profile-primary, .btn-profile-primary-sm, .runtime-button-primary, .btn-blue, .btn-caribbean, .btn-gold, .btn-silver):focus-visible {
    background: rgb(var(--color-ocean-teal)) !important;
    color: rgb(var(--color-text-on-accent)) !important;
}

:is(.create-page-btn-secondary, .btn-profile-secondary, .btn-profile-secondary-sm, .btn-profile-ghost-sm, .runtime-button-secondary, .results-page-load-more, .dupr-create-toggle-btn) {
    border: 1px solid rgb(var(--color-ocean-blue)) !important;
    background: rgb(var(--color-bg-canvas)) !important;
    color: rgb(var(--color-ocean-blue)) !important;
}

:is(.create-page-btn-secondary, .btn-profile-secondary, .btn-profile-secondary-sm, .btn-profile-ghost-sm, .runtime-button-secondary, .results-page-load-more, .dupr-create-toggle-btn):hover,
:is(.create-page-btn-secondary, .btn-profile-secondary, .btn-profile-secondary-sm, .btn-profile-ghost-sm, .runtime-button-secondary, .results-page-load-more, .dupr-create-toggle-btn):focus-visible {
    background: rgb(var(--color-seafoam-light) / 0.45) !important;
}

:is(.create-page-btn-danger, .btn-profile-danger, .btn-profile-danger-sm, .runtime-button-danger) {
    border: 1px solid rgb(var(--color-status-danger-border-strong)) !important;
    background: rgb(var(--color-bg-canvas)) !important;
    color: rgb(var(--color-status-danger-text)) !important;
}

:is(.create-page-btn-danger, .btn-profile-danger, .btn-profile-danger-sm, .runtime-button-danger):hover,
:is(.create-page-btn-danger, .btn-profile-danger, .btn-profile-danger-sm, .runtime-button-danger):focus-visible {
    background: rgb(var(--color-status-danger-bg-hover)) !important;
}

:is(.create-page-btn-neutral, .btn-profile-sand-sm) {
    border: 1px solid rgb(var(--color-border-strong)) !important;
    background: rgb(var(--color-bg-canvas)) !important;
    color: rgb(var(--color-text-secondary)) !important;
}

.runtime-button:disabled,
.create-page-btn:disabled,
.site-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Homepage card actions share the canonical button typography. The homepage
   stylesheet has older, more specific 15.2px/24px rules for expanded-card
   actions; these important declarations keep Open Tournament, View Additional
   Info, and Hide aligned with the site-wide button contract. */
.homepage-card-btn {
    font-family: var(--site-font-family) !important;
    font-size: var(--site-button-font-size) !important;
    font-weight: var(--site-button-font-weight) !important;
    line-height: 1 !important;
}

/* Expanded-card Hide controls use the same outlined secondary treatment as
   Open Tournament. Apply it to tournament, results, and league cards from the
   shared stylesheet so page-specific markup cannot reintroduce the gray
   legacy variant. */
:is(
    [id$="-registration-toggle-bottom"],
    [id$="-results-toggle-bottom"],
    [id$="-league-toggle-bottom"]
) {
    border: 1px solid rgb(var(--color-ocean-blue)) !important;
    background: rgb(var(--color-bg-canvas)) !important;
    color: rgb(var(--color-ocean-blue)) !important;
}

:is(
    [id$="-registration-toggle-bottom"],
    [id$="-results-toggle-bottom"],
    [id$="-league-toggle-bottom"]
):hover,
:is(
    [id$="-registration-toggle-bottom"],
    [id$="-results-toggle-bottom"],
    [id$="-league-toggle-bottom"]
):focus-visible {
    background: rgb(var(--color-seafoam-light) / 0.45) !important;
    color: rgb(var(--color-ocean-blue)) !important;
}

/* Create-style panels and page-specific panel convergence. */
:is(
    .about-page-copy,
    .about-page-summary,
    .about-page-panel,
    .results-page-stack,
    .results-page-event-card,
    .dupr-history-access-card,
    .dupr-history-match-history-card,
    #dupr-match-form-wrap,
    #dupr-webhook-panel,
    #profile-form-container,
    .runtime-header,
    .runtime-panel,
    .runtime-card-frame
) {
    border: 1px solid rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-card) !important;
    box-shadow: var(--site-shadow-card);
}

:is(.about-page-copy, .about-page-summary, .about-page-panel, .results-page-stack, .dupr-history-access-card, .runtime-header, .runtime-panel) {
    background: var(--site-surface-shell) !important;
}

:is(.about-page-copy, .about-page-summary, .about-page-panel, .results-page-panel, .runtime-team, .runtime-card-body, .runtime-match) {
    color: rgb(var(--color-text-primary));
}

:is(.about-page-summary > div, .about-page-panel, .results-page-panel, .runtime-team, .runtime-match) {
    border-color: rgb(var(--color-border-default));
}

/* Shared heading contract: Profile's primary headings use the system stack at
   700, while nested section headings use the same stack at 600. Keep the
   selectors here so Create, runtime, public, and legal surfaces cannot drift
   back to page-specific heading weights. */
:is(
    .about-page-copy h1,
    .create-page-shell h1,
    .create-page-tool-header h2,
    .dupr-history-match-header h2,
    .results-page-section-heading,
    #profile-form-container :is(h2, h3)
) {
    color: rgb(var(--color-ocean-blue));
    font-family: var(--site-font-family-heading);
    font-weight: var(--site-heading-weight);
}

/* Nested headings share the profile section treatment across all page
   families. Uppercase/tracking and component-specific sizes remain owned by
   their page styles. */
:is(
    .about-page-panel h2,
    .dupr-webhook-panel h3,
    .site-page-content h2,
    #create-event-tools h4,
    #profile-form-container h4
) {
    color: rgb(var(--color-ocean-blue));
    font-family: var(--site-font-family-heading);
    font-weight: var(--site-section-heading-weight);
}

/* Registration and Format are the reference treatment for compact section
   labels. Reuse that exact contract for parallel runtime sections and
   headings inside expanded homepage cards. */
.site-section-heading {
    color: rgb(var(--color-ocean-blue)) !important;
    font-family: var(--site-font-family-heading) !important;
    font-size: var(--site-section-heading-size) !important;
    font-weight: var(--site-section-heading-weight) !important;
    letter-spacing: var(--site-section-heading-letter-spacing) !important;
    line-height: var(--site-section-heading-line-height) !important;
    text-transform: uppercase !important;
}

/* The runtime title sits on the blue accent header; it must not inherit the
   ocean-blue section-heading color used on light surfaces. */
.runtime-event-title {
    font-family: var(--site-font-family-heading);
    font-weight: var(--site-heading-weight);
}

.runtime-header-top .runtime-event-title {
    color: rgb(var(--color-text-on-accent));
}

/* Profile/admin sections: one nested-surface treatment for all tools. */
#profile-page-content-shell {
    width: min(100% - 2rem, var(--site-content-max));
    max-width: var(--site-content-max);
    margin-left: auto;
    margin-right: auto;
}

#profile-form-container {
    border: 1px solid rgb(var(--color-border-default)) !important;
    padding: 1rem !important;
    background: var(--site-surface-card) !important;
}

#profile-form-container .profile-section-divider {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgb(var(--color-border-default));
}

#profile-form-container :is(
    #theme-mode-section,
    #email-notifications-section,
    #location-filtering-section,
    #calendar-sync-section-mobile,
    #admin-mode-section-mobile,
    #dupr-not-linked,
    #guest-account-editor,
    #unpaid-fees-list,
    #account-management-snapshot,
    #account-management-editor,
    #account-management-merge-picker,
    #activity-log-list,
    #club-management-list,
    #d1-baseline-summary,
    #sync-ratings-entitlements-log,
    #dupr-link-failures-list,
    #fallback-events-list,
    #dupr-gender-list,
    #site-updates-list,
    #email-notifications-list
) {
    border-color: rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-surface) !important;
    background: rgb(var(--color-bg-canvas)) !important;
}

#profile-form-container :is(
    #admin-tools,
    #unpaid-fees-tools,
    #master-admin-tools-only,
    #league-management-tools,
    #account-management-tools,
    #activity-log-tools,
    #archived-events-tools,
    #club-management-tools,
    #d1-baseline-tools,
    #sync-ratings-entitlements-tools,
    #email-notifications-tools,
    #dupr-link-failure-tools,
    #admin-permissions-tools,
    #fallback-events-tools,
    #dupr-gender-tools,
    #site-updates-tools
) {
    border-top-color: rgb(var(--color-border-default)) !important;
}

#profile-form-container .profile-field-display {
    display: flex;
    align-items: center;
    height: var(--site-control-height) !important;
    min-height: var(--site-control-height) !important;
    padding: 0 0.75rem !important;
    border-color: rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-control) !important;
    background: rgb(var(--color-surface-2)) !important;
    color: rgb(var(--color-text-primary)) !important;
    line-height: 1.5rem;
}

#profile-form-container #email-unlinked-block .profile-field-display,
#profile-form-container #email-linked-field .profile-field-display {
    height: auto !important;
    min-height: var(--site-control-height) !important;
    line-height: 1.35rem;
}

/* Homepage cards and dynamic result/registration surfaces. */
#homepage-feed-desktop,
#tournaments,
#results,
.homepage-static-feed-canvas {
    background: rgb(var(--color-bg-subtle)) !important;
}

:is(.tournament-card, .event-card, .results-card) {
    border: 1px solid rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-card) !important;
    background: rgb(var(--color-surface-2)) !important;
    box-shadow: var(--site-shadow-card) !important;
    transform: none;
}

:is(.tournament-card, .event-card, .results-card):hover {
    box-shadow: var(--site-shadow-card) !important;
    transform: none;
}

:is(.tournament-card, .event-card, .results-card) .card-header {
    border-color: transparent !important;
}

/* Homepage card themes are intentional semantic accents in the shared
   contract. Active and result cards use the same theme treatment; result-only
   summary, bracket, and standings surfaces remain domain-specific below. */
:is(.tournament-card, .event-card, .results-card).tournament-card-blue .card-header {
    background: linear-gradient(
        135deg,
        rgb(var(--color-card-header-blue-start)) 0%,
        rgb(var(--color-card-header-blue-mid)) 56%,
        rgb(var(--color-card-header-blue-end)) 100%
    ) !important;
}

:is(.tournament-card, .event-card, .results-card).tournament-card-caribbean .card-header {
    background: linear-gradient(
        135deg,
        rgb(var(--color-card-header-caribbean-start)) 0%,
        rgb(var(--color-card-header-caribbean-mid)) 54%,
        rgb(var(--color-card-header-caribbean-end)) 100%
    ) !important;
}

:is(.tournament-card, .event-card, .results-card).tournament-card-gold .card-header {
    background: linear-gradient(
        to right,
        rgb(var(--color-card-header-gold-start)),
        rgb(var(--color-card-header-gold-end))
    ) !important;
}

:is(.tournament-card, .event-card, .results-card).tournament-card-silver .card-header {
    background: linear-gradient(
        135deg,
        rgb(var(--color-card-header-silver-start)) 0%,
        rgb(var(--color-card-header-silver-mid)) 50%,
        rgb(var(--color-card-header-silver-end)) 100%
    ) !important;
}

/* Silver is the league-card reference treatment. Apply it to every result
   card using the silver theme so event results and league results stay paired. */
:is(.results-card, .league-results-card).tournament-card-silver .card-header {
    background: linear-gradient(
        135deg,
        rgb(84 96 108) 0%,
        rgb(117 129 141) 52%,
        rgb(156 167 179) 100%
    ) !important;
}

:is(.tournament-card, .event-card, .results-card) .card-body {
    background: rgb(var(--color-surface-2)) !important;
    background-image: linear-gradient(
        180deg,
        var(--homepage-card-body-grad-start) 0%,
        var(--homepage-card-body-grad-mid) 44%,
        var(--homepage-card-body-grad-end) 100%
    ) !important;
}

:is(.tournament-card, .event-card, .results-card) .results-summary-panel,
:is(.tournament-card, .event-card, .results-card) .results-summary-champions,
:is(.tournament-card, .event-card, .results-card) .results-summary-bracket,
:is(.tournament-card, .event-card, .results-card) .results-summary-actions,
:is(.tournament-card, .event-card, .results-card) .results-full-panel,
:is(.tournament-card, .event-card, .results-card) .results-expanded-shell,
:is(.tournament-card, .event-card, .results-card) .league-results-expanded-panel {
    background: rgb(var(--color-surface-2)) !important;
    background-image: none !important;
}

/* Expanded event-result sections use the league-card surface hierarchy: the
   section shell stays on the light card surface while round-inner-card team
   rows retain the subtle sand surface that makes each container distinct.
   League cards share the results-card behavior class for markup and
   interaction reuse, so this must remain explicitly non-league. */
.results-card:not(.league-results-card) .results-summary-panel,
.results-card:not(.league-results-card) .results-summary-champions,
.results-card:not(.league-results-card) .results-summary-bracket,
.results-card:not(.league-results-card) .results-summary-actions,
.results-card:not(.league-results-card) .results-full-panel,
.results-card:not(.league-results-card) .results-expanded-shell,
.results-card:not(.league-results-card) .league-results-expanded-panel {
    background: rgb(var(--color-surface-2)) !important;
    background-image: none !important;
}

.results-card:not(.league-results-card) .homepage-results-overall-card,
.results-card:not(.league-results-card) .homepage-results-overall-card-shell {
    background: rgb(var(--color-surface-2)) !important;
    background-image: none !important;
}

/* Theme-specific homepage actions retain their semantic color identity. */
.homepage-card-btn.btn-caribbean {
    background-color: rgb(var(--homepage-button-caribbean-bg)) !important;
    color: rgb(var(--color-text-on-accent)) !important;
}

.homepage-card-btn.btn-caribbean:hover,
.homepage-card-btn.btn-caribbean:focus-visible {
    background-color: rgb(var(--homepage-button-caribbean-hover)) !important;
}

.homepage-card-btn.btn-gold {
    background-color: rgb(var(--color-button-gold-bg)) !important;
    color: rgb(var(--color-text-on-accent)) !important;
}

.homepage-card-btn.btn-gold:hover,
.homepage-card-btn.btn-gold:focus-visible {
    background-color: rgb(var(--color-button-gold-hover)) !important;
}

.homepage-card-btn.btn-silver {
    background-color: rgb(103 114 126) !important;
    color: rgb(var(--color-text-on-accent)) !important;
}

.homepage-card-btn.btn-silver:hover,
.homepage-card-btn.btn-silver:focus-visible {
    background-color: rgb(88 98 110) !important;
}

:is(.card-details-panel, .registration-panel-body, .round-inner-card, .homepage-results-overall-card-shell) {
    border-color: rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-surface) !important;
    background: rgb(var(--color-bg-subtle)) !important;
}

.homepage-desktop-secondary-filter select,
.homepage-desktop-filter-clear,
.homepage-mobile-feed-toggle-button {
    min-height: var(--site-control-height) !important;
    height: var(--site-control-height) !important;
    border-radius: var(--site-radius-control) !important;
    font-family: inherit;
    font-size: 0.875rem !important;
}

/* Runtime: every admin subsection is a Create-style nested surface. */
.site-page-shell.runtime-wrap,
.runtime-wrap {
    width: min(100% - 2rem, var(--site-content-max));
    max-width: var(--site-content-max);
    margin-left: auto;
    margin-right: auto;
    padding: 1.25rem 0;
    background: var(--site-surface-page) !important;
    box-sizing: border-box;
}

.runtime-header,
.runtime-panel {
    border-width: 1px !important;
    background: var(--site-surface-shell) !important;
}

.runtime-header-top,
.runtime-card-header {
    background: rgb(var(--color-ocean-blue)) !important;
}

.runtime-header-body,
.runtime-card-body {
    background: var(--site-surface-shell) !important;
}

.runtime-team,
.runtime-match,
.runtime-format-field,
.runtime-milp-team-settings > .runtime-team,
.runtime-milp-settings-shell > .runtime-team {
    border: 1px solid rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-surface) !important;
    background: var(--site-surface-inset) !important;
}

/* A runtime surface inside another runtime surface is the next inset level;
   this keeps expanded pickers and format fields visibly nested instead of
   flattening to the same color as their parent. */
.runtime-team .runtime-team {
    background: var(--site-surface-inset-alt) !important;
}

.runtime-panel > .runtime-team,
.runtime-panel > #runtime-event-details {
    margin-top: 0.75rem;
}

.runtime-action-toolbar {
    border-top-color: rgb(var(--color-border-default));
}

.runtime-format-grid {
    gap: 0.75rem;
}

.runtime-format-field {
    padding: 0.75rem;
}

.runtime-format-slider {
    width: 100% !important;
    max-width: none;
}

.runtime-disclosure-button,
.runtime-refresh-button {
    width: var(--site-button-height) !important;
    min-width: var(--site-button-height) !important;
    height: var(--site-button-height) !important;
    min-height: var(--site-button-height) !important;
    padding: 0 !important;
}

.runtime-card-frame {
    border-width: 1px !important;
}

#runtime-event-details {
    border: 1px solid rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-surface) !important;
    background: rgb(var(--color-bg-canvas)) !important;
}

#runtime-event-details-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--site-button-height) !important;
    min-height: var(--site-button-height) !important;
    padding: 0 1rem !important;
    border-radius: var(--site-radius-control) !important;
    background: rgb(var(--color-ocean-blue)) !important;
    font-size: 0.875rem !important;
}

/* DUPR page: form, history, webhook, score, and filter controls share Create
   surfaces while score fields retain their compact data-entry affordance. */
.site-page-shell.dupr-history-page-shell {
    background: var(--site-surface-shell) !important;
}

.dupr-history-content-width {
    width: min(100% - 2rem, var(--site-content-max));
    max-width: var(--site-content-max);
}

#dupr-match-form-wrap,
.dupr-history-match-history-card,
#dupr-webhook-panel,
.dupr-history-access-card {
    background: var(--site-surface-card) !important;
}

:is(#dupr-match-form-wrap, .dupr-history-match-history-card, #dupr-webhook-panel) :is(input, select) {
    height: var(--site-control-height) !important;
    min-height: var(--site-control-height) !important;
    border-radius: var(--site-radius-control) !important;
    background: rgb(var(--color-surface-2)) !important;
}

.dupr-create-game-block,
.dupr-create-score-block,
.dupr-create-game-inner,
#dupr-match-history-list > *,
#dupr-match-history-list > div,
#dupr-webhook-list > * {
    border-color: rgb(var(--color-border-default)) !important;
    border-radius: var(--site-radius-surface) !important;
    background: var(--site-surface-inset) !important;
}

/* About and legal/support content */
.site-page-shell.about-page-canvas {
    background: rgb(var(--color-surface-2)) !important;
}

.about-page-hero,
.about-page-actions {
    width: min(100% - 2rem, var(--site-content-max));
    max-width: var(--site-content-max);
}

.about-page-copy,
.about-page-summary,
.about-page-panel {
    background: rgb(var(--color-bg-subtle)) !important;
}

.about-page-contact-panel a {
    min-height: var(--site-button-height);
    height: var(--site-button-height);
    margin-top: 1rem;
    padding: 0 1rem;
    border-radius: var(--site-radius-control);
    background: rgb(var(--color-ocean-blue));
    font-size: 0.875rem;
    font-weight: 600;
}

.site-page-content {
    line-height: 1.55;
}

.site-page-content h1,
.site-page-content h2 {
    color: rgb(var(--color-ocean-blue));
}

.site-page-content h1 {
    margin-bottom: 0.75rem;
    font-size: 2rem;
    font-family: var(--site-font-family-heading);
    font-weight: var(--site-heading-weight);
}

.site-page-content h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.65rem;
    font-size: 1.25rem;
    font-family: var(--site-font-family-heading);
    font-weight: var(--site-section-heading-weight);
}

.site-page-content a {
    color: rgb(var(--color-ocean-blue));
    text-underline-offset: 0.14rem;
}

.site-page-content .card {
    border: 1px solid rgb(var(--color-border-default));
    border-radius: var(--site-radius-surface);
    background: rgb(var(--color-bg-subtle));
    box-shadow: var(--site-shadow-card);
}

/* Sign-in keeps its branded artwork but uses the shared type/button contract. */
body.signin-page,
body.signin-page .signin-title,
body.signin-page .signin-status {
    font-family: var(--site-font-family);
}

body.signin-page .signin-action-button {
    height: var(--site-button-height);
    min-height: var(--site-button-height);
    padding: 0 1rem;
    border-radius: var(--site-radius-control);
    font-size: 0.875rem;
}

body.signin-page .signin-action-button.bg-ocean-blue {
    background: rgb(var(--color-ocean-blue)) !important;
}

body.signin-page .signin-action-button.bg-white {
    background: rgb(var(--color-bg-canvas)) !important;
    border-color: rgb(var(--color-ocean-blue)) !important;
}

@media (min-width: 768px) {
    :root {
        --site-page-gutter: var(--site-page-gutter-wide);
    }

    .site-page-shell {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .site-nav > [id$="nav-shell"],
    .site-nav #homepage-nav-shell,
    .site-nav .runtime-nav-shell,
    #profile-page-content-shell,
    .site-page-content {
        width: min(100% - 3rem, var(--site-content-max));
    }

    .site-page-shell.runtime-wrap,
    .runtime-wrap {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 767px) {
    .site-nav > [id$="nav-shell"],
    .site-nav #homepage-nav-shell,
    .site-nav .runtime-nav-shell {
        width: min(100% - 1rem, var(--site-content-max));
    }

    .site-page-content,
    #profile-page-content-shell,
    .about-page-hero,
    .about-page-actions,
    .results-page-content-width,
    .dupr-history-content-width {
        width: min(100% - 2rem, var(--site-content-max));
    }

    .site-page-shell.runtime-wrap,
    .runtime-wrap {
        width: min(100% - 1rem, var(--site-content-max));
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #profile-form-container {
        padding: 1rem !important;
    }
}