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

  .field__label {
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--color-ink);
  }

  .input {
    width: 100%;
    padding: 0.8em 1em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-bg);
    color: var(--color-ink);
    transition:
      border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

  .input:hover {
    border-color: color-mix(in oklch, var(--color-sky) 60%, var(--color-border));
  }

  .input:focus {
    outline: none;
    border-color: var(--color-sky-deep);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-sky) 40%, transparent);
    background: var(--color-surface);
  }

  .input--textarea {
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.45;
  }

  .input:user-invalid {
    border-color: oklch(0.55 0.2 25);
    box-shadow: 0 0 0 2px color-mix(in oklch, oklch(0.55 0.2 25) 25%, transparent);
  }

  .date-time-input {
    position: relative;
    display: block;
  }

  .date-time-input svg {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 1;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: var(--color-brand-strong);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .date-time-input .input {
    padding-left: 2.75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
  }

  .date-time-input .input::placeholder {
    color: color-mix(in oklch, var(--color-muted) 65%, transparent);
    opacity: 1;
  }

  .field__hint--error {
    font-size: var(--step--1);
    color: oklch(0.45 0.18 25);
  }

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

  @media (min-width: 30rem) {
    .choice-grid--pay {
      grid-template-columns: 1fr 1fr;
    }
  }

  .choice {
    position: relative;
    display: block;
    cursor: pointer;
  }

  .choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }

  .choice__box {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-3) var(--space-4);
    min-height: 100%;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-bg);
    transition:
      border-color var(--duration-fast) var(--ease-out),
      background var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

  .choice__title {
    font-size: var(--step-0);
    font-weight: 800;
    color: var(--color-ink);
  }

  .choice__hint {
    font-size: var(--step--1);
    line-height: 1.4;
    color: var(--color-muted);
  }

  .choice input:focus-visible + .choice__box {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-sky) 45%, transparent);
  }

  .choice input:checked + .choice__box {
    border-color: var(--color-brand-strong);
    background: color-mix(in oklch, var(--color-brand) 10%, white);
    box-shadow: var(--shadow-card);
  }

  .choice input:checked + .choice__box .choice__title::after {
    content: " ✓";
    color: var(--color-brand-strong);
  }
}