/*
 * phaedo-auth
 *
 * phaedo-ui ships the design system, its reset, and the form and button
 * components these screens are built from. This file covers only what the
 * auth views need beyond that, since phaedo-ui no longer generates arbitrary
 * utility classes.
 *
 * Link it after phaedo-ui's stylesheet; `rake phaedo:auth:install` does.
 */

:root {
  --auth-color-gray-100: oklch(96.7% 0.003 264.542);
  --auth-color-gray-600: oklch(44.6% 0.03 256.802);
}

/* Small muted copy explaining a screen. */
.auth-hint {
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.875);
  color: var(--auth-color-gray-600);
}

.auth-expiry-note,
.auth-alternate-action {
  margin-top: 1rem;
}

/*
 * The one-time-code input. Compounded with .ui-field so it wins wherever the
 * host happens to order the two stylesheets -- it is deliberately overriding
 * phaedo-ui's field sizing rather than sitting alongside it.
 */
.ui-field.auth-code-field {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
}

.auth-token-name {
  font-weight: 500;
}

/* Shown only in development, where the magic-link code is echoed to the page. */
.auth-dev-code {
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  background-color: var(--auth-color-gray-100);
  border-radius: 0.25rem;
}