@layer cm.components {
  .cm-slider {
    --cm-fill: 0%;
    --cm-thumb: 18px;
    --cm-track-h: 6px;
    position: relative;
    display: inline-block;
    inline-size: 100%;
    padding-block: calc((var(--cm-thumb) - var(--cm-track-h)) / 2);
  }

  .cm-slider > input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    margin: 0;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
  }
  .cm-slider > input[type="range"]:focus { outline: none; }

  /* ---- Track (filled via linear-gradient driven by --cm-fill) ---- */
  /* LTR: fill grows from inline-start. RTL: mirror so fill still starts inline-start. */
  .cm-slider > input[type="range"]::-webkit-slider-runnable-track {
    block-size: var(--cm-track-h);
    border-radius: var(--radius-pill, 999px);
    background:
      linear-gradient(to right, var(--brand) 0 var(--cm-fill), transparent var(--cm-fill) 100%),
      var(--surface-2);
  }
  [dir="rtl"] .cm-slider > input[type="range"]::-webkit-slider-runnable-track {
    background:
      linear-gradient(to left, var(--brand) 0 var(--cm-fill), transparent var(--cm-fill) 100%),
      var(--surface-2);
  }
  .cm-slider > input[type="range"]::-moz-range-track {
    block-size: var(--cm-track-h);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-2);
  }
  .cm-slider > input[type="range"]::-moz-range-progress {
    block-size: var(--cm-track-h);
    border-radius: var(--radius-pill, 999px);
    background: var(--brand);
  }

  /* ---- Thumb ---- */
  .cm-slider > input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: var(--cm-thumb);
    block-size: var(--cm-thumb);
    margin-block-start: calc((var(--cm-track-h) - var(--cm-thumb)) / 2);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface, #fff);
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-fast, 120ms) var(--ease-std, ease),
                transform var(--dur-fast, 120ms) var(--ease-std, ease);
  }
  .cm-slider > input[type="range"]::-moz-range-thumb {
    inline-size: var(--cm-thumb);
    block-size: var(--cm-thumb);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface, #fff);
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-fast, 120ms) var(--ease-std, ease),
                transform var(--dur-fast, 120ms) var(--ease-std, ease);
  }

  .cm-slider > input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--brand-50, #eff6ff), var(--shadow-sm);
  }
  .cm-slider > input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--brand-50, #eff6ff), var(--shadow-sm);
  }
  .cm-slider > input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
  .cm-slider > input[type="range"]:active::-moz-range-thumb { transform: scale(1.1); }

  .cm-slider > input[type="range"]:disabled { cursor: not-allowed; opacity: 0.55; }

  /* ---- Value bubble ---- */
  .cm-slider-bubble {
    position: absolute;
    inset-block-end: calc(100% - 2px);
    inset-inline-start: 0;
    transform: translateX(-50%);
    padding: 2px 8px;
    min-inline-size: 1.5em;
    border-radius: var(--radius-md, 10px);
    background: var(--text, #0f172a);
    color: var(--surface, #fff);
    font-size: 0.75rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast, 120ms) var(--ease-std, ease);
    z-index: var(--z-tooltip, 1200);
  }
  [dir="rtl"] .cm-slider-bubble { transform: translateX(50%); }

  .cm-slider-bubble::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-block-start-color: var(--text, #0f172a);
  }
  [dir="rtl"] .cm-slider-bubble::after { transform: translateX(50%); }

  .cm-slider.is-active .cm-slider-bubble {
    opacity: 1;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .cm-slider > input[type="range"]::-webkit-slider-thumb,
    .cm-slider > input[type="range"]::-moz-range-thumb,
    .cm-slider-bubble { transition: none; }
  }
}