/*
 * Gymful V3 behavior layer, adapted from Osmo public examples (MIT):
 * https://codepen.io/osmosupply/pen/vEBeKJz — Interactive Tab System
 * https://codepen.io/osmosupply/pen/NPKqByd — Draggable Infinite Slider
 * Copyright (c) Osmo. Full MIT notice is included in widgets-v3.js.
 * Gymful owns the visual system; this file owns behavior and focus affordances.
 */

[data-tabs="wrapper"] {
  min-width: 0;
}

[data-tabs="nav"] {
  position: relative;
  isolation: isolate;
}

[data-tabs="button"] {
  position: relative;
  z-index: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[data-tabs="indicator"] {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  /* No CSS transition here: the controller interrupts from the rendered FLIP
     rectangle rather than running a second transition on top of WAAPI. */
}

[data-tabs="wrapper"]:not([data-gf-tabs-ready]) [data-tabs="indicator"] {
  display: none;
}

[data-tabs="content-wrap"],
[data-tabs="visual-wrap"] {
  min-width: 0;
}

[data-tabs="content-item"][hidden],
[data-tabs="visual-item"][hidden] {
  display: none !important;
}

[data-tabs="wrapper"][data-gf-tabs-ready] [data-tabs-swipe] {
  /* Horizontal panel gestures are handled on release; native vertical page
     scrolling and pinch zoom remain available throughout the gesture. */
  touch-action: pan-y pinch-zoom;
}

[data-tabs="button"]:focus-visible,
[data-tabs="content-item"]:focus-visible,
[data-gf-slider] [data-slider="track"]:focus-visible,
[data-gf-slider] [data-slider="prev"]:focus-visible,
[data-gf-slider] [data-slider="next"]:focus-visible {
  outline: 2px solid var(--gf-focus, #f6ff00);
  outline-offset: 4px;
}

[data-gf-slider] {
  min-width: 0;
}

[data-gf-slider] [data-slider="track"] {
  display: flex;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Native touch action retains both horizontal swipe and vertical page scroll. */
  touch-action: auto;
}

[data-gf-slider] [data-slider="item"] {
  flex-shrink: 0;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

[data-gf-slider] [data-slider="item"] img {
  -webkit-user-drag: none;
}

[data-gf-slider] [data-slider="prev"],
[data-gf-slider] [data-slider="next"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[data-gf-slider] [data-slider="prev"]:disabled,
[data-gf-slider] [data-slider="next"]:disabled,
[data-gf-slider] [data-slider="prev"][aria-disabled="true"],
[data-gf-slider] [data-slider="next"][aria-disabled="true"] {
  cursor: default;
  opacity: 0.35;
}

[data-gf-slider] [data-slider="count"] {
  font-variant-numeric: tabular-nums;
}

[data-gf-slider] [data-slider="progress"] {
  height: 2px;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(244 244 225 / 16%);
}

[data-gf-slider] [data-slider="progress"] > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gf-acid, #f6ff00);
  transform: scaleX(var(--gf-slider-progress, 0));
  transform-origin: left center;
  /* Follow the native scroll position exactly; no second transition or timer. */
}

@media (hover: hover) and (pointer: fine) {
  [data-gf-slider][data-gf-slider-ready]:not([data-slider-fits]) [data-slider="track"] {
    cursor: grab;
  }

  [data-gf-slider][data-dragging] [data-slider="track"],
  [data-gf-slider][data-dragging] [data-slider="track"] * {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }
}

[data-gf-slider][data-dragging] [data-slider="track"] {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-tabs="indicator"],
  [data-tabs="content-item"],
  [data-tabs="visual-item"],
  [data-tabs-fade],
  [data-tabs-orbit-rotor],
  [data-gf-slider] [data-slider="track"],
  [data-gf-slider] [data-slider="item"] {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation: none !important;
  }
}