/* Native checkboxes and radios paint ledger roles, not the browser's default
   fill (#FFFFFF in light themes). Same scheme as the note checkbox:
   transparent control, role outline and fill, mark in --canvas. Owners
   choose the role with --vn-choice-color (default --primary).
   The mark is a centred square/circle of the smaller side, like the native
   control, so owner rules that size or stretch inputs keep their footprint. */
:where(input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"])) {
  width: 13px;
  height: 13px;
}
input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"]) {
  appearance: none;
  position: relative;
  box-sizing: border-box;
  /* Native choice controls ignore owner box paint; generic input rules keep doing nothing. */
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"])::before,
input[type="checkbox"]:not(.rn-checkbox-widget):is(:checked, :indeterminate)::after,
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--vn-choice-mask) center / contain no-repeat;
  mask: var(--vn-choice-mask) center / contain no-repeat;
  background: var(--canvas);
}
input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"])::before {
  background: var(--vn-choice-color, var(--primary));
}
input[type="checkbox"]:not(.rn-checkbox-widget)::before {
  --vn-choice-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.6' y='.6' width='14.8' height='14.8' rx='3.4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not(.rn-checkbox-widget):is(:checked, :indeterminate)::before {
  --vn-choice-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not(.rn-checkbox-widget):checked::after {
  --vn-choice-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.2l2.5 2.5 4.7-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not(.rn-checkbox-widget):indeterminate::after {
  --vn-choice-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='7' width='8' height='2'/%3E%3C/svg%3E");
}
input[type="radio"]::before {
  --vn-choice-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}
input[type="radio"]:checked::before {
  --vn-choice-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
}
input[type="radio"]:checked::after {
  --vn-choice-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}
input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"]):disabled { opacity: .5; }
@media (forced-colors: active) {
  input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"]) { appearance: auto; }
  input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"])::before,
  input:is([type="checkbox"]:not(.rn-checkbox-widget), [type="radio"])::after { content: none; }
}