/* Audio library picker (2026-10-19): the "Pick from library" panel under the Audio box of a card's Edit Brief,
   and the music rows on the Assets tab. Only the base theme variables (with fallbacks), so it looks right in
   both the current look and the Cinema look. Filters reuse the existing .view-toggle word rail, buttons the
   existing .mini. See js/audio-picker.js. */
.audio-pick { margin: -2px 0 12px; }
.audio-pick-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audio-now { font-size: 12px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.audio-now b { color: var(--ink); font-weight: 600; }

.audio-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 10px 12px 6px; }
.audio-panel[hidden] { display: none; }
.audio-panel input[type="search"] { width: 100%; margin: 0 0 8px; box-sizing: border-box; }
.audio-panel .audio-tags.view-toggle { flex-wrap: wrap; gap: 2px 14px; background: none; border: 0; padding: 0; margin-bottom: 6px; }
.audio-tags .mini small { opacity: 0.6; margin-left: 3px; font-size: 10.5px; }

.audio-list { max-height: 320px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.audio-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.audio-row:first-child { border-top: 0; }
.audio-row.on .audio-name { color: var(--good); }
.audio-main { min-width: 0; flex: 1; }
.audio-name { font-weight: 600; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.audio-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.audio-actions { display: flex; gap: 6px; flex: none; align-items: center; }
.audio-actions a.mini { text-decoration: none; }
.audio-empty { color: var(--muted); font-size: 12.5px; padding: 14px 2px; }
.audio-foot { margin: 6px 0 4px; font-size: 11.5px; }

/* the Assets tab's music card has no Drive preview, so give its note lines a little room */
.asset-music .asset-notes { margin: 0; }
.asset-music .asset-name { overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .audio-row { align-items: flex-start; flex-direction: column; gap: 6px; }
}