/* ─────────────────────────────────────────────────────────────────────────────
   audio-player.css
   Calm at Speed — Field Notes audio component
   Designed to integrate with adamkakembo.com design system (styles.css)
───────────────────────────────────────────────────────────────────────────── */

/* ── INLINE PLAYER ──────────────────────────────────────────────────────────
   Sits between .article-header and .article-hero.
   Matches the column width and padding of those elements exactly.
─────────────────────────────────────────────────────────────────────────────*/

.audio-player {
  max-width: var(--col, 760px);
  margin: 0 auto;
  padding: 0 var(--col-pad, 32px);
}

.audio-player__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(154, 120, 80, 0.12);
  border-bottom: 1px solid rgba(154, 120, 80, 0.12);
}

/* ── PLAY / PAUSE BUTTON ── */

.audio-player__play {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid rgba(154, 120, 80, 0.30);
  color: var(--grey-lt, #b4b0aa);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s, color 0.2s;
  /* Minimum touch target — invisible expand via padding compensation */
  -webkit-tap-highlight-color: transparent;
}

.audio-player__play:hover {
  border-color: var(--bronze-lt, #c0986a);
  color: var(--bronze-lt, #c0986a);
}

.audio-player__play:focus-visible {
  outline: 1px solid rgba(154, 120, 80, 0.65);
  outline-offset: 3px;
}

.audio-player__play svg {
  width: 10px;
  height: 10px;
  display: block;
  fill: currentColor;
}

/* State-based icon switching */
.ap-icon-play  { display: block; }
.ap-icon-pause { display: none;  }
.audio-player.ap-playing .ap-icon-play  { display: none;  }
.audio-player.ap-playing .ap-icon-pause { display: block; }

/* ── INFO STRIP ── */

.audio-player__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* "Listen · X min" label — echoes the "8 min read" meta item */
.audio-player__label {
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 176, 170, 0.90);
  white-space: nowrap;
  flex: 0 0 auto;
  user-select: none;
}

/* ── PROGRESS / SCRUBBER ── */

.audio-player__progress-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  height: 24px;           /* generous touch target height */
  display: flex;
  align-items: center;
  cursor: pointer;
}

.audio-player__progress-bar {
  width: 100%;
  height: 1px;
  background: rgba(154, 120, 80, 0.18);
  position: relative;
  pointer-events: none;
}

.audio-player__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--bronze, #9a7850);
  width: 0%;
  transition: width 0.15s linear;
  pointer-events: none;
}

/* Transparent range input laid over the progress bar for native interaction */
.audio-player__scrubber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* ── TIME DISPLAY ── */

.audio-player__time {
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 0.60rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(138, 132, 128, 0.60);
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 3.2ch;
  text-align: right;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* ── SPEED TOGGLE ── */

.audio-player__speed {
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(154, 120, 80, 0.18);
  color: rgba(138, 132, 128, 0.55);
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.audio-player__speed:hover {
  border-color: rgba(154, 120, 80, 0.40);
  color: var(--grey-lt, #b4b0aa);
}

.audio-player__speed:focus-visible {
  outline: 1px solid rgba(154, 120, 80, 0.65);
  outline-offset: 3px;
}

/* ── PARAGRAPH SYNC ─────────────────────────────────────────────────────────
   Applied when timestamps JSON is loaded and playback has started.
   Only paragraphs with [data-ap-id] are affected.
─────────────────────────────────────────────────────────────────────────────*/

.article-body.ap-syncing p[data-ap-id] {
  transition: opacity 0.5s ease;
  opacity: 0.32;
}

.article-body.ap-syncing p[data-ap-id].ap-active {
  opacity: 1;
}

/* ── MINI PLAYER ────────────────────────────────────────────────────────────
   Fixed strip at the bottom of the viewport.
   Appears only when the main player has scrolled out of view and audio is
   playing. Dismisses when the user scrolls back up or pauses.
─────────────────────────────────────────────────────────────────────────────*/

.audio-mini {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: rgba(24, 23, 22, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(154, 120, 80, 0.15);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.0, 0.0, 0.2, 1);
  /* Start hidden but rendered — display:none prevents transition */
  pointer-events: none;
  visibility: hidden;
}

.audio-mini.ap-mini-visible {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.audio-mini__inner {
  max-width: var(--max, 1160px);
  margin: 0 auto;
  padding: 11px var(--pad, 48px);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Field note identifier + title */
.audio-mini__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}

.audio-mini__note {
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(154, 120, 80, 0.65);
  white-space: nowrap;
  flex: 0 0 auto;
  user-select: none;
}

.audio-mini__title {
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(244, 241, 235, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

/* Mini progress bar */
.audio-mini__bar-wrap {
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 220px;
  height: 20px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.audio-mini__bar {
  width: 100%;
  height: 1px;
  background: rgba(154, 120, 80, 0.15);
  pointer-events: none;
  position: relative;
}

.audio-mini__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--bronze, #9a7850);
  width: 0%;
  transition: width 0.15s linear;
  pointer-events: none;
}

.audio-mini__scrubber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Mini play/pause */
.audio-mini__play {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid rgba(154, 120, 80, 0.28);
  color: var(--grey-lt, #b4b0aa);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.audio-mini__play:hover {
  border-color: var(--bronze-lt, #c0986a);
  color: var(--bronze-lt, #c0986a);
}

.audio-mini__play:focus-visible {
  outline: 1px solid rgba(154, 120, 80, 0.65);
  outline-offset: 3px;
}

.audio-mini__play svg {
  width: 8px;
  height: 8px;
  display: block;
  fill: currentColor;
}

.ap-mini-icon-play  { display: block; }
.ap-mini-icon-pause { display: none;  }
.audio-mini.ap-playing .ap-mini-icon-play  { display: none;  }
.audio-mini.ap-playing .ap-mini-icon-pause { display: block; }

/* Dismiss button */
.audio-mini__close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: rgba(138, 132, 128, 0.38);
  cursor: pointer;
  font-size: 0.65rem;
  padding: 5px 4px;
  line-height: 1;
  transition: color 0.2s;
  margin-left: 2px;
  -webkit-tap-highlight-color: transparent;
}

.audio-mini__close:hover {
  color: var(--warm-grey, #8a8480);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────*/

@media (max-width: 768px) {
  .audio-player__inner {
    gap: 11px;
    padding: 15px 0;
  }

  /* Hide the text label on small screens — reading time is in the header */
  .audio-player__label {
    display: none;
  }

  /* Mini player: hide article title, keep note label + bar + controls */
  .audio-mini__title {
    display: none;
  }

  .audio-mini__inner {
    padding: 10px 20px;
    gap: 12px;
  }

  .audio-mini__bar-wrap {
    max-width: none;
  }
}

@media (max-width: 480px) {
  /* Speed control hidden on smallest screens — not essential for the experience */
  .audio-player__speed {
    display: none;
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .audio-player__progress-fill,
  .audio-mini__fill,
  .audio-mini,
  .article-body.ap-syncing p[data-ap-id] {
    transition: none;
  }
}