/* Outfit is loaded from css/outfit-local.css; the Google Fonts @import is stripped here. */
/** remove caret icon from dropdowns */
#header-filter-btns .dropdown-toggle::after {
    display: none;
}

/* Unified header search + collapsible advanced filters */
.nvc-unified-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
    width: 100%;
    max-width: 640px;
    padding: 0 12px;
}

.nvc-unified-search-shell {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 400px;
    min-height: 36px;
    padding: 0 4px 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(165deg, rgba(34, 34, 34, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 28px rgba(0, 0, 0, 0.45);
    font-family: 'Outfit', system-ui, sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 12px;
}

.nvc-unified-search-shell:focus-within {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 10px 32px rgba(0, 0, 0, 0.5);
}

.nvc-unified-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #f2f2f2;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    /* padding: 12px 10px 12px 0; */
    text-align: left;
}

.nvc-unified-search-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 400;
    letter-spacing: 0.03em;
}

.nvc-unified-search-input::-webkit-search-decoration,
.nvc-unified-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.nvc-search-bar-divider {
    align-self: center;
    width: 1px;
    height: 26px;
    margin: 0 6px 0 2px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    flex-shrink: 0;
}

.nvc-search-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    min-height: 28px;
    margin: 0 2px 0 0;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.nvc-search-advanced-toggle:hover,
.nvc-search-advanced-toggle:focus-visible {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.nvc-search-advanced-toggle.is-open {
    color: rgba(238, 238, 238, 0.9);
}

.nvc-search-extended {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    cursor: pointer;
    margin: 0;
    border-radius: 0 11px 11px 0;
    transition: background 0.15s ease;
}

.nvc-search-extended:hover {
    background: rgba(255, 255, 255, 0.05);
}

.nvc-search-extended input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.nvc-search-extended-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 8px;
}

.nvc-search-extended-box {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.nvc-search-extended input:focus-visible + .nvc-search-extended-ui .nvc-search-extended-box {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.nvc-search-extended input:checked + .nvc-search-extended-ui .nvc-search-extended-box {
    border-color: rgba(255, 220, 160, 0.85);
    background: linear-gradient(145deg, rgba(255, 214, 150, 0.95), rgba(200, 155, 80, 0.75));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.25) inset,
        0 0 12px rgba(255, 200, 120, 0.25);
}

.nvc-search-extended input:checked + .nvc-search-extended-ui .nvc-search-extended-box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 4px;
    height: 8px;
    margin: 0;
    border: solid rgba(22, 22, 22, 0.92);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.nvc-advanced-filters {
    position: relative;
    margin: 0 auto 4px;
    text-align: center;
    max-width: 960px;
}

/* Required child of <details>; control is #nvc_advanced_filters_toggle in the search bar */
.nvc-advanced-filters-summary {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    list-style: none;
    cursor: default;
}

.nvc-advanced-filters-summary::-webkit-details-marker {
    display: none;
}

.nvc-advanced-filters-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px 6px;
    padding-top: 10px;
}

/* Site nav pills (Kids / MC / Story, etc.) */
.btn-group.nvc-site-nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    margin: 6px auto 16px;
    max-width: 52rem;
    vertical-align: middle;
}

.btn-group.nvc-site-nav > a {
    color: inherit;
    text-decoration: none;
    float: none !important;
}

.btn-group.nvc-site-nav > a:hover,
.btn-group.nvc-site-nav > a:focus {
    text-decoration: none;
}

.nvc-header-btn {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.07em;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(165deg, rgba(40, 40, 40, 0.97) 0%, rgba(12, 12, 12, 0.99) 100%);
    color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 14px rgba(0, 0, 0, 0.38);
    transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    cursor: pointer;
    margin: 0 !important;
    line-height: 1.25;
}

.nvc-header-btn:hover,
.nvc-header-btn:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 6px 20px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

.nvc-header-btn:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(255, 200, 130, 0.28);
}

/* Toolbar rows: chord app + setlist explorer top actions */
#top-action-settings.nvc-pill-row,
#header-filter-btns #button-list.nvc-pill-row,
#header-filter-btns .btn-group.action-row-one.nvc-pill-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    float: none;
    vertical-align: middle;
}

#top-action-settings.nvc-pill-row {
    gap: 6px;
}

#top-action-settings.nvc-pill-row > .btn,
#header-filter-btns #button-list.nvc-pill-row > .btn,
#header-filter-btns .btn-group.action-row-one.nvc-pill-row > .btn {
    /* Override Bootstrap .btn-group > .btn { flex: 1 1 auto } — keep pills content-sized */
    flex: 0 0 auto;    
    float: none;
    margin: 0 !important;
    border-radius: 8px !important;
    min-width: 50px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 9px 15px;
    line-height: 1.25;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
}

#top-action-settings.nvc-pill-row > .btn-outline-light,
#header-filter-btns #button-list.nvc-pill-row > .btn-outline-light,
#header-filter-btns .btn-group.action-row-one.nvc-pill-row > .btn-outline-light {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.92);
}

#top-action-settings.nvc-pill-row > .btn-outline-light:hover,
#top-action-settings.nvc-pill-row > .btn-outline-light:focus,
#header-filter-btns #button-list.nvc-pill-row > .btn-outline-light:hover,
#header-filter-btns #button-list.nvc-pill-row > .btn-outline-light:focus,
#header-filter-btns .btn-group.action-row-one.nvc-pill-row > .btn-outline-light:hover,
#header-filter-btns .btn-group.action-row-one.nvc-pill-row > .btn-outline-light:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

#header-filter-btns #button-list.nvc-pill-row > .btn-light {
    background: linear-gradient(165deg, rgba(55, 55, 55, 0.98) 0%, rgba(28, 28, 28, 0.99) 100%);
    color: rgba(255, 255, 255, 0.94);
}

#header-filter-btns #button-list.nvc-pill-row > .btn-light:hover,
#header-filter-btns #button-list.nvc-pill-row > .btn-light:focus {
    background: linear-gradient(165deg, rgba(68, 68, 68, 0.98) 0%, rgba(36, 36, 36, 0.99) 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

#header-filter-btns #button-list.nvc-pill-row > .btn:disabled,
#header-filter-btns #button-list.nvc-pill-row > .btn[disabled] {
    opacity: 0.75;
    cursor: default;
    transform: none;
}

/* Master transpose row only: Key ↓ / TP / Key ↑ */
#header-filter-btns #button-list.nvc-pill-row {
    gap: 5px;
}

#header-filter-btns #button-list.nvc-pill-row > .btn {
    padding: 4px 9px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600;
    min-width: 0 !important;
    letter-spacing: 0.03em;
    line-height: 1.15;
}

/* Toolbar row: compact text + icon buttons (also when #top-action-settings is outside #header-filter-btns) */
#top-action-settings.nvc-pill-row > .btn.nvc-toolbar-text {
    box-sizing: border-box;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 5px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 12rem;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    flex-shrink: 0;
}

#top-action-settings.nvc-pill-row > .btn.nvc-toolbar-icon {
    box-sizing: border-box;
    height: 27px !important;
    min-width: 50px !important;
    width: auto !important;
    max-width: 4.5rem;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 10px !important;
    letter-spacing: 0 !important;
    line-height: 0;
    text-align: center;
    flex: 0 0 auto;
    flex-shrink: 0;
}

#top-action-settings.nvc-pill-row > .btn.nvc-toolbar-icon svg {
    display: block;
    flex-shrink: 0;
    margin: 0;
}

/* Chord compass toolbars: nested .btn-group + .btn — avoid Bootstrap equal flex stretch */
#compass_actions.btn-group,
#compass_actions_two.btn-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    float: none;
}

#compass_actions.btn-group > .btn,
#compass_actions.btn-group > .btn-group,
#compass_actions_two.btn-group > .btn {
    flex: 0 0 auto;
}

#compass_actions.btn-group .btn-group > .btn {
    flex: 0 0 auto;
}

/* Advanced filter dropdown triggers */
#header-filter-btns .nvc-advanced-filters-inner > .btn-group {
    margin: 2px;
}

#header-filter-btns .nvc-advanced-filters-inner .dropdown-toggle.song-filter {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 8px 14px;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(165deg, rgba(36, 36, 36, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#header-filter-btns .nvc-advanced-filters-inner .dropdown-toggle.song-filter:hover,
#header-filter-btns .nvc-advanced-filters-inner .dropdown-toggle.song-filter:focus {
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

#header-filter-btns .dropdown-toggle.setlist-filter {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 8px 14px;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(165deg, rgba(36, 36, 36, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition: border-color 0.15s ease, color 0.15s ease;
}

#header-filter-btns .dropdown-toggle.setlist-filter:hover,
#header-filter-btns .dropdown-toggle.setlist-filter:focus {
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

#content {
    text-align: center;
    margin-top: 20px;
    max-width: unset;
}

.feedback-btn {
    color: #a8a8a8;
    text-decoration: none;
}

.feedback-btn:hover,
.feedback-btn:focus {
    color: #e6e6e6;
    text-decoration: underline;
}

#find_song {
    text-align: center;
    /* padding: 5px; */
    min-width: 280px;
}

html,
body {
    background-color: black;
    color: white;
}

.container {
    /* max-width: 90%; */
    /* text-align: center; */
    /* position: relative; */
    /* margin: 0 auto; */
}




#setlist-view-songs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    grid-template-rows: masonry;
}

#setlist-view-songs-grid>.setlist-part-view-table {
    margin: 7pt 0;
    margin-bottom: 0;
    padding: 0 10pt 5pt;
}

.song_results_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    grid-template-rows: masonry;
    /* grid-gap: 1rem;      */
}

.song_results_grid>* {
    margin: 7pt 0;
    /* margin-top: 0; */
    padding: 0 10pt 5pt;
    /* display:inline-block;
    vertical-align:middle;
    background-color:darkslategrey; */
}

.default_item_space {
    padding: 1rem 0;
}

.song_item {
    /* border-bottom: 1px solid #444444; */
    /* margin: 3pt; */
    /* border: 1px solid #444444; */
    /* border-radius: 5px; */
}

#song_results {
    /* text-align: center; */
    /* position: relative; */
    /* width: auto; */
    /* display: block; */
}

.setlist-part-header {
    font-size: 22px;
    margin-bottom: 5px;
    margin-top: -8px;
}

.time-estimate-part {
    padding-left: 5px;
    font-size: 10px;
}

.setlist-part-header span {
    border: solid 1px #fff;
    border-radius: 5px;
    width: auto;
    padding: 0px 30px;
    padding-bottom: 2px;
}

#output {
    height: auto;
    width: 100%;
    margin: 0 auto;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
}

#song_item_0 {
    padding-top: 0;
}

#output table,
#output td,
#output th {
    border: 1px solid #555;
}

#output table {
    width: auto;
    margin: 10px auto auto;
    /* margin-bottom: 10px; */
    left: 0;
    right: 0;
    font-family: "Courier New", Courier, monospace;
}

/***



#output td {
    border: 1px solid #555;
}

#output table {
    width: auto;
    margin: 10px auto auto;
    left: 0;
    right: 0;
    font-family: "Courier New", Courier, monospace;
  border-collapse: separate;
  border-spacing: 0;
}

#output table tr:nth-child(2) td:first-of-type {
  border-top-left-radius: 3px !important;
}

#output table tr:nth-child(2) td:last-of-type {
  border-top-right-radius: 3px !important;
}

#output table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 3px !important;
}

#output table  tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 3px !important;
}

*/

.couriernew {
    font-family: "Courier New", Courier, monospace;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

th {
    height: 20px;
}

#output table .left {
    width: auto;
    min-width: 100px;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px;
}

#output table .right {
    text-align: left;
    padding-left: 10px;
    min-width: 150px;
}

hr {
    border-top: #444 1px solid;
}

.chord_distance {
    margin-left: 10px;
}

.chord {
    float: left;
    min-width: 30px;
}

@media only screen and(min-width: 851px) {
    .song_content_table .youtubetable {
        float: right;
        margin-right: 10px;
    }
}

@media only screen and(max-width: 850px) {
    .song_content_table {
        width: 100% !important;
        float: initial !important;
    }

    .youtube-content {
        float: initial !important;
        width: 100% !important;
    }

    .youtube-content iframe {
        margin-top: 0 !important;
        position: relative !important;
        float: initial !important;
        max-width: 100% !important;
    }

    .chord {
        float: left;
        min-width: 10px;
    }
}

h2,
.song_title {
    /* font-family: monospace; */
    /* font-family: 'Courier New', Courier, monospace; */
}

.song_item {
    /* width: 96%; */
}

.song_title_artist {
    margin-bottom: 1px;
}

.song_item_artist {
    font-size: 10px;
    margin-bottom: 2px;
    font-style: italic;
}

.form-control {
    margin: 0 5% 5px 5px;
    height: 20px;
    width: 97%;
}

.metadata {
    /* font-family: cursive; */
    font-family: monospace;
}

#keys_dropdown .form-control,
#progression_dropdown .form-control {
    width: 90%;
}

.dropdown-menu li a input {
    vertical-align: middle;
    margin-top: -2px;
}

.autocomplete-items div {
    font-family: monospace;
    font-size: 9px;
}

.btn {
    font-family: monospace;
    padding: 1px 5px;
}

.fwd-btn-style {
    /* padding-left : 20px; */
    padding: 1px 3px;
    border-radius: 5px;
    border: #ccc solid 1px;
    font-family: monospace;
    color: #ccc;
    background-color: black;
    text-decoration: none;
    font-size: smaller;
}

.fwd-btn-style:hover {
    color: white;
    border: white solid 1px;
    text-decoration: none;
}

.multitracks img {
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

.ref_img {
    text-align: center
}

.worshiptogether:hover {
    color: #51c51f;
    border: #51c51f solid 1px;
}

.spotify:hover {
    color: #2b7a09;
    border: #2b7a09 solid 1px;
}

.multitracks:hover {
    color: #00a8e6;
    border: #00a8e6 solid 1px;
}

.genius:hover {
    color: #f7f761;
    border: #f8f16c solid 1px;
}

.ref_img img {
    /* padding-top: 5px;
    padding-bottom: 5px; */
    /* width: 150px; */
    width: 100px;
    cursor: pointer;
}

.ref_wt_img img {
    height: 18px;
    cursor: pointer;
    border-radius: 3px;
    margin-right: 7px;
}

.ref_mt_img img {
    height: 18px;
    cursor: pointer;
    border-radius: 3px;
    margin-right: 7px;
}

.ref_spotify_img img {
    height: 17px;
    cursor: pointer;
    border-radius: 3px;
    margin-right: 7px;
}

.ref_gn_img img {
    height: 16px;
    cursor: pointer;
    border-radius: 3px;
    margin-right: 3px;
}

.youtube img {
    /* padding-top: 3px;  
    width: 45px; */
    /* padding-top: 2px; */
    height: 16px;
    border-radius: 3px;
    width: auto;
}

.praisecharts img {
    /* padding-top: 2px; */
    height: 18px;
    border-radius: 3px;
    width: auto;
    margin-right: 5px;
}

/* 
.praisecharts img:hover {
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 2px;
    padding-top: 2px;    
    height: 24px;
    width: auto;
} */

.balance-url-img-pos {
    margin-left: 5px;
    margin-right: 5px;
}

.chordify img {
    padding-top: 3px;
    width: 60px;
    margin-left: 5px;
}

.genius img {
    /* height: 30px; */
    width: 70px;
}

.worshiptogether img {
    width: 100px;
}

.xwide {
    padding-right: 12px;
}

.scrollable-menu {
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
}

#results {
    padding-top: 10px;
}

/* Site header wordmark — matches Song Wizard (/app/add/) */
.nvc-brand-wordmark {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.22em;
}

#page_title {
    color: white;
    text-decoration: none;
}

#page_title:hover,
#page_title:focus {
    color: #e0e0e0;
    text-decoration: none;
}

#page_title h2 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.2em;
    font-size: clamp(1.15rem, 2.8vw, 1.65rem);
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.kofi-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0.75rem 0 0.25rem;
    line-height: 0;
    clear: both;
}

/* Footer block — neutral grays, unified ghost buttons (matches wordmark #ccc hovers) */
.site-footer {
    --footer-fg: #a8a8a8;
    --footer-fg-hover: #e8e8e8;
    --footer-muted: #7a7a7a;
    --footer-border: rgba(255, 255, 255, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    text-align: center;
    padding-bottom: 0.5rem;
}

.site-footer hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1rem auto;
    max-width: 36rem;
}

.site-footer #don-pp {
    color: var(--footer-fg);
}

.site-footer #don-pp a {
    color: var(--footer-fg);
    text-decoration: none;
}

.site-footer #don-pp a:hover,
.site-footer #don-pp a:focus {
    color: var(--footer-fg-hover);
    text-decoration: underline;
}

.site-footer #don-pp img {
    height: 34px;
    width: auto;
    vertical-align: middle;
    margin-left: 0.35rem;
    padding: 6px 10px;
    box-sizing: content-box;
    border: 1px solid var(--footer-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    opacity: 0.9;
    filter: grayscale(1) brightness(1.05);
    transition: border-color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.site-footer #don-pp a:hover img,
.site-footer #don-pp a:focus img {
    border-color: rgba(255, 255, 255, 0.38);
    opacity: 1;
    filter: grayscale(0.35) brightness(1.08);
}

.site-footer #impressum,
.site-footer #privacy {
    color: var(--footer-muted);
    text-decoration: none;
    font-size: small;
}

.site-footer #impressum:hover,
.site-footer #impressum:focus,
.site-footer #privacy:hover,
.site-footer #privacy:focus {
    color: var(--footer-fg-hover);
    text-decoration: underline;
}

.footer-action-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.4rem 0.95rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #c8c8c8;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.footer-action-btn:hover,
.footer-action-btn:focus {
    color: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.site-footer .kofi-footer-img {
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 5px 10px;
    box-sizing: content-box;
    background: rgba(255, 255, 255, 0.04);
    filter: grayscale(1) brightness(1.12);
    opacity: 0.92;
    transition: opacity 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.site-footer .kofi-footer a:hover .kofi-footer-img,
.site-footer .kofi-footer a:focus .kofi-footer-img {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.36);
    filter: grayscale(0.5) brightness(1.1);
}

#impressum,
#privacy,
#home {
    color: gray;
    font-size: small;
}

.urls {
    clear: both;
}

/* Streaming / reference icons — toned down to match neutral UI */
.urls>a:not(.fwd-btn-style)>img {
    opacity: 0.78;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.urls>a:not(.fwd-btn-style):hover>img,
.urls>a:not(.fwd-btn-style):focus>img {
    opacity: 1;
    filter: brightness(1.08);
}

.youtube-content {
    position: relative;
}

.youtube-content iframe {
    left: 0;
    right: 0;
    max-width: 100% !important;
    margin-top: 10px;
}

.btn-group a {
    color: black;
    text-align: center;
    cursor: pointer;
}

.btn-group li {
    margin-left: 10px;
}

#songs_dropdown,
#albums_dropdown,
#artists_dropdown {
    transform: initial !important;
    left: 0;
    right: 0;
    width: 360px;
    margin: 28px auto auto;
    font-family: monospace;
}

#artists_dropdown {
    width: 250px;
}

#artists_dropdown .form-control {
    width: 210px;
}

#songs_dropdown .form-control {
    width: 300px;
}

#albums_dropdown .form-control {
    width: 330px;
}

#keys_dropdown .form-control {
    width: 68px;
}


#songs_dropdown {
    width: 330px;
}

#keys_dropdown,
#progression_dropdown {
    font-family: monospace;
    min-width: 80px;
    width: 170px;
}

#keys_dropdown {
    width: 70px;
}

.xwide {
    padding-right: 12px;
}

.scrollable-menu {
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
}

#results {
    padding-top: 10px;
}

#impressum,
#privacy,
#home {
    color: gray;
}

.urls {
    clear: both;
}

.song-filter {
    min-width: 40px;
}

.prog_marked {
    color: red;
}

#missing_chords_form,
.feedbackform {
    background-color: black;
    position: fixed;
    display: none;
    opacity: 0;
    width: 80%;
    height: 80%;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: #ddd 1px solid;
    border-radius: 10px;
    z-index: 100;
    vertical-align: middle;
    text-align: center;
    align-items: center;
}

#missing_song_dialogue,
.feedback_dialogue {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    margin: auto;
    max-height: 150px;
    width: 80%;
    align-items: center;
    text-align: center;
}

#missingSongTitle,
.feedback_title {
    max-width: 300px;
    width: 80%;
    text-align: center;
    margin-top: 5px;
}

#feedbackFormTitle,
#featureReqFormTitle {
    max-width: 400px;
    width: 100%;
    margin-top: 5px;
    height: 100px;
}

#background-focus {
    z-index: 99;
    display: none;
    position: fixed;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.msg,
.msg p {
    white-space: pre-line !important;
}

#submitMissingSongButton,
#cancelMissingSong,
.formButton {
    margin-top: 10px;
    width: 100px;
    text-align: center;
    /* height: 20px; */
}

#missingSongThankYou,
.formthankyou {
    display: none;
    text-align: center;
}

.share_song {
    height: 16px;
    filter: invert(1);
    cursor: pointer
}

.add_song_fav_icon {
    cursor: pointer;
    width: 16px;
}

.tooltip-main {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-weight: 700;
    background: #f3f3f3;
    border: 1px solid #737373;
    color: #737373;
    margin: 4px 121px 0 5px;
    float: right;
    text-align: center;
}

.tooltip-qm {
    float: left;
    margin: -2px 0 3px 4px;
    font-size: 12px;
}

.tooltip-inner {
    max-width: 236px !important;
    max-height: 30px;
    font-size: 10px;
    /* margin-top: 0px; */
    /* margin-bottom: -10px; */
    padding: 2px 5px;
    background: #ccc;
    color: rgb(0, 0, 0, 0.7);
    border: 1px solid #737373;
    text-align: center;
    /* left: 50%;
    transform: translateX(-50%); */
}

.arrow::before {
    z-index: 1;
    /* border-color: transparent !important; */
    border-top-color: #ccc !important;
    border-bottom-color: #ccc !important;
}


.tooltip.show {
    opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
}

#don-pp img {
    height: 50px;
}

#don-pp {
    /* display: none; */
    font-size: small;
}

.nashville-style {
    font-family: "Courier New", Courier, monospace;
    line-height: inherit;
    vertical-align: baseline;
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
}

.song-transpose {
    margin: 0 5px;
    margin-top: 3px;
}

#currentTranspositionBtn,
.song-transpose {
    opacity: 1 !important;
}

#songs_dropdown,
#albums_dropdown,
#artists_dropdown,
#keys_dropdown,
#progression_dropdown,
.form-control,
.metadata,
.song-transpose-down,
.song-transpose-up,
.song-transpose {
    font-size: small;
}


@media (max-width:1281px) {
    /* hi-res laptops and desktops */
}

@media (max-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
}

@media (max-width:961px) {

    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .song_content_table td {
        font-size: 20px;
    }

    .chord {
        min-width: 15px;
        padding-right: 9px;
    }

    #output table .left {
        min-width: 115px;
    }

    .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

@media (max-width:641px) {

    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .song_content_table td {
        font-size: 13px;
    }

    .chord {
        min-width: 15px;
        padding-right: 9px;
    }

    .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

@media (max-width:481px) {

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .song_content_table td {
        font-size: 13px;
    }

    .chord {
        min-width: 15px;
        padding-right: 9px;
    }

    .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .song_item {
        width: 100%;
    }
}

@media (max-width:320px) {

    /* smartphones, iPhone, portrait 480x320 phones */
    .song_content_table td {
        font-size: small;
    }

    .chord {
        min-width: 15px;
        padding-right: 9px;
    }

    #output table .left {
        white-space: nowrap;
    }

    .container {
        padding-right: 0px !important;
        padding-left: 10px !important;
    }

    .song_item {
        width: 100%;
    }
}

#footer-survey-wrap {
    display: none;
    vertical-align: middle;
}

#footer-survey-wrap .footer-action-btn {
    vertical-align: middle;
}


.radio-container {
    display: flex;
    flex-direction: row;
}

.radio-container label {
    display: flex;
    align-items: center;
}

.radio-container input[type="radio"] {
    margin-left: 8px;
    margin-right: 2px;
}

#svg-clipboard-icon {
    margin-bottom: 12px;
    margin-top: -0.6px;
}
/* ===== Missing-song request dialog — styled after the unified header ===== */

#missing_chords_form {
    width: min(430px, 92vw);
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(34, 34, 34, 0.97) 0%, rgba(12, 12, 12, 0.99) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 60px rgba(0, 0, 0, 0.6);
    font-family: 'Outfit', system-ui, sans-serif;
}

#missing_song_dialogue {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    padding: 26px 26px 22px;
}

.missing-song-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: block;
    margin: 0 auto 10px;
}

#missingSongHeader {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 2px;
}

.missing-song-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

.missing-song-input {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 8px 0 0;
    padding: 10px 14px;
    text-align: left;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #f2f2f2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.missing-song-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.missing-song-input:focus {
    border-color: rgba(255, 200, 130, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 200, 130, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.missing-song-row {
    display: flex;
    gap: 8px;
}

.missing-song-row .missing-song-input {
    flex: 1 1 0;
    min-width: 0;
}

/* Honeypot field: must never be visible to humans. */
#missingSongWebsite {
    display: none !important;
}

#missingSongNote {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 12px;
}

#cancelMissingSong,
#submitMissingSongButton {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    width: auto;
    min-width: 120px;
    padding: 10px 22px;
    margin: 16px 4px 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

#cancelMissingSong {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
}

#cancelMissingSong:hover,
#cancelMissingSong:focus {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    transform: translateY(-1px);
}

#submitMissingSongButton {
    background: linear-gradient(165deg, #ffd9a3 0%, #f2b866 100%);
    border-color: rgba(255, 200, 130, 0.6);
    color: #221605;
    box-shadow: 0 4px 14px rgba(255, 200, 130, 0.18);
}

#submitMissingSongButton:hover,
#submitMissingSongButton:focus {
    background: linear-gradient(165deg, #ffe1b5 0%, #f5c079 100%);
    color: #221605;
    box-shadow: 0 6px 20px rgba(255, 200, 130, 0.28);
    transform: translateY(-1px);
}

#missingSongThankYou {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 14.5px;
    color: #ffd9a3;
    padding: 14px 0;
}

#background-focus {
    background-color: #000;
}

@media (max-width: 480px) {
    #missing_chords_form {
        width: 94vw;
    }

    #missing_song_dialogue {
        padding: 20px 16px 18px;
    }
}

/* The old #missingSongTitle rule (shared with .feedback_title) outranks the
   class styles; realign the title input with the other dialog inputs. */
#missingSongTitle.missing-song-input {
    max-width: none;
    width: 100%;
    text-align: left;
    margin: 8px 0 0;
}

/* ===== Ko-fi support ask on the setlist-success dialog ===== */

#setlist-success-kofi {
    position: relative;
    margin: 18px auto 4px;
    max-width: 340px;
    padding: 12px 34px 12px 16px;
    border: 1px solid rgba(255, 200, 130, 0.35);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(40, 34, 24, 0.9) 0%, rgba(16, 13, 8, 0.95) 100%);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

#setlist-success-kofi span {
    display: block;
    margin-bottom: 8px;
}

#setlist-success-kofi-btn {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    background: linear-gradient(165deg, #ffd9a3 0%, #f2b866 100%);
    color: #221605 !important;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: box-shadow 0.18s ease, transform 0.12s ease;
}

#setlist-success-kofi-btn:hover,
#setlist-success-kofi-btn:focus {
    box-shadow: 0 4px 14px rgba(255, 200, 130, 0.28);
    transform: translateY(-1px);
}

#setlist-success-kofi-close {
    position: absolute;
    top: 4px;
    right: 10px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

#setlist-success-kofi-close:hover {
    color: #fff;
}

/* ===== Account dialogs & header pill — mirrors the missing-song dialog ===== */

/* Header pill (js/user.js -> addAccountButton). The .nvc-pill-row rules above
   already give it the toolbar geometry; this only adds the signed-in accent. */
#account-pill.nvc-account-pill-in {
    border-color: rgba(255, 200, 130, 0.55);
    background: linear-gradient(165deg, rgba(255, 217, 163, 0.16) 0%, rgba(242, 184, 102, 0.1) 100%);
    color: #ffd9a3;
}

#nvc_account_form {
    position: fixed;
    display: none;
    opacity: 0;
    width: min(430px, 92vw);
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(34, 34, 34, 0.97) 0%, rgba(12, 12, 12, 0.99) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 60px rgba(0, 0, 0, 0.6);
    font-family: 'Outfit', system-ui, sans-serif;
    text-align: center;
    z-index: 100;
    transition: opacity 0.2s ease;
}

#nvc_account_dialogue {
    position: relative;
    padding: 26px 26px 22px;
}

.nvc-account-close {
    position: absolute;
    top: 2px;
    right: 4px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 0.18s ease;
}

.nvc-account-close:hover,
.nvc-account-close:focus {
    color: #fff;
    outline: none;
}

.nvc-account-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: block;
    margin: 0 auto 10px;
}

#nvcAccountHeader {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 2px;
}

.nvc-account-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
    word-break: break-word;
}

.nvc-account-msg {
    display: none;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    margin: 0 0 12px;
    padding: 10px 13px;
    border-radius: 12px;
    border: 1px solid transparent;
    word-break: break-word;
}

.nvc-account-msg-error {
    display: block;
    color: #ffb4a8;
    background: rgba(255, 120, 100, 0.1);
    border-color: rgba(255, 120, 100, 0.35);
}

.nvc-account-msg-success {
    display: block;
    color: #ffd9a3;
    background: rgba(255, 200, 130, 0.1);
    border-color: rgba(255, 200, 130, 0.35);
}

.nvc-account-panel {
    display: none;
}

.nvc-account-input {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 8px 0 0;
    padding: 10px 14px;
    text-align: left;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #f2f2f2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.nvc-account-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.nvc-account-input:focus {
    border-color: rgba(255, 200, 130, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 200, 130, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

/* Honeypot field: must never be visible to humans. */
.nvc-account-hp {
    display: none !important;
}

.nvc-account-note {
    display: block;
    font-size: 11.5px;
    line-height: 1.45;
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
}

.nvc-account-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.nvc-account-btn {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    width: auto;
    min-width: 120px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.nvc-account-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.nvc-account-btn-primary {
    background: linear-gradient(165deg, #ffd9a3 0%, #f2b866 100%);
    border-color: rgba(255, 200, 130, 0.6);
    color: #221605;
    box-shadow: 0 4px 14px rgba(255, 200, 130, 0.18);
}

.nvc-account-btn-primary:hover:not(:disabled),
.nvc-account-btn-primary:focus:not(:disabled) {
    background: linear-gradient(165deg, #ffe1b5 0%, #f5c079 100%);
    color: #221605;
    box-shadow: 0 6px 20px rgba(255, 200, 130, 0.28);
    transform: translateY(-1px);
}

.nvc-account-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
}

.nvc-account-btn-ghost:hover:not(:disabled),
.nvc-account-btn-ghost:focus:not(:disabled) {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.nvc-account-btn-danger {
    background: transparent;
    color: #ffb4a8;
    border-color: rgba(255, 120, 100, 0.4);
}

.nvc-account-btn-danger:hover:not(:disabled),
.nvc-account-btn-danger:focus:not(:disabled) {
    color: #fff;
    background: rgba(255, 120, 100, 0.16);
    border-color: rgba(255, 120, 100, 0.6);
    transform: translateY(-1px);
}

.nvc-account-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin-top: 14px;
}

.nvc-account-link {
    background: transparent;
    border: none;
    padding: 2px 0;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.18s ease;
}

.nvc-account-link:hover,
.nvc-account-link:focus {
    color: #ffd9a3;
    outline: none;
}

.nvc-account-link-danger:hover,
.nvc-account-link-danger:focus {
    color: #ffb4a8;
}

.nvc-account-block {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.nvc-account-block-open {
    display: block;
}

.nvc-account-summary {
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
}

.nvc-account-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nvc-account-summary-row:last-child {
    border-bottom: none;
}

.nvc-account-summary-label {
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.03em;
}

.nvc-account-summary-value {
    color: #fff;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

#nvc-account-toast {
    position: fixed;
    display: none;
    opacity: 0;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    /* The GDPR cookie notice sits at z-index 10000000 along the bottom edge —
       stay above it so a verification confirmation is never swallowed. */
    z-index: 10000001;
    max-width: min(420px, 92vw);
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 200, 130, 0.35);
    background: linear-gradient(165deg, rgba(40, 34, 24, 0.97) 0%, rgba(16, 13, 8, 0.99) 100%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #ffd9a3;
    text-align: center;
    transition: opacity 0.35s ease;
}

#nvc-account-toast.nvc-account-toast-error {
    border-color: rgba(255, 120, 100, 0.4);
    color: #ffb4a8;
}

@media (max-width: 480px) {
    #nvc_account_form {
        width: 94vw;
    }

    #nvc_account_dialogue {
        padding: 20px 16px 18px;
    }

    .nvc-account-btn {
        min-width: 100%;
    }
}

/* ===== Song overview — the catalog landing list (js/song_overview.js) =====
   Appended block. Every selector is namespaced (.nvc-song-overview / .nvc-so-* /
   .nvc-song-detail-bar / .nvc-view-toggle) so no existing rule is overridden. */

.nvc-song-overview {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 62rem;
    margin: 0 auto;
    font-family: 'Outfit', system-ui, sans-serif;
    text-align: left;
}

/* --- toolbar above the list: result count + sort segmented control --- */

.nvc-song-overview .nvc-so-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 0 2px 10px;
}

.nvc-song-overview .nvc-so-count {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

.nvc-song-overview .nvc-so-count strong {
    color: #fff;
    font-weight: 600;
}

.nvc-song-overview .nvc-so-count-total {
    color: rgba(255, 255, 255, 0.33);
}

.nvc-song-overview .nvc-so-sort {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.nvc-song-overview .nvc-so-sort-btn {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 5px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.nvc-song-overview .nvc-so-sort-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.nvc-song-overview .nvc-so-sort-btn.is-active {
    background: linear-gradient(165deg, #ffd9a3 0%, #f2b866 100%);
    color: #221605;
    font-weight: 600;
}

.nvc-song-overview .nvc-so-sort-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(255, 200, 130, 0.28);
}

/* --- the card that holds the header row and every song row --- */

.nvc-song-overview .nvc-so-card {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(34, 34, 34, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* li = [ clickable row | favorite ]; the row itself = [ song | key | bpm | time | length ] */
.nvc-song-overview .nvc-so-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.9rem;
    align-items: center;
}

.nvc-song-overview .nvc-so-cells {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.4rem 2.9rem 2.6rem 3.3rem;
    align-items: center;
    column-gap: 10px;
    min-width: 0;
}

.nvc-song-overview .nvc-so-head {
    padding: 8px 5px 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}

.nvc-song-overview .nvc-so-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nvc-song-overview .nvc-so-item {
    padding: 0 5px 0 0;
    transition: background 0.14s ease;
}

.nvc-song-overview .nvc-so-item + .nvc-so-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nvc-song-overview .nvc-so-item:hover {
    background: rgba(255, 255, 255, 0.045);
}

.nvc-song-overview .nvc-so-row {
    padding: 8px 0 8px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nvc-song-overview .nvc-so-row:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 2px 0 0 #f2b866,
        inset 0 0 0 1px rgba(255, 200, 130, 0.35);
}

.nvc-song-overview .nvc-so-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nvc-song-overview .nvc-so-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nvc-song-overview .nvc-so-sub {
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nvc-song-overview .nvc-so-num {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    white-space: nowrap;
}

.nvc-song-overview .nvc-so-key {
    color: #ffd9a3;
    font-weight: 600;
}

.nvc-song-overview .nvc-so-empty {
    color: rgba(255, 255, 255, 0.18);
}

.nvc-song-overview .nvc-so-fav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.nvc-song-overview .nvc-so-fav svg {
    display: block;
}

.nvc-song-overview .nvc-so-fav:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.07);
}

.nvc-song-overview .nvc-so-fav.is-on {
    color: #f2b866;
}

.nvc-song-overview .nvc-so-fav:focus-visible {
    outline: none;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 200, 130, 0.4);
}

/* --- phones: the metadata columns reflow onto a second line, never a scrollbar --- */

@media (max-width: 620px) {
    .nvc-song-overview .nvc-so-head {
        display: none;
    }

    .nvc-song-overview .nvc-so-cells {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0;
    }

    .nvc-song-overview .nvc-so-main {
        flex: 1 1 100%;
    }

    .nvc-song-overview .nvc-so-num {
        margin-top: 2px;
        font-size: 11.5px;
        text-align: left;
    }

    .nvc-song-overview .nvc-so-num + .nvc-so-num::before {
        content: "\00B7";
        padding: 0 6px;
        color: rgba(255, 255, 255, 0.25);
    }

    .nvc-song-overview .nvc-so-row {
        padding: 8px 0 8px 12px;
    }

    .nvc-song-overview .nvc-so-title {
        font-size: 13.5px;
    }
}

@media (max-width: 400px) {
    .nvc-song-overview .nvc-so-bar {
        justify-content: center;
    }

    .nvc-song-overview .nvc-so-sort-btn {
        padding: 5px 10px;
    }
}

/* ===== Detail view: back control above the (unchanged) chord sheet ===== */

.nvc-song-detail-bar {
    display: none;
}

.nvc-song-detail-bar.is-visible {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto 12px;
    padding: 0 2px;
    font-family: 'Outfit', system-ui, sans-serif;
}

.nvc-song-detail-bar .nvc-so-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(165deg, rgba(40, 40, 40, 0.97) 0%, rgba(12, 12, 12, 0.99) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.25;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 14px rgba(0, 0, 0, 0.38);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.nvc-song-detail-bar .nvc-so-back:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.nvc-song-detail-bar .nvc-so-back:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(255, 200, 130, 0.28);
}

.nvc-song-detail-bar .nvc-so-back-arrow {
    font-size: 14px;
    line-height: 1;
    color: #ffd9a3;
}

/* ===== Header toolbar: Overview / Chords view switch (js/song_overview.js) ===== */

#top-action-settings.nvc-pill-row > .btn.nvc-view-toggle {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 0 13px !important;
    max-width: none;
}

#top-action-settings.nvc-pill-row > .btn.nvc-view-toggle[aria-pressed="true"] {
    border-color: rgba(255, 200, 130, 0.55);
    background: linear-gradient(165deg, rgba(255, 217, 163, 0.16) 0%, rgba(242, 184, 102, 0.1) 100%);
    color: #ffd9a3;
}

/* ===== Favorite heart: 44x44 tap target (WCAG 2.5.5 / platform minimum) =====
   The heart was a 1.9rem (30.4px) button. Only its OWN box grows here — the negative
   margins cancel the growth again, so the margin box the grid lays out stays exactly
   1.9rem square: the `minmax(0, 1fr) 1.9rem` track, the row height (68.4 / 53.1 px on a
   phone) and every other column are untouched, and the 13px icon is not resized.
   The extra width is taken 5px to the right — the gutter .nvc-so-item already reserves —
   and the rest to the left, so nothing is clipped by .nvc-so-card's overflow: hidden;
   padding-left puts the icon back on the exact pixel it occupied before. */

.nvc-song-overview .nvc-so-fav {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin-top: calc((1.9rem - 44px) / 2);
    margin-right: -5px;
    margin-bottom: calc((1.9rem - 44px) / 2);
    margin-left: calc(1.9rem - 39px);
    padding-left: calc(34px - 1.9rem);
}

/* ===== Homepage overview: readable column width =====
   The list is a metadata table, not a text page. Past ~600px the song column only gets
   airier while the eye has to travel further to the KEY / BPM / TIME / LENGTH cells, so
   the whole overview is capped instead of spanning a 1280px+ desktop viewport. Capping
   .nvc-song-overview itself (it wraps the bar AND the card) keeps the "N SONGS" line,
   the sort pills and the card edges on the same two vertical lines, centred under the
   search shell by the margin: 0 auto the base rule already sets. It stays fluid below
   the cap, so phones are untouched. The detail bar keeps its own 62rem width because it
   sits above the full-width chord sheet. */

.nvc-song-overview {
    max-width: 600px;
}

/* ===== Song overview, second pass (js/song_overview.js) =====
   Appended, never edited — every rule below wins on source order, so
   `git diff --numstat css/main.css` keeps reporting 0 deletions.

   What changed and why:
   1. The album left the overview rows. The owner wants it on the song detail page
      only, so the row's second line is now the artist alone.
   2. The Artist pill groups instead of merely ordering, so artist group headers
      need a look.
   3. Phones put the whole metadata pile on the left and left the right half of a
      430px screen empty except the heart. The numbers now sit right-aligned at the
      right edge of the same row, with the heart beyond them. */

/* --- 1. Desktop columns: "3/4" can also be "3/4·4/4" (4 of 388 songs alternate),
       which did not fit the 2.6rem Time track. Time gets 0.4rem more and Length
       gives exactly that back — the metadata block stays 11.2rem wide, so the song
       column and the header labels above it do not move a pixel. --- */

.nvc-song-overview .nvc-so-cells {
    grid-template-columns: minmax(0, 1fr) 2.4rem 2.9rem 3rem 2.9rem;
}

.nvc-song-overview .nvc-so-num {
    min-width: 0;
    line-height: 1.4;
    overflow: hidden;
}

/* --- 2. Artist groups (Artist sort only; Popular and A–Z stay flat) --- */

.nvc-song-overview .nvc-so-group {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.nvc-song-overview .nvc-so-list > .nvc-so-group:first-child {
    border-top: 0;
}

/* An <h3> so the list is navigable by heading; all inherited heading metrics are
   restated here because Bootstrap also styles h3. */
.nvc-song-overview .nvc-so-group-name {
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #ffd9a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nvc-song-overview .nvc-so-group-count {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
    font-variant-numeric: tabular-nums;
}

/* --- 3. Phones: one row, two sides.
       Small phones (<= 420px) get the four numbers as a 2x2 block pinned right —
       Key/BPM beside the title, Time/Length beside the artist — because four
       columns in a single line would leave a 360px screen ~135px of title.
       Larger phones (421–620px, e.g. iPhone 16 Pro Max at 430px) have the room for
       the desktop reading pattern: all four values in one right-aligned line.
       Track widths are fixed in both tiers so the numbers line up down the list.
       Widest values that actually occur: "C♯" / "169.5" / "3/4·4/4" / "10:55". --- */

@media (max-width: 620px) {
    .nvc-song-overview .nvc-so-cells {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 2.6rem 2.2rem;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
    }

    .nvc-song-overview .nvc-so-main {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .nvc-song-overview .nvc-so-key {
        grid-column: 2;
        grid-row: 1;
    }

    .nvc-song-overview .nvc-so-bpm {
        grid-column: 3;
        grid-row: 1;
    }

    .nvc-song-overview .nvc-so-time {
        grid-column: 2;
        grid-row: 2;
    }

    .nvc-song-overview .nvc-so-len {
        grid-column: 3;
        grid-row: 2;
    }

    .nvc-song-overview .nvc-so-num {
        margin-top: 0;
        text-align: right;
        font-size: 11.5px;
        line-height: 1.35;
    }

    /* the interpunct separators belonged to the old single-line pile on the left */
    .nvc-song-overview .nvc-so-num + .nvc-so-num::before {
        content: none;
        padding: 0;
    }

    /* 8px keeps the row at least 44px tall, which is what the heart's tap target needs */
    .nvc-song-overview .nvc-so-row {
        padding: 8px 0 8px 12px;
    }

    .nvc-song-overview .nvc-so-group {
        padding: 11px 12px 6px;
    }
}

@media (min-width: 421px) and (max-width: 620px) {
    .nvc-song-overview .nvc-so-cells {
        grid-template-columns: minmax(0, 1fr) 1.5rem 2.2rem 2.7rem 2.2rem;
        grid-template-rows: auto;
        column-gap: 8px;
    }

    .nvc-song-overview .nvc-so-main {
        grid-column: 1;
        grid-row: 1;
    }

    .nvc-song-overview .nvc-so-key {
        grid-column: 2;
        grid-row: 1;
    }

    .nvc-song-overview .nvc-so-bpm {
        grid-column: 3;
        grid-row: 1;
    }

    .nvc-song-overview .nvc-so-time {
        grid-column: 4;
        grid-row: 1;
    }

    .nvc-song-overview .nvc-so-len {
        grid-column: 5;
        grid-row: 1;
    }
}

/* ===== Song overview, second pass — corrections found in the browser ===== */

/* The "LENGTH" column label needs 49px (9.5px type + 0.14em tracking) and was being
   clipped by 3px after Time took 0.4rem from it. Redistribute inside the same
   11.2rem metadata block — Key and BPM have slack, their widest values are "C♯" and
   "169.5" — so the song column and the header row still do not move.
   Scoped to >620px on purpose: the phone tiers above own the narrow widths. */

@media (min-width: 621px) {
    .nvc-song-overview .nvc-so-cells {
        grid-template-columns: minmax(0, 1fr) 2.2rem 2.8rem 3rem 3.2rem;
    }
}

/* Under the Artist sort most rows drop their artist line (the group header above says
   it), which left a 33px row around a 44px favorite button — the heart's tap target
   then reached into the neighbouring song. The row now matches the button. Rows that
   carry an artist line are ~49px and are unaffected. */

.nvc-song-overview .nvc-so-item {
    min-height: 44px;
}

/* ===== Chord colors — opt-in, account setting "Chord colors" (js/chord_colors.js) ===== */

/* Nothing below paints unless <html> carries .nvc-chord-colors; the degree classes
   (nvc-deg-1 … nvc-deg-7) sit on every chord cell regardless, so switching the
   preference is one class flip and never a re-render. The colors are KAIROS'
   "Neon Nashville" dark palette (src/features/theme/themes/presets.ts there), so a
   song looks the same in both apps: I red, ii orange, iii yellow, IV green, V cyan,
   vi magenta, vii violet. A slash chord is two halves (root / bass) with the "/" dimmed. */

html.nvc-chord-colors .nvc-deg-1 { color: #FF5252; }
html.nvc-chord-colors .nvc-deg-2 { color: #FFAB40; }
html.nvc-chord-colors .nvc-deg-3 { color: #FFD740; }
html.nvc-chord-colors .nvc-deg-4 { color: #69F0AE; }
html.nvc-chord-colors .nvc-deg-5 { color: #18FFFF; }
html.nvc-chord-colors .nvc-deg-6 { color: #E040FB; }
html.nvc-chord-colors .nvc-deg-7 { color: #7C4DFF; }

html.nvc-chord-colors .chord[class*="nvc-deg-"],
html.nvc-chord-colors .chord .nvc-deg-1,
html.nvc-chord-colors .chord .nvc-deg-2,
html.nvc-chord-colors .chord .nvc-deg-3,
html.nvc-chord-colors .chord .nvc-deg-4,
html.nvc-chord-colors .chord .nvc-deg-5,
html.nvc-chord-colors .chord .nvc-deg-6,
html.nvc-chord-colors .chord .nvc-deg-7 {
    font-weight: bold;
}

html.nvc-chord-colors .chord .nvc-slash {
    color: rgba(255, 255, 255, 0.35);
}

/* A progression match (.prog_marked, red) must stay visible when the colors are on;
   its own rule would otherwise lose to the more specific selectors above. */
html.nvc-chord-colors .chord.prog_marked,
html.nvc-chord-colors .chord.prog_marked span {
    color: red;
}

/* Campus fields on the register panel (docs/CAMPUSES.md). */
.nvc-account-row {
    display: flex;
    gap: 6px;
}
.nvc-account-row .nvc-account-input {
    min-width: 0;
    flex: 1 1 50%;
}
.nvc-account-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.nvc-account-select option {
    color: #111;
    background: #fff;
}
.nvc-dd-count {
    opacity: 0.55;
    font-size: 0.85em;
}

/* Native date / time pickers: the popup itself cannot be styled, but with a
   dark color scheme Chrome, Edge and Safari draw it in their dark palette
   instead of a white sheet over the black page. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.55);
    cursor: pointer;
}