/* Calculator styling. Layers on top of guide.css, which supplies the shell,
   the header, the rails and the typography. Only the tool itself is defined here. */

.calc{
  background:#f8fafc;border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 20px;margin:0 0 22px;
}
.calc-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.calc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc-field.calc-wide{grid-column:span 2}
.calc-field span{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate-soft);
}
.calc-field input,.calc-field select{
  font:inherit;font-size:16px;padding:11px 12px;border-radius:9px;
  border:1px solid #cbd5e1;background:#fff;color:var(--navy);width:100%;
}
.calc-field input:focus,.calc-field select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.14);
}

.calc-result{margin:0 0 6px}
.calc-hint{color:var(--slate-soft);font-size:15px;margin:.4rem 0 0}

.calc-headline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
.calc-stat{
  background:var(--navy);border-radius:12px;padding:16px 18px;color:#fff;
}
.calc-stat span{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#94a3b8;margin-bottom:4px;
}
.calc-stat strong{
  display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;
  /* Digits line up when the reader compares the two figures. */
  font-variant-numeric:tabular-nums;
}

.calc-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 4px}
.calc-rates>div{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.calc-rates span{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate-soft);
}
.calc-rates strong{
  display:block;font-size:22px;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums;margin:2px 0 3px;
}
.calc-rates em{display:block;font-style:normal;font-size:13px;color:var(--slate-soft);line-height:1.45}

.calc-note{
  background:#fffbeb;border:1px solid #fde68a;border-radius:10px;
  padding:10px 14px;font-size:14.5px;color:#78350f;margin:14px 0 0;
}

/* Wide tables must scroll inside their own box, never push the page sideways. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.6rem 0 0}
.calc-table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.calc-table th,.calc-table td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
}
.calc-table th{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate-soft);white-space:nowrap;
}
.calc-table td:nth-child(2),.calc-table td:nth-child(3),.calc-table td:nth-child(4){
  font-variant-numeric:tabular-nums;
}
.calc-table tfoot td{font-weight:800;color:var(--navy);border-bottom:none;border-top:2px solid var(--navy)}
.calc-source{font-size:13px;color:var(--slate-soft);margin:.8rem 0 0}

/* Shown instead of a figure while a slab table is unverified. Never guess a number. */
.calc-unavailable{
  background:#fffbeb;border:1px solid #fde68a;border-left:4px solid var(--amber);
  border-radius:10px;padding:16px 18px;color:#78350f;
}
.calc-unavailable p{margin:.5rem 0 0;font-size:15px;line-height:1.6}

.promo-price-light{color:#fff}
.promo-price-light small{color:#cbd5e1}

@media(max-width:760px){
  .calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-field.calc-wide{grid-column:span 2}
  .calc-headline,.calc-rates{grid-template-columns:minmax(0,1fr)}
  .calc-stat strong{font-size:23px}
}