/* Horizontal slider drags belong to the range only; document zoom/scroll and
   prompt text keep their existing touch behavior everywhere else. */
html.phone-layout input[type=range]{touch-action:none}
/* R129j review: native horizontal values, slim gray face, full input hit area. */
html{--cvb-grip-ink:#929292;--cvb-slider-track:#c5c5c5}
html[data-theme=dark]{--cvb-slider-track:#777}
html body :is(#mode-sizing-controls,#viewer-transparency,#full-view #video-transport,#phone-viewer-core,#settings-panel) input[type=range]{appearance:none!important;-webkit-appearance:none!important;background:transparent!important;min-height:32px;cursor:ew-resize;accent-color:var(--cvb-grip-ink)}
html body :is(#mode-sizing-controls,#viewer-transparency,#full-view #video-transport,#phone-viewer-core,#settings-panel,:where(html:not(.immersive)) #shared-image-sizing) input[type=range]::-webkit-slider-runnable-track{height:2px!important;border:0!important;border-radius:0!important;background:var(--cvb-slider-track)!important}
html body :is(#mode-sizing-controls,#viewer-transparency,#full-view #video-transport,#phone-viewer-core,#settings-panel,:where(html:not(.immersive)) #shared-image-sizing) input[type=range]::-webkit-slider-thumb{appearance:none!important;-webkit-appearance:none!important;width:10px!important;height:10px!important;margin-top:-4px!important;border:0!important;border-radius:50%!important;background:var(--cvb-grip-ink)!important;box-shadow:none!important}
html body :is(#mode-sizing-controls,#viewer-transparency,#full-view #video-transport,#phone-viewer-core,#settings-panel,:where(html:not(.immersive)) #shared-image-sizing) input[type=range]::-moz-range-track{height:2px!important;border:0!important;background:var(--cvb-slider-track)!important}
html body :is(#mode-sizing-controls,#viewer-transparency,#full-view #video-transport,#phone-viewer-core,#settings-panel,:where(html:not(.immersive)) #shared-image-sizing) input[type=range]::-moz-range-thumb{width:10px!important;height:10px!important;border:0!important;border-radius:50%!important;background:var(--cvb-grip-ink)!important}
@media(any-pointer:coarse){html body :is(#mode-sizing-controls,#viewer-transparency,#full-view #video-transport,#phone-viewer-core,#settings-panel) input[type=range]{min-height:44px!important}}
/* The backing owns vertical alignment; labels share its top line without
   adding a second minimum-height row below the existing surface. */
html body #mode-sizing-controls>label{grid-template-rows:12px minmax(0,1fr);min-height:0;position:relative}
html body #mode-sizing-controls>label>input[type=range]{grid-row:1/-1;align-self:center}
html body #mode-sizing-controls>label>:is(span,output){grid-row:1;align-self:start;z-index:1;pointer-events:none}
html body #mode-sizing-controls>label>span{grid-column:1}
html body #mode-sizing-controls>label>output{grid-column:2}

/* IV uses the same centered-track backing as Map, without an extra range row. */
html body #viewer-transparency{grid-template-rows:12px minmax(0,1fr);position:relative}
html body #viewer-transparency>input[type=range]{grid-row:1/-1;grid-column:1/-1;align-self:center;min-height:28px;height:28px}
html body #viewer-transparency>:is(span,output){grid-row:1;align-self:start;z-index:1;pointer-events:none}
html body #viewer-transparency>span{grid-column:1}
html body #viewer-transparency>output{grid-column:2;text-align:right}

/* Fresh UI foundation: reparented Viewer ranges share the Map face only. */
html:not(.immersive) body #shared-image-sizing input[type=range]{appearance:none!important;-webkit-appearance:none!important;background:transparent!important;accent-color:var(--cvb-grip-ink)}