/* Streamify — offline downloads (marks, rings, toggles, Downloads view, offline states) */

/* ── Per-track indicator: lives in the title block, before the artist ── */
.dl-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dl-sub > .artist { min-width: 0; flex: 0 1 auto; }
.card .c-s.dl-sub { display: flex; }
.card .dl-sub-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-ind { display: inline-flex; align-items: center; flex-shrink: 0; }
.dl-ind:empty { display: none; }

.dl-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #000;
}
.dl-mark svg { width: 12px; height: 12px; fill: currentColor; }

/* progress ring: --p is 0..100 */
.dl-ring { --p: 0; display: inline-flex; width: 16px; height: 16px; color: var(--green); }
.dl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dl-ring circle { fill: none; stroke-width: 3; }
.dl-ring .bg { stroke: #ffffff33; }
.dl-ring .fg { stroke: currentColor; stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray .25s linear; }
.dl-ring.big { width: 24px; height: 24px; }
.dl-ring.big circle { stroke-width: 2.5; }
/* queued / preparing: no number yet, so a turning quarter arc */
.dl-ring.indet .fg { stroke-dasharray: 25 100; transition: none; }
.dl-ring.indet svg { animation: dl-spin 1.1s linear infinite; }
@keyframes dl-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

.dl-fail {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: -2px; border-radius: 50%; color: #f3727f;
}
.dl-fail svg { fill: currentColor; }
.dl-fail:hover { color: #ff9aa4; background: var(--hover); }

/* ── Rows that can't play offline ── */
.row.unavail, .q-item.unavail { cursor: not-allowed; }
.row.unavail > .c-num, .row.unavail > .c-title, .row.unavail > .c-album, .row.unavail > .c-dur,
.q-item.unavail > img, .q-item.unavail > .tt { opacity: .4; }
.row.unavail .rp { pointer-events: none; }
.row.unavail:hover .c-num .rp { display: none; }
.row.unavail:hover .c-num .n { display: inline; }
.row.unavail .name { color: var(--sub); }

/* ── Header toggle (album / playlist / Liked Songs / Daily Mix) ── */
.dl-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--sub);
  transition: color .15s, transform .1s;
}
.dl-toggle:hover { color: var(--text); }
.dl-toggle .dl-t-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; flex-shrink: 0;
}
.dl-toggle .dl-t-ic svg { fill: currentColor; }
.dl-toggle:hover .dl-t-ic { transform: scale(1.06); }
.dl-toggle .dl-t-txt { font-size: 13px; font-weight: 600; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-toggle .dl-t-txt:empty { display: none; }
.dl-toggle.is-active .dl-t-ic { border: 0; }
.dl-toggle.is-active .dl-ring.big { width: 30px; height: 30px; }
.dl-toggle.is-done .dl-t-ic { background: var(--green); border-color: var(--green); color: #000; }
.dl-toggle.is-done:hover .dl-t-ic { background: var(--green-hi); border-color: var(--green-hi); }
.dl-toggle.is-partial .dl-t-ic { color: var(--green); }

/* ── Menus ── */
.menu button.off-disabled { cursor: default; }
.menu button.off-disabled:hover { background: none; }
.menu button.off-disabled svg { opacity: .5; }

/* ── Offline banner link ── */
.off-link {
  display: inline; margin-left: 4px; padding: 0; color: var(--text); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.off-link:hover { color: var(--green-hi); }

/* ── Empty / offline states ── */
.off-empty .off-empty-btn { margin-top: 20px; }
.off-empty .pill-btn { height: 40px; padding: 0 20px; }

/* ── Downloads cover (view hero, home shortcut, library item) ── */
.cover.dl-cover {
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #0f6b3a, #1ed760);
}
.cover.dl-cover svg { fill: currentColor; }
.off-dl-hero .cover.dl-cover { box-shadow: 0 4px 60px #00000080; }
.off-rm-all { margin-left: auto; }

/* ── Library header with the settings gear (phone) ── */
.off-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.off-lib-head .off-gear { width: 44px; height: 44px; color: var(--sub); }
.off-lib-head .off-gear:hover { color: var(--text); }

@media (max-width: 700px) {
  .dl-toggle { min-height: 44px; }
  .dl-toggle .dl-t-ic { width: 36px; height: 36px; }
  .dl-fail { width: 28px; height: 28px; margin: -6px -4px; }
  .off-dl-hero .cover.dl-cover { width: 160px; height: 160px; }
  .off-dl-hero .cover.dl-cover svg { width: 56px; height: 56px; }
  .off-rm-all { margin-left: 0; height: 44px; }
  .off-link { display: inline-block; min-height: 44px; line-height: 44px; margin-left: 0; }
  .offline-banner:has(.off-link) { padding-top: 4px; padding-bottom: 4px; }
}
@media (hover: none), (max-width: 700px) {
  .row.unavail:hover .c-num .n { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-ring.indet svg { animation: none; }
  .dl-ring.indet .fg { stroke-dasharray: 100 100; opacity: .5; }
  .dl-ring .fg, .dl-toggle { transition: none; }
}