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

/* the office's window; at every width (the desktop windows, scaled to fit on narrow screens) */
.ro-win-a { left: 26px; top: 20px; width: 848px; height: 500px; }
/* Zara's window: over the office's, a little in and down, so both read as windows */
.ro-win-b { left: 46px; top: 34px; width: 828px; height: 492px; }

.ro-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 */
.ro-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; }
.ro-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; }

.ro-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.ro-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). */
.ro-later { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.ro-later.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.ro-loading .ro-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. */
.ro-win-a { transition: transform .6s cubic-bezier(.4, 0, .2, 1), filter .6s ease, opacity .6s ease; transform-origin: 50% 35%; }
.ro-win-a.is-back { transform: translateY(-8px) scale(.92); filter: brightness(.82) saturate(.75); opacity: .72; }
.ro-win-a:not(.is-back) { transition-duration: .7s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.ro-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; }
.ro-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) { .ro-later, .ro-later.is-on, .ro-win-a, .ro-win-a:not(.is-back), .ro-win-b, .ro-win-b.is-on { transition: none; } }

/* The dragged person's picture (a browser draws one for a real drag; a script's has none) and the "Right-click" tag
   beside the pointer, up and to the left so it never covers the menu that opens down and right. */
.ro-ghost { position: absolute; left: 0; top: 0; z-index: 40; display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px;
  background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(27, 26, 23, .22), 0 0 0 1px #9CCBAB;
  font: 600 7.5px/1 Geist, Arial, sans-serif; color: #1b1a17; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ro-ghost i { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 5.5px; background: #E7F3EC; color: #1E7A45; }
.ro-ghost.is-on { opacity: .92; }
.ro-tag { position: absolute; left: 0; top: 0; z-index: 40; padding: 3px 6px; border-radius: 4px; background: #1b1a17; color: #fff;
  font: 600 7.5px/1 Geist, Arial, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.ro-tag.is-on { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .ro-ghost, .ro-tag { transition: none; } }
/* A key pressed, shown as a key cap. */
.ro-tag.is-key { padding: 3px 6px 4px; border-radius: 4px; background: #fbfaf7; color: #1b1a17; letter-spacing: .02em;
  box-shadow: 0 0 0 1px #c9c3b6, 0 2px 0 #c9c3b6, 0 6px 14px rgba(27, 26, 23, .18); }
.ro-tag.is-key.is-on { opacity: 1; }

/* Zara's texts and emails, as they arrive: two cards at the top right of her window (the Applications email card's
   look), each listing every message of its kind she was sent, oldest first. */
.ro-notes { position: absolute; z-index: 20; right: 18px; top: 44px; width: 286px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ro-note { padding: 11px 14px 12px; border-radius: 14px;
  background: rgba(252, 252, 250, .98); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 24px 44px -18px rgba(40, 30, 8, .5);
  font: 400 11px/1.45 Geist, Arial, sans-serif; color: #1b1a17;
  opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .35s ease, transform .55s cubic-bezier(.2, .85, .2, 1); }
.ro-note.is-on { opacity: 1; transform: none; }
.ro-note-top { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: #77736a; margin-bottom: 6px; }
.ro-note-top b { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ro-note-top span:last-child { margin-left: auto; }
.ro-note-app { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }
.ro-note-app.is-sms { background: linear-gradient(#5fd068, #2fb240); }
.ro-note-app.is-mail { background: linear-gradient(#4a93ff, #1f6fe5); }
.ro-note-app svg { width: 12px; height: 12px; }
.ro-note-from { display: block; font-size: 11.5px; font-weight: 600; }
.ro-note-sub { display: block; font-size: 11px; }
.ro-note-text { margin: 2px 0 0; font-size: 10.5px; line-height: 1.42; color: #3f3c36; overflow-wrap: anywhere; }
.ro-note-list > .ro-note-text + .ro-note-text, .ro-note-item + .ro-note-item { margin-top: 7px; padding-top: 7px; border-top: 1px solid #ece8df; }
.ro-note-text.is-one { color: #5d5a52; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ro-note, .ro-note.is-on { transition: none; } }