/* Shared by the Slicewise editors: every control at least 44 × 44 px; rows wrap rather than scroll at 375 px. */
.slicewise-editor { max-width: 960px; }
.slicewise-editor .components-button { min-height: 44px; min-width: 44px; justify-content: center; }
.slicewise-editor input:not([type="checkbox"]), .slicewise-editor select { min-height: 44px; }
/* SelectControl's own styles fix its height at 40px with a class selector; out-specify them. */
.slicewise-editor .components-select-control select.components-select-control__input { height: 44px; min-height: 44px; }
.slicewise-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.slicewise-row .components-base-control { flex: 1 1 240px; }
.slicewise-row__actions, .slicewise-journey__footer { display: flex; flex-wrap: wrap; gap: 8px; }
.slicewise-journey__footer { margin-top: 16px; }
/* A field that failed validation: red border, red message, and an icon, so it is never colour alone.
   The icon is hidden from screen readers (they already hear the message through aria-describedby). */
.slicewise-editor [aria-invalid="true"] { border-color: #cc1818; box-shadow: 0 0 0 1px #cc1818; }
.slicewise-editor .components-base-control:has([aria-invalid="true"]) .components-base-control__help { color: #cc1818; font-weight: 600; }
.slicewise-editor .components-base-control:has([aria-invalid="true"]) .components-base-control__help::before { content: "⚠ " / ""; }
/* Checkboxes: the box is 24 px (WCAG 2.5.8) and its label, which also toggles it, is a 44 px tall target. */
.slicewise-editor .components-checkbox-control__input-container { width: 24px; height: 24px; }
.slicewise-editor .components-checkbox-control__input[type="checkbox"] { width: 24px; height: 24px; }
.slicewise-editor .components-checkbox-control__label { min-height: 44px; display: inline-flex; align-items: center; padding-right: 8px; cursor: pointer; }

/* The Help link by each screen's heading (Slicewise_Guide::link): a 44 px target. */
.slicewise-help { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; }