/* Safari 17.x bug: `:scope*:hover` and `:scope[dyn-attr]` inside `@scope`
   don't match (Flavor A) or don't restyle on attribute removal (Flavor B).
   For [checked] / [indeterminate], when JS toggles the attribute off,
   Safari leaves the visual stuck — selectors moved out as plain
   `tagname[attr]` rules. See docs/BROWSER-COMPAT.md §3a. */
check-ui:not([disabled]):hover [slot="box"] {
  border-color: var(--check-border-hover);
  background: var(--check-bg-hover);
}
check-ui[checked]:not([disabled]):hover [slot="box"],
check-ui[indeterminate]:not([disabled]):hover [slot="box"] {
  background: var(--check-bg-checked-hover);
  border-color: var(--check-bg-checked-hover);
}
check-ui[checked] [slot="box"],
check-ui[indeterminate] [slot="box"] {
  background: var(--check-bg-checked);
  border-color: var(--check-border-checked);
}
check-ui[checked] {
  --_icon-w:         calc(var(--check-size) * 0.3);
  --_icon-h:         calc(var(--check-size) * 0.55);
  --_icon-border:    solid var(--check-fg-checked);
  --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
  --_icon-transform: rotate(45deg) translate(-1px, -1px);
}
check-ui[indeterminate] {
  --_dash-bg: var(--check-fg-checked);
  --_icon-w:  calc(var(--check-size) * 0.5);
  --_icon-h:  calc(var(--check-size) * 0.12);
}

@scope (check-ui) {
  :where(:scope) {
    /* ── Tokens ── (size scales with universal [size] attribute via --a-toggle-size) */
    --check-size:             var(--a-toggle-size);
    --check-gap:              var(--a-space-2);
    --check-font-size:        var(--a-ui-size);
    --check-radius:           min(var(--a-radius-md), var(--a-space-1-5));

    /* ── State: default ── */
    --check-bg:               var(--a-ui-bg);
    --check-border:           var(--a-ui-border);
    --check-border-hover:     var(--a-fg-subtle);

    /* ── Transitions ── */
    --check-duration:         var(--a-duration-fast);
    --check-easing:           var(--a-easing);

    /* ── Focus ── */
    --check-focus-ring:       var(--a-focus-ring);

    /* ── State: default hover ── */
    --check-bg-hover:         var(--a-bg-muted);

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

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

    /* ── Check icon (CSS border trick, no SVG) ── */
    --_icon-w:    0;
    --_icon-h:    0;
    --_icon-border: none;
    --_icon-bw:   0;
    --_icon-transform: none;

    /* ── Indeterminate indicator ── */
    --_dash-bg:   transparent;
    --_dash-w:    0;
    --_dash-h:    0;
    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(--check-gap);
    cursor: pointer;
    user-select: none;
    font-size: var(--check-font-size);
    outline: none;
  }
  :scope[disabled] { cursor: not-allowed; color: var(--check-fg-disabled); }

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

  /* Icon (checkmark or dash) */
  [slot="box"]::after {
    content: '';
    width: var(--_icon-w);
    height: var(--_icon-h);
    border: var(--_icon-border);
    border-width: var(--_icon-bw);
    transform: var(--_icon-transform);
    background: var(--_dash-bg);
  }

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

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

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

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