/* ============================================================================
 * fretly-chrome-mobile.css — additive MOBILE layer for the shared FretlyPanel
 * chrome (assets/css/fretly-chrome.css + shared/fretly-panel.js + fretly-tree.js).
 *
 * ZERO-RISK BY DESIGN: every rule is scoped under `html.chrome-mobile-on`.
 * That class is toggled ONLY by shared/chrome-mobile.js, and only when the
 * viewport is <=768px (or an explicit preview/CMS flag is set). So loading
 * this stylesheet has NO effect on desktop rendering — the selectors simply
 * never match — and it cannot regress the desktop browser launch.
 *
 * On mobile it turns each FretlyPanel into an off-canvas DRAWER (left =
 * Library/nav, right = Inspector) opened over a scrim, reusing the exact
 * panel/tree DOM the desktop chrome renders. No JS-precision drag, no
 * hover-only affordances.
 * ========================================================================= */

/* ---- scrim / backdrop ---------------------------------------------------- */
.chrome-mobile-on .fly-chrome-scrim{
  position:fixed; inset:0; z-index:1190;
  background:rgba(0,0,0,.46);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.chrome-mobile-on .fly-chrome-scrim.is-open{ opacity:1; pointer-events:auto; }

/* ---- panel -> off-canvas drawer (OPT-IN ONLY) ---------------------------
 * Scoped to `.fly-panel--drawer` — NOT every `.fly-panel`. The app's real
 * side panels (scale-list, collection-list = plain `.fly-panel` managed by
 * the page's own responsive layout) must NOT be hijacked into a triggerless
 * off-canvas drawer. Only panels the mobile shell explicitly opts in (the dev
 * demo; future coordinated SCP integration) get the drawer treatment. */
.chrome-mobile-on .fly-panel--drawer{
  position:fixed; top:0; bottom:0; left:0;
  width:min(86vw,360px); max-width:94vw;
  z-index:1200;
  background:var(--surface,#fff);
  border:0; border-right:1px solid var(--border,#e6e1d8);
  border-radius:0;
  box-shadow:0 0 44px rgba(0,0,0,.42);
  transform:translateX(-103%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.chrome-mobile-on .fly-panel--drawer.fly-panel--right{
  left:auto; right:0;
  border-right:0; border-left:1px solid var(--border,#e6e1d8);
  transform:translateX(103%);
}
.chrome-mobile-on .fly-panel--drawer.is-drawer-open{ transform:none; }

/* body scrolls inside the drawer; header/search stay pinned (drawer only) */
.chrome-mobile-on .fly-panel--drawer .fly-panel__body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.chrome-mobile-on .fly-panel--drawer .fly-panel__header{ position:sticky; top:0; min-height:54px; }
.chrome-mobile-on .fly-panel--drawer .fly-panel__btn{ min-width:44px; min-height:44px; }
.chrome-mobile-on .fly-panel--drawer .fly-panel__search input{ height:42px; font-size:16px; } /* 16px avoids iOS focus-zoom */
.chrome-mobile-on .fly-panel--drawer .fly-tree__row{ min-height:46px; }

/* ---- body scroll-lock while a drawer is open ---------------------------- */
.chrome-mobile-on.has-open-drawer,
.chrome-mobile-on.has-open-drawer body{ overflow:hidden; }

/* ---- hosts must not reserve side width on mobile (panel is out of flow) -
 * Pages mounting a panel should give its host the .fly-panel-host class so
 * the fixed drawer doesn't leave a dead gutter. (The dev demo also collapses
 * its own .demo-left/.demo-right.) */
.chrome-mobile-on .fly-panel-host{ width:0 !important; flex:0 0 0 !important; }

/* ---- mobile PRIMARY-NAV: hamburger + nav drawer (mobile-nav.js) ----------
 * Flag-gated: mobile-nav.js only builds these when the `m` flag is set, so
 * production is untouched by default. All rules stay under chrome-mobile-on. */
.fly-nav-ham{ display:none; }
.chrome-mobile-on .fly-nav-ham{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; background:transparent; color:inherit;
  cursor:pointer; flex:0 0 auto;
}
.chrome-mobile-on .fly-nav-ham svg{ width:24px; height:24px; }
/* hide the cramped inline strip; the drawer replaces it */
.chrome-mobile-on .navbar-nav{ display:none !important; }

.chrome-mobile-on .fly-nav-drawer{
  position:fixed; top:0; bottom:0; left:0;
  width:min(82vw,330px); max-width:94vw; z-index:1200;
  background:var(--surface,#fff); border-right:1px solid var(--border,#e6e1d8);
  box-shadow:0 0 44px rgba(0,0,0,.42);
  transform:translateX(-103%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.chrome-mobile-on .fly-nav-drawer.is-drawer-open{ transform:none; }
.chrome-mobile-on .fly-nav-drawer .fly-nav-head{
  display:flex; align-items:center; min-height:54px; padding:0 6px 0 14px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface);
}
.chrome-mobile-on .fly-nav-drawer .fly-nav-brand{ font-weight:800; font-size:18px; }
.chrome-mobile-on .fly-nav-drawer .fly-nav-close{
  margin-left:auto; width:44px; height:44px; border:0; background:transparent;
  color:inherit; font-size:22px; line-height:1; cursor:pointer;
}
.chrome-mobile-on .fly-nav-drawer .fly-nav-list{ list-style:none; margin:0; padding:8px; }
.chrome-mobile-on .fly-nav-drawer .fly-nav-link{
  display:flex; align-items:center; min-height:48px; padding:0 12px; border-radius:10px;
  color:var(--text-1); text-decoration:none; font-size:16px; font-weight:600;
}
.chrome-mobile-on .fly-nav-drawer .fly-nav-link.is-active{
  background:var(--accent-soft,rgba(232,135,74,.16)); color:var(--accent,#e8874a);
}
.chrome-mobile-on .fly-nav-drawer .fly-nav-sub{ list-style:none; margin:2px 0 8px; padding:0; }
.chrome-mobile-on .fly-nav-drawer .fly-nav-sublink{
  display:flex; align-items:center; min-height:42px; padding:0 12px 0 26px; border-radius:8px;
  color:var(--text-2,#666); text-decoration:none; font-size:14.5px;
}
.chrome-mobile-on .fly-nav-drawer .fly-nav-grouplabel{
  font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3,#999);
  padding:14px 12px 4px;
}
/* "More" surface: account/utility links cloned from the navbar-end menu. */
.chrome-mobile-on .fly-nav-drawer .fly-nav-link--danger{ color:var(--danger,#c0392b); }

/* "Quick actions" strip — the utility controls (notifications, metronome,
   export, tier-sim, theme) relocated off the phone top bar by mobile-nav.js.
   The REAL nodes are moved here, so they keep their own app button styling +
   handlers; this only lays them out as a tidy wrapped row and gives each a 44px
   touch target. */
.chrome-mobile-on .fly-nav-drawer .fly-nav-util{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--border,#e6e1d8);
}
.chrome-mobile-on .fly-nav-drawer .fly-nav-util .btn-icon,
.chrome-mobile-on .fly-nav-drawer .fly-nav-util .cc-notif-bell,
.chrome-mobile-on .fly-nav-drawer .fly-nav-util .metro-nav-icon-btn,
.chrome-mobile-on .fly-nav-drawer .fly-nav-util .metro-nav-bpm-btn{
  width:auto; min-width:44px; height:44px;
}
.chrome-mobile-on .fly-nav-drawer .fly-nav-util .btn-icon svg,
.chrome-mobile-on .fly-nav-drawer .fly-nav-util .cc-notif-bell svg{ width:20px; height:20px; }

/* ---- CONTROL BAR -> bottom-sheet ----------------------------------------
 * The scale/chord control bar already collapses below ~1100px into a `≡`
 * button that opens `.scp-overflow-popover` (built by page.js
 * _toggleControlsPopover). On mobile we present that SAME popover as a
 * thumb-friendly bottom-sheet — pure CSS, no DOM/JS change, so every control
 * keeps its handlers and keeps driving the app. */
.chrome-mobile-on .scp-overflow-popover{
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  width:100% !important; max-width:100% !important; min-width:0 !important;
  margin:0 !important;
  border-radius:18px 18px 0 0 !important;
  max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 -10px 44px rgba(0,0,0,.45) !important;
  z-index:1200 !important;
  padding-top:18px !important;
}
/* drag-handle affordance at the top of the sheet */
.chrome-mobile-on .scp-overflow-popover::before{
  content:""; position:sticky; top:0; z-index:1;
  display:block; width:42px; height:5px; margin:-8px auto 12px;
  border-radius:3px; background:var(--border,#cfc7ba);
}
/* roomier touch targets inside the sheet */
.chrome-mobile-on .scp-overflow-popover .scp-ctrl-toggle,
.chrome-mobile-on .scp-overflow-popover .scp-ctrl-cell,
.chrome-mobile-on .scp-overflow-popover .scp-overflow-nav-toggle{ min-height:48px; }