/* Zarz-LRC. Layout: home = lede + M3 search bar + connected result list.
   Song = cover panel | lyric stage, with a follow-along transport docked at the bottom.
   Colors are a tonal-spot scheme; app.js regenerates it from each cover. */
:root {
  --primary: #36693e; --on-primary: #ffffff;
  --primary-container: #b7f1ba; --on-primary-container: #1d5128;
  --secondary-container: #d4e8d1; --on-secondary-container: #3a4b3a;
  --tertiary: #39656c; --tertiary-container: #bdeaf3; --on-tertiary-container: #1f4d54;
  --surface: #f7fbf2; --surface-low: #f1f5ec; --surface-c: #ebefe7; --surface-high: #e5e9e1; --surface-highest: #e0e4db;
  --on-surface: #181d18; --on-surface-variant: #424940; --outline-variant: #c1c9be; --outline: #727970;
  --error: #ba1a1a;

  --font: "Google Sans Flex", "Google Sans", "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lyric: clamp(26px, 1.25rem + 1.9vw, 50px);
  --spring: cubic-bezier(.38, 1.21, .22, 1);
  --spring-fast: cubic-bezier(.42, 1.67, .21, .9);
  --effects: cubic-bezier(.34, .8, .34, 1);
  --decel: cubic-bezier(.05, .7, .1, 1);
  --accel: cubic-bezier(.3, 0, .8, .15);
  --bar-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --primary: #9cd49f; --on-primary: #003914;
  --primary-container: #1d5128; --on-primary-container: #b7f1ba;
  --secondary-container: #3a4b3a; --on-secondary-container: #d4e8d1;
  --tertiary: #a1ced7; --tertiary-container: #1f4d54; --on-tertiary-container: #bdeaf3;
  --surface: #101510; --surface-low: #181d18; --surface-c: #1c211c; --surface-high: #272b26; --surface-highest: #313630;
  --on-surface: #e0e4db; --on-surface-variant: #c1c9be; --outline-variant: #424940; --outline: #8b9389;
  --error: #ffb4ab;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --primary: #9cd49f; --on-primary: #003914;
  --primary-container: #1d5128; --on-primary-container: #b7f1ba;
  --secondary-container: #3a4b3a; --on-secondary-container: #d4e8d1;
  --tertiary: #a1ced7; --tertiary-container: #1f4d54; --on-tertiary-container: #bdeaf3;
  --surface: #101510; --surface-low: #181d18; --surface-c: #1c211c; --surface-high: #272b26; --surface-highest: #313630;
  --on-surface: #e0e4db; --on-surface-variant: #c1c9be; --outline-variant: #424940; --outline: #8b9389;
  --error: #ffb4ab;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--surface); color: var(--on-surface); font: 400 16px/24px var(--font); -webkit-font-smoothing: antialiased; transition: background-color .8s var(--effects), color .8s var(--effects); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; white-space: nowrap; direction: ltr; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "opsz" 24; display: inline-block; flex: none; }
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "opsz" 24; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .gutter { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

/* Top app bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--bar-h); display: flex; align-items: center; gap: 8px; background: var(--surface); transition: background-color .8s var(--effects); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 650 21px/1 var(--font); letter-spacing: -.02em; margin-right: auto; min-width: 0; }
.mark svg { width: 30px; height: 30px; color: var(--primary); flex: none; transition: transform .6s var(--spring), color .8s var(--effects); }
.mark svg { width: 34px; height: 34px; }
.mark-lines rect { fill: var(--on-primary); transition: fill .8s var(--effects); }
.mark-lines rect.dim { fill-opacity: .42; }
.mark:hover svg { transform: rotate(-12deg) scale(1.06); }
.mark b { font-weight: 650; }
.mark b span { color: var(--on-surface-variant); font-weight: 450; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 999px; display: grid; place-items: center; background: transparent; color: var(--on-surface-variant); cursor: pointer; text-decoration: none; transition: background-color .2s var(--effects), border-radius .35s var(--spring-fast); }
.icon-btn:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.icon-btn:active { border-radius: 12px; }
.text-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 999px; text-decoration: none; font: 500 14px/20px var(--font); color: var(--on-surface-variant); }
.text-btn:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
@media (max-width: 560px) { .text-btn.wide { display: none; } }

/* Search field */
.search { position: relative; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px 0 16px; border-radius: 28px; background: var(--surface-high); transition: background-color .3s var(--effects), box-shadow .3s var(--effects), border-radius .5s var(--spring); }
.search:focus-within { background: var(--surface-highest); box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 4px 12px rgb(0 0 0 / .08); }
.search > .ms { color: var(--on-surface-variant); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--on-surface); font: 400 17px/24px var(--font); padding: 0 8px; }
.search input::placeholder { color: var(--on-surface-variant); }
.search input::-webkit-search-cancel-button { display: none; }
.search.big { height: 64px; border-radius: 32px; padding-left: 20px; }
.search.big input { font-size: 19px; }

/* Home */
.home { max-width: 880px; margin: 0 auto; padding-block: 8vh 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lede { display: grid; gap: 12px; }
.lede h1 { margin: 0; font: 500 clamp(40px, 6vw, 64px)/1.05 var(--font); letter-spacing: -.03em; text-wrap: balance; }
.lede h1 em { font-style: normal; color: var(--primary); transition: color .8s var(--effects); }
.lede p { margin: 0; color: var(--on-surface-variant); font-size: 18px; line-height: 28px; max-width: 34em; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font: 500 14px/20px var(--font); color: var(--on-surface-variant); box-shadow: inset 0 0 0 1px var(--outline-variant); white-space: nowrap; }
.chip .ms { font-size: 18px; }
.chip.tonal { box-shadow: none; background: var(--secondary-container); color: var(--on-secondary-container); }
.section-label { font: 500 14px/20px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); margin: 16px 0 4px; display: flex; align-items: center; gap: 8px; }
.section-label button { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* Results: expressive connected list on the page background */
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.results li > a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 24px; gap: 16px; align-items: center; padding: 10px 16px 10px 10px; background: var(--surface-c); border-radius: 6px; text-decoration: none; transition: background-color .25s var(--effects), border-radius .5s var(--spring), transform .5s var(--spring); }
.results li:first-child > a { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.results li:last-child > a { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.results li > a:hover, .results li > a.sel { background: var(--secondary-container); color: var(--on-secondary-container); border-radius: 20px; }
.results li > a:active { transform: scale(.985); }
.results img, .results .ph { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface-highest); display: block; transition: border-radius .5s var(--spring); }
.results li > a:hover img { border-radius: 28px; }
.r-main { display: grid; gap: 2px; min-width: 0; }
.r-main b { font: 500 16px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-main small { font: 400 14px/20px var(--font); color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-meta { font: 400 13px/18px var(--font); color: var(--on-surface-variant); text-align: right; font-variant-numeric: tabular-nums; }
.r-go { color: var(--on-surface-variant); font-size: 20px; }
.explicit { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 4px; background: var(--on-surface-variant); color: var(--surface); font: 600 10px/1 var(--font); vertical-align: 2px; }
.empty { padding: 32px 24px; border-radius: 24px; background: var(--surface-low); color: var(--on-surface-variant); display: grid; gap: 6px; }
.empty b { color: var(--on-surface); font: 500 18px/24px var(--font); }
.skel { height: 76px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-c) 0%, var(--surface-high) 50%, var(--surface-c) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel:first-child { border-radius: 24px 24px 6px 6px; } .skel:last-child { border-radius: 6px 6px 24px 24px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.note { font: 400 14px/20px var(--font); color: var(--on-surface-variant); }
.note a { color: var(--primary); }
.preview-flag { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 16px; background: var(--tertiary-container); color: var(--on-tertiary-container); font: 400 14px/20px var(--font); }
.preview-flag .ms { font-size: 20px; }

/* Song view */
.song { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 48px; height: calc(100vh - var(--bar-h) - env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top, 0px)); }
.panel { display: flex; flex-direction: column; gap: 20px; padding-block: 16px 32px; overflow-y: auto; scrollbar-width: none; min-width: 0; }
.panel > * { flex-shrink: 0; }
.cover { position: relative; aspect-ratio: 1; width: min(100%, 360px, 42vh); border-radius: 28px; overflow: hidden; background: var(--surface-high); box-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 12px 32px rgb(0 0 0 / .14); transition: border-radius .7s var(--spring), transform .7s var(--spring); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s var(--effects); }
.cover img.on { opacity: 1; }
.playing .cover { border-radius: 48px; transform: scale(.97); }
.info { display: grid; gap: 4px; }
.info h1 { margin: 0; font: 500 28px/36px var(--font); letter-spacing: -.015em; text-wrap: balance; }
.info .artist { font: 500 17px/24px var(--font); color: var(--primary); transition: color .8s var(--effects); }
.info .album { font: 400 14px/20px var(--font); color: var(--on-surface-variant); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface-high); align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--on-surface-variant); font: 500 14px/20px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color .35s var(--effects), color .35s var(--effects); }
.seg button .ms { font-size: 18px; }
.seg button[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); }
.get { display: grid; gap: 8px; }
.get-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font: 500 14px/20px var(--font); transition: background-color .2s var(--effects), border-radius .35s var(--spring-fast), box-shadow .2s var(--effects); }
.btn .ms { font-size: 18px; }
.btn:active { border-radius: 12px; }
.btn.filled { background: var(--primary); color: var(--on-primary); }
.btn.filled:hover { box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.outlined { background: transparent; color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--outline-variant); }
.btn.outlined:hover, .btn.tonal:hover { background: color-mix(in srgb, var(--on-surface) 8%, var(--secondary-container)); }
.btn.outlined:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.fmt { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--on-surface-variant); box-shadow: inset 0 0 0 1px var(--outline-variant); font: 500 13px/18px var(--font); transition: background-color .2s var(--effects), border-radius .35s var(--spring-fast); }
.fmt button:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.fmt button:active { border-radius: 16px; }
.fmt button:disabled { opacity: .38; cursor: default; }
.credits { font: 400 13px/19px var(--font); color: var(--on-surface-variant); display: grid; gap: 2px; }
.credits b { font-weight: 500; color: var(--on-surface); }

/* Lyric stage */
.stage-wrap { position: relative; min-width: 0; }
.stage { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(transparent 0, #000 12%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 12%, #000 78%, transparent 100%); }
.stage::-webkit-scrollbar { display: none; }
.stage-inner { padding: 18vh 0 46vh; display: grid; gap: .55em; font-size: var(--lyric); max-width: 22em; }
.sec { font: 500 13px/18px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); margin-top: 1.4em; opacity: .7; }
.sec:first-child { margin-top: 0; }
.ln { width: fit-content; max-width: 100%; font: 650 1em/1.18 var(--font); letter-spacing: -.025em; text-wrap: balance; cursor: pointer; color: var(--on-surface); opacity: .28; transform-origin: left center; transform: scale(.95); transition: opacity .5s var(--effects), transform .6s cubic-bezier(.2, 0, 0, 1); border-radius: 16px; padding: 2px 8px; margin-left: -8px; }
.ln:hover { opacity: .55; }
.ln.past { opacity: .42; }
.ln.on { opacity: 1; transform: none; }
.ln.duet { justify-self: end; text-align: right; transform-origin: right center; margin-left: 0; margin-right: -8px; }
/* The sung part of a word fills with a soft leading edge; done words simply hold --p: 1. */
.ln.on .w { background-image: linear-gradient(90deg, var(--primary) calc(var(--p, 0) * 125% - 25%), color-mix(in srgb, var(--on-surface) 34%, transparent) calc(var(--p, 0) * 125%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ln .bgv { display: block; font-size: .56em; font-weight: 550; letter-spacing: -.01em; margin-top: .2em; color: var(--on-surface-variant); }
.ln .tr { display: block; font-size: .5em; font-weight: 450; letter-spacing: 0; line-height: 1.35; margin-top: .25em; color: var(--on-surface-variant); }
.ln.unsynced { opacity: 1; transform: none; cursor: text; }
.gap-dots { display: flex; gap: .22em; height: .7em; align-items: center; opacity: 0; transition: opacity .4s var(--effects); }
.gap-dots.on { opacity: 1; }
.gap-dots i { width: .28em; height: .28em; border-radius: 50%; background: var(--primary); opacity: calc(.25 + var(--d, 0) * .75); transform: scale(calc(.7 + var(--d, 0) * .5)); }
.reading { position: absolute; inset: 0; overflow-y: auto; padding: 24px 0 120px; }
.reading pre { margin: 0; font: 450 19px/1.7 var(--font); white-space: pre-wrap; max-width: 40em; }
.jump { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 5; }
.loading-stage { display: grid; gap: .55em; padding: 18vh 0; font-size: var(--lyric); }
.loading-stage i { display: block; height: .9em; border-radius: 16px; background: var(--surface-high); animation: pulse 1.6s var(--effects) infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.err { padding: 18vh 0 0; display: grid; gap: 16px; justify-items: start; max-width: 32em; }
.err h2 { margin: 0; font: 500 28px/36px var(--font); }
.err p { margin: 0; color: var(--on-surface-variant); }

/* Transport */
.transport { position: absolute; z-index: 15; left: 0; right: 0; margin-inline: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(720px, 100%); display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 32px; background: var(--surface-highest); box-shadow: 0 4px 16px rgb(0 0 0 / .14), 0 1px 3px rgb(0 0 0 / .1); transition: background-color .8s var(--effects); }
.play { width: 56px; height: 56px; border: 0; border-radius: 28px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; cursor: pointer; transition: border-radius .5s var(--spring), background-color .8s var(--effects); }
.play .ms { font-size: 30px; }
.playing .play { border-radius: 16px; }
.time { font: 500 13px/18px var(--font); font-variant-numeric: tabular-nums; color: var(--on-surface-variant); min-width: 84px; text-align: center; }
.seek { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; cursor: pointer; --v: 0%; }
.seek::-webkit-slider-runnable-track { height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--primary) var(--v), var(--secondary-container) var(--v)); }
.seek::-moz-range-track { height: 16px; border-radius: 8px; background: var(--secondary-container); }
.seek::-moz-range-progress { height: 16px; border-radius: 8px; background: var(--primary); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 40px; margin-top: -12px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 0 4px var(--surface-highest); }
.seek::-moz-range-thumb { width: 4px; height: 40px; border: 0; border-radius: 2px; background: var(--primary); }
.nudge { display: inline-flex; align-items: center; gap: 2px; font: 500 12px/16px var(--font); color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.nudge output { min-width: 44px; text-align: center; }

/* Toast */
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); opacity: 0; padding: 14px 20px; border-radius: 12px; background: var(--on-surface); color: var(--surface); font: 500 14px/20px var(--font); pointer-events: none; transition: opacity .25s var(--effects), transform .45s var(--decel); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Narrow screens: panel collapses into a header above the stage */
@media (max-width: 900px) {
  .song { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .panel { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px 16px; padding-block: 8px 0; overflow: visible; }
  .cover { width: 88px; border-radius: 20px; }
  .playing .cover { border-radius: 28px; }
  .info h1 { font-size: 20px; line-height: 26px; }
  .info .artist { font-size: 15px; }
  .panel .chips, .panel .credits { display: none; }
  .panel .seg, .panel .get { grid-column: 1 / -1; }
  .get-row .btn span.lbl { display: none; }
  .stage-inner { padding-top: 10vh; }
  .transport { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: auto; max-width: 720px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .transport .time.start, .transport .nudge { display: none; }
}
@media (max-width: 560px) { .get-row { display: none; } }

/* View transitions: circular reveal for theme, fade-through for screen changes */
.theme-vt::view-transition-old(root), .theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-vt::view-transition-old(root) { z-index: 1; } .theme-vt::view-transition-new(root) { z-index: 2; }
.theme-vt .bar { view-transition-name: none; }
.bar { view-transition-name: zbar; }
::view-transition-group(zbar) { animation-duration: 0s; }
:root:not(.theme-vt)::view-transition-old(root) { animation: vt-out 140ms var(--accel) both; }
:root:not(.theme-vt)::view-transition-new(root) { animation: vt-in 420ms var(--decel) 40ms both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Phones: drop the year and length column so titles keep their room. */
@media (max-width: 480px) {
  .results li > a { grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 12px; }
  .results img, .results .ph { width: 48px; height: 48px; }
  .results .r-meta { display: none; }
}