/* Song previews — the stoop radio's porch palette, scaled down to a card.
   The set list wipes up over the flyer plate so the fixed-height card never
   reflows; the flyer is back the moment the panel closes. */

/* "Listen" control on the flyer's bottom-right edge, half over the plate and half
   over the card body: a porch pill with the mustard play circle at its right end,
   one button so the label is part of the hit target. A direct child of the card:
   the plate clips overflow, so it cannot live inside it. The ring matches the card
   background so it reads as cut into the edge. */
.music-fab{--fab:48px;position:absolute;z-index:3;right:14px;box-sizing:border-box;display:flex;align-items:center;
  height:var(--fab);padding:0;border:3px solid var(--cream-2);border-radius:calc(var(--fab) / 2);cursor:pointer;
  background:var(--porch);color:var(--cream-dim);box-shadow:0 3px 10px rgb(0 0 0 / .18);transform-origin:right center;
  font:700 13px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
  transition:background .16s,transform .16s cubic-bezier(.16,1,.3,1)}
.music-fab-label{padding:0 6px 0 15px}
.music-fab-dot{position:relative;flex:0 0 auto;display:grid;place-items:center;width:calc(var(--fab) - 6px);
  height:calc(var(--fab) - 6px);border-radius:50%;background:var(--mustard);color:var(--ink-on-mustard);
  transition:background .16s}
.music-fab svg{width:20px;height:20px}
.music-fab:hover{background:var(--porch-hover)}
.music-fab:hover .music-fab-dot{background:var(--mustard-light)}
.music-fab:active{transform:scale(.97)}
.music-fab[aria-expanded="true"]{display:none}
.event-card .music-fab{top:calc(250px - var(--fab) / 2)}
.ev .music-fab{top:calc(190px - var(--fab) / 2)}
/* Keep text clear of the control's lower half (pill + 14px inset + gap). */
.event-card:has(.music-fab) .event-tags-row{padding-right:140px}
/* The control's lower half dips 24px into the home card body; start the text just
   below it so titles keep their full width. */
.ev:has(.music-fab) .b{padding-top:30px}

/* Tooltip above the control, inside the flyer area (the card clips overflow). */
.music-fab::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 8px);max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 13px;border-radius:8px;
  background:var(--ink);color:var(--cream);font:600 13px/1.2 var(--body);letter-spacing:0;text-transform:none;
  box-shadow:0 6px 18px oklch(0.28 0.026 62 / .25);opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .16s,transform .16s cubic-bezier(.16,1,.3,1)}
.music-fab:focus-visible::after{opacity:1;transform:none}
@media (hover:hover){.music-fab:hover::after{opacity:1;transform:none}}

/* One-time attention cue (class set by music-preview.js on first scroll-in). */
@media (prefers-reduced-motion:no-preference){
  .music-fab.is-cued .music-fab-dot::before{content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 0 var(--mustard);opacity:.9;pointer-events:none;
    animation:music-fab-pulse 1.2s cubic-bezier(.16,1,.3,1) 1 both}
}
@keyframes music-fab-pulse{from{box-shadow:0 0 0 0 var(--mustard);opacity:.9}to{box-shadow:0 0 0 16px var(--mustard);opacity:0}}

/* Very narrow cards: circle only, the label would crowd the tags. */
@media (max-width:339px){
  .music-fab-label{display:none}
  .event-card:has(.music-fab) .event-tags-row{padding-right:52px}
}
/* Focus rings: the site ring on cream; inside the dark panel the ring is mustard.
   The global :focus-visible rule squares corners, so restore each control's shape. */
.music-fab:focus-visible{outline:3px solid var(--kielbasa);outline-offset:2px}
.music-panel button:focus-visible,.music-panel a:focus-visible{outline:3px solid var(--mustard-light);outline-offset:2px}
.music-play:focus-visible,.music-close:focus-visible{border-radius:50%}
.music-artist-btn:focus-visible{border-radius:20px}

/* A direct child of the card: it covers the flyer plate (--music-h) and, while a
   video plays, grows down over the card body (JS sets --music-h inline). */
.event-card .music-panel{--music-h:250px}
.ev .music-panel{--music-h:190px}
.music-panel{position:absolute;top:0;left:0;right:0;height:var(--music-h);z-index:4;display:flex;flex-direction:column;
  gap:4px;box-sizing:border-box;overflow:hidden;padding:10px 12px 8px 14px;background:var(--porch-deep);color:var(--cream-dim);
  box-shadow:inset 0 -1px 0 var(--porch-set-hi);clip-path:inset(100% 0 0 0);
  transition:clip-path .34s cubic-bezier(.16,1,.3,1),height .34s cubic-bezier(.16,1,.3,1)}
.music-panel.is-open{clip-path:inset(0 0 0 0)}

/* 16:9 player, edge to edge across the card. The iframe is created on demand. */
.music-video{flex:0 0 auto;margin:0 -12px 0 -14px;aspect-ratio:16/9;background:#000}
.music-video[hidden]{display:none}
.music-video iframe{display:block;width:100%;height:100%;border:0}
.music-panel.has-video .music-foot{display:none}
.music-audio-only{flex:0 0 auto;min-height:28px;padding:0 4px;border:none;background:transparent;color:var(--cream-dim);
  font:700 12px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.music-audio-only[hidden]{display:none}
.music-audio-only:hover{color:var(--mustard)}
.music-vid{flex:0 0 auto;display:grid;place-items:center;color:var(--cream-dim);opacity:.75}
.music-vid svg{width:16px;height:16px}
.music-track.is-playing .music-vid{color:var(--mustard-light);opacity:1}

.music-head{display:flex;align-items:center;gap:10px;min-height:30px}
.music-panel .music-artist{flex:1;min-width:0;margin:0;font-family:var(--display);font-size:18px;line-height:1.15;
  color:var(--mustard);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-artists{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.music-artist-btn{flex:0 0 auto;max-width:100%;min-height:28px;border:1.5px solid var(--porch-chip);border-radius:20px;
  background:transparent;color:var(--cream-dim);font:700 12.5px/1 var(--body);padding:6px 11px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-artist-btn[aria-pressed="true"]{background:var(--mustard);border-color:var(--mustard);color:var(--ink-on-mustard)}
.music-close{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border:none;border-radius:50%;
  background:var(--porch-set);color:var(--cream-dim);cursor:pointer}
.music-close:hover{background:var(--porch-set-hi)}
.music-close svg{width:14px;height:14px}

.music-tracks{flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;scrollbar-width:thin;
  display:flex;flex-direction:column}
.music-track{position:relative;display:flex;align-items:center;gap:11px;min-height:32px;padding:2px 0;
  border-bottom:1px solid var(--porch-set-hi)}
.music-track:last-child{border-bottom:none}
.music-track::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mustard);
  transform-origin:left;transform:scaleX(var(--progress,0));transition:transform .25s linear}
.music-play{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border:none;border-radius:50%;
  background:var(--mustard);color:var(--ink-on-mustard);cursor:pointer;transition:background .16s}
.music-play:hover{background:var(--mustard-light)}
.music-play svg{width:13px;height:13px}
.music-play:disabled{background:var(--porch-set);color:var(--porch-chip);cursor:not-allowed}
.music-title{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
a.music-title{color:inherit;text-decoration:none}
a.music-title:hover,a.music-title:focus-visible{color:var(--mustard-light);text-decoration:underline}
.music-track.is-playing .music-title{color:var(--mustard-light)}
.music-track.is-unavailable .music-title{text-decoration:line-through;opacity:.7}

.music-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700}
.music-foot a{display:inline-flex;align-items:center;gap:4px;min-height:24px;color:var(--cream-dim);text-decoration:none}
.music-foot a:hover{color:var(--mustard)}
.music-foot a[hidden]{display:none}
.music-youtube svg{width:12px;height:12px}

@media (prefers-reduced-motion:reduce){
  .music-panel{transition:none}
  .music-fab{transition:background .16s}
  .music-fab:active{transform:none}
  .music-fab::after{transition:opacity .16s;transform:none}
  .music-track::after{transition:none}
}

/* Home flyer area is 190px (events grid: 250px), so rows tighten to keep ~3.5 visible. */
.ev .music-track{min-height:30px;padding:1px 0}
.ev .music-play{width:26px;height:26px}

/* Watch panel: video only. Name over a quiet kind label; the footer link stays
   visible (the music panel hides its footer while a video plays). */
.watch-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.watch-title .music-artist{flex:none}
.watch-kind{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cream-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-panel .music-video{margin-top:4px}
.watch-panel.has-video .music-foot{display:flex}
.watch-yt{white-space:nowrap}
.watch-yt svg{width:12px;height:12px}
/* Footer: where the video came from (left, truncates) and the outbound link (right). */
.watch-source{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
  color:var(--cream-dim);opacity:.85}
.watch-yt{flex:0 0 auto}

/* Instagram: the official embed is a tall portrait unit on a white ground, so the
   frame fills whatever the (card-capped) panel leaves and the embed scrolls within it. */
.ig-panel .music-video{flex:1 1 auto;min-height:0;aspect-ratio:auto;overflow-y:auto;background:#fff}
.ig-panel .music-video iframe{height:100%;min-height:320px}

/* Muted card preview. Lives inside the flyer plate (which clips it), under the
   Listen/Watch control, and stays inert (no pointer events, transparent) until the
   embed reports it is really playing. The 16:9 frame is sized to cover the plate
   and centred, then zoomed 1.5x so the plate crops YouTube's title bar and
   "More videos" strip; the plate clips the overflow. */
.event-card{--pv-h:250px}
.ev{--pv-h:190px}
.ev-preview{position:absolute;inset:0;z-index:2;overflow:hidden;background:#000;opacity:0;pointer-events:none;
  transition:opacity .25s ease-out}
.ev-preview.is-in{opacity:1;pointer-events:auto;cursor:pointer}
.ev-preview iframe{position:absolute;top:50%;left:50%;width:calc(max(100%, var(--pv-h) * 16 / 9) * 1.5);aspect-ratio:16/9;
  height:auto;border:0;transform:translate(-50%,-50%);pointer-events:none}
.ev-preview-badge{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 8px;border-radius:20px;background:oklch(0.2 0.02 62 / .86);color:oklch(0.97 0.01 90);
  font:700 12px/1 var(--body);letter-spacing:.02em;pointer-events:none}
.ev-preview-badge svg{width:14px;height:14px;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
  .ev-preview{transition:none}
}

/* Instagram card preview: the still thumbnail (no autoplay; the embed cannot be muted),
   a play mark and the badge. A scrim keeps the badge legible on any thumbnail. */
.ev-preview-ig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-preview-ig::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;
  background:linear-gradient(to top,oklch(0.2 0.02 62 / .62),transparent)}
.ev-preview-ig .ev-preview-badge{z-index:1}
.ev-preview-play{position:absolute;top:50%;left:50%;z-index:1;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:oklch(0.2 0.02 62 / .62);color:oklch(0.97 0.01 90);transform:translate(-50%,-50%);
  pointer-events:none}
.ev-preview-play svg{width:22px;height:22px;margin-left:2px}