/* OBEINSON FREQUENCY X — fold the Genres & Collections rail.
 *
 * The rail lists 27 collections, each on its own row, which pushes everything
 * below it off the screen and turns picking a genre into a scroll. Eight stay
 * visible and the rest go behind one toggle.
 *
 * DESKTOP ONLY, as asked. The scope is `html.obn-desktop`, the class the
 * app's own device adapter sets (alongside obn-phone / obn-tablet). Phones
 * and tablets keep the full list, because there the rail is already a
 * separate screen rather than a column competing for height. If the adapter
 * has not tagged <html> yet, nothing folds — the list simply behaves as it
 * does today, which is the right way to fail.
 *
 * The folding is CSS, not JS: genre-fold.js only adds the button and toggles
 * one class. That way a re-render of the rail cannot leave rows hidden with
 * no way to get them back — if the class is gone, every row is visible.
 */

html.obn-desktop .qsGenres.obnFoldable:not(.obnOpen) > button:nth-child(n+9) {
  display: none !important;
}

/* The toggle sits outside .qsGenres so it is never counted among the chips it
   is counting. It borrows the rail's own chip shape rather than inventing a
   new control, and takes the "head" hue since it heads a collapsed section. */
.obnGenreMore {
  display: none;
  width: 100%;
  margin: 2px 0 0;
  padding: 9px 12px;
  /* !important throughout: the app styles its buttons with it, so without
     matching that this control renders as a plain row button and reads as
     another genre rather than as the thing that reveals them. */
  border: 1px dashed rgba(0, 225, 255, .45) !important;
  border-radius: 999px !important;
  background: rgba(0, 225, 255, .06) !important;
  color: #00e1ff !important;
  -webkit-text-fill-color: #00e1ff !important;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s;
}
html.obn-desktop .obnGenreMore {
  display: block;
}
.obnGenreMore:hover {
  background: rgba(0, 225, 255, .14) !important;
  border-color: rgba(0, 225, 255, .85) !important;
}
.obnGenreMore:focus-visible {
  outline: 2px solid #00e1ff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .obnGenreMore { transition: none; }
}