/* ==========================================================================
   Bedtime sampler — "Listen to a Complete Hugs & Tales Bedtime Experience"
   Header, three story cards, waveform player and listening-mode pills.
   Markup: template-parts/bedtime-player.php · Script: assets/js/home-player.js
   Shared by the home page and the Audio (H&T Library) page; loads after
   audio-player.css so its .ht-library-audio overrides win the cascade.
   ========================================================================== */

/* ── Entrance animation — revealed when the section gets .is-visible ─────── */
.ht-library-experience__header .ht-library-why__divider,
.ht-library-experience__eyebrow,
.ht-library-experience__headline,
.ht-library-experience__desc {
  opacity:          0;
  transform:        translateY(16px);
  transition:       opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}
.ht-library-experience__eyebrow                                    { --d: 0s;  }
.ht-library-experience__headline                                   { --d: .1s; }
.ht-library-experience__header .ht-library-why__divider            { --d: .18s; }
.ht-library-experience__header .ht-library-experience__divider-top { --d: 0s; }
.ht-library-experience__desc                                       { --d: .27s; }

.ht-library-experience.is-visible .ht-library-experience__eyebrow,
.ht-library-experience.is-visible .ht-library-experience__headline,
.ht-library-experience.is-visible .ht-library-experience__header .ht-library-why__divider,
.ht-library-experience.is-visible .ht-library-experience__desc {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ht-library-experience__eyebrow, .ht-library-experience__headline,
  .ht-library-experience__header .ht-library-why__divider,
  .ht-library-experience__desc {
    opacity: 1; transform: none; transition: none;
  }
}

/* ── Heart divider (same look as home.css's .ht-library-why__divider) ────── */
.ht-library-experience__header .ht-library-why__divider {
  display:     flex;
  align-items: center;
  gap:         .75rem;
}
.ht-library-experience__header .ht-library-why__divider-line {
  height:      1.5px;
  width:       56px;
  background:  linear-gradient(to right, var(--primary-light), transparent);
  flex-shrink: 0;
}
.ht-library-experience__header .ht-library-why__divider-line:last-child {
  background: linear-gradient(to left, var(--primary-light), transparent);
}
.ht-library-experience__header .ht-library-why__divider-icon {
  color:       var(--primary);
  flex-shrink: 0;
  opacity:     .85;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.ht-library-experience__header {
  text-align:    center;
  max-width:     760px;
  margin:        0 auto clamp(2.25rem, 4vw, 3rem);
  position:      relative;
  z-index:       2;
}

.ht-library-products__header .ht-library-why__divider,
.ht-library-experience__header .ht-library-why__divider {
  justify-content: center;
  margin-top:      1.1rem;
}
.ht-library-experience__header .ht-library-experience__divider-top {
  margin: 0 0 1.2rem;
}
.ht-library-experience__divider-top .ht-library-experience__eyebrow { margin: 0; }


.ht-library-experience__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--primary-light);
  background:     rgba(255, 247, 240, .06);
  border:         1px solid rgba(255, 247, 240, .18);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin-bottom:  1.2rem;
}
.ht-library-experience__eyebrow::before,
.ht-library-experience__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .65;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library-experience__headline {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(2rem, 3vw + .5rem, 3rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.02em;
  line-height:    1.2;
  margin:         0 0 .2rem;
}

.ht-library-experience__desc {
  font-size:   clamp(1rem, 1vw + .6rem, 1.15rem);
  color:       rgba(255, 247, 240, .75);
  line-height: 1.85;
  margin:      1.1rem auto 0;
  max-width:   64ch;
}

/* ── Section surface — flat dark background over audio-player.css's textured one ── */
.ht-library-audio {
  background-image: none;
  background-color: #181512;
}
.ht-library-audio::before,
.ht-library-audio::after {
  content: none;
}
/* Soft bottom divider under the section */
.ht-library-experience.ht-library-audio::after {
  content:        '';
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .4), transparent);
  pointer-events: none;
}

/* ── Bedtime sampler — three story cards, waveform player, listening mode ── */
.ht-library-bt {
  /* Theme — Storytime (default): warm gold / fire. Dreamtime swaps these below. */
  --bt-accent:      #F29A3E;
  --bt-rgb:         242, 154, 62;   /* main accent */
  --bt-pale-rgb:    255, 210, 122;  /* pale highlight */
  --bt-hot-rgb:     255, 122, 69;   /* deep flame */
  --bt-hi-rgb:      255, 190, 100;  /* bright glow */
  --bt-c1:          #FFD27A;        /* border light colours */
  --bt-c2:          #FF7A45;
  --bt-c3:          #FFB347;
  --bt-c4:          #FFE9A8;
  --bt-knob:        #FBD9B6;        /* play button + seek thumb */
  --bt-knob-ink:    #3A2416;
  --bt-btn-bg:      rgba(30, 18, 10, .7);
  --bt-btn-ink:     #FFE7CF;
  --bt-text-hi:     #FFD9B3;
  --bt-accent-soft: rgba(var(--bt-rgb), .45);
  --bt-panel:       rgba(255, 247, 240, .03);
  position:        relative;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             clamp(1.25rem, 2.5vw, 1.75rem);
  opacity:         0;
  transform:       translateY(16px);
  transition:      opacity .6s ease .35s, transform .6s ease .35s;
}
.ht-library-experience.is-visible .ht-library-bt { opacity: 1; transform: none; }
/* Dreamtime — electric "lightning" blue, sampled from the frame of the top story
   card in the home hero banner (slide-1.webp): deep royal glow → bright cyan-white edge. */
.ht-library-bt.is-dream {
  --bt-accent:      #60B1E7;        /* bright edge average */
  --bt-rgb:         62, 124, 195;   /* #3E7CC3 — main glow */
  --bt-pale-rgb:    143, 216, 248;  /* #8FD8F8 — cyan-white core */
  --bt-hot-rgb:     43, 101, 173;   /* #2B65AD — royal outer glow */
  --bt-hi-rgb:      86, 159, 218;   /* #569FDA */
  --bt-c1:          #8FD8F8;
  --bt-c2:          #2B65AD;
  --bt-c3:          #569FDA;
  --bt-c4:          #E6F8FF;        /* white-hot spark */
  --bt-ring-base:   rgba(18, 69, 141, .85); /* #12458D — deep base */
  --bt-knob:        #CFEFFF;
  --bt-knob-ink:    #12458D;
  --bt-btn-bg:      rgba(10, 28, 58, .75);
  --bt-btn-ink:     #E6F8FF;
  --bt-text-hi:     #BEE9FB;
  --bt-panel:       rgba(43, 101, 173, .1);
}
/* Neon intensity to match the banner: brighter rings, stronger electric glow */
.ht-library-bt.is-dream .ht-library-bt__card,
.ht-library-bt.is-dream .ht-library-bt__mode { --bt-ring-o: .95; }
.ht-library-bt.is-dream .ht-library-bt__card.is-active {
  --bt-ring: 3px;
  animation: ht-library-bt-neon 3.5s ease-in-out infinite;
}
.ht-library-bt.is-dream .ht-library-bt__player {
  --bt-ring-o: 1;
  box-shadow: 0 0 0 1px rgba(143, 216, 248, .25), 0 0 30px rgba(62, 124, 195, .55), 0 0 70px rgba(43, 101, 173, .3), inset 0 0 24px rgba(62, 124, 195, .12);
}
@keyframes ht-library-bt-neon {
  0%, 100% { box-shadow: 0 0 0 1px rgba(143, 216, 248, .55), 0 0 18px rgba(96, 177, 231, .8),  0 0 44px rgba(62, 124, 195, .6),  0 0 90px rgba(43, 101, 173, .35), 0 18px 40px rgba(0, 0, 0, .45); }
  50%      { box-shadow: 0 0 0 1px rgba(230, 248, 255, .85), 0 0 26px rgba(143, 216, 248, .95), 0 0 60px rgba(86, 159, 218, .75), 0 0 120px rgba(43, 101, 173, .5), 0 18px 40px rgba(0, 0, 0, .45); }
}

/* Multicolour "lighting" border — a rotating conic gradient masked to a ring.
   Shared by the story cards, the player bar and the listening-mode pills. */
@property --bt-angle {
  syntax:        '<angle>';
  inherits:      false;
  initial-value: 0deg;
}
.ht-library-bt__card::before,
.ht-library-bt__player::before,
.ht-library-bt__mode::before {
  content:        '';
  position:       absolute;
  inset:          0;
  z-index:        1;
  padding:        var(--bt-ring, 1.5px);
  border-radius:  inherit;
  background:     conic-gradient(from var(--bt-angle),
                    var(--bt-ring-base, rgba(var(--bt-rgb), .3)) 0deg,
                    var(--bt-c1) 45deg,
                    var(--bt-c2) 90deg,
                    var(--bt-ring-base, rgba(var(--bt-rgb), .3)) 150deg,
                    var(--bt-c3) 205deg,
                    var(--bt-c4) 245deg,
                    var(--bt-ring-base, rgba(var(--bt-rgb), .3)) 300deg,
                    var(--bt-ring-base, rgba(var(--bt-rgb), .3)) 360deg);
  -webkit-mask:   linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:        var(--bt-ring-o, .6);
  pointer-events: none;
  animation:      ht-library-bt-ring 7s linear infinite;
  transition:     opacity var(--bpt-t-slow);
}
@keyframes ht-library-bt-ring {
  to { --bt-angle: 360deg; }
}

/* Glow — a soft golden halo that gently breathes in and out */
@keyframes ht-library-bt-flash {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--bt-pale-rgb), .25), 0 0 24px rgba(var(--bt-rgb), .5),  0 0 56px rgba(var(--bt-hot-rgb), .22), 0 18px 40px rgba(0, 0, 0, .45); }
  50%      { box-shadow: 0 0 0 1px rgba(var(--bt-pale-rgb), .45), 0 0 38px rgba(var(--bt-hi-rgb), .75), 0 0 90px rgba(var(--bt-hot-rgb), .38), 0 18px 40px rgba(0, 0, 0, .45); }
}

/* Cards row — the middle story is the featured, larger card */
.ht-library-bt__cards {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  align-items:           center;
  gap:                   clamp(.75rem, 1.6vw, 1.25rem);
  width:                 100%;
}

.ht-library-bt__card {
  position:        relative;
  display:         block;
  aspect-ratio:    5 / 4;
  border-radius:   clamp(16px, 2vw, 22px);
  overflow:        hidden;
  border:          0;
  background:      #241a12;
  color:           #FFF7F0;
  text-decoration: none;
  cursor:          pointer;
  isolation:       isolate;
  box-shadow:      0 14px 32px rgba(0, 0, 0, .4);
  transition:      transform var(--bpt-t-slow), box-shadow var(--bpt-t-slow);
}
.ht-library-bt__card:hover { transform: translateY(-3px); --bt-ring-o: .9; }
.ht-library-bt__card:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 3px; }
.ht-library-bt__card.is-active {
  --bt-ring:   2.5px;
  --bt-ring-o: 1;
  animation:   ht-library-bt-flash 3.5s ease-in-out infinite;
}

.ht-library-bt__card-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -2;
  transition: transform .8s ease;
}
.ht-library-bt__card:hover .ht-library-bt__card-img { transform: scale(1.04); }

/* Locked stories are display-only — no pointer, no hover lift or zoom */
.ht-library-bt__card.is-locked { cursor: default; }
.ht-library-bt__card.is-locked:hover { transform: none; --bt-ring-o: .6; }
.ht-library-bt__card.is-locked:hover .ht-library-bt__card-img { transform: none; }

.ht-library-bt__card-shade {
  position:   absolute;
  inset:      0;
  z-index:    -1;
  background: linear-gradient(to top, rgba(18, 12, 8, .88) 0%, rgba(18, 12, 8, .35) 34%, transparent 58%);
}
.ht-library-bt__card.is-locked .ht-library-bt__card-shade {
  background: linear-gradient(to top, rgba(18, 12, 8, .88) 0%, rgba(18, 12, 8, .35) 34%, rgba(18, 12, 8, .12) 60%);
}

/* Centre lock / big play button */
.ht-library-bt__card-lock,
.ht-library-bt__card-btn {
  position:        absolute;
  top:             42%; /* centred in the image area above the title text */
  left:            50%;
  transform:       translate(-50%, -50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
}
.ht-library-bt__card-lock {
  width:      clamp(48px, 5vw, 64px);
  height:     clamp(48px, 5vw, 64px);
  background: rgba(18, 12, 8, .55);
  border:     2px solid rgba(255, 247, 240, .85);
  color:      #FFF7F0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ht-library-bt__card-btn {
  width:      clamp(58px, 6vw, 78px);
  height:     clamp(58px, 6vw, 78px);
  padding:    0;
  background: var(--bt-btn-bg);
  border:     3px solid var(--bt-accent);
  color:      var(--bt-btn-ink);
  cursor:     pointer;
  box-shadow: 0 0 22px var(--bt-accent-soft);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--bpt-t), box-shadow var(--bpt-t);
}
.ht-library-bt__card-btn svg { width: 42%; height: 42%; }
.ht-library-bt__card:not(.is-active) .ht-library-bt__card-btn { opacity: .85; }
.ht-library-bt__card-btn:hover { background: rgba(var(--bt-rgb), .25); }
.ht-library-bt__card-btn:focus-visible { outline: 2px solid #FFF7F0; outline-offset: 3px; }
.ht-library-bt.is-playing .ht-library-bt__card.is-active .ht-library-bt__card-btn {
  animation: ht-library-bt-pulse 2.2s ease-in-out infinite;
}
@keyframes ht-library-bt-pulse {
  0%, 100% { box-shadow: 0 0 18px var(--bt-accent-soft); }
  50%      { box-shadow: 0 0 34px rgba(var(--bt-rgb), .75); }
}

/* Bottom meta — play circle + title + reference */
.ht-library-bt__card-meta {
  position:    absolute;
  left:        clamp(.75rem, 1.4vw, 1.1rem);
  right:       clamp(.75rem, 1.4vw, 1.1rem);
  bottom:      clamp(.75rem, 1.4vw, 1.1rem);
  display:     flex;
  align-items: center;
  gap:         clamp(.6rem, 1.2vw, 1rem);
}
.ht-library-bt__card-icon {
  flex-shrink:     0;
  width:           clamp(36px, 3.6vw, 46px);
  height:          clamp(36px, 3.6vw, 46px);
  border-radius:   50%;
  border:          2px solid #FFF7F0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #FFF7F0;
  padding-left:    2px;
}
.ht-library-bt__card-text {
  display:        flex;
  flex-direction: column;
  min-width:      0;
  flex:           1;
  text-align:     center;
}
.ht-library-bt__card-title {
  font-family:   var(--bpt-heading-font);
  font-size:     clamp(1rem, 1.25vw + .35rem, 1.45rem);
  font-weight:   700;
  line-height:   1.2;
  color:         #FFF7F0;
  text-shadow:   0 2px 10px rgba(0, 0, 0, .55);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.ht-library-bt__card-ref {
  font-size:   clamp(.78rem, .5vw + .55rem, .95rem);
  color:       rgba(255, 247, 240, .78);
  margin-top:  .15rem;
}

/* Player bar */
.ht-library-bt__player {
  --bt-ring:     2px;
  --bt-ring-o:   .9;
  position:      relative;
  width:         min(100%, 880px);
  display:       flex;
  align-items:   center;
  gap:           clamp(.85rem, 2vw, 1.5rem);
  padding:       clamp(.85rem, 1.8vw, 1.25rem) clamp(1rem, 2.5vw, 1.75rem);
  border-radius: clamp(18px, 2vw, 24px);
  background:    var(--bt-panel);
  box-shadow:    0 0 26px rgba(var(--bt-rgb), .22), inset 0 0 22px rgba(var(--bt-rgb), .05);
}
.ht-library-bt__player > * { position: relative; z-index: 2; }

.ht-library-bt__play {
  flex-shrink:     0;
  width:           clamp(56px, 6vw, 84px);
  height:          clamp(56px, 6vw, 84px);
  border-radius:   50%;
  border:          0;
  padding:         0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bt-knob);
  color:           var(--bt-knob-ink);
  cursor:          pointer;
  box-shadow:      0 0 24px rgba(var(--bt-rgb), .55);
  transition:      transform var(--bpt-t), box-shadow var(--bpt-t);
}
.ht-library-bt__play svg { width: 40%; height: 40%; }
.ht-library-bt__play:hover { transform: scale(1.05); box-shadow: 0 0 32px rgba(var(--bt-rgb), .75); }
.ht-library-bt__play:focus-visible { outline: 2px solid #FFF7F0; outline-offset: 3px; }
.ht-library-bt__play:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.ht-library-bt__timeline {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
}

/* Waveform — base bars + an amber copy clipped to the played portion */
.ht-library-bt__wave {
  --p:      0%;
  position: relative;
  height:   clamp(36px, 4.2vw, 54px);
  cursor:   pointer;
}
.ht-library-bt__wave-base,
.ht-library-bt__wave-fill {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
/* Thin bars that dance only while audio plays (frozen in place when paused) */
.ht-library-bt__wave span {
  flex:                 0 0 3px;
  height:               var(--h);
  border-radius:        2px;
  background:           rgba(255, 247, 240, .55);
  transform-origin:     center;
  animation:            ht-library-bt-wave 1.6s ease-in-out var(--dl, 0s) infinite;
  animation-play-state: paused;
}
.ht-library-bt.is-playing .ht-library-bt__wave span { animation-play-state: running; }
@keyframes ht-library-bt-wave {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.6); }
}
.ht-library-bt__wave-fill { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ht-library-bt__wave-fill span {
  background: var(--bt-accent);
  box-shadow: 0 0 6px rgba(var(--bt-rgb), .6);
}

/* Seek bar + time */
.ht-library-bt__progress {
  display:     flex;
  align-items: center;
  gap:         clamp(.75rem, 1.5vw, 1.1rem);
}
.ht-library-bt__bar {
  position:      relative;
  flex:          1;
  height:        4px;
  border-radius: 4px;
  background:    rgba(255, 247, 240, .18);
}
.ht-library-bt__bar-fill {
  position:      absolute;
  inset:         0 auto 0 0;
  width:         0;
  border-radius: inherit;
  background:    var(--bt-accent);
  box-shadow:    0 0 8px rgba(var(--bt-rgb), .6);
}
.ht-library-bt__bar-fill::after {
  content:       '';
  position:      absolute;
  right:         -9px;
  top:           50%;
  width:         18px;
  height:        18px;
  margin-top:    -9px;
  border-radius: 50%;
  background:    var(--bt-knob);
  box-shadow:    0 0 12px rgba(var(--bt-rgb), .8);
}
.ht-library-bt__seek {
  position:   absolute;
  inset:      -10px 0;
  width:      100%;
  height:     24px;
  margin:     0;
  opacity:    0;
  cursor:     pointer;
}
.ht-library-bt__bar:focus-within { outline: 2px solid var(--bt-accent); outline-offset: 6px; border-radius: 4px; }
.ht-library-bt__time {
  flex-shrink:          0;
  font-size:            clamp(.82rem, .5vw + .6rem, 1rem);
  color:                rgba(255, 247, 240, .9);
  font-variant-numeric: tabular-nums;
}

.ht-library-bt__vol {
  flex-shrink: 0;
  width:       clamp(44px, 4.6vw, 60px);
  height:      clamp(44px, 4.6vw, 60px);
  padding:     0;
  border:      0;
  background:  none;
  color:       #FFF7F0;
  display:     flex;
  align-items: center;
  justify-content: center;
  cursor:      pointer;
  border-radius: 50%;
  transition:  color var(--bpt-t);
}
.ht-library-bt__vol svg { width: 78%; height: 78%; }
.ht-library-bt__vol:hover { color: var(--bt-accent); }
.ht-library-bt__vol:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; }
.ht-library-bt__vol-x                              { display: none; }
.ht-library-bt__vol.is-muted .ht-library-bt__vol-x { display: inline; }
.ht-library-bt__vol.is-muted .ht-library-bt__vol-waves { display: none; }

/* Listening mode pills */
.ht-library-bt__modes {
  display:         flex;
  justify-content: center;
  gap:             clamp(.75rem, 2vw, 1.25rem);
  width:           min(100%, 470px);
}
.ht-library-bt__mode {
  --bt-ring-o:   .4;
  position:      relative;
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           clamp(.6rem, 1.2vw, .85rem);
  padding:       .65rem clamp(.9rem, 2vw, 1.25rem) .65rem clamp(.8rem, 1.6vw, 1rem);
  border-radius: 999px;
  border:        0;
  background:    rgba(255, 247, 240, .03);
  color:         #FFF7F0;
  text-align:    left;
  cursor:        pointer;
  transition:    box-shadow var(--bpt-t), background var(--bpt-t);
}
.ht-library-bt__mode:hover { --bt-ring-o: .75; }
.ht-library-bt__mode:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 3px; }
.ht-library-bt__mode.is-active {
  --bt-ring:   2px;
  --bt-ring-o: 1;
  background:  rgba(var(--bt-rgb), .06);
  box-shadow:  0 0 22px rgba(var(--bt-rgb), .35), inset 0 0 14px rgba(var(--bt-rgb), .25);
  animation:   ht-library-bt-mode-glow 3s ease-in-out infinite;
}
/* Active mode — inner and outer golden glow gently breathing together */
@keyframes ht-library-bt-mode-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--bt-rgb), .3),  inset 0 0 12px rgba(var(--bt-rgb), .2); }
  50%      { box-shadow: 0 0 30px rgba(var(--bt-hi-rgb), .5), inset 0 0 22px rgba(var(--bt-hi-rgb), .42); }
}
.ht-library-bt__mode:disabled { opacity: .45; cursor: not-allowed; }
.ht-library-bt__mode-icon {
  flex-shrink: 0;
  width:       clamp(28px, 3vw, 36px);
  height:      clamp(36px, 3.8vw, 46px);
  color:       #FFF7F0;
}
.ht-library-bt__mode.is-active .ht-library-bt__mode-icon { color: var(--bt-accent); }
.ht-library-bt__mode-text { display: flex; flex-direction: column; min-width: 0; }
.ht-library-bt__mode-name {
  font-size:      clamp(.78rem, .4vw + .6rem, .9rem);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height:    1.3;
}
.ht-library-bt__mode.is-active .ht-library-bt__mode-name { color: var(--bt-text-hi); }
.ht-library-bt__mode-desc {
  font-size:   clamp(.74rem, .3vw + .6rem, .84rem);
  line-height: 1.3;
  color:       rgba(255, 247, 240, .82);
}

/* Tablet */
@media (max-width: 900px) {
  .ht-library-bt__card-icon { display: none; }
}

/* Mobile — cards become a swipe row with the active story centred */
@media (max-width: 640px) {
  .ht-library-bt__cards {
    display:          flex;
    gap:              .85rem;
    overflow-x:       auto;
    scroll-snap-type: x mandatory;
    scrollbar-width:  none;
    margin-inline:    calc(-1 * var(--bpt-side-pad, 1rem));
    padding:          .9rem var(--bpt-side-pad, 1rem);
    width:            auto;
    align-self:       stretch;
  }
  .ht-library-bt__cards::-webkit-scrollbar { display: none; }
  .ht-library-bt__cards { align-items: center; }
  .ht-library-bt__card {
    flex:              0 0 72%;
    scroll-snap-align: center;
  }
  .ht-library-bt__card:nth-child(2) { flex-basis: 78%; }
  .ht-library-bt__card-icon { display: flex; }

  .ht-library-bt__player   { gap: .75rem; padding: .75rem .9rem; }
  .ht-library-bt__vol      { width: 42px; height: 42px; }
  .ht-library-bt__wave span:nth-child(even) { display: none; }
  .ht-library-bt__bar-fill::after { width: 14px; height: 14px; margin-top: -7px; right: -7px; }

  .ht-library-bt__mode      { padding: .55rem .8rem .55rem .7rem; gap: .5rem; }
  .ht-library-bt__mode-icon { width: 26px; height: 34px; }
}

@media (max-width: 380px) {
  .ht-library-bt__modes { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .ht-library-bt { opacity: 1; transform: none; transition: none; }
  .ht-library-bt__card,
  .ht-library-bt__card-img { transition: none; }
  .ht-library-bt__card:hover,
  .ht-library-bt__card:hover .ht-library-bt__card-img { transform: none; }
  .ht-library-bt__card.is-active,
  .ht-library-bt__card.is-active:hover { transform: none; }
  .ht-library-bt.is-playing .ht-library-bt__card.is-active .ht-library-bt__card-btn { animation: none; }
  .ht-library-bt__card::before,
  .ht-library-bt__player::before,
  .ht-library-bt__mode::before,
  .ht-library-bt__mode.is-active,
  .ht-library-bt__card.is-active,
  .ht-library-bt__wave span { animation: none; }
  .ht-library-bt__card.is-active { box-shadow: 0 0 0 1px rgba(var(--bt-pale-rgb), .3), 0 0 30px rgba(var(--bt-rgb), .6), 0 18px 40px rgba(0, 0, 0, .45); }
  .ht-library-bt.is-dream .ht-library-bt__card.is-active { animation: none; box-shadow: 0 0 0 1px rgba(143, 216, 248, .6), 0 0 22px rgba(96, 177, 231, .85), 0 0 60px rgba(62, 124, 195, .6), 0 18px 40px rgba(0, 0, 0, .45); }
}