/*
 * System appearance support for the public Join and Legal surfaces.
 * The existing page styles remain the dark palette; these overrides provide
 * the light palette when the browser reports a light device appearance.
 */
:root {
    color-scheme: dark;
    background-color: #000000;
}

.join-page,
.legal-page {
    --public-brand-accent-rgb: 173, 155, 232;
    --public-brand-secondary-rgb: 141, 127, 192;
    --public-brand-ink-rgb: 36, 26, 61;
    background: #000000;
}

.join-page .public-brand-header,
.legal-page .public-brand-header {
    --league-accent-rgb: var(--public-brand-accent-rgb);
    --league-secondary-rgb: var(--public-brand-secondary-rgb);
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        background-color: #ffffff;
    }

    .join-page,
    .legal-page {
        --public-accent-rgb: 20, 122, 61;
        --public-border-rgb: 100, 116, 105;
        --public-ink-rgb: 16, 24, 19;
        --public-muted-rgb: 71, 85, 76;
        --public-surface-rgb: 255, 255, 255;
        --public-brand-accent-rgb: 98, 84, 143;
        --public-brand-secondary-rgb: 129, 115, 174;
        --public-brand-ink-rgb: 36, 26, 61;
        --league-accent-rgb: var(--public-accent-rgb);
        --league-secondary-rgb: 13, 118, 109;
        background-color: #ffffff;
        color: #101813;
    }

    .join-page .join-shell {
        --league-accent-rgb: var(--public-accent-rgb);
        --league-secondary-rgb: 13, 118, 109;
    }

    .join-page .public-brand-header,
    .legal-page .public-brand-header {
        --league-accent-rgb: var(--public-brand-accent-rgb);
        --league-secondary-rgb: var(--public-brand-secondary-rgb);
    }

    /* Shared public brand and footer */
    .join-page .prophet-logo-product-lockup .logo-main.prophet-wordmark,
    .legal-page .prophet-logo-product-lockup .logo-main.prophet-wordmark,
    .join-page .prophet-logo,
    .legal-page .prophet-logo {
        color: #101813;
    }

    .join-page .subtitle,
    .legal-page .subtitle {
        color: #526158;
    }

    .join-page .prophet-bottle-body,
    .legal-page .prophet-bottle-body {
        fill: rgba(255, 255, 255, 0.94);
        stroke: rgba(16, 24, 19, 0.58);
    }

    .join-page .prophet-bottle-neck,
    .legal-page .prophet-bottle-neck {
        fill: #e8eeea;
        stroke: rgba(16, 24, 19, 0.7);
    }

    .join-page .prophet-bottle-line,
    .legal-page .prophet-bottle-line {
        stroke: rgba(16, 24, 19, 0.62);
    }

    .join-page .public-brand-header .prophet-logo-accent-bubble,
    .legal-page .public-brand-header .prophet-logo-accent-bubble {
        opacity: 0.94;
    }

    .join-page .public-brand-header .prophet-logo-accent-bubble.is-primary,
    .legal-page .public-brand-header .prophet-logo-accent-bubble.is-primary,
    .join-page .public-brand-header .prophet-bubble-two,
    .legal-page .public-brand-header .prophet-bubble-two {
        fill: rgb(var(--public-brand-accent-rgb));
    }

    .join-page .public-brand-header .prophet-logo-accent-bubble.is-secondary,
    .legal-page .public-brand-header .prophet-logo-accent-bubble.is-secondary {
        fill: rgb(var(--public-brand-secondary-rgb));
    }

    .join-page .prophet-wordmark-profit::before,
    .legal-page .prophet-wordmark-profit::before {
        color: rgba(var(--public-brand-accent-rgb), 0.48);
    }

    .join-page .prophet-wordmark::after,
    .legal-page .prophet-wordmark::after {
        background: linear-gradient(
            90deg,
            rgba(var(--public-brand-secondary-rgb), 0),
            rgba(var(--public-brand-secondary-rgb), 0.14) 34%,
            rgba(var(--public-brand-accent-rgb), 0.18) 50%,
            rgba(var(--public-brand-accent-rgb), 0.3) 63%,
            rgba(var(--public-brand-accent-rgb), 0)
        );
    }

    .join-page .prophet-logo:focus-visible,
    .legal-page .prophet-logo:focus-visible {
        outline-color: rgba(var(--public-brand-accent-rgb), 0.74);
    }

    .join-page .public-legal-footer,
    .legal-page .public-legal-footer {
        border-top-color: rgba(var(--public-border-rgb), 0.22);
        color: rgba(var(--public-muted-rgb), 0.7);
    }

    .join-page .public-legal-footer a,
    .legal-page .public-legal-footer a {
        color: rgba(var(--public-muted-rgb), 0.82);
    }

    .join-page .public-footer-store-icon,
    .legal-page .public-footer-store-icon {
        border-color: transparent;
        background: transparent;
        color: rgba(49, 40, 69, 0.82);
    }

    .join-page .public-legal-footer .public-legal-current,
    .legal-page .public-legal-footer .public-legal-current,
    .join-page .public-legal-footer a:hover,
    .join-page .public-legal-footer a:focus-visible,
    .legal-page .public-legal-footer a:hover,
    .legal-page .public-legal-footer a:focus-visible {
        color: rgb(var(--public-accent-rgb));
    }

    /* Legal documents */
    .legal-page {
        --legal-accent: var(--public-accent-rgb);
        background: #ffffff;
        color: #34443a;
    }

    .legal-header-links a,
    .legal-header-links .legal-current-link {
        color: rgba(var(--public-muted-rgb), 0.82);
    }

    .legal-header-links .legal-current-link {
        color: #101813;
    }

    .legal-header-links .legal-header-join,
    .legal-header-links a:hover,
    .legal-header-links a:focus-visible {
        color: rgb(var(--legal-accent));
    }

    .legal-document h1,
    .legal-document h2 {
        color: #101813;
    }

    .legal-document h3 {
        color: #314138;
    }

    .legal-effective-date {
        color: #65746b;
    }

    .legal-document p,
    .legal-document li {
        color: #4a5a50;
    }

    .legal-document code {
        color: #176c3a;
    }

    .legal-document a {
        color: #147a3d;
        text-decoration-color: rgba(var(--legal-accent), 0.42);
    }

    .legal-document a:hover {
        color: #0b4f27;
    }

    /* Join page foundation */
    .join-page {
        background: #ffffff;
    }

    .join-active-intro {
        border-color: rgba(var(--league-accent-rgb), 0.3);
        background:
            radial-gradient(circle at 10% 0%, rgba(var(--league-accent-rgb), 0.1), transparent 44%),
            rgba(var(--league-accent-rgb), 0.045);
    }

    .join-active-approved path {
        stroke: #ffffff;
    }

    .join-active-intro h1,
    .join-panel h1,
    .join-panel h2,
    .join-result strong {
        color: #101813;
    }

    .join-active-intro p,
    .join-panel p,
    .join-result {
        color: rgba(var(--public-muted-rgb), 0.82);
    }

    /* Access card remains the strongest acquisition element in light mode. */
    .join-access-callout,
    .join-access-callout.is-waitlisted-receipt {
        border-color: rgba(var(--public-brand-accent-rgb), 0.62);
        background:
            radial-gradient(circle at 82% 14%, rgba(196, 181, 253, 0.2), transparent 35%),
            linear-gradient(135deg, rgb(var(--public-brand-accent-rgb)), #493a73 62%, #382b5e);
        color: #fbfaff;
        box-shadow:
            0 18px 42px rgba(var(--public-brand-ink-rgb), 0.18),
            0 0 0 1px rgba(var(--public-brand-accent-rgb), 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .join-access-callout h1,
    .join-access-callout.is-waitlisted-receipt h1 {
        color: #ffffff;
    }

    .join-access-callout p,
    .join-access-callout .join-access-invited,
    .join-access-callout.is-waitlisted-receipt p,
    .join-access-callout.is-waitlisted-receipt .join-access-invited {
        color: rgba(244, 241, 252, 0.86);
    }

    .join-access-callout .join-access-status,
    .join-access-callout.is-waitlisted-receipt .join-access-status {
        border-color: rgba(237, 233, 254, 0.34);
        background: rgba(var(--public-brand-ink-rgb), 0.34);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .join-access-callout .join-access-status strong,
    .join-access-callout.is-waitlisted-receipt .join-access-status strong {
        color: #fbfaff;
    }

    .join-access-callout .join-access-status-dot,
    .join-access-callout .join-access-receipt-dot {
        background: #c4b5fd;
        box-shadow:
            0 0 0 4px rgba(var(--public-brand-accent-rgb), 0.14),
            0 0 14px rgba(var(--public-brand-accent-rgb), 0.48);
    }

    .join-access-button.is-early-access,
    .join-access-button.is-early-access:hover,
    .join-access-button.is-early-access:focus-visible {
        border-color: rgba(255, 255, 255, 0.92);
        background: #ffffff;
        color: rgb(var(--public-brand-ink-rgb));
    }

    .join-access-button.is-investor,
    .join-access-button.is-investor:hover,
    .join-access-button.is-investor:focus-visible {
        border-color: rgba(237, 233, 254, 0.48);
        background: rgba(255, 255, 255, 0.08);
        color: #f7f4ff;
    }

    .join-access-callout.is-waitlisted-receipt .join-access-button.is-request-status,
    .join-access-callout.is-waitlisted-receipt .join-access-button.is-early-access.is-request-status:hover {
        border-color: rgba(237, 233, 254, 0.34);
        background: rgba(var(--public-brand-ink-rgb), 0.34);
        color: #fbfaff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .join-access-callout.is-waitlisted-receipt .join-access-button.is-investor,
    .join-access-callout.is-waitlisted-receipt .join-access-button.is-investor:hover,
    .join-access-callout.is-waitlisted-receipt .join-access-button.is-investor:focus-visible {
        border-color: rgba(237, 233, 254, 0.38);
        background: rgba(255, 255, 255, 0.08);
        color: #f7f4ff;
    }

    /* Join controls and selection surfaces */
    .join-entry-gate,
    .identity-gate-card,
    .join-preview,
    .federated-identity-card,
    .federated-identity-card.is-compact {
        border-color: rgba(var(--public-border-rgb), 0.28);
        background:
            radial-gradient(circle at 50% -20%, rgba(var(--league-accent-rgb), 0.09), transparent 52%),
            rgba(var(--public-surface-rgb), 0.94);
        box-shadow:
            0 20px 55px rgba(31, 50, 38, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    .join-entry-gate h1,
    .identity-gate-card h1,
    .join-preview-copy strong,
    .federated-identity-copy strong {
        color: #101813;
    }

    .join-entry-gate > p,
    .identity-gate-copy,
    .identity-gate-footnote,
    .join-preview-email,
    .federated-identity-copy small,
    .federated-identity-heading span,
    .federated-identity-action {
        color: rgba(var(--public-muted-rgb), 0.82);
    }

    .join-verified-identity {
        border-color: rgba(var(--league-accent-rgb), 0.38);
        background: rgba(var(--league-accent-rgb), 0.06);
    }

    .join-verified-avatar {
        background: #edf6f0;
        color: #173d27;
    }

    .join-verified-identity strong,
    .join-verified-identity small {
        color: #213329;
    }

    .join-verified-identity small {
        color: rgba(var(--public-muted-rgb), 0.78);
    }

    .join-active-change-user {
        border-color: rgba(var(--public-border-rgb), 0.36);
        background: rgba(255, 255, 255, 0.7);
        color: #415047;
    }

    .join-active-change-user:hover,
    .join-active-change-user:focus-visible {
        color: #101813;
    }

    .join-entry-path,
    .join-social-button,
    .join-payment-button,
    .join-terms-check,
    .join-preview-quickstats div {
        border-color: rgba(var(--public-border-rgb), 0.25);
        background: rgba(255, 255, 255, 0.76);
        color: rgba(var(--public-ink-rgb), 0.76);
    }

    .join-entry-path.is-primary,
    .join-social-button.is-selected,
    .join-payment-button.is-selected,
    .join-social-auth-link,
    .join-payment-button.is-priority {
        border-color: rgba(var(--league-accent-rgb), 0.48);
        background:
            linear-gradient(180deg, rgba(var(--league-accent-rgb), 0.1), rgba(var(--league-accent-rgb), 0.035)),
            rgba(255, 255, 255, 0.9);
        color: #102d1d;
    }

    .join-entry-path:hover,
    .join-entry-path:focus-visible,
    .join-social-button:hover,
    .join-social-button:focus-visible,
    .join-payment-button:hover,
    .join-payment-button:focus-visible {
        color: #101813;
    }

    .join-entry-path strong,
    .join-social-icon,
    .join-social-logo-apple,
    .join-social-logo-x,
    .join-payment-icon,
    .join-payment-logo-apple-pay {
        color: #101813;
    }

    .join-social-button:disabled,
    .join-social-button:disabled:hover,
    .join-social-button:disabled:focus-visible {
        border-color: rgba(var(--public-border-rgb), 0.16);
        background: rgba(226, 232, 228, 0.68);
    }

    .join-field > span:first-child,
    .join-control-label,
    .join-field input,
    .join-bankroll-prefix,
    .join-bankroll-preview-note,
    .join-terms-check span,
    .join-payment-copy small {
        color: rgba(var(--public-muted-rgb), 0.9);
    }

    .join-field input,
    .join-bankroll-input input {
        border-color: rgba(var(--public-border-rgb), 0.3);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 248, 0.98)),
            #ffffff;
        color: #17231b;
    }

    .join-bankroll-input input:focus {
        color: #101813;
    }

    .join-bankroll-step-button {
        border-color: rgba(var(--public-border-rgb), 0.24);
        background: #edf2ef;
        color: #26372d;
    }

    .join-bankroll-step-button:hover,
    .join-bankroll-step-button:focus-visible {
        background: rgba(var(--league-accent-rgb), 0.09);
        color: #101813;
    }

    .join-league-grid {
        column-gap: 6px;
        border-color: rgba(var(--league-accent-rgb), 0.2);
        background:
            linear-gradient(180deg, rgba(var(--league-accent-rgb), 0.04), rgba(255, 255, 255, 0.72)),
            rgba(255, 255, 255, 0.82);
    }

    .join-league-option,
    .join-league-grid.join-preview-disabled .join-league-option {
        border: 1px solid rgba(var(--public-border-rgb), 0.18);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(241, 245, 242, 0.94)),
            #ffffff;
        box-shadow:
            0 1px 2px rgba(31, 50, 38, 0.035),
            0 5px 14px rgba(31, 50, 38, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .join-league-option.is-selected {
        background:
            radial-gradient(circle at top, rgba(var(--league-accent-rgb), 0.16), transparent 64%),
            linear-gradient(180deg, rgba(var(--league-accent-rgb), 0.09), rgba(var(--league-accent-rgb), 0.025));
        box-shadow:
            inset 0 0 0 2px rgba(var(--league-accent-rgb), 0.58),
            inset 0 -32px 48px rgba(var(--league-accent-rgb), 0.035),
            0 8px 22px rgba(20, 122, 61, 0.08);
    }

    .join-league-text,
    .join-league-grid.join-preview-disabled .join-league-text,
    .join-league-option.is-selected .join-league-text,
    .join-league-selection-guide {
        color: #1d2c23;
    }

    .join-league-status {
        border-color: rgba(20, 122, 61, 0.28);
        background: #e6f2e9;
        color: #147a3d;
        box-shadow: 0 5px 14px rgba(20, 122, 61, 0.09);
    }

    .join-league-status::before,
    .join-league-status.is-live::before,
    .join-league-status.is-in-season::before {
        background: #147a3d;
        box-shadow: 0 0 0 3px rgba(20, 122, 61, 0.1);
    }

    .join-league-status.is-live,
    .join-league-status.is-in-season {
        border-color: rgba(20, 122, 61, 0.36);
        background: #e6f2e9;
        color: #147a3d;
    }

    .join-league-status.is-offseason {
        border-color: rgba(var(--public-border-rgb), 0.2);
        background: #edf1ef;
        color: rgba(var(--public-muted-rgb), 0.78);
    }

    .join-league-status.is-syncing {
        border-color: rgba(2, 132, 199, 0.22);
        background: #eaf6fb;
        color: #075d82;
    }

    .join-page .league-roi.positive {
        --league-roi-rgb: var(--public-accent-rgb);
        color: #147a3d;
    }

    .join-page .league-roi.negative {
        --league-roi-rgb: 180, 35, 24;
        color: #b42318;
    }

    .join-page .league-roi.neutral {
        --league-roi-rgb: var(--public-border-rgb);
        color: rgba(var(--public-muted-rgb), 0.82);
    }

    .join-league-roi {
        border-color: rgba(var(--league-roi-rgb), 0.3);
        background:
            linear-gradient(180deg, rgba(var(--league-roi-rgb), 0.09), rgba(var(--league-roi-rgb), 0.035)),
            #ffffff;
        box-shadow:
            0 4px 12px rgba(var(--league-roi-rgb), 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    /* Aura menu inherits dark product styles from main.css; restate it here. */
    .join-page .desk-posture-trigger {
        border-color: rgba(var(--public-border-rgb), 0.3);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 248, 0.98)),
            #ffffff;
        color: rgba(var(--public-ink-rgb), 0.82);
    }

    .join-page .desk-posture-trigger:hover,
    .join-page .desk-posture-trigger:focus-visible,
    .join-page .desk-posture-menu.is-open .desk-posture-trigger {
        color: #101813;
    }

    .join-page .desk-posture-options {
        border-color: rgba(var(--public-border-rgb), 0.34);
        background:
            radial-gradient(circle at top right, rgba(var(--league-accent-rgb), 0.08), transparent 44%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(243, 247, 244, 0.995)),
            #ffffff;
        box-shadow:
            0 20px 44px rgba(31, 50, 38, 0.16),
            inset 0 1px 0 #ffffff;
    }

    .join-page .desk-posture-option,
    .join-aura-preview .desk-posture-option:hover,
    .join-aura-preview .desk-posture-option:focus-visible {
        color: rgba(var(--public-ink-rgb), 0.72);
    }

    .join-page .desk-posture-option:hover,
    .join-page .desk-posture-option:focus-visible,
    .join-page .desk-posture-option.is-selected,
    .join-aura-preview .desk-posture-option.is-selected {
        background: rgba(var(--league-accent-rgb), 0.075);
        color: #101813;
    }

    .join-page .risk-rail-halo {
        stroke: rgba(var(--public-border-rgb), 0.32);
    }

    .join-page .risk-rail-line {
        stroke: rgba(var(--public-ink-rgb), 0.28);
    }

    .join-terms-check span {
        color: rgba(var(--public-muted-rgb), 0.92);
    }

    .join-submit-button {
        border-color: #0f6b38;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
            #147a3d;
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(20, 122, 61, 0.14);
    }

    .join-alert {
        border-color: rgba(185, 28, 28, 0.24);
        background:
            linear-gradient(180deg, rgba(254, 226, 226, 0.78), rgba(254, 242, 242, 0.92)),
            #fff7f7;
        color: #9f2020;
    }

    .join-result {
        border-color: rgba(var(--league-accent-rgb), 0.3);
        background:
            linear-gradient(180deg, rgba(var(--league-accent-rgb), 0.075), rgba(var(--league-accent-rgb), 0.025)),
            #ffffff;
    }

    .join-preview-avatar {
        background: #edf6f0;
        box-shadow:
            inset 0 0 0 4px #ffffff,
            0 12px 28px rgba(31, 50, 38, 0.14);
    }

    .join-preview-avatar::after {
        box-shadow:
            0 0 0 3px #ffffff,
            0 0 12px rgba(34, 197, 94, 0.38);
    }

    .join-preview-quickstats dd {
        color: rgba(var(--public-ink-rgb), 0.84);
    }

    @media (min-width: 1024px) {
        .join-page-visitor .join-identity-panel {
            border-color: rgba(var(--public-border-rgb), 0.24);
            background:
                radial-gradient(circle at top left, rgba(var(--league-accent-rgb), 0.06), transparent 48%),
                rgba(255, 255, 255, 0.7);
        }

        .join-page-visitor .join-identity-panel.has-federated-identity {
            border-color: rgba(var(--public-border-rgb), 0.28);
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 18px 45px rgba(31, 50, 38, 0.1);
        }
    }
}