/* SB Audio FX — preview player + sound rows. Depends on tokens.css */

/* ---- Sound grid ---- */
.sb-soundgrid { display: grid; gap: var(--sb-space-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sb-soundgrid { grid-template-columns: 1fr 1fr; } }
.sb-soundhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sb-space-4); margin-bottom: var(--sb-space-6); flex-wrap: wrap; }
.sb-soundhead h2 { margin-bottom: var(--sb-space-1); }
.sb-soundhead p { color: var(--sb-ink-muted); margin: 0; }

/* ---- Sound row (playable) ---- */
.sb-soundrow {
  display: flex; align-items: center; gap: var(--sb-space-3);
  padding: var(--sb-space-3) var(--sb-space-4); border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md); background: var(--sb-surface-1);
  position: relative; overflow: hidden; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--sb-ink-secondary); font-size: var(--sb-text-sm);
  transition: border-color var(--sb-dur-fast) var(--sb-ease), background var(--sb-dur-fast) var(--sb-ease);
}
.sb-soundrow:hover { border-color: var(--sb-border-brand); background: var(--sb-surface-2); }
.sb-soundrow.is-playing { border-color: var(--sb-border-brand); background: var(--sb-surface-2); }
/* progress fill behind content */
.sb-soundrow::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--sb-prog, 0%);
  background: var(--sb-brand-grad-soft); z-index: 0; transition: width .1s linear; pointer-events: none;
}
.sb-soundrow.is-playing::after { display: block; }
.sb-soundrow:not(.is-playing)::after { width: 0; }
.sb-soundrow > * { position: relative; z-index: 1; }
.sb-soundrow__btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sb-brand-grad); color: #fff; box-shadow: var(--sb-shadow-sm);
}
.sb-soundrow__btn .ico-pause { display: none; }
.sb-soundrow.is-playing .sb-soundrow__btn .ico-play { display: none; }
.sb-soundrow.is-playing:not(.is-paused) .sb-soundrow__btn .ico-pause { display: block; }
.sb-soundrow.is-playing.is-paused .sb-soundrow__btn .ico-play { display: block; }
.sb-soundrow.is-playing.is-paused .sb-soundrow__btn .ico-pause { display: none; }
.sb-soundrow__btn svg { width: 15px; height: 15px; }
.sb-soundrow__name { flex: 1; color: var(--sb-ink-primary); font-weight: 600; min-width: 0; }
.sb-soundrow__dur { color: var(--sb-ink-muted); font-variant-numeric: tabular-nums; }

/* ---- Sticky mini-player ---- */
.sb-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  transform: translateY(110%); transition: transform var(--sb-dur-med) var(--sb-ease-out);
  background: var(--sb-glass-bg); border-top: 1px solid var(--sb-border-strong);
  backdrop-filter: var(--sb-glass-blur); -webkit-backdrop-filter: var(--sb-glass-blur);
  padding-bottom: env(safe-area-inset-bottom);
}
.sb-player.is-active { transform: none; }
.sb-player__inner { max-width: var(--sb-maxw); margin: 0 auto; padding: var(--sb-space-3) var(--sb-space-5); display: flex; align-items: center; gap: var(--sb-space-3); }
.sb-player__toggle, .sb-player__prev, .sb-player__next {
  flex: none; border: 0; cursor: pointer; background: transparent; color: var(--sb-ink-primary);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
}
.sb-player__toggle { background: var(--sb-brand-grad); box-shadow: var(--sb-shadow-brand); }
.sb-player__toggle::before { content: ""; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.sb-player.is-playing .sb-player__toggle::before { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(#fff,#fff) left/4px 100% no-repeat, linear-gradient(#fff,#fff) right/4px 100% no-repeat; }
.sb-player__prev::before, .sb-player__next::before { content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sb-player__prev::before { border-right: 9px solid currentColor; }
.sb-player__next::before { border-left: 9px solid currentColor; }
.sb-player__nav { display: flex; gap: 2px; }
.sb-player__meta { display: flex; flex-direction: column; min-width: 0; flex: none; width: 34%; max-width: 240px; }
.sb-player__name { color: var(--sb-ink-primary); font-weight: 700; font-size: var(--sb-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-player__sub { color: var(--sb-ink-muted); font-size: var(--sb-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-player__scrub { flex: 1; height: 6px; border-radius: 999px; background: var(--sb-surface-3); cursor: pointer; overflow: hidden; }
.sb-player__progress { height: 100%; width: 0; background: var(--sb-brand-grad); border-radius: 999px; }
.sb-player__time { color: var(--sb-ink-muted); font-size: var(--sb-text-xs); font-variant-numeric: tabular-nums; flex: none; }
.sb-player__close { flex: none; border: 0; background: transparent; color: var(--sb-ink-muted); font-size: 24px; line-height: 1; cursor: pointer; width: 32px; height: 32px; }
.sb-player__close:hover { color: var(--sb-ink-primary); }

@media (max-width: 640px) {
  .sb-player__time, .sb-player__nav { display: none; }
  .sb-player__meta { width: auto; flex: 1; }
  .sb-player__scrub { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 0; }
  .sb-player__inner { position: relative; }
}