/* tools.css - stili per le pagine strumento (simulatore mutuo, costi).
   Riusa i token di style.css (--navy, --orange, --cream, --border, --radius, font).
   Nessuna dipendenza esterna. Sito solo tema chiaro. */

:root{
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --navy-soft: rgba(14,52,115,.07);
  --orange-soft: rgba(255,107,0,.10);
  --inset: #F4F1EE;
  --pos: #1B8A5A;
}

/* Intestazione pagina strumento */
.tool-hero{ padding: 56px 0 8px; }
.tool-hero .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.tool-hero .eyebrow::before{ content:""; width:24px; height:2px; background:var(--orange); display:inline-block; }
.tool-hero h1{ max-width: 16ch; }
.tool-hero .hero-lead{ max-width: 62ch; margin-top: 4px; }
.tool-back{
  display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  color: var(--text-light); margin-bottom: 22px;
}
.tool-back:hover{ color: var(--orange); }

.tool-section{ padding: 40px 0 88px; }

/* Numeri tabellari ovunque nei tool */
.mono, .bigfig, .metric-v, .lrow .amt, .brow .rate, .brow .cost,
.tiers td.rate, .result .v, .horizon .val, .field .input input{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Card interne più compatte del card standard */
.tool-card{
  background: var(--card-bg); border:1px solid var(--border);
  border-radius: var(--radius); padding: clamp(20px,2.6vw,30px);
}
.tool-card:hover{ transform:none; box-shadow:none; }
.tool-card-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-heading);
  font-weight:700; font-size:16px; color:var(--navy); margin:0 0 4px; }
.tool-card-title .tick{ width:8px; height:8px; border-radius:2px; background:var(--orange); flex:none; }
.tool-card-sub{ color:var(--text-light); font-size:14px; margin:0 0 20px; }

/* ---- Campi input ---- */
.groups{ display:flex; flex-direction:column; gap:0; }
.igroup + .igroup{ margin-top:22px; padding-top:22px; border-top:1px solid var(--border); }
.igroup-h{ font-family:var(--font-heading); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); margin:0 0 14px; font-weight:700; display:flex; align-items:center; gap:9px; }
.igroup-h .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field.wide{ grid-column:1 / -1; }
.field label{ font-size:14px; color:var(--text); font-weight:500; }
.field .hint{ font-size:12px; color:var(--text-light); font-weight:400; }
.field .input{ display:flex; align-items:center; background:var(--inset);
  border:1px solid var(--border); border-radius:12px; padding:0 13px; transition:border-color .15s, box-shadow .15s; }
.field .input:focus-within{ border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.field .input input{ border:0; background:transparent; color:var(--navy); font-size:16px; font-weight:600;
  width:100%; padding:11px 0; min-width:0; text-align:right; -moz-appearance:textfield; }
.field .input input:focus{ outline:none; }
.field .input input::-webkit-outer-spin-button,
.field .input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field .input .unit{ font-size:13px; color:var(--text-light); padding-left:8px; white-space:nowrap; font-family:var(--mono); }
.field .input .unit.pre{ padding:0 8px 0 0; order:-1; }

.reset{ margin-top:22px; background:transparent; border:1.5px solid var(--border); color:var(--text);
  font-family:var(--font-body); font-size:14px; font-weight:600; padding:10px 18px; border-radius:var(--radius);
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.reset:hover{ border-color:var(--navy); }

/* ---- Layout simulatore ---- */
.sim{ display:grid; grid-template-columns: 1.04fr 1fr; gap:22px; align-items:start; }
@media (max-width:900px){ .sim{ grid-template-columns:1fr; } }
.sim-results{ display:flex; flex-direction:column; gap:22px; }

.verdict{ overflow:hidden; padding:0; }
.horizon{ display:flex; flex-direction:column; gap:11px; padding:16px 22px; border-bottom:1px solid var(--border);
  background:var(--inset); }
.horizon-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.horizon label{ font-size:14px; color:var(--text); font-weight:500; }
.horizon .val{ font-weight:700; font-size:15px; color:var(--navy); white-space:nowrap; }
.horizon input[type=range]{ width:100%; display:block; }
.checkrow{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:14px; color:var(--text); line-height:1.45; }
.checkrow input{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--orange); flex:none; cursor:pointer; }
.checkrow .hint{ display:block; font-size:12px; color:var(--text-light); font-weight:400; }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:99px;
  background:var(--border); outline:none; cursor:pointer; margin:0; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--orange); border:3px solid var(--white); box-shadow:0 1px 5px rgba(14,52,115,.28); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--orange);
  border:3px solid var(--white); box-shadow:0 1px 5px rgba(14,52,115,.28); cursor:pointer; }
input[type=range]:focus-visible{ box-shadow:0 0 0 3px var(--orange-soft); }

.verdict-body{ padding:24px 22px; }
.verdict-tag{ font-family:var(--font-heading); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-light); margin:0 0 10px; font-weight:700; }
.verdict-h{ font-family:var(--font-heading); font-size:clamp(20px,2.6vw,25px); font-weight:700; line-height:1.2;
  margin:0 0 8px; color:var(--navy); }
.verdict-h .amt{ color:var(--v-color, var(--orange)); }
.verdict-p{ font-size:15px; color:var(--text-light); margin:0; }
.verdict-p b{ color:var(--navy); font-weight:600; }

.metrics{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border);
  border-top:1px solid var(--border); }
.metric{ background:var(--card-bg); padding:15px 22px; }
.metric-k{ font-size:12.5px; color:var(--text-light); margin:0 0 5px; display:flex; align-items:center; gap:7px; }
.metric-k .sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.metric-v{ font-size:19px; font-weight:700; color:var(--navy); }
.metric-v small{ font-size:12px; color:var(--text-light); font-weight:500; }

/* ---- Grafico ---- */
.chartcard{ margin-top:22px; }
.chart-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.legend{ display:flex; gap:18px; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text); font-weight:500; }
.legend i{ width:16px; height:3px; border-radius:2px; display:inline-block; }
.chart-wrap{ position:relative; margin-top:18px; }
#chart{ width:100%; display:block; overflow:visible; }
#chart text{ font-family:var(--mono); }
.tt{ position:absolute; pointer-events:none; background:var(--white); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 32px -12px rgba(14,52,115,.28); padding:10px 12px; font-size:13px;
  min-width:158px; transform:translate(-50%,-118%); opacity:0; transition:opacity .1s; z-index:5; }
.tt .yr{ font-family:var(--mono); font-size:11px; color:var(--text-light); letter-spacing:.04em; margin-bottom:6px; }
.tt .row{ display:flex; justify-content:space-between; gap:16px; align-items:center; margin-top:4px; }
.tt .row span{ display:inline-flex; align-items:center; gap:7px; color:var(--text-light); }
.tt .row i{ width:9px; height:9px; border-radius:3px; }
.tt .row b{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--navy); }

/* ---- Ledger / breakdown ---- */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
@media (max-width:760px){ .cols2{ grid-template-columns:1fr; } }
.ledger h4{ font-family:var(--font-heading); font-size:16px; margin:0 0 4px; font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:9px; }
.ledger h4 .sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.ledger .cap{ font-size:13px; color:var(--text-light); margin:0 0 16px; }
.lrow{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:15px; }
.lrow:last-child{ border-bottom:0; }
.lrow .lbl{ color:var(--text); display:flex; align-items:center; gap:7px; }
.lrow .amt{ color:var(--navy); white-space:nowrap; font-weight:600; }
.lrow .amt.sub{ color:var(--text-light); font-weight:500; }
.lrow.total{ font-weight:700; border-top:1.5px solid var(--border); border-bottom:0; margin-top:4px; padding-top:13px; }
.lrow.total .lbl{ color:var(--navy); }
.op{ color:var(--text-light); font-family:var(--mono); width:14px; text-align:center; flex:none; }

.tool-notes ul{ margin:6px 0 0; padding-left:20px; color:var(--text-light); font-size:14px; line-height:1.7; }
.tool-notes li{ margin-bottom:4px; }
.tool-notes b{ color:var(--navy); font-weight:600; }
.disclaimer{ margin-top:18px; font-size:12.5px; color:var(--text-light); border-left:2px solid var(--border);
  padding:4px 0 4px 14px; line-height:1.6; }
.disclaimer b{ color:var(--text); }

/* ---- Calcolatore costi ---- */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
@media (max-width:820px){ .calc{ grid-template-columns:1fr; gap:24px; } }
.calc .controls > label{ font-size:14px; color:var(--text); font-weight:500; display:block; margin-bottom:10px; }
.calc .input{ display:flex; align-items:center; background:var(--inset); border:1px solid var(--border);
  border-radius:14px; padding:0 15px; transition:border-color .15s, box-shadow .15s; }
.calc .input:focus-within{ border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.calc .input .unit.pre{ font-size:15px; color:var(--text-light); padding-right:8px; font-family:var(--mono); }
.calc .input input{ border:0; background:transparent; color:var(--navy); font-family:var(--mono); font-size:22px;
  font-weight:700; font-variant-numeric:tabular-nums; width:100%; padding:13px 0; min-width:0; -moz-appearance:textfield; }
.calc .input input:focus{ outline:none; }
.calc .input input::-webkit-outer-spin-button,
.calc .input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc input[type=range]{ margin:18px 0 6px; }
.rangelabels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--text-light); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{ background:var(--inset); border:1px solid var(--border); color:var(--text); font-family:var(--font-body);
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:99px; cursor:pointer; font-variant-numeric:tabular-nums; }
.chip:hover{ border-color:var(--orange); color:var(--orange); }
.chip.on{ background:var(--orange); border-color:var(--orange); color:var(--white); }

.result{ background:var(--inset); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; }
.result .k{ font-size:12.5px; color:var(--text-light); margin:0 0 6px; }
.bigfig{ font-size:clamp(32px,5vw,46px); font-weight:800; line-height:1; color:var(--navy); font-family:var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.bigfig .plus{ font-size:.4em; font-weight:600; color:var(--text-light); }
.result .incl{ font-family:var(--mono); font-size:13px; color:var(--text-light); margin:9px 0 0; font-variant-numeric:tabular-nums; }
.result .split{ display:flex; gap:22px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.result .split > div{ flex:1; }
.result .split .k{ margin-bottom:4px; }
.result .split .v{ font-size:18px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }
.minitag{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:12.5px; color:var(--orange-dark);
  background:var(--orange-soft); padding:6px 12px; border-radius:99px; font-weight:600; }

.breakdown{ margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
.breakdown h4{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-light); margin:0 0 14px; font-weight:600; }
.brow{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:9px 0;
  font-size:14px; border-bottom:1px solid var(--border); }
.brow:last-child{ border-bottom:0; }
.brow .band{ color:var(--text); }
.brow .rate{ color:var(--text-light); text-align:right; }
.brow .cost{ color:var(--navy); text-align:right; min-width:78px; font-weight:700; }
.brow.dim{ opacity:.42; }
.brow.tot{ border-top:1.5px solid var(--border); border-bottom:0; margin-top:4px; padding-top:13px; font-weight:700; }
.brow.tot .cost{ color:var(--orange-dark); }

.tiers{ width:100%; border-collapse:collapse; font-size:15px; }
.tiers th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-light); font-weight:600; padding:0 0 12px; }
.tiers th:last-child, .tiers td:last-child{ text-align:right; }
.tiers td{ padding:13px 0; border-top:1px solid var(--border); color:var(--text-light); }
.tiers td.band{ color:var(--navy); font-weight:600; }
.tiers td.rate{ color:var(--navy); }
.tiers tr:first-child td{ border-top:0; }

/* Card valore (riusa .cards/.card del sito) con icona glifo */
.ic-glyph{ width:38px; height:38px; border-radius:11px; background:var(--orange-soft); color:var(--orange-dark);
  display:grid; place-items:center; font-family:var(--font-heading); font-weight:800; font-size:18px; margin-bottom:16px; }

.included{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; }
@media (max-width:600px){ .included{ grid-template-columns:1fr; } }
.included li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--text); }
.included li .ck{ color:var(--pos); flex:none; margin-top:1px; font-weight:800; }

.tool-cta{ margin-top:40px; }
.tool-cta .cta-band-inner{ align-items:center; grid-template-columns:1fr auto; }
@media (max-width:900px){ .tool-cta .cta-band-inner{ grid-template-columns:1fr; } }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (max-width:520px){
  .fields{ grid-template-columns:1fr; }
  .result .split{ flex-direction:column; gap:14px; }
}