/* ==================================================================
   ANDON — auth screen (REBO 7: real register/login)
   One calm surface, one decision at a time: Sign in ⇄ Create account.
   Shares the token system + .cta/.topbar from sales.css.
   ================================================================== */

.auth-page {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;          /* the form sits in the middle of the screen */
  padding: 36px 20px 40px;
}

.auth-card {
  /* One reserved slot, tall enough for a two-line message. The privacy hint
     lives in it, so a message arriving costs no height and the reserved
     space is never a hole. */
  --auth-slot: 55px;

  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  box-shadow: var(--shadow);
  text-align: left;
}

.auth-kicker {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.auth-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* Coming from the setup flow without an account yet.
   Deliberately NOT a reserved slot: it only ever appears once, on arrival
   from the setup flow, before the user touches anything. Reserving 55px for
   it would leave a permanent empty band at the top of the card — the one
   thing this screen must not have. The interaction-driven feedback below is
   the one that has to be jump-proof, and that one is reserved. */
.auth-banner {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  background: var(--accent-soft);
  border: 1px solid rgba(10, 132, 255, 0.3);
  border-radius: var(--radius-sm);
}
/* `display: flex` above outranks the UA sheet's `[hidden] { display: none }`,
   so the collapse has to be restated here — otherwise an empty (or stale
   text) banner would sit in the card forever. */
.auth-banner[hidden] { display: none; }
/* The "already signed in" line carries its escape hatch inline, so the
   card never grows by more than one line. */
.auth-banner-link {
  margin-left: auto;
  padding-left: 10px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.auth-banner-link:hover { color: var(--accent); }

/* Segmented toggle — same quiet component as the language switch */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 16px 0 14px;
  padding: 3px;
  background: var(--panel-hi);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}

.auth-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: 600 13.5px/1 var(--font);
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.auth-tab:hover { color: var(--ink); }

.auth-tab.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* One calm column. The bottom row is a single reserved slot that the privacy
   hint and the inline feedback share, so a message arriving — or leaving —
   costs exactly zero height: the form above it never moves. The links row
   below it is always present (only its content changes per view), so it
   cannot make anything jump either. */
.auth-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "email"
    "pass"
    "cta"
    "msg"
    "links";
  grid-template-rows: auto auto auto var(--auth-slot) auto;
  gap: 12px;
}

/* The confirm field (Create account only, D2) gets its own row BETWEEN the
   password and the button — and only while it is on screen. A permanent
   empty row would still collect its two gaps in every other view, so the
   row exists exactly as long as the field does. */
.auth-form:has(#auth-confirm-field:not([hidden])) {
  grid-template-areas:
    "email"
    "pass"
    "confirm"
    "cta"
    "msg"
    "links";
  grid-template-rows: auto auto auto auto var(--auth-slot) auto;
}

.auth-form > label:nth-of-type(1) { grid-area: email; }
.auth-form > label:nth-of-type(2) { grid-area: pass; }
.auth-form > label:nth-of-type(3) { grid-area: confirm; }
.auth-form .auth-cta { grid-area: cta; }
.auth-form .auth-hint { grid-area: msg; }
.auth-form .auth-links { grid-area: links; }

/* A hidden field leaves the column completely — no gap, no reserved air for
   an input the current view does not show. `display: flex` on the label
   outranks the UA sheet's `[hidden] { display: none }`, so the collapse has
   to be restated here or the empty box stays in the card. */
.auth-field[hidden] { display: none; }
/* Same trap on the tab strip: `display: grid` would keep the two tabs on
   screen during the reset flow, where there is nothing to choose between. */
.auth-tabs[hidden] { display: none; }
/* …and on the submit button: `.cta` is `inline-flex` (sales.css), so the
   "Check your e-mail" view (D5) hides it the same restated way — a button
   that submits nothing is the one lie this card must not tell. */
.auth-cta[hidden] { display: none; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.auth-field input {
  font-family: var(--font, inherit);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--panel-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.15s var(--ease);
  width: 100%;
}

.auth-field input:focus {
  border-color: var(--accent);
}

.auth-field input::placeholder { color: var(--faint); }

/* Password with show/hide eye — quiet, aria-pressed tracked */
.auth-pass { position: relative; display: block; }

.auth-pass input { padding-right: 42px; }

.auth-eye {
  appearance: none;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.auth-eye:hover { color: var(--ink-2); background: var(--hover); }

.auth-eye svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-eye .eye-closed { display: none; }

.auth-eye[aria-pressed="true"] .eye-open { display: none; }
.auth-eye[aria-pressed="true"] .eye-closed { display: block; }

/* Inline feedback — human words, calm surface (no shaking).
   Error, note and the privacy hint all sit in the same reserved slot; they
   are never visible at once, and the slot height never changes. */
.auth-error,
.auth-note,
.auth-hint { grid-area: msg; margin: 0; }

.auth-hint {
  align-self: end;              /* sits flush with the bottom of the slot */
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
}

.auth-form:has(.auth-error:not([hidden])) .auth-hint,
.auth-form:has(.auth-note:not([hidden])) .auth-hint { visibility: hidden; }
/* Belt and braces: if :has() is ever unavailable, the message still wins
   the cell instead of hiding behind the hint. */
.auth-error, .auth-note { z-index: 1; }
.auth-hint { z-index: 0; }

.auth-error {
  align-self: start;
  min-height: var(--auth-slot);
  display: flex;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--err);
  background: var(--err-soft);
  border: 1px solid rgba(255, 69, 58, 0.28);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.auth-note {
  align-self: start;
  min-height: var(--auth-slot);
  display: flex;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid rgba(48, 209, 88, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* Hidden: keep the reserved space, drop the paint. No display:none ↔ block
   swap, so nothing below ever jumps. */
.auth-error[hidden],
.auth-note[hidden] {
  visibility: hidden;
  max-height: var(--auth-slot);
  overflow: hidden;
}

.auth-cta {
  justify-content: center;
  margin-top: 4px;
  width: 100%;
}

/* The way in and the way back — quiet, calm, always in the same place. They
   are buttons rather than links so that Enter still submits the form of the
   view the user is actually in, and they live in their own resident row: an
   error or a note landing in the slot above can never push them out of the
   card, and the "Back to sign in" escape is there in every state. */
.auth-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 18px;
}

.auth-links[hidden] { display: none; }

.auth-link {
  appearance: none;
  border: none;
  background: none;
  padding: 1px 0;
  min-width: 0;
  font: 500 12.5px/1.4 var(--font, inherit);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}

.auth-link[hidden] { display: none; }

.auth-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.auth-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------
   Phone — one measure, tight and still. On a small screen the card is
   the only thing that matters: no loose padding, no reserved air that
   the form does not use, and nothing that reflows when it appears.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .auth-page { padding: 20px 14px 28px; }

  .auth-card {
    --auth-slot: 51px;
    padding: 18px 16px 16px;
    border-radius: var(--radius-md);
  }

  .auth-kicker { margin: 0 0 3px; font-size: 11px; }
  .auth-title { font-size: 21px; }
  .auth-sub { margin: 3px 0 0; font-size: 13px; }

  .auth-banner { margin: 12px 0 0; padding: 7px 10px; font-size: 12px; }

  .auth-tabs { margin: 12px 0 12px; padding: 2px; border-radius: 11px; }
  .auth-tab { padding: 8px 6px; font-size: 13px; }

  .auth-form { gap: 10px; }
  .auth-field { gap: 4px; }
  .auth-label { font-size: 12px; }
  /* 16px stops iOS from zooming the page on focus — that focus zoom is
     half of the "the form jumps around" feeling on a phone. */
  .auth-field input { font-size: 16px; padding: 10px 11px; }
  .auth-pass input { padding-right: 40px; }
  .auth-eye { width: 32px; height: 32px; right: 5px; }

  .auth-error, .auth-note { padding: 7px 10px; font-size: 12px; }

  .auth-cta { margin-top: 0; }
  .auth-hint { font-size: 11.5px; }

  .auth-links { gap: 11px; min-height: 17px; }
  .auth-link { font-size: 12px; }
}

/* Very narrow phones (360px and under) — the top bar has to give up a
   little width or the page grows a horizontal scrollbar. */
@media (max-width: 380px) {
  .auth-page { padding: 16px 12px 24px; }
  .auth-card { padding: 16px 14px 14px; }
  .topbar-in { padding: 8px 12px; gap: 8px; }
  .brand-name { font-size: 17px; }
  .topbar-right { gap: 7px; }
  .lang-btn { padding: 5px 8px; font-size: 12px; }
  /* Two links side by side (back + "ask for a new one") have to fit on one
     line here — a wrap would move the row above them for the first time. */
  .auth-links { gap: 10px; }
  .auth-link { font-size: 11.5px; }
}