/* Core role: Styles for station selection slider (three-position custom input). */
    /* THREE-POSITION STATION SLIDER — 3D physical appearance via drop shadow + gradient */
    .tri-track {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      position: relative;
      /* Dark carved-in channel — inset shadows push it visually below the card */
      background: rgba(4,12,20,0.88);
      border: 1px solid rgba(0,0,0,0.70);
      border-radius: 2rem;
      overflow: hidden;     /* Clips thumb corners cleanly to the pill */
      user-select: none;
      box-shadow:
        inset 0 0.2rem 0.7rem rgba(0,0,0,0.70),
        inset 0 1px 0.3rem rgba(0,0,0,0.50),
        0 1px 0 rgba(255,255,255,0.07);   /* faint outer bottom-edge highlight */
    }
    .tri-thumb {
      /* Raised pill — 0.2rem inset from channel walls for the physical gap effect */
      position: absolute;
      top: 0.2rem; left: 0.2rem;
      width: calc(33.333% - 0.4rem);   /* each third minus the 0.2rem gap on each side */
      height: calc(100% - 0.4rem);
      /* Top-to-bottom gradient: bright highlight at top, deeper teal at bottom */
      background: linear-gradient(170deg,
        rgba(85,245,215,0.97) 0%,
        rgba(46,202,178,0.93) 42%,
        rgba(29,170,150,0.91) 100%);
      border-radius: 1.6rem;
      transition: left 0.22s cubic-bezier(0.4,0,0.2,1);
      pointer-events: none;
      box-shadow:
        0 0.3rem 0.9rem rgba(0,0,0,0.70),       /* drop shadow — lifts thumb off track */
        0 1px 0.3rem rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(255,255,255,0.42),  /* bright specular top edge      */
        inset 0 -1px 0 rgba(0,0,0,0.24);       /* dark bottom edge under-shadow */
    }
    /* Each position shifts the thumb exactly one column-width right.            */
    /* The +0.2rem offset keeps the 0.2rem left-gap consistent across all positions.  */
    .tri-track[data-pos="1"] .tri-thumb { left: calc(33.333% + 0.2rem); }
    .tri-track[data-pos="2"] .tri-thumb { left: calc(66.666% + 0.2rem); }
    .tri-opt {
      position: relative;
      z-index: 1;           /* Sit above the thumb so clicks register on labels */
      padding: 0.7rem 0.6rem;
      text-align: center;
      font-family: var(--font-data);
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(45,212,191,0.40);
      cursor: pointer;
      transition: color var(--duration-short);
    }
    /* Dark text on the bright teal thumb; subtle emboss via text-shadow.       */
    .tri-opt.active { color: #051210; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,0.22); }