/* =========================================================================
   Component — the sign-in panel
   -------------------------------------------------------------------------
   Styles for what assets/js/signin-panel.js renders. Shared by the sign-in
   page and by every gated page — so it is a component, not a
   page stylesheet (see identity.css for the same reasoning).
   ========================================================================= */

.signin-form {
  margin: 0;
}

.auth-sub {
  margin: 0 0 20px;
  font-size: 13.5px;
  text-align: center;
  color: var(--doc-ink-soft);
}

/* The address the code step is signing in as. It is TEXT and not a field, because
   the step does not read a typed address: the value it posts travels in a hidden
   input, and an editable copy beside it could disagree with what is sent (U-825). */
.auth-identity {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--sd-border);
  border-radius: var(--radius);
  background: var(--sd-surface-alt);
  font-size: 13.5px;
  text-align: center;
  color: var(--sd-text);
  word-break: break-word;
}

.auth-api {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: center;
  color: var(--doc-ink-soft);
  word-break: break-all;
}

/* The panel as it appears on a gated page, which has no auth-card around it.
   NO SHADOW, for the reasons `pages/login.css` gives over `.auth-card`: a
   resting card is depth by ground, not by elevation (DESIGN_TOKENS.md §9.1),
   and a border with a shadow on it is two hairlines (§9.2). This one renders on
   every gated page, so the change is visible on more than the six auth pages —
   which is precisely why §9.1 has carried it as an auth-pass item since U-725
   rather than letting one of the two be closed alone. */
.signin-card {
  width: 100%;
  max-width: 420px;
}

.signin-card > h1 {
  margin: 0 0 4px;
  font-size: 21px;
  text-align: center;
}