/* DISCOVERY NEXT / LABEL UNIVERSE V1.7 — independent waveform module */
:root {
  --dx-wave-height: 108px;     /* Change waveform height here */
  --dx-wave-compact: 48px;     /* Sticky waveform height */
  --dx-wave-gap: 2.5px;       /* Visual density */
}
/* Controls occupy the first row; the waveform takes the entire row below. */
.dx-now .dx-now__layout {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 26px;
  padding-top: 16px;
  padding-bottom: 4px;
}
.dx-now .dx-now__transport { gap: 16px; }
.dx-now .dx-now__timeline { display: none; }
.dx-now .dx-now__rpm { display: none; }
.dx-now .dx-now__message { padding-top: 0; padding-bottom: 8px; }
.dx-wave { position: relative; padding-bottom: 9px; user-select: none; }
.dx-wave__topline {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 2px 0 6px; font-size: 9px; font-weight: 800;
  letter-spacing: .18em; color: var(--muted); opacity: .72;
}
.dx-wave__surface {
  position: relative; overflow: hidden; isolation: isolate; touch-action: pan-y;
  width: 100%; height: var(--dx-wave-height); cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 7px;
  background: linear-gradient(90deg, var(--accent-low), transparent 65%),
              repeating-linear-gradient(90deg, transparent 0 79px, var(--hairline) 80px 81px),
              var(--bg);
  transition: border-color .2s, background .2s;
}
.dx-wave__surface:hover, .dx-wave__surface:focus-visible { border-color: var(--accent); }
.dx-wave__surface:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-wave__surface::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  border-top: 1px solid var(--hairline); pointer-events: none;
}
.dx-wave__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.dx-wave__canvas--idle { opacity: .9; }
.dx-wave__canvas--played {
  clip-path: inset(0 calc(100% - var(--dx-wave-progress, 0%)) 0 0);
  filter: drop-shadow(0 0 4px var(--accent-low));
}
.dx-wave__playhead {
  position: absolute; left: var(--dx-wave-progress, 0%); top: 0; bottom: 0;
  width: 2px; transform: translateX(-1px); background: var(--accent);
  pointer-events: none; z-index: 2; box-shadow: 0 0 12px var(--accent);
}
.dx-wave__playhead i {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 0 0 5px 5px;
  background: var(--accent);
}
.dx-wave__hint {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%);
  pointer-events: none; font-size: 10px; font-weight: 800; letter-spacing: .12em;
  color: var(--muted); background: var(--bg); padding: 5px 12px; border-radius: 50px;
}
.dx-wave[data-state="ready"] .dx-wave__hint { display: none; }
.dx-wave__times {
  display: flex; justify-content: space-between; margin-top: 4px;
  color: var(--muted); font-size: 10px; letter-spacing: .05em; font-variant-numeric: tabular-nums;
}
.dx-now.is-docked .dx-now__layout { grid-template-columns: minmax(0,1fr) auto; padding-top: 8px; padding-bottom: 0; }
.dx-now.is-docked .dx-wave__surface { height: var(--dx-wave-compact); }
.dx-now.is-docked .dx-wave__topline, .dx-now.is-docked .dx-now__message { display: none; }
.dx-now.is-docked .dx-wave { padding-bottom: 5px; }
@media (max-width: 760px) {
  :root { --dx-wave-height: 76px; --dx-wave-compact: 38px; }
  .dx-now .dx-now__layout { grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; }
  .dx-now .dx-now__identity { gap: 9px; }
  .dx-now .dx-now__transport { gap: 8px; }
  .dx-now .dx-now__volume { display: none; }
  .dx-wave__topline { font-size: 8px; }
}
@media (max-width: 450px) {
  .dx-now .dx-now__cover { width: 48px; height: 48px; flex-basis: 48px; }
  .dx-now .dx-now__track { font-size: 15px; }
  .dx-now .dx-now__byline { font-size: 9px; }
  .dx-now .dx-now__play { width: 42px; height: 42px; flex-basis: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-wave__surface { transition: none; }
}