/* =============================================================================
   piano.css
   ========================================================================== */

:root {
  --pk-sticky-bg: #ffffff;       /* page colour behind the pinned keyboard */
  --pk-white-bg: #fbfaf7;
  --pk-white-bg-pressed: #e4e0d6;
  --pk-white-border: #c9c4b8;
  --pk-black-bg: #1d1d1f;
  --pk-black-bg-pressed: #3a3a3e;
  --pk-black-border: #000;
  --pk-highlight: #5e35b1;
  --pk-highlight-black: #7c4dff;
  --pk-focus: #3d7be8;
  --pk-label: rgba(0, 0, 0, 0.5);
  --pk-frame: #2b2b2e;
  --pk-mute-bg: #3a3a3e;
  --pk-mute-fg: #f2f2f2;
  --pk-muted-bg: #c62828;        /* Material Red 800 — sound is off */
  --pk-muted-fg: #ffffff;

  --pk-white-min: 24px;
  --pk-height: 180px;
  --pk-black-h: 62%;
  --pk-black-ratio: 0.6;
  --pk-radius: 0 0 6px 6px;
}

.pk {
  width: 100%;
  max-width: 100%;
  background: var(--pk-frame);
  border-radius: 10px;
  padding: 10px 8px 8px;
  box-sizing: border-box;
}

.pk-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pk-board {
  position: relative;
  display: flex;
  height: var(--pk-height);
  min-width: calc(var(--pk-white-count) * var(--pk-white-min));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.pk-key {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 60ms linear, transform 60ms linear;
}

.pk-key:focus-visible {
  outline: 3px solid var(--pk-focus);
  outline-offset: -3px;
  z-index: 3;
}

.pk-white {
  position: relative;
  flex: 1 1 0;  /* equal widths; --pk-white-count is set per-board, not on :root */
  min-width: var(--pk-white-min);
  height: 100%;
  background: var(--pk-oct, var(--pk-white-bg));  /* --pk-oct set per key from colors.js */
  border: 1px solid var(--pk-white-border);
  border-top: none;
  border-radius: var(--pk-radius);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pk-black {
  position: absolute;
  top: 0;
  left: calc(var(--pk-pos) * (100% / var(--pk-white-count)));
  width: calc((100% / var(--pk-white-count)) * var(--pk-black-ratio));
  height: var(--pk-black-h);
  transform: translateX(-50%);
  background: var(--pk-black-bg);
  border: 1px solid var(--pk-black-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 -6px 0 var(--pk-oct-accent, rgba(255, 255, 255, 0.08));  /* octave stripe */
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pk-label {
  pointer-events: none;
  font-size: 11px;
  line-height: 1;
  padding-bottom: 8px;
  color: var(--pk-label);
}

.pk-black .pk-label {
  color: #bbb;
  font-size: 9px;
}

/* pressed: darken whatever the octave tint is */
.pk-white.is-pressed { filter: brightness(0.86); }
.pk-black.is-pressed { background: var(--pk-black-bg-pressed); }

/* highlight: deep violet — distinct from every light octave tint */
.pk-white.is-highlight { background: var(--pk-highlight); }
.pk-black.is-highlight { background: var(--pk-highlight-black); }
.pk-key.is-highlight .pk-label { color: #fff; }

/* chord tones: darker variation of the octave color (--pk-chord set per key) */
.pk-key.is-chord { background: var(--pk-chord, var(--pk-highlight)); }
.pk-black.is-chord { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.pk-key.is-chord[data-chord-dark] .pk-label { color: #fff; }

/* last played key: octave shade by scale position (root darkest) — wins over chord */
.pk-key.is-played { background: var(--pk-played, var(--pk-highlight)); }
.pk-black.is-played { box-shadow: inset 0 0 0 2px var(--pk-oct-accent, #fff); }
.pk-key.is-played[data-played-dark] .pk-label { color: #fff; }
.pk-key.is-played:not([data-played-dark]) .pk-label { color: rgba(0, 0, 0, 0.7); }

/* --- chord marks: spelled note name on the key + degree badge below it ---- */
.pk-key.is-marked .pk-label { display: none; }

.pk-mark-label {
  pointer-events: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 8px;
  color: rgba(0, 0, 0, 0.75);
}
.pk-key[data-chord-dark] .pk-mark-label { color: #fff; }

/* single-tone highlight: key filled with its chord-role shade */
.pk-key.is-tone { background: var(--pk-tone); }
.pk-white.is-tone .pk-mark-label { color: var(--pk-mark-fg, #fff); }

/* black keys: note name in a circle colored by chord role (root darkest → 7th lightest) */
.pk-black .pk-mark-label {
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  margin-bottom: 6px;
  padding: 0 3px;
  border-radius: 10px;
  background: var(--pk-mark-bg, #555);
  color: var(--pk-mark-fg, #fff);
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.pk-rail {
  position: relative;
  height: 34px;
  min-width: calc(var(--pk-white-count) * var(--pk-white-min));  /* stays aligned with .pk-board */
}

.pk-badge {
  position: absolute;
  top: 6px;
  left: calc(var(--pk-center) * (100% / var(--pk-white-count)));
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pk-badge-bg, #555);
  color: var(--pk-badge-fg, #fff);
  font-size: 11px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--pk-frame);
  pointer-events: none;
}

/* root: white ring to separate it visually */
.pk-badge.is-root { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--pk-frame); }

/* black keys stack their marks vertically at the bottom of the key */
.pk-black { flex-direction: column; justify-content: flex-end; align-items: center; }

/* black keys: degree circle on the key, above the note-name circle (root gets a white ring) */
.pk-key-badge {
  order: -1;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--pk-badge-bg, #555);
  color: var(--pk-badge-fg, #fff);
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.pk-key-badge.is-root { box-shadow: 0 0 0 2px #fff; }
.pk-black .pk-key-badge:last-child { margin-bottom: 8px; }

/* --- octave controls (compact mode only) --------------------------------- */
.pk-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pk-shift {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #555;
  border-radius: 8px;
  background: #3a3a3e;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pk-shift:disabled { opacity: 0.35; cursor: default; }
.pk-shift:focus-visible { outline: 3px solid var(--pk-focus); outline-offset: 2px; }

.pk-range {
  color: #ddd;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* --- top row: status indicator + mute toggle (upper right) ------------------- */
.pk-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 4px 6px;
}

.pk-status {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 20px;
  color: #f2f2f2;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-mute {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #555;
  border-radius: 22px;
  background: var(--pk-mute-bg);
  color: var(--pk-mute-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 80ms linear;
}
.pk-mute:hover { border-color: var(--pk-mute-fg); }
.pk-mute:focus-visible { outline: 3px solid var(--pk-focus); outline-offset: 2px; }
.pk-mute.is-muted { background: var(--pk-muted-bg); border-color: var(--pk-muted-bg); color: var(--pk-muted-fg); }

/* --- sticky keyboard (class added by piano.js) ------------------------------- */
.pk-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: var(--pk-sticky-top, 0);
  z-index: 1020;                       /* above page content; below Bootstrap modals (1050) */
  background: var(--pk-sticky-bg);     /* opaque, so content scrolls behind it */
}
/* when the keyboard itself is the pinned element, keep its dark frame */
.pk.pk-sticky { background: var(--pk-frame); }

/* =============================================================================
   BREAKPOINTS — keep at end of file
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --pk-white-min: 32px;
    --pk-height: 160px;
  }
}

/* SYNC POINT: must match opts.mobileQuery in www/js/piano.js */
@media (max-width: 768px) {
  :root {
    --pk-white-min: 0px;    /* compact mode fits width — no horizontal scroll */
    --pk-black-ratio: 0.64;
    --pk-height: 200px;
  }
  .pk { padding: 8px 4px 6px; border-radius: 8px; }
  .pk-compact .pk-scroll { overflow-x: hidden; }
}

@media (max-width: 430px) {
  :root {
    --pk-height: 180px;
  }
}