/* Checkbox (Figma 766:12363): 20px box, 1.5px border, radius sm; checked = accent fill with a 14px check; 12px gap; 40px min-height hit row. */
.checkbox{display:inline-flex;align-items:center;gap:var(--space-12);min-height:40px;padding:var(--space-4) 0;cursor:pointer;color:var(--text-primary);font:var(--text-sm);user-select:none}
.checkbox__input{position:absolute;opacity:0;width:20px;height:20px;margin:0;pointer-events:none}
.checkbox__box{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-default);color:var(--accent-text);transition:background-color .2s,border-color .2s,box-shadow .2s}
.checkbox__box svg{width:14px;height:14px;opacity:0;transition:opacity .15s}
.checkbox__input:checked+.checkbox__box{background:var(--accent-default);border-color:var(--accent-default)}
.checkbox__input:checked+.checkbox__box svg{opacity:1}
.checkbox:hover .checkbox__box,.checkbox.is-hover .checkbox__box{border-color:var(--accent-hover)}
.checkbox:hover .checkbox__input:checked+.checkbox__box,.checkbox.is-hover .checkbox__input:checked+.checkbox__box{background:var(--accent-hover);border-color:var(--accent-hover)}
.checkbox__input:focus-visible+.checkbox__box,.checkbox.is-focus .checkbox__box{box-shadow:var(--shadow-focus-ring)}
.checkbox.is-disabled,.checkbox:has(.checkbox__input:disabled){cursor:not-allowed;opacity:.4}
/* State=Error (Figma 766:12363): error-coloured box border and a subtitle message in feedback/error under the label. */
.checkbox__text{display:flex;flex-direction:column;gap:var(--space-4)}
.checkbox__error{display:none;font:var(--text-xs);color:var(--feedback-error)}
.checkbox.is-error .checkbox__error{display:block}
.checkbox.is-error .checkbox__box{border-color:var(--feedback-error)}
.checkbox.is-error .checkbox__input:checked+.checkbox__box{background:var(--feedback-error);border-color:var(--feedback-error)}

/* Checked=Indeterminate (Figma 766:12363): accent box with a 10×2 dash. State=Pressed: border/fill one step darker (accent/hover). */
.checkbox__dash{display:none;width:10px;height:2px;border-radius:var(--radius-full);background:currentColor}
.checkbox__input:indeterminate+.checkbox__box,.checkbox.is-indeterminate .checkbox__box{background:var(--accent-default);border-color:var(--accent-default)}
.checkbox__input:indeterminate+.checkbox__box svg,.checkbox.is-indeterminate .checkbox__box svg{display:none}
.checkbox__input:indeterminate+.checkbox__box .checkbox__dash,.checkbox.is-indeterminate .checkbox__dash{display:block}
.checkbox:is(:active,.is-pressed) .checkbox__box{border-color:var(--accent-hover);background:var(--surface-selected)}
.checkbox:is(:active,.is-pressed) .checkbox__input:checked+.checkbox__box,.checkbox.is-pressed.is-indeterminate .checkbox__box{background:var(--accent-hover);border-color:var(--accent-hover)}
/* Title + Subtitle (Show title / Show subtitle) */
.checkbox__sub{font:var(--text-xs);color:var(--text-secondary)}
/* Checkbox row (Figma 766:12368): Default · Hover · Selected · Disabled; 40 high row with optional 24px image, 8/12 padding, radius md */
.checkbox-row{display:flex;align-items:center;gap:var(--space-12);box-sizing:border-box;min-height:40px;padding:var(--space-8) var(--space-12);border-radius:var(--radius-md);cursor:pointer;font:var(--text-sm);color:var(--text-primary)}
.checkbox-row:is(:hover,.is-hover){background:var(--surface-background)}
.checkbox-row.is-selected,.checkbox-row:has(.checkbox__input:checked){background:var(--surface-selected)}
.checkbox-row.is-disabled{color:var(--text-muted);cursor:not-allowed}
.checkbox-row .checkbox{min-height:0;padding:0}
.checkbox-row__img{flex:none;width:24px;height:24px;border-radius:var(--radius-full);overflow:hidden;background:var(--image-placeholder)}
.checkbox-row__img img{width:100%;height:100%;object-fit:cover;display:block}