/* ---- Library page header (title + search bar) - see Library.ts/html. ----
   Wraps .pageHeader and tiles.css's .searchBar (already sticky on its own)
   in one sticky block so the title stays put too, instead of scrolling
   away while the search bar stays behind - reported directly. Needs its
   own opaque background since .pageHeader's <h1> has none - without it,
   grid tiles scrolling underneath would show through the title text once
   stuck. */
.libraryHeader {
  position: sticky;
  top: 0;
  /* Above 2, not just tiles.css's own .searchBar precedent: a tile's
     .tileOverlay action buttons are ALSO z-index: 2, and (unlike the
     slim .searchBar this header replaced) this header is tall enough
     that a scrolling tile's own overlay - always-visible on touch, see
     tiles.css's (hover: none) block - reaches it well before it's fully
     scrolled past. Equal z-index ties break on paint order, and a tile
     (inside #grid, after this header in the DOM) wins that tie -
     reported directly as buttons rendering over the header while
     scrolling. z-index: 3 matches shell/Shell.css's own .mobileTopBar,
     the other sticky header this one already has to stack correctly
     under on mobile. */
  z-index: 3;
  background: var(--bg);
  padding-top: 4px;
}

/* Below 720px, shell/Shell.css's own sticky .mobileTopBar already occupies
   top:0 - stacking this header at top:0 too would have both fighting over
   the same spot, with this one (later in paint order) covering the app's
   brand bar. Stick it right below instead. */
@media (max-width: 720px) {
  .libraryHeader {
    top: var(--mobile-topbar-h);
  }
}