/* ------------------------------------------------------------------------- */
/* accounts/auth_overlay.css — the marketing hash-route auth OVERLAY (#549).   */
/*                                                                             */
/* On live, the header "Join for Free" / "Log in" CTAs open #/join and         */
/* #/login/ as a MODAL laid over the current marketing page (dimmed backdrop,  */
/* X closes with no navigation), instead of leaving for a standalone page.     */
/* This reproduces that overlay. Every rule is scoped under `.auth-overlay` so */
/* loading it on marketing pages CANNOT leak into the webpack-bundle chrome;   */
/* the modal-paper + role-card look mirrors accounts/auth_modal.css (the       */
/* standalone /auth/ pages), so the two entry points stay visually identical.  */
/* ------------------------------------------------------------------------- */

/* Fixed full-viewport dimmed backdrop that centers the dialog. Hidden until   */
/* the hash router shows it (the [hidden] attribute wins via display:none).     */
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: rgba(20, 12, 48, 0.72);   /* dimmed indigo, matches live overlay */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.auth-overlay[hidden] { display: none; }

/* Only one step (join / login) is visible at a time. The `.single` variant sets
   display:block below at equal specificity, so [hidden] is qualified with
   `.single` here to out-specify it and reliably win regardless of source order. */
.auth-overlay .auth-modal.single[hidden],
.auth-overlay .auth-modal[hidden] { display: none; }

/* ---- the MUI "paper" dialog (mirror of auth_modal.css .auth-modal) -------- */
.auth-overlay .auth-modal {
    position: relative;
    width: 100%;
    max-width: 660px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14);
    overflow: hidden;
    box-sizing: border-box;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

/* single-panel role chooser: purple signup gradient / blue login. */
.auth-overlay .auth-modal.single {
    display: block;
    padding: 46px 40px 40px;
    text-align: center;
    background: #2f9be6;
}
.auth-overlay .auth-modal.single.signup {
    background: linear-gradient(120deg, #4d8ef0 0%, #7d57d4 100%);
}

/* close "X" — dark circle, top-right; JS intercepts it to close w/o nav. */
.auth-overlay .auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #5a5a5a;
    color: #fff;
    border: none;
    font-size: 20px;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .auth-overlay .auth-close:hover { background: #6e6e6e; }
}

.auth-overlay .role-title {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    margin: 6px 0 34px;
}

.auth-overlay .role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 560px;
    margin: 0 auto;
}
.auth-overlay .role-col-left,
.auth-overlay .role-col-right { display: flex; flex-direction: column; gap: 22px; }

.auth-overlay .role-card {
    background: #f6f7f8;
    border-radius: 8px;
    text-decoration: none;
    color: #23282d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: transform .12s ease, box-shadow .12s ease;
    min-height: 132px;
}
@media (hover: hover) and (pointer: fine) {
  .auth-overlay .role-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
}
.auth-overlay .role-card.student { min-height: 320px; }
.auth-overlay .role-card.student img { max-width: 220px; width: 100%; padding: 15px 0; }
.auth-overlay .role-card h2 { font-size: 24px; font-weight: 800; margin: 8px 0 0; }
.auth-overlay .role-card h3 { font-size: 17px; font-weight: 600; margin: 2px 0 0; color: #23282d; }

.auth-overlay .role-existing {
    display: inline-block;
    margin-top: 26px;
    color: #fff;
    font-size: 16px;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

/* ---- responsive: single-column cards on narrow screens ------------------- */
@media (max-width: 620px) {
    .auth-overlay .role-grid { grid-template-columns: 1fr; }
    .auth-overlay .role-card.student { min-height: 200px; }
    .auth-overlay .role-title { font-size: 24px; }
    .auth-overlay .auth-modal.single { padding: 40px 22px 30px; }
}