/* One look for switches, checkboxes and sliders on every tools tab (owner 2026-10-10: "the remove-background switch in
   Design looks broken; bring every slider, tick and switch to one style, with proper wrapping, nothing overlapping").
   Found in the audit: ~10 kinds of on/off controls, several drawing their OWN knob (<i>, .pdepth__knob, .aia-switch__ui)
   on top of the global switch of tools-polish.css, which is what produced the square double knob in Design.
   Now: the input itself is the switch (an Apple-like 44 x 26 track with a white knob, drawn with background layers so it
   also works in Firefox), fake knobs are hidden, the switch always sits left of its text and the text wraps. Lists of
   options (DeviantArt settings, "add to the archive", Info box) use a square tick. Sliders share one track/thumb and
   their filled part follows the value (js/tools-ux.js keeps --range-progress in sync, also for values set by code).
   Loaded after tools-ux.css, before ui-polish.css. ":is(#tuxSw, *)" only raises specificity above the component rules
   (some of them use ids and !important); it matches every element. */

/* ---- 1. switch (every checkbox on the tools page unless it is a list tick below) */
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *){
  -webkit-appearance:none!important;appearance:none!important;position:relative!important;display:inline-block!important;
  flex:0 0 44px!important;order:-1;width:44px!important;min-width:44px!important;max-width:44px!important;
  height:26px!important;min-height:26px!important;max-height:26px!important;margin:0!important;padding:0!important;
  opacity:1!important;pointer-events:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;
  border:0!important;border-radius:999px!important;cursor:pointer;vertical-align:middle;
  background-color:rgba(120,140,172,.36)!important;
  background-image:radial-gradient(circle,#fff 0 9.5px,rgba(255,255,255,0) 10.5px),radial-gradient(circle,rgba(0,0,0,.32) 0 10px,rgba(0,0,0,0) 12px)!important;
  background-size:26px 26px,26px 26px!important;background-repeat:no-repeat!important;background-position:0 0,0 1.5px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
  transition:background-position .24s cubic-bezier(.3,.7,.2,1),background-color .2s ease!important}
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *)::before,
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *)::after{display:none!important;content:none!important}
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *):checked{
  background-color:#1fc9f1!important;background-position:18px 0,18px 1.5px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 14px rgba(31,201,241,.25)!important}
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *):hover:not(:disabled){background-color:rgba(140,160,192,.46)!important}
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *):checked:hover:not(:disabled){background-color:#3fd3f5!important}
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *):focus-visible{outline:2px solid rgba(127,233,255,.85)!important;outline-offset:3px!important}
html body.page-tools input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *):disabled{opacity:.42!important;cursor:not-allowed}

/* the fake knobs some components drew on their own */
.page-tools .builder-toggle > i,.page-tools #bmLinked + i,.page-tools .pdepth__knob,.page-tools .aia-switch__ui{display:none!important}

/* switch rows: switch first, text beside it, the text wraps instead of running under the switch */
html body.page-tools :is(.builder-toggle,.process-switch,.pdepth__switch,.pdepth__toggle,.aia-switch):is(#tuxSw, *){
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
  gap:12px!important;grid-template-columns:none!important;min-width:0;cursor:pointer}
html body.page-tools :is(.builder-toggle,.process-switch,.pdepth__switch,.pdepth__toggle,.aia-switch) > :not(input){
  min-width:0;white-space:normal!important;overflow-wrap:anywhere;line-height:1.35}
html body.page-tools .process-switch[hidden],html body.page-tools .builder-toggle[hidden]{display:none!important}

/* ---- 2. list ticks: a square check (options you pick from a list, not settings that turn something on) */
html body.page-tools :is(.dp-check,.sm-extras__item,#tab-infobox label) input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *){
  flex:0 0 20px!important;width:20px!important;min-width:20px!important;max-width:20px!important;
  height:20px!important;min-height:20px!important;max-height:20px!important;border-radius:6px!important;
  background-color:rgba(2,6,18,.55)!important;background-image:none!important;
  box-shadow:inset 0 0 0 1.5px rgba(140,175,220,.55)!important;transition:background-color .15s,box-shadow .15s!important}
html body.page-tools :is(.dp-check,.sm-extras__item,#tab-infobox label) input[type="checkbox"]:not([hidden]):not(.ss-sr-only):not(.sr-only):is(#tuxSw, *):checked{
  background-color:#1fc9f1!important;box-shadow:inset 0 0 0 1.5px #1fc9f1,0 0 10px rgba(31,201,241,.25)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23041019' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-size:20px 20px!important;background-position:0 0!important}
html body.page-tools :is(.dp-check,.sm-extras__item){display:flex!important;align-items:flex-start!important;gap:10px!important;min-width:0}
html body.page-tools :is(.dp-check,.sm-extras__item) input[type="checkbox"]{margin-top:1px!important}
html body.page-tools :is(.dp-check,.sm-extras__item) > :not(input){min-width:0;overflow-wrap:anywhere;line-height:1.4}

/* ---- 3. sliders: one track and one thumb everywhere (the filled part = --range-progress) */
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range){
  -webkit-appearance:none!important;appearance:none!important;width:100%;height:24px!important;min-height:24px!important;
  margin:2px 0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer}
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range)::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;border:0;
  background:linear-gradient(90deg,#1fc9f1 0,#7d8bff var(--range-progress,0%),rgba(120,140,172,.3) var(--range-progress,0%))}
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range)::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(31,201,241,.9),0 2px 6px rgba(0,0,0,.45);transition:box-shadow .15s}
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range):hover::-webkit-slider-thumb,
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range):focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px #7fe9ff,0 0 0 7px rgba(31,201,241,.22),0 2px 6px rgba(0,0,0,.45)}
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range)::-moz-range-track{height:6px;border-radius:999px;background:rgba(120,140,172,.3)}
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range)::-moz-range-progress{height:6px;border-radius:999px;background:linear-gradient(90deg,#1fc9f1,#7d8bff)}
html body.page-tools input[type="range"]:is(#tuxSw, *):not(.gox-compare__range)::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(31,201,241,.9),0 2px 6px rgba(0,0,0,.45)}
html body.page-tools input[type="range"]:is(#tuxSw, *):disabled{opacity:.45;cursor:not-allowed}