/* =========================================================
   PENDOLO DOPPIO – layout del simulatore

   Va caricato DOPO stile.css: riscrive solo le regole di
   layout del simulatore, tutto il resto (colori, font,
   slider, interruttori) resta quello di stile.css.

   Desktop (>900px): animazione a sinistra, parametri a destra.
   Tablet e smartphone: animazione in alto con i pulsanti
   subito sotto, parametri in un pannello ripiegabile.
========================================================= */

/* ---------------------------------------------------------
   Allineamento: testo e simulatore condividono il bordo sinistro
--------------------------------------------------------- */

.laboratorio-testata {
  margin: 0 0 30px;
}

.laboratorio-spiegazione {
  margin: 36px 0 0;
}

/* ---------------------------------------------------------
   Contenitore e griglia principale
--------------------------------------------------------- */

.simulatore {
  margin: 25px 0 0;
  padding: 22px;
}

.simulatore-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.area-simulazione {
  overflow: visible; /* altrimenti l'anello di focus dei pulsanti viene tagliato */
}

/* ---------------------------------------------------------
   Barra con legenda e misure
--------------------------------------------------------- */

.canvas-toolbar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: 0;
  gap: 4px 16px;
  padding: 8px 12px;
}

/* ---------------------------------------------------------
   Area di disegno
   Il riquadro è quadrato: il pendolo con le braccia tese
   descrive un cerchio attorno al perno, che sta al centro.
   Il canvas riempie il riquadro in modo assoluto, così le
   sue dimensioni non dipendono da quelle del proprio disegno.
--------------------------------------------------------- */

.canvas-frame {
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: 78vh;
}

#pendulum-canvas {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}

/* ---------------------------------------------------------
   Pulsanti sotto l'animazione
--------------------------------------------------------- */

.azioni-simulazione {
  grid-template-columns: 1.5fr 1fr;
  gap: 10px;
  margin: 12px 0 0;
}

.button-principale {
  grid-column: auto;
}

.azioni-simulazione .button {
  min-height: 48px;
  font-size: 0.85em;
}

/* ---------------------------------------------------------
   Pannello dei parametri (<details>)
--------------------------------------------------------- */

.pannello-controlli {
  padding: 0;
}

.pannello-controlli > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 18px;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--accent-dark);
  cursor: pointer;
  list-style: none;
}

.pannello-controlli > summary::-webkit-details-marker {
  display: none;
}

.pannello-controlli > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin 0.2s ease;
}

.pannello-controlli[open] > summary {
  border-bottom: 1px solid var(--border-soft);
}

.pannello-controlli[open] > summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.pannello-controlli > summary:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: -3px;
  border-radius: 12px;
}

.controlli-corpo {
  padding: 18px;
}

.controlli-intestazione h3 {
  display: block;
}

/* Una colonna nel pannello laterale, più colonne se c'è spazio.
   I gruppi hanno l'altezza del loro contenuto (in più colonne si allineano
   da soli), e la distanza tra loro la decide il gap della griglia. */
.controlli-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  align-items: stretch;
}

.controlli-grid .gruppo-controlli {
  height: auto;
  margin: 0;
}

.controlli-corpo .nota-controlli {
  margin-top: 16px;
}

.preset-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preset-row .button {
  min-height: 40px;
}

.gruppo-visualizzazione .button {
  width: 100%;
  margin-top: 14px;
  min-height: 40px;
}

/* Su desktop il pannello è sempre aperto e non serve il titolo cliccabile
   (lo script lo tiene aperto). */
@media (min-width: 901px) {
  .pannello-controlli > summary {
    display: none;
  }

  /* Il pannello dei parametri è lungo: l'animazione lo segue mentre si scorre,
     così si vede l'effetto di ogni modifica. */
  .area-simulazione {
    position: sticky;
    top: 16px;
  }
}

/* ---------------------------------------------------------
   Tablet e smartphone: una sola colonna
--------------------------------------------------------- */

@media (max-width: 900px) {
  .simulatore-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Su schermi medi l'animazione non deve diventare enorme */
  .area-simulazione {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  .pannello-controlli {
    max-width: 600px;
    margin: 0 auto;
  }

  .controlli-corpo {
    padding-top: 6px;
  }

  /* Il titolo è già nel pannello ripiegabile */
  .controlli-intestazione h3 {
    display: none;
  }
}

/* ---------------------------------------------------------
   Smartphone
--------------------------------------------------------- */

@media (max-width: 700px) {
  .simulatore {
    margin: 18px 0 0;
    padding: 10px;
    border-radius: 12px;
  }

  /* Animazione e pulsanti restano visibili mentre si scorrono i parametri */
  .area-simulazione {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 4px 0 10px;
    background: var(--bg-panel);
  }

  /* Con il pannello aperto l'animazione si rimpicciolisce un po',
     per lasciare spazio ai controlli */
  .simulatore-layout:has(.pannello-controlli[open]) .canvas-frame {
    max-height: 38vh;
  }

  .controlli-corpo {
    padding: 6px 14px 16px;
  }
}

/* Telefoni con schermo basso: ancora più spazio ai controlli */
@media (max-width: 700px) and (max-height: 700px) {
  .simulatore-layout:has(.pannello-controlli[open]) .canvas-frame {
    max-height: 30vh;
  }
}

@media (max-width: 380px) {
  .preset-row .button {
    font-size: 0.6em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pannello-controlli > summary::after {
    transition: none;
  }
}