/* EKHO Sonic Chill — listener thumbs up (staged Monday, October 12th, 2026, build_likes.py).
   Same tokens as site.css: true black, cyan -> violet, keycap corners. Lit = violet glow, like the sleep timer's moon. */
.dk-win .lk-key{color:var(--muted)}
.dk-win .lk-key svg{width:18px;height:18px}
.dk-win .lk-key:disabled{opacity:.35;cursor:default}
.dk-win .lk-key.on,.lk-row.on{color:var(--ink);border-color:rgba(180,76,255,.75);box-shadow:inset 0 -2px 0 rgba(180,76,255,.45),0 0 14px rgba(180,76,255,.35)}
.dk-win .lk-key.on svg,.lk-row.on svg{fill:rgba(180,76,255,.35);stroke:var(--violet)}
.dk-win .lk-key:not(:disabled):hover,.dk-win .lk-key:focus-visible{color:var(--cyan)}
@media (prefers-reduced-motion:no-preference){.lk-key.on svg,.lk-row.on svg{animation:lkpop .28s ease-out}}
@keyframes lkpop{50%{transform:scale(1.25)}}

/* the /live/ song log: a small key at the end of each song */
li[data-lk]{position:relative;padding-right:56px!important}
.lk-row{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;
  border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel),var(--panel2));color:var(--muted);cursor:pointer}
.lk-row svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lk-row:hover,.lk-row:focus-visible{border-color:rgba(63,215,255,.6);color:var(--cyan);outline:none}

/* the "now playing" line glides across and back when it's too long (Monday, October 12th, 2026):
   the line itself moves inside its box; --mq (how far) and --mq-t (how long) come from likes.js */
.dk-mid{overflow:hidden}
.dk-now.dk-mq{overflow:visible;text-overflow:clip;width:max-content;max-width:none;animation:dkmq var(--mq-t,8s) ease-in-out infinite alternate;will-change:transform}
@keyframes dkmq{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--mq,0px))}}
@media (prefers-reduced-motion:reduce){.dk-now.dk-mq{animation:none;overflow:hidden;text-overflow:ellipsis;width:auto}}