/* --- fields ----------------------------------------------------------- */
.field {
  display: block;
  margin-bottom: 16px;
}
.field > span,
.section-label {
  display: block;
  font: 700 11px/1.2 var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.section-label {
  margin-bottom: 10px;
}
input,
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
  font: 400 16px/1.3 var(--mono);
}
textarea {
  min-height: 84px;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--shadow-xs);
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field-row {
  display: flex;
  gap: 12px;
}
.field-row > .field {
  flex: 1;
  min-width: 0;
}

/* --- segment toggle (OWNED | WANTED) ---------------------------------- */
.segment {
  display: flex;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-xs);
}
.segment button {
  flex: 1;
  min-height: 44px;
  border: none;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 12px;
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.segment button + button {
  border-left: 2px solid var(--ink);
}
.segment button.is-active {
  background: var(--owned);
  color: var(--cream-fixed);
}