/* ShemenMusic v2 — see VISUAL-STYLE.md. A calm blue frame; colour comes from the covers. */
:root {
  --paper: #fff; --ink: #0B1A2B; --blue: #185A8C; --blue-d: #0F4370; --link: #185A8C; --sky: #DDEAF4;
  --mist: #EEF3F8; --rule: #D5E1EB; --slate: #4E6579; --on-sky: #0F4370;
  --lyr-dim: #9AABBA; --lyr-past: #6F8495; --deep: #0B1A2B; --shadow: rgba(11,26,43,.18);
  --logo-mark: #185A8C; --logo-word: #0B1A2B;
  --wrap: 1200px; --gut: clamp(16px, 4vw, 40px); --player-h: 72px;
  --r-thumb: 10px; --r-card: 14px; --r-hero: 16px; --r-panel: 24px;
  /* Apple's own San Francisco on Apple devices; Inter (its closest open match) elsewhere. Montserrat lives only in the logo. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
}

/* light by default (Joel, 13 Nov 2026: bright, like Apple Music); the header toggle switches to dark, remembered per browser */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0A1420; --ink: #EAF1F7; --blue: #2B78B4; --blue-d: #3A8AC8; --link: #7DB8E6; --sky: #17344F;
  --mist: #13202F; --rule: #223447; --slate: #93A8BB; --on-sky: #CFE4F5;
  --lyr-dim: #4F6477; --lyr-past: #7E93A6; --deep: #060D16; --shadow: rgba(0,0,0,.5);
  --logo-mark: #fff; --logo-word: #fff;
}
:root[data-theme="dark"] .art.none { background: #1B2B3D; }
:root[data-theme="dark"] .chip.on { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .seg button.on { background: #22364B; }
:root[data-theme="dark"] .row-play { background: rgba(0,0,0,.55); }
img.art { background: #13202F; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; font: 400 17px/1.5 var(--font); font-feature-settings: "cv11", "ss01"; letter-spacing: -0.011em; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.has-player { padding-bottom: var(--player-h); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.07; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
mark { background: var(--sky); color: var(--on-sky); border-radius: 3px; padding: 0 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.i { width: 20px; height: 20px; flex: none; }
.yr::before, .sep::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; margin: 0 .6em; vertical-align: middle; }

/* ---------- announcement ---------- */
.announce { position: relative; background: var(--blue); color: #fff; font-size: 15px; font-weight: 500; }
.announce-in { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding-right: 48px; padding-left: 48px; text-align: center; }
.announce a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.announce-x { position: absolute; right: var(--gut); background: none; border: 0; color: inherit; opacity: .8; padding: 4px; display: grid; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.hdr-in { display: flex; align-items: center; gap: 20px; height: 68px; flex-wrap: nowrap; }
@media (max-width: 1180px) and (min-width: 861px) {
  .lang select { position: absolute; inset: 0; width: 100%; opacity: 0; }
  .lang { width: 40px; height: 40px; justify-content: center; }
}
.logo { flex: none; }
.logo-svg { display: block; height: 28px; width: auto; }
.hdr-search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 260px; flex: none; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--mist); color: var(--slate); }
.hdr-search:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--blue); }
.hdr-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: var(--ink); }
.hdr-search input::placeholder { color: var(--slate); }
.lang { position: relative; display: flex; align-items: center; gap: 4px; color: var(--slate); }
.lang select { appearance: none; border: 0; background: none; font-weight: 600; font-size: 14px; padding: 6px 2px; cursor: pointer; }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 0; font-weight: 600; font-size: 16px; white-space: nowrap; transition: background-color .15s, color .15s; }
.btn .i { width: 20px; height: 20px; }
.btn.sm { height: 38px; padding: 0 16px; font-size: 15px; }
.btn.sm .i { width: 18px; height: 18px; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-d); }
.btn.soft { background: var(--mist); color: var(--ink); }
.btn.soft:hover { background: var(--sky); color: var(--on-sky); }
.btn.light { background: #fff; color: #0B1A2B; }
.btn.light:hover { background: var(--sky); }
.btn.ghost-l { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn.ghost-l:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn .mb { font-weight: 500; opacity: .75; }
.ic-pause { display: none; }
.is-playing .ic-play { display: none; }
.is-playing .ic-pause { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--mist); font-weight: 600; font-size: 15px; color: var(--slate); }
.chip:hover { color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; }
.chip small { font-weight: 500; opacity: .7; }
.chips.big .chip { height: 44px; font-size: 16px; }

/* ---------- artwork ---------- */
.art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); background: var(--mist); }
.art.none { display: grid; place-items: end start; padding: 12%; background: var(--deep); color: #fff; overflow: hidden; }
.art.none span { font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(14px, 1.6vw, 22px); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.art.sm { border-radius: var(--r-thumb); }
.art.sm.none span { font-size: 9px; }
.art.xl { border-radius: var(--r-hero); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.band .art.none { background: color-mix(in srgb, var(--base, var(--deep)) 55%, #fff 12%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 24px 60px -20px rgba(0,0,0,.5); }
.art.xl.none span { font-size: clamp(22px, 3vw, 36px); }

/* ---------- cover band (the one memorable thing) ---------- */
.band { position: relative; isolation: isolate; background: var(--base, var(--deep)); color: #fff; }
.band-clip { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.band-bg { position: absolute; inset: -120px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.35); opacity: .55; }
.band-clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--base, var(--deep)) 70%, transparent) 100%); }
.band a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hero-k { font-weight: 600; font-size: 16px; color: rgba(255,255,255,.82); display: flex; flex-wrap: wrap; align-items: center; }

/* song / album band */
.song-band .band-in { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; align-items: end; height: auto; min-height: 0; padding-top: 48px; padding-bottom: 40px; gap: 24px; }
.song-art { align-self: end; position: relative; z-index: 2; width: clamp(200px, 22vw, 280px); margin-bottom: 0; }
.song-t { font-size: clamp(32px, 4.6vw, 56px); margin-top: 8px; text-wrap: balance; max-width: 18ch; margin-inline: auto; }
.song-acts { display: grid; column-gap: 40px; padding-top: 24px; justify-items: center; text-align: center; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.seg { display: inline-flex; margin-top: 20px; padding: 4px; gap: 2px; border-radius: 999px; background: var(--mist); width: max-content; }
.seg button { border: 0; background: none; height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--slate); }
.seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(11,26,43,.12); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 24px 0 0; }
.facts div { display: grid; gap: 2px; justify-items: center; }
.facts dt { font-size: 13px; color: var(--slate); font-weight: 500; }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* song body */
.song-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; padding-top: 56px; padding-bottom: 72px; }
.ly-head h2, .yt-wrap h2, .side-h { font-size: 28px; }
.ly-note { color: var(--slate); font-size: 15px; margin-bottom: 20px; text-align: center; }
.lyrics { padding-top: 8px; max-width: 22em; margin: 0 auto; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.lyrics.timed .ln { cursor: pointer; border-radius: 8px; padding: 3px 10px; transition: color .25s; margin-inline: 0; }
.lyrics.timed .ln:hover { background: var(--mist); }
.ly-plain { display: none; }
/* lyric translations (0043): the language switch sits under the heading; the label under the text is quiet */
.ly-lang { margin: 4px 0 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ly-lang::-webkit-scrollbar { display: none; }
.ly-lang button { white-space: nowrap; }
@media (max-width: 420px) {
  .ly-lang button { padding-inline: 12px; font-size: 14px; }
  .song-acts .seg { max-width: 100%; }
  .song-acts .seg button { padding-inline: 10px; font-size: 14px; white-space: nowrap; }
  .song .song-acts .acts { gap: 8px; }
  .song .song-acts .acts .btn:not(.icon-only) { padding-inline: 16px; }
  #song-dl .mb { display: none; }
}
.lyrics.tr .tr-t { font-weight: 700; padding-bottom: 6px; }
.lyrics .tr-kind { margin-top: 28px; font-size: 14px; font-weight: 500; color: var(--slate); }
/* an ad slot takes no room until Google actually fills it (no blank holes while AdSense is pending or has no ad) */
.ad-slot { position: relative; margin: 0; max-width: 100%; min-width: 0; overflow: hidden; }
/* no page scrolls sideways on a phone: grid and flex children may shrink below their content (an ad or a wide row
   used to push the song page to 406 px on a 390 px phone; QA sweep, 13 Nov 2026) */
.song-main, .side, .in-lists { min-width: 0; }
.ad-slot.ad-rect { max-width: 336px; }
.ad-slot:has(ins[data-ad-status="filled"]) { margin: 40px 0; }
.ad-slot.ad-rect:has(ins[data-ad-status="filled"]) { margin: 0 0 28px; }
.rows .ad-slot:has(ins[data-ad-status="filled"]) { margin: 12px 0; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
/* Google paints a blank white frame while it decides; keep the slot shut until an ad has actually filled it */
.ad-slot:not(.ad-dev) ins.adsbygoogle:not([data-ad-status="filled"]) { max-height: 0 !important; overflow: hidden !important; }
.ad-slot.ad-dev { margin: 24px 0; min-height: 60px; }
/* local preview only: show where ads will sit so the layout can be judged */
.ad-dev { display: grid; place-items: center; border-radius: 14px; background: repeating-linear-gradient(45deg, var(--mist), var(--mist) 10px, transparent 10px, transparent 20px); box-shadow: inset 0 0 0 1px var(--rule); }
.ad-dev span { font-size: 13px; font-weight: 600; color: var(--slate); letter-spacing: .02em; }
.ad-dev ins { display: none !important; }
.yt-wrap { margin-top: 48px; }
.yt-wrap h2 { margin-bottom: 16px; }
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.song-main > .chips { margin-top: 32px; }
.side-h { font-size: 22px; margin-bottom: 12px; }
.side { align-self: start; position: sticky; top: 92px; }

/* ---------- rows ---------- */
.rows { display: grid; }
.row { position: relative; display: grid; align-items: center; gap: 16px; padding: 8px 12px; margin-inline: -12px; border-radius: 12px; min-height: 68px; }
.row:hover, .row[aria-current] { background: var(--mist); }
.row-art { width: 52px; }
.row-art .art { border-radius: var(--r-thumb); }
.row-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; border-radius: var(--r-thumb); background: rgba(11,26,43,.55); color: #fff; opacity: 0; transition: opacity .15s; }
.row-play:focus-visible { opacity: 1; }
.row:hover .row-play, .row.playing .row-play { opacity: 1; }
.row-main { display: grid; min-width: 0; }
.row-main::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.row-art, .row-acts { position: relative; z-index: 1; }
/* Add, Words and Download keep fixed slots so they line up down the whole list, with or without Words (Joel, 13 Nov
   2026); slot widths fit each language's longest label (Adicionada, Télécharger) */
.row-acts { display: grid; grid-template-columns: var(--acts); justify-content: end; gap: 4px; }
.row-acts > [data-q-add] { grid-column: 1; }
.row-acts > [data-lyrics], .row-acts > .ghost { grid-column: 2; }
.row-acts > a[download] { grid-column: 3; }
:root { --acts: 52px 52px 72px; }
:root[lang="fr"] { --acts: 58px 56px 84px; }
:root[lang="pt"] { --acts: 80px 52px 56px; }
:root[lang="es"] { --acts: 62px 52px 76px; }
@media (max-width: 860px) {
  :root { --acts: 46px 46px 66px; }
  :root[lang="fr"] { --acts: 52px 52px 78px; }
  :root[lang="pt"] { --acts: 72px 46px 48px; }
  :root[lang="es"] { --acts: 56px 46px 70px; }
}
.row-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--slate); }
.row-btn:hover { background: var(--sky); color: var(--on-sky); }
.row-btn.ghost { pointer-events: none; }
.row-btn.done { color: var(--link); }
.row-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.playing .row-t { color: var(--link); }
.row-s, .row-al { color: var(--slate); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-snip { font-size: 14px; color: var(--slate); margin-top: 2px; }
.row-d { color: var(--slate); font-variant-numeric: tabular-nums; text-align: right; font-size: 15px; }
.rows.compact .row-btn { width: 36px; height: 36px; }
.rows.compact .row-art { width: 44px; }

/* ---------- home sections ---------- */
.sec-h { display: flex; justify-content: space-between; margin-bottom: 20px; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.sec-h h2 { font-size: clamp(26px, 3vw, 34px); }
.more { font-weight: 600; color: var(--link); white-space: nowrap; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.shelf, .most { padding-top: 72px; }
.shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 20px) / 6); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.shelf-row::-webkit-scrollbar { display: none; }
.acard { display: grid; gap: 4px; scroll-snap-align: start; min-width: 0; }
.acard .art { margin-bottom: 8px; }
.acard-t { font-weight: 600; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acard-s { color: var(--slate); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.most .rows { grid-template-columns: 1fr 1fr; column-gap: 40px; grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
.most .row-al { display: none; }
.home main { padding-bottom: 96px; }

/* ---------- browse ---------- */
.browse { padding-top: 48px; padding-bottom: 96px; }
.page-t { font-size: clamp(40px, 5.5vw, 64px); margin-bottom: 12px; }
.page-sub { color: var(--slate); font-size: 18px; max-width: 60ch; margin-bottom: 28px; }
.big-search { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 24px; border-radius: var(--r-panel); background: var(--mist); color: var(--slate); margin-bottom: 24px; max-width: 760px; margin-inline: auto; }
.big-search .i { width: 28px; height: 28px; }
.big-search:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--blue); }
.big-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.big-search input::placeholder { color: var(--slate); }
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.count { color: var(--slate); font-weight: 500; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; font-weight: 600; color: var(--slate); }
.empty { color: var(--slate); margin-bottom: 20px; font-size: 18px; }
.alb-sec { padding-top: 24px; padding-bottom: 32px; }
.agrid, .artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 28px 20px; }
.artist { display: grid; gap: 4px; justify-items: center; text-align: center; }
.artist .art { margin-bottom: 8px; }

/* collection list */
.coll-list { padding-top: 40px; padding-bottom: 96px; max-width: calc(var(--wrap)); }

/* ---------- static pages ---------- */
.prose { padding-top: 48px; padding-bottom: 96px; max-width: 760px; font-size: 18px; line-height: 1.65; }
.prose h2 { font-size: 26px; margin: 36px 0 12px; }
.prose p, .prose ul { margin: 0 0 16px; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.ftr { background: var(--deep); color: rgba(255,255,255,.75); --logo-mark: #fff; --logo-word: #fff; padding: 56px 0 40px; }
.ftr-in { display: grid; gap: 32px 48px; }
.ftr-logo { display: block; margin-bottom: 16px; }
.ftr-logo .logo-svg { height: 28px; margin-inline: auto; }
.ftr-links a:hover { color: #fff; }
.ftr-c { grid-column: 1 / -1; font-size: 14px; color: rgba(255,255,255,.5); padding-top: 24px; box-shadow: 0 -1px 0 rgba(255,255,255,.12); justify-self: stretch; }

/* ---------- player (reserved band; nothing else ever sits here) ---------- */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--player-h); background: var(--paper); box-shadow: 0 -1px 0 var(--rule), 0 -10px 30px -12px var(--shadow); padding-bottom: env(safe-area-inset-bottom); }
.p-prog { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mist); display: none; }
#p-fill { height: 100%; width: 0; background: var(--blue); }
.player-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto; gap: 24px; align-items: center; height: 100%; }
.p-now { display: flex; gap: 12px; align-items: center; min-width: 0; border-radius: 10px; padding: 4px; margin: -4px; }
.p-now:hover { background: var(--mist); }
.p-cover { width: 48px; flex: none; }
.p-cover .art { display: block; border-radius: 8px; }
.p-meta { min-width: 0; }
.p-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-s { font-size: 14px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ctl { display: flex; align-items: center; gap: 6px; }
.p-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink); }
.p-btn:hover { background: var(--mist); }
.p-lbl-s { display: none; }
.p-btn.big { width: 48px; height: 48px; background: var(--blue); color: #fff; }
.p-btn.big:hover { background: var(--blue-d); }
.p-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--slate); font-variant-numeric: tabular-nums; }
.p-bar input { flex: 1; accent-color: var(--blue); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .shelf-row { grid-auto-columns: calc((100% - 3 * 16px) / 4.3); gap: 16px; }
  .song-body { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .most .rows { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
@media (max-width: 860px) {
  /* phones: one header row (logo · theme · language), the search under it */
  .hdr-in { height: 60px; gap: 6px; }
  .logo .logo-svg { height: 22px; }
  .hdr-search { margin-left: auto; width: 44px; height: 44px; padding: 0; justify-content: center; background: none; }
  .hdr-search input { width: 0; flex: 0 0 0; padding: 0; }
  .hdr-search:focus-within { position: absolute; left: 12px; right: 12px; top: 8px; width: auto; padding: 0 14px; background: var(--mist); justify-content: flex-start; z-index: 2; }
  .hdr-search:focus-within input { flex: 1; }
  .lang-d { display: none; }
  .song-t { font-size: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-k { font-size: 15px; }
  .song-acts { padding-top: 20px; }
  .song-body { padding-top: 40px; }
  .shelf-row { grid-auto-columns: 42%; }
  .row-al, .row-d { display: none; }
  .row-art { width: 48px; }
  .ftr-brand { grid-column: 1 / -1; }
  .p-bar, #p-prev, #p-dl { display: none; }
  .p-prog { display: block; }
  .f-grp h2 { display: none; }
  .lyrics { font-size: 24px; }
  .p-lbl { display: none; }
  .p-lbl-s { display: inline; }
  .ch-top::-webkit-scrollbar { display: none; }
  .ch-top .ch-row { scroll-snap-align: start; }
  body.has-player { padding-bottom: calc(var(--player-h) + 20px + env(safe-area-inset-bottom)); }
  .p-cover { width: 46px; }
  /* (Big lyrics no longer spans: the secondary actions are one quiet row, see "fewer buttons" at the end) */
  .song-acts .acts-more > .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .song-acts .acts-more > #share { order: 1; }
  .song-acts .acts-more > #full-song { order: 2; grid-column: 1 / -1; }
  .hdr .lang-d select { position: absolute; inset: 0; width: 100%; opacity: 0; }
  .picks:has(.pick:only-child) { grid-template-columns: 1fr; }
  .pick::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
  .pick span { font-size: 12px; font-weight: 600; color: var(--slate); }
  .pick select { appearance: none; border: 0; background: none; padding: 0; font-size: 16px; font-weight: 600; color: var(--ink); width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- centred, Apple-style composition (Joel, 1 Nov: "can we not left justify the things") ---------- */
.hero-ed { margin-top: 14px; max-width: 46ch; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.88); }
.song-band .hero-ed { margin-inline: auto; }
.sec-h p { color: var(--slate); margin-top: 2px; }
.page-t, .page-sub { text-align: center; margin-inline: auto; }
.browse .list-bar { justify-content: center; }
.song-band .hero-k { justify-content: center; }
.song-acts > * { grid-column: 1; }
.song-acts .acts, .facts { justify-content: center; }
.ftr-in { text-align: center; grid-template-columns: 1fr; justify-items: center; }
.ftr-links { display: grid; align-content: start; font-weight: 500; grid-auto-flow: column; gap: 24px; }
.ftr-brand p { max-width: 44ch; margin-inline: auto; }

/* header: one line, always */
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--slate); flex: none; }
.theme-btn:hover { background: var(--mist); color: var(--ink); }
.ic-sun { display: none; }
:root[data-theme="dark"] .ic-sun { display: block; }
:root[data-theme="dark"] .ic-moon { display: none; }
@media (max-width: 1480px) and (min-width: 861px) {
  .hdr-search { justify-content: center; cursor: pointer; transition: width .2s; width: auto; padding: 0 14px; gap: 6px; }
  .hdr-search input { width: 0; flex: 0 0 0; padding: 0; }
  .hdr-search:focus-within { width: 260px; padding: 0 14px; justify-content: flex-start; }
  .hdr-search:focus-within input { flex: 1; }
  .hdr-search:focus-within .hs-lbl { display: none; }
}

/* catalogue: filters on the left, list on the right */
.cat { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.filters { position: sticky; top: 92px; display: grid; gap: 24px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.f-grp { display: grid; gap: 2px; }
.f-grp h2 { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--slate); margin: 0 0 6px 10px; }
.side-opt { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.side-opt small { color: var(--slate); font-variant-numeric: tabular-nums; }
.side-opt:hover { background: var(--mist); }
.side-opt.on { background: var(--sky); color: var(--on-sky); font-weight: 600; }
.cat-main .list-bar { justify-content: flex-start; }
@media (max-width: 860px) {
  .cat { grid-template-columns: 1fr; gap: 16px; }
  .filters { position: static; max-height: none; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .f-grp { display: flex; gap: 6px; flex: none; align-items: center; }
  .f-artists { display: none; }
  .side-opt { white-space: nowrap; background: var(--mist); border-radius: 999px; padding: 7px 14px; }
  .player-in { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; }
  .p-now { gap: 10px; }
  .row-acts { gap: 0; }
}

/* lyrics panel */
.ly-dlg { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); display: none; }
.ly-dlg[open] { display: flex; flex-direction: column; }
.ly-dlg::backdrop { background: rgba(5,10,18,.6); }
.ly-dlg-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 22px 22px 12px 26px; }
.ly-dlg-head h2 { font-size: 24px; }
.ly-dlg-head p { color: var(--slate); margin-top: 4px; }
.ly-dlg-body { overflow: auto; padding: 4px 26px 20px; font-size: 18px; line-height: 1.55; white-space: pre-line; }
.ly-dlg-foot { display: flex; gap: 10px; padding: 14px 22px 22px; box-shadow: 0 -1px 0 var(--rule); flex-wrap: wrap; }

/* buttons on a cover band take the band's own colour (Joel: "the gray is what I'm against") */
.band .btn.light { background: #fff; color: color-mix(in srgb, var(--base, #0B1A2B) 85%, #000); }
.band .btn.light:hover { background: color-mix(in srgb, var(--base) 12%, #fff); }
.band .btn.ghost-l { background: color-mix(in oklab, var(--base, #185A8C), #fff 22%); color: #fff; box-shadow: none; }
.band .btn.ghost-l:hover { background: color-mix(in oklab, var(--base, #185A8C), #fff 32%); }

/* narrower screens: the band's editorial line centres too */
@media (max-width: 960px) { .hero-ed { margin-inline: auto; } }

/* ---------- lyrics: bold, big, centred (Prompter's presentation), still plain selectable text ---------- */
.ly-wrap { text-align: center; }
.ly-head { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.ly-head .acts { justify-content: center; }
.lyrics .ln { padding: 5px 10px; }
.lyrics .ln.sec { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--slate); padding-top: 22px; }
.lyrics .gap { height: 18px; }
.lyrics.live .ln { color: var(--lyr-dim); }
.lyrics.live .ln.past { color: var(--lyr-past); }
.lyrics.live .ln.now { transform: scale(1.04); transition: transform .25s, color .25s; color: #F2C94C; }

/* the live line is Prompter's yellow; a deeper amber on the light theme */
:root[data-theme="light"] .lyrics.live .ln.now { color: #B7791F; }

/* ---------- My list: the player button, the panel, the toast ---------- */
.p-right { display: flex; gap: 4px; align-items: center; }
.p-q, .p-ly { position: relative; width: auto; padding: 0 12px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; }
.q-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.q-count:empty { display: none; }
.q-panel { position: fixed; right: 16px; bottom: calc(var(--player-h) + 12px); z-index: 45; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -20px rgba(0,0,0,.55); }
.q-panel[hidden] { display: none; }
.q-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 14px 8px 20px; }
.q-head h2 { font-size: 20px; }
.q-list { list-style: none; margin: 0; padding: 0 10px; overflow: auto; flex: 1; counter-reset: q; }
.q-list li { display: flex; align-items: center; border-radius: 12px; padding: 2px 2px 2px 10px; gap: 4px; }
.q-list li:hover { background: var(--mist); }
.q-list li.on { background: var(--sky); }
.q-list li::before { counter-increment: q; content: counter(q); width: 20px; color: var(--slate); font-size: 13px; font-variant-numeric: tabular-nums; }
.q-go { flex: 1; min-width: 0; text-align: left; border: 0; background: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.q-acts .row-btn { width: 32px; height: 32px; font-size: 14px; }
.q-empty { padding: 8px 20px 16px; color: var(--slate); }
.q-empty[hidden] { display: none; }
.q-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; box-shadow: 0 -1px 0 var(--rule); }
.toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 20px); transform: translate(-50%, 12px); z-index: 60; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; width: max-content; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- plain words under icons (Joel: older users, low-tech settings) ---------- */
.row-btn.lbl { width: auto; min-width: 52px; height: auto; padding: 6px 6px 4px; border-radius: 12px; display: grid; justify-items: center; gap: 2px; }
.row-btn.lbl span { font-weight: 600; line-height: 1.1; font-size: 13px; }
.row-btn.lbl.ghost { min-width: 52px; }
.row { grid-template-columns: 52px minmax(0, 2fr) minmax(0, 1.2fr) 52px auto; }
.rows.no-album .row { grid-template-columns: 52px minmax(0, 1fr) 52px auto; }
@media (max-width: 860px) {
  .row, .rows.no-album .row { gap: 8px; }
  .row-btn.lbl { padding: 6px 3px 4px; }
  .player > .wrap.player-in { padding-left: 8px; padding-right: 6px; }
  .p-cover:empty { height: 46px; border-radius: 9px; background: var(--mist); }
  .p-btn.big { width: 44px; height: 44px; }
  .q-panel { left: 8px; right: 8px; width: auto; max-height: min(78dvh, 680px); }
}
.p-lbl, .p-lbl-s { font-size: 14px; font-weight: 600; }
.p-q .q-count { position: static; }
.hs-lbl { font-size: 15px; font-weight: 600; color: var(--slate); display: none; }
@media (max-width: 1480px) and (min-width: 861px) { .hs-lbl { display: inline; } }

/* result headings (search, 404) */
.res-h { font-size: 22px; margin: 28px 0 8px; }

.nav-new { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.3; vertical-align: 2px; }
.nav-new[hidden] { display: none; }
/* Top charts + Sung this week: numbered rows, a round play button each; two columns on wide screens,
   on phones Top charts swipes sideways in columns of four, like the app */
.charts { padding-top: 64px; }
.ch-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.ch-top { grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
.ch-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 8px 4px; border-radius: 12px; box-shadow: 0 1px 0 var(--rule); min-width: 0; }
.ch-row:hover { background: var(--mist); }
.ch-n { width: 24px; flex: none; text-align: center; font-size: 18px; font-weight: 700; color: var(--slate); font-variant-numeric: tabular-nums; }
.ch-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.ch-main .art { width: 52px; height: 52px; flex: none; }
.ch-t { min-width: 0; display: flex; flex-direction: column; }
.ch-title, .ch-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-title { font-weight: 600; }
.ch-sub { font-size: 15px; color: var(--slate); }
.ch-row.playing .ch-title { color: var(--link); }
.ch-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--mist); color: var(--ink); }
.ch-row:hover .ch-play { background: var(--sky); color: var(--on-sky); }
.ch-play .i { width: 18px; height: 18px; }
.ch-play .ic-play { margin-left: 2px; }
.ch-row.playing .ch-play { background: var(--blue); color: #fff; }
.ch-row.playing .ic-play { display: none; }
.ch-row.playing .ic-pause { display: block; }
@media (max-width: 860px) {
  .ch-list { grid-template-columns: 1fr; }
  .ch-top { grid-template-columns: none; grid-template-rows: repeat(4, auto); grid-auto-columns: calc(100% - 36px); column-gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .p-q, .p-ly { padding: 0 10px; }
  .player { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); height: 64px; padding-bottom: 0; border-radius: 18px; overflow: hidden;
    box-shadow: 0 0 0 1px var(--rule), 0 18px 40px -16px var(--shadow); }
  .p-t { font-size: 15px; line-height: 1.25; }
  .p-s { font-size: 13px; line-height: 1.3; }
  .p-prog { top: auto; bottom: 0; left: 0; right: 0; height: 2px; background: transparent; }
  .row-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .ftr-links { grid-auto-flow: row; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
  .browse .big-search { display: none; }
  .hdr-in > .ll-btn { display: none; }
  .cat .filters { display: none; }
}

/* playlist cards (Discover): own cover, title, two lines, three song covers peeking, length */
.pl-home .pl-h { font-size: 21px; letter-spacing: -0.02em; margin: 26px 0 12px; text-align: center; }
.pl-home .sec-h { margin-bottom: 4px; }
.pl-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.pl-row::-webkit-scrollbar { display: none; }
.pl-card { scroll-snap-align: start; display: flex; gap: 16px; min-width: 0; padding: 12px; border-radius: 20px; background: var(--mist); color: inherit; transition: background-color .15s; }
.pl-card:hover { background: var(--sky); }
.pl-card .pl-cover { width: 120px; height: 120px; flex: none; border-radius: 12px; }
.pl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.pl-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-note { font-size: 14px; line-height: 1.35; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.pl-peek { display: flex; flex: none; }
.pl-peek img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 2px var(--mist); background: var(--mist); }
.pl-card:hover .pl-peek img { box-shadow: 0 0 0 2px var(--sky); }
.pl-peek img + img { margin-left: -7px; }
.pl-meta { min-width: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; overflow: visible; }
@media (max-width: 600px) {
  .pl-row { grid-auto-columns: calc(100% - 36px); margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .pl-card { gap: 14px; }
  .pl-card .pl-cover { width: 96px; height: 96px; }
  .pl-peek img { width: 22px; height: 22px; }
  .pl-title { font-size: 16px; }
  .pl-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .coll .song-acts .btn:has(.mb) { flex-wrap: wrap; white-space: normal; height: auto; min-height: 48px; padding: 10px 22px; row-gap: 0; max-width: 100%; text-align: center; line-height: 1.3; }
  .coll .song-acts .btn .mb { flex-basis: 100%; font-size: 14px; }
  .agrid, .artists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .acard-t { font-size: 16px; }
}

/* song page: In these playlists, Full song */
.in-lists { margin-top: 48px; }
.in-lists h2 { font-size: 28px; margin-bottom: 16px; text-align: center; }
.song-main .pl-row { grid-auto-columns: min(380px, calc(100% - 36px)); }
#full-song.is-playing { background: var(--blue); color: #fff; }

@media (max-width: 1080px) and (min-width: 601px) { .pl-row { grid-auto-columns: calc((100% - 16px) / 1.6); } }
.song-acts { grid-template-columns: minmax(0, 1fr); }

/* ---------- home, Joel 11 Nov 2026: camp songs lead, then the new singles, then the features ---------- */
.hit-s .sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; margin: 0 8px; vertical-align: middle; }

.hits { margin-top: 64px; }
.hit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hit-art { position: relative; }
.hit-art .art { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--base) 70%, #000); }
.hit-play { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: #0B1A2B; box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); cursor: pointer; transition: transform .15s; }
.hit-play:hover { transform: scale(1.06); }
.hit-play .i { width: 22px; height: 22px; margin-left: 2px; }
.hit-t { font-size: 19px; font-weight: 700; line-height: 1.2; margin: 14px 0 4px; }
.hit-t a { color: var(--ink); text-decoration: none; }
.hit-s { font-size: 14px; color: var(--slate); margin: 0; }
@media (max-width: 820px) {
  .hit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .hit-t { font-size: 17px; }
  .hit-play { width: 46px; height: 46px; right: 10px; bottom: 10px; }
}

.ft { margin-top: 88px; padding: 88px 0; color: #EAF1F7; background: radial-gradient(80% 60% at 50% 0%, rgba(43,120,180,.30), transparent 70%), #060B12; }
.ft-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.ft-h { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; color: #fff; }
.ft-sub { font-size: 19px; line-height: 1.45; color: rgba(234,241,247,.72); margin: 0; }
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ft-tile { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 28px; background: rgba(255,255,255,.06); padding: 30px 30px 0; }
.ft-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8CC8FF; margin: 0 0 10px; }
.ft-t { font-size: 25px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #fff; margin: 0 0 10px; }
.ft-p { font-size: 16px; line-height: 1.5; color: rgba(234,241,247,.72); margin: 0 0 20px; }
.ft-phone { width: 236px; height: 330px; margin: 30px auto 0; overflow: hidden; border: 8px solid #1C1F24; border-bottom: 0; border-radius: 38px 38px 0 0; background: #000; box-shadow: 0 -20px 50px -30px rgba(140,200,255,.35); }
.ft-phone img { display: block; width: 100%; height: auto; }
.ft-ll { margin-top: 20px; display: grid; gap: 40px; align-items: center; border-radius: 28px; padding: 40px 48px; background: radial-gradient(70% 140% at 12% 50%, rgba(56,132,214,.55), transparent 70%), radial-gradient(45% 90% at 90% 100%, rgba(240,200,90,.22), transparent 70%), #08152A; }
.ft-orb { width: 220px; height: 220px; justify-self: center; filter: drop-shadow(0 24px 60px rgba(80,160,255,.45)); }
.ft-ll .ft-t { font-size: clamp(28px, 3vw, 40px); }
.ft-ll .ft-p { font-size: 18px; max-width: 560px; }
@media (max-width: 980px) {
  .ft-grid { grid-template-columns: 1fr; }
  .ft-tile { padding: 26px 24px 0; }
}
@media (max-width: 700px) {
  .ft { margin-top: 64px; padding: 64px 0; }
  .ft-ll { text-align: center; padding: 32px 22px; gap: 18px; }
  .ft-orb { width: 150px; height: 150px; }
  .ft-ll .ft-p { margin-inline: auto; }
  .bn-arrows .prev, .bn-arrows .next { display: none; }
  .bn-ctl .bn-arrows { position: absolute; right: 12px; top: 10px; }
  .hits .sec-h h2 { font-size: 22px; }
  .hits .sec-h p { display: none; }
}
/* the footer sits at the bottom of short pages (no lighter strip under it) */
body > main { flex: 1 0 auto; }
/* phone mini player, Apple Music style (Joel, 13 Nov 2026: the bar read "Only Jes…" with no cover): a floating card
   with the cover, the full title over the artist, and only the buttons that matter (play, Big lyrics, My list) */
@media (max-width: 860px) { .p-cover .art { border-radius: 9px; } }
@media (max-width: 440px) { #p-next { display: none; } }
/* side lists (More from / More by): no length column; titles get the room and may take two lines */
.rows.compact .row { min-height: 60px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
.rows.compact .row-d { display: none; }
.rows.compact .row-acts { gap: 2px; }
.rows.compact .row-btn.lbl { min-width: 44px; padding: 6px 2px 4px; }
.rows.compact .row-t, .rows.compact .row-s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.rows.compact .row-s { -webkit-line-clamp: 1; }
/* the same title twice in a list says what differs ("Key of Bb", "With backing vocals") */
.row-tag { font-weight: 600; color: var(--ink); opacity: .8; }
.row-tag::before { content: "·"; margin: 0 .4em; font-weight: 400; color: var(--slate); }
.row-s:has(.row-tag) { white-space: normal; }
/* artists: every picture round, portrait or cover alike */
.artist .art, .artist .art.face { border-radius: 50%; }
.artist .art.none { place-items: center; text-align: center; padding: 18%; }
/* lyrics another writer owns: say where they are */
.ly-away .ly-note { max-width: 34ch; margin: 10px auto 22px; font-size: 18px; line-height: 1.45; }
.ly-away .acts { justify-content: center; }
/* 404 */
.nf .nf-acts { justify-content: center; margin: 8px 0 48px; }
.nf .res-h { text-align: center; }
/* Words dialog: buttons wrap on a phone instead of clipping */
.ly-dlg-foot .btn { flex: 1 1 auto; }
/* phones: lyric lines balance; a row is cover · title · buttons */
@media (max-width: 860px) {
  .lyrics .ln { text-wrap: balance; }
  .row, .rows.no-album .row, .rows.compact .row { grid-template-columns: 44px minmax(0, 1fr) auto; }
}
.song-art .art.face { border-radius: 50%; }
.ly-away .ly-note, .page-sub { text-wrap: balance; }

/* ---------- Big lyrics, full screen over the page (Joel 11 Nov 2026: big, full screen, the song keeps playing) ---------- */
#bigly { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; color: #fff; background: radial-gradient(90% 70% at 50% 30%, color-mix(in oklab, var(--base, #1B3A5C), #000 25%), color-mix(in oklab, var(--base, #1B3A5C), #000 55%)); }
html.bigly-on, html.bigly-on body { overflow: hidden; }
#bigly .bl-top { display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px, 3vw, 32px); flex-wrap: wrap; row-gap: 10px; }
#bigly .bl-art { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
#bigly .bl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#bigly .bl-t b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bigly .bl-t span { font-size: 14px; color: rgba(255,255,255,.7); }
#bigly .bl-play, #bigly .bl-x { width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; font-size: 20px; }
#bigly .bl-play { background: #fff; color: #0B1A2B; }
#bigly .bl-play svg { width: 24px; height: 24px; fill: currentColor; }
#bigly .bl-play .pa, #bigly.playing .bl-play .pl { display: none; }
#bigly.playing .bl-play .pa { display: inline; }
#bigly .bl-x { background: rgba(255,255,255,.16); color: #fff; }
#bigly .bl-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent); }
#bigly .bl-scroll::-webkit-scrollbar { display: none; }
#bigly .bl-lines { max-width: 1100px; margin: 0 auto; padding: 24vh clamp(20px, 5vw, 64px) 50vh; text-align: center; }
#bigly .ln { font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .32em; color: rgba(255,255,255,.4); cursor: pointer; transition: color .3s; text-wrap: balance; }
#bigly .ln.past { color: rgba(255,255,255,.28); }
#bigly .ln.now { color: #FFD84D; }
#bigly .ln.sec { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 1.8em 0 .9em; cursor: default; font-size: calc(clamp(14px, 1.3vw, 18px) * var(--bl-scale, 1)); }
#bigly .gap { height: .9em; }
@media (prefers-reduced-motion: reduce) { #bigly .ln { transition: none; } }

/* ---------- Apple Music-style editorial banners (Joel, 12 Nov 2026: "I'm not seeing banners… it's too sterile and
   too safe"). Real stills from the music videos and camps sit full height on the right and fade into their own
   colour field, where the type sits; nothing is printed over a face. ---------- */
.bn-car { position: relative; background: var(--deep); }
.bn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.bn-track::-webkit-scrollbar { display: none; }
.bn { position: relative; isolation: isolate; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; min-height: min(clamp(600px, 48vw, 700px), calc(100svh - 200px)); overflow: hidden; color: #fff; background: var(--base); }
.bn-media { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 62%; }
.bn-img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
.bn-in { position: relative; width: 100%; display: flex; align-items: center; padding-top: 56px; padding-bottom: 96px; }
.bn-copy { width: min(560px, 44%); min-width: 0; }
.bn-k { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.82); margin: 0; }
.bn-t { font-size: clamp(40px, 4.9vw, 78px); font-weight: 800; line-height: 1; letter-spacing: -.035em; margin: 12px 0 16px; text-wrap: balance; overflow-wrap: break-word; }
.bn-t a { color: inherit; text-decoration: none; }
.bn-t a:hover { text-decoration: none; opacity: .92; }
.bn-p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: rgba(255,255,255,.9); margin: 0; max-width: 40ch; }
.bn .acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.bn .btn.light { color: color-mix(in srgb, var(--base) 80%, #000); }
.bn .btn.light:hover { background: color-mix(in srgb, var(--base) 10%, #fff); }
.bn .btn.ghost-l { background: rgba(255,255,255,.16); box-shadow: none; }
.bn .btn.ghost-l:hover { background: rgba(255,255,255,.26); box-shadow: none; }
.bn-play .ic-pause, .bn-play.is-playing .ic-play { display: none; }
.bn-play.is-playing .ic-pause { display: block; }
/* the playable track list */
.bn-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.2); max-width: 520px; }
.bn-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.bn-rp { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; transition: background-color .15s, color .15s; }
.bn-rp .i { width: 18px; height: 18px; }
.bn-rp .ic-play { margin-left: 2px; }
.bn-rp .ic-pause, .bn-row.playing .bn-rp .ic-play { display: none; }
.bn-row.playing .bn-rp .ic-pause { display: block; }
.bn-rp:hover, .bn-row.playing .bn-rp { background: #fff; color: color-mix(in srgb, var(--base) 80%, #000); }
.bn-rt { display: grid; min-width: 0; color: #fff; text-decoration: none; }
.bn-rt:hover { text-decoration: none; }
.bn-rt:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.bn-rt .t { font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-rt .s { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-rd { font-size: 14px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.bn-row.playing .bn-rt .t { color: #fff; }
/* slide one: the site itself */
.bn-launch { background: linear-gradient(135deg, #1630F2 0%, #2F6BFF 48%, #2FB4FF 100%); }  /* electric blue (Joel, 13 Nov 2026) */
.bn-launch .bn-media { width: 56%; display: grid; place-items: center; }
/* one real phone playing the real lyrics view (Joel, 13 Nov 2026: three tiny screenshots read as a blurry ad) */
.bn-phone { height: 86%; max-height: min(640px, calc(100svh - 300px)); aspect-ratio: 540 / 1168; border-radius: 44px; border: 9px solid #0A1220; background: #0A1220; overflow: hidden; box-shadow: 0 50px 90px -34px rgba(3,12,40,.8); }
.bn-vid { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Safari draws its own big Play button when autoplay is refused (Low Power, autoplay off): never show it; the poster stays */
.bn-vid::-webkit-media-controls, .bn-vid::-webkit-media-controls-start-playback-button, .bn-vid::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.bn-new { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #FFD84D; color: #0B1A2B; letter-spacing: .08em; }
.bn-feat { grid-template-columns: 38px minmax(0, 1fr); }
.bn-fi { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.bn-fi .i { width: 19px; height: 19px; }
/* dots and arrows */
.bn-ctl { position: absolute; left: 0; right: 0; bottom: 28px; pointer-events: none; }
.bn-ctl-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bn-ctl button { pointer-events: auto; }
.bn-dots { display: flex; gap: 2px; }
.bn-dots button { width: 26px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: width .3s; }
.bn-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.5); transition: width .3s, background-color .3s; }
.bn-dots button.on { width: 40px; }
.bn-dots button.on::before { width: 30px; background: #fff; }
.bn-arrows { display: flex; gap: 10px; }
.bn-arrow { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #0B1A2B; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); transition: transform .15s; }
.bn-arrow:hover { transform: scale(1.06); }
.bn-arrow .i { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .bn { flex-direction: column; min-height: 0; }
  .bn-media { position: relative; z-index: 0; width: 100%; aspect-ratio: 4 / 3; }
  .bn-img { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .bn-in { margin-top: -44px; padding-top: 0; padding-bottom: 72px; align-items: flex-start; }
  .bn-copy { width: 100%; }
  .bn-t { font-size: clamp(34px, 10.5vw, 46px); margin: 8px 0 12px; }
  .bn-p { font-size: 16px; }
  .bn .acts { margin-top: 20px; }
  .bn .acts .btn { flex: 1 1 0; min-width: 0; }
  .bn-list { margin-top: 22px; }
  .bn-list:not(.bn-feats) .bn-row:nth-child(n+3) { display: none; }
  /* equal slide heights on a phone; the rest are a tap away */
  .bn-launch .bn-media { width: 100%; aspect-ratio: 16 / 11; padding: 16px var(--gut) 0; }
  .bn-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; }
  .bn-feats .bn-feat { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px; border: 0; border-radius: 14px; background: rgba(255,255,255,.12); }
  .bn-feats .bn-fi { width: 30px; height: 30px; }
  .bn-feats .bn-rt .t { font-size: 14px; white-space: normal; line-height: 1.2; }
  .bn-feats .bn-rt .s { display: none; }
  .bn-launch .bn-in { margin-top: 0; }
  /* a phone-sized screen is too small to read inside a slide: show the lines themselves, a window onto the lyrics view */
  .bn-phone { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border: 0; border-radius: 22px; box-shadow: 0 24px 50px -28px rgba(3,12,40,.8); }
  .bn-vid { object-position: 50% 38%; }
  .bn-ctl { bottom: 22px; }
  .bn-ctl-in { justify-content: center; }
  .bn-arrows { display: none; }
  .bn-song .bn-in, .bn-cover .bn-in { margin-top: 0; padding-top: 20px; }
}

/* song and album bands with a real still (STILLS in db.js): picture right, colour field left, text centred in it */
.band.has-still .band-clip::after { content: none; }
.band-still { position: absolute; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%); mask-image: linear-gradient(to right, transparent 0, #000 32%); }
.song-band.has-still .band-in { grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; max-width: var(--wrap); min-height: 460px; align-content: center; padding-top: 44px; padding-bottom: 44px; }
.song-band.has-still .band-in > * { width: min(520px, 42%); justify-self: start; text-align: center; }
.song-band.has-still .song-art .art { width: clamp(150px, 14vw, 200px); margin-inline: auto; }
.song-band.has-still .song-t { max-width: none; font-size: clamp(32px, 3.8vw, 56px); }
@media (max-width: 760px) {
  .band.has-still .band-clip { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .band-still { width: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
  .song-band.has-still .band-in { min-height: 0; margin-top: -56px; padding-top: 0; padding-bottom: 28px; position: relative; }
  .song-band.has-still .band-in > * { width: 100%; justify-self: center; }
  .song-band.has-still .song-art { display: none; }
}

/* one editorial banner further down the home page: Discover */
.bn-solo { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 360px; margin: 64px 0 0; border-radius: 28px; background: var(--base); color: #fff; text-decoration: none; }
.bn-solo:hover { text-decoration: none; }
.bn-solo .bn-img { position: absolute; z-index: -1; top: 0; right: 0; width: 60%; height: 100%; }
.bn-solo-in { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: min(520px, 46%); padding: 44px 0 44px 52px; }
.bn-solo .bn-t { font-size: clamp(30px, 3.4vw, 50px); margin: 0; }
.bn-solo .bn-p { font-size: 17px; }
.bn-solo .btn { margin-top: 10px; color: color-mix(in srgb, var(--base) 80%, #000); }
.bn-solo:hover .btn { background: color-mix(in srgb, var(--base) 10%, #fff); }
.pl-home.bannered { margin-top: 28px; }
@media (max-width: 760px) {
  .bn-solo { flex-direction: column; align-items: stretch; min-height: 0; border-radius: 24px; margin-top: 48px; }
  .bn-solo .bn-img { position: relative; z-index: 0; width: 100%; height: auto; aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
  .bn-solo-in { width: auto; padding: 0 22px 26px; margin-top: -28px; position: relative; }
}

/* the Live Listen orb: the app's real WebGL orb (public/home/orb-panel.js over public/app/orb.js). Its canvas is
   opaque black, so it screen-blends into the dark panel and a soft round mask removes any edge: never a square. */
.ll-orb-cv { display: block; width: 280px; height: 280px; justify-self: center; background: #000; mix-blend-mode: screen; filter: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 72%, transparent 100%); touch-action: none; cursor: pointer; }
img.ll-orb-cv.still { background: none; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; object-fit: contain; }
.ft-ll { grid-template-columns: 280px 1fr; }
.orb-xs { width: 30px; height: 30px; display: block; }
@media (max-width: 860px) {
  .ll-orb-cv { width: 210px; height: 210px; }
  .ft-ll { grid-template-columns: 1fr; }
  .song-acts .acts-main .btn { width: 100%; padding-inline: 14px; }
  .filters.lane-pw .f-grp:first-child { display: none; }
  .rows .row-btn.lbl { width: auto; }
}

/* one slide per new Living Waters Singers song: three frames from its own music video, its own colours, a sung line */
.bn-song { background: radial-gradient(90% 80% at 0% 0%, color-mix(in oklab, var(--base), #fff 14%), transparent 60%), var(--base); }
.bn-song .bn-media, .bn-cover .bn-media { right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); }
.bn-song .bn-media { top: 44px; bottom: 44px; width: min(54%, 660px); }
.bn-mosaic { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; height: 100%; }
/* the single's own cover: the anchor of the slide, square, crisp, never cropped */
.bn-tile.bn-art { aspect-ratio: 1; transform: none; border-radius: 14px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12); }
.bn-tile { position: relative; display: block; overflow: hidden; border-radius: 22px; background: color-mix(in oklab, var(--base), #000 25%); box-shadow: 0 26px 50px -26px rgba(0,0,0,.6); }
.bn-tile.big { grid-row: span 2; }
.bn-tile:nth-child(3) { transform: rotate(-1.4deg); }
.bn-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bn-song .bn-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.bn-song .bn-new { background: var(--acc); }
.bn-by { letter-spacing: .06em; }
.bn-song .bn-t { font-size: clamp(44px, 5.6vw, 92px); font-weight: 900; letter-spacing: -.045em; line-height: .95; }
.bn-ed { padding-left: 16px; border-left: 4px solid var(--acc); max-width: 38ch; }
.bn-song .bn-copy { width: min(500px, 40%); }
.bn-t.long, .bn-song .bn-t.long { font-size: clamp(30px, 3.3vw, 52px); line-height: 1.04; letter-spacing: -.03em; }
/* the camp songs: led by the cover itself, on a backdrop made from the cover's own colours */
.bn-cover .bn-media { top: 50%; bottom: auto; width: min(470px, 36vw); aspect-ratio: 1; transform: translateY(-50%); }
.bn-cv { display: block; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.bn-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-cover .bn-copy { width: min(560px, 46%); }
@media (max-width: 1100px) and (min-width: 901px) {
  .bn-song .bn-copy, .bn-cover .bn-copy { width: 44%; }
  .bn-song .bn-media { width: 48%; }
  .bn-song .bn-t { font-size: clamp(40px, 5vw, 60px); }
}
@media (max-width: 900px) {
  .bn-song .bn-media, .bn-cover .bn-media { position: relative; top: auto; right: auto; bottom: auto; transform: none; margin: 20px var(--gut) 0; width: auto; }
  .bn-song .bn-media { aspect-ratio: 4 / 3; max-height: 460px; }
  .bn-mosaic { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bn-tile.bn-art { border-radius: 10px; }
  .bn-tile { border-radius: 16px; }
  .bn-cover .bn-media { width: min(320px, 70vw); aspect-ratio: 1; margin: 24px auto 0; }
  .bn-song .bn-copy, .bn-cover .bn-copy { width: 100%; }
  .bn-song .bn-t { font-size: clamp(40px, 12vw, 64px); }
  .bn-t.long, .bn-song .bn-t.long { font-size: clamp(28px, 7.4vw, 40px); }
}
@media (max-width: 900px) and (min-width: 600px) { .bn-song .bn-media { aspect-ratio: 16 / 9; } }

/* ---------- search first (Joel, 12 Nov 2026: "they need to get a track in the next 20 seconds") ----------
   Desktop: the header field is always open. Below 1100px: a full-width field under the logo, sticky with the header.
   Under it on every page, the quick chips: All songs · Newest · Praise & Worship · Most played. */
.qbar { display: none; }
@media (min-width: 1101px) {
  .hdr-search, .hdr-search:focus-within { width: 300px !important; padding: 0 16px !important; justify-content: flex-start !important; cursor: text; box-shadow: inset 0 0 0 1.5px var(--rule); }
  .hdr-search input { width: auto !important; flex: 1 1 auto !important; }
  .hdr-search .hs-lbl { display: none !important; }
  .hdr-search:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
}
@media (max-width: 1100px) {
  .hdr-in > .hdr-search { display: none !important; }
  .qbar { display: block; padding-bottom: 10px; }
  .q-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 14px; background: var(--mist); color: var(--slate); }
  .q-search:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--blue); }
  .q-search .i { width: 20px; height: 20px; flex: none; }
  .q-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 500 17px/1 var(--font); color: var(--ink); }
  .q-search input::placeholder { color: var(--slate); font-weight: 400; }
  .q-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .hdr-in > .logo { margin-right: auto; }
}
@media (max-width: 860px) { .qbar { padding-bottom: 8px; display: flex; gap: 8px; align-items: center; } }
.chips-bar { background: var(--paper); border-bottom: 1px solid var(--rule); }
.chips-in::-webkit-scrollbar { display: none; }
.qchip { flex: none; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
.qchip:hover { text-decoration: none; }

/* type-ahead results under whichever search field has focus */
.ta { position: relative; }
.ta-pop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: max(100%, 420px); max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -20px var(--shadow), 0 12px 24px -12px var(--shadow); padding: 6px; }
.hdr-search .ta-pop { left: auto; right: 0; width: 460px; }
.ta-row { display: grid; align-items: center; min-height: 64px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; cursor: pointer; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.ta-row:hover, .ta-row.act { background: var(--mist); text-decoration: none; }
.ta-row img, .ta-row .ta-ph { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--mist); }
.ta-txt { min-width: 0; display: grid; }
.ta-t { font-weight: 600; font-size: 16px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-s { font-size: 13.5px; color: var(--slate); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-t b, .ta-s b { font-weight: 800; color: var(--ink); }
.ta-b { border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--mist); color: var(--ink); cursor: pointer; }
.ta-b:hover { background: var(--sky); color: var(--on-sky); }
.ta-b.play { background: var(--blue); color: #fff; }
.ta-b.play:hover { background: var(--blue-d); color: #fff; }
.ta-b .i { width: 19px; height: 19px; }
.ta-b.play .i { margin-left: 2px; }
.ta-all { display: block; padding: 14px 12px; margin-top: 2px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 15px; color: var(--link); border-radius: 0 0 12px 12px; }
.ta-all.act, .ta-all:hover { background: var(--mist); text-decoration: none; }
.ta-none { padding: 12px; color: var(--slate); font-size: 15px; }
@media (max-width: 1100px) {
  .q-search .ta-pop { position: fixed; top: var(--ta-top, 120px); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - var(--ta-top, 120px) - 16px); }
  .ta-row { min-height: 68px; }
  .ta-row img, .ta-row .ta-ph { width: 52px; height: 52px; }
}

/* laptop-height screens: the banner fits above the player with its track list and dots in view (Joel: "not rescaling properly") */
@media (min-width: 901px) and (max-height: 860px) {
  .bn-in { padding-top: 28px; padding-bottom: 70px; }
  .bn-t { font-size: clamp(36px, 4.2vw, 62px); margin: 8px 0 12px; }
  .bn-p { font-size: 16px; }
  .bn .acts { margin-top: 18px; }
  .bn-list { margin-top: 16px; }
  .bn-row { padding: 6px 0; }
  .bn-ctl { bottom: 16px; }
}

/* ---------- UX pass, 12 Nov 2026: a worship team on a phone on Sunday morning ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 3000; padding: 10px 16px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; }
.skip:focus { top: 10px; }
main:focus { outline: none; }
/* Add to My list: once the song is in the list the button says so */
[data-q-add] .ic-done { display: none; }
[data-q-add].done .ic-add { display: none; }
[data-q-add].done .ic-done { display: inline; }
.row-btn.lbl.done { color: var(--link); }
#song-add.done { background: var(--sky); color: var(--on-sky); }
/* song page: Play and Big lyrics side by side, the rest underneath */
.song-acts .acts-main { display: flex; gap: 10px; flex-wrap: wrap; }
.song-acts .acts-more { margin-top: 12px; }
.btn.primary.alt { background: var(--ink); color: var(--paper); }
.btn.primary.alt:hover { background: var(--slate); }
.ver-only { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--slate); }
@media (max-width: 860px) { .song-acts .acts-main { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 440px; margin-inline: auto; } }
/* the quiet "Download all" at the end of the songs list */
.dl-quiet { margin: 28px 0 8px; text-align: center; font-size: 15px; }
.dl-quiet a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--slate); font-weight: 600; }
.dl-quiet a:hover { color: var(--link); }
.dl-quiet .i { width: 18px; height: 18px; }
/* search rows: the matched lyric line */
.row-snip mark { background: none; color: var(--ink); font-weight: 700; }
/* My list panel: big, spaced move and remove buttons; what's playing is marked */
.q-n { font-size: 15px; color: var(--slate); font-weight: 600; }
.q-go { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center; min-height: 48px; padding: 6px 0; }
.q-go .q-t { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-go .q-s { grid-column: 2; font-size: 13px; font-weight: 500; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-go .q-now { grid-row: 1 / span 2; color: var(--link); font-size: 12px; }
.q-acts { display: flex; gap: 6px; align-items: center; }
.q-b { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--mist); color: var(--ink); font-size: 18px; font-weight: 700; display: grid; place-items: center; cursor: pointer; }
.q-b:hover { background: var(--sky); color: var(--on-sky); }
.q-b:disabled { opacity: .35; cursor: default; }
/* Remove is a bin in red, nothing like the panel's Close ✕ (QA sweep, 13 Nov 2026) */
.q-b.q-rm { margin-left: 10px; background: none; box-shadow: inset 0 0 0 1.5px var(--rule); color: #C0392B; }
.q-b.q-rm svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .q-b.q-rm { color: #FF7A6B; }
.q-list li.on .q-b { background: var(--paper); }
.q-foot .btn.sm { height: 44px; }
.q-foot .btn:disabled { opacity: .45; cursor: default; }
.q-in { margin: 0 12px 10px; padding: 14px; border-radius: 16px; background: var(--sky); color: var(--on-sky); }
.q-in p { margin: 0 0 10px; font-weight: 700; }
.q-in .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-in .btn.sm { height: 44px; }
.q-in-list { margin: 10px 0 0; padding-left: 22px; font-size: 14px; max-height: 120px; overflow: auto; }
/* toast with Undo */
.toast { display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); }
.toast-b { border: 0; background: none; color: var(--sky); font: inherit; font-weight: 800; min-height: 44px; padding: 0 6px; margin: -10px -8px -10px 0; cursor: pointer; }
:root[data-theme="light"] .toast-b { color: #9CC8F0; }
/* player: Big lyrics for whatever is playing */
#p-ly .i { width: 22px; height: 22px; }
/* type-ahead: the lyric hits, and the playing row */
.ta-h { margin: 8px 10px 2px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.ta-s b { color: var(--ink); }
.ta-b.play .ic-pause, .ta-row.playing .ta-b.play .ic-play { display: none; }
.ta-row.playing .ta-b.play .ic-pause { display: inline; }
/* Big lyrics: size, language, full screen */
#bigly .bl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* one Language control (full native names), only when the song has a translation */
#bigly .bl-lang { position: relative; }
#bigly .bl-lang[hidden], #bigly .ll-stage[hidden], #bigly .bl-scroll[hidden], #bigly .bl-art[hidden] { display: none; }
#bigly .bl-b.bl-lb { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; padding: 0 16px 0 12px; }
#bigly .bl-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 2; min-width: 220px; padding: 6px; border-radius: 16px; background: #fff; color: #0B1A2B; box-shadow: 0 24px 48px -20px rgba(0,0,0,.5); }
#bigly .bl-menu button { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; }
#bigly .bl-menu button:hover, #bigly .bl-menu button:focus-visible { background: #EEF2F7; outline: none; }
#bigly .bl-menu button[aria-checked=true] { font-weight: 800; }
#bigly .bl-menu button[aria-checked=true]::after { content: "✓"; margin-left: auto; }
#bigly .bl-menu small { font-size: 13px; font-weight: 500; color: #5B6B7E; }
/* Live Listen: the same view; the orb and its words until a song is heard, then that song's lyrics */
#bigly .bl-stop { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: #fff; color: #0B1A2B; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
#bigly.ll.waiting .bl-tools { display: none; }
#bigly .bl-stop svg { width: 18px; height: 18px; fill: currentColor; }
#bigly .ll-stage { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 12px 24px 15vh; text-align: center; }
#bigly .ll-orb { width: min(42vmin, 220px); height: auto; border-radius: 50%; mix-blend-mode: screen; transition: transform .12s linear; }
#bigly .ll-body { max-width: 34rem; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#bigly .ll-st { margin: 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
#bigly .ll-why, #bigly .ll-msg { margin: 0; font-size: 19px; line-height: 1.45; color: rgba(255,255,255,.9); text-wrap: pretty; }
#bigly .ll-msg { font-size: 21px; font-weight: 600; color: #fff; }
#bigly .ll-sm { font-size: 16px; color: rgba(255,255,255,.72); }
#bigly .ll-sm[hidden] { display: none; }
#bigly .ll-paused { color: #fff; font-weight: 600; }
#bigly .ll-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
#bigly .ll-acts .btn { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { #bigly .ll-orb { transition: none; transform: none !important; } }
#bigly .bl-b { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-weight: 800; font-size: 16px; display: grid; place-items: center; cursor: pointer; }
#bigly .bl-b:hover { background: rgba(255,255,255,.26); }
#bigly .bl-b svg { width: 22px; height: 22px; }
#bigly .ln { font-size: calc(clamp(34px, 5.4vw, 84px) * var(--bl-scale, 1)); }
#bigly .ln.tr-t { color: rgba(255,255,255,.9); }
#bigly.static .ln:not(.sec) { color: rgba(255,255,255,.92); cursor: default; }
/* singers read ahead: the next two lines are brighter than the rest */
#bigly .ln.soon { color: rgba(255,255,255,.7); }
#bigly .bl-note { margin: 0 auto; padding: 0 20px; max-width: 60ch; text-align: center; font-size: 14px; color: rgba(255,255,255,.75); }
#bigly .bl-note[hidden] { display: none; }
@media (max-width: 600px) {
  /* phone: art, title, play, close on top; languages, size and full screen on one row under them */
  #bigly .bl-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 48px 48px; gap: 10px; padding: 12px 12px 6px; align-items: center; }
  #bigly .bl-art { width: 44px; height: 44px; }
  #bigly .bl-tools { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 4px; row-gap: 6px; flex-wrap: wrap; }   /* never cut a button off at the right edge (Portuguese labels are longer) */
  #bigly.ll .bl-top { grid-template-columns: minmax(0, 1fr) auto; }
  #bigly.ll .bl-art { display: none; }
  #bigly .bl-stop { height: 48px; padding: 0 18px 0 14px; font-size: 16px; }
  #bigly .bl-b.bl-lb { padding: 0 14px 0 10px; }
  #bigly .bl-menu { right: auto; left: 0; }
  #bigly .bl-b { min-width: 44px; height: 44px; padding: 0 8px; font-size: 15px; }
  #bigly .bl-play, #bigly .bl-x { width: 48px; height: 48px; }
  #bigly .ln { font-size: calc(34px * var(--bl-scale, 1)); }
}
/* tap targets: at least 44px on phones, everywhere (Joel, 12 Nov 2026) */
@media (pointer: coarse), (max-width: 860px) {
  .row-btn { min-width: 44px; min-height: 44px; }
  .row-btn.lbl { min-height: 48px; min-width: 48px; }
  .rows.compact .row-btn.lbl { min-width: 44px; }
  .chip { height: 44px; }
  .seg button { height: 44px; }
  .p-btn { width: 44px; height: 44px; }
  .p-q, .p-ly { width: auto; height: 44px; }
  .ch-play { width: 44px; height: 44px; }
  .bn-rp { width: 44px; height: 44px; }
  .bn-dots button { height: 44px; min-width: 44px; }
  .more { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  .theme-btn { width: 44px; height: 44px; }
  .btn.sm { height: 44px; }
  .ftr-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .lang select { min-height: 44px; }
  .announce-x { min-width: 44px; min-height: 44px; }
  /* rows: a visible play button on the artwork, not only on hover */
  .row-play { opacity: 1; background: none; }
  .row-play .i { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(11,26,43,.62); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  .row.playing .row-play { background: rgba(11,26,43,.55); }
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .bn-rt { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  .bn-dots button.on { min-width: 52px; }
  .hit-t a, .ch-main, .pl-card, .acard { min-height: 44px; }
  .hit-t a { display: inline-flex; align-items: center; }
  .side-opt { min-height: 44px; }
  .row-main { min-height: 44px; align-content: center; }
  .hero-k a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .row-play { opacity: 0; }
  .row-play .i { width: 22px; height: 22px; }
  .row:hover .row-play, .row.playing .row-play, .row:focus-within .row-play { opacity: 1; }
}
/* a slim bar at the top while a page loads (soft navigation) */
.nprog { position: fixed; top: 0; left: 0; z-index: 4000; height: 3px; width: 0; background: var(--sky); opacity: 0; pointer-events: none; }
.nprog.on { opacity: 1; width: 82%; transition: width 2.4s cubic-bezier(.1, .7, .2, 1); }
.nprog.on.done { width: 100%; opacity: 0; transition: width .18s ease-out, opacity .25s .12s; }
@media (prefers-reduced-motion: reduce) { .nprog.on { transition: none; width: 100%; } }
/* the toast sits above the player bar, by the thumb, also with My list open (app.js places it above the list's buttons) */
html.q-open .toast { top: auto; bottom: calc(var(--player-h) + 20px); transform: translate(-50%, 12px); }
html.q-open .toast.on { transform: translate(-50%, 0); }
/* type-ahead rows: the song link, then Play and Download beside it (no button inside a link) */
.ta-go { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; min-height: 48px; color: inherit; text-decoration: none; }
.ta-go:hover { text-decoration: none; }
.ta-b { width: 44px; height: 44px; text-decoration: none; }
@media (max-width: 900px) {
  .ta-go { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .ta-b { width: 46px; height: 46px; }
}
/* My list rows: the version kept for the song */
.q-v { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 12px; font-weight: 700; }

/* song page: the version choice comes first, above Play and Download */
.song-acts > .seg { margin: 0 0 14px; }
.song-acts > .ver-only { margin: 0 0 12px; }
/* Big lyrics: the "Loading words…" line */
#bigly .bl-wait { font-size: clamp(18px, 2vw, 24px); letter-spacing: .04em; text-transform: none; }
/* carousel pause control (WCAG 2.2.2) */
.bn-pause .ic-play, .bn-pause.is-paused .ic-pause { display: none; }
.bn-pause.is-paused .ic-play { display: block; }
.bn-pause[hidden] { display: none; }
/* phones: the banner is about 62% of the screen, so the first songs show under it on first load (desktop unchanged) */
@media (max-width: 700px) {
  .bn { height: min(62svh, 560px); min-height: 380px; }
  .bn-media { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .bn-launch .bn-media { aspect-ratio: auto; }
  .bn-in { flex: none; margin-top: -36px; padding-bottom: 58px; }
  .bn-k { font-size: 12px; }
  .bn-t { font-size: clamp(30px, 9vw, 40px); margin: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bn-p { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bn .acts { margin-top: 14px; }
  .bn-list { display: none; }
  .bn-arrows { display: flex; }
  .bn-pause { width: 44px; height: 44px; background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
  /* the pause control sits in the banner's top corner on a phone, clear of the dots */
  .bn-ctl { top: 0; bottom: 8px; }
  .bn-ctl-in { height: 100%; align-items: flex-end; }
  .hits { margin-top: 18px; }
  .hits .sec-h { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; margin-bottom: 12px; }
}
.bn-pause:not(.is-paused) .ic-pause { display: block; }
.bn-pause .i { width: 20px; height: 20px; fill: currentColor; }
/* phones: the buttons under Play sit in a fixed grid, so a label that changes (Add → In My list) never moves the
   button beside it under the thumb */
@media (max-width: 860px) {
  .song-acts .acts-more { justify-content: center; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 440px; margin-inline: auto; }
  .song-acts .acts-more > * { width: 100%; min-width: 0; padding-inline: 12px; }
  .row-btn.lbl, .rows.compact .row-btn.lbl { min-width: 46px; padding-inline: 2px; }
  .hdr .lang-d { display: flex; width: 44px; height: 44px; justify-content: center; flex: none; }
  .qchip-x .i { display: none; }
  .qbar .q-search { flex: 1; min-width: 0; }
  .pick { position: relative; display: grid; gap: 2px; padding: 8px 36px 8px 14px; min-height: 52px; border-radius: 12px; background: var(--mist); }
}
.toast-m { overflow: hidden; text-overflow: ellipsis; }

/* the menu is the chip row (Joel, 13 Nov 2026): no hamburger. Phones get the language globe in the header instead. */
.qchip-x { gap: 8px; }
.qchip-x .orb-xs { width: 20px; height: 20px; border-radius: 50%; }
.qchip .q-count { position: static; margin-left: 2px; }
.qchip .q-count:empty { display: none; }
.qchip .nav-new { margin-left: 6px; vertical-align: 0; }
button.qchip { border: 0; font: inherit; cursor: pointer; }

/* the menu row as plain text tabs (Joel, 13 Nov 2026: "I didn't love the circular button style"): grey words, the page
   you're on in ink with a bar under it, 44px tall to tap */
.chips-in { display: flex; justify-content: center; gap: 40px; overflow-x: auto; scrollbar-width: none; padding-top: 0; padding-bottom: 0; }
.qchip, button.qchip { height: 48px; padding: 0 2px; border-radius: 0; background: none; color: var(--slate); font-size: 16px; font-weight: 600; box-shadow: none; }
.qchip.on, button.qchip.on { background: none; color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
@media (hover: hover) {
  .qchip:hover, button.qchip:hover { background: none; color: var(--ink); }
  .dz-card:hover .dz-cover { transform: scale(1.02); }
}
@media (pointer: coarse), (max-width: 900px) { .qchip, button.qchip { height: 48px; padding: 0 2px; } }
.qchip-x .i { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .chips-in { overflow: visible; }
  .qchip, button.qchip { font-size: 15px; }
}
@media (min-width: 861px) { .qbar .ll-btn { display: none; } }
/* Live Listen: a mode of the whole site, so it sits beside the search */
.ll-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 14px 0 10px; border-radius: 12px; background: var(--mist); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.ll-btn:hover { text-decoration: none; background: var(--sky); color: var(--on-sky); }
.ll-btn .orb-xs { width: 24px; height: 24px; border-radius: 50%; }
.hdr-in > .ll-btn { height: 40px; }
/* Add to device in the header, every page (Joel, 13 Nov 2026: "a button on the top somewhere for easy access"); it opens
   #dev-dlg, this device's pitch. Never in the installed app. Phones: icon and label in a smaller pill; longer languages take two short lines. */
.add-dev { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 40px; padding: 0 14px 0 10px; border-radius: 12px; background: var(--mist); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.add-dev:hover { text-decoration: none; background: var(--sky); color: var(--on-sky); }
.add-dev .i { width: 20px; height: 20px; flex: none; }
html.is-app .add-dev { display: none; }
@media (display-mode: standalone) { .add-dev { display: none; } }
@media (max-width: 860px) {
  .add-dev { height: 44px; padding: 0 7px 0 5px; gap: 3px; font-size: 12px; line-height: 1.05; white-space: normal; flex: 0 1 auto; min-width: 0; }
  .add-dev .i { width: 16px; height: 16px; }
}
/* All songs: one switch for songs, albums and artists */
.lib-sw { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 4px auto 22px; padding: 4px; border-radius: 12px; background: var(--mist); }
.lib-sw a { padding: 9px 18px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--slate); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.lib-sw a:hover { color: var(--ink); text-decoration: none; }
.lib-sw a.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
.lane-sw { margin-top: -10px; }
@media (max-width: 600px) { .lib-sw { width: 100%; } .lib-sw a { flex: 1 1 auto; justify-content: center; padding: 9px 8px; font-size: 14px; white-space: nowrap; } }
/* phone pickers: Show and Sort as two plain dropdowns; the desktop keeps its side panel */
.picks { display: none; }
@media (max-width: 860px) { .picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; } }
@media (max-width: 390px) {
  .qchip, button.qchip { font-size: 14px; }
  .chips-in { gap: 28px; }
  .ll-btn { padding: 0 12px 0 8px; }
}

/* Discover: a banner for each group, then its set lists as a row of covers to swipe */
.dz-grp { margin: 40px 0 0; }
.dz-bn { position: relative; overflow: hidden; height: clamp(150px, 18vw, 220px); border-radius: var(--r-hero); background: var(--c); color: #fff; isolation: isolate; }
/* no scrim over the picture (rulebook): the title sits on a solid panel, the photo stays clean beside it */
.dz-bn img { position: absolute; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover; z-index: -1; }
.dz-bn img + .dz-bn-in { width: 38%; }
.dz-bn-in { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2.4vw, 32px); text-align: left; }
.dz-bn h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.dz-bn p { margin-top: 6px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.88); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 46ch; }
.dz-bn-link { display: block; color: #fff; text-decoration: none; margin-bottom: 18px; }
.dz-bn-link:hover { text-decoration: none; }
.dz-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 18px) / 5); gap: 18px; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dz-row::-webkit-scrollbar { display: none; }
.dz-card { scroll-snap-align: start; display: grid; gap: 4px; align-content: start; min-width: 0; color: inherit; text-decoration: none; text-align: left; }
.dz-card:hover { text-decoration: none; }
.dz-card .dz-cover { width: 100%; aspect-ratio: 1; height: auto; border-radius: 14px; margin-bottom: 6px; transition: transform .2s; }
.dz-t { font-size: 16px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dz-m { font-size: 14px; color: var(--slate); }
@media (max-width: 1000px) { .dz-row { grid-auto-columns: calc((100% - 2 * 18px) / 3.3); } }
@media (max-width: 600px) {
  .dz-grp { margin-top: 30px; }
  .dz-bn { height: auto; border-radius: 16px; }
  .dz-bn img { position: static; z-index: auto; width: 100%; height: 150px; display: block; }
  .dz-bn img + .dz-bn-in { width: auto; padding: 14px 18px 16px; }
  .dz-bn h2 { font-size: 28px; }
  .dz-row { grid-auto-columns: 42%; gap: 14px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
}
/* each action fills its slot (after every other row-button width rule) */
.rows .row-acts > .row-btn.lbl { width: 100%; min-width: 0; }

/* ---------- Key (live transpose, 13 Nov 2026): − Key +2 + in the player bar; a Key button and list in Big lyrics ---------- */
.p-key { display: inline-flex; align-items: center; height: 40px; border-radius: 999px; background: var(--mist); margin-right: 4px; }
.p-key[hidden] { display: none; }
.p-key button { height: 40px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.p-kb { width: 36px; font-size: 20px; font-weight: 600; line-height: 1; border-radius: 50%; }
.p-kv { padding: 0 4px; min-width: 64px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: 8px; }
.p-key button:hover:not(:disabled) { background: var(--sky); }
.p-key button:disabled { opacity: .35; cursor: default; }
/* a song off its original key says so: the pill turns blue */
.p-key.on { background: var(--blue); }
.p-key.on button { color: #fff; }
.p-key.on button:hover:not(:disabled) { background: var(--blue-d); }
.p-key.off .p-kv { opacity: .45; cursor: default; }
@media (max-width: 1080px) and (min-width: 861px) { .p-kv { min-width: 52px; } }
/* phones: the bar has no room; Key lives in Big lyrics */
@media (max-width: 860px) { .p-key { display: none; } }
#bigly .bl-key[hidden] { display: none; }
#bigly .bl-b.bl-kb { white-space: nowrap; font-variant-numeric: tabular-nums; }
#bigly .bl-b.bl-kb.on { background: #fff; color: #0B1A2B; }
#bigly .bl-kmenu { min-width: 200px; }
#bigly .bl-kb .k-s { display: none; }
#bigly .bl-kmenu button { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  #bigly .bl-b.bl-kb { gap: 6px; padding: 0 12px 0 10px; }
  #bigly .bl-b.bl-kb svg { width: 20px; height: 20px; }
  /* phones: "Key" at the original key (the list says "Original key"), so the row never runs off the screen */
  #bigly .bl-kb .k-l { display: none; }
  #bigly .bl-kb .k-s { display: inline; }
}

/* ---------- Key on the song page, under the version choice (13 Nov 2026: "I don't see the transpose anywhere") ---------- */
.song-acts > .key-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.key-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--slate); }
.key-lbl .i { width: 18px; height: 18px; }
.key-step { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border-radius: 999px; background: var(--mist); }
.kr-b { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font: inherit; font-size: 22px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(11,26,43,.12); }
.kr-b:hover:not(:disabled) { background: var(--sky); }
.kr-b:disabled { opacity: .35; cursor: default; box-shadow: none; }
.kr-v { min-width: 112px; padding: 0 10px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.key-row.on .key-step { background: var(--blue); }
.key-row.on .kr-v { color: #fff; }
.key-row.off .kr-v { color: var(--slate); }
.key-note { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--slate); }
.key-note[hidden] { display: none; }
/* "Download MP3 files": a quiet entry (Songs page, footer) that opens one sheet; the app is recommended first */
.dl-open, .ftr-dl { border: 0; background: none; font: inherit; cursor: pointer; }
.dl-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--slate); font-weight: 600; }
.dl-open:hover { color: var(--link); }
.dl-open .i { width: 18px; height: 18px; }
.ftr-dl { padding: 0; color: inherit; font-weight: 500; }
.ftr-dl:hover { color: #fff; }
.dl-dlg { width: min(480px, calc(100vw - 32px)); }
.dl-rec { margin: 0 22px 8px 26px; padding: 16px 18px; border-radius: 16px; background: var(--mist); display: grid; gap: 12px; justify-items: start; }
.dl-rec p { margin: 0; font-size: 16px; line-height: 1.45; }
.dl-rec p.dl-rec-h { font-weight: 700; font-size: 17px; margin-bottom: -8px; }
/* Add to device, said for the device: the phone line by default, the computer line once public/app.js sets html.dev-d */
.dv-d { display: none; }
html.dev-d .dv-m { display: none; }
html.dev-d .dv-d { display: inline; }
.bn-hs-cv img.dv-d, html.dev-d .bn-hs-cv img.dv-m { display: none; }
html.dev-d .bn-hs-cv img.dv-d { display: block; }
/* the Add to device slide: the console is a wide screen, so on computers its frame is too */
html.dev-d .bn-dev .bn-hs-cv { aspect-ratio: 16 / 10; width: min(54%, 680px); }
html.dev-d .bn-dev .bn-hs-cv img { object-position: left top; }
.bn-hs.bn-dev .bn-p { display: block; -webkit-line-clamp: unset; overflow: visible; }   /* the pitch is read whole, never cut with … */
.dl-opts { display: grid; padding: 8px 14px 18px; }
.dl-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 16px; }
.dl-opt:hover { background: var(--mist); }
.dl-opt .i { width: 20px; height: 20px; color: var(--slate); flex: none; }
.ftr-links .ftr-dl { display: inline-flex; align-items: center; min-height: 44px; }

/* "Back to the live line": shown when the words were scrolled away from the sung line (13 Nov 2026) */
.ly-back { position: fixed; left: 50%; bottom: calc(var(--player-h) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 41; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #FFD34E; color: #0B1A2B; font: inherit; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }
.ly-back[hidden] { display: none; }
.ly-back b { font-size: 18px; line-height: 1; }
.ly-back:hover { background: #FFE07A; }
@media (max-width: 860px) { .ly-back { bottom: calc(64px + 24px + env(safe-area-inset-bottom)); } }
#bigly .bl-back { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 3; font-size: 17px; }

/* phones, launch slide (Joel's iPhone, 13 Nov: the lyric card's last line was cut, the pause sat on the card's corner,
   the line under the title ended in "…"): the card's lyrics fade at its edges like a real lyrics view, the pause
   joins the dots row, and the line under the title shows in full */
@media (max-width: 700px) {
  .bn-launch .bn-phone { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%); }
  .bn-p { -webkit-line-clamp: 3; }
  .bn-ctl { top: auto; bottom: 12px; }
  /* the dots start at the left edge and stop short of the pause, so every dot can be reached however many banners
     there are (QA sweep, 13 Nov 2026: the 7th dot was under the pause) */
  .bn-ctl-in { position: relative; height: 44px; align-items: center; justify-content: flex-start; }
  .bn-ctl .bn-arrows { position: absolute; top: 0; right: var(--gut, 16px); }
  .bn-dots { gap: 0; min-width: 0; max-width: calc(100% - 50px); }
  .bn-dots button, .bn-dots button.on { flex: 0 1 44px; min-width: 0; width: 44px; }
  .bn-in { padding-bottom: 64px; }
}

/* ---------- reliability pass (QA sweep, 13 Nov 2026) ---------- */
/* no page scrolls sideways on a phone, whatever an ad or a row does */
main { overflow-x: clip; }
/* Loading: the song is opening or waiting for data. Three dots in place of Play / Pause (never Pause over silence) */
@keyframes sm-dots {
  0%, 100% { box-shadow: -8px 0 0 currentColor, 8px 0 0 color-mix(in srgb, currentColor 30%, transparent); background: color-mix(in srgb, currentColor 30%, transparent); }
  33% { box-shadow: -8px 0 0 color-mix(in srgb, currentColor 30%, transparent), 8px 0 0 color-mix(in srgb, currentColor 30%, transparent); background: currentColor; }
  66% { box-shadow: -8px 0 0 color-mix(in srgb, currentColor 30%, transparent), 8px 0 0 currentColor; background: color-mix(in srgb, currentColor 30%, transparent); }
}
#p-play.is-loading, .ch-row.loading .ch-play, .ta-row.loading .ta-b.play, .bn-row.loading .bn-rp, .bn-play.is-loading, #bigly.loading .bl-play { position: relative; }
#p-play.is-loading svg, .row.loading .row-play .i path, .ch-row.loading .ch-play .i, .ta-row.loading .ta-b.play .i, .bn-row.loading .bn-rp .i, .bn-play.is-loading .i, #bigly.loading .bl-play svg { visibility: hidden; }
#p-play.is-loading::after, .row.loading .row-play::after, .ch-row.loading .ch-play::after, .ta-row.loading .ta-b.play::after, .bn-row.loading .bn-rp::after, .bn-play.is-loading::after, #bigly.loading .bl-play::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; animation: sm-dots 1s infinite steps(1, end);
}
.row.loading .row-play { opacity: 1; color: #fff; background: rgba(11,26,43,.55); }
.bn-play.is-loading .i, .bn-play.is-loading { color: inherit; }
/* buttons with words: the words say Loading…, the icon waits */
#song-play.is-loading .i, #full-song.is-loading .i { opacity: .45; }
.q-list li.loading .q-now { animation: sm-blink 1s infinite; }
@keyframes sm-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { #p-play.is-loading::after, .row.loading .row-play::after, .ch-row.loading .ch-play::after, .ta-row.loading .ta-b.play::after, .bn-row.loading .bn-rp::after, .bn-play.is-loading::after, #bigly.loading .bl-play::after { animation-duration: 2.4s; } }
/* a note that stays while a Key is being made: it may take two lines */
.toast.sticky { white-space: normal; border-radius: 18px; text-align: center; line-height: 1.35; max-width: min(520px, calc(100vw - 32px)); }
.toast.sticky .toast-m { overflow: visible; }
.p-key.prep .p-kv { animation: sm-blink 1.6s infinite; }
/* the MP3 sheet says what the files hold */
.dl-ver { margin: 4px 26px 0; font-size: 15px; color: var(--slate); }

/* Live Listen button: the living orb (Joel picked option A, 13 Nov 2026). Two layers of the real orb's lights turn
   the opposite way inside a glass ball, like Siri; the label never moves. Transform-only, paused for reduced motion. */
.orb-live { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 46% 58%, #1f4dff 0%, #1236c8 55%, #0a1f86 100%); }
.orb-live i { position: absolute; inset: -30%; border-radius: 50%; filter: blur(1.4px); will-change: transform; }
.orb-live i:nth-child(1) { background:
    radial-gradient(circle at 31% 33%, #009dff 0 9%, rgba(0,140,255,0) 26%),
    radial-gradient(circle at 67% 68%, #ffd21f 0 8%, rgba(255,204,20,0) 24%),
    radial-gradient(circle at 72% 30%, #45dcff 0 7%, rgba(64,217,255,0) 22%);
  animation: ll-turn 9s linear infinite; }
.orb-live i:nth-child(2) { mix-blend-mode: screen; background:
    radial-gradient(circle at 30% 70%, #5b3bff 0 10%, rgba(77,46,255,0) 27%),
    radial-gradient(circle at 63% 34%, #1f8bff 0 8%, rgba(31,139,255,0) 24%);
  animation: ll-turn 13s linear infinite reverse; }
/* glass: one small window highlight and a soft rim, fixed, so the ball reads as glass while the light moves inside */
.orb-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 15% at 35% 24%, rgba(255,255,255,.9), rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 46%, rgba(160,220,255,0) 64%, rgba(160,220,255,.32) 90%, rgba(220,244,255,.6) 100%); }
@keyframes ll-turn { to { transform: rotate(360deg); } }

.ll-btn { gap: 9px; }
@media (prefers-reduced-motion: reduce) { .orb-live i { animation: none !important; } }

/* tablets in portrait (iPad 820x1180, 13 Nov 2026): the banner fits the screen under the header, so its dots and
   controls are always in view; the picture takes the room left over by the words, as on a phone */
@media (max-width: 900px) and (min-width: 701px) {
  .bn { height: min(calc(100svh - 190px), 960px); min-height: 520px; }
  .bn-media, .bn-launch .bn-media, .bn-song .bn-media { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; }
  .bn-cover .bn-media { flex: 1 1 auto; min-height: 0; width: auto; height: auto; aspect-ratio: auto; display: grid; place-items: center; }
  .bn-cover .bn-media .bn-cv { display: block; height: 100%; aspect-ratio: 1; max-width: 100%; }
  .bn-cover .bn-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .bn-phone { min-height: 0; }
  .bn-in { flex: none; padding-bottom: 76px; }
}

/* the launch slide's lyrics outside English (views.js launchLoop): live text in the lyrics view's own look, the sung
   line yellow (#FFD84D), the background from the song's cover darkened so the yellow reads (Joel, 13 Nov 2026) */
.bn-ly { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size;
  background: radial-gradient(90% 70% at 50% 42%, color-mix(in oklab, var(--c, #1B3A5C), #000 22%), color-mix(in oklab, var(--c, #1B3A5C), #000 58%)); }
.bn-ly-in { position: absolute; left: 0; right: 0; top: 0; padding: 0 8%; text-align: center; transition: transform .75s cubic-bezier(.25, .7, .2, 1); will-change: transform; }
.bn-ly .ln { margin: 0 0 .42em; font-size: clamp(19px, 8.6cqw, 56px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: rgba(255,255,255,.4); text-wrap: balance; transition: color .45s; }
.bn-ly .ln.past { color: rgba(255,255,255,.26); }
.bn-ly .ln.soon { color: rgba(255,255,255,.72); }
.bn-ly .ln.now { color: #FFD84D; }
.bn-ly .ln.sec { margin: 1.3em 0 .7em; font-size: clamp(11px, 3.2cqw, 17px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: reduce) { .bn-ly-in, .bn-ly .ln { transition: none; } }

/* home banners: Download names its version; on a phone the version goes on a second, smaller line (13 Nov 2026) */
.bn-dl .dl-two { display: none; }
@media (max-width: 700px) {
  .bn-dl:has(.dl-two) .dl-one { display: none; }
  .bn-dl .dl-two { display: grid; text-align: left; line-height: 1.12; min-width: 0; }
  .bn .acts .bn-play:has(~ .bn-dl .dl-two) { flex: 0 0 auto; padding-inline: 24px; }
  .bn .acts .bn-dl:has(.dl-two) { flex: 1 1 auto; }
  .bn-dl .dl-two small { font-size: 12px; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* the song-group picker (Joel, 13 Nov 2026: four groups, one control like Sort): shown at every size; on a computer the
   Sort sits in the side column, so only the group picker shows above the list */
.picks .pick-grp { position: relative; display: grid; gap: 2px; padding: 8px 36px 8px 14px; min-height: 52px; border-radius: 12px; background: var(--mist); }
.picks .pick-grp::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.picks .pick-grp span { font-size: 12px; font-weight: 600; color: var(--slate); }
.picks .pick-grp select { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); width: 100%; min-height: 24px; cursor: pointer; }
@media (min-width: 861px) {
  .picks { display: flex; justify-content: center; margin: -6px 0 22px; }
  .picks .pick-sort { display: none; }
  .picks .pick-grp { width: min(440px, 100%); }
}
@media (max-width: 860px) { .picks { grid-template-columns: 1fr; } }

/* a note with no button never takes a tap: whatever sits under it stays reachable (lead's capture, 13 Nov 2026) */
.toast.sticky { pointer-events: none; }
.key-prep { text-align: center; }
#bigly .bl-stop[hidden] { display: none; }

/* Big lyrics › Now Playing: a song without words (Joel, 13 Nov 2026). The same overlay and cover colour; the header
   loses its small cover, title and text-size buttons, which the big layout below already says. */
#bigly.np .bl-art, #bigly.np .bl-t > *, #bigly.np .bl-sm, #bigly.np .bl-lg { visibility: hidden; }
#bigly.np .bl-sm, #bigly.np .bl-lg { display: none; }
#bigly.np .bl-scroll { -webkit-mask-image: none; mask-image: none; display: flex; }
#bigly.np .bl-lines { margin: auto; width: 100%; padding: 2vh clamp(20px, 5vw, 64px) 6vh; container-type: inline-size; }
#bigly .np { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 560px; margin: 0 auto; }
#bigly .np-art { display: block; width: min(360px, 76vw, 42vh); aspect-ratio: 1; border-radius: 14px; object-fit: cover; box-shadow: 0 34px 80px -30px rgba(0,0,0,.55); }
#bigly .np-info { width: 100%; min-width: 0; }
#bigly .np-k { margin: 26px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
#bigly .np-t { margin: 0; font-size: clamp(32px, 9cqi, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
#bigly .np-a { margin: 10px 0 0; font-size: 18px; font-weight: 600; color: rgba(255,255,255,.78); }
#bigly .np-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 24px 0 0; }
#bigly .np-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
#bigly .np-facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
#bigly .np-clock { display: flex; justify-content: space-between; align-items: baseline; margin-top: 26px; font-variant-numeric: tabular-nums; }
#bigly .np-el { font-size: 38px; font-weight: 800; letter-spacing: -.01em; }
#bigly .np-rem { font-size: 20px; font-weight: 700; color: rgba(255,255,255,.62); }
#bigly .np-bar { display: flex; align-items: center; height: 30px; cursor: pointer; touch-action: none; outline-offset: 4px; }
#bigly .np-bar i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
#bigly .np-bar b { display: block; height: 100%; width: 0; background: #FFD84D; }
@container (min-width: 760px) {
  #bigly .np { flex-direction: row; align-items: center; gap: clamp(36px, 6cqi, 80px); max-width: 1080px; text-align: left; }
  #bigly .np-art { width: min(420px, 40cqi, 60vh); }
  #bigly .np-info { flex: 1; }
  #bigly .np-k { margin-top: 0; }
  #bigly .np-t { font-size: clamp(40px, 5.6cqi, 80px); }
  #bigly .np-facts { justify-content: flex-start; }
}
/* iPhone Safari: overflow+radius doesn't clip the turning lights inside the orb, so it showed too big; clip it to a circle (Joel's phone, 13 Nov 2026) */
.orb-live { clip-path: circle(50% at 50% 50%); -webkit-mask-image: -webkit-radial-gradient(white, black); width: 26px; height: 26px; min-width: 26px; max-width: 26px; flex: 0 0 26px; }

/* ===== Home, What's new, Discover: calm pass (Joel, 13 Nov 2026: "too busy… ALBUM ART IS KING") ===== */
/* Sung this week: each church its own card, side by side when there are two */
.sw { margin-top: 72px; }
.sw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sw-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-card { min-width: 0; border-radius: var(--r-panel); background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 20px; display: flex; flex-direction: column; }
.sw-head { display: flex; gap: 16px; align-items: center; color: inherit; text-decoration: none; margin-bottom: 10px; }
.sw-head:hover { text-decoration: none; }
.sw-cover { width: 96px; height: 96px; flex: none; border-radius: 12px; object-fit: cover; }
.sw-tx { display: grid; gap: 4px; min-width: 0; }
.sw-t { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.sw-m { font-size: 14px; color: var(--slate); line-height: 1.4; }
.sw-card .ch-wk { display: block; }
.sw-more { align-self: flex-start; margin-top: 8px; }
.home .charts { margin-top: 72px; }
.hm-sets { margin-top: 72px; margin-bottom: 24px; }
@media (max-width: 760px) {
  .sw-grid.two { grid-template-columns: minmax(0, 1fr); }
  .sw-card { padding: 16px; }
  .sw-cover { width: 76px; height: 76px; }
  .sw, .home .charts, .hm-sets { margin-top: 52px; }
}
/* What's new: one section per feature; copy beside ONE visual, sections alternate sides on wide screens */
.wn-top { text-align: center; padding: clamp(56px, 9vw, 120px) 0 clamp(24px, 4vw, 48px); }
.wn-t { font-size: clamp(42px, 7vw, 88px); line-height: 1; font-weight: 800; letter-spacing: -.04em; margin: 0 auto 18px; max-width: 14ch; text-wrap: balance; }
.wn-sec { padding: clamp(56px, 9vw, 120px) 0; }
.wn-sec + .wn-sec { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.wn-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.wn-sec:nth-of-type(even) .wn-copy { order: 2; }
.wn-h { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
.wn-p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--slate); margin: 0 0 28px; max-width: 34ch; }
.wn-acts { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.wn-acts .btn .i { width: 20px; height: 20px; }
.wn-vis { display: flex; justify-content: center; }
.wn-shot { border-radius: 28px; overflow: hidden; background: color-mix(in srgb, var(--acc) 22%, var(--paper)); box-shadow: 0 30px 70px -36px color-mix(in srgb, var(--acc) 60%, #000); }
.wn-shot img, .wn-shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wn-shot.tall { width: min(100%, 340px); aspect-ratio: 390 / 600; }
.wn-shot.wide { width: min(100%, 520px); aspect-ratio: 2 / 1; }
.wn-orb { width: min(100%, 360px); aspect-ratio: 1; display: grid; place-items: center; }
.wn-orb canvas { width: 100%; height: 100%; filter: drop-shadow(0 24px 60px rgba(80,160,255,.4)); }
@media (max-width: 760px) {
  .wn-in { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .wn-sec:nth-of-type(even) .wn-copy { order: 0; }
  .wn-p { margin-inline: auto; }
  .wn-acts { justify-content: center; }
  .wn-shot.tall { width: min(78%, 300px); }
  .wn-orb { width: 62%; }
}
/* Discover: a plain heading per group and its covers; room between groups, no photo banners */
.dz .dz-grp { margin-top: clamp(48px, 6vw, 80px); }
.dz-gh { display: flex; align-items: baseline; gap: 12px; }
.dz-gh h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.wn-shot.nat { width: min(100%, 380px); aspect-ratio: 780 / 920; }
@media (max-width: 760px) { .wn-shot.nat { width: min(86%, 340px); } }
/* Home hero carousel, one slide per new single (Joel, 13 Nov 2026: "the top hero section that scrolls should still be
   there. It should be the new singles"): the cover big and crisp, ONE blurred copy of it behind, multiplied into the
   slide's own colour so it only ever darkens (white type stays readable without a scrim) */
.bn-hs { align-items: stretch; }
.bn-hs-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; }
.bn-hs-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(60px) saturate(1.2); transform: scale(1.35); opacity: .6; }
.bn-hs-in { position: relative; width: 100%; display: flex; align-items: center; gap: clamp(32px, 5vw, 80px); padding-top: 48px; padding-bottom: 96px; }
.bn-hs-cv { flex: none; order: 2; width: min(46%, 520px); aspect-ratio: 1; margin-left: auto; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.bn-hs-cv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-hs-copy { min-width: 0; flex: 1; max-width: 560px; }
.bn-hs .bn-t.long { font-size: clamp(36px, 4vw, 64px); }
.bn-hs .bn-by { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: rgba(255,255,255,.88); margin: -6px 0 14px; }
.bn-hs .bn-p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.bn-hs .acts .btn .i { width: 20px; height: 20px; }
.bn-hs-launch .bn-hs-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.bn-hs-launch .bn-t { font-size: clamp(42px, 6vw, 84px); }
.bn-hs-launch .acts { justify-content: center; }
.bn-hs-launch { background: linear-gradient(135deg, #1630F2 0%, #2F6BFF 48%, #2FB4FF 100%); }  /* the launch slide's electric blue (Joel, 13 Nov 2026) */
.bn-hs-launch .bn-t { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 900px) {
  .bn.bn-hs { height: auto; min-height: 0; }
  .bn-hs-in { flex-direction: column; align-items: stretch; justify-content: center; gap: 18px; padding-top: 22px; padding-bottom: 64px; }
  .bn-hs-cv { order: 0; width: min(76%, 300px); margin: 0 auto; border-radius: 16px; }
  .bn-hs-copy { text-align: center; }
  .bn-hs .bn-t { font-size: clamp(32px, 9.5vw, 42px); margin: 6px 0 8px; }
  .bn-hs .bn-by { margin: 0 0 10px; font-size: 17px; }
  .bn-hs .bn-p { font-size: 16px; margin-inline: auto; -webkit-line-clamp: 2; }
  .bn-hs .acts { justify-content: center; margin-top: 18px; }
  .bn-hs-launch .bn-hs-in { justify-content: center; }
}
.bn-hs-launch .bn-hs-copy { flex: none; }
.bn-hs-launch .bn-hs-in { flex: 1; }

/* set lists: By tempo / Original order (0076). A plain two-way switch above the list, 44px targets */
.set-order { display: inline-flex; margin: 0 0 14px; }
.set-order button { min-height: 44px; padding: 0 18px; }

/* Hero v2 (Joel, 13 Nov 2026: "the old style was fine but too many images... big album art next to the title text, the
   action buttons can stay... a nice still from the MVs can be part of the background behind the text"). One music-video
   still sits behind the copy and fades into the slide's own colour on the cover's side; the cover stays the one crisp image. */
.bn-hs-still { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* desktop: the still fills the right side around the cover and fades into the slide colour before the text (never type over a face) */
.bn-hs-still img { position: absolute; right: 0; top: 0; width: 64%; height: 100%; object-fit: cover; object-position: var(--pos); }
.bn-hs-still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--base) 0%, var(--base) 36%, color-mix(in srgb, var(--base) 55%, transparent) 60%, color-mix(in srgb, var(--base) 25%, transparent) 100%); }
@media (max-width: 900px) {
  .bn-hs-in { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 28px; padding-bottom: 64px; }
  .bn-hs-cv { order: 0; width: 132px; margin: 0; border-radius: 12px; }
  .bn-hs-copy { flex: 1 1 0; text-align: left; display: contents; }
  .bn-hs .bn-t { order: 1; flex: 1 1 0; min-width: 0; font-size: clamp(28px, 8vw, 36px); margin: 0; }
  .bn-hs-copy .bn-t { flex-basis: calc(100% - 148px); }
  .bn-hs .bn-by, .bn-hs .bn-p, .bn-hs .acts { order: 2; flex: 0 0 100%; text-align: left; margin: 0; }
  .bn-hs .bn-p { margin-inline: 0; }
  .bn-hs .acts { justify-content: stretch; margin-top: 6px; }
  .bn-hs .acts .btn { flex: 1; }
  /* phone: the still is a band across the top (faces stay clear of the type); cover and title sit below its fade */
  .bn-hs-still img { width: 100%; height: 230px; }
  .bn-hs-still::after { background: linear-gradient(180deg, transparent 0, transparent 120px, var(--base) 230px); }
  .bn-hs:has(.bn-hs-still) .bn-hs-in { padding-top: 168px; }
  .bn-hs-launch .bn-hs-copy { display: block; text-align: center; flex: 1; }
  .bn-hs-launch .bn-t { font-size: clamp(38px, 11vw, 48px); }
  .bn-hs-launch .acts { justify-content: center; }
}
/* hero titles are never cut off: long ones wrap and step down (Joel's rule: text never cut off) */
.bn-hs .bn-t { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 900px) { .bn-hs .bn-t.long { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.08; } }

/* a camp's crowd shot behind the cover on wide screens, its singer in the phone band (Joel, 13 Nov 2026: "the crowd shots are for those corresponding camps") */
.bn-hs-still .still-p { display: none; }
.bn-hs-still .still-d { object-position: var(--wpos); }
@media (max-width: 900px) { .bn-hs-still .still-p { display: block; } .bn-hs-still .still-d { display: none; } }

.flow-logo { display: inline-block; height: .86em; width: auto; vertical-align: -.06em; margin-left: .06em; }

/* Download in the shifted key (13 Nov 2026): the bar that says "Preparing your download in A… 40%", with Cancel, then
   Save on iPhone/iPad; and the small key on a download icon ("A", "+2"). public/app/transpose/keydl.js builds the bar. */
.kdl { position: fixed; left: 50%; bottom: calc(var(--player-h) + 16px); transform: translateX(-50%); z-index: 61; width: min(460px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: 0 20px 40px -16px rgba(0,0,0,.45); }
body:not(.has-player) .kdl { bottom: 16px; }
.kdl-t { margin: 0 0 10px; font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.kdl-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--paper) 22%, transparent); overflow: hidden; }
.kdl-bar i { display: block; height: 100%; width: 0; background: #FFD84D; transition: width .25s linear; }
.kdl.err .kdl-bar { display: none; }
.kdl-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.kdl-b { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: 600 15px/1 var(--font); background: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--paper); cursor: pointer; }
.kdl-b.kdl-go { background: #FFD84D; color: #0B1A2B; }
/* the in-the-moment Add to device prompts (public/app.js nudge): the key-download card's look, never over Big lyrics */
.nudge .kdl-t { margin-bottom: 0; }
.nudge .kdl-b { display: inline-flex; align-items: center; text-decoration: none; }
html.bigly-on .nudge { display: none; }
.nudge { transition: transform .2s; }
.toast.on ~ .nudge { transform: translate(-50%, -64px); }   /* a toast while the prompt is up sits under it, never on it */
.kd-on { position: relative; }
.kd-badge { position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #FFD84D; color: #0B1A2B; font: 700 11px/20px var(--font); text-align: center; letter-spacing: 0; pointer-events: none; }
.row-btn.lbl .kd-badge { top: 0; right: 2px; }
.mb + .kd-z::before { content: "· "; }
#p-dl .kd-badge { top: 1px; right: 0; }

/* search beyond songs (13 Nov 2026): set lists, artists, albums and pages in the type-ahead and on the results page */
.ta-row.ta-x { grid-template-columns: minmax(0, 1fr); }
.ta-row img.round, .ta-ph.round { border-radius: 50%; }
.ta-ph.ta-ini, .ta-ph.ta-pg { display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--slate); }
.ta-ph.ta-pg .orb-live { position: relative; display: block; width: 20px; height: 20px; }
.sr-blk { margin: 18px 0 8px; }
.sr-blk .res-h { margin: 0 0 4px; font-size: 18px; }
.sr-blk .dz-row { margin-top: 10px; }
.sr-chips { margin-top: 10px; }
.sr-chips .chip { height: 44px; color: var(--ink); text-decoration: none; }
.sr-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.sr-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px; border-radius: 14px; background: var(--mist); color: var(--ink); text-decoration: none; }
.sr-card:hover { text-decoration: none; background: var(--rule); }
.sr-pic { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--rule); }
.sr-pic.round { border-radius: 50%; }
.sr-ini { display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--slate); }
.sr-tx { display: grid; min-width: 0; }
.sr-t { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-m { font-size: 14px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-try { margin: 18px 0 0; }
@media (max-width: 700px) { .sr-blk .dz-row, .browse > .dz-row.sr-lists { grid-auto-columns: 42%; gap: 12px; } .sr-row { grid-template-columns: 1fr; } }
.ta-ph.ta-pg .i { width: 22px; height: 22px; }
/* the song page Download names what you get in full (e.g. "Download · Key −2 (with backing vocals)"): it wraps, never cut off */
#song-dl { height: auto; min-height: 48px; padding-block: 10px; }
#song-dl .dl-l { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.25; }
/* /help: the Help answers as a page (src/views.js pageHelp); the floating panel is styled in /app/help.css */
.hp .hp-ask { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; min-height: 52px; margin: 8px 0 8px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--mist); color: var(--slate); font: inherit; font-size: 17px; text-align: left; cursor: pointer; }
.hp .hp-ask:hover { border-color: var(--blue); }
.hp .hp-ask svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hp .hp-t { margin: 40px 0 4px; font-size: 24px; }
.hp .hp-a { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.hp .hp-a:last-child { border-bottom: 0; }
.hp .hp-a h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.hp .hp-a p { margin: 0 0 10px; }
.hp .hlp-steps { margin: 0 0 10px; padding-left: 22px; }
.hp .hlp-steps li { margin: 0 0 6px; }
.hp .hp-a .acts { margin-top: 12px; }
.hp .hp-a .btn.sm { height: 44px; }
/* Play and Download (with its version named in full) each get the full width on phones, so the label never wraps to 3 lines */
@media (max-width: 860px) { .song-acts .acts-main { grid-template-columns: 1fr; } }
/* a fact with no value (e.g. Key not measured yet) stays hidden; the facts grid's own display must not override [hidden] */
.facts [hidden] { display: none !important; }
/* Fewer buttons (Joel, 13 Nov 2026: "looks like a lotta buttons"): Play and Download are the only big buttons. Big lyrics,
   My list and Share sit on one quiet row of small icon-over-label actions; Play original song is a small text link. */
.song-acts .acts-more { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 6px; max-width: 440px; margin-inline: auto; }
.song-acts .acts-more > .btn { flex: 1 1 0; min-width: 0; height: auto; min-height: 56px; padding: 6px 4px; flex-direction: column; gap: 4px;
  background: none; box-shadow: none; border: 0; font-size: 13px; font-weight: 600; color: var(--slate, #9AA6B8); grid-column: auto !important; }
.song-acts .acts-more > .btn svg { width: 22px; height: 22px; color: var(--fg, #fff); }
.song-acts .acts-more > .btn:hover { color: var(--fg, #fff); }
.song-acts .acts-more > #full-song { flex: 0 0 100%; min-height: 40px; flex-direction: row; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.song-acts .acts-more > #full-song svg { width: 16px; height: 16px; }