/* Strumenti gratuiti (/tools): il calcolatore. Testata, testi e tabelle restano quelli delle guide (landing.css). */
.cm-calc-section { padding-block: 64px; }
.cm-calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--cm-space-5); align-items: start; margin-bottom: 64px; }
.cm-calc__form, .cm-calc__results { display: flex; flex-direction: column; gap: var(--cm-space-4); min-width: 0; }
.cm-calc__form { padding: var(--cm-space-5); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); box-shadow: var(--cm-shadow-sm); }
.cm-calc__group { display: flex; flex-direction: column; gap: var(--cm-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.cm-calc__legend { margin-bottom: var(--cm-space-2); padding: 0; font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-calc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-3); }
.cm-calc__field { min-width: 0; }
.cm-calc__field .cm-field-label { margin-bottom: var(--cm-space-1); }
.cm-calc__field .cm-field-hint { margin-top: var(--cm-space-1); }
.cm-calc__unit { position: relative; display: flex; align-items: center; }
.cm-calc__unit .cm-field-input { padding-right: var(--cm-space-6); }
.cm-calc__unit-sign { position: absolute; right: var(--cm-space-3); color: var(--cm-color-text-muted); font-size: var(--cm-font-md); pointer-events: none; }

.cm-calc__segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-1); padding: var(--cm-space-1); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-md); background: var(--cm-color-surface-subtle); }
.cm-calc__segment { position: relative; display: block; margin: 0; cursor: pointer; }
.cm-calc__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cm-calc__segment-text { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: var(--cm-space-1) var(--cm-space-2); border-radius: var(--cm-radius-sm); color: var(--cm-color-text-secondary); font-size: var(--cm-font-body); font-weight: var(--cm-weight-medium); text-align: center; }
.cm-calc__radio:checked + .cm-calc__segment-text { background: var(--cm-color-surface-raised); box-shadow: var(--cm-shadow-sm); color: var(--cm-color-brand); font-weight: var(--cm-weight-semibold); }
.cm-calc__radio:focus-visible + .cm-calc__segment-text { box-shadow: var(--cm-shadow-focus); }

/* Sul telefono i risultati finiscono sotto i campi: alla prima modifica compare una riga che resta in vista. */
.cm-calc__live { display: none; }

.cm-calc__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-3); }
.cm-calc__stats .cm-stat { min-width: 0; }
.cm-calc__note { margin: 0; color: var(--cm-color-text-secondary); font-size: var(--cm-font-body); line-height: var(--cm-leading-normal); }
.cm-calc__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-3); }
.cm-calc__card { display: flex; flex-direction: column; gap: var(--cm-space-2); min-width: 0; padding: var(--cm-space-4); border: 1px solid var(--cm-color-border-default); border-radius: var(--cm-radius-lg); background: var(--cm-color-surface-raised); }
.cm-calc__card-title { margin: 0; font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); }
.cm-calc__figure { color: var(--cm-color-text-primary); font-size: var(--cm-font-2xl); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }
.cm-calc__headline { margin: 0; color: var(--cm-color-text-primary); font-size: var(--cm-font-lg); font-weight: var(--cm-weight-bold); line-height: var(--cm-leading-snug); }
.cm-calc__small { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); line-height: var(--cm-leading-normal); }
.cm-calc__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-space-2); margin: 0; font-size: var(--cm-font-md); font-weight: var(--cm-weight-semibold); }
.cm-calc__invite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cm-space-3); margin-top: var(--cm-space-2); padding: var(--cm-space-4); border-radius: var(--cm-radius-md); background: var(--cm-color-status-info-bg); }
.cm-calc__invite-text { margin: 0; font-size: var(--cm-font-md); line-height: var(--cm-leading-normal); }
.cm-calc__method { margin: 0; color: var(--cm-color-text-muted); font-size: var(--cm-font-sm); line-height: var(--cm-leading-normal); }
.cm-calc__formula { margin: 0; padding: var(--cm-space-3) var(--cm-space-4); border-radius: var(--cm-radius-md); background: var(--cm-color-surface-subtle); font-family: var(--cm-font-family-mono); font-size: var(--cm-font-body); line-height: var(--cm-leading-normal); }

@media (max-width: 992px) {
  /* Un campo raggiunto con la tastiera non resta sotto la riga dei risultati. */
  html { scroll-padding-bottom: 88px; }
  .cm-calc { grid-template-columns: minmax(0, 1fr); margin-bottom: 48px; }
  .cm-calc__live {
    position: sticky; bottom: var(--cm-space-2); z-index: 1; display: block; padding: var(--cm-space-2) var(--cm-space-3);
    border-radius: var(--cm-radius-md); background: var(--cm-color-text-primary); color: var(--cm-color-surface-raised);
    font-size: var(--cm-font-body); font-weight: var(--cm-weight-semibold); line-height: var(--cm-leading-snug); text-align: center;
  }
}

@media (max-width: 576px) {
  .cm-calc-section { padding-block: 32px; }
  .cm-calc__form { padding: var(--cm-space-4); }
  /* Il guadagno sta da solo su una riga: in tre colonne gli importi andrebbero a capo. */
  .cm-calc__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-space-2); }
  .cm-calc__stats .cm-stat:first-child { grid-column: 1 / -1; }
  .cm-calc__cards { grid-template-columns: minmax(0, 1fr); gap: var(--cm-space-2); }
  .cm-calc__invite .cm-landing-btn { width: 100%; }
}

@media (pointer: coarse) {
  .cm-calc__segment-text { min-height: 44px; }
}