/* =============================================================
   Socle · Bouton radio (.sc-radio)
   Même base que la case à cocher, en rond, avec un point
   intérieur dessiné en CSS.
   Consomme uniquement des tokens sémantiques.
   Enveloppe : .sc-choice et .sc-choice-group (checkbox.css)
   ============================================================= */

.sc-radio {
  /* Tokens de composant : les états ne font que réassigner ceci.
     Les tailles du contrôle et du point sont structurelles. */
  --_radio-size: var(--space-20);
  --_radio-dot-size: var(--space-8);
  --_radio-bg: var(--color-bg-surface);
  --_radio-border: var(--color-border-strong);
  --_radio-dot: var(--color-text-on-accent);

  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: var(--_radio-size);
  height: var(--_radio-size);
  background: var(--_radio-bg);
  border: var(--border-hairline) solid var(--_radio-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

/* Point intérieur : un cercle plein qui grandit à la sélection. */
.sc-radio::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--_radio-dot-size);
  height: var(--_radio-dot-size);
  border-radius: var(--radius-pill);
  background: var(--_radio-dot);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--motion-fast);
}

.sc-radio:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

/* ---- États ---- */

.sc-radio:checked {
  --_radio-bg: var(--color-accent);
  --_radio-border: var(--color-accent);
}

.sc-radio:hover:not(:disabled),
.sc-radio[data-state="hover"] {
  --_radio-border: var(--color-border-hover);
}

.sc-radio:checked:is(:hover:not(:disabled), [data-state="hover"]) {
  --_radio-bg: var(--color-accent-hover);
  --_radio-border: var(--color-accent-hover);
}

.sc-radio:active:not(:disabled),
.sc-radio[data-state="active"] {
  --_radio-bg: var(--color-bg-active);
  --_radio-border: var(--color-border-hover);
}

.sc-radio:checked:is(:active:not(:disabled), [data-state="active"]) {
  --_radio-bg: var(--color-accent-active);
  --_radio-border: var(--color-accent-active);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-radio[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-radio:disabled,
.sc-radio[data-disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Dans une enveloppe .sc-choice, l'opacité est portée par
   l'enveloppe : on ne la cumule pas sur le contrôle. */
.sc-choice .sc-radio:disabled,
.sc-choice .sc-radio[data-disabled] {
  opacity: 1;
}