/* ShemenMusic app. Tokens follow the site (public/style.css, VISUAL-STYLE.md): dark by default, blue frame,
   colour beyond blue only from the covers. One stage per screen; nothing decorative. */
@font-face { font-family: "InterApp"; src: url(fonts/Inter-400.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "InterApp"; src: url(fonts/Inter-700.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "InterApp", "Segoe UI", Roboto, sans-serif;
  --paper: #0A1420; --raise: #101C2A; --mist: #13202F; --mist-2: #1A2A3C; --rule: #223447;
  --ink: #EAF1F7; --slate: #93A8BB; --dim: #5F7488; --blue: #2B78B4; --blue-d: #3A8AC8; --link: #7DB8E6; --sky: #17344F; --on-sky: #CFE4F5;
  --brand: #185A8C; --danger: #F08A7E;
  --r-thumb: 8px; --r-card: 12px; --r-panel: 20px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --tabs-h: 56px; --mini-h: 64px; --lib-w: 380px;
  --stage: #0A1420; --ly-size: 34px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper: #FFFFFF; --raise: #F6F9FC; --mist: #EEF3F8; --mist-2: #E3ECF4; --rule: #D5E1EB;
  --ink: #0B1A2B; --slate: #4E6579; --dim: #8A9DAE; --blue: #185A8C; --blue-d: #0F4370; --link: #185A8C; --sky: #DDEAF4; --on-sky: #0F4370;
  --danger: #B3402F;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.45 var(--font); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-user-select: none; user-select: none; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.1; }
img { display: block; }
svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }

/* ---------- frame ---------- */
.app { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr; }
.lib { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper); }
.lib-head { flex: none; padding: calc(var(--safe-t) + 14px) calc(16px + var(--safe-r)) 10px calc(16px + var(--safe-l)); background: var(--paper); z-index: 2; }
.brand { display: flex; align-items: center; gap: 10px; height: 40px; }
/* in a browser (not the saved app): the way back to the website, always above the logo (Joel, 13 Nov: "I can't leave") */
.site-back { display: flex; align-items: center; gap: 2px; width: max-content; min-height: 44px; margin: -12px 0 -2px -8px; padding: 0 12px 0 2px;
  border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--slate); text-decoration: none; }
.site-back b { font-weight: 700; color: var(--link); }
.site-back svg { width: 20px; height: 20px; }
@media (hover: hover) { .site-back:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.site-back:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.brand-s { width: 30px; height: 30px; }
:root[data-theme="light"] .brand-s { filter: invert(27%) sepia(53%) saturate(1200%) hue-rotate(181deg) brightness(88%); }
.brand-w { font-weight: 700; font-size: 21px; letter-spacing: -0.03em; }
.lib-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0 calc(16px + var(--safe-r)) calc(var(--tabs-h) + var(--mini-h) + var(--safe-b) + 24px) calc(16px + var(--safe-l)); }

/* segmented control (iPad library tabs, version toggle, filters) */
.seg { display: flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--mist); }
.seg button { flex: 1; height: 34px; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--slate); white-space: nowrap; transition: background-color .15s, color .15s; }
.seg button[aria-selected="true"], .seg button.on { background: #2C4258; color: #fff; }
:root[data-theme="light"] .seg button[aria-selected="true"], :root[data-theme="light"] .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(11,26,43,.12); }
.lib-tabs { display: none; margin-top: 12px; }

/* phone tab bar */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; height: calc(var(--tabs-h) + var(--safe-b));
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l); background: var(--raise); box-shadow: 0 -1px 0 var(--rule); }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.tabs button svg { width: 24px; height: 24px; }
.tabs button.on { color: var(--link); }

/* ---------- library pieces ---------- */
.h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; margin: 4px 0 12px; }
.search { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; margin: 0 0 18px;
  border-radius: 12px; background: var(--mist); color: var(--slate); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 17px; color: var(--ink); }
.search input::placeholder { color: var(--slate); }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--slate); }
.search svg { width: 20px; height: 20px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 6px; padding: 0 16px 6px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--mist); color: var(--slate); font-size: 14px; font-weight: 600; }
.chip.on { background: var(--blue); color: #fff; }

.sec-h { position: sticky; top: var(--tb-h, 0px); z-index: 1; padding: 14px 0 6px; background: var(--paper); color: var(--slate); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.count { color: var(--slate); font-size: 14px; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }

.row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 6px 0; text-align: left; border-radius: 10px; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--rule); opacity: .7; }
.row:active { background: var(--mist); }
.row.now .r-title { color: var(--link); }
.row.off { opacity: .42; }
.thumb { width: 44px; height: 44px; flex: none; border-radius: var(--r-thumb); object-fit: cover; background: var(--mist-2); }
.tile { display: grid; place-items: center; overflow: hidden; background: #0B1A2B; color: #EAF1F7; font-weight: 700; letter-spacing: -0.02em; text-align: center; line-height: 1.05; }
.thumb.tile { font-size: 18px; }
.r-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-title { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-sub { font-size: 14px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-end { display: flex; align-items: center; gap: 6px; color: var(--slate); font-size: 14px; font-variant-numeric: tabular-nums; }
.r-end .ok { width: 18px; height: 18px; color: var(--link); }
.r-end .fav { width: 16px; height: 16px; color: var(--slate); }
.r-more { display: grid; place-items: center; width: 36px; height: 44px; margin-right: -8px; color: var(--slate); border-radius: 10px; }
.r-more svg { width: 20px; height: 20px; }
.row .bars { display: none; }
.row.now.playing .bars { display: flex; }

/* the "now playing" equaliser is a static three-step mark, not an animation */
.bars { gap: 2px; align-items: flex-end; height: 14px; }
.bars i { width: 3px; border-radius: 1px; background: var(--link); }
.bars i:nth-child(1) { height: 8px; } .bars i:nth-child(2) { height: 14px; } .bars i:nth-child(3) { height: 10px; }

.empty { padding: 48px 8px; text-align: center; color: var(--slate); }
.empty b { display: block; color: var(--ink); font-size: 19px; margin-bottom: 6px; }

/* album grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 20px 14px; padding-top: 4px; }
.card { text-align: left; min-width: 0; }
.card img, .card .tile { width: 100%; aspect-ratio: 1; border-radius: var(--r-card); object-fit: cover; background: var(--mist-2); }
.card .tile { font-size: 20px; padding: 12px; }
.c-title { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-sub { font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 5px; }
.c-sub svg { width: 14px; height: 14px; color: var(--link); }

/* detail pages (album, setlist) */
.back { display: inline-flex; align-items: center; gap: 2px; height: 40px; margin: 0 0 4px -8px; padding-right: 10px; color: var(--link); font-size: 17px; font-weight: 500; }
.back svg { width: 24px; height: 24px; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px 0 18px; }
.hero-art { width: min(240px, 64vw); aspect-ratio: 1; border-radius: 16px; object-fit: cover; margin-bottom: 14px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
.hero h2 { font-size: 24px; font-weight: 700; }
.hero p { color: var(--slate); font-size: 15px; }
.actions { display: flex; gap: 10px; margin: 14px 0 6px; width: 100%; }
.btn { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 999px;
  font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; background: var(--mist); color: var(--ink); }
.btn svg { width: 20px; height: 20px; position: relative; }
.btn span { position: relative; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.danger { color: var(--danger); }
.btn.sm { flex: none; height: 36px; padding: 0 14px; font-size: 14px; }
.btn.sm svg { width: 18px; height: 18px; }
/* a save in progress fills the button from the left */
.btn .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sky); transition: width .3s; }
.btn.is-saved { color: var(--link); }

/* offline page */
.panel { background: var(--mist); border-radius: var(--r-panel); padding: 18px; margin-bottom: 14px; }
.status { display: flex; align-items: center; gap: 12px; }
.status .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sky); color: var(--on-sky); }
.status .dot svg { width: 20px; height: 20px; }
.status.ready .dot { background: #1D4A33; color: #8FE0B0; }
:root[data-theme="light"] .status.ready .dot { background: #D9F2E3; color: #1C6B3D; }
.status b { display: block; font-size: 17px; }
.status span { color: var(--slate); font-size: 14px; }
.meter { position: relative; height: 10px; border-radius: 5px; background: var(--mist-2); overflow: hidden; margin: 14px 0 8px; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--blue); border-radius: 5px; }
.meter-l { display: flex; justify-content: space-between; color: var(--slate); font-size: 14px; font-variant-numeric: tabular-nums; }
.panel p.note { color: var(--slate); font-size: 14px; margin-top: 10px; }
.big-save { width: 100%; margin-top: 14px; flex: none; }
.orow { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.orow + .orow { box-shadow: 0 -1px 0 var(--rule); }
.orow .r-t { gap: 1px; }
.pbar { height: 6px; border-radius: 3px; background: var(--mist-2); overflow: hidden; margin-top: 6px; }
.pbar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .3s; }
.o-act { flex: none; display: grid; place-items: center; min-width: 44px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--mist-2); color: var(--link); font-size: 14px; font-weight: 600; }
.o-act svg { width: 20px; height: 20px; }
.o-act.done { background: none; padding: 0; color: var(--link); }
.linkish { color: var(--link); font-weight: 600; font-size: 15px; padding: 8px 0; }

/* ---------- stage (the player) ----------
   Lifted from the site's Stage v2 (Joel): the song's own colour with its cover blurred behind, big centred
   lines, the live line yellow like Prompter, count-in dots, soft blurred bars, a word under every button. */
.stage { position: fixed; inset: 0; z-index: 40; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  background: var(--stage); color: #fff; transform: translateY(100%); visibility: hidden;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s .38s, background-color .6s; }
.app.stage-open .stage { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2,.8,.2,1), background-color .6s; }
.st-bg { position: absolute; inset: -140px; z-index: -1; background-size: cover; background-position: center; opacity: 0;
  filter: blur(60px) saturate(1.3) brightness(.45); transition: opacity .6s; }
.st-bg.on { opacity: 1; }
.stage-empty { margin: auto; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.7); }
.stage-empty img { opacity: .9; margin-bottom: 8px; }
.se-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.03em; }
.se-sub { font-size: 16px; max-width: 26ch; }
.stage-in { position: relative; flex: 1; min-height: 0; }

/* soft bars: the song's colour, see-through, with the lyrics blurring away beneath them */
.bar { position: absolute; left: 0; right: 0; z-index: 3; background: color-mix(in srgb, var(--stage) 38%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); transition: opacity .3s; }
.st-top { top: 0; padding: calc(var(--safe-t) + 6px) calc(10px + var(--safe-r)) 10px calc(10px + var(--safe-l)); }
.st-bot { bottom: 0; padding: 4px calc(18px + var(--safe-r)) calc(var(--safe-b) + 10px) calc(18px + var(--safe-l)); }
.st-row { display: flex; align-items: center; gap: 6px; }
.st-meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.st-art { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: rgba(255,255,255,.1); }
.st-titles { min-width: 0; }
.st-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-sub { font-size: 14px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* every control: an icon with its word underneath (Joel: "I see them, but I don't know what they do") */
.ctl { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; color: #fff; flex: none; }
.ctl .ib { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); }
.ctl:active .ib, .aa-btn:active { background: rgba(255,255,255,.26); }
.ctl .ib svg { width: 22px; height: 22px; }
.lab { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.78); letter-spacing: .01em; white-space: nowrap; }
.ctl .ib.tp-play { width: 64px; height: 64px; background: #fff; color: #0B1A2B; }
.ctl .ib.tp-play svg { width: 28px; height: 28px; }
.ctl.dim { opacity: .4; }
.sizes-in { display: flex; gap: 6px; }
.aa-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; }
.aa { font-weight: 800; font-size: 21px; line-height: 1; } .aa.sm { font-size: 13px; }

/* With BVs / No BVs: the one choice that matters on stage, right under the title */
.st-ver { display: flex; justify-content: center; padding-top: 8px; }
.st-ver:empty { display: none; }
.st-ver .seg { width: min(340px, 100%); background: rgba(255,255,255,.14); }
.st-ver .seg button { height: 36px; font-size: 15px; color: rgba(255,255,255,.8); }
.st-ver .seg button.on { background: #fff; color: #0B1A2B; box-shadow: none; }

.lyr { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: 0;
  padding: calc(var(--top-h, 120px) + 26vh) calc(22px + var(--safe-r)) calc(var(--bot-h, 170px) + 40vh) calc(22px + var(--safe-l));
  text-align: center; -webkit-user-select: text; user-select: text; }
.lyr::-webkit-scrollbar { display: none; }
.ln { font-size: var(--ly-size); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; margin: 0 auto .3em; max-width: 22ch;
  color: rgba(255,255,255,.3); transition: color .3s; overflow-wrap: anywhere; text-wrap: balance; }
.lyr.timed .ln { cursor: pointer; }
.lyr.timed .ln.past { color: rgba(255,255,255,.22); }
.lyr.timed .ln.next { color: rgba(255,255,255,.62); }
.lyr.timed .ln.cur { color: #FFD84D; }
.lyr.plain .ln { color: #fff; }
.ln.sec { font-size: max(13px, calc(var(--ly-size) * .36)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 1.4em auto .6em; }
.lyr.timed .ln.sec.cur { color: rgba(255,255,255,.85); }
.gap { height: calc(var(--ly-size) * .5); }
.ly-none { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding-top: 2vh; }
.lyr.none { padding-top: calc(var(--top-h, 120px) + 4vh); }
.ly-none img, .ly-none .tile { width: min(300px, 60vw); aspect-ratio: 1; border-radius: 16px; object-fit: cover; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
.ly-none .tile { font-size: 34px; padding: 22px; }
.ly-none p { color: rgba(255,255,255,.7); font-size: 17px; }

/* count-in: a fixed slot above lines that start after a break, dots lighting one per second */
.cue { display: flex; justify-content: center; gap: 14px; height: 14px; margin: .2em auto .5em; }
.cue i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.18); opacity: 0; transition: background-color .2s, transform .2s, opacity .2s; }
.cue.on i { opacity: 1; }
.cue i.lit { background: #FFD84D; transform: scale(1.15); }
.stage.sun .cue i { background: rgba(11,26,43,.15); }
.stage.sun .cue i.lit { background: #C98A00; }

.scrub { padding: 8px 0 0; touch-action: none; cursor: pointer; }
.scrub-track { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); }
.scrub-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: rgba(255,255,255,.92); }
.scrub-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s; }
.scrub.drag .scrub-knob, .scrub:hover .scrub-knob { transform: scale(1); }
.scrub-times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.transport { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; max-width: 520px; margin: 4px auto 0; }
.transport .ctl:nth-child(3) { margin-top: -10px; }

/* lyrics only: the bars step back until the screen is touched */
.stage.focus .bar { opacity: 0; pointer-events: none; }

/* bright stage for singing outdoors in sunlight */
.stage.sun { --stage: #FFFFFF !important; color: #0B1A2B; }
.stage.sun .st-bg { display: none; }
.stage.sun .bar { background: rgba(255,255,255,.72); }
.stage.sun .ln { color: rgba(11,26,43,.3); }
.stage.sun .lyr.timed .ln.past { color: rgba(11,26,43,.25); }
.stage.sun .lyr.timed .ln.next { color: rgba(11,26,43,.6); }
.stage.sun .lyr.timed .ln.cur, .stage.sun .lyr.plain .ln { color: #000; }
.stage.sun .ln.sec, .stage.sun .st-sub, .stage.sun .scrub-times, .stage.sun .lab { color: rgba(11,26,43,.62); }
.stage.sun .ctl, .stage.sun .aa-btn { color: #0B1A2B; }
.stage.sun .ctl .ib, .stage.sun .aa-btn { background: rgba(11,26,43,.08); }
.stage.sun .ctl .ib.tp-play { background: #0B1A2B; color: #fff; }
.stage.sun .scrub-track { background: rgba(11,26,43,.15); }
.stage.sun .scrub-fill, .stage.sun .scrub-knob { background: #0B1A2B; }
.stage.sun .st-ver .seg { background: rgba(11,26,43,.08); }
.stage.sun .st-ver .seg button { color: rgba(11,26,43,.7); }
.stage.sun .st-ver .seg button.on { background: #0B1A2B; color: #fff; }
.stage.sun .count i.lit { background: #C98A00; }

/* ---------- mini player (phone) ---------- */
.mini { position: fixed; z-index: 21; left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); bottom: calc(var(--tabs-h) + var(--safe-b) + 8px);
  display: flex; align-items: center; gap: 12px; height: var(--mini-h); padding: 0 8px 0 8px; border-radius: 16px; overflow: hidden; text-align: left;
  background: var(--mist-2); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.mini-art { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; background: var(--mist); }
.mini-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mini-title { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-line { font-size: 14px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none; }
.mini-play svg { width: 28px; height: 28px; }
.mini-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.mini-bar span { display: block; height: 100%; width: 0; background: var(--link); }

/* ---------- sheets, toast ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(3,8,14,.55); }
.sheet { width: min(520px, 100%); max-height: 86vh; overflow-y: auto; background: var(--raise); color: var(--ink); border-radius: 20px 20px 0 0;
  padding: 10px calc(16px + var(--safe-r)) calc(var(--safe-b) + 16px) calc(16px + var(--safe-l)); animation: up .26s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--rule); margin: 0 auto 12px; }
.sh-head { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; margin-bottom: 6px; box-shadow: 0 1px 0 var(--rule); }
.sh-head .thumb { width: 52px; height: 52px; }
.sh-head b { display: block; font-size: 17px; }
.sh-head span { color: var(--slate); font-size: 14px; }
.sh-title { font-size: 20px; font-weight: 700; padding: 2px 0 12px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; height: 52px; text-align: left; font-size: 17px; border-radius: 10px; }
.opt svg { color: var(--link); }
.opt.danger, .opt.danger svg { color: var(--danger); }
.opt small { margin-left: auto; color: var(--slate); font-size: 14px; }
.opt.on::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--link); }
.field { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 0; outline: 0; background: var(--mist); font-size: 17px; margin-bottom: 12px; }
.field:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.sizes { display: flex; align-items: center; gap: 10px; padding: 6px 0 12px; }
.sizes .btn { flex: none; width: 56px; padding: 0; }
.sizes .lv { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.steps { padding-left: 20px; margin: 0 0 8px; color: var(--slate); }
.steps li { margin: 6px 0; }
.steps b { color: var(--ink); }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--tabs-h) + var(--mini-h) + var(--safe-b) + 24px); transform: translate(-50%, 20px); opacity: 0;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px;
  pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.drag-row { display: flex; align-items: center; gap: 4px; }
.drag-row .handle { display: grid; place-items: center; width: 40px; height: 52px; color: var(--dim); touch-action: none; cursor: grab; flex: none; }
.drag-row.lifted { background: var(--mist); border-radius: 12px; position: relative; z-index: 2; }
.drag-row .row { flex: 1; min-width: 0; }

/* ---------- iPad and wider (Joel, 13 Nov: the two-pane "is really broken"): the phone app as one centred column,
   tab bar and player held to the column; the lyrics open full screen exactly as on a phone ---------- */
@media (min-width: 760px) {
  :root { --col: 600px; --col-x: max(0px, calc((100vw - var(--col)) / 2)); }
  .app { grid-template-columns: minmax(0, var(--col)); justify-content: center; background: var(--raise); }
  .lib { box-shadow: -1px 0 0 var(--rule), 1px 0 0 var(--rule); }
  .tabs { left: var(--col-x); right: var(--col-x); }
  .mini { left: calc(var(--col-x) + 8px); right: calc(var(--col-x) + 8px); }
  .upd { left: calc(var(--col-x) + 12px); right: calc(var(--col-x) + 12px); }
  .lyr { padding-left: 40px; padding-right: calc(40px + var(--safe-r)); }
  .st-bot { padding-left: 40px; padding-right: calc(40px + var(--safe-r)); }
  .st-top { padding-left: 24px; }
  .h1 { font-size: 30px; }
}
@media (max-width: 759px) and (orientation: landscape) and (max-height: 500px) {
  :root { --ly-size: 30px; }
  .st-ver { padding-top: 2px; }
  .lyr { padding-top: calc(var(--top-h, 100px) + 6vh); }
  .ctl .ib.tp-play { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation: none !important; } }
.sh-sub { margin: 14px 0 2px; color: var(--slate); font-size: 13px; font-weight: 600; }
.aa-btn:disabled { opacity: .35; }

/* a record's page wears its own colours: cover colour, cover blurred behind (the site's cover band) */
.band { position: relative; isolation: isolate; overflow: hidden; margin: 0 -16px 8px; padding: 6px 16px 4px; background: var(--c); color: #fff; border-radius: 0 0 24px 24px; }
.band-bg { position: absolute; inset: -80px; z-index: -1; background-size: cover; background-position: center; filter: blur(48px) saturate(1.3) brightness(.5); }
.band .back { color: #fff; }
.band .hero p { color: rgba(255,255,255,.75); }
.band .btn { background: rgba(255,255,255,.16); color: #fff; }
.band .btn.primary { background: #fff; color: #0B1A2B; }
.band .btn .fill { background: rgba(255,255,255,.25); }
.band .btn.is-saved { color: #fff; }
.sel-note { max-width: 40ch; font-size: 15px; line-height: 1.45; margin-top: 6px; }
.sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin-bottom: 12px; }
.sel { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; border-radius: 18px; background: var(--c); color: #fff; text-align: left; min-width: 0; }
.sel-art { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; margin-bottom: 6px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); }
.sel-art.tile { font-size: 22px; padding: 10px; }
.sel-t { font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sel-s { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 500; }
.sel-s svg { width: 14px; height: 14px; }

/* ---------- Listen: lyrics for whatever's playing in the room ---------- */
/* Live Listen wears Prompter's branding: black, the orb */
.brand .listen-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 6px; border-radius: 999px;
  background: #000; color: #fff; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.listen-btn img { width: 26px; height: 26px; mix-blend-mode: screen; }
.listen-btn.on { box-shadow: inset 0 0 0 1.5px #7DB8E6; }
/* listening: the play slot shows the orb, and tapping it stops listening */
.ctl .ib.tp-play.ls { background: #000; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.ls-orb { width: 58px; height: 58px; mix-blend-mode: screen; border-radius: 50%; transition: transform .12s; }
.dl-bar { height: 10px; border-radius: 5px; background: var(--mist-2); overflow: hidden; margin: 6px 0 14px; }
.dl-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s; }

/* ---------- plain words on every control (Joel: "write things out") ---------- */
.r-word { display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 32px; padding: 0 9px; border-radius: 999px; flex: none;
  background: var(--mist); color: var(--ink); font-size: 14px; font-weight: 600; }
.r-word svg { width: 16px; height: 16px; margin-left: -3px; }
.r-word.add { background: var(--sky); color: var(--on-sky); }
.row .r-word + .r-word { margin-left: -6px; }
.row { gap: 10px; }
@media (max-width: 759px) { .r-dur { display: none; } }
.hint { display: flex; align-items: center; gap: 4px; color: var(--slate); font-size: 14px; margin: 4px 0 6px; }
.hint svg { width: 16px; height: 16px; }
.pill-demo { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px 2px 6px; border-radius: 999px; background: var(--sky); color: var(--on-sky); font-weight: 600; font-size: 14px; vertical-align: 1px; }
.pill-demo svg { width: 14px; height: 14px; }
/* an empty count is no badge at all: the rules below set display, so this one has to outrank them */
.badge:empty, .mine-n:empty, .tabs .badge:empty, .ctl .badge:empty, .lib-tabs .mine-n:empty { display: none; }
.tabs button { position: relative; }
.tabs .badge { position: absolute; top: 4px; left: calc(50% + 6px); 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; }
.lib-tabs .mine-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }
.ctl .ib { position: relative; }
.ctl .badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: #0B1A2B; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.mini-play { width: auto; flex-direction: column; gap: 0; padding: 0 6px; }
.mini-play .mp-i { display: grid; place-items: center; }
.mini-play .mp-i svg { width: 24px; height: 24px; }
.mp-l { font-size: 11px; font-weight: 600; color: var(--slate); }
.o-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.o-act.done { padding: 0 8px; font-size: 14px; }
.ctl:disabled { opacity: .35; }
.lib-tabs button { padding: 0 8px; }
.search .s-lab { font-weight: 600; color: var(--ink); font-size: 16px; margin-right: -2px; }
.st-ver .seg button { font-size: 14px; padding: 0 8px; }
.st-ver .seg { width: min(420px, 100%); }
.bv-help { text-align: center; font-size: 12px; color: rgba(255,255,255,.7); margin-top: 6px; }
.stage.sun .bv-help { color: rgba(11,26,43,.6); }
.st-ver { flex-direction: column; align-items: center; }

.brand-logo { height: 26px; width: auto; display: block; }
.light-only { display: none; }
:root[data-theme="light"] .light-only { display: block; } :root[data-theme="light"] .dark-only { display: none; }
.r-word.add { white-space: normal; text-align: center; line-height: 1.12; max-width: 74px; height: auto; min-height: 34px; padding: 4px 9px; font-size: 13px; }
.lane-seg { margin: 0 0 12px; }
.lane-seg button { height: 38px; font-size: 15px; }
.install-card { display: grid; grid-template-columns: 56px 1fr; gap: 12px 14px; align-items: center; padding: 16px; margin-bottom: 14px; border-radius: var(--r-panel); background: var(--mist); }
.install-card img { border-radius: 13px; }
.install-card b { display: block; font-size: 18px; letter-spacing: -0.02em; }
.install-card .r-t > span { color: var(--slate); font-size: 14px; white-space: normal; }
.install-card .install-go { grid-column: 1 / -1; flex: none; }
.steps.big { font-size: 17px; padding-left: 22px; }
.steps.big li { margin: 10px 0; color: var(--ink); }
.share-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--mist-2); vertical-align: -8px; margin: 0 2px; }
.share-ico svg { width: 18px; height: 18px; color: var(--link); }
.ios-arrow { display: grid; place-items: center; color: var(--link); margin-top: 4px; }
.ios-arrow svg { width: 30px; height: 30px; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* ---------- browsing redesign (11 Nov): lead, Live Listen, sort and filter ---------- */
.lib-body { --tb-h: 0px; }
.lib-body:has(.tb) { --tb-h: 56px; }
.search .clear { margin-left: auto; }
.search .clear svg { width: 18px; height: 18px; }

/* the newest release, in its own colours */
.lead { margin-bottom: 26px; }
.hero-new { position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 16px; align-items: stretch; padding: 16px; border-radius: 22px; background: var(--c); color: #fff; }
.hn-bg { position: absolute; inset: -60px; z-index: -1; background-size: cover; background-position: center; filter: blur(44px) saturate(1.35) brightness(.55); }
.hn-art-b { flex: none; border-radius: 14px; }
.hn-art { width: 132px; height: 132px; border-radius: 14px; object-fit: cover; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.hn-art.tile { font-size: 18px; padding: 10px; }
.hn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hn-k { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.78); margin-bottom: 4px; }
.hn-title { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hn-sub { font-size: 14px; color: rgba(255,255,255,.78); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-play { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px 0 14px; border-radius: 999px; background: #fff; color: #0B1A2B; font-weight: 700; font-size: 15px; }
.hn-play svg { width: 18px; height: 18px; }

/* Live Listen: the headline feature, in Prompter's black with the orb */
.ll-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; padding: 14px 14px 14px 12px; border-radius: 22px; background: #000; color: #fff; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.ll-orb { width: 72px; height: 72px; margin: -6px -4px -6px -6px; flex: none; mix-blend-mode: screen; }
.ll-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ll-t b { font-size: 19px; letter-spacing: -0.02em; }
.ll-t > span { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.72); }
.ll-go { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.8); }
.ll-go svg { box-sizing: content-box; width: 22px; height: 22px; padding: 11px; border-radius: 50%; background: #fff; color: #000; }
.ll-card.on { box-shadow: inset 0 0 0 2px #7DB8E6; }
.ll-card.on .ll-go svg { background: #7DB8E6; }
.ll-card:active { background: #111; }
.se-ll { max-width: 380px; margin-top: 22px; }

/* section heads and the new-releases shelf */
.row-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.row-h h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.list-h { margin-top: 30px; }
.see { color: var(--link); font-size: 15px; font-weight: 600; padding: 6px 0; }
.shelf { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; }
.shelf::-webkit-scrollbar { display: none; }
.sh-card { flex: none; width: 138px; scroll-snap-align: start; text-align: left; display: flex; flex-direction: column; }
.sh-card img, .sh-card .tile { width: 138px; height: 138px; border-radius: var(--r-card); object-fit: cover; background: var(--mist-2); }
.sh-card .tile { font-size: 15px; padding: 10px; }
.sh-card .c-title { -webkit-line-clamp: 1; }

/* type, then the sticky sort and filter bar */
.lane-seg { margin: 0 0 4px; }
.lane-seg button { flex: 1 1 auto; height: 44px; font-size: 14px; padding: 0 10px; }   /* sized to the words: "Praise & Worship" never touches the edge on a phone */
.tb { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px; height: 56px; margin: 0 -16px; padding: 0 16px;
  overflow-x: auto; scrollbar-width: none; background: var(--paper); }
.tb::-webkit-scrollbar { display: none; }
.tb-b { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 15px; font-weight: 600; }
.tb-b svg { width: 18px; height: 18px; color: var(--link); }
.tb-b.on { background: var(--blue); color: #fff; }
.tb-b.on svg { color: #fff; }
.tb-n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: var(--brand); font-size: 12px; font-weight: 700; }
.tb .chip { height: 38px; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; }
.tb .chip.on { padding-right: 10px; }
.tb .chip svg { width: 16px; height: 16px; }
.tb .chip.reset { background: none; color: var(--link); padding: 0 6px; }
.tb .chip:not(.on):not(.reset) { background: none; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink); }
.count { margin: 2px 0 4px; font-size: 13px; }

/* rows: the title gets the room; marks sit with the subtitle */
.row { min-height: 64px; gap: 12px; }
.thumb { width: 48px; height: 48px; }
.row + .row::before { left: 60px; }
.r-sub { display: flex; align-items: center; gap: 4px; }
.r-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.r-sub svg { width: 14px; height: 14px; flex: none; color: var(--link); }
.r-sub .fav { color: #E5586B; }
.r-word { height: 34px; padding: 0 12px; }
.r-word.add { max-width: none; min-height: 0; height: 34px; padding: 0 12px 0 8px; white-space: nowrap; font-size: 14px; gap: 3px; }
.r-word.add svg { width: 16px; height: 16px; margin: 0; }
.r-word.more { background: none; color: var(--slate); padding: 0 4px 0 6px; margin-left: -4px; }
.row .r-word + .r-word { margin-left: -4px; }
.row.num { min-height: 56px; }
.row.num + .row.num::before { left: 40px; }
.r-no { width: 28px; flex: none; text-align: center; color: var(--slate); font-size: 15px; font-variant-numeric: tabular-nums; }
.row.now .r-no { color: var(--link); font-weight: 700; }
.hero-by { color: #fff !important; font-weight: 600; font-size: 16px !important; }

/* albums: by year, newest first */
.alb-seg { width: min(260px, 100%); margin: 0 0 6px; }
.sec-h.yr { top: 0; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; padding: 18px 0 10px; }
.grid { gap: 18px 14px; }
.card { display: flex; flex-direction: column; }
.card .c-title { margin-top: 8px; }
.c-sub { margin-top: 1px; }
.c-yr { margin-left: auto; }

/* sort and filter sheets */
.opt.pick { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: auto; min-height: 62px; padding: 8px 44px 8px 2px; font-weight: 600; }
.opt.pick small { margin: 0; font-weight: 400; }
.opt.pick + .opt.pick { box-shadow: 0 -1px 0 var(--rule); border-radius: 0; }
.opt.pick.on { color: var(--link); }
.opt.pick.on::after { position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; }
.sheet.fs { display: flex; flex-direction: column; max-height: 88vh; overflow: hidden; padding-bottom: 0; }
.fs-head { display: flex; align-items: center; justify-content: space-between; }
.fs-head .sh-title { padding-bottom: 6px; }
.fs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px; padding: 0 16px 16px; }
.fs-foot { padding: 12px 0 calc(var(--safe-b) + 14px); box-shadow: 0 -1px 0 var(--rule); }
.fs-foot .btn { width: 100%; height: 52px; font-size: 17px; }
.fs-foot .btn:disabled { opacity: .5; }
.fs .sh-sub { margin: 18px 0 8px; font-size: 14px; color: var(--ink); font-weight: 700; }
.ftog { border-radius: 14px; background: var(--mist); overflow: hidden; }
.tog { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; text-align: left; }
.tog + .tog { box-shadow: 0 -1px 0 var(--rule); }
.tg-t { flex: 1; display: flex; flex-direction: column; }
.tg-t b { font-size: 16px; font-weight: 600; }
.tg-t small { font-size: 13px; color: var(--slate); }
.sw { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--mist-2); box-shadow: inset 0 0 0 1px var(--rule); transition: background-color .15s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .15s; }
.tog.on .sw { background: var(--blue); box-shadow: none; }
.tog.on .sw::after { transform: translateX(20px); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fopt { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--mist); font-size: 15px; font-weight: 600; max-width: 100%; }
.fopt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt small { color: var(--slate); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.fopt.on { background: var(--blue); color: #fff; }
.fopt.on small { color: rgba(255,255,255,.8); }

/* save to Home Screen: one quiet line once the lead has had its say */
.install-card { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px 12px 12px 14px; margin: 16px 0 0; border-radius: 18px; }
.install-card img { width: 44px; height: 44px; border-radius: 10px; }
.install-card b { font-size: 16px; }
.install-card .r-t > span { font-size: 13px; line-height: 1.3; }
.install-card { width: 100%; text-align: left; }
.ic-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; }
.ic-go svg { width: 20px; height: 20px; }
.r-title { font-size: 16px; }
.r-sub { font-size: 13.5px; }
.hn-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.hn-play { margin-top: 12px; }
.hn-t { justify-content: flex-end; }
.sub-acts { display: flex; gap: 8px; margin: 0 0 8px; }
.sub-acts .btn { flex: none; }

/* ---------- stage v3 (Joel, 11 Nov: "too many controls, too few lines") ----------
   Same look (cover blurred behind, yellow live line). One slim top row, play and one "Aa" sheet at the bottom,
   the words get the full height and fade out before the bars, and the buttons step back while a song plays. */
.bar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.st-top { padding: calc(var(--safe-t) + 8px) calc(14px + var(--safe-r)) 8px calc(10px + var(--safe-l)); }
.st-row { gap: 10px; }
.st-close { min-width: 52px; }
.st-art { width: 40px; height: 40px; }
.st-title { font-size: 17px; }
.st-bot { padding: 8px calc(20px + var(--safe-r)) calc(var(--safe-b) + 12px) calc(20px + var(--safe-l)); }
.transport { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; max-width: 520px; margin: 0 auto; gap: 8px; }
.transport .ctl:nth-child(3) { margin-top: 0; }
.tp-side.end { justify-self: end; }
#st-more .aa { font-size: 18px; font-weight: 700; }
/* the words: full height, fading out before each bar so nothing reads as cut off */
.lyr { --mt: var(--bar-t, 80px); --mb: var(--bar-b, 110px);
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--mt), #000 calc(var(--mt) + 44px), #000 calc(100% - var(--mb) - 36px), transparent calc(100% - var(--mb) + 4px));
  mask-image: linear-gradient(to bottom, transparent var(--mt), #000 calc(var(--mt) + 44px), #000 calc(100% - var(--mb) - 36px), transparent calc(100% - var(--mb) + 4px)); }
.stage.focus .lyr { --mt: calc(var(--safe-t) + 4px); --mb: calc(var(--safe-b) + 4px); }
/* spacing: tight inside a wrapped lyric, a clear step between lyrics, the same everywhere */
.ln { line-height: 1.06; margin: 0 auto .5em; }
.gap { height: calc(var(--ly-size) * .3); }
.ln.sec { font-size: max(11px, calc(var(--ly-size) * .32)); letter-spacing: .12em; margin: .9em auto .7em; color: rgba(255,255,255,.42); }
.cue { margin: 0 auto .45em; }
.bar, .lyr { transition: opacity .35s; }
/* the version switch and text size, in the "Aa" sheet */
.st-ver-seg { margin: 0 0 4px; }
.st-ver-seg button { font-size: 14px; padding: 0 8px; }
.bv-note { color: var(--slate); font-size: 13px; margin: 4px 0 6px; }
.sizes .lv { font-variant-numeric: tabular-nums; }
.sizes .btn:disabled { opacity: .4; }
/* pinch sizes the words, never the page */
.stage, .lyr { touch-action: pan-y; }

/* Live Listen, nothing caught yet: the stage turns Prompter-black with the big orb in the middle.
   The orb only answers the room's loudness with one eased scale; no glow, no pulsing type. */
.ls-wait { position: absolute; inset: 0; z-index: 5; background: #000; color: #fff; text-align: center; }
.lw-orb { position: absolute; left: 50%; top: var(--orb-y, 42%); width: min(64vw, 320px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: screen; display: none; }
.no-orb .lw-orb { display: block; }
.lw-status { position: absolute; left: 24px; right: 24px; top: calc(var(--orb-y, 42%) + var(--orb-r, 80px) + 48px); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: rgba(255,255,255,.85); }
.no-orb .lw-status { top: calc(var(--orb-y, 42%) + min(32vw, 160px) + 20px); }
.lw-stop { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 28px); transform: translateX(-50%); height: 48px; padding: 0 24px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 16px; font-weight: 600; }
.stage.ls-waiting .stage-in, .stage.ls-waiting .stage-empty, .stage.ls-waiting .st-bg { visibility: hidden; }
.stage.ls-waiting { --stage: #000 !important; }
/* the live orb's canvas: over the stage, under sheets and toasts, never takes a tap */
.orb-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; mix-blend-mode: screen; }
html:not(.no-orb) #tp-play .ib.ls { background: transparent; box-shadow: none; }
html:not(.no-orb) #tp-play .ls-orb { visibility: hidden; }
.ls-orb { transition: transform .35s cubic-bezier(.2,.8,.2,1); }

/* song rows: the title gets the room; Add and More are round icon buttons (labels live in aria-label) */
.row .r-word.add, .row .r-word.more { width: 36px; height: 36px; min-height: 0; max-width: none; padding: 0; margin-left: 0; gap: 0; border-radius: 50%; }
.row .r-word.add svg, .row .r-word.more svg { width: 18px; height: 18px; margin: 0; }
.row .r-word.more { background: none; color: var(--slate); }
.row .r-word + .r-word { margin-left: 2px; }

/* Discover cards: the cover carries the colour; title and count sit under it */
.sel { background: none; padding: 0; color: inherit; }
.sel-art { box-shadow: none; margin-bottom: 8px; }
.sel-s { color: var(--slate); }

/* "Update ready" bar: sits above the player and tabs until people choose */
.upd { position: fixed; z-index: 65; left: 12px; right: 12px; bottom: calc(var(--tabs-h) + var(--mini-h) + var(--safe-b) + 12px); display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--blue); color: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.upd[hidden] { display: none; }
.upd { flex-wrap: wrap; justify-content: flex-end; }
.upd-t { flex: 1 1 100%; display: grid; line-height: 1.25; min-width: 0; margin-bottom: 4px; }
.upd-t b { font-size: 15px; } .upd-t span { font-size: 13px; opacity: .85; }
.upd .btn { flex: none; }
.upd .btn:not(.primary) { background: rgba(255,255,255,.16); color: #fff; }
.upd .btn.primary { background: #fff; color: var(--blue); }

/* ---------- Discover (11 Nov): charts, sung this week, playlists ---------- */
.row-h h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.row-h.big { margin-top: 34px; }
.row-h.big h2 { font-size: 26px; }
.row-sub { color: var(--slate); font-size: 14px; margin: -6px 0 12px; }
.pl-h { margin: 22px 0 10px; }
/* charts: columns of four rows, the next column peeking */
.ch-shelf { gap: 16px; }
.ch-col { flex: none; width: calc(100% - 44px); max-width: 420px; scroll-snap-align: start; display: flex; flex-direction: column; }
.ch-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 6px 0; text-align: left; border-radius: 10px; position: relative; }
.ch-row + .ch-row::before { content: ""; position: absolute; top: 0; left: 92px; right: 0; height: 1px; background: var(--rule); opacity: .7; }
.ch-n { width: 22px; flex: none; text-align: center; font-size: 17px; font-weight: 700; color: var(--slate); font-variant-numeric: tabular-nums; }
.ch-row.now .r-title { color: var(--link); }
.ch-play { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mist); color: var(--ink); }
.ch-play svg { width: 16px; height: 16px; margin-left: 2px; }
.ch-row:active { background: var(--mist); }
.wk .ch-row + .ch-row::before { left: 60px; }
/* playlists: their own cover, the opening songs' artwork, length and one line on what it's for */
.pl-shelf { gap: 12px; }
.pl-card { flex: none; width: min(332px, calc(100vw - 52px)); scroll-snap-align: start; display: flex; gap: 14px; padding: 12px; border-radius: 20px; background: var(--mist); text-align: left; }
.pl-cover { width: 112px; height: 112px; flex: none; border-radius: 12px; object-fit: cover; background: var(--mist-2); }
.pl-cover.tile { font-size: 14px; padding: 8px; }
.pl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-title { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-note { font-size: 13px; line-height: 1.3; 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; }
.pl-peek { display: flex; }
.pl-peek img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 2px var(--mist); }
.pl-peek img + img { margin-left: -7px; }
.pl-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-meta svg { width: 13px; height: 13px; color: var(--link); }
.pl-card:active { background: var(--mist-2); }
.pl-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-cover { width: 104px; height: 104px; }

/* ---------- song page (11 Nov) ---------- */
/* rows: the cover (or track number) plays; the rest of the row opens the song page */
.r-art { position: relative; flex: none; display: block; border-radius: var(--r-thumb); }
.r-pb { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #0B1A2B; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.r-pb svg { width: 12px; height: 12px; margin-left: 1px; }
.r-no { position: relative; display: grid; place-items: center; height: 40px; }
.r-no svg { display: none; width: 16px; height: 16px; color: var(--link); }
.row.num:hover .r-no span, .row.num.now .r-no span { display: none; }
.row.num:hover .r-no svg, .row.num.now .r-no svg { display: block; }
.ch-play { cursor: pointer; }
/* the page */
.sp-hero h2 { font-size: 26px; text-align: center; text-wrap: balance; }
.sp-album { color: #fff; font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; margin: -9px 0; padding: 0 8px; }   /* 44 px tap, same visual line */
.sp-sync { display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.sp-ver { width: min(380px, 100%); margin: 2px auto 0; background: rgba(255,255,255,.14); }
.sp-ver button { color: rgba(255,255,255,.8); font-size: 13px; padding: 0 6px; }
.sp-ver button.on, :root[data-theme="light"] .sp-ver button.on { background: #fff; color: #0B1A2B; box-shadow: none; }
.sp-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; margin-top: 14px; }
.sp-acts button { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; }
.sp-acts .ib { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); }
.sp-acts .ib svg { width: 22px; height: 22px; }
.sp-acts button.on .ib { background: #fff; color: #0B1A2B; }
.sp-body { padding-top: 4px; }
.sp-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #0B1A2B; }
.sp-poster img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); }
.sp-pp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #0B1A2B; }
.sp-pp svg { width: 28px; height: 28px; margin-left: 3px; }
.sp-pl { position: absolute; left: 16px; bottom: 12px; color: #fff; font-weight: 700; font-size: 16px; }
.sp-yt { margin: 8px 0 0; font-size: 13px; }
.sp-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.sp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-lyrics p { font-size: 18px; line-height: 1.5; margin: 0 0 1em; color: var(--ink); }
.sp-big { width: 100%; margin: 4px 0 6px; }
.sp-acts small { display: block; font-weight: 500; opacity: .75; font-size: 11px; }

/* Live Listen card in the orb's colours (Joel, 11 Nov: "it shouldn't be black… the colours of the orb, maybe even moving").
   One slow, eased drift of the orb's blues and its warm rim behind white type; it runs only while the card is on screen. */
.ll-card { position: relative; overflow: hidden; isolation: isolate; background: #0D2460; box-shadow: none; }
.ll-card::before { content: ""; position: absolute; inset: -45%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(20% 34% at 64% 36%, rgba(64,179,255,.85), transparent 70%),
    radial-gradient(18% 34% at 36% 66%, rgba(24,56,199,.95), transparent 70%),
    radial-gradient(12% 22% at 70% 70%, rgba(242,201,76,.55), transparent 70%),
    radial-gradient(22% 40% at 30% 30%, rgba(0,120,180,.9), transparent 72%),
    radial-gradient(20% 34% at 50% 50%, rgba(40,90,230,.55), transparent 70%);
  animation: ll-drift 18s cubic-bezier(.45,0,.55,1) infinite alternate; animation-play-state: paused; }
.ll-card.live::before { animation-play-state: running; }
@keyframes ll-drift { to { transform: translate(5%, -4%) rotate(28deg) scale(1.12); } }
.ll-card .ll-t > span { color: rgba(255,255,255,.86); }
.ll-card .ll-go svg { color: #0F4370; }
.ll-card.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.ll-card:active { background: #0D2460; filter: brightness(.94); }
@media (prefers-reduced-motion: reduce) { .ll-card::before { animation: none; } }

/* ---------- ads (ADSENSE.md §3): quiet, in the flow, a fixed box so nothing jumps ----------
   Each unit is its own stacking context under the bars, sheets, the Update bar and toasts. 32px clear space round each. */
.ad { position: relative; z-index: 0; isolation: isolate; margin: 32px 0; }
.ad-k { display: block; margin: 0 0 6px 2px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ad-box { position: relative; overflow: hidden; border-radius: 14px; background: var(--mist); }
.ad ins.adsbygoogle { display: block; width: 100%; height: 100%; }
.ad-block .ad-box { height: 250px; }
/* in a song list: the height of a couple of rows, inside the list's own rhythm */
.ad-feed { margin: 26px 0 32px; }
.ad-feed .ad-box { height: 100px; }
.ad.gone { overflow: hidden; opacity: 0; margin-top: 0; margin-bottom: 0; transition: height .22s ease, margin .22s ease, opacity .16s; }
/* localhost: a labelled stand-in, as the website shows */
.ad-dev .ad-box { display: grid; place-items: center; 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-l { font-size: 13px; font-weight: 600; color: var(--slate); letter-spacing: .02em; }

/* lyric translations (0043): a language switch under the Lyrics heading, the translated title above the words and a
   quiet label under them; on the lyrics screen the same text fills the sheet. The original song: one more hero button. */
.sp-lang { margin: 0 0 14px; }
.sp-tr-t { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.sp-tr-kind { margin: 4px 0 14px; font-size: 13px; font-weight: 500; color: var(--slate); }
.sp-tr-wait { color: var(--slate); }
.sp-full-row { margin-top: 0; }
.sh-tr .sp-lyrics { margin-top: 12px; }
.sh-tr .sp-lyrics p { font-size: 17px; }
.hn-title.long { font-size: 20px; }
.sh-tr .sh-lang { margin: 4px 0 0; }
.sh-tr .sh-back-en { width: 100%; margin-top: 18px; }
/* wide library (a computer with no song up): the hero's buttons keep a phone's proportions instead of stretching edge to edge */
.hero .actions, .sp-acts { max-width: 560px; }
.sp-lyrics, .sp-tr-t, .sp-tr-kind { max-width: 720px; }
.sp-lyrics .sp-sec { display: inline-block; margin: 2px 0 1px; color: var(--slate); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.thumb.quad { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.thumb.quad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-home { display: block; }

/* ---------- tap targets: 44 px at the least, everywhere (UX test 12 Nov; Joel's rule for phones) ---------- */
.seg button { height: 44px; }
.chip { height: 44px; padding: 0 16px; }
.tb-b { min-height: 44px; }
.search .clear { width: 44px; height: 44px; margin-right: -8px; }
.back { height: 44px; }
.o-act { height: 44px; }
.linkish, .see { min-height: 44px; display: inline-flex; align-items: center; }
.btn.sm { height: 44px; }
.hn-play { height: 44px; }
.brand-home { display: flex; align-items: center; min-height: 44px; }
.brand .listen-btn { height: 44px; }
.fopt { min-height: 44px; }
/* row actions: the + / tick and More are 44 x 44, with room between them */
.r-word { min-width: 44px; height: 44px; }
.r-word.add { min-height: 44px; width: 44px; padding: 0; border-radius: 50%; }
.r-word.add svg, .r-word.more svg { width: 20px; height: 20px; margin: 0; }
.r-word.add.in { background: var(--mist); color: var(--link); }
.row .r-word + .r-word { margin-left: 2px; }
.r-word.more { background: none; }
/* My list: a big grip on the left to drag, Remove on the right, the whole row between them */
.drag-row { gap: 2px; }
.drag-row .handle { width: 48px; height: 60px; margin-left: -8px; touch-action: none; -webkit-user-select: none; user-select: none; }
.drag-row .handle svg { width: 24px; height: 24px; }
.drag-row .r-word[data-drop] { height: 44px; padding: 0 14px; margin-left: 10px; background: var(--mist); color: var(--danger); }
.drag-row.lifted { box-shadow: 0 8px 24px rgba(0,0,0,.28); }
#set-rows.dragging { -webkit-user-select: none; user-select: none; }
/* the stage's language: a bar under the title while a translation is up, and a button beside Play */
.st-lang { display: flex; align-items: center; gap: 12px; margin: 10px auto 0; padding: 6px 6px 6px 16px; max-width: 560px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
.st-lang .sl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.st-lang .sl-t b { font-size: 16px; }
.st-lang .sl-t span { font-size: 12px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-lang .sl-en { flex: none; height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; color: #0B1A2B; font-weight: 700; font-size: 15px; }
.stage.sun .st-lang { background: rgba(11,26,43,.08); color: #0B1A2B; }
.stage.sun .st-lang .sl-en { background: #0B1A2B; color: #fff; }
.stage.focus .st-lang { opacity: 0; pointer-events: none; }
.aa.lg { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.transport .tp-side .ctl { min-width: 72px; }
.big-opt { height: 60px; font-size: 18px; }
.big-opt .aa.lg { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mist); color: var(--link); font-size: 14px; }
/* Live Listen's first screen */
.ls-why { font-size: 17px; line-height: 1.4; margin: 4px 0 8px; text-align: center; }
.ls-size { color: var(--slate); font-size: 14px; text-align: center; margin: 0 0 16px; min-height: 1em; }
/* the song's one version, said plainly where the With/Without switch would be */
.sp-onever { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); }
/* the website, named */
.site-link { display: inline-flex; align-items: center; gap: 10px; color: var(--link); font-weight: 600; text-decoration: none; }
.site-link svg { width: 20px; height: 20px; }
.opt.site-link { color: inherit; font-weight: 400; gap: 14px; }
.site-foot { display: flex; justify-content: center; margin: 28px 0 8px; }
.site-a { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--mist); font-size: 15px; }
.ch-play { width: 44px !important; height: 44px !important; }
.see { min-width: 44px; justify-content: flex-end; }
.tb .chip { height: 44px; }
.row .r-word.add, .row .r-word.more { width: 44px; height: 44px; }
.row .r-word.more { margin-left: -2px; }
.st-lang .sl-t span { white-space: normal; }
/* the space above the first line and below the last is drawn by spacers, not padding: padding taller than the
   screen stretched the lyrics box past the bottom of the stage, so its fade sat off screen and lines ran on under
   the Play button (seen while checking translations, 12 Nov) */
.lyr { padding-top: 0 !important; padding-bottom: 0 !important; }
.lyr::before, .lyr::after { content: ""; display: block; }
.lyr::before { height: calc(var(--top-h, 120px) + 26vh); }
.lyr::after { height: calc(var(--bot-h, 170px) + 40vh); }
.lyr.none::before { height: calc(var(--top-h, 120px) + 4vh); }
@media (max-width: 759px) and (orientation: landscape) and (max-height: 500px) { .lyr::before { height: calc(var(--top-h, 100px) + 6vh); } }
/* words that don't follow the music start near the top, to read from the first line */
.lyr.plain::before { height: calc(var(--top-h, 120px) + 3vh); }
.mini-play { min-width: 48px; }
.linkish { min-width: 44px; }

/* Undo in the toast (UX test 2, 12 Nov): the toast sits above the player bar and only an Undo toast takes taps */
.toast.has-undo { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; pointer-events: auto; }
.toast:not(.on) { pointer-events: none; }
.toast-undo { flex: none; min-width: 72px; height: 44px; padding: 0 16px; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 15px; }
/* the matched lyric line under a search hit, the typed words in bold (as the website's results) */
.r-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--slate); white-space: normal; }
.r-line b { color: var(--ink); font-weight: 700; }
/* stage language (Joel, 13 Nov): ONE control naming the language in full; it opens the list. Then a quiet note. */
.st-lang { flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 0; background: none; border-radius: 0; }
.sl-pick, .lang-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 18px; border-radius: 999px; font-size: 15px; }
.sl-pick { background: rgba(255,255,255,.14); color: #fff; }
.sl-pick .lp-k, .lang-pick .lp-k { opacity: .75; font-weight: 500; }
.sl-pick .lp-v, .lang-pick .lp-v { font-weight: 700; }
.sl-pick svg, .lang-pick svg { width: 18px; height: 18px; }
.lang-pick { padding-left: 14px; background: var(--mist); color: var(--ink); }
.lang-pick svg:first-child { color: var(--link); }
.st-lang .sl-note { font-size: 12.5px; opacity: .8; white-space: nowrap; }
.stage.sun .st-lang { background: none; }
.stage.sun .sl-pick { background: rgba(11,26,43,.08); color: #0B1A2B; }
.lyr.timed .ln.untimed { cursor: default; }
/* the song page's Download names its version; its column is a little wider so that fits in two short lines */
.sp-acts { grid-template-columns: 1fr 1fr 1.5fr 1fr; align-items: start; }
.sp-acts small { min-height: 2.4em; }
.sp-hero .sp-ver { margin: 6px auto 4px; }
.toast { width: max-content; text-align: center; }
/* the drag handle on a phone: the finger holds it without the page scrolling, selecting text or opening a callout */
.drag-row .handle, .drag-row .handle * { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.drag-row .handle svg { pointer-events: none; }
#set-rows .r-sub, #set-rows .r-sub > span { white-space: normal; }

/* ---------- iPad and computer: the list layout (13 Nov, after Stage Tracks: "see how simple it is") ----------
   Flat and dark, nothing decorative. One plain list; PLAY band blue, NEXT band amber; the words flat, the sung line yellow. */
.trk { display: none; }
.app.tracks { --tk-bg: #0B1117; --tk-bar: #121A23; --tk-line: #1C2631; --tk-dim: #7F93A6; --tk-col: clamp(300px, 28vw, 380px); }
.app.tracks .lib { visibility: hidden; }
.app.tracks .tabs, .app.tracks .mini { display: none !important; }
.app.tracks .trk:not([hidden]) { position: fixed; inset: 0; z-index: 41; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--tk-bg); color: #EAF1F7; }
.app.tracks.tk-open .trk { right: auto; width: var(--tk-col); box-shadow: 1px 0 0 var(--tk-line); }
.app.tracks.tk-full .trk { display: none !important; }
/* the words take the right; they are the phone's stage, flattened */
.app.tk-wide .stage { left: var(--tk-col); transform: none; visibility: hidden; transition: none; }   /* the song's own colour and blurred cover, as on the phone (Joel, 13 Nov) */
.app.tk-wide.tk-open .stage { visibility: visible; }
.app.tk-wide.tk-full .stage { left: 0; }
.app.tk-wide #st-top, .app.tk-wide #st-bot, .app.tk-wide .stage-empty { display: none !important; }
.app.tk-wide .lyr { -webkit-mask-image: none; mask-image: none; }
.app.tk-wide .ln { max-width: 26ch; font-weight: 700; letter-spacing: -0.015em; }
.app.tk-wide .lyr.timed .ln { color: rgba(255,255,255,.86); }
.app.tk-wide .lyr.timed .ln.past { color: rgba(255,255,255,.36); }
.app.tk-wide .lyr.timed .ln.cur { color: #FFD84D; }
.app.tk-wide .ln.sec, .app.tk-wide .lyr.timed .ln.sec { color: rgba(255,255,255,.42); }
body:has(.app.tk-wide) .toast { bottom: calc(var(--safe-b) + 150px); }
body:has(.app.tracks) .upd { bottom: calc(var(--safe-b) + 150px); left: auto; right: 16px; width: 420px; }
/* top: Live Listen, the title, language and search */
.tk-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: calc(var(--safe-t) + 10px) calc(16px + var(--safe-r)) 8px calc(16px + var(--safe-l)); background: var(--tk-bar); }
.tk-ll { justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 7px; border-radius: 999px; background: #000; color: #fff; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.tk-ll img { mix-blend-mode: screen; }
.tk-ll.on { box-shadow: inset 0 0 0 1.5px #7DB8E6; }
.tk-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; text-align: center; }
.tk-right { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-search { display: flex; align-items: center; gap: 8px; height: 40px; width: min(320px, 28vw); padding: 0 12px; border-radius: 10px; background: #1C2632; color: var(--tk-dim); }
.tk-search svg { width: 18px; height: 18px; }
.tk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font-size: 16px; }
.tk-search:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.tk-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--link); font-weight: 600; font-size: 15px; white-space: nowrap; }
.tk-pick svg { width: 16px; height: 16px; }
/* filter and sort, always on show */
.tk-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; min-height: 52px; padding: 6px calc(16px + var(--safe-r)) 8px calc(16px + var(--safe-l)); background: var(--tk-bar); border-bottom: 1px solid var(--tk-line); font-size: 14.5px; }
.tk-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: #1C2632; }
.tk-seg button { height: 36px; padding: 0 14px; border-radius: 8px; font-weight: 600; color: #B5C4D2; white-space: nowrap; }
.tk-seg button.on { background: #2C4258; color: #fff; }
.tk-sorts { display: inline-flex; gap: 16px; }
.tk-word { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--tk-dim); font-weight: 600; white-space: nowrap; }
.tk-word svg { width: 18px; height: 18px; }
.tk-word.on { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #2C3A48; font-weight: 600; color: #B5C4D2; }
.tk-chip svg { width: 17px; height: 17px; }
.tk-chip.on { background: #1C4D78; color: #fff; box-shadow: none; }
.tk-count { color: var(--tk-dim); }
.tk-ready { display: inline-flex; align-items: center; gap: 6px; color: #5CC48A; font-weight: 600; }
.tk-ready svg { width: 18px; height: 18px; }
.tk-dl { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; }
.tk-dl svg { width: 18px; height: 18px; } .tk-dl small { opacity: .75; font-weight: 500; } .tk-dl:disabled { opacity: .4; }
/* the list */
.tk-body { position: relative; min-height: 0; display: flex; }
.tk-list { flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0 0 12px; }
.tk-az:not([hidden]) ~ .tk-list, .tk-body:has(.tk-az:not([hidden])) .tk-list { padding-right: 26px; }
.tk-li { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--tk-line); }
.tk-row { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 6px 8px calc(24px + var(--safe-l)); text-align: left; }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-main b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-main small { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-main small.hit { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 500; color: #C7D4E0; }
.tk-main small.hit b { font-size: inherit; color: #FFD84D; display: inline; }
.tk-badge { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #1E2A36; color: #D6E4F0; white-space: nowrap; }
.tk-len { flex: none; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-ok { flex: none; display: grid; place-items: center; width: 22px; color: #5CC48A; }
.tk-ok svg { width: 18px; height: 18px; }
.tk-ok.no { color: #3E4D5C; }
.tk-info { flex: none; display: grid; place-items: center; width: 54px; color: var(--link); }
.tk-info svg { width: 24px; height: 24px; }
.tk-row.off { opacity: .42; }
.tk-li:has(.tk-row.play) { background: #1C4D78; }
.tk-li:has(.tk-row.next) { background: #5A4612; }
.tk-row.play::before, .tk-row.next::before { position: absolute; left: 0; top: 0; bottom: 0; width: 17px; display: grid; place-items: center;
  writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.tk-row.play::before { content: "PLAY"; background: #3A8AC8; color: #fff; }
.tk-row.next::before { content: "NEXT"; background: #FFD84D; color: #1A1400; }
.tk-li:has(.tk-row.play) .tk-main small, .tk-li:has(.tk-row.next) .tk-main small { color: rgba(255,255,255,.75); }
.tk-li:has(.tk-row.play) .tk-info, .tk-li:has(.tk-row.next) .tk-info { color: #fff; }
.tk-grip { flex: none; display: grid; place-items: center; width: 44px; margin-left: calc(10px + var(--safe-l)); color: #4E6072; touch-action: none; cursor: grab; }
.tk-list.mine .tk-row { padding-left: 8px; }
.tk-li.lifted { z-index: 2; background: #1C2632; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
.tk-gh { padding: 20px calc(24px + var(--safe-l)) 6px; color: var(--tk-dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--tk-line); }
.tk-plrow { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 8px calc(18px + var(--safe-r)) 8px calc(24px + var(--safe-l)); text-align: left; }
.tk-plrow small { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; }
.tk-plrow svg.fwd { width: 20px; height: 20px; transform: rotate(180deg); color: #4E6072; }
.tk-empty { padding: 40px 24px; color: var(--tk-dim); font-size: 16px; }
.tk-az:not([hidden]) { position: absolute; right: 2px; top: 6px; bottom: 6px; width: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.tk-az b { font-size: 11px; font-weight: 800; color: var(--link); line-height: 1; }
.tk-az b.no { color: #34414E; }
/* the bar: play, the song, where it is, next */
.tk-bar { display: flex; align-items: stretch; min-height: 78px; background: var(--tk-bar); border-top: 1px solid var(--tk-line); }
.tk-pp { flex: none; display: grid; place-items: center; width: 112px; background: var(--blue); color: #fff; }
.tk-pp svg { width: 34px; height: 34px; }
.tk-pp.on { background: #1C4D78; }
.tk-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 18px; }
.tk-now { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; min-width: 0; }
.tk-now b { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-el { flex: none; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-scrub { display: flex; align-items: center; height: 26px; cursor: pointer; touch-action: none; }
.tk-scrub i { flex: 1; display: block; height: 6px; border-radius: 3px; background: #26323F; overflow: hidden; }
.tk-scrub b { display: block; height: 100%; width: 0; background: #FFD84D; }
.tk-nx { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 88px; color: #CFE0EE; border-left: 1px solid var(--tk-line); font-size: 12px; font-weight: 600; }
.tk-nx svg { width: 26px; height: 26px; }
.tk-nx:disabled { opacity: .3; }
/* off the original key: the value turns blue, so a changed key is never missed; a song that can't change key greys its buttons */
.tk-tabs { display: flex; height: calc(56px + var(--safe-b)); padding-bottom: var(--safe-b); background: #0F161E; border-top: 1px solid var(--tk-line); }
.tk-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tk-dim); font-size: 11.5px; font-weight: 600; }
.tk-tabs button svg { width: 23px; height: 23px; }
.tk-tabs button.on { color: var(--link); }
/* Settings */
.tk-set { max-width: 760px; padding: 6px calc(24px + var(--safe-l)) 40px; }
.tk-set section { padding: 20px 0; border-bottom: 1px solid var(--tk-line); }
.tk-set h3 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.tk-set p { color: #A9B9C8; margin: 0 0 12px; }
.tk-set .tk-note { font-size: 13.5px; color: var(--tk-dim); margin: 10px 0 0; }
.tk-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tk-acts .btn { flex: none; }
.tk-acts .btn small { opacity: .75; font-weight: 500; }
.tk-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; }
.tk-ts { display: inline-flex; align-items: center; gap: 10px; }
.tk-ts button { width: 44px; height: 40px; border-radius: 10px; background: #1C2632; color: #fff; font-size: 22px; font-weight: 700; }
.tk-ts > b { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.tk-sw, .tk-cont { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-align: left; }
.tk-sw i, .tk-cont i { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #26323F; transition: background-color .15s; }
.tk-sw i::after, .tk-cont i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tk-sw.on i, .tk-cont.on i { background: var(--blue); }
.tk-sw.on i::after, .tk-cont.on i::after { transform: translateX(18px); }
/* the words: header (clock, title, elapsed and left, the scrubber) and footer (size, key, version, volume) */
.tk-lh:not([hidden]) { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: block; padding: calc(var(--safe-t) + 6px) calc(16px + var(--safe-r)) 0 16px; background: var(--tk-bar); border-bottom: 1px solid var(--tk-line); }
.tk-lh-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.tk-lh small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tk-clk b, .tk-elp b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-elp { justify-self: end; display: flex; align-items: center; gap: 14px; text-align: right; }
.tk-rem { display: block; font-size: 13px; font-weight: 600; color: var(--tk-dim); font-variant-numeric: tabular-nums; }
.tk-close { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 46vw; padding: 2px 10px; }
.tk-close small { color: var(--tk-dim); }
.tk-close b { font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tk-lnext { font-size: 13px; font-weight: 700; color: #FFD84D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tk-lh .tk-scrub { height: 22px; }
.tk-lf:not([hidden]) { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 10px calc(16px + var(--safe-r)) calc(var(--safe-b) + 10px) 10px; background: var(--tk-bar); border-top: 1px solid var(--tk-line); }
.tk-lf small { display: block; font-size: 11px; color: var(--tk-dim); font-weight: 600; }
.tk-full { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #1C2632; color: #fff; }
.app.tk-full .tk-full svg { transform: rotate(180deg); }
.tk-fpp { display: none; }
.app.tk-full .tk-fpp { display: grid; width: 64px; height: 48px; border-radius: 10px; }
.tk-lf .tk-ts span { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.tk-lf .tk-ts b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tk-ver:not([hidden]) { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tk-ver .seg { padding: 2px; }
.tk-ver .seg button { height: 32px; font-size: 13.5px; padding: 0 12px; }
.tk-lf { flex-wrap: wrap; }
.tk-lf .tk-ver small { order: 2; }
.tk-vol { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 10px; }
.tk-vol > span { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.tk-vol b { font-size: 14px; font-variant-numeric: tabular-nums; }
.tk-vol input { flex: 1; accent-color: var(--blue); height: 28px; }
.tk-cont span { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; }
.tk-orb:not([hidden]) { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tk-orb img { width: 44px; height: 44px; mix-blend-mode: screen; }
html:not(.no-orb) .tk-orb img { visibility: hidden; }
.tk-orb small { font-size: 13px; color: #fff; }
.tk-follow:not([hidden]) { position: absolute; z-index: 6; right: 24px; bottom: calc(var(--bar-b, 80px) + 18px); display: inline-flex; height: 44px; padding: 0 18px; align-items: center; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); }
/* the list beside the words: a narrow column, title and length only */
.app.tk-open .tk-top { grid-template-columns: 1fr; gap: 8px; }
.app.tk-open .tk-title { display: none; }
.app.tk-open .tk-tr { display: none; }
.app.tk-open .tk-right { justify-self: stretch; }
.app.tk-open .tk-search { width: 100%; }
.app.tk-open .tk-ll { position: absolute; right: 16px; top: calc(var(--safe-t) + 10px); width: 40px; padding: 0; justify-content: center; }
.app.tk-open .tk-ll span { display: none; }
.app.tk-open .tk-top { padding-right: 66px; position: relative; }
.app.tk-open .tk-seg, .app.tk-open .tk-sorts, .app.tk-open .tk-chip, .app.tk-open .tk-sub .tk-count, .app.tk-open .tk-az { display: none !important; }
.app.tk-open .tk-sub:empty, .app.tk-open .tk-sub:not(:has(.tk-word, .tk-dl, .tk-ready, .tk-back)) { display: none; }
.app.tk-open .tk-row { padding-left: 24px; gap: 8px; min-height: 56px; }
.app.tk-open .tk-main b { font-size: 17px; }
.app.tk-open .tk-badge, .app.tk-open .tk-ok { display: none; }
.app.tk-open .tk-len { font-size: 16px; }
.app.tk-open .tk-info { width: 44px; }
.app.tk-open .tk-pp { width: 76px; }
.app.tk-open .tk-bar .key-ctl { display: none !important; }
.app.tk-open .tk-mid { padding: 6px 12px; }
.app.tk-open .tk-now b { font-size: 15px; } .app.tk-open .tk-el { font-size: 14px; }
.app.tk-open .tk-nx { width: 64px; }
.app.tk-open .tk-tabs button span { font-size: 10.5px; }
@media (max-width: 900px) { .app.tracks { --tk-col: 290px; } .tk-sorts { gap: 12px; } .tk-seg button { padding: 0 10px; } .tk-vol { min-width: 120px; } }
@media (max-width: 1000px) { .tk-lf { flex-wrap: wrap !important; } .tk-vol > span { min-width: 60px; } }
.tk-vol input { min-width: 0; width: 100%; }
.tk-clk b { white-space: nowrap; }
@media (max-width: 1000px) { .tk-clk b, .tk-elp b, .tk-close b { font-size: 18px; } .tk-lh-row { gap: 8px; } }
.tk-sub:empty { display: none; }
.tk-vol.ls { visibility: hidden; }
.tk-left { justify-self: start; display: flex; align-items: center; gap: 14px; }
.tk-site { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--link); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.tk-site svg { width: 18px; height: 18px; }
.app.tk-open .tk-site { display: none; }
@media (max-width: 900px) { .tk-search { width: 220px; } .tk-left { gap: 8px; } }

/* Key (transpose): always on show; greyed with one line when the browser can't change key */
.key-ctl { flex: none; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.key-ctl button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mist); color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1; }
.key-ctl button:disabled { opacity: .35; cursor: default; }
.key-ctl > span { display: flex; flex-direction: column; align-items: center; min-width: 38px; line-height: 1.1; }
.key-ctl b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.key-ctl small { font-size: 11px; font-weight: 600; color: var(--slate); }
.key-ctl.on b { color: var(--link); }
.key-ctl[data-na]::after { content: attr(data-na); flex-basis: 100%; text-align: center; font-size: 12px; color: var(--slate); }
/* song page: under the version switch */
.sp-key { display: flex; justify-content: center; margin: 10px 0 2px; }
.sp-key .key-ctl button { background: rgba(255,255,255,.16); color: #fff; }
.sp-key .key-ctl small, .sp-key .key-ctl[data-na]::after { color: rgba(255,255,255,.75); }
.sp-key .key-ctl b { color: #fff; } .sp-key .key-ctl.on b { color: #FFD84D; }
/* phone lyrics screen: beside Play, white on the song's colour */
.st-key { justify-content: flex-start; gap: 4px; }
.st-key button { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; }
.st-key small { color: rgba(255,255,255,.8); }
.st-key b { color: #fff; } .st-key.on b { color: #FFD84D; }
.st-key[data-na]::after { color: rgba(255,255,255,.75); font-size: 11px; text-align: left; }
.stage.sun .st-key button { background: rgba(11,26,43,.08); color: #0B1A2B; } .stage.sun .st-key b, .stage.sun .st-key small { color: #0B1A2B; }
/* iPad and computer */
.tk-bar .key-ctl, .tk-lf .key-ctl { padding: 0 10px; }
.tk-bar .key-ctl button, .tk-lf .key-ctl button { width: 40px; height: 40px; border-radius: 10px; background: #1C2632; color: #fff; }
.tk-bar .key-ctl small, .tk-lf .key-ctl small { color: var(--tk-dim); }
.tk-bar .key-ctl.on b, .tk-lf .key-ctl.on b { color: #FFD84D; }
.tk-bar .key-ctl[data-na]::after { display: none; }
.tk-lf .key-ctl[data-na]::after { font-size: 11px; color: var(--tk-dim); }
.tk-lf .tk-cont { display: none; }   /* Continuous lives in Settings; the footer keeps room for the volume */
/* the ShemenMusic logo, top left of every screen (Joel, 13 Nov: "the app has no ShemenMusic logo anywhere") */
.tk-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.tk-logo img { height: 24px; width: auto; display: block; }
.tk-left { gap: 16px; }
.tk-site { font-size: 13.5px; }
.tk-clk { display: flex; align-items: center; gap: 14px; }
.tk-hlogo { height: 16px; width: auto; opacity: .7; }
.app.tk-open .tk-left { justify-self: start; }
.app.tk-open .tk-logo img { height: 20px; }
@media (max-width: 1000px) { .tk-hlogo { display: none; } .app.tracks:not(.tk-open) .tk-title { display: none; } .tk-left { gap: 10px; } .tk-search { width: 200px; } }
.tk-ll span { white-space: nowrap; }
.app.tk-open .tk-sub:has(.tk-seg):not(:has(.tk-back)) { display: none; }
/* each part keeps its own row, whether or not the filter row shows */
.trk .tk-top { grid-row: 1; } .trk .tk-sub { grid-row: 2; } .trk .tk-body { grid-row: 3; } .trk .tk-bar { grid-row: 4; } .trk .tk-tabs { grid-row: 5; }
/* the one quiet install line (Joel, 13 Nov: no install banners inside the app) */
.inst-line { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 8px; color: var(--link); font-weight: 600; font-size: 15px; }
.inst-line svg { width: 18px; height: 18px; }
.tk-set .tk-inst { padding: 8px 0; }
/* ---------- Playlists (13 Nov: "shouldn't be so boring … people will be excited to use it") ----------
   As the website's Discover: a banner per group (real photo, the colour panel with its name), then big covers to swipe. */
.pz-grp { list-style: none; padding: 26px calc(24px + var(--safe-r)) 4px calc(24px + var(--safe-l)); }
.pz-grp:first-child { padding-top: 18px; }
.pz-bn { position: relative; overflow: hidden; isolation: isolate; height: clamp(130px, 17vw, 190px); border-radius: 18px; background: var(--c); color: #fff; }
.pz-ph { position: absolute; top: 0; right: 0; width: 62%; height: 100%; background-size: cover; z-index: -1; }
.pz-ph + .pz-bn-in { width: 38%; }
.pz-bn-in { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: clamp(16px, 2.2vw, 28px); }
.pz-bn h2 { font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pz-bn p { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.88); }
.pz-newb { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: 8px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; color: #0B1A2B; font-weight: 700; font-size: 15px; }
.pz-newb svg { width: 18px; height: 18px; }
.pz-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.pz-row::-webkit-scrollbar { display: none; }
.pz-card { scroll-snap-align: start; display: grid; gap: 3px; align-content: start; min-width: 0; text-align: left; color: inherit; }
.pz-cover { width: 100%; aspect-ratio: 1; height: auto; border-radius: 14px; margin-bottom: 6px; object-fit: cover; background: #1C2632; }
.pz-cover.tile { display: grid; place-items: center; padding: 12px; font-weight: 800; text-align: center; }
.pz-t { font-size: 16px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pz-m { font-size: 13.5px; color: var(--tk-dim, var(--slate)); }
.pz-card:active .pz-cover { transform: scale(.98); }
@media (max-width: 1000px) { .pz-row { grid-auto-columns: calc((100% - 2 * 16px) / 3.3); } }
/* a playlist's own cover: four song covers, or its name big on its colour */
.plc { display: block; position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 14px; }
.plc.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: #1C2632; }
.plc.mosaic img, .plc.mosaic .tile { width: 100%; height: 100%; object-fit: cover; display: block; }
.plc.type { display: flex; align-items: flex-end; padding: 12% 11%; background: var(--c); color: #fff; }
.plc.type b { font-size: clamp(18px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.plc.new { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 2px #2C3A48; color: var(--link); }
.plc.new svg { width: 40px; height: 40px; }
.plc.pl-hero { width: min(220px, 60vw); margin: 0 auto 14px; }
.plc.pl-hero.type b { font-size: 30px; }
.hero .plc.pl-hero { margin: 4px 0 14px; }
.plc.pl-mini { width: 44px; flex: none; border-radius: 8px; }
.plc.pl-mini.type { padding: 5px; } .plc.pl-mini.type b { font-size: 9px; -webkit-line-clamp: 3; }
.pl-opt { height: auto; min-height: 60px; }
.pl-opt > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.pl-opt small { margin-left: 0 !important; font-size: 13.5px; }
.tk-plact { display: inline-flex; gap: 16px; margin-left: auto; }
.tk-word.danger { color: var(--danger); }
/* phone: Your playlists as covers to swipe */
.pz-row.ph { grid-auto-columns: 42%; margin: 4px -16px 12px; padding: 0 16px 4px; scroll-padding: 0 16px; }
.pz-row.ph .pz-m { color: var(--slate); }
.pz-row.ph .plc.new { box-shadow: inset 0 0 0 2px var(--rule); }

/* ---------- one app at every size (13 Nov): Discover · Songs · Playlists · Settings everywhere ---------- */
.app.tracks.stage-open .stage { z-index: 45; }
.app.tracks #lib-body { flex: 1; min-width: 0; padding: 0 calc(16px + var(--safe-r)) calc(var(--safe-b) + 28px) calc(16px + var(--safe-l)); background: var(--tk-bg); }
.app.tk-wide #lib-body { padding-left: calc(24px + var(--safe-l)); padding-right: calc(24px + var(--safe-r)); }
.app.tracks:not(.tk-lib) #lib-body { display: none; }
.app.tracks.tk-lib .tk-list, .app.tracks.tk-lib .tk-az { display: none !important; }
.app.tracks #lib-body > .h1 { display: none; }
.app.tracks #lib-body .band { margin-left: -16px; margin-right: -16px; }
.app.tk-wide #lib-body .band { margin-left: -24px; margin-right: -24px; }
.tk-words { display: grid; gap: 0; }
.tk-wh { font-size: 17px; margin-bottom: 4px; }
.tk-modes button { min-width: 74px; }
/* phones: the same frame, stacked */
.app.tracks:not(.tk-wide) .tk-top { grid-template-columns: 1fr auto; row-gap: 8px; padding: calc(var(--safe-t) + 6px) calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l)); }
.app.tracks:not(.tk-wide) .tk-title { display: none; }
.app.tracks:not(.tk-wide) .tk-left { flex-wrap: wrap; row-gap: 0; }
.app.tracks:not(.tk-wide) .tk-site { order: -1; flex-basis: 100%; min-height: 30px; }
.app.tracks:not(.tk-wide) .tk-right { grid-column: 1 / -1; justify-self: stretch; }
.app.tracks:not(.tk-wide) .tk-right:has(.tk-tr:empty) .tk-search, .app.tracks:not(.tk-wide) .tk-search { width: 100%; }
.app.tracks:not(.tk-wide) .tk-ll { position: absolute; right: calc(14px + var(--safe-r)); top: calc(var(--safe-t) + 36px); }
.app.tracks:not(.tk-wide) .tk-top { position: relative; }
.app.tracks:not(.tk-wide) .tk-sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px 14px; padding: 6px 14px 8px; }
.app.tracks:not(.tk-wide) .tk-sub::-webkit-scrollbar { display: none; }
.app.tracks:not(.tk-wide) .tk-sub > * { flex: none; }
.app.tracks:not(.tk-wide) .tk-row { padding-left: 20px; gap: 8px; min-height: 58px; }
.app.tracks:not(.tk-wide) .tk-main b { font-size: 17px; }
.app.tracks:not(.tk-wide) .tk-len { font-size: 15px; }
.app.tracks:not(.tk-wide) .tk-info { width: 44px; }
.app.tracks:not(.tk-wide) .tk-badge { font-size: 10.5px; padding: 2px 6px; }
.app.tracks:not(.tk-wide) .tk-bar { min-height: 64px; }
.app.tracks:not(.tk-wide) .tk-pp { width: 68px; }
.app.tracks:not(.tk-wide) .tk-pp svg { width: 28px; height: 28px; }
.app.tracks:not(.tk-wide) .tk-bar .key-ctl { display: none !important; }
.app.tracks:not(.tk-wide) .tk-mid { padding: 6px 12px; }
.app.tracks:not(.tk-wide) .tk-now b { font-size: 16px; } .app.tracks:not(.tk-wide) .tk-el { font-size: 14px; }
.app.tracks:not(.tk-wide) .tk-nx { width: 60px; }
.app.tracks:not(.tk-wide) .pz-grp { padding-left: 14px; padding-right: 14px; }
.app.tracks:not(.tk-wide) .pz-bn { height: 120px; }
.app.tracks:not(.tk-wide) .pz-bn h2 { font-size: 24px; }
.app.tracks:not(.tk-wide) .pz-bn p { font-size: 13px; }
.app.tracks:not(.tk-wide) .pz-row { grid-auto-columns: 42%; }
.app.tracks:not(.tk-wide) .tk-plact { margin-left: 0; }
body:has(.app.tracks) .toast { bottom: calc(var(--safe-b) + 140px); }
/* Songs on a phone: the switches in rows, sort always in view (Joel, 13 Nov: "I'm not seeing the rich sort by") */
.tk-sortpick { display: none; align-items: center; gap: 5px; min-height: 40px; color: #B5C4D2; font-weight: 600; white-space: nowrap; }
.tk-sortpick b { color: #fff; } .tk-sortpick svg { width: 16px; height: 16px; color: var(--link); }
.tk-seg .sh { display: none; }
@media (max-width: 600px) {
  .app.tracks:not(.tk-wide) .tk-sub { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
  .app.tracks:not(.tk-wide) .tk-sub > .tk-seg { flex: 1 1 100%; display: flex; }
  .app.tracks:not(.tk-wide) .tk-sub > .tk-seg button { flex: 1; padding: 0 6px; }
  .app.tracks:not(.tk-wide) .tk-sorts, .app.tracks:not(.tk-wide) .tk-sub .tk-chip { display: none; }
  .app.tracks:not(.tk-wide) .tk-sortpick { display: inline-flex; }
}
@media (max-width: 390px) { .tk-seg .lg { display: none; } .tk-seg .sh { display: inline; } }
/* getting every song offline: one calm card at the top of Discover and Settings */
.auto-slot:empty { display: none; }
.auto-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; margin: 12px 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--rule); }
.auto-card b { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.auto-card b svg { width: 18px; height: 18px; color: #5CC48A; }
.auto-card span { grid-column: 1; font-size: 14px; color: var(--slate); font-variant-numeric: tabular-nums; }
.auto-card .btn { grid-column: 2; grid-row: 1 / span 3; flex: none; }
.auto-card .auto-bar { grid-column: 1; display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--mist-2); overflow: hidden; }
.auto-card .auto-bar u { display: block; height: 100%; background: var(--link); transition: width .4s; }
.auto-card.ok { grid-template-columns: 1fr; }
/* the progress line shows how much of a streamed song has arrived */
.tk-scrub i { position: relative; }
.tk-scrub u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.22); }
.tk-scrub b { position: relative; }

/* the way back from every drilled-in list, at every width, with or without the words open */
.tk-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-right: 10px; color: var(--link); font-weight: 700; font-size: 16px; white-space: nowrap; flex: none; }
.tk-back svg { width: 22px; height: 22px; }
.app.tk-wide .tk-lh:not([hidden]), .app.tk-wide .tk-lf:not([hidden]) { background: color-mix(in srgb, var(--tk-bar) 82%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
/* phones: logo left, Live Listen right on one row, search under them */
.app.tracks:not(.tk-wide) .tk-left { grid-column: 1 / -1; width: 100%; }
.app.tracks:not(.tk-wide) .tk-ll { position: static; margin-left: auto; }
@media (max-width: 600px) { .auto-card:has([data-auto="start"]) { grid-template-columns: 1fr; } .auto-card:has([data-auto="start"]) .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } }
.auto-card .btn span { color: inherit; font-size: inherit; grid-column: auto; }

/* iOS 26 Home Screen app: stretch every full-screen layer to the bottom of the glass (--pwa-gap set in app.js) */
:is(.app, .stage, .sheet-wrap, .app.tracks .trk:not([hidden])) { bottom: calc(-1 * var(--pwa-gap, 0px)); }
.tabs { bottom: calc(-1 * var(--pwa-gap, 0px)); }
.orb-cv { height: calc(100% + var(--pwa-gap, 0px)); }
/* the progress line is a scrubber: a thicker line with a handle, so it reads as something to drag (Joel, 13 Nov) */
.tk-scrub { height: 32px; }
.tk-scrub i { position: relative; height: 6px; overflow: visible; }
.tk-scrub b { position: relative; border-radius: 3px; }
.tk-scrub b::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
/* the one-time offline setup: full screen, one clear choice, then the download as a setup step */
.setup { position: fixed; top: 0; left: 0; right: 0; bottom: calc(-1 * var(--pwa-gap, 0px)); z-index: 90; display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(var(--safe-t) + 22px) calc(24px + var(--safe-r)) calc(var(--safe-b) + 24px) calc(24px + var(--safe-l)); background: #0B1117; color: #EAF1F7; }
.su-logo { height: 26px; width: auto; align-self: flex-start; }
.su-in { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 0; }
.su-in h1 { margin: 0 0 4px; font-size: clamp(30px, 8.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.su-in p { margin: 0; font-size: 18px; line-height: 1.45; color: #C9D6E2; }
.su-in p b { color: #fff; }
.su-dim { color: #8FA3B6 !important; font-size: 16px !important; }
.su-small { font-size: 14px !important; text-align: center; }
.su-wifi { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 17px; }
.su-wifi input { width: 24px; height: 24px; accent-color: #2F6BFF; }
.su-go { flex: none; height: 56px; width: 100%; min-height: 56px; margin-top: 8px; font-size: 18px; border-radius: 16px; justify-content: center; }
.su-no { flex: none; width: 100%; min-height: 52px; border-radius: 16px; border: 1px solid #2A3644; color: #EAF1F7; font-size: 16px; font-weight: 600; }
.su-pct { font-size: 64px !important; font-weight: 800; color: #fff !important; letter-spacing: -0.04em; line-height: 1 !important; }
.su-bar { display: block; height: 10px; border-radius: 5px; background: #1C2632; overflow: hidden; }
.su-bar u { display: block; height: 100%; background: #FFD84D; transition: width .4s; }
.su-warn { padding: 14px 16px; border-radius: 14px; background: #1A2430; color: #fff !important; font-size: 16px !important; }
/* phones: the lyrics language lives on the lyrics screen; in the header it pushed the search off the screen (13 Nov) */
.app.tracks:not(.tk-wide) .tk-tr { display: none; }
/* first open on a slow connection: the logo and what is happening, never a blank screen */
.boot { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: #0B1117; color: #C9D6E2; text-align: center; font-size: 17px; }
.boot p { margin: 0; max-width: 320px; line-height: 1.45; }
.boot small { color: #8FA3B6; font-size: 14px; }
.boot .btn { min-height: 48px; padding: 0 24px; }