/* ═══════════════════════════════════════════════════════════
   Pager — fullscreen nav/content page shell (mobile), two-column
   rail layout (desktop)

   For a section that's really two views — a nav list and whatever it's
   currently showing (ScanEasy's Statistics, Guest, and Settings shells
   are the driving case) — where phone width can't afford both at once
   but desktop width can. Below the breakpoint this is a fixed,
   full-viewport surface that shows ONE pane at a time and slides
   between them; at and above it, it degrades to a static two-column
   layout with a fixed-width nav rail and no transform at all.

     <div class="tn-pager tn-pager--show-nav">
       <div class="tn-pager-pane tn-pager-pane--nav">…nav list…</div>
       <div class="tn-pager-pane tn-pager-pane--content">…current view…</div>
     </div>

   Toggle `.tn-pager--show-nav` / `.tn-pager--show-content` to pick which
   pane is on screen below the breakpoint; above it both panes are laid
   out side by side and the modifier has no visual effect (still worth
   setting it, so an in-page "back to list" control that only exists on
   mobile has a consistent state to key off). Exactly two panes, always
   in this order (nav then content) — this is not a general N-pane
   carousel; that's `.tn-swipe` (swipe.css), which is a deliberately
   different primitive: an inline, in-flow, always-both-panes-mounted
   widget with no desktop degradation, because the ScanEasy scan page it
   was built for stays a phone-width control at every viewport. A
   fullscreen page shell that has to become a static rail on desktop
   doesn't fit that shape, so this isn't built on top of it — same
   reasoning as panel.css's ".tn-scanner-sheet" writeup: share the atoms
   (the transform-slide technique, the z-index scale) not a forced common
   structure the two don't actually have.

   Gesture handling is BYO, same as `.tn-swipe` — this file owns the
   layout, the transform, and the breakpoint; wire up touch deltas (or
   just drive it off nav-list clicks / a "back" button) yourself.

   CRITICAL, same footgun as `.tn-swipe-track` and for the identical
   reason: `.tn-pager` slides via `transform`, which makes it a
   containing block for `position: fixed` descendants — a bottom sheet
   or the camera takeover (`.tn-scanner-sheet`) rendered INSIDE a pane
   gets trapped against the pager instead of the viewport and slides
   with it instead of staying put. ScanEasy already hit this exact bug
   on the shells this primitive replaces and worked around it with a
   global `body.scanner-sheet-open .page-wrapper { transform: none
   !important }` hook — which is fragile: it's a body-class selector
   matched against a *product-owned* class name, so renaming that class
   on only one of several shells silently detaches it with no build
   error. This primitive bakes the fix in instead of leaving every
   consumer to reinvent it: toggle `.tn-pager--suspended` on the SAME
   element you'd otherwise have added the body class for (the element
   opening the sheet already knows when it opens/closes, so it can set
   this directly instead of a global body selector reaching in). Prefer
   this over a new body-class hack; render overlays at the document root
   where you can, and reach for `--suspended` for the cases you can't.
   ═══════════════════════════════════════════════════════════ */

.tn-pager {
    position: fixed;
    inset: 0;
    z-index: var(--tn-z-fixed-nav);
    display: flex;
    width: 200%;
    height: 100%;
    touch-action: pan-y;
    background: var(--tn-bg-page);
    transform: translateX(0);
    transition: transform var(--tn-transition-slow);
}

.tn-pager--show-nav {
    transform: translateX(0);
}

.tn-pager--show-content {
    transform: translateX(-50%);
}

/* Nulls the slide unconditionally — see the CRITICAL note above. Wins
   over --show-content by source order; keep this rule last in the file
   if you ever reorder the block above it. */
.tn-pager--suspended {
    transform: none !important;
}

.tn-pager-pane {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
}

/* ── Desktop — static two-column rail, no fixed positioning, no
   transform. Matches the ≤768/≥769 split used across the rest of the
   system (panel.css, tables.css, cards.css, bottomnav.css). ── */
@media (min-width: 769px) {
    .tn-pager {
        --tn-pager-rail-w: 256px;
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: var(--tn-pager-rail-w) 1fr;
        transform: none;
        transition: none;
    }

    .tn-pager-pane {
        width: auto;
        height: auto;
        overflow-y: visible;
    }

    .tn-pager-pane--nav {
        border-right: 1px solid var(--tn-border);
    }
}

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