/* ───────────────────────────────────────────────────────────────────
   "Listen instead of reading" player for the /compare/ marketing pages.
   Visual language mirrors the /today briefing player: coral gradient
   play button, tortoise/hare speed stepper with a split-flap readout,
   and Tabler rewind-10 / forward-10 skip icons.

   Self-contained and namespaced under .listen-player / .lp-* so it can
   drop into any static page without colliding with that page's CSS.
   Driven by compare-player.js (reads data-src on .listen-player).
   ─────────────────────────────────────────────────────────────────── */
.listen-player{
  --lp-coral:#FF5A2D;--lp-paper:#FFFDF8;--lp-cream:#FFF3E6;
  --lp-ink:#2A1810;--lp-ink60:rgba(42,24,16,.6);--lp-ink40:rgba(42,24,16,.42);
  --lp-line:rgba(42,24,16,.1);--lp-accent-dim:rgba(255,90,45,.08);
  background:var(--lp-paper);
  border:1px solid var(--lp-line);
  border-left:4px solid var(--lp-coral);
  border-radius:20px;
  padding:22px 24px;
  margin:26px 0 0;
  box-shadow:0 20px 50px rgba(42,24,16,.08);
}

/* Call-to-action header — "rather listen than read?" */
.lp-cta{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.lp-cta-icon{font-size:26px;line-height:1;flex-shrink:0;}
.lp-cta-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.lp-cta-text strong{font-size:16px;color:var(--lp-ink);font-weight:700;}
.lp-cta-text span{font-size:14px;color:var(--lp-ink60);line-height:1.45;}

/* Controls row: skip+play | progress | speed */
.lp-controls{display:flex;align-items:center;gap:18px;}
.lp-play-row{display:flex;align-items:center;gap:14px;}
.lp-play{
  width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#FF7A4D,#FF5A2D);color:var(--lp-cream);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 8px 24px rgba(255,90,45,.4);
  transition:transform .15s,box-shadow .15s;
}
.lp-play:hover{transform:scale(1.07);box-shadow:0 12px 32px rgba(255,90,45,.5);}
.lp-play:active{transform:scale(.96);}
.lp-play svg{display:block;pointer-events:none;}

.lp-progress-wrap{flex:1;min-width:0;}
.lp-bar{height:6px;background:rgba(42,24,16,.1);border-radius:3px;cursor:pointer;position:relative;}
.lp-fill{height:100%;background:var(--lp-coral);border-radius:3px;width:0%;}
.lp-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:8px;margin-top:7px;}
.lp-time{font-size:12px;color:var(--lp-ink40);font-family:"DM Mono",ui-monospace,monospace;justify-self:start;}
.lp-skip-controls{justify-self:center;display:flex;gap:6px;}

/* ±10s skip buttons (Tabler rewind-backward-10 / rewind-forward-10) */
.lp-skip{
  width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--lp-ink60);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s,color .15s,transform .15s;
}
.lp-skip:hover{background:var(--lp-accent-dim);color:var(--lp-coral);}
.lp-skip:active{transform:scale(.9);}
.lp-skip svg{display:block;pointer-events:none;}
.lp-skip-m{display:none;} /* mobile-only pair, shown via media query */

/* Tortoise/hare speed stepper */
.lp-speed{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  background:var(--lp-cream);border:1px solid var(--lp-line);
  border-radius:999px;padding:4px;
}
.lp-speed button{
  width:36px;height:36px;border-radius:50%;border:0;background:var(--lp-paper);
  font-size:17px;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s,background .15s;
}
.lp-speed button:hover:not([disabled]){background:var(--lp-accent-dim);}
.lp-speed button:active:not([disabled]){transform:scale(.92);}
.lp-speed button[disabled]{opacity:.35;cursor:not-allowed;}
.lp-speed-readout{
  min-width:52px;text-align:center;overflow:hidden;perspective:200px;
  font-family:"DM Mono",ui-monospace,monospace;font-weight:600;
  font-size:14px;color:var(--lp-ink);
}
.lp-speed-value{display:inline-block;backface-visibility:hidden;}
.lp-speed-value.flip-up{animation:lp-flip-up .32s cubic-bezier(.34,1.56,.64,1) both;}
.lp-speed-value.flip-down{animation:lp-flip-down .32s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes lp-flip-up{
  0%{transform:translateY(70%) rotateX(-90deg);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateY(0) rotateX(0);opacity:1;}
}
@keyframes lp-flip-down{
  0%{transform:translateY(-70%) rotateX(90deg);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateY(0) rotateX(0);opacity:1;}
}

/* Mobile: restack vertically — skip pair moves beside the play button,
   the desktop skip pair under the timeline is hidden. */
@media(max-width:600px){
  .listen-player{padding:20px 18px;}
  .lp-controls{flex-direction:column;align-items:stretch;gap:16px;}
  .lp-play-row{justify-content:center;}
  .lp-skip-m{display:inline-flex;width:44px;height:44px;color:var(--lp-ink);}
  .lp-progress-wrap{width:100%;}
  .lp-meta{display:block;}
  .lp-time{text-align:center;}
  .lp-skip-controls{display:none;}
  .lp-speed{align-self:center;}
}