/* ═══════════════════════════════════════════════════════════
   Swipe panes — a two-or-more pane horizontal carousel.

   ScanEasy's scan page puts "Scan IN" and "Scan OUT" side by side and
   lets the operator swipe between them — the right call for a screen used
   one-handed, where a mode switch has to be reachable without aiming at a
   small tab. This generalises that pattern.

   ScanEasy drives it from JS that tracks touch deltas and toggles a class
   on the wrapper (see its swipeManager.js). This file owns only the
   layout, the transform, and the mode tabs — bring your own gesture
   handling, or just drive it from the tabs alone (the transform is the
   same either way).

     <div class="tn-swipe">
       <div class="tn-swipe-tabs">
         <button class="tn-swipe-tab is-active">In</button>
         <button class="tn-swipe-tab">Ut</button>
       </div>
       <div class="tn-swipe-viewport">
         <div class="tn-swipe-track" data-pane="0">   <- set data-pane, or add .is-pane-1 etc
           <section class="tn-swipe-pane">…</section>
           <section class="tn-swipe-pane">…</section>
         </div>
       </div>
     </div>

   CRITICAL for anyone embedding this: .tn-swipe-track uses `transform`,
   which makes it a containing block for `position: fixed` descendants —
   a modal or scanner sheet rendered INSIDE a pane will be trapped by it
   and positioned against the track instead of the viewport. ScanEasy hit
   exactly this and had to null the transform out with
   `body.scanner-sheet-open .page-wrapper { transform: none !important }`.
   Render overlays at the document root (a portal), not inside a pane.
   ═══════════════════════════════════════════════════════════ */

.tn-swipe {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Mode tabs — a two-up segmented switch sized for a thumb.
   Kept visible at every width: the swipe is an accelerator, never the
   only way to change pane (it's invisible to a mouse and to assistive
   tech, so a discoverable control has to exist alongside it). ── */
.tn-swipe-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--tn-bg-page);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
}

.tn-swipe-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--tn-touch-target);
    padding: 0 var(--tn-space-md);
    border: none;
    border-radius: var(--tn-radius);
    background: none;
    color: var(--tn-text-secondary);
    font-family: inherit;
    font-size: var(--tn-font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tn-transition), color var(--tn-transition);
}

.tn-swipe-tab:hover {
    color: var(--tn-text-primary);
}

.tn-swipe-tab.is-active {
    background: var(--tn-bg-card);
    color: var(--tn-accent);
    box-shadow: var(--tn-shadow-sm);
}

.tn-swipe-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

/* Directional tints — ScanEasy's IN/OUT signal has to read at a glance in
   a dim aisle, which is why tokens.css keeps --tn-scan-in/-out saturated
   rather than reusing the muted status palette. */
.tn-swipe-tab--in.is-active {
    color: var(--tn-scan-in);
}

.tn-swipe-tab--out.is-active {
    color: var(--tn-scan-out);
}

/* ── Viewport + track ── */
.tn-swipe-viewport {
    overflow: hidden;
    margin-top: var(--tn-space-md);
}

.tn-swipe-track {
    display: flex;
    /* touch-action:pan-y lets the browser keep vertical scrolling while a
       JS handler claims the horizontal axis — without it, a drag either
       fights the page scroll or blocks it entirely. */
    touch-action: pan-y;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.tn-swipe-pane {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

/* Pane selection. data-pane is the ergonomic form for JS; the .is-pane-N
   classes exist for frameworks that only bind class strings. */
.tn-swipe-track[data-pane="0"], .tn-swipe-track.is-pane-0 { transform: translateX(0); }
.tn-swipe-track[data-pane="1"], .tn-swipe-track.is-pane-1 { transform: translateX(-100%); }
.tn-swipe-track[data-pane="2"], .tn-swipe-track.is-pane-2 { transform: translateX(-200%); }
.tn-swipe-track[data-pane="3"], .tn-swipe-track.is-pane-3 { transform: translateX(-300%); }

/* While a finger is down, follow it 1:1 — a transition here would lag the
   drag behind the touch. JS sets an inline transform and adds this class. */
.tn-swipe-track.is-dragging {
    transition: none;
    will-change: transform;
}

/* ── Dots — a secondary position indicator for 3+ panes, where two tabs
   stop being enough to show where you are. ── */
.tn-swipe-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--tn-space-md);
}

.tn-swipe-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--tn-border);
    cursor: pointer;
    transition: background var(--tn-transition), width var(--tn-transition);
}

.tn-swipe-dot.is-active {
    width: 20px;
    border-radius: 999px;
    background: var(--tn-accent);
}

@media (prefers-reduced-motion: reduce) {
    .tn-swipe-track {
        transition: none;
    }
}