/* THE SIGN-IN PAGES' OWN RULES, ON TOP OF THE PLATFORM'S DESIGN SYSTEM.

   `/assets/design.css` comes first on every page: userbus-design's tokens and components (the AuthCard,
   the buttons, Google's button, the fields, the alerts, the divider, the busy state, the toast, the QR
   frame, both registers and the `auto` one these pages use), a vendored copy pinned to a commit by that
   repository's `tools/sync.sh` and never edited here (`DesignSyncTest` checks it). This file holds ONLY
   what that system does not draw: the pieces particular to signing in. So it names no colour, font,
   radius or size of its own - every value below is a design token - and a change of look happens in
   userbus-design and arrives with a re-sync, not by an edit here.

   Served from priv/static by name (`UserbusAuth.Endpoint`, `only:`), because the pages carry a strict
   `style-src 'self'`: an inline style would be refused by the browser. */

/* The browser's 8px body margin framed the full-bleed card on a phone in a strip of page ground. */
body.ub {
  margin: 0;
}

/* THE CARD'S BODY stacks its lines and forms with the grid gap (`.auth-body`); a paragraph's own margin
   would double it. A line of the body reads as the lede does, 8px under the heading; anything else that
   opens the body (a form, an alert, a button) stands 16px under it, or it touches the heading. */
.auth-body > p,
.auth-body > form > p {
  margin: 0;
}

.auth-body > p {
  color: var(--c-text-soft);
}

.auth-body > :first-child:not(p) {
  margin-top: var(--sp-2);
}

/* A heading can carry the person's address ("You're signed in as …"), which has no spaces to break at. */
.auth-title {
  overflow-wrap: anywhere;
}

/* 44px IS THE SMALLEST TARGET ON EVERY PAGE, under a mouse too: the design's desktop input is 38px, and
   beside the password's 44px Show button the two fields of one form would differ. Under a finger the
   design system's own rule makes them 48px (the iOS no-zoom size). */
.auth-card .input {
  min-height: var(--ctl-touch);
}

/* A SIGN-IN METHOD'S LABEL WRAPS rather than overflow the card on a narrow phone ("Continue with email
   and password" is wider than a 320px screen's button at the design's `nowrap`). */
.auth-card .btn-block {
  white-space: normal;
  padding-block: var(--sp-2);
}

/* THE PAGE'S STATE, as a picture above the heading: decorative (the heading says it in words), and in
   the palette's own state colours - never a hue from outside it. */
.status,
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-touch-lg);
  height: var(--ctl-touch-lg);
  margin: 0 0 var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-text);
}

.status-icon {
  width: var(--sp-5);
  height: var(--sp-5);
}

.status-error {
  border-color: var(--c-failed);
  color: var(--c-failed);
}

.status-warning,
.status-clock {
  border-color: var(--c-warn);
  color: var(--c-warn);
}

/* The signed-in person's initial: the emblem's neutral disc with a letter in it - not yellow, so the page's
   one yellow thing stays its primary action. */
.avatar {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.alert p {
  margin: 0;
}

/* A SECONDARY ACTION THAT MUST BE A POST (sign out, send the email again) sits in the card's foot among
   its links and reads like one of them: underlined, in the link colour, 44px tall. */
.auth-foot form {
  display: inline-flex;
  margin: 0;
}

.auth-foot button.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-touch);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-accent-ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.auth-foot button.link:hover {
  text-decoration-thickness: 0.16em;
}

/* THE ONE-TIME CODE'S ENROLMENT: the key is typed by hand into a phone, so it is monospaced and selected
   in one tap; the recovery codes sit in a grid a person can copy down line by line. The QR frame is the
   design system's (`.qr`), centred in the column. */
.auth-body > .qr {
  justify-self: center;
}

.code {
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  word-break: break-all;
  user-select: all;
}

.codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.codes li {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* At phone width a two-column recovery code ("xxxx-xxxx-xxxx-xxxx") only fits whole at the small size. */
@media (max-width: 480px) {
  .codes li {
    padding: var(--sp-2);
    font-size: var(--fs-xs);
  }
}

/* FORCED PALETTES (Windows high contrast): the emblem's fill vanishes, so it keeps an edge, and the
   button that reads as a link takes the system's link colour. */
@media (forced-colors: active) {
  .status,
  .avatar {
    border: 1px solid CanvasText;
  }

  .auth-foot button.link {
    color: LinkText;
  }
}

/* THE ANALYTICS CONSENT BANNER (`/assets/consent.js`, drawn only when `USERBUS_IDP_GTM_ID` is set;
   `UserbusAuth.Analytics`). The same script draws it on the landing, so its class names are the script's;
   here it wears the card's tokens. */
.consent {
  position: fixed;
  z-index: 20;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  max-width: 34rem;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}

.consent-text {
  margin: 0;
}

.consent-text a {
  color: var(--c-text);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.consent-button {
  min-height: var(--ctl-touch);
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Ink on the yellow is the design's `.btn-primary` ink, `--c-text-invert`: `--c-accent-ink` is the accent
   used AS text, which in the dark register is the yellow itself, so the label vanished (2026-09-29). */
.consent-button-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text-invert);
}