@layer pages {
  .auth {
    display: grid;
    place-items: start center;
    padding-block: var(--space-7) var(--space-6);
  }

  .auth__card {
    inline-size: min(27rem, 100%);
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .auth__brand {
    display: flex;
    justify-content: center;
    margin-block-end: var(--space-5);
  }

  .auth__mark {
    inline-size: 3.25rem;
    block-size: 3.25rem;
  }

  .auth__title {
    margin-block: 0 var(--space-2);
    color: var(--color-heading);
    font-size: var(--text-2xl);
    text-align: center;
  }

  .auth__text {
    margin-block-end: var(--space-6);
    color: var(--color-text-muted);
    text-align: center;
    text-wrap: balance;
  }

  .auth__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-inline-start-width: 4px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .auth__notice .icon {
    flex: none;
    margin-block-start: 0.1em;
  }

  .auth__notice--success {
    border-color: var(--color-notice-success-border);
    background: var(--color-notice-success-bg);
    color: var(--tone-success-fg);
  }

  .auth__notice--danger {
    border-color: var(--color-notice-danger-border);
    background: var(--color-notice-danger-bg);
    color: var(--tone-danger-fg);
  }

  .auth__form {
    display: grid;
    gap: var(--space-6);
  }

  /* A legend renders above its fieldset's padding, so the groups are separated by the form's gap and
     their headings rather than by a padded divider, which would leave uneven space under the heading. */
  .auth__group {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  .auth__legend {
    margin-block-end: var(--space-1);
    padding: 0;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  :lang(ar) .auth__legend {
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--text-sm);
  }

  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field__label {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 650;
  }

  .field__control {
    position: relative;
    display: flex;
    align-items: center;
  }

  .field__icon {
    position: absolute;
    inset-inline-start: var(--space-3);
    color: var(--color-text-subtle);
    pointer-events: none;
  }

  .field__input {
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding-inline: calc(var(--space-3) * 2 + 1rem) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-base);
  }

  .field__input:focus-visible {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-glow);
  }

  .field__control:has(.field__toggle:not([hidden])) .field__input {
    padding-inline-end: calc(var(--space-3) * 2 + 1rem);
  }

  .field__toggle {
    position: absolute;
    inset-inline-end: var(--space-1);
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
  }

  .field__toggle:hover {
    color: var(--color-text);
  }

  .field__toggle .field__toggle-hide,
  .field__toggle[aria-pressed="true"] .field__toggle-show {
    display: none;
  }

  .field__toggle[aria-pressed="true"] .field__toggle-hide {
    display: block;
  }

  .auth__hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
  }

  .auth__hint .icon {
    flex: none;
    margin-block-start: 0.1em;
  }

  .status-page {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding-block: var(--space-9);
    text-align: center;
  }

  .status-page__code {
    color: var(--slate-400);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .status-page__title {
    color: var(--color-heading);
    font-size: var(--text-2xl);
  }

  .status-page__text {
    max-inline-size: 32rem;
    color: var(--color-text-muted);
  }

  @media (max-width: 599px) {
    .auth {
      padding-block-start: var(--space-5);
    }

    .auth__card {
      padding: var(--space-5);
      border-radius: var(--radius-lg);
    }
  }
}