/* ============================================================
   components/range.css — Majestic V2 range control
   ------------------------------------------------------------
   A range uses an external legend label (never a floating notch
   inside the track) plus a persistent inline value fallback and a
   value bubble that remains visible above the authored thumb.
   The native <input type="range"> stays the source of truth.

     <div class="majestic-range" data-majestic-range>
         <div class="majestic-range__header">
             <label class="majestic-range__legend" for="vol">Volume</label>
             <output class="majestic-range__output" for="vol">50</output>
         </div>
         <div class="majestic-range__track">
             <input class="majestic-range__input" type="range"
                    id="vol" min="0" max="100" value="50">
             <span class="majestic-range__bubble" aria-hidden="true">50</span>
         </div>
     </div>

   --range-progress (0–100) is written by the runtime so the filled
   portion of the track derives from tokens without inline colors.
   ============================================================ */

.majestic-range {
    --range-progress: 0%;
    --range-thumb-size: 18px;
    --range-track-height: 6px;
    display: grid;
    gap: 8px;
    min-width: 0;
    font-family: var(--font-input);
}

.majestic-range__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.majestic-range__legend {
    color: var(--text-muted-color);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.majestic-range__output {
    color: var(--text-color);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.majestic-range__track {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(var(--range-thumb-size) + 30px);
    padding-top: 30px;
}

/* --- Native input, restyled ---------------------------------------------- */

.majestic-range__input {
    width: 100%;
    height: var(--range-thumb-size);
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.majestic-range__input:focus { outline: none; }

/* Track — a token gradient splits at --range-progress into fill / rail. */
.majestic-range__input::-webkit-slider-runnable-track {
    height: var(--range-track-height);
    border-radius: var(--radius-pill);
    background: linear-gradient(
        to right,
        var(--primary-color) 0%,
        var(--primary-color) var(--range-progress),
        var(--surface-3) var(--range-progress),
        var(--surface-3) 100%
    );
}
.majestic-range__input::-moz-range-track {
    height: var(--range-track-height);
    border-radius: var(--radius-pill);
    background: var(--surface-3);
}
.majestic-range__input::-moz-range-progress {
    height: var(--range-track-height);
    border-radius: var(--radius-pill);
    background: var(--primary-color);
}

/* Thumb */
.majestic-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
    border: 2px solid var(--surface-1);
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: var(--control-thumb-shadow);
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.majestic-range__input::-moz-range-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border: 2px solid var(--surface-1);
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: var(--control-thumb-shadow);
}
.majestic-range__input:hover::-webkit-slider-thumb { transform: scale(1.08); }
.majestic-range__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus); }
.majestic-range__input:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-focus); }

.majestic-range--disabled { opacity: 0.55; }
.majestic-range--disabled .majestic-range__input { cursor: not-allowed; }

/* --- Persistent value bubble --------------------------------------------- */

.majestic-range__bubble {
    position: absolute;
    bottom: calc(var(--range-thumb-size) + 6px);
    left: var(--range-thumb-position, var(--range-progress));
    transform: translateX(-50%);
    padding: 3px 8px;
    color: var(--on-accent-color);
    background: var(--primary-color);
    border-radius: var(--radius-control);
    font-size: 0.6875rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
}
.majestic-range__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--primary-color);
}
@media (prefers-reduced-motion: reduce) {
    .majestic-range__input::-webkit-slider-thumb,
    .majestic-range__bubble { transition-duration: 0.01ms; }
    .majestic-range__input:hover::-webkit-slider-thumb { transform: none; }
}

@media (forced-colors: active) {
    .majestic-range__input::-webkit-slider-runnable-track { background: linear-gradient(to right, Highlight 0%, Highlight var(--range-progress), ButtonFace var(--range-progress), ButtonFace 100%); }
    .majestic-range__input::-webkit-slider-thumb { background: Highlight; border-color: Canvas; }
    .majestic-range__input::-moz-range-thumb { background: Highlight; border-color: Canvas; }
    .majestic-range__bubble { color: HighlightText; background: Highlight; }
}