/* Cyber Armor Systems — Checkbox / radio / toggle.  Requires cas-tokens.css.
   Custom (appearance:none) so the checked fill and mark meet contrast:
   unchecked border = --cas-input-border (3:1 vs surface); checked fill =
   --cas-control-fill (navy light / gold-light dark, 3:1 vs surface); mark =
   --cas-control-mark (white light / navy dark, 3:1 on the fill). Focus reuses
   --cas-theme-focus, the shared ring. */

.cas-checkbox,
.cas-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cas-input-border);
  background: var(--cas-theme-surface);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  vertical-align: middle;
}
.cas-checkbox { border-radius: var(--cas-radius-sm); }
.cas-radio    { border-radius: 50%; }

.cas-checkbox:checked,
.cas-radio:checked { background: var(--cas-control-fill); border-color: var(--cas-control-fill); }
.cas-checkbox:checked::before {
  content: "\2713";  /* ✓ */
  color: var(--cas-control-mark);
  font: 900 12px/1 var(--cas-font-heading);
}
.cas-radio:checked::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cas-control-mark);
}

.cas-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 42px; height: 23px;
  border-radius: 12px;
  background: var(--cas-input-border);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  vertical-align: middle;
  transition: background 0.15s ease;
}
.cas-toggle:checked { background: var(--cas-control-fill); }
.cas-toggle::before {
  content: "";
  position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cas-theme-surface);
  transition: left 0.15s ease;
}
.cas-toggle:checked::before { left: 21.5px; }

/* Hover darkens the resting (unchecked) border/track to --cas-theme-text-body. */
.cas-checkbox:hover:not(:checked):not(:disabled),
.cas-radio:hover:not(:checked):not(:disabled)  { border-color: var(--cas-theme-text-body); }
.cas-toggle:hover:not(:checked):not(:disabled) { background: var(--cas-theme-text-body); }

.cas-checkbox:focus-visible,
.cas-radio:focus-visible,
.cas-toggle:focus-visible {
  outline: 3px solid var(--cas-theme-focus);
  outline-offset: 2px;
}
.cas-checkbox:disabled,
.cas-radio:disabled,
.cas-toggle:disabled { opacity: 0.55; cursor: not-allowed; }