/* Photography accompanies entry journeys; operational lists keep their own surface. */
body:has(.engagement-entry) { background: #111; }
.engagement-entry {
    --app-ink: #f5f5f5;
    --app-muted: #ddd;
    --app-surface: #151515;
    --app-green: #a9edc4;
    --app-red: #ffb4ab;
    --entry-ink: #fff;
    --entry-muted: #ddd;
    --entry-line: #717171;
    --entry-field: #151515;
    --engagement-photo: url("../images/client-exam-1440-ua0EqNh.webp");
    --engagement-photo-mobile: url("../images/client-exam-portrait-768-hizuPZT.webp");
    position: relative;
    isolation: isolate;
    color-scheme: dark;
    color: #fff;
    background: transparent;
}
.engagement-entry[data-engagement-profile="teacher"],
.engagement-entry:has(select option[value="teacher"]:checked) {
    --engagement-photo: url("../images/hero-driving-retake-1672-vtOnuAu.jpg");
    --engagement-photo-mobile: url("../images/hero-driving-retake-960-ZUkMoC4.jpg");
}
.engagement-entry:is([data-engagement-profile="partner"], [data-engagement-profile="school"], [data-engagement-profile="direction"]),
.engagement-entry:has(select option[value="partner"]:checked) {
    --engagement-photo: url("../images/professionals-network-1672-mASxiVU.webp");
    --engagement-photo-mobile: url("../images/professionals-network-960-Hlxm60N.webp");
}
.engagement-entry:has(select option[value="client"]:checked) {
    --engagement-photo: url("../images/client-exam-1440-ua0EqNh.webp");
    --engagement-photo-mobile: url("../images/client-exam-portrait-768-hizuPZT.webp");
}
.engagement-backdrop,
.engagement-entry::before {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.engagement-backdrop {
    z-index: -2;
    background: #171717 var(--engagement-photo) 70% center / cover no-repeat;
}
.engagement-entry::before {
    content: '';
    z-index: -1;
    background: linear-gradient(90deg, rgb(10 10 10 / 97%) 0%, rgb(10 10 10 / 95%) 34%, rgb(10 10 10 / 85%) 52%, rgb(10 10 10 / 22%) 83%), linear-gradient(0deg, rgb(10 10 10 / 55%), transparent 70%);
}
.engagement-entry.account-entry,
.engagement-entry.auth-shell {
    display: block;
    width: min(calc(100% - 4rem), 80rem);
    min-height: 100svh;
    margin-inline: auto;
    padding: 1.5rem 0 3rem;
}
.engagement-entry.account-entry > .brand,
.engagement-entry.auth-shell > .brand {
    display: inline-flex;
    margin: 0 0 1.75rem;
    color: #fff;
}
.engagement-entry .brand span { background: #ff3029; }
.engagement-entry.account-entry > :is(.auth-form, header, .account-entry__progress, .school-enrollment-form),
.engagement-entry .auth-login-panel {
    width: min(100%, 38rem);
    margin-inline: 0;
    background: transparent;
}
.engagement-entry.account-entry :is(h1, h2, h3, label, legend, a),
.engagement-entry.auth-shell :is(h1, h2, label, legend, a) { color: #fff; }
.engagement-entry.account-entry h1 {
    font-size: clamp(1.8rem, 3.1vw, 2.65rem);
    line-height: 1.12;
    max-width: 20ch;
    text-wrap: balance;
}
.engagement-entry :is(.auth-intro, .auth-login-intro, .auth-links, .form-help, .help-text, .account-entry__step, .account-entry__next, .eyebrow) { color: #ddd; }
.engagement-entry :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    background: #151515;
    color: #fff;
    border-color: #999;
}
.engagement-entry input::placeholder { color: #bbb; opacity: 1; }
.engagement-entry input[type="checkbox"] { accent-color: #fff; }
.engagement-entry.account-entry button[type="submit"],
.engagement-entry.auth-shell .auth-form button[type="submit"] { color: #fff; background: #d62b23; border-color: #ff635a; }
.engagement-entry.account-entry button[type="submit"]:hover,
.engagement-entry.auth-shell .auth-form button[type="submit"]:hover { background: #b7231d; }
.engagement-entry .password-visibility-toggle { color: #fff; background: transparent; border: 1px solid #777; }
.engagement-entry :is(.form-error, .auth-form ul, .school-enrollment-form ul) { color: #ffb4ab; background: transparent; }
.engagement-entry .form-success { color: #a9edc4; background: transparent; }
.engagement-entry :is(a, button, input, select, textarea):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.engagement-entry .account-entry__school-link { margin-top: 1rem; padding-block: .75rem; border-top: 1px solid #717171; }
.engagement-entry .account-entry__school-link a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .2em; }
.engagement-entry .auth-space-link,
.engagement-entry .auth-space-context,
.engagement-entry .auth-alternatives,
.engagement-entry .passkey-explanation { background: transparent; color: #ddd; }
.engagement-entry .auth-space-link { border-color: #777; }
.engagement-entry .auth-space-link :is(strong, small) { color: inherit; }
.engagement-entry .auth-space-link[aria-current="page"] { background: #292929; color: #fff; border-color: #fff; }
.engagement-entry .auth-space-monogram { background: #333; color: #fff; }
.engagement-entry :is(.auth-space-context strong, .passkey-explanation strong, .passkey-unavailable, .passkey-status) { color: #eee; }
.engagement-entry.auth-shell a.oauth-login-button--google { color: #202124; background: #fff; }
.engagement-entry.auth-shell a.oauth-login-button--google:hover { color: #202124; background: #f1f3f4; }
.engagement-entry .auth-divider { color: #ddd; }
.engagement-entry .auth-divider::before,
.engagement-entry .auth-divider::after { background: #777; }
.engagement-entry.engagement-entry--subtle::before { background: rgb(10 10 10 / 94%); }
.engagement-entry.engagement-entry--subtle { min-height: 0; }
@media (max-width: 800px) {
    .engagement-entry.account-entry,
    .engagement-entry.auth-shell { width: min(calc(100% - 2.5rem), 38rem); }
    .engagement-backdrop { background-image: var(--engagement-photo-mobile); background-position: 68% top; }
    .engagement-entry::before { background: linear-gradient(0deg, rgb(10 10 10 / 98%), rgb(10 10 10 / 95%) 65%, rgb(10 10 10 / 88%)); }
}
@media (prefers-reduced-motion: no-preference) {
    .engagement-backdrop { animation: engagement-arrive 1.1s ease-out both; }
    @keyframes engagement-arrive { from { opacity: .4; } to { opacity: 1; } }
}
@media (forced-colors: active), print {
    .engagement-backdrop, .engagement-entry::before { display: none; }
    .engagement-entry { --entry-ink: CanvasText; --entry-muted: CanvasText; --entry-field: Canvas; --entry-line: CanvasText; background: Canvas; color: CanvasText; color-scheme: light; }
    .engagement-entry * { color: CanvasText !important; background-color: Canvas !important; border-color: CanvasText !important; box-shadow: none !important; }
}