/* Sport Booking Management (bk-member.js, bk-office.js, bk-changes.js): one browser window for each person using the
   system, with their name on its bar; their pages sit in frames inside it and cross-fade as they move between them.
   Wide: the desktop window. Narrow: Member Bookings shows the member's page at its own phone layout in one plain
   rounded frame; the office's part and Changes & Cancellations keep the desktop window, scaled (each scene says why).
   When the person changes (the member, then the office), the office's window rises over hers (reference.md §3a). */
.bk-win-base { left: 26px; top: 20px; width: 848px; height: 500px; }
.bk-win-over { left: 46px; top: 34px; width: 828px; height: 492px; }
.bk-win .dv-url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cd-canvas[data-mode="narrow"] .bk-win-base { left: 12px; top: 10px; width: 316px; height: 560px; border-radius: 24px; }
.cd-canvas[data-mode="narrow"] .bk-win-over { left: 18px; top: 18px; width: 310px; height: 556px; border-radius: 24px; }
.cd-canvas[data-mode="narrow"] .bk-win .dv-bar { height: 34px; }
.cd-canvas[data-mode="narrow"] .bk-win .dv-dots { display: none; }
.cd-canvas[data-mode="narrow"] .bk-win .dv-url { width: 58%; margin-right: 52px; }
.cd-canvas[data-mode="narrow"] .bk-win .dv-view { top: 34px; }

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

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

/* "Right-click", by the pointer (as the roster's) */
.bk-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; }
.bk-tag.is-on { opacity: .9; }

/* The browser's own "are you sure?" box, with the page's question word for word (bk-kit.js dress()): a plain card near
   the top of the window, as a browser places it, the window behind dimmed a little. */
.bk-ask { position: absolute; inset: 0; z-index: 30; background: rgba(27, 26, 23, .16); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s .25s; }
.bk-ask.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.bk-ask-card { position: absolute; left: 50%; top: 18px; width: 300px; margin-left: -150px; padding: 13px 15px 12px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .1), 0 18px 40px -12px rgba(27, 26, 23, .45); font: 400 10px/1.45 Geist, Arial, sans-serif; color: #1b1a17;
  transform: translateY(-6px); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.bk-ask.is-on .bk-ask-card { transform: none; }
.bk-ask-from { display: block; font-weight: 600; font-size: 10.5px; margin-bottom: 5px; }
.bk-ask-text { margin: 0 0 11px; color: #3c3933; }
.bk-ask-btns { display: flex; justify-content: flex-end; gap: 7px; }
.bk-ask-btns span { padding: 4px 12px; border-radius: 6px; font-weight: 600; font-size: 9.5px; }
.bk-ask-no { box-shadow: inset 0 0 0 1px #cfc9bd; color: #3c3933; }
.bk-ask-ok { background: #1f5fbf; color: #fff; transition: background-color .15s ease; }
.bk-ask.is-ok .bk-ask-ok { background: #174a96; }
.cd-canvas[data-mode="narrow"] .bk-ask-card { width: auto; left: 14px; right: 14px; margin-left: 0; }

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