/* ------------------------------------------------------------------------- */
/* accounts/auth_modal.css — the CURRENT live tynker.com sign-in / sign-up     */
/* modal, reproduced as a standalone page.                                     */
/*                                                                             */
/* PORT FIDELITY (plan/CORRECTIONS-LOG.md #1 + logged-in recon doc 12): live's */
/* auth is a React/MUI two-panel dialog (role card step -> method picker ->    */
/* email/username form), NOT the older Angular signinreg modal our previous    */
/* templates mirrored. This stylesheet reproduces that MUI dialog's look:      */
/* darkened backdrop, rounded white paper, a blue/purple identity panel beside */
/* a white credential panel, SSO-forward buttons, and the orange->pink LOG IN  */
/* gradient. Structure/copy transcribed from the hydrated live DOM captures.   */
/* ------------------------------------------------------------------------- */

:root {
    --auth-blue: #2f9be6;              /* login identity panel + Microsoft */
    --auth-navy: #17275b;              /* right-panel titles */
    --auth-red: #d94a3d;               /* Google */
    --auth-dark: #333333;              /* Apple */
    --auth-indigo: #5b47d6;            /* "…with email" */
    --auth-clever: #436cf7;            /* Clever */
    --auth-facebook: #3b5998;
    --auth-link: #1966b3;              /* footer + forgot-password links */
    --auth-field-border: #c9d2da;
    --auth-grad: linear-gradient(90deg, #f6a86b 0%, #ef6fa0 100%);
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

/* The darkened marketing backdrop the live modal floats over. */
body.auth-backdrop {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: #1c1140;   /* dimmed near-black indigo, matches live overlay */
    background-image: radial-gradient(circle at 50% 0%, #2a1a5c 0%, #140c30 70%);
}

/* ---- the MUI "paper" dialog ------------------------------------------- */
.auth-modal {
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-height: 600px;
    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;
    display: flex;
}

/* close "X" — dark circle, top-right, links home */
.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-close:hover { background: #6e6e6e; }
}

/* ---- single-panel variant (role selector) ---------------------------- */
.auth-modal.single {
    display: block;
    padding: 46px 40px 40px;
    text-align: center;
    background: var(--auth-blue);
}
.auth-modal.single.signup {
    background: linear-gradient(120deg, #4d8ef0 0%, #7d57d4 100%);
}
.auth-modal .role-title {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    margin: 6px 0 34px;
}

/* role card grid: big Student card on the left, guardians stacked right */
.role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 660px;
    margin: 0 auto;
}
.role-col-left { display: flex; flex-direction: column; gap: 22px; }
.role-col-right { display: flex; flex-direction: column; gap: 22px; }

.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) {
  .role-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
}
.role-card.student { min-height: 400px; }
.role-card.student img { max-width: 260px; width: 100%; padding: 15px 0; }
.role-card h2 { font-size: 24px; font-weight: 800; margin: 8px 0 0; }
.role-card h3 { font-size: 17px; font-weight: 600; margin: 2px 0 0; color: #23282d; }

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

/* ---- two-panel variant (method picker + credential form) ------------- */
.auth-left {
    flex: 0 0 43%;
    max-width: 43%;
    background: var(--auth-blue);
    color: #fff;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
}
.auth-left.signup {
    background: linear-gradient(150deg, #5b8ef0 0%, #7d57d4 100%);
}
.auth-left .welcome { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.auth-left .blurb { font-size: 15px; line-height: 1.5; margin: 6px 0 0; }
.auth-left .illus-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.auth-left .illus-wrap img { max-width: 100%; max-height: 340px; }
.auth-left .privacy {
    color: #fff;
    text-decoration: underline;
    font-size: 13px;
    text-align: center;
    margin-top: auto;
    padding-top: 16px;
}
.auth-left ul.perks { list-style: none; padding: 0; margin: 18px 0 0; }
.auth-left ul.perks li { position: relative; padding: 0 0 14px 30px; font-size: 15px; }
.auth-left ul.perks li::before {
    content: "\2713";
    position: absolute; left: 0; top: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,.25); color: #fff;
    font-size: 12px; line-height: 20px; text-align: center;
}
.auth-left .supports { font-size: 13px; margin-top: 18px; }
.auth-left .supports a, .auth-left .terms a { color: #fff; text-decoration: underline; }
.auth-left .terms { font-size: 12px; margin-top: 18px; line-height: 1.5; }

.auth-right {
    flex: 1;
    background: #f7fafb;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
}
.auth-right .panel-inner {
    width: 100%;
    max-width: 490px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.auth-title {
    text-align: center;
    color: var(--auth-navy);
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 22px;
}
.auth-subtitle { text-align: center; color: #444; font-size: 15px; margin: -12px 0 22px; }
.auth-title.create {
    color: var(--auth-link);
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 8px;
}
.auth-title.create .free { color: #ef6a3d; }
.auth-step { text-align: center; color: #555; font-size: 15px; margin: 0 0 22px; }

/* ---- SSO buttons ----------------------------------------------------- */
.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 12px;
}
.sso-btn .ico { display: inline-flex; align-items: center; }
.sso-btn.google { background: var(--auth-red); }
.sso-btn.apple { background: var(--auth-dark); }
.sso-btn.microsoft { background: var(--auth-blue); }
.sso-btn.clever { background: var(--auth-clever); }
.sso-btn.smartpass { background: #2f6fd6; }
.sso-btn.facebook { background: var(--auth-facebook); }
.sso-btn.email { background: var(--auth-indigo); }

/* a row of half/third-width square SSO buttons */
.sso-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sso-row .sso-btn { flex: 1 1 0; min-width: 130px; margin-bottom: 0; }

.sso-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #666;
    font-size: 14px;
    margin: 16px 0;
}
.sso-divider::before, .sso-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #dfe4e8;
}
.sso-divider span { padding: 0 12px; }

/* ---- credential form ------------------------------------------------- */
.auth-field { margin-bottom: 16px; }
/* Two side-by-side name fields (First name / Last name) — mirrors the live
   signup modal's 231px MUI pair (teacher-journey capture 16). Each field takes
   an equal half of the row; stacks on narrow viewports. */
.auth-field-row.name-fields {
    display: flex;
    gap: 16px;
}
.auth-field-row.name-fields .auth-field {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 480px) {
    .auth-field-row.name-fields { flex-direction: column; gap: 0; }
}
.auth-field > label.title,
.auth-field > label.field-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--auth-navy);
    margin-bottom: 6px;
}
.auth-input-wrap { position: relative; }
.auth-field input {
    width: 100%;
    /* Live (MUI) signup/login fields measure 55px tall with 16.5px vertical
       padding — Jeremy flagged ours as visibly too short (was 48px). Match the
       live field box metrics: 55px height, 15px font. box-sizing:border-box is
       set globally so the fixed height already accounts for the 14px inline
       padding that keeps the caret off the left edge. */
    height: 55px;
    padding: 0 14px;
    border: 1px solid var(--auth-field-border);
    border-radius: 4px;
    font-size: 15px;
    background: #fff;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--auth-blue);
  box-shadow: 0 0 0 3px rgba(47, 155, 230, 0.35);
}

/* Red border only after the field has been touched — :user-invalid waits for
   the first blur/interaction where :invalid would fire on load. */
.auth-field input:user-invalid {
  border-color: #c0392b;
}
.auth-field input:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.25);
}
.pw-show {
    position: absolute;
    right: 1px; top: 1px; bottom: 1px;
    width: 62px;
    border-left: 1px solid var(--auth-field-border);
    background: #fff;
    color: #8a97a3;
    font-size: 12px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 0 4px 4px 0;
}
.auth-error { color: #c0392b; font-size: 13px; margin: 4px 0 0; }
.auth-error-top { color: #c0392b; font-size: 14px; text-align: center; margin: 0 0 14px; }

.forgot-link { display: inline-block; color: var(--auth-link); font-size: 14px; text-decoration: none; margin-top: 2px; }
@media (hover: hover) and (pointer: fine) {
  .forgot-link:hover { text-decoration: underline; }
}

.auth-submit {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 5px;
    background: var(--auth-grad);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    margin-top: 20px;
}
.auth-submit.plain { background: #7fb0e8; }

/* ---- footer link row ------------------------------------------------- */
.auth-foot {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 22px;
}
.auth-foot.single { justify-content: center; }
.auth-foot a, .auth-foot button {
    color: var(--auth-link);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: none; border: none; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .auth-foot a:hover { text-decoration: underline; }
}

/* back link (top-left of two-panel signup) */
.auth-back {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}
.auth-back::before { content: "\2039  "; }

/* ---- SmartPass scan-to-login (live SmartpassSignIn.jsx) ----------------- */
.auth-left .privacy-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
}
.auth-left .privacy-row .privacy { margin-top: 0; padding-top: 0; text-align: left; }
.smartpass-error {
    color: #ff0000;
    font-weight: bold;
    text-align: center;
    margin: 0 0 20px;
}
.smartpass-video {
    border: 1px solid lightgrey;
    background-color: #fff;
    background-image: url("smartpass-placeholder.ed15e62123ab.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
}
.smartpass-video video { display: block; width: 100%; }
.smartpass-btn {
    display: inline-block;
    margin: 0 auto 20px;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    background: #ff8d1a;
    color: #fefefe;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.smartpass-steps {
    margin: 0;
    padding-left: 32px;
    color: #3a3f45;
    font-size: 15px;
    line-height: 1.6;
}

/* ---- simple status pages (reset done/confirm/complete, verify, lockout,  */
/* consent) reuse the legacy .signinreg .box markup — render it presentably  */
/* inside a centered white panel on the new modal. --------------------- */
.auth-simple {
    flex: 1;
    padding: 48px 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-simple .signinreg { width: 100%; max-width: 460px; position: relative; }
.auth-simple .box { text-align: center; }
.auth-simple .title,
.auth-simple h3.title {
    color: var(--auth-navy);
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 18px;
    text-align: center;
}
.auth-simple .center { text-align: center; }
.auth-simple p { color: #3a3f45; font-size: 15px; line-height: 1.55; }
.auth-simple .notice { color: var(--auth-link); font-weight: 600; }
.auth-simple .field { text-align: left; margin: 16px 0; }
.auth-simple .field label { display: block; font-size: 14px; font-weight: 700; color: var(--auth-navy); margin-bottom: 6px; }
.auth-simple .field input {
    width: 100%; height: 48px; padding: 0 14px;
    border: 1px solid var(--auth-field-border); border-radius: 4px; font-size: 15px;
}
.auth-simple .field .message.error { color: #c0392b; font-weight: 400; font-size: 13px; }
.auth-simple .actions { margin-top: 18px; }
.auth-simple .actions-two { display: flex; gap: 12px; }
.auth-simple .actions-two .column { flex: 1; }
.auth-simple .button {
    display: inline-block; width: 100%; height: 50px; line-height: 50px;
    border: none; border-radius: 5px; background: var(--auth-grad);
    color: #fff; font-size: 15px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; text-align: center; text-decoration: none; cursor: pointer;
}
.auth-simple .button-secondary { background: #7fb0e8; }
.auth-simple .link { color: var(--auth-link); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .auth-simple .link:hover { text-decoration: underline; }
}
.auth-simple .box-highlight { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3e8ec; }
.auth-simple .button-alternate {
    display: inline-block; margin-top: 10px; padding: 12px 20px;
    border: 1px solid var(--auth-link); border-radius: 5px;
    color: var(--auth-link); font-weight: 700; text-decoration: none;
}
.auth-simple .field-label-hidden label:not(.message) { position: absolute; left: -9999px; }
.auth-simple .link-password { display: block; text-align: right; font-size: 13px; margin-top: 4px; }
.auth-simple .button-back {
    position: absolute; top: -8px; left: 0; width: 22px; height: 22px;
    display: inline-block; cursor: pointer;
}
.auth-simple .button-back::before { content: "\2039"; font-size: 26px; color: var(--auth-navy); }
.auth-simple .clearfix { clear: both; }

/* ---- responsive: stack the panels on narrow screens ------------------ */
@media (max-width: 760px) {
    .auth-modal { flex-direction: column; min-height: 0; }
    .auth-left, .auth-right { flex: 1 1 auto; max-width: 100%; }
    .auth-left .illus-wrap { display: none; }
    .role-grid { grid-template-columns: 1fr; }
    .role-card.student { min-height: 220px; }
    .auth-title.create { font-size: 26px; }
}

/* --- Accessibility ------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 3px solid #6c4aee;
  outline-offset: 2px;
}

/* Skip-link target: suppress the ring on the programmatically focused main. */
main[tabindex="-1"]:focus {
  outline: none;
}