/* inputs.css — form atoms */
.field {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.field > label {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}

.input, .select, .textarea {
  height: 40px; padding: 0 var(--s-3);
  background: var(--bg-input);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  color: var(--fg);
  font-size: 14px;
  outline: none;
  transition: border-color .14s, background .14s;
  min-width: 0;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent-line);
  background: var(--bg-raised);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { height: auto; padding: var(--s-2) var(--s-3); resize: vertical; min-height: 40px; }

.select {
  appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--fg-muted) 50%),
    linear-gradient(-45deg, transparent 50%, var(--fg-muted) 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  padding-right: 26px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-3) var(--s-4);
}
.field-grid .full { grid-column: 1 / -1; }

.kv {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-2) var(--s-3);
  align-items: center;
}
.kv > label {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-dim);
}