/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES
   Override via admin colour pickers, custom CSS, or inline
   style on the catalogue root element.
   ═══════════════════════════════════════════════════════════ */
   :root {
    /*--bg-page:              #ffffff; */
    --bg-row:               #ffffff;
    --bg-row-active:        #2e2e2e;
    --bg-panel:             #26272b;
    --bg-tags-row:          transparent;
    --bg-stem-row:          var(--bg-panel);      
    --bg-stem-hover:        #f0f0f0;
    --bg-btn:               #f0f0f0;
    --bg-controls:          #f0f0f0;
  
    --accent:               #1a1a1a;
    --accent-glow:          rgba(0,0,0,0.06);
    --accent-stem:          #4a6cf7;
  
    --wave-color:           #848484;
    --wave-progress:        #4a74dd;
    --wave-stem-color:      #c0ccff;
    --wave-stem-progress:   #4a6cf7;
  
    --text-primary:         #c0c0c0;
    --text-secondary:       #888888;
    --text-artist:          #ffffffbf;
    --text-title:           #ffffff;
    --text-meta:            #888888;
    --text-label:           #bbbbbb;
  
    --border:               #ffffff1a;
    --border-light:         #eeeeee;
  
    --tag-bg:               #f0f0f0;
    --tag-fg:               #888888;
    --tag-border:           #e0e0e0;
    --tag-genre-bg:         var(--btn-bg-color);
    --tag-genre-fg:        var(--text-secondary);
    --tag-mood-bg:          var(--btn-bg-color);
    --tag-mood-fg:          var(--text-secondary);
  
    --mute-active:          #ef4444;
    --solo-active:          #f59e0b;
  
    --col-cover:            calc(var(--row-height) - 2px);
    --col-play:             52px;
    --col-time:             46px;
    --col-meta:             120px;
    --col-actions:          auto ; /*230px;*/  /* fixed so action column same width on all tracks */

  
    --radius:               5px;
    --coverart-border-radius:     5px;
    --track-row-border-radius:    0;
    --track-row-border-style:     none none solid none;
    --track-row-border-width:     0 0 1px 0;
    --track-row-border-color:     var(--border);

    /* row heights */
    --row-height:           40px;
    --alt-mix-row-height:   60px;
    --stem-row-height:      60px;

    --col-title:  minmax(160px, 220px);
    --col-artist: minmax(120px, 180px);
  
    --font-ui:              'Syne', system-ui, sans-serif;
    --font-mono:            'DM Mono', ui-monospace, monospace;

    /* ── Filter section ── */
    --filter-section-line:  #e0e0e0;   /* underline beneath each section header */
    --filter-section-gap:   20px;      /* vertical space between sections */

    --btn-bg-color:         #272727;
    --btn-col-border:       #666565;

    /* When using height="100vh" etc. on shortcode, wrapper uses this; override via shortcode or custom CSS */
    --mc-catalogue-height: 100vh;

  }




  /* bypasses */ 

  :where(.wp-site-blocks *:focus) {
     outline-width: 0 !important; 
    outline-style: none !important;
}