/* ============================================================
   vt.css — cross-document view transitions (UX plan Task B4)

   Navigation used to be a 320ms blur/zoom "leave" animation in main.js with
   the matching "enter" deliberately disabled, and main.js was not even loaded
   on seven pages — so some clicks paused and some snapped. This replaces both
   with the platform's own cross-document transition: the outgoing page
   crossfades out, the incoming one fades up 6px, and the sidebar and topbar
   are NAMED so they do not participate at all. You sit still; the content
   changes.

   Why its own file and not app-shell.css: a cross-document transition needs
   BOTH documents to opt in. app-shell.css is on 18 pages; this file goes on
   every page — app, Business Tracker, marketing, auth, offline — so no hop
   across those boundaries snaps. Browsers without the API (Firefox today)
   ignore all of it and snap, which is what half the app does now anyway.

   Durations are literal here on purpose: this file loads on pages that do not
   link the token file, so var(--q-dur-2/3) would resolve to nothing. The
   values equal --q-dur-2 (160ms) and --q-dur-3 (240ms); keep them in step.

   Canadian Oxford spelling; -ize never -ise.
   ============================================================ */

@view-transition{navigation:auto}
::view-transition-old(root){animation:q-vt-out 160ms cubic-bezier(.4,0,1,1) both} /* ui-gate-allow: raw-duration — see header */
::view-transition-new(root){animation:q-vt-in 240ms cubic-bezier(.2,0,0,1) both} /* ui-gate-allow: raw-duration — see header */
@keyframes q-vt-out{to{opacity:0}}
@keyframes q-vt-in{from{opacity:0;transform:translateY(6px)}}
/* pinned chrome: no group motion AND no old/new crossfade (the group rule alone still double-draws the active nav pill) */
::view-transition-group(q-side),::view-transition-group(q-topbar){animation-duration:0s}
::view-transition-old(q-side),::view-transition-new(q-side),::view-transition-old(q-topbar),::view-transition-new(q-topbar){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}} /* ui-gate-allow: prm — pseudo-elements app-shell.css cannot reach */