/* Right-click menus (menu.js): a small list at the pointer; on a phone, a sheet at the bottom. */
.ctxback { position: fixed; inset: 0; z-index: 49; opacity: 0; pointer-events: none; transition: opacity var(--t-out); }
.ctxback.open { opacity: 1; pointer-events: auto; transition-duration: var(--t-in); }
/* it grows out of the spot that was clicked (menu.js sets the origin) and goes by fading where it is */
.ctx { position: fixed; z-index: 50; min-width: 220px; max-width: min(320px, calc(100% - 16px)); padding: 6px 0;
  background: var(--bg); border: 1px solid var(--line-2); box-shadow: 0 14px 40px #0009;
  visibility: hidden; pointer-events: none; opacity: 0; transform: scale(.96);
  transition: opacity .12s var(--ease), transform 0s .12s, visibility 0s .12s; }
.ctx.open { visibility: visible; pointer-events: auto; opacity: 1; transform: none;
  transition: opacity .12s var(--ease), transform .2s var(--ease-out), visibility 0s; }
.ctx button { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 8px 14px; text-align: left; font-weight: 500; }
.ctx button span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx button em { font: 600 11px var(--display); letter-spacing: .06em; color: var(--muted); font-style: normal;
  max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx button:focus-visible { background: var(--s2); outline: none; }
@media (hover: hover) { .ctx button:hover { background: var(--s2); outline: none; } }
.ctx button:focus:not(:focus-visible):not(:hover) { background: none; }
.ctx button.danger { color: var(--red); }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.ctx .chead { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 16px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ctx .chead img { width: 44px; height: 44px; object-fit: cover; background: var(--s2); }
.ctx .chead .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx .chead .s { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phone: a sheet over a dimmed page */
.ctx.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; max-width: none; max-height: 80vh; overflow-y: auto;
  padding: 12px 0 calc(10px + env(safe-area-inset-bottom)); border-width: 1px 0 0; overscroll-behavior: contain;
  opacity: 1; transform: translateY(100%); transition: transform var(--t-out) var(--ease-out), visibility 0s var(--t-out); }
.ctx.sheet.open { transform: none; transition: transform var(--t-in) var(--ease-out), visibility 0s; }
.ctx.sheet.dragging { transition: none; visibility: visible; }
.ctx.sheet.fits, .ctx.sheet.fits * { touch-action: none; }     /* nothing to scroll: a drag down takes it away (menu.js) */
.ctx.sheet button { padding: 13px 18px; font-size: 16px; }
.ctxback:has(+ .ctx.sheet) { background: #000a; }
/* a long press shouldn't select text or pop the browser's image menu */
.row, .card, .hero img, .player .now, .cmain img { -webkit-touch-callout: none; }
@media (hover: none) { .row, .card, .player .now { -webkit-user-select: none; user-select: none; } }
/* artist and album names that open their page */
.artlink { color: inherit; font: inherit; padding: 0; text-align: left; }
@media (hover: hover) { .artlink:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--text); } }
@media (max-width: 760px) { .player .artlink { pointer-events: none; } }   /* the mini bar opens the canvas; its links are there */

/* a song's own numbers (menu.js songInfo) */
.ctx .cinfo { padding: 8px 14px; font: 500 12px var(--ui); color: var(--muted); border-bottom: 1px solid var(--line); }