/* Keep the header footprint stable when its action is not needed. */
.site-header .join-pill > svg {
  width: 54px;
  height: 8px;
  flex: 0 0 54px;
}
.site-header .join-pill {
  transition: opacity .2s ease, visibility .2s, transform .25s, box-shadow .25s;
}
.site-header .join-pill[data-context-hidden="true"],
body[data-view="join"] .site-header .join-pill,
body[data-preview="profile"] .site-header .join-pill {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mobile memories fill the space behind the profile copy and floating controls. */
@media (max-width: 750px) {
  body {
    --profile-edge-left: max(16px, calc(env(safe-area-inset-left) + 12px));
    --profile-edge-right: max(16px, calc(env(safe-area-inset-right) + 12px));
    --profile-controls-bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  }
  body[data-view="profile"] .social-links,
  body[data-preview="profile"] .social-links {
    display: none;
  }
  #profile-page .profile-sidebar {
    z-index: 3;
    pointer-events: none;
    overflow: visible;
  }
  #profile-page .profile-person {
    pointer-events: auto;
  }
  #profile-page .profile-explorer {
    z-index: 1;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    top: var(--profile-explorer-top, 230px);
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  #profile-page .profile-view-controls {
    position: fixed;
    z-index: 4;
    top: auto;
    left: var(--profile-edge-left);
    right: auto;
    bottom: var(--profile-controls-bottom);
    margin: 0;
    padding: 0;
    pointer-events: auto;
    box-sizing: border-box;
    max-width: calc(100vw - var(--profile-edge-left) - var(--profile-edge-right));
  }
  #profile-page .profile-layout-picker {
    flex-wrap: nowrap;
    gap: 6px;
  }
  #profile-page .profile-layout-picker .icon-button {
    width: 44px;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
    padding: 0;
  }
  body[data-view="profile"] #memory-bottom-action,
  body[data-preview="profile"] #memory-bottom-action {
    left: auto;
    right: calc(var(--profile-edge-right) - 4px);
    bottom: calc(var(--profile-controls-bottom) - 4px);
    transform: none;
    width: max-content;
    max-width: calc(100vw - var(--profile-edge-left) - var(--profile-edge-right) - 150px);
    margin: 0;
    padding: 4px;
    text-align: right;
    z-index: 5;
  }
  body[data-view="profile"] #memory-bottom-cta {
    padding-inline: 14px;
    gap: 8px;
    white-space: nowrap;
    max-width: 100%;
  }
}
@media (max-width: 380px) {
  #profile-page .profile-layout-picker {
    gap: 4px;
  }
  #profile-page .profile-layout-picker .icon-button {
    width: 40px;
    min-width: 40px;
  }
  body[data-view="profile"] #memory-bottom-action,
  body[data-preview="profile"] #memory-bottom-action {
    max-width: calc(100vw - var(--profile-edge-left) - var(--profile-edge-right) - 134px);
  }
  body[data-view="profile"] #memory-bottom-cta {
    font-size: 20px;
    padding-inline: 10px;
    gap: 7px;
  }
}
@media (max-width: 750px) and (max-height: 500px) and (orientation: landscape) {
  #profile-page .profile-explorer {
    left: max(235px, calc(env(safe-area-inset-left) + 215px));
    top: 90px;
  }
  #profile-page .profile-sidebar {
    bottom: 90px;
    overflow-y: auto;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .join-pill {
    transition: none;
  }
}