/* fretly-mobile scp layer — ALL rules must be scoped under html.chrome-mobile-on (set by shared/mobile-nav.js at <=768px or ?m flag). Desktop (>768px, no flag) must be pixel-identical with this file present. */

/* ============================================================================
 * MOB-A3 — scale / chord page shell at phone width.
 *
 * Every selector is prefixed `html.chrome-mobile-on` so it is INERT unless the
 * mobile flag is on AND the viewport is <=768px. Desktop (>768px, no flag) is
 * byte-for-byte unchanged: the selectors simply never match.
 *
 * Tokens per docs/claude/ui-design-tokens.md (no fixed px for type/space/
 * radius). Raw px is used only for touch-target minimums (44) and iOS
 * focus-zoom-proof input sizes (16), matching the fretly-chrome-mobile.css
 * precedent — those are platform hard-numbers, not themeable spacing.
 * ========================================================================= */

/* ============================================================================
 * 1. CONTROL BAR  →  single horizontally-scrollable compact row
 * ========================================================================= */

/* The desktop shell HIDES the docked control bar at <=1100px and swaps in the
 * `.scp-app-ham` (≡) overflow popover. At phone width we instead reveal the
 * bar itself as ONE horizontal scroll-row: every group (SCALES / KEY & DISPLAY
 * / FINGERINGS / VIEW / GHOST NOTES / LAB / ADVANCED / COLLECTION, and the
 * longer chord set) stays visible and tappable — nothing functional is
 * dropped. The bar keeps its existing sticky position (top = app-header
 * height, z-index 11 — below modals 9998 / popovers 10050). */
html.chrome-mobile-on .scp-ctrl-shell{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:0;
  scrollbar-width:none;                 /* Firefox */
}
html.chrome-mobile-on .scp-ctrl-shell::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* Bar now holds everything → the redundant '≡' overflow button hides. */
html.chrome-mobile-on .scp-app-ham{ display:none !important; }

/* Advanced + Lab modes DOM-move the docked cells into the Explorer overflow
 * popover via their own controllers — leave that flow intact (bar hidden,
 * hamburger shown), so those modes behave exactly as they do today. */
html.chrome-mobile-on .spg-root--advanced .scp-ctrl-shell,
html.chrome-mobile-on .spg-root--lab .scp-ctrl-shell{ display:none !important; }
html.chrome-mobile-on .spg-root--advanced .scp-app-ham,
html.chrome-mobile-on .spg-root--lab .scp-app-ham{ display:inline-flex !important; }

/* Inner action grid: lay its cells inline (no wrap) so the WHOLE bar is one
 * scroll track instead of stacking into tall rows. `overflow:hidden` on the
 * desktop grid would clip the row — release it (the shell owns the scroll). */
html.chrome-mobile-on .scp-ctrl-shell > .scp-ctrl-grid{
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
  width:auto;
  min-width:0;
  row-gap:0;
}
html.chrome-mobile-on .scp-ctrl-shell > .scp-ctrl-grid--secondary{
  flex:0 0 auto !important;
  border-top:0 !important;
}

/* Each group snaps to the left edge on swipe. Edge cells size to content
 * (drop the desktop 150/185px column locks) so the bar starts compact. */
html.chrome-mobile-on .scp-ctrl-cell,
html.chrome-mobile-on .scp-ctrl-cell--edge{
  scroll-snap-align:start;
  flex:0 0 auto !important;
}
html.chrome-mobile-on .scp-ctrl-cell--edge:first-child,
html.chrome-mobile-on .scp-ctrl-cell--edge:last-child{
  border-left:0;
  border-top:0;
  border-bottom:0;
  border-right:1px solid var(--border,#e0ddd5);
}

/* Group labels preserved but tightened. */
html.chrome-mobile-on .scp-ctrl-label{
  font-size:10px;
  letter-spacing:.05em;
  margin-bottom:2px;
  white-space:nowrap;
}

/* 44px touch targets for every interactive control in the bar. */
html.chrome-mobile-on .scp-ctrl-shell .scp-ctrl-toggle,
html.chrome-mobile-on .scp-ctrl-shell .scp-btn-group-btn,
html.chrome-mobile-on .scp-ctrl-shell .spg-fpop-trigger,
html.chrome-mobile-on .scp-ctrl-shell .cpg-pick-trigger,
html.chrome-mobile-on .scp-ctrl-shell .scp-kd-pick,
html.chrome-mobile-on .scp-ctrl-shell .scp-switch,
html.chrome-mobile-on .scp-ctrl-shell .spg-list-cols-btn{
  min-height:44px;
}
html.chrome-mobile-on .scp-ctrl-shell .scp-ctrl-toggle,
html.chrome-mobile-on .scp-ctrl-shell .spg-fpop-trigger,
html.chrome-mobile-on .scp-ctrl-shell .cpg-pick-trigger,
html.chrome-mobile-on .scp-ctrl-shell .scp-kd-pick,
html.chrome-mobile-on .scp-ctrl-shell .spg-list-cols-btn{
  min-width:44px;
}
/* the edge toggle carries a hard 28px height on desktop — bump for touch. */
html.chrome-mobile-on .scp-ctrl-cell--edge .scp-ctrl-toggle{ height:44px !important; }

/* ============================================================================
 * 2. SIDE PANES  →  full-height slide-in drawers over a scrim
 *
 * The desktop shell already turns both panes into fixed off-canvas drawers
 * (translateX) with a `.scp-drawer-scrim` at <=1300px, driven by
 * shared/scp-drawer.js + the `.scp-main--list-open` / `--coll-list-open`
 * classes. The existing pane-toggle buttons (and the 1 / 2 keys) already open
 * them. This section adds the phone-only pieces that layer is missing:
 * body scroll-lock, nav-drawer visual language, and roomier touch targets.
 * Back-button dismissal is wired in scp-sheets.js via overlay-history.
 * ========================================================================= */

/* Body scroll-lock while a drawer is open (CSS-first via :has). */
html.chrome-mobile-on:has(.scp-main--list-open),
html.chrome-mobile-on:has(.scp-main--coll-list-open){ overflow:hidden; }
html.chrome-mobile-on:has(.scp-main--list-open) body,
html.chrome-mobile-on:has(.scp-main--coll-list-open) body{ overflow:hidden; }

/* Match the .fly-chrome-scrim / .fly-nav-drawer language (darker scrim, a
 * heavier lift shadow when open) without touching their classes. */
html.chrome-mobile-on .scp-main--list-open > .scp-drawer-scrim,
html.chrome-mobile-on .scp-main--coll-list-open > .scp-drawer-scrim{
  background:rgba(0,0,0,.46) !important;
}
html.chrome-mobile-on .scp-main--list-open .scp-shell-list:not(.scp-shell-list--coll),
html.chrome-mobile-on .scp-main--coll-list-open .scp-shell-list--coll{
  box-shadow:0 0 44px rgba(0,0,0,.42) !important;
}

/* Roomier drawer chrome: 44px targets + 16px search input (dodges iOS
 * focus-zoom), matching the shared panel-drawer treatment. */
html.chrome-mobile-on .scp-shell-list .fly-panel__search input,
html.chrome-mobile-on .scp-shell-list .scp-list-search-input{
  font-size:16px !important;
  height:42px;
}
html.chrome-mobile-on .scp-shell-list .fly-tree__row,
html.chrome-mobile-on .scp-shell-list .scp-list-row{ min-height:46px; }
html.chrome-mobile-on .scp-shell-list .fly-panel__btn,
html.chrome-mobile-on .scp-shell-list .scp-list-titlebar button,
html.chrome-mobile-on .scp-shell-list .scp-list-bulk-toggle{ min-width:44px; min-height:44px; }

/* ============================================================================
 * 3. CONTENT STACK  →  single column, no horizontal overflow
 * ========================================================================= */

/* Properties / Modes / Scale-circle three-up row → full-width single column.
 * The desktop 320px min-widths overflow a 390px viewport once page padding is
 * subtracted; drop the floor to 0 so each panel takes the full row. */
html.chrome-mobile-on .spg-panel-row{ gap:var(--space-md); }
html.chrome-mobile-on .spg-panel-row .spg-panel-host--inline,
html.chrome-mobile-on .spg-panel-row--top > .spg-panel-host--inline:nth-child(1),
html.chrome-mobile-on .spg-panel-row--top > .spg-panel-host--inline:nth-child(2),
html.chrome-mobile-on .spg-panel-row--top > .spg-panel-host--inline:nth-child(3){
  flex:1 1 100% !important;
  min-width:0 !important;
  width:100%;
}
html.chrome-mobile-on .scp-shell-content{ max-width:100%; min-width:0; }
html.chrome-mobile-on .spg-panel{ min-width:0; max-width:100%; }

/* Chord diagrams grid: cap columns so voicing cards stay legible on a phone. */
html.chrome-mobile-on .cpg-diagrams-grid .dg-flow,
html.chrome-mobile-on .cpg-diagrams-grid .dg-group-cards{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
html.chrome-mobile-on .cpg-diagrams-grid .dg-group-block{ grid-column:1 / -1 !important; }

/* dg-card edit toolbar (admin authoring affordance) is revealed on desktop by
 * `:hover` / `:focus-visible` — NEITHER fires on a touch tap, so on a phone the
 * button stayed at opacity:0 and was unreachable.  Reveal it on the TAPPED
 * (active) card and on `:focus-within`, so a tap surfaces it.  Admin-only
 * element (created only for admins), so this is inert for members.  The card's
 * `overflow:hidden` clips nothing here — the button sits at top:6/right:6,
 * inside the card box. */
html.chrome-mobile-on .cpg-diagrams-grid .dg-card--active .dg-card-edit-btn,
html.chrome-mobile-on .cpg-diagrams-grid .dg-card:focus-within .dg-card-edit-btn{
  opacity:1;
}

/* Breadcrumb: scroll horizontally rather than wrap into a tall stack. */
html.chrome-mobile-on .scp-crumb{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  min-width:0;
}
html.chrome-mobile-on .scp-crumb::-webkit-scrollbar{ display:none; }
html.chrome-mobile-on .scp-crumb-seg{ white-space:nowrap; }

/* Header title row tightens (smaller gutters; the tuning/subtitle line is
 * free to wrap under the title). */
html.chrome-mobile-on .scp-app-header{
  padding:var(--space-xs) var(--space-md);
  gap:var(--space-xs) var(--space-sm);
}

/* ============================================================================
 * 4. POPOVERS (gear settings, key picker) — clamp within the 390px viewport
 *
 * Both are shared `.fly-popover` (FretlyPopover) dialogs positioned by JS via
 * an inline `left`/`top` anchored to their trigger. The gear "Scale page
 * settings" dialog is wide enough that, anchored near the header's right edge,
 * it spilled off the right of a 390px viewport (verified via shots). Re-anchor
 * every FretlyPopover to a horizontally-centred, width-clamped sheet on phones
 * so nothing overflows. `!important` beats the JS-set inline `left`/`transform`.
 * ========================================================================= */
html.chrome-mobile-on .fly-popover{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(360px,92vw) !important;
  max-width:92vw !important;
  min-width:0 !important;
}
html.chrome-mobile-on .fretly-popover{ max-width:92vw !important; min-width:0 !important; }

/* ============================================================================
 * 5. TABLATURE STRIP header — wrap instead of forcing horizontal page overflow
 *
 * `.spg-tab-card-head` (shared scale+chord Tablature card) is a nowrap flex
 * row: [▸ TABLATURE] on the left, [rhythm buttons · columns · zoom] tools on
 * the right.  On a phone the tools group is ~420px wide, so with `nowrap` it
 * overran the 390px viewport and STRETCHED THE WHOLE PAGE's layout viewport to
 * ~557px (every full-width element then over-widened + the side drawer pushed
 * off-canvas).  Let the head wrap and drop the tools group to its own row (the
 * same pattern chord-page.css already uses for `.cpg-diagrams-header` at
 * ≤1100px — that one wraps cleanly on phones already).  Desktop (>768px, no
 * flag) never matches, so the single-row look there is untouched.
 * ========================================================================= */
html.chrome-mobile-on .spg-tab-card-head{
  flex-wrap:wrap;
  row-gap:var(--space-xs,6px);
}
html.chrome-mobile-on .spg-tab-card-toggle{ min-width:0; }
html.chrome-mobile-on .spg-tab-card-tools{
  flex:1 1 100%;
  min-width:0;
  flex-wrap:wrap;
  row-gap:var(--space-xs,6px);
  justify-content:flex-start;
}