/* CUISlider - mirrors cui_slider.dart (frontend/julia_commons, Oct 12). Ruler-style track: control-colour pill (20px) with hairline ticks,
   a raised pill handle (40x28, hairline border, icon shadow) that overshoots the track by 4px, optional default-stop marker.
   Geometry: handle centre p(f) = 20px + f * (100% - 40px). Handle glide 220ms easeOutCubic (90ms while dragging).
   Disabled = 0.4 opacity. Drag = handle scales 1.1 (120ms ease). */
@property --_f { syntax: '<number>'; inherits: true; initial-value: 0.5; }
.cui-slider { -webkit-font-smoothing: auto; --_f: 0.5; --_p: calc(20px + var(--_f) * (100% - 40px));
  --_hw: var(--cui-space-2xl); --_hh: calc(var(--cui-img-xxs) + 4 * var(--cui-space-2xs)); --_th: calc(var(--cui-img-xxs) + 2 * var(--cui-space-2xs));
  display: flex; flex-direction: column; align-items: stretch; width: 100%; box-sizing: border-box; user-select: none; -webkit-user-select: none;
  transition: --_f calc(220ms / var(--cui-speed, 1)) cubic-bezier(0.215, 0.61, 0.355, 1); }
.cui-slider.is-following { transition-duration: calc(90ms / var(--cui-speed, 1)); }
.cui-slider.is-disabled { opacity: .4; }

.cui-slider__heading { display: flex; align-items: center; gap: var(--cui-space-xs); margin-bottom: var(--cui-space-sm); }
.cui-slider__leading { width: var(--cui-img-xs2); height: var(--cui-img-xs2); flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; overflow: hidden; }
.cui-slider__texts { display: flex; flex-direction: column; min-width: 0; color: var(--cui-color-text-default); }
.cui-slider__title { font-family: var(--cui-type-body-md-semi-family); font-size: var(--cui-type-body-md-semi-size); font-weight: var(--cui-type-body-md-semi-weight);
  letter-spacing: var(--cui-type-body-md-semi-spacing); line-height: round(nearest, var(--cui-type-body-md-semi-line), 1px); }
.cui-slider__subtitle { font-family: var(--cui-type-caption-family); font-size: var(--cui-type-caption-size); font-weight: var(--cui-type-caption-weight);
  letter-spacing: var(--cui-type-caption-spacing); line-height: round(nearest, var(--cui-type-caption-line), 1px); }

.cui-slider__track { position: relative; box-sizing: border-box; height: var(--_th); min-width: 160px; width: 100%;
  background: var(--cui-color-surface-bg-control); border-radius: var(--cui-radius-pill);
  cursor: pointer; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; }
.cui-slider.is-disabled .cui-slider__track { cursor: default; }

/* ruler ticks: 8px tall, hairline wide, round caps; the ones next to the handle (+-4px clearance) are not painted */
.cui-slider__tick { position: absolute; top: 50%; height: var(--cui-space-xs); width: 1px; margin: calc(var(--cui-space-xs) / -2) 0 0 0;
  /* Flutter strokes a 0.5px line centred on the stop: it anti-aliases over two device pixels. 1px box shifted -0.5px at 50% alpha reproduces that. */
  border-radius: var(--cui-radius-pill); background: var(--cui-color-border-hairline); opacity: .5; transform: translateX(-0.5px);
  left: calc(20px + var(--_t) * (100% - 40px)); }
.cui-slider__tick.is-unreachable { background: var(--cui-color-border-disabled); }
.cui-slider__tick.is-hidden { display: none; }

/* default-stop marker: warning line standing in for that tick, grows in (320ms easeOutBack) when the value leaves the default */
.cui-slider__marker { position: absolute; top: 50%; width: var(--cui-img-slider); height: var(--cui-img-xs1);
  margin: calc(var(--cui-img-xs1) / -2) 0 0 calc(var(--cui-img-slider) / -2); border-radius: var(--cui-radius-pill);
  background: var(--cui-color-surface-bg-warning); left: calc(20px + var(--_t) * (100% - 40px));
  transform: scaleY(0); opacity: 0;
  transition: transform calc(180ms / var(--cui-speed, 1)) cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity calc(180ms / var(--cui-speed, 1)) ease-in; }
.cui-slider__marker.is-shown { transform: scaleY(1); opacity: 1;
  transition: transform calc(320ms / var(--cui-speed, 1)) cubic-bezier(0.34, 1.56, 0.64, 1), opacity calc(320ms / var(--cui-speed, 1)) ease-out; }

.cui-slider__handle { position: absolute; top: 50%; width: var(--_hw); height: var(--_hh); margin-top: calc(var(--_hh) / -2);
  left: calc(var(--_f) * (100% - 40px)); box-sizing: border-box; border-radius: var(--cui-radius-pill);
  background: var(--cui-color-surface-bg-raised);
  box-shadow: inset 0 0 0 var(--cui-border-hairline) var(--cui-color-border-hairline), var(--cui-shadow-icon);
  transform: scale(1); transition: transform calc(120ms / var(--cui-speed, 1)) ease; }
.cui-slider.is-dragging .cui-slider__handle { transform: scale(1.1); }

.cui-slider__labels { display: flex; align-items: flex-start; margin-top: var(--cui-space-xs); }
.cui-slider__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--cui-type-caption-family); font-size: var(--cui-type-caption-size); font-weight: var(--cui-type-caption-weight);
  letter-spacing: var(--cui-type-caption-spacing); line-height: round(nearest, var(--cui-type-caption-line), 1px); color: var(--cui-color-text-muted); }
.cui-slider__label--start, .cui-slider__label--end { flex: 1 1 0; }
.cui-slider__label--end { text-align: right; }
.cui-slider__label--mid { flex: 0 1 auto; margin: 0 var(--cui-space-2xs); }
.cui-slider__label.is-emphasized { font-family: var(--cui-type-caption-md-family); font-size: var(--cui-type-caption-md-size); font-weight: var(--cui-type-caption-md-weight);
  letter-spacing: var(--cui-type-caption-md-spacing); line-height: round(nearest, var(--cui-type-caption-md-line), 1px); color: var(--cui-color-text-default); }
.cui-slider__label.is-disabled { color: var(--cui-color-text-disabled); }