@layer blocks { .search { padding-block: var(--space-2xs); position: sticky; top: var(--sticky-offset, 0); /* Opaque on purpose: the notebook dot grid is painted on , and this sticky bar has to cover it while the list scrolls underneath. */ background: var(--color-bg); z-index: 50; } @media (max-width: 680px) { .search { position: static; background: transparent; } /* The input docks to the bottom; the list switcher stays at the top of the sheet so a stack of lists does not land in the compose bar. */ .search form { box-shadow: var(--shadow-top); padding: var(--space-2xs) 0 var(--space-s); position: fixed; top: auto; /* Sit in the writing column: the sheet tokens inherit from .notebook-content, so the bar clears the rule instead of covering it. */ left: calc(var(--sheet-pad) + var(--notebook-margin) + var(--notebook-gutter)); right: var(--sheet-pad); bottom: 0; background: var(--color-bg); z-index: 50; } } }