.songbook-badge {
    opacity: 0;
    scale: .75;
}
#toast {
    width: max-content;
    max-width: min(32rem, calc(100vw - 2rem));
    overflow-wrap: anywhere;
    text-align: center;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
}

@media (hover: hover) and (pointer: fine) {
    #songsTableBody tr:hover .songbook-badge {
        opacity: 1;
        scale: 1;
    }
}

@media (max-width: 767px) {
    .songs-table,
    .songs-table tbody { display: block; }
    
    .songs-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    #songsTableBody tr {
        display: grid;
        grid-template-columns: 1.75rem minmax(0, 1fr) auto;
        grid-template-areas:
            "index title title"
            "index artist category"
            "index note note";
        column-gap: .625rem;
        row-gap: .375rem;
        padding: .875rem 0;
    }
    #songsTableBody td {
        min-width: 0;
        padding: 0;
    }
    #songsTableBody .song-index {
        grid-area: index;
        padding-top: .125rem;
        text-align: left;
    }
    #songsTableBody .song-main { display: contents; }
    .song-title {
        grid-area: title;
        min-width: 0;
        flex-wrap: nowrap;
        align-items: baseline;
        overflow-wrap: anywhere;
    }
    .song-title > span:first-child { min-width: 0; }
    .songbook-badge { flex-shrink: 0; }
    .song-note {
        grid-area: note;
        margin-top: 0;
        align-items: baseline;
        overflow-wrap: anywhere;
    }
    .song-note i { flex-shrink: 0; }
    .song-artist {
        grid-area: artist;
        font-size: .75rem;
        overflow-wrap: anywhere;
    }
    .song-category {
        grid-area: category;
        align-self: start;
        text-align: right;
    }
}