/* The document.
 *
 * This is the only surface that ignores the theme. It is paper: it prints, it
 * gets forwarded, it lands in someone's accounts folder. So it hardcodes the
 * light palette rather than reading --s-* tokens, and dark mode leaves it
 * alone. Only --paper-accent / --paper-tint come from outside.
 */

.sb-paper {
  --paper-accent: #6d6a30;
  --paper-tint: #f1efdf;
  --paper-ink: #1b1a17;
  --paper-body: #5c584c;
  --paper-muted: #8b8778;
  --paper-faint: #b0ab99;
  --paper-rule: #eae6db;

  width: 816px;
  min-height: 1056px;
  background: #fdfcf9;
  color: var(--paper-ink);
  border: 1px solid #e2ded4;
  border-radius: 4px;
  box-shadow: 0 30px 60px -34px rgba(27, 26, 23, 0.3);
  padding: 88px 80px 64px;
  display: flex;
  flex-direction: column;
  font-family: var(--s-sans);
  flex: 0 0 auto;
}

.sb-paper[data-size='a4'] { width: 794px; min-height: 1123px; }

.sb-paper .p-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}
.sb-paper .p-title {
  font-family: var(--s-serif);
  font-size: 66px;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.sb-paper .p-ref {
  font-family: var(--s-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--paper-accent);
  margin-top: 10px;
}
.sb-paper .p-from { text-align: right; display: flex; flex-direction: column; gap: 11px; align-items: flex-end; }
.sb-paper .p-logo { max-height: 52px; max-width: 200px; object-fit: contain; margin-bottom: 2px; }
.sb-paper .p-from b { font-size: 14px; font-weight: 600; }
.sb-paper .p-from address {
  font-family: var(--s-mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--paper-muted);
  font-style: normal;
}

.sb-paper .p-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 88px;
}
.sb-paper .p-meta section { display: flex; flex-direction: column; gap: 11px; }
.sb-paper .p-cap {
  font-family: var(--s-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.sb-paper .p-meta b { font-size: 14px; font-weight: 600; }
.sb-paper .p-meta .val { font-size: 14px; }
.sb-paper .p-meta address {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--paper-body);
  font-style: normal;
}
.sb-paper .p-meta small { font-size: 12.5px; color: var(--paper-muted); }

.sb-paper .p-items { margin-top: 96px; display: flex; flex-direction: column; }
.sb-paper .p-items .p-row {
  display: grid;
  grid-template-columns: 1fr 96px 140px;
  gap: 24px;
  align-items: baseline;
}
.sb-paper .p-items .p-row.head { padding-bottom: 20px; }
.sb-paper .p-items .p-row.head span {
  font-family: var(--s-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.sb-paper .p-items .p-row.item {
  padding: 20px 0;
  border-top: 1px solid var(--paper-rule);
  break-inside: avoid;
}
.sb-paper .p-items .p-row.item:last-child { border-bottom: 1px solid var(--paper-rule); }
.sb-paper .p-items .desc { font-size: 15px; }
.sb-paper .p-items .desc small {
  display: block;
  font-size: 11.5px;
  color: var(--paper-muted);
  margin-top: 4px;
}
.sb-paper .p-items .qty {
  text-align: right;
  font-family: var(--s-mono);
  font-size: 12px;
  color: var(--paper-muted);
}
.sb-paper .p-items .amt {
  text-align: right;
  font-family: var(--s-mono);
  font-size: 14px;
}

.sb-paper .p-foot {
  margin-top: 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 56px;
  break-inside: avoid;
}
.sb-paper .p-note { max-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.sb-paper .p-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--paper-body);
  text-wrap: pretty;
  white-space: pre-wrap;
}
.sb-paper .p-due { text-align: right; display: flex; flex-direction: column; gap: 7px; }
.sb-paper .p-due .p-cap { color: var(--paper-accent); letter-spacing: 0.18em; }
.sb-paper .p-due .big {
  font-family: var(--s-serif);
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sb-paper .p-due small { font-size: 12px; color: var(--paper-muted); }

.sb-paper .p-pay {
  margin-top: 40px;
  background: var(--paper-tint);
  border-radius: 6px;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  break-inside: avoid;
}
.sb-paper .p-pay p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #2b291c;
  white-space: pre-wrap;
}

.sb-paper .p-tail {
  margin-top: auto;
  padding-top: 48px;
  font-family: var(--s-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--paper-faint);
}

/* ---- the stamp --------------------------------------------------------
 *
 * A watermark across the whole document, the way an invoice comes back from
 * a company: centred, enormous, rotated, and behind everything. It used to be
 * a small mark in the top right corner, sitting on top of the business logo —
 * two things fighting for one corner, and the logo lost.
 *
 * It sits under the content on purpose. A watermark that obscures the amount
 * is not a watermark, it is a redaction, so this is pale enough to read
 * straight through and the document keeps a layer above it.
 *
 * Both states get one. Paid takes the accent's own tint; overdue is the one
 * place on this paper that is allowed to be red, because a client looking at
 * an overdue invoice should not have to find that out from the small print. */
.sb-paper .p-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--s-serif);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.14em;
  transform: translate(-50%, -50%) rotate(-24deg);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Sized so each word lands at roughly three quarters of the page width —
 * PAID has four letters to spend it on and OVERDUE has eight, so they cannot
 * share a font size and still look like the same stamp. */
.sb-paper .p-stamp.paid {
  font-size: 196px;
  color: var(--paper-accent);
  opacity: .12;
}
.sb-paper .p-stamp.overdue {
  font-size: 116px;
  color: #8a4230;
  opacity: .12;
}

/* Everything else on the page rides above the watermark. */
.sb-paper > * { position: relative; z-index: 1; }
.sb-paper > .p-stamp { z-index: 0; }
.sb-paper { position: relative; }

/* ---- printing -------------------------------------------------------
 * Print pulls the .sb-paper block out of whatever surface it is sitting in and
 * makes it the only thing on the page, so the same markup serves preview and
 * PDF export with no second renderer to keep in step. */

/* ---- the paged shell ---------------------------------------------------
 * From the print design. The document is wrapped in a single-cell table for
 * one reason: a browser repeats <thead> and <tfoot> on every printed page and
 * repeats nothing else. There is no CSS property that does this, and there has
 * not been one for twenty years.
 *
 * The cells are spacers. They reserve a strip at the top and bottom of every
 * sheet, and the running lines are drawn inside them, so a second page carries
 * the invoice number, the business, when payment is due and where to reply.
 * A page that can be separated from its first page has to be able to identify
 * itself; a column of figures on plain paper cannot.
 *
 * On screen the preview is one continuous sheet, so the runners are hidden.
 * Showing them there would invent a page boundary that does not exist.
 */
.sb-paper .p-sheet { width: 100%; border-collapse: collapse; }
.sb-paper .p-sheet > tbody > tr > td { padding: 0; }
.sb-paper .p-run { display: none; }

@media print {
  .sb-paper .p-run { display: table-header-group; }
  .sb-paper .p-run-foot { display: table-footer-group; }
  /* The gap between a runner and the page body is PADDING on the cell, never
   * margin on anything inside it. Chrome does not carry the spacers' vertical
   * margins onto pages after the first (WebKit bug 17205), so a margin here
   * would space the first page correctly and let every later page's header sit
   * on top of the content. The print design's own component carries the same
   * warning, and it is the sort of thing that only shows up on page two of a
   * long invoice — which is to say, at a client's desk. */
  .sb-paper .p-run-head > tr > td { padding: 0 0 18pt; }
  .sb-paper .p-run-foot > tr > td { padding: 18pt 0 0; }

  .sb-paper .p-runline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24pt;
    font-family: var(--s-mono);
    font-size: 8pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-faint);
  }
  .sb-paper .p-run-head .p-runline { padding-bottom: 9pt; border-bottom: 1px solid var(--paper-rule); }
  .sb-paper .p-run-foot .p-runline { padding-top: 9pt; border-top: 1px solid var(--paper-rule); }

  /* Nothing that reads as one thing may be split across two sheets. A line
   * item torn in half, or a total separated from the figures above it, is the
   * kind of thing a client queries rather than pays. */
  .sb-paper .p-row,
  .sb-paper .p-meta,
  .sb-paper .p-foot,
  .sb-paper .p-pay,
  .sb-paper .p-head { break-inside: avoid; }

  /* The heading row of the items table repeats where the table itself breaks,
   * so a continued list still says which column is which. */
  .sb-paper .p-row.head { break-after: avoid; }
}

@media print {
  @page { size: var(--print-size, letter) portrait; margin: 0; }

  html, body {
    background: #fff !important;
    height: auto;
  }
  body > *:not(.print-root) { display: none !important; }

  .print-root { display: block !important; position: static !important; }
  .print-root .sb-paper {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    width: 100%;
    min-height: 100vh;
  }
  /* The watermark must survive the print colour pass, or a paid invoice
   * prints looking unpaid. */
  .sb-paper .p-stamp { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}