/* ============================================================================================================================================================
   FORMULE.CSS — formule delle pagine didattiche (29/10/2026). Lo carica menu/formule-ui.php; le classi le crea scripts/formule.js.
   ============================================================================================================================================================ */

/* ---- ingrandimento al passaggio del mouse ---- */
.pbB-main mjx-container[jax], .pbB-main .katex, .pbB-main .katex-display { transition: transform .15s ease; transform-origin: center center; }
/* un elemento inline non si puo' scalare: le formule KaTeX in linea diventano inline-block (come nel CSS originale di KaTeX) */
.pbB-main .katex { display: inline-block; }
.pbB-main mjx-container.fm-hov, .pbB-main .katex.fm-hov { transform: scale(1.5); position: relative; z-index: 5; }
.pbB-main mjx-container[display="true"].fm-hov, .pbB-main .katex-display.fm-hov { transform: scale(1.4); position: relative; z-index: 5; }
.pbB-main .fm-box mjx-container[display="true"].fm-hov, .pbB-main .fm-box .katex-display.fm-hov { transform: scale(var(--fm-s, 1.3)); }

/* ---- pulsante "Spiega questa formula" (uno solo per pagina, si sposta sopra la formula) ---- */
.fm-pop { position: absolute; z-index: 60; display: none; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border: 1px solid var(--b-ac, #6aa8ff); border-radius: 999px;
  background: var(--b-ac, #6aa8ff); color: var(--b-inkon, #000); font: 600 .78rem/1.2 inherit; font-family: inherit; white-space: nowrap; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.fm-pop.fm-on { display: inline-flex; }
.fm-pop svg { width: 14px; height: 14px; flex: none; }
.fm-pop:hover, .fm-pop:focus-visible { filter: brightness(1.12); outline: none; }

/* ---- cornice per le formule in riga propria ---- */
.fm-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 22px; align-items: center; margin: 1.1em 0; padding: 16px 20px; border: 1px solid var(--b-ln, rgba(128,128,128,.35));
  border-left: 3px solid var(--b-ac, #6aa8ff); border-radius: 12px; background: var(--b-soft, rgba(128,128,128,.08)); position: relative; }
.fm-box.fm-con { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
p:has(> .fm-box) { margin: 0; }
.fm-f { min-width: 0; text-align: center; }
/* formula piu' larga dello spazio: si rimpicciolisce invece di uscire dalla cornice */
.fm-f mjx-container { max-width: 100%; }
.fm-f mjx-container svg { max-width: 100%; height: auto; }
.fm-f .katex-display { overflow-x: auto; overflow-y: hidden; }
/* spiegazione sotto la formula (formula larga) */
.fm-box.fm-sotto { grid-template-columns: minmax(0, 1fr); }
.fm-box.fm-sotto .fm-sp { padding: 12px 0 0; border-left: 0; border-top: 1px dashed var(--b-ln, rgba(128,128,128,.35)); }
.fm-f mjx-container[display="true"], .fm-f .katex-display { margin: 0 !important; }
.fm-sp { min-width: 0; padding-left: 20px; border-left: 1px dashed var(--b-ln, rgba(128,128,128,.35)); font-size: .93rem; line-height: 1.55; color: var(--b-tx, inherit); }
.fm-sp-t { display: block; margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b-ac, #6aa8ff); }
.fm-sp-p { margin: 0; }
@media (max-width: 700px) {
  .fm-box.fm-con { grid-template-columns: minmax(0, 1fr); }
  .fm-sp { padding: 12px 0 0; border-left: 0; border-top: 1px dashed var(--b-ln, rgba(128,128,128,.35)); }
  .fm-box { padding: 14px 14px; }
}

/* ---- solo utente 171: generazione della spiegazione ---- */
.fm-gen { position: absolute; top: -12px; right: 16px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border: 1px solid var(--b-ln, rgba(128,128,128,.35)); border-radius: 999px;
  background: var(--b-inp, #1b1d22); color: var(--b-mu, #98a3b5); font: 500 .72rem/1.2 inherit; font-family: inherit; cursor: pointer; opacity: .75; transition: opacity .15s, color .15s; }
.fm-gen svg { width: 13px; height: 13px; }
.fm-box:hover .fm-gen, .fm-gen:focus-visible { opacity: 1; color: var(--b-ac, #6aa8ff); outline: none; }
.fm-anteprima { font-size: 1rem; line-height: 1.6; }
.fm-anteprima .fm-formula { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--pm-ln, rgba(128,128,128,.35)); border-radius: 10px; text-align: center; overflow-x: auto; }
.fm-anteprima .fm-testo { margin: 0; white-space: normal; }

/* la formula ingrandita sopra al testo resta leggibile: fondo pieno dietro */
.pbB-main .katex.fm-hov, .pbB-main mjx-container:not([display="true"]).fm-hov { background: var(--b-inp, #1b1d22); border-radius: 6px; box-shadow: 0 0 0 4px var(--b-inp, #1b1d22); }
/* anche dentro la cornice, la formula ingrandita ha lo sfondo pieno (copre la spiegazione) */
.fm-box mjx-container.fm-hov, .fm-box .katex-display.fm-hov { background: var(--b-inp, #1b1d22); border-radius: 8px; box-shadow: 0 0 0 8px var(--b-inp, #1b1d22); }