/* ══════════════════ THE LISTENING ROOM'S SERIES FILTER ══════════════════
   Version 5 · last updated 2026-11-02 23:10 PST
   Served as assets/lrseries/lrseries.css?v=5 — keep the two numbers equal.

   This file is deliberately small. The control is built out of the Library's
   OWN picker classes — .pickbox, .pick-btn, .pick-list — which are already
   styled in library/roya-library.css at the top level of the file, outside
   any media query, and which already carry their :root[data-lt="light-off"]
   overrides. So the dropdown is the site's existing dropdown; what is below
   is only the handful of places where sitting on the Listening Room's bar
   differs from sitting in the phone's control strip.

   Everything is namespaced .lrs and nothing here names a selector that is
   not either .lrs-something or a .lr-bar child inside #royaLibrary.
   ──────────────────────────────────────────────────────────────────── */

/* ── the bar ──
   .lr-bar is space-between with two children: the count and the sorts. A
   third child would push all three apart and leave Series stranded in the
   middle of the row. Series and Sort belong together as one cluster on the
   right, against the count on the left — so the bar packs from the left and
   the Series box takes the slack.

   Everything here hangs off .lr-hasfilter, a class the script puts on the
   bar. Nothing depends on :has() being supported, and the bar is untouched
   on any page where the script has not run. */
#royaLibrary .lr-bar.lr-hasfilter { justify-content: flex-start; }
#royaLibrary .lr-bar .lrs { margin-left: auto; }

/* ── letting the menu out of the bar ──
   On a desktop the Listening Room is drawn inside .abt, and
   roya-library.css line 1209 says:

     #royaLibrary .abt > :not(.ab-marg){position:relative; z-index:1}

   — which makes EVERY direct child of .abt its own stacking context at
   z-index 1. .lr-bar is one of those and .lr-list is another; they tie on
   z-index, so the list wins on document order and paints over the bar. The
   menu's own z-index:14 is sealed inside the bar's context and cannot reach
   past it, so the page's titles and synopses showed straight through an
   opaque panel.

   Raising the BAR is the fix, not the menu: the menu can only ever rise
   within whatever context its ancestor occupies. 40 clears .lr-list's 1 and
   sits above the 30 .abt gives .ab-terms, which is the highest neighbour
   this file's scale knows about.

   position is restated because the bar is only positioned when it is a
   direct child of .abt; on a phone it sits in .mob-sec and is not, and
   z-index on a static box does nothing. */
#royaLibrary .lr-bar.lr-hasfilter { position: relative; z-index: 40; }

/* ── and the phone's overlays above it ──
   On a phone the Listening Room is drawn inside the phone frame, and the
   Listen box, the enlarged cover, the reader and the mobile sheet are all
   drawn in .phone-over — a sibling layer at z-index 20
   (roya-library.css line 347). The 40 above lifted the bar over that whole
   layer, so "31 Recordings", Series and the sort chips printed across the
   middle of the Listen box. The overlay layer goes one above the bar.
   It is transparent and lets clicks through (pointer-events:none on the
   layer, auto on what it holds), so raising it while empty changes
   nothing on screen. 41 stays under the record panel's 42. */
#royaLibrary .phone-over { z-index: 41; }

#royaLibrary .lrs {
  display: inline-flex;
  align-items: center;
  gap: .5rem;                    /* the same .5rem .lr-sorts sets */
  min-width: 0;
}

#royaLibrary .lrs-lab { margin-right: 0 }

/* ── the sort chips ──
   Two of them now — "Longest" is removed by the script — and they stay on
   one line together at every width. The bar's own wrap is what puts Sort
   below the count on a phone; this stops the chips wrapping among
   THEMSELVES, which is what split "Longest" onto a line of its own. */
#royaLibrary .lr-bar.lr-hasfilter .lr-sorts { flex-wrap: nowrap }

/* ── the control ──
   .pickbox is flex:1 1 auto and .pick-btn is width:100% because in the phone
   control strip the picker fills the row. Here it sits beside a count and
   three chips, so it sizes to its own text and stops before it crowds them. */
#royaLibrary .lrs-box { flex: 0 1 auto; }
#royaLibrary .lrs-btn {
  width: auto;
  max-width: 14rem;
  /* the sort chips are .5625rem; the picker's own .625rem beside them read as
     a size mistake rather than a difference */
  font-size: .5625rem;
  letter-spacing: .2em;
  border-radius: 999px;          /* the chips beside it are pills */
  padding: .44em .7em .4em .9em;
}
#royaLibrary .lrs-btn svg { width: .72rem; height: .72rem }

/* the selected series is the one piece of state on this row, so it is lit the
   way an engaged sort chip is lit, and by the same two values */
#royaLibrary .lrs.is-set .lrs-btn {
  border-color: #c8ae78;
  background: #251c17;
  color: var(--bone, #ddd2bf);
}

/* ── the menu ──
   .pick-list drops from left:0. This control sits at the right-hand end of
   the bar, and a menu as wide as "From the Delgoshā · از دلگشا" dropping to
   the right from there runs off the page. It hangs from the right instead. */
#royaLibrary .lrs-list {
  left: auto;
  right: 0;
  max-width: min(21rem, 86vw);
  max-height: min(22rem, 52vh);
}

/* ── the rows it hides ── */
#royaLibrary .lr-row.is-lrhid { display: none }

/* ── the phone ──
   Everything on one line:

     31 Recordings            SERIES [ All ▾ ]  (Newest) (Shortest)

   The bar used to take two, and with the filter added it would have taken
   three. Measured at a 375px column — what a 390pt handset gives at the
   page's initial-scale of 0.85 — the pieces came to 496px against 375
   available. The 121px came off in four places and no further:

     the word SORT, and its gap              54
     the gaps between and inside the groups  31
     the count, 1.25rem to 1.05rem           19
     chip padding and tracking               31

   SORT is the one label that goes. Two chips reading Newest and Shortest
   are plainly an order; a lone pill reading "All" is not plainly a series,
   so SERIES stays. No tap target is meaningfully smaller for any of it —
   the chips go from 26px tall to 25, and from 70 and 84 wide to 57 and 69.

   This holds down to a 331px column. Below that the bar wraps to two lines
   again on its own, which is the right failure: every piece stays legible
   and finger-sized and the row grows, rather than overflowing. A 320pt
   handset lands there. */
@media (max-width: 820px) {
  /* ── where the menu hangs ──
     On a desktop the control sits at the right-hand end of the bar and the
     menu drops leftward from it. One line on a phone puts the control in
     the MIDDLE of the bar instead, and a 272px menu dropping leftward from
     there ran off the left edge of the screen by 13px at a 441px viewport
     and 40px at 414.

     So on a phone it stops hanging off the button at all: .lrs-box gives up
     being the containing block, and the menu is pinned to both edges of the
     bar, which is already positioned for the z-index above. It is then a
     full-width sheet under the bar — the usual phone pattern — and it
     cannot leave either edge at any width, because its edges ARE the bar's.
     Long titles fall back to the ellipsis .pick-list already gives them. */
  #royaLibrary .lrs-box { position: static }
  #royaLibrary .lrs-list {
    left: 0; right: 0; width: auto; max-width: none;
    top: calc(100% + .4rem);
  }

  #royaLibrary .lr-bar.lr-hasfilter { gap: .5rem .42rem }
  #royaLibrary .lr-bar.lr-hasfilter .lr-sorts { flex: 0 1 auto; gap: .3rem }
  #royaLibrary .lr-bar.lr-hasfilter .lrs { gap: .28rem }
  #royaLibrary .lr-bar.lr-hasfilter .lr-count { font-size: 1rem }
  /* .lrs-lab carries .lr-sortlab too, so that the two labels are the same
     piece of type. Hide the one inside .lr-sorts, not both. */
  #royaLibrary .lr-bar.lr-hasfilter .lr-sorts .lr-sortlab { display: none }
  /* ── the controls read a step larger than the site's .5625rem ──
     .625rem is 10px against the 9px the sort chips carry everywhere else.
     The room for it was bought back out of the gaps, the count and the
     paddings rather than taken from the line: at a 358px column — a 375pt
     handset — the bar still has 11px to spare and stays on one line.

     .6875rem was measured too and does not fit: it overruns that column by
     12px. If these ever need to be larger than this, the count has to give
     up its size or SERIES has to go, not the line. */
  #royaLibrary .lr-bar.lr-hasfilter .lr-sort {
    font-size: .625rem;
    padding: .5em .58em .46em; letter-spacing: .1em; min-height: 2em;
  }
  #royaLibrary .lr-bar.lr-hasfilter .lrs-btn {
    font-size: .625rem;
    max-width: 7.5rem;
    padding: .5em .42em .46em .58em; letter-spacing: .1em; min-height: 2em;
  }
  /* the label stays at the site's own size — it is a label, not a control,
     and at 10px it started competing with the pill beside it */
  #royaLibrary .lr-bar.lr-hasfilter .lrs-lab {
    font-size: .5625rem; letter-spacing: .14em;
  }
}

/* A narrower handset: SERIES goes too and the pill carries it alone. This is
   the last thing that comes off before the bar is allowed to wrap.

   416px is where the measurement put the line, not a round number: with the
   label the bar needs a 358px column, which a 375pt handset gives (441 at
   0.85). Below that viewport the label is what buys the last 24px. */
@media (max-width: 26rem) {
  #royaLibrary .lr-bar.lr-hasfilter .lrs-lab { display: none }
  #royaLibrary .lr-bar.lr-hasfilter .lrs-btn { max-width: 6.5rem }
}

@media (prefers-reduced-motion: reduce) {
  #royaLibrary .lrs-btn { transition: none }
}