/* ── The three doors ──
   /staff/login   כניסת צוות     rabbis and admins, often
   /signin        התחברות        registered askers, rarely
   /register      יצירת חשבון    once

   One stylesheet, one card, three sets of fields. What used to be here was the
   only surface in the product that ignored DESIGN.md: a purple-to-blue gradient
   button, a translucent blurred card, and #4f8ef7 / #7b5ea7 / #0f3460 — three
   colours that appear nowhere else. Glass and gradient are on the craft floor's
   refuse list, and a second and third accent contradict "blue is the only thing
   that acts".

   Now it is the product's reading surface: the #f4f6f8 ground with a white card
   and the one soft shadow, which is the same construction as the admin cards and
   the answer bubbles. Chosen by Itay from three built alternatives. Nothing here
   is a new decision — every value is a token that already ships.

   The consequence of that choice, and what this file has to carry because of it:
   both doors look alike, so the DOOR LABEL is the only thing telling a person
   which one they are at. It is therefore sized and coloured to be read, not
   whispered as a subtitle. */

/* Every colour comes from tokens.css, so the product's own night toggle moves
   this page with it — no second palette to keep in step. That is most of the
   argument for a light page: it is only light while the reader wants light. */
body {
    background: var(--hg-ground);
    color: var(--hg-text);
    /* dvh as well as vh: a phone's browser chrome makes vh taller than the
       visible viewport, which centres the card too low to see. */
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    /* The page draws to the glass, so it pays the hardware's insets back. */
    padding: calc(var(--hg-s-5) + var(--hg-edge-top)) calc(var(--hg-s-4) + var(--hg-edge-right))
             calc(var(--hg-s-5) + var(--hg-edge-bottom)) calc(var(--hg-s-4) + var(--hg-edge-left));
}

.auth {
    width: 100%;
    max-width: 380px;
}

/* ── Who this is ─────────────────────────────────────────────────────────── */

.auth-brand {
    display: flex;
    align-items: baseline;
    gap: var(--hg-s-2);
    margin-bottom: var(--hg-s-1);
}
.auth-name {
    font-size: var(--hg-t-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--hg-chrome);
}
[data-theme="dark"] .auth-name { color: var(--hg-text); }

/* Gold, as everywhere else the ✡ appears — the chat sidebar, the rabbi bar, a
   psak's signature. It is the product's one non-blue identity mark and never an
   action. */
.auth-mark {
    /* Relative to the wordmark beside it, not an absolute size: the mark is a
       companion to the name and should stay in proportion to it wherever the
       type ramp or the reader's own text size moves. */
    font-size: 0.88em;
    line-height: 1;
    /* Not --hg-gold. That value is tuned for the dark chrome and measures 1.54:1
       here — the mark vanishes into the ground. See the token's own note. */
    color: var(--hg-mark-ink);
}

/* ── Which door ──
   Doing real work, not decoration. Both doors wear the same surface, so this is
   the only thing that says which one a person is standing at — and someone who
   arrived at the wrong one should learn it before they type a password, not
   after. Hence the weight, the tracking and an ink that meets AA rather than a
   polite grey subtitle. */
.auth-door {
    font-size: var(--hg-t-meta);
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--hg-muted);
    margin: 0 0 var(--hg-s-5);
}

/* ── The card ──
   The admin card's construction, at a different size: white surface, one
   hairline, the one shadow token. No glass, no blur, no gradient. */
.auth-card {
    background: var(--hg-surface);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-r-xl);
    box-shadow: var(--hg-shadow);
    padding: var(--hg-s-5);
}

/* ── Fields ──
   No `autofocus` on any of the three, deliberately. The staff form had it before
   this redesign and it was carried over without being questioned; it should have
   been. Focusing a field on arrival makes the browser open its saved-password
   list immediately, which lands on top of the password input — the reader's first
   sight of the page is an overlay covering the form. It also skips a screen
   reader past the heading that says which door this is, and on a phone it throws
   the keyboard up before anyone has decided to type. Nobody asked for it. */


.auth-row { margin-bottom: var(--hg-s-4); }
.auth-row:last-of-type { margin-bottom: 0; }

.auth-label {
    display: block;
    font-size: var(--hg-t-meta);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--hg-text);
    margin-bottom: 6px;
}

.auth-input {
    display: block;
    width: 100%;
    font: inherit;
    /* 1rem exactly, and off the ramp on purpose: below 16px iOS Safari zooms the
       page the moment a field takes focus and never zooms back, leaving the form
       half off screen for the rest of the visit. A hard constraint, not a
       typographic choice — the same exception the chat composer takes. */
    font-size: 1rem;
    min-height: var(--hg-touch);
    padding: 10px 14px;
    color: var(--hg-text);
    background: var(--hg-field);
    border: 1px solid var(--hg-border);
    border-radius: var(--hg-r-md);
    transition: border-color var(--hg-fast), box-shadow var(--hg-fast);
}
.auth-input::placeholder { color: var(--hg-muted); }

/* The composer's focus treatment, so a field lights up the same way everywhere
   in the product. */
.auth-input:focus {
    outline: none;
    border-color: var(--hg-primary);
    box-shadow: 0 0 0 3px var(--hg-primary-ring);
}
.auth-input.is-invalid { border-color: var(--hg-danger); }

/* A field's own note: what a password needs, why no mail is sent, why there is
   no password recovery. Muted, and it meets AA — this is the text that stops a
   reader waiting for an email that is never coming. */
.auth-note {
    display: block;
    margin-top: 6px;
    font-size: var(--hg-t-hint);
    line-height: 1.55;
    color: var(--hg-muted);
}

.auth-check {
    display: flex;
    align-items: center;
    gap: var(--hg-s-2);
    font-size: var(--hg-t-ui);
    color: var(--hg-text);
    margin-bottom: var(--hg-s-4);
}
.auth-check input { accent-color: var(--hg-primary); }

/* ── The one thing that acts ─────────────────────────────────────────────── */

.auth-submit {
    display: block;
    width: 100%;
    font: inherit;
    /* Matches the field above it, for the same iOS reason. */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: var(--hg-touch);
    margin-top: var(--hg-s-4);
    border: 0;
    border-radius: var(--hg-r-md);
    background: var(--hg-primary);
    color: #fff;
    cursor: pointer;
    transition: background var(--hg-fast);
}
.auth-submit:hover { background: var(--hg-primary-hover); }

/* ── What went wrong ──
   One summary above the card rather than a message per field: these forms have
   at most four fields and a reader should not hunt. Not styled as a catastrophe
   — a mistyped password is the ordinary case. */
.auth-alert {
    display: flex;
    gap: var(--hg-s-2);
    padding: var(--hg-s-3) var(--hg-s-4);
    margin-bottom: var(--hg-s-4);
    border: 1px solid var(--hg-danger-edge);
    border-radius: var(--hg-r-lg);
    background: var(--hg-danger-wash);
    color: var(--hg-danger-ink);
    font-size: var(--hg-t-ui);
    line-height: 1.55;
}

/* ── Getting somewhere else ─────────────────────────────────────────────── */

.auth-foot {
    margin: var(--hg-s-4) 0 0;
    text-align: center;
    font-size: var(--hg-t-ui);
    color: var(--hg-muted);
}
.auth-foot a {
    /* The action blue is a BUTTON fill, where white sits on it. As small text on
       this ground it measures 4.15:1, so links take the deeper step. */
    color: var(--hg-link);
    font-weight: 600;
    text-decoration: none;
}
.auth-foot a:hover { text-decoration: underline; }
.auth-foot .auth-note { text-align: center; }

/* Sized by input method, never by screen width: a laptop with a touchscreen has
   fingers on it, and a phone held sideways is wider than any breakpoint.
   Measured before this block existed: the footer links were 31px and the
   remember-me row 20px. */
@media (pointer: coarse) {
    .auth-foot a {
        display: inline-block;
        min-height: var(--hg-touch);
        padding: 11px 4px;
    }
    /* The whole row is the target, since the checkbox itself is ~13px of glass. */
    .auth-check { min-height: var(--hg-touch); }
}

@media (max-width: 480px) {
    body { place-items: start center; }
    .auth-card { padding: var(--hg-s-4); }
    .auth-name { font-size: var(--hg-t-title); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-input, .auth-submit { transition: none; }
}