/* Shared two-octave piano keyboard widget, used by the scale finder and chord finder.
   The .sf-piano / .cf-piano wrappers stay per-tool; the key shapes (.pk-*) are identical
   and live here once. Link this stylesheet alongside the page CSS on any tool that renders
   a .pk-whites / .pk-blacks keyboard. */
.pk-whites {
    display: flex;
    height: 100%;
}

.pk-white {
    flex: 1;
    border: 1px solid var(--border-strong);
    border-radius: 0 0 5px 5px;
    background: var(--surface);
}

.pk-white + .pk-white {
    border-left: none;
}

.pk-blacks {
    position: absolute;
    inset: 0 0 auto 0;
    height: 62%;
}

.pk-black {
    position: absolute;
    top: 0;
    width: calc((100% / 14) * 0.62);
    height: 100%;
    transform: translateX(-50%);
    background: var(--border-strong);
    border: 1px solid var(--text);
    border-radius: 0 0 4px 4px;
}

.pk-white.is-on {
    background: var(--accent-weak);
}

.pk-white.is-root,
.pk-black.is-root {
    background: var(--accent);
}

.pk-black.is-on {
    background: var(--accent-strong);
}