/* Scene: Membership Management › Applications. The real pages sit in frames inside
   the browser window; this file only places them and draws the email card. */

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

.ap-page { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.ap-if { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.ap-office { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.ap-office.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }

/* the confirmation email, as it arrives */
.ap-mail { position: absolute; z-index: 20; right: 40px; top: 46px; width: 262px; padding: 12px 14px 14px; 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); pointer-events: none; }
.ap-mail.is-in { opacity: 1; transform: none; }
.cd-canvas[data-mode="narrow"] .ap-mail { left: 22px; right: 22px; width: auto; top: 54px; }
.ap-mail-top { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: #77736a; }
.ap-mail-top b { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ap-mail-top span:last-child { margin-left: auto; }
.ap-mail-app { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(#4a93ff, #1f6fe5); }
.ap-mail-app svg { width: 12px; height: 12px; }
.ap-mail-from { display: block; margin-top: 9px; font-size: 12px; font-weight: 600; }
.ap-mail-sub { display: block; font-size: 11.5px; }
.ap-mail-text { margin: 5px 0 0; font-size: 10.5px; line-height: 1.45; color: #5d5a52; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ap-mail-btn { display: inline-flex; align-items: center; margin-top: 10px; height: 28px; padding: 0 13px; border-radius: 6px; background: #14275E; color: #fff; font-size: 11px; font-weight: 600; transition: transform .12s ease, background .25s; }
.ap-mail-btn.is-press { transform: scale(.96); }
.ap-mail.is-done .ap-mail-btn { background: #0F7A3C; }