/* Phones (max-width 640px): lists marked data-swipe show one card at a time, with ← → buttons and a "2 / 7" counter
   (assets/js/swipe-v8.js). Used on Home, Events and OBM (OBM also has its first rules inside obm-v8.css).
   Desktop is unchanged. */
.swipe__bar { display: none; }
@media (max-width: 640px) {
  [data-swipe] { touch-action: pan-y; }
  main { overflow-x: clip; }   /* a card sliding in never makes the page scroll sideways */
  [data-swipe] > .is-off { display: none; }
  .swipe-in-r { animation: swipeInR .35s var(--ease) both; }
  .swipe-in-l { animation: swipeInL .35s var(--ease) both; }
  .swipe__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 14px 0 6px; }
  .swipe__bar--top { margin: 0 0 14px; }
  .swipe__count { color: var(--on-dark-muted); font-size: 15px; letter-spacing: .08em; }
  .swipe__bar .army__nav { display: flex; gap: 8px; }
  .swipe__bar .icon-btn { width: 46px; height: 46px; border: 1px solid rgba(195, 178, 236, .45); border-radius: 50%; background: rgba(245, 242, 250, .06); color: var(--moon); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
  .swipe__bar .icon-btn:hover { background: var(--moon); border-color: var(--moon); color: var(--deep); }
  .swipe__bar .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .swipe__bar .icon-btn:disabled { opacity: .35; cursor: default; background: transparent; border-color: rgba(195, 178, 236, .3); color: var(--moon); }

  /* Behind the Scenes: same-size flashcards so the arrows don't jump */
  .ops[data-swipe] .op { min-height: 270px; }

  /* Reels: arrows on either side of the title under the frame, no counter */
  [data-swipe-bar="sides"] { position: relative; }
  .swipe__bar--sides { position: absolute; margin: 0; z-index: 3; pointer-events: none; }
  .swipe__bar--sides .army__nav { width: 100%; justify-content: space-between; }
  .swipe__bar--sides .icon-btn { pointer-events: auto; width: 40px; height: 40px; }
  .reels[data-swipe] .reel__cap { padding: 0 14px; }
  .swipe__bar--sides .icon-btn:disabled { opacity: 0; pointer-events: none; }

  /* Offers: a two-way toggle named after each card instead of arrows */
  .swipe__bar--tabs { justify-content: center; align-items: stretch; gap: 2px; margin: 0 auto 18px; padding: 4px; width: 100%; border: 1px solid rgba(195, 178, 236, .35); border-radius: 999px; }
  .swipe__tab { flex: 1 1 auto; border: 0; border-radius: 999px; padding: 12px 8px; text-wrap: balance; background: transparent; color: var(--stardust); font: inherit; font-size: 18px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s, color .2s; }   /* same size as the intro text */
  .swipe__tab:hover { color: var(--moon); }
  .swipe__tab[aria-pressed="true"] { background: var(--aurora); color: var(--deep); }
  .swipe__tab[data-to="0"][aria-pressed="true"] { background: var(--stardust); }   /* OBM: One Launch Cycle = Main Stage (purple), Ongoing Operations = Encore (pink); Events: Entertainment, Education */
  #next .swipe__tab[data-to="1"][aria-pressed="true"] { background: var(--nebula); color: var(--moon); }   /* Events: Education in Nebula, alternating with Stardust */
}
@keyframes swipeInR { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes swipeInL { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }