/* Shared leaderboard materials. Page files retain layout and interactions.
   Previous designs are preserved in /design-backups/. */
:root {
    --glass-ink: #07112e;
    --glass-muted: #315f8d;
    --glass-accent: #00bde8;
    /* Reference glass: cyan transmission, white rims and lifted selections. */
    --glass-panel: linear-gradient(115deg, rgba(250, 254, 255, .43), rgba(231, 249, 255, .2) 55%, rgba(232, 250, 255, .38));
    --glass-control: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(242, 251, 255, .75) 50%, rgba(215, 244, 255, .68));
    --glass-field: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(237, 251, 255, .26));
    --glass-dialog: linear-gradient(135deg, rgba(249, 254, 255, .9), rgba(218, 246, 255, .82));
    --glass-edge: rgba(255, 255, 255, .95);
    /* A tight white bloom and wider cyan halo soften the outlined rim. */
    --glass-edge-glow: 0 0 5px rgba(242, 255, 255, .72), 0 0 16px rgba(72, 220, 255, .3);
    --glass-shadow: inset 0 1px 2px #fff, inset 0 -1px 2px rgba(255, 255, 255, .5), var(--glass-edge-glow), 0 6px 16px rgba(0, 155, 205, .18);
    --glass-control-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 1px 2px #fff, inset 0 -3px 7px rgba(90, 216, 255, .12), 0 0 4px rgba(242, 255, 255, .68), 0 0 11px rgba(72, 220, 255, .26), 0 5px 10px rgba(0, 159, 209, .22);
    --glass-radius: 14px;
    --glass-control-radius: 8px;
}

body { color: var(--glass-ink); }

/* Leave the leaderboard's transparent wrapper and photo cards intact. */
body:not(.page-leaderboard) .surface-card {
    --surface-radius: var(--glass-radius);
    color: var(--glass-ink);
    background: var(--glass-panel);
    border-color: var(--glass-edge);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
body:not(.page-leaderboard) .surface-card::before {
    background: linear-gradient(160deg, rgba(255, 255, 255, .15), transparent 48%);
}

/* Explicit types preserve slider, upload-picker and checkbox styling. */
body:not(.page-leaderboard) :where(
    input:not([type]), input[type="text"], input[type="search"],
    input[type="email"], input[type="password"], input[type="number"],
    input[type="url"], input[type="tel"], input[type="date"],
    input[type="datetime-local"], textarea, select
) {
    color: var(--glass-ink);
    background-color: transparent;
    background-image: var(--glass-field);
    border-color: var(--glass-edge);
    border-radius: var(--glass-control-radius);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .9), 0 3px 8px rgba(0, 159, 209, .1);
    accent-color: #008cc4;
}
body :where(input, textarea)::placeholder { color: #4b7395; opacity: 1; }
body :where(select) option { color: var(--glass-ink); background-color: #e9faff; }
body :where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: #008cc4; }
body :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid #007cae;
    outline-offset: 3px;
}

body:not(.page-leaderboard) .pill-switch {
    color: var(--glass-muted);
    background: var(--glass-panel);
    border-color: var(--glass-edge);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8);
}
body:not(.page-leaderboard) .pill-switch::before {
    background: var(--glass-control);
    border-color: var(--glass-edge);
    border-radius: var(--glass-control-radius);
    box-shadow: var(--glass-control-shadow);
}
body:not(.page-leaderboard) .pill-switch-option { color: var(--glass-muted); border-radius: 6px; }
body:not(.page-leaderboard) .pill-switch-option:is(.is-active, [aria-current="page"]) { color: var(--glass-ink); }

/* Denser glass preserves readability over content in floating dialogs. */
body :is(.report-modal-dialog.surface-card, .onboarding-modal, .upload-editor-panel, .tour-panel, .image-request-toast) {
    color: var(--glass-ink);
    background: var(--glass-dialog);
    border-color: var(--glass-edge);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), 0 18px 45px rgba(13, 90, 128, .18);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}
body :is(.report-modal-header h2, .onboarding-modal-title, .tour-title) { color: var(--glass-ink); }
body :is(.report-modal-copy, .onboarding-modal-body, .upload-editor-help, .tour-copy) { color: var(--glass-muted); }
body .guided-tour { --tour-ink: var(--glass-ink); --tour-muted: var(--glass-muted); --tour-blue: #008bbd; }
body .guided-tour button,
body .guided-tour :is(.tour-primary, .tour-close),
body .onboarding-modal-btn,
body .onboarding-modal-btn.primary,
body .report-modal .report-modal-btn,
body .report-trigger-btn {
    color: var(--glass-ink);
    background: var(--glass-control);
    border-color: var(--glass-edge);
    border-radius: var(--glass-control-radius);
    box-shadow: var(--glass-control-shadow);
}
body .guided-tour button:hover:not(:disabled),
body .guided-tour :is(.tour-primary, .tour-close):hover:not(:disabled),
body .onboarding-modal-btn:hover:not(:disabled),
body .report-modal .report-modal-btn:hover:not(:disabled) { background: var(--glass-control); border-color: #70d9f3; }
body .report-category-option {
    color: var(--glass-ink);
    background: var(--glass-field);
    border-color: var(--glass-edge);
    border-radius: var(--glass-control-radius);
    box-shadow: inset 0 1px 1px #fff;
}
body .report-category-option:has(input:checked) { border-color: #008cba; box-shadow: inset 0 0 0 1px #008cba; }
body #report-reason-text { color: var(--glass-ink); background: var(--glass-field); border-color: var(--glass-edge); border-radius: var(--glass-control-radius); }
body #report-reason-text:focus { border-color: #008cba; }
body .tour-progress { border-radius: 8px; background: rgba(221, 247, 255, .5); }
body .tour-progress li { border-radius: 6px; }
body .tour-progress [data-state="current"] { color: var(--glass-ink); background: var(--glass-control); }

body :is(.account-preview-banner, .account-preview-photo) {
    color: var(--glass-muted);
    background: var(--glass-panel);
    border-color: var(--glass-edge);
    border-radius: var(--glass-radius);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .8);
}
body .site-footer { color: var(--glass-muted); border-top-color: var(--glass-edge); }
body .site-footer-copyright { color: var(--glass-muted); }
body .site-footer a:hover { color: var(--glass-ink); }

@media (prefers-contrast: more) {
    :root {
        --glass-panel: linear-gradient(115deg, rgba(250, 254, 255, .94), rgba(223, 247, 255, .9));
        --glass-field: linear-gradient(145deg, #fff, #e7f8ff);
    }
}