/* assets/pp-player.css */
.pp-audio-player{
  --pp-bg:#0e0e11; --pp-fg:#fff; --pp-muted:#a5a5b0;
  --pp-track:#2a2b35; --pp-fill:#5a7cff; --pp-border:rgba(255,255,255,.08);
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border:1px solid var(--pp-border);
  border-radius:14px; background:var(--pp-bg); color:var(--pp-fg);
  width:100%; max-width:900px;
}
.pp-icon svg rect{ fill:var(--pp-icon, var(--pp-fill)); }
.pp-play{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--pp-border); background:var(--pp-btn-bg, #171821); cursor:pointer; }
.pp-time{ min-width:96px; text-align:center; font-variant-numeric:tabular-nums; color:var(--pp-muted); }
.pp-wave-wrap{ position:relative; flex:1; height:56px; cursor:pointer; display:flex; align-items:center; }
.pp-wave{ width:100%; height:100%; display:block; }
.pp-wave-wrap:focus{ outline:2px solid var(--pp-fill); outline-offset:2px; border-radius:8px; }
.pp-vol{ width:90px; }
.pp-volume{ appearance:none; width:100%; height:8px; border-radius:999px; background:#e6e6f0; border:1px solid var(--pp-border); }
.pp-volume::-webkit-slider-thumb{ appearance:none; width:14px; height:14px; border-radius:50%; background:var(--pp-fill); border:2px solid #111219; }
.pp-volume::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--pp-fill); border:2px solid #111219; }
@media (max-width:600px){ .pp-time{ display:none; } .pp-vol{ width:70px; } }

/* Ensure waveform is visible */
.pp-wave-wrap{min-height:56px}
.pp-wave{display:block;width:100%;height:56px}

/* Guarantee hidden icons are actually hidden */
.pp-icon[hidden]{ display:none !important; }

/* Strong color application to SVG */
.pp-audio-player .pp-icon svg *{ fill: var(--pp-icon, var(--pp-fill)) !important; stroke: var(--pp-icon, var(--pp-fill)) !important; }
.pp-audio-player .pp-play.is-playing .pp-icon svg *{ fill: var(--pp-icon-active, var(--pp-icon, var(--pp-fill))) !important; stroke: var(--pp-icon-active, var(--pp-icon, var(--pp-fill))) !important; }

/* Ensure play/pause icons use configured color */
.pp-audio-player .pp-icon-play, .pp-audio-player .pp-icon-pause, .pp-audio-player .pp-icon-play *, .pp-audio-player .pp-icon-pause *{ fill: var(--pp-icon, var(--pp-fill)) !important; stroke: var(--pp-icon, var(--pp-fill)) !important; }
.pp-audio-player .pp-play.is-playing .pp-icon-play, .pp-audio-player .pp-play.is-playing .pp-icon-pause, .pp-audio-player .pp-play.is-playing .pp-icon-play *, .pp-audio-player .pp-play.is-playing .pp-icon-pause *{ fill: var(--pp-icon-active, var(--pp-icon, var(--pp-fill))) !important; stroke: var(--pp-icon-active, var(--pp-icon, var(--pp-fill))) !important; }


/* Added: control row + now playing + share/skip buttons */
.pp-now{ font-weight:600; margin-bottom:.25rem; }
.pp-ctrl-row{ position:relative;  display:grid; grid-template-columns: 72px 1fr 72px 72px; gap:.5rem; align-items:center; margin-bottom:.25rem; }
.pp-ctrl-row .pp-play{ justify-self:center; }
.pp-ctrl-row .pp-btn{ height:36px; border-radius:999px; padding:0 .75rem; border:1px solid var(--pp-border); background:var(--pp-btn-bg, #171821); color:var(--pp-fg); cursor:pointer; }
.pp-ctrl-row .pp-share.copied{ filter:brightness(1.2); }


/* Layout: stack time, controls, then waveform */
.pp-audio-player{ flex-direction: column; align-items: stretch; }
.pp-time{ align-self:flex-start; margin-bottom: .25rem; }
.pp-ctrl-row{ position:relative;  width:100%; margin-bottom:.25rem; }
.pp-wave-wrap{ width:100%; }


/* Time beside waveform on larger screens */
.pp-wave-wrap{ display:flex; align-items:center; gap:8px; width:100%; }
.pp-wave-wrap .pp-time{ margin:0; min-width:96px; align-self:center; }
.pp-ctrl-row{ position:relative;  gap:.25rem; justify-items:center; grid-template-columns: auto auto auto auto; }
.pp-ctrl-row .pp-btn{ height:34px; padding:0 .6rem; }


/* Mobile time below waveform (no overlay) */
@media (max-width: 540px){
  .pp-wave-wrap{ display:block; width:100%; }
  .pp-wave-wrap .pp-time{
    position: static !important;
    display:flex;
    justify-content:space-between;
    gap:8px;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 2px !important;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    text-shadow: none !important;
    pointer-events: none;
  }
  .pp-wave-wrap .pp-time .pp-current,
  .pp-wave-wrap .pp-time .pp-duration{
    opacity:1 !important;
    color: var(--pp-fg, #fff) !important;
  }
}


/* --- Share popover (external script) + tighter spacing --- */
.pp-ctrl-row{ position:relative;  gap:8px !important; }
.pp-share-wrap{ position:relative; }
.pp-popover{ position:absolute; top:calc(100% + 8px); right:0; display:none; background: color-mix(in srgb, var(--pp-bg, #0e0e11) 92%, #000 8%); border:1px solid var(--pp-border, rgba(255,255,255,.12)); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25); padding:8px; z-index:30; }
.pp-popover.open{ display:flex; gap:8px; }
.pp-pop-btn{ display:flex; align-items:center; gap:8px; border:none; border-radius:10px; padding:8px 10px; background:var(--pp-btn-bg, #171821); color:var(--pp-fg,#fff); cursor:pointer; font-weight:600; text-decoration:none; }
.pp-pop-btn svg *{ fill: currentColor !important; stroke:none !important; }
@media (max-width:540px){ .pp-popover{ right:50%; transform:translateX(50%);} }


@media (min-width: 900px){
  .pp-ctrl-row{ position:relative;  gap:6px !important; }
  .pp-ctrl-row .pp-btn{ padding:0 10px !important; }
}


/* === v2.21 Controls cluster: use flex, tight gap === */
.pp-ctrl-row{ position:relative;  display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; flex-wrap:nowrap !important; }
.pp-ctrl-row .pp-btn{ padding:0 10px !important; height:34px !important; }
.pp-ctrl-row .pp-play{ width:40px; height:40px; display:grid; place-items:center; }
/* Make share icon visible with theme colors */
.pp-ctrl-row .pp-share svg *{ fill: currentColor !important; stroke: none !important; }


/* Share popover (safety) */
.pp-share-wrap{ position:relative; }
.pp-popover{ position:absolute; top:calc(100% + 8px); right:0; display:none; background: color-mix(in srgb, var(--pp-bg, #0e0e11) 92%, #000 8%); border:1px solid var(--pp-border, rgba(255,255,255,.12)); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25); padding:8px; z-index:30; }
.pp-popover.open{ display:flex; gap:8px; }
.pp-pop-btn{ display:flex; align-items:center; gap:8px; border:none; border-radius:10px; padding:8px 10px; background:var(--pp-btn-bg, #171821); color:var(--pp-fg,#fff); cursor:pointer; font-weight:600; text-decoration:none; }
.pp-pop-btn svg *{ fill: currentColor !important; stroke:none !important; }
@media (max-width:540px){ .pp-popover{ right:50%; transform:translateX(50%);} }

/* Share popover */
.pp-ctrl-row{ position:relative; position:relative;}
.pp-share-pop{position:absolute;z-index:9999;display:none;min-width:180px;background:var(--pp-bg,#0b0c12);color:var(--pp-fg,#fff);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:6px;}
.pp-share-pop.open{display:block;}
.pp-share-pop .pp-share-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;background:none;border:none;color:inherit;font:inherit;}
.pp-share-pop .pp-share-item:hover{background:color-mix(in srgb, var(--pp-fg,#fff) 8%, transparent);} 
.pp-share-pop .pp-share-item svg{width:18px;height:18px;}


/* Customizable icon colors */
.pp-ctrl-row .pp-back .pp-icon svg *, .pp-ctrl-row .pp-forward .pp-icon svg *{  fill: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;  stroke: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;}
.pp-ctrl-row .pp-share svg *{  fill: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;  stroke: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;}
.pp-now{ color: var(--pp-title, inherit); }


/* Stronger rules for customizable colors */
.pp-ctrl-row .pp-back svg, .pp-ctrl-row .pp-back svg *,
.pp-ctrl-row .pp-forward svg, .pp-ctrl-row .pp-forward svg *{
  color: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
  fill: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
  stroke: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-ctrl-row .pp-share svg, .pp-ctrl-row .pp-share svg *{
  color: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
  fill: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
  stroke: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-now{ color: var(--pp-title, inherit) !important; }


/* === Icon color overrides (from Appearance) === */
.pp-ctrl-row .pp-back svg,
.pp-ctrl-row .pp-back svg *,
.pp-ctrl-row .pp-forward svg,
.pp-ctrl-row .pp-forward svg * {
  color: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
  fill:  var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
  stroke:var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-ctrl-row .pp-share svg,
.pp-ctrl-row .pp-share svg * {
  color: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
  fill:  var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
  stroke:var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-now { color: var(--pp-title, inherit) !important; }


/* === Strong icon text color for skip/back/forward & share === */
.pp-ctrl-row .pp-back,
.pp-ctrl-row .pp-forward {
  color: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-ctrl-row .pp-back *,
.pp-ctrl-row .pp-forward * {
  color: inherit !important;
  fill:  currentColor !important;
  stroke: currentColor !important;
}
.pp-ctrl-row .pp-share {
  color: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-ctrl-row .pp-share svg,
.pp-ctrl-row .pp-share svg * {
  color: inherit !important;
  fill:  currentColor !important;
  stroke: currentColor !important;
}

/* Title */
.pp-now { color: var(--pp-title, inherit) !important; }


/* === Ensure Skip + Active icons obey custom colors === */
.pp-ctrl-row .pp-back, .pp-ctrl-row .pp-forward {
  color: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-ctrl-row .pp-back *, .pp-ctrl-row .pp-forward * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
.pp-ctrl-row .pp-share {
  color: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important;
}
.pp-ctrl-row .pp-share *, .pp-ctrl-row .pp-share svg * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Player play button idle vs active */
.pp-ctrl-row .pp-play .pp-icon svg * {
  fill: var(--pp-icon, var(--pp-fill)) !important;
  stroke: var(--pp-icon, var(--pp-fill)) !important;
}
.pp-ctrl-row .pp-play.active .pp-icon svg * {
  fill: var(--pp-icon-active, var(--pp-fill)) !important;
  stroke: var(--pp-icon-active, var(--pp-fill)) !important;
}


/* === Strong symbol coloring (single static colors) === */
.pp-ctrl-row .pp-back,
.pp-ctrl-row .pp-forward { color: var(--pp-skip-icon, var(--pp-icon, var(--pp-fill))) !important; }
.pp-ctrl-row .pp-back *, .pp-ctrl-row .pp-forward * { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; }

.pp-ctrl-row .pp-share { color: var(--pp-share-icon, var(--pp-icon, var(--pp-fill))) !important; }
.pp-ctrl-row .pp-share svg, .pp-ctrl-row .pp-share svg * { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; }

/* Play icon colors (idle vs active) */
.pp-ctrl-row .pp-play .pp-icon, .pp-ctrl-row .pp-play .pp-icon *, .pp-ctrl-row .pp-play svg, .pp-ctrl-row .pp-play svg * {
  color: var(--pp-icon, var(--pp-fill)) !important;
  fill:  var(--pp-icon, var(--pp-fill)) !important;
  stroke:var(--pp-icon, var(--pp-fill)) !important;
}
.pp-ctrl-row .pp-play.is-playing .pp-icon, .pp-ctrl-row .pp-play.is-playing .pp-icon *, .pp-ctrl-row .pp-play.is-playing svg, .pp-ctrl-row .pp-play.is-playing svg * {
  color: var(--pp-icon-active, var(--pp-icon, var(--pp-fill))) !important;
  fill:  var(--pp-icon-active, var(--pp-icon, var(--pp-fill))) !important;
  stroke:var(--pp-icon-active, var(--pp-icon, var(--pp-fill))) !important;
}


/* Absolute override for skip/share symbol colors */
.pp-ctrl-row .pp-back, .pp-ctrl-row .pp-forward { color: var(--pp-skip-icon) !important; }
.pp-ctrl-row .pp-share { color: var(--pp-share-icon) !important; }


/* Skip fallback spans should follow currentColor */
.pp-ctrl-row .pp-back .pp-sym,
.pp-ctrl-row .pp-back .pp-num,
.pp-ctrl-row .pp-forward .pp-sym,
.pp-ctrl-row .pp-forward .pp-num { color: currentColor !important; }


/* === Unified Popover Theming (legacy + new) === */
.pp-popover,
.pp-share-pop {
  background: var(--pp-pop-bg, #111111) !important;
  color: var(--pp-pop-fg, #E8E8E8) !important;
  border: 1px solid color-mix(in srgb, var(--pp-pop-fg, #E8E8E8) 12%, transparent) !important;
}
.pp-popover .pp-pop-btn,
.pp-share-pop .pp-share-item {
  color: var(--pp-pop-fg, #E8E8E8) !important;
}
.pp-popover .pp-pop-btn:hover,
.pp-share-pop .pp-share-item:hover {
  background: color-mix(in srgb, var(--pp-pop-fg, #E8E8E8) 8%, transparent) !important;
}
.pp-popover .pp-pop-btn svg, .pp-popover .pp-pop-btn svg *,
.pp-share-pop .pp-share-item svg, .pp-share-pop .pp-share-item svg * {
  color: currentColor !important; fill: currentColor !important; stroke: currentColor !important;
}


/* --- added by pp-hamburger-feeds.js (scoped) --- */
.pp-ctrl-row .pp-feeds{ width:38px; height:38px; border-radius:999px; border:1px solid var(--pp-border); background:var(--pp-btn-bg,#171821); display:grid; place-items:center; cursor:pointer; }
.pp-ctrl-row .pp-feeds .pp-burger{ display:block; width:16px; height:2px; background:var(--pp-icon, var(--pp-fill)); position:relative; }
.pp-ctrl-row .pp-feeds .pp-burger::before, .pp-ctrl-row .pp-feeds .pp-burger::after{ content:''; position:absolute; left:0; width:16px; height:2px; background:var(--pp-icon, var(--pp-fill)); }
.pp-ctrl-row .pp-feeds .pp-burger::before{ top:-5px; } .pp-ctrl-row .pp-feeds .pp-burger::after{ top:5px; }
.pp-feeds-pop{ top:54px;  position:absolute;  left:10px; z-index:30; min-width:240px; max-width:90vw; border:1px solid var(--pp-border); background:var(--pp-pop-bg,#101217); color:var(--pp-pop-fg,var(--pp-fg,#fff)); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35); padding:8px; }
.pp-feeds-pop[hidden]{ display:none !important; }
.pp-feeds-pop .pp-feed-item{ display:flex; width:100%; text-align:left; gap:8px; align-items:center; border:none; background:transparent; color:inherit; cursor:pointer; padding:8px 10px; border-radius:8px; }
.pp-feeds-pop .pp-feed-item:hover{ background:color-mix(in srgb, var(--pp-pop-fg,#fff) 8%, transparent); }
.pp-feeds-pop .pp-pop-empty{ opacity:.8; padding:8px 10px; }


/* Feeds button: grid dots icon */
.pp-ctrl-row .pp-feeds .pp-grid{
  display:grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap:3px;
}
.pp-ctrl-row .pp-feeds .pp-grid > span{
  width:4px; height:4px; border-radius:50%;
  background: var(--pp-ctrl, var(--pp-fill, #d97b00));
  display:block;
}

.pp-feeds-pop .pp-feed-nav,
.pp-feeds-pop .pp-feed-back{ display:block;width:100%;text-align:left;border:none;background:transparent;color:inherit;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600;}
.pp-feeds-pop .pp-feed-back{opacity:.8}
.pp-feeds-pop .pp-feed-nav:hover,
.pp-feeds-pop .pp-feed-back:hover{ background:color-mix(in srgb, var(--pp-pop-fg,#fff) 8%, transparent); }


/* Fallback: ensure pause icon shows while playing */
.pp-ctrl-row .pp-play .pp-icon-pause{ display:none; }
.pp-ctrl-row .pp-play.is-playing .pp-icon-pause{ display:inline; }
.pp-ctrl-row .pp-play.is-playing .pp-icon-play{ display:none; }


/* FINAL OVERRIDE: time labels follow Progress Track color */
.pp-audio-player .pp-time,
.pp-audio-player .pp-time .pp-current,
.pp-audio-player .pp-time .pp-duration{
  color: var(--pp-track, var(--pp-muted)) !important;
}
@media (max-width:600px){
  .pp-wave-wrap .pp-time,
  .pp-wave-wrap .pp-time .pp-current,
  .pp-wave-wrap .pp-time .pp-duration{
    color: var(--pp-track, var(--pp-muted)) !important;
  }
}