/*
 * Result page: separated stems, their players, and the stem mixer.
 *
 * Extracted from the 220-line <style> block that used to sit inside
 * done.blade.php, and aligned with wait.css so the wait and the result read as
 * one product. Same brand tokens: deep navy ink, periwinkle for the untouched
 * mix, mint for anything separated.
 */

.result-page {
  --r-ink: #000637;
  --r-haze: #bbbbf2;
  --r-mint: #5ed6b3;
  --r-amber: #ffad00;
  --r-blue: #1998ff;
  --r-surface: #fff;
  --r-line: rgba(0, 6, 55, .12);
  --r-muted: rgba(0, 6, 55, .55);
}

[data-theme="dark"] .result-page {
  --r-ink: #eef0ff;
  --r-surface: #11142b;
  --r-line: rgba(187, 187, 242, .18);
  --r-muted: rgba(238, 240, 255, .6);
}

/* --- metadata --- */
.result-meta { margin-bottom: 1.5rem; }
.result-meta .row { margin-bottom: .35rem; }
.result-meta .col-sm-3,
.result-meta .col-sm-9 { text-align: left; }

/* --- one stem --- */
.track-card {
  position: relative;
  border: 1px solid var(--r-line, #dee2e6);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  background: var(--r-surface, #fff);
  overflow: hidden;
}

/* A stem's colour runs down its card edge, so four cards are scannable
   rather than four identical boxes. Set per card from the stem name. */
.track-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--stem-color, var(--r-haze));
}

/* --stem-color is set inline per card from the stem's own name, so instrument
   models (brass, strings, wind) get distinct edges too rather than all
   collapsing into one fallback colour. */

.track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
  flex-wrap: wrap;
  gap: .5rem;
}

.track-title { font-weight: 600; font-size: 1rem; }
.track-size { font-size: .8rem; color: var(--r-muted, #888); }

.hidden { display: none !important; }

.wave-container { position: relative; }
.wave-wrapper { margin-top: .5rem; }
.waveform { position: relative; min-height: 56px; }

.wave-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: rgba(35, 82, 124, .88);
  border-radius: 4px;
  z-index: 10;
  pointer-events: none;
}

.track-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}

.track-controls a { display: flex; align-items: center; }

.play-wave { color: var(--r-blue, #337ab7); transition: color .15s ease; }
.play-wave:hover,
.play-wave.is-playing { color: #23527c; }
.play-wave.is-loading { pointer-events: none; }
.play-wave.is-loading svg { animation: play-wave-pulse 1s ease-in-out infinite; }

@keyframes play-wave-pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}

.timeline-text {
  font-size: .85rem;
  color: var(--r-muted, #888);
  min-width: 90px;
  font-variant-numeric: tabular-nums;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}

.section-heading h4 { margin: 0; }
.section-actions { display: flex; gap: 1rem; align-items: center; }

/* --- stem mixer ---
   Mute and solo per stem with a level fader, so a separation can actually be
   judged: solo the vocal to hear bleed, drop the drums to check the bass. */
.mixer {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
}

.mix-btn {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--r-line, #dee2e6);
  border-radius: 6px;
  background: transparent;
  color: var(--r-muted, #888);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}

.mix-btn:hover { border-color: var(--r-blue); color: var(--r-blue); }
.mix-btn:focus-visible { outline: 2px solid var(--r-blue); outline-offset: 2px; }

.mix-btn[data-mix-mute][aria-pressed="true"] {
  border-color: var(--r-amber);
  background: var(--r-amber);
  color: #2a1c00;
}

.mix-btn[data-mix-solo][aria-pressed="true"] {
  border-color: var(--r-mint);
  background: var(--r-mint);
  color: #00382a;
}

/* A stem silenced because something else is soloed reads as dimmed, not off. */
.track-card.is-silenced { opacity: .5; }
.track-card.is-silenced .waveform { filter: grayscale(1); }

.mix-vol {
  flex: 1 1 auto;
  max-width: 11rem;
  height: 1.25rem;
  accent-color: var(--stem-color, var(--r-blue));
  cursor: pointer;
}

.mix-vol:focus-visible { outline: 2px solid var(--r-blue); outline-offset: 2px; }

@media (max-width: 480px) {
  .track-card { padding: .85rem 1rem; }
  .mix-vol { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .play-wave.is-loading svg { animation: none; }
}

/* --- rating widget (kept as authored, including the CSS nesting) --- */
#full-stars-example-two {
  .rating-group { display: inline-flex; }
  .desc { text-align: center; }
  .rating__icon { pointer-events: none; }
  .rating__input { position: absolute !important; left: -9999px !important; }
  .rating__input--none { display: none; }
  .rating__label { cursor: pointer; padding: 0 0.1em; font-size: 2rem; }
  .rating__icon--star { color: #186eb1; }
  .rating__input:checked ~ .rating__label .rating__icon--star { color: #ddd; }
  .rating-group:hover .rating__label .rating__icon--star { color: #186eb1; }
  .rating__input:hover ~ .rating__label .rating__icon--star { color: #ddd; }
}

/* --- full-page loader kept from the original template --- */
#loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  z-index: 9999;
  margin: auto;
  inset: 0;
  position: fixed;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  display: none;
}

#fader {
  opacity: .8;
  z-index: 9998;
  background: #000;
  position: fixed;
  inset: 0;
  display: none;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}