/*
  Chromatic Bells layout.

  Two modes via .chromatic-inner.is-stacked vs .is-single:
    - stacked: two octaves stacked vertically, each piano-style. Symmetric & no scroll.
    - single: full 25-note range in one piano row; horizontal scroll for off-screen notes.
*/

.chromatic-stage {
  padding-inline: 0;
}

.chromatic-board {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 0 12px;
}

.chromatic-inner {
  margin-inline: auto;
}

.chromatic-inner {
  flex: 0 0 auto;
  display: grid;
  gap: clamp(6px, 1.6vh, 18px);
  align-content: end;
  padding-bottom: clamp(8px, 2vh, 20px);
  /* Each column is one natural-bell width. */
  --col: clamp(80px, 9vw, 130px);
}

/* Phone landscape: tighter cols so a full octave fits without scroll */
@media (orientation: landscape) and (max-height: 460px) {
  .chromatic-inner { --col: clamp(70px, 10vw, 100px); }
}

/* iPad landscape: bigger columns. */
@media (orientation: landscape) and (min-width: 900px) {
  .chromatic-inner { --col: clamp(96px, 9vw, 140px); }
}

/* ---- octave (used by both layouts) ---- */
.chromatic-octave {
  display: grid;
  grid-template-rows: auto auto;
  align-content: end;
  justify-content: center;
}

.chromatic-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--col);
  align-items: end;
  gap: 0;
}

.chromatic-row-naturals .chrom-bell { width: var(--col); }

/* Sharps row sits between natural columns: offset by half a column, slight overlap */
.chromatic-row-sharps {
  transform: translateX(calc(var(--col) / 2));
  margin-bottom: -8px;
  position: relative;
  z-index: 2;
}

.chromatic-row-sharps .chrom-bell,
.chromatic-row-sharps .chrom-spacer { width: var(--col); }

.chrom-sharp {
  /* Slightly smaller than naturals (~0.95:1) so they read as sharps
     without dominating, while staying easily tappable. */
  transform: scale(0.95) translateY(-4%);
  transform-origin: bottom center;
}

.chrom-bell img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- single-row layout: full 25-note piano, scroll if too wide ---- */
.chromatic-inner.is-single {
  grid-template-rows: auto;
}

/* ---- stacked layout: top octave + bottom octave ---- */
.chromatic-inner.is-stacked {
  grid-template-rows: 1fr 1fr;
}

/* In stacked mode we want bells smaller so both rows + their sharps fit comfortably. */
.chromatic-inner.is-stacked { --col: clamp(72px, 8vw, 116px); }

@media (orientation: landscape) and (max-height: 460px) {
  .chromatic-inner.is-stacked { --col: clamp(58px, 8vw, 84px); }
  .chromatic-inner.is-stacked { gap: 2px; }
  .chromatic-inner.is-stacked .chromatic-row-sharps { margin-bottom: -4px; }
}

@media (orientation: landscape) and (min-width: 900px) {
  .chromatic-inner.is-stacked { --col: clamp(82px, 8vw, 124px); }
}

/* ---- layout toggle (top-right) ---- */
.layout-toggle {
  position: fixed;
  z-index: 30;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #512d1b;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px rgba(14, 59, 93, 0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.layout-toggle:active { transform: translateY(1px); }

.layout-toggle-icon { display: grid; place-items: center; }
.layout-toggle-icon svg { width: 22px; height: 22px; }