/* Piano keyboard (piano-keyboard.js). Geometry is in percent of the
   board's width, so the board always fills its container; label sizes
   follow the white-key width through container query units. Scale notes
   are green (the tonic deeper), sounding notes sky blue, and the context
   keys beyond the played span are muted so the span reads first. Text is
   pure black on light faces and pure white on dark ones. */

.kb {
    --kb-key-width: calc(100cqi / var(--kb-white-count));
    container-type: inline-size;
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* The lane above the keys: the span bar, and microtone markers when the
   board has any */
.kb-lane {
    position: relative;
    height: 10px;
}

.kb.kb-has-markers .kb-lane {
    height: 34px;
}

.kb-span {
    position: absolute;
    bottom: 3px;
    height: 4px;
    border-radius: 2px;
    background: #4ade80;
}

.kb-keys {
    position: relative;
    height: clamp(112px, calc(var(--kb-key-width) * 4.2), 210px);
}

.kb-key {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 0 0 8px;
    border: 1px solid #000;
    font: inherit;
    line-height: 1;
    overflow: hidden;
    cursor: pointer;
}

.kb-white {
    z-index: 1;
    height: 100%;
    border-radius: 0 0 6px 6px;
    background: #fff;
    color: #000;
}

.kb-black {
    z-index: 2;
    height: 62%;
    padding-bottom: 6px;
    border-radius: 0 0 4px 4px;
    background: #111;
    color: #fff;
}

.kb-white.kb-member {
    background: #bbf7d0;
}

.kb-white.kb-tonic {
    background: #4ade80;
}

.kb-black.kb-member {
    background: #166534;
}

.kb-black.kb-tonic {
    background: #15803d;
}

.kb-white.kb-context {
    background: #c7cec9;
}

.kb-white.kb-context.kb-member {
    background: #9cc7ab;
}

.kb-white.kb-context.kb-tonic {
    background: #6fae86;
}

.kb-black.kb-context {
    background: #3d3d3d;
}

.kb-black.kb-context.kb-member {
    background: #2f5d43;
}

.kb-black.kb-context.kb-tonic {
    background: #3b7a53;
}

.kb-key.kb-sounding,
.kb-marker.kb-sounding {
    background: #38bdf8;
    color: #000;
}

.kb-key.kb-sounding {
    box-shadow: inset 0 -5px 0 #0369a1;
}

.kb-degree {
    font-size: clamp(11px, calc(var(--kb-key-width) * 0.4), 22px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.kb-name {
    font-size: clamp(9px, calc(var(--kb-key-width) * 0.27), 15px);
    font-weight: 700;
    white-space: nowrap;
}

.kb-black .kb-degree {
    font-size: clamp(9px, calc(var(--kb-key-width) * 0.3), 17px);
}

.kb-black .kb-name {
    font-size: clamp(8px, calc(var(--kb-key-width) * 0.22), 13px);
}

/* Black keys outside the scale stay unlabeled until they sound */
.kb-black:not(.kb-member):not(.kb-sounding) .kb-name {
    visibility: hidden;
}

/* Too narrow for a black key's name (piano-keyboard.js sets kb-narrow) */
.kb.kb-narrow .kb-black .kb-name {
    display: none;
}

/* Microtone markers: a pill in the lane, centered on its pitch, with a
   tick down to the key tops */
.kb-marker {
    position: absolute;
    bottom: 9px;
    z-index: 3;
    min-width: clamp(10px, calc(var(--kb-key-width) * 0.5), 26px);
    height: 18px;
    padding: 0 3px;
    transform: translateX(-50%);
    border: 1px solid #000;
    border-radius: 9px;
    background: #fff;
    color: #000;
    font: inherit;
    line-height: 16px;
    cursor: pointer;
}

.kb-marker::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 9px;
    margin-left: -1px;
    background: #fff;
}

.kb-marker.kb-member {
    background: #bbf7d0;
}

.kb-marker.kb-context {
    background: #c7cec9;
}

.kb-marker.kb-context.kb-member {
    background: #9cc7ab;
}

.kb-marker.kb-sounding::after {
    background: #38bdf8;
}

.kb-marker .kb-degree {
    font-size: 11px;
}

.kb:not(.kb-marker-labels) .kb-marker .kb-degree {
    display: none;
}

@media (hover: hover) {
    .kb-key:hover,
    .kb-marker:hover {
        outline: 2px solid #38bdf8;
        outline-offset: -3px;
    }
}