/* ==========================================================================
   Previously — PVSort · shared seamless sort dropdown · v20261003a
   --------------------------------------------------------------------------
   One sleek dropdown control, used on Movies/TV browse, Games browse, and
   Podcasts. James's standing rule: NO pill option controls — this is the
   replacement. Dark glass menu, seamless trigger, circular ⇅ direction
   toggle. Brand tokens with fallbacks so it blends into any surface.
   ========================================================================== */
.pv-sort{display:flex;align-items:center;gap:10px}
.pv-sort__select{position:relative}
.pv-sort__trigger{
  appearance:none;-webkit-appearance:none;background:transparent;border:none;
  color:#1e1a14;
  font:inherit;font-size:15px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  padding:8px 4px;border-radius:8px;
}
/* Audit 2026-10-03: was hardcoded light bone (invisible on paper canvas).
   Dark mode restores the light text. */
@media (prefers-color-scheme:dark){
  .pv-sort__trigger{color:var(--brand-ink,#EDE6D6)}
}
.pv-sort__trigger:hover .pv-sort__value{border-color:#4a4a52}
.pv-sort__trigger:focus-visible{outline:2px solid var(--brand-red,#E8321E);outline-offset:2px}
.pv-sort__prefix{color:#8f8f96;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.pv-sort__value{
  border:1px solid #2a2a2e;border-radius:8px;padding:7px 12px;font-weight:600;
  transition:border-color .18s;white-space:nowrap;
}
.pv-sort__chev{width:14px;height:14px;flex:none;color:#b9b6ae;transition:transform .22s ease}
.pv-sort__trigger[aria-expanded="true"] .pv-sort__chev{transform:rotate(180deg)}
/* dropdown menu — dark glass */
.pv-sort__menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;z-index:200;
  background:rgba(24,24,28,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid #2a2a2e;border-radius:12px;padding:6px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;
  pointer-events:none;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.7,.3,1.1);
}
.pv-sort__menu[data-open="true"]{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.pv-sort__option{
  appearance:none;-webkit-appearance:none;background:transparent;border:none;
  color:#b9b6ae;font:inherit;
  width:100%;text-align:left;font-size:14px;padding:10px 12px;border-radius:8px;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:background .12s,color .12s;
}
.pv-sort__option:hover{background:rgba(255,255,255,.07);color:var(--brand-ink,#EDE6D6)}
.pv-sort__option[aria-selected="true"]{color:var(--brand-ink,#EDE6D6);font-weight:600}
.pv-sort__option .check{width:14px;height:14px;opacity:0;flex:none;color:var(--brand-red,#E8321E)}
.pv-sort__option[aria-selected="true"] .check{opacity:1}
/* direction toggle — circular, never red */
.pv-sort__dir{
  appearance:none;-webkit-appearance:none;border:1px solid #2a2a2e;background:transparent;
  color:#b9b6ae;font:inherit;
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:border-color .15s,color .15s,transform .2s;
}
.pv-sort__dir:hover{border-color:#4a4a52;color:var(--brand-ink,#EDE6D6)}
.pv-sort__dir:focus-visible{outline:2px solid var(--brand-red,#E8321E);outline-offset:2px}
/* generic row helper: label/count on the left, sort control on the right */
.pv-sort-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:560px){
  .pv-sort__menu{min-width:200px}
  .pv-sort__value{padding:6px 10px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .pv-sort__menu,.pv-sort__chev,.pv-sort__dir{transition:none}
}