/* Sticky category pill bar (Browse RFPs). Light theme only. Neutral outline pills; the one lit pill is rust with white text.
   Needs tokens.css. Every pill is 44px tall; the ring is the shared 3px near-black with a 2px offset (the row has room for it, so it is never clipped). */
.rfp-catbar {
  position: sticky; top: 0; z-index: 20;
  margin: 0 calc(-1 * var(--space-5, 24px)) var(--space-3, 12px);
  padding: 0 var(--space-5, 24px);
  background: var(--color-surface, #F7F4EF);
  border-bottom: 1px solid var(--color-card-border, #E5E0D8);
  font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif);
}
.rfp-catbar__scroll {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2, 8px);
  padding: 8px 6px; margin: 0 -6px;           /* room for the focus ring on every side */
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rfp-catbar__scroll::-webkit-scrollbar { display: none; }
.rfp-catbar__pill {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 44px; min-height: 44px; padding: 0 var(--space-4, 16px);
  border: 1px solid var(--color-border, #7A736C); border-radius: 999px;
  background: var(--color-surface-raised, #FFFFFF); color: var(--color-text, #2B2623);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.rfp-catbar__pill:hover { background: color-mix(in srgb, var(--color-border, #7A736C) 14%, var(--color-surface-raised, #FFFFFF)); }
.rfp-catbar__pill[aria-pressed="true"] { background: var(--color-accent, #A7410E); border-color: var(--color-accent, #A7410E); color: #FFFFFF; }
.rfp-catbar__pill:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
/* A soft fade on the side that has more pills, so a cut-off row reads as scrollable */
.rfp-catbar[data-more-right="true"] .rfp-catbar__scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.rfp-catbar[data-more-left="true"] .rfp-catbar__scroll { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.rfp-catbar[data-more-left="true"][data-more-right="true"] .rfp-catbar__scroll { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
@media (max-width: 760px) { .rfp-catbar { margin-left: calc(-1 * var(--space-4, 16px)); margin-right: calc(-1 * var(--space-4, 16px)); padding: 0 var(--space-4, 16px); } }