/*
 * Styles for the interactive song player (song-player.js).
 *
 * Scoped entirely under .piano so it can drop into any page. Colours fall back
 * to the site design tokens (--color-primary / --color-accent / ...) when they
 * are present, and to the same hex values when they are not.
 */

.piano {
  --piano-teal: var(--color-primary, #008080);
  --piano-coral: var(--color-accent, #ff6f61);
  --piano-navy: var(--color-heading, #003049);
  --piano-slate: var(--color-text, #2e2e2e);
  --piano-paper: var(--color-surface, #fffdf5);
  --piano-line: color-mix(in srgb, var(--piano-navy) 16%, transparent);

  background: var(--piano-paper);
  border: 2px solid color-mix(in srgb, var(--piano-teal) 35%, transparent);
  border-radius: 16px;
  padding: 1rem 1rem 1.1rem;
  margin: 1.5rem 0;
  color: var(--piano-slate);
  font-size: 0.9rem;

  /* The roll and keyboard are deliberately wider than the screen and scroll
     inside themselves. Without these, a flex or grid ancestor sizes itself to
     that content and the whole page scrolls sideways instead. */
  min-width: 0;
  max-width: 100%;
}

/* ---------- header ---------- */

.piano__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.piano__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.piano__title {
  font-weight: 700;
  color: var(--piano-navy);
  font-size: 1.05rem;
}

.piano__meta {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--piano-slate) 55%, transparent);
}

.piano__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
}

.piano__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--piano-slate) 80%, transparent);
}

.piano__swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  display: inline-block;
}

/* ---------- piano roll ---------- */

.piano__roll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--piano-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--piano-navy) 4%, var(--piano-paper));
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.piano__grid {
  position: relative;
  min-width: 100%;
}

/* Numbered measure strip: tap to start there, drag to set a loop range. */
.piano__ruler {
  position: relative;
  display: flex;
  min-width: 100%;
  height: 24px;
  border-bottom: 1px solid var(--piano-line);
  cursor: pointer;
  touch-action: none; /* the drag defines a loop, it does not pan */
  user-select: none;
  -webkit-user-select: none;
}

.piano__ruler-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-right: 1px solid var(--piano-line);
  font-size: 9px;
  font-weight: 700;
  color: color-mix(in srgb, var(--piano-navy) 45%, transparent);
  overflow: hidden;
}

.piano__ruler-bar:last-child {
  border-right: 0;
}

.piano__ruler-bar:hover {
  background: color-mix(in srgb, var(--piano-teal) 10%, transparent);
}

.piano__ruler-bar.in-region {
  color: var(--piano-navy);
}

.piano__ruler-bar.is-current {
  color: var(--piano-coral);
}

/* Draggable section selector sitting over the bar numbers.
   Hidden while the whole song is selected: spanning every bar it would just
   tint the strip, hiding the fact that it is a control at all — and on a song
   wide enough to scroll, its handles sit off-screen where nobody can reach
   them. Drag across bare ruler to create one. */
.piano__sel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  background: color-mix(in srgb, var(--piano-teal) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--piano-teal) 55%, transparent);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: grab;
  pointer-events: auto;
}

.piano.has-region .piano__sel {
  display: block;
}

.piano.is-dragging .piano__sel {
  cursor: grabbing;
}

.piano__sel-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  border-radius: 3px;
  background: var(--piano-teal);
  cursor: ew-resize;
  touch-action: none;
}

/* A wider target so the handle is grabbable on a touchscreen. Horizontal only —
   the scroller clips vertically, and clipped area cannot be tapped. */
.piano__sel-handle::after {
  content: "";
  position: absolute;
  inset: 0 -8px;
}

.piano__sel-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 8px;
  margin: -4px 0 0 -1px;
  border-left: 1px solid color-mix(in srgb, #fff 75%, transparent);
  border-right: 1px solid color-mix(in srgb, #fff 75%, transparent);
  box-sizing: content-box;
}

/* Inset rather than overhanging: a handle hanging past the selection edge gets
   clipped by the scroller at bar 1, and clipped pixels cannot be grabbed. */
.piano__sel-handle--start {
  left: 0;
}

.piano__sel-handle--end {
  right: 0;
}

/* Shaded band behind the notes showing the looping section. */
.piano__region {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  background: color-mix(in srgb, var(--piano-teal) 12%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--piano-teal) 65%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--piano-teal) 65%, transparent);
  pointer-events: none;
}

.piano.has-region .piano__region {
  display: block;
}

.piano__reset-tempo {
  min-width: 3.6rem;
}

.piano__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--piano-line);
}

/* Beat divisions inside a bar: lighter than the bar line, so the bar still
   reads as the stronger division of the two. */
.piano__beat {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--piano-line) 45%, transparent);
}

.piano__grid.hide-beats .piano__beat {
  display: none;
}

.piano__note {
  position: absolute;
  height: 13px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.08s ease, transform 0.08s ease;
}

/* Too narrow to hold its label — colour only, tooltip keeps the pitch. */
.piano__note.is-narrow > span {
  display: none;
}

.piano__note.playing {
  opacity: 1;
  transform: scaleY(1.18);
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px currentColor;
}

.piano__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--piano-coral);
  pointer-events: none;
}

/* ---------- keyboard ---------- */

.piano__keyboard {
  margin-top: 0.75rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.piano__keys {
  position: relative;
  display: flex;
  height: 108px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.piano__key {
  cursor: pointer;
  box-sizing: border-box;
}

.piano__key--white {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--piano-navy) 25%, transparent);
  border-radius: 0 0 5px 5px;
  margin-right: -1px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

.piano__key--white:first-child {
  border-top-left-radius: 4px;
}

.piano__key--black {
  position: absolute;
  top: 0;
  height: 62%;
  background: linear-gradient(180deg, #16323d 0%, #06222c 100%);
  border-radius: 0 0 4px 4px;
  z-index: 2;
}

.piano__key-label {
  font-size: 9px;
  font-weight: 600;
  color: color-mix(in srgb, var(--piano-navy) 45%, transparent);
  pointer-events: none;
}

.piano__key--white.lit {
  background: color-mix(in srgb, var(--piano-coral) 55%, #fff);
  border-color: var(--piano-coral);
}

.piano__key--white.lit .piano__key-label {
  color: #fff;
}

.piano__key--black.lit {
  background: var(--piano-coral);
}

/* ---------- controls ---------- */

.piano__controls {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.piano__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.piano__row-caption {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--piano-navy) 55%, transparent);
  min-width: 3.4rem;
}

.piano__step {
  cursor: pointer;
  background: transparent;
  min-width: 2.4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.piano__slider {
  accent-color: var(--piano-teal);
  width: 8rem;
  max-width: 34vw;
}

.piano__region-status {
  font-size: 0.78rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--piano-slate) 65%, transparent);
  margin-left: 0.2rem;
}

.piano.has-region .piano__region-status {
  color: var(--piano-teal);
}

/* The clear button is only meaningful once a range exists. */
.piano__region-clear {
  display: none;
}

.piano.has-region .piano__region-clear {
  display: inline-flex;
}

.piano__play {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  cursor: pointer;
  min-width: 6.5rem;
  justify-content: center;
}

.piano__play-icon {
  font-size: 0.8em;
  line-height: 1;
}

.piano__restart {
  cursor: pointer;
  background: transparent;
}

.piano__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--piano-slate) 80%, transparent);
  cursor: pointer;
}

.piano__toggle input {
  accent-color: var(--piano-teal);
  width: 1rem;
  height: 1rem;
}

.piano__tempo-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--piano-navy);
  min-width: 4.5rem;
}

.piano__hint,
.song-player__fallback {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--piano-slate) 55%, transparent);
}

.piano__error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-error, #b91c1c);
}

/* ---------- narrow screens ---------- */

@media (max-width: 480px) {
  .piano {
    padding: 0.85rem 0.75rem 1rem;
  }

  .piano__keys {
    height: 92px;
  }

  .piano__controls {
    gap: 0.5rem;
  }

  .piano__row-caption {
    min-width: 0;
    width: 100%;
    margin-bottom: -0.2rem;
  }

  .piano__slider {
    width: 6rem;
  }

  .piano__region-status {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .piano__note,
  .piano__note.playing {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------- *
 * Per-bar chord editor (teacher-only, templates/songs/player.html).
 * Kept here rather than in its own file: it is a handful of rules,
 * and the page already loads this stylesheet.
 * ---------------------------------------------------------------- */

.song-chords {
  --piano-teal: var(--color-primary, #008080);
  --piano-navy: var(--color-heading, #003049);
  --piano-slate: var(--color-text, #2e2e2e);

  margin-top: 1.75rem;
  padding: 1.2rem 1.2rem 1.3rem;
  background: var(--color-surface, #fffdf5);
  border: 2px solid color-mix(in srgb, var(--piano-teal) 35%, transparent);
  border-radius: 16px;
}

.song-chords__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--piano-navy);
}

.song-chords__lede {
  margin: 0.25rem 0 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--piano-slate) 70%, transparent);
  max-width: 42rem;
}

.song-chords__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem;
}

.song-chords__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--piano-navy) 18%, transparent);
  border-radius: 9px;
  background: #fff;
  cursor: text;
}

.song-chords__bar:focus-within {
  border-color: var(--piano-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--piano-teal) 20%, transparent);
}

.song-chords__num {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--piano-navy) 50%, transparent);
  min-width: 1.2rem;
  text-align: right;
}

.song-chords__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  border: 1px dashed currentColor;
  color: color-mix(in srgb, var(--piano-navy) 30%, transparent);
  flex: 0 0 auto;
}

.song-chords__bar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0.25rem 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--piano-navy);
  background: transparent;
}

.song-chords__bar input:focus {
  outline: none;
}

/* "No chord", per bar. Hidden while the bar is already empty — there is
   nothing to remove, and a row of dead buttons reads as broken. Visibility
   rather than display so the cells keep the same width either way and the
   grid does not twitch as chords are typed. */
.song-chords__clear {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  background: transparent;
  color: color-mix(in srgb, var(--piano-navy) 45%, transparent);
  cursor: pointer;
  visibility: hidden;
}

.song-chords__bar.has-chord .song-chords__clear {
  visibility: visible;
}

.song-chords__clear:hover,
.song-chords__clear:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #ff6f61) 18%, transparent);
  color: var(--color-accent, #ff6f61);
}

/* Keyboard users must be able to reach it even on an empty bar, or it is
   simply not there for them. */
.song-chords__clear:focus-visible {
  visibility: visible;
  outline: 2px solid var(--piano-teal);
  outline-offset: 1px;
}

/* The × as it appears in the instructions above the grid. */
.song-chords__key {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--piano-navy) 25%, transparent);
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
  vertical-align: -0.15em;
}

.song-chords__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.song-chords__actions button {
  cursor: pointer;
}

.song-chords__actions button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.song-chords__status {
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--piano-slate) 60%, transparent);
}

.song-chords__status.is-dirty { color: var(--color-accent, #ff6f61); }
.song-chords__status.is-ok { color: var(--piano-teal); }
.song-chords__status.is-error { color: var(--color-error, #b91c1c); }