/* 松子商社 — shared fluid slider.
   One track, one thumb. Keep duration in step with FLUID_DURATION in js/fluid-slider.js. */

.fluid-slider {
  --slider-thumb: var(--pine, var(--accent, #2f4a3c));
  --slider-ink: #ffffff;
  --slider-muted: var(--muted, var(--ink-muted, #5c584f));
  --slider-track: rgba(47, 74, 60, 0.07);
  --fluid-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border: 1px solid rgba(47, 74, 60, 0.1);
  border-radius: 12px;
  background: var(--slider-track);
  touch-action: manipulation;
}

.fluid-slider::-webkit-scrollbar { display: none; }

.fluid-slider--fill { width: 100%; }

.fluid-slider__thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 8px;
  background: var(--slider-thumb);
  box-shadow: 0 4px 12px rgba(47, 74, 60, 0.16);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.fluid-slider.is-ready .fluid-slider__thumb { opacity: 1; }

/* Edge fade only while the track actually scrolls, so a fitted row
   (Chinese hero tabs, the language pill) stays solid. */
.fluid-slider.is-overflowing:not(.lang-switch):not(.fluid-slider--lang) {
  --slider-fade: 28px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--slider-fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--slider-fade)), transparent);
}
.fluid-slider.is-overflowing.is-scrolled:not(.lang-switch):not(.fluid-slider--lang) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--slider-fade), #000 calc(100% - var(--slider-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--slider-fade), #000 calc(100% - var(--slider-fade)), transparent);
}
.fluid-slider.is-overflowing.is-scrolled.is-scrolled-end:not(.lang-switch):not(.fluid-slider--lang) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--slider-fade), #000 100%);
  mask-image: linear-gradient(to right, transparent, #000 var(--slider-fade), #000 100%);
}

.fluid-slider > button,
.fluid-slider > a {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-width: max-content;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 10px 16px;
  color: var(--slider-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.5s var(--fluid-ease);
}

.fluid-slider--fill > button,
.fluid-slider--fill > a {
  flex: 1 1 0;
  min-width: max-content;
}

.fluid-slider > a:hover,
.fluid-slider > button:hover {
  opacity: 1;
  color: var(--ink, var(--slider-thumb));
}

.fluid-slider > [aria-selected="true"],
.fluid-slider > [aria-pressed="true"],
.fluid-slider > [aria-current="true"],
.fluid-slider > [aria-selected="true"]:hover,
.fluid-slider > [aria-pressed="true"]:hover,
.fluid-slider > [aria-current="true"]:hover {
  color: var(--slider-ink);
  background: var(--slider-thumb);
}

/* While the thumb travels, the option fill is transparent so the pill
   slides as one shape. At rest the active option itself is the dark fill,
   which keeps white label text on #1f3a2c / pine (ancestor contrast). */
.fluid-slider.is-sliding > button,
.fluid-slider.is-sliding > a,
.fluid-slider.is-sliding > .filter-chip,
.fluid-slider.is-sliding > .filter-chip[aria-pressed="true"] {
  background: transparent;
  border-color: transparent;
}

.fluid-slider > button:focus-visible,
.fluid-slider > a:focus-visible {
  outline: 2px solid var(--slider-thumb);
  outline-offset: -2px;
}

.fluid-slider > .filter-chip {
  border: 0;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .fluid-slider > button,
  .fluid-slider > a { transition: none; }
}