/* Point of Sale (pos-tabs.js, pos-accounts.js, pos-courts.js, pos-cash-up.js): one browser window for each person using
   the system, with their name on its bar; their pages sit in frames inside it. The till runs full screen, in its own
   focus mode. Wide: the desktop window. Narrow: the till at its own phone layout in one plain rounded frame. When the
   person changes (the bar staff member, then the manager), the manager's window rises over hers (reference.md §3a). */
.ps-win-base { left: 26px; top: 20px; width: 848px; height: 500px; }
.ps-win-over { left: 46px; top: 34px; width: 828px; height: 492px; }
.ps-win .dv-url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cd-canvas[data-mode="narrow"] .ps-win-base { left: 12px; top: 10px; width: 316px; height: 560px; border-radius: 24px; }
.cd-canvas[data-mode="narrow"] .ps-win-over { left: 18px; top: 18px; width: 310px; height: 556px; border-radius: 24px; }
.cd-canvas[data-mode="narrow"] .ps-win .dv-bar { height: 34px; }
.cd-canvas[data-mode="narrow"] .ps-win .dv-dots { display: none; }
.cd-canvas[data-mode="narrow"] .ps-win .dv-url { width: 58%; margin-right: 52px; }
.cd-canvas[data-mode="narrow"] .ps-win .dv-view { top: 34px; }

/* whose window it is, at the right of its bar */
.ps-who { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 5px;
  font: 600 8.5px/1 Geist, Arial, sans-serif; color: #4a463d; white-space: nowrap; }
.ps-who i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 6.5px; letter-spacing: .02em; color: #fff; }
.cd-canvas[data-mode="narrow"] .ps-who { right: 9px; font-size: 0; gap: 0; }   /* narrow: the initials only */
.cd-canvas[data-mode="narrow"] .ps-who i { width: 18px; height: 18px; font-size: 7px; }

.ps-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.ps-page.ps-zoom { transform-origin: 0 0; will-change: transform; }
.ps-if { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
/* A page change by the same person: later pages lie over earlier ones in the window and cross-fade in (0.5 s). */
.ps-later { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.ps-later.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.ps-loading .ps-page { visibility: hidden; }   /* an empty window while a page loads: never a page loading on camera */

/* A window switch: the window in front steps back (0.6 s: smaller, dimmed), then the other rises over it (0.7 s). */
.ps-win-base { transition: transform .6s cubic-bezier(.4, 0, .2, 1), filter .6s ease, opacity .6s ease; transform-origin: 50% 35%; }
.ps-win-base.is-back { transform: translateY(-8px) scale(.92); filter: brightness(.82) saturate(.75); opacity: .72; }
.ps-win-base:not(.is-back) { transition-duration: .7s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.ps-win-over { opacity: 0; visibility: hidden; transform: translateY(44px) scale(.96); box-shadow: 0 24px 60px rgba(27, 26, 23, .3), 0 0 0 1px rgba(27, 26, 23, .08);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .45s ease .15s, visibility 0s .6s; }
.ps-win-over.is-on { opacity: 1; visibility: visible; transform: none; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .45s ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .ps-later, .ps-later.is-on, .ps-win-base, .ps-win-base:not(.is-back), .ps-win-over, .ps-win-over.is-on { transition: none; }
}