@layer components {
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    margin-block: var(--space-4);
  }

  /* A select is as wide as its longest option, and the set list has some long
     ones. Without a floor of zero the flex item refuses to shrink and pushes
     the narrowest phones into a sideways scroll. */
  .filter-bar label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .filter-bar select {
    max-width: 100%;
    font: inherit;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
  }

  .filter-bar button {
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-accent-ink);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
  }
}