/* ════════════════════════════════════════════════════════════════════════ embed-mode.css — chrome-stripped page for use inside an iframe. Activated server-side by ?embed=1 (see app.php — adds `embed-mode` to ). Used by chart-v2's Inspect overlay so the user can preview a scale's fretboard (or a chord's arpeggio) inside the chart without the distraction of the full page chrome. Design rule: hide ALL chrome by default; the embedded page should render only the primary visual (the fretboard) and let the host provide its own controls. Any toolbar control the user might still want exposed must be re-exposed by the host (e.g. chart-v2's Inspect header). ════════════════════════════════════════════════════════════════════ */ body.embed-mode { padding: 0 !important; margin: 0 !important; background: var(--surface, #fff) !important; } /* Top nav, footer, banners --------------------------------------------- */ body.embed-mode .navbar, body.embed-mode .footer, body.embed-mode .footer-wrapper, body.embed-mode footer, body.embed-mode #view-as-banner, body.embed-mode .past-due-banner, body.embed-mode .sim-banner, body.embed-mode .consent-banner, body.embed-mode #consent-bar, body.embed-mode .admin-sidebar, body.embed-mode .save-wrap, body.embed-mode #save-wrap, body.embed-mode .nav-dropdown, body.embed-mode .help-fab { display: none !important; } /* App shell + routes — collapse padding, no scroll bars on the wrapper -- */ body.embed-mode .app-shell { padding: 0 !important; margin: 0 !important; display: block !important; } body.embed-mode .route-section { padding: var(--space-xs) var(--space-sm) !important; margin: 0 !important; } /* Scales: hide all auxiliary panels + headers + toolbar. Keep only the boards area visible. */ body.embed-mode .scales-v2-header, body.embed-mode #scalesToolbar, body.embed-mode #scaleFormulaPanel, body.embed-mode #scalePianoCircleRow, body.embed-mode #sc-fingering-area, body.embed-mode #scaleInfoPanel, body.embed-mode #subScalesPanel { display: none !important; } body.embed-mode #route-scales .boards-area { padding: 0 !important; margin: 0 !important; } body.embed-mode #route-scales .boards-grid { padding: 0 !important; margin: 0 !important; gap: 0 !important; } /* Chords: same idea — hide chrome, show only the board(s). */ body.embed-mode .chords-v2-header, body.embed-mode #chordsToolbar, body.embed-mode #ch-arpeggio-area, body.embed-mode #chordInfoPanel, body.embed-mode #subChordsPanel { display: none !important; } body.embed-mode #route-chords .boards-area { padding: 0 !important; margin: 0 !important; } /* When chord page is in arpeggio view, the arpeggio area IS the primary content — re-show it explicitly. */ body.embed-mode.embed-show-arpeggio #ch-arpeggio-area { display: block !important; }