/* ------------------------------------------------------------------------- */
/* accounts/auth_page.css — the NEW unified Tynker auth experience.            */
/*                                                                            */
/* Replaces the ported legacy sign-in/sign-up MODAL chrome (auth_modal.css)   */
/* with a clean, standalone full page: a light gradient canvas, a compact     */
/* white card, one credential form, and every sign-in option on a single      */
/* screen (no role picker — the polymorphic backend already resolves the      */
/* account type from the identifier). Sign-up role choice lives on the        */
/* get-started page, per the redesigned flow.                                 */
/* ------------------------------------------------------------------------- */

:root {
    --ap-navy: #17275b;              /* headings */
    --ap-text: #3c4654;
    --ap-muted: #6b7688;
    --ap-line: #dce3ee;              /* borders */
    --ap-line-strong: #c3cede;
    --ap-bg-a: #eef4fd;              /* page gradient stops */
    --ap-bg-b: #f7f2fd;
    --ap-brand: #2f9be6;             /* Tynker blue */
    --ap-brand-dark: #1a7fc4;
    --ap-indigo: #5b47d6;
    /* Deepened so white CTA text meets WCAG AA contrast (~5.2:1 / ~6.3:1). */
    --ap-cta: linear-gradient(90deg, #c2410c 0%, #be123c 100%);
    --ap-cta-hover: linear-gradient(90deg, #9a3412 0%, #9f1239 100%);
    --ap-error: #c0392b;
    --ap-error-bg: #fdf1ef;
    --ap-ok: #1a7f37;
    --ap-radius: 14px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* WCAG 2.4.7: visible focus indicator on every interactive element */
a:focus-visible, button:focus-visible, .sso-tile:focus-visible,
.role-card-v2:focus-visible, .generate-username:focus-visible {
    outline: 2px solid var(--ap-brand-dark);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Skip link: visible only on keyboard focus (WCAG 2.4.1) */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 60;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--ap-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
    .auth-page *, .auth-page *::before, .auth-page *::after {
        transition: none !important;
    }
    .sso-tile:hover, .role-card-v2:hover, .auth-submit:active { transform: none; }
}

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

body.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--ap-bg-a) 0%, var(--ap-bg-b) 55%, #fdeef4 100%);
}

/* ---- top bar: logo left, contextual switch link right ------------------- */
.auth-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px clamp(18px, 5vw, 48px);
}
.auth-top__logo { display: inline-flex; align-items: center; }
.auth-top__logo img { height: 30px; width: auto; display: block; }
.auth-top__switch { margin: 0; font-size: 14px; color: var(--ap-muted); }
.auth-top__switch a {
    color: var(--ap-brand-dark);
    font-weight: 700;
    text-decoration: none;
    margin-left: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--ap-line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, .65);
}
.auth-top__switch a:hover { border-color: var(--ap-brand); color: var(--ap-brand-dark); }

/* ---- centered card ----------------------------------------------------- */
.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px 40px;
}
.auth-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 45px -18px rgba(23, 39, 91, .28), 0 4px 14px rgba(23, 39, 91, .06);
    padding: clamp(26px, 4vw, 40px);
}
.auth-card--wide { max-width: 760px; }

.auth-card h1 {
    margin: 0 0 6px;
    color: var(--ap-navy);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.2px;
    text-align: center;
}
.auth-sub {
    margin: 0 0 22px;
    text-align: center;
    color: var(--ap-muted);
    font-size: 14.5px;
    line-height: 1.45;
}

/* ---- errors / banners --------------------------------------------------- */
.auth-banner {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--ap-error-bg);
    border: 1px solid #f2c7c0;
    color: var(--ap-error);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
}
.auth-error { color: var(--ap-error); font-size: 12.5px; margin: 5px 0 0; }
.auth-error-top:empty { display: none; }
p.auth-error-top {
    margin: 0 0 12px;
    color: var(--ap-error);
    font-size: 13.5px;
    text-align: center;
}

/* ---- fields -------------------------------------------------------------- */
.auth-field { margin-bottom: 15px; }
.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ap-navy);
}
.field-hint {
    font-weight: 500;
    font-size: 12px;
    color: var(--ap-muted);
}
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="number"],
.auth-field input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--ap-text);
    background: #fbfcfe;
    border: 1.5px solid var(--ap-line);
    border-radius: 10px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.auth-field input::placeholder { color: #6b7688; opacity: 1; }
.auth-field input:focus {
    border-color: var(--ap-brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(47, 155, 230, .16);
}
.auth-field input[aria-invalid="true"] { border-color: var(--ap-error); }

.auth-input-wrap { position: relative; }
.auth-field .auth-input-wrap input { padding-right: 60px; }
.pw-show {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: var(--ap-brand-dark);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 6px;
}
.pw-show:hover { background: rgba(47, 155, 230, .1); }

.auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.forgot-link {
    display: inline-block;
    margin: -4px 0 14px;
    font-size: 13px;
    color: var(--ap-brand-dark);
    text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; }

/* ---- primary submit ------------------------------------------------------ */
.auth-submit {
    display: block;
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--ap-cta);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    transition: filter .12s ease, transform .08s ease;
}
.auth-submit:hover { background: var(--ap-cta-hover); }
.auth-submit:active { transform: translateY(1px); }

/* ---- divider ------------------------------------------------------------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: var(--ap-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ap-line);
}

/* ---- SSO grid ------------------------------------------------------------- */
.sso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.sso-grid--two { grid-template-columns: repeat(2, 1fr); }
.sso-grid--three { grid-template-columns: repeat(3, 1fr); }
.sso-tile {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 8px 10px;
    border: 1.5px solid var(--ap-line);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: var(--ap-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.sso-tile:hover {
    border-color: var(--ap-line-strong);
    box-shadow: 0 4px 12px rgba(23, 39, 91, .09);
    transform: translateY(-1px);
}
.sso-tile[aria-disabled="true"] { pointer-events: none; }
.sso-tile .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.sso-tile .ico svg { display: block; }

/* ---- alternate sign-in links ---------------------------------------------- */
.auth-alt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.auth-alt__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 10px;
    border: 1.5px dashed var(--ap-line-strong);
    color: var(--ap-indigo);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: border-color .12s ease, background .12s ease;
}
.auth-alt__link:hover { border-color: var(--ap-indigo); background: #f6f3ff; }
.auth-alt__link svg { flex: none; }

/* ---- de-emphasized SSO row ------------------------------------------------ */
/* Lowest-priority providers (Facebook / Apple / Microsoft): quiet text-level
   links under the main options instead of full tiles. */
.sso-mini {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 14px;
    margin-top: 16px;
}
.sso-mini__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ap-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.sso-mini__link:hover { color: var(--ap-text); text-decoration: underline; }
.sso-mini__link .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
}
.sso-mini__link .ico svg { width: 15px; height: 15px; display: block; }
.sso-mini__link[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.sso-mini__sep { color: var(--ap-line-strong); }

/* ---- card footer links ----------------------------------------------------- */
.auth-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ap-line);
    font-size: 13.5px;
}
.auth-foot a { color: var(--ap-brand-dark); text-decoration: none; font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.auth-foot .sep { color: var(--ap-line-strong); }

.auth-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ap-muted);
    text-align: center;
    line-height: 1.5;
}
.auth-note a { color: var(--ap-brand-dark); text-decoration: none; }
.auth-note a:hover { text-decoration: underline; }

/* ---- role chooser (sign-up hub) -------------------------------------------- */
.role-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 22px;
}
.role-cards--two { grid-template-columns: repeat(2, 1fr); }
.role-card-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 14px 18px;
    border: 1.5px solid var(--ap-line);
    border-radius: 14px;
    background: #fbfcfe;
    text-decoration: none;
    color: var(--ap-text);
    transition: border-color .12s ease, box-shadow .12s ease, transform .1s ease;
}
.role-card-v2:hover {
    border-color: var(--ap-brand);
    box-shadow: 0 8px 20px rgba(47, 155, 230, .16);
    transform: translateY(-2px);
}
.role-card-v2 img { width: 92px; height: 92px; object-fit: contain; }
.role-card-v2 .role-body { display: block; }
.role-card-v2 .role-name {
    display: block;
    margin-top: 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ap-navy);
}
.role-card-v2 .role-desc {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--ap-muted);
    line-height: 1.4;
}
.role-card-v2 .role-cta {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ap-brand-dark);
}

/* ---- legal strip under the card -------------------------------------------- */
.auth-legal {
    margin-top: 18px;
    font-size: 12px;
    color: var(--ap-muted);
    text-align: center;
}
.auth-legal a { color: var(--ap-muted); margin: 0 8px; }
.auth-legal a:hover { color: var(--ap-text); }

/* ---- generic status page (password reset, consent, verify, lockout) --------- */
/* The migrated pages keep their legacy .signinreg/.box/.title/.actions markup; */
/* these rules map that markup onto the new visual language.                     */
.signinreg .title {
    margin: 0 0 12px;
    color: var(--ap-navy);
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}
.signinreg .center { text-align: center; font-size: 14px; line-height: 1.5; }
.signinreg .notice { color: var(--ap-muted); }
.signinreg .field { margin: 14px 0; }
.signinreg .field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ap-navy); }
.signinreg .field input {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    background: #fbfcfe;
    border: 1.5px solid var(--ap-line);
    border-radius: 10px;
    outline: none;
}
.signinreg .field input:focus { border-color: var(--ap-brand); box-shadow: 0 0 0 3px rgba(47,155,230,.16); background:#fff; }
.signinreg .message.error { color: var(--ap-error); font-size: 12.5px; display: block; margin-bottom: 4px; }
.signinreg .error-message { color: var(--ap-error); font-size: 13.5px; text-align: center; margin: 0 0 12px; }
.signinreg .actions { margin-top: 18px; }
.signinreg .actions .button,
.signinreg .button.submit {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--ap-cta);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.signinreg .actions .button:hover { background: var(--ap-cta-hover); }
.signinreg .actions .button-secondary,
.signinreg .button-alternate {
    background: #fff;
    color: var(--ap-brand-dark);
    border: 1.5px solid var(--ap-line-strong);
}
.signinreg .actions .button-secondary:hover,
.signinreg .button-alternate:hover { background: #f2f7fd; }
.signinreg .button-alternate {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 6px;
}
.signinreg .box-highlight { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ap-line); }
.signinreg .link-password { display: inline-block; margin-top: 6px; font-size: 12.5px; }
.signinreg .actions-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.signinreg .actions-two .column .button { width: 100%; }
.signinreg .link { color: var(--ap-brand-dark); }
.button-back { display: none; }  /* modal-era back glyph: nav lives in the page header now */
.clearfix::after { content: ""; display: block; clear: both; }

/* ---- username helpers on the student form ----------------------------------- */
.text-field { display: flex; gap: 8px; align-items: center; }
.text-field input { flex: 1; }
.generate-username {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--ap-line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.generate-username:hover { border-color: var(--ap-brand); background: #f2f7fd; }
.username-availability { margin: 5px 0 0; font-size: 12.5px; min-height: 1em; }

/* ---- smartpass page ---------------------------------------------------------- */
.smartpass-video { border-radius: 12px; overflow: hidden; background: #10131c; }
.smartpass-video video { width: 100%; display: block; }
.smartpass-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 16px;
    border: 1.5px solid var(--ap-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--ap-brand-dark);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.smartpass-error { color: var(--ap-error); font-size: 13px; text-align: center; }
.smartpass-steps { margin: 14px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ap-muted); line-height: 1.6; }
.auth-illus { text-align: center; margin-bottom: 14px; }
.auth-illus img { max-width: 180px; max-height: 130px; }

/* ---- small screens ----------------------------------------------------------- */
@media (max-width: 640px) {
    .auth-card, .auth-card--wide { max-width: 100%; border-radius: 16px; }
    .role-cards { grid-template-columns: 1fr; }
    .role-card-v2 { flex-direction: row; text-align: left; align-items: center; gap: 14px; }
    .role-card-v2 img { width: 64px; height: 64px; }
    .sso-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-alt { grid-template-columns: 1fr; }
    .auth-top { padding: 16px 18px; }
}