/* =====================================================================
   GRAFICO BENEFICI ALBERI - ThankYouJill
   Tutti i selettori partono da #css_graf_app e usano classi css_graf_...
   così lo stile non viene alterato dal CSS del sito o dell'area admin.
   ===================================================================== */

/* ---------- contenitore isolato ---------- */
#css_graf_app{
  all:initial;
  display:block;
  box-sizing:border-box;
  width:100%;
  container-type:inline-size;
  container-name:css_graf_app;

  /* token colori */
/*  --css_graf_sfondo:#EEF2E6;*/
  --css_graf_sfondo:#ffffff;
  --css_graf_carta:#FBFCF7;
  --css_graf_inchiostro:#173A26;
  --css_graf_inchiostro2:#4A6553;
  --css_graf_linea:#CFDCC8;
  --css_graf_cielo:#E4EEDF;
  --css_graf_selva1:#3F8F3A;
  --css_graf_selva2:#2E7A36;
  --css_graf_selva3:#56A447;
  --css_graf_erba:#6DB04A;
  --css_graf_suolo1:#B98E60;
  --css_graf_suolo2:#8A6440;
  --css_graf_corteccia:#7B5332;
  --css_graf_acqua:#3E8FC0;
  --css_graf_co2a:#1E9E78; --css_graf_co2b:#34B78C;
  --css_graf_o2a:#2E9447;  --css_graf_o2b:#47AE5E;
  --css_graf_h2oa:#6FB33A; --css_graf_h2ob:#8BC853;
  --css_graf_accento:#1E9E78;
  --css_graf_giovane:#E4F5D7;  --css_graf_giovane_bordo:#C8E8AE;
  --css_graf_adulto:#C3E8A2;   --css_graf_adulto_bordo:#A1D57A;
  --css_graf_etichetta:rgba(251,252,247,.93);
  --css_graf_etichetta_suolo:rgba(62,40,20,.8);
  --css_graf_font_titoli:"Bricolage Grotesque","Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --css_graf_font_testo:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  background:var(--css_graf_sfondo);
  color:var(--css_graf_inchiostro);
  font-family:var(--css_graf_font_testo);
  font-size:16px;
  line-height:1.55;
  text-align:left;
  -webkit-text-size-adjust:100%;
}

/* reset degli elementi HTML usati: annulla stili ereditati dal sito */
#css_graf_app :is(div,section,h1,h2,h3,p,ul,li,button,input,label,span,small,b,strong){
  all:revert;
  box-sizing:border-box;
  font-family:inherit;
  color:inherit;
}
#css_graf_app svg.css_graf_svg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  max-width:none; display:block; margin:0; padding:0; border:0;
}

/* ---------- layout ---------- */
#css_graf_app .css_graf_pagina{max-width:1200px; margin:0 auto; padding:clamp(18px,4cqw,44px)}
#css_graf_app .css_graf_griglia{display:grid; gap:clamp(20px,3cqw,44px); align-items:start}
@container css_graf_app (min-width:880px){
  #css_graf_app .css_graf_griglia{grid-template-columns:minmax(300px,380px) 1fr}
  #css_graf_app .css_graf_pannello{position:sticky; top:20px}
}

#css_graf_app .css_graf_marchio{font-weight:700; color:var(--css_graf_accento); font-size:15px; display:inline-block}
#css_graf_app .css_graf_h1{
  font-family:var(--css_graf_font_titoli); font-weight:800;
  font-size:clamp(30px,4.6cqw,46px); line-height:1.04; letter-spacing:-.02em;
  margin:8px 0 12px; padding:0; color:var(--css_graf_inchiostro);
}
#css_graf_app .css_graf_lead{color:var(--css_graf_inchiostro2); margin:0 0 22px; max-width:34em; font-size:16px}

/* ---------- box ThankYouJill / utente ---------- */
#css_graf_app .css_graf_box_riga{display:flex; gap:14px; margin:0 0 22px}
#css_graf_app .css_graf_box{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; margin:0; padding:12px 14px; cursor:pointer;
  background:var(--css_graf_carta); color:var(--css_graf_inchiostro);
  border:2px solid var(--css_graf_linea); border-radius:16px;
  font:inherit; line-height:1.25;
}
#css_graf_app .css_graf_box:hover{border-color:var(--css_graf_accento)}
#css_graf_app .css_graf_box:focus-visible{outline:2px solid var(--css_graf_accento); outline-offset:3px}
#css_graf_app .css_graf_box[aria-pressed="true"]{border-color:var(--css_graf_accento); background:#E3F4EC; box-shadow:0 0 0 2px var(--css_graf_accento) inset}
#css_graf_app .css_graf_box[disabled]{cursor:default; opacity:.6}
#css_graf_app .css_graf_box_riga1{font-size:13px; font-weight:600; color:var(--css_graf_inchiostro2)}
#css_graf_app .css_graf_box_riga2{font-size:14px; font-weight:700; color:var(--css_graf_accento)}
#css_graf_app .css_graf_box_nr{
  font-family:var(--css_graf_font_titoli); font-weight:800; font-size:clamp(24px,3.4cqw,32px);
  letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums;
}

/* ---------- numero, cursore, pulsanti rapidi ---------- */
#css_graf_app .css_graf_conteggio{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
#css_graf_app .css_graf_num{
  font-family:var(--css_graf_font_titoli); font-weight:800; font-size:clamp(40px,6cqw,56px);
  color:var(--css_graf_inchiostro); background:transparent; border:0; border-bottom:3px solid var(--css_graf_linea);
  border-radius:0; width:6.2ch; padding:0; margin:0; line-height:1.1; box-shadow:none;
  -moz-appearance:textfield; appearance:textfield;
}
#css_graf_app .css_graf_num::-webkit-outer-spin-button,
#css_graf_app .css_graf_num::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
#css_graf_app .css_graf_num:focus{outline:none; border-bottom-color:var(--css_graf_accento)}
#css_graf_app .css_graf_parola{font-size:20px; font-weight:700; color:var(--css_graf_inchiostro2)}

#css_graf_app .css_graf_cursore{
  display:block; width:100%; margin:18px 0 6px; padding:0; height:34px; cursor:pointer;
  -webkit-appearance:none; appearance:none; background:transparent; border:0;
}
#css_graf_app .css_graf_cursore::-webkit-slider-runnable-track{height:10px; border-radius:6px; background:linear-gradient(90deg,var(--css_graf_accento) var(--css_graf_riemp,0%),var(--css_graf_linea) var(--css_graf_riemp,0%))}
#css_graf_app .css_graf_cursore::-moz-range-track{height:10px; border-radius:6px; background:var(--css_graf_linea)}
#css_graf_app .css_graf_cursore::-moz-range-progress{height:10px; border-radius:6px; background:var(--css_graf_accento)}
#css_graf_app .css_graf_cursore::-webkit-slider-thumb{-webkit-appearance:none; width:30px; height:30px; margin-top:-10px; border-radius:50%; background:var(--css_graf_carta); border:4px solid var(--css_graf_accento); box-shadow:0 2px 6px rgba(20,60,35,.25)}
#css_graf_app .css_graf_cursore::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--css_graf_carta); border:4px solid var(--css_graf_accento)}
#css_graf_app .css_graf_cursore:focus-visible{outline:2px solid var(--css_graf_accento); outline-offset:4px; border-radius:8px}

#css_graf_app .css_graf_rapidi{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px}
#css_graf_app .css_graf_rapido{
  font:inherit; font-size:14px; font-weight:700; color:var(--css_graf_inchiostro2); margin:0;
  background:transparent; border:1.5px solid var(--css_graf_linea); border-radius:999px; padding:3px 13px; cursor:pointer; line-height:1.5;
}
#css_graf_app .css_graf_rapido:hover{border-color:var(--css_graf_accento); color:var(--css_graf_inchiostro)}
#css_graf_app .css_graf_rapido[aria-pressed="true"]{background:var(--css_graf_accento); border-color:var(--css_graf_accento); color:#fff}
#css_graf_app .css_graf_rapido:focus-visible{outline:2px solid var(--css_graf_accento); outline-offset:2px}

/* ---------- scelte specie / età ---------- */
#css_graf_app .css_graf_gruppo{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
#css_graf_app .css_graf_chip{position:relative; cursor:pointer; display:inline-block; margin:0}
#css_graf_app .css_graf_chip input{position:absolute; opacity:0; top:0; left:0; width:100%; height:100%; margin:0; cursor:pointer}
#css_graf_app .css_graf_chip span{
  display:inline-block; padding:6px 14px; border-radius:10px; font-weight:600; font-size:15px; line-height:1.4;
  background:var(--css_graf_carta); border:1.5px solid var(--css_graf_linea); color:var(--css_graf_inchiostro);
}
#css_graf_app .css_graf_chip_giovane span{background:var(--css_graf_giovane); border-color:var(--css_graf_giovane_bordo)}
#css_graf_app .css_graf_chip_adulto span{background:var(--css_graf_adulto); border-color:var(--css_graf_adulto_bordo)}
#css_graf_app .css_graf_chip input:checked + span{background:var(--css_graf_inchiostro); color:var(--css_graf_sfondo); border-color:var(--css_graf_inchiostro)}
#css_graf_app .css_graf_chip input:focus-visible + span{outline:2px solid var(--css_graf_accento); outline-offset:2px}

#css_graf_app .css_graf_frase{
  margin:8px 0 0; padding:14px 16px; font-size:16px;
  border-left:4px solid var(--css_graf_accento); background:var(--css_graf_carta); border-radius:0 12px 12px 0;
}
#css_graf_app .css_graf_frase strong{font-family:var(--css_graf_font_titoli); font-weight:700}

/* ---------- palco: SVG + layer in percentuale ---------- */
#css_graf_app .css_graf_palco_box{width:100%; max-width:780px; margin:0 auto}
#css_graf_app .css_graf_palco{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  border-radius:28px; background:var(--css_graf_cielo);
  container-type:inline-size; container-name:css_graf_palco;
}
#css_graf_app .css_graf_bolla,
#css_graf_app .css_graf_foresta_albero,
#css_graf_app .css_graf_radice_extra,
#css_graf_app .css_graf_polvere,
#css_graf_app #css_graf_falda{transition:transform .6s cubic-bezier(.3,1.3,.5,1),opacity .6s ease}
#css_graf_app .css_graf_bolla{transform-box:fill-box; transform-origin:center}

#css_graf_app .css_graf_tag{
  position:absolute; transform:translate(-50%,-50%); margin:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; line-height:1.1;
}
#css_graf_app .css_graf_tag:focus-visible{outline:2px solid var(--css_graf_inchiostro); outline-offset:4px; border-radius:12px}
#css_graf_app .css_graf_t_nome{font-weight:700; font-size:clamp(9px,1.75cqw,15px)}
#css_graf_app .css_graf_t_val{
  font-family:var(--css_graf_font_titoli); font-weight:800; font-size:clamp(14px,4.4cqw,40px);
  letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums;
}
#css_graf_app .css_graf_t_val small{font-size:.5em; font-weight:700; margin-left:.12em; letter-spacing:0}
#css_graf_app .css_graf_t_sub{font-size:clamp(8px,1.5cqw,13px); opacity:.9}
#css_graf_app .css_graf_t_extra{font-size:clamp(8px,1.4cqw,12px); opacity:.85; margin-top:.35em; max-width:16cqw}

#css_graf_app .css_graf_tag_bolla{color:#fff}
#css_graf_app .css_graf_t_simbolo{font-family:var(--css_graf_font_titoli); font-weight:800; font-size:clamp(16px,5.4cqw,50px); line-height:.95}
#css_graf_app .css_graf_piccola .css_graf_t_simbolo{font-size:clamp(13px,3.8cqw,36px)}
#css_graf_app .css_graf_piccola .css_graf_t_val{font-size:clamp(12px,3.2cqw,30px)}

#css_graf_app .css_graf_tag_pill{
  background:var(--css_graf_etichetta); border:1.5px solid var(--css_graf_linea); border-radius:14px;
  padding:.8cqw 1.4cqw; max-width:25cqw; color:var(--css_graf_inchiostro);
}
#css_graf_app .css_graf_tag_pill.css_graf_suolo{background:var(--css_graf_etichetta_suolo); border-color:transparent; color:#FFF6E8}
#css_graf_app .css_graf_tag_pill.css_graf_acqua{background:rgba(20,70,110,.75); border-color:transparent; color:#EAF6FF}
#css_graf_app .css_graf_tag_pill[aria-pressed="true"]{border-color:var(--css_graf_accento); box-shadow:0 0 0 2px var(--css_graf_accento)}

@container css_graf_palco (max-width:560px){
  #css_graf_app .css_graf_t_extra{display:none}
  #css_graf_app .css_graf_tag_pill{padding:.6cqw 1cqw}
}
@container css_graf_palco (max-width:460px){
  #css_graf_app .css_graf_piccola .css_graf_t_sub,
  #css_graf_app .css_graf_tag_pill .css_graf_t_sub{display:none}
  #css_graf_app .css_graf_t_nome{font-size:9px}
  #css_graf_app .css_graf_t_val{font-size:15px}
  #css_graf_app .css_graf_piccola .css_graf_t_val{font-size:13px}
  #css_graf_app .css_graf_tag_pill{border-radius:10px; padding:4px 6px}
}

/* ---------- spiegazione ---------- */
#css_graf_app .css_graf_spiega{margin-top:18px; padding:18px 20px; background:var(--css_graf_carta); border-radius:18px; border:1.5px solid var(--css_graf_linea); min-height:120px}
#css_graf_app .css_graf_h3{font-family:var(--css_graf_font_titoli); font-weight:700; font-size:19px; margin:0 0 5px; padding:0; line-height:1.25}
#css_graf_app .css_graf_p{margin:0; color:var(--css_graf_inchiostro2); max-width:62ch; font-size:16px}
#css_graf_app .css_graf_suggerimento{font-size:14px; color:var(--css_graf_inchiostro2); margin:10px 0 0}

/* ---------- altri benefici ---------- */
#css_graf_app .css_graf_altri{margin-top:clamp(36px,5cqw,64px)}
#css_graf_app .css_graf_h2{font-family:var(--css_graf_font_titoli); font-weight:800; font-size:clamp(24px,2.8cqw,32px); margin:0 0 14px; padding:0; letter-spacing:-.01em; line-height:1.2}
#css_graf_app .css_graf_elenco{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 28px; margin:0; padding:0; list-style:none}
#css_graf_app .css_graf_voce{border-top:2px solid var(--css_graf_linea); padding:14px 0 22px; margin:0; list-style:none}
#css_graf_app .css_graf_cifra{display:block; font-family:var(--css_graf_font_titoli); font-size:clamp(26px,2.8cqw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
#css_graf_app .css_graf_cifra small{font-size:.55em; font-weight:700; margin-left:.15em}
#css_graf_app .css_graf_voce_tit{display:block; font-weight:700; margin:4px 0 2px}
#css_graf_app .css_graf_voce_testo{margin:0; font-size:14.5px; color:var(--css_graf_inchiostro2)}

#css_graf_app .css_graf_note{margin-top:28px; font-size:14px; color:var(--css_graf_inchiostro2); max-width:78ch}
#css_graf_app .css_graf_note .css_graf_h3{font-size:16px; color:var(--css_graf_inchiostro)}
#css_graf_app .css_graf_note .css_graf_p{font-size:14px; margin:0 0 10px}

@media (prefers-reduced-motion: reduce){
  #css_graf_app .css_graf_bolla,
  #css_graf_app .css_graf_foresta_albero,
  #css_graf_app .css_graf_radice_extra,
  #css_graf_app .css_graf_polvere,
  #css_graf_app #css_graf_falda{transition:none}
}