/* ============================================================
   shared/audio-player.css — AUD1's baseline player styles: the plain
   look "other series pick up" as-is (per the brief). Tinted Lens and
   About the Pursuit of Happiness keep their OWN page-local CSS for
   this markup unchanged (their existing look is proven identical by
   before/after screenshots, not by switching to this file) — this
   stylesheet is for a NEW synced audio embed (shared/blocks-to-
   html.mjs's case 'audio') on any series that doesn't author its own
   override. Cairns overrides these rules inside a slot (cairns.css,
   deferred to the LET1c merge).

   Generic site tokens only (var(--ink)/var(--accent)/var(--line)/…
   from /clarity-perspective/colors_and_type.css) so it themes
   correctly wherever it loads. 16px type floor; runtime behavior is
   shared/audio-player.js, not here.
   ============================================================ */

.audio{display:flex;align-items:center;gap:14px;margin:22px auto;max-width:64ch;
  background:color-mix(in srgb,var(--page-bg) 74%,transparent);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* AUD1 review: a docked (position:fixed) bar still lives inside whatever
   stacking context its article wraps it in (e.g. Cairns' .issue/.slot,
   both position:relative + z-index:1) - a later-in-DOM iframe (a video
   embed, a Spotify/Apple podcast card) at the same z-index painted OVER
   it. A high z-index here wins within that ancestor context regardless
   of DOM order, the same way the docked title-dock tab already does
   (shared/chrome.css's .nav is z-index:100 at the document root). */
.audio.docked{z-index:900}

.audio button.play{all:unset;cursor:pointer;flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--page-bg);
  background:var(--accent);transition:transform .25s var(--exhale)}
.audio button.play:hover{transform:scale(1.06)}
.audio button.play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.audio button.play svg{width:18px;height:18px}

.audio button.skip{all:unset;cursor:pointer;position:relative;flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
  border:1px solid var(--line);transition:color .25s,border-color .25s}
.audio button.skip:hover{color:var(--accent);border-color:var(--accent)}
.audio button.skip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.audio button.skip svg{width:14px;height:14px}
.audio button.skip .flash{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:16px;color:var(--accent);opacity:0;pointer-events:none;white-space:nowrap}
.audio button.skip .flash.anim{animation:audio-skip-flash 900ms var(--exhale)}
@keyframes audio-skip-flash{0%{opacity:0;transform:translate(-50%,4px)}20%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}

.audio .meta{flex:1;min-width:0;font-family:var(--mono)}
.audio .meta .t1{font-size:16px;letter-spacing:.04em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio .meta .t2{font-size:16px;letter-spacing:.03em;color:var(--ink-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio .meta .track{position:relative;height:5px;border-radius:3px;margin-top:9px;
  background:color-mix(in srgb,var(--ink) 14%,transparent);cursor:pointer}
.audio .meta .track i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent);font-style:normal}

.audio .time{flex:none;font-family:var(--mono);font-size:16px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

@media(max-width:480px){
  .audio{gap:10px;padding:12px 14px}
  .audio .time{display:none}
}