/* The sign-in page and the silent sign-in surfaces, on the centred setup card the profile page
   already uses for the one thing there is to do. */
.sign-in-providers {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.sign-in-empty {
  margin: 0;
  color: var(--muted);
}

.sign-in .primary.button {
  min-height: 44px;
}

.sign-in .actions {
  justify-content: center;
}

/* A situation, not a failure: the notice's amber, without the failure's red. */
.sign-in-situation {
  margin: 0 0 8px;
  color: #f2d598;
}

.sign-in-status .failure {
  margin: 22px 0 0;
}

.sign-in-status .actions {
  margin-top: 18px;
}

/* The first-party controls beside the core sign-in link: the same 44px full-width slots. */
.sign-in .secondary.button,
.sign-in button.primary.full {
  min-height: 44px;
}

/* The two notices, named under the ways in for anyone who has not signed in yet. */
.sign-in-legal {
  margin: 20px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.sign-in-legal a {
  color: var(--gold-soft);
}

/* The consent every account-creating path asks for: the box, then the sentence with its two
   links, as one label so the sentence is the box's target. */
.terms-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 4px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.terms-consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--gold);
}

.terms-consent a {
  color: var(--gold-soft);
}

.sign-in .field-error {
  display: block;
  margin-top: 8px;
}

/* The simple login: its two fields sit on the card's own label and input furniture, and the
   passkey follows under a spoken "or" rather than a second heading. */
.sign-in-login label:first-child {
  margin-top: 0;
}

.sign-in-login button.primary.full {
  margin-top: 16px;
}

.sign-in-or {
  margin: 4px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.login-panel .facts {
  margin-top: 8px;
}

.sign-in-recover {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
}

.sign-in-recover a {
  color: var(--gold-soft);
}

.setup-card .code-input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
}

/* Recovery codes: ten chips of thirty-five characters, never wrapping; two columns where two
   fit (the codes card is wider than the other setup cards for that) and one on a phone. */
.recovery-codes-card {
  width: min(800px, 100%);
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.recovery-codes li {
  min-width: 0;
}

.recovery-codes code {
  display: block;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #10120e;
  font: 500 13px ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
}

.recovery-codes-card .actions {
  margin-top: 12px;
}

.recovery-warning {
  margin: 16px 0 4px;
}

/* The profile's passkeys panel: rows are 44px touch targets; the panel keeps its shape. */
.passkey-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passkey-list li {
  min-height: 44px;
  display: grid;
  align-content: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.passkey-list li > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.passkey-list .icon {
  color: var(--gold-soft);
}

.passkey-list small {
  color: var(--muted);
}

/* The approval prompt: the status card with the channel's question and one way to answer. */
.approval-prompt p {
  margin: 12px 0 18px;
}

.approval-prompt .primary.button.full {
  min-height: 44px;
}

/* The channels waiting for approval: label left, one action right; stacked on a phone. */
.approval-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.approval-list li {
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;

  @media (max-width: 720px) {
    grid-template-columns: 1fr;
  }
}

.approval-list li .field-error {
  grid-column: 1 / -1;
}

.approval-list button {
  margin-top: 0;
  min-height: 44px;
}

/* The passkey offer: one sentence and its two ways to answer, full width on a phone. */
.passkey-offer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 18px;

  @media (max-width: 720px) {
    grid-template-columns: 1fr;
  }
}

.passkey-offer p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.passkey-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  /* On a phone each way to answer is a full-width row under the sentence. */
  @media (max-width: 720px) {
    display: grid;
  }
}

.passkey-offer button,
.passkey-offer .button {
  min-height: 44px;
}

.passkey-offer .field-error {
  grid-column: 1 / -1;
}