:root {
    /* UI: base colors and main colors; always b = -2a in oklab */
    --bg:               oklab(15% 0.005 -0.01);
    --panel:            oklab(20% 0.01  -0.02);
    --lit-button-txt:   oklab(20% 0.015 -0.03);
    --panel2:           oklab(25% 0.015 -0.03);
    --line:             oklab(35% 0.015 -0.03);
    --txt:              oklab(95% 0.005 -0.01);
    --muted:            oklab(70% 0.015 -0.03);
    --main:             oklab(70% 0.065 -0.13);
    --dark-button:      oklab(35% 0.04  -0.08);

    --left-bar:         oklab(30% 0.01  -0.02);

    --link:             oklab(74% 0.065 -0.13);
    --link-hover:       oklab(78% 0.055 -0.11);
    /* slightly change the hue */
    --link-visited:     oklab(70% 0.1   -0.1 );
    --link-active:      oklab(68% 0.120 -0.04);

    /* UI: special colors */
    --danger: oklab(70% 0.2 0.06);
    --accent: oklab(70% -0.12 0.08);

    --scale: 0.9;
    --box-spacing: 8px;
    --bottom-bar-height: 22px;
}

input[type="checkbox"] {
    cursor: pointer;
}

input[type="radio"] {
    cursor: pointer;
}



a:link {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}

input[type="checkbox"] {
  accent-color: var(--main);
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--txt)
}

table.intervals td {
    padding: 0 5px;
    font-size: 9.6px;
}

#app {
    display: flex;
    height: 100vh;
    overflow: hidden
}

#side {
    margin-left: 45px;
    margin-bottom: var(--bottom-bar-height);
    width: 310px;
    min-width: 310px;
    background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

#stage {
    flex: 1;
    position: relative;
    min-width: 0
}

/* The 3D scene renders only inside this rectangle, inset so the overlay boxes
   (anchored to the stage edges) never sit on top of the cylinder. Its inset is
   computed in JS from the live positions of the .overlay-box elements. */
#viewport {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

canvas {
    display: block
}

h1 {
    font-size: calc(var(--scale) * 15px);
    margin: 0;
    padding: 16px 16px 4px;
    letter-spacing: .2px
}

.sub {
    font-size: calc(var(--scale) * 11.5px);
    color: var(--muted);
    padding: 0 16px 12px;
    line-height: 1.5
}

.block {
    padding: 12px 16px;
    border-top: 1px solid var(--line)
}

.overlay-box .block {
    padding-left: 8px;
    padding-right: 8px;
}

.block h2 {
    font-size: calc(var(--scale) * 11px);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    margin: 0 0 8px
}

.fld {
    display: block;
    font-size: calc(var(--scale) * 12px);
    color: var(--muted);
    margin: 8px 0 4px
}

summary {
    font-size: calc(var(--scale) * 12px);
    color: var(--muted);
    padding-bottom: 4px;
}

input[type=text] {
    width: 100%;
    background-color: var(--panel); /* not panel2 */
    border-top: none;
    border-left: none;
    border-right: none;
    color: white;
    border-bottom: 1px solid var(--txt);
    padding: 2px 2px;
    font-size: calc(var(--scale) * 20px);
    font-family: ui-monospace, Menlo, Consolas, monospace
}

input[type=text]:focus {
    outline: none;
    border: 1px solid var(--main);
    border-radius: 2px;
}

.row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px
}

button {
    background: var(--panel2);
    border: 1px solid var(--line);
    color: var(--txt);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: calc(var(--scale) * 12.5px);
    cursor: pointer;
    transition: .12s
}

button:hover {
    border-color: var(--main);
}

button.primary {
    background: var(--main);
    border-color: var(--main);
    color: var(--lit-button-txt);
    font-weight: 600
}

button.primary:hover {
    filter: brightness(1.08)
}

.preset {
    font-size: calc(var(--scale) * 10.5px);
    padding: 6px 6px
}

.preset:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--lit-button-txt);
}

.err {
    color: var(--danger);
    font-size: calc(var(--scale) * 11.5px);
    margin-top: 6px;
    min-height: 14px
}

.chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px
}

.chip {
    background: var(--line);
    border: 1px solid var(--line);
    padding: 10px
}

.chip .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.chip .nm {
    font-weight: 600;
    font-size: 13px
}

.chip .nm small {
    color: var(--muted);
    font-weight: 400;
    margin-left: 6px
}

.chip .del {
    background-color: var(--line);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    justify-content: center;
    padding: 0;
    border: 0;
}

.chip .del:hover {
    border-color: var(--danger);
    background-color: var(--danger);
}

.chip summary {
    cursor: pointer;
}

.ring {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px
}

#add {
    margin-top: 10px;
}

#transpose {
    align-items: center;
}

#transpose .transpose-label {
    margin: 0;
}

#transpose button {
    padding: 6px 8px;
    font-size: 11.5px;
}

.pc {
    font-size: calc(var(--scale) * 12px);
    text-align: center;
    padding: 6px 0;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    font-family: ui-monospace, monospace
}

.pc.on {
    background: var(--main);
    border-color: var(--main);
    color: var(--lit-button-txt);
}

.pc.root {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--lit-button-txt);
    text-decoration: underline 2px;
    text-underline-offset: 0.2em;
}

.spec {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: calc(var(--scale) * 10.5px);
    color: var(--muted)
}

.row .spec {
    margin-top: 0;
}

.spec .slider {
    flex: 1;
    accent-color: var(--main);
    cursor: pointer
}

.vslider {
    width: 100%;
    accent-color: var(--main);
    cursor: pointer;
    margin-bottom: 4px
}

.keypad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    /* hidden until the text box is focused; collapses so it leaves no gap */
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        max-height .22s ease,
        margin-top .22s ease,
        opacity .18s ease,
        transform .22s ease,
        visibility .22s;
}

/* reveal every keypad row while the input is focused (focus stays put when
   clicking the keys, thanks to mousedown/preventDefault) or while tabbing
   through the keys */
#prog:focus ~ .keypad,
.keypad:focus-within {
    max-height: 200px;
    margin-top: 6px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.keypad .kp-label {
    font-size: calc(var(--scale) * 10px);
    color: var(--muted);
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.keypad .kp-label:first-child {
    margin-left: 0
}

.keypad .kp {
    min-width: 30px;
    padding: 4px 8px;
    font-size: calc(var(--scale) * 15px);
    line-height: 1;
    font-family: ui-monospace, Menlo, Consolas, monospace
}

.spechint {
    font-size: calc(var(--scale) * 10px);
    color: var(--muted);
    opacity: .8;
    margin-top: 4px
}

.legend {
    font-size: calc(var(--scale) * 12px);
    line-height: 1.9;
    color: var(--muted);
    user-select: none;
}

.legend i {
    display: inline-block;
    width: 22px;
    height: 0;
    border-top: 3px solid;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 2px
}

.legend u {
    display: inline-block;
    width: 22px;
    height: 15px;
    border-left: 3px solid;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 0px;
}

.hint {
    font-size: calc(var(--scale) * 11px);
    color: var(--muted);
    line-height: 1.5;
    margin-top: 8px
}

.overlay-box {
    font-size: calc(var(--scale) * 12px);
    color: var(--muted);
    background: rgba(14, 17, 22, .7);
    padding: 0 4px;
    border: 1px solid var(--line);
    backdrop-filter: blur(4px);
}

#legends {
    position: absolute;
    left: var(--box-spacing);
    top: var(--box-spacing);
    width: 290px;
}

#analysis {
    position: absolute;
    right: var(--box-spacing);
    top: var(--box-spacing);
}

#analysis h3 {
    margin: 0 0 8px;
    font-size: calc(var(--scale) * 11px);
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted)
}

.anaSel {
    width: 100%;
    margin-bottom: 8px;
    background: var(--panel2);
    color: var(--txt);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 6px;
    font-size: calc(var(--scale) * 12.5px);
    cursor: pointer
}

.anaSel:focus {
    outline: none;
    border-color: var(--main)
}

#analysis .mv {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--line)
}

#analysis .mv:last-child {
    border-bottom: none
}

#analysis .mv b {
    font-weight: 600
}

/* colored note names in the connections box, matching the chosen note scheme.
   .note-chip.note (circle of fifths) gets its background from .note in
   musical-colors.css; the .fn-* variants use the harmonic-function colors. */
.note-chip {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    color: #fff;
}
.note-chip.fn-tonic { color: var(--tonic-color) }
.note-chip.fn-subdominant { color: var(--subdominant-color) }
.note-chip.fn-dominant { color: var(--dominant-color) }

/* the None / Axis / Fifths note-scheme selector */
.note-scheme {
    font-size: calc(var(--scale) * 12px);
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.9;
}
.note-scheme label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    cursor: pointer;
}
.note-scheme + .note-scheme {
    margin-top: 3px;
}

.tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: calc(var(--scale) * 10.5px);
    font-weight: 600
}

.tag.semi {
    background: rgba(90, 209, 122, .18);
    color: var(--semitone)
}

.tag.whole {
    background: rgba(255, 180, 84, .18);
    color: var(--whole)
}

.tag.fifth {
    background: rgba(199, 146, 234, .18);
    color: var(--p4p5)
}

.tag.hold {
    background: rgba(154, 167, 182, .18);
    color: var(--muted)
}

.tag.leap {
    background: rgba(78, 161, 255, .18);
    color: var(--main)
}

.toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(var(--scale) * 12px);
    color: var(--muted);
    margin-top: 8px
}

.toggle + .toggle {
    margin-top: 3px;
}

.diagonal-cross-stripes {
    background-image:
        repeating-linear-gradient(45deg,
            #999999,
            #999999 1px,
            transparent 1px,
            transparent 5px),
        repeating-linear-gradient(-45deg,
            #999999,
            #999999 1px,
            transparent 1px,
            transparent 5px);
}

#left-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100vh - var(--bottom-bar-height));
    background-color: var(--left-bar);
    width: 45px;
}

#transpose button {
    padding: 6px 4px;
}