/* Filter chips and dashboard tabs: one sleek row with a glowing pill that glides to the active option (seg.js). */
.chips, .tabs {
  position: relative; isolation: isolate; display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 2px;
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: none; scrollbar-width: none;
  padding: 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -14px 30px -10px rgba(5,7,13,.5), 0 26px 60px -36px rgba(36,104,216,.95);
}
.chips::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.chips.scrolls, .tabs.scrolls { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%); }
.chips.at-start, .tabs.at-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); }
.chips.at-end, .tabs.at-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px); mask-image: linear-gradient(to right, transparent 0, #000 22px); }

.chips .chip, .tabs button {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 17px;
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  color: rgba(245,248,252,.62); background: none !important; box-shadow: none !important; border: 0; border-radius: 999px; cursor: pointer;
  transition: color .35s, transform .2s;
}
.chips .chip:hover, .tabs button:hover { color: #fff; }
.chips .chip:active, .tabs button:active { transform: scale(.96); }
.chips .chip[aria-pressed="true"], .tabs button[aria-selected="true"] { color: #fff; }
.chips .chip:focus-visible, .tabs button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* item counts */
.chip .n { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-content: center; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(245,248,252,.7); transition: background .35s, color .35s; }
.chip[aria-pressed="true"] .n { background: rgba(255,255,255,.22); color: #fff; }
.tabs .dot { margin-left: 0; }

/* the moving pill */
.glider { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none; overflow: hidden; opacity: 0;
  background: linear-gradient(135deg, var(--blue-lite, #6aa6ff), var(--blue, #2468d8) 55%, var(--blue-deep, #10357f));
  box-shadow: 0 0 26px rgba(36,104,216,.85), 0 8px 22px -8px rgba(36,104,216,.9), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -6px 14px rgba(16,53,127,.5);
  transition: transform .5s cubic-bezier(.3,1.3,.4,1), width .5s cubic-bezier(.3,1.3,.4,1), height .3s, opacity .25s; }
.glider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: gliderSheen 4.5s ease-in-out infinite; }
@keyframes gliderSheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.glider.jump { transition: none; }

/* phones: a floating pill that sticks under the header, swipeable */
@media (max-width: 640px) {
  .chips { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; width: auto; margin-inline: 0; padding: 5px; border-radius: 999px; background: rgba(10,16,32,.78); }
  .chips .chip, .tabs button { min-height: 44px; padding: 0 15px; font-size: 11px; }
  .tabs { display: flex; border-radius: 999px; padding-right: 5px; }
}
@media (prefers-reduced-motion: reduce) { .glider { transition: opacity .2s; } .glider::after { animation: none; } }
/* Book page: the filter row sits centred between the hero and the list; on phones it follows you down the list */
.filter-bar { display: flex; justify-content: center; padding: 0 var(--gutter); margin-top: clamp(4px, 1vw, 10px); }
.filter-bar .chips { margin-top: 0; }
@media (max-width: 640px) {
  .filter-bar { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 45; justify-content: stretch; padding: 8px var(--gutter) 10px; background: linear-gradient(to bottom, rgba(5,7,13,.92) 70%, rgba(5,7,13,0)); }
  .filter-bar .chips { position: relative; top: auto; width: 100%; box-shadow: 0 12px 30px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.16); }
}