/* Station Imaging — built on the site's own tokens (--paper/--ink/--teal/
   --orange/--mustard/--plum) and the existing .rows/.track/.chip/.view-toggle
   patterns, so this reads as part of the site rather than a bolted-on page. */

.archive-bar-right { display: flex; align-items: center; gap: 14px; }

.imaging-filters { display: flex; flex-wrap: wrap; gap: 8px; }

.imaging-locked {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 28px;
}
.imaging-locked h2 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  font-size: 16px; color: var(--plum); margin: 0 0 8px;
}
.imaging-locked p { color: var(--muted); margin: 0 0 16px; max-width: 60ch; }

.imaging-group { margin-bottom: 30px; }
.imaging-station {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 14px; color: var(--teal); margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* type badges — a color per type, reusing the site's palette */
.imaging-type-badge, .track-tape.imaging-type-jingle,
.track-tape.imaging-type-ident, .track-tape.imaging-type-sweeper,
.track-tape.imaging-type-promo, .track-tape.imaging-type-other {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--paper);
}
.imaging-type-badge {
  flex: 0 0 64px; width: 64px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 9px; line-height: 1.2; padding: 4px;
  background: var(--muted); /* fallback for a type added in admin that has no colour below yet */
}
.imaging-type-jingle { background: var(--orange); }
.imaging-type-ident { background: var(--teal); }
.imaging-type-sweeper { background: var(--plum); }
.imaging-type-promo { background: var(--mustard); color: var(--plum-dark); }
.imaging-type-other { background: var(--muted); }

.imaging-row .row-main h3 { font-size: 14px; }
.imaging-row .row-side { min-width: 220px; }

.imaging-card .track-tape { aspect-ratio: auto; height: 64px; font-size: 12px; letter-spacing: .14em; }
.imaging-card .track-body { gap: 10px; }
.imaging-card .track-body h3 { font-size: 15px; margin: 0; line-height: 1.3; }

/* the fade-out player */
.imaging-player { display: flex; align-items: center; gap: 10px; width: 100%; }
.imaging-play {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--teal); background: transparent; color: var(--teal);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.imaging-play:hover { background: var(--teal); color: var(--paper); }
.imaging-player.playing .imaging-play,
.imaging-player:has(.imaging-play) .imaging-play:focus { color: var(--teal); }
.imaging-progress {
  flex: 1; min-width: 60px; height: 6px; border-radius: 999px;
  background: var(--line); cursor: pointer; position: relative; overflow: hidden;
}
.imaging-progress-fill { height: 100%; width: 0%; background: var(--orange); }
.imaging-player-time {
  flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.imaging-lock { font-size: 12px; font-style: italic; color: var(--muted); margin: 0; }

.imaging-empty { color: var(--muted); }

@media(max-width:680px){
  .imaging-row.row-item { flex-wrap: wrap; }
  .imaging-row .row-side { flex-basis: 100%; min-width: 0; }
}