/* workfilter.js: the Work toolbar. Search/status/sort share a row;
 * workstreams and views each get a full-width wrapping row. The toolbar
 * scrolls with the page so wrapped controls never cover the work on small
 * screens. Explicit control surfaces avoid native button chrome. Tokens only. */

.work-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); min-width: 0; margin-top: var(--sv-space-3); padding: var(--sv-space-2) 0; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-search { display: flex; flex: 1 1 18rem; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 0 var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 999px; background: var(--sv-surface-raised); }
.work-search:focus-within { border-color: var(--sv-hairline-strong); }
.work-search .icon { width: 14px; height: 14px; color: var(--sv-ink-tertiary); }
.work-search-input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font-size: var(--ui-text); }
.work-search-input:focus-visible { outline: none; }
.work-chips { display: flex; order: 1; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px; }
.work-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 999px; background: var(--sv-surface-raised); color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 500; }
.work-chip:hover { border-color: var(--sv-hairline-strong); color: var(--sv-ink); }
.work-chip.on { background: var(--sv-inverse-surface); border-color: var(--sv-inverse-surface); color: var(--sv-inverse-ink); }
.work-seg { display: inline-flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--sv-radius); background: var(--sv-surface-sunken); }
.work-seg:last-child { order: 2; flex-basis: 100%; }
.work-seg button { appearance: none; border: 0; background: transparent; min-height: 32px; padding: 0 var(--sv-space-3); border-radius: var(--sv-radius); color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 500; }
.work-seg button:hover { background: var(--ws-hover); color: var(--sv-ink); }
.work-seg button[aria-pressed="true"] { background: var(--sv-surface-raised); color: var(--sv-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.work-ws-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, hsl(var(--hue, 210) 55% 45%) 75%, var(--sv-surface-raised)); }

@media (max-width: 640px) {
  .work-filters { gap: var(--sv-space-2); }
  .work-search { flex-basis: 100%; max-width: none; min-height: 44px; }
  .work-chip, .work-seg button { min-height: 44px; }
}