@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);
    }
  }

  /* 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;
    }
  }
}