/* ============================================================
   SERAC — Trainer login/register
   ============================================================
   Reskinned onto the shared light design system (shared/tokens.css +
   shared/ui-primitives.css) so this is recognizably the same product
   as the backoffice a trainer lands in right after — previously this
   page used its own unrelated dark navy/green theme.
   .btn/.btn-primary/.card/.field are shared primitives; only the
   auth-screen-specific layout stays here.
   ============================================================ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

.wrapper {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-5);
}

/* Card sizing (width/max-width/padding) now comes from shared/
   ui-primitives.css' `.auth-card` — same rules reused by Client, not
   redefined here. Field/label/input base styling comes from
   shared/ui-primitives.css' `.field` rules — every input here is
   wrapped in a <div class="field">. Password show/hide component
   (.password-field/.password-toggle) also comes from
   shared/ui-primitives.css. */

.btn-google {
    margin-top: 10px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-google:hover { background: var(--bg-hover); }

.auth-card h1 { font-weight: var(--font-semibold); } /* DS.3: 600 is the ceiling in the trainer apps (the shared rule is 700 for Client) */

.screen { display: none; }
.screen.active { display: block; }

/* Neutral confirmation after an account deletion (?account=deleted): ink on the quiet surface, no
   success or alarm colour — it states a fact, it does not celebrate or warn. */
.auth-notice {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    background: var(--surface-quiet);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-base);
}
.auth-notice[hidden] { display: none; }

.btn-back {
    background: none;
    border: none;
    color: var(--text);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    padding: 4px 0;
    min-height: var(--target-min);
    font-family: inherit;
}
/* Ink, not the brand blue — a blue text link is a DESIGN_SYSTEM.md §10 anti-pattern; the hover
   underline is the same affordance the shared .btn-link uses. */
.btn-back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Language switcher (Project/docs/plans/NEWLAIF_I18N_TRAINER_BACKEND_PLAN.md §16 D8) — plain
   text buttons in the login card's footer, so the language can be chosen before there is any
   session at all. */
.auth-language-switcher {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.lang-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 8px;
    min-height: var(--target-min);
}
.lang-btn.active {
    color: var(--text);
    font-weight: var(--font-semibold);
}
.lang-btn:hover { color: var(--text); }