/* ========================================================================== Embed mode — reduce the app's top-bar to a discreet menu overlay when the app is loaded inside a Sistema Interactivo iframe (?embed=true). Activation: embed-mode.js sets data-embed="true" on during head parsing. All selectors below are gated by that attribute, so a normal app load (no query string) is unaffected. In nuzic-migrated apps (all 25 embed apps as of 2026-04), the volume button has already been relocated out of .top-bar by header.js (into .controls inline, or body-floating for scale apps). So the .top-bar only hosts ☰ +

+ an empty .sound-wrapper → we keep the hamburger, hide the rest, and collapse the bar to a zero-footprint overlay. ========================================================================== / / Suppress outer scroll at the document level. Some apps (App16, App28, App30, App32, App34, App35) don't set `overflow: hidden` on html/body themselves, so a slight content overflow would surface a scrollbar on the iframe. Scoped to embed mode so direct app loads are unaffected. / html[data-embed="true"], html[data-embed="true"] body { overflow: hidden; } / Collapse the top-bar to an absolute overlay — zero vertical footprint. pointer-events: none so clicks fall through to the content underneath; children re-enable events selectively below. / html[data-embed="true"] body .top-bar { position: absolute; top: 0; left: 0; right: 0; padding: 0; z-index: 100; pointer-events: none; background: transparent; } / Hamburger: the only interactive element we keep. Discreet at rest, full opacity on hover / when its
is open. / html[data-embed="true"] body .top-bar .menu { pointer-events: auto; opacity: 0.35; transition: opacity 0.2s ease; } html[data-embed="true"] body .top-bar .menu:hover, html[data-embed="true"] body .top-bar .menu[open] { opacity: 1; } / Hide the title (provided by the Sistema's lateral column) and the header's .sound-wrapper slot. In nuzic apps the slot is empty anyway; in non-nuzic apps (none embedded today) it would hide the speaker. / html[data-embed="true"] body .top-bar h1, html[data-embed="true"] body .top-bar .sound-wrapper { display: none; } / Main fills the iframe exactly. `height: 100vh` + `overflow: hidden` pins main to the viewport and suppresses any stray body scroll when an app's natural content slightly exceeds 100vh (e.g. App16, which doesn't set `html/body { overflow: hidden }` of its own). Apps that do want scroll for their grid/plano (App19, App20) keep it inside their own container — this rule only blocks the outer scroll. / html[data-embed="true"] body main { padding-top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; / Containing block per al `.sound-wrapper.nuzic-floating` que header.js mou aquí dins en embed. Així el botó es posiciona relatiu al `main` (i scrolleja amb ell quan `overflow-y: auto` està actiu en mode vertical). / position: relative; } / Quan el Sistema (parent) està en mode vertical i ens ho ha comunicat via postMessage (vegeu embed-mode.js), alliberem els overflow:hidden i height:100vh imposats sobre html/body/main. Així el body de l'app pot créixer fins a la seva alçada natural i `embed-mode.js` informa el parent perquè redimensioni l'iframe-frame en conseqüència. Sense això, l'iframe quedaria a mida fixa amb scroll intern + scroll exterior del Sistema (doble scroll desagradable). / html[data-embed="true"][data-system-vertical="true"], html[data-embed="true"][data-system-vertical="true"] body, html[data-embed="true"][data-system-vertical="true"] body main { overflow: visible; height: auto; min-height: auto; } / app10 (vertical soundline) and App18 (registro de octava) wrap their main content in `.timeline-wrapper` with a naturally short height (shorter than the iframe). Auto-margins center that block vertically in the flex-column main. Scoped to the apps that need it via body class so other apps with `.timeline-wrapper { flex: 1 }` (scale apps) keep their stretch behaviour. / html[data-embed="true"] body.app10 main .timeline-wrapper, html[data-embed="true"] body.app18 main .timeline-wrapper { margin-top: auto; margin-bottom: auto; } / app10 progressive left-shift at narrow iframe widths. The visual block (soundline + invisible note-highlight extending 80px right + overlay text wrapping left-aligned) feels right-of-center as the iframe narrows. `padding-right` on main reduces the cross-axis centering area from the right, pulling the centered wrapper leftward by half the padding. At iframe ≥ 350px width: 0px shift. As width shrinks: shift grows linearly up to 80px max (= 40px effective shift of soundline center). User's suggestion: "moure la soundline a l'esquerra a mesura que es fa petita la pantalla". / html[data-embed="true"] body.app10 main { padding-right: clamp(0px, calc(350px - 100vw), 80px); } / App16 (módulo temporal lineal) — the measure-header + timeline pair is naturally short (roughly 7-8rem combined). Its `min-height: 25rem` on `.timeline-wrapper` is sized for standalone view, but in the 2:1 iframe slot it leaves a large empty strip. Override the min-height and anchor the wrapper to the TOP of the iframe (was `auto/auto` which centered it and left blank space above + below). / html[data-embed="true"] body.app16 main .timeline-wrapper { min-height: 0; margin-top: 0; margin-bottom: auto; } / Scale apps (App21-24, 25, 25B) use `.soundlines-area` with `align-items: flex-start` — appropriate outside embed because the top-bar's height visually pushes the soundline down. Inside embed the bar is absolute (zero flow), so flex-start leaves a blank strip below the soundline roughly equal to the bar's original height. `safe center` centers vertically when the content fits (App21 etc.) and falls back to flex-start when the content is taller than the iframe (App22 with extra labels), preventing the top from being clipped. / html[data-embed="true"] body .soundlines-area { align-items: safe center; } / App21 (single-column scale app) — the soundline column contains header + pink bar + play button. The shared `--soundlines-height` default of `clamp(25rem, 85vh, 75rem)` consumes nearly the whole iframe, leaving the play button below the `overflow:hidden` cut. Reduce the height in embed so the column (header + bar + play) fits comfortably within the iframe. App22 has its own value tuned for its interval-bars layout, so it's excluded. / html[data-embed="true"] body.app21 { --soundlines-height: clamp(15rem, 70vh, 55rem); } / App23 and App24 share the same two-column layout (left: soundlines, right: transposition pill + scale chooser/step bars + pentagram). The soundline column no longer shares its vertical real estate with the pentagram below, so it can claim nearly the full iframe height — capped at 600px so the soundline numbers don't get over-stretched on tall viewports. / html[data-embed="true"] body.app23, html[data-embed="true"] body.app24 { --soundlines-height: clamp(20rem, 97vh, 600px); } / Vertical mode (App23/App24): when the iframe is narrow enough that the app's own breakpoint apila la columna dreta sota les soundlines, el total content height excedeix l'iframe. Permetem scroll vertical al `main` perquè l'usuari pugui arribar al pentagrama. Mateix valor que el breakpoint intern de les apps i del sistema. / @media (max-width: 900px) { html[data-embed="true"] body.app17 main, html[data-embed="true"] body.app18 main, html[data-embed="true"] body.app19 main, html[data-embed="true"] body.app20 main, html[data-embed="true"] body.app23 main, html[data-embed="true"] body.app24 main { overflow-y: auto; } } / Apps de fracció amb nit-editor (App34/App35) i Pfr/iTfr editors (App27/App28/App29/App30/App31): quan l'usuari omple l'editor amb molts valors d'iT=1, el contingut excedeix l'amplada de l'iframe i, sense scroll horitzontal, queda tallat (en standalone hi ha scroll del , que embed.css suprimeix amb `overflow: hidden`). Restaurem scroll horitzontal a `main` per aquestes apps, mantenint el vertical amagat (que ja gestiona la propia app via `.plano-matrix-container`). */ html[data-embed="true"] body.app27 main, html[data-embed="true"] body.app28 main, html[data-embed="true"] body.app29 main, html[data-embed="true"] body.app30 main, html[data-embed="true"] body.app31 main, html[data-embed="true"] body.app34 main, html[data-embed="true"] body.app35 main { overflow-x: auto; }