/* Match the site's Jost typography, primary buttons and logo colors. */
#accountModal.auth-entry-modal {
    --auth-navy: #090761;
    --auth-brand-navy: #263469;
    --auth-orange: #f2980f;
    --auth-muted: #626b7c;
    --auth-border: #e0e3eb;
    font-family: var(--bs-body-font-family);
}
#accountModal.auth-entry-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 460px;
    height: auto;
    margin: 1rem 1rem 1rem auto;
}
#accountModal.auth-entry-modal .modal-content {
    padding: 2rem;
    border: 0;
    border-top: 4px solid var(--auth-orange);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(9, 7, 97, .14);
}
#authEntry [hidden] { display: none !important; }
#authEntry .modal-header {
    gap: 1rem;
    margin: 0 0 1.75rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--auth-border);
}
#authEntry .modal-body { padding: 0; }
#authEntry .auth-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--auth-brand-navy);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}
#authEntry .auth-brand img { flex-shrink: 0; object-fit: contain; }
#authEntry .close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--auth-border);
    border-radius: 4px;
    background: #fff;
    color: var(--auth-navy);
    font-size: 1.75rem;
    line-height: 1;
}
#authEntry .close:hover { background: #fff7ea; border-color: var(--auth-orange); }
#authEntry .modal-title {
    margin: 0;
    color: var(--auth-navy);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}
#authEntry .modal-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 1rem;
    background: var(--auth-orange);
}
#authEntry .auth-intro { color: var(--auth-muted); line-height: 1.6; margin: 1rem 0 1.5rem; }
#authEntry .auth-role-options { display: grid; gap: .75rem; }
#authEntry .auth-role-option {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 80px;
    padding: 1rem;
    border: 1px solid var(--auth-border);
    border-radius: 4px;
    background: #fff;
    color: var(--auth-navy);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
#authEntry .auth-role-option:hover {
    border-color: var(--auth-navy);
    background: var(--auth-navy);
    color: #fff;
}
#authEntry .auth-role-option:focus-visible,
#authEntry .auth-back:focus-visible,
#authEntry .close:focus-visible,
#authEntry .btn:focus-visible {
    outline: 3px solid var(--auth-orange);
    outline-offset: 3px;
}
#authEntry .auth-role-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: #fff3df;
    color: var(--auth-brand-navy);
    font-size: 1.15rem;
}
#authEntry .auth-role-arrow { margin-left: auto; font-size: 1.7rem; line-height: 1; }
#authEntry .auth-role-option:hover .auth-role-arrow { color: var(--auth-orange); }
#authEntry .auth-back {
    display: inline-block;
    min-height: 44px;
    margin: 1rem 0 0;
    padding: .5rem 0;
    border: 0;
    background: transparent;
    color: var(--auth-brand-navy);
    font-size: .9375rem;
    font-weight: 500;
    text-align: left;
}
#authEntry .auth-back:hover { color: var(--auth-navy); text-decoration: underline; text-underline-offset: 4px; }
#authEntry .auth-back + .auth-intro { margin-top: .5rem; }
#authEntry label { margin-bottom: .5rem; color: var(--auth-brand-navy); font-weight: 500; }
#authEntry .form-control {
    min-height: 52px;
    padding: .75rem 1rem;
    border-color: var(--auth-border);
    border-radius: 4px;
    background-color: #fff;
    color: var(--auth-navy);
    font-size: 1rem;
}
#authEntry .form-control:focus {
    border-color: var(--auth-orange);
    box-shadow: 0 0 0 3px rgba(242, 152, 15, .16);
}
#authEntry .form-control.is-invalid { border-color: #b42318; }
#authEntry .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
#authEntry .form-text { display: block; margin-top: .5rem; color: var(--auth-muted); line-height: 1.5; }
#authEntry .btn { min-height: 44px; border-radius: 4px; font-weight: 500; white-space: normal; }
#authEntry .btn-primary { background: var(--auth-navy); border-color: var(--auth-navy); box-shadow: none; }
#authEntry .btn-primary:hover { background: var(--auth-brand-navy); border-color: var(--auth-brand-navy); }
#authEntry .btn-outline-primary { color: var(--auth-navy); border-color: var(--auth-navy); }
#authEntry .btn-outline-primary:hover { background: var(--auth-navy); color: #fff; }
#authEntry .btn-lg { padding: .875rem 1.25rem; font-size: 1.0625rem; }
#authEntry .alert { margin-top: 1.25rem; border-radius: 4px; }
#authEntry #authParentCode { text-transform: uppercase; letter-spacing: .15em; }
#authEntry [data-auth-panel="signup"] .auth-back { margin-bottom: 1rem; }

@media (max-width: 575.98px) {
    #accountModal.auth-entry-modal .modal-dialog { width: calc(100% - 1.5rem); margin: .75rem .75rem .75rem auto; }
    #accountModal.auth-entry-modal .modal-content { padding: 1.5rem 1.25rem; }
    #authEntry .modal-header { margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
    #authEntry .modal-title { font-size: 1.75rem; }
    #authEntry .auth-role-option { padding: .875rem .75rem; gap: .75rem; }
}
@media (max-width: 359.98px) {
    #accountModal.auth-entry-modal .modal-content { padding: 1.25rem 1rem; }
    #authEntry .auth-brand { font-size: 1.125rem; gap: .5rem; }
    #authEntry .auth-role-option { font-size: .9375rem; gap: .625rem; }
    #authEntry .auth-role-icon { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    #authEntry .auth-role-option { transition: none; }
}
