/* v115 quick-listen layer
   Adds a reusable song preview pattern to the Music page.
   Active buttons appear when the clip file exists; future songs show a quiet placeholder with the expected file name in data-preview-file.
*/
.compact-actions{
  align-items:center !important;
}
.compact-actions .quick-listen-action{
  appearance:none;
  border:1px solid rgba(255,255,255,.86) !important;
  background:linear-gradient(135deg,#ffd68f 0%,#f0b855 45%,#d98e32 100%) !important;
  color:#24160f !important;
  box-shadow:0 12px 24px rgba(217,142,50,.22) !important;
  border-radius:999px !important;
  cursor:pointer;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:13px !important;
  font-weight:850 !important;
  line-height:1 !important;
  padding:9px 12px !important;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.compact-actions .quick-listen-action:hover,
.compact-actions .quick-listen-action:focus-visible{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 32px rgba(217,142,50,.30) !important;
}
.compact-actions .quick-listen-pending{
  background:rgba(255,255,255,.72) !important;
  border:1px dashed rgba(185,120,37,.28) !important;
  color:#7a6657 !important;
  border-radius:999px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:13px !important;
  font-weight:750 !important;
  line-height:1 !important;
  padding:9px 12px !important;
}
.quick-listen-modal{
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.92) !important;
  border-radius:28px !important;
  box-shadow:0 30px 88px rgba(40,25,14,.24) !important;
  color:#251710 !important;
  max-width:980px !important;
  width:min(94vw,980px) !important;
}
.quick-listen-modal::backdrop{
  background:rgba(37,23,16,.46) !important;
  backdrop-filter:blur(5px) !important;
}
.quick-listen-head{
  background:
    radial-gradient(circle at 88% 0%, rgba(255,218,152,.42), transparent 35%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,248,236,.96)) !important;
  border-bottom:1px solid rgba(71,39,22,.10) !important;
  padding:24px 26px 16px !important;
}
.quick-listen-head h2{
  color:#412614 !important;
  font-family:"Cormorant SC",Georgia,serif !important;
  font-size:clamp(2rem,4vw,3.2rem) !important;
  line-height:1 !important;
  margin:8px 0 4px !important;
}
.quick-listen-meta{
  color:#ad7223 !important;
  font-weight:750 !important;
}
.quick-listen-body{padding:24px 26px 28px !important;}
.quick-listen-shell{
  display:grid;
  grid-template-columns:minmax(190px,260px) 1fr;
  gap:24px;
  align-items:start;
}
.quick-listen-shell img{
  width:100%;
  border-radius:22px !important;
  box-shadow:0 18px 36px rgba(48,31,18,.14) !important;
  border:1px solid rgba(255,255,255,.92) !important;
}
.quick-listen-copy p{
  color:#5d4e44 !important;
  font-size:1.03rem !important;
  line-height:1.72 !important;
  margin:0 0 18px !important;
}
.quick-listen-player{
  background:linear-gradient(180deg,rgba(248,251,255,.96),rgba(255,250,243,.96)) !important;
  border:1px solid rgba(71,39,22,.10) !important;
  border-radius:18px !important;
  padding:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 10px 20px rgba(61,43,26,.06) !important;
}
.quick-listen-player audio{width:100%; display:block;}
.quick-listen-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
#quick-listen-modals{display:contents;}
@media(max-width:720px){
  .quick-listen-shell{grid-template-columns:1fr;}
  .quick-listen-shell img{max-width:320px;}
}