/* Uiverse "Checkbox" (circular "completed" check, draws in)
   Source:  https://uiverse.io/guilhermeyohan/white-cheetah-13
   Author:  guilhermeyohan
   Licence: uiverse.io element page footer reads "MIT License" (verified 2026-10-07). Original CSS: white-cheetah-13.orig.css
   Adapted for the contractor app:
   - 40px box -> --tap (44px); original class names, SVG and dash-offset draw-in kept;
   - fills: #ccc -> --surface-2 plus a 1.5px --border-strong ring (>= 3:1 boundary); checked #6cbe45 -> --success (AA with the tick in both themes);
   - tick/ring stroke #fff -> var(--bg): white on the dark-theme --success (light green) fails AA, --bg is dark there and light on the light theme's dark green;
   - the real input stays as the full-size invisible hit target; :focus-visible ring drawn on the SVG (circle, --focus, --ring-offset);
   - timings 0.6s -> --dur-slow with --ease-settle (tiny overshoot, check marks only per tokens.css);
   - prefers-reduced-motion: no draw-in animation, state changes instantly. */

.checkbox-wrapper-31:hover .check {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 {
  position: relative;
  display: inline-block;
  width: var(--tap);
  height: var(--tap);
  vertical-align: middle;
}

.checkbox-wrapper-31 svg {
  padding: 2px;
  border-radius: 50%;
}

.checkbox-wrapper-31 .background {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1.5px;
  transition: ease all var(--dur-slow);
  -webkit-transition: ease all var(--dur-slow);
}

.checkbox-wrapper-31 .stroke {
  fill: none;
  stroke: var(--bg);
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dashoffset: 100;
  stroke-dasharray: 100;
  transition: all var(--dur-slow) var(--ease-settle);
  -webkit-transition: ease all var(--dur-slow);
}

.checkbox-wrapper-31 .check {
  fill: none;
  stroke: var(--text-3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  stroke-dashoffset: 22;
  stroke-dasharray: 22;
  transition: all var(--dur-slow) var(--ease-settle);
  -webkit-transition: ease all var(--dur-slow);
}

.checkbox-wrapper-31 input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  -appearance: none;
  -webkit-appearance: none;
}

.checkbox-wrapper-31 input[type=checkbox]:hover {
  cursor: pointer;
}

.checkbox-wrapper-31 input[type=checkbox]:focus-visible {
  outline: none;
}

.checkbox-wrapper-31 input[type=checkbox]:focus-visible + svg {
  outline: var(--ring-w) solid var(--focus);
  outline-offset: var(--ring-offset);
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {
  fill: var(--success);
  stroke: var(--success);
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {
  stroke: var(--bg);
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 input[type=checkbox]:disabled + svg { opacity: 0.45; }
.checkbox-wrapper-31 input[type=checkbox]:disabled { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .checkbox-wrapper-31 .background,
  .checkbox-wrapper-31 .stroke,
  .checkbox-wrapper-31 .check {
    transition: none;
  }
}