/* Tab pager (Ford 2026-07-16): switching top tabs slides the outgoing panel out
   and the incoming panel in horizontally, directional by tab order, gently eased.

   The panels are moved (once, by tab-slide.js) into a .panel-stage. During a
   slide the stage goes FULL-BLEED (100vw) and clips BOTH axes (overflow:clip):
   horizontally at the viewport (so panels travel edge-to-edge and are clipped at
   the screen edges, not the content column) and VERTICALLY at a FIXED stage
   height = max(from, to) so neither panel spills or shoves the layout. The two
   panels are position:absolute, centered (left:50% + a negative inline margin =
   pinned content width so nothing stretches to 100vw), and slide on transform
   ONLY. Stage height does NOT animate — easing it made the new tab look like it
   was unfurling/expanding from the top (Ford 2026-07-17). */

html.ao-tab-sliding{ overflow-x: clip; }   /* guard vs a 100vw scrollbar */

.panel-stage{ position: relative; }

/* Kill the settle "bump" (Ford 2026-07-16). While a panel slides it is
   position:absolute — a block-formatting context, so its first child's top
   margin is CONTAINED (content sits a few px lower). At rest, in normal flow,
   that same margin COLLAPSES OUT and the content sits higher — so the instant a
   slide ends the content snaps UP. Only bites when landing on a panel whose
   first element has a collapsing top margin, i.e. one WITHOUT a flush sub-tab
   bar (Fleet / Account / Repairs) — exactly the tabs Ford saw bump.
   Fix: make the RESTING panel a BFC too (display:flow-root), so the margin is
   contained in BOTH states → nothing to collapse → no snap. Invisible where the
   first child has no top margin (the sub-tab panels); everywhere else it just
   holds the content at the same "lower" spot it already occupies mid-slide. */
.panel-stage > .panel.active{ display: flow-root; }

.panel-stage.ao-sliding{
  width: 100vw;
  margin-left: calc(50% - 50vw);            /* break out to full viewport width */
  overflow: clip;                            /* clip horiz @viewport + vert @height */
  /* No height transition — height is snap-set by tab-slide.js for the whole slide. */
}
.panel-stage.ao-sliding > .panel.ao-slide-from,
.panel-stage.ao-sliding > .panel.ao-slide-to{
  position: absolute;
  top: 0; left: 50%;                         /* width + negative margin (inline) center it */
  display: block;                            /* keep both panels rendered through the slide */
  /* Tab slides disabled (Ford 2026-07-22) — keep rules inert if anything still
     toggles .ao-sliding. */
  transition: none;
  will-change: auto;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce){
  html.ao-tab-sliding{ overflow-x: visible; }
  .panel-stage.ao-sliding{ transition: none; }
  .panel-stage.ao-sliding > .panel.ao-slide-from,
  .panel-stage.ao-sliding > .panel.ao-slide-to{ transition: none; }
}