/* range-fx: real DOM fill instead of a custom-property gradient (repaints while dragging) */

/* theme the native control everywhere so a bare <input type=range> is never
   the browser-default blue — matches the pistachio accent used by checkboxes */
input[type="range"]{accent-color:var(--accent,#8FAE7A)}

.range-wrap{position:relative;flex:1;display:flex;align-items:center;min-height:24px;width:100%}
.range-wrap .range-bar{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:999px;background:var(--line,rgba(128,128,128,.28));overflow:hidden;pointer-events:none;box-shadow:inset 0 1px 1px rgba(59,51,48,.12)}
.range-wrap .range-fill{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent2,#D7A7A0),var(--accent,#8FAE7A))}
.range-wrap input[type="range"]{position:relative;z-index:1;width:100%;background:transparent !important;margin:0}
.range-wrap input[type="range"]{-webkit-appearance:none;appearance:none;border:0 !important;box-shadow:none !important;outline:none;height:24px;padding:0;cursor:pointer}

/* track is transparent — the .range-bar/.range-fill show through */
.range-wrap input[type="range"]::-webkit-slider-runnable-track{height:24px;background:transparent;border:0}
.range-wrap input[type="range"]::-moz-range-track{height:24px;background:transparent;border:0}
.range-wrap input[type="range"]::-moz-range-progress{background:transparent}

/* themed thumb: warm cream disc with a pistachio ring + soft pudra shadow */
.range-wrap input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#fff,var(--surface,#FBF6F2) 70%);
  border:3px solid var(--accent-text,#4F6B3C);
  box-shadow:0 2px 6px -1px rgba(59,51,48,.4),0 0 0 0 rgba(143,174,122,0);
  transition:box-shadow .2s ease,transform .12s ease,border-color .2s ease}
.range-wrap input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#fff,var(--surface,#FBF6F2) 70%);
  border:3px solid var(--accent-text,#4F6B3C);
  box-shadow:0 2px 6px -1px rgba(59,51,48,.4);
  transition:box-shadow .2s ease,transform .12s ease,border-color .2s ease}

/* hover / active — warm pistachio glow, subtle grow */
.range-wrap input[type="range"]:hover::-webkit-slider-thumb{box-shadow:0 2px 8px -1px rgba(59,51,48,.45),0 0 0 6px rgba(143,174,122,.22)}
.range-wrap input[type="range"]:hover::-moz-range-thumb{box-shadow:0 2px 8px -1px rgba(59,51,48,.45),0 0 0 6px rgba(143,174,122,.22)}
.range-wrap input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.1);border-color:var(--accent,#8FAE7A)}
.range-wrap input[type="range"]:active::-moz-range-thumb{transform:scale(1.1);border-color:var(--accent,#8FAE7A)}

/* ring only for keyboard focus — no orange frame while dragging with mouse/finger */
.range-wrap:has(input[type="range"]:focus-visible){outline:2px solid var(--accent-text,#4F6B3C);outline-offset:6px;border-radius:999px}
.range-wrap input[type="range"]:focus{outline:none}
.range-wrap input[type="range"]:focus-visible{outline:none}
.range-wrap input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 8px -1px rgba(59,51,48,.45),0 0 0 6px rgba(143,174,122,.3)}
.range-wrap input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 2px 8px -1px rgba(59,51,48,.45),0 0 0 6px rgba(143,174,122,.3)}

@media (prefers-reduced-motion:no-preference){.range-wrap .range-fill{transition:width .05s linear}}
@media (prefers-reduced-motion:reduce){
  .range-wrap input[type="range"]::-webkit-slider-thumb{transition:none}
  .range-wrap input[type="range"]::-moz-range-thumb{transition:none}
}