/* Grow Rich Playlists — multi-track player (.gra-playlist). All rules scoped. */
.gra-playlist{
  --ink:#22291f; --muted:#5b6357;
  --forest:#15352a; --forest-deep:#0f261e;
  --brass:#b1843a; --brass-2:#caa25c; --brass-soft:#e7d6ad;
  --card:#fffdf8;
  --line:rgba(28,46,34,.14); --line-soft:rgba(28,46,34,.08);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;color:var(--ink);
  max-width:760px;margin:26px auto;background:var(--card);
  border:1px solid var(--line-soft);border-radius:16px;
  box-shadow:0 18px 40px -24px rgba(20,40,30,.45);
  padding:22px;box-sizing:border-box;line-height:1.5;
}
.gra-playlist *{box-sizing:border-box;margin:0;padding:0}
.gra-playlist audio{display:none}

/* book header */
.gpl-head{display:flex;gap:18px;align-items:center;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.gpl-cover{width:96px;height:auto;border-radius:10px;box-shadow:0 10px 22px -12px rgba(0,0,0,.5);flex:0 0 auto}
.gpl-head-text{min-width:0}
.gpl-title{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.45rem;line-height:1.15;color:var(--forest);letter-spacing:-.015em}
.gpl-author{color:var(--muted);font-size:.92rem;margin-top:4px}
.gpl-count{color:var(--brass);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-top:8px}

/* now playing line */
.gpl-now{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;min-height:1.3em}
.gpl-now-label{color:var(--brass);font-weight:700;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;flex:0 0 auto}
.gpl-now-title{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--forest);font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* transport + bar (mirrors the single gra-player) */
.gpl-player{display:flex;align-items:center;gap:13px;flex-wrap:wrap;background:#faf6ec;border:1px solid var(--line-soft);border-radius:12px;padding:13px 15px}
.gpl-transport{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.gpl-prev,.gpl-next,.gpl-back,.gpl-fwd{width:34px;height:34px;border:none;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--forest);position:relative;transition:background .15s}
.gpl-prev:hover,.gpl-next:hover,.gpl-back:hover,.gpl-fwd:hover{background:rgba(177,132,58,.15)}
.gpl-prev svg,.gpl-next svg{width:18px;height:18px;fill:currentColor}
.gpl-back svg,.gpl-fwd svg{width:20px;height:20px;fill:currentColor}
.gpl-skip-num{position:absolute;font-size:7.5px;font-weight:800;letter-spacing:0;color:currentColor;top:56%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.gpl-play{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(180deg,var(--brass-2),var(--brass));display:grid;place-items:center;box-shadow:0 9px 18px -8px rgba(177,132,58,.85);transition:transform .15s;margin:0 2px}
.gpl-play:hover{transform:scale(1.06)}
.gpl-play svg{width:20px;height:20px;fill:#241a09;grid-area:1/1}
.gpl-main{flex:1;min-width:140px}
.gpl-bar{height:8px;background:#e8dec9;border-radius:99px;position:relative;cursor:pointer}
.gpl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-2));border-radius:99px}
.gpl-knob{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--brass);transform:translate(-50%,-50%);box-shadow:0 1px 5px rgba(0,0,0,.35)}
.gpl-meta{display:flex;justify-content:space-between;margin-top:7px;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.gpl-speed select{-webkit-appearance:none;appearance:none;padding:5px 21px 5px 8px;border-radius:8px;border:1px solid var(--line);background-color:#f6f2e9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2315352a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:10px;font-size:.78rem;font-weight:700;color:var(--forest);cursor:pointer;font-family:inherit}
.gpl-dl{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--forest);transition:background .15s;text-decoration:none}
.gpl-dl:hover{background:rgba(177,132,58,.15)}
.gpl-dl svg{width:18px;height:18px;fill:currentColor}

/* track list */
.gpl-tracks{list-style:none;margin-top:16px;max-height:480px;overflow-y:auto;border-top:1px solid var(--line-soft);scrollbar-width:thin;scrollbar-color:#d8cdb4 transparent}
.gpl-tracks::-webkit-scrollbar{width:8px}
.gpl-tracks::-webkit-scrollbar-thumb{background:#d8cdb4;border-radius:99px}
.gpl-track button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--ink);text-align:left;border-bottom:1px solid var(--line-soft);transition:background .15s}
.gpl-track button:hover{background:rgba(177,132,58,.08)}
.gpl-track.current button{background:rgba(177,132,58,.13);box-shadow:inset 3px 0 0 var(--brass)}
.gpl-tnum{flex:0 0 26px;text-align:center;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.gpl-tplay{flex:0 0 26px;display:none;place-items:center;color:var(--brass)}
.gpl-tplay svg{width:14px;height:14px;fill:currentColor}
.gpl-tplay .tp-pause{display:none}
.gpl-track.current .gpl-tnum{display:none}
.gpl-track.current .gpl-tplay{display:grid}
.gpl-track.playing .tp-play{display:none}
.gpl-track.playing .tp-pause{display:block}
.gpl-tname{flex:1;font-weight:500;line-height:1.35;min-width:0}
.gpl-track.current .gpl-tname{color:var(--forest);font-weight:700}
.gpl-tdur{flex:0 0 auto;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}

/* mobile */
@media (max-width:560px){
  .gra-playlist{padding:16px;margin:16px 10px;border-radius:14px}
  .gpl-cover{width:72px}
  .gpl-title{font-size:1.2rem}
  .gpl-player{justify-content:center;row-gap:12px;column-gap:8px}
  .gpl-main{order:5;flex:1 1 100%}
  .gpl-now-title{white-space:normal}
  .gpl-tracks{max-height:420px}
}
.gpl-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.gpl-pager button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line-soft);border-radius:99px;padding:6px 15px;cursor:pointer;font:inherit;font-size:.86rem;font-weight:600;color:var(--forest);transition:background .15s,opacity .15s}
.gpl-pager button:hover:not(:disabled){background:rgba(177,132,58,.08)}
.gpl-pager button:disabled{opacity:.35;cursor:default}
.gpl-pager button svg{width:15px;height:15px;fill:currentColor}
.gpl-pinfo{font-size:.82rem;color:var(--ink);opacity:.7;min-width:84px;text-align:center;font-variant-numeric:tabular-nums}