/* Category row. Pills are for buttons only, so categories are plain text links: the selected category is
   XEID magenta, the others are grey and brighten on hover. No item has a surface or outline in any state.
   One row at every width: items keep their natural width and line up with the page grid;
   when the row is wider than the screen it scrolls sideways and the current category is kept in view. */
.profession-nav.profession-glass {
  position: relative;
  display: flex;
  gap: 32px;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.profession-nav.profession-glass::-webkit-scrollbar { display: none; }
/* A soft edge shows that more categories continue off-screen; it clears once the row is scrolled to its end. */
.profession-nav.profession-glass.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.profession-nav.profession-glass.has-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.profession-nav.profession-glass.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
html[dir="rtl"] .profession-nav.profession-glass.has-more-end:not(.has-more-start) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
html[dir="rtl"] .profession-nav.profession-glass.has-more-start:not(.has-more-end) { -webkit-mask-image: linear-gradient(to left, transparent, #000 56px); mask-image: linear-gradient(to left, transparent, #000 56px); }
.profession-nav.profession-glass a {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: start;
  color: #8f8f8f;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  transition: color 180ms ease;
}
.profession-nav.profession-glass a[aria-current] { color: var(--magenta); }
.profession-nav.profession-glass a:focus-visible { outline: none; text-decoration: underline 2px var(--blue); text-underline-offset: 8px; }
.profession-nav.profession-glass a[data-pointer-focus]:focus-visible { text-decoration: none; }
.profession-nav.profession-glass a:not([aria-current]):focus-visible { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .profession-nav.profession-glass a:not([aria-current]):hover { color: #fff; }
}
@media (max-width: 480px) {
  .profession-nav.profession-glass { gap: 24px; }
  .profession-nav.profession-glass a { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .profession-nav.profession-glass a { transition: none; }
}
@media (prefers-contrast: more) {
  .profession-nav.profession-glass a { color: #eee; }
}