/* Sugarbot UI kit: form fields (decisions I1-I7). Needs tokens.css and base.css.
   Control rule (COMPONENT-INVENTORY.md): a setting that stays on or off is a toggle; agreeing or
   picking items is a checkbox; a one-time answer is two buttons. A toggle's label names the setting,
   never a question. */

/* Stacked field: label above control. Use a <label> wrapper or label[for]. Spacing between fields
   comes from the parent's gap (.sb-card__body), never from margins, which collapse or double. */
.sb-field { display: grid; gap: 8px; min-width: 0; }
.sb-field__label {
  font-family: var(--sb-list-title-font);
  font-weight: var(--sb-list-title-weight);
  font-style: var(--sb-list-title-style);
  letter-spacing: var(--sb-list-title-tracking);
  text-transform: var(--sb-list-title-case);
  font-size: 12.5px;
  color: var(--sb-muted);
}
.sb-field__help { margin: 0; font-size: 13px; color: var(--sb-muted); }

/* Row field: label left, control right, for settings lists inside a flush card body. */
.sb-field--row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--sb-row-rule);
}
.sb-field--row:last-child { border-bottom: 0; }
.sb-field--row .sb-field__label { font: 14.5px var(--sb-font-body); letter-spacing: 0; text-transform: none; color: var(--sb-color-plumb); }

/* I1 / I3 text input and select. Border is control-border (3.31:1); focus uses base.css's ring. */
.sb-input,
.sb-select,
.sb-textarea {
  font: 14.5px var(--sb-font-body);
  color: var(--sb-color-plumb);
  background: var(--sb-surface);
  border: 1px solid var(--sb-control-border);
  border-radius: var(--sb-radius-control);
  box-sizing: border-box;
  min-width: 0;
}
.sb-input, .sb-select { height: 32px; padding: 0 8px; }
.sb-input { background: var(--sb-sunken); }
/* Web pages with touch users: 40px. */
.sb-input--large, .sb-select--large { height: 40px; padding: 0 12px; }

/* I2 Textarea. */
.sb-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  line-height: 1.45;
  background: var(--sb-sunken);
  resize: vertical;
}

/* Disabled stays readable: it shows a value the user cannot change, not a broken control. */
.sb-input:disabled, .sb-select:disabled, .sb-textarea:disabled { color: var(--sb-color-plumb); opacity: 1; border-color: var(--sb-hairline); cursor: not-allowed; }

/* I7 Error. Mark the control aria-invalid="true" and point aria-describedby at the message. */
.sb-input[aria-invalid="true"],
.sb-select[aria-invalid="true"],
.sb-textarea[aria-invalid="true"] { border-color: var(--sb-error-text); }
.sb-field__error { margin: 0; font-size: 13px; color: var(--sb-error-text); }

/* I4 Toggle: a real checkbox, so it keeps its keyboard and screen-reader behaviour.
   <input type="checkbox" role="switch" class="sb-toggle">
   The off state gets a control-border edge; a bare light track measures about 1.3:1 and fails
   WCAG 1.4.11 as a control boundary. */
.sb-toggle {
  appearance: none;
  flex: none;
  width: 42px;
  height: 22px;
  margin: 0;
  border-radius: 11px;
  background: var(--sb-surface);
  box-shadow: inset 0 0 0 1px var(--sb-control-border);
  position: relative;
  cursor: pointer;
  transition: background var(--sb-duration) var(--sb-ease), box-shadow var(--sb-duration) var(--sb-ease);
}
.sb-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sb-muted);
  transition: transform var(--sb-duration) var(--sb-ease), background var(--sb-duration) var(--sb-ease);
}
.sb-toggle:checked { background: var(--sb-color-plumb); box-shadow: none; }
.sb-toggle:checked::after { transform: translateX(20px); background: var(--sb-color-molasses); }
.sb-toggle:disabled { cursor: not-allowed; opacity: .55; }

/* I5 Checkbox: native, Plum when ticked. */
.sb-checkbox { accent-color: var(--sb-color-plumb); width: 16px; height: 16px; margin: 0; flex: none; }
.sb-check { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; cursor: pointer; }