/* Genre pages (/playlists/genre/<slug>) only: Mira's design (world-pages/
   GENRE-DESIGN.md), built by Pixel. Linked from the page body, not <head>, so
   the head stays byte-identical to every other listing. Root: .bt-genre-page,
   inside .bt-playlists-page, so polish.css tokens (--bt-space-*, --bt-radius,
   --bt-shadow-px, --bt-focus) apply. No new colours beyond the world plate's
   cream and red, which the homepage worlds already use. */

/* 1 head: crumbs, H1, counts; a written description sits right of the title on desktop */
.bt-genre-page { padding-top: 0 !important; }
.bt-genre-head { margin: 0 0 16px; }
.bt-genre-head .bt-crumbs { margin: 0 0 12px !important; }
.bt-genre-title-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; align-items: end; }
.bt-genre-title-row:has(.bt-genre-desc) { grid-template-columns: minmax(0, auto) minmax(0, 440px); justify-content: space-between; }
.bt-genre-page .bt-genre-title { font-size: 40px; line-height: 44px; margin: 0 0 6px; letter-spacing: 0; }
.bt-genre-counts { margin: 0; font: 400 14px/20px var(--font-sans, system-ui); color: var(--bt-ink-subtle); }
.bt-genre-desc { margin: 0; max-width: 440px; font: 400 15px/22px var(--font-sans, system-ui); color: var(--bt-ink-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 2 world banner: the scene, its living detail, and one call to step inside */
.bt-genre-world { margin: 0 0 12px; }
.bt-genre-banner { position: relative; display: block; height: 220px; overflow: hidden; isolation: isolate; text-decoration: none;
  background: #241e28; border: 2px solid var(--bt-ink); border-radius: var(--bt-radius); box-shadow: 4px 4px 0 var(--bt-shadow-px); }
.bt-genre-banner-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated;
  transition: transform .16s steps(4); transform-origin: var(--fx, 50%) var(--fy, 50%); }
.bt-genre-motion { position: absolute; inset: 0; pointer-events: none; transition: transform .16s steps(4); transform-origin: var(--fx, 50%) var(--fy, 50%); }
.bt-genre-motion .bt-detail-layer { position: absolute; }
.bt-genre-motion.is-outside .bt-detail-layer { display: none; }
.bt-genre-plate { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 32px); }
.bt-genre-kicker { padding: 6px 8px; font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase;
  color: #2f2733; background: #fff3dd; box-shadow: 3px 3px 0 #241e28aa; }
.bt-genre-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; font: 500 22px/28px "Pixelify Sans", monospace;
  color: #fff3dd; background: #ba3a2b; box-shadow: 3px 3px 0 #241e28cc; transition: transform .16s steps(2), box-shadow .16s steps(2); }
.bt-genre-arrow { display: inline-block; transition: transform .16s steps(2); }
@media (hover: hover) {
  .bt-genre-banner:hover .bt-genre-banner-art, .bt-genre-banner:hover .bt-genre-motion { transform: scale(1.03); }
  .bt-genre-banner:hover .bt-genre-cta { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #241e28cc; }
  .bt-genre-banner:hover .bt-genre-arrow { transform: translateX(3px); }
}
.bt-genre-banner:active .bt-genre-cta { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #241e28cc; }
.bt-genre-page .bt-genre-banner:focus-visible { outline: 2px solid var(--bt-focus) !important; outline-offset: 3px !important; }
.bt-genre-banner:focus-visible .bt-genre-cta { outline: 2px solid #fff3dd; outline-offset: 2px; }

/* 3 the strip: the genre's other worlds, then the related genres, in one row on desktop */
.bt-genre-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: 0 0 24px; }
.bt-genre-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bt-genre-worlds { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bt-genre-world-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 3px 14px 3px 3px; white-space: nowrap; text-decoration: none;
  font: 500 14px/1 var(--font-sans, system-ui); color: var(--bt-ink); background: var(--bt-surface);
  border: 2px solid var(--bt-line-strong); border-radius: var(--bt-radius); box-shadow: 0 2px 0 var(--bt-shadow-px); transition: border-color .15s, transform .15s; }
.bt-genre-world-chip img { display: block; width: 54px; height: 36px; object-fit: cover; image-rendering: pixelated; border-radius: 2px; }
@media (hover: hover) { .bt-genre-world-chip:hover { border-color: var(--bt-ink); transform: translateY(-1px); } }
.bt-genre-page .bt-genre-strip .bt-genre-label { padding-top: 0 !important; }
.bt-genre-page .bt-genre-strip .bt-genre-nav { position: static; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.bt-genre-page .bt-genre-strip .bt-genre-row { display: flex !important; align-items: center; gap: 12px; }
.bt-genre-page .bt-genre-strip .bt-genre-chip { min-height: 44px; }
.bt-genre-page .bt-genre-strip .bt-genre-index { position: static; margin: 0 !important; }
.bt-genre-page .bt-genre-strip .bt-genre-index summary { min-height: 44px; }
.bt-genre-page .bt-genre-strip .bt-genre-index-body { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; }

/* the strip stays one row from 1280px up: worlds keep their size, the genre chips scroll sideways
   under a fade (as on phones; the 18px fade sits inside the 24px right padding, so with nothing overflowing it covers only empty space and never a focus ring), and "All N genres" always shows. The 4px padding, offset by a
   negative margin, keeps the focus ring inside the scroller without changing the layout.
   Below 1280px the live genre rows don't fit one row, and Chrome won't scroll a partly faded chip into view on
   keyboard focus, so the strip wraps there exactly as before (Rigel's QA of 05e6a92, item 4). */
@media (min-width: 1280px) {
  .bt-genre-strip { flex-wrap: nowrap; }
  .bt-genre-strip > .bt-genre-group { flex: none; }
  .bt-genre-page .bt-genre-strip .bt-genre-nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
  .bt-genre-page .bt-genre-strip .bt-genre-row { flex: 1 1 auto; min-width: 0; }
  .bt-genre-page .bt-genre-strip .bt-genre-label { flex: none; white-space: nowrap; }
  .bt-genre-page .bt-genre-strip .bt-genre-chips { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none;
    margin: -4px !important; padding: 4px 24px 4px 4px !important; scroll-padding-inline: 4px 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
  .bt-genre-page .bt-genre-strip .bt-genre-chips::-webkit-scrollbar { display: none; }
  /* a keyboard-focused chip may sit under the fade; drop the fade while one has focus so its whole ring shows */
  .bt-genre-page .bt-genre-strip .bt-genre-chips:has(:focus-visible) { -webkit-mask-image: none; mask-image: none; }
  .bt-genre-page .bt-genre-strip .bt-genre-chips li { flex: none; }
  .bt-genre-page .bt-genre-strip .bt-genre-index { flex: none; }
  .bt-genre-page .bt-genre-strip .bt-genre-index summary { white-space: nowrap; }
  /* with a "More worlds" group, "Genres in this list" is hidden visually (screen readers still read it) so the chips fit */
  .bt-genre-page .bt-genre-strip:has(.bt-genre-worlds) .bt-genre-nav .bt-genre-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 4 cards: cover, title, author, playlist count */
.bt-genre-page .bt-shelf-stage { height: 168px !important; }
.bt-genre-page .bt-shelf-by { margin-bottom: 0 !important; }
.bt-genre-page .bt-shelf-foot { margin-top: auto; padding-top: 8px; }
.bt-genre-page .bt-shelf-count { font: 500 13px/18px var(--font-sans, system-ui); color: var(--bt-ink-muted); }

/* 5 the guide, moved under the grid: a plain section, no box */
.bt-genre-page .bt-genre-guide-summary { margin: 64px 0 0 !important; padding: 48px 0 0 !important; border: 0 !important; border-top: 1px solid var(--bt-line-strong) !important;
  background: none !important; box-shadow: none !important; }
.bt-genre-page .bt-genre-guide-summary h2 { max-width: 30ch; margin: 0 0 12px !important; font-size: 28px !important; line-height: 34px !important; }
.bt-genre-page .bt-genre-guide-summary p { max-width: 68ch; font-size: 16px !important; line-height: 26px !important; }
.bt-genre-page #listening-guide { margin-top: 32px !important; }

@media (max-width: 767px) {
  .bt-genre-head { margin-bottom: 12px; }
  .bt-genre-head .bt-crumbs { margin-bottom: 8px !important; }
  .bt-genre-title-row, .bt-genre-title-row:has(.bt-genre-desc) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bt-genre-page .bt-genre-title { font-size: 28px; line-height: 32px; }
  .bt-genre-desc { display: block; -webkit-line-clamp: unset; font-size: 14px; line-height: 21px; }
  .bt-genre-world { margin-bottom: 10px; }
  .bt-genre-banner { height: 160px; box-shadow: 3px 3px 0 var(--bt-shadow-px); }
  .bt-genre-plate { left: 10px; bottom: 10px; gap: 4px; max-width: calc(100% - 20px); }
  .bt-genre-kicker { padding: 5px 6px; font-size: 9px; }
  .bt-genre-cta { min-height: 40px; padding: 10px 12px; gap: 8px; font-size: 16px; line-height: 20px; }
  .bt-genre-strip { display: block; margin-bottom: 16px; }
  .bt-genre-group { display: block; }
  .bt-genre-page .bt-genre-strip .bt-genre-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bt-genre-worlds, .bt-genre-page .bt-genre-strip .bt-genre-chips { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; padding: 0 12px 4px 2px !important;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .bt-genre-worlds { margin-bottom: 8px; padding-left: 0 !important; }
  .bt-genre-worlds li { flex: none; }
  .bt-genre-page .bt-genre-strip .bt-genre-nav { display: block; }
  .bt-genre-page .bt-genre-strip .bt-genre-row { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .bt-genre-page .bt-genre-strip .bt-genre-chips { flex: 0 1 auto; min-width: 0; margin: 0 !important; }
  .bt-genre-page .bt-genre-strip .bt-genre-chips li { flex: none; }
  .bt-genre-page .bt-genre-strip .bt-genre-index { flex: none; margin: 0 !important; }
  .bt-genre-page .bt-genre-strip .bt-genre-index summary { white-space: nowrap; padding: 0 4px; }
  .bt-genre-page .bt-shelf-stage { height: 148px !important; }
  .bt-genre-page .bt-genre-guide-summary { margin-top: 48px !important; padding-top: 32px !important; }
  .bt-genre-page .bt-genre-guide-summary h2 { font-size: 22px !important; line-height: 28px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-genre-banner-art, .bt-genre-motion, .bt-genre-cta, .bt-genre-arrow, .bt-genre-world-chip { transition: none !important; transform: none !important; }
}