/* ============================================================
   ChankArts Piano — Responsive
   Desktop → tablet → mobile → landscape mobile.
   ============================================================ */

/* Scroll buttons appear only when the keyboard actually overflows */
.kbd--scrollable .kbd__scroll { display: inline-flex; }

/* NOTE: --kw below is the *minimum* white-key width for each breakpoint.
   The JS layout pass (piano-keyboard.js → updateGeometry) only ever grows it,
   computed as viewport width ÷ 21 white keys, and writes it inline on
   #kbdKeys. The media values guarantee legible/tappable keys on small
   screens — where that forces overflow, the keyboard scrolls horizontally. */

/* --- Large desktop: roomier minimum keys --- */
@media (min-width: 1500px) {
  :root { --kw: 58px; }
}

@media (max-width: 1180px) {
  :root { --kw: 46px; }
}

/* --- Tablet / small laptop --- */
@media (max-width: 980px) {
  :root { --kw: 40px; --topbar-h: 48px; }

  .stage { padding: 10px 12px 12px; gap: 8px; }
  .ctl--slider { flex: 1 1 128px; min-width: 118px; max-width: 180px; }
  .transport__meta { font-size: 0.7rem; }
}

/* --- Small tablets / large phones (portrait) --- */
@media (max-width: 820px) {
  :root { --kw: 37px; }

  .topbar { padding: 0 12px; }
  .topbar__link { padding: 7px 9px; font-size: 0.78rem; }

  .toolbar { gap: 10px 12px; padding: 10px 11px; }
  .toolbar--perf {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 9px;
  }
  .toolbar--perf::-webkit-scrollbar { display: none; }
  .ctl--toggles { flex-wrap: nowrap; }

  .statusbar { gap: 10px; padding: 7px 10px; }
  .statusbar__rec { margin-left: 0; width: 100%; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 6px; }

  .kbd { min-height: 158px; padding: 8px 8px 10px; }
  .key__lab { font-size: 9px; }
  .key--b .key__lab { font-size: 8px; }
  .key__hint { font-size: 9px; top: 5px; }
}

/* --- Phones --- */
@media (max-width: 560px) {
  :root { --kw: 34px; --topbar-h: 46px; }

  .stage { padding: 8px 8px 10px; gap: 7px; }

  .topbar__name { display: none; }
  .topbar__sep { display: none; }
  .topbar__link--labs span { display: none; }
  .topbar__btn span { display: none; }
  .topbar__btn { padding: 8px; }
  .topbar__link { padding: 7px; }

  .toolbar { padding: 9px; gap: 9px 10px; }
  .ctl--select { min-width: 140px; flex: 1 1 140px; }
  .ctl--slider { flex: 1 1 116px; min-width: 106px; }
  .stepper__btn { width: 30px; height: 29px; }
  .stepper__value { min-width: 38px; font-size: 0.88rem; }

  .statusbar { font-size: 0.76rem; }
  .readout__v { font-size: 0.85rem; }
  .statusbar__edu { width: 100%; }
  .statusbar__edu .select { flex: 1; }

  .kbd { min-height: 146px; }

  .transport { gap: 6px; padding: 7px 8px; }
  .tbtn { padding: 7px 11px; font-size: 0.68rem; letter-spacing: 0.07em; }
  .transport__sep { display: none; }
  .transport__meta { display: none; }

  .panel { right: 8px; left: 8px; width: auto; }
}

@media (max-width: 380px) {
  .ctl--select { min-width: 120px; }
  .pill { padding: 6px 10px; font-size: 0.64rem; }
}

/* --- Landscape mobile: prioritise the keyboard --- */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --topbar-h: 42px; --kw: 40px; }

  .stage { padding: 6px 10px 8px; gap: 6px; }

  .topbar { height: var(--topbar-h); }
  .topbar__brand { font-size: 0.82rem; }
  .topbar__link span { display: none; }

  .toolbar { padding: 7px 10px; gap: 8px 12px; }
  .toolbar--perf { display: none; }
  .ctl__label { font-size: 0.58rem; }
  .ctl--slider { max-width: 150px; }

  .statusbar { padding: 5px 10px; }
  .statusbar__edu { display: none; }

  .kbd { min-height: 116px; }
  .key__lab { bottom: 4px; font-size: 8.5px; }
  .key--b .key__lab { font-size: 8px; bottom: 3px; }
  .key.is-scale::after { bottom: 18px; width: 5px; height: 5px; margin-left: -2.5px; }

  .transport { padding: 5px 8px; }
  .tbtn { min-height: 32px; padding: 6px 10px; }
}

/* Very short screens (e.g. split view): keep the keys playable */
@media (max-height: 400px) {
  .statusbar { display: none; }
  .kbd { min-height: 104px; }
}

/* --- Input modality: comfortable touch targets --- */
@media (pointer: coarse) {
  .stepper__btn { width: 40px; height: 36px; }
  .toggle { min-height: 42px; padding: 10px 17px; }
  .pill { min-height: 40px; padding: 9px 15px; }
  .tbtn { min-height: 42px; padding: 10px 15px; }
  .kbd__scroll { width: 40px; height: 62px; }
}

/* --- Keyboard users: visible focus everywhere --- */
@media (forced-colors: active) {
  .key, .tbtn, .pill, .toggle, .stepper__btn { border: 1px solid ButtonText; }
}