/* ============================================================
   MOBILE / NARROW-SCREEN CLEANUP — song view (song/view.html.twig)

   Load this AFTER chartpress.css, unified-song-display.css and
   song-view.css (added last in the `stylesheets` block) so these
   overrides win the cascade.

   Problem: on phones the chart sits inside three stacked, separately
   "framed" boxes — the white .song-display card, the grey bordered
   .cp-stage canvas/mat, and the shadowed .cp-page "paper sheet"
   (which also has a fixed 11in print-page height with
   overflow:hidden). That reads as several nested windows and can
   crowd/clip content instead of just flowing down the screen.

   Fix: flatten the chrome into one continuous surface and let each
   .cp-page size itself to its actual content instead of a fixed
   print-page height. The existing on-screen auto-fit-to-width
   scaling (--cp-disp, set live by chartpress-view.js so chord/lyric
   monospace alignment never wraps) is untouched here — only
   decorative box-model properties (background/border/shadow/height)
   change. Print output is unaffected: printing uses its own cloned
   #cp-print subtree and print.css, not this on-screen media query.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- outer card: stop it looking like a separate panel ---- */
  .song-display {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  /* ---- toolbar: same controls, minus the boxed-panel look ---- */
  .cp-toolbar {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--cp-line, #e6e3db);
    border-radius: 0;
    margin: 0 0 8px;
  }

  /* ---- canvas/mat: stop it looking like a separate framed window ---- */
  .cp-stage {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 4px 28px;
  }

  /* ---- the "paper sheet": size it to its content and drop the
     print-page shadow/clipping so multiple pages read as one
     continuous flow instead of stacked boxes ---- */
  .cp-page {
    height: auto !important;
    overflow: visible !important;
    box-shadow: none;
    border-radius: 0;
    margin: 0 0 4px;
  }
  .cp-page + .cp-page {
    margin-top: 20px;
    padding-top: 20px !important;
    border-top: 1px solid var(--cp-line, #e6e3db);
  }
  .cp-page-content {
    height: auto !important;
    overflow: visible !important;
  }
  .cp-col {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ---- ChartPress toolbar as a tidy control grid on phones ----------- */
@media (max-width: 768px) {
  .cp-toolbar { gap: 8px !important; padding: 8px 4px 10px !important; align-items: stretch; }
  .cp-toolbar > * { flex: 1 1 auto; min-width: 0; }
  .cp-toolbar .cp-spacer { display: none; }
  .cp-toolbar .cp-step { flex: 0 0 auto; justify-content: center; }
  .cp-toolbar .cp-ctl {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 11px; color: #667085; text-transform: uppercase; letter-spacing: .02em;
  }
  .cp-toolbar .cp-ctl .cp-select { width: 100%; min-height: 40px; border-radius: 8px; }
  .cp-toolbar .cp-ctl > b { font-size: 16px; color: #1f2430; line-height: 40px; }
  .cp-toolbar .cp-btn { min-height: 40px; border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
  .cp-toolbar .cp-btn.is-primary { flex: 1 1 100%; }
  /* the on-canvas fullscreen button is easier to hit at 44px */
  .cp-fs-btn { width: 44px !important; height: 44px !important; opacity: .85; }
}