/* 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);
}

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

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

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

    /* ── Hover text ── */
    --range-label-fg-hover:  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);
    border: 1px solid var(--range-border);
    border-radius: var(--range-radius);
    overflow: hidden;
    background: var(--range-bg);
    font: inherit;
    /* font-family floor — see segment.css rationale. */
    font-family: var(--range-font-family);
    font-size: var(--range-font-size);
    line-height: 1;
    transition:
      border-color var(--range-duration) var(--range-easing),
      background var(--range-duration) var(--range-easing);
    user-select: none;
    touch-action: none;
  }
  [slot="field"]:hover {
    border-color: var(--range-border-hover);
  }
  :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);
  }
  :scope[aria-invalid="true"]:focus-visible [slot="field"],
  :scope[error]:focus-visible [slot="field"] {
    box-shadow: var(--range-focus-ring-invalid);
  }

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

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

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

  /* Fill layer text colors (what shows through the filled portion) */
  [data-layer="fill"] [slot="label"]  { color: var(--range-fill-label-fg); }
  [data-layer="fill"] [slot="value"]  { color: var(--range-fill-fg); font-weight: var(--range-value-weight); }
  [data-layer="fill"] [slot="suffix"] { color: var(--range-fill-fg); 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);
  }
  [slot="field"]:hover [data-layer="base"] [slot="suffix"],
  :scope:focus-visible [data-layer="base"] [slot="suffix"] {
    color: var(--range-label-fg-hover);
  }

  /* 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);
  }
  :scope[data-dragging] [data-layer="fill"] {
    background: var(--range-fill-bg-active);
    transition: none;
  }

  /* Disabled: muted fill + muted text */
  :scope[disabled] [data-layer="fill"] {
    background: var(--range-fill-bg-disabled);
  }
  :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);
  }

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