/* Search page body — auto-loaded for the search snippet
   (site/snippets/search/search.php). The centre scrolls on its own inside the
   frame; below 60rem the frame lets the page scroll as a whole. */

.search__selected:has(.chip) {
  padding: var(--space-2xs) var(--space-s);
  border-bottom: var(--border);
}

.search__center {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Below 60rem the filter column is a row that stays under the head bar. The
   chips are in that row, and there is no right column. */
@media (max-width: 60rem) {
  /* The page scrolls, not the centre: as a scroll container that contains
     its overscroll it would take a swipe and pass none of it on. */
  .search__center {
    height: auto;
    overflow-y: visible;
    overscroll-behavior: auto;
  }
  .search .frame__column--left {
    position: sticky;
    top: var(--menubar-h);
    z-index: 3;
    border: 0;
  }
  .search .frame__column--right,
  .search__selected {
    display: none;
  }
}

/* The magnifier back to the search: only on the Saved list's screen. */
.search__open {
  display: none;
}

/* Below 60rem, the Saved list's screen (search--saved): the right column in
   place of the filter row and the results, under the plain head bar — the
   wordmark between a magnifier back to the search and the hamburger. The
   list fills the screen, "Jetzt lesen" centred at its foot; no Drucken. */
@media (max-width: 60rem) {
  .search--saved .frame__column--right {
    display: block;
    border: 0;
  }
  .search--saved .frame__column--left,
  .search--saved .frame__center {
    display: none;
  }
  .search--saved .saved-list {
    min-height: calc(100dvh - var(--menubar-h));
  }
  .search--saved .saved-list__foot {
    justify-content: center;
  }
  .search--saved .saved-list__print {
    display: none;
  }

  body:has(.search--saved) .menubar--search {
    grid-template-columns: 1fr auto 1fr;
    color: inherit;
    background: var(--color-bar);
  }
  body:has(.search--saved) .menubar--search .logo {
    display: inline-flex; /* as in logo.snippet.css */
  }
  body:has(.search--saved) .search-bar--head {
    display: none;
  }
  body:has(.search--saved) .search__open {
    display: flex;
  }
  /* The open menu shows the language switch there instead. */
  body:has(.search--saved) .menubar--open .search__open {
    display: none;
  }
}