/* ============================================================================
   Audio examples on /applications.html: a small list of labelled clips per
   project card (.ep-audio-samples), each opening the same shared popup
   (.ep-audio-modal) with a spectrogram rendered from the clip itself and a
   playhead line tracking playback — the same visual language as the
   ecoPi dashboard's own validation view (dashboard_4_de.webp), so the demo
   reads as "this is what the product does" rather than a marketing mockup.
   ========================================================================= */

/* ---- Sample list on the card ---------------------------------------------
   Same play-button convention as the home page's live panel
   (.ep-live-item__play in live-panel.css: a CSS triangle, no icon file) —
   reused rather than copied so both places change together if the pattern
   ever does. */

.ep-audio-samples {
  /* Auto top/bottom margins, not a fixed gap: .ep-card__actions sits at the
     bottom of the (equal-height) card via its own margin-top:auto, so
     whatever space is left between the teaser and the button is free — a
     card with only one clip would otherwise leave it stranded right under
     the teaser instead of centered in that space. See the .ep-card__actions
     override below, which cedes that auto margin once a sample list exists
     so the two don't split the free space and throw the centering off. */
  margin: auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ep-space-2);
}

.ep-audio-sample {
  display: flex;
  align-items: center;
  gap: var(--ep-space-3);
}

.ep-audio-sample__play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--ep-radius-pill);
  background: var(--ep-primary);
  color: var(--ep-text-inverse);
  cursor: pointer;
  transition: background-color var(--ep-duration-fast) var(--ep-ease),
              transform var(--ep-duration-fast) var(--ep-ease);
}

.ep-audio-sample__play:hover {
  background: var(--ep-primary-hover);
}

.ep-audio-sample__play:active {
  transform: scale(0.94);
}

.ep-audio-sample__play:focus-visible {
  outline: 3px solid var(--ep-primary);
  outline-offset: 2px;
}

.ep-audio-sample__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 0.36rem 0 0.36rem 0.58rem;
  border-color: transparent transparent transparent currentColor;
}

.ep-audio-sample__label {
  font-size: var(--ep-text-sm);
  font-weight: 600;
  color: var(--ep-text);
}

/* ---- Popup: compact, not the wide project-info modal ---------------------- */

.ep-audio-modal .modal-dialog {
  max-width: 26rem;
}

.ep-audio-modal .modal-title {
  font-family: var(--ep-font-body);
  font-size: var(--ep-text-lg);
  font-weight: 600;
}

/* Reserves the two-line title's height before content loads, so the popup
   doesn't visibly grow once a label is filled in. */
.ep-audio-modal .modal-title:empty::before {
  content: "\00a0";
}

.ep-audio-modal__title-group {
  min-width: 0;
}

/* Provenance note under the title — smaller and muted since it's a hint,
   not part of the clip's own label. */
.ep-audio-modal__subtitle {
  margin: 0.125rem 0 0;
  font-size: var(--ep-text-xs);
  color: var(--ep-text-muted);
}

/* ---- Spectrogram --------------------------------------------------------
   The canvas is the rendered spectrogram itself (drawn in
   audio-spectrogram.js); this wrapper only adds the frame, axis labels, and
   the playhead overlay, matching the dashboard's own spectrogram view. */

.ep-audio-modal__spectrogram {
  position: relative;
  border-radius: var(--ep-radius-sm);
  overflow: hidden;
  background: #2b2b2b;
  aspect-ratio: 16 / 7;
}

.ep-audio-modal__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Shown while the clip decodes; hidden (not removed) once the spectrogram
   is drawn, so a slow decode never leaves a blank dark rectangle. */
.ep-audio-modal__status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--ep-text-sm);
  background: #2b2b2b;
}

.ep-audio-modal__status[hidden] {
  display: none;
}

/* The moving playhead: a thin line positioned by JS via --progress (0–1) as
   a percentage of the frame's width, so it tracks correctly at any size
   without JS having to read layout back. */
.ep-audio-modal__playhead {
  --progress: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--progress) * 100%);
  width: 2px;
  margin-left: -1px;
  background: var(--ep-danger);
  box-shadow: 0 0 4px rgba(220, 53, 69, 0.7);
  pointer-events: none;
}

.ep-audio-modal__playhead[hidden] {
  display: none;
}

/* ---- Transport controls ---------------------------------------------------
   Play/pause + scrubber + time, the same trio the dashboard validation
   toolbar uses beneath its own spectrogram. */

.ep-audio-modal__controls {
  display: flex;
  align-items: center;
  gap: var(--ep-space-3);
  margin-top: var(--ep-space-4);
}

.ep-audio-modal__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: var(--ep-radius-pill);
  background: var(--ep-primary);
  color: var(--ep-text-inverse);
  cursor: pointer;
  transition: background-color var(--ep-duration-fast) var(--ep-ease);
}

.ep-audio-modal__toggle:hover {
  background: var(--ep-primary-hover);
}

.ep-audio-modal__toggle:disabled {
  background: var(--ep-border-strong);
  cursor: default;
}

.ep-audio-modal__toggle::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.72rem;
  border-color: transparent transparent transparent currentColor;
}

.ep-audio-modal.is-playing .ep-audio-modal__toggle::before {
  width: 0.7rem;
  height: 0.9rem;
  margin-left: 0;
  border: none;
  background: currentColor;
  clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%,
                     0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0);
}

.ep-audio-modal__seek {
  flex: 1 1 auto;
  accent-color: var(--ep-primary);
}

.ep-audio-modal__time {
  flex: 0 0 auto;
  min-width: 5.5ch;
  color: var(--ep-text-secondary);
  font-size: var(--ep-text-sm);
  font-variant-numeric: tabular-nums;
}