#bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    background-color: var(--main);
    height: var(--bottom-bar-height);
}

.lower-box .block {
    border-top: none; 
}

.lower-box .title-and-hiding {
    display: flex; 
    justify-content: space-between;
}

.lower-box .toggle {
    margin-top: 0;
}

.lower-box .note-scheme {
    margin-top: 0;
}

button.hide {
    background-color: transparent;
    border-color: transparent;
    padding: 1px 5px;
}

button.hide:hover {
    background-color: var(--panel2);
}

.box-visibility-toggler {
    position: absolute;
    top: 0;
    height: 100%;

    font-size: 13px;
    background-color: var(--dark-button);

    display: inline-flex;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;
    cursor: pointer;
}


/**************************
 * tonnetz-and-coloring
 **************************/

#toggle-box-of-tonnetz-and-coloring {
    right: 420px;
}

#tonnetz-and-coloring {
    position: absolute;
    left: calc(var(--box-spacing) * 2 + 290px);
    bottom: calc(var(--bottom-bar-height) + var(--box-spacing));
    width: 560px;
    height: 260px;
}

.axis-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--scale) * 11px);
    color: var(--muted);
    margin-bottom: 6px;
}

/* when the "circle of fifths" mode is checked, hide the axis control */
:root:has(#nsFifths:checked) #axis-system .axis-controls {
    visibility: hidden;
}

.tonic-shift {
    background: var(--panel2);
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: calc(var(--scale) * 12px);
    line-height: 1;
    cursor: pointer;
}

.tonic-shift:hover {
    border-color: var(--accent);
}

.tonic-group {
    color: var(--txt);
    font-size: calc(var(--scale) * 12px);
    min-width: 84px;
    text-align: center;
}

#axis-system .axis-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
}

#axis-system .child-box {
    flex: 0 0 auto;
    background: var(--panel2);
    border: 1px solid var(--line);
    padding: 5px;
    text-align: center;
}

#axis-system .chord-name {
    display: inline-block;
    font-size: calc(var(--scale) * 13px);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--txt);
}

#axis-system .chord-name.tonic { background-color: var(--tonic-color); color: #fff }
#axis-system .chord-name.pseudotonic { background-color: var(--pseudotonic-color); color: #fff }
#axis-system .chord-name.pseudotonic-minor { background-color: var(--pseudotonic-minor-color); color: #fff }
#axis-system .chord-name.subdominant { background-color: var(--subdominant-color); color: #fff }
#axis-system .chord-name.subdominant-minor { background-color: var(--subdominant-minor-color); color: #fff }
#axis-system .chord-name.dominant { background-color: var(--dominant-color); color: #fff }
#axis-system .chord-name.dominant-minor { background-color: var(--dominant-minor-color); color: #fff }

#axis-system .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    width: 126px;
    margin-top: 5px;
}

#axis-system .grid-cell {
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* tonnetz cell color depends on the chosen note scheme (set as .scheme-* on the
   grid). non-belonging cells get a faint tint; chord tones (.belongs) get full. */

/* axis system: by harmonic function (auto-switches under body.accessible) */
#axis-system .grid.scheme-axis .grid-cell.tonic { background-color: rgb(from var(--tonic-color) r g b / .15) }
#axis-system .grid.scheme-axis .grid-cell.subdominant { background-color: rgb(from var(--subdominant-color) r g b / .15) }
#axis-system .grid.scheme-axis .grid-cell.dominant { background-color: rgb(from var(--dominant-color) r g b / .15) }
#axis-system .grid.scheme-axis .grid-cell.tonic.belongs { background-color: var(--tonic-color) }
#axis-system .grid.scheme-axis .grid-cell.subdominant.belongs { background-color: var(--subdominant-color) }
#axis-system .grid.scheme-axis .grid-cell.dominant.belongs { background-color: var(--dominant-color) }

/* circle of fifths: a chroma wheel keyed by --n (0=C, 1=G, 2=D, …) */
#axis-system .grid.scheme-fifths .grid-cell { --theta: calc(var(--n) * 30deg); background-color: oklch(70% 0.12 var(--theta) / .15) }
#axis-system .grid.scheme-fifths .grid-cell.belongs { background-color: oklch(70% 0.12 var(--theta)) }
:root:has(#tAccessible:checked) #axis-system .grid.scheme-fifths .grid-cell {
    background-color: oklab(calc(67.5% + 18% * cos(var(--theta))) 0 calc(0.13 * sin(var(--theta))) / .15);
}
:root:has(#tAccessible:checked) #axis-system .grid.scheme-fifths .grid-cell.belongs {
    background-color: oklab(calc(67.5% + 18% * cos(var(--theta))) 0 calc(0.13 * sin(var(--theta))));
}

/* no coloring: still mark the chord tones, but neutrally */
#axis-system .grid.scheme-none .grid-cell.belongs { background-color: var(--muted) }

/* in accessible mode the fifths wheel's C/F/G fills are so light that white text
   on a highlighted cell is unreadable — switch those labels to black */
:root:has(#tAccessible:checked) #axis-system .grid.scheme-fifths .grid-cell.belongs.bright-cfg .grid-cell__label {
    color: #000;
}

#axis-system .grid.show-net1 .grid-cell.net2 { visibility: hidden }
#axis-system .grid.show-net2 .grid-cell.net1 { visibility: hidden }

/* when the "circle of fifths" mode is checked, show both nets to show the nice gradation */
:root:has(#nsFifths:checked) #axis-system .grid.show-net1 .grid-cell.net2 { visibility: visible }
:root:has(#nsFifths:checked) #axis-system .grid.show-net2 .grid-cell.net1 { visibility: visible }


#axis-system .grid-cell__label {
    font-size: calc(var(--scale) * 8px);
    line-height: 1;
    opacity: .75;
    color: #fff;
    pointer-events: none;
    user-select: none;
}





/*****************
 * key-degree
 *****************/

#toggle-box-of-key-degree {
    right: 920px;
}

#key-degree {
    position: absolute;
    left: var(--box-spacing);
    bottom: calc(var(--bottom-bar-height) + var(--box-spacing));
    width: 290px;
    height: 260px;
}

/* the 4×6 tonnetz key picker (Roman-numeral mode) */
#tonic-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    margin-top: 8px;
}

#tonic-grid .tcell {
    aspect-ratio: 1.05;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel2);
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    font-family: ui-monospace, monospace;
}

#tonic-grid .tcell:hover {
    border-color: var(--accent);
}

#tonic-grid .tcell.cur {
    background: var(--main);
    border-color: var(--main);
    color: var(--lit-button-txt);
}

#autoKey {
    margin-top: 8px;
    font-size: calc(var(--scale) * 11.5px);
}


/*****************
 * edit-view
 *****************/

#toggle-box-of-edit-view {
    right: 33px;
}

#edit-view {
    position: absolute;
    right: var(--box-spacing);
    bottom: calc(var(--bottom-bar-height) + var(--box-spacing));
    height: 260px;
}

/******************
 * tempo-metronome
 ******************/

#toggle-box-of-tempo-metronome {
    right: 33px;
}

#tempo-metronome {
    position: absolute;
    right: var(--box-spacing);
    bottom: calc(var(--bottom-bar-height) + var(--box-spacing));
    height: 140px;
}