@layer components {
  .record-form {
    background: var(--color-panel);
    border: var(--border-subtle);
    max-width: 68rem;
    padding: clamp(1rem, 3vw, 2rem);
  }

  .record-form--compact {
    max-width: 54rem;
  }

  .form-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-field {
    display: grid;
    gap: 0.5rem;
  }

  .form-field+.form-field {
    margin-top: 1rem;
  }

  .form-field--wide {
    grid-column: 1 / -1;
  }

  .form-field label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 650;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .form-field small {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    appearance: none;
    background: #eeeeeb;
    border: 1px solid #6d6d69;
    border-radius: 2px;
    color: var(--color-black);
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    transition: border-color var(--transition-fast);
    width: 100%;
  }

  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    border-color: #8e3d24;
    outline: 0;
  }

  .form-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-black) 50%), linear-gradient(135deg, var(--color-black) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 1rem, calc(100% - 0.8rem) 1rem;
    background-repeat: no-repeat;
    background-size: 0.25rem 0.25rem;
    padding-right: 2.5rem;
  }

  .form-field textarea {
    min-height: 6rem;
    resize: vertical;
  }

  .field_with_errors {
    display: contents;
  }

  .field_with_errors input,
  .field_with_errors select,
  .field_with_errors textarea {
    border-color: var(--color-danger);
  }

  .form-actions {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    border-top: var(--border-subtle);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
  }

  .form-actions--stacked {
    align-items: stretch;
    flex-direction: column;
  }

  .form-errors {
    background: var(--color-danger);
    color: var(--color-black);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
  }

  .form-errors__code {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .form-errors h2 {
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-tight);
    margin-top: var(--space-2);
  }

  .form-errors ul {
    margin-top: var(--space-3);
    padding-left: 1.25rem;
  }

  @media (max-width: 40rem) {
    .form-grid {
      grid-template-columns: 1fr;
    }

    .form-field--wide {
      grid-column: auto;
    }

    .record-form {
      padding: var(--space-4);
    }
  }
}