/* Safari 17.x bug: `:scope[attr]:hover` (Flavor A) and `:scope[checked]`
   token-block (Flavor B — attribute-removal restyle) both fail inside
   `@scope`. Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
switch-ui:not([disabled]):hover {
  --switch-track-bg: var(--switch-track-bg-hover);
  --switch-track-border: var(--switch-track-border-hover);
}
switch-ui[checked]:not([disabled]):hover {
  --switch-track-bg: var(--switch-track-bg-checked-hover);
  --switch-track-border: var(--switch-track-border-checked-hover);
}
switch-ui[checked] {
  --switch-track-bg: var(--switch-track-bg-checked);
  --switch-track-border: var(--switch-track-border-checked);
  --switch-thumb-bg: var(--switch-thumb-bg-checked);
}
switch-ui[checked] [slot="thumb"] {
  transform: translateX(var(--switch-thumb-travel));
}

@scope (switch-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --switch-gap:                  var(--a-space-2);
    --switch-radius:               var(--a-radius-full);

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

    /* ── Colors ── */
    --switch-track-bg-hover:       var(--a-bg-muted);
    --switch-track-bg-checked-hover: var(--a-primary-hover);
    --switch-track-border-checked-hover: var(--a-primary-hover);
    --switch-thumb-shadow:         var(--a-shadow-sm);

    /* ── Transition ── */
    --switch-duration:             var(--a-duration-fast);
    --switch-easing:               var(--a-easing);

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

    /* ── Track ── (sizes scale with universal [size] attribute via --a-toggle-size) */
    --switch-track-height:         var(--a-toggle-size);
    --switch-track-width:          calc(var(--a-toggle-size) * 1.8);
    --switch-track-bg:             var(--a-ui-bg);
    --switch-track-border:         var(--a-ui-border);
    --switch-track-border-hover:   var(--a-fg-subtle);

    /* ── Track: checked ── */
    --switch-track-bg-checked:     var(--a-primary);
    --switch-track-border-checked: var(--a-primary);

    /* ── Thumb ── (derived from track; inset accounts for border + visual gap) */
    --switch-thumb-inset:          2px;
    --switch-thumb-size:           calc(var(--a-toggle-size) - 2 * var(--switch-thumb-inset) - 2px); /* -2px for 1px border each side */
    --switch-thumb-bg:             var(--a-fg-muted);
    --switch-thumb-bg-checked:     var(--a-chrome-light);
    --switch-thumb-travel:         calc(var(--switch-track-width) - var(--switch-thumb-size) - 2 * var(--switch-thumb-inset) - 2px);

    /* ── State: disabled ── */
    --switch-fg-disabled:          var(--a-ui-text-disabled);
    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(--switch-gap);
    cursor: pointer;
    user-select: none;
    font-size: var(--switch-font-size);
  }
  :scope[disabled] { cursor: not-allowed; color: var(--switch-fg-disabled); }

  [slot="track"] {
    position: relative;
    width: var(--switch-track-width);
    height: var(--switch-track-height);
    border-radius: var(--switch-radius);
    background: var(--switch-track-bg);
    border: 1px solid var(--switch-track-border);
    flex-shrink: 0;
    transition:
      background var(--switch-duration) var(--switch-easing),
      border-color var(--switch-duration) var(--switch-easing);
  }
  /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */

  [slot="thumb"] {
    position: absolute;
    top: var(--switch-thumb-inset);
    left: var(--switch-thumb-inset);
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    border-radius: var(--switch-radius);
    background: var(--switch-thumb-bg);
    box-shadow: var(--switch-thumb-shadow);
    transition:
      transform  var(--switch-duration) var(--switch-easing),
      background var(--switch-duration) var(--switch-easing);
  }
  /* :scope[checked] [slot="thumb"] moved outside @scope — see Safari 17.x bug note at top. */

  [slot="label"] { font-size: var(--switch-font-size); }

  /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ──
     Caption beneath the toggle row; wired to aria-describedby on host. */
  [slot="hint"] {
    display: block;
    margin-top: var(--switch-hint-mt, var(--a-space-1));
    font-size: var(--switch-hint-size, var(--a-ui-xs));
    color: var(--switch-hint-fg, var(--a-fg-muted));
    line-height: var(--switch-hint-lh, 1.4);
  }
  /* The hint is documented (yaml + props table) as rendering BELOW the label,
     but the base `inline-flex` row laid the stamped `[slot="hint"]` out as a
     third inline item (beside the label). When a hint is present, let the row
     wrap and force the hint onto its own full-width line, indented under the
     label (past the track + gap). `:has()`-scoped so hint-less switches keep
     the unchanged single-row layout (no long-label side effects); no display-
     model change (stays inline-flex). The hint span is stamped only when
     [hint] is set (switch.class.js), so this never adds a phantom line. */
  :scope:has([slot="hint"]) { flex-wrap: wrap; }
  :scope:has([slot="hint"]) [slot="hint"] {
    flex-basis: 100%;
    padding-inline-start: calc(var(--switch-track-width) + var(--switch-gap));
  }

  :scope:focus-visible { outline: none; }
  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring); }

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