/* The piano keyboard, the same on every page: the keys (home.js, keyboard.js, practice.js and piano-keys.js draw
   them), and the lacquered ebony case they sit in, as on the homepage. Loaded after main.css and page.css. */

/* The case: lacquered ebony like a piano's, the light catching its top edge */
.piano-case {
  position: relative;
  padding: 18px 16px 16px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--case-top) 0%, var(--case-mid) 34%, var(--case-bottom) 100%);
  box-shadow: 0 0 0 1px var(--case-edge), 0 2px 6px rgba(28, 25, 23, 0.16), 0 32px 64px -30px rgba(28, 25, 23, 0.6);
  color: var(--ebony-text);
}

.piano-case::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

/* a case around a keyboard on its own (the Keyboard and Practice pages): just the keys inside */
.piano-frame {
  margin-bottom: 18px;
  padding: 14px 12px 12px;
  border-radius: 18px;
}

.piano-frame .piano-scroll {
  margin: 0 -4px;
}

/* labels and option buttons on the case */
.piano-case .option-label {
  color: var(--ebony-muted);
}

.piano-case .seg {
  background: rgba(250, 250, 249, 0.06);
  border-color: rgba(250, 250, 249, 0.14);
}

.piano-case .seg button {
  color: var(--ebony-text);
}

.piano-case .seg button[aria-pressed="true"] {
  background: var(--ebony-text);
  color: var(--ebony);
}

.piano-case .seg button:focus-visible {
  outline-color: var(--ebony-text);
}

/* buttons on the case: outlined in a faint light line; the main one filled */
.case-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(250, 250, 249, 0.2);
  border-radius: 10px;
  background: transparent;
  color: var(--ebony-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.case-btn.is-primary {
  background: var(--ebony-text);
  border-color: var(--ebony-text);
  color: var(--ebony);
}

.case-btn[aria-pressed="true"] {
  color: var(--ebony-muted);
}

.case-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.case-btn:focus-visible {
  outline-color: var(--ebony-text);
}

@media (hover: hover) {
  .case-btn:hover:not(:disabled) {
    background: rgba(250, 250, 249, 0.08);
    border-color: rgba(250, 250, 249, 0.34);
  }

  .case-btn.is-primary:hover:not(:disabled) {
    background: #fff;
    border-color: #fff;
  }
}

/* the foot of a case: a short line on the left, the buttons on the right (as on the homepage) */
.case-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--ebony-muted);
}

/* the line takes what room is left and wraps, so the buttons stay on the right beside it; with less room than that,
   the buttons go under it, still on the right */
.case-foot > span:first-child:not(:only-child) {
  flex: 1 1 10rem;
}

.case-actions,
.case-foot > :last-child {
  margin-left: auto;
}

.case-actions {
  display: flex;
  gap: 6px;
}

/* Play (key pages, chords): plays what the keyboard shows, and turns to Stop while it plays */
.case-play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 12px;
}

.case-play svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.case-play .stop-icon,
.case-play.is-playing .play-icon {
  display: none;
}

.case-play.is-playing .stop-icon {
  display: block;
}

.case-play.is-playing {
  background: transparent;
  border-color: rgba(250, 250, 249, 0.34);
  color: var(--ebony-text);
}

/* the keys: white keys side by side, black keys placed on top by the page's script */
.piano-scroll {
  overflow-x: auto;
  margin: 0 -4px 18px;
  padding: 4px;
}

/* real piano proportions: a white key is about 5½ times as long as it is wide. The 15 white keys set the shape, so
   the keyboard keeps it at any width; it grows up to 880px wide and is centred beyond that. On a phone it keeps
   its 560px and scrolls sideways. */
.piano {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 560px;
  max-width: 880px;
  aspect-ratio: 15 / 5.5;
  margin-inline: auto;
  border-top: 4px solid var(--accent); /* the felt strip above the keys, as on a real piano */
  border-radius: 3px 3px 0 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.pkey {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 0 10px;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease, transform 0.08s ease;
}

.pkey.white {
  flex: 1;
  min-width: 0; /* every white key the same width, whatever is written on it */
  margin-right: -1px; /* neighbours share one border */
  background: var(--key-white);
  border: 1px solid rgba(18, 19, 22, 0.22);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  color: var(--ebony);
}

/* the last white key has no neighbour to share its border with, so it ends inside the keyboard (no 1px overflow) */
.pkey.white:last-child {
  margin-right: 0;
}

.pkey.black {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 60%;
  padding-bottom: 8px;
  background: var(--ebony);
  border-radius: 0 0 5px 5px;
  color: #fff;
}

.pkey:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* a scale, arpeggio or chord shown on the keys */
.pkey.white.is-shown {
  background: var(--key-lit);
}

.pkey.black.is-shown {
  background: var(--accent);
}

/* keys picked by a click or tap */
.pkey.white.is-selected,
.pkey.black.is-selected {
  background: var(--key-ink);
  color: #fff;
}

/* keys sounding right now */
.pkey.is-down {
  transform: translateY(2px);
  filter: brightness(0.92);
}

.pkey-finger {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.pkey-name {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.pkey-finger:empty,
.pkey-name:empty {
  display: none;
}

/* a keyboard that only shows (the key pages and the chord explorer, piano-keys.js): as long as its notes need, at
   the homepage's proportions. On a phone each white key keeps at least 20px and the keyboard scrolls sideways. The
   finger numbers on the lit keys are in felt red on the white keys, as the note names are on the homepage. */
.piano-static {
  min-width: calc(var(--whites) * 20px);
  max-width: none;
  aspect-ratio: var(--whites) / 5.4;
}

.piano-static .pkey {
  cursor: default;
}

.piano-static .pkey.white.is-shown {
  color: var(--key-ink);
}

.piano-static .pkey.white .pkey-name {
  font-size: 0.66rem;
  color: var(--key-muted);
}

/* a lit key's note name under its finger number, in the key's own colour */
.piano-static .pkey.white.is-shown .pkey-name {
  color: var(--key-ink);
}

.piano-static .pkey.black .pkey-name {
  font-size: 0.62rem;
}

/* a keyboard too narrow for names on the black keys (a phone, two octaves) keeps just their finger numbers */
.piano-fit {
  container-type: inline-size;
}

@container (max-width: 400px) {
  .piano-static .pkey.black .pkey-name {
    display: none;
  }
}

/* while playing: the key sounding now is pressed down in felt red, as its note is in the sheet music (key pages). The
   black keys of the scale go back to black meanwhile, so only the key sounding is red. */
.piano-static .pkey.is-sounding {
  transform: translateY(2px);
}

.piano-static .pkey.white.is-sounding,
.piano-static .pkey.black.is-sounding {
  background: var(--accent);
  color: #fff;
}

.piano-static .pkey.white.is-sounding .pkey-name {
  color: rgba(255, 255, 255, 0.8);
}

.score-playing .piano-static .pkey.black.is-shown:not(.is-sounding) {
  background: var(--ebony);
}

/* Desktop */
@media (min-width: 1024px) {
  .pkey-finger {
    font-size: 1.1rem;
  }
}