/* ============================================================================
 * assets/css/mobile/board.css — MOBILE main-fretboard readability + pinch layer.
 * ============================================================================
 * Lane MOB-A2 (phone fretboard).  EVERY rule in this file is scoped under
 * `html.chrome-mobile-on` (set by shared/mobile-nav.js → chrome-mobile.js at
 * <=768px, or the `?m` flag).  With the class absent — the desktop default —
 * every selector below matches nothing, so the desktop render is byte-for-byte
 * identical.  Pairs with assets/js/mobile/board-touch.js, which injects the
 * `.mbrd-vp` scroll viewport + `.mbrd-tf` transform layer around the MAIN
 * board SVG on the scale + chord pages.  Mini/grid diagram cards are NOT in
 * scope and are never wrapped.
 *
 * Problem being solved: on a phone the main board SVG is `width:100%` of its
 * ~337px card, so 24 frets crush to ~14px each (baseline shot).  board-touch.js
 * moves the SVG into `.mbrd-tf` sized to a readable content width (>=40px/fret)
 * and makes `.mbrd-vp` a horizontal scroll viewport; pinch scales `.mbrd-tf`.
 * ========================================================================= */

/* The main board card no longer scrolls itself — the injected `.mbrd-vp`
   owns horizontal scroll.  Force it visible so a stale desktop
   `data-board-zoom` scroll rule (scale-collection-page.css) can't turn the
   card back into a nested scroll container on a phone. */
html.chrome-mobile-on .spg-area-card--browse,
html.chrome-mobile-on .scp-root[data-board-zoom="in"] .spg-area-card--browse {
  overflow: visible !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Redundant with pinch — hide the on-board "− 100% +" control on phones so
   there is ONE zoom model (pinch) and the parallel `data-board-zoom` machinery
   never engages.  Desktop keeps the control (class absent). */
html.chrome-mobile-on .spg-area-card--browse .spg-zoom {
  display: none !important;
}

/* Horizontal scroll viewport (the pan + pinch surface). */
html.chrome-mobile-on .mbrd-vp {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* pan-x lets a single finger pan the board horizontally and blocks the
     browser's native pinch-zoom (two-finger gesture is handled in JS);
     vertical drags fall through to the page scroll. */
  touch-action: pan-x;
  max-width: 100%;
  width: 100%;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--accent, #e8853c) transparent;
}
html.chrome-mobile-on .mbrd-vp::-webkit-scrollbar {
  height: 4px;
}
html.chrome-mobile-on .mbrd-vp::-webkit-scrollbar-thumb {
  background: var(--accent, #e8853c);
  border-radius: 4px;
}
html.chrome-mobile-on .mbrd-vp::-webkit-scrollbar-track {
  background: transparent;
}

/* Transform layer — pinch scale is applied here (origin top-left = the nut),
   its `width` is set by JS to the readable content width. */
html.chrome-mobile-on .mbrd-tf {
  transform-origin: 0 0;
  will-change: transform;
  /* let the SVG define the height; JS reads it back to size the viewport */
  display: block;
}

/* The board SVG always fills the transform layer at the readable width,
   regardless of the inline width/max-width the render engine sets per draw.
   height:auto keeps the engine's viewBox aspect ratio so fret numbers (drawn
   below the lowest string) are never clipped.  Generic `> svg` — the layer
   only ever contains a board SVG we moved in (spg-board-svg / cpg-board-svg /
   the collection's fly-scale-card-svg). */
html.chrome-mobile-on .mbrd-tf > svg {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Leaf-card main boards (collection cards/browse view): the board host keeps
   its padding but must not constrain the injected viewport; the leaf card's
   own `overflow:hidden` is fine because scrolling happens INSIDE .mbrd-vp. */
html.chrome-mobile-on .scp-leaf-card--cards .scp-leaf-board,
html.chrome-mobile-on .scp-leaf-card--browse .scp-leaf-board {
  min-width: 0;
  max-width: 100%;
}

/* Chord Map (overlay) view: each `.cpg-overlay-board` hosts one VoicingBoard
   that fit-renders all 24 frets into the card.  board-touch.js wraps it in a
   `.mbrd-vp` scroll canvas (same treatment as the browse boards) + centres the
   initial scroll on the used fret range.  The host must not constrain that
   viewport; scrolling happens INSIDE .mbrd-vp so the card's own overflow is
   fine.  The generic `.mbrd-tf > svg` rule above already fills the svg at the
   readable width (VoicingBoard's `cpg-board-svg spg-board-svg`). */
html.chrome-mobile-on .cpg-overlay-board {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}