/*
 * The auth card — one card, for both shells.
 * Design 2.0, Batch 10 (canvas 18 Auth · U1, and 16 Account · A3).
 *
 * ⛔ **TWENTY TEMPLATES SIT ON THE AUTH PATH AND TWO CARDS SHIPPED.** Every one
 * of them is a card with a heading, a field or two and a way onwards — one
 * design — but it was drawn twice, under the same nine class names:
 *
 *                  marketing-auth.css        components/forms.css
 *   width          420px                     400px
 *   radius         --radius-xl (24px)        --border-radius (16px)
 *   padding        40px 36px                 2rem
 *   ground         --surface / --border      --card-background / --border-color
 *   used by        login, register           everything on base.html
 *
 * ⚠️ **THEY NEVER LOADED TOGETHER**, so there was no live collision to see:
 * `marketing/auth_base.html` does not pull `forms.css`. The trap is quieter —
 * `.auth-card` meant two different things depending on which base a template
 * extended, so moving one between them silently resized its card. Sign-in and
 * two-factor verification are consecutive screens on one journey and were
 * 20px apart in width.
 *
 * ⭐ **BOTH BASE TEMPLATES LOAD THIS FILE**, and the two old blocks are gone.
 * The card is now a decision made once.
 *
 * ⚠️ **APP TOKEN NAMES ONLY, AND ONLY ONES MARKETING ALIASES.** Spacing is
 * therefore written in literal px here: `--space-2xs`…`--space-2xl` are the
 * app's 8-step scale and marketing has no alias for any of them, so a
 * `var(--space-md)` in this file resolves to nothing on `/login/` and the
 * declaration is dropped. Same for `--danger`, which is `--semantic-error` in
 * the alias block. Batch 11 wrote four of them and the guard below caught all
 * four. Marketing pages
 * do not load `themes/default.css` — a name missing from the alias block in
 * `marketing-theme.css` does not fall back, it resolves to nothing and the
 * declaration is dropped. `tests/core/test_css_extraction.py` checks each
 * template against the stylesheets it actually loads, which is the guard.
 */

.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    /*
     * ⚠️ **THE APP SHELL HAS A HEADER AND FOOTER AROUND THIS AND THE MARKETING
     * SHELL DOES NOT**, so a full-viewport card pushes the app page into a
     * scroll it does not need. The app value is the shared default; the
     * marketing shell overrides it to `100vh` in `marketing-auth.css`, which is
     * exactly the kind of chrome that file is named for.
     */
    min-height: calc(100vh - 200px);
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    /* 420px: the wider of the two. A form with an email, a password and two
     * social buttons is cramped at 400. */
    max-width: 420px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 36px 34px;
    box-shadow: var(--shadow-md);
}

/*
 * ⛔ **LEFT-ALIGNED, WHICH BOTH OLD CARDS WERE NOT.** A centred heading reads as
 * a splash screen; these are forms, and a form starts at the left edge where
 * its first label is. Canvas U1.
 */
.auth-header {
    margin-bottom: 28px;
}

.auth-logo {
    display: block;
    margin-bottom: 20px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.auth-header h1 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.auth-header .subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/*
 * ⚠️ **THE FOOTER WAS THE FOURTH DUPLICATE AND IT SURVIVED THE FIRST PASS.**
 * `.auth-card`, `.auth-page` and `.auth-header` were consolidated while
 * `.auth-footer`, `.auth-footer p` and `.auth-footer a` stayed behind in
 * `marketing-auth.css` — centred, 15px, weight 300, on marketing token names.
 * So sign-in and two-factor verification still parted company one element above
 * the fold, which is the same seam this file exists to close.
 *
 * ⛔ **LEFT-ALIGNED, LIKE THE HEADER ABOVE IT.** A centred footer under a
 * left-aligned heading is the splash-screen instinct surviving in the one place
 * nobody looked.
 *
 * ⚠️ **`.auth-footer--beta` AND `.btn-beta` ARE GONE** (Batch 11, canvas U1).
 * They drew a filled CTA box under sign-in — a second filled-weight button
 * competing with the one action on the page most people reach already holding
 * an account. The way to an account is a link now, which is what it is.
 */
.auth-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.auth-footer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/*
 * ⚠️ **UNDERLINED, BECAUSE IT SITS INSIDE A SENTENCE.** "New to Pensio? Create
 * an account" is one line of text with a link in it, and the link colour
 * (`--accent-text`, #5C6B59) against the body colour (`--ink-mid`, #4A5448) is
 * nowhere near the 3:1 that WCAG 1.4.1 asks for when colour is the only cue.
 * Found in a screenshot: it read as ordinary text.
 *
 * ⚠️ `--primary` is aliased in `marketing-theme.css`; `--accent-text` is not a
 * name the app shell knows. See the token note at the top of this file.
 */
.auth-footer a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-footer a:hover {
    color: var(--text-primary);
}

/*
 * ⭐ **A LINE OF CONTEXT THAT IS NOT A BOX.** The referral note used to be an
 * `.info-box` with a gift icon, which made the one message meant for a minority
 * of arrivals the loudest thing above the form.
 */
.auth-note {
    margin: 0 0 4px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* "Optional", beside the label it applies to rather than in the placeholder,
   where it disappears the moment anyone types. */
.form-label__optional {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
}

/*
 * ⭐ **A LABEL AND THE ONE LINK THAT IS ABOUT THAT FIELD.** "Forgot your
 * password?" used to sit centred under the submit button, directly in the path
 * of the one action the page exists for. It belongs beside the password label,
 * where it is also out of the way.
 */
.form-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.form-label-row__aside {
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
}

.form-label-row__aside:hover,
.form-label-row__aside:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

/*
 * The one closing reassurance an auth page can carry. ⭐ Being locked out of a
 * journal feels like losing it, and none of these screens said otherwise.
 */
.auth-assurance {
    margin: 20px 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* =========================================================================
   The field, and the eye that reveals it
   =========================================================================

   ⛔ **THE FIFTH AND SIXTH COPIES.** `.auth-form input` was drawn in
   `marketing-auth.css` (12/16 padding, `--radius-sm`, `--border`, `--bg`) and
   the app's generic input styling in `components/forms.css` covered the same
   fields on the other eighteen templates — so sign-in and change-password asked
   for a password in two different boxes.

   ⭐ **AND THE EYE TOGGLE WAS DEFINED TWICE FOR TWO TEMPLATES.** It lives in
   both stylesheets, but only `login.html` and `register.html` ever carried the
   wrapper markup — so the two definitions served the same two pages, while
   `password_change.html` had a password field with no way to reveal it. It is
   auth-only, so it belongs here and is gone from both of the others.

   ⚠️ **SCOPED TO `.auth-form`**, which only these templates have. That keeps
   `components/forms.css` in charge of every other form in the app, and it is
   why this can load after it without touching anything else.
   ========================================================================= */

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form select,
.auth-form textarea {
    width: 100%;
    padding: 12px 16px;
    /* ⚠️ **16px, NOT SMALLER.** iOS Safari zooms the viewport on focus for
       anything under 16px, and these are the fields most often met on a
       phone. */
    font-size: 16px;
    font-family: var(--font-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    outline: 2px solid transparent;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(156, 169, 152, 0.12);
    background: var(--bg-primary);
}

.auth-form .form-hint {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.auth-form .form-error {
    display: block;
    margin-top: 4px;
    color: var(--semantic-error);
    font-size: 0.8125rem;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    /* Room for the button, so a long password never runs under the eye. */
    padding-right: 48px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* ⚠️ 44px is the WCAG 2.5.5 floor, and this control is met one-handed on a
       phone more than anywhere else in the product. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background 0.2s ease;
}

.password-toggle-btn:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* Inset ring, so it cannot bleed past the input's own border. */
.password-toggle-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.password-toggle-btn svg,
.password-toggle-btn .icon {
    width: 20px;
    height: 20px;
}

/* =========================================================================
   States: waiting, expired, locked out  (canvas U3)
   =========================================================================

   ⛔ **`account_locked.html` CARRIED ITS OWN `<style nonce>` BLOCK**, six rules
   of it, against the no-inline-CSS rule — and a raw `<svg>` against the icon
   rule. Both are here now, and both are shapes the other two state pages
   needed anyway.

   ⭐ Each of these three pages is read by somebody who expected to be inside
   their journal by now, so each leads with **which state it is** as an eyebrow,
   then one heading, then the single control that resolves it.
   ========================================================================= */

.auth-state {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* The wait, said once. It used to be a bold line and a paragraph underneath
   repeating the same number. */
.auth-wait {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-accent);
}

.auth-wait__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--primary);
}

.auth-wait p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* A note that belongs to the control above it rather than to the page. */
.auth-note--under {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/*
 * ⭐ **ON A PHONE THE CARD BECOMES THE SCREEN.** Canvas U1. At 420px the card
 * is already the full width of a 390px viewport, so its border, radius and
 * shadow draw a frame around nothing while 34px of card padding sits inside
 * 16px of page padding — the same gutter spent twice, which is what pushed the
 * create-account row below the fold on sign-in.
 *
 * ⚠️ Applies to every auth page, which is the point of the file.
 */
@media (max-width: 30rem) {
    .auth-page {
        align-items: flex-start;
        padding: 16px 0;
    }

    .auth-card {
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 16px;
        background: transparent;
    }
}