/* UPPER audio-pills.css — styling for the data-driven industry Listen pills (free + gated). */
.uap-cluster{ display:inline-flex; gap:8px; margin-left:10px; vertical-align:middle; flex-wrap:wrap; }
.uap-pill{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  font:700 12px/1.2 'Inter',-apple-system,sans-serif; letter-spacing:.01em; text-decoration:none;
  color:#2733A0; background:rgba(255,255,255,.92); border:1px solid rgba(110,86,255,.35);
  border-radius:999px; padding:5px 12px 5px 9px; white-space:nowrap; cursor:pointer;
  max-width:340px; transition:box-shadow .2s,border-color .2s,background .2s;
}
.uap-pill:hover, .uap-pill.open{ box-shadow:0 8px 22px rgba(110,86,255,.22); border-color:rgba(110,86,255,.6); background:#fff; }
.uap-free{ }
.uap-gated{ color:#5a4b9e; border-color:rgba(110,86,255,.3); background:rgba(243,240,255,.9); }
.uap-ico{ width:14px; height:14px; color:#6E56FF; display:inline-flex; flex:0 0 auto; }
.uap-ico svg{ width:14px; height:14px; }
.uap-pill:hover .uap-w1{ animation:uap-pulse 1s ease-in-out infinite; }
.uap-pill:hover .uap-w2{ animation:uap-pulse 1s ease-in-out .25s infinite; }
@keyframes uap-pulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }
.uap-lbl{ flex:0 0 auto; font-weight:800; }
.uap-ttl{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; opacity:.95; }
.uap-time{ flex:0 0 auto; font-family:'JetBrains Mono','SFMono-Regular',monospace; font-weight:600; font-size:10px; color:#6E56FF; margin-left:2px; }
.uap-lock{ flex:0 0 auto; width:12px; height:12px; color:#8a7bd8; display:inline-flex; margin-left:2px; }
.uap-lock svg{ width:12px; height:12px; }

/* T-1743 (Owner): flyout opens DOWNWARD. It is position:fixed (coordinates set by JS on
   open/hover) so it escapes the industry banner's overflow:hidden clip instead of opening up. */
.uap-panel{
  position:fixed; top:0; left:0; z-index:1200; width:320px; max-width:86vw;
  background:#fff; border:1px solid rgba(46,56,165,.18); border-radius:14px;
  box-shadow:0 18px 54px rgba(11,15,40,.28);
  display:grid; grid-template-rows:0fr; opacity:0; pointer-events:none;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .2s ease; text-align:left;
}
.uap-pill:hover .uap-panel, .uap-pill.open .uap-panel{ grid-template-rows:1fr; opacity:1; pointer-events:auto; }
.uap-pin{ overflow:hidden; min-height:0; }
/* invisible hover-bridge (BELOW the pill) so the mouse can cross the gap down into the panel */
.uap-pill::after{ content:""; position:absolute; top:100%; left:0; width:320px; max-width:86vw; height:12px; background:transparent; display:none; }
.uap-pill:hover::after, .uap-pill.open::after{ display:block; }

.uap-body{ display:flex; gap:11px; align-items:center; padding:12px; }
.uap-thumb{ flex:0 0 auto; width:56px; height:56px; border-radius:10px; overflow:hidden; position:relative; background:linear-gradient(135deg,#7b60ff,#5543c6); }
.uap-thumb img{ width:100%; height:100%; object-fit:cover; }
.uap-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(11,15,40,.12); }
.uap-play::after{ content:""; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:2px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.uap-meta{ flex:1; min-width:0; }
.uap-k{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#00a882; margin-bottom:4px; display:flex; align-items:center; gap:5px; }
.uap-k-lock{ color:#7a5af0; }
.uap-k-lock .uap-lock{ color:#7a5af0; }
.uap-d{ font-size:12px; color:#5a6180; line-height:1.42; font-weight:500; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.uap-len{ font-size:11px; font-weight:700; color:#5543c6; margin-top:6px; display:inline-block; }
.uap-cta{ font-size:12px; font-weight:800; color:#5543c6; margin-top:8px; display:inline-block; }
.uap-body-gated{ padding:13px; }

@media (max-width:640px){
  .uap-cluster{ margin-left:0; margin-top:8px; width:100%; }
  .uap-pill{ max-width:100%; }
  .uap-panel{ width:min(320px,92vw); }
  .uap-pill::after{ width:min(320px,92vw); }
}