/* Scene: Membership Management › Member Portal. One member uses the system throughout, so one browser window
   (hers, with her name on its bar, as in Renewals & Invoicing); her portal's pages sit in frames inside it and
   cross-fade as she moves between them. This file only places them. */

/* the window (wide) and a plain rounded frame (narrow, the page's own phone layout) */
.pt-win { left: 26px; top: 20px; width: 848px; height: 500px; }
.cd-canvas[data-mode="narrow"] .pt-win { left: 12px; top: 10px; width: 316px; height: 560px; border-radius: 24px; }
.cd-canvas[data-mode="narrow"] .pt-win .dv-bar { height: 34px; }
.cd-canvas[data-mode="narrow"] .pt-win .dv-dots { display: none; }
.cd-canvas[data-mode="narrow"] .pt-win .dv-url { width: 58%; margin-right: 52px; }
.cd-canvas[data-mode="narrow"] .pt-win .dv-view { top: 34px; }

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

.pt-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.pt-if { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
/* Later pages lie over the earlier ones and cross-fade in (0.5 s) as the address bar changes; taking one off
   fades it out and shows the page under it again. */
.pt-later { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.pt-later.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.pt-loading .pt-page { visibility: hidden; }   /* an empty window while a page loads: never a page loading on camera */
@media (prefers-reduced-motion: reduce) { .pt-later, .pt-later.is-on { transition: none; } }