/* The Free Sim / Live switch, one design everywhere (11/4, Nick: "make it look better on all the
   rip pages and rarity runs"). Every copy of the switch carries [data-mode-toggle] (pack page
   header, picker, rip top bar, phone stage, Rarity Run desk + phone), so this styles them all.
   A slim track with one thumb that slides between the two halves: frost for Free Sim, a lit red
   for Live (real credit), the Live dot red while off and pulsing white while on. The older
   layers in styles.css / theme-dark.css use !important, so these do too. */
/* (no display here: each copy's own rules show or hide it, e.g. the Rarity Run's phone/desk pair) */
html body [data-mode-toggle][data-mode-toggle] {
  position: relative !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 3px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  width: fit-content !important;
  isolation: isolate;
}
/* the thumb */
html body [data-mode-toggle][data-mode-toggle]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: linear-gradient(180deg, #f5f9ff, #c6d9f6);
  box-shadow: 0 2px 12px rgba(150, 190, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: transform 340ms cubic-bezier(.3, .75, .2, 1), background 300ms ease, box-shadow 300ms ease, opacity 200ms ease;
}
html body [data-mode-toggle][data-mode-toggle]:has(> .is-active)::before { opacity: 1; }
html body [data-mode-toggle][data-mode-toggle]:has(> [data-mode-value="live"].is-active)::before {
  transform: translateX(100%);
  background: linear-gradient(180deg, #ff5b6d, #c81f3a);
  box-shadow: 0 0 18px rgba(255, 64, 96, 0.45), 0 2px 10px rgba(120, 10, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* the two halves: equal, so the thumb is always exactly half */
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value][data-mode-value] {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 5.6rem !important;
  min-height: 0 !important;
  height: 2.15rem !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(214, 224, 248, 0.62) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: color 240ms ease !important;
}
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value][data-mode-value]:not(.is-active):hover { color: #fff !important; }
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value="simulation"].is-active { color: #0b1324 !important; }
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value="live"].is-active { color: #fff !important; text-shadow: 0 1px 0 rgba(90, 0, 20, 0.35); }
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value][data-mode-value]:disabled,
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value][data-mode-value][aria-disabled="true"] { opacity: 0.4 !important; cursor: default; }
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value][data-mode-value]:focus-visible { outline: 2px solid rgba(158, 212, 255, 0.8) !important; outline-offset: 2px; }
/* the Live dot: red while off (it means real credit), white and pulsing while on */
html body [data-mode-toggle][data-mode-toggle] .hf-live-dot {
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.45em;
  background: #ff4d63;
  opacity: 1;
  box-shadow: 0 0 6px rgba(255, 77, 99, 0.7);
}
html body [data-mode-toggle][data-mode-toggle] > [data-mode-value="live"].is-active .hf-live-dot { background: #fff; }
/* full-width switches (phones) keep their width; the halves share it */
@media (max-width: 760px) {
  html body .chasers-mobile-stage-mode [data-mode-toggle][data-mode-toggle],
  html body .rtyh-stage-card > .rtyh-mode-phone[data-mode-toggle][data-mode-toggle] { width: 100% !important; }
  html body .chasers-mobile-stage-mode [data-mode-toggle][data-mode-toggle] > [data-mode-value][data-mode-value],
  html body .rtyh-stage-card > .rtyh-mode-phone[data-mode-toggle][data-mode-toggle] > [data-mode-value][data-mode-value] { height: 2.4rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-mode-toggle]::before { transition: none; }
}