/* library — additive styles (loaded after style.css). */

/* Per-row controls: ▶ play, ✎ edit, ＋ add-to-song, ⋯ more.
   Every one is a comfortable 44×44 touch target (was a tiny ⋯ before). */
#library-list .clip-row button {
    min-width: 44px;
    min-height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

#library-list .clip-row button:active {
    background: var(--bg2);
}

/* Keep the main text flexible so the action buttons sit on the right edge,
   and shrink the inter-button gap so play + 3 actions fit a phone width. */
#library-list .clip-row {
    gap: 4px;
}
#library-list .clip-row .clip-main {
    margin-right: auto;
}

/* Tint the primary actions so their purpose reads at a glance. */
#library-list .clip-row .row-edit { color: var(--yellow); }
#library-list .clip-row .row-add { color: var(--blue); }

/* Songs list rows: rename + delete are comfortable tap targets. */
#songs-list .clip-row { gap: 4px; }
#songs-list .clip-row .clip-main { margin-right: auto; }
#songs-list .clip-row > button {
    min-width: 44px;
    min-height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--fg-dim);
    font-size: 18px;
    line-height: 1;
    padding: 0;
}
#songs-list .clip-row > button:active { background: var(--bg2); }

/* "total stored" summary, pinned at the top of the library. */
#library-total {
    margin: 0;
    padding: 6px 4px 2px;
    font-size: 12px;
    color: var(--fg-dim);
}
#library-total[hidden] { display: none; }

/* Storage meter (usage line + bar + persistence status). */
#library-total .sm-line { margin: 0; }
#library-total .sm-status { margin: 2px 0 0; font-size: 11px; }
#library-total .sm-bar {
    height: 4px;
    margin: 4px 0;
    border-radius: 2px;
    background: var(--bg2);
    overflow: hidden;
}
#library-total .sm-fill {
    height: 100%;
    background: var(--green);
    transition: width 0.2s ease;
}
#library-total.low .sm-fill { background: var(--red-bright); }
#library-total.low .sm-status { color: var(--red-bright); }

/* Song group headers in the library list. */
#library-list .lib-group {
    list-style: none;
    padding: 8px 4px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-dim);
    border-top: 1px solid var(--bg2);
    cursor: pointer;
}
#library-list .lib-group::before { content: '▾ '; }
#library-list .lib-group[data-collapsed="true"]::before { content: '▸ '; }