/* ==================== CHECKBOXES ====================
 *
 * ONE standard, defined once: the native control styled by accent-color.
 * No appearance:none, no ::after tick, no wrapper span.
 *
 * Two tiers:
 *   default  — --target-min (24px), the WCAG 2.2 AA 2.5.8 pointer target
 *   compact  — --checkbox-size-compact (16px), legitimate ONLY inside a
 *              .checkbox-cell / .checkbox-inline label that carries the
 *              target itself
 *
 * Dark mode needs NO rules here: [data-theme="dark"] declares
 * color-scheme: dark, so the browser renders dark chrome natively, and
 * --pk-orange is not redefined per theme.
 *
 * Guarded by scripts/check_checkbox_convention.py.
 * Spec: docs/superpowers/specs/2026-08-10-checkbox-standard-design.md
 */

input[type="checkbox"] {
  width: var(--target-min);
  height: var(--target-min);
  /* border:0 is required — accent-color styles the native control, and a
     residual border paints a second box around it. */
  padding: 0;
  border: 0;
  accent-color: var(--pk-orange);
  cursor: pointer;
  flex-shrink: 0;
}

/* A real outline, deliberately NOT var(--shadow-focus-ring): that token is a
   10%-opacity halo, invisible on white. With border:0 there is no
   border-colour flip to compensate, so a keyboard user would get no position
   indicator at all. :focus-visible so a mouse click does not draw it. */
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--pk-orange);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---- Compact tier wrappers ----
 * Both are <label> elements, so the >=24px target is real, not decorative. */

/* A bare checkbox centred in a table cell. */
.checkbox-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  cursor: pointer;
}

/* A checkbox with its text label on one line. */
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--target-min);
  min-height: var(--target-min);
  cursor: pointer;
}

.checkbox-cell input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  width: var(--checkbox-size-compact);
  height: var(--checkbox-size-compact);
}