/* Djaunt checkbox — a native checkbox for a dense list/form row, and a
   larger custom "tile" checkbox for touch-heavy contexts (a cook-mode step
   list, a mobile checklist) where a 16px native box is too small to hit
   reliably. Blended from mealeo's Checkbox. Consumes role variables from
   tokens.css only. */

.dj-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--dj-accent);
  cursor: pointer;
}

.dj-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dj-checkbox-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--dj-on-accent);
  background: var(--dj-surface);
  border: 2px solid var(--dj-border);
  border-radius: var(--dj-radius-sm);
  cursor: pointer;
  transition: border-color var(--dj-dur-base) var(--dj-ease),
              background var(--dj-dur-base) var(--dj-ease);
}

.dj-checkbox-tile:hover:not(:disabled) {
  border-color: var(--dj-accent);
}

.dj-checkbox-tile[aria-checked='true'] {
  background: var(--dj-accent);
  border-color: var(--dj-accent);
}

.dj-checkbox-tile:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dj-checkbox-tile-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.dj-checkbox:focus-visible,
.dj-checkbox-tile:focus-visible {
  outline: var(--dj-border-width) solid var(--dj-accent);
  outline-offset: 2px;
}