/* Each shell retains a removed card's measured height, including its margins. */
#yapFeed > .feed-entry { display: flow-root; min-width: 0; }
#yapFeed > .feed-entry-placeholder { pointer-events: none; }
#feedLoadSentinel { min-height: 32px; padding: 8px 0; text-align: center; }
#feedLoadSentinel[hidden], #loadMoreYapsButton.hidden { display: none !important; }
#feedLoadStatus { margin: 0; color: var(--muted-text); font-size: 14px; }
#loadMoreYapsButton { margin: 10px auto 0; }

/* Clip sideways overflow without creating a scrolling ancestor for the header. */
html { overflow-x: clip; }
body:not(.modal-open) { overflow-x: clip !important; overflow-y: visible; }
body > .site-header {
  /* Paint the same page background behind the original logo and text. */
  position: sticky !important;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
}
body > .site-header::before {
  content: "";
  position: absolute;
  top: calc(-1 * env(safe-area-inset-top, 0px));
  bottom: -6px;
  left: calc(-1 * var(--header-page-inset, 18px));
  right: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--page-background);
  /* The page uses scrolling backgrounds on every device. Preserve its size
     and original header offset instead of squeezing the gradient into a strip. */
  background-attachment: scroll;
  background-size: var(--header-page-width, 100vw) var(--header-page-height, 100vh);
  background-position: 0 min(0px, calc(env(safe-area-inset-top, 0px) - var(--header-page-top, 0px)));
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  body[data-auth-state="authenticated"] { padding-bottom: 0 !important; }
  body[data-auth-state="authenticated"] #appSection {
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }
}

/* v293 — balanced sticky brand-header breathing room.
   Keep the icon at the same visual top position, but give it the matching
   amount of room underneath on phone and desktop. */
body > .site-header .site-logo {
  transform: none !important;
}
@media (max-width: 700px) {
  body > .site-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}
@media (min-width: 701px) and (max-width: 899px) {
  body > .site-header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
@media (min-width: 900px) {
  body > .site-header {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}