/* ============================================================
   Trackara Education sign-in and entry pages, v2 (Oct 2026)
   login.html, forgot-password.html, instructor/login.html, student/login.html, student/join.html

   Same family as the shop portal sign-in and the new Pro signup
   (trackara-pro-website/public_html/signup/auth-shell.css): background clips under a
   flat scrim, one light card, the pitch on the dark side. Flat fills only: no gradients, no glows.

   Loaded AFTER each page's own <style> (which still carries every state rule the page's
   JavaScript relies on: .active, .show, .hidden, .visible, .loading ...). This file only
   restyles; it never sets `display` or `opacity` on an element the scripts toggle.
   Scoped to body.edu-auth, which the build adds.

   Source: tools/site-v2/edu-src/edu-auth.css. Edit here, then re-run build_edu.py.
   ============================================================ */

.edu-auth {
    --ink: #0a0a0a;
    --teal: #17afa5; --teal-d: #0d8b82; --teal-soft: rgba(23, 175, 165, 0.10);
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    margin: 0;
    background: #0a0a0a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Shell: full-bleed clips under a flat scrim ─────────────── */
.edu-auth .auth-container {
    position: relative; overflow: hidden; min-height: 100vh;
    background: #0a0a0a;
    display: flex; flex-direction: row; align-items: stretch; justify-content: space-between;
    gap: 56px; padding: 48px 72px; box-sizing: border-box;
}
.edu-auth .auth-media { position: absolute; inset: 0; z-index: 0; }
.edu-auth .auth-poster, .edu-auth .auth-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.edu-auth .auth-video { opacity: 0; transition: opacity 1.5s ease-in-out; }
.edu-auth .auth-video.is-on { opacity: 1; }
.edu-auth .auth-scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.5); }

.edu-auth .auth-left, .edu-auth .auth-right { position: relative; z-index: 1; background: none; padding: 0; min-height: 0; box-sizing: border-box; }
.edu-auth .auth-right::before, .edu-auth .auth-right::after { content: none; display: none; }

/* Pitch side (the pages' existing .auth-promo copy) */
.edu-auth .auth-right { order: 1; flex: 1 1 auto; max-width: 720px; display: flex; color: #fff; align-items: stretch; justify-content: flex-start; }
.edu-auth .auth-promo { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; width: 100%; max-width: none; padding: 0; text-align: left; color: #fff; }
.edu-auth .auth-promo-brand {
    display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
    font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
    color: #fff; background: none; padding: 0; border: 0; text-transform: none; opacity: 1;
}
.edu-auth .auth-promo-brand i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #17afa5; color: #fff; font-size: 17px; margin: 0; }
.edu-auth .auth-promo-main { margin-top: auto; }
.edu-auth .auth-promo h2 {
    font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 52px; font-weight: 800; letter-spacing: -0.035em;
    line-height: 1.04; color: #fff; margin: 0 0 16px; text-wrap: balance; max-width: 640px;
}
.edu-auth .auth-promo p { font-size: 18px; line-height: 1.5; color: #e5e5e5; margin: 0 0 28px; max-width: 560px; opacity: 1; }
.edu-auth .promo-features { display: grid; gap: 12px; margin: 0; padding: 0; text-align: left; }
.edu-auth .promo-feature { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #f5f5f5; background: none; border: 0; padding: 0; }
.edu-auth .promo-feature i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #5FD3CA; font-size: 13px; flex: none; margin: 0; }
.edu-auth .auth-promo-footer { font-size: 13px; color: #d4d4d4; opacity: 1; margin: 0; padding: 0; border: 0; }

/* Card side */
.edu-auth .auth-left { order: 2; flex: 0 0 480px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 18px; }
.edu-auth .auth-card, .edu-auth .login-card {
    /* the portal.css dark tokens, re-scoped light inside the card */
    --bg-black: #fafafa; --bg-dark: #f4f4f5; --bg-card: #ffffff; --bg-card-hover: #f5f5f4; --bg-elevated: #f9f9f9;
    --border-dark: #e7e5e4; --border-light: #d6d3d1; --border-color: #e7e5e4;
    --text-primary: #0a0a0a; --text-secondary: #525252; --text-muted: #737373;
    --primary-color: #17afa5; --primary: #17afa5;
    position: relative; width: 100%; max-width: 480px; margin: 0; box-sizing: border-box;
    background: #fafafa; color: #0a0a0a; border: 0; border-radius: 20px;
    padding: 32px 40px 28px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.edu-auth .auth-card::before, .edu-auth .login-card::before { content: none; display: none; }

/* Card header */
.edu-auth .auth-header { text-align: left; margin: 0 0 22px; }
.edu-auth .auth-logo {
    display: inline-flex; align-items: center; gap: 6px; padding-left: 40px; min-height: 30px; margin: 0 0 22px;
    font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.03em;
    color: #0a0a0a; text-decoration: none;
    background: url('/images/v2/app-icon-60.png') left center / 30px 30px no-repeat;
}
.edu-auth .auth-logo span { color: #17afa5; }
.edu-auth .auth-logo .auth-logo-badge, .edu-auth .edu-badge-sm {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
    color: #0d8b82; background: rgba(23, 175, 165, 0.10); border: 0; padding: 3px 7px; border-radius: 6px; margin-left: 4px; vertical-align: middle;
}
.edu-auth .auth-header h1, .edu-auth .auth-title, .edu-auth .login-heading {
    font-family: 'Inter Tight', 'Inter', sans-serif !important; font-size: 28px !important; font-weight: 800 !important;
    letter-spacing: -0.04em; line-height: 1.12; color: #0a0a0a; margin: 0 0 8px !important;
}
.edu-auth .auth-header p, .edu-auth .auth-subtitle, .edu-auth .login-sub { font-size: 14px; line-height: 1.5; color: #525252; margin: 0; }
.edu-auth .auth-icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(23, 175, 165, 0.10); color: #0d8b82; border: 0; box-shadow: none; margin: 0 0 14px;
}
.edu-auth .auth-icon i { color: #0d8b82; font-size: 18px; }

/* Fields */
.edu-auth .form-group { margin-bottom: 16px; }
.edu-auth .form-label { display: block; font-size: 13px; font-weight: 500; color: #525252; margin-bottom: 6px; letter-spacing: 0; text-transform: none; }
.edu-auth .form-input {
    width: 100%; box-sizing: border-box; padding: 11px 14px; background: #f9f9f9; border: 1px solid #d6d3d1; border-radius: 9px;
    color: #0a0a0a; font-size: 14px; font-family: inherit; outline: none; box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.2s var(--ease);
}
.edu-auth .form-input:focus { border-color: #17afa5; box-shadow: 0 0 0 3px rgba(23, 175, 165, 0.10); background: #fff; }
.edu-auth .form-input::placeholder { color: #a3a3a3; }
.edu-auth .form-input:read-only { background: #f1f1f0; color: #525252; }
.edu-auth .form-input.has-toggle { padding-right: 42px; }
.edu-auth .form-input-wrapper { position: relative; }
.edu-auth .password-toggle { color: #a3a3a3; background: none; border: 0; box-shadow: none; }
.edu-auth .password-toggle:hover { color: #525252; }
.edu-auth .password-requirements, .edu-auth .password-hint, .edu-auth .join-code-hint { font-size: 12px; color: #737373; }
.edu-auth .form-extras { color: #525252; }
.edu-auth .remember-label { color: #525252; font-size: 13px; }
.edu-auth input[type="checkbox"] { accent-color: #17afa5; }
.edu-auth .forgot-link { color: #0d8b82; font-size: 13px; font-weight: 500; }
.edu-auth .auth-card a:not(.btn-primary):not(.auth-logo), .edu-auth .login-card a.link { color: #0d8b82; }
.edu-auth .auth-card .text-muted a, .edu-auth .auth-card a[style*="text-muted"] { color: #737373 !important; text-decoration: underline; text-underline-offset: 2px; }
.edu-auth .auth-card .text-secondary { color: #525252; }
.edu-auth .auth-card .text-muted { color: #737373; }

/* Buttons */
.edu-auth .auth-card .btn-primary, .edu-auth .auth-card .submit-btn {
    width: 100%; padding: 13px 20px; background: #17afa5; color: #fff; border: 0; border-radius: 10px;
    font-size: 15px; font-weight: 600; font-family: inherit; letter-spacing: 0; box-shadow: none; transform: none;
    transition: background 0.15s, transform 160ms var(--ease);
}
.edu-auth .auth-card .btn-primary:hover:not(:disabled), .edu-auth .auth-card .submit-btn:hover:not(:disabled) { background: #0d8b82; box-shadow: none; transform: none; }
.edu-auth .auth-card .btn-primary:active:not(:disabled), .edu-auth .auth-card .submit-btn:active:not(:disabled) { transform: scale(0.98); }
.edu-auth .auth-card .btn-primary:disabled, .edu-auth .auth-card .submit-btn:disabled { opacity: 0.6; }
.edu-auth .auth-card .btn-secondary {
    width: 100%; padding: 12px 16px; background: transparent; color: #525252; border: 1px solid #d6d3d1; border-radius: 10px;
    font-size: 14px; font-weight: 500; box-shadow: none;
}
.edu-auth .auth-card .btn-secondary:hover { color: #0a0a0a; border-color: #a3a3a3; background: transparent; }
.edu-auth .resend-btn { background: #fff; color: #0a0a0a; border: 1px solid #d6d3d1; border-radius: 10px; box-shadow: none; }
.edu-auth .resend-btn:hover:not(:disabled) { border-color: #a3a3a3; }

/* Messages (display is still controlled by each page's .show rules) */
.edu-auth .error-message { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px; color: #b91c1c; font-size: 13px; line-height: 1.45; }
.edu-auth .info-message { background: rgba(23, 175, 165, 0.08); border: 1px solid rgba(23, 175, 165, 0.25); border-radius: 8px; color: #0b6f68; font-size: 13px; }
.edu-auth .success-message { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 8px; color: #047857; font-size: 13px; }
.edu-auth .signed-in-badge { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); color: #047857; border-radius: 8px; }
.edu-auth .already-enrolled-notice { background: rgba(217, 119, 6, 0.08); border: 1px solid rgba(217, 119, 6, 0.25); color: #92400e; border-radius: 8px; }

/* student/login: tabs + join-code callout */
.edu-auth .auth-tabs { background: #f1f1f0; border: 1px solid #e7e5e4; border-radius: 11px; padding: 4px; gap: 4px; }
.edu-auth .auth-tab { background: transparent; color: #525252; border: 0; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: none; }
.edu-auth .auth-tab.active { background: #fff; color: #0a0a0a; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.10); }
.edu-auth .auth-tab:not(.active):hover { color: #0a0a0a; background: transparent; }
.edu-auth .join-code-callout { background: rgba(23, 175, 165, 0.08); border: 1px solid rgba(23, 175, 165, 0.25); border-radius: 12px; text-align: center; }
.edu-auth .join-code-callout:hover { border-color: #17afa5; background: rgba(23, 175, 165, 0.10); }
.edu-auth .join-code-callout a { color: #0d8b82; }
.edu-auth .join-code-callout p { color: #525252; }

/* student/login: session check overlay */
.edu-auth .auth-loading { background: #0a0a0a; }
.edu-auth .auth-loading-spinner { border-color: rgba(255, 255, 255, 0.15); border-top-color: #17afa5; }
.edu-auth .auth-loading-text { color: #d4d4d4; }

/* student/join: steps, join code, course preview, success */
.edu-auth .step-indicator { justify-content: flex-start; }
.edu-auth .step { color: #a3a3a3; }
.edu-auth .step-num { background: #fff; border: 1.5px solid #d6d3d1; color: #737373; box-shadow: none; }
.edu-auth .step.active { color: #0a0a0a; }
.edu-auth .step.active .step-num { background: #17afa5; border-color: #17afa5; color: #fff; box-shadow: none; }
.edu-auth .step.completed { color: #0d8b82; }
.edu-auth .step.completed .step-num { background: rgba(23, 175, 165, 0.10); border-color: #17afa5; color: #0d8b82; }
.edu-auth .step-connector { background: #d6d3d1; }
.edu-auth .step-connector.active { background: #17afa5; }
.edu-auth .join-code-label { color: #525252; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.edu-auth .join-code-input { background: #f9f9f9; border: 1px solid #d6d3d1; border-radius: 12px; color: #0a0a0a; box-shadow: none; }
.edu-auth .join-code-input:focus { border-color: #17afa5; box-shadow: 0 0 0 3px rgba(23, 175, 165, 0.10); background: #fff; }
.edu-auth .join-code-input::placeholder { color: #c7c7c7; }
.edu-auth .course-preview { background: #fff; border: 1px solid #e7e5e4; border-radius: 14px; box-shadow: none; }
.edu-auth .course-preview-header { background: rgba(23, 175, 165, 0.10); color: #0a0a0a; border-bottom: 1px solid rgba(23, 175, 165, 0.20); }   /* the old faint teal gradient, flattened */
.edu-auth .course-preview-header .label { color: #0d8b82; }
.edu-auth .course-preview-header .course-name { color: #0a0a0a; }
.edu-auth .course-detail:not(:last-child) { border-color: #e7e5e4; }
.edu-auth .course-detail-icon { background: rgba(23, 175, 165, 0.10); color: #0d8b82; }
.edu-auth .course-detail-text .detail-label { color: #737373; }
.edu-auth .course-detail-text .detail-value { color: #0a0a0a; }
.edu-auth .create-account-section { background: #f4f4f3; border: 1px solid #e7e5e4; border-radius: 12px; }
.edu-auth .create-account-section .section-label { color: #0a0a0a; }
.edu-auth .create-account-section .section-label i { color: #0d8b82; }
.edu-auth .success-icon { background: rgba(23, 175, 165, 0.10); border: 0; box-shadow: none; animation: none; }
.edu-auth .success-icon i { color: #0d8b82; }
.edu-auth .success-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.035em; color: #0a0a0a; }
.edu-auth .success-subtitle, .edu-auth .success-redirect, .edu-auth .success-message, .edu-auth .resend-text { color: #525252; }
.edu-auth .success-course-name { color: #0a0a0a; background: #f4f4f3; border: 1px solid #e7e5e4; }
.edu-auth .email-highlight { color: #0d8b82; }

/* forgot-password: links row */
.edu-auth .auth-links a { color: #0d8b82; font-size: 13px; font-weight: 500; }
.edu-auth .auth-links a:hover { color: #0a0a0a; }

/* login.html (role chooser, no JavaScript): its card and rows */
.edu-auth .login-logo { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; padding-left: 40px; min-height: 30px; background: url('/images/v2/app-icon-60.png') left center / 30px 30px no-repeat; }
.edu-auth .login-logo-text { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: #0a0a0a; }
.edu-auth .login-logo-text .accent { color: #17afa5; }
.edu-auth .login-sub { margin-bottom: 24px; }
.edu-auth .role-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.edu-auth .role-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #e7e5e4; border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
.edu-auth .role-card:hover { border-color: #17afa5; background: #f6fbfb; }
.edu-auth .role-card:hover .role-arrow { color: #0d8b82; transform: translateX(3px); }
.edu-auth .role-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.edu-auth .role-icon-instructor { background: rgba(23, 175, 165, 0.10); color: #0d8b82; }
.edu-auth .role-icon-student { background: rgba(37, 99, 235, 0.09); color: #2563eb; }
.edu-auth .role-text { flex: 1; min-width: 0; }
.edu-auth .role-title { font-size: 15px; font-weight: 600; color: #0a0a0a; margin-bottom: 2px; }
.edu-auth .role-desc { font-size: 13px; color: #525252; line-height: 1.45; }
.edu-auth .role-arrow, .edu-auth .join-arrow { font-size: 11px; color: #a3a3a3; flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; }
.edu-auth .divider-row { display: flex; align-items: center; gap: 10px; margin: 20px 0; }
.edu-auth .divider-line { flex: 1; height: 1px; background: #e7e5e4; }
.edu-auth .divider-label { font-size: 12.5px; color: #737373; font-weight: 600; white-space: nowrap; }
.edu-auth .join-row { display: flex; align-items: center; gap: 14px; background: #fffaf0; border: 1px solid #f3dfb4; border-radius: 12px; padding: 14px 18px; text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.edu-auth .join-row:hover { border-color: #d99a2b; }
.edu-auth .join-row:hover .join-arrow { color: #b45309; transform: translateX(3px); }
.edu-auth .join-dot { width: 8px; height: 8px; border-radius: 50%; background: #d97706; flex-shrink: 0; }
.edu-auth .join-text { flex: 1; font-size: 13.5px; color: #525252; line-height: 1.45; }
.edu-auth .join-text strong { color: #0a0a0a; font-weight: 600; }
.edu-auth .login-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e7e5e4; }
.edu-auth .login-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #525252; text-decoration: none; }
.edu-auth .login-back:hover { color: #0a0a0a; }
.edu-auth .login-back i { font-size: 10px; }
.edu-auth .login-footer-links { display: flex; gap: 14px; }
.edu-auth .login-footer-links a { font-size: 13px; color: #737373; text-decoration: none; }
.edu-auth .login-footer-links a:hover { color: #0a0a0a; }
.edu-auth .trust-pills { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.edu-auth .trust-pill { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: #e5e5e5; }
.edu-auth .trust-pill i { font-size: 11px; color: #5FD3CA; }

/* forgot-password: no pitch on this page, the card sits centred over the clips */
.edu-auth.edu-auth-solo .auth-container { justify-content: center; align-items: center; }
.edu-auth.edu-auth-solo .auth-card { flex: none; }

/* ── Motion: the card rises in; all of it opts out under reduced motion ── */
@keyframes edu-card-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes edu-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: no-preference) {
    .edu-auth .auth-left > .auth-card, .edu-auth .auth-left > .login-card, .edu-auth.edu-auth-solo .auth-card { animation: edu-card-in 560ms var(--ease) 80ms both; }
    .edu-auth .auth-promo-main > * { animation: edu-rise 520ms var(--ease) both; }
    .edu-auth .auth-promo-main > :nth-child(2) { animation-delay: 60ms; }
    .edu-auth .auth-promo-main > :nth-child(3) { animation-delay: 120ms; }
}

/* ── Responsive: the signup shell's breakpoints ── */
@media (max-width: 1024px) {
    .edu-auth .auth-container { flex-direction: column; justify-content: center; align-items: center; padding: 40px 24px; gap: 28px; }
    .edu-auth .auth-right { display: flex; order: 1; flex: none; width: 100%; max-width: 560px; }
    .edu-auth .auth-promo { align-items: center; text-align: center; gap: 18px; }
    .edu-auth .auth-promo-brand { align-self: center; }
    .edu-auth .auth-promo h2 { font-size: 38px; margin-left: auto; margin-right: auto; }
    .edu-auth .auth-promo p { margin-left: auto; margin-right: auto; margin-bottom: 0; }
    .edu-auth .promo-features, .edu-auth .auth-promo-footer { display: none; }
    .edu-auth .auth-left { order: 2; flex: none; width: 100%; max-width: 480px; }
}
@media (max-width: 600px) {
    .edu-auth .auth-container { padding: 24px 16px; gap: 20px; justify-content: flex-start; }
    .edu-auth .auth-right { display: none; }
    .edu-auth .auth-card, .edu-auth .login-card { padding: 26px 22px 22px; border-radius: 18px; }
    .edu-auth .auth-header h1, .edu-auth .auth-title, .edu-auth .login-heading { font-size: 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .edu-auth .auth-video { transition: none; }
}