/* Guest previews extend the existing light glass surfaces without revealing extra photos. */
.b-guest-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  color: var(--m-fg-dim);
  background: var(--m-bg-2);
}
.b-guest-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-guest-gate {
  width: calc(100% - 40px);
  max-width: 460px;
  margin: 12px auto 28px;
  padding: 23px;
  color: var(--m-fg);
  background: var(--b-glass);
  border: 1px solid var(--m-glass-line);
  border-radius: 22px;
  box-shadow: var(--b-shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: left;
}
.b-guest-gate-heading { display: flex; align-items: center; gap: 13px; }
.b-guest-gate h2 { margin: 0; font: 750 23px/1.2 var(--m-sans); letter-spacing: -.7px; }
.b-guest-gate p { margin: 16px 0 20px; color: var(--m-fg-dim); font: 400 14px/1.6 var(--m-sans); }
.b-guest-primary { width: 100%; min-height: 50px; justify-content: space-between; gap: 14px; text-align: left; }
.b-guest-primary > span { min-width: 0; overflow-wrap: anywhere; }
.b-guest-primary svg { flex-shrink: 0; }
.b-guest-gate.is-compact { width: 100%; max-width: 360px; margin: 0 auto; padding: 20px; border-radius: 20px; }
.b-guest-gate.is-compact .b-guest-avatar { width: 34px; height: 34px; }
.b-guest-gate.is-compact h2 { font-size: 22px; }
.b-guest-gate.is-compact p { margin: 13px 0 17px; }

.b-profile-landing { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px calc(20px + env(safe-area-inset-bottom)); color: var(--m-fg); }
.b-guest-header { min-height: calc(68px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.b-guest-back { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 1px solid var(--m-glass-line); border-radius: 14px; background: var(--b-glass); box-shadow: var(--b-shadow); color: var(--m-fg-dim); text-decoration: none; }
.b-guest-back svg { flex-shrink: 0; }
.b-guest-landing-layout { padding-top: 26px; }
.b-guest-landing-copy { min-width: 0; }
.b-guest-landing-copy h1 { margin: 0; font: 750 clamp(30px, 9.75vw, 38px)/1.13 var(--m-sans); letter-spacing: -1.4px; }
.b-guest-landing-copy h1 > span { display: block; }
.b-guest-intro { margin: 15px 0 0; color: var(--m-fg-dim); font: 400 14px/1.6 var(--m-sans); overflow-wrap: anywhere; }
.b-guest-collage { position: relative; width: 100%; aspect-ratio: 1.17; margin-top: 20px; isolation: isolate; }
.b-guest-frame { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.92); border-radius: 12px; background: var(--m-bg-2); box-shadow: 0 8px 18px rgba(29,36,46,.12); }
.b-guest-frame.is-center { z-index: 2; left: 24%; top: 0; width: 52%; height: 100%; }
.b-guest-frame.is-left { z-index: 1; left: 0; top: 19%; width: 41%; height: 62%; }
.b-guest-frame.is-right { z-index: 1; right: 0; top: 21%; width: 41%; height: 65%; }
.b-guest-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-guest-collage.has-2 .is-center { left: 35%; width: 58%; }
.b-guest-collage.has-2 .is-left { left: 7%; width: 48%; }
.b-guest-collage.has-1 .is-center, .b-guest-collage.has-0 .is-center { left: 18%; width: 64%; }
.b-guest-photo-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #89919a; background: linear-gradient(145deg, #f0f2f5, #e3e7ec); }
.b-guest-remaining { margin: 18px 0 0; color: var(--m-fg-dim); text-align: center; font: 400 12.5px/1.65 var(--m-sans); overflow-wrap: anywhere; }
.b-guest-remaining > span { white-space: nowrap; }
.b-guest-person { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 10px; color: var(--m-fg-dim); font: 500 13px/1.5 var(--m-sans); overflow-wrap: anywhere; }
.b-guest-person .b-guest-avatar { width: 26px; height: 26px; }
.b-guest-person > span:last-child { min-width: 0; }
.b-guest-landing-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.b-profile-landing .b-guest-primary { justify-content: center; min-height: 50px; text-align: center; font-weight: 600; }
.b-guest-create { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 0; background: none; border: 0; color: var(--m-fg-dim); font: 500 13px/1.5 var(--m-sans); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.b-guest-footer { margin: 8px 0 0; color: var(--m-fg-faint); font: 400 12.5px/1.6 var(--m-sans); text-align: center; }
.b-guest-status { margin: 12px 0 0; color: var(--m-fg-dim); font: 400 13px/1.5 var(--m-sans); }
.b-guest-status.is-error { padding: 10px 12px; border-radius: 12px; background: var(--m-bg-2); }
.b-guest-gate button, .b-profile-landing button, .b-profile-landing a { cursor: pointer; }
.b-profile-landing img, .b-guest-avatar { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

@media (max-width: 360px) {
  .b-guest-gate { width: calc(100% - 32px); padding: 19px; }
  .b-guest-gate h2 { font-size: 21px; }
  .b-profile-landing { padding-right: 20px; padding-left: 20px; }
  .b-guest-remaining { font-size: 12px; }
}
@media (min-width: 760px) {
  .b-profile-landing { padding-right: 40px; padding-left: 40px; }
  .b-guest-header { min-height: 88px; }
  .b-guest-landing-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 80px); align-items: start; padding: 64px 0 56px; }
  .b-guest-landing-copy { grid-column: 1; grid-row: 1; }
  .b-guest-landing-copy h1 { font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -1.8px; }
  .b-guest-intro { margin-top: 20px; font-size: 16px; }
  .b-guest-collage { grid-column: 2; grid-row: 1 / span 2; align-self: center; aspect-ratio: 1.04; margin-top: 0; }
  .b-guest-frame { border-radius: 16px; }
  .b-guest-landing-followup { grid-column: 1; grid-row: 2; min-width: 0; }
  .b-guest-remaining { margin-top: 28px; font-size: 13px; text-align: left; }
  .b-guest-person { justify-content: flex-start; margin-top: 13px; }
  .b-guest-person .b-guest-avatar { width: 30px; height: 30px; }
  .b-guest-landing-actions { margin-top: 28px; }
  .b-guest-footer { margin-top: 14px; }
  .b-guest-gate { margin-top: 20px; }
}