/* Track template specific styles (scoped) */
html.track-template,
body.track-template{
  height: 100%;
  display: flex;
  flex-direction: column;
  --site-header-h: 72px; /* header thickness baseline */
  --accent: #f2b700;
  --text: #f6f7f8;
  --muted: #9da3b0;
  /* layout vars to align main waveform with version waves */
  --version-lead-w: 40px;
  --version-meta-w: 320px;
  --main-play-w: 56px;
}
/* ensure page content is offset below the fixed header */
body.track-template .main-wrap.container{ max-width: 1200px; flex: 1; display: flex; flex-direction: column; padding-top: var(--site-header-h); }
body.track-template .main-content{ padding: 28px 20px; flex: 1; }
body.track-template .site-footer{ margin-top: auto; }

/* Ensure header matches the main page */
body.track-template .site-header{ height:72px; }
body.track-template .header-inner{ height:100%; padding-left:20px; padding-right:20px; margin-inline:0; width:100%; max-width:none; }

/* Narrow hero section (header height × 2) */
.hero-narrow{ height: calc(var(--site-header-h) * 2); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; margin: 0 0 72px; padding: 20px; }
.hero-narrow .page-title{ font-weight: 800; font-size: clamp(24px, 3vw, 36px); margin: 0; margin-bottom: 0; color: var(--text); }

/* Track meta line under title (genre + bpm) */
.track-meta-line{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:8px; color:var(--muted); font-size:0.9rem; }
.track-meta-line .meta-text{ display:inline-block; color:var(--muted); font-size:0.9rem; }
.track-meta-line .meta-genre{ color:var(--text); font-weight:600; }
.track-meta-line .meta-sep{ color:rgba(255,255,255,0.18); }

/* Player row */
.track-player-row{ display:flex; align-items:center; gap:16px; margin-bottom: 72px; }
.track-player-row .track-play{ width:56px; height:56px; min-width:56px; border-radius:50%; border:0; background: rgba(255,255,255,0.06); color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); cursor:pointer; }
.track-player-row .track-play svg{ width:18px; height:18px; display:block; }
.track-player-row .track-play .icon-pause{ display:none }
.track-player-row .track-play[aria-pressed="true"] .icon-play{ display:none }
.track-player-row .track-play[aria-pressed="true"] .icon-pause{ display:block }
.track-player-row .track-play[aria-pressed="true"]{ background: var(--accent); color: #121519; }
.track-player-row .track-play[aria-pressed="true"]:hover{ background: var(--accent); color: #121519; }
.track-player-row .track-play:hover{ background: rgba(255,255,255,0.1); transform: translateY(-1px); transition: background .18s ease, transform .18s ease; }
.track-player-row .track-play:active{ transform: translateY(0); }
  .track-player-row .track-wave{ flex:1; min-width:0; display:flex; align-items:center; }

  .track-player-row .waveform{
    width:100%;
    height:34px;
    display:flex;
    align-items:center;
    background:none;
    border-radius:0;
    overflow:visible;
  }
  .track-player-row .waveform::after{ content:none; }
  .track-player-row .waveform .wf-canvas{ width:100%; height:100%; display:block; transition: filter .2s ease; }
  .track-player-row .waveform:hover{ opacity:0.92; }
  .track-player-row.is-playing .waveform .wf-canvas{ filter: drop-shadow(0 8px 18px rgba(242,183,0,0.3)); }
.track-duration-inline{ margin-left:12px; min-width:72px; text-align:right; color:var(--muted); font-size:.86rem; display:flex; align-items:center; justify-content:flex-end; }
.track-duration-inline .sep{ color: rgba(255,255,255,0.35); }

/* Plyr customization */
.plyr { --plyr-color-main: #f2b700; }
.plyr__controls { background: rgba(255,255,255,0.02); border-radius: 4px; }
.plyr__progress { background: rgba(255,255,255,0.06); }
.plyr__control:hover { color: #f2b700; }
.plyr--full-ui input[type=range] { height: 4px; }

/* Description section */
.track-description-section{ margin-bottom: 72px; }
.section-title{ font-size:1rem; font-weight:800; margin: 0 0 12px; color: var(--text); text-transform:uppercase; letter-spacing:0.05em; }
.section-title::after{ content:""; display:block; width:64px; height:3px; border-radius:2px; background: var(--accent); opacity:.9; margin-top:8px; }
.track-description{ color: var(--text); opacity:.92; line-height:1.6; font-size: 0.9rem; }
.track-description p{ margin: 0 0 12px; }
.track-description p:last-child{ margin-bottom: 0; }

/* Versions and Tags wrapper */
.track-versions-tags-wrapper{ display:flex; gap:40px; margin-bottom:72px; }
.track-versions-tags-wrapper .track-versions-section{ flex:1; }
.track-versions-tags-wrapper .track-tags-section{ flex:1; }

/* Versions section */
.track-versions-section{ margin-bottom: 0; }
.versions-list{ list-style:none; padding:0; margin:0; color: var(--text); opacity:.92; font-size: 0.9rem; }
.versions-list li{ line-height: 1.6; margin: 0 0 12px; }
.versions-list li:last-child{ margin-bottom: 0; }

/* Ensure Versions list exactly matches Description rhythm */
body.track-template .track-versions-section .versions-list li{
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}
body.track-template .track-versions-section .versions-list li:last-child{ margin-bottom: 0 !important; }

/* Mini version playback rows */
.track-versions-section .version-playlist{ margin-top:20px; display:flex; flex-direction:column; gap:6px; }
.track-versions-section .version-row{ display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.track-versions-section .version-row:last-child{ border-bottom:0; }
.track-versions-section .version-row .version-lead{ width:40px; min-width:40px; height:40px; position:relative; display:flex; align-items:center; justify-content:center; }
.track-versions-section .version-row .version-lead .version-index{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:800; font-size:.86rem; color:#fff; letter-spacing:.02em; }
.track-versions-section .version-row .version-lead .version-play{ position:absolute; inset:0; display:none; }
.track-versions-section .version-row:hover .version-lead .version-play{ display:flex; }
.track-versions-section .version-row.is-playing .version-lead .version-play{ display:flex; }
.track-versions-section .version-row:hover .version-lead .version-index{ visibility:hidden; }
.track-versions-section .version-row.is-playing .version-lead .version-index{ visibility:hidden; }
.track-versions-section .version-row .version-play{ width:40px; height:40px; min-width:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.track-versions-section .version-row .version-play{ position:relative; }
.track-versions-section .version-row .version-play svg{ width:16px; height:16px; display:none; }
.track-versions-section .version-row:hover .version-play svg{ display:block; }
.track-versions-section .version-row .version-play[aria-pressed="true"] svg{ display:block; }
.track-versions-section .version-row:hover .version-play .icon-play{ display:block; }
.track-versions-section .version-row .version-play .icon-pause{ display:none; }
.track-versions-section .version-row .version-play[aria-pressed="true"] .icon-play{ display:none; }
.track-versions-section .version-row .version-play[aria-pressed="true"] .icon-pause{ display:block; }
.track-versions-section .version-row .version-play:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.28); transform:translateY(-2px); }
.track-versions-section .version-row.is-playing .version-play{ background:var(--accent); color:#121519; border-color:var(--accent); }
.track-versions-section .version-row .version-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.track-versions-section .version-row .version-label{ font-size:.78rem; font-weight:600; color:var(--text); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .track-versions-section .version-row .version-wave{ flex:1; min-width:140px; height:24px; display:flex; align-items:center; }
  .track-versions-section .version-row .version-wave .mini-waveform,
  .track-versions-section .version-row .version-wave[data-mini-wave]{ width:100%; height:24px; background:none; }
  .mini-waveform{ width:100%; height:24px; display:flex; align-items:center; }
  .mini-waveform canvas{ width:100%!important; height:24px!important; display:block; }
.track-versions-section .version-row .version-duration{ width:54px; text-align:right; font-size:.72rem; color:var(--muted); letter-spacing:.05em; }

@media (max-width: 680px){
  .track-versions-section .version-row{ gap:10px; }
  .track-versions-section .version-row .version-wave{ display:none; }
  .track-versions-section .version-row .version-label{ font-size:.74rem; }
}

/* Tags section */
.track-tags-section{ margin-bottom: 40px; }
.tags-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.tags-cloud .tag{ display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.08); color:var(--muted); font-size:.86rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; }
.tags-cloud .tag:hover{ color:var(--text); border-color: rgba(242,183,0,0.22); cursor:pointer; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }

/* Download section */
.track-download-section{ margin-top: 40px; margin-bottom: 28px; text-align: center; }
.btn-download{ display:inline-flex; align-items:center; justify-content:center; min-width: 220px; padding:12px 24px; border-radius:22px; text-decoration:none; background: linear-gradient(180deg, var(--accent), #e6a800); color:#000; font-weight:800; box-shadow: 0 10px 28px rgba(242,183,0,0.18); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn-download:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(242,183,0,0.24); filter: brightness(1.02); }
.btn-download:active{ transform: translateY(-1px); }
.download-meta{ margin-top:8px; color: var(--muted); font-size: .86rem; }

.back-to-library-section{ margin-bottom: 12px; }
.back-to-lib{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color: var(--muted);
  text-decoration:none;
  font-weight:400;
  text-transform: uppercase;         /* match nav */
  letter-spacing:.08em;              /* match nav */
  font-size:.82rem;                  /* slightly smaller than nav */
  opacity:.9;
}
.back-to-lib:hover{ color: var(--accent); opacity:1; }

/* Generic mini versions block (moved under main player) */
.track-mini-versions-block{ margin: -48px 0 72px; /* pull closer to player, keep rhythm below */ }
@media (max-width: 680px){ .track-mini-versions-block{ margin: -36px 0 56px; } }
.version-playlist{ display:flex; flex-direction:column; gap:6px; }
.version-row{ display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.version-row:last-child{ border-bottom:0; }
.version-row .version-lead{ width:40px; min-width:40px; height:40px; position:relative; display:flex; align-items:center; justify-content:center; }
.version-row .version-lead .version-index{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:800; font-size:.86rem; color:#fff; letter-spacing:.02em; }
.version-row .version-lead .version-play{ position:absolute; inset:0; display:none; }
.version-row:hover .version-lead .version-play{ display:flex; }
.version-row.is-playing .version-lead .version-play{ display:flex; }
.version-row:hover .version-lead .version-index{ visibility:hidden; }
.version-row.is-playing .version-lead .version-index{ visibility:hidden; }
.version-row .version-play{ width:40px; height:40px; min-width:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.version-row .version-play{ position:relative; }
.version-row .version-play svg{ width:16px; height:16px; display:none; }
.version-row:hover .version-play svg{ display:block; }
.version-row .version-play[aria-pressed="true"] svg{ display:block; }
.version-row:hover .version-play .icon-play{ display:block; }
.version-row .version-play .icon-pause{ display:none; }
.version-row .version-play[aria-pressed="true"] .icon-play{ display:none; }
.version-row .version-play[aria-pressed="true"] .icon-pause{ display:block; }
.version-row .version-play:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.28); transform:translateY(-2px); }
.version-row.is-playing .version-play{ background:var(--accent); color:#121519; border-color:var(--accent); }
.version-row .version-meta{ flex: 0 0 var(--version-meta-w); max-width:var(--version-meta-w); display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.version-row .version-label{ font-size:.8rem; font-weight:700; color:var(--text); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }
.version-row .version-wave{ flex:1; width:100%; min-width:0; height:24px; display:flex; align-items:center; position:relative; }
.version-row .version-wave .mini-waveform,
.version-row .version-wave[data-mini-wave]{ width:100%; height:24px; }
.version-row .version-wave canvas{ width:100%!important; height:24px!important; display:block; }
.version-row.is-playing .version-wave canvas{ filter: brightness(1.1); }
.version-row .version-duration{ width:54px; text-align:right; font-size:.72rem; color:var(--muted); letter-spacing:.05em; }
@media (max-width: 680px){
  .version-row{ gap:10px; }
  .version-row .version-wave{ height:38px; }
  .version-row .version-label{ font-size:.74rem; }
}

/* Mobile tweaks */
@media (max-width: 1024px){
  :root, body.track-template { --version-meta-w: 260px; }
}
@media (max-width: 820px){
  :root, body.track-template { --version-meta-w: 200px; }
}
@media (max-width: 680px){
  .track-player-row{ gap:12px; }
  :root, body.track-template { --version-meta-w: 160px; }
  .version-row .version-wave{ height:24px; }
  .track-description-section{ margin-bottom: 56px; }
  .track-versions-tags-wrapper{ margin-bottom: 56px; }
}