/* A short three-stop brass selector. The stops line up with the labels below. */
.programme .filters {
  --rim: 15px;
  --stop: 16.6667%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  width: clamp(245px, 22vw, 292px);
  max-width: 100%;
  padding: 0 var(--rim) 3px;
  gap: 0;
  border: 1px solid #53584b;
  border-radius: 5px;
  background:
    radial-gradient(circle at 6px 48%, #726846 0 1.25px, #e7d7a9 1.5px 2.2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 6px) 48%, #726846 0 1.25px, #e7d7a9 1.5px 2.2px, transparent 2.5px),
    linear-gradient(180deg, #f2e8c9, #e8dab5 57%, #e2d1a7);
  box-shadow: inset 0 1.5px #fff6db, inset 0 -2px #b4a17c, 1px 2px 0 #605c49;
}
.programme .filters:has([data-filter="web"][aria-pressed="true"]) { --stop: 50%; }
.programme .filters:has([data-filter="mini"][aria-pressed="true"]) { --stop: 83.3333%; }
.programme .filters [data-filter] {
  position: relative;
  min-height: 47px;
  margin: 0;
  padding: 23px 2px 3px;
  color: #47534c;
  background: none;
  border: 0;
  border-radius: 0;
  font: 650 12px/1.5 var(--sans, sans-serif);
  white-space: nowrap;
  touch-action: manipulation;
}
.programme .filters [data-filter] + [data-filter]::before {
  content: "";
  position: absolute;
  height: 9px;
  width: 1px;
  top: 29px;
  left: 0;
  background: #aaa082;
  box-shadow: 1px 0 #f9edce;
}
.programme .filters [data-filter][aria-pressed="true"] {
  background: none;
  color: #953321;
  border: 0;
  font-weight: 800;
}
.programme .filters [data-filter]:hover { color: #8a3020; }
.programme .filters [data-filter]:focus-visible { z-index: 2; outline-offset: -2px; border-radius: 3px; }
.selector-rail {
  position: absolute;
  z-index: 3;
  top: 2px;
  inset-inline: var(--rim);
  height: 20px;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
/* Fine divisions and every fifth major mark are printed inside the dark slot. */
.selector-rail::before {
  content: "";
  position: absolute;
  inset: 6px 0 0;
  border-radius: 3px;
  border: 1px solid #253832;
  background:
    repeating-linear-gradient(90deg, #d1be8a 0 1px, transparent 1px 20px) center bottom 2px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, #a59976 0 1px, transparent 1px 4px) center bottom 2px / 100% 3px no-repeat,
    #34433d;
  box-shadow: inset 0 2px 2px #152522aa, 0 1px #fff3cc;
}
.selector-rail::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 18px;
  top: 3px;
  left: var(--stop);
  transform: translateX(-50%);
  clip-path: polygon(0 2px, 2px 0, calc(100% - 2px) 0, 100% 2px, 100% 12px, 62% 12px, 50% 100%, 38% 12px, 0 12px);
  background:
    repeating-linear-gradient(90deg, #d58b61 0 1px, #863e2b 1px 2px, transparent 2px 4px) center top 3px / 16px 5px no-repeat,
    linear-gradient(180deg, #edaf7b 0 1.5px, #c4603e 1.5px 6px, #ba5032 6px 10px, #8a3d28 10px 12px, #e98b54 12px);
  transition: left .28s cubic-bezier(.22, .85, .28, 1.08);
}
.selector-rail.is-dragging::after { transition-duration: .1s; }
@media (max-width: 550px) {
  .programme .filters { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .selector-rail::after { transition: none; }
}
@media (forced-colors: active) {
  .programme .filters [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
  .selector-rail::after { background: Highlight; forced-color-adjust: none; }
}