/* ============================================================================
 * assets/css/strumming-mobile.css — MOBILE player/practice presentation for
 * the Strumming route (#route-strumming).  Lane 5 (Strumming Module build).
 *
 * HARD INVARIANT (ZERO desktop impact): every rule is scoped under
 * `html.chrome-mobile-on #route-strumming`.  The flag is toggled ONLY by
 * shared/chrome-mobile.js at the PHONE-SHELL boundary — the canonical "md"
 * tier, 768px, per the CANONICAL BREAKPOINT LADDER comment in
 * fretly-tokens.css.  We deliberately ship NO `@media (max-width: 768px)`
 * twin of these rules: a narrow desktop window must NOT lose its editing
 * chrome, so the class flag is the single gate (belt-and-braces via media
 * query was considered and rejected — see lane brief).  With the flag absent
 * this file matches nothing.
 *
 * Doctrine (owner decision): EDITING stays desktop for launch; the phone is a
 * first-class PLAYER / PRACTICE surface.  So: header + transport + preview
 * canvas stay prominent; the editing surfaces (toolbar config wall, stroke /
 * dynamics / finger radio bars, export + save actions, appearance disclosure,
 * fingerstyle pluck grid) are hidden — presentation only, no pointer-events
 * kill, no JS edits (mirrors assets/css/mobile/editors.css M5 doctrine).
 * This file SUPERSEDES editors.css §5 visually (same overflow-x guard on the
 * preview card is re-stated compatibly, never contradicted).
 *
 * Companion JS: assets/js/suite/strum-mobile.js adds `strum-m-on` to
 * #strumming-container while the flag is on (extra-state hook only — nothing
 * below REQUIRES it; pure-CSS degradation is complete without JS).
 * Prefix for new mobile-only classes: .strum-m-  ·  storage keys: fretly-m-*.
 * ========================================================================= */

/* ══════════════════════════════════════════════════════════════════════════
   1. HIDE THE EDITING SURFACES (player-first)
   - .strum-ed-toolbar        whole config wall (Name/Time/Grid/Swing/Mode/Bars)
                              — includes .strum-ed-toolbar--extras in the
                              disclosure body.  Hidden wholesale (see report:
                              chose "hide the whole toolbar" branch of brief).
   - .strum-ed-radios         stroke / dynamics / finger bars inside the
                              workstrip (the transport in the same strip stays).
   - .strum-ed-workstrip-divider  the 1px divider that separated radios from
                              transport — meaningless once radios are gone.
   - .strum-ed-actions        export + "Save to library" buttons (read-only).
   - .strum-ed-disclose-h/-body   "Appearance & extras" disclosure.
   - .strum-ed-stylepop       style-settings panel (its ⚙ trigger is hidden).
   - .strum-ed-pluck-wrap     fingerstyle edit grid (pure editing surface).
   - .strum-ed-empty-hint     canvas empty-state coaching ("pick a stroke,
                              click a beat", kbd keys) — refers to hidden
                              editing chrome, misleading on a phone.
   ══════════════════════════════════════════════════════════════════════════ */
html.chrome-mobile-on #route-strumming .strum-ed-toolbar,
html.chrome-mobile-on #route-strumming .strum-ed-radios,
html.chrome-mobile-on #route-strumming .strum-ed-workstrip-divider,
html.chrome-mobile-on #route-strumming .strum-ed-actions,
html.chrome-mobile-on #route-strumming .strum-ed-disclose-h,
html.chrome-mobile-on #route-strumming .strum-ed-disclose-body,
html.chrome-mobile-on #route-strumming .strum-ed-stylepop,
html.chrome-mobile-on #route-strumming .strum-ed-pluck-wrap,
html.chrome-mobile-on #route-strumming .strum-ed-empty-hint {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. STICKY THUMB TRANSPORT — the workstrip becomes a bottom play bar.
   DOM order check (strum-editor.js _build): .strum-ed children are
   head → toolbar → disclosure → WORKSTRIP → preview-card → pluck → actions
   → lib.  The workstrip sits ABOVE the canvas in DOM, so `position:sticky;
   bottom:0` on it would never engage (its flow position is near the top).
   .strum-ed is a flex COLUMN (strumming.css), so we reorder with `order`:
   everything else keeps order:0 and the workstrip goes visually last
   (order:90), where sticky-bottom pins it to the viewport while the route
   scrolls.  Offset clears the fixed mobile tab bar (--fly-tabbar-h,
   3.7143rem = 52px, assets/css/mobile/nav.css) + the home-indicator inset.
   z-index 40: above the canvas/cards, well under the tab bar (1180),
   scrim (1190) and drawers (1200).
   ══════════════════════════════════════════════════════════════════════════ */
html.chrome-mobile-on #route-strumming .strum-ed-workstrip {
  order: 90;
  position: sticky;
  position: -webkit-sticky;
  bottom: calc(var(--fly-tabbar-h, 3.7143rem) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-top: 1px solid var(--line, #322e2a);
  border-radius: 10px;                    /* detached from the canvas: restore full radius */
  margin-bottom: 0;                       /* cancel desktop's negative attach-to-canvas margin */
  padding: 10px 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
  justify-content: center;
}

/* Transport row inside the strip: fill it, spread controls comfortably. */
html.chrome-mobile-on #route-strumming .strum-ed-transport {
  flex: 1 1 auto;
  justify-content: center;
  gap: 12px;
}

/* Thumb-friendly targets: every transport control ≥44px tall (Apple HIG /
   house 44px floor); the play button is the hero (~52px pill). */
html.chrome-mobile-on #route-strumming .strum-ed-tp-btn {
  min-height: 44px;
  min-width: 52px;
  font-size: 16px;
  padding: 8px 14px;
}
html.chrome-mobile-on #route-strumming .strum-ed-tp-play {
  min-height: 52px;
  min-width: 72px;
  font-size: 20px;
  border-radius: 999px;                   /* pill */
  background: var(--accent, #e8874a);
  border-color: var(--accent, #e8874a);
  color: #1a1208;
}
html.chrome-mobile-on #route-strumming .strum-ed-tp-play:disabled {
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
}
/* 16px input font avoids the iOS focus-zoom (same trick as
   fretly-chrome-mobile.css drawer search). */
html.chrome-mobile-on #route-strumming .strum-ed-tp-bpm {
  min-height: 44px;
  width: 72px;
  font-size: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. CANVAS — full-width horizontal-scroll player surface.
   Re-states (compatibly) the editors.css §5 overflow guard, then upgrades:
   momentum scroll, x-proximity snap, a roomier touch scroll area, and
   `touch-action: pan-x` so slot taps don't fight the horizontal pan.
   ══════════════════════════════════════════════════════════════════════════ */
html.chrome-mobile-on #route-strumming .strum-ed-preview-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
  border-radius: 10px;                    /* detached from the workstrip: restore full radius */
  padding: 20px 14px 24px;                /* larger touch scroll area */
  overscroll-behavior-x: contain;
}
html.chrome-mobile-on #route-strumming .strum-ed-preview {
  min-height: 84px;
  touch-action: pan-x;
}
html.chrome-mobile-on #route-strumming .strum-ed-preview svg {
  scroll-snap-align: start;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. LIBRARY — single-column cards, comfortable tap targets.
   Styled DEFENSIVELY for BOTH the current .strum-ed-lib list and the new
   .strum-lib component another lane is landing (unknown inner DOM → generous
   structural selectors, nothing that breaks if a class is absent).
   ══════════════════════════════════════════════════════════════════════════ */
html.chrome-mobile-on #route-strumming .strum-ed-lib,
html.chrome-mobile-on #route-strumming .strum-lib {
  width: 100%;
}
html.chrome-mobile-on #route-strumming .strum-ed-lib-list,
html.chrome-mobile-on #route-strumming .strum-lib-list,
html.chrome-mobile-on #route-strumming .strum-lib-grid {
  display: flex;
  flex-direction: column;                 /* single column of cards */
  gap: 8px;
}
html.chrome-mobile-on #route-strumming .strum-ed-lib-item,
html.chrome-mobile-on #route-strumming .strum-lib-item,
html.chrome-mobile-on #route-strumming .strum-lib-card {
  width: 100%;
  min-height: 48px;
}
html.chrome-mobile-on #route-strumming .strum-ed-lib-name,
html.chrome-mobile-on #route-strumming .strum-lib-item button,
html.chrome-mobile-on #route-strumming .strum-lib-card button {
  min-height: 44px;
  font-size: 14px;
}
html.chrome-mobile-on #route-strumming .strum-ed-lib-del {
  min-width: 44px;
  min-height: 44px;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. PRACTICE PANEL (.strum-pr-*, built by another lane) — full width, big
   tap pad.  Defensive: only sizes/targets, no layout assumptions.
   ══════════════════════════════════════════════════════════════════════════ */
html.chrome-mobile-on #route-strumming .strum-pr-panel {
  width: 100%;
  max-width: 100%;
}
html.chrome-mobile-on #route-strumming .strum-pr-panel button {
  min-height: 44px;
}
html.chrome-mobile-on #route-strumming .strum-pr-pad,
html.chrome-mobile-on #route-strumming .strum-pr-panel .strum-pr-tap {
  min-height: 64px;                       /* big tap pad */
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   6. CHORD LANE (.strum-cl-*, built by another lane) — one horizontal
   scroll row of chips, 44px min touch height.  Defensive selectors.
   ══════════════════════════════════════════════════════════════════════════ */
html.chrome-mobile-on #route-strumming .strum-cl-lane,
html.chrome-mobile-on #route-strumming .strum-cl-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;                    /* room for the scroll indicator */
}
html.chrome-mobile-on #route-strumming .strum-cl-chip {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. strum-m-on EXTRA STATE (set by assets/js/suite/strum-mobile.js).
   Belt-and-braces only — everything above works flagged on CSS alone.  With
   JS confirmed live we ease the strip in so the reorder doesn't pop.
   ══════════════════════════════════════════════════════════════════════════ */
html.chrome-mobile-on #route-strumming #strumming-container.strum-m-on .strum-ed-workstrip {
  animation: strum-m-rise 0.18s ease-out;
}
@keyframes strum-m-rise {
  from { transform: translateY(8px); opacity: 0.6; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  /* Motion opt-out (no width query here — see header: the md/768px tier is
     enforced by the html.chrome-mobile-on flag, never by a media twin). */
  html.chrome-mobile-on #route-strumming #strumming-container.strum-m-on .strum-ed-workstrip {
    animation: none;
  }
}