/* ═══════════════════════════════════════════════════════════════
   TP Pill-Strip Audio Player — shared styles
   Used by: tp-pill-player.html (card) and tp-pill-player-bar.html
   ═══════════════════════════════════════════════════════════════ */

:root{
  --tp-gold:#d4af37;
  --tp-blue:#4a9eff;
  --tp-purple:#a855f7;
  --tp-red:#dc2626;
  --tp-teal:#3bb39a;
  --tp-orange:#f59e0b;
}

/* ── Card version ── */
.tp-pill-player{
  max-width:760px;
  margin:0 auto;
  background:#0a0a0a;
  border:1px solid #222;
  border-radius:14px;
  padding:1rem 1.1rem 1.1rem;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

/* ── Thin bar version ── */
.tp-pill-bar{
  width:100%;
  background:#0a0a0a;
  border-bottom:1px solid #222;
  padding:.5rem 1rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}
@media(max-width:760px){
  .tp-pill-bar{flex-direction:column;align-items:stretch;gap:.5rem}
}

/* ── Pill strip ── */
.tp-pill-strip{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.tp-pill-bar .tp-pill-strip{flex:1;min-width:0}

.tp-pill{
  appearance:none;
  border:1px solid #333;
  background:#111;
  color:#9a9a9a;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.35rem .75rem;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  white-space:nowrap;
}
.tp-pill:hover:not(.active){border-color:#444;color:#e5e3df;background:#181818}
.tp-pill.active{color:#fff;border-color:currentColor;background:rgba(255,255,255,.08)}
.tp-pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}

.tp-pill[data-mode="deep"].active{color:var(--tp-blue);box-shadow:0 0 10px rgba(74,158,255,.2)}
.tp-pill[data-mode="debate"].active{color:var(--tp-purple);box-shadow:0 0 10px rgba(168,85,247,.2)}
.tp-pill[data-mode="critique"].active{color:var(--tp-red);box-shadow:0 0 10px rgba(220,38,38,.2)}
.tp-pill[data-mode="tts"].active{color:var(--tp-teal);box-shadow:0 0 10px rgba(59,179,154,.2)}
.tp-pill[data-mode="web"].active{color:var(--tp-orange);box-shadow:0 0 10px rgba(245,158,11,.2)}
.tp-pill[data-mode="default"].active{color:var(--tp-gold);box-shadow:0 0 10px rgba(212,175,55,.2)}

/* ── Card controls ── */
.tp-now-playing{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5a5a5a;
  margin-bottom:.6rem;
}
.tp-now-playing .mode-dot{width:6px;height:6px;border-radius:50%;background:var(--tp-gold);flex-shrink:0}
.tp-controls{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.tp-btn{
  appearance:none;border:none;background:transparent;color:#9a9a9a;cursor:pointer;
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;transition:all .15s ease;flex-shrink:0;
}
.tp-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.tp-btn.play{width:42px;height:42px;border:1.5px solid var(--tp-gold);color:var(--tp-gold);font-size:1rem}
.tp-btn.play:hover{background:rgba(212,175,55,.1);box-shadow:0 0 14px rgba(212,175,55,.2)}

.tp-progress-wrap{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.tp-track{height:5px;background:rgba(255,255,255,.06);border-radius:3px;cursor:pointer;position:relative;overflow:hidden}
.tp-fill{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--tp-gold),#e8c84a);transition:width .1s linear}
.tp-time-row{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.56rem;color:#5a5a5a}

.tp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:.7rem;padding-top:.7rem;border-top:1px solid #222}
.tp-speed-label{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#5a5a5a;margin-right:.25rem}
.tp-speed-select{appearance:none;background:#111;border:1px solid #333;border-radius:6px;color:#e5e3df;font-family:'JetBrains Mono',monospace;font-size:.58rem;padding:.3rem .5rem;cursor:pointer;min-width:60px}
.tp-speed-select:focus{outline:none;border-color:var(--tp-gold)}
.tp-volume-group{display:flex;align-items:center;gap:.4rem}
.tp-volume-slider{-webkit-appearance:none;appearance:none;width:70px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer}
.tp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--tp-gold);cursor:pointer}
.tp-volume-slider::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--tp-gold);cursor:pointer;border:none}

/* ── Thin bar controls ── */
.tp-bar-controls{display:flex;align-items:center;gap:.6rem;min-width:0}
.tp-bar-play{appearance:none;border:none;background:transparent;color:var(--tp-gold);cursor:pointer;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--tp-gold);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;transition:all .15s ease;flex-shrink:0}
.tp-bar-play:hover{background:rgba(212,175,55,.1)}
.tp-bar-track{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:2px;cursor:pointer;position:relative;overflow:hidden;min-width:60px}
.tp-bar-fill{height:100%;width:0%;border-radius:2px;background:linear-gradient(90deg,var(--tp-gold),#e8c84a)}
.tp-bar-time{font-family:'JetBrains Mono',monospace;font-size:.55rem;color:#5a5a5a;white-space:nowrap;min-width:80px;text-align:right}
.tp-bar-speed{appearance:none;background:#111;border:1px solid #333;border-radius:6px;color:#e5e3df;font-family:'JetBrains Mono',monospace;font-size:.55rem;padding:.25rem .4rem;cursor:pointer;min-width:54px}
.tp-bar-speed:focus{outline:none;border-color:var(--tp-gold)}

@media(max-width:560px){
  .tp-pill-player{padding:.85rem}
  .tp-pill{font-size:.52rem;padding:.3rem .6rem}
  .tp-volume-slider{width:55px}
  .tp-time-row{font-size:.5rem}
  .tp-bar-time{display:none}
}