/* Finish public and account-page presentation without affecting role portals
   or the dedicated registration/grading print templates. */
body.tems-public-theme {
    --tems-public-dark-text: #cbd5e1;
    --tems-public-dark-muted: #94a3b8;
    --tems-public-dark-border: #334155;
}

body.tems-auth-theme {
    --tems-auth-panel-muted: #cbd5e1;
}

/* Account pages follow the public preference, without their own switch. */
@media screen {
    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme :is(input,select,textarea) {
        background: var(--tems-surface-subtle);
        color: var(--tems-color-text);
        border-color: var(--tems-border-strong);
        accent-color: var(--tems-link);
    }

    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme :is(input,textarea)::placeholder {
        color: var(--tems-color-muted);
        opacity: 1;
    }

    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme :is(.auth-brand,.eyebrow,.policy-eyebrow,.back-link,.extra-links a,.login-link a,.belt-info-icon,.password-wrapper .toggle-password) {
        color: var(--tems-link);
    }

    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme :is(.required-note span,.required-mark,.message.error,.waiver-error) {
        color: var(--tems-danger-text);
    }

    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme :is(a,button,input,select,textarea):focus-visible {
        outline: 3px solid var(--tems-link);
        outline-offset: 3px;
    }

    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme :is(input,select,textarea):focus {
        border-color: var(--tems-link);
        box-shadow: var(--tems-focus-ring);
    }

    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme .password-wrapper .toggle-password:focus-visible {
        outline-offset: -3px;
    }

    html[data-tems-portal="public"][data-tems-theme="dark"] body.tems-auth-theme .waiver-modal {
        background: var(--tems-dialog-backdrop);
    }
}

@media screen {
    body.tems-auth-theme {
        background: linear-gradient(180deg, var(--tems-surface), var(--tems-background) 55%, var(--tems-surface-blue));
        color: var(--tems-color-text);
    }

    body.tems-auth-theme :is(.login-box,.register-container,.container,.waiver-dialog) {
        border-radius: var(--tems-radius-lg);
        background: var(--tems-surface);
        box-shadow: var(--tems-shadow-md);
    }

    body.tems-auth-theme .login-box {
        border: 1px solid var(--tems-border);
        border-top: 5px solid var(--tems-color-red);
    }

    body.tems-auth-theme .register-container {
        border: 1px solid var(--tems-border);
    }

    body.tems-auth-theme .left-panel {
        background: var(--tems-sidebar-gradient);
        color: var(--tems-color-on-brand);
        border-top: 5px solid var(--tems-color-red);
    }

    body.tems-auth-theme :is(.left-panel,.right-panel,.input-group,.policy-header) {
        min-width: 0;
    }

    body.tems-auth-theme :is(h1,h2,h3,.field-help,.field-hint) {
        overflow-wrap: anywhere;
    }

    body.tems-auth-theme .strength-pill {
        max-width: 100%;
        white-space: normal;
    }

    body.tems-auth-theme .password-wrapper input {
        padding-right: 76px;
    }

    body.tems-auth-theme .password-wrapper .toggle-password {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        right: 4px;
        width: 64px;
        min-height: var(--tems-control-height);
        padding: 8px;
        border-radius: var(--tems-radius-sm);
        background: transparent;
        color: var(--tems-color-blue);
        font-size: 12px;
        box-shadow: none;
    }

    body.tems-auth-theme .password-wrapper .toggle-password:hover {
        background: var(--tems-surface-blue);
        color: var(--tems-color-blue-dark);
    }

    body.tems-auth-theme .password-wrapper .toggle-password:focus-visible {
        outline: 3px solid var(--tems-color-blue);
        outline-offset: -3px;
    }

    body.tems-auth-theme :is(.extra-links a,.login-link a) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--tems-control-height);
        color: var(--tems-color-blue);
    }

    body.tems-auth-theme .waiver-btn {
        min-height: var(--tems-control-height);
    }

    body.tems-public-theme .nav-links > a {
        min-height: var(--tems-control-height);
        display: inline-flex;
        align-items: center;
    }

    body.tems-public-theme .menu-toggle {
        min-height: var(--tems-control-height);
    }

    body.tems-public-theme .nav-links > a[aria-current="page"] {
        background: var(--tems-info-bg);
        color: var(--tems-color-blue);
    }

    body.tems-public-theme .nav-links > .btn-primary {
        background: var(--tems-color-blue);
        border-color: var(--tems-color-blue);
        box-shadow: var(--tems-shadow-sm);
    }

    body.tems-public-theme .nav-links > .btn-primary:hover {
        background: var(--tems-color-blue-dark);
        border-color: var(--tems-color-blue-dark);
    }

    body.tems-public-theme .hero {
        background: linear-gradient(180deg, var(--tems-surface), var(--tems-background) 55%, var(--tems-surface-blue));
    }

    body.tems-public-theme :is(.cta-box .btn.light-outline,.visitor-note .btn.btn-outline) {
        --tems-button-bg: transparent;
        --tems-button-border: var(--tems-public-dark-muted);
        --tems-button-text: var(--tems-color-on-brand);
        background: var(--tems-button-bg);
        border-color: var(--tems-button-border);
        color: var(--tems-button-text);
    }

    body.tems-public-theme :is(.cta-box .btn.light-outline,.visitor-note .btn.btn-outline):hover {
        background: var(--tems-surface);
        border-color: var(--tems-surface);
        color: var(--tems-color-heading);
    }
}