/* ============================================================
   URBINO · CHOICE (Checkbox · Radio · Switch)
   Atom. Three controls, one anatomy. Native <input> hidden under
   a styled box for cross-browser consistency + mixed-state support.

   Wrap each control in <label class="u-check"> or <label class="u-switch">.
   ============================================================ */


/* ============================================================
   CHECKBOX / RADIO — shared wrapper
   ============================================================ */

.u-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--u-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--u-fg-1);
  line-height: 1.4;
  padding: 2px 0;   /* aligns label with box optical center */
}
.u-check__text { display: inline-block; padding-top: 1px; }
.u-check__sub  { display: block; font-size: 12px; color: var(--u-fg-3); margin-top: 2px; }

/* native input — hidden, kept for accessibility & form submission */
.u-check > input[type="checkbox"],
.u-check > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  margin: 0;
}

/* the styled visual box */
.u-check__box {
  box-sizing: border-box;       /* keeps visual size constant when border-width changes */
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--u-surface);
  border: var(--u-border-w-thin) solid var(--u-border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
  transition:
    background var(--u-dur-fast) var(--u-ease-out),
    border-color var(--u-dur-fast) var(--u-ease-out),
    box-shadow var(--u-dur-fast) var(--u-ease-out);
}

/* HOVER */
.u-check:hover > .u-check__box,
.u-check__box.is-hover { border-color: var(--u-fg-3); }

/* FOCUS — keyboard */
.u-check > input:focus-visible + .u-check__box,
.u-check__box.is-focus {
  box-shadow: var(--u-focus-ring);
  border-color: var(--u-primary);
}

/* CHECKED (checkbox) */
.u-check > input[type="checkbox"]:checked + .u-check__box,
.u-check__box[data-state="checked"] {
  background: var(--u-primary);
  border-color: var(--u-primary);
}
.u-check > input[type="checkbox"]:checked + .u-check__box::after,
.u-check__box[data-state="checked"]::after {
  content: "";
  display: block;
  width: 5px; height: 9px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* MIXED (parent of partial selection) */
.u-check__box[data-state="mixed"] {
  background: var(--u-primary);
  border-color: var(--u-primary);
}
.u-check__box[data-state="mixed"]::after {
  content: "";
  display: block;
  width: 10px; height: 2px;
  background: white;
  border-radius: 1px;
}

/* RADIO — variant of box */
.u-check__box--radio { border-radius: 50%; }
.u-check > input[type="radio"]:checked + .u-check__box--radio,
.u-check__box--radio[data-state="checked"] {
  background: var(--u-surface);
  border-color: var(--u-primary);
  border-width: 5px;
}
.u-check > input[type="radio"]:checked + .u-check__box--radio::after,
.u-check__box--radio[data-state="checked"]::after { display: none; }

/* DISABLED */
.u-check[aria-disabled="true"],
.u-check--disabled {
  cursor: not-allowed;
  color: var(--u-fg-3);
}
.u-check[aria-disabled="true"] > .u-check__box,
.u-check--disabled .u-check__box {
  background: var(--u-surface-sunk);
  border-color: var(--u-slate-200);
}
.u-check[aria-disabled="true"] > input:checked + .u-check__box,
.u-check--disabled .u-check__box[data-state="checked"] {
  background: var(--u-slate-300);
  border-color: var(--u-slate-300);
}

/* HOVER ON CHECKED — slight darken */
.u-check > input[type="checkbox"]:checked:hover + .u-check__box,
.u-check > input[type="radio"]:checked:hover + .u-check__box--radio,
.u-check__box[data-state="checked"]:hover { border-color: var(--u-primary-hover); }
.u-check > input[type="checkbox"]:checked:hover + .u-check__box { background: var(--u-primary-hover); }

/* CITIZEN size — bigger box + label */
.u-check--cit {
  font-size: 16px;
  gap: var(--u-space-3);
}
.u-check--cit .u-check__box {
  width: 22px; height: 22px;
  border-radius: 5px;
}
.u-check--cit .u-check__box--radio { border-radius: 50%; }
.u-check--cit > input[type="radio"]:checked + .u-check__box--radio,
.u-check--cit .u-check__box--radio[data-state="checked"] { border-width: 6px; }


/* ============================================================
   SWITCH — custom track + thumb
   ============================================================ */

.u-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-3);
  cursor: pointer;
  user-select: none;
  font-family: var(--u-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--u-fg-1);
  line-height: 1.4;
}
.u-switch > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0;
}
.u-switch__track {
  position: relative;
  width: 36px; height: 20px;
  border-radius: var(--u-radius-pill);
  background: var(--u-border-strong);
  flex-shrink: 0;
  transition: background var(--u-dur-base) var(--u-ease-out), box-shadow var(--u-dur-fast);
}
.u-switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--u-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.20);
  transition: transform var(--u-dur-base) var(--u-ease-out);
}

/* ON */
.u-switch > input:checked + .u-switch__track,
.u-switch__track[data-state="on"] { background: var(--u-primary); }
.u-switch > input:checked + .u-switch__track > .u-switch__thumb,
.u-switch__track[data-state="on"] > .u-switch__thumb { transform: translateX(16px); }

/* FOCUS */
.u-switch > input:focus-visible + .u-switch__track,
.u-switch__track.is-focus { box-shadow: var(--u-focus-ring); }

/* DISABLED */
.u-switch[aria-disabled="true"],
.u-switch--disabled { cursor: not-allowed; color: var(--u-fg-3); }
.u-switch[aria-disabled="true"] .u-switch__track,
.u-switch--disabled .u-switch__track { background: var(--u-slate-200); }
.u-switch[aria-disabled="true"] > input:checked + .u-switch__track,
.u-switch--disabled .u-switch__track[data-state="on"] { background: var(--u-blue-200); }

/* CITIZEN — larger */
.u-switch--cit { gap: 14px; font-size: 16px; }
.u-switch--cit .u-switch__track { width: 44px; height: 24px; }
.u-switch--cit .u-switch__thumb { width: 20px; height: 20px; top: 2px; left: 2px; }
.u-switch--cit > input:checked + .u-switch__track > .u-switch__thumb,
.u-switch--cit .u-switch__track[data-state="on"] > .u-switch__thumb { transform: translateX(20px); }


/* ============================================================
   GROUP — vertical stacking with consistent spacing
   ============================================================ */

.u-check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.u-check-group--cit { gap: var(--u-space-3); }
.u-check-group--inline { flex-direction: row; flex-wrap: wrap; gap: var(--u-space-4); }


/* ============================================================
   FIELDSET / LEGEND — group radio / checkbox / switch
   ============================================================ */

.u-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.u-fieldset__legend {
  font-family: var(--u-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--u-fg-2);
  padding: 0;
  margin-bottom: var(--u-space-1);
}
.u-fieldset--cit .u-fieldset__legend { font-size: 14px; font-weight: 600; color: var(--u-fg-1); }