/* Sign-in and no-access pages: one centred card on the app background. Colours come
   from tokens.css, so a palette change reaches these pages too. */
.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg-app);
}

.auth-card {
  width: min(360px, 100%);
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: var(--ink);
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
}

.auth-sub {
  margin: 0 0 20px;
  color: var(--text-dim);
  font-size: var(--fs-13);
}

.auth-field {
  display: block;
  margin-bottom: 14px;
  color: var(--text-dim);
  font-size: var(--fs-13);
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--glass-soft);
  color: var(--ink);
  font-size: var(--fs-14);
}

.auth-field--check {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The main action of a card: Sign in, Create passkey, Add, Download codes, Save. Same look
   on a <button> and on a link. */
.auth-submit {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: var(--ink);
  font-size: var(--fs-14);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Confirming what cannot be undone: removing a key, replacing the codes. */
.auth-submit--danger {
  background: var(--red);
}

/* Secondary actions: Edit, Remove, Generate new codes, the alternatives on a sign-in
   step. */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--glass-soft);
  color: var(--ink);
  font-size: var(--fs-13);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.auth-btn:hover {
  background: var(--glass-strong);
}

.auth-btn--danger {
  color: var(--red);
}

.auth-error {
  margin: 0 0 12px;
  color: var(--red);
  font-size: var(--fs-13);
}

/* A quiet text link: Back to the portal, Sign out. Sign out has to be a POST, so it is a
   button; the button's own box and font size are undone to match the link beside it. */
.auth-back {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: var(--fs-13);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

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

/* Neutral notices from allauth ("signed out", "passkey added"), next to .auth-error. */
.auth-note {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: var(--fs-13);
}

.auth-or {
  margin: 14px 0 6px;
  color: var(--text-faint);
  font-size: var(--fs-12);
  text-align: center;
}

/* Second way in on the sign-in page: same shape as the main button, less weight. */
.auth-submit--quiet {
  margin-top: 0;
  border: 1px solid var(--hairline);
  background: var(--glass-soft);
}

/* ---------- Account pages ----------
   allauth's own pages: passkeys, the second sign-in step, recovery codes, password
   change. They arrive as bare elements, so the rules below style elements, each inside
   :where() so it weighs nothing and any class wins over it. Buttons and badges get their
   classes from access/templates/allauth/elements/. */

/* 480px fits a key's name, its usage and Edit/Remove in one row. The card sets one gap
   between blocks instead of every element bringing its own margins. */
.auth-card--account {
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-card--account > *,
.auth-card--account form > * {
  margin: 0;
}

.auth-card--account form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-card--account > .auth-btn {
  align-self: flex-start;
}

/* allauth leaves forms of hidden fields only (the passkey answer, a sign-out target) in
   the card; as blocks they would add an empty gap each. Still submittable when hidden. */
.auth-card--account form:not(:has(> :not([type="hidden"]))) {
  display: none;
}

:where(.auth-card--account) h2 {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}

:where(.auth-card--account) :where(p, label, td, th) {
  color: var(--text-dim);
  font-size: var(--fs-13);
  line-height: 1.5;
}

:where(.auth-card--account a:not([class])) {
  color: var(--text-dim);
  text-underline-offset: 3px;
}

:where(.auth-card--account) :where(input[type="text"], input[type="password"], textarea) {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--glass-soft);
  color: var(--ink);
  font-size: var(--fs-14);
}

:where(.auth-card--account) textarea {
  font-family: var(--font-mono);
}

:where(.auth-card--account) .helptext {
  display: block;
  margin-top: 6px;
  color: var(--text-faint);
  font-size: var(--fs-12);
}

:where(.auth-card--account) .helptext ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

:where(.auth-card--account) hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
}

/* The overview page: one section per kind of factor, its actions in a row. */
:where(.auth-card--account) section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-soft);
}

:where(.auth-card--account) section > * {
  margin: 0;
}

:where(.auth-card--account) section ul,
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.auth-actions--vertical {
  flex-direction: column;
}

/* A section's main action stays blue, but as small as the buttons beside it. */
:where(.auth-card--account) section .auth-submit {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 32px;
  margin: 0;
  padding: 0 var(--space-3);
  font-size: var(--fs-13);
}

/* The list of one's passkeys. */
:where(.auth-card--account) table {
  width: 100%;
  border-collapse: collapse;
}

:where(.auth-card--account) :where(th, td) {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--hairline-soft);
  text-align: left;
  vertical-align: middle;
}

:where(.auth-card--account) th {
  border-bottom-color: var(--hairline);
  color: var(--text-faint);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}

/* The key's own name is what the row is about. */
:where(.auth-card--account) td:first-child {
  color: var(--ink);
}

/* Edit and Remove side by side, never wrapped under each other. */
:where(.auth-card--account) td[align="right"] {
  text-align: right;
  white-space: nowrap;
}

:where(.auth-card--account) td .auth-btn + .auth-btn {
  margin-left: var(--space-1);
}

/* Key type under its name. The same tag shape as on the business page. */
.auth-badge {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-lg);
  background: var(--glass-soft);
  color: var(--text-dim);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}

.auth-badge--ok {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}

.auth-badge--warn {
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  color: var(--amber);
}

/* The recovery-codes page. People skip a page that only lists numbers, and this portal
   has no e-mail recovery: if the codes are lost with the passkey, an administrator has
   to clear the account by hand. */
.auth-warn {
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warm) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent);
  color: var(--ink);
  font-size: var(--fs-13);
  line-height: 1.5;
}

.auth-codes-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Two even columns of fixed-width digits, so a code is easy to copy by eye. */
.auth-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  border-radius: 10px;
  background: var(--glass-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-align: center;
}

.auth-caption {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-12);
}

/* Footer of the account pages: a hairline, then the way back and the way out. */
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-soft);
}

.auth-links .auth-back {
  margin-top: 0;
}

/* Phone: less frame around the card. In the passkey table Edit and Remove go one under
   the other: side by side they would leave the usage column narrower than a date. */
@media (max-width: 619px) {
  .auth-page {
    padding: var(--space-3);
  }

  .auth-card {
    padding: var(--space-5);
  }

  :where(.auth-card--account) td[align="right"] {
    white-space: normal;
  }

  :where(.auth-card--account) td[align="right"] .auth-btn {
    display: flex;
  }

  :where(.auth-card--account) td .auth-btn + .auth-btn {
    margin: var(--space-1) 0 0;
  }
}

/* Finger-sized controls on touch screens, as in responsive.css. */
@media (pointer: coarse) {
  .auth-submit {
    padding: 13px;
  }

  .auth-btn,
  :where(.auth-card--account) section .auth-submit {
    height: 44px;
  }
}