/* Pulse project categories and filters (docs/DESIGN-SYSTEM.md "Pulse project
   categories and filters"). Structure: the Apple TV app category row and the
   Linear and Vercel filter bars, one chip row that scrolls sideways with
   scroll snap. Sort: a Bloomberg style key plus caret, in mono. The one
   flourish is the edge fade that says more chips exist. The project cards
   stay in the grid. Outcome colours stay --up/--warn/--down, as data only. */

/* ── the control band head: title, count, sort, search, New folder ─────── */
#app .portfolio { margin: 8px 0 20px; padding-bottom: 12px; }
/* Sticky: seat the band flush under the floating chrome, so no card peeks
   through a gap between the two. */
@media (min-width: 768px) { #app .portfolio { top: 68px; margin-top: -4px; padding-top: 12px; } }
#app .portfolio__head { gap: 12px; flex-wrap: wrap; }
#app .portfolio__head h2 { flex: 0 0 auto; font-size: 18px; }
.pf-result {
  flex: 1 1 auto; margin: 0; min-width: 0; color: var(--dim);
  font: 11px/1.5 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums slashed-zero;
}
.portfolio__tools { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.pf-sort { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pf-sort__k { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.pf-sort__select { width: 132px; }
.pf-sort__select select { width: 100%; height: 36px; padding-right: 30px; font: 12px var(--mono); }
.pf-sort__dir { min-width: 72px; min-height: 36px; font: 11px var(--mono); letter-spacing: .04em; }
.pf-sort__dir:disabled { opacity: .4; }
#app .portfolio__search { width: 200px; }
#app .portfolio__search .ui-input { height: 36px; }
.portfolio__search .ui-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portfolio__new { min-height: 36px; flex: 0 0 auto; }
@media (min-width: 768px) { .portfolio__search .ui-input { font-size: 13px; } }

/* ── the two chip carousels: categories, then metric filters ───────────── */
.pf-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; min-width: 0; }
.pf-row[hidden] { display: none; }
.pf-row--metrics { margin-top: 8px; }
.pf-scroller { position: relative; flex: 1 1 auto; min-width: 0; }
.pf-scroller .portfolio__filters {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 4px;
  padding: 4px; margin: -4px; scrollbar-width: none;
}
.pf-scroller .portfolio__filters::-webkit-scrollbar { display: none; }
.pf-scroller .portfolio__filter { flex: 0 0 auto; scroll-snap-align: start; }
.pf-scroller .portfolio__filter > span:first-of-type { overflow: visible; }
.pf-row--metrics .portfolio__filter { min-height: 34px; font-size: 11.5px; }
.pf-row__btn { --ui-ib: 32px; flex: 0 0 auto; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.pf-row__btn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--card); }
.pf-row__btn:disabled { opacity: .35; cursor: default; }
.pf-row__btn svg { width: 15px; height: 15px; }
/* The arrows show only while their row overflows. */
.pf-row:not(:has(> .pf-scroller[data-overflow])) > .pf-row__btn { display: none; }
.pf-clear { flex: 0 0 auto; }
.pf-clear:disabled { opacity: .4; cursor: default; }

.pf-scroller::before, .pf-scroller::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 36px;
  pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-out, ease);
}
.pf-scroller::before { left: -4px; background: linear-gradient(90deg, var(--bg), transparent); }
.pf-scroller::after { right: -4px; background: linear-gradient(270deg, var(--bg), transparent); }
.pf-scroller[data-more-start]::before, .pf-scroller[data-more-end]::after { opacity: 1; }

.pf-dot { font-size: 9px; line-height: 1; }
.pf-dot--up { color: var(--up); }
.pf-dot--warn { color: var(--warn); }
.pf-dot--down { color: var(--down); }
.pf-dot--none { color: var(--faint); }

@media (max-width: 767px) {
  #app .portfolio__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
  .pf-result { text-align: right; }
  .portfolio__tools { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search search" "sort new"; gap: 8px; }
  #app .portfolio__search { grid-area: search; width: 100%; }
  .pf-sort { grid-area: sort; }
  .portfolio__new { grid-area: new; }
  .pf-sort { min-width: 0; }
  .pf-sort__select { width: auto; flex: 1 1 auto; min-width: 0; }
  .pf-sort__select select, .pf-sort__dir, .portfolio__new, #app .portfolio__search .ui-input { min-height: 44px; height: 44px; }
  .pf-row--metrics .portfolio__filter { min-height: 44px; }
  .pf-row__btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-scroller::before, .pf-scroller::after { transition: none; }
}