/* Day Tracker Lego module: scale-slider
   Active slider CSS boundary for future slider-only visual changes.
   The same visual rules also remain in styles.css as a safe fallback for this extraction step. */

.hscale-labels{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 4px 8px;color:var(--clay-soft);font-family:var(--ff-head);font-weight:900;font-size:.98rem;}
.horizontal-scale{display:block;margin:6px auto 6px;max-width:430px;width:100%;}
.hscale-main,.vs-main.hscale-main{width:100%;height:86px;touch-action:none;user-select:none;-webkit-user-select:none;}
.hscale-track,.vs-track.hscale-track{position:absolute;left:34px;right:34px;top:50%;bottom:auto;transform:translateY(-50%);width:auto;height:26px;border-radius:999px;background:linear-gradient(90deg,rgba(230,106,85,.18) 0%,rgba(247,200,100,.20) 50%,rgba(85,183,122,.20) 100%);box-shadow:inset 0 2px 6px rgba(40,55,75,.10);overflow:hidden;}
.hscale-fill,.vs-fill.hscale-fill{position:absolute;top:0;bottom:0;left:0;right:auto;height:100%;width:0;border-radius:999px;transition:width .1s ease, background .15s ease;background:var(--scale-colour, var(--coral));}

/* v38.1: keep the horizontal slider fill synced to the value colour.
   This deliberately stays inside the scale-slider CSS boundary.
   It uses !important only to override older global .vs-fill rules in styles.css. */
.vs-fill.hscale-fill{background:var(--scale-colour, var(--coral)) !important;}
.hscale-handle,.vs-handle.hscale-handle{top:50%;left:34px;width:68px;height:68px;border-width:5px;border-color:var(--scale-colour, var(--coral));transform:translate(-50%,-50%);background:#fff;}
.hscale-handle .vs-val{font-size:1.75rem;}
.hscale-main.pending .hscale-handle{border-color:#D7DEE8;}
.hscale-main.pending .hscale-fill{opacity:.26;}
.hscale-main.pending .vs-val{color:#B7BEC9;}
.hscale-ticks,.vs-ticks.hscale-ticks{position:absolute;inset:0;pointer-events:none;}
.hscale-tick,.vs-tick.hscale-tick{position:absolute;top:50%;width:2px;height:10px;transform:translate(-50%,-50%);border-radius:999px;background:rgba(80,95,120,.14);left:auto;right:auto;}
.hscale-nums{position:relative;height:18px;max-width:430px;margin:0 auto;}
.hscale-num,.vs-num.hscale-num{position:absolute;top:0;right:auto;transform:translateX(-50%);color:#9CA3AF;font:.78rem/1 var(--ff-head);font-weight:900;}
.hscale-avg,.vs-avg.hscale-avg{position:absolute;top:8px;bottom:auto;width:auto;left:34px;right:auto;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;transform:translateX(-50%);}
.hscale-avg .ln{position:absolute;top:34px;bottom:auto;height:34px;left:50%;right:auto;width:0;border-top:0;border-left:2px dashed rgba(92,67,57,.38);}
.hscale-avg .tag{transform:none;background:var(--clay);color:#fff;}
.haptic-track-tick .hscale-track{box-shadow:inset 0 2px 6px rgba(40,55,75,.10),0 0 0 6px rgba(242,107,56,.08);}