/* ==========================================================================
   FEF Tab Slide — stage, overlay layers, tab-bar marker.
   Per-style motion is done in assets/js/tab_slide/fef-ts-<style>.js.
   ========================================================================== */

/* The stage: while a transition runs both panels are stacked inside .fef-tabs-body */
.fef-tabs-body.fef-ts-stage { position: relative; overflow: hidden; isolation: isolate; }
.fef-tabs-body.fef-ts-stage > .fef-tabs-panel { will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fef-tabs-body.fef-ts-3d { overflow: visible; }
.fef-tabs-body.fef-ts-3d > .fef-tabs-panel { transform-style: preserve-3d; }
.fef-tabs .fef-ts-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }

/* Tab bar: the eased scroller owns the motion, so native smooth scrolling must be off */
.fef-tabs .fef-tabs-nav, .fef-tabs .fef-tabs-nav.fef-ts-nav { scroll-behavior: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.fef-tabs .fef-tabs-nav.is-dragging { cursor: grabbing !important; user-select: none; }
.fef-tabs .fef-tabs-nav.is-dragging .fef-tabs-nav-item { pointer-events: none; }
.fef-tabs .fef-tabs-nav.fef-ts-nav { cursor: grab; }
.fef-tabs .fef-tabs-nav-snap { scroll-snap-type: x proximity; }
.fef-tabs-left .fef-tabs-nav-snap, .fef-tabs-right .fef-tabs-nav-snap { scroll-snap-type: y proximity; }
.fef-tabs .fef-tabs-nav-snap .fef-tabs-nav-item { scroll-snap-align: start; }
.fef-tabs .fef-tabs-nav-item { z-index: 1; }

/* Sliding marker ---------------------------------------------------------- */
.fef-tabs-indicator { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; will-change: transform, width, height; }
.fef-tabs-has-ind .fef-tabs-nav-item.fef-tabs-active-tab::after { display: none; }

/* underline — a bar that glides along the bottom (top tabs), top (bottom tabs) or side */
.fef-tabs-ind-underline { top: auto; bottom: 0; height: var(--fef-ind-size, 3px); background: var(--fef-ind-color, #3b82f6); border-radius: 3px; }
.fef-tabs-bottom .fef-tabs-ind-underline { bottom: auto; top: 0; }
.fef-tabs-ind-underline.is-vertical { bottom: auto; top: 0; left: auto; right: 0; width: var(--fef-ind-size, 3px); height: auto; }
.fef-tabs-right .fef-tabs-ind-underline.is-vertical { right: auto; left: 0; }

/* line — the same bar on the opposite edge (top of a top tab bar) */
.fef-tabs-ind-line { top: 0; bottom: auto; height: var(--fef-ind-size, 3px); background: var(--fef-ind-color, #3b82f6); border-radius: 3px; }
.fef-tabs-bottom .fef-tabs-ind-line { top: auto; bottom: 0; }
.fef-tabs-ind-line.is-vertical { top: 0; bottom: auto; left: 0; right: auto; width: var(--fef-ind-size, 3px); height: auto; }
.fef-tabs-right .fef-tabs-ind-line.is-vertical { left: auto; right: 0; }

/* pill — a rounded background that slides behind the active tab */
.fef-tabs-ind-pill { background: var(--fef-ind-color, rgba(59, 130, 246, .14)); border-radius: var(--fef-ind-radius, 999px); box-shadow: var(--fef-ind-shadow, none); }
.fef-tabs-ind-pill.is-vertical { left: 0; }

@media (prefers-reduced-motion: reduce) {
    .fef-tabs-indicator { transition: none !important; }
}