@layer blocks {
  .search {
    padding-block: var(--space-2xs);
    position: sticky;
    inset-block-start: var(--sticky-offset, 0);
    /* Opaque on purpose: the notebook dot grid is painted on <body>, and this
       sticky bar has to cover it while the list scrolls underneath. */
    background: var(--color-bg);
    z-index: 50;
  }

  /* Narrow sheet: the input docks to the bottom of the writing column; the
     list switcher stays at the top of the sheet so a stack of lists does not
     land in the compose bar. */
  @container notebook (width < 56rem) {
    .search {
      position: static;
      background: transparent;
    }

    .search form {
      box-shadow: var(--shadow-top);
      padding: var(--space-2xs) 0 var(--space-s);
      position: fixed;
      inset-block-start: auto;
      inset-inline-start: calc(var(--sheet-pad) + var(--notebook-margin) + var(--notebook-gutter));
      inset-inline-end: var(--sheet-pad);
      inset-block-end: 0;
      background: var(--color-bg);
      z-index: 50;
    }
  }
}