/* EarToStage on phones: loaded after style.css. Everything for small screens lives here.
   --dock-h = the instrument dock's real height (measured by mobile.js), so pages always leave room for it. */

/* Computers: the ☰ menu isn't needed, its buttons sit in the top bar; phone-only items stay hidden. */
.menu-btn, .phone-only, .kb-nudge, .menu-label { display: none; }
.top-extras { display: contents; }
.kb-scroll { position: relative; }

/* Room for the iPhone notch and home bar when it runs full screen from the home screen. */
.top { padding-top: max(10px, env(safe-area-inset-top)); }
#keyboard-dock { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
body { padding-bottom: calc(var(--dock-h, 174px) + 16px); }
body.falling { padding-bottom: calc(var(--dock-h, 174px) + 16px + 40vh); }

@media (max-width: 640px) {
  /* ---- top bar: logo, level, daily ring, ☰ ---- */
  .top { padding-left: 12px; padding-right: 12px; padding-bottom: 8px; }
  .brand { font-size: 1.08rem; }
  .top-right { flex-wrap: nowrap; gap: 6px; }
  #level-chip { max-width: 130px; }
  .menu-btn { display: inline-block; font-size: 1.1rem; line-height: 1; padding: 6px 12px; color: var(--ink); }
  .top-extras {
    display: none; position: absolute; right: 10px; top: calc(100% + 6px); z-index: 20;
    flex-direction: column; align-items: stretch; gap: 8px; min-width: 230px; padding: 12px;
    background: var(--card-solid, var(--card-bg)); border: 1px solid var(--rule); border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  }
  .top-extras.open { display: flex; }
  .top-extras .chip { display: block; max-width: none; text-align: left; font-size: 0.95rem; padding: 10px 14px; color: var(--ink); text-decoration: none; }
  .top-extras .phone-only { display: block; }
  .top-extras .menu-label { display: inline; }
  .top-extras #midi-status { font-size: 0.8rem; color: var(--ink-soft); white-space: normal; border-style: dashed; }

  /* ---- pages: one column, thumb-sized buttons ---- */
  main { padding: 6px 14px 20px; }
  .btn { min-height: 44px; }
  .stepnav {
    position: sticky; bottom: var(--dock-h, 174px); z-index: 4; gap: 10px;
    margin: 0 -14px; padding: 18px 14px 10px; background: linear-gradient(transparent, var(--paper) 40%);
  }
  .stepnav .btn { flex: 1; }
  .stepnav .btn.primary { flex: 2; }
  .cards, .cards.two { grid-template-columns: 1fr; }
  svg { max-width: 100%; height: auto; }
  .card.step { overflow-x: auto; }

  /* ---- the piano: finger-sized keys, scrolls sideways (◀ ▶, or it slides to the notes by itself) ---- */
  #keyboard-dock[data-instrument="keys"] { display: flex; align-items: stretch; gap: 4px; padding-left: 4px; padding-right: 4px; }
  #keyboard-dock[data-instrument="keys"][hidden] { display: none; }
  .kb-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .kb-scroll::-webkit-scrollbar { display: none; }
  #keyboard-dock[data-instrument="keys"] #keyboard { min-width: calc(var(--whites, 15) * var(--key-w, 36px)); height: 128px; }
  #keyboard-dock.scrolls[data-instrument="keys"] .kb-nudge { display: block; }
  .kb-nudge {
    flex: 0 0 26px; border: 1px solid var(--rule); border-radius: 10px; background: transparent;
    color: var(--brand); font-size: 0.8rem; padding: 0; cursor: pointer;
  }
  .kb-nudge:disabled { opacity: 0.25; }
  .k.white span { font-size: 10px; }
  .k.black span { font-size: 7px; }
  .k.black span i { display: none; } /* phones: just the sharp name, the key is too narrow for both */
  /* drum pads: all 8 in one row, so every drum falls down its own lane in the play-alongs */
  .pads { grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .pads .pad { height: 96px; border-radius: 12px; padding: 0 1px; gap: 1px; }
  .pad-icon { font-size: 1.35rem; }
  .pad b { font-size: 0.58rem; line-height: 1.1; text-align: center; }
  .pad kbd { display: none; } /* no computer keys on a phone */
  .pad-staff { width: 40px; height: 28px; }

  /* guitar / bass neck: a touch taller frets so a finger hits the right string */
  .fret { height: 26px; }
  .fret-nums span { font-size: 9px; }

  /* falling notes leave room for the page on short phones */
  body.falling .stepnav { position: static; background: none; }
}

/* ---- the Install page (#/install) and home-screen card ---- */
.install-card { display: flex; gap: 14px; align-items: flex-start; }
.install-card img { border-radius: 14px; flex: 0 0 auto; }
.install-card b { display: block; margin-bottom: 2px; }
.install-card p { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.92rem; }
.install-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.install-steps { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 14px; }
.install-steps li { display: flex; gap: 12px; align-items: flex-start; }
.step-num { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--brand); color: #03140c; }
.install-steps small { color: var(--ink-soft); }
.ios-icon { width: 22px; height: 22px; vertical-align: -5px; color: #2f8cff; }
.install-done { text-align: center; }
.install-done .big { font-size: 3rem; }
.install-page .caption { color: var(--ink-soft); font-size: 0.85rem; word-break: break-all; }
.install-steps li > div { line-height: 1.45; }
.install-steps small { display: block; margin: 4px 0 0; padding: 0; font-size: 0.85rem; line-height: 1.4; }
.install-steps .ios-icon { display: inline-block; margin-left: 4px; }