/* Forms and fields. Layer order is declared in main.css, loaded first. */
@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: 28rem;

    .form__hint {
      color: var(--color-text-muted);
    }

    .form__summary {
      padding: var(--space-3);
      border: 2px solid var(--color-danger);
      border-radius: var(--radius-control);
      color: var(--color-danger);
      font-weight: 600;
    }
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    .field__label {
      font-weight: 600;
    }

    .field__hint {
      font-size: var(--font-size-sm);
      color: var(--color-text-muted);
    }

    .field__input {
      min-block-size: 2.75rem;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-control);
      color: var(--color-text);
      background: var(--color-surface);
    }

    .field__input[aria-invalid="true"],
    .field__input:user-invalid {
      border: 2px dashed var(--color-danger);
    }

    .field__error {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-danger);

      &::before {
        content: "⚠ " / "";
      }
    }
  }

  .checkbox {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    inline-size: fit-content;
    cursor: pointer;

    input {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      margin: 0;
      accent-color: var(--color-accent);
    }
  }

  .field__input--code {
    max-inline-size: 12rem;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
  }

  /* Two-factor setup: numbered steps, QR code, secret and recovery codes. */
  .steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-inline-start: 1.25rem;
  }

  .qr-code {
    inline-size: fit-content;
    padding: var(--space-2);
    border-radius: var(--radius-control);

    /* Scanners need dark modules on a light background, in dark mode too. */
    background: #fff;

    svg {
      display: block;
      inline-size: 200px;
      block-size: 200px;
    }
  }

  .secret {
    font-size: 1.1rem;
    word-spacing: 0.25em;
    overflow-wrap: anywhere;
  }

  .recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--space-2) var(--space-4);
    max-inline-size: 28rem;
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    font-size: 1.1rem;
    list-style: none;
  }

  /* A group of related fields (content forms). */
  .fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);

    legend {
      padding-inline: var(--space-2);
      font-weight: 600;
    }
  }
}