@layer components {
  .input {
    appearance: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    font-size: var(--text-sm);
    inline-size: 100%;
    line-height: 1.5;
    padding: 0.55em 0.75em;

    &:where(:focus) {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px var(--color-accent-soft);
      outline: none;
    }
  }

  .input--soft {
    background: var(--color-slate-50);
  }

  .input--muted {
    background: var(--color-slate-100);
    color: var(--color-ink-subtle);
  }

  .input--mono {
    font-family: var(--font-mono);
  }

  .input--select {
    --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%230f172a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-image: var(--caret-icon);
    background-position: right 0.8em center;
    background-repeat: no-repeat;
    background-size: 0.7em;
    padding-right: 2.2em;
  }

  .input--textarea {
    min-block-size: 6rem;
    resize: vertical;
  }

  .input--code {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
  }

  .input--country-select {
    max-inline-size: 2.75rem;
    padding-inline: 0.125rem;
    text-align: center;
  }

  .checkbox {
    accent-color: var(--color-emerald-600);
    border-radius: 0.3rem;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
  }

  /* Prevent iOS Safari zoom on input focus (requires 16px minimum) */
  @media (max-width: 640px) {
    .input {
      font-size: 1rem;
    }
  }
}