/*
 * Printable summary. Styles the <section class="summary"> that
 * SettleFull.summaryToHtml returns, on screen and on paper.
 * On paper, everything on the page marked .no-print is left out.
 */

.summary {
  max-width: 46rem;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.45;
}

.summary h1 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.summary h2 {
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid #111;
  font-size: 1.1rem;
}

.summary-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1rem;
  margin: 0;
}

.summary-meta dt {
  color: #444;
}

.summary-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.summary-meta .total {
  font-weight: bold;
}

.summary table {
  width: 100%;
  border-collapse: collapse;
}

.summary th,
.summary td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #bbb;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.summary th {
  border-bottom: 1px solid #111;
  font-size: 0.9rem;
}

.summary .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.summary-payments td {
  font-weight: bold;
}

.summary-rates {
  margin: 0;
  padding-left: 1.2rem;
}

.summary-none,
.summary-note,
.summary-footer {
  margin: 0.5rem 0 0;
}

.summary-note,
.summary-footer {
  color: #444;
  font-size: 0.85rem;
}

.summary-footer {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #bbb;
}

@page {
  size: A4;
  margin: 15mm;
}

@media print {
  html,
  body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .no-print {
    display: none;
  }

  .summary {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 11pt;
  }

  .summary h2 {
    break-after: avoid;
  }

  .summary tr,
  .summary-footer {
    break-inside: avoid;
  }

  .summary thead {
    display: table-header-group;
  }

  .summary-note,
  .summary-footer,
  .summary-meta dt {
    color: #000;
  }
}