/* Public pages share the leaderboard's materials without changing their layouts. */

/* Home and explanatory pages use the shared waves as their backdrop. */
.page-home .home-background,
.page-how-it-works .how-background { display: none; }

.page-home .home-main .surface-card {
    --surface-radius: var(--glass-radius);
    border-radius: var(--glass-radius);
    border-color: var(--glass-edge);
    background: var(--glass-panel);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
}
.page-home .home-main .surface-card::before { background: none; }
.page-home :is(.home-live-question, .home-vs) { font-family: "Mozilla Text", sans-serif; }
.page-home :is(.home-hero-copy h1, .home-live-question, .home-feature h2) { color: var(--glass-ink); }
.page-home :is(.home-hero-kicker, .home-hero-text, .home-hero-proof, .home-live-meta, .home-live-hint, .home-feature p, .home-vs) { color: var(--glass-muted); }
.page-home .home-feature + .home-feature { border-color: rgba(63, 156, 199, .24); }
.page-home .home-face-card { border-color: var(--glass-edge); border-radius: 12px; box-shadow: 0 5px 14px rgba(3, 133, 178, .13); }
.page-home .home-face-card:hover { border-color: #00bde8; box-shadow: 0 0 0 1px #00bde8, 0 7px 20px rgba(0, 157, 207, .19); }

.page-home .home-btn,
.page-how-it-works .how-button {
    color: var(--glass-ink);
    border-color: var(--glass-edge);
    border-radius: var(--glass-control-radius);
    background: var(--glass-control);
    box-shadow: 0 6px 14px rgba(0, 143, 194, .17), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(163, 229, 247, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.page-home .home-btn:hover,
.page-how-it-works .how-button:hover {
    background: linear-gradient(155deg, #fff, rgba(234, 250, 255, .9));
    box-shadow: 0 7px 18px rgba(0, 143, 194, .22), inset 0 1px 0 #fff;
}
.page-home .home-btn:active,
.page-home .home-btn.is-pressed { box-shadow: inset 0 2px 4px rgba(34, 127, 167, .16), inset 0 -1px 0 #fff; }

/* Search field and results retain their existing navigation and keyboard states. */
.page-explore .explore-page,
.explore-page.surface-card { --surface-radius: var(--glass-radius); border-radius: var(--glass-radius); }
.explore-page :is(.explore-header h1, .explore-section h2, .option-username, .account-result-username, .profile-name, .search-empty-state h2) { color: var(--glass-ink); }
.explore-page :is(.explore-eyebrow, .explore-header > p, .option-meta, .account-result-name, .account-result-comparisons, .account-result-rank, .account-result-arrow, .search-empty-state p) { color: var(--glass-muted); }
.explore-page :is(.search-form, .search-dropdown) {
    border-radius: 10px;
    border-color: var(--glass-edge);
    background: var(--glass-panel);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
}
.explore-page .search-dropdown { background: linear-gradient(135deg, rgba(247, 254, 255, .94), rgba(212, 244, 255, .86)); }
.explore-page .search-form input { color: var(--glass-ink); border-radius: var(--glass-control-radius); background: transparent; box-shadow: none; }
.explore-page .search-form input::placeholder { color: var(--glass-muted); opacity: .8; }
.explore-page .search-form input:focus-visible { outline: 2px solid #00a7d6; outline-offset: -2px; }
.explore-page .search-form button {
    color: var(--glass-ink);
    background: var(--glass-control);
    border-radius: var(--glass-control-radius);
    box-shadow: 0 3px 10px rgba(0, 143, 194, .14), inset 0 0 0 1px var(--glass-edge);
}
.explore-page .search-form button:hover { background: rgba(255, 255, 255, .96); }
.explore-page .search-option a { border-radius: var(--glass-control-radius); }
.explore-page :is(.search-option.is-active a, .search-option a:hover) { background: var(--glass-control); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.explore-page :is(.account-results, .account-result) { border-color: rgba(63, 156, 199, .25); }
.explore-page .account-result:hover { background: rgba(255, 255, 255, .38); }
.explore-page :is(.profile-image, .account-result-image) { border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 133, 177, .15), 0 0 0 1px var(--glass-edge); }

/* Compare: glass frames and controls, preserving photo geometry and vote states. */
.page-compare :is(.compare-header h1, .compare-credit-earned, .compare-progress-placeholder-count) { color: var(--glass-ink); }
.page-compare :is(.compare-kicker, .compare-header p, .compare-rail h2, .compare-credits p, .compare-reward-link span, .compare-shortcuts dd, .face-choice-label) { color: var(--glass-muted); }
.page-compare[data-ad-layout="responsive"] .face-card {
    --photo-frame-radius: 12px;
    border-radius: var(--photo-frame-radius);
    border-color: var(--glass-edge);
    background: rgba(248, 254, 255, .56);
    box-shadow: 0 5px 16px rgba(0, 133, 177, .15);
}
.page-compare[data-ad-layout="responsive"] .face-card img { border-radius: max(0px, calc(var(--photo-frame-radius) - var(--photo-frame-width, 2px))); }
.page-compare .face-card.selected { background: transparent; box-shadow: none; }
.page-compare :is(.progress-pill, .admin-gender-picker, .vs-badge, .compare-reward-link, .compare-shortcuts kbd) {
    color: var(--glass-ink);
    border-color: var(--glass-edge);
    background: var(--glass-control);
    box-shadow: 0 3px 10px rgba(0, 143, 194, .13), inset 0 1px 0 #fff;
    border-radius: var(--glass-control-radius);
}
.page-compare .vs-badge { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.page-compare .admin-gender-btn { border-radius: 6px; color: var(--glass-muted); }
.page-compare .admin-gender-btn.is-active { color: var(--glass-ink); background: var(--glass-control); box-shadow: 0 2px 7px rgba(0, 143, 194, .15), inset 0 0 0 1px #fff; }
.page-compare[data-ad-layout="responsive"] .compare-actions { border-radius: var(--glass-control-radius); border-color: var(--glass-edge); background: var(--glass-panel); box-shadow: var(--glass-shadow); }
.page-compare[data-ad-layout="responsive"] :is(.undo-btn, .skip-btn, .report-trigger-btn) { color: var(--glass-ink); border-color: var(--glass-edge); border-radius: var(--glass-control-radius); }
.page-compare[data-ad-layout="responsive"] .report-trigger-btn { background: var(--glass-control); }
.page-compare[data-ad-layout="responsive"] .compare-actions::after { background: rgba(63, 156, 199, .28); }
.page-compare :is(.compare-rail-section + .compare-rail-section, .compare-progress-placeholder) { border-color: rgba(63, 156, 199, .25); }

@media (min-width: 851px) {
    .page-compare[data-ad-layout="responsive"] .compare-content {
        background: var(--glass-panel);
        border-color: var(--glass-edge);
        border-radius: var(--glass-radius);
        box-shadow: var(--glass-shadow);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
        backdrop-filter: blur(18px) saturate(1.15);
    }
    .page-compare[data-ad-layout="responsive"] .compare-card.surface-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .page-compare[data-ad-layout="responsive"] .compare-rail { background: rgba(237, 251, 255, .3); border-color: rgba(255, 255, 255, .75); border-radius: 10px; }
    .page-compare[data-ad-layout="responsive"] .compare-actions { background: transparent; border: 0; box-shadow: none; }
    .page-compare[data-ad-layout="responsive"] .compare-actions button { background: var(--glass-control); border-color: var(--glass-edge); border-radius: var(--glass-control-radius); box-shadow: 0 3px 10px rgba(0, 143, 194, .12), inset 0 1px 0 #fff; }
}

/* Upload keeps its quiet hierarchy, now with the same translucent materials. */
.page-upload .upload-header :is(h1, h2) { color: var(--glass-ink); }
.page-upload :is(.upload-subtitle, .upload-next, .empty-preview, .checkbox-row, .upload-camera-status) { color: var(--glass-muted); }
.page-upload :is(.empty-preview strong, .upload-icon) { color: var(--glass-ink); }
.page-upload .upload-mode-toggle { border-color: var(--glass-edge); border-radius: 10px; background: rgba(230, 250, 255, .28); box-shadow: inset 0 1px 0 #fff; }
.page-upload .upload-mode-toggle::before { border-radius: var(--glass-control-radius); background: var(--glass-control); box-shadow: 0 3px 10px rgba(0, 143, 194, .14), inset 0 1px 0 #fff; }
.page-upload .upload-mode-btn { border-radius: var(--glass-control-radius); color: var(--glass-muted); }
.page-upload .upload-mode-btn.is-active { color: var(--glass-ink); }
.page-upload .drop-zone {
    border-color: rgba(55, 157, 200, .5);
    border-radius: 12px;
    background: linear-gradient(140deg, rgba(252, 255, 255, .58), rgba(203, 244, 255, .24));
    box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(0, 140, 185, .08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.page-upload :is(.drop-zone:hover, .drop-zone.dragover) { border-color: #00a9d7; background: rgba(239, 253, 255, .65); box-shadow: inset 0 0 0 1px rgba(0, 169, 215, .16); }
.page-upload .drop-zone:has(.image-preview:not([hidden])) { background: rgba(228, 248, 255, .4); border-color: var(--glass-edge); }
.page-upload :is(.submit-upload, #submitUpload) { color: var(--glass-ink); border-radius: var(--glass-control-radius); border-color: var(--glass-edge); background: var(--glass-control); box-shadow: 0 5px 14px rgba(0, 143, 194, .15), inset 0 1px 0 #fff; }
.page-upload :is(.submit-upload, #submitUpload):hover:not(:disabled) { background: linear-gradient(155deg, #fff, rgba(229, 250, 255, .92)); }
.page-upload #submitUpload:disabled { color: #587c93; background: rgba(231, 248, 254, .45); border-color: rgba(255, 255, 255, .64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.page-upload .upload-message { background: var(--glass-panel); border-color: var(--glass-edge); border-radius: 10px; box-shadow: inset 0 1px 0 #fff; }
.page-upload .upload-camera-stage { border-radius: 12px; border-color: var(--glass-edge); }

/* Sign in, sign up and the profile-completion form. */
:is(.login-card, .signup-card) :is(h1, label) { color: var(--glass-ink); }
:is(.login-card, .signup-card) :is(.login-subtitle, .signup-subtitle, .signup-link, .login-link, .provider-divider) { color: var(--glass-muted); }
:is(.login-card, .signup-card) :is(.signup-link a, .login-link a) { color: var(--glass-ink); }
:is(.login-card, .signup-card) input:not([type="radio"]):not([type="checkbox"]),
.signup-card select,
.page-auth .auth-content input:not([type="radio"]) {
    color: var(--glass-ink);
    border-radius: var(--glass-control-radius);
    border-color: var(--glass-edge);
    background: linear-gradient(140deg, rgba(255, 255, 255, .65), rgba(233, 250, 255, .43));
    box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(0, 143, 194, .08);
}
:is(.login-card, .signup-card) input:focus,
.page-auth .auth-content input:not([type="radio"]):focus { background: rgba(251, 255, 255, .85); border-color: #20b7e2; box-shadow: 0 0 0 2px rgba(0, 174, 222, .16); }
:is(.login-card, .signup-card) :is(button, .provider-btn) { color: var(--glass-ink); border-color: var(--glass-edge); border-radius: var(--glass-control-radius); background: var(--glass-control); box-shadow: 0 4px 12px rgba(0, 143, 194, .14), inset 0 1px 0 #fff; }
:is(.login-card, .signup-card) :is(button, .provider-btn):hover:not(:disabled) { background: rgba(249, 255, 255, .94); }
.page-auth .signup-sex-options { border-radius: 10px; border-color: var(--glass-edge); background: rgba(227, 248, 255, .38); }
.page-auth .signup-sex-options span { color: var(--glass-muted); border-radius: 6px; border-color: transparent; background: transparent; box-shadow: none; }
.page-auth .signup-sex-options input:checked + span { color: var(--glass-ink); border-color: var(--glass-edge); background: var(--glass-control); box-shadow: 0 2px 7px rgba(0, 143, 194, .14), inset 0 1px 0 #fff; }

/* Informational pages use glass tiles and the same navy/blue text hierarchy. */
.page-how-it-works :is(.how-step, .how-panel) { --surface-radius: var(--glass-radius); border-radius: var(--glass-radius); }
.page-how-it-works :is(h1, h2, h3, .how-faq summary, .how-example-score strong) { color: var(--glass-ink); }
.page-how-it-works :is(.how-kicker, .how-intro, .how-step p, .how-score-copy p, .how-confidence-chart figcaption, .how-reliability-item p, .how-faq-answer, .how-vs, .how-upload-example small, .how-example-score > span, .how-example-score small) { color: var(--glass-muted); }
.page-how-it-works :is(.how-step-number, .how-reliability-icon) { border-radius: var(--glass-control-radius); color: var(--glass-ink); background: var(--glass-control); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 3px 9px rgba(0, 143, 194, .12); }
.page-how-it-works :is(.how-upload-example, .how-example-score, .how-confidence-chart, .how-faq-items) { background: rgba(245, 253, 255, .4); border-color: var(--glass-edge); border-radius: 10px; box-shadow: inset 0 1px 0 #fff; }
.page-how-it-works .how-compare-preview figcaption { color: var(--glass-ink); border-radius: 6px; background: var(--glass-control); }
.page-how-it-works .how-portrait { border-color: var(--glass-edge); }
.page-how-it-works :is(.how-reliability-item + .how-reliability-item, .how-faq details + details) { border-color: rgba(63, 156, 199, .22); }
.page-how-it-works .how-chart-labels { fill: var(--glass-muted); }
:is(.page-about, .page-terms, .page-privacy) :is(h1, h2, h3) { color: var(--glass-ink); }
:is(.page-about, .page-terms, .page-privacy) :is(p, li) { color: var(--glass-muted); }

/* Calibration retains its semantic pass/fail colors and camera canvas. */
.calib-card :is(.calib-rule, .calib-metric:not(.is-pass):not(.is-fail)) { background: var(--glass-panel); border-color: var(--glass-edge); border-radius: 10px; box-shadow: inset 0 1px 0 #fff; }
.calib-card .calib-stage { border-color: var(--glass-edge); border-radius: 12px; }
.calib-card :is(.calib-metric span, .calib-rule-help, .calib-copy-msg, .calib-rule-value, .calib-nav-links a) { color: var(--glass-muted); }
.calib-card :is(.calib-metric strong, .calib-rule-top label) { color: var(--glass-ink); }
.calib-card .calib-verdict.is-idle { color: var(--glass-ink); background: var(--glass-control); border-color: var(--glass-edge); }
.calib-card .calib-verdict { border-radius: var(--glass-control-radius); }