/* ==========================================================================
   Calcolatore "quanto ti costa farlo a mano"
   Markup: pagine/calcolatore.php — comportamento: assets/js/ps-calcolatore.js

   Namespace `.psc`, sempre dentro `.ps-pg`: i colori, il font e i raggi
   vengono dai token --psp-* del modulo pagine, non da una palette sua. Il
   prototipo (Asset/calcolatore-press-start.html) aveva Poppins/Roboto e un
   blu suo: due sistemi grafici sulla stessa pagina si vedono.

   Il pannello dei risultati resta scuro, come nel prototipo: e' lo stesso
   nero di `.psp-dark`, quindi in pagina legge come una banda del sito e non
   come un widget incollato.
   ========================================================================== */

.ps-pg .psc { margin-top: 44px; }

/* --- come funziona ------------------------------------------------------- */

.ps-pg .psc-how {
  border: 1.5px dashed rgba(61, 24, 240, .35);
  background: rgba(61, 24, 240, .04);
  border-radius: 18px; padding: 18px 22px; margin-bottom: 26px;
}
.ps-pg .psc-how .psp-label { color: var(--psp-blu); margin-bottom: 12px; }
.ps-pg .psc-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.ps-pg .psc-steps li {
  position: relative; display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 500; padding-right: 26px;
}
/* La freccetta dice che i tre passi sono in ordine, non tre voci qualsiasi. */
.ps-pg .psc-steps li:not(:last-child)::after {
  content: '›'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 24px; line-height: 1; color: var(--psp-blu); opacity: .7;
}
.ps-pg .psc-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--psp-blu); color: #fff; font-size: 14px; font-weight: 600;
  display: grid; place-items: center;
}

/* --- impianto ------------------------------------------------------------ */

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

.ps-pg .psc-panel {
  background: var(--psp-surface); border: 1px solid var(--psp-line);
  border-radius: 22px; padding: 30px;
}

/* --- scelta dell'attivita' ----------------------------------------------- */

.ps-pg .psc-fs { border: 0; margin: 0; padding: 0; }
.ps-pg .psc-leg { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 14px; }
.ps-pg .psc-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-pg .psc-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left; font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--psp-ink); background: var(--psp-desk);
  border: 2px solid transparent; border-radius: 14px; padding: 12px 11px;
  cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
}
.ps-pg .psc-chip .psp-ic { color: var(--psp-blu); }
.ps-pg .psc-chip:hover { border-color: var(--psp-blu); transform: translateY(-1px); }
.ps-pg .psc-chip[aria-pressed="true"] {
  background: var(--psp-g); color: #fff; border-color: transparent;
}
.ps-pg .psc-chip[aria-pressed="true"] .psp-ic { color: #fff; }
.ps-pg .psc-altro {
  font-size: 13px; line-height: 1.6; color: var(--psp-mut); margin: 14px 0 0;
}

/* --- cursori -------------------------------------------------------------- */

.ps-pg .psc-ctrl { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--psp-line); }
.ps-pg .psc-ctrlh {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.ps-pg .psc-ctrlh label { font-size: 15px; font-weight: 600; }
.ps-pg .psc-hint { display: block; font-size: 12.5px; font-weight: 400; color: var(--psp-mut); margin-top: 3px; }
.ps-pg .psc-num {
  flex: none; display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 14px; font-weight: 600; color: var(--psp-mut);
  background: var(--psp-desk); border-radius: 10px; padding: 7px 11px;
}
.ps-pg .psc-num input {
  width: 4.5ch; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 17px; font-weight: 700; color: var(--psp-ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
.ps-pg .psc-num input:focus-visible { outline: 2px solid var(--psp-blu); outline-offset: 3px; }
/* Le frecce su/giu' tolgono larghezza al numero e non servono: c'e' il cursore. */
.ps-pg .psc-num input::-webkit-outer-spin-button,
.ps-pg .psc-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-pg .psc-num input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* La parte percorsa e' colorata con un gradiente fermo e una variabile --p
   che aggiorna il JS: su `input[type=range]` non c'e' modo di colorare solo
   il tratto a sinistra del pollice senza ridisegnare tutto il controllo. */
.ps-pg .psc-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 99px; background: var(--psp-mut-3); cursor: pointer;
  background-image: var(--psp-g); background-repeat: no-repeat;
  background-size: var(--p, 0%) 100%;
}
.ps-pg .psc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; border: 2px solid var(--psp-blu);
  box-shadow: 0 2px 8px rgba(12, 12, 18, .18); cursor: grab;
}
.ps-pg .psc-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid var(--psp-blu); box-shadow: 0 2px 8px rgba(12, 12, 18, .18); cursor: grab;
}
.ps-pg .psc-range:focus-visible { outline: 2px solid var(--psp-blu); outline-offset: 4px; }

/* --- risultato ------------------------------------------------------------ */

.ps-pg .psc-res {
  background: var(--psp-black); color: #fff; border-radius: 22px; padding: 30px;
  position: sticky; top: 24px;
}
.ps-pg .psc-res .psp-label { color: rgba(255, 255, 255, .5); }
.ps-pg .psc-ore {
  font-size: 68px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  margin: 10px 0 0; font-variant-numeric: tabular-nums;
}
.ps-pg .psc-ore small { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; margin-top: 8px; }
.ps-pg .psc-orec { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin: 6px 0 0; }

.ps-pg .psc-mt {
  font-size: 15px; font-weight: 600; margin: 26px 0 12px;
  padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.ps-pg .psc-money { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ps-pg .psc-money b {
  display: block; font-size: 30px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* Il dato annuale e' quello che fa alzare il sopracciglio: si colora. */
.ps-pg .psc-money div:last-child b {
  background: linear-gradient(90deg, #ff6b80, #cf3dff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-pg .psc-money span { font-size: 13px; color: rgba(255, 255, 255, .55); }

.ps-pg .psc-anno { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ps-pg .psc-annoT { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.ps-pg .psc-annoP { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .6); margin: 0 0 14px; }
.ps-pg .psc-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.ps-pg .psc-grid i {
  display: block; aspect-ratio: 1; border-radius: 3px;
  background: rgba(255, 255, 255, .1); transition: background-color .25s;
}
.ps-pg .psc-grid i.is-on { background: var(--psp-g); }

.ps-pg .psc-fte { margin-top: 20px; }
.ps-pg .psc-fte p { margin: 0; font-size: 14.5px; font-weight: 500; }
.ps-pg .psc-fteb {
  height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1);
  overflow: hidden; margin-top: 8px;
}
.ps-pg .psc-fteb span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #e9435a, #cf3dff); transition: width .3s ease;
}

.ps-pg .psc-cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ps-pg .psc-cta .psp-btn { display: flex; width: 100%; }
.ps-pg .psc-cnota { font-size: 13px; color: rgba(255, 255, 255, .6); margin: 10px 0 0; text-align: center; }

.ps-pg .psc-nota {
  font-size: 12.5px; line-height: 1.6; color: var(--psp-mut-2);
  margin: 26px auto 0; max-width: 78ch; text-align: center;
}

/* --- responsivo ----------------------------------------------------------- */

@media (max-width: 1023px) {
  .ps-pg .psc-layout { grid-template-columns: 1fr; }
  /* Appiccicato in alto funziona solo di fianco: a una colonna il riquadro
     coprirebbe i cursori che si stanno muovendo. */
  .ps-pg .psc-res { position: static; }
  .ps-pg .psc-ore { font-size: 56px; }
}
@media (max-width: 781px) {
  .ps-pg .psc-steps { grid-template-columns: 1fr; }
  .ps-pg .psc-steps li { padding-right: 0; }
  .ps-pg .psc-steps li::after { display: none; }
  .ps-pg .psc-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-pg .psc-panel, .ps-pg .psc-res { padding: 22px; }
  .ps-pg .psc-money b { font-size: 26px; }
  .ps-pg .psc-grid { grid-template-columns: repeat(15, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-pg .psc-chip, .ps-pg .psc-grid i, .ps-pg .psc-fteb span { transition: none; }
}