/* Sample audio player (SPEC §6.1) — used on /active-listening/ and
   /active-listening-parents/. Ported from the live site's own vanilla widget.

   Note: the live stylesheet has an invalid selector in its ≤768 block
   (`.play-icon, .pause-icon, {` — trailing comma), so the browser drops that
   rule and the icons stay 39px until the ≤480 block takes over. This file
   reproduces what actually renders, not the intended-but-dead rule. */

.sample-player{
  background:#ffffff;
  padding:36px 45px;
  border-radius:1000px;
  width:100%;
  margin:0 auto;
  font-family:var(--f-family);
  color:#341F12;
  box-sizing:border-box;
}

.sample-player__row{
  display:flex;
  align-items:center;
  gap:29px;
  flex-wrap:nowrap;
}

.sample-player__toggle{
  background:#FFF3E0;
  border:0;
  border-radius:100px;
  cursor:pointer;
  padding:20px;
  margin:0;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .2s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.sample-player__toggle:hover,
.sample-player__toggle:focus{ background:#FFE0B2; }
.sample-player__toggle:active{ background:#FFE0B2; transform:scale(.96); }

.sample-player__toggle svg{ width:39px; height:39px; }
.sample-player__toggle .icon-pause{ display:none; }
.sample-player.is-playing .icon-play{ display:none; }
.sample-player.is-playing .icon-pause{ display:block; }

.sample-player__progress{
  flex:1;
  position:relative;
  height:4px;
  background:#e0e0e0;
  border-radius:2px;
  cursor:pointer;
  border:0;
  padding:0;
}
.sample-player__line{
  height:100%; width:100%;
  overflow:hidden;
  border-radius:2px;
}
.sample-player__fill{
  height:100%; width:0%;
  background:#341F12;
  transition:width .1s linear;
}
.sample-player__dot{
  position:absolute; top:50%; left:0;
  transform:translate(-50%,-50%);
  width:12px; height:12px;
  background:#341F12;
  border-radius:50%;
  transition:left .1s linear;
  pointer-events:none;
}

.sample-player__time{
  font-size:24px; font-weight:300;
  display:flex; align-items:center; gap:4px;
  min-width:0; flex-shrink:0;
}
.sample-player__sep{ opacity:.6; }

@media (max-width:768px){
  .sample-player{ padding:15px 19px; }
  .sample-player__row{ gap:22px; }
  .sample-player__toggle{ padding:12px; }
  .sample-player__time{ font-size:14px; }
  .sample-player__dot{ width:10px; height:10px; }
}
@media (max-width:480px){
  .sample-player{ padding:10px 13px; }
  .sample-player__row{ gap:8px; }
  .sample-player__toggle{ padding:8px; }
  .sample-player__toggle svg{ width:15px; height:15px; }
  .sample-player__time{ font-size:10px; }
  .sample-player__dot{ width:8px; height:8px; }
}

@media (prefers-reduced-motion:reduce){
  .sample-player__fill,
  .sample-player__dot{ transition:none; }
}