/* ============================================================================
   Sign-in, sign-up and password reset — pages/auth.js only
   ============================================================================
   Rendered inside .cab-auth__panel (cabinet.css), a card of about 420px, and
   built on the shared .cab-page head, .cab-note and the office's .field,
   .input and .btn. What this file adds is the phone-sized version of them:

     · 44px boxes in 16px type — below 16px iOS zooms the whole page the moment
       a field is focused, which on a sign-in form is the first thing it does;
     · a 46px primary button and 44px secondary links under it;
     · inline link-buttons («Войти по логину», «Изменить номер») whose hit area
       is taller than the line of text they sit in;
     · the code box, the password eye and the four password rules;
     · the notes in the card — a refusal, a locked sign-in counting down, and a
       kept session that could not load, with its «Повторить».

   Tokens only, so the dark theme needs nothing of its own here beyond the one
   brand-text lift cabinet.css makes for the same reason.
   ========================================================================== */

.cab-auth-page { gap: 20px; }
.cab-auth-page .cab-page__heading { flex-basis: 100%; }
.cab-auth-page .cab-page__sub { line-height: 1.5; }

.cab-auth-step { display: flex; flex-direction: column; gap: 20px; animation: fadeUp .2s ease both; }

.cab-auth-eyebrow {
  margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand);
}
/* On the dark surface the resting brand blue is a fill colour, not a text one. */
[data-theme="dark"] .cab-auth-eyebrow { color: var(--brand-700); }

.cab-auth-number { color: var(--text); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Fields ─────────────────────────────────────────────────────────────── */

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

.cab-auth-field { gap: 6px; }
.cab-auth-field__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 20px;
}
.cab-auth-field .field__label { font-size: 13px; }
.cab-auth-field .field__error { font-size: 12.5px; line-height: 1.4; }

.cab-auth-form .input {
  height: 44px; padding: 0 13px;
  font-size: 16px; border-radius: var(--r);
}

/* A link-button inside a line of text. The ::after is the target a thumb
   actually hits: taller than the text, and stopping short of the box under it. */
.cab-auth-inline {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; white-space: nowrap;
}
.cab-auth-inline::after { content: ''; position: absolute; inset: -12px -8px -6px; }
.cab-auth-inline:disabled { color: var(--text-4); cursor: default; text-decoration: none; }
.cab-auth-inline:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-xs); }

/* ── Password with its eye ──────────────────────────────────────────────── */

.cab-auth-pass { position: relative; }
.cab-auth-form .cab-auth-pass .input { padding-right: 50px; }
/* Edge draws its own reveal button; one eye is enough. */
.cab-auth-pass input::-ms-reveal,
.cab-auth-pass input::-ms-clear { display: none; }
.cab-auth-pass__toggle {
  position: absolute; top: 0; right: 0;
  width: 46px; height: 44px;
  display: grid; place-content: center;
  background: none; border: 0; border-radius: 0 var(--r) var(--r) 0;
  color: var(--text-4); cursor: pointer;
}
.cab-auth-pass__toggle:hover { color: var(--text-2); }
.cab-auth-pass__toggle[aria-pressed="true"] { color: var(--brand); }
.cab-auth-pass__toggle:focus-visible { outline: none; box-shadow: inset var(--ring); color: var(--brand); }

/* ── The SMS code ───────────────────────────────────────────────────────── */

/* Six digits, spaced like the SMS shows them. The left padding matches the
   letter-spacing, which is added after every glyph, so the group stays centred. */
.cab-auth-form .cab-auth-code {
  height: 54px; padding: 0 0 0 .42em;
  font-family: var(--mono); font-size: 24px; font-weight: 650;
  letter-spacing: .42em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.cab-auth-code::placeholder { color: var(--placeholder); letter-spacing: .42em; }

.cab-auth-resend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  min-height: 24px; margin-top: 2px;
  font-size: 13px; color: var(--text-3);
}
.cab-auth-resend__expired { color: var(--danger); font-weight: 550; }
.cab-auth-resend .spinner { width: 13px; height: 13px; }
/* Under the code box, so its target grows downwards rather than over the box. */
.cab-auth-resend .cab-auth-inline::after { inset: -4px -8px -12px; }

/* ── Password rules ─────────────────────────────────────────────────────── */

.cab-auth-rules {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cab-auth-rules li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 550; line-height: 1.35;
  color: var(--text-3); background: var(--surface-3); border: 1px solid var(--border);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.cab-auth-rules li > svg { flex: 0 0 auto; }
.cab-auth-rules__dot { width: 5px; height: 5px; margin: 0 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.cab-auth-rules li.is-met { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.cab-auth-rules li.is-missed { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }

/* ── What went wrong ────────────────────────────────────────────────────── */

.cab-auth-note { line-height: 1.45; }
.cab-auth-note__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cab-auth-note__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cab-auth-note__actions .btn { height: 44px; flex: 1 1 auto; }
/* A locked sign-in's countdown: fixed-width digits, so the sentence does not
   shuffle as it ticks. */
.cab-auth-note__clock { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── The button and the ways out ────────────────────────────────────────── */

.cab-auth-submit { height: 46px; margin-top: 4px; font-size: 15.5px; border-radius: var(--r); }
/* The office spinner is brand on grey; on a brand button it has to be white. */
.cab-auth-submit .spinner { border-color: color-mix(in srgb, #fff 35%, transparent); border-top-color: #fff; }

.cab-auth-links {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-3); text-align: center;
}
.cab-auth-links__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; }
.cab-auth-links .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

@media (max-width: 380px) {
  .cab-auth-page, .cab-auth-step { gap: 16px; }
  .cab-auth-form { gap: 14px; }
}