@import url('../widgets/layout/layout.css');
@import url('../../css/theme.css');
@import url('../widgets/toolbar/toolbar.css');
@import url('../widgets/player/player.css');
@import url('../widgets/storage/song-list.css');
@import url('../widgets/rendering/editor.css');
@import url('../widgets/chord-tooltip/chord-tooltip.css');
@import url('../tools/number-wheel/number-wheel.css');

body {
    background: transparent;
}

.songwriter-app {
    grid-template-columns: calc(var(--tile) * 8.5) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.left-menu {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    min-height: 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: calc(var(--tile) * 0.3);
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(var(--tile) * 0.55) calc(var(--tile) * 0.42) var(--tile);
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, var(--button-surface), rgba(var(--paper-rgb), 0.48));
}

.song-toolbar,
.player-bar,
.randomizer-panel {
    position: relative;
    top: auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    width: 100%;
    justify-items: stretch;
    gap: calc(var(--tile) * 0.34);
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

.song-toolbar {
    align-content: start;
    padding-top: 0;
}

.player-bar {
    align-content: start;
    padding-top: 0;
}

.randomizer-panel {
    align-content: start;
    padding-bottom: 0;
}

.song-toolbar::after,
.player-bar::after {
    content: none;
}

.song-toolbar,
.player-bar,
.randomizer-panel,
.playback-controls,
.random-chord-controls {
    flex-direction: column;
    align-items: stretch;
}

.toolbar-title {
    display: grid;
    width: 100%;
    justify-items: center;
    text-align: center;
    line-height: var(--tile);
    padding-bottom: calc(var(--tile) * 0.15);
}

.toolbar-title strong {
    color: var(--ink);
    font-size: 0.88rem;
    line-height: var(--tile);
}

.toolbar-actions,
.playback-controls,
.random-chord-controls {
    display: grid;
    width: 100%;
    gap: calc(var(--tile) * 0.28);
}

.toolbar-actions {
    grid-template-columns: 1fr 1fr;
}

.toolbar-actions .section-menu {
    grid-column: 1 / -1;
}

.playback-controls,
.random-chord-controls,
.randomizer-panel {
    grid-template-columns: 1fr 1fr;
}

#play-btn {
    order: 1;
}

#pause-btn {
    order: 2;
}

#stop-btn {
    order: 3;
}

#reset-bpm {
    order: 4;
}

.tiny-field:has(#play-bpm) {
    order: 5;
}

.main-duration-toggle {
    order: 6;
}

.tiny-field:has(#beats-per-bar) {
    order: 7;
}

.tiny-field:has(#transpose) {
    order: 8;
}

.beat-lamp {
    order: 9;
    grid-column: 1 / -1;
}

.tiny-field:has(#random-bars) {
    order: 1;
}

#random-now {
    order: 2;
}

#random-output {
    order: 3;
}

.playback-controls .tiny-field,
.playback-controls .playable-toggle,
.random-chord-controls .tiny-field,
.randomizer-panel .tiny-field,
.randomizer-panel .playable-toggle,
.format-actions {
    grid-column: 1 / -1;
}

.account-bar {
    display: grid;
    justify-items: center;
    gap: calc(var(--tile) * 0.25);
    width: 100%;
    min-width: 0;
    padding-top: calc(var(--tile) * 0.1);
}

.account-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--soft-ink);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: var(--tile);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-btn {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--tile) * 1.45);
    padding: 0 calc(var(--tile) * 0.5);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--button-surface);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 900;
}

.random-chord-controls {
    margin-left: 0;
}

.song-toolbar .icon-btn,
.player-bar .icon-btn,
.player-bar .panel-btn,
.randomizer-panel .panel-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: calc(var(--tile) * 1.75);
    padding: 0 calc(var(--tile) * 0.42);
    border-color: var(--line);
    border-radius: 10px;
    background: var(--button-surface);
    box-shadow: 0 5px 14px rgba(var(--shadow-rgb), 0.07);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.song-toolbar .icon-btn:hover,
.player-bar .icon-btn:hover,
.player-bar .panel-btn:hover,
.randomizer-panel .panel-btn:hover,
.song-toolbar .icon-btn:focus-visible,
.player-bar .icon-btn:focus-visible,
.player-bar .panel-btn:focus-visible,
.randomizer-panel .panel-btn:focus-visible {
    transform: translateY(-1px);
}

.reset-icon {
    width: 100%;
    min-width: 0;
    padding: 0;
    font-size: 1.08rem;
}

.pause-btn svg {
    width: 16px;
    height: 16px;
}

.tiny-field,
.playable-toggle,
.random-output {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--tile) * 1.55);
    padding: 0 calc(var(--tile) * 0.32);
    border: 1px solid rgba(var(--ink-rgb), 0.14);
    border-radius: 10px;
    background: rgba(var(--paper-rgb), 0.46);
    overflow: visible;
    color: var(--soft-ink);
    font-size: 0.68rem;
    font-weight: 900;
    gap: 5px;
    text-align: center;
    text-wrap: balance;
}

.playable-toggle input {
    margin: 0;
}

.beat-lamp {
    justify-self: center;
    align-self: center;
    width: calc(var(--tile) * 0.85);
    height: calc(var(--tile) * 0.85);
    margin: calc(var(--tile) * 0.12) 0;
}

.song-workspace {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
    grid-template-columns: minmax(0, 1fr) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.song-page {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
}

.song-list-panel {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    border-right: 0;
    border-left: 1px solid var(--line);
}

.song-source-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--tile) * 0.28);
}

.song-source-tab {
    min-width: 0;
    height: calc(var(--tile) * 1.6);
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(var(--paper-rgb), 0.58);
    color: var(--soft-ink);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 900;
}

.song-source-tab.active,
.song-source-tab:hover,
.song-source-tab:focus-visible {
    border-color: var(--accent-dark);
    background: var(--accent-soft);
    color: var(--accent-dark);
    outline: 0;
}

.format-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--tile) * 0.35);
    padding-top: calc(var(--tile) * 0.2);
}

.format-actions .panel-btn {
    width: 100%;
}

.song-list-empty {
    color: var(--soft-ink);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: calc(var(--tile) * 1.2);
    text-align: center;
}

.songwriter-app:not(.editing) .format-actions {
    display: none;
}

.songwriter-app.locked .song-toolbar,
.songwriter-app.locked .randomizer-panel,
.songwriter-app.locked .account-bar {
    display: none;
}

.songwriter-app.locked .left-menu {
    justify-content: start;
}

.songwriter-app.locked .song-list-panel {
    display: grid;
}

.songwriter-app.locked .song-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.delete-song-btn:disabled,
.song-toolbar .icon-btn:disabled,
.new-song-btn:disabled,
.format-actions .panel-btn:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.auth-box {
    position: relative;
}

.auth-close {
    position: absolute;
    top: calc(var(--tile) * 0.55);
    right: calc(var(--tile) * 0.55);
    display: grid;
    width: calc(var(--tile) * 1.35);
    height: calc(var(--tile) * 1.35);
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.auth-field {
    display: grid;
    gap: calc(var(--tile) * 0.2);
    color: var(--soft-ink);
    font-size: 0.78rem;
    font-weight: 900;
}

.auth-field input {
    width: 100%;
    min-height: calc(var(--tile) * 1.8);
    padding: 0 calc(var(--tile) * 0.6);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--button-surface);
    color: var(--ink);
}

.auth-password-field {
    position: relative;
    display: grid;
}

.auth-password-field input {
    padding-right: calc(var(--tile) * 2.25);
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: calc(var(--tile) * 0.25);
    display: grid;
    width: calc(var(--tile) * 1.55);
    height: calc(var(--tile) * 1.55);
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--soft-ink);
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle.showing {
    background: var(--accent-soft);
    color: var(--accent-dark);
    outline: 0;
}

.password-toggle svg {
    width: calc(var(--tile) * 0.9);
    height: calc(var(--tile) * 0.9);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-message {
    min-height: var(--tile);
    margin: 0;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: var(--tile);
}

.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--tile);
    background: rgba(var(--overlay-rgb), 0.32);
}

.confirm-overlay[hidden] {
    display: none;
}

.confirm-box {
    display: grid;
    width: min(calc(var(--tile) * 18), calc(100vw - var(--tile-2)));
    gap: calc(var(--tile) / 2);
    padding: var(--tile);
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--paper);
    box-shadow: 0 18px 42px rgba(var(--shadow-rgb), 0.22);
}

.confirm-kicker {
    margin: 0;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: var(--tile);
    text-transform: uppercase;
}

.confirm-box h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.22rem;
    font-weight: 900;
    line-height: calc(var(--tile) * 1.5);
}

.confirm-copy {
    margin: 0;
    color: var(--soft-ink);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: calc(var(--tile) * 1.2);
}

.confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--tile) / 2);
    margin-top: calc(var(--tile) / 2);
}

.confirm-danger {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 18%, var(--paper));
    color: var(--danger);
}

.confirm-cancel {
    background: var(--button-surface);
    color: var(--ink);
}

@media (max-width: 760px) {
    .songwriter-app {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .left-menu,
    .song-toolbar,
    .player-bar,
    .randomizer-panel {
        grid-column: 1;
        grid-row: 1;
        border-right: 0;
    }

    .left-menu {
        display: block;
        overflow: visible;
    }

    .player-bar,
    .randomizer-panel {
        display: none;
    }

    .song-workspace {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr;
    }

    .song-list-panel {
        grid-column: 1;
        grid-row: 2;
        max-height: calc(var(--tile) * 12);
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

.songwriter-app.locked {
    grid-template-columns: calc(var(--tile) * 8.5) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.songwriter-app.locked .left-menu {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
}

.songwriter-app.locked .song-toolbar,
.songwriter-app.locked .randomizer-panel,
.songwriter-app.locked .account-bar {
    display: none;
}

.songwriter-app.locked .player-bar {
    display: grid;
    grid-column: auto;
    grid-row: auto;
}

.songwriter-app.locked .song-workspace {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.songwriter-app.locked .song-list-panel {
    display: none;
}

.songwriter-app.locked .song-workspace {
    grid-template-columns: minmax(0, 1fr);
}

.playback-controls #play-btn {
    order: 1;
}

.playback-controls #pause-btn {
    order: 2;
}

.playback-controls #stop-btn {
    order: 3;
}

.playback-controls #next-section-btn {
    order: 4;
}

.playback-controls #previous-section-btn {
    order: 5;
}

.playback-controls .beat-orb {
    order: 6;
}

.playback-controls .menu-number-transpose {
    order: 7;
}

.playback-controls .menu-number-bpm {
    order: 8;
}

.playback-controls .display-options {
    order: 9;
}

.menu-number {
    grid-template-rows: auto calc(var(--tile) * 3.15);
    row-gap: 0;
    margin-top: calc(var(--tile) * 0.16);
}

.menu-number-label {
    grid-row: 1;
}

.menu-number .tiny-field {
    grid-row: 2;
    align-self: center;
}

.inline-reset {
    grid-row: 2;
    align-self: center;
    transform: translateY(1px);
}

.edit-mode-button {
    width: calc(var(--tile) * 3.1);
    min-width: calc(var(--tile) * 3.1);
    height: calc(var(--tile) * 3.1);
    border-radius: 999px;
}

.songwriter-app.editing .edit-side-menu .song-bpm-field {
    display: inline-flex;
}

.edit-side-content {
    gap: calc(var(--tile) * 0.22);
}

.edit-toggles {
    gap: calc(var(--tile) * 0.34);
    margin-top: calc(var(--tile) * 0.2);
}

.songwriter-app.editing .add-chord {
    align-self: flex-end;
    margin-bottom: calc(var(--tile) * 0.14);
}

.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .add-chord {
    margin-bottom: calc(var(--tile) * 0.08);
}

.songwriter-app .song-workspace,
.songwriter-app.editing .song-workspace {
    grid-template-columns: minmax(0, 1fr) calc(var(--tile) * 6.75) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.songwriter-app.editing .chord-line {
    align-items: flex-start;
}

.songwriter-app.editing .chord-select {
    transform: translateY(calc(var(--tile) * 0.28));
}

.songwriter-app.editing .remove-chord {
    top: auto;
    right: calc(var(--tile) * 0.02);
    bottom: calc(var(--tile) * -0.02);
    transform: translateY(calc(var(--tile) * 0.28));
}

.songwriter-app.editing.hide-edit-chord-tabs .remove-chord {
    bottom: calc(var(--tile) * -0.02);
}

.songwriter-app.editing.hide-edit-detailed-durations .remove-chord,
.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .remove-chord {
    right: calc(var(--tile) * 0.02);
    bottom: calc(var(--tile) * 0.08);
    transform: none;
}

.songwriter-app:not(.editing) .menu-number-bpm,
.songwriter-app:not(.editing) .menu-number-bpm .number-wheel,
.songwriter-app:not(.editing) .menu-number-bpm .inline-reset,
.songwriter-app:not(.editing) .menu-number-transpose,
.songwriter-app:not(.editing) .menu-number-transpose .number-wheel,
.songwriter-app:not(.editing) .menu-number-transpose .inline-reset {
    opacity: 1;
    pointer-events: auto;
}

.songwriter-app.editing .menu-number-bpm,
.songwriter-app.editing .menu-number-bpm .number-wheel,
.songwriter-app.editing .menu-number-bpm .inline-reset {
    opacity: 1;
    pointer-events: auto;
}

.songwriter-app.editing .menu-number-transpose,
.songwriter-app.editing .menu-number-transpose .number-wheel,
.songwriter-app.editing .menu-number-transpose .inline-reset {
    opacity: 1;
    pointer-events: none;
}

.menu-number .number-wheel[aria-disabled="true"] {
    cursor: default;
}

/* Final layout corrections for the separated edit strip. */
.songwriter-app .song-workspace,
.songwriter-app.editing .song-workspace {
    grid-template-columns: minmax(0, 1fr) calc(var(--tile) * 6.75) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.songwriter-app.editing .chord-line {
    align-items: flex-start;
}

.songwriter-app.editing .chord-select {
    transform: translateY(calc(var(--tile) * 0.28));
}

.songwriter-app.editing .remove-chord {
    top: auto;
    right: calc(var(--tile) * -0.13);
    bottom: calc(var(--tile) * -0.02);
    transform: translate(-3px, calc(var(--tile) * 0.28));
}

.songwriter-app.editing.hide-edit-chord-tabs .remove-chord {
    bottom: calc(var(--tile) * -0.02);
}

.songwriter-app.editing.hide-edit-detailed-durations .remove-chord,
.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .remove-chord {
    right: calc(var(--tile) * -0.13);
    bottom: calc(var(--tile) * 0.08);
    transform: translateX(-3px);
}

.songwriter-app.editing .chord-line {
    align-items: flex-start;
    column-gap: 0;
    row-gap: calc(var(--tile) * 0.16);
}

.songwriter-app.editing .add-chord {
    flex: 0 0 calc(var(--tile) * 1.05);
    align-self: flex-start;
    margin: calc(var(--tile) * 4.08) calc(var(--tile) * 0.16) 0;
}

.songwriter-app.editing .chord-token {
    flex: 0 0 calc(var(--tile) * 4.65);
}

.songwriter-app.editing.hide-edit-chord-tabs .add-chord {
    margin-top: calc(var(--tile) * 3.08);
}

.songwriter-app.editing.hide-edit-detailed-durations .add-chord {
    margin-top: calc(var(--tile) * 1.43);
}

.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .add-chord {
    margin-top: calc(var(--tile) * 0.58);
    margin-bottom: 0;
}

.edit-side-menu {
    gap: 0;
    padding-top: calc(var(--tile) * 0.82);
}

.edit-side-menu .edit-side-content {
    gap: 0;
}

.edit-side-menu .menu-number {
    grid-template-rows: calc(var(--tile) * 0.72) calc(var(--tile) * 2.18);
    margin-top: calc(var(--tile) * -0.12);
}

.edit-side-menu .menu-number-label {
    line-height: calc(var(--tile) * 0.72);
}

.edit-side-menu .menu-number .number-wheel {
    --scroll-wheel-height: calc(var(--tile) * 2.18);
    --scroll-wheel-current-size: 1.22rem;
    --scroll-wheel-side-size: 0.62rem;
}

.edit-side-menu .edit-toggles {
    gap: 0;
    margin-top: calc(var(--tile) * -0.36);
}

.edit-side-menu .circular-toggle {
    min-height: calc(var(--tile) * 0.78);
    height: calc(var(--tile) * 0.78);
    line-height: 1;
}

.edit-side-menu .circular-toggle input {
    width: calc(var(--tile) * 1.02);
    height: calc(var(--tile) * 1.02);
}

.song-workspace,
.songwriter-app.editing .song-workspace {
    grid-template-columns: minmax(0, 1fr) calc(var(--tile) * 6.75) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.songwriter-app.editing .remove-chord {
    right: calc(var(--tile) * 0.18);
    bottom: calc(var(--tile) * 0.18);
    transform: translateY(calc(var(--tile) * 0.28));
}

.songwriter-app.editing.hide-edit-detailed-durations .remove-chord,
.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .remove-chord {
    transform: none;
}

.songwriter-app .menu-number .number-wheel {
    pointer-events: auto;
}

.songwriter-app .menu-number .wheel-input {
    pointer-events: auto;
}

.songwriter-app .menu-number .wheel-number.next,
.songwriter-app .menu-number .wheel-number.previous {
    display: block !important;
    opacity: 1;
}

.songwriter-app:not(.editing) .menu-number-bpm .wheel-number.current,
.songwriter-app:not(.editing) .menu-number-transpose .wheel-number.current {
    color: var(--accent);
}

.songwriter-app:not(.editing) .menu-number-bpm .wheel-number.next,
.songwriter-app:not(.editing) .menu-number-bpm .wheel-number.previous,
.songwriter-app:not(.editing) .menu-number-transpose .wheel-number.next,
.songwriter-app:not(.editing) .menu-number-transpose .wheel-number.previous {
    color: color-mix(in srgb, var(--accent) 52%, var(--paper));
}

.songwriter-app.editing .menu-number-transpose .wheel-number.current {
    color: rgba(var(--soft-ink-rgb), 0.7);
}

.songwriter-app.editing .menu-number-transpose .wheel-number.next,
.songwriter-app.editing .menu-number-transpose .wheel-number.previous {
    color: rgba(var(--soft-ink-rgb), 0.38);
}

.songwriter-app:not(.editing) .menu-number-bpm .menu-number-label,
.songwriter-app:not(.editing) .menu-number-transpose .menu-number-label,
.songwriter-app:not(.editing) .menu-number-bpm .wheel-number.current,
.songwriter-app:not(.editing) .menu-number-transpose .wheel-number.current,
.songwriter-app:not(.editing) .menu-number-bpm .inline-reset,
.songwriter-app:not(.editing) .menu-number-transpose .inline-reset {
    color: var(--accent);
}

.songwriter-app:not(.editing) .menu-number-bpm .wheel-number.next,
.songwriter-app:not(.editing) .menu-number-bpm .wheel-number.previous,
.songwriter-app:not(.editing) .menu-number-transpose .wheel-number.next,
.songwriter-app:not(.editing) .menu-number-transpose .wheel-number.previous {
    color: color-mix(in srgb, var(--accent) 52%, var(--paper));
    opacity: 1;
}

.songwriter-app.editing .menu-number-transpose .menu-number-label,
.songwriter-app.editing .menu-number-transpose .wheel-number.current,
.songwriter-app.editing .menu-number-transpose .inline-reset {
    color: rgba(var(--soft-ink-rgb), 0.7);
}

.songwriter-app.editing .menu-number-transpose .wheel-number.next,
.songwriter-app.editing .menu-number-transpose .wheel-number.previous {
    color: rgba(var(--soft-ink-rgb), 0.38);
    opacity: 1;
}

.songwriter-app:not(.editing) .menu-number-transpose,
.songwriter-app:not(.editing) .menu-number-transpose .number-wheel,
.songwriter-app:not(.editing) .menu-number-transpose .inline-reset {
    opacity: 1;
}

.songwriter-app.editing .menu-number-transpose,
.songwriter-app.editing .menu-number-transpose .number-wheel,
.songwriter-app.editing .menu-number-transpose .inline-reset {
    opacity: 0.36;
}

.songwriter-app {
    grid-template-columns: calc(var(--tile) * 5.7) minmax(0, 1fr);
}

.songwriter-app.locked {
    grid-template-columns: calc(var(--tile) * 5.7) minmax(0, 1fr);
}

.left-menu {
    padding-left: calc(var(--tile) * 0.45);
    padding-right: calc(var(--tile) * 0.45);
}

.menu-number {
    grid-template-columns: calc(var(--tile) * 3) calc(var(--tile) * 1.05);
    grid-template-rows: calc(var(--tile) * 0.92) calc(var(--tile) * 2.82);
    max-width: calc(var(--tile) * 4.05);
    column-gap: 0;
    row-gap: 0;
    margin-top: 0;
}

.menu-number-label {
    line-height: calc(var(--tile) * 0.92);
}

.menu-number .number-wheel {
    --scroll-wheel-width: calc(var(--tile) * 2.85);
    --scroll-wheel-height: calc(var(--tile) * 2.82);
    --scroll-wheel-item-width: calc(var(--tile) * 3.05);
}

.inline-reset {
    justify-self: start;
    transform: translate(-2px, 1px);
}

.edit-side-content {
    gap: 0;
}

.edit-toggles {
    gap: calc(var(--tile) * 0.18);
    margin-top: 0;
}

.circular-toggle {
    min-height: calc(var(--tile) * 1.18);
}

.circular-toggle input {
    width: calc(var(--tile) * 1.28);
    height: calc(var(--tile) * 1.28);
}

.songwriter-app.playback-disabled .playback-controls > :not(.menu-number-transpose) {
    opacity: 1;
}

.songwriter-app.playback-disabled .playback-controls > .icon-btn,
.songwriter-app.playback-disabled .playback-controls > .beat-orb {
    opacity: 0.36;
}

.songwriter-app.editing .playback-controls > .icon-btn,
.songwriter-app.editing .playback-controls > .beat-orb,
.songwriter-app.editing .menu-number-bpm,
.songwriter-app.editing .menu-number-transpose {
    opacity: 1;
}

.songwriter-app.editing .chord-line {
    align-items: flex-start;
}

.songwriter-app.editing .add-chord {
    align-self: flex-start;
    margin-top: calc(var(--tile) * 3.78);
    margin-bottom: 0;
}

.songwriter-app.editing.hide-edit-chord-tabs .add-chord {
    margin-top: calc(var(--tile) * 2.78);
}

.songwriter-app.editing.hide-edit-detailed-durations .add-chord {
    margin-top: calc(var(--tile) * 1.13);
}

.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .add-chord {
    margin-top: calc(var(--tile) * 0.28);
    margin-bottom: 0;
}

.songwriter-app.editing .menu-number-transpose,
.songwriter-app.editing .menu-number-transpose .number-wheel,
.songwriter-app.editing .menu-number-transpose .inline-reset {
    opacity: 0.36;
}

.left-menu {
    padding-left: 0;
    padding-right: 0;
}

.song-toolbar,
.player-bar,
.playback-controls {
    width: 100%;
}

.toolbar-kicker {
    display: block;
    width: 100%;
    white-space: nowrap;
    font-size: 0.7rem;
    text-align: center;
}

.playback-controls {
    place-items: center;
}

.player-bar .icon-btn {
    justify-self: center;
}

.beat-orb {
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--paper-rgb), 0.98) 0 29%, rgba(var(--accent-soft-rgb), 0.5) 31% 50%, rgba(var(--accent-rgb), 0.18) 53% 66%, transparent 68%),
        conic-gradient(from var(--zap-angle, 0deg), transparent 0 10%, rgba(var(--accent-rgb), 0.85) 11%, transparent 15% 33%, rgba(var(--accent-rgb), 0.68) 35%, transparent 41% 65%, rgba(var(--accent-rgb), 0.72) 67%, transparent 72% 100%);
}

.beat-orb::before {
    inset: 11%;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background:
        conic-gradient(from 0deg, transparent 0 7%, rgba(var(--accent-rgb), 0.72) 8%, transparent 12% 29%, rgba(var(--accent-rgb), 0.55) 31%, transparent 36% 100%);
    mask: radial-gradient(circle, transparent 0 52%, #000 54% 62%, transparent 64%);
    animation: electric-orbit 1.2s linear infinite;
}

.beat-orb::after {
    inset: 31%;
    background: radial-gradient(circle, rgba(var(--paper-rgb), 0.92), rgba(var(--accent-soft-rgb), 0.24));
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.22);
}

.beat-orb.beat-hit {
    animation: beat-electric-small 180ms ease-out;
}

.beat-orb.beat-hit::before {
    animation: electric-orbit 260ms linear, electric-spark 180ms ease-out;
}

.beat-orb.bar-start.beat-hit {
    animation: beat-electric-strong 220ms ease-out;
}

@keyframes electric-orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes electric-spark {
    0% {
        filter: brightness(1);
        opacity: 0.72;
    }

    48% {
        filter: brightness(1.9) saturate(1.8);
        opacity: 1;
    }

    100% {
        filter: brightness(1);
        opacity: 0.78;
    }
}

@keyframes beat-electric-small {
    0% {
        --zap-angle: 0deg;
        filter: brightness(1);
    }

    50% {
        --zap-angle: 90deg;
        filter: brightness(1.18) saturate(1.25);
        transform: scale(1.035);
    }

    100% {
        --zap-angle: 180deg;
        filter: brightness(1);
        transform: scale(1);
    }
}

@keyframes beat-electric-strong {
    0% {
        --zap-angle: 0deg;
        filter: brightness(1);
    }

    46% {
        --zap-angle: 140deg;
        filter: brightness(1.42) saturate(1.7);
        transform: scale(1.09);
    }

    100% {
        --zap-angle: 280deg;
        filter: brightness(1);
        transform: scale(1);
    }
}

.edit-side-menu .edit-mode-button {
    width: calc(var(--tile) * 2.95);
    min-width: calc(var(--tile) * 2.95);
    max-width: calc(var(--tile) * 2.95);
    height: calc(var(--tile) * 2.95);
    min-height: calc(var(--tile) * 2.95);
    border-radius: 50%;
    padding: 0;
    aspect-ratio: 1;
}

.edit-side-menu {
    gap: calc(var(--tile) * 0.35);
    padding-top: calc(var(--tile) * 1.05);
}

.edit-side-menu .edit-side-content {
    gap: 0;
}

.edit-side-menu .menu-number {
    grid-template-rows: calc(var(--tile) * 0.78) calc(var(--tile) * 2.38);
    margin-top: calc(var(--tile) * -0.08);
}

.edit-side-menu .menu-number-label {
    line-height: calc(var(--tile) * 0.78);
}

.edit-side-menu .menu-number .number-wheel {
    --scroll-wheel-height: calc(var(--tile) * 2.38);
    --scroll-wheel-current-size: 1.28rem;
    --scroll-wheel-side-size: 0.66rem;
}

.edit-side-menu .edit-toggles {
    gap: calc(var(--tile) * 0.08);
    margin-top: calc(var(--tile) * -0.08);
}

.edit-side-menu .circular-toggle {
    min-height: calc(var(--tile) * 1.02);
}

.songwriter-app.editing .chord-select {
    transform: translateY(calc(var(--tile) * 0.28));
}

.songwriter-app.editing .add-chord {
    margin-top: calc(var(--tile) * 4.06);
}

.songwriter-app.editing.hide-edit-chord-tabs .add-chord {
    margin-top: calc(var(--tile) * 3.06);
}

.songwriter-app.editing.hide-edit-detailed-durations .add-chord {
    margin-top: calc(var(--tile) * 1.41);
}

.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .add-chord {
    margin-top: calc(var(--tile) * 0.56);
}

.player-bar,
.playback-controls {
    justify-items: center;
}

.playback-controls > * {
    translate: calc((var(--tile) * -0.4) + 5px) 0;
}

.toolbar-title {
    transform: translateX(calc(var(--tile) * -0.4));
}

.edit-side-menu {
    gap: calc(var(--tile) * 0.18);
}

.edit-side-menu .menu-number {
    grid-template-columns: calc(var(--tile) * 3) calc(var(--tile) * 1.05);
    grid-template-rows: calc(var(--tile) * 0.92) calc(var(--tile) * 2.82);
    max-width: calc(var(--tile) * 4.05);
    row-gap: 0;
    margin-top: 0;
}

.edit-side-menu .menu-number-label {
    line-height: calc(var(--tile) * 0.92);
}

.edit-side-menu .menu-number .number-wheel {
    --scroll-wheel-width: calc(var(--tile) * 2.85);
    --scroll-wheel-height: calc(var(--tile) * 2.82);
    --scroll-wheel-item-width: calc(var(--tile) * 3.05);
    --scroll-wheel-current-size: 1.42rem;
    --scroll-wheel-side-size: 0.78rem;
}

.edit-side-menu .inline-reset {
    justify-self: start;
    transform: translate(-2px, 1px);
}

.edit-side-menu .edit-toggles {
    gap: 0;
    margin-top: calc(var(--tile) * -0.2);
}

.edit-side-menu .circular-toggle,
.playback-controls .circular-toggle {
    min-height: calc(var(--tile) * 0.92);
    height: calc(var(--tile) * 0.92);
}

.edit-side-menu .circular-toggle input,
.playback-controls .circular-toggle input {
    width: calc(var(--tile) * 1.08);
    height: calc(var(--tile) * 1.08);
}

.playback-controls .main-duration-toggle {
    translate: calc((var(--tile) * -0.4) - 3px) 0;
}

.playback-controls .display-options {
    display: inline-grid;
    gap: 10px;
    align-self: center;
    translate: calc((var(--tile) * -0.4) - 3px) 0;
}

.playback-controls .display-options .main-duration-toggle {
    translate: 0;
}

.playback-controls .main-duration-toggle input {
    margin-right: calc((var(--tile) * 0.32) - 2px);
}

.songwriter-app.editing .playback-controls .display-detail-toggle {
    opacity: 0.36;
    pointer-events: none;
}

.playback-controls #play-btn {
    order: 1;
}

.playback-controls #pause-btn {
    order: 2;
}

.playback-controls #stop-btn {
    order: 3;
}

.playback-controls #next-section-btn {
    order: 4;
}

.playback-controls #previous-section-btn {
    order: 5;
}

.playback-controls .beat-orb {
    order: 6;
}

.playback-controls .menu-number-transpose {
    order: 7;
}

.playback-controls .menu-number-bpm {
    order: 8;
}

.menu-number {
    grid-template-rows: auto calc(var(--tile) * 3.15);
    row-gap: 0;
    margin-top: calc(var(--tile) * 0.16);
}

.menu-number-label {
    grid-row: 1;
}

.menu-number .tiny-field,
.menu-number .number-wheel {
    grid-row: 2;
    align-self: center;
}

.inline-reset {
    grid-row: 2;
    align-self: center;
    transform: translateY(1px);
}

.edit-mode-button {
    width: calc(var(--tile) * 3.1);
    min-width: calc(var(--tile) * 3.1);
    height: calc(var(--tile) * 3.1);
    border-radius: 999px;
}

.songwriter-app.editing .edit-side-menu .song-bpm-field {
    display: inline-flex;
}

.edit-side-content {
    gap: calc(var(--tile) * 0.22);
}

.edit-toggles {
    gap: calc(var(--tile) * 0.34);
    margin-top: calc(var(--tile) * 0.2);
}

.songwriter-app.editing .add-chord {
    align-self: flex-end;
    margin-bottom: calc(var(--tile) * 0.14);
}

.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .add-chord {
    margin-bottom: calc(var(--tile) * 0.08);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

.left-menu {
    gap: calc(var(--tile) * 0.85);
    padding: calc(var(--tile) * 1.35) calc(var(--tile) * 1.2);
    background: rgba(var(--paper-rgb), 0.76);
}

.song-toolbar {
    justify-items: center;
}

.toolbar-title {
    padding: 0;
}

.toolbar-kicker {
    color: var(--accent-dark);
    font-size: 0.78rem;
    letter-spacing: 0;
}

.toolbar-actions,
.account-bar,
.randomizer-panel {
    display: none;
}

.account-bar[hidden],
.randomizer-panel[hidden],
.format-actions[hidden],
.cancel-edit-btn[hidden] {
    display: none;
}

.player-bar,
.playback-controls {
    display: grid;
    justify-items: center;
}

.playback-controls {
    grid-template-columns: 1fr;
    gap: calc(var(--tile) * 0.55);
}

.song-toolbar .icon-btn,
.player-bar .icon-btn,
.edit-side-menu .icon-btn {
    width: calc(var(--tile) * 3.6);
    height: calc(var(--tile) * 2.18);
    border: 0;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 10px 14px rgba(var(--shadow-rgb), 0.24);
    font-size: 1rem;
}

.player-bar .icon-btn:hover,
.player-bar .icon-btn:focus-visible,
.edit-side-menu .icon-btn:hover,
.edit-side-menu .icon-btn:focus-visible,
.edit-side-menu .icon-btn.active {
    background: color-mix(in srgb, var(--accent-soft) 88%, var(--paper));
    color: var(--accent-dark);
    outline: 0;
    transform: translateY(-1px);
}

.pause-btn svg {
    width: 18px;
    height: 18px;
}

.menu-number {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--tile) * 1.75);
    width: 100%;
    max-width: calc(var(--tile) * 5.4);
    justify-items: center;
    align-items: center;
    row-gap: calc(var(--tile) * 0.08);
    margin-top: calc(var(--tile) * 0.38);
}

.menu-number-label {
    grid-column: 1 / -1;
    color: var(--accent-dark);
    font-size: 0.86rem;
    font-weight: 900;
    line-height: var(--tile);
    text-align: center;
    text-transform: uppercase;
}

.menu-number .tiny-field {
    grid-column: 1;
    min-height: calc(var(--tile) * 2.7);
    padding: 0;
    border: 0;
    background: transparent;
}

.menu-number .number-wheel {
    --scroll-wheel-width: calc(var(--tile) * 3);
    --scroll-wheel-height: calc(var(--tile) * 3.15);
    --scroll-wheel-item-width: calc(var(--tile) * 3.5);
    --scroll-wheel-current-size: 1.42rem;
    --scroll-wheel-side-size: 0.78rem;
    color: var(--accent);
}

.menu-number .wheel-number.current {
    color: var(--accent);
}

.menu-number .wheel-number.next,
.menu-number .wheel-number.previous {
    color: color-mix(in srgb, var(--accent) 52%, var(--paper));
}

.inline-reset {
    grid-column: 2;
    width: calc(var(--tile) * 1.45);
    height: calc(var(--tile) * 1.45);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}

.inline-reset:hover,
.inline-reset:focus-visible {
    color: var(--accent-dark);
    outline: 0;
}

.beat-orb {
    position: relative;
    width: calc(var(--tile) * 4.05);
    height: calc(var(--tile) * 4.05);
    margin: calc(var(--tile) * 0.75) 0 calc(var(--tile) * 0.35);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--paper-rgb), 0.98) 0 34%, rgba(var(--accent-soft-rgb), 0.36) 35% 58%, rgba(var(--accent-rgb), 0.18) 59% 70%, transparent 71%),
        conic-gradient(from 12deg, transparent 0 20%, rgba(var(--accent-rgb), 0.62) 22%, transparent 28% 56%, rgba(var(--accent-rgb), 0.5) 58%, transparent 64% 100%);
    box-shadow: 0 14px 18px rgba(var(--shadow-rgb), 0.24), inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.beat-orb::before,
.beat-orb::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: inherit;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.22);
}

.beat-orb::after {
    inset: 34%;
    background: rgba(var(--paper-rgb), 0.76);
    border: 0;
}

.beat-orb.bar-start {
    animation: beat-electric 220ms ease-out;
}

@keyframes beat-electric {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }

    45% {
        filter: brightness(1.32) saturate(1.45);
        transform: scale(1.08);
    }

    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

.songwriter-app.playback-disabled .playback-controls {
    opacity: 1;
}

.songwriter-app.playback-disabled .playback-controls > :not(.menu-number-transpose) {
    opacity: 0.36;
}

.songwriter-app.playback-disabled .menu-number-transpose,
.songwriter-app.playback-disabled .menu-number-transpose .number-wheel,
.songwriter-app.playback-disabled .menu-number-transpose .inline-reset {
    opacity: 1;
}

.song-workspace {
    grid-template-columns: minmax(0, 1fr) calc(var(--tile) * 4.35) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
    transition: grid-template-columns 220ms ease;
}

.songwriter-app.editing .song-workspace {
    grid-template-columns: minmax(0, 1fr) calc(var(--tile) * 6.75) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.song-page {
    grid-column: 1;
}

.edit-side-menu {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: calc(var(--tile) * 1.1);
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: calc(var(--tile) * 1.45) calc(var(--tile) * 0.65) var(--tile);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: rgba(var(--paper-rgb), 0.58);
    overflow: hidden auto;
}

.song-list-panel {
    grid-column: 3;
}

.edit-mode-button {
    font-size: 1.24rem;
}

.edit-side-content {
    display: grid;
    justify-items: center;
    gap: calc(var(--tile) * 0.5);
    width: 100%;
    opacity: 0;
    transform: translateY(calc(var(--tile) * -0.25));
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.songwriter-app.editing .edit-side-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.edit-toggles {
    display: grid;
    gap: calc(var(--tile) * 0.45);
    width: 100%;
    margin-top: calc(var(--tile) * 0.7);
}

.circular-toggle {
    justify-content: start;
    min-height: calc(var(--tile) * 1.35);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    font-size: 0.82rem;
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
}

.circular-toggle input {
    appearance: none;
    flex: 0 0 auto;
    width: calc(var(--tile) * 1.45);
    height: calc(var(--tile) * 1.45);
    margin: 0 calc(var(--tile) * 0.32) 0 0;
    border: 2px solid var(--accent);
    border-radius: 999px;
    background: radial-gradient(circle, transparent 0 42%, rgba(var(--paper-rgb), 0.92) 44% 100%);
    box-shadow: inset 0 0 0 4px rgba(var(--paper-rgb), 0.92);
}

.circular-toggle input:checked {
    background: radial-gradient(circle, var(--accent) 0 48%, rgba(var(--paper-rgb), 0.96) 50% 100%);
}

.circular-toggle input:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}

.songwriter-app:not(.editing) .edit-side-menu .edit-mode-button {
    align-self: start;
}

@media (max-width: 760px) {
    .player-bar,
    .randomizer-panel {
        display: none;
    }

    .song-workspace,
    .songwriter-app.editing .song-workspace {
        grid-template-columns: 1fr;
    }

    .edit-side-menu {
        display: none;
    }

    .song-list-panel {
        grid-column: 1;
    }
}

.songwriter-app.locked .edit-side-menu {
    display: none;
}

.songwriter-app.locked .song-workspace {
    grid-template-columns: minmax(0, 1fr);
}

.playback-controls #play-btn {
    order: 1;
}

.playback-controls #pause-btn {
    order: 2;
}

.playback-controls #stop-btn {
    order: 3;
}

.playback-controls #next-section-btn {
    order: 4;
}

.playback-controls #previous-section-btn {
    order: 5;
}

.playback-controls .beat-orb {
    order: 6;
}

.playback-controls .menu-number-transpose {
    order: 7;
}

.playback-controls .menu-number-bpm {
    order: 8;
}

.menu-number {
    grid-template-rows: auto calc(var(--tile) * 3.15);
    row-gap: 0;
    margin-top: calc(var(--tile) * 0.16);
}

.menu-number-label {
    grid-row: 1;
}

.menu-number .tiny-field {
    grid-row: 2;
    align-self: center;
}

.inline-reset {
    grid-row: 2;
    align-self: center;
    transform: translateY(1px);
}

.edit-mode-button {
    width: calc(var(--tile) * 3.1);
    min-width: calc(var(--tile) * 3.1);
    height: calc(var(--tile) * 3.1);
    border-radius: 999px;
}

.songwriter-app.editing .edit-side-menu .song-bpm-field {
    display: inline-flex;
}

.edit-side-content {
    gap: calc(var(--tile) * 0.22);
}

.edit-toggles {
    gap: calc(var(--tile) * 0.34);
    margin-top: calc(var(--tile) * 0.2);
}

.songwriter-app.editing .add-chord {
    align-self: flex-end;
    margin-bottom: calc(var(--tile) * 0.14);
}

.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .add-chord {
    margin-bottom: calc(var(--tile) * 0.08);
}

.songwriter-app:not(.editing) .menu-number-bpm,
.songwriter-app:not(.editing) .menu-number-bpm .number-wheel,
.songwriter-app:not(.editing) .menu-number-bpm .inline-reset,
.songwriter-app:not(.editing) .menu-number-transpose,
.songwriter-app:not(.editing) .menu-number-transpose .number-wheel,
.songwriter-app:not(.editing) .menu-number-transpose .inline-reset {
    opacity: 1;
    pointer-events: auto;
}

.songwriter-app.editing .menu-number-bpm,
.songwriter-app.editing .menu-number-bpm .number-wheel,
.songwriter-app.editing .menu-number-bpm .inline-reset {
    opacity: 1;
    pointer-events: auto;
}

.songwriter-app.editing .menu-number-transpose,
.songwriter-app.editing .menu-number-transpose .number-wheel,
.songwriter-app.editing .menu-number-transpose .inline-reset {
    opacity: 0.36;
    pointer-events: none;
}

.menu-number .number-wheel[aria-disabled="true"] {
    cursor: default;
}

.songwriter-app .song-workspace,
.songwriter-app.editing .song-workspace {
    grid-template-columns: minmax(0, 1fr) calc(var(--tile) * 6.75) minmax(calc(var(--tile) * 11), calc(var(--tile) * 15));
}

.songwriter-app.editing .chord-line {
    align-items: flex-start;
}

.songwriter-app.editing .chord-select {
    transform: translateY(calc(var(--tile) * 0.28));
}

.songwriter-app.editing .remove-chord {
    top: auto;
    right: calc(var(--tile) * -0.13);
    bottom: calc(var(--tile) * -0.02);
    transform: translate(-3px, calc(var(--tile) * 0.28));
}

.songwriter-app.editing.hide-edit-chord-tabs .remove-chord {
    bottom: calc(var(--tile) * -0.02);
}

.songwriter-app.editing.hide-edit-detailed-durations .remove-chord,
.songwriter-app.editing.hide-edit-detailed-durations.hide-edit-chord-tabs .remove-chord {
    right: calc(var(--tile) * -0.13);
    bottom: calc(var(--tile) * 0.08);
    transform: translateX(-3px);
}