/* Cooking-preferences fieldset chrome — the EDITABLE branch of
   settings/_preferences_fields.html.erb (spec 2026-08-01 §3d), shared by the
   settings page and Mirabel's workshop pane. Lives here, not settings.css,
   because settings.css loads only on /settings via content_for(:head) while
   the pane needs these rules on every page mirabel.css loads on (Workshop
   PR1 Task 6 follow-up: the pane was rendering an owner's editable form
   completely unstyled). .settings-field, .settings-checkbox-label,
   .settings-field-hint, and .settings-field .input-base are also used by
   unrelated settings-page-only fields (branding, homepage copy, nutrition,
   published) — moving them here is a no-op for those fields, since this
   sheet now loads globally exactly where settings.css used to load
   page-locally, and no rule anywhere else re-declares these selectors.
   The read-only branch's .settings-preferences-summary dl stays in
   mirabel.css (it renders only inside the pane, never here); settings-page-
   only chrome (members/invitations, flash, the live-settings status
   spinner, transfer, passkey) stays in settings.css.
   Collaborators: settings/_preferences_fields.html.erb, settings/show.html.erb
   (its own unrelated fields), kitchen_preferences_controller.js. */

.settings-field {
  margin-bottom: 1rem;
}

.settings-field label,
.settings-field-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  cursor: pointer;
}

.settings-field-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--text-soft);
  margin-top: 0.1rem;
  padding-left: 1.45rem;
}

.settings-field .input-base {
  width: 100%;
}

/* Diet checkboxes + avoid-ingredient chips — kitchen_preferences_controller.js
   renders/removes .settings-avoid-chips li at runtime. */
.settings-diets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.settings-avoid-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0.35rem 0;
}

.settings-avoid-chips li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem var(--space-2);
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
}

.settings-avoid-chip-remove {
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 0.9rem;
}

@media (any-hover: hover) {
  .settings-avoid-chip-remove:hover {
    color: var(--danger);
  }
}

.settings-avoid-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Per-field save feedback. These three surfaces used to be styled by
   settings.css's [data-live-settings-status] / [data-live-settings-error]
   rules; serves moved onto kitchen_preferences_controller in Workshop PR1 and
   lost them, while diets and chips never had them, so a validation error
   rendered as unstyled body text beside an unstyled "Saved ✓". Ported from
   settings.css:124-167 — minus the [data-state] variants, because
   kitchen_preferences_controller writes textContent only: no busy spinner and
   no is-fading step, so "Saved ✓" is the single state the status span ever
   holds and it is always the green one. */
.settings-field [data-kitchen-preferences-target='servesStatus'],
.settings-field [data-kitchen-preferences-target='dietsStatus'],
.settings-field [data-kitchen-preferences-target='chipsStatus'] {
  font-size: 0.8rem;
  margin-left: 0.5rem;
  color: var(--smart-green-text);
}

.settings-field [data-kitchen-preferences-target='servesError'],
.settings-field [data-kitchen-preferences-target='dietsError'],
.settings-field [data-kitchen-preferences-target='chipsError'] {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--danger);
}