/* ============================================================
   PYTHON COACH V2 — Auth page styles (auth.html + reset.html)
   Scoped to body[data-v2-auth] and body[data-v2-reset].
   All colours are V2 CSS design tokens — no hardcoded values.
   ============================================================ */

/* ── HTML5 HIDDEN NORMALISATION ─────────────────────────────── */
/* Author-side display values (e.g. display:flex on .auth-msg,
   .auth-loading) share class-selector specificity with the UA
   stylesheet's [hidden]{display:none}, so the author rule wins
   and hidden elements remain visible. !important ensures the
   hidden attribute always takes effect regardless of other CSS. */
[hidden] { display: none !important; }

/* ── PAGE SHELL ─────────────────────────────────────────────── */
/* height:auto overrides v2-base.css's `html, body { height: 100% }` for
   this page specifically — that fixed height, combined with flexbox
   align-items:center, was the cause of a mobile clipping bug: when the
   card was taller than the viewport, centering it made it overflow
   symmetrically above AND below the container's edges, but the page's
   scroll origin starts at the container's top edge, so the portion
   overflowing above could never be scrolled into view (only the bottom
   overflow was reachable, and even that scrolled the inner form rather
   than the page). height:auto + min-height:100dvh lets this element grow
   to its natural content height instead of clipping — ordinary page
   scroll (driven by the document, not a nested scroll box) then reaches
   every edge. overflow-y:auto is kept as an explicit belt-and-braces
   safety net; with height:auto it should never actually need to activate
   a scrollbar of its own — this box has no fixed height for anything to
   overflow against — so it does not create a second, nested scroll area
   alongside the page's own scrolling. */
body[data-v2-auth],
body[data-v2-reset] {
    height: auto;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    overflow-y: auto;
    background: var(--surface);
    /* Vertical padding: room above/below the card; safe-area for home-bar */
    padding: 24px 16px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
}

/* Card wrapper — constrained width, centred */
/* Vertical auto-margins centre the card when there's spare room in the
   flex container (identical to the old align-items:center at desktop
   sizes) but — unlike align-items:center — collapse to 0 and top-align
   the card once its content is taller than the viewport, rather than
   overflowing symmetrically off both edges. Horizontal centring is
   unaffected — that still comes from justify-content:center above. */
.auth-wrap {
    width: 100%;
    max-width: 420px;
    margin: auto 0;
}

/* The card itself */
.auth-card {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px 28px;
}

/* ── LOADING STATE ──────────────────────────────────────────── */
/* Shown while supabaseService.initialize() is in flight.
   Hidden once ready; replaced by the form or a redirect. */
.auth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
}

.auth-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: auth-spin 0.75s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-loading-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── LOGO ───────────────────────────────────────────────────── */
.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    text-decoration: none;
}

.auth-logo-icon {
    font-size: 30px;
    line-height: 1;
}

.auth-logo-text {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* ── TABS ───────────────────────────────────────────────────── */
/* Two-tab row (Sign In / Register).
   Active tab uses a 3px bottom border that overlaps the container
   border by 2px, visually "replacing" it with the primary colour. */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    padding: 10px 8px;
    background: transparent;
    border: none;
    /* 3px bottom border sits 2px below the element bottom,
       covering the 2px container border when active. */
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover:not(.is-active) {
    color: var(--text);
}

.auth-tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ── MESSAGES (error / success) ─────────────────────────────── */
/* Deuteranopia-safe: meaning is carried by the icon AND the text
   label — never by colour alone.                                 */
.auth-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 16px;
    background: var(--surface);
}

.auth-msg-icon {
    flex-shrink: 0;
    font-style: normal;
    line-height: 1.5;
    /* aria-hidden is set in HTML; icon is purely decorative accent */
}

.auth-msg-text {
    font-weight: 600;
}

/* Error: ⚠ icon + primary left-border + primary text — matches success variant;
   --red is deuteranopia-unsafe and prohibited for state indicators (v2-base.css). */
.auth-msg--error {
    border-left-color: var(--primary);
    color: var(--primary);
}

/* Success: ✓ icon + primary left-border + primary text */
.auth-msg--success {
    border-left-color: var(--primary);
    color: var(--primary);
}

/* ── FORM FIELDS ────────────────────────────────────────────── */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.auth-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
}

.auth-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 1rem;
    color: var(--text);
    outline: none;
    -webkit-appearance: none;
    transition: border-color 0.15s;
}

.auth-input::placeholder {
    color: var(--text-muted);
}

.auth-input:focus {
    border-color: var(--primary);
}

/* Suppress browser-native :invalid box-shadow (Firefox UA stylesheet applies
   it to required fields that are empty on page load, before any interaction). */
.auth-input:invalid {
    box-shadow: none;
}

.auth-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── FORGOT PASSWORD LINK ───────────────────────────────────── */
/* Positioned at the right-end of its own row, below the password
   input. Styled as a text link but implemented as a <button> so
   it submits nothing and is keyboard-accessible.               */
.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
    margin-bottom: 4px;
}

.auth-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.auth-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.auth-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
}

/* ── CHECKBOX ROWS ──────────────────────────────────────────── */
.auth-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.auth-check-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary);
    cursor: pointer;
}

.auth-check-label {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.auth-check-label a {
    color: inherit;
    text-decoration: underline;
}

/* Beta key input revealed after teacher checkbox is ticked.
   The group starts hidden; JS removes the [hidden] attribute. */
.auth-beta-group {
    margin-top: 10px;
    margin-bottom: 0;
}

/* Trial explanation shown when the teacher checkbox is ticked.
   Reuses --text-muted (same token as .auth-privacy below) — no new colour. */
.auth-trial-explainer {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Legacy beta-key toggle — reuses .auth-link's existing --primary colour. */
.auth-legacy-link {
    display: block;
    margin-top: 10px;
}

/* ── SUBMIT BUTTON ──────────────────────────────────────────── */
/* Duolingo-style: solid fill with 3px bottom-border "3D" effect. */
.auth-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin-top: 20px;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    border-bottom: 3px solid var(--primary-dark);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s, border-bottom-width 0.1s;
}

.auth-btn:hover:not(:disabled) {
    filter: brightness(1.05);
}

.auth-btn:active:not(:disabled) {
    filter: brightness(0.92);
    transform: translateY(2px);
    border-bottom-width: 1px;
}

.auth-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* ── PRIVACY NOTICE ─────────────────────────────────────────── */
.auth-privacy {
    margin-top: 16px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.auth-privacy a {
    color: var(--primary);
    text-decoration: none;
}

.auth-privacy a:hover {
    text-decoration: underline;
}

/* ── RESET PAGE — STATE PANELS ──────────────────────────────── */
/* Three mutually-exclusive states: loading, invalid, form, success.
   Each is a .auth-state-panel; JS toggles [hidden] to switch. */
.auth-state-panel {
    text-align: center;
}

.auth-state-icon {
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: 14px;
}

.auth-state-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.auth-state-body {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 20px;
}

/* Countdown shown before auto-redirect on success */
.auth-redirect-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 12px;
}

/* Left-aligned form panels inside reset.html */
.auth-reset-form-panel {
    text-align: left;
}

.auth-reset-form-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}

.auth-reset-form-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Link back to auth page */
.auth-back {
    display: block;
    text-align: center;
    margin-top: 18px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Narrower than 400px: tighten card padding */
@media (max-width: 420px) {
    .auth-card {
        padding: 24px 18px 20px;
    }
}

/* Tablet and above: more vertical breathing room */
@media (min-width: 768px) {
    body[data-v2-auth],
    body[data-v2-reset] {
        padding: 48px 24px;
    }
}

/* ── REGISTER — TWO-COLUMN DESKTOP LAYOUT ───────────────────── */
/* .auth-wrap--register is toggled by switchTab() in auth.html's script —
   present only while the Register tab is active. The Sign In tab never
   gets it, so .auth-wrap stays at its original 420px max-width there
   regardless of viewport size.
   Below this breakpoint neither rule applies: .auth-wrap--register has
   no effect (max-width stays 420px) and .auth-register-grid stays an
   ordinary block, so its two column divs (.auth-register-col--left,
   .auth-register-col--right) simply stack in document order — identical
   to the original single-column register layout used at every width
   below 1024px, including the 768px-wide tablet case. */
@media (min-width: 1024px) {
    .auth-wrap--register {
        max-width: 800px;
    }

    .auth-register-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        align-items: start;
    }
}

/* ============================================================
   Sprint 2b — Avatar & Nav
   Hub avatar dropdown + challenge sign-out button.
   All colours are V2 CSS design tokens — no hardcoded values.
   ============================================================ */

/* ── HUB TOPBAR RIGHT GROUP ─────────────────────────────────── */
/* Groups #hub-xp + .hub-avatar-wrap on the right side of
   #hub-topbar without altering the logo or XP pill styles. */
.hub-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── AVATAR WRAP — anchor for absolute dropdown ─────────────── */
.hub-avatar-wrap {
    position: relative;
}

/* ── AVATAR BUTTON ──────────────────────────────────────────── */
.hub-avatar-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: filter 0.15s;
}

.hub-avatar-btn:hover  { filter: brightness(1.1); }
.hub-avatar-btn:active { filter: brightness(0.88); }

/* Hidden until PCShell.init() injects initials and sets visibility:visible */
#pc-avatar { visibility: hidden; }

/* ── AVATAR DROPDOWN ────────────────────────────────────────── */
.hub-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    padding: 16px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Prevent overflow at 375 px: clamp to viewport */
@media (max-width: 420px) {
    .hub-avatar-menu {
        width: calc(100vw - 32px);
        right: -8px;
    }
}

.hub-avatar-menu-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    word-break: break-word;
}

.hub-avatar-menu-role {
    margin-bottom: 14px;
}

/* ── ROLE BADGE ─────────────────────────────────────────────── */
/* Deuteranopia-safe: role is conveyed by the text label AND the
   background accent — never by colour alone. */
.hub-role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Teacher: --primary fill + white text */
.hub-role-badge--teacher {
    background: var(--primary);
    color: var(--text-inverse);
}

/* Student: muted surface + dark text + border */
.hub-role-badge--student {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ── SIGN OUT BUTTON (hub dropdown) ─────────────────────────── */
.hub-avatar-signout:not([hidden]) {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.hub-avatar-signout:hover  { background: var(--border); border-color: var(--border-dark); }
.hub-avatar-signout:active { background: var(--border-dark); }

/* ── CHALLENGE SIGN OUT BUTTON ──────────────────────────────── */
/* Minimal icon button in #ch-topbar after #ch-badge.
   Styled identically to #ch-back-btn to maintain visual consistency. */
.ch-signout-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ch-signout-btn:hover  { background: var(--surface); color: var(--text); }
.ch-signout-btn:active { background: var(--border); }

/* Hide on very narrow phones — same breakpoint as #ch-badge */
@media (max-width: 374px) {
    .ch-signout-btn { display: none; }
}

/* ── SOCIAL LOGIN ─────────────────────────────────────────────── */
.auth-social-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.auth-btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: var(--bg);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.auth-btn-social:hover   { background: var(--surface); border-color: var(--border-dark); }
.auth-btn-social:active  { background: var(--border); }
.auth-btn-social:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-btn-social svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── AVATAR UNREAD DOT ───────────────────────────────────────── */
/* Shared across all pages — injected dynamically by shell.js for superusers. */
#su-avatar-dot {
    position:       absolute;
    top:            1px;
    right:          1px;
    width:          10px;
    height:         10px;
    border-radius:  50%;
    background:     #EEC252;
    border:         2px solid var(--bg);
    pointer-events: none;
    z-index:        1;
}