/* The songbook page (/songbook/<id>/). Loaded only there, see
   templates/next/songbook/index.php. Made to be printed: the site's
   header, the controls and the links are left out on paper. */

.songbook {
    --sb-accent: #2987B2;
    --sb-chord: #1d6587;
    --sb-border: #d9dde3;
    --sb-text: #222;
    --sb-muted: #6b7280;
    --sb-surface: #fff;
    --sb-body-size: 14px;

    max-width: 52em;
    color: var(--sb-text);
}

.songbook-size-s { --sb-body-size: 12px; }
.songbook-size-l { --sb-body-size: 17px; }

@media (max-width: 1060px) {
    .songbook {
        padding: 0 1em;
    }
}

.songbook-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em 1.5em;
    margin: 0 0 1.5em;
    padding: 0.7em 0.9em;
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    background: var(--sb-surface);
    font-size: 0.9em;
}

.songbook-controls fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    margin: 0;
    padding: 0;
    border: 0;
}

.songbook-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
}

.songbook-controls label {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}

.songbook-controls input {
    margin: 0 0.25em 0 0;
    vertical-align: -1px;
}

.songbook-controls select {
    width: auto;
    height: auto;
    margin: 0 0 0 0.25em;
    padding: 0.15em 0.3em;
}

.songbook-print {
    padding: 0.35em 0.9em;
    border: 0;
    border-radius: 4px;
    background: var(--sb-accent);
    color: #fff;
    cursor: pointer;
}

.songbook-cover {
    margin-bottom: 1.5em;
}

.songbook-kicker {
    margin: 0;
    color: var(--sb-accent);
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.songbook-cover h2 {
    margin: 0.1em 0 0.2em;
    font-size: 2em;
}

.songbook-meta,
.songbook-note {
    margin: 0 0 0.4em;
    color: var(--sb-muted);
}

.songbook-print-only {
    display: none;
}

.songbook-toc {
    margin-bottom: 2.5em;
}

.songbook-toc h3 {
    margin: 0 0 0.4em;
    font-size: 1.1em;
}

.songbook-toc ol {
    columns: 2 16em;
    column-gap: 2em;
    margin: 0;
    padding-left: 2.6em;
}

.songbook-toc li {
    break-inside: avoid;
    padding: 0.1em 0;
}

.songbook-toc-artist {
    color: var(--sb-muted);
    font-size: 0.85em;
}

.songbook-song {
    margin: 0 0 2.5em;
    padding-top: 1.25em;
    border-top: 1px solid var(--sb-border);
}

.songbook-song h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5em;
    margin: 0 0 0.5em;
    font-size: 1.35em;
}

.songbook-number {
    color: var(--sb-accent);
    font-variant-numeric: tabular-nums;
}

.songbook-artist {
    color: var(--sb-muted);
    font-size: 0.7em;
    font-weight: normal;
}

.songbook-diagrams {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin: 0 0 0.75em;
}

.sb-diagram {
    overflow: visible;
}

.sb-diagram line {
    stroke: #444;
    stroke-width: 0.8;
}

.sb-diagram line.sb-nut {
    stroke-width: 2.5;
}

.sb-diagram .sb-dot {
    fill: #222;
}

.sb-diagram .sb-open {
    fill: none;
    stroke: #444;
    stroke-width: 0.9;
}

.sb-diagram text {
    fill: #222;
    font-family: sans-serif;
}

.sb-diagram-name {
    font-size: 10px;
    font-weight: bold;
    text-anchor: middle;
}

.sb-diagram-mark {
    font-size: 7px;
    text-anchor: middle;
}

.sb-diagram-fret {
    font-size: 7px;
    text-anchor: end;
}

/* The song text: a div per verse and per tab staff, a div per line
   (see songbook_format_body()). */
.songbook-body {
    font-family: monospace;
    font-size: var(--sb-body-size);
    line-height: 1.35;
}

.songbook-lyrics .songbook-body {
    font-family: inherit;
    line-height: 1.5;
}

.songbook .sb-line {
    min-height: 1.35em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.songbook .sb-gap {
    margin-top: 1.35em;
}

/* A verse stays in one column, so a chord line isn't parted from its
   lyrics (a verse longer than the column still breaks). */
.songbook .sb-verse {
    break-inside: avoid;
}

/* Tab staffs keep their lines: no wrapping, scrolled on a narrow screen,
   across both columns. */
.songbook .sb-staff {
    break-inside: avoid;
    column-span: all;
    overflow-x: auto;
    font-family: monospace;
}

.songbook .sb-staff .sb-line {
    white-space: pre;
    overflow-wrap: normal;
}

.songbook-columns .songbook-body {
    columns: 2 18em;
    column-gap: 2.5em;
}

/* Songs with tab staffs (see songbook_format_body()). */
.songbook-columns .songbook-one-column .songbook-body {
    columns: auto;
}

.songbook .sb-chord,
.songbook .chopro_chord {
    color: var(--sb-chord);
    font-weight: bold;
}

.songbook-source {
    margin: 0.75em 0 0;
    font-size: 0.85em;
}

@media print {
    @page {
        margin: 15mm 14mm;
    }

    body,
    #container {
        background: #fff !important;
    }

    #header,
    .breadcrumbs-container,
    .sense,
    .songbook-controls,
    .songbook-source,
    .songbook-note a {
        display: none !important;
    }

    .main-container {
        padding: 0 !important;
    }

    .songbook {
        max-width: none;
        padding: 0;
        --sb-chord: #000;
    }

    .songbook a {
        color: inherit;
        text-decoration: none;
    }

    .songbook-print-only {
        display: inline;
    }

    .songbook-cover h2 {
        font-size: 28pt;
    }

    /* Every song starts on a new page. */
    .songbook-song {
        break-before: page;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .songbook-song h3,
    .songbook-diagrams {
        break-after: avoid;
    }

    .songbook-diagrams svg {
        break-inside: avoid;
    }

    .songbook .sb-staff {
        overflow: visible;
    }

    .songbook .sb-chord,
    .songbook .chopro_chord {
        color: #000;
    }
}

@media (max-width: 600px) {
    .songbook-controls {
        display: block;
    }

    .songbook-options {
        margin-top: 0.5em;
    }

    .songbook-body {
        font-size: calc(var(--sb-body-size) - 1px);
    }

    .songbook-columns .songbook-body {
        columns: auto;
    }
}