/* Free calculator pages. Loaded only by /tools/<calculator>/ pages, which
   also load site.css for the shared header, footer, forms and type. */
.tool-result {
  position: sticky;
  top: 30px;
  background: var(--brand-charcoal);
  color: white;
  padding: 34px;
  border-radius: 8px;
}
.tool-result h2 {
  font-size: 18px;
  letter-spacing: 0;
}
.tool-result output {
  display: block;
  font-size: 52px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 22px 0;
}
.tool-result dl {
  margin: 0;
}
.tool-result dl > div {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid var(--mkt-navy-rule);
  padding: 15px 0;
  font-size: 16px;
}
.tool-result dt {
  color: var(--line);
}
.tool-result dd {
  margin: 0;
  font-weight: 700;
}
.tool-result p {
  color: var(--line);
  font-size: 16px;
  line-height: 1.7;
}
.tool-error {
  color: var(--brand-danger);
  font-size: 16px;
  line-height: 1.6;
}
.tool-meta {
  font-size: 16px !important;
}
.tool-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.invoice-rows {
  display: grid;
  gap: 16px;
}
.invoice-entry {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 12px;
  align-items: start;
}
.invoice-entry .remove-invoice {
  display: grid;
  place-items: center;
  /* Label line plus its gap, so the button sits level with the inputs. */
  margin-top: 31px;
  color: var(--brand-ink);
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
}
.invoice-entry button:hover {
  background: var(--surface-secondary);
}
.tool-description {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 4.5% 65px;
}
.tool-description h2 {
  font-size: 30px;
  margin-bottom: 22px;
}
.tool-description p {
  margin-bottom: 18px;
}
.tool-description code {
  font-size: 16px;
  background: var(--surface-secondary);
  padding: 6px;
  line-height: 2;
}
@media (max-width: 800px) {
  .tool-result {
    padding: 25px;
  }
}
@media (max-width: 540px) {
  .tool-result {
    position: static;
  }
  .tool-result output {
    font-size: 47px;
  }
  .tool-description {
    padding-inline: 6%;
  }
}
@media print {
  .site-header,
  .site-footer,
  .closing-cta,
  .tool-actions {
    display: none;
  }
  .tool-result {
    background: white;
    color: black;
    border: 1px solid var(--brand-line-strong);
    position: static;
  }
  .tool-result p,
  .tool-result dt {
    color: var(--brand-ink);
  }
  .tool-layout {
    display: block;
  }
}
@media (max-width: 540px) {
  .invoice-entry {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 1.2fr) 44px;
    gap: 8px;
  }
  .invoice-entry input {
    padding-inline: 8px;
  }
}
.tool-description > * {
  max-width: 860px;
}
/* Each field keeps its message under it, so fields line up at the top.
   Phones stack them in one column, so labels never wrap beside each other. */
.tool-form .form-grid {
  align-items: start;
}

/* Typed fields: "$" and "%" marks, and one message under each field. */
.tool-field {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
}
.tool-form input {
  font-variant-numeric: tabular-nums;
}
.input-affix {
  position: relative;
}
.input-affix > span {
  position: absolute;
  inset-block: 0;
  left: 14px;
  display: flex;
  align-items: center;
  color: var(--muted);
  pointer-events: none;
}
.input-affix > input {
  padding-left: 30px;
}
.input-affix.suffix > span {
  left: auto;
  right: 14px;
}
.input-affix.suffix > input {
  padding-left: 14px;
  padding-right: 36px;
}
.field-hint {
  font-size: 16px;
  line-height: 1.5;
}