/* Scene: Staff and Volunteers › Timesheets Entry. Two browser windows: Zara Ahmed's (a bar staff member, in front first)
   and the club office's, which rises over hers when the person using the system changes. Placed and switched as in
   Renewals & Invoicing (reference.md §3a). */

/* Zara's window (wide) and a plain rounded frame (narrow, her page's own phone layout) */
.ts-win-a { left: 26px; top: 20px; width: 848px; height: 500px; }
/* the office's window: over Zara's, a little in and down, so both read as windows */
.ts-win-b { left: 46px; top: 34px; width: 828px; height: 492px; }
.cd-canvas[data-mode="narrow"] .ts-win-a { left: 12px; top: 10px; width: 316px; height: 560px; border-radius: 24px; }
.cd-canvas[data-mode="narrow"] .ts-win-b { left: 18px; top: 18px; width: 310px; height: 556px; border-radius: 24px; }
.cd-canvas[data-mode="narrow"] .ts-win .dv-bar { height: 34px; }
.cd-canvas[data-mode="narrow"] .ts-win .dv-dots { display: none; }
.cd-canvas[data-mode="narrow"] .ts-win .dv-url { width: 58%; margin-right: 52px; }
.cd-canvas[data-mode="narrow"] .ts-win .dv-view { top: 34px; }

.ts-win .dv-url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* whose window it is, at the right of its bar */
.ts-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; }
.ts-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"] .ts-who { right: 9px; font-size: 0; gap: 0; }   /* narrow: the initials only */
.cd-canvas[data-mode="narrow"] .ts-who i { width: 18px; height: 18px; font-size: 7px; }

.ts-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.ts-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). */
.ts-later { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.ts-later.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.ts-loading .ts-page { visibility: hidden; }   /* an empty window while a page loads: never a page loading on camera */

/* A change of who is using the system: a window switch, about 1.5 s with its pause (the scene's timing). The
   window in front steps back first (0.6 s: smaller, dimmed), then, 0.85 s after it began, the other comes
   forward (0.7 s): the member's rises over the office's from a little below, or the office's returns to full
   size as hers drops away. */
.ts-win-a { transition: transform .6s cubic-bezier(.4, 0, .2, 1), filter .6s ease, opacity .6s ease; transform-origin: 50% 35%; }
.ts-win-a.is-back { transform: translateY(-8px) scale(.92); filter: brightness(.82) saturate(.75); opacity: .72; }
.ts-win-a:not(.is-back) { transition-duration: .7s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.ts-win-b { 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; }
.ts-win-b.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) { .ts-later, .ts-later.is-on, .ts-win-a, .ts-win-a:not(.is-back), .ts-win-b, .ts-win-b.is-on { transition: none; } }