/* Safari 17.x bug: `:scope*:hover [descendant]` (Flavor A) and
   `:scope[checked] [descendant]` (Flavor B — attribute-removal restyle)
   both fail inside `@scope`. Selectors moved out. See
   docs/BROWSER-COMPAT.md §3a. */
radio-ui:not([disabled]):hover [slot="dot"] {
  border-color: var(--radio-border-hover);
  background: var(--radio-bg-hover);
}
radio-ui[checked]:not([disabled]):hover [slot="dot"] {
  background: var(--radio-bg-checked-hover);
  border-color: var(--radio-bg-checked-hover);
}
radio-ui[checked] [slot="dot"] {
  background: var(--radio-bg-checked);
  border-color: var(--radio-border-checked);
}
radio-ui[checked] [slot="dot"]::after {
  width: calc(var(--radio-size) * 0.6);
  height: calc(var(--radio-size) * 0.6);
}

@scope (radio-ui) {
  :where(:scope) {
    /* ── Layout ── (size scales with universal [size] attribute via --a-toggle-size) */
    --radio-size:             var(--a-toggle-size);
    --radio-gap:              var(--a-space-2);
    --radio-radius:           var(--a-radius-full);

    /* ── Colors ── */
    --radio-bg:               var(--a-ui-bg);
    --radio-border:           var(--a-ui-border);
    --radio-border-hover:     var(--a-fg-subtle);
    --radio-bg-hover:         var(--a-bg-muted);

    /* ── State: checked ── */
    --radio-bg-checked:       var(--a-primary);
    --radio-border-checked:   var(--a-primary);
    --radio-fg-checked:       var(--a-chrome-light);
    --radio-bg-checked-hover: var(--a-primary-hover);

    /* ── State: disabled ── */
    --radio-fg-disabled:      var(--a-ui-text-disabled);

    /* ── State: focus ── */
    --radio-focus-ring:       var(--a-focus-ring);

    /* ── Typography ── */
    --radio-font-size:        var(--a-ui-size);

    /* ── Transition ── */
    --radio-duration:         var(--a-duration-fast);
    --radio-easing:           var(--a-easing);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--radio-gap);
    cursor: pointer;
    user-select: none;
    font-size: var(--radio-font-size);
    outline: none;
  }
  :scope[disabled] { cursor: not-allowed; color: var(--radio-fg-disabled); }

  /* Dot */
  [slot="dot"] {
    flex-shrink: 0;
    width: var(--radio-size);
    height: var(--radio-size);
    border: 1.5px solid var(--radio-border);
    border-radius: var(--radio-radius);
    background: var(--radio-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      background var(--radio-duration) var(--radio-easing),
      border-color var(--radio-duration) var(--radio-easing);
  }

  /* Inner dot — scales from 0 to 40% when checked */
  [slot="dot"]::after {
    content: '';
    width: 0;
    height: 0;
    border-radius: var(--radio-radius);
    background: var(--radio-fg-checked);
    transition:
      width var(--radio-duration) var(--radio-easing),
      height var(--radio-duration) var(--radio-easing);
  }

  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */

  /* Label */
  :scope[label]::after { content: attr(label); }

  /* Focus */
  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring); }

  /* Size handled by universal [size] attribute system. */
}
