/* components/input.css — iOS-like form controls */

.field{ display:flex; flex-direction:column; gap: var(--sp-8); }
.field-label{ font-size: var(--fs-13); color: var(--muted); font-weight: var(--fw-medium); }

.input{
  width:100%;
  min-height: var(--hit);
  padding: var(--sp-16) var(--sp-16);
  font-size: 1.25rem;
  border-radius: 26px;
  border: 1px solid var(--stroke-subtle);
  background: var(--surface-card);
  color: var(--text);
  outline: none;
  box-shadow:none;
}

.input::placeholder{ 
  color: color-mix(in oklab, var(--muted) 75%, transparent);
}

.input:focus{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke-subtle));
}

.input.is-invalid{
  border-color: color-mix(in oklab, #FF453A 60%, var(--stroke-subtle));
}

.help{ font-size: var(--fs-13); color: var(--muted); }