/* Mini piano (owner: quiz). Tokens from site/styles/tokens.css only, no hard-coded colour. Used by the
   lesson player's piano exercises and by the embeddable widget (mini-piano-widget.js). */

.mini-piano { position: relative; height: 168px; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mini-piano[data-keys="3"], .mini-piano[data-keys="4"], .mini-piano[data-keys="5"] { max-width: 360px; margin: 0 auto; }
.mini-piano__whites { display: flex; height: 100%; border: 2px solid var(--key-black); border-radius: var(--radius); overflow: hidden; background: var(--key-black); gap: 2px; }

.mkey { border: 0; padding: 0; font: inherit; cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
.mkey[data-pc="0"] { --key-pc: var(--pc-0); } .mkey[data-pc="1"] { --key-pc: var(--pc-1); } .mkey[data-pc="2"] { --key-pc: var(--pc-2); }
.mkey[data-pc="3"] { --key-pc: var(--pc-3); } .mkey[data-pc="4"] { --key-pc: var(--pc-4); } .mkey[data-pc="5"] { --key-pc: var(--pc-5); }
.mkey[data-pc="6"] { --key-pc: var(--pc-6); } .mkey[data-pc="7"] { --key-pc: var(--pc-7); } .mkey[data-pc="8"] { --key-pc: var(--pc-8); }
.mkey[data-pc="9"] { --key-pc: var(--pc-9); } .mkey[data-pc="10"] { --key-pc: var(--pc-10); } .mkey[data-pc="11"] { --key-pc: var(--pc-11); }

.mkey--white { flex: 1 1 0; min-width: 0; background: var(--key-white); border-radius: 0 0 var(--radius-s) var(--radius-s); position: relative; }
.mkey--black { position: absolute; top: 2px; height: 58%; background: var(--key-black); border-radius: 0 0 8px 8px; z-index: 1; border: 2px solid var(--key-black); }
.mkey span { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.mkey b { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--key-white-ink); }
.mkey i { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-ink); background: var(--brand); border-radius: 99px; padding: 1px 6px; }
.mkey kbd { font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; background: var(--surface-2); }
.mkey--black kbd { color: var(--line); border-color: var(--muted); background: transparent; }
@media (hover: none) { .mkey kbd { display: none; } }

/* guided states: target keys are outlined in their pitch-class colour, lit keys flash it while the sound plays */
.mkey--white.is-target { box-shadow: inset 0 0 0 4px var(--key-pc); }
.mkey--black.is-target { box-shadow: 0 0 0 3px var(--key-pc); }
.mkey.is-marked.mkey--white { background: var(--key-white-soft); }
.mkey.is-hint { animation: mkey-hint 1s ease-in-out infinite; box-shadow: inset 0 0 0 4px var(--accent); }
.mkey--white.is-lit, .mkey--white.is-on { background: color-mix(in srgb, var(--key-pc) 45%, var(--key-white)); }
.mkey--black.is-lit, .mkey--black.is-on { background: var(--key-pc); }
.mkey--white:active:not(:disabled) { background: color-mix(in srgb, var(--key-pc) 30%, var(--key-white)); }
.mkey:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 2; }
.mkey:disabled { cursor: default; }
@keyframes mkey-hint { 50% { box-shadow: inset 0 0 0 7px var(--accent); } }

@media (max-width: 380px) { .mini-piano { height: 150px; } .mkey b { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .mkey { transition: none; } .mkey.is-hint { animation: none; } }