/* 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.dl2 { height: auto; min-height: 48px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; white-space: normal; text-align: left; }
.btn.dl2 span small { display: block; font-size: 12px; font-weight: 500; opacity: .75; }
.lv-seg { width: 100%; max-width: 560px; margin-top: 12px; } .band .lv-seg { background: rgba(255,255,255,.12); } .band .lv-seg button { color: rgba(255,255,255,.8); } .band .lv-seg button.on { background: #fff; color: #0B1A2B; }
.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; }

/* 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:not([data-state="filled"]):not([data-state="dev"]) { height: 0; margin: 0; overflow: hidden; visibility: hidden; }
.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; }
.tk-seg button, .tk-word, .tk-chip, .tk-pick, .tk-sortpick, .pz-newb, .tk-site, .tk-ts button { min-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; }
.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 input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.tk-qx { flex: none; display: grid; place-items: center; width: 44px; height: 40px; margin-right: -12px; color: #B5C4D2; }
.tk-qx[hidden] { display: none; } .tk-qx svg { width: 18px; height: 18px; }
.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: 44px; 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: 2px; gap: 2px; border-radius: 12px; background: #1C2632; }
.tk-seg button { height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 600; color: #B5C4D2; white-space: nowrap; line-height: 1.15; }
.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: 44px; 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: 44px; 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: 8px; min-height: 48px; padding: 4px 18px 4px 14px; border-radius: 999px; background: #1C2632; color: #fff; font-weight: 700; text-align: left; line-height: 1.2; }
.tk-dl svg { flex: none; width: 18px; height: 18px; } .tk-dl small { display: block; opacity: .75; font-weight: 500; font-size: 12.5px; } .tk-dl:disabled { opacity: .4; }
/* a playlist's own page: its name, one line about it, Play first */
.tk-pltitle { flex: 1 1 100%; margin: 2px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.tk-plinfo { flex: 1 1 100%; margin: 0; color: var(--tk-dim); white-space: normal; }
.tk-plhint { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; } .tk-plhint svg { width: 16px; height: 16px; }
.tk-placts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tk-plplay { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px 0 18px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 16px; }
.tk-plplay svg { width: 20px; height: 20px; }
.tk-ready small { display: block; font-weight: 500; font-size: 12.5px; color: var(--tk-dim); }
.tk-lver { flex: 1 1 100%; display: flex; max-width: 460px; } .tk-lver button { flex: 1; padding: 0 8px; }
.tk-sub:has(.tk-pltitle) { flex-wrap: wrap !important; overflow: visible !important; align-items: center; gap: 8px 16px; }
/* 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: 44px; }
.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; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.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; min-width: 0; 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 { flex: none; 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: 0; top: 6px; bottom: 6px; width: 44px; 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 { width: 100%; text-align: center; font-size: 13px; 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: 44px; 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: min(52vw, 560px); min-height: 44px; padding: 2px 10px; }
.tk-close small { color: var(--tk-dim); }
.tk-close b { font-size: 21px; font-weight: 700; line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.tk-close small { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.tk-close small svg { width: 13px; height: 13px; }
.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:not(.orb-live) { 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; grid-template-columns: auto minmax(0, 1fr) auto; }
  /* the title gets the middle; the language sits under the time (QA, 13 Nov: "God Did Not ..." with room to spare) */
  .tk-elp { flex-direction: column-reverse; align-items: flex-end; gap: 0; } .tk-elp .tk-pick { min-height: 32px; font-size: 14px; } .tk-close { max-width: none; } }
.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-left { flex-wrap: wrap; row-gap: 0; }
.app.tk-open .tk-site { order: -1; flex-basis: 100%; margin: -6px 0 -4px; }
.app.tk-open .tk-top:has(.tk-site) .tk-ll { top: calc(var(--safe-t) + 50px); }
@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: 44px; height: 44px; 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: 44px; height: 44px; 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; }
.tk-body { container: tkb / inline-size; }
.pz-bn { position: relative; overflow: hidden; isolation: isolate; height: clamp(130px, 17cqw, 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(14px, 2.2cqw, 28px); }
.pz-bn h2 { font-size: clamp(24px, 3.2cqw, 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: 44px; 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-bn:has(.pz-newb) { height: auto; min-height: 120px; }
.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); }
@container tkb (max-width: 1000px) { .pz-row { grid-auto-columns: calc((100% - 2 * 16px) / 3.3); } }
@container tkb (max-width: 560px) {
  .pz-grp { padding-left: 14px; padding-right: 14px; }
  .pz-bn { height: 120px; } .pz-bn h2 { font-size: 24px; } .pz-bn p { font-size: 13px; }
  .pz-row { grid-auto-columns: 42%; }
}
/* 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(16px, 2.2cqw, 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.tk-wide.tk-open #lib-body { padding-left: 16px; padding-right: 16px; }
.app.tk-wide.tk-open #lib-body .band { margin-left: -16px; margin-right: -16px; }
.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: 44px; margin: -6px 0 -4px; }
.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-sub > :is(.tk-pltitle, .tk-plinfo, .tk-lver) { flex: 1 1 100%; }
.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) .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: 44px; color: #B5C4D2; font-weight: 600; white-space: nowrap; }
.tk-sortpick b { color: #fff; } .tk-sortpick svg { width: 16px; height: 16px; color: var(--link); }
@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; }
}
/* "Our instrumentals" in full, on two lines where it has to (QA, 13 Nov: never "Ours") */
@media (max-width: 600px) { .app.tracks:not(.tk-wide) .tk-lanes button { white-space: normal; font-size: 14px; } }
/* 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; }
/* a phone on its side (844 x 390): one header row, one row of switches with the sort in it, the player and the tabs side
   by side, so the list keeps most of the screen (QA, 13 Nov: one song row fitted) */
@media (orientation: landscape) and (max-height: 500px) {
  .app.tracks:not(.tk-wide) .trk:not([hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
  .app.tracks:not(.tk-wide) .trk .tk-top, .app.tracks:not(.tk-wide) .trk .tk-sub, .app.tracks:not(.tk-wide) .trk .tk-body { grid-column: 1 / -1; }
  .app.tracks:not(.tk-wide) .trk .tk-bar { grid-column: 1; grid-row: 4; min-height: 56px; }
  .app.tracks:not(.tk-wide) .trk .tk-tabs { grid-column: 2; grid-row: 4; height: auto; width: min(340px, 40vw); border-left: 1px solid var(--tk-line); }
  .app.tracks:not(.tk-wide) .tk-top { grid-template-columns: auto minmax(0, 1fr); padding-top: calc(var(--safe-t) + 4px); padding-bottom: 4px; }
  .app.tracks:not(.tk-wide) .tk-left { grid-column: 1; width: auto; flex-wrap: nowrap; }
  .app.tracks:not(.tk-wide) .tk-site { order: 0; flex-basis: auto; margin: 0; }
  .app.tracks:not(.tk-wide) .tk-ll { margin-left: 0; }
  .app.tracks:not(.tk-wide) .tk-right { grid-column: 2; }
  .app.tracks:not(.tk-wide) .tk-sub { flex-wrap: nowrap; overflow-x: auto; padding-top: 2px; padding-bottom: 4px; min-height: 0; }
  .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; order: 1; }
  .app.tracks:not(.tk-wide) .tk-lanes { order: 2; }
  .app.tracks:not(.tk-wide) .tk-seg button { padding: 0 10px; }
  .app.tracks:not(.tk-wide) .tk-row { min-height: 52px; }
  .tk-pltitle { font-size: 22px; }
  .app.tracks:not(.tk-wide) .tk-sub > .tk-pltitle { flex: 0 1 auto; }
  body:has(.app.tracks) .toast { bottom: calc(var(--safe-b) + 70px); }
}
/* Discover, albums and Settings: laid out for the column they're in, beside the words too (QA, 13 Nov) */
#lib-body { container: lib / inline-size; }
@container lib (max-width: 460px) {
  .auto-card { grid-template-columns: 1fr; } .auto-card .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .tk-line { flex-wrap: wrap; row-gap: 0; padding: 4px 0; } .tk-line > :first-child { flex: 1 1 auto; min-width: 0; } .tk-line > :last-child { flex: none; white-space: nowrap; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-card { width: calc(100cqw - 20px); }
  .hero-art { width: min(240px, 64cqw); }
}
@container lib (max-width: 380px) {
  .hero-new { flex-direction: column; } .hn-art { width: 140px; height: 140px; }
  .ll-orb { width: 52px; height: 52px; } .ll-t b { font-size: 17px; } .ll-t > span { font-size: 13.5px; }
  .status .dot { display: none; }
  .sp-acts { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .meter-l { flex-wrap: wrap; gap: 2px 12px; }
}
@media (max-width: 1000px) { .app.tracks:not(.tk-open) .tk-tr { display: none; } }   /* the lyrics' own header has the language */

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

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

/* Settings › Language (13 Nov 2026): the website's four languages by their own names, one tap each. The app's words
   and the lyrics follow it (sm-trlang, shared with the website) */
.tk-langs { display: grid; gap: 4px; }
.tk-langs .tk-lp { margin: 0 0 10px; color: var(--slate); font-size: 14px; line-height: 1.4; }
.tk-lgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tk-lgrid button { min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--mist-2); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font-size: 16px; font-weight: 600; text-align: center; }
.tk-lgrid button.on { background: var(--blue); box-shadow: none; color: #fff; }
@media (min-width: 560px) { .tk-lgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* French, Portuguese and Spanish run longer (13 Nov 2026): a list card's count and length wrap instead of being cut,
   and on the lyrics screen the Key control keeps − / label / + on one line ("Tonalité"), the play button just off centre */
.pl-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.st-key:not([data-na]) { flex-wrap: nowrap; }
.stage .transport { grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); }
/* the instrumentals group picker (All + the four groups, 13 Nov 2026): one control like Sort; a long name ends in "…" */
.lane-seg { display: flex; margin: 4px 0 8px; }
.lane-pick { min-height: 44px; height: auto; max-width: 100%; }
.lane-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-pick svg:last-child { width: 14px; height: 14px; color: var(--slate); }
.tk-sub .lane-pick { background: #1C2632; color: #fff; }
.tk-ll { min-height: 44px; }   /* the header Live Listen button: a full 44px target */

/* Now Playing: a song without words (Joel, 13 Nov 2026: "ppl shouldn't feel like 'hey where are the lyrics'").
   The same stage, colour and blurred cover as the lyrics; the cover big and crisp, the title huge, then what a musician
   needs: version, tempo, length, Key and the clock. Nothing moves but the clock and the scrubber. */
.lyr.none { display: flex; flex-direction: column; container-type: inline-size; }
.lyr.none::before { flex: none; height: calc(var(--top-h, 120px) + 2vh) !important; }
.lyr.none::after { flex: none; height: calc(var(--bot-h, 170px) + 2vh) !important; }
.np { margin: auto; width: min(100%, 560px); padding: 0 24px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.np-art img, .np-art .tile { display: block; width: min(300px, 66vw, 33vh); aspect-ratio: 1; border-radius: 14px; object-fit: cover; box-shadow: 0 34px 80px -30px rgba(0,0,0,.55); }
.np-art .tile { display: grid; place-items: center; font-size: 30px; font-weight: 800; padding: 24px; background: rgba(255,255,255,.12); }
.np-info { width: 100%; min-width: 0; }
.np-k { margin: 22px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.np-t { margin: 0; font-size: clamp(32px, 9cqi, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.np-a { margin: 10px 0 0; font-size: 18px; font-weight: 600; color: rgba(255,255,255,.78); }
.np-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 20px 0 0; }
.np-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.np-facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.np-clock { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; font-variant-numeric: tabular-nums; }
.np-el { font-size: 36px; font-weight: 800; letter-spacing: -.01em; }
.np-rem { font-size: 20px; font-weight: 700; color: rgba(255,255,255,.62); }
.np-scrub { height: 30px; }
.np-scrub i { background: rgba(255,255,255,.2); }
@container (min-width: 720px) {
  .np { flex-direction: row; align-items: center; gap: clamp(32px, 6cqi, 72px); width: min(100%, 1040px); text-align: left; }
  .np-art img, .np-art .tile { width: min(400px, 40cqi, 58vh); }
  .np-info { flex: 1; }
  .np-k { margin-top: 0; }
  .np-t { font-size: clamp(40px, 5.6cqi, 76px); }
  .np-facts { justify-content: flex-start; }
}
.stage.sun .np { color: #0B1A2B; }
.stage.sun .np-k, .stage.sun .np-a, .stage.sun .np-facts dt, .stage.sun .np-rem { color: rgba(11,26,43,.62); }
.stage.sun .np-scrub i { background: rgba(11,26,43,.1); }
/* the iPad / computer lyrics panel already has the clock and the scrubber in its header: no second one */
.app.tk-open .np-clock, .app.tk-open .np-scrub { display: none; }
.tk-lbpm { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.tk-lbpm[hidden] { display: none; }
/* iPhone Safari: overflow+radius doesn't clip the turning lights inside the orb, so it showed too big; clip it to a circle (Joel's phone, 13 Nov 2026) */
.orb-live { clip-path: circle(50% at 50% 50%); -webkit-mask-image: -webkit-radial-gradient(white, black); width: 26px; height: 26px; min-width: 26px; max-width: 26px; flex: 0 0 26px; }
/* set lists: By tempo / Original order (Joel, 13 Nov 2026); 44px targets */
.set-ord { margin-top: 14px; }
.set-ord button { min-height: 44px; }
.tk-ord { margin-left: 8px; }

/* Download in the shifted key (13 Nov 2026): the button under the Key control on a song's page (only when the song is
   in another key), and the bar that says "Preparing your download in A… 40%" (transpose/keydl.js builds it). */
.sp-kdl-row { justify-content: center; margin-top: 4px; }
.sp-kdl[hidden], .opt[data-kdl][hidden] { display: none; }
.sp-kdl { background: rgba(255,255,255,.16); color: #fff; }
.sp-kdl { height: auto; min-height: 48px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; column-gap: 8px; row-gap: 0; line-height: 1.2; }
.sp-kdl small { flex-basis: 100%; text-align: center; font-size: 12px; opacity: .75; font-weight: 500; }
.kdl { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + var(--mini-h) + var(--safe-b) + 12px); transform: translateX(-50%); z-index: 90; width: min(460px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); }
.kdl-t { margin: 0 0 10px; font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.kdl-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--paper) 22%, transparent); overflow: hidden; }
.kdl-bar i { display: block; height: 100%; width: 0; background: #FFD84D; transition: width .25s linear; }
.kdl.err .kdl-bar { display: none; }
.kdl-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.kdl-b { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: 600 15px/1 var(--font); background: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--paper); cursor: pointer; }
.kdl-b.kdl-go { background: #FFD84D; color: #0B1A2B; }

/* search beyond songs (13 Nov 2026): set lists, artists, albums and screens above the songs (app.js tkSiteRows) */
.tk-sh { padding: 16px calc(18px + var(--safe-r)) 6px calc(24px + var(--safe-l)); color: var(--tk-dim); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--tk-line); }
.tk-sh.tk-try { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }
.tk-x .tk-xpic { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--tk-line); color: var(--tk-dim); font-weight: 800; font-size: 19px; }
.tk-x .tk-xpic.round { border-radius: 50%; }
.tk-x .tk-xpic svg { width: 22px; height: 22px; }
.key-ctl.tk-flash { animation: tk-flash 1.2s ease-out 2; }
@keyframes tk-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 216, 77, .9); } 100% { box-shadow: 0 0 0 14px rgba(255, 216, 77, 0); } }

/* ---------- Stage display (computers): the words on a second screen; stagedisplay.js, stage.html ---------- */
.tk-sd { justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; margin-left: 8px; border-radius: 999px; background: #1C2632; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
.tk-sd svg { width: 20px; height: 20px; fill: currentColor; }
.tk-sd.on { background: #FFD84D; color: #0B1117; }
.tk-sd[hidden] { display: none; }
.app.tk-open .tk-sd { position: absolute; right: 64px; top: calc(var(--safe-t) + 10px); width: 40px; padding: 0; justify-content: center; margin: 0; z-index: 7; }
.app.tk-open .tk-sd span { display: none; }
.app.tk-open .tk-top:has(.tk-site) .tk-sd { top: calc(var(--safe-t) + 50px); }
.sd-strip:not([hidden]) { display: flex; align-items: center; gap: 14px; padding: 10px 0 12px; border-top: 1px solid var(--tk-line); }
.sd-pv { flex: 0 0 auto; width: 160px; height: 90px; border-radius: 8px; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); position: relative; }
.sd-pv iframe { position: absolute; left: 0; top: 0; width: 960px; height: 540px; border: 0; transform: scale(calc(1 / 6)); transform-origin: 0 0; pointer-events: none; }
.sd-ctl { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sd-st { display: flex; align-items: center; gap: 9px; margin-right: 6px; min-width: 0; max-width: 260px; }
.sd-st > span { min-width: 0; }
.sd-st b { display: block; font-size: 15px; font-weight: 700; }
.sd-st small { display: block; font-size: 12.5px; font-weight: 600; color: var(--tk-dim); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #FFD84D; }
.sd-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; background: #1C2632; color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.sd-b kbd { font: 600 12px/1 "InterApp", system-ui, sans-serif; padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.1); color: var(--tk-dim); }
.sd-b.on { background: #fff; color: #0B1117; }
.sd-b.on kbd { background: rgba(0,0,0,.08); color: #3B4B5B; }
.sd-b[data-sdo="black"].on { background: #E5484D; color: #fff; }
.sd-b[data-sdo="black"].on kbd { background: rgba(255,255,255,.2); color: #fff; }
.sd-x { background: transparent; color: var(--tk-dim); box-shadow: inset 0 0 0 1px var(--tk-line); margin-left: auto; }
.sd-step { display: inline-flex; align-items: center; gap: 2px; }
.sd-step button { width: 40px; height: 44px; border-radius: 10px; background: #1C2632; color: #fff; font-size: 20px; font-weight: 700; }
.sd-step > span { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.sd-step b { font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-step small { font-size: 11px; font-weight: 600; color: var(--tk-dim); text-transform: none; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 1500px) { .sd-pv { display: none; } }

/* ---------- Add to device on a computer: a drawing of the browser's own button (installpic.js) ---------- */
.ip { position: relative; margin: 4px 0 16px; padding: 0 0 14px; border-radius: 14px; background: #202124; color: #E8EAED; font: 500 13px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ip-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #35363A; }
.ip-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: #202124; color: #BDC1C6; white-space: nowrap; overflow: hidden; }
.ip-lock { width: 9px; height: 11px; border-radius: 2px; background: #9AA0A6; flex: 0 0 auto; }
.ip-ico { margin-left: auto; position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.ip-ico svg { width: 18px; height: 18px; fill: #E8EAED; }
.ip-menu { font-size: 18px; color: #E8EAED; width: 20px; text-align: center; }
.ip-hit { position: relative; box-shadow: 0 0 0 2.5px #FFD84D; }
.ip .ip-n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 7px; vertical-align: 1px; border-radius: 50%; background: #FFD84D; color: #0B1117; font: 800 11px/1 "InterApp", system-ui, sans-serif; }
.ip .ip-ico .ip-n, .ip .ip-btn .ip-n { display: grid; position: absolute; top: 50%; left: -27px; margin: 0; transform: translateY(-50%); }
.ip-dlg { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 12px; border-radius: 10px; background: #2D2E31; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ip-dlg-r { flex-direction: column; align-items: stretch; margin-left: auto; width: min(300px, calc(100% - 24px)); }
.ip-q { font-size: 14px; font-weight: 600; color: #fff; }
.ip-row { display: flex; align-items: center; gap: 10px; }
.ip-dlg img { border-radius: 8px; flex: 0 0 auto; }
.ip-dlg b { display: block; color: #fff; font-weight: 600; }
.ip-dlg small { display: block; color: #9AA0A6; font-size: 12px; }
.ip-acts { display: flex; justify-content: flex-end; gap: 8px; padding-left: 30px; }
.ip-btn, .ip-btn2 { position: relative; padding: 7px 14px; border-radius: 999px; font-weight: 600; }
.ip-btn { background: #8AB4F8; color: #202124; box-shadow: 0 0 0 2.5px #FFD84D; }
.ip-btn2 { color: #8AB4F8; box-shadow: inset 0 0 0 1px #5F6368; }
.ip-mac { background: #1E1E1E; padding-bottom: 14px; }
.ip-menubar { display: flex; align-items: center; gap: 16px; height: 28px; padding: 0 12px; background: rgba(255,255,255,.1); color: #fff; }
.ip-apple { font-size: 15px; line-height: 1; }
.ip-open { position: relative; padding: 2px 7px; margin: 0 -7px; border-radius: 5px; background: #2F6BFF; }
.ip-drop { display: flex; flex-direction: column; width: 230px; margin: 0 0 0 96px; padding: 5px; border-radius: 0 0 8px 8px; background: #2A2A2C; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.ip-drop span { padding: 4px 8px; border-radius: 5px; color: #E5E5E7; }
.ip-drop i { height: 1px; margin: 4px 6px; background: rgba(255,255,255,.12); }
.ip-drop .ip-hit { background: #2F6BFF; color: #fff; }
.ip-mac .ip-dlg { width: max-content; max-width: calc(100% - 24px); margin-left: auto; }
.ip-mac .ip-btn { background: #2F6BFF; color: #fff; margin-left: 34px; }
.inst-more { color: var(--slate); font-size: 14px; margin: 4px 0 12px; }
@media (max-width: 420px) { .ip-drop { margin-left: 60px; } }
/* the full-screen lyrics own the whole screen: the tab bar (outside .app's stacking context) must never paint over the
   stage's bottom controls (Joel's iPhone, 13 Nov 2026: the key buttons were cut off by an empty bar) */
body:has(.app.stage-open) .tabs, body:has(.app.tk-full) .tabs { visibility: hidden; pointer-events: none; }
/* Installed app (no browser bars): the lyrics stage and sheets take the FULL screen height (100lvh), whatever innerHeight
   iOS reports at launch, so their bottom controls never end up under a dark strip (Joel's iPhone, 13 Nov 2026) */
@media (display-mode: standalone) {
  .stage, .sheet-wrap, .setup { top: 0; bottom: auto !important; height: max(100%, 100lvh); }
}