/*
 * IP Design System - Checkbox / Radio (Form Field component, "Checkbox
 * and radio"). IP-UI-Polish-Batch-1.md §5: the design-system control is
 * mandatory everywhere, public and admin, with no browser-default
 * rendering on any device - iOS Safari in particular kept drawing its
 * own blue rounded box under a bare accent-color, so this is a full
 * appearance:none rebuild. One file, linked from web/layouts/header
 * (public) and admin/layouts/head + admin/login (admin) so both stay
 * identical; values are the design-system tokens with their hex
 * fallbacks (admin doesn't load tokens.css).
 *
 * Box 20x20, radius-sm, 1.5px border-strong on surface; checked =
 * brand-blue fill + border with a white CSS-drawn check (no icon font);
 * hover (pointer devices only) = brand-blue border, or brand-blue-dark
 * fill when checked; focus-visible = 2px focus-ring outline, 2px offset;
 * disabled = surface-100 fill, border border, not-allowed, checked at
 * 60% on border-strong; mixed (indeterminate) = brand-blue with a white
 * bar. Radio: same, round, 10px dot. The check/dot scales in over 120ms
 * ease-out; nothing animates under prefers-reduced-motion.
 *
 * Admin's "plain no-border" subcategory lists (businessEdit's .cat-tree,
 * reviewQueue/show's .subcategory-list) are plain rows around these same
 * controls - they get exactly this check mark and checked color, just no
 * bordered row box around them, as decided.
 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  background: var(--surface, #ffffff);
  border: 1.5px solid var(--border-strong, #80838a);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
input[type="radio"] {
  border-radius: 50%;
}
/* The check mark: a rotated L drawn with two borders, scaled in. */
input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1.5px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: 50% 60%;
  transition: transform 120ms ease-out;
}
input[type="checkbox"]:checked {
  background: var(--brand-blue, #3270a2);
  border-color: var(--brand-blue, #3270a2);
}
input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}
/* Mixed ("select all" with some chosen): white horizontal bar. */
input[type="checkbox"]:indeterminate {
  background: var(--brand-blue, #3270a2);
  border-color: var(--brand-blue, #3270a2);
}
input[type="checkbox"]:indeterminate::after {
  left: 4px;
  top: 7.5px;
  width: 9px;
  height: 2px;
  border: 0;
  background: #ffffff;
  transform: none;
}
/* Radio dot. */
input[type="radio"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--brand-blue, #3270a2);
  transform: scale(0);
  transition: transform 120ms ease-out;
}
input[type="radio"]:checked {
  border-color: var(--brand-blue, #3270a2);
}
input[type="radio"]:checked::after {
  transform: scale(1);
}
/* Hover - pointer devices only. */
@media (hover: hover) {
  input[type="checkbox"]:hover:not(:disabled),
  input[type="radio"]:hover:not(:disabled) {
    border-color: var(--brand-blue, #3270a2);
  }
  input[type="checkbox"]:checked:hover:not(:disabled),
  input[type="checkbox"]:indeterminate:hover:not(:disabled) {
    background: var(--brand-blue-dark, #295b84);
    border-color: var(--brand-blue-dark, #295b84);
  }
  input[type="radio"]:checked:hover:not(:disabled) {
    border-color: var(--brand-blue-dark, #295b84);
  }
  input[type="radio"]:checked:hover:not(:disabled)::after {
    background: var(--brand-blue-dark, #295b84);
  }
}
/* Focus - keyboard only. */
input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) {
  outline: none;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus-ring, #3270a2);
  outline-offset: 2px;
}
/* Disabled. */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background: var(--surface-100, #f2f2f2);
  border-color: var(--border, #dedede);
  cursor: not-allowed;
}
input[type="checkbox"]:disabled:checked,
input[type="checkbox"]:disabled:indeterminate {
  background: var(--border-strong, #80838a);
  border-color: var(--border-strong, #80838a);
  opacity: 0.6;
}
input[type="radio"]:disabled:checked {
  border-color: var(--border-strong, #80838a);
  opacity: 0.6;
}
input[type="radio"]:disabled:checked::after {
  background: var(--border-strong, #80838a);
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"],
  input[type="radio"],
  input[type="checkbox"]::after,
  input[type="radio"]::after {
    transition: none;
  }
}