/* 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; }
.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: 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; }
  .song-acts .acts-more > #song-dl { grid-column: 1 / -1; }
  .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 > .theme-btn { margin-left: 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; }
.q-b.q-rm { margin-left: 10px; background: none; box-shadow: inset 0 0 0 1.5px var(--rule); }
.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; flex-wrap: nowrap; }
  #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; }
/* 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: 40px; 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-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; }
  .bn-ctl-in { position: relative; height: 44px; align-items: center; justify-content: center; }
  .bn-ctl .bn-arrows { position: absolute; top: 0; right: var(--gut, 16px); }
  .bn-in { padding-bottom: 64px; }
}