/* கேட்டு மகிழ்வோம் — Listen mode (#/listen, #/listen/:list) */
.lm-h-en { font-size: .6em; color: var(--ink-2); }
.lm-tabs, .group-chips.lm-tabs { flex-wrap: wrap; overflow: visible; margin: 18px 0; }
.lm-tabs .group-chip .en { font-weight: 600; }

.lm-player { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px; border-radius: var(--r-xl); background: var(--panel); color: #fff; box-shadow: var(--shadow-2); margin-bottom: 22px; background-image: radial-gradient(circle at 12% 20%, rgba(242,184,75,.26), transparent 45%); }
.lm-cover { width: 150px; height: 150px; border-radius: 32px; display: grid; place-items: center; font-size: 84px; line-height: 1; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.lm-body { display: grid; gap: 6px; min-width: 0; }
.lm-title { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; color: #FFE2A0; }
.lm-title .ml { font: 800 1.35rem/1.4 var(--f-ml); overflow-wrap: anywhere; }
.lm-title-en { font-weight: 600; color: rgba(255,255,255,.88); }
.lm-line { margin: 0; font: 700 clamp(1.35rem, 1.05rem + 1.5vw, 2.2rem)/1.5 var(--f-ml); color: #fff; min-height: 1.5em; overflow-wrap: anywhere; }
.lm-en { margin: 0; color: rgba(255,255,255,.9); min-height: 1.4em; }
.lm-where { margin: 0; font-size: .85rem; color: rgba(255,255,255,.88); }
.lm-controls { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.lm-play { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--marigold); color: var(--on-marigold); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 var(--marigold-deep); }
.lm-play .icon { width: 34px; height: 34px; }
.lm-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--marigold-deep); }
.lm-skip { color: #fff; background: rgba(255,255,255,.12); width: 52px; height: 52px; }
.lm-skip:hover { background: rgba(255,255,255,.22); color: #fff; }
.lm-options { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lm-opt { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.lm-opt:hover { background: rgba(255,255,255,.2); color: #fff; }
.lm-opt[aria-pressed="true"] { background: #FFE2A0; color: #2B1500; border-color: transparent; }
.lm-opt .icon { width: 1.2em; height: 1.2em; }
.lm-sleep { display: inline-flex; align-items: center; gap: 6px; }
.lm-sleep select { min-height: 44px; font: inherit; padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); color: #fff; max-width: 100%; }
.lm-sleep option { color: #000; background: #fff; }
.lm-timer { font-size: .88rem; color: rgba(255,255,255,.9); min-height: 1.2em; }

/* All the lines of what's playing — the one being read is lit up */
.lm-words { margin-bottom: 22px; }
.lm-lyrics { position: relative; list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; max-height: 340px; overflow-y: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overscroll-behavior: contain; }
.lm-ly { width: 100%; display: grid; gap: 2px; min-height: 44px; padding: 8px 12px; border: 0; border-left: 5px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.lm-ly:hover { background: var(--ground-2); }
.lm-ly-ml { font: 600 1.08rem/1.55 var(--f-ml); overflow-wrap: anywhere; }
.lm-ly-en { font-size: .85rem; color: var(--ink-2); }
.lm-lyrics .is-now .lm-ly { background: var(--zari-soft); border-left-color: var(--marigold); }
.lm-lyrics .is-now .lm-ly-ml { font-weight: 800; color: var(--zari-deep); }

.lm-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.lm-q { width: 100%; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.lm-q:hover { background: var(--ground-2); }
.lm-q-cover { grid-row: span 2; font-size: 1.8rem; line-height: 1; }
.lm-q .ml { font-weight: 700; overflow-wrap: anywhere; }
.lm-q-en { font-size: .85rem; color: var(--ink-2); overflow-wrap: anywhere; }
.lm-queue .is-now .lm-q { border: 2px solid var(--marigold); background: var(--zari-soft); }
.lm-tip { margin: 20px 0 0; font-size: .88rem; color: var(--ink-2); max-width: 70ch; }

@media (max-width: 640px) {
  .lm-player { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; gap: 14px; }
  .lm-cover { width: 96px; height: 96px; font-size: 56px; border-radius: 24px; }
  .lm-title, .lm-controls, .lm-options { justify-content: center; }
  .lm-lyrics { max-height: 260px; }
}

@media (prefers-reduced-motion: reduce) { .lm-lyrics { scroll-behavior: auto; } .lm-play:active { transform: none; } }

:root[data-contrast="high"] .lm-player { background: #000; background-image: none; border: 2px solid #fff; }
:root[data-contrast="high"] .lm-title, :root[data-contrast="high"] .lm-opt[aria-pressed="true"] { color: #FFE2A0; }
:root[data-contrast="high"] .lm-opt[aria-pressed="true"] { background: #000; border: 2px solid #FFE2A0; }
:root[data-contrast="high"] .lm-en, :root[data-contrast="high"] .lm-where, :root[data-contrast="high"] .lm-title-en, :root[data-contrast="high"] .lm-timer { color: #fff; }
:root[data-contrast="high"] .lm-opt { border: 2px solid #fff; }
:root[data-contrast="high"] .lm-lyrics .is-now .lm-ly { outline: 3px solid var(--ink); background: var(--surface); }
:root[data-contrast="high"] .lm-lyrics .is-now .lm-ly-ml { color: var(--ink); }
:root[data-contrast="high"] .lm-queue .is-now .lm-q { outline: 3px solid var(--ink); background: var(--surface); }
:root[data-contrast="high"] .lm-ly-en, :root[data-contrast="high"] .lm-q-en { color: var(--ink); }
.lm-tabs .group-chip { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; row-gap: 0; text-align: left; }