/* 321 Study — Course player page styles.
 * Ported from player.dc.html: hover states that were authored as
 * style-hover attributes, the tab buttons, the loading spinner, and the
 * playlist row hover (built in player.js). Reveals/parallax/nav state live in
 * the shared 321-home.js.
 */

/* Dashboard "back" pill (header) — style-hover in the design */
.player-back:hover { color: var(--text-primary); background: var(--bg-alt); }

/* Big centre play button — style-hover: scale on hover */
.player-play-btn:hover { transform: translate(-50%, -50%) scale(1.07); }

/* Lecture-details tab buttons (Overview / Resources / My notes) */
.player-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  margin-bottom: -1px;
}
.player-tab[aria-selected="true"] {
  border-bottom-color: var(--color-primary);
  color: var(--text-primary);
}

/* Resource rows (built in JS) — style-hover: background on hover */
.player-resource:hover { background: var(--bg-alt); }

/* Playlist lecture rows (built in JS) — style-hover: background on hover */
.player-lesson:hover { background: var(--bg-alt); }

/* Loading spinner for the initial gate-resolution state */
.player-spinner {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 3px solid var(--bg-alt);
  border-top-color: var(--color-primary);
  animation: playerSpin 0.8s linear infinite;
}
@keyframes playerSpin { to { transform: rotate(360deg); } }