/* The /tuner/ page. Loaded only there, see templates/next/tuner/index.php. */

.tuner {
    /* The page background, so the tuner blends into the page. */
    --tuner-bg: #fafafa;
    --tuner-surface: #fff;
    --tuner-border: #d9dde3;
    --tuner-text: #222;
    --tuner-muted: #6b7280;
    --tuner-faint: #c5cad3;
    --tuner-in-tune: #1fa971;
    --tuner-close: #d18f00;
    --tuner-off: #d64545;
    --tuner-accent: var(--tuner-faint);

    max-width: 32em;
    margin: 0 auto 1em;
    padding: 1em;
    background: var(--tuner-bg);
    color: var(--tuner-text);
    box-sizing: border-box;
}

.tuner[data-state="in-tune"] { --tuner-accent: var(--tuner-in-tune); }
.tuner[data-state="close"] { --tuner-accent: var(--tuner-close); }
.tuner[data-state="off"] { --tuner-accent: var(--tuner-off); }

.tuner [hidden] {
    display: none !important;
}

.tuner-modes {
    position: relative;
    margin-bottom: 0.75em;
}

.tuner-instruments {
    display: flex;
    border: 1px solid var(--tuner-border);
    border-radius: 6px;
    overflow: hidden;
}

.tuner-instruments button {
    /* Sized by the label, so "Kromatisk" gets the room it needs on small screens. */
    flex: 1 1 auto;
    margin: 0;
    padding: 0.55em 0.4em;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    border: none;
    border-left: 1px solid var(--tuner-border);
    border-radius: 0;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.tuner-instruments button:first-child {
    border-left: none;
}

.tuner-instruments button.selected {
    background: var(--tuner-text);
    color: var(--tuner-surface);
}

/* The ☰ menu with the less used modes. */
.tuner-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    min-width: 10em;
    padding: 0.3em 0;
    background: var(--tuner-surface);
    border: 1px solid var(--tuner-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.tuner-menu button,
.tuner-menu a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.6em 1em;
    background: none;
    color: var(--tuner-text);
    border: none;
    border-radius: 0;
    text-align: left;
    font-size: 0.95em;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.tuner-menu .tuner-menu-link {
    border-top: 1px solid var(--tuner-border);
    margin-top: 0.3em;
    padding-top: 0.7em;
}

.tuner-menu button:hover,
.tuner-menu button:focus,
.tuner-menu a:hover,
.tuner-menu a:focus {
    background: var(--tuner-bg);
}

.tuner-menu button.selected::after {
    content: " ✓";
}

.tuner-settings label {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin: 0;
    font-size: 0.8em;
    color: var(--tuner-muted);
}

.tuner-settings select,
.tuner-calibration input {
    margin: 0;
    padding: 0.4em;
    font-size: 1.1em;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    border: 1px solid var(--tuner-border);
    border-radius: 4px;
    box-sizing: border-box;
}

.tuner-settings select {
    width: 100%;
}

/* Rarely changed, so it sits below the controls. */
.tuner-calibration {
    display: block;
    margin: 0.9em 0 0;
    text-align: center;
    font-size: 0.8em;
    font-weight: normal;
    color: var(--tuner-muted);
}

.tuner-calibration input {
    width: 4.5em;
    padding: 0.25em 0.4em;
    font-size: 1em;
}

.tuner-display {
    position: relative;
    text-align: center;
    padding: 1em 0 0.5em;
}

.tuner-gauge svg {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.tuner-zone {
    stroke: var(--tuner-in-tune);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
    opacity: 0.9;
}

.tuner-tick {
    stroke: var(--tuner-faint);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.tuner-tick.major {
    stroke: var(--tuner-muted);
    stroke-width: 2;
}

.tuner-tick.center {
    stroke: var(--tuner-text);
    stroke-width: 3;
}

.tuner-needle {
    stroke: var(--tuner-accent);
    stroke-width: 4;
    stroke-linecap: round;
    transition: transform 0.15s ease-out, stroke 0.15s;
}

.tuner:not([data-state]) .tuner-needle,
.tuner[data-state="idle"] .tuner-needle {
    stroke: var(--tuner-faint);
}

.tuner.playing .tuner-needle {
    opacity: 0;
}

.tuner-hub {
    fill: var(--tuner-bg);
    stroke: var(--tuner-accent);
    stroke-width: 4;
}

.tuner-note {
    line-height: 1;
    margin-top: 0.1em;
}

.tuner-note-name {
    font-size: 5em;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.tuner[data-state="idle"] .tuner-note-name {
    color: var(--tuner-faint);
}

.tuner.playing .tuner-note-name {
    color: var(--tuner-muted);
}

.tuner-note-octave {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--tuner-muted);
    margin-left: 0.1em;
}

.tuner-detail,
.tuner-hint {
    color: var(--tuner-muted);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.tuner-hint {
    font-weight: 600;
}

.tuner-hint.octave {
    color: var(--tuner-close);
}

.tuner-status {
    display: inline-block;
    margin-top: 0.6em;
    padding: 0.35em 1.1em;
    border: 1px solid var(--tuner-border);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9em;
    color: var(--tuner-muted);
}

.tuner:not([data-state="idle"]) .tuner-status {
    border-color: var(--tuner-accent);
    color: var(--tuner-accent);
}

.tuner-banner {
    position: absolute;
    top: 0.25em;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    max-width: 100%;
    padding: 0.3em 1em;
    border-radius: 999px;
    background: var(--tuner-in-tune);
    color: #fff;
    font-weight: 700;
    font-size: 0.9em;
}

.tuner-banner.show {
    animation: tuner-banner 3s ease-out forwards;
}

@keyframes tuner-banner {
    0% { opacity: 0; transform: translateY(-0.5em) scale(0.9); }
    10% { opacity: 1; transform: none; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.tuner-strings {
    display: flex;
    justify-content: center;
    /* One row: the buttons shrink on narrow phones instead of wrapping. */
    flex-wrap: nowrap;
    gap: 0.35em;
    margin: 0.75em 0;
}

.tuner-string {
    position: relative;
    flex: 0 1 3em;
    min-width: 0;
    aspect-ratio: 1;
    height: auto;
    margin: 0;
    padding: 0;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    border: 2px solid var(--tuner-border);
    border-radius: 999px;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.tuner-string sub {
    font-size: 0.65em;
    color: var(--tuner-muted);
    vertical-align: baseline;
    position: relative;
    top: 0.25em;
}

.tuner-string.auto {
    /* Same size as the strings; flex-basis is in em, so keep it 3em at this font size. */
    flex-basis: calc(3em / 0.75);
    font-size: 0.75em;
}

/* Filled like the selected instrument button, so the choice stands out. */
.tuner-string.locked {
    background: var(--tuner-text);
    border-color: var(--tuner-text);
    color: var(--tuner-surface);
}

.tuner-string.locked sub {
    color: var(--tuner-faint);
}

.tuner-string.active {
    border-color: var(--tuner-accent);
    box-shadow: 0 0 8px var(--tuner-accent);
}

.tuner-string.sounding {
    border-color: var(--tuner-close);
    box-shadow: 0 0 8px var(--tuner-close);
}

.tuner-string .check {
    display: none;
    position: absolute;
    top: -0.45em;
    right: -0.3em;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    border-radius: 50%;
    background: var(--tuner-in-tune);
    color: #fff;
    font-size: 0.75em;
}

.tuner-string.tuned .check {
    display: block;
}

.tuner-strings.tone-mode .tuner-string {
    border-style: dashed;
}

.tuner-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

.tuner-actions button {
    margin: 0;
    padding: 0.5em 1.2em;
    border-radius: 4px;
    border: 1px solid var(--tuner-border);
    background: var(--tuner-surface);
    color: var(--tuner-text);
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
}

.tuner-actions .tuner-start {
    background: #88B10E;
    border-color: #88B10E;
    color: #fff;
    padding-left: 2em;
    padding-right: 2em;
}

.tuner-actions .tuner-tone-mode.on {
    border-color: var(--tuner-close);
    color: var(--tuner-close);
}

.tuner-message {
    margin-top: 0.75em;
    padding: 0.6em 0.8em;
    border-radius: 4px;
    background: rgba(214, 69, 69, 0.08);
    border: 1px solid var(--tuner-off);
    color: var(--tuner-text);
    font-size: 0.9em;
}

.tuner-help {
    max-width: 32em;
    margin: 0 auto;
    padding: 1em 1em 0;
    border-top: 1px solid #e3e3e3;
    box-sizing: border-box;
    color: #666;
    font-size: 0.9em;
}

/* A link to the song page, so it's found without the menu. */
.tuner-feature {
    display: block;
    /* As wide as the tuner's contents, with the same gutter on phones. */
    width: calc(100% - 2em);
    max-width: 30em;
    margin: 0 auto 1.2em;
    padding: 0.8em 1em;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    box-sizing: border-box;
    background: #fff;
    color: #222;
    text-decoration: none;
}

.tuner-feature:hover {
    border-color: #222;
    text-decoration: none;
}

.tuner-feature-title {
    display: block;
    font-weight: 700;
}

.tuner-feature-text {
    display: block;
    margin-top: 0.2em;
    color: #666;
    font-size: 0.9em;
}

/* Next to the song page's heading: it's new and its chords can be wrong. */
.song-beta {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.15em 0.5em;
    border: 1px solid #88b10e;
    border-radius: 999px;
    /* The site's green; darker for the text so it's readable. */
    color: #5a7a00;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-transform: uppercase;
    vertical-align: 0.2em;
}

/* ---- Chord mode ---- */

.tuner-chord-view {
    text-align: center;
    padding: 0.5em 0;
}

.tuner-chord-name {
    line-height: 1;
}

.tuner-chord-name .main {
    font-size: 4.5em;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.tuner[data-state="idle"] .tuner-chord-name .main {
    color: var(--tuner-faint);
}

.tuner-chord-name .bass {
    font-size: 2em;
    font-weight: 700;
    color: var(--tuner-muted);
    margin-left: 0.05em;
}

.tuner-chord-notes {
    color: var(--tuner-muted);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.tuner-chord-status {
    display: inline-block;
    margin-top: 0.6em;
    padding: 0.35em 1.1em;
    border: 1px solid var(--tuner-border);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9em;
    color: var(--tuner-muted);
}

.tuner:not([data-state="idle"]) .tuner-chord-status {
    border-color: var(--tuner-accent);
    color: var(--tuner-accent);
}

.tuner-shape {
    margin: 0.8em auto 0;
}

.tuner-shape-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75em;
    min-height: 2em;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tuner-muted);
}

.tuner-shape-caption .chord-name {
    text-transform: none;
    color: var(--tuner-text);
}

.tuner-shape-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.tuner-shape-switcher button {
    margin: 0;
    padding: 0 0.5em;
    background: none;
    border: none;
    color: var(--tuner-text);
    font-size: 1.8em;
    line-height: 1;
    cursor: pointer;
}

.tuner-diagram {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.tuner-diagram .fret {
    stroke: var(--tuner-faint);
    stroke-width: 1.5;
}

.tuner-diagram .nut {
    stroke: var(--tuner-text);
    stroke-width: 5;
}

.tuner-diagram .string {
    stroke: var(--tuner-muted);
    stroke-width: 1.5;
}

.tuner-diagram .dot {
    fill: var(--tuner-accent);
}

.tuner-diagram .open {
    fill: none;
    stroke: var(--tuner-muted);
    stroke-width: 1.5;
}

.tuner-diagram text {
    font-family: sans-serif;
    font-weight: 700;
}

.tuner-diagram .muted,
.tuner-diagram .base-fret {
    fill: var(--tuner-muted);
    font-size: 13px;
}

.tuner-diagram .string-name {
    fill: var(--tuner-muted);
    font-size: 11px;
    font-weight: 600;
}

.tuner-shape.pinned .tuner-diagram .dot {
    fill: var(--tuner-text);
}

.tuner-shape.empty .tuner-diagram {
    opacity: 0.5;
}

.tuner-shape-instrument {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.4em;
    font-size: 0.8em;
    color: var(--tuner-muted);
}

.tuner-shape-instrument button {
    margin: 0;
    padding: 0.3em 0.8em;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    border: 1px solid var(--tuner-border);
    border-radius: 999px;
    font-size: 1em;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.tuner-shape-instrument button.selected {
    background: var(--tuner-text);
    border-color: var(--tuner-text);
    color: var(--tuner-surface);
}

.tuner-history {
    margin-top: 1em;
    text-align: left;
}

.tuner-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 1.8em;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tuner-muted);
}

.tuner-history-clear {
    margin: 0;
    padding: 0.2em 0.5em;
    background: none;
    border: none;
    color: var(--tuner-muted);
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.tuner-history-chords {
    display: flex;
    gap: 0.4em;
    overflow-x: auto;
    padding: 0.2em 0 0.4em;
    min-height: 2.6em;
}

.tuner-history-chords .empty {
    color: var(--tuner-faint);
    font-size: 0.9em;
    line-height: 2.4em;
}

.tuner-history-chords .chip {
    flex: none;
    min-width: 2.4em;
    margin: 0;
    padding: 0.45em 0.8em;
    border: 1px solid var(--tuner-border);
    border-radius: 10px;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    cursor: pointer;
}

.tuner-history-chords .chip.current {
    border-color: var(--tuner-in-tune);
    color: var(--tuner-in-tune);
}

/* The chord picked to show its shape: filled, like the other selections. */
.tuner-history-chords .chip.selected {
    background: var(--tuner-text);
    border-color: var(--tuner-text);
    color: var(--tuner-surface);
}

/* ---- Chords from a song (/tuner/song/) ---- */

.song-file {
    display: block;
    margin: 0;
    padding: 1.2em 1em;
    border: 2px dashed var(--tuner-border);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-weight: normal;
}

.song.dragging .song-file {
    border-color: var(--tuner-in-tune);
    background: var(--tuner-surface);
}

/* The input is replaced by the button-like label, but stays usable from the keyboard. */
.song-file input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.song-file input:focus-visible + .song-file-button {
    outline: 2px solid var(--tuner-text);
    outline-offset: 2px;
}

.song-file-button {
    display: inline-block;
    padding: 0.5em 1.4em;
    border-radius: 4px;
    background: #88B10E;
    color: #fff;
    font-weight: bold;
}

.song-file-name {
    display: block;
    margin-top: 0.5em;
    font-size: 0.85em;
    color: var(--tuner-muted);
    overflow-wrap: anywhere;
}

.song-file.disabled {
    opacity: 0.4;
    cursor: default;
}

.song-record {
    margin-top: 0.75em;
    text-align: center;
}

.song-record-start,
.song-record-stop {
    margin: 0;
    padding: 0.5em 1.2em;
    border: 1px solid var(--tuner-border);
    border-radius: 4px;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    font-size: 0.9em;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.song-record-start {
    color: var(--tuner-off);
}

.song-recording {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.8em;
    border: 1px solid var(--tuner-off);
    border-radius: 6px;
}

.song-record-dot {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--tuner-off);
    animation: song-record-pulse 1.2s ease-in-out infinite;
}

@keyframes song-record-pulse {
    50% { opacity: 0.3; }
}

.song-record-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.song-record-meter {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--tuner-border);
    overflow: hidden;
}

.song-record-meter span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--tuner-in-tune);
}

/* With a song loaded, the file and recording buttons share one line. */
.song.loaded .song-source {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.song.loaded .song-file {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6em;
    min-width: 0;
    padding: 0.35em 0.5em;
    border-style: solid;
    border-width: 1px;
    text-align: left;
}

.song.loaded .song-file-button {
    flex: none;
    padding: 0.3em 0.8em;
    font-size: 0.85em;
}

.song.loaded .song-file-name {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song.loaded .song-record {
    flex: none;
    margin: 0;
}

.song.loaded .song-record-start {
    padding: 0.45em 0.7em;
    font-size: 0.8em;
}

.song-progress {
    margin-top: 1em;
}

.song-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--tuner-border);
    overflow: hidden;
}

.song-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--tuner-in-tune);
    transition: width 0.2s;
}

.song-progress-text {
    margin-top: 0.4em;
    font-size: 0.85em;
    color: var(--tuner-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.song-result {
    margin-top: 1em;
}

.song-summary {
    text-align: center;
}

.song-key {
    font-weight: 700;
}

.song-tuning {
    display: block;
    font-size: 0.8em;
    color: var(--tuner-muted);
}

.song-transpose {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3em 0.7em;
    margin: 0.6em 0;
    font-size: 0.85em;
    color: var(--tuner-muted);
}

/* "Transponer − 0 +" and "Capo − 0 +" wrap as units on narrow screens. */
.song-control {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.song-transpose button {
    flex: none;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tuner-border);
    border-radius: 50%;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.song-transpose-value,
.song-capo-value {
    min-width: 2em;
    text-align: center;
    font-weight: 700;
    color: var(--tuner-text);
    font-variant-numeric: tabular-nums;
}

/* "Lettere grep: capo 3, spill som D-dur": sets the capo when tapped. */
.song-capo-suggest {
    display: block;
    margin: -0.2em auto 0.6em;
    padding: 0.35em 1em;
    border: 1px solid var(--tuner-in-tune);
    border-radius: 999px;
    background: none;
    color: var(--tuner-in-tune);
    font-size: 0.85em;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.song-player {
    display: block;
    width: 100%;
    margin: 0.4em 0;
}


/*
 * The strip: the bar being played, chord by chord with its shape, and the
 * next chord. Every cell has the same parts and the diagrams a fixed
 * height, so the strip keeps its height from bar to bar.
 */
.song-strip {
    --strip-gap: 0.5em;
    display: flex;
    justify-content: center;
    gap: var(--strip-gap);
    margin: 0.5em 0 0.2em;
    min-height: 10.5em;
}

.song-strip-cell {
    display: flex;
    flex: 1 1 0;
    max-width: 104px;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0.2em 0.2em 0.1em;
    border: 2px solid transparent;
    border-radius: 8px;
}

.song-strip-cell.current {
    border-color: var(--tuner-text);
}

/* Coming chords, to get ready for; the ones already played are fainter. */
.song-strip-cell.next {
    opacity: 0.55;
}

.song-strip-cell.previous {
    opacity: 0.3;
}

/* Before the first chord and after the last: an empty place, so the middle stays put. */
.song-strip-cell.empty {
    visibility: hidden;
}

.song-strip-cell.more {
    cursor: pointer;
}

/* A bar line between chords of different bars. */
.song-strip-cell {
    position: relative;
}

.song-strip-cell.bar-start::before {
    content: "";
    position: absolute;
    left: calc(var(--strip-gap) / -2 - 3px);
    top: 1.2em;
    bottom: 1.2em;
    width: 2px;
    background: var(--tuner-border);
}

.song-strip-label {
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tuner-muted);
}

.song-strip-name {
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.song-strip-name.long {
    font-size: 1.15em;
    line-height: 1.43;
}

.song-strip-cell .tuner-diagram {
    display: block;
    width: 100%;
    height: 104px;
}

/* No "how sure" colour on this page: the dots are plain. */
.song-strip-cell .tuner-diagram .dot {
    fill: var(--tuner-text);
}

/* A dot per beat the chord is held; the playing chord's fill as its beats pass. */
.song-strip-beats {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    height: 10px;
    margin-top: 3px;
}

.song-strip-beats span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1.5px solid var(--tuner-muted);
    box-sizing: border-box;
}

.song-strip-beats span.filled {
    background: var(--tuner-text);
    border-color: var(--tuner-text);
}

.song-strip-beats.number {
    font-size: 0.65em;
    font-weight: 700;
    color: var(--tuner-muted);
    white-space: nowrap;
}

.song-strip-diagram {
    position: relative;
    display: block;
}

.song-strip-open {
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    font-size: 0.65em;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--tuner-muted);
    background: var(--tuner-bg);
}

/* Phones: five chords share the width, so less space between them and bigger diagrams. */
@media (max-width: 759px) {
    .song-strip {
        --strip-gap: 4px;
    }

    .song-strip-cell {
        padding-left: 0;
        padding-right: 0;
    }

    /* The chord playing gets the most room: it's the one read while playing. */
    .song-strip-cell.current {
        flex-grow: 1.5;
    }

    /* The narrower cells around it: smaller names, same line height. */
    .song-strip-cell:not(.current) .song-strip-name {
        font-size: 1.25em;
        line-height: 1.32;
    }

    .song-strip-cell:not(.current) .song-strip-name.long {
        font-size: 1em;
        line-height: 1.65;
    }
}

.song-strip-count {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--tuner-muted);
}

.song .tuner-shape-instrument {
    justify-content: center;
    margin: 0 0 0.6em;
    font-size: 0.75em;
}

.song .tuner-shape-instrument button {
    min-height: 34px;
    padding: 0 1em;
}

/* The line of the chart being played. */
.song-line.current {
    background: rgba(0, 0, 0, 0.045);
    border-radius: 4px;
}

.song-chart {
    max-height: 22em;
    overflow-y: auto;
    border-top: 1px solid var(--tuner-border);
    padding-top: 0.4em;
}

/*
 * Every line has the same columns, the time and equal bars (four, or two on
 * a phone: --bars-per-line), so the bar
 * lines line up down the chart; a line cut short at a key change just
 * leaves its last columns empty.
 */
.song-line {
    display: grid;
    grid-template-columns: 2.2em repeat(var(--bars-per-line, 4), minmax(0, 1fr));
    align-items: stretch;
    padding: 0.2em 0;
}

.song-time {
    align-self: center;
    font-size: 0.75em;
    color: var(--tuner-muted);
    font-variant-numeric: tabular-nums;
}

.song-key-change {
    margin: 0.3em 0 0 2.95em;
    font-size: 0.75em;
    font-weight: 700;
    color: var(--tuner-close);
}

/* A bar of the chord sheet: "| G | C D |". */
/* A crowded bar wraps its chords inside the bar rather than growing wider. */
.song-bar {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    min-width: 0;
    gap: 0 0.15em;
    border-left: 2px solid var(--tuner-border);
    padding: 0 0.15em;
}

.song-bar:last-child {
    border-right: 2px solid var(--tuner-border);
}


.song-chord {
    margin: 0;
    padding: 0.45em 0.1em;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--tuner-text);
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
}

/* Phones (two bars per line): a little smaller, so busy bars wrap less. */
@media (max-width: 559px) {
    .song-chord {
        font-size: 0.9em;
    }
}

.song-chord.empty {
    color: var(--tuner-faint);
}

.song-copy {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6em;
    margin-top: 0.8em;
}

.song-copy-button {
    margin: 0;
    padding: 0.45em 1.1em;
    border: 1px solid var(--tuner-border);
    border-radius: 4px;
    background: var(--tuner-surface);
    color: var(--tuner-text);
    font-size: 0.85em;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.song-copy-status {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--tuner-in-tune);
}

.song-chord.current {
    background: var(--tuner-text);
    border-color: var(--tuner-text);
    color: var(--tuner-surface);
}

/* Recording with a song loaded: the recording bar needs room for its meter. */
.song.loaded .song-recording:not([hidden]) {
    min-width: 13em;
}

/* ---- The chart on wide screens: as wide as the page ---- */

.song-chord-name {
    display: block;
}

@media (min-width: 760px) {
    .song.loaded {
        max-width: none;
    }

    /* The notes below follow the chart's width, so they don't sit in a narrow column under it. */
    .song.loaded ~ .tuner-help {
        max-width: none;
        /* The song's 1em side padding, in this text's smaller font. */
        margin: 0 calc(1em / 0.9);
        padding-left: 0;
        padding-right: 0;
    }

    /* Only the chart gets the extra width; the controls above stay as they are. */
    .song.loaded .song-source,
    .song.loaded .song-progress,
    .song.loaded .tuner-message,
    .song.loaded .song-result > :not(.song-chart):not(.song-strip) {
        max-width: 32em;
        margin-left: auto;
        margin-right: auto;
    }

    .song-chart {
        max-height: 75vh;
    }

    .song-strip-beats {
        gap: 3px;
    }

    .song-strip-beats span {
        width: 7px;
        height: 7px;
    }

    .song-line {
        grid-template-columns: 3em repeat(var(--bars-per-line, 4), minmax(0, 1fr));
    }

    /* Chords start at the top, so a line reads straight across even when one bar is taller. */
    .song-bar {
        align-content: flex-start;
        padding: 0.1em 0.4em;
        gap: 0.2em 0.6em;
    }

    /* A frame rather than a fill: a whole bar in black is too heavy at this width. */
    .song-chord.current {
        background: var(--tuner-surface);
        color: var(--tuner-text);
        box-shadow: inset 0 0 0 2px var(--tuner-text);
    }

}