/* HHE Audio Player v5.3 — Sonar Rings + Integrated Transcripts */
.hhe-ap *,.hhe-ap *::before,.hhe-ap *::after{box-sizing:border-box;margin:0;padding:0}
.hhe-ap{
  --c:#8B3FC7;--c1:#C84BAF;--c2:#6040D4;
  --glow:rgba(139,63,199,.3);--soft:rgba(139,63,199,.05);--ring:rgba(139,63,199,.45);
  width:100%;background:#fff;border-radius:20px;overflow:hidden;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif!important;
  color:#1A1A2E!important;-webkit-font-smoothing:antialiased;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 20px rgba(0,0,0,.03);
}

/* ── Player ──────────────────── */
.hhe-ap__player{background:#fff;padding:40px 32px 32px;text-align:center}
.hhe-ap__info{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:32px}
.hhe-ap__art{width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0}
.hhe-ap__info-text{text-align:left}
.hhe-ap__label{font-family:'DM Sans',sans-serif!important;font-size:10px!important;font-weight:600!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#B0ADBA!important;line-height:1!important;margin-bottom:2px!important}
.hhe-ap__title{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:17px!important;font-weight:500!important;line-height:1.2!important;color:#1A1A2E!important;margin:0!important}
.hhe-ap__now{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:14px!important;font-weight:400!important;color:#8A879A!important;line-height:1.3!important;margin-top:2px!important;display:none}
.hhe-ap__player.has-ep .hhe-ap__now{display:block}

/* ── Play area with sonar rings ── */
.hhe-ap__play-area{
  position:relative;width:240px;height:240px;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
}

/* Filled discs, outermost first in DOM, layered via stacking */
.hhe-ap__ring{
  position:absolute;border-radius:50%;
  background:var(--ring);border:none;
  transition:transform .12s ease-out,opacity .12s ease-out;
}
/* Sizes: each step ~24px smaller. Outermost to innermost. */
.hhe-ap__ring--6{width:240px;height:240px;opacity:0}
.hhe-ap__ring--5{width:210px;height:210px;opacity:0}
.hhe-ap__ring--4{width:180px;height:180px;opacity:0}
.hhe-ap__ring--3{width:152px;height:152px;opacity:0}
.hhe-ap__ring--2{width:124px;height:124px;opacity:0}
.hhe-ap__ring--1{width:96px;height:96px;opacity:0}

/* Idle: subtle breathe */

/* Play button */
.hhe-ap__play{width:64px;height:64px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:transform .2s,box-shadow .3s;padding:0;line-height:1;box-shadow:0 6px 24px var(--glow)}
.hhe-ap__play:hover{transform:scale(1.06);box-shadow:0 8px 32px var(--glow)}
.hhe-ap__play:active{transform:scale(.95)}

/* ── Skip row ────────────────── */
.hhe-ap__skip-row{display:flex;align-items:center;justify-content:center;gap:40px;margin-bottom:24px}
.hhe-ap__skip{width:32px;height:32px;border:none;background:transparent;color:#D0CDD8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .15s;padding:0}
.hhe-ap__skip:hover{color:#1A1A2E;transform:scale(1.1)}

/* ── Progress ────────────────── */
.hhe-ap__progress{padding:0 8px}
.hhe-ap__bar{width:100%;height:3px;background:#EEEDF1;border-radius:2px;cursor:pointer;position:relative}
.hhe-ap__fill{height:100%;background:linear-gradient(90deg,var(--c1),var(--c2));border-radius:2px;width:0%;transition:width .1s linear;position:relative}
.hhe-ap__bar:hover .hhe-ap__fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--c),0 1px 4px rgba(0,0,0,.1)}
.hhe-ap__times{display:flex;justify-content:space-between;padding:8px 0 0}
.hhe-ap__time{font-family:'DM Sans',sans-serif!important;font-size:11px!important;font-weight:500!important;color:#C4C1CE!important;font-variant-numeric:tabular-nums!important;line-height:1!important;user-select:none}

/* ── Episode list ────────────── */
.hhe-ap__list{border-top:1px solid #F4F3F6}
.hhe-ap__list-hd{padding:18px 28px 10px;font-family:'DM Sans',sans-serif!important;font-size:11px!important;font-weight:600!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#D0CDD8!important;line-height:1!important}
.hhe-ap__ep{border-bottom:1px solid #F4F3F6;position:relative}
.hhe-ap__ep:last-child{border-bottom:none}
.hhe-ap__ep.is-on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--c1),var(--c2))}
.hhe-ap__ep-row{display:flex;align-items:center;gap:14px;padding:13px 28px;cursor:pointer;transition:background .15s}
.hhe-ap__ep-row:hover{background:#FBFAFD}
.hhe-ap__ep.is-on .hhe-ap__ep-row{background:var(--soft)}
.hhe-ap__ep-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid #EEEDF1;background:transparent;color:#B0ADBA;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;padding:0}
.hhe-ap__ep-btn:hover{border-color:var(--c);color:var(--c)}
.hhe-ap__ep.is-on .hhe-ap__ep-btn{border:none;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
.hhe-ap__ep-body{flex:1;min-width:0}
.hhe-ap__ep-title{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:16px!important;font-weight:500!important;color:#1A1A2E!important;line-height:1.3!important;margin-bottom:1px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhe-ap__ep-desc{font-family:'DM Sans',sans-serif!important;font-size:12px!important;font-weight:400!important;color:#B8B5C2!important;line-height:1.4!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhe-ap__ep-side{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hhe-ap__ep-date{font-family:'DM Sans',sans-serif!important;font-size:11px!important;font-weight:500!important;color:#D0CDD8!important;line-height:1!important;white-space:nowrap}
.hhe-ap__ep-dur{font-family:'DM Sans',sans-serif!important;font-size:11px!important;font-weight:500!important;color:#D0CDD8!important;font-variant-numeric:tabular-nums!important;line-height:1!important;white-space:nowrap}
.hhe-ap__ep-bars{display:none;align-items:flex-end;gap:1.5px;height:12px}
.hhe-ap__ep.is-on.is-playing .hhe-ap__ep-bars{display:flex}
.hhe-ap__ep.is-on.is-playing .hhe-ap__ep-dur{display:none}
.hhe-ap__ep-bars i{display:block;width:2px;border-radius:1px;background:linear-gradient(to top,var(--c1),var(--c2));animation:hhe-bar .7s ease-in-out infinite alternate}
.hhe-ap__ep-bars i:nth-child(1){height:5px;animation-delay:0s}
.hhe-ap__ep-bars i:nth-child(2){height:9px;animation-delay:.12s}
.hhe-ap__ep-bars i:nth-child(3){height:6px;animation-delay:.24s}
.hhe-ap__ep-bars i:nth-child(4){height:11px;animation-delay:.08s}
@keyframes hhe-bar{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}

/* ── Transcript toggle ───────── */
.hhe-ap__ep-tx-toggle{width:28px;height:28px;border:none;background:transparent;color:#D0CDD8;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s;padding:0;flex-shrink:0}
.hhe-ap__ep-tx-toggle:hover{color:var(--c);background:var(--soft)}
.hhe-ap__ep-tx-toggle[aria-expanded="true"]{color:var(--c);background:var(--soft)}

/* ── Inline transcript ───────── */
.hhe-ap__ep-tx{display:none;padding:0 28px 16px 76px;animation:hhe-tx-in .25s ease}
.hhe-ap__ep-tx.is-open{display:block}
@keyframes hhe-tx-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.hhe-ap__ep-tx-body{font-family:'DM Sans',sans-serif!important;font-size:13.5px!important;font-weight:400!important;color:#5A576A!important;line-height:1.75!important;border-left:2px solid #EEEDF1;padding-left:16px}
.hhe-ap__ep-tx-body p{margin-bottom:10px!important}
.hhe-ap__ep-tx-body p:last-child{margin-bottom:0!important}

/* ── Responsive ──────────────── */
@media(max-width:768px){
  .hhe-ap{border-radius:16px}
  .hhe-ap__player{padding:28px 20px 24px}
  .hhe-ap__info{margin-bottom:24px}
  .hhe-ap__play-area{width:190px;height:190px;margin-bottom:20px}
  .hhe-ap__ring--6{width:190px;height:190px}.hhe-ap__ring--5{width:166px;height:166px}
  .hhe-ap__ring--4{width:142px;height:142px}.hhe-ap__ring--3{width:120px;height:120px}
  .hhe-ap__ring--2{width:98px;height:98px}.hhe-ap__ring--1{width:78px;height:78px}
  .hhe-ap__play{width:52px;height:52px}
  .hhe-ap__skip-row{gap:32px;margin-bottom:20px}
  .hhe-ap__list-hd{padding:14px 20px 8px}
  .hhe-ap__ep-row{padding:11px 20px;gap:10px}
  .hhe-ap__ep-btn{width:30px;height:30px}
  .hhe-ap__ep-title{font-size:15px!important}
  .hhe-ap__ep-desc{display:none}
  .hhe-ap__ep-tx{padding:0 20px 14px 54px}
}
