/* A slider of a few stops (shared/stop-slider.js): the bug report's impact and a campaign follow-up's time.
   Set on it or on the field around it: --thumb (the thumb's width, 40px), --thumb-h (26px), --rail (6px), --rail-off (the
   rail's colour) and --tone (the fill's). stop-slider.js sets --fill (0–1) as the thumb moves, and data-held / data-input
   on the field around it while it is held.
   The rail is drawn here, not by the input: it runs from the thumb's centre at the first stop to its centre at the last,
   so each end sits under the thumb. ::before is the rail, ::after the fill up to the thumb. The pointer is handled by
   stop-slider.js on .stop-slider, not by the input (it lets the thumb chase, rubber-band and stretch); the input is still
   the focus and the keyboard's. */
.stop-slider{position:relative;display:grid;align-items:center;height:36px;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.stop-slider::before,.stop-slider::after{content:"";position:absolute;top:50%;left:calc((var(--thumb,40px) - var(--rail,6px)) / 2);height:var(--rail,6px);margin-top:calc(var(--rail,6px) / -2);border-radius:999px;pointer-events:none}
.stop-slider::before{right:calc((var(--thumb,40px) - var(--rail,6px)) / 2);background:var(--rail-off,color-mix(in srgb,var(--text) 10%,transparent))}
.stop-slider::after{width:calc(var(--rail,6px) + (100% - var(--thumb,40px)) * var(--fill,0));background:var(--tone,var(--text))}
.stop-slider:has(input:disabled){opacity:.5;cursor:not-allowed}
.stop-slider input{position:relative;z-index:2;appearance:none;width:100%;height:36px;margin:0;padding:0;border:0;background:transparent;pointer-events:none}
.stop-slider input::-webkit-slider-runnable-track{height:100%;background:none}
.stop-slider input::-moz-range-track{background:none}
.stop-slider input::-moz-range-progress{background:none}
/* A white pill for a thumb, lifted off the rail. Moving, it stretches the way it goes and thins (--sx/--sy), and pulled
   past an end it grows toward the pull (--shift), all set per frame by stop-slider.js; --lift is how far it is lifted
   while held. */
@property --lift{syntax:"<number>";inherits:true;initial-value:1}
.stop-slider input{--sx:1;--sy:1;--shift:0px}
.stop-slider input::-webkit-slider-thumb{appearance:none;width:var(--thumb,40px);height:var(--thumb-h,26px);margin-top:calc((36px - var(--thumb-h,26px)) / 2);border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 .5px oklch(0 0 0 / .1),0 1px 2px oklch(0 0 0 / .12),0 3px 8px oklch(0 0 0 / .14);transform:translateX(var(--shift)) scale(calc(var(--lift) * var(--sx)),calc(var(--lift) * var(--sy)))}
.stop-slider input::-moz-range-thumb{width:var(--thumb,40px);height:var(--thumb-h,26px);border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 .5px oklch(0 0 0 / .1),0 1px 2px oklch(0 0 0 / .12),0 3px 8px oklch(0 0 0 / .14);transform:translateX(var(--shift)) scale(calc(var(--lift) * var(--sx)),calc(var(--lift) * var(--sy)))}
/* Held, it lifts: barely under a mouse or trackpad, more under a finger, as Apple's controls do. Quick in, quick out, and
   not at all for those who asked for less motion. Only the lift eases: the stretch is already moving with the thumb,
   frame by frame. */
@media(prefers-reduced-motion:no-preference){
  .stop-slider input{transition:--lift .12s cubic-bezier(.16,1,.3,1)}
  .stop-slider input::-webkit-slider-thumb{transition:box-shadow .12s}
  [data-held]>.stop-slider input{--lift:1.04}
  [data-held]>.stop-slider input::-webkit-slider-thumb{box-shadow:0 0 0 .5px oklch(0 0 0 / .1),0 2px 4px oklch(0 0 0 / .12),0 6px 16px oklch(0 0 0 / .16)}
  [data-held][data-input="touch"]>.stop-slider input{--lift:1.15}
}
/* Only the thumb is ringed. */
.stop-slider input:focus{outline:none;box-shadow:none}
.stop-slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--focus),0 3px 8px oklch(0 0 0 / .14)}
.stop-slider input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--focus),0 3px 8px oklch(0 0 0 / .14)}
/* A notch at each stop, on the rail under the thumb's centre at that stop: light once the fill has passed it. The rail's
   ends already mark the first and last stops. */
.stop-slider-ticks{position:absolute;z-index:1;inset:0 calc(var(--thumb,40px) / 2);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.stop-slider-ticks i{width:4px;height:4px;margin:0 -2px;border-radius:50%;background:color-mix(in srgb,var(--text) 28%,transparent);transition:background-color .15s}
.stop-slider-ticks i.is-reached{background:oklch(1 0 0 / .75)}
.stop-slider-ticks i:is(:first-child,:last-child){visibility:hidden}

/* The field around it, for enhanceStopSlider() (stop-slider.js): the slider, and under it a name for each stop, as the
   bug report's impact has them (portal/status.css .status-stops, copied). The first name sits under the left end, the
   middle one centred, the last under the right end, so the names line up with two or three stops (more stops: leave
   the names out, or place them as the campaign follow-up does); the chosen one in full. Pressed, a name glides the
   thumb there.
   <div class="stop-slider-field" data-stop="1">
     <div class="stop-slider">
       <input type="range" min="0" max="2" step="1" value="1" aria-label="…">
       <span class="stop-slider-ticks" aria-hidden="true"><i></i><i></i><i></i></span>
     </div>
     <div class="stop-slider-names" aria-hidden="true">
       <button type="button" tabindex="-1" data-stop="0">…</button>
       <button type="button" tabindex="-1" class="is-on" data-stop="1">…</button>
       <button type="button" tabindex="-1" data-stop="2">…</button>
     </div>
   </div> */
.stop-slider-field{display:grid;gap:8px;min-width:0}
.stop-slider-names{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.stop-slider-names button{min-height:28px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;line-height:1.3;cursor:pointer;transition:color .15s}
.stop-slider-names button:first-child{text-align:left}
.stop-slider-names button:last-child:not(:first-child){text-align:right}
@media(hover:hover){.stop-slider-names button:hover{color:var(--text)}}
.stop-slider-names button.is-on{color:var(--text);font-weight:600}
.stop-slider-field:has(input:disabled) .stop-slider-names{opacity:.5;cursor:not-allowed}
.stop-slider-field:has(input:disabled) .stop-slider-names button{pointer-events:none}

/* Coloured by stop, as the bug report's impact is (portal/status.css): green, amber, red for stops 0, 1, 2, brighter
   than the theme's status tones on purpose. enhanceStopSlider() keeps data-stop on the field at the nearest stop.
   <div class="stop-slider-field stop-slider-impact" data-stop="1"> */
@property --impact-tone{syntax:"<color>";inherits:true;initial-value:#f59e0b}
.stop-slider-impact{--impact-minor:#16a34a;--impact-major:#f59e0b;--impact-blocking:#e5383b;--impact-tone:var(--impact-major);transition:--impact-tone .2s}
:root:not([data-theme="light"]) .stop-slider-impact{--impact-minor:#34d474;--impact-major:#fbbf24;--impact-blocking:#ff5c5f}
.stop-slider-impact[data-stop="0"]{--impact-tone:var(--impact-minor)}
.stop-slider-impact[data-stop="2"]{--impact-tone:var(--impact-blocking)}
.stop-slider-impact .stop-slider{--tone:var(--impact-tone)}