/* Daniel's single motion source for every live pill and segmented control. */
:root{--dio-pill-slide:.38s cubic-bezier(.3,.7,.2,1);--dio-pill-label:.25s ease}
/* One steel thumb, silver track, deliberate input only. */
.dio-segmented-control{
  --dio-segment-inset:5px;
  --dio-segment-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  isolation:isolate;overflow:hidden;border-radius:999px;
  background:var(--dio-alu-silver,linear-gradient(180deg,#e6e8e8 0%,#d4d7d7 38%,#c9cdcd 100%));
  color:#1c3341;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(20,40,52,.28),0 6px 14px -6px rgba(0,0,0,.35);
}
.dio-segmented-control:not(.dio-comparison-pill):not(.comparison-pill){position:relative;display:inline-flex;max-width:100%;padding:var(--dio-segment-inset);gap:0;border:0}
.dio-segmented-control::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background:var(--dio-segment-grain);animation:none;transition:none}
.dio-segmented-control>.dio-segmented-thumb{position:absolute;left:0;top:var(--dio-segment-inset);bottom:var(--dio-segment-inset);z-index:1;border-radius:999px;overflow:hidden;pointer-events:none;background:var(--dio-alu-steel,linear-gradient(180deg,#68869a 0%,#56737f 40%,#4a6573 100%));box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.25);transition:transform var(--dio-pill-slide),width var(--dio-pill-slide)}
.dio-segmented-thumb::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background:var(--dio-segment-grain)}
.dio-segmented-control>.dio-segmented-thumb[hidden]{display:none!important}
.dio-segmented-control>button{position:relative;z-index:2;min-width:48px;min-height:48px;margin:0;padding:12px 22px;border:0;border-radius:999px;background:transparent;color:#1c3341;box-shadow:none;font:600 16px/1.25 var(--font,'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif);text-shadow:0 1px 0 rgba(255,255,255,.55);cursor:pointer;transition:color var(--dio-pill-label)}
.dio-segmented-control>button[aria-pressed=true],.dio-segmented-control>button[aria-selected=true],.dio-segmented-control>button[aria-checked=true]{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.28)}
.dio-segmented-control[data-dio-segmented-ready]>button{background:transparent!important;box-shadow:none!important}
.dio-segmented-control>button:focus-visible{outline:2px solid currentColor;outline-offset:-5px}
.dio-segmented-control>button.dio-alive-chip{transform:none!important}
.dio-segmented-control>button.chip::after{display:none}
#concerns.concerns.dio-segmented-control,#filters.filters.dio-segmented-control{display:flex;flex-wrap:nowrap;gap:0;width:max-content;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:5px;margin-inline:0;scrollbar-width:none}
#concerns.dio-segmented-control::-webkit-scrollbar,#filters.dio-segmented-control::-webkit-scrollbar{display:none}
#concerns.dio-segmented-control>button,#filters.dio-segmented-control>button{flex:none;white-space:nowrap;padding:12px 16px;min-height:48px}
#filters.dio-segmented-control>button{display:inline-flex;align-items:center;gap:8px}
#filters.dio-segmented-control .chip-n{transition:color var(--dio-pill-label)}
/* A max-content rail must not become the minimum width of Podcast's grid track. */
.tools:has(>#filters.dio-segmented-control){min-width:0;grid-template-columns:minmax(0,1fr)}
.tools:has(>#filters.dio-segmented-control)>.search,.tools:has(>#filters.dio-segmented-control)>.search input,#filters.dio-segmented-control{min-width:0}
@media(min-width:860px){.tools:has(>#filters.dio-segmented-control){grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.dio-segmented-control.dio-comparison-pill,.dio-segmented-control.comparison-pill{--dio-segment-inset:4px}
.dio-segmented-control.dio-comparison-pill>button,.dio-segmented-control.comparison-pill>button{padding:10px 8px}
.dio-segmented-control[data-dio-segmented-ready]::before{content:none!important;display:none!important}
.dio-segmented-control[data-dio-segmented-instant]>.dio-segmented-thumb,.dio-segmented-control[data-dio-segmented-instant]>button,.dio-segmented-control[data-dio-segmented-instant] .chip-n{transition:none!important}
.reduce-motion .dio-segmented-control>.dio-segmented-thumb,.reduce-motion .dio-segmented-control>button,.dio-alive-off .dio-segmented-control>.dio-segmented-thumb,.dio-alive-off .dio-segmented-control>button,.reduce-motion .dio-segmented-control .chip-n,.dio-alive-off .dio-segmented-control .chip-n{transition:none!important}
@media(prefers-reduced-motion:reduce){.dio-segmented-control>.dio-segmented-thumb,.dio-segmented-control>button,.dio-segmented-control .chip-n{transition:none!important}}
@media(max-width:600px){.dio-segmented-control:not(.dio-comparison-pill):not(.comparison-pill)>button{font-size:15px;padding:11px 16px}}
@media(forced-colors:active){.dio-segmented-control{background:Canvas;border:1px solid ButtonText;box-shadow:none}.dio-segmented-control::after,.dio-segmented-thumb::after{display:none}.dio-segmented-control>.dio-segmented-thumb{background:Highlight;box-shadow:none;forced-color-adjust:none}.dio-segmented-control>button{color:ButtonText;text-shadow:none}.dio-segmented-control>button[aria-pressed=true],.dio-segmented-control>button[aria-selected=true],.dio-segmented-control>button[aria-checked=true]{color:HighlightText;forced-color-adjust:none}}

/* Daniel 2026-10-13: two-option pills flip on a click anywhere, so the whole pill is clickable. */
.dio-segmented-control.dio-segmented-flip{cursor:pointer}