.styled-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0.6rem;
}

/* visually hide but keep accessible */
.styled-checkbox input{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* visual checkbox */
.styled-checkbox .box{
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--border);
  display: inline-grid;
  place-items: center;
  transition: background .14s, border-color .14s, transform .06s;
  background: var(--bg);
}

/* check mark (hidden by default via scale) */
.styled-checkbox .box::after{
  content:'✓';
  font-size: 13px;
  line-height: 1;
  transform: scale(0);
  transition: transform .12s ease;
  color: var(--link);
  display: inline-block;
}

/* checked state */
.styled-checkbox input:checked + .box{
  background: var(--ring);
  border-color: var(--primary);
}
.styled-checkbox input:checked + .box::after{
  transform: scale(1);
}

/* focus visible */
.styled-checkbox input:focus + .box{
  box-shadow: var(--card-shadow);
  outline: none;
  transform: translateY(-1px);
}

/* disabled */
.styled-checkbox input:disabled + .box,
.styled-checkbox input:disabled + .box + .label-text{
  opacity: .6;
  cursor: not-allowed;
}

/* indeterminate (CSS supports :indeterminate) */
.styled-checkbox input:indeterminate + .box{
  background: var(--muted);
  border-color: var(--border);
}
.styled-checkbox input:indeterminate + .box::after{
  /* override check mark with a horizontal bar */
  content: '';
  width: 10px;
  height: 2px;
  background: var(--bg);
  border-radius: 2px;
  transform: scale(1);
}