/* ============================================================
   COMPONENT · CHECKS
   Styled checkbox (.c-checkbox) + radio (.c-radio). Machined
   bezel + lit signal glow when checked, modeled on .c-toggle
   (06-components/_toggle.css). `appearance: none` preserves the
   native control semantics (Space toggles the checkbox; arrows
   move within a radio group) and keyboard operability.

   Birren: a checked control is an active signal — light it. The
   focus ring stays cyan, consistent with 03-generic/_focus.css.
   ============================================================ */

.c-checkbox,
.c-radio {
  --chk-on: var(--color-ok);
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-bezel-dark);
  box-shadow: var(--shadow-inset-deep);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-snap),
    box-shadow var(--dur-fast) var(--ease-snap),
    border-color var(--dur-fast) var(--ease-snap);
}

.c-checkbox { border-radius: var(--radius-xs); }
.c-radio    { border-radius: var(--radius-circle); }

/* The machined mark, hidden until checked. */
.c-checkbox::before,
.c-radio::before {
  content: "";
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-snap);
}

/* Checkbox: a checkmark drawn with a clip-path tick. */
.c-checkbox::before {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--chk-on);
  box-shadow: 0 0 6px var(--chk-on);
  clip-path: polygon(14% 44%, 0 65%, 42% 100%, 100% 18%, 84% 0, 38% 70%);
}

/* Radio: a lit dot. */
.c-radio::before {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-circle);
  background: var(--chk-on);
  box-shadow: 0 0 6px var(--chk-on);
}

.c-checkbox:checked,
.c-radio:checked {
  background: color-mix(in srgb, var(--chk-on) 22%, var(--color-surface-sunken));
  border-color: color-mix(in srgb, var(--chk-on) 60%, var(--color-bezel-dark));
  box-shadow:
    var(--shadow-inset-deep),
    inset 0 0 8px color-mix(in srgb, var(--chk-on) 45%, transparent);
}

.c-checkbox:checked::before,
.c-radio:checked::before { transform: scale(1); }

.c-checkbox:focus-visible,
.c-radio:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-inset-deep), var(--glow-cyan);
}

.c-checkbox:disabled,
.c-radio:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6) brightness(0.7);
}

/* Signal-tint variants, mirroring .c-toggle's modifiers. */
.c-checkbox--primary, .c-radio--primary { --chk-on: var(--color-primary); }
.c-checkbox--alert,   .c-radio--alert   { --chk-on: var(--color-alert); }
.c-checkbox--danger,  .c-radio--danger  { --chk-on: var(--color-danger); }