/* Identità visiva Manimatica: verde/arancione/crema, angoli morbidi, profondità
   morbida (ombre colorate, mai bordi piatti). Direzione approvata dal titolare
   il 05/09/2026 (canvas "Manimatica Landing", direzione A). */
:root{
  --verde:#4F8A5B; --verde-dk:#3B6B46; --verde-pale:#E8F1E9;
  --arancione:#F4A261; --arancione-dk:#D97F3D;
  --crema:#FBF6EE; --card:#FFFEFB; --inchiostro:#3A3226; --muted:#8A7F6E; --bordo:#EDE4D4;
  --danger:#c0392b; --radius:22px; --radius-sm:15px;
  --serif:Cambria,Georgia,'Times New Roman',serif;
  --sans:Calibri,'Segoe UI',Helvetica,Arial,sans-serif;
  /* Scala tipografica della pagina pubblica (24/09/2026) — 4 taglie con un
     ruolo dichiarato, al posto delle ~13 taglie ad hoc accumulate sezione
     per sezione. h1/h2 restano fuori dalla scala, sono già coerenti (vedi
     h1,h2,h3 sotto). Le tool-card (assets/tools) restano l'unica eccezione
     dichiarata: mini-card di gioco con la loro identità compatta, non testo
     editoriale. --ink-soft sostituisce i due grigio-bruno quasi identici
     (#5B5346 e #63594A) usati a caso in punti diversi.
     Valori rivisti dal titolare il 24/09/2026 (deciso dopo aver segnalato
     l'inversione di gerarchia rispetto all'impostazione originale: qui
     --fs-label risulta più grande di --fs-body/--fs-lead — confermato
     comunque come scelta voluta). */
  --fs-label:19px; --fs-body:18px; --fs-heading:20px; --fs-lead:18px;
  --ink-soft:#5B5346;
}
*,*::before,*::after{box-sizing:border-box}
/* .ma-body è un div che avvolge il contenuto di ogni shortcode Manimatica,
   non il <body> reale: la pagina vive dentro il tema di WordPress, che
   possiede <body> e la propria navbar. */
.ma-body{background:var(--crema);color:var(--inchiostro);font-family:var(--sans);font-size:16px;line-height:1.6}
.ma-body a{color:var(--verde-dk);text-decoration-color:rgba(59,107,70,.35)}
.ma-body a:hover{color:var(--verde);text-decoration-color:rgba(79,138,91,.5)}
.ma-wrap{max-width:1000px;margin:0 auto;padding:40px 24px}
.ma-wrap.narrow{max-width:640px}
.ma-utility-bar{display:flex;justify-content:flex-end;gap:20px;max-width:1000px;margin:0 auto;padding:16px 24px 0;font-family:var(--sans);font-size:var(--fs-label);font-weight:600}
.ma-utility-bar a{text-decoration:none}

h1,h2,h3{font-family:var(--serif);color:var(--inchiostro);line-height:1.22}
h1{font-size:40px;margin:0 0 16px;letter-spacing:-0.01em}
h2{font-size:30px;margin:0 0 14px}
p{margin:0 0 14px}

.ma-card{background:var(--card);border:1px solid rgba(58,50,38,0.05);border-radius:var(--radius);padding:28px;margin-bottom:20px;box-shadow:0 18px 40px -26px rgba(58,50,38,0.28)}

.ma-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}
@media(max-width:640px){.ma-grid{grid-template-columns:1fr}}

a.ma-btn,button.ma-btn{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:#fff;border:none;border-radius:14px;padding:15px 30px;font-family:var(--sans);font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 12px 26px -10px rgba(59,107,70,0.55);transition:transform .12s,box-shadow .12s}
.ma-btn:hover{background:var(--verde-dk);transform:translateY(-1px);box-shadow:0 16px 30px -10px rgba(59,107,70,0.6)}
.ma-btn.secondary{background:var(--arancione);color:#fff;box-shadow:0 12px 26px -10px rgba(217,127,61,0.5)}
.ma-btn.secondary:hover{background:var(--arancione-dk)}
.ma-btn.ghost{background:transparent;color:var(--inchiostro);box-shadow:none;font-weight:600}
.ma-btn.ghost:hover{background:rgba(58,50,38,0.06);transform:none}
.ma-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.ma-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.ma-field label{font-size:13px;font-weight:700;color:var(--muted)}
.ma-field input,.ma-field select,.ma-field textarea{padding:13px 15px;border:1.5px solid var(--bordo);border-radius:var(--radius-sm);font-family:var(--sans);font-size:15px;background:var(--crema)}
.ma-field textarea{resize:vertical;min-height:96px}
.ma-field input:focus,.ma-field select:focus,.ma-field textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-pale)}

.ma-error{background:#fdecea;border:1px solid #f3c1ba;color:var(--danger);border-radius:var(--radius-sm);padding:12px 16px;font-size:14px;margin-bottom:16px}
.ma-ok{background:var(--verde-pale);border:1px solid #cfe3d2;color:var(--verde-dk);border-radius:var(--radius-sm);padding:12px 16px;font-size:14px;margin-bottom:16px}

.ma-child-list{display:flex;flex-direction:column;gap:14px}
.ma-child-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border:1px solid var(--bordo);border-radius:var(--radius-sm);padding:18px 22px;box-shadow:0 10px 24px -20px rgba(58,50,38,0.3);flex-wrap:wrap}
.ma-child-row-left{display:flex;align-items:center;gap:16px;min-width:0}
.ma-avatar{width:44px;height:44px;border-radius:12px;background:var(--verde-pale);color:var(--verde-dk);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:18px;flex-shrink:0}
/* Due pulsanti veri per figlio (15/09/2026), non più un link testuale
   piccolo accanto a "Gioca" - il titolare l'ha segnalato come fatto
   male: "la pagina deve prevedere il nome del bambino, un pulsante
   dashboard ed uno Gioca". Mockup approvato prima di scrivere questo CSS
   (artifact "Minori Iscritti", stessa sessione). Gerarchia intenzionale,
   non due pulsanti uguali: "Gioca" resta pieno/verde (l'azione che il
   genitore fa ogni volta, passare il dispositivo), "Dashboard" usa lo
   stile ghost già esistente (.ma-btn.ghost, mai usato prima qui) per
   un'azione più occasionale - stesso principio del mockup, contorno
   invece di un secondo pieno che competerebbe con "Gioca". .compact
   riduce solo padding/font rispetto a .ma-btn di base (pensato per un
   pulsante solo, pieno formato): qui ce ne sono due per riga, in un
   elenco che può avere molti figli. */
.ma-child-actions{display:flex;gap:10px;flex:0 0 auto}
.ma-btn.compact{padding:10px 18px;font-size:14.5px;border-radius:12px;box-shadow:0 8px 18px -8px rgba(59,107,70,0.5)}
.ma-btn.compact svg{width:16px;height:16px}
@media (max-width:480px){
  .ma-child-row{flex-direction:column;align-items:stretch}
  .ma-child-actions{justify-content:stretch}
  .ma-child-actions .ma-btn{flex:1 1 0;justify-content:center}
}
.ma-link-btn{display:inline-flex;align-items:center;gap:6px;background:var(--verde-pale);color:var(--verde-dk)!important;font-size:13px;font-weight:700;padding:9px 16px;border-radius:100px;text-decoration:none!important}
.ma-link-btn:hover{background:#dcecdf}
.ma-badge{font-size:12px;font-weight:700;padding:4px 12px;border-radius:100px}
.ma-badge.pending{background:#fdf1e0;color:#a5670e}
.ma-badge.done{background:var(--verde-pale);color:var(--verde-dk)}

/* Padronanza tabelline nella dashboard genitore (15/09/2026) - un
   pallino per tabellina (2-10), colore secondo l'etichetta salvata da
   /ma/v1/mastery (vedi includes/rest-mastery.php, assets/js/area-genitore.js).
   Verde=memorizzata, arancione=sa calcolare (corretta ma non automatica),
   rosso tenue=da esercitare, grigio=non ancora abbastanza risposte. */
.ma-mastery-row{margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.ma-mastery-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;cursor:default}
.ma-mastery-dot.memorizzata{background:var(--verde-pale);color:var(--verde-dk)}
.ma-mastery-dot.sa-calcolare{background:#fdf1e0;color:#a5670e}
.ma-mastery-dot.da-esercitare{background:#fbe4e1;color:var(--danger)}
.ma-mastery-dot.da-provare{background:var(--bordo);color:var(--muted)}

/* ══════════════════════════════════════════════════════════════
   UX DEL BAMBINO — l'area di gioco e lo schermo del gioco stesso
   riprendono i token visivi veri del tool Addizione (assets/tools/
   addizione/manimatica_addizione.html), non quelli del sito: il
   bambino non deve percepire un salto di stile tra le due. Scope
   .ma-kids (aggiunta da ma_shortcode() solo su queste due pagine) così
   il resto del sito resta sulla palette verde/arancione/crema.
   ══════════════════════════════════════════════════════════════ */
.ma-body.ma-kids{
  --k-bg:#FFF3D9; --k-bg2:#FFE3B0;
  --k-surface:#FFFFFF; --k-surface-2:#FFF3D2;
  --k-ink:#3A3226; --k-ink-soft:#8C7A5E;
  --k-border:rgba(58,50,38,0.14);
  --k-unit:#4FC15A; --k-decina:#3E9DE8;
  --k-accent:#FFA23D;
  --k-radius-lg:30px; --k-radius-md:20px;
  --k-font-display:'Baloo 2','Comic Sans MS',sans-serif;
  --k-font-body:'Quicksand','Comic Sans MS',sans-serif;
  background:linear-gradient(180deg,var(--k-bg) 0%,var(--k-bg2) 100%);
  min-height:100vh;
  color:var(--k-ink);
  font-family:var(--k-font-body);
}

.ma-kids-page{max-width:760px;margin:0 auto;padding:26px 30px 50px}
.ma-kids-back{display:inline-block;color:var(--k-ink-soft);font-weight:700;font-size:0.9rem;margin-bottom:20px;text-decoration:none}
.ma-kids-back:hover{color:var(--k-ink)}
.ma-kids-greeting{font-family:var(--k-font-display);font-weight:800;font-size:2.3rem;margin:0 0 6px;color:#2F8F52;-webkit-text-stroke:1.4px #F2D9A0;paint-order:stroke fill}
.ma-kids-lead{font-weight:600;color:var(--k-ink-soft);font-size:1.05rem;margin:0 0 28px}

.ma-kids-card{background:var(--k-surface);border-radius:var(--k-radius-lg);padding:34px 36px;display:flex;align-items:center;gap:28px;box-shadow:0 8px 0 color-mix(in srgb, var(--k-unit) 55%, black),0 20px 40px -22px rgba(58,50,38,.35);margin-bottom:34px}
.ma-kids-card-icon{width:92px;height:92px;flex-shrink:0;border-radius:26px;background:color-mix(in srgb, var(--k-unit) 18%, white);color:var(--k-unit);display:flex;align-items:center;justify-content:center}
.ma-kids-card-body{flex-grow:1;min-width:0}
.ma-kids-card-body h2{font-family:var(--k-font-display);font-weight:800;font-size:1.7rem;color:var(--k-ink);margin:0 0 4px}
.ma-kids-card-body p{font-weight:600;color:var(--k-ink-soft);font-size:0.98rem;margin:0 0 16px}
.ma-kids-pill-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.ma-kids-pill{display:inline-flex;align-items:center;gap:6px;background:var(--k-surface);border:3px solid var(--k-decina);border-radius:999px;padding:0.3rem 0.85rem;font-family:var(--k-font-display);font-weight:700;font-size:0.95rem;color:var(--k-ink);box-shadow:0 3px 0 color-mix(in srgb, var(--k-decina) 55%, black)}
.ma-kids-play{display:inline-flex;align-items:center;gap:10px;background:var(--k-unit);color:#fff;border:none;border-radius:999px;padding:0.85rem 2.2rem;font-family:var(--k-font-display);font-size:1.15rem;font-weight:800;cursor:pointer;text-decoration:none!important;box-shadow:0 6px 0 color-mix(in srgb, var(--k-unit) 60%, black)}

.ma-kids-soon-eyebrow{font-family:var(--k-font-display);font-weight:700;font-size:0.85rem;letter-spacing:.03em;text-transform:uppercase;color:var(--k-ink-soft);margin-bottom:14px;display:block}
.ma-kids-soon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ma-kids-soon-card{background:var(--k-surface-2);border:2px dashed var(--k-border);border-radius:var(--k-radius-md);padding:20px 12px;text-align:center;opacity:.6;position:relative}
.ma-kids-soon-icon{width:44px;height:44px;margin:0 auto 10px;border-radius:14px;background:var(--k-surface);color:var(--k-ink-soft);display:flex;align-items:center;justify-content:center;position:relative}
.ma-kids-lock{position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;background:var(--k-accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 color-mix(in srgb, var(--k-accent) 60%, black)}
.ma-kids-soon-card p{font-family:var(--k-font-display);font-weight:700;font-size:0.85rem;color:var(--k-ink-soft);margin:0}
@media(max-width:680px){
  .ma-kids-card{flex-direction:column;text-align:center;padding:28px 24px}
  .ma-kids-pill-row{justify-content:center}
  .ma-kids-soon-grid{grid-template-columns:repeat(2,1fr)}
}

/* z-index alto (08/09/2026): rete di sicurezza indipendente da come
   header/footer del tema vengono nascosti (ma_ensure_page() in
   manimatica.php imposta i meta nativi _as_hide_header/_as_hide_footer
   di plugin/as-theme sulle tre pagine kiosk - il tema li rimuove del
   tutto, non li nasconde solo via CSS) - se in futuro cambiasse tema o
   quel meccanismo, questo copre comunque l'intero viewport sopra
   qualunque cosa il tema stampi. */
/* Storia di .ma-frame-wrap: fino al 13/09/2026 il pulsante "Torna ai
   giochi" (allora .ma-frame-back, rimosso il 15/09/2026 - vedi sotto)
   era position:fixed sopra l'iframe e si sovrapponeva al titolo del
   tool su schermo stretto; corretto rendendolo un figlio in flusso
   normale di questa colonna flex, sicuro solo perché fitBoard() nel
   tool si adatta a un'altezza minore del pieno schermo invece di
   collassare. Il 15/09/2026 il pulsante si è spostato per intero
   DENTRO l'header di ogni tool (stessa riga del titolo, richiesta
   diretta da uno screenshot reale - vedi .header-back nei tre file in
   assets/tools/): qui resta solo l'iframe, a piena larghezza/altezza.
   Sfondo crema (era nero fino al 15/09/2026, bug reale segnalato dal
   titolare - "continuo a vedere la vecchia versione schifosa" era in
   realtà un problema diverso di cache, ma lo sfondo nero era comunque
   un difetto vero, visibile come banda vuota finché l'iframe non
   finisce di caricare: nero non c'entra nulla con nessuna palette del
   sito, ora coerente anche in quella finestra). */
.ma-frame-wrap{position:fixed;inset:0;z-index:999999;background:var(--crema);display:flex;flex-direction:column}
.ma-frame-wrap iframe{flex:1 1 auto;width:100%;border:0;display:block}
#ma-fs-start{position:fixed;inset:0;z-index:20;background:rgba(255,227,176,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
#ma-fs-start button{background:#FFA23D;color:#5A3300;border:none;border-radius:999px;padding:22px 44px;font-family:'Baloo 2','Comic Sans MS',sans-serif;font-size:22px;font-weight:800;cursor:pointer;box-shadow:0 6px 0 color-mix(in srgb, #FFA23D 60%, black)}


.ma-affido-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
@media(max-width:520px){.ma-affido-grid{grid-template-columns:1fr}}
.ma-affido-btn{border:1.5px solid var(--bordo);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;font-family:var(--sans);font-size:14px;background:var(--crema);text-align:left;transition:all .15s}
.ma-affido-btn:hover{border-color:var(--verde)}
.ma-affido-btn.selected{border-color:var(--verde);background:var(--verde-pale);font-weight:700}

.ma-consent-scroll{font-family:var(--serif);font-size:15px;line-height:1.8;max-height:340px;overflow-y:auto;border:1px solid var(--bordo);border-radius:var(--radius-sm);padding:20px;background:var(--crema);margin-bottom:18px}
.ma-consent-scroll h3{font-size:16px;color:var(--verde-dk);margin:16px 0 6px}
.ma-consent-scroll h3:first-child{margin-top:0}
.ma-consent-scroll ul{margin:0 0 12px;padding-left:22px}
.ma-consent-scroll li{margin-bottom:4px}

.ma-sig-wrap{position:relative;border:1.5px solid var(--bordo);border-radius:var(--radius-sm);background:#fafaf7;touch-action:none;margin-bottom:6px}
.ma-sig-wrap canvas{display:block;width:100%;height:160px;cursor:crosshair;touch-action:none}
.ma-sig-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:var(--muted);font-size:13px}
.ma-sig-hint.gone{display:none}
.ma-sig-clear{background:none;border:1px solid var(--bordo);border-radius:8px;padding:5px 12px;font-size:12px;color:var(--muted);cursor:pointer;margin-bottom:16px}

.ma-check-row{display:flex;gap:12px;align-items:flex-start;background:var(--verde-pale);border:1px solid #cfe3d2;border-radius:var(--radius-sm);padding:16px;margin:20px 0}
.ma-check-row input{margin-top:3px}

.ma-credentials-box{background:var(--verde-pale);border:1.5px solid var(--verde);border-radius:var(--radius);padding:24px;text-align:center}
.ma-credentials-box .cred{font-family:monospace;font-size:18px;background:#fff;border-radius:10px;padding:10px 16px;margin:8px 0;display:inline-block}
.ma-muted{color:var(--muted);font-size:14px}

/* HOME — hero e sezioni pubbliche */
.ma-kicker{display:inline-flex;align-items:center;gap:8px;background:var(--verde-pale);color:var(--verde-dk);font-size:var(--fs-label);font-weight:700;padding:8px 16px;border-radius:100px;margin-bottom:22px}
.ma-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--arancione)}
.ma-hero-grid{max-width:1200px;margin:0 auto;padding:20px 40px 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:820px){.ma-hero-grid{grid-template-columns:1fr;text-align:center}.ma-hero-grid .ma-kicker{margin-left:auto;margin-right:auto}.ma-hero-art{display:none}}
.ma-hero-grid h1{font-size:48px}
@media(max-width:820px){.ma-hero-grid h1{font-size:36px}}
@media(max-width:480px){.ma-hero-grid h1{font-size:29px}.ma-section{padding:10px 20px 70px}.ma-hero-grid{padding:20px 20px 70px}}
.ma-hero-grid h1 em{font-style:italic;color:var(--verde-dk)}
.ma-hero-grid .lead{font-size:var(--fs-lead);color:var(--ink-soft);max-width:480px;line-height:1.65}
.ma-hero-grid .lead em{font-style:italic;color:var(--verde-dk);font-weight:600}
@media(max-width:820px){.ma-hero-grid .lead{margin-left:auto;margin-right:auto}}
.ma-hero-ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
@media(max-width:820px){.ma-hero-ctas{justify-content:center}}
.ma-fine{display:inline-flex;align-items:center;gap:7px;background:var(--verde-pale);color:var(--verde-dk);font-size:var(--fs-label);font-weight:700;padding:9px 16px;border-radius:100px}
.ma-fine svg{flex-shrink:0}

.ma-hero-art{position:relative;aspect-ratio:1/0.9;border-radius:26px;background:var(--card);box-shadow:0 30px 70px -30px rgba(58,50,38,.3),0 2px 0 rgba(58,50,38,.04);padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ma-grid10{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:92%}
.ma-grid10 .cell{aspect-ratio:1;border-radius:5px;background:#F1EAD9}
.ma-grid10 .cell.u{background:var(--verde)}
.ma-grid10 .cell.d{background:var(--arancione)}

.ma-section{max-width:1200px;margin:0 auto;padding:10px 40px 70px}
.ma-section-head{text-align:center;max-width:620px;margin:0 auto 44px}
.ma-eyebrow{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--arancione-dk);margin-bottom:12px;display:block}

.ma-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.ma-feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ma-feature-grid{grid-template-columns:1fr}}
.ma-feature-card{background:var(--card);border-radius:var(--radius);padding:30px 24px;box-shadow:0 18px 40px -26px rgba(58,50,38,.28);border:1px solid rgba(58,50,38,.05)}
.ma-feature-icon{width:48px;height:48px;border-radius:14px;background:var(--verde-pale);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ma-feature-icon svg{stroke:var(--verde-dk)}
.ma-feature-card h3{font-size:var(--fs-heading);margin:0 0 8px}
.ma-feature-card p{font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft);margin:0}

/* PROVA GLI STRUMENTI — due carte piccole a ventaglio (23/09/2026),
   richiesta esplicita del titolare dopo aver visto il mockup: "devono
   essere delle card piccole... come se fossero due carte di gioco
   inclinate una a dx ed una a sx". Il grid10 dentro riusa la stessa
   classe/pattern dell'illustrazione hero, invariata, si rimpicciolisce
   da solo perché è già in percentuale del contenitore. */
.ma-tool-cards{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:10px 0 30px}
.ma-tool-card{width:210px;flex-shrink:0;background:var(--card);border-radius:18px;padding:14px;box-shadow:0 24px 48px -24px rgba(58,50,38,.35);border:1.5px solid var(--bordo)}
.ma-tool-card-a{transform:rotate(-7deg);margin-right:-28px;z-index:1;background:#FDF6E3}
.ma-tool-card-b{transform:rotate(7deg);z-index:2;background:#EAF5EA}
.ma-tool-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ma-tool-card-icon{width:28px;height:28px;border-radius:50%;background:var(--arancione);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-tool-card-head h3{font-size:14px;margin:0;line-height:1.2}
.ma-grid10-small{gap:2px;margin-bottom:8px}
.ma-tool-card-banner{background:var(--arancione);color:#fff;font-size:11.5px;font-weight:700;text-align:center;padding:6px;border-radius:8px;margin-bottom:8px}
.ma-tool-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ma-tool-card-star{border:2px solid #E0A93A;border-radius:100px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--inchiostro)}
.ma-tool-card-play{background:var(--arancione);color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:100px;text-decoration:none}
.ma-tool-card-play:hover{background:var(--arancione-dk)}
@media(max-width:600px){
  .ma-tool-card{width:150px;padding:10px}
  .ma-tool-card-a{transform:rotate(-4deg);margin-right:-12px}
  .ma-tool-card-b{transform:rotate(4deg)}
  .ma-tool-card-head h3{font-size:12px}
  .ma-tool-card-icon{width:26px;height:26px;font-size:13px}
  .ma-tool-card-foot{flex-direction:column;align-items:flex-start;gap:8px}
}

.ma-steps-band{background:var(--verde-dk);border-radius:30px;padding:56px 48px;position:relative;overflow:hidden}
.ma-steps-band::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 85% 15%,rgba(244,162,97,.14),transparent 45%);pointer-events:none}
.ma-steps-head{position:relative;text-align:center;max-width:560px;margin:0 auto 40px}
.ma-steps-head .ma-eyebrow{color:var(--arancione)}
.ma-steps-head h2{color:#fff}
.ma-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.ma-steps{grid-template-columns:1fr}}
.ma-step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 22px}
.ma-step .num{font-family:var(--serif);font-size:var(--fs-label);color:var(--arancione);font-weight:700;margin-bottom:12px}
.ma-step h4{font-family:var(--serif);font-size:var(--fs-heading);color:#fff;margin:0 0 8px}
.ma-step p{font-size:var(--fs-body);line-height:1.6;color:rgba(255,255,255,.72);margin:0}
.ma-steps-cta{position:relative;text-align:center;margin-top:36px}

/* COSA È MANIMATICA — colonna stretta di prosa, centrata nella pagina ma
   con il testo allineato a sinistra al suo interno (24/09/2026, corretto
   dopo segnalazione del titolare: prosa lunga centrata ha margini
   frastagliati ed è illeggibile - solo il titolo sopra resta centrato). */
.ma-intro-text{max-width:600px;margin:0 auto;text-align:left}
.ma-intro-text p{font-size:var(--fs-body);line-height:1.75;color:var(--ink-soft)}
.ma-intro-text p:first-child{font-size:var(--fs-lead);color:var(--ink-soft)}

/* PERCHÉ UNO PSICOLOGO — una sola card larga, icona + testo fianco a
   fianco, non una griglia: è un unico blocco di credibilità, non una
   lista di feature. */
.ma-about-card{display:flex;gap:24px;align-items:flex-start;background:var(--card);border-radius:var(--radius);padding:34px 40px;box-shadow:0 18px 40px -26px rgba(58,50,38,.28);border:1px solid rgba(58,50,38,.05);max-width:760px;margin:0 auto}
.ma-about-icon{width:48px;height:48px;border-radius:14px;background:var(--verde-pale);color:var(--verde-dk);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-about-body p{font-size:var(--fs-body);line-height:1.7;color:var(--ink-soft)}
.ma-about-body .ma-link-btn{margin-top:16px}
@media(max-width:600px){.ma-about-card{flex-direction:column;padding:28px 24px}.ma-about-icon{margin-bottom:2px}}

/* FAQ — accordion nativo <details>/<summary>, stesso pattern del tema
   principale (as-theme/page-home.php, sezione faq-section) ma con
   prefisso ma- e palette Manimatica, per restare coerente col resto del
   plugin senza dipendere dal CSS del tema. */
.ma-faq-list{max-width:760px;margin:0 auto}
.ma-faq-item{border-bottom:1px solid var(--bordo)}
.ma-faq-item:first-child{border-top:1px solid var(--bordo)}
.ma-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer;list-style:none;font-family:var(--serif);font-size:var(--fs-heading);color:var(--inchiostro)}
.ma-faq-item summary::-webkit-details-marker{display:none}
.ma-faq-icon{width:26px;height:26px;border:1px solid var(--bordo);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;transition:all .25s}
.ma-faq-icon::before{content:'';display:block;width:11px;height:1.5px;background:var(--arancione-dk);position:absolute}
.ma-faq-icon::after{content:'';display:block;width:1.5px;height:11px;background:var(--arancione-dk);position:absolute;transition:transform .25s,opacity .25s}
.ma-faq-item[open] .ma-faq-icon{border-color:var(--arancione-dk);background:var(--verde-pale)}
.ma-faq-item[open] .ma-faq-icon::after{transform:rotate(90deg);opacity:0}
.ma-faq-body{font-size:var(--fs-body);line-height:1.75;color:var(--ink-soft);padding:0 30px 24px 4px}
.ma-faq-cta{text-align:center;margin-top:40px}

/* ════════════════════════════════════════════════════════
   DASHBOARD PROGRESSI DI UN FIGLIO (15/09/2026) — prefisso ma-dash- per
   restare isolata dal resto del foglio. Palette e raggio presi pari pari
   dai token sopra (--verde/--arancione/--crema/--inchiostro/--bordo),
   nessun colore nuovo inventato. Mockup approvato prima di scrivere
   questo CSS (artifact "Progressi di Marco", stessa sessione).
   ════════════════════════════════════════════════════════ */
:root{
  --ma-dash-card:var(--card); --ma-dash-muted-2:#B0A48F; --ma-dash-bordo-2:#E3D7C3;
  --ma-verde-line:var(--verde);
  --ma-dash-ok-bg:var(--verde-pale); --ma-dash-ok-ink:var(--verde-dk);
  --ma-dash-warn-bg:#FDF1E0; --ma-dash-warn-ink:#A5670E;
  --ma-dash-crit-bg:#FBE4E1; --ma-dash-crit-ink:var(--danger);
  --ma-dash-neutral-bg:var(--bordo); --ma-dash-neutral-ink:var(--muted);
  --ma-dash-heat-0:#F1ECE0; --ma-dash-heat-1:#D3E5D6; --ma-dash-heat-2:#A8CBAE; --ma-dash-heat-3:#6FA97D; --ma-dash-heat-4:var(--verde-dk);
  --ma-dash-shadow-sm:0 3px 0 rgba(58,50,38,0.08), 0 6px 16px -8px rgba(58,50,38,0.18);
  --ma-dash-shadow-card:0 6px 0 rgba(79,138,91,0.10), 0 14px 30px -14px rgba(58,50,38,0.22);
}

.ma-dash-child-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.ma-dash-avatar{width:64px;height:64px;border-radius:50%;background:var(--verde-pale);color:var(--verde-dk);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:26px;flex:0 0 auto}
.ma-dash-child-head h1{font-family:var(--serif);font-size:28px;margin:0}
.ma-dash-sub{color:var(--muted);font-size:14.5px;margin-top:4px}
.ma-dash-back-link{margin-left:auto;font-size:14px;font-weight:600;color:var(--verde-dk);text-decoration:none}
.ma-dash-back-link:hover{text-decoration:underline}

.ma-dash-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.ma-dash-kpi{background:var(--ma-dash-card);border-radius:18px;padding:16px 18px;box-shadow:var(--ma-dash-shadow-sm)}
.ma-dash-kpi-label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}
.ma-dash-kpi-value{font-family:var(--sans);font-weight:700;font-size:30px;margin-top:4px}
.ma-dash-kpi-value small{font-size:15px;font-weight:600;color:var(--muted)}

.ma-dash-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.ma-dash-section-title h2{font-family:var(--serif);font-size:19px;margin:0}
.ma-dash-hint{font-size:13px;color:var(--muted)}

.ma-dash-heat-card{background:var(--ma-dash-card);border-radius:18px;padding:20px 22px 16px;box-shadow:var(--ma-dash-shadow-sm);margin-bottom:36px}
.ma-dash-heat-scroll{overflow-x:auto;padding-bottom:4px}
.ma-dash-heat-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);gap:3px;width:max-content}
.ma-dash-heat-cell{width:12px;height:12px;border-radius:3px;background:var(--ma-dash-heat-0);position:relative}
.ma-dash-heat-cell[data-level="1"]{background:var(--ma-dash-heat-1)}
.ma-dash-heat-cell[data-level="2"]{background:var(--ma-dash-heat-2)}
.ma-dash-heat-cell[data-level="3"]{background:var(--ma-dash-heat-3)}
.ma-dash-heat-cell[data-level="4"]{background:var(--ma-dash-heat-4)}
.ma-dash-heat-future{background:transparent}
.ma-dash-heat-cell[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--inchiostro);color:var(--crema);font-size:11.5px;font-weight:600;white-space:nowrap;padding:5px 8px;border-radius:7px;z-index:5;pointer-events:none}
.ma-dash-heat-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12.5px;color:var(--muted)}
.ma-dash-heat-legend{display:inline-flex;align-items:center;gap:4px}
.ma-dash-heat-legend .ma-dash-heat-cell{width:10px;height:10px}

.ma-dash-insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:36px}
.ma-dash-insight{background:var(--ma-dash-card);border-radius:18px;padding:16px 18px;box-shadow:var(--ma-dash-shadow-sm);display:flex;gap:12px}
.ma-dash-insight-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;margin-top:6px}
.ma-dash-insight.ok .ma-dash-insight-dot{background:var(--ma-dash-ok-ink)}
.ma-dash-insight.warn .ma-dash-insight-dot{background:var(--ma-dash-warn-ink)}
.ma-dash-insight.crit .ma-dash-insight-dot{background:var(--ma-dash-crit-ink)}
.ma-dash-insight-title{font-weight:700;font-size:14.5px}
.ma-dash-insight-text{font-size:13.5px;color:var(--muted);margin-top:2px}

.ma-dash-game-card{background:var(--ma-dash-card);border-radius:24px;box-shadow:var(--ma-dash-shadow-card);overflow:hidden;margin-bottom:20px}
.ma-dash-game-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--bordo)}
.ma-dash-game-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.ma-dash-game-icon.addizione,.ma-dash-game-icon.tabelline{background:var(--verde-pale)}
.ma-dash-game-icon.memoria{background:#FDF1E0}
.ma-dash-game-titles{flex:1 1 auto;min-width:0}
.ma-dash-game-titles h3{font-family:var(--serif);font-size:18px;margin:0}
.ma-dash-game-sub{font-size:13px;color:var(--muted);margin-top:2px}
.ma-dash-reset-btn{border:1px solid var(--ma-dash-bordo-2);background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.ma-dash-reset-btn:hover{border-color:var(--ma-dash-crit-ink);color:var(--ma-dash-crit-ink)}
.ma-dash-game-body{padding:20px 22px 22px;display:flex;flex-wrap:wrap;gap:28px}

.ma-dash-score-block{flex:0 0 auto;min-width:150px}
.ma-dash-score-label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}
.ma-dash-score-value{font-family:var(--sans);font-weight:700;font-size:32px;margin-top:2px}
.ma-dash-score-value.ma-dash-score-muted{color:var(--muted);font-size:20px;font-weight:600}
.ma-dash-score-note{font-size:12px;color:var(--ma-dash-muted-2);margin-top:2px}
.ma-dash-spark{margin-top:8px;display:block}

.ma-dash-mastery-block{flex:1 1 220px;min-width:220px}
.ma-dash-m-label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);margin-bottom:8px}
.ma-dash-dots{display:flex;gap:6px;flex-wrap:wrap}
.ma-dash-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;position:relative}
.ma-dash-dot.memorizzata{background:var(--ma-dash-ok-bg);color:var(--ma-dash-ok-ink)}
.ma-dash-dot.sa-calcolare{background:var(--ma-dash-warn-bg);color:var(--ma-dash-warn-ink)}
.ma-dash-dot.da-esercitare{background:var(--ma-dash-crit-bg);color:var(--ma-dash-crit-ink)}
.ma-dash-dot.da-provare{background:var(--ma-dash-neutral-bg);color:var(--ma-dash-neutral-ink)}
.ma-dash-dot:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--inchiostro);color:var(--crema);font-size:11px;font-weight:600;white-space:nowrap;padding:4px 7px;border-radius:6px;z-index:5;pointer-events:none}
.ma-dash-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted)}
.ma-dash-legend span{display:inline-flex;align-items:center;gap:5px}
.ma-dash-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ma-dash-legend i.ok{background:var(--ma-dash-ok-ink)}
.ma-dash-legend i.warn{background:var(--ma-dash-warn-ink)}
.ma-dash-legend i.crit{background:var(--ma-dash-crit-ink)}

.ma-dash-gap-note{flex:1 1 220px;min-width:220px;display:flex;align-items:center;font-size:13px;color:var(--ma-dash-muted-2);font-style:italic}

.ma-dash-meter-block{flex:1 1 260px;min-width:260px}
.ma-dash-meter-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ma-dash-meter-row:last-child{margin-bottom:0}
.ma-dash-meter-icon{font-size:16px;flex:0 0 auto;width:20px;text-align:center}
.ma-dash-meter-track{flex:1 1 auto;height:9px;border-radius:99px;background:#FDF1E0;overflow:hidden}
.ma-dash-meter-fill{height:100%;border-radius:99px;background:var(--arancione)}
.ma-dash-meter-val{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--muted);width:38px;text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .ma-dash-kpi-row{grid-template-columns:1fr}
  .ma-dash-game-body{gap:20px}
}

/* Informativa in una finestra sopra il modulo (assets/js/informativa.js). Colori Manimatica. */
html.ma-blocca{overflow:hidden}
.ma-modale{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;font-family:var(--sans)}
.ma-modale-sf{position:absolute;inset:0;background:rgba(58,50,38,.62)}
.ma-modale-box{position:relative;display:flex;flex-direction:column;width:min(820px,100%);height:min(88vh,900px);background:var(--card);border:1px solid var(--bordo);border-radius:var(--radius);box-shadow:0 24px 60px rgba(58,50,38,.35);overflow:hidden}
.ma-modale-tt{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 12px 0 22px;background:var(--verde-pale);border-bottom:1px solid var(--bordo);font-family:var(--serif);font-size:20px;font-weight:700;color:var(--inchiostro)}
.ma-modale-x{flex:none;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--verde-dk);background:transparent;color:var(--verde-dk);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ma-modale-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ma-modale-x:hover{background:var(--verde-dk);color:#fff}
.ma-modale-x:focus-visible{outline:3px solid var(--arancione);outline-offset:2px}
.ma-modale-cor{position:relative;flex:1;min-height:0}
.ma-modale-fr{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.ma-modale-att{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px}
@media (max-width:700px){.ma-modale{padding:0}.ma-modale-box{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}}