/* Form Field — molecule for FormFieldComponent.
 *
 * This file is the canonical home for form-control styling under the
 * v2 design system. Before #476 (U5) the .lc-* form selectors lived in
 * the top-level components.css aggregate and the placeholder atoms/
 * form_field.css carried only documentation. The component composes
 * label + input + help/error text — by Atomic Design rules that is a
 * molecule, not an atom. */

/* ─── v2 DS — .lc-field family (extracted from components.css in U5) ─── */
.lc-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.lc-label {
  /* margin reset: Pico styles bare `label { margin-bottom: calc(--pico-spacing
     * 0.375) }` (6px). `.lc-label` (0,1,0) beats `label` (0,0,1), so this
     reset wins outright — without it the label sits 6px + the .lc-field flex
     gap (8px) above the input instead of the DS's 8px gap. */
  margin: 0;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}
.lc-help { font-size: var(--fs-13); color: var(--color-ink-muted); }
.lc-error { font-size: var(--fs-13); color: var(--color-danger); }

.lc-input, .lc-textarea, .lc-select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--r-2);
  padding: 0 var(--sp-3);
  height: var(--control-h);
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.lc-textarea { padding: var(--sp-3); height: auto; min-height: 96px; line-height: var(--lh-normal); resize: vertical; }

/* Pico cascade override — `vendor/pico.sand.css` (sorts under 'v') loads
   AFTER this file ('m'). Pico styles
     input:not([type=checkbox], [type=radio], [type=range])
   at specificity (0,1,1) with `height: ~50px` and
     input:not([type=checkbox], [type=radio], [type=range], [type=file]), …
   at (0,1,1) with `padding: 0.75rem 1rem`. Both beat the bare `.lc-input`
   (0,1,0) above, so every <input class="lc-input"> would render at Pico's
   50px height with Pico padding. Qualifying with the `.lc-field` ancestor
   reaches (0,2,0), which wins regardless of load order. <select>/<textarea>
   need no bump — Pico only reaches them at element specificity (0,0,1).
   Pinned by test/integration/form_control_pico_override_test.rb; mirrors
   organisms/meeting-calendar.css `.lc-cal .lc-cal__cell`. */
.lc-field .lc-input {
  height: var(--control-h);
  padding: 0 var(--sp-3);
}
.lc-input:focus, .lc-textarea:focus, .lc-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.lc-input::placeholder, .lc-textarea::placeholder { color: var(--color-ink-subtle); }
.lc-input[aria-invalid="true"], .lc-textarea[aria-invalid="true"], .lc-select[aria-invalid="true"] {
  border-color: var(--color-danger);
}

/* R16 interaction states */
.lc-input:hover:not(:disabled),
.lc-textarea:hover:not(:disabled),
.lc-select:hover:not(:disabled) {
  border-color: var(--color-ink-muted);
}
.lc-input:focus-visible,
.lc-textarea:focus-visible,
.lc-select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.lc-input:disabled,
.lc-textarea:disabled,
.lc-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-surface);
}

.lc-check, .lc-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  cursor: pointer;
}
.lc-check input, .lc-radio input {
  width: 16px; height: 16px;
  accent-color: var(--color-primary);
  margin: 0;
}