html {
    scrollbar-gutter: stable;
}

:root {
    --cell-height: calc((100vw - 130px) / 90);
    /* Fluid default cell height based on viewport width */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    background-color: #e8e9eb;
    /* Grey background matching image */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

body.show-zoom {
    overflow: hidden;
    height: 100vh;
    --cell-height: calc((100vh - 145px) / 5);
    /* Zoom-mode cell height (fills available viewport height) accounting for 1 gap */
}

body.show-zoom.show-padding {
    --cell-height: calc((100vh - 220px) / 5);
    /* Zoom-mode cell height accounting for vertical gaps */
}

.app-container {
    width: 100%;
    min-height: calc(100vh - 40px);
    /* Fill available viewport height minus body padding */
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body.show-zoom .app-container {
    max-width: 100%;
    height: calc(100vh - 40px);
    /* Full height minus body padding */
}

body.show-3d {
    overflow: hidden;
    height: 100vh;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

body.show-3d .app-container {
    min-height: 30vh;
    max-height: 30vh;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

body.show-3d.show-zoom .app-container {
    height: 30vh;
}

.controls {
    display: flex;
    gap: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    align-items: center;
}

.control-divider {
    width: 1px;
    height: 14px;
    background-color: #b0b0b0;
}

/* Modern Toggle Switch */
.toggle-control {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.toggle-control input {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 18px;
    background: #b0b0b0;
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.toggle-control input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle-control input:checked {
    background: #4CAF50;
}

.toggle-control input:checked::after {
    transform: translateX(14px);
}

/* 3D Viewer Panel */
.viewer-panel {
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.viewer-panel iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

body.show-3d .viewer-panel {
    height: calc(70vh - 20px);
}

.score-container {
    display: grid;
    grid-template-columns: 90px 1fr;
    /* Fixed label width prevents layout shifts during transitions */
    align-items: stretch;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    /* Always vertically center the score container on the page */
    transition: margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.row-labels {
    display: grid;
    grid-template-rows: repeat(5, auto);
    padding-right: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10px;
    color: #000000;
    row-gap: 0px;
    /* Explicitly define default for smooth transition */
    transition: row-gap 0.3s ease;
}

.row-label {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
    height: var(--cell-height);
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.3s ease;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(18, auto);
    /* Sized dynamically by cell widths */
    grid-template-rows: repeat(5, auto);
    width: max-content;
    background-color: transparent;
    gap: 0px;
    border: none;
    transition: row-gap 0.3s ease;
}

.cell {
    background-color: #ffffff;
    /* Cells white if not colored */
    width: calc(5 * var(--cell-height));
    /* Explicit cell width matches 5:1 ratio in perfect sync */
    height: var(--cell-height);
    /* Explicit cell height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #000000;
    position: relative;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid transparent;
    /* default transparent to prevent layout shift */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-bottom-color 0.3s ease,
        margin-bottom 0.3s ease;
    /* Animate dimensions in perfect lockstep to prevent fracturing */
}

/* Right border for last column */
.cell:nth-child(18n) {
    border-right: 1px solid #cccccc;
}

/* Bottom border for Row 3 and Row 4 always */
.cell:nth-child(n+55) {
    border-bottom-color: #cccccc;
}

.cell span {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    font-size: clamp(12px, calc(var(--cell-height) * 0.7), 80px);
    /* Dynamic font-size that fills cell height */
    line-height: 1;
    transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Animate font-size smoothly with the zoom */
}

.staff-svg,
.facade-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

.facade-svg {
    color: #c19a6b;
    /* Elegant bronze/tan color for all facade panels */
}

/* Grey color for vertical drum facade lines */
.cell:nth-child(n+73) .facade-svg {
    color: #a6a6a6;
}

/* Toggle States */
.grid-container.show-text .cell span {
    visibility: visible;
}

.grid-container.show-notes .staff-svg {
    display: block;
}

.grid-container.show-facade .facade-svg {
    display: block;
}

.facade-shadow {
    fill: #000000;
    /* Crisp dark grey color for fake shadow lines */
    opacity: 0.1;
    /* Balanced shadow translucency */
    display: none;
}

.grid-container.show-shadows .facade-shadow {
    display: block;
}



/* Padding Toggle Styles */
.show-padding .grid-container {
    row-gap: 25px;
}

.show-padding .row-labels {
    row-gap: 25px;
}

/* Row 0, 1, 2 cells get bottom border when padding is on */
.show-padding .cell:nth-child(-n+54) {
    border-bottom-color: #cccccc;
}

/* Keep the 25px gap between Row 3 (Flute 1) and Row 4 (Snare Drum) when padding is off */
body:not(.show-padding) .row-label:nth-child(4),
body:not(.show-padding) .cell:nth-child(n+55):nth-child(-n+72) {
    margin-bottom: 25px;
}

/* Default margin-bottom for Row 3 items is 0px when padding is active */
.row-label:nth-child(4),
.cell:nth-child(n+55):nth-child(-n+72) {
    margin-bottom: 0px;
}

/* Zoom Toggle Styles */
body.show-zoom .score-container {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Removed position: sticky from body.show-zoom .row-labels so it scrolls off naturally */

body.show-zoom .grid-container {
    height: 100%;
    align-content: start;
    /* Prevent browser from stretching rows when row-gap is 0 */
}

/* Delicate, scale-invariant vector music notation styling */
.staff-svg .staff-line {
    stroke: #b8b8b8;
    stroke-width: 1px;
    /* Always exactly 1px */
    vector-effect: non-scaling-stroke;
}

.staff-svg .note-beam {
    stroke: #1a1a1a;
    stroke-width: 2px;
    /* Always exactly 2px */
    vector-effect: non-scaling-stroke;
}

.staff-svg .note-stem {
    stroke: #1a1a1a;
    stroke-width: 1px;
    /* Elegant, thin stems */
    vector-effect: non-scaling-stroke;
}

.staff-svg .note-slash {
    stroke: #1a1a1a;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.staff-svg .note-head {
    fill: #1a1a1a;
}

.staff-svg .note-head.half-note {
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 1.25px;
    /* Elegant outline */
    vector-effect: non-scaling-stroke;
}

.staff-svg .note-rest {
    fill: #1a1a1a;
}

/* Color definitions for labels when coloring is toggled */
/* Shuffled colors for maximum visual contrast on adjacent letters */
.grid-container.show-colors .cell[data-label="A"] {
    background-color: #e41951;
    color: #ffffff;
}

/* Red 1 */
.grid-container.show-colors .cell[data-label="B"] {
    background-color: #5bb847;
    color: #ffffff;
}

/* Mid Green */
.grid-container.show-colors .cell[data-label="C"] {
    background-color: #d24395;
    color: #ffffff;
}

/* Purple */
.grid-container.show-colors .cell[data-label="D"] {
    background-color: #f8971d;
    color: #ffffff;
}

/* Orange */
.grid-container.show-colors .cell[data-label="E"] {
    background-color: #35b2e8;
    color: #000000;
}

/* Light Blue */
.grid-container.show-colors .cell[data-label="F"] {
    background-color: #764997;
    color: #ffffff;
}

/* Magenta */
.grid-container.show-colors .cell[data-label="G"] {
    background-color: #c0d62d;
    color: #000000;
}

/* Lime-Yellow */
.grid-container.show-colors .cell[data-label="H"] {
    background-color: #9fce38;
    color: #000000;
}

/* Red 2 */
.grid-container.show-colors .cell[data-label="I"] {
    background-color: #3b75bb;
    color: #ffffff;
}

/* Mint */
.grid-container.show-colors .cell[data-label="J"] {
    background-color: #4d53a4;
    color: #ffffff;
}

/* Indigo */
.grid-container.show-colors .cell[data-label="K"] {
    background-color: #fcd116;
    color: #000000;
}

/* Yellow */
.grid-container.show-colors .cell[data-label="L"] {
    background-color: #e82143;
    color: #ffffff;
}

/* Medium Blue */
.grid-container.show-colors .cell[data-label="M"] {
    background-color: #6dcc9c;
    color: #000000;
}

/* Hot Pink */
.grid-container.show-colors .cell[data-label="N"] {
    background-color: #eb1b7a;
    color: #ffffff;
}

/* Lime-Green */

/* Shuffled colors for percussion numbers */
.grid-container.show-colors .cell[data-label="1"] {
    background-color: #4eb447;
    color: #ffffff;
}

/* Salmon */
.grid-container.show-colors .cell[data-label="2"] {
    background-color: #f05b63;
    color: #ffffff;
}

/* Green */
.grid-container.show-colors .cell[data-label="3"] {
    background-color: #764997;
    color: #ffffff;
}

/* Purple */
.grid-container.show-colors .cell[data-label="4"] {
    background-color: #f8971d;
    color: #ffffff;
}

/* Orange */
.grid-container.show-colors .cell[data-label="5"] {
    background-color: #35b2e8;
    color: #000000;
}

/* Light Blue */
.grid-container.show-colors .cell[data-label="6"] {
    background-color: #eb1b7a;
    color: #ffffff;
}

/* Hot Pink */
.grid-container.show-colors .cell[data-label="7"] {
    background-color: #c0d62d;
    color: #000000;
}

/* Lime-Yellow */
/* Maroon */
.grid-container.show-colors .cell[data-label="8"] {
    background-color: #8a1340;
    color: #ffffff;
}

/* Warm Slate Grey for empty cells labeled "-" */
.grid-container.show-colors .cell[data-label="-"] {
    background-color: #58595b;
    color: #ffffff;
}