@layer components {
  /* Phones: the filter pills stay at the top of the screen while the
     results scroll, so the filters are one tap away from anywhere. */
  .main--listing .sidebar {
    @media (width < 860px) {
      position: sticky;
      z-index: 2;
      background-color: var(--color-canvas);
      inset-block-start: 0;
      margin-block: calc(var(--block-space-half) * -1) var(--negative-block-space);
      padding-block: calc(var(--block-space-half) - 0.125rem);
    }

    /* Desktop: the filters stay beside the results while they scroll,
       scrolling on their own when taller than the screen. The inline
       padding keeps chip borders and focus rings clear of the clip. */
    @media (width >= 860px) {
      position: sticky;
      align-self: start;
      inline-size: auto;
      inset-block-start: var(--block-space);
      margin-inline: -0.25rem;
      max-block-size: calc(100dvh - var(--block-space) * 2);
      overflow-y: auto;
      padding-inline: 0.25rem;
      scrollbar-color: var(--color-separator) transparent;
      scrollbar-width: thin;
    }
  }

  /* Whatever the page jumps to (the results, a page of them) lands below
     the pills, not under them. */
  html:has(.filter-pills) {
    @media (width < 860px) {
      scroll-padding-block-start: 4rem;
    }
  }

  /* A scrolling row clips at its edges, top and bottom too: the block
     padding keeps the pills' borders inside it at any zoom. */
  .filter-pills {
    display: flex;
    gap: var(--inline-space-half);
    margin-inline: calc(var(--page-gutter) * -1);
    overflow-x: auto;
    padding-block: 0.125rem;
    padding-inline: var(--page-gutter);
    scrollbar-width: none;

    @media (width >= 860px) {
      display: none;
    }
  }

  .filter-pill {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-separator);
    border-radius: 999px;
    background-color: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    gap: 0.375rem;
    white-space: nowrap;

    .icon {
      font-size: 1.125rem;
    }
  }

  .filter-pill--set {
    border-color: var(--color-ink);
    background-color: var(--color-ink);
    color: var(--color-surface);
  }

  .filter-pill__chevron {
    font-size: 1.125rem;
    margin-inline-end: -0.25rem;
  }

  .filter-pill__badge {
    display: grid;
    border-radius: 999px;
    background-color: var(--color-ink);
    block-size: 1.25rem;
    color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 600;
    inline-size: 1.25rem;
    place-items: center;
  }

  /* Phones: a sheet rising from the bottom, every group folded to one line
     with what it is set to. A pill's sheet holds its group alone. */
  .filter-sheet {
    @media (width < 860px) {
      overflow: hidden;
      max-width: 100%;
      max-height: calc(100dvh - 2rem);
      padding: 0;
      border: 0;
      border-radius: 1.5rem 1.5rem 0 0;
      margin: auto 0 0;
      background-color: var(--color-surface);
      block-size: calc(100dvh - 2rem);
      color: var(--color-ink);
      inline-size: 100%;

      /* Slides up from the bottom edge on open, back down on close, the
         page dimming behind it. allow-discrete keeps it on screen (and in
         the top layer) until the slide down has finished. */
      transition:
        translate 300ms cubic-bezier(0.32, 0.72, 0, 1),
        display 300ms allow-discrete,
        overlay 300ms allow-discrete;
      translate: 0 100%;

      &[open] {
        translate: 0 0;

        @starting-style {
          translate: 0 100%;
        }
      }

      /* As tall as its one group, resting on the bottom edge. */
      &[data-single] {
        block-size: auto;
        inset-block-start: auto;
      }

      &::backdrop {
        background-color: oklch(var(--lch-black) / 0%);
        transition:
          background-color 300ms,
          display 300ms allow-discrete,
          overlay 300ms allow-discrete;
      }

      &[open]::backdrop {
        background-color: oklch(var(--lch-black) / 40%);

        @starting-style {
          background-color: oklch(var(--lch-black) / 0%);
        }
      }
    }

    /* Desktop: never opened, just shown, as the sidebar. */
    @media (width >= 860px) {
      position: static;
      display: block;
      padding: 0;
      border: 0;
      margin: 0;
      background: none;
      color: inherit;
      inline-size: auto;
    }
  }

  html:has(.filter-sheet:modal) {
    overflow: hidden;
  }

  .filter-sheet__panel {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    max-block-size: inherit;
  }

  /* The grip that says the sheet can be pulled down. */
  .filter-sheet__handle {
    flex: none;
    border-radius: 999px;
    margin: var(--block-space-half) auto 0;
    background-color: var(--color-separator);
    block-size: 0.3125rem;
    inline-size: 2.5rem;

    @media (width >= 860px) {
      display: none;
    }
  }

  .filter-sheet__header {
    display: flex;
    align-items: center;
    padding: var(--block-space-quarter) var(--inline-space) var(--block-space-half);
    border-block-end: 1px solid var(--color-border);
    gap: var(--inline-space);

    @media (width >= 860px) {
      display: none;
    }
  }

  .filter-sheet__title {
    font-size: var(--text-lg);
    font-weight: 700;
  }

  .filter-sheet__reset {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-inline-start: auto;

    [data-single] & {
      display: none;
    }
  }

  .filter-sheet__close {
    display: grid;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    block-size: 2.5rem;
    color: var(--color-ink);
    cursor: pointer;
    inline-size: 2.5rem;
    margin-inline: auto calc(var(--inline-space-half) * -1);
    place-items: center;

    .filter-sheet__reset + & {
      margin-inline-start: 0;
    }
  }

  .filter-sheet .filters {
    @media (width < 860px) {
      flex: 1;
      gap: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-inline: var(--inline-space);

      > * + * {
        margin-block-start: 0;
        padding-block-start: 0;
      }

      [data-single] & > :not([data-focused]) {
        display: none;
      }
    }
  }

  .filter-sheet__footer {
    padding: var(--block-space-half) var(--inline-space) calc(var(--block-space-half) + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--color-border);

    @media (width >= 860px) {
      display: none;
    }
  }

  /* Dimmed while the choice's results are on their way. */
  .filter-sheet__show {
    padding: 0.875rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-ink);
    color: var(--color-surface);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    inline-size: 100%;
    transition: opacity 150ms;

    html[aria-busy] & {
      opacity: 0.6;
    }
  }
}