/* ============================================================
   /login/ — members sign-in (PRD 7.4, UI only)
   Loaded after main.css. Tokens only.

   A utility surface, not a persuasion surface: bone, one narrow
   column, no seal, no drench, nothing that competes with the
   public funnel. Copy stays left-aligned inside the column.
   ============================================================ */

.auth {
  max-width: 32rem;
  margin-inline: auto;
}
.auth .lead { max-width: none; }

/* Shorter than a content section: this page is a door, not a room. */
.auth-page { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(2.5rem, 5vw, 4.5rem); }
.auth-demo { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 7rem); }

.auth__form { margin-top: var(--s-5); }
.auth__form .btn { margin-top: var(--s-2); }

/* Enumeration-safe status line. Empty until JS writes to it, and it
   must not leave a gap while empty. */
.auth__status {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 44ch;
}
.auth__status:empty { margin: 0; }

/* Second sign-in path, separated by a hairline rather than a box. */
.auth__alt {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.auth__out { margin: var(--s-5) 0 0; }

/* The demo band is fenced off by its own surface, so the buttons
   need no panel around them. Stacked on purpose: three roles read as
   a list of choices, and a wrapped 2 + 1 row reads as a mistake. */
.auth-demo .btn-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin: var(--s-5) 0 var(--s-4);
}