@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@400;450;500;700&display=swap');

:root {
    --canvas:        #F3F0EE;
    --canvas-lift:   #FCFBFA;
    --ink:           #141413;
    --ink-soft:      #262627;
    --slate:         #696969;
    --signal:        #CF4500;
    --signal-light:  #F37338;
    --clay:          #9A3A0A;
    --link-blue:     #3860BE;
    --whisper:       #E8E2DA;
    --bone:          #F4F4F4;
}

html, body { margin: 0; padding: 0; }
body.auth-body,
body.app-body:has(.auth-canvas) {
    background: var(--canvas) !important;
    font-family: 'Sofia Sans', system-ui, sans-serif !important;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.auth-canvas {
    min-height: 100vh;
    background: var(--canvas);
    position: relative;
    overflow-x: hidden;
    --accent: var(--signal);
}

.auth-canvas[data-accent="parent"]  { --accent: var(--clay); }
.auth-canvas[data-accent="teacher"] { --accent: var(--link-blue); }
.auth-canvas[data-accent="admin"]   { --accent: var(--signal); }

/* Floating navigation pill */
.auth-nav {
    position: absolute;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 999px;
    padding: 12px 24px;
    box-shadow: rgba(0, 0, 0, 0.04) 0 4px 24px 0;
    z-index: 5;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.auth-nav-mark {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--canvas);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.auth-nav-divider { width: 1px; height: 16px; background: rgba(20, 20, 19, 0.15); }
.auth-nav-link { color: var(--slate); text-decoration: none; }
.auth-nav-link:hover { color: var(--ink); }

/* Grid */
.auth-grid {
    display: grid;
    gap: 64px;
    padding: 128px 32px 64px;
    grid-template-columns: 1fr;
    max-width: 1280px;
    margin: 0 auto;
    align-items: center;
}
@media (min-width: 768px)  { .auth-grid { padding: 128px 48px 80px; } }
@media (min-width: 1024px) { .auth-grid { grid-template-columns: 1fr 1fr; padding: 144px 64px 96px; gap: 80px; } }

/* Watermark behind illustration */
.auth-watermark {
    position: absolute;
    top: 8%;
    left: -4%;
    pointer-events: none;
    user-select: none;
    font-size: clamp(80px, 13vw, 180px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--whisper);
    line-height: 0.9;
    z-index: 0;
}

/* Illustration column */
.auth-illustration {
    position: relative;
    display: none;
    z-index: 1;
}
@media (min-width: 1024px) { .auth-illustration { display: block; } }
.auth-illustration-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.auth-illustration-eyebrow {
    margin-top: 32px;
    text-align: center;
}

/* Form column */
.auth-card {
    position: relative;
    z-index: 2;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

/* Portal switcher — three pills above the form */
.auth-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--canvas-lift);
    border: 1px solid var(--ink);
    border-radius: 999px;
    margin-bottom: 24px;
}
.auth-switcher a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--slate);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}
.auth-switcher a:hover { color: var(--ink); }
.auth-switcher a.is-active {
    background: var(--ink);
    color: var(--canvas);
}
.auth-switcher a.is-active:hover { color: var(--canvas); }

@media (max-width: 480px) {
    .auth-switcher a { padding: 8px 12px; font-size: 12px; }
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    margin-bottom: 24px;
}
.auth-eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.auth-headline {
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: var(--ink);
    margin: 0 0 16px;
}

.auth-lede {
    font-size: 16px;
    font-weight: 450;
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 44ch;
    margin: 0 0 32px;
}

/* Inputs */
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-field { display: flex; flex-direction: column; }
.auth-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 8px 24px;
    letter-spacing: -0.01em;
}
.auth-input {
    width: 100%;
    border: 1.5px solid var(--ink);
    background: var(--canvas-lift);
    border-radius: 999px;
    padding: 14px 24px;
    font: 500 16px 'Sofia Sans', system-ui, sans-serif;
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: background 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}
.auth-input::placeholder { color: var(--slate); font-weight: 450; }
.auth-input:hover { background: #fff; }
.auth-input:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--accent);
}

/* CTA */
.auth-cta-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.auth-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--ink);
    color: var(--canvas);
    border: 1.5px solid var(--ink);
    border-radius: 20px;
    padding: 14px 32px;
    font: 500 16px 'Sofia Sans', system-ui, sans-serif;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease;
    text-decoration: none;
}
.auth-cta:hover { transform: translateY(-1px); background: #000; }
.auth-cta:active { transform: translateY(0) scale(0.99); }
.auth-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--accent);
}
.auth-cta-arrow {
    width: 18px; height: 18px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.auth-cta:hover .auth-cta-arrow { transform: translateX(4px); }

@media (max-width: 640px) {
    .auth-cta { width: 100%; }
}

/* Secondary link */
.auth-secondary {
    color: var(--slate);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(105, 105, 105, 0.4);
    padding-bottom: 1px;
    transition: color 0.14s ease, border-color 0.14s ease;
}
.auth-secondary:hover { color: var(--ink); border-color: var(--ink); }

/* Error pill */
.auth-error {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--canvas-lift);
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 24px;
    max-width: 100%;
}
.auth-error::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--signal);
    flex-shrink: 0;
}

/* Footnote */
.auth-footnote {
    margin-top: 40px;
    font-size: 13px;
    font-weight: 450;
    color: var(--slate);
    letter-spacing: -0.01em;
}

/* Animations */
@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.auth-card        { animation: authFadeIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.auth-illustration { animation: authFadeIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both; }

/* Mid breakpoint — show illustration above form */
@media (min-width: 640px) and (max-width: 1023px) {
    .auth-illustration { display: block; max-width: 360px; margin: 0 auto; }
    .auth-watermark { font-size: clamp(56px, 10vw, 96px); top: 4%; left: 0; }
}

/* Mobile — hide illustration, tighten paddings */
@media (max-width: 639px) {
    .auth-grid { padding: 96px 20px 48px; gap: 32px; }
    .auth-headline { font-size: 32px; }
    .auth-watermark { display: none; }
    .auth-nav { padding: 10px 16px; gap: 10px; font-size: 13px; }
}