/* =============================================================================
   COMPONENT: filter-pills — a single-select row of pill filters (Dusk slice 4:
   To-dos Today/This week/Mine/Unassigned). Active = solid accent; the row
   scrolls horizontally on overflow and never wraps to a second line.
   ========================================================================== */
@layer components {
  .filter-pills {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter-pills::-webkit-scrollbar { display: none; }

  .filter-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-md);
    border-radius: var(--radius-pill);
    border: var(--border-width) solid var(--color-border);
    background: var(--surface);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);

    &:hover { border-color: var(--color-border-strong); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    &[aria-pressed="true"] {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--accent-contrast);
    }
  }
}