/* CM001 kit — form.css (@layer cm.components). Field states, hints/errors, required marker,
 * inline checkbox/switch. Base input styling stays in legacy base.css; these are additive. */
@layer cm.components {
  .req { color: var(--danger); font-weight: 700; }
  .field-hint { font-size: 12px; color: var(--text-3); margin-top: 5px; }
  .field-error { font-size: 12px; color: var(--danger); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
  .field--error input, .field--error select, .field--error textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
  }
  .form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

  /* ---- one control height -------------------------------------------------
     Buttons were sized by padding alone (31px) while inputs/selects came out at
     40-41px and .cm-select-btn at 39px, so every toolbar, filter bar and action
     row rendered ragged. Pin every interactive control to the same --control-h
     the rest of the kit (menu, accordion, datepicker, stepper, select) already
     uses. Checkbox/radio/range/file keep their intrinsic size. */
  .btn { min-height: var(--control-h, 38px); }
  .btn--sm { min-height: var(--control-h-sm, 32px); }
  .btn--lg { min-height: var(--control-h-lg, 46px); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select { block-size: var(--control-h, 38px); }
  textarea { min-block-size: calc(var(--control-h, 38px) * 2); }
  /* a control row is a single line of equal-height controls — small buttons included */
  .cm-grid-toolbar .btn, .hstack .btn, .toolbar .btn { min-height: var(--control-h, 38px); }

  /* ---- control rows: field/button baseline -------------------------------
     A .toolbar mixes LABELLED fields with BARE buttons. A .field carries the
     14px bottom margin it needs when stacked in a form — but inside a control
     row that margin is part of the field's box, so it is what a button aligns
     against: with align-items:flex-end the button rendered exactly 14px BELOW
     the input next to it, and with the .toolbar default (center) ~8px above it.
     Measured on Clients/Projects/Invitations/Facilities before this rule: ΔY 14px.
     Drop the margin inside a control row and bottom-align the row, so a button
     lines up with the INPUT rather than with the input-plus-label-plus-margin. */
  /* .toolbar was fixed for this; .hstack and .form-actions were not, and they are what the ACTION
     ROWS inside a record are built from — the job-order bar (Print PDF · status · minutes · Apply ·
     assignee · vendor · Assign), the parts issue row, the move row. Measured on a live work order
     before this rule: the row's fields were 52px tall (38px control + the 14px stacked-form margin)
     while the bare buttons beside them were 38px, so align-items:center centred the buttons exactly
     7px BELOW the controls they sit next to. Same defect, same fix, three containers.
     :has(.field) keeps it off the many .hstack rows that hold no field at all. */
  .toolbar:has(.field), .hstack:has(.field), .form-actions:has(.field) { align-items: flex-end; }
  .toolbar .field, .hstack .field, .form-actions .field { margin-bottom: 0; }

  /* ---- number inputs ------------------------------------------------------
     The native spinner renders as a heavy two-arrow block that ignores the
     control's border radius and reads as a dark box glued to the field — it is
     the single most-reported "why does this look broken" element on the
     platform (minutes, quantity, capacity, area, purchase value).
     The kit already ships .cm-stepper for the cases that genuinely want +/-
     buttons, so a plain number input is treated as what it looks like: a text
     box that happens to take digits. Arrow keys and the scroll wheel still
     increment, so nothing is lost but the box. */
  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; appearance: none; margin: 0; }

  /* inline checkbox / radio row */
  .checkline { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; font-weight: 500; color: var(--text); cursor: pointer; margin: 0; }
  .checkline input { width: auto; margin-top: 2px; flex: none; accent-color: var(--brand); }

  /* switch — a checkbox rendered as a sliding toggle */
  .checkline--switch input { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-2, #cbd5e1); cursor: pointer; transition: background var(--dur-fast, 120ms) var(--ease-std, ease); flex: none; margin-top: 0; }
  .checkline--switch input::after { content: ""; position: absolute; inset-block: 2px; inset-inline-start: 2px; width: 18px; border-radius: 50%; background: #fff; transition: inset-inline-start var(--dur-fast, 120ms) var(--ease-std, ease); box-shadow: var(--shadow-sm); }
  .checkline--switch input:checked { background: var(--brand); }
  .checkline--switch input:checked::after { inset-inline-start: 18px; }
}