/* ============================================================
   Kit — checkbox.css   (a square, checkable box)
   A form checkbox styled to the system: a squircle box with a
   neutral outline that fills to the accent with a knocked-out
   white tick when checked. Flip .is-checked on the box itself or
   on any ancestor row (e.g. a full-width menu row) to switch it.
     <span class="bp-checkbox"></span>
   Same tick mask as .bp-checkmark, squared instead of circled.
   ============================================================ */
.bp-checkbox {
  --bp-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-sizing: border-box; flex: none;
  width: 14px; height: 14px;                 /* ~20% smaller than the old 18px, same 1.5px stroke */
  border-radius: 10px; corner-shape: squircle;
  border: 1.5px solid var(--bp-border-strong);
  background: var(--bp-surface);
  position: relative;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.bp-checkbox::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bp-accent-foreground);
  opacity: 0; transform: scale(.6);
  transition: opacity .14s ease, transform .16s var(--bp-ease-back, cubic-bezier(.68,-0.6,.32,1.6));
  -webkit-mask: var(--bp-tick) center / 10px 10px no-repeat;
          mask: var(--bp-tick) center / 10px 10px no-repeat;
}
/* checked: accent fill + white tick (driven by the box or an ancestor carrying .is-checked) */
.bp-checkbox.is-checked,
.is-checked .bp-checkbox { background: var(--bp-accent); border-color: var(--bp-accent); }
.bp-checkbox.is-checked::after,
.is-checked .bp-checkbox::after { opacity: 1; transform: scale(1); }