/* One visual definition for P switches. Settings is the reference.
   Existing component classes are adapters; new switches use .p-switch.
   Input/ARIA state remains owned by each component. */
:root {
  --p-switch-width: 44px;
  --p-switch-track-width: 40px;
  --p-switch-height: 26px;
  --p-switch-thumb-size: 20px;
  --p-switch-thumb-top: 3px;
  --p-switch-track-size: 12px;
  --p-switch-track-top: 7px;
  --p-switch-track: #757575;
  --p-switch-off: #aaa;
  --p-switch-on: #c8ff2f;
  --p-switch-focus: #fff;
}

/* Phone labels retain their larger touch layout. */
.entry-language-switch {
  --p-switch-width: 66px; --p-switch-height: 39px;
  --p-switch-thumb-size: 30px; --p-switch-thumb-top: 4.5px;
  --p-switch-track-size: 18px; --p-switch-track-top: 10.5px;
}

/* Saved Design preferences keep their quiet, inset appearance. */
.preference-switch {
  --p-switch-width: 28px;
  --p-switch-height: 24px;
  --p-switch-radius: 6px;
  --p-switch-track: transparent;
  --p-switch-preference-track: color-mix(in srgb, #160607, #fff 15%);
  --p-switch-thumb-size: 6px;
  --p-switch-thumb-top: 6px;
  --p-switch-thumb-left: 6px;
  --p-switch-travel: 10px;
  --p-switch-rail-display: block;
  --p-switch-off-transform: none;
  --p-switch-on-transform: translateX(var(--p-switch-travel));
  --p-switch-off: color-mix(in srgb, var(--p-switch-preference-track), #fff 15%);
  --p-switch-on: color-mix(in srgb, var(--p-switch-preference-track), #fff 50%);
  --p-switch-duration: 140ms;
  --p-switch-focus-width: 1px;
  --p-switch-focus-offset: 1px;
}

/* White means a saved starting default for new presentations. */
.design-preset-switch[data-palette-action="toggle-0"],
.design-default-switch { --p-switch-on: #fff; }

/* On/off has no rail. Choice and saved preferences explicitly opt in. */
:is(.p-switch, .session-switch-track, .entry-switch-track, .result-value-toggle, .preference-switch, .words-checkbox)::before {
  content: '';
  display: var(--p-switch-rail-display, none);
  position: absolute;
  top: var(--p-switch-track-top);
  left: calc((var(--p-switch-width) - var(--p-switch-track-width)) / 2);
  width: var(--p-switch-track-width);
  height: var(--p-switch-track-size);
  border-radius: 999px;
  background: var(--p-switch-track);
}

.preference-switch::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 10px;
  top: 4px;
  left: 4px;
  border-radius: 8px;
  background: var(--p-switch-preference-track);
}

:is(.p-switch, .session-switch-track, .entry-switch-track, .result-value-toggle, .preference-switch, .words-checkbox) {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex: 0 0 var(--p-switch-width);
  width: var(--p-switch-width);
  min-height: var(--p-switch-height);
  height: var(--p-switch-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--p-switch-radius, 0);
  background: none;
  cursor: pointer;
  vertical-align: middle;
}

/* Old decorative spans are inert; every switch uses this same thumb. */
:is(.session-switch-track, .entry-switch-track, .result-value-toggle) > span { display: none; }
:is(.p-switch, .session-switch-track, .entry-switch-track, .result-value-toggle, .preference-switch, .words-checkbox)::after {
  content: '';
  position: absolute;
  top: var(--p-switch-thumb-top, 0);
  left: var(--p-switch-thumb-left, calc((var(--p-switch-width) - var(--p-switch-thumb-size)) / 2));
  width: var(--p-switch-thumb-size, var(--p-switch-height));
  height: var(--p-switch-thumb-size, var(--p-switch-height));
  border: 0;
  border-radius: 50%;
  background: var(--p-switch-off);
  transform: var(--p-switch-off-transform, scale(.8));
  transition: transform var(--p-switch-duration, 150ms) ease, background var(--p-switch-duration, 150ms) ease;
}

:is(.p-switch, .result-value-toggle, .preference-switch, .words-checkbox):is(:checked, [aria-checked="true"], [aria-pressed="true"])::after,
input:checked + :is(.p-switch, .session-switch-track, .entry-switch-track)::after {
  transform: var(--p-switch-on-transform, scale(1));
  background: var(--p-switch-on);
}

/* Choice stays lime in both positions; on/off uses gray or lime. */
.p-switch--choice::after,
:is(.session-language-switch, .presentation-mode-switch) .session-switch-track::after,
.entry-switch-track::after { background: var(--p-switch-on); }

:is(.p-switch, .result-value-toggle, .preference-switch, .words-checkbox):focus-visible,
.controller-panel :is(.p-switch, .result-value-toggle, .preference-switch, .words-checkbox):focus-visible,
input:focus-visible + :is(.p-switch, .session-switch-track, .entry-switch-track) {
  outline: var(--p-switch-focus-width, 2px) solid var(--p-switch-focus);
  outline-offset: var(--p-switch-focus-offset, 3px);
}

:is(.p-switch, .result-value-toggle, .preference-switch, .words-checkbox):disabled,
input:disabled + :is(.p-switch, .session-switch-track, .entry-switch-track) {
  cursor: default;
  opacity: .48;
}

/* Two alternatives: rail length is exactly two thumb diameters.
   The wrappers also own the width used by their label grid. */
:is(.p-switch--choice, .session-language-switch, .presentation-mode-switch, .entry-language-switch) {
  --p-switch-width: calc(var(--p-switch-thumb-size) * 2);
  --p-switch-track-width: var(--p-switch-width);
  --p-switch-rail-display: block;
  --p-switch-thumb-left: 0px;
  --p-switch-off-transform: none;
  --p-switch-on-transform: translateX(var(--p-switch-thumb-size));
  --p-switch-height: calc(var(--p-switch-thumb-size) * 1.3);
  --p-switch-thumb-top: calc((var(--p-switch-height) - var(--p-switch-thumb-size)) / 2);
  --p-switch-track-top: calc((var(--p-switch-height) - var(--p-switch-track-size)) / 2);
}

/* On/off precedes its label. Keep the full existing hit area and label action;
   language/mode choices retain their two-sided labels. */
.session-switch:not(.session-language-switch):not(.presentation-mode-switch),
.studio-advance:has(> .p-switch) { justify-content: flex-start; }
.session-switch:not(.session-language-switch):not(.presentation-mode-switch) > .session-switch-track,
.studio-advance > .p-switch,
.result-value-control > .result-value-toggle { order: -1; }

@media (prefers-reduced-motion: reduce) {
  :is(.p-switch, .session-switch-track, .entry-switch-track, .result-value-toggle, .preference-switch, .words-checkbox)::after { transition: none; }
}