/**
 * Switch Component Styles
 *
 * type=toggle:  pill track (72×36 px) with sliding pill thumb (40×28 px).
 * type=segment: pill container with two labelled radio options and a
 *               sliding attitude highlight.
 *
 * Verified on trust surface (Figma node 694:39852).
 * White / ambience / academy tokens derived from the design system.
 */

/* ── Scoped tokens — White surface ── */

.switch {
  --sw-track-off-bg:        var(--ambience, #ebe6e1);
  --sw-track-on-bg:         var(--ambience, #ebe6e1);     /* track doesn't change on white */
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:      var(--ambience-500, #dbd4ce);
  --sw-thumb-hover-off-bg:  var(--attitude-300, #ffb3fb);
  --sw-thumb-hover-on-bg:   var(--attitude-500, #cc80c8);
  --sw-seg-bg:              var(--ambience, #ebe6e1);
  --sw-seg-hover-bg:         var(--ambience-300, #efebe7);
  --sw-highlight-bg:         var(--attitude, #ffa0fa);
  --sw-highlight-hover-bg:   var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:         var(--trust, #550a2d);
  --sw-inactive-color:       var(--ambience-700, #998c80);
  --sw-label-color:          var(--trust, #550a2d);
  --sw-opt-width:           80px;
}

/* ── Trust surface ── */

.switch--trust {
  --sw-track-off-bg:        var(--trust-500, #440824);
  --sw-track-on-bg:         var(--trust-500, #440824);    /* track stays same on/off */
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:      var(--trust-600, #2b0517);
  --sw-thumb-hover-off-bg:  var(--attitude-200, #ffcffd);
  --sw-thumb-hover-on-bg:   var(--attitude-300, #ffb3fb);
  --sw-seg-bg:               var(--trust-500, #440824);
  --sw-seg-hover-bg:         var(--trust-600, #2b0517);
  --sw-highlight-bg:         var(--attitude, #ffa0fa);
  --sw-highlight-hover-bg:   var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--white, #ffffff);
  --sw-active-color:        var(--trust, #550a2d);
  --sw-inactive-color:      var(--trust-200, #aa8496);
  --sw-label-color:         var(--white, #ffffff);
  --sw-opt-width:           80px;
}

/* ── Ambience surface ── */

.switch--ambience {
  --sw-track-off-bg:        var(--ambience-500, #dbd4ce);
  --sw-track-on-bg:         var(--ambience-500, #dbd4ce);   /* track stays same on/off */
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:       var(--ambience-600, #bab0a7);
  --sw-thumb-hover-off-bg:   var(--attitude-300, #ffb3fb);
  --sw-thumb-hover-on-bg:    var(--attitude-500, #cc80c8);
  --sw-seg-bg:               var(--ambience-500, #dbd4ce);
  --sw-seg-hover-bg:         var(--ambience-600, #bab0a7);
  --sw-highlight-hover-bg:   var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:         var(--trust, #550a2d);
  --sw-inactive-color:       var(--ambience-700, #998C80);
  --sw-label-color:          var(--trust, #550a2d);
}

/* ── Academy surface ── */

.switch--academy {
  --sw-track-off-bg:        var(--academy-500, #97784b);
  --sw-track-on-bg:         var(--academy-500, #97784b);   /* track stays same on/off */
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--trust, #550a2d);          /* trust, not attitude */
  --sw-track-hover-bg:       var(--academy-600, #7c6037);
  --sw-thumb-hover-off-bg:   var(--trust-100, #ddced5);
  --sw-thumb-hover-on-bg:    var(--trust-200, #aa8496);
  --sw-seg-bg:               var(--academy-300, #c0a57b);  /* segment uses lighter shade */
  --sw-seg-hover-bg:         var(--academy-200, #d4c0a1);
  --sw-highlight-bg:         var(--trust, #550a2d);         /* trust pill, not attitude */
  --sw-highlight-hover-bg:   var(--trust-500, #440824);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:         var(--attitude, #ffa0fa);      /* pink label on dark highlight */
  --sw-inactive-color:       var(--academy-500, #97784b);
  --sw-label-color:          var(--white, #ffffff);
}

/* ════════════════════════════════════════════════════
   SURFACE AUTO-ADAPTATION
   surface--{name} on any ancestor → tokens cascade down.
   switch--on-{name} on the element overrides any ancestor surface
   (placed after the surface-- rules so it wins on equal specificity).
   ════════════════════════════════════════════════════ */

.surface--trust .switch {
  --sw-track-off-bg:        var(--trust-500, #440824);
  --sw-track-on-bg:         var(--trust-500, #440824);
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:      var(--trust-600, #2b0517);
  --sw-thumb-hover-off-bg:  var(--attitude-200, #ffcffd);
  --sw-thumb-hover-on-bg:   var(--attitude-300, #ffb3fb);
  --sw-seg-bg:              var(--trust-500, #440824);
  --sw-seg-hover-bg:        var(--trust-600, #2b0517);
  --sw-highlight-bg:        var(--attitude, #ffa0fa);
  --sw-highlight-hover-bg:  var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--white, #ffffff);
  --sw-active-color:        var(--trust, #550a2d);
  --sw-inactive-color:      var(--trust-200, #aa8496);
  --sw-label-color:         var(--white, #ffffff);
}

.surface--ambience .switch {
  --sw-track-off-bg:        var(--ambience-500, #dbd4ce);
  --sw-track-on-bg:         var(--ambience-500, #dbd4ce);
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:      var(--ambience-600, #bab0a7);
  --sw-thumb-hover-off-bg:  var(--attitude-300, #ffb3fb);
  --sw-thumb-hover-on-bg:   var(--attitude-500, #cc80c8);
  --sw-seg-bg:              var(--ambience-500, #dbd4ce);
  --sw-seg-hover-bg:        var(--ambience-600, #bab0a7);
  --sw-highlight-bg:        var(--attitude, #ffa0fa);
  --sw-highlight-hover-bg:  var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:        var(--trust, #550a2d);
  --sw-inactive-color:      var(--ambience-700, #998c80);
  --sw-label-color:         var(--trust, #550a2d);
}

.surface--academy .switch {
  --sw-track-off-bg:        var(--academy-500, #97784b);
  --sw-track-on-bg:         var(--academy-500, #97784b);
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--trust, #550a2d);
  --sw-track-hover-bg:      var(--academy-600, #7c6037);
  --sw-thumb-hover-off-bg:  var(--trust-100, #ddced5);
  --sw-thumb-hover-on-bg:   var(--trust-200, #aa8496);
  --sw-seg-bg:              var(--academy-300, #c0a57b);
  --sw-seg-hover-bg:        var(--academy-200, #d4c0a1);
  --sw-highlight-bg:        var(--trust, #550a2d);
  --sw-highlight-hover-bg:  var(--trust-500, #440824);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:        var(--attitude, #ffa0fa);
  --sw-inactive-color:      var(--academy-500, #97784b);
  --sw-label-color:         var(--white, #ffffff);
}

/* Explicit on-{surface} overrides — placed after surface-- rules so they win */

.switch.switch--on-trust {
  --sw-track-off-bg:        var(--trust-500, #440824);
  --sw-track-on-bg:         var(--trust-500, #440824);
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:      var(--trust-600, #2b0517);
  --sw-thumb-hover-off-bg:  var(--attitude-200, #ffcffd);
  --sw-thumb-hover-on-bg:   var(--attitude-300, #ffb3fb);
  --sw-seg-bg:              var(--trust-500, #440824);
  --sw-seg-hover-bg:        var(--trust-600, #2b0517);
  --sw-highlight-bg:        var(--attitude, #ffa0fa);
  --sw-highlight-hover-bg:  var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--white, #ffffff);
  --sw-active-color:        var(--trust, #550a2d);
  --sw-inactive-color:      var(--trust-200, #aa8496);
  --sw-label-color:         var(--white, #ffffff);
}

.switch.switch--on-ambience {
  --sw-track-off-bg:        var(--ambience-500, #dbd4ce);
  --sw-track-on-bg:         var(--ambience-500, #dbd4ce);
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:      var(--ambience-600, #bab0a7);
  --sw-thumb-hover-off-bg:  var(--attitude-300, #ffb3fb);
  --sw-thumb-hover-on-bg:   var(--attitude-500, #cc80c8);
  --sw-seg-bg:              var(--ambience-500, #dbd4ce);
  --sw-seg-hover-bg:        var(--ambience-600, #bab0a7);
  --sw-highlight-bg:        var(--attitude, #ffa0fa);
  --sw-highlight-hover-bg:  var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:        var(--trust, #550a2d);
  --sw-inactive-color:      var(--ambience-700, #998c80);
  --sw-label-color:         var(--trust, #550a2d);
}

.switch.switch--on-academy {
  --sw-track-off-bg:        var(--academy-500, #97784b);
  --sw-track-on-bg:         var(--academy-500, #97784b);
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--trust, #550a2d);
  --sw-track-hover-bg:      var(--academy-600, #7c6037);
  --sw-thumb-hover-off-bg:  var(--trust-100, #ddced5);
  --sw-thumb-hover-on-bg:   var(--trust-200, #aa8496);
  --sw-seg-bg:              var(--academy-300, #c0a57b);
  --sw-seg-hover-bg:        var(--academy-200, #d4c0a1);
  --sw-highlight-bg:        var(--trust, #550a2d);
  --sw-highlight-hover-bg:  var(--trust-500, #440824);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:        var(--attitude, #ffa0fa);
  --sw-inactive-color:      var(--academy-500, #97784b);
  --sw-label-color:         var(--white, #ffffff);
}

/* Force white/default style — always last so it overrides any surface ancestor */
.switch.switch--on-white {
  --sw-track-off-bg:        var(--ambience, #ebe6e1);
  --sw-track-on-bg:         var(--ambience, #ebe6e1);
  --sw-thumb-off-bg:        var(--white, #ffffff);
  --sw-thumb-on-bg:         var(--attitude, #ffa0fa);
  --sw-track-hover-bg:      var(--ambience-500, #dbd4ce);
  --sw-thumb-hover-off-bg:  var(--attitude-300, #ffb3fb);
  --sw-thumb-hover-on-bg:   var(--attitude-500, #cc80c8);
  --sw-seg-bg:              var(--ambience, #ebe6e1);
  --sw-seg-hover-bg:        var(--ambience-300, #efebe7);
  --sw-highlight-bg:        var(--attitude, #ffa0fa);
  --sw-highlight-hover-bg:  var(--attitude-300, #ffb3fb);
  --sw-inactive-hover-color: var(--trust, #550a2d);
  --sw-active-color:        var(--trust, #550a2d);
  --sw-inactive-color:      var(--ambience-700, #998c80);
  --sw-label-color:         var(--trust, #550a2d);
}

/* ── Shared: visually hidden input ── */

.switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Shared: disabled ── */

.switch:has(input:disabled) {
  opacity: 0.33;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════
   TOGGLE
   ════════════════════════════════════════════════════ */

.switch--toggle .switch__row {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-200, 16px);
  cursor: pointer;
}

/* Track */
.switch__track {
  position: relative;
  width: 72px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--sw-track-off-bg);
  border-radius: var(--border-radius-round, 1000px);
  transition: background-color 0.2s ease;
}

/* Thumb — pill shape (40×28 px), 4 px inset from all edges */
.switch__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 40px;
  height: 28px;
  background-color: var(--sw-thumb-off-bg);
  border-radius: var(--border-radius-round, 1000px);
  transition: left 0.2s ease, background-color 0.2s ease,
              width 0.15s ease, height 0.15s ease, top 0.15s ease;
}

/* ON state — thumb travels 24 px right (72 - 4 - 40 - 4 = 24) */
.switch--toggle .switch__input:checked + .switch__track {
  background-color: var(--sw-track-on-bg);
}

.switch--toggle .switch__input:checked + .switch__track .switch__thumb {
  left: 28px;
  background-color: var(--sw-thumb-on-bg);
}

/* Focus ring on track */
.switch--toggle .switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--accent, #fa263a);
  outline-offset: 3px;
}

/* Hover — track background */
.switch--toggle .switch__row:hover .switch__track {
  background-color: var(--sw-track-hover-bg);
}

/* Hover — thumb grows 1 px on each edge (42×30, inset 3 px) */
.switch--toggle .switch__row:hover .switch__thumb {
  width: 42px;
  height: 30px;
  top: 3px;
}

/* Hover + OFF — thumb left */
.switch--toggle .switch__row:hover .switch__input:not(:checked) + .switch__track .switch__thumb {
  left: 3px;
  background-color: var(--sw-thumb-hover-off-bg);
}

/* Hover + ON — thumb right */
.switch--toggle .switch__row:hover .switch__input:checked + .switch__track .switch__thumb {
  left: 27px;
  background-color: var(--sw-thumb-hover-on-bg);
}

/* Label */
.switch__label {
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero' 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sw-label-color);
  user-select: none;
}

/* ════════════════════════════════════════════════════
   SEGMENT
   ════════════════════════════════════════════════════ */

.switch--segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 4px 8px;
  background-color: var(--sw-seg-bg);
  border-radius: var(--border-radius-round, 1000px);
  isolation: isolate;
}

/* Option label wrapper */
.switch__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sw-opt-width);
  z-index: 2;
  cursor: pointer;
}

.switch__opt-label {
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero' 1;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: var(--sw-inactive-color);
  font-weight: 500;
  transition: color 0.2s ease;
  user-select: none;
}

.switch__opt:has(.switch__input:checked) .switch__opt-label {
  color: var(--sw-active-color);
  font-weight: 700;
}

/* Focus ring */
.switch__opt:has(.switch__input:focus-visible) .switch__opt-label {
  outline: 2px solid var(--accent, #fa263a);
  outline-offset: 2px;
  border-radius: var(--border-radius-round, 1000px);
}

/* Sliding attitude highlight */
.switch__highlight {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(var(--sw-opt-width) + 7px); /* 87 px at default 80 px labels */
  height: 28px;
  background-color: var(--sw-highlight-bg);
  border-radius: var(--border-radius-round, 1000px);
  z-index: 1;
  transition: left 0.2s ease, background-color 0.2s ease,
              width 0.15s ease, height 0.15s ease, top 0.15s ease;
  pointer-events: none;
}

/* Slide highlight to option B — :nth-child(2) because :last-child matches the
   highlight <span>, not the second <label> */
.switch--segment:has(.switch__opt:nth-child(2) .switch__input:checked) .switch__highlight {
  left: calc(4px + var(--sw-opt-width) + 2px);
}

/* ── Segment hover ── */

.switch--segment:hover {
  background-color: var(--sw-seg-hover-bg);
}

/* Highlight grows 1 px each side on hover */
.switch--segment:hover .switch__highlight {
  height: 30px;
  top: 3px;
  left: 3px;
  width: calc(var(--sw-opt-width) + 9px);
  background-color: var(--sw-highlight-hover-bg);
}

/* Highlight B position on hover */
.switch--segment:hover:has(.switch__opt:nth-child(2) .switch__input:checked) .switch__highlight {
  left: calc(3px + var(--sw-opt-width) + 2px);
}

/* Inactive label on hover */
.switch--segment:hover .switch__opt-label {
  color: var(--sw-inactive-hover-color);
}

/* Active label stays its own colour on hover */
.switch--segment:hover .switch__opt:has(.switch__input:checked) .switch__opt-label {
  color: var(--sw-active-color);
}