/* ============================================================================
   ScuolaGo · Corso DigComp 2.2 — funzioni P2 di studio (dc-studio.css, classi dst-*)
   Previsione a forchetta, i 5 buchi, ripasso verso l'esame, ritmo e strategie, domande a variazioni.
   Solo variabili di dc.css: tema scuro, contrasti e aree come il resto del corso. Prima il telefono.
   ========================================================================== */

/* ---------- previsione ---------- */
.dst-prev{padding:20px 20px 14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dst-prev-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dst-segm{flex-wrap:wrap;max-width:100%}
.dst-segm button{min-height:44px;white-space:normal;text-align:left;line-height:1.2}
.dst-prev-corpo{min-height:150px}
.dst-prev-ris{display:flex;flex-direction:column;gap:8px}
.dst-prev-ris p{margin:0}
.dst-prev-tit{font-family:var(--dc-serif);font-size:clamp(20px,3.4vw,26px);font-weight:700;line-height:1.25;color:var(--dc-testo)}
.dst-prev-riga{color:var(--dc-testo-2);font-size:15px;line-height:1.55}
.dst-forchetta{display:block;width:100%;max-width:440px;height:auto;margin:2px 0 0}
.dst-f-asse{stroke:var(--dc-bordo-2);stroke-width:3;stroke-linecap:round}
.dst-f-tacca{stroke:var(--dc-bordo-2);stroke-width:2}
.dst-f-num{fill:var(--dc-tenue);font:600 12px/1 var(--dc-sans)}
.dst-f-banda{fill:var(--dc-acc-2);opacity:.38}
.dst-f-punto{fill:var(--dc-acc);stroke:var(--dc-sup);stroke-width:3}
html[data-theme=dark] .dst-f-banda{opacity:.5}
.dst-aree{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.dst-aree li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,auto);align-items:center;gap:10px;font-size:14px;color:var(--dc-testo-2)}
.dst-aree b{color:var(--dc-area-t)}
.dst-aree-barra{position:relative;height:10px;border-radius:6px;background:var(--dc-sup-3)}
.dst-aree-barra i{position:absolute;top:0;bottom:0;min-width:10px;border-radius:6px;background:var(--dc-area);opacity:.4}
.dst-aree-barra em{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--dc-area-pieno);border:2px solid var(--dc-sup)}
.dst-quota,.dst-presto{display:flex;gap:8px;align-items:flex-start;font-weight:600;color:var(--dc-testo);line-height:1.5}
.dst-quota .dc-ico,.dst-presto .dc-ico{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--dc-acc)}
.dst-presto{font-weight:500;background:var(--dc-avv-bg);border-radius:var(--dc-r-s);padding:10px 12px}
.dst-presto .dc-ico{color:var(--dc-avv)}
.dst-aff{font-size:13.5px;color:var(--dc-tenue);line-height:1.5}
.dst-aff::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:0;border-radius:50%;background:var(--dc-tenue)}
.dst-aff--bassa::before{background:var(--dc-err)}
.dst-aff--media::before{background:var(--dc-avv)}
.dst-aff--buona::before{background:var(--dc-ok)}
.dst-frase{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--dc-testo-2);border-top:1px solid var(--dc-bordo);padding-top:10px}
.dst-frase .dc-ico{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--dc-avv)}
.dst-regole{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14.5px;line-height:1.55;color:var(--dc-testo-2)}

/* ---------- i 5 buchi ---------- */
.dst-buchi{min-width:0}
.dst-cancello,.dst-vuoto{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:var(--dc-r-m);background:var(--dc-sup-2);border:1px solid var(--dc-bordo);line-height:1.5}
.dst-cancello .dc-ico,.dst-vuoto .dc-ico{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--dc-acc)}
.dst-buchi-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dst-buco{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px;border-radius:var(--dc-r-m);background:var(--dc-sup);border:1px solid var(--dc-bordo);border-left:5px solid var(--dc-area)}
.dst-buco--cancello{box-shadow:0 0 0 2px var(--dc-avv-bg)}
.dst-buco-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 16px/1 var(--dc-sans);color:#fff;background:var(--dc-area-pieno)}
.dst-buco-c{min-width:0;display:flex;flex-direction:column;gap:6px}
.dst-buco-c p{margin:0}
.dst-buco-t{line-height:1.4;color:var(--dc-testo)}
.dst-buco-t b{color:var(--dc-area-t);margin-right:2px}
.dst-buco-t .dc-badge{margin-left:8px;vertical-align:2px}
.dst-buco-p{font-size:14px;color:var(--dc-testo-2);line-height:1.5}
.dst-perche{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14.5px;line-height:1.5;color:var(--dc-testo-2)}
.dst-buco-az{gap:8px;flex-wrap:wrap}
.dst-buchi .dc-btn--piccolo,.dst-var .dc-btn{min-height:44px}
.dst-buco-serie:empty{display:none}
.dst-buco-serie{margin-top:6px}
.dst-link{margin:12px 0 0;font-weight:600}
.dst-link a{color:var(--dc-acc)}

/* ---------- verso l'esame ---------- */
.dst-verso{padding:16px 18px}
.dst-verso-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dst-verso-l li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.dst-verso-l li>span .dc-ico{width:22px;height:22px;color:var(--dc-acc)}
.dst-verso-l p{margin:0;line-height:1.55;color:var(--dc-testo-2)}
.dst-verso-l b{color:var(--dc-testo)}

/* ---------- ritmo e strategie (intro del simulatore) ---------- */
.dst-strat{margin:6px 0 4px}
.dst-ritmo{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;margin:8px 0 12px;border-radius:var(--dc-r-m);background:var(--dc-sup-2);border:1px solid var(--dc-bordo)}
.dst-ritmo--lento,.dst-ritmo--veloce{background:var(--dc-avv-bg)}
.dst-ritmo-ico .dc-ico{width:24px;height:24px;color:var(--dc-acc)}
.dst-ritmo p{margin:0;line-height:1.55}
.dst-strat-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dst-strat-l li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.dst-strat-ico .dc-ico{width:20px;height:20px;color:var(--dc-avv);margin-top:3px}
.dst-strat-l p{margin:0;line-height:1.55}
.dst-fonte,.dst-nota{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--dc-tenue)}
.dst-fonte a{color:var(--dc-acc);overflow-wrap:anywhere}
.dst-nota{font-style:italic}
.dst-dv{font-size:11px;vertical-align:1px}
.dst-strat-prev{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:var(--dc-r-s);background:var(--dc-sup-2);line-height:1.5}
.dst-strat-prev:empty{display:none}
.dst-strat-prev .dc-ico{width:20px;height:20px;color:var(--dc-acc);margin-top:2px}
.dst-strat-prev a{color:var(--dc-acc);font-weight:600}

/* ---------- prova di «Oggi»: perché queste domande ---------- */
.dst-nota-prova{margin:0 0 14px;padding:12px 14px;border-radius:var(--dc-r-m);background:var(--dc-sup-2);border:1px solid var(--dc-bordo)}
.dst-nota-t{display:flex;gap:8px;align-items:center;margin:0 0 6px;font-weight:700;color:var(--dc-testo)}
.dst-nota-t .dc-ico{width:20px;height:20px;color:var(--dc-acc)}
.dst-nota-prova ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14.5px;line-height:1.5;color:var(--dc-testo-2)}
.dst-nota-prova b{color:var(--dc-testo)}

/* ---------- casa del simulatore ---------- */
.dst-casa-g{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.dst-casa-dx{min-width:0}
.dst-casa-dx .dce-h3{margin:4px 0 10px}
.dst-var{margin-top:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.dst-var-t{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.dst-var-t p{margin:4px 0 0;color:var(--dc-testo-2);line-height:1.55}
.dst-var-t .dce-h3{margin:0}
.dst-var-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--dc-sup-3)}
.dst-var-ico .dc-ico{width:22px;height:22px;color:var(--dc-acc)}
.dst-var-zona:empty{display:none}
@media (min-width:900px){
  .dst-casa-g{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}

/* ---------- telefono stretto ---------- */
@media (max-width:420px){
  .dst-prev{padding:16px 14px 12px}
  .dst-buco{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:12px}
  .dst-buco-n{width:30px;height:30px;font-size:14px}
  .dst-aree li{grid-template-columns:54px minmax(0,1fr) auto;gap:8px;font-size:13.5px}
  .dst-segm button{padding:7px 10px}
}

/* ---------- movimento ridotto, colori forzati, stampa ---------- */
@media (prefers-reduced-motion:reduce){
  .dst-prev *,.dst-buchi *{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
  .dst-f-banda{fill:Highlight;opacity:1}
  .dst-f-punto{fill:CanvasText}
  .dst-buco{border-left-color:CanvasText}
}
@media print{
  .dst-segm,.dst-buco-az,.dst-buco-serie,.dst-var,.dst-acc{display:none!important}
  .dst-buco,.dst-prev{break-inside:avoid}
}

/* integrazione finale (20/10/2026): la ragione comune dei buchi una volta sola; i dubbi delle strategie in un riquadro chiuso */
.dst-perche-comune{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--dc-testo-2)}
.dst-dubbi{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14.5px;line-height:1.5;color:var(--dc-testo-2)}