/* rip/set-picker.css — choosing one set out of 586, on a phone.
 *
 * ⚠⚠ IT EXISTS BECAUSE A NATIVE <select> IS NOT STYLEABLE ON ANDROID. With 586
 * options the platform renders a full-screen radio list: every name wraps over
 * three lines, the progress is buried mid-sentence, and nothing about it can be
 * changed from here. Aaron, 2026-10-01, on a screenshot of exactly that.
 *
 * ⚠ THE SHEET IS .rtb-sheet's LANGUAGE, NOT A NEW ONE — same grab handle, same
 * 16px top radius, same --rip-panel-2 / --rip-line-2, same 72vh ceiling. A
 * second visual idiom for "pick one thing" is how a site stops looking like one
 * site.
 */
.sp-trigger{
    display:inline-flex; align-items:center; gap:8px; max-width:min(92vw,360px);
    font:inherit; font-size:14px; padding:8px 12px; border-radius:12px;
    background:var(--rip-panel-2,#1a1d24); color:var(--rip-fg,#fff);
    border:1px solid var(--rip-line-2,rgba(255,255,255,.18)); cursor:pointer;
}
.sp-trigger__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.sp-trigger__c{ flex:0 0 auto; color:var(--rip-fg-3,#8b93a3) }

.sp-back{ position:fixed; inset:0; z-index:9996; background:rgba(0,0,0,.55); backdrop-filter:blur(2px) }
.sp-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:9997; box-sizing:border-box;
    background:var(--rip-panel-2,#1a1d24); border-top:1px solid var(--rip-line-2,rgba(255,255,255,.18));
    border-radius:16px 16px 0 0; padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));
    max-height:78vh; display:flex; flex-direction:column;
}
.sp-sheet::before{
    content:""; display:block; width:34px; height:4px; border-radius:99px;
    background:var(--rip-line-2,rgba(255,255,255,.22)); margin:0 auto 10px; flex:0 0 auto;
}
/* ⚠ TYPING IS THE FASTEST ROUTE THROUGH 586 AND IT IS PINNED ABOVE THE SCROLL.
   A search box that scrolls away with the list is one you cannot reach once you
   have started looking. */
.sp-search{
    flex:0 0 auto; width:100%; box-sizing:border-box; font:inherit; font-size:15px;
    padding:10px 12px; margin:0 0 8px; border-radius:10px;
    background:var(--rip-bg-2,rgba(255,255,255,.06)); color:var(--rip-fg,#fff);
    border:1px solid var(--rip-line-2,rgba(255,255,255,.16));
}
.sp-list{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; margin:0 -4px; padding:0 4px }
.sp-group{
    position:sticky; top:0; z-index:1; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--rip-fg-3,#8b93a3); background:var(--rip-panel-2,#1a1d24);
    padding:8px 4px 6px; border-bottom:1px solid var(--rip-line-2,rgba(255,255,255,.10));
}
.sp-row{
    display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
    background:none; border:0; border-bottom:1px solid rgba(255,255,255,.06);
    padding:10px 4px; color:var(--rip-fg,#fff);
}
.sp-row[aria-selected="true"]{ background:rgba(255,255,255,.06) }
/* ⚠ ONE LINE, CLIPPED. The native list wrapped a long set name over three lines
   and pushed everything else off the screen; a name that does not fit is the
   one thing here that may be cut. */
.sp-row__n{ display:block; font-size:15px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* ⚠⚠⚠ THE BAR GETS ITS OWN LINE, SO EVERY BAR IS THE SAME LENGTH. It used to
   share a line with the numbers as `flex:1 1 auto`, which means it was whatever
   width the text happened to leave — 23px on a long row, 77px on a short one.
   Aaron, 2026-10-01: "I don't like the bar being all different sizes." A bar
   whose length depends on the sentence beside it is also unreadable AS a bar:
   two sets at the same percentage drew visibly different fills.
   ⚠ AND IT CANNOT BE FIXED ON ONE LINE. MEASURED at 390px: the meta line is
   358px and the widest row's text is 349px of it, so any bar wide enough to see
   would clip the numbers. Stacking is the only layout that gives both. */
/* ⚠ A PLAIN COLUMN, NOT column-reverse. The ladder block must read top-down —
   Master, then Grand Master — and a reversed container printed them backwards.
   The one legacy branch that relied on the reversal now states its own DOM
   order; see setPackLadders()/the fallback in packs.htm. */
.sp-row__m{ display:flex; flex-direction:column; align-items:stretch; gap:6px; margin-top:5px }
/* ── A BAR PER GOAL ─────────────────────────────────────────────────────────
   Same words, same shape as the binder's .bd-lad and the reveal panel's
   .rv-lad. ⚠ THE HEAD WRAPS RATHER THAN CLIPPING: "Grand Master" + "442 left"
   does not fit one line on a narrow phone, and cut-off text is the fault being
   fixed, not a style choice. */
.sp-lad{ display:block }
.sp-lad__h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1px 8px; min-width:0; line-height:1.25 }
.sp-lad__k{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--rip-fg-3,#8b93a3); min-width:0 }
.sp-lad__v{ font-family:var(--rip-data,inherit); font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:800; color:var(--rip-fg-2,#cbd5e1); white-space:nowrap }
.sp-lad.is-done .sp-lad__k, .sp-lad.is-done .sp-lad__v{ color:#f2b134 }
/* The "where are they" line, under ITS OWN ladder's bar — one per ladder, so
   the Master Set and the Grand Master Set each say where their own cards are.
   It wraps: a clause nobody can finish reading is not a clause (390px). */
.sp-lad__w{ display:block; margin-top:3px; font-size:12px; line-height:1.35;
            color:var(--rip-fg-3,#8b93a3); overflow-wrap:anywhere;
            font-variant-numeric:tabular-nums }
.sp-lad + .sp-lad{ margin-top:7px }
.sp-lad__bar{ display:block; margin-top:3px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.12); overflow:hidden }
.sp-lad__bar > i{ display:block; height:100%; border-radius:99px; background:var(--rip-act,#4ade80) }
.sp-lad.is-done .sp-lad__bar > i{ background:linear-gradient(90deg,#ffe28f,#f2b134) }
.sp-bar{ flex:0 0 auto; width:100%; height:4px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden }
.sp-bar > i{ display:block; height:100%; border-radius:99px; background:var(--rip-act,#4ade80) }
/* ⚠ `min-width:0` + ellipsis so a row that still overflows clips rather than
   stretching the sheet sideways. */
/* ⚠ IT WRAPS. This was nowrap+ellipsis and the clause came out as "237 of them
   in St…" at 390px — Aaron, 2026-10-01: "Can't read the band as the text is cut
   off." It is one short clause now, so two lines is the worst case. */
.sp-row__s{ flex:0 0 auto; min-width:0; overflow-wrap:anywhere;
  font-size:12px; color:var(--rip-fg-3,#8b93a3); font-variant-numeric:tabular-nums }
.sp-empty{ padding:18px 4px; color:var(--rip-fg-3,#8b93a3); font-size:14px; text-align:center }
/* The WHY under the "no match" line. A set is absent from a pack whose price
   range cannot reach its cards, and without this the empty state reads as "that
   set does not exist" — see the branch that builds it in rip/packs.htm. */
.sp-empty__w{ margin-top:8px; font-size:12.5px; line-height:1.45; opacity:0.8;
              max-width:30em; margin-left:auto; margin-right:auto }