/* Paper: example documents typeset in code, shared by Rewards and Dealers. Each paper is a size container and its sheet
   carries the padding and the type in container units, so a document reads the same at any size. They are examples:
   chassis numbers and plates are blacked out, and no real car, workshop or person is named. --hole is the colour behind
   the paper, for punched holes and perforations; a section sets it to its own ground. */

:root {
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --ballpoint: #27469a;
  --violet-ink: #5a3d8c;
  --oxblood: #6a1a15;
  --hole: var(--sand);
  /* Rubber-stamp ink never lands evenly: a fine noise takes some of it away. */
  --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Paper. Each document is an object: warm stock, a soft cast shadow, its own type in container units. */
.mr-paper {
  position: relative; container-type: inline-size; margin: 0; background: #fbf9f1; color: #26251f; border-radius: 1px;
  box-shadow: 0 1px 1px rgba(45, 32, 12, 0.1), 0 2px 5px rgba(45, 32, 12, 0.06), 0 24px 44px -26px rgba(45, 32, 12, 0.6);
}
/* Real stock is never flat: a fine fibre and edges a shade darker than the middle, laid over each sheet's own colour. */
.mr-paper.mr-paper {
  background-image: var(--paper-grain), radial-gradient(130% 100% at 50% 42%, transparent 58%, rgba(110, 85, 40, 0.1) 100%);
  background-size: 240px 240px, 100% 100%;
}
/* A paper is a size container; its sheet carries the padding and the type, measured in the paper's own width. */
.mr-sheet { position: relative; height: 100%; }
.mr-redact { display: inline-block; width: calc(var(--n) * 0.62em); height: 0.82em; vertical-align: -0.06em; background: #2a2823; border-radius: 1px; opacity: 0.86; }
.mr-sign { display: block; width: 100%; height: auto; overflow: visible; }
.mr-sign path { fill: none; stroke: var(--ballpoint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* The invoice: letterhead, typed lines, a total, a signature. */
.mr-invoice { aspect-ratio: 0.76; }
.mr-invoice > .mr-sheet {
  display: flex; flex-direction: column; padding: 8cqi 7cqi 6cqi 12cqi;
  font-family: var(--mono); font-size: 3.15cqi; line-height: 1.5; letter-spacing: 0;
}
.mr-invoice::after {
  /* Folded in thirds once, long ago. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 33.1%, rgba(60, 45, 20, 0.07) 33.3%, rgba(255, 255, 255, 0.55) 33.6%, transparent 34.2%, transparent 66.2%, rgba(60, 45, 20, 0.07) 66.5%, rgba(255, 255, 255, 0.55) 66.8%, transparent 67.4%);
}
.mr-holes::before, .mr-holes::after {
  content: ""; position: absolute; left: 4.2cqi; width: 3.6cqi; aspect-ratio: 1; border-radius: 50%;
  background: var(--hole); box-shadow: inset 0 0.4cqi 0.6cqi rgba(40, 28, 10, 0.35);
}
.mr-holes::before { top: 27%; }
.mr-holes::after { top: 67%; }
.mr-invoice-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqi; padding-bottom: 2.6cqi; border-bottom: 0.7cqi double rgba(106, 26, 21, 0.55); }
.mr-letterhead { font-family: var(--serif); font-size: 8.2cqi; line-height: 0.95; letter-spacing: 0.05em; text-transform: uppercase; color: var(--oxblood); }
.mr-letterhead span { display: block; margin-top: 1.6cqi; font-family: var(--mono); font-size: 2.5cqi; letter-spacing: 0.12em; text-transform: none; color: #6d5d52; }
.mr-invoice-no { flex: none; text-align: right; font-size: 2.8cqi; line-height: 1.45; }
.mr-invoice-no span { display: block; color: #5b5349; }
.mr-invoice-car { margin-top: 5cqi; font-size: 2.85cqi; }
.mr-invoice-lines { margin-top: 4cqi; }
.mr-invoice-lines li { display: flex; justify-content: space-between; gap: 3cqi; padding-block: 1.5cqi; border-bottom: 1px dotted rgba(40, 30, 15, 0.32); }
.mr-invoice-lines li span:first-child { min-width: 0; }
.mr-invoice-lines li span:last-child, .mr-invoice-total span:last-child { flex: none; }
.mr-invoice-total { display: flex; justify-content: space-between; margin-top: 3cqi; padding-top: 1.6cqi; border-top: 0.45cqi solid #26251f; text-transform: uppercase; letter-spacing: 0.06em; }
.mr-invoice-foot { display: flex; align-items: flex-end; gap: 4cqi; margin-top: auto; font-size: 2.6cqi; color: #6d5d52; }
.mr-invoice-foot .mr-sign { width: 34cqi; margin-bottom: -1cqi; }

/* The job card: buff card, printed labels, a mechanic's blue ballpoint. */
.mr-jobcard { aspect-ratio: 1.45; background: #e8d5aa; color: #6b3f22; }
.mr-jobcard > .mr-sheet { padding: 5.5cqi 6.5cqi; }
.mr-jobcard-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 2cqi; border-bottom: 0.6cqi solid rgba(120, 60, 25, 0.55); font-family: var(--serif); font-size: 7.4cqi; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
.mr-jobcard-head span { font-family: var(--mono); font-size: 3.4cqi; letter-spacing: 0.04em; text-transform: none; }
.mr-jobcard-line { display: grid; grid-template-columns: 30% minmax(0, 1fr); align-items: baseline; padding-block: 1.6cqi 1cqi; border-bottom: 1px solid rgba(120, 60, 25, 0.3); font-family: var(--mono); font-size: 3.2cqi; }
.mr-jobcard-line b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 5.6cqi; line-height: 1.05; color: var(--ballpoint); }

/* The folder: a back panel with a tab, two sheets, a front panel. */
.mr-folder { aspect-ratio: 1.32; background: #c8a76a; border-radius: 2px 6px 3px 3px; }
.mr-folder-tab {
  position: absolute; left: 7cqi; bottom: 100%; height: 9cqi; padding: 0 5cqi; border-radius: 3cqi 3cqi 0 0; background: #c8a76a;
  font-family: var(--serif); font-style: italic; font-size: 4.6cqi; line-height: 9.6cqi; color: var(--ballpoint); white-space: nowrap;
}
.mr-folder-sheets { position: absolute; z-index: 1; left: 5cqi; right: 8cqi; top: 3.4cqi; height: 48%; background: #fbf9f1; box-shadow: 0 1px 2px rgba(40, 30, 15, 0.2); }
.mr-folder-sheets::before { content: ""; position: absolute; left: 6cqi; right: -4cqi; top: -2.4cqi; height: 100%; z-index: -1; background: #f0eadb; box-shadow: 0 1px 2px rgba(40, 30, 15, 0.18); }
.mr-folder::after {
  content: ""; position: absolute; z-index: 2; inset: 14cqi 0 0; border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, #dbc08a, #d1b37a); box-shadow: 0 -1px 3px rgba(60, 40, 10, 0.18);
}

/* The sale contract: typed, signed twice, stamped paid in violet. */
.mr-contract { aspect-ratio: 0.72; background: #f8f6ee; }
.mr-contract > .mr-sheet { display: flex; flex-direction: column; padding: 9cqi 8cqi 7cqi; font-family: var(--mono); font-size: 3.3cqi; }
.mr-contract-title { padding-bottom: 3cqi; border-bottom: 1px solid #26251f; font-family: var(--serif); font-size: 6.4cqi; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.mr-contract-line { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqi; padding-block: 2.4cqi 1.4cqi; border-bottom: 1px dotted rgba(40, 30, 15, 0.32); }
.mr-contract-line span { color: #5b5349; }
.mr-contract-signs { display: flex; justify-content: space-between; gap: 8cqi; margin-top: auto; }
.mr-contract-signs .mr-sign { width: 40%; padding-bottom: 1.4cqi; border-bottom: 1px solid #26251f; }
.mr-contract-signs .mr-sign.is-second { transform: scaleX(-1) rotate(4deg); }
.mr-contract-stamp {
  position: absolute; right: 9cqi; top: 52%; padding: 1.2cqi 3.4cqi; border: 0.8cqi solid var(--violet-ink); border-radius: 1.4cqi; rotate: -14deg;
  font-family: var(--mono); font-size: 5.4cqi; letter-spacing: 0.22em; text-transform: uppercase; color: var(--violet-ink); opacity: 0.86;
  mix-blend-mode: multiply; mask-image: var(--ink-mask); mask-size: 180px;
}

/* A snapshot: a real photograph, printed with a white border. */
.mr-snapshot { background: #fdfcf7; }
.mr-snapshot > .mr-sheet { padding: 4.5cqi 4.5cqi 13cqi; }
.mr-snapshot img { display: block; width: 100%; aspect-ratio: 1.3; object-fit: cover; filter: saturate(0.92) contrast(1.02); }

/* The stock book: a dealer's ledger page, ruled, with purchases and sales in ballpoint. */
.mr-stockbook { aspect-ratio: 1.38; background: #f3eedf; }
.mr-stockbook::before {
  /* Ruled lines and the red margin. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 9.6%, rgba(170, 40, 30, 0.45) 9.6%, rgba(170, 40, 30, 0.45) calc(9.6% + 1px), transparent calc(9.6% + 1px)),
    repeating-linear-gradient(180deg, transparent 0 calc(8.6cqi - 1px), rgba(40, 70, 130, 0.18) calc(8.6cqi - 1px) 8.6cqi);
  background-position: 0 0, 0 12cqi;
}
.mr-stockbook > .mr-sheet { padding: 4cqi 4.5cqi 4cqi 11.5cqi; }
.mr-stockbook-head { display: flex; justify-content: space-between; align-items: baseline; height: 12cqi; font-family: var(--serif); font-size: 5.4cqi; letter-spacing: 0.12em; text-transform: uppercase; color: #2c2a24; }
.mr-stockbook-head span { font-family: var(--mono); font-size: 2.6cqi; letter-spacing: 0.1em; color: #6d5d52; }
.mr-stockbook-rows li, .mr-stockbook-cols { display: grid; grid-template-columns: 9% 30% 15% minmax(0, 1fr) minmax(0, 1fr); gap: 1.6cqi; align-items: end; height: 8.6cqi; }
.mr-stockbook-cols { font-family: var(--mono); font-size: 2.3cqi; letter-spacing: 0.08em; text-transform: uppercase; color: #6d5d52; }
.mr-stockbook-rows li { font-family: var(--serif); font-style: italic; font-size: 3.5cqi; line-height: 1.6; color: var(--ballpoint); white-space: nowrap; }
.mr-stockbook-rows li > * { min-width: 0; overflow: hidden; padding-bottom: 0.6cqi; }
.mr-stockbook-rows .mr-redact { width: 80%; height: 0.62em; }

/* The invoice adds up: the lines, the taxable amount, VAT at 19% (1994), the total. */
.mr-invoice-sum { display: flex; justify-content: space-between; margin-top: 1.4cqi; color: #3f3a33; }
.mr-invoice-sum:first-of-type { margin-top: 3cqi; }
.mr-invoice-sum + .mr-invoice-total { margin-top: 1.6cqi; }