/* fretly-mobile content 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. */

/* ════════════════════════════════════════════════════════════════════
   Lane MOB-A4 — content routes at phone (home, help, account,
   shortcuts, theory, interval-stacker, suites browse grid).
   See _lane-logs/MOB-A4-CONTENT.md for before/after notes + AE numbers.
   ════════════════════════════════════════════════════════════════════ */

/* ── Global: free-tier upgrade banner must not collide with the fixed
   bottom tab bar (nav.css, z-index 1180). `.fg-free-banner` (feature-
   gate.css) is `position:fixed; bottom:0; z-index:9500`, so on a route
   with the tab bar present it renders ON TOP of the tab bar, blocking
   the bottom-nav tap targets for logged-in public/free users. Lift it
   to sit just above the bar instead. ──────────────────────────────── */
html.chrome-mobile-on .fg-free-banner {
  bottom: calc(var(--fly-tabbar-h, 3.7143rem) + env(safe-area-inset-bottom, 0px));
  z-index: 1170; /* below the tab bar (1180), above page content */
}

/* ── Theory page (#route-theory) — chromatic interval/notes/stack
   strips. Each strip is 12 `white-space:nowrap` cells (doctrine-
   preserved per docs/claude/ui-design-tokens.md — the chromatic table
   itself is NOT restructured here, out of scope for this lane). At
   phone width theory.css's own shrink-the-font ladder still crushes
   the cells to a couple of px each (illegible) before it stops
   shrinking, AND the notes row's extra flex wrapper
   (`.theory-notes-wrap` = scroll-btn + `.theory-notes-row` +
   scroll-btn) is missing `min-width:0`, so it refuses to shrink at all
   and pushes the page into horizontal overflow instead.
   Fix: give every strip a fixed, legible per-cell width and let the
   STRIP scroll horizontally within its own box — "make it scroll
   rather than overflow" per doctrine — instead of either crushing the
   text or overflowing the page. Column alignment between the three
   stacked strips is a known trade-off once one strip is scrolled
   independently of the others (see lane log). */
html.chrome-mobile-on .theory-notes-wrap,
html.chrome-mobile-on .theory-interval-row,
html.chrome-mobile-on .theory-notes-row,
html.chrome-mobile-on .theory-stack-cells {
  min-width: 0;
}
html.chrome-mobile-on .theory-interval-row,
html.chrome-mobile-on .theory-notes-row,
html.chrome-mobile-on .theory-stack-cells {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
html.chrome-mobile-on .theory-interval-row .theory-int-cell,
html.chrome-mobile-on .theory-notes-row .theory-note-cell,
html.chrome-mobile-on .theory-stack-cells .theory-stack-cell {
  flex: 0 0 auto;
  width: 2.5rem;         /* ~40px — legible chord/interval token, scrolls instead of crushing */
  font-size: 0.86rem !important;
  padding-top: 10px;
  padding-bottom: 10px;
}
html.chrome-mobile-on .theory-interval-row.naming-both .theory-int-cell,
html.chrome-mobile-on .theory-notes-row.naming-both .theory-note-cell {
  width: 2.9rem;         /* "C#/Db"-style dual spelling needs a touch more room */
  font-size: 0.78rem !important;
}

/* View toggles (Fretboard / Piano / Scale Circle) — wrap onto a second
   line instead of clipping the last switch off the right edge. */
html.chrome-mobile-on .theory-toggle-group {
  flex-wrap: wrap;
  row-gap: var(--space-xs, 6px);
}

/* ── Scale / Chord page header (.scp-app-header) ────────────────────
   At phone width the header wrapped into two ragged rows: the flex
   spacer pushed the gear (⚙) to the right edge of row 1, forcing the
   help (?) button to wrap onto a lonely second row (with odd overlap
   against the sticky control bar below). Collapse the whole band into
   ONE compact row: the title + tuning + view subtitle share the row and
   ellipsize if long (the view is still shown in full in the breadcrumb
   below), while the gear + ? sit inline at the right as a small paired
   cluster. Scoped under chrome-mobile-on; desktop is untouched. The scp
   lane owns mobile/scp.css — this override lives in MY content.css (loaded
   after scp.css) and only reflows this band. */
html.chrome-mobile-on .scp-app-header {
  flex-wrap: nowrap;
  align-items: center;
}
html.chrome-mobile-on .scp-app-title,
html.chrome-mobile-on .scp-app-subtitle,
html.chrome-mobile-on .scp-app-subtitle--btn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keep the scale/chord NAME fully readable — it holds its content width while
   the secondary tuning/view subtitle absorbs the entire squeeze and ellipsizes
   (the view is still shown in full in the breadcrumb row below). Scale/chord
   names are short enough that this never overflows the row at 390px. */
html.chrome-mobile-on .scp-app-title { flex: 0 0 auto; }
html.chrome-mobile-on .scp-app-subtitle,
html.chrome-mobile-on .scp-app-subtitle--btn { flex: 0 1 auto; }
html.chrome-mobile-on .scp-app-gear,
html.chrome-mobile-on .scp-app-help {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
}
html.chrome-mobile-on .scp-app-gear { margin-left: var(--space-xs, 6px); }

/* ── Suites browse route (#suites-container, ?route=suites) ─────────
   Hosts a FretlyOrganizer instance (assets/css/fretly-organizer.css,
   shared with Sheet Builder — an out-of-scope editor route, so every
   rule below is scoped to `#suites-container` specifically, never the
   bare `.fly-org-*` classes, to avoid touching that other surface. */

/* Folders sidebar + main list is a fixed 240px/1fr grid at every width
   — opening "Folders" on a phone squeezes the suite list into a ~110px
   sliver with clipped text. Stack sidebar above main instead. */
html.chrome-mobile-on #suites-container .fly-org-body {
  grid-template-columns: 1fr;
  gap: var(--space-md, 10px);
}
html.chrome-mobile-on #suites-container .fly-org-sidebar {
  max-height: 40vh;
}

/* Card grid: 240px min-column leaves a full phone-width column with
   ~100px of dead margin. Narrow the floor so 1-2 columns of suite
   cards actually fit ("suites card grid to 1-2 columns" per lane
   brief). Only applies while the JS Cols stepper is on "Auto" — a
   user-picked explicit column count still writes its own inline
   `grid-template-columns` and wins by DOM order/specificity. */
html.chrome-mobile-on #suites-container .fly-org-grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

/* List view chip rows are intentionally `flex-wrap:nowrap` ("chips
   never stack", fretly-organizer.css) so a suite with many chips
   (folders/tags/visibility pill) can clip past the row on a narrow
   phone. Let the row itself scroll instead of clipping. */
html.chrome-mobile-on #suites-container .fly-org-row .fly-org-chips {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Toolbar buttons/pickers sit at --ctl-h-md/-lg (30/36px) — under the
   44px touch-target floor. Bump just the Suites toolbar controls
   (scoped; the token itself is app-wide and other lanes own it).
   NOTE (MOB-C5 sweep, fixed): this used to read `2.75rem`, which computes
   to 38.5px here, NOT 44px — the app's root font-size is 14px
   (`site.css:107 html { font-size: calc(14px * var(--ui-scale,1)) }`),
   not the usual 16px `rem` assumption. Restated in px so the comment's
   stated 44px target is actually met. */
html.chrome-mobile-on #suites-container .fly-org-header button,
html.chrome-mobile-on #suites-container .fly-org-header .fly-org-sort-select,
html.chrome-mobile-on #suites-container .fly-org-header select {
  min-height: 44px;
}

/* ── Teaching route (#route-teaching, Custom Collections tab strip) ──
   MOB-C5 sweep: `.cc-tab` (site.css) measures 37px tall — under the 44px
   touch-target floor, same class of bug MOB-B1 fixed for `.stg-tab`/
   `.scadm-tab`. The strip is already `.cc-tabs { overflow-x:auto }`
   (genuinely scrollable, not a page-overflow bug — 4 tabs, ~446px content
   in a ~342px box), so only the touch-height needs bumping here. Scoped to
   the teaching route only (`.cc-tab` is shared with the student "My
   Teachers" surface, which has no tab strip today, so this is inert there
   either way). */
html.chrome-mobile-on #route-teaching .cc-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}