/* Pop-ups (add to playlist, who's listening, shortcuts) and the toast. */
/* ---------- modal (add to playlist, shortcuts) ---------- */
.modal { position: fixed; z-index: 30; left: 50%; top: 50%; width: min(420px, calc(100% - 32px)); max-height: min(560px, calc(100% - 64px));
  transform: translate(-50%, -48%) scale(.97); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ease), transform var(--t-out) var(--ease-out), visibility 0s var(--t-out);
  background: var(--bg); border: 1px solid var(--line-2); display: flex; flex-direction: column; box-shadow: 0 20px 60px #0008; }
.modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); pointer-events: auto;
  transition: opacity .2s var(--ease), transform var(--t-in) var(--ease-out), visibility 0s; }
.modal.dragging { transition: none; visibility: visible; }
.modal .mbody { overflow-y: auto; }
.pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 8px 12px; min-height: 60px; border-bottom: 1px solid var(--line); transition: background .12s; }
@media (hover: hover) { .pick:hover { background: var(--s1); } }
.pick .mosaic, .pick .blank { width: 44px; height: 44px; background: var(--s2); }
.pick .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick .s { color: var(--muted); font-size: 12px; }
.pick .ok { color: var(--yellow); font: 700 11px var(--display); letter-spacing: .1em; text-transform: uppercase; }
/* "Something is playing": the tapped song, then Play now / Play next / Add to queue */
.asksong { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); background: var(--s1); }
.asksong img { width: 44px; height: 44px; object-fit: cover; background: var(--s2); }
.asksong .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asksong .s { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask .pick .blank { display: grid; place-items: center; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; padding: 16px; align-items: center; }
kbd { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line-2); border-bottom-width: 3px;
  font: 700 12px var(--display); background: var(--s1); color: var(--text); }
.keys span { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 12px); transform: translate(-50%, 12px); opacity: 0; z-index: 40;
  background: var(--text); color: var(--bg); padding: 10px 16px; font-weight: 600; transition: opacity .2s, transform var(--t-in) var(--ease-out); pointer-events: none;
  width: max-content; max-width: min(480px, calc(100% - 32px)); text-align: center; text-wrap: pretty; }
.toast.err { box-shadow: inset 4px 0 var(--red); }
.toast.extra { bottom: calc(var(--player-h) + 68px); }   /* above an Undo still showing (ui.js) */
.toast.open { opacity: 1; transform: translate(-50%, 0); }
.toast.undo.open { pointer-events: auto; }
.toast button { margin-left: 14px; padding: 0 2px; color: var(--red); font: 700 12px var(--display); letter-spacing: .12em; text-transform: uppercase; }
/* the first-time card (setup.js): a taller pop-up with the house's name, accent, preset and admin password */
.modal.setup { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 48px); }
.setupform { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.setupform .field { flex: none; }
.setupform .lbl { margin: 8px 0 0; }
.setupform .hint { margin: 0; color: var(--muted); font-size: 13px; }
.setupform .hint a { color: var(--text); text-decoration: underline; }
.setupform .msg { color: var(--red); font-size: 13px; }
.setupform .msg:empty { display: none; }
.setupbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }