/*
 * The Home / Listen switch: castunes.app on one side, the web player on the
 * other, shared by both pages so it looks and moves the same in each.
 *
 * The red pill slides to the side you pick and the page changes as it lands.
 * It moves like a caterpillar -- the leading edge goes first and the trailing
 * edge follows a beat later -- so it reads as travelling rather than blinking.
 * Corners stay in the site's 6-9px range.
 */
.msw {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none;
  padding: 3px; border-radius: 9px; background: #1c1718; box-shadow: inset 0 0 0 1px #2e2628;
  font-family: inherit;
}
.msw-opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 11px; border-radius: 6px; color: #a0918f; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: color .25s;
}
.msw-opt:hover { color: #f5f0ec; }
.msw-opt.on { color: #fff; }
.msw-opt svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.msw-opt:focus-visible { outline: 2px solid #c4241c; outline-offset: 1px; }
.msw-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; right: 50%; border-radius: 6px;
  background: linear-gradient(180deg, #a10a0a, #950606); box-shadow: 0 2px 10px rgba(149, 6, 6, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: left .34s cubic-bezier(.5, 0, .2, 1), right .34s cubic-bezier(.5, 0, .2, 1);
}
.msw[data-on="listen"] .msw-thumb { left: 50%; right: 3px; }
/* Leading edge first: moving right, the right edge goes and the left follows. */
.msw[data-on="listen"] .msw-thumb { transition-delay: .07s, 0s; }
.msw[data-on="home"] .msw-thumb { transition-delay: 0s, .07s; }

/* Narrow screens: the icons alone, with their names kept for screen readers. */
@media (max-width: 560px) {
  .msw-opt { padding: 7px 10px; }
  .msw-opt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .msw-thumb { transition: none; } }