/*
 * Homepage quick product preview (#turntable-display): readability,
 * license tier cards, waveform fill and consent-bar overlap.
 * Loaded last on index.html so it wins over index-redesign.css without
 * touching that file. Motion only where prefers-reduced-motion allows it.
 */

html body #turntable-display {
  /* AA-contrast muted text inside the panel (site --ink3 is ~3:1) */
  --ink3: #6b6a64;
  --theme-ink3: #6b6a64;
  --text-muted: #6b6a64;
  --tdp-accent: var(--theme-accent, #00ff9d);
  --tdp-accent-text: #00794a;
  --tdp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] body #turntable-display {
  --ink3: #8f8d84;
  --theme-ink3: #8f8d84;
  --text-muted: #8f8d84;
  --tdp-accent-text: var(--theme-accent-dk, #00c97d);
}

/* ---------- Consent bar never covers the preview ---------- */

html body.turntable-open #studio-consent-bar {
  display: none !important;
}

/* ---------- Header: type, title, BPM/key, meta ---------- */

html body.index-shelf #turntable-display .td-type-badge {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: var(--ink2) !important;
}

html body.index-shelf #turntable-display .td-title-sub {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tdp-accent-text) !important;
}

html body.index-shelf #turntable-display .turntable-meta-inline {
  font-size: 12px !important;
  row-gap: 4px !important;
  margin-bottom: 0 !important;
}

html body.index-shelf #turntable-display .turntable-meta-inline-label {
  font-size: 11px !important;
}

/* ---------- Player ---------- */

html body.index-shelf #turntable-display .td-wave-time {
  font-size: 11px !important;
}

/* Bars stretch to fill the track instead of stopping two thirds in */
html body.index-shelf #turntable-display .td-waveform {
  gap: 2px !important;
}

html body.index-shelf #turntable-display .td-wave-bar {
  flex: 1 1 0 !important;
  min-width: 1px !important;
  max-width: none !important;
  background: color-mix(in srgb, var(--ink) 20%, transparent) !important;
}

html body.index-shelf #turntable-display .td-wave-bar.played {
  background: var(--ink) !important;
}

html body.index-shelf #turntable-display .td-waveform-progress {
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
}

/* ---------- Genre chips ---------- */

html body.index-shelf #turntable-display .turntable-tag-chip {
  font-size: 12px !important;
  color: var(--ink2) !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: none !important;
}

/* ---------- License tiers: name + price cards ---------- */

html body.index-shelf #turntable-display .td-license-tier-group {
  gap: 8px !important;
  padding-top: 9px !important;
}

html body.index-shelf #turntable-display .td-license-tier-btn {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 52px !important;
  padding: 8px 6px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

html body.index-shelf #turntable-display .td-tier-name {
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

html body.index-shelf #turntable-display .td-tier-price {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  opacity: 0.8;
}

/* Premium is the one we want people to pick: accent ring + badge,
   same treatment as the featured license card on product.html */
html body.index-shelf #turntable-display .td-license-tier-btn[data-tier="premium"]:not(.is-sold) {
  border-color: color-mix(in srgb, var(--theme-accent-dk, #00c97d) 70%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tdp-accent) 30%, transparent) !important;
}

html body.index-shelf #turntable-display .td-license-tier-btn[data-tier="premium"]:not(.is-sold)::after {
  content: "Most popular";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tdp-accent);
  color: #04120b;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

html body.index-shelf #turntable-display .td-license-tier-terms-heading {
  font-size: 11px !important;
}

html body.index-shelf #turntable-display .td-license-tier-terms-list li {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--ink2) !important;
}

html body.index-shelf #turntable-display .td-license-tier-terms-list li.is-included {
  color: var(--ink) !important;
}

/* ---------- Buy button + links ---------- */

html body.index-shelf #turntable-display .td-add-cart-btn,
html body.index-shelf #turntable-display .td-kit-download-btn {
  min-height: 48px !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
}

html body.index-shelf #turntable-display .td-cta-note {
  margin: -2px 0 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  color: var(--ink3) !important;
}

html body.index-shelf #turntable-display .td-cta-note.hidden {
  display: none !important;
}

html body.index-shelf #turntable-display .td-modal-links {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 4px 16px !important;
}

html body.index-shelf #turntable-display .td-modal-text-link {
  padding: 6px 0 !important;
  font-size: 12px !important;
}

html body.index-shelf #turntable-display .td-modal-text-link--muted {
  color: var(--ink) !important;
  margin-left: auto !important;
  text-decoration: underline !important;
  text-decoration-color: var(--border2) !important;
  text-underline-offset: 3px !important;
}

html body.index-shelf #turntable-display .td-modal-text-link--secondary {
  color: var(--ink2) !important;
}

html body.index-shelf #turntable-display .td-modal-text-link:hover {
  color: var(--ink) !important;
  text-decoration-color: currentColor !important;
}

/* ---------- Prev / next arrows (icon was near-black on dark) ---------- */

html body #turntable-display .turntable-nav-btn {
  color: var(--ink) !important;
  background: var(--theme-surface, #fff) !important;
  border-color: var(--border2) !important;
}

/* ---------- Keyboard focus ---------- */

html body #turntable-display :is(button, a, input):focus-visible {
  outline: 2px solid var(--tdp-accent-text) !important;
  outline-offset: 2px !important;
}

/* ---------- Phones ---------- */

@media (max-width: 480px) {
  html body.index-shelf #turntable-display .td-title {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  html body.index-shelf #turntable-display .td-title-sub {
    font-size: 12px !important;
  }

  html body.index-shelf #turntable-display .td-waveform {
    gap: 1px !important;
  }

  html body.index-shelf #turntable-display .turntable-tag-chip {
    font-size: 11px !important;
  }

  html body.index-shelf #turntable-display .td-license-tier-group {
    gap: 6px !important;
  }

  html body.index-shelf #turntable-display .td-license-tier-btn {
    padding: 8px 4px !important;
  }

  html body.index-shelf #turntable-display .td-tier-name {
    font-size: 13px !important;
  }

  html body.index-shelf #turntable-display .td-license-tier-btn[data-tier="premium"]:not(.is-sold)::after {
    font-size: 8px;
    letter-spacing: 0.04em;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html body.index-shelf #turntable-display .td-license-tier-btn {
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      border-color 0.2s ease,
      scale 0.15s var(--tdp-ease-out) !important;
  }

  html body.index-shelf #turntable-display .td-license-tier-btn:not(:disabled):active,
  html body.index-shelf #turntable-display .td-add-cart-btn:not(:disabled):active {
    scale: 0.97;
  }
}

@media (prefers-reduced-motion: reduce) {
  #turntable-display,
  #turntable-display *,
  #turntable-display *::before,
  #turntable-display *::after,
  #turntable-backdrop {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  #turntable-display .turntable-nav-btn:hover,
  #turntable-display .turntable-nav-btn:active {
    transform: none !important;
  }
}