/* Safari 17.x bug: `:scope:not(...) [descendant]:hover` inside `@scope`
   doesn't match the scope root. Plain selector outside works. See
   docs/BROWSER-COMPAT.md §3a. */
range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
  background: var(--range-fill-bg-hover, var(--range-fill-bg-hover-default));
}

@scope (range-ui) {
  :where(:scope) {
    /* ── Tokens (wired to --a-ui-*) ── */
    --range-bg-default:              var(--a-ui-bg);
    --range-fill-bg-default:         var(--a-ui-bg);
    --range-fill-bg-hover-default:   var(--a-ui-bg-hover);
    --range-fill-bg-active-default:  var(--a-ui-bg-active);
    --range-fill-bg-disabled-default: var(--a-canvas-muted);
    --range-fill-fg-default:         var(--a-fg);
    --range-fill-fg-disabled-default: var(--a-ui-text-disabled);
    --range-fill-label-fg-default:   var(--a-ui-text-subtle);
    --range-border-default:          var(--a-ui-border);
    --range-border-hover-default:    var(--a-ui-border-hover);
    --range-border-dragging-default: var(--a-ui-border-active);
    --range-focus-ring-default:      var(--a-focus-ring);
    --range-focus-ring-invalid-default: var(--a-focus-ring-invalid);
    --range-radius-default:          var(--a-radius);
    --range-height-default:          var(--a-size);
    --range-px-default:              var(--a-ui-px);
    --range-font-size-default:       var(--a-ui-size);
    --range-label-fg-default:        var(--a-ui-text-placeholder);
    --range-value-fg-default:        var(--a-ui-text);
    --range-value-weight-default:    var(--a-weight-bold);
    --range-suffix-fg-default:       var(--a-ui-text-placeholder);
    --range-fill-pct-default:        0%;

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

    /* ── Layout ── */
    --range-layer-gap-default:       var(--a-space-1);

    /* ── Hover text ── */
    --range-label-fg-hover-default:  var(--a-fg-subtle);

    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
}

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: block;
    cursor: ew-resize;
  }
  :scope[disabled] { cursor: not-allowed; }

  [slot="field"] {
    position: relative;
    display: block;
    min-height: var(--range-height, var(--range-height-default));
    border: 1px solid var(--range-border, var(--range-border-default));
    border-radius: var(--range-radius, var(--range-radius-default));
    overflow: hidden;
    background: var(--range-bg, var(--range-bg-default));
    font: inherit;
    font-size: var(--range-font-size, var(--range-font-size-default));
    line-height: 1;
    transition:
      border-color var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default)),
      background var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default));
    user-select: none;
    touch-action: none;
  }
  [slot="field"]:hover {
    border-color: var(--range-border-hover, var(--range-border-hover-default));
  }
  :scope:focus-visible { outline: none; }
  :scope:focus-visible [slot="field"] {
    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
    box-shadow: var(--range-focus-ring, var(--range-focus-ring-default));
  }
  :scope[aria-invalid="true"]:focus-visible [slot="field"],
  :scope[error]:focus-visible [slot="field"] {
    box-shadow: var(--range-focus-ring-invalid, var(--range-focus-ring-invalid-default));
  }

  /* ── Dual-layer fill: identical layouts, overlay clipped to fill % ── */
  [slot="layer"] {
    display: flex;
    align-items: center;
    gap: var(--range-layer-gap, var(--range-layer-gap-default));
    min-height: var(--range-height, var(--range-height-default));
    padding: 0 var(--range-px, var(--range-px-default));
    box-sizing: border-box;
  }

  [data-layer="fill"] {
    position: absolute;
    inset: 0;
    background: var(--range-fill-bg, var(--range-fill-bg-default));
    clip-path: inset(0 calc(100% - var(--range-fill-pct, var(--range-fill-pct-default))) 0 0);
    pointer-events: none;
    transition: clip-path var(--range-duration, var(--range-duration-default)) var(--range-easing, var(--range-easing-default));
  }

  /* Base layer text colors */
  [data-layer="base"] [slot="label"]  { color: var(--range-label-fg, var(--range-label-fg-default)); }
  [data-layer="base"] [slot="value"]  { color: var(--range-value-fg, var(--range-value-fg-default)); font-weight: var(--range-value-weight, var(--range-value-weight-default)); }
  [data-layer="base"] [slot="suffix"] { color: var(--range-suffix-fg, var(--range-suffix-fg-default)); }

  /* Fill layer text colors (what shows through the filled portion) */
  [data-layer="fill"] [slot="label"]  { color: var(--range-fill-label-fg, var(--range-fill-label-fg-default)); }
  [data-layer="fill"] [slot="value"]  { color: var(--range-fill-fg, var(--range-fill-fg-default)); font-weight: var(--range-value-weight, var(--range-value-weight-default)); }
  [data-layer="fill"] [slot="suffix"] { color: var(--range-fill-fg, var(--range-fill-fg-default)); opacity: 0.75; }

  /* Shared layout rules */
  [slot="label"] {
    white-space: nowrap;
  }
  [slot="value"] {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  [slot="suffix"] {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Hover / focus label brightening on base only */
  [slot="field"]:hover [data-layer="base"] [slot="label"],
  :scope:focus-visible [data-layer="base"] [slot="label"] {
    color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
  }
  [slot="field"]:hover [data-layer="base"] [slot="suffix"],
  :scope:focus-visible [data-layer="base"] [slot="suffix"] {
    color: var(--range-label-fg-hover, var(--range-label-fg-hover-default));
  }

  /* Hover-fill brighten moved outside @scope — see Safari 17.x bug note at top. */

  /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
  :scope[data-dragging] [slot="field"] {
    border-color: var(--range-border-dragging, var(--range-border-dragging-default));
  }
  :scope[data-dragging] [data-layer="fill"] {
    background: var(--range-fill-bg-active, var(--range-fill-bg-active-default));
    transition: none;
  }

  /* Disabled: muted fill + muted text */
  :scope[disabled] [data-layer="fill"] {
    background: var(--range-fill-bg-disabled, var(--range-fill-bg-disabled-default));
  }
  :scope[disabled] [data-layer="fill"] [slot="value"],
  :scope[disabled] [data-layer="fill"] [slot="suffix"],
  :scope[disabled] [data-layer="fill"] [slot="label"] {
    color: var(--range-fill-fg-disabled, var(--range-fill-fg-disabled-default));
  }

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