/* 🔴 THE PAGE MARGIN — ONE NUMBER, AND EVERYTHING ELSE IS DERIVED FROM IT.
   Keith, 2026-09-13, after the body was widened to meet the bands: the text
   then sat 0.25in from the paper edge, and many home printers cannot reach
   that. A clipped band edge is cosmetic; clipped text on a document somebody
   signs is not, and "print at home" is the promise.

   ⚠️ 0.25in was NOT arbitrary — the old comment records that margin 0 clipped
   the right side on a real printer. It was tested against 0, never against a
   larger value. 0.4in keeps every common printer's unprintable area clear.

   Sheet dimensions and every @page rule now come from here. app.js reads this
   property off the root at print time rather than keeping its own copy. */
:root { --page-margin: 0.4in; }

/* The sticker — 11x8.5 landscape, per BRAND.md.
   Two reading distances: vehicle/price/QR at ten feet, everything else at two. */

.sticker {
  background: #FFF;
  color: #111;
  border: 1px solid var(--rule);
  aspect-ratio: 11 / 8.5;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  overflow: hidden;
}
.sticker * { font-variant-numeric: tabular-nums; }

.st-band {
  background: #111;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.6cqw 3cqw 1.3cqw;
}
.st-band .m {
  font-family: var(--display);
  font-weight: 700;
  font-size: 5cqw;
  letter-spacing: 0.01em;
  color: var(--orange);
  text-transform: uppercase;
  line-height: 0.95;
}
.st-band .r { font-family: var(--mono); font-size: 1.3cqw; letter-spacing: 0.14em; text-transform: uppercase; color: #FFF; opacity: 0.85; text-align: right; line-height: 1.6; }

.st-strip {
  background: var(--orange);
  color: #111;
  display: flex; justify-content: space-between; gap: 2cqw;
  padding: 0.7cqw 3cqw;
  font-size: 1.4cqw; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.st-strip .r { font-size: 1.15cqw; letter-spacing: 0.13em; opacity: 0.82; }

/* Variant G lockup. The mark is app/mark.svg — OUTLINED PATHS, no font — so its
   width is a fixed ratio of its height. The header height is stated once and
   everything else follows. There is no padding constant to keep in step with a
   typeface, which is what put the wordmark off-center and the S past the plate
   while this was still live text. */
.st-hdr {
  --st-hdr-h: 10.55cqw;
  display: flex;
  align-items: stretch;
  height: var(--st-hdr-h);
}
.st-plate {
  flex: none;
  height: var(--st-hdr-h);
  width: auto;
  aspect-ratio: 600 / 364;
  display: block;
}
.st-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-hdr .st-band { flex: 1; padding: 1.6cqw 3cqw 1.3cqw 2cqw; align-items: center; justify-content: flex-end; }
.st-hdr .st-strip { padding: 0.7cqw 3cqw 0.7cqw 2cqw; justify-content: flex-end; align-items: center; }

.st-main { padding: 1.4cqw 3cqw 1cqw; flex: 1; display: flex; flex-direction: column; }
.st-head {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 5cqw;
  font-weight: 700;
  line-height: 0.95;
  margin: 0;
  overflow-wrap: anywhere;
}
.st-sub { font-size: 1.7cqw; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin: 0.5cqw 0 1.3cqw; }

.st-cols {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.15fr;
  gap: 2.4cqw;
  border-top: 0.4cqw solid #111;
  padding-top: 1.4cqw;
  flex: 1;
}
.st-cols h5 {
  font-family: var(--mono);
  font-size: 1.25cqw; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 0.9cqw; font-weight: 700;
  padding-bottom: 0.5cqw; border-bottom: 0.28cqw solid #111;
}
.st-equip { margin: 0; padding: 0; list-style: none; font-size: 1.6cqw; font-weight: 500; }
.st-equip li { padding: 0.28cqw 0 0.28cqw 1.5cqw; position: relative; line-height: 1.25; }
.st-equip li::before { content: ""; position: absolute; left: 0; top: 1cqw; width: 0.7cqw; height: 0.7cqw; background: #111; }

.st-det div { display: flex; justify-content: space-between; gap: 1.2cqw; font-size: 1.6cqw; font-weight: 600; padding: 0.3cqw 0; border-bottom: 1px solid var(--rule-2); }
.st-det .k { font-family: var(--mono); font-size: 1.2cqw; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; padding-top: 0.3cqw; }
.st-det .v { text-align: right; }

.st-ask { border: 0.4cqw solid #111; padding: 1cqw 1.4cqw 1.2cqw; text-align: center; }
.st-ask .l { font-family: var(--mono); font-size: 1.25cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.st-ask .n { font-family: var(--display); font-size: 6cqw; font-weight: 700; line-height: 1; letter-spacing: -0.015em; }
.st-ask .obo { font-family: var(--display); font-size: 2.4cqw; letter-spacing: 0.1em; line-height: 1.1; }
.st-ask .c { font-family: var(--mono); font-size: 1.25cqw; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-2); border-top: 1px solid var(--rule); margin-top: 0.8cqw; padding-top: 0.7cqw; line-height: 1.4; }

.st-qr { margin-top: 0.8cqw; text-align: center; }
.st-qr canvas, .st-qr .qrbox { width: 100%; max-width: 14cqw; height: auto; image-rendering: pixelated; margin: 0 auto; display: block; }
.st-qr .c { font-family: var(--display); font-size: 1.6cqw; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.6cqw; font-weight: 700; line-height: 1.2; }

.st-foot { background: #111; color: #FFF; font-size: 1.05cqw; line-height: 1.45; padding: 1cqw 3cqw; }

/* Snapshot line — the paper is honest about being a moment in time */
.st-asof { font-family: var(--mono); font-size: 1.05cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.6cqw; }

/* Watermark for the preview only */
.wm { position: relative; overflow: hidden; }
.wm::after {
  content: "OWNERS ROW";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 9cqw; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243, 91, 28, 0.30);
  transform: rotate(-24deg);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Print: this is what makes the PDF ---------- */

@media print {
  /* ⚠️ Chrome does not print background colors unless the user ticks
     "Background graphics". This sticker IS solid fields — a black band, an
     orange strip, a black footer — so without this it prints as white paper
     with WHITE FOOTER TEXT ON WHITE, which reads as a missing disclaimer.
     print-color-adjust: exact forces them through. */
  .sticker, .sticker * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Absolute units only. Viewport units lie in print — on a phone 100vh is the
     SCREEN height, not the page box, which is what kept pushing this onto a
     second sheet. Letter at 0.25in margins gives a 10.5 x 8in printable area
     landscape, 8 x 10.5in portrait. */
  /* Page size is injected at print time from the paper choice — a static rule
     here forced landscape on every print regardless of what was selected. */
  @page { margin: 0.25in; }

  html, body {
    background: #FFF !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .app > *:not(.printarea), .noprint { display: none !important; }
  /* The test/dev banner lives OUTSIDE .app -- on purpose, so render() cannot
     drop it -- which also puts it outside the rule above. It must never reach
     paper. */
  #testflag { display: none !important; }
  .app {
    max-width: none !important;
    width: auto !important;
    min-height: 0 !important;
    display: block !important;
    background: #FFF !important;
  }
  .wm::after { display: none; }
  .scaler { display: contents; }

  .printarea {
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .sticker {
    border: 0;
    overflow: visible;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
    aspect-ratio: 11 / 8.5;
    height: auto;
  }
  .st-hdr, .st-foot, .st-main, .st-cols { break-inside: avoid; page-break-inside: avoid; }
}

/* One print layout. Portrait is what every print dialog defaults to, the
   sticker is turned a quarter turn to fill the sheet, and the seller turns the
   paper — which he does anyway to put it on glass. Offering a landscape option
   only created a way for the app and the dialog to disagree. */
@media print {
  .printarea {
    position: relative;
    /* Same coupling as .sheetscale — 8in/10.4in assumed a 0.25in page margin.
       ⚠️ The height keeps its original 0.1in of slack below the printable box
       rather than sitting exactly on it; that slack was deliberate and is not
       mine to remove. */
    width: calc(8.5in - 2 * var(--page-margin));
    height: calc(11in - 2 * var(--page-margin) - 0.1in);
    overflow: hidden;      /* a transform does not move the layout box; without
                              this the sticker spills onto a second sheet */
    margin: 0 auto;
  }
  .printarea .sticker {
    position: absolute;
    top: 0;
    left: 0;
    width: 10.34in;        /* becomes the vertical span once rotated */
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
  }
}

/* ===========================================================================
   THE KIT SHEETS — BRAND.md § THE DOCUMENT SYSTEM, locked 2026-08-18.
   Everything is in pt because these are printed objects, not screens. Letter
   portrait is 612 x 792pt.

   ⚠️ BANDS ARE NOT FULL BLEED. Inset 0.25in (18pt) on every side, including the
   bottom, because a consumer inkjet cannot print to the paper edge — full bleed
   clips the placard off the header and the page block off the footer.
   =========================================================================== */

.sheet {
  --ink: #111111;
  --orange: #F35B1C;
  --gray: #8A8A85;
  --mid: #6E6E68;
  /* ⚠️ CORRECTED 2026-08-18 after Keith printed it and the right side was cut
     off. The artwork used to be the full 612 x 792pt sheet with @page margin 0,
     on the reasoning that the bands already carry their own 0.25in inset. That
     is wrong in practice: at margin 0 there is nothing left for the printer's
     own unprintable edge, so the right side clips.

     The artwork is now the PRINTABLE box — 8 x 10.5in — and @page supplies the
     0.25in. BRAND.md's two numbers are unchanged in the only terms that matter,
     which are distances from the PAPER edge: bands at 0.25in (page margin +
     inset 0), content at 0.5in (page margin + 18pt). */
  --inset: 0pt;    /* bands sit at the printable edge; @page adds the 0.25in */
  /* ⚠️ The FOOTER is lifted clear of the bottom edge, and only the footer.
     Consumer printers have a deeper unprintable margin at the BOTTOM than at
     the sides — the sheet feeds from there — so a footer flush to the printable
     box still comes out crowded against the paper edge or clipped. Keith saw it
     on the Louisiana sheet. Sides and top stay at 0.25in via @page; the bottom
     band ends up at 0.5in, which every consumer printer can reach. */
  --ftr-lift: 18pt;
  /* ⭐ 0pt since 2026-09-13, Keith: "the body area needs to extend to the full
     width like the logo title area... but the whole pdf will need a margin like
     the rest of them for printing."

     The body used to sit 18pt (0.25in) INSIDE the bands, putting its content
     0.5in from the paper edge while the header and footer bled to 0.25in. On
     screen that reads as the body being indented from a full-bleed header,
     which is what he saw.

     ⚠️ The printing margin does NOT come from here and never did — it is
     `@page { margin: 0.25in }`, injected by the print path. Setting this to 0
     aligns the body with the bands; the page margin is untouched.

     Used in exactly one rule (.sh-body), so this changes the body inset and
     nothing else — but it changes it on ALL sheets, which is the point: they
     should not disagree with each other. Wider body means more room, so it can
     only reduce overflow, never cause it. */
  --margin: 0pt;
  --hdr-black: 86pt;
  --hdr-orange: 18pt;

  position: relative;
  /* 🔴 DERIVED FROM --page-margin, NEVER TYPED. These were 576pt/756pt with the
     comment "Letter less 0.25in each side", and the @page rule in app.js said
     0.25in in six separate places. Two coupled constants in two files: raise
     the page margin alone and an 8in artwork lands on a smaller printable area,
     which the browser silently shrinks or clips.

     app.js now READS --page-margin off the root and writes it into every @page
     rule, so this declaration is the only place the number exists. */
  width: calc(8.5in - 2 * var(--page-margin));
  height: calc(11in - 2 * var(--page-margin));
  background: #FFF;
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}

/* ---------- Header: two bands and the placard ---------- */

.sh-hdr {
  position: absolute;
  top: var(--inset); left: var(--inset); right: var(--inset);
  height: calc(var(--hdr-black) + var(--hdr-orange));
  display: flex;
}
/* The placard is the outlined SVG, never live text — a font stack that resolves
   differently on the customer's machine is what made the white strip
   illegible. It is flush to the top-left corner OF THE BAND, not of the page,
   and both bands run out from behind it. */
.sh-plate {
  flex: none;
  height: calc(var(--hdr-black) + var(--hdr-orange));
  width: auto;
  display: block;
}
.sh-bands { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sh-black {
  height: var(--hdr-black);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Centered in the space between the placard and the step block — not
   right-aligned, and not centered on the page. */
.sh-name {
  flex: 1;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  font-size: 27pt;
  line-height: 1.02;
  letter-spacing: 0.01em;
}
/* Keith's ruling: the step block reads when the sheets are fanned out on a
   table, which is the only position that matters when somebody is looking for
   the next one. */
.sh-step {
  flex: none;
  width: 46pt;
  align-self: stretch;
  background: var(--orange);
  color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sh-step .l { font-size: 6.4pt; font-weight: bold; letter-spacing: 0.14em; }
.sh-step .n { font-size: 26pt; font-weight: bold; line-height: 1; }
.sh-orange {
  height: var(--hdr-orange);
  background: var(--orange);
  color: #111;
  font-size: 7pt;
  font-weight: bold;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 46pt; /* clear of the step block above */
}

/* ---------- Body ---------- */

.sh-body {
  position: absolute;
  top: calc(var(--inset) + var(--hdr-black) + var(--hdr-orange) + 11pt);
  left: var(--margin); right: var(--margin);
  bottom: calc(var(--inset) + var(--ftr-lift) + 24pt + 12pt);
}

/* Section bar — solid black, 17pt, label white bold 8.4 with 8pt left padding.
   Content starts about 17pt below it. */
.sbar {
  background: var(--ink);
  color: #FFF;
  height: 17pt;
  line-height: 17pt;
  font-size: 8.4pt;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding-left: 8pt;
  margin: 0 0 6pt;
}
.scols > div > .sbar, .ssigcol > .sbar { margin-top: 0; }
.sbar + .sgrid4, .sbar + .sgrid2, .sbar + .sgrid3 { margin-top: 6pt; }

/* Field — the rule, then the label UNDER it.
   ⭐ Keith 2026-08-20: you write on TOP of a line, so the space above the rule
   is the writing space and the space below is dead. A label under the rule
   reclaims roughly 8pt per field and stops the label crowding the hand.
   ⚠️ The flip is done with column-reverse on the CONTAINER, not by reordering
   the 16 call sites — this class is on every sheet and a partial edited once
   cannot miss an instance the way sixteen hand edits can. */
.sf, .ssigrow, .swinit { display: flex; flex-direction: column-reverse; }
.sf { min-width: 0; }
.sfl {
  display: block;
  /* 6pt at #5F5E5A — smaller AND darker than the 6.2pt/#8A8A85 it replaces.
     That is the balance: legible as an instruction, still a clear step below
     whatever the seller writes on the line. */
  font-size: 6pt;
  color: #5F5E5A;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0;
  margin-top: 1.5pt;
}
/* ⚠️ WRAPS, never truncates. This used to be nowrap with an ellipsis, which cut
   the seller's own engine-and-color line to "Silver over…" on the printed bill
   of sale. A printed record that silently drops what somebody entered is worse
   than an untidy one — and on this document it is his statement, not our copy. */
.sfr {
  border-bottom: 0.7pt solid var(--ink);
  min-height: 13pt;
  font-size: 9.5pt;
  line-height: 13pt;
  overflow-wrap: anywhere;
}
.sgrid4, .sgrid3, .sgrid2 { display: grid; gap: 10pt; margin-bottom: 7pt; }
.sgrid4 { grid-template-columns: repeat(4, 1fr); }
.sgrid3 { grid-template-columns: repeat(3, 1fr); }
.sgrid2 { grid-template-columns: repeat(2, 1fr); }

/* Equipment and known issues, same size and same weight. A disclosure column
   that looks like a confession box does not get filled in. */
.scols { display: grid; grid-template-columns: 1fr 1fr; gap: 16pt; margin-top: 10pt; }
.slist { margin: 0; padding-left: 10pt; font-size: 8pt; line-height: 1.34; }
.slist li { margin: 0; }
.snone { margin: 0; font-size: 8pt; font-style: italic; color: var(--mid); }

/* The orange callout — outline, no fill. Two lines, no more. Reserved for the
   one thing on the page that can cost somebody real money. A tall box eats the
   blanks people have to write in. */
.scallout {
  border: 1.4pt solid var(--orange);
  height: 34pt;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--orange);
  font-weight: bold;
  font-size: 8.8pt;
  line-height: 1.35;
  margin: 6pt 0 6pt;
}

/* ---------- Signature block ---------- */

.ssig { display: grid; grid-template-columns: 1fr 1fr; gap: 16pt; }
.ssigterm { font-size: 7pt; line-height: 1.3; color: var(--mid); margin: 0 0 7pt; min-height: 18pt; }
/* 36pt between STACKED rows, because people have to physically write on them.
   ⭐ Fizz 2026-08-20: on the bill of sale the three go side by side instead, so
   that 36pt is spent once rather than twice and every rule keeps its full
   writing height. Signature gets the wide column — it is the one that needs
   room; a date needs almost none. */
.ssigrow { margin-bottom: 36pt; }
.ssigrow:last-child { margin-bottom: 0; }
/* ⭐ Rebalanced 2026-08-23. Printed name was 1.2fr and "Heather Champagne" did
   not fit on one line at full size. A date needs almost nothing — it is eight
   characters and it was holding 0.8fr — so the width came from there and a
   little from the signature, which still gets the widest cell. This is the fix
   that keeps ordinary names at full size; fitFields() is the backstop for the
   long ones, not the first line of defence. */
.ssigline { display: grid; grid-template-columns: 1.4fr 1.45fr 0.65fr; gap: 8pt; }
.ssigline .ssigrow { margin-bottom: 0; }

/* Fixed, not min: a filled rule came out 0.7pt taller than an empty one, so the
   seller's line and the buyer's line beside it did not sit level. */
.ssigrow .sfr { height: 13pt; min-height: 0; }

/* ---------- Bill of sale — the authorization block ----------
   ⭐ Keith 2026-08-23. Was two side-by-side columns, a SELLER bar and a BUYER
   bar, each carrying signature / printed name / date in thirds. One bar now
   spans both parties, and the order is printed name FIRST on a long line, then
   the signature with a short date beside it.
   ⚠️ This also retires the cramped cell that started the whole name problem:
   a printed name had about 84pt in the old thirds layout and now has half the
   sheet. fitFields() stays as the backstop, but on this block it should now
   have nothing left to do. */
/* One row per party: printed name, signature, date. Fizz's proportions —
   250 / 250 / 88 on a 624 content area, ~18 between — expressed as fr so the
   block keeps them at any sheet width.
   ⚠️ 30pt between rows, because these are written on by hand with the other
   party watching. Do not tighten this to win vertical space; take it from
   somewhere nobody has to write. */
.sauthrow {
  display: grid;
  grid-template-columns: 250fr 250fr 88fr;
  gap: 18pt;
  /* ⚠️ THIS GAP IS NOT WRITING SPACE, and that distinction is the whole reason
     it could be cut. The pen goes in the .sfr box ABOVE each rule; the label
     sits below the rule; this margin is the dead air between one row's label
     and the next row's box. Keith 2026-08-24: the block read too far apart top
     to bottom. Closing it costs a seller nothing, and the height it returns went
     straight back into the writing box below — which is now TALLER than before,
     not shorter.
     ⚠️ Page-fit history, still true: at 30pt this block pushed Texas to a second
     sheet, and at 26pt California still went over because its state answer sets
     two lines where Texas's sets one. Reprint a one-line state AND a two-line
     state before changing it — Texas alone reports success when it is not. */
  margin-top: 12pt;
}
.sauthrow .ssigrow { margin-bottom: 0; }
/* ⭐ 16pt, up from the shared 13pt. This is the box a human writes in, and on
   the free kit it is written in by hand with the other party standing there —
   and the BUYER writes on two of these three rules, on a sheet he has never
   seen before. Scoped to .sauthrow on purpose: the 13pt default is shared with
   sheet 1's signature block, and raising it globally would move page-fit on
   sheets that are already at their limit. Height for this came out of the dead
   gap above, so the block still got shorter overall. */
.sauthrow .sfr { height: 16pt; }

/* ---------- Bill of sale — the notary block ----------
   Prints only where a state's own material says THIS document gets notarized:
   West Virginia and Maryland. See bosNotary() for why Wyoming is not here.
   ⚠️ The seal area is a real constraint, not decoration. A notary seal is
   physically applied and most are about 1.6in across — printing anything into
   that space makes the impression unreadable, and an unreadable seal is a
   rejected document. Keep it empty and keep it at least this big. */
/* Clear of the authorization block above it — without this the bar lands on top
   of the SELLER SIGNATURE / DATE labels and reads as part of that block.
   ⚠️ 12pt, and the number is measured. The block is 91px tall and a plain
   state's bill of sale has 85px free at the foot — West Virginia and Maryland
   were running to a second sheet by SIX PIXELS. This margin and the one on
   .snotroom are where those pixels came from; nothing was cut from the sourced
   text to win them. If either state ever spills again, check here first. */
.snotblock { margin-top: 7pt; }
/* ⭐ The drawn blanks and the seal box are GONE — Keith, 2026-08-24. A notary
   with no certificate on the document attaches a loose one, which is routine
   practice, so the boxes were a convenience we invented and they cost this
   sheet a second page in two states. What is left is the sentence that says
   notarization is needed and on what condition, plus clear paper under it.
   ⚠️ Do not fill the space beneath this block with anything. Its emptiness is
   the feature — and it is ALREADY THERE. This sheet ends with the warning strip
   pinned above the footer, and every state leaves roughly a fifth of the page
   clear above it. Reserving another 54pt of padding here on top of that gap was
   what kept West Virginia and Maryland on two pages; the natural gap IS the
   notary's space. */
/* ⚠️ 7.4pt is the FLOOR, per Fizz: a warning that shrinks far enough stops
   working even in orange, and the test-drive terms at 5.5pt are already small
   enough to argue about. Treat ~7pt as the bottom for anything a seller has to
   act on. Take height from the words, not from the type size. */
/* Orange rule + orange label instead of a black section bar. Same job, 23px
   less of it — see the note in bosNotary(). */
.snotblock { border-left: 2pt solid var(--orange); padding-left: 7pt; }
.snotlead {
  font-size: 7.2pt; font-weight: bold; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange);
}
.snotfacts { margin: 2pt 0 0; padding-left: 11pt; font-size: 7.4pt; line-height: 1.26; }
.snotfacts li { margin: 0 0 1pt; }
/* The citation is the last bullet rather than a paragraph of its own — it saves
   a whole line on a sheet that was 29px from fitting, and it keeps the source
   attached to the facts it backs instead of floating under them. */
.snotsrc { list-style: none; margin-left: -11pt; font-size: 6.6pt; color: var(--mid); }
.snotroom { font-size: 7.4pt; line-height: 1.35; margin: 4pt 0 0; }
.snotary { display: grid; grid-template-columns: 1fr; gap: 20pt; margin-top: 10pt; }
.snotary.two { grid-template-columns: 1fr 1fr; }
/* ⚠️ The 36pt stacking margin on .ssigrow is for sheets people hand-write down
   the page. Inside this block it throws the printed-name and commission rules
   onto different baselines, which on a signature block reads as a mistake.
   Spacing here is set by the block, not inherited. */
.snotary .ssigrow { margin-bottom: 0; }
.snotrow { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 12pt; margin-top: 26pt; align-items: end; }
.snotseal {
  border: 0.7pt dashed #9A958E;
  /* A notary seal is physically stamped and a common round one is about an inch
     across. 52pt was under three quarters of that and the impression would have
     run over the rule beneath it. */
  height: 72pt;
  margin-top: 16pt;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 6.4pt; letter-spacing: 0.14em; color: #9A958E;
}
.snotseal span { text-transform: none; letter-spacing: 0.04em; font-size: 6pt; margin-top: 2pt; }
.snotwho {
  font-size: 6.2pt; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mid); margin-top: 4pt;
}

/* ⭐ Set by fitFields() when a value cannot fit its cell even at the 7pt floor —
   a very long name in the Printed name cell. The height goes on the whole ROW,
   never on the one cell that overflowed, because the fixed height above exists
   to keep the seller's rule and the buyer's rule level with each other. Growing
   one cell would fix the name and break the alignment. */
.ssigline.tall .ssigrow .sfr { height: 26pt; }

/* ---------- Footer ---------- */

/* Warnings sit directly above the footer bar, on every page of a sheet and in
   every state. They used to live in the body and in the orange callout; the
   callout is now reserved for the state's waiver or left empty, so the box
   never means two different things on two copies of the same sheet. */
.sh-warn {
  position: absolute;
  left: var(--inset); right: var(--inset);
  bottom: calc(var(--ftr-lift) + 26pt);
  font-size: 6.4pt;
  line-height: 1.35;
  color: var(--orange);
  text-align: center;
}

.sh-ftr {
  position: absolute;
  left: var(--inset); right: var(--inset); bottom: var(--ftr-lift);
  height: 24pt;
  background: var(--ink);
  display: flex;
  align-items: center;
}
.sf-brand { color: #FFF; font-weight: bold; font-size: 7pt; letter-spacing: 0.1em; padding-left: 10pt; }
/* Qualifiers live here, not in the callout. */
/* Sits beside the brand, left group. A customer quoting a problem quotes this. */
.sf-code { color: #FFF; opacity: 0.66; font-family: ui-monospace, Menlo, monospace; font-size: 6.2pt; letter-spacing: 0.04em; padding-left: 8pt; }
.sf-note { flex: 1; text-align: right; color: #FFF; opacity: 0.72; font-size: 6.4pt; font-style: italic; padding-right: 10pt; }
.sf-page {
  flex: none; width: 40pt; align-self: stretch;
  background: var(--orange); color: #111;
  font-weight: bold; font-size: 11pt;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- On-screen preview ---------- */

/* Shown at true proportions but scaled to the phone. transform keeps the pt
   measurements honest — restating them in px for screen is how the printed and
   previewed versions drift apart. */
.sheetprev {
  /* height set from the rendered page count so a two-page sheet is not clipped */
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #FFF;
  margin-bottom: 8px;
}
/* Auto height: a two-page sheet must show both pages, not clip the second. The
   scale factor is declared once and the wrapper height follows from it. */
.sheetprev { --sc: 0.32; }
/* 🔴 MUST EQUAL THE SHEET WIDTH. This was 576pt (8in) — correct while the page
   margin was 0.25in and wrong the moment it moved. The sheet became 7.7in and
   this wrapper stayed 8in, so every document preview in the app carried a white
   gutter down its right side. Keith: "as I look at all the docs they are all not
   flush." Derived now, so it cannot disagree again. */
.sheetscale { transform: scale(var(--sc)); transform-origin: top left;
              width: calc(8.5in - 2 * var(--page-margin)); }
.sheetprev { height: auto; }
.sheetscale .sheet + .sheet { margin-top: 8pt; }

@media print {
  .sheet, .sheet * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* The sheet already carries its own 0.25in band inset, so @page margin is 0
     and the artwork is placed at true size. */
  /* ⚠️ The base .printarea rules are the STICKER's: a fixed 10.4in height and
     overflow:hidden, both correct there because a transformed sticker would
     otherwise spill onto a second sheet. For a stack of kit sheets they are
     exactly wrong — they clipped everything after the first page, so a two-sheet
     print job came out as one sheet with the rest silently gone. */
  .printarea.sheetarea {
    padding: 0 !important; margin: 0 !important;
    width: auto !important; height: auto !important; overflow: visible !important;
  }
  .printarea.sheetarea .sheet:not(.land) { width: calc(8.5in - 2 * var(--page-margin)) !important; height: calc(11in - 2 * var(--page-margin)) !important; }
  /* The landscape sign is the same artwork turned on its side. This override
     used to hit every .sheet with !important, so the SOLD sign was forced into
     a portrait box and printed at three quarters size with its strip pushed off
     the page. */
  .printarea.sheetarea .sheet.land { width: calc(11in - 2 * var(--page-margin)) !important; height: calc(8.5in - 2 * var(--page-margin)) !important; }
  /* ⚠️ One sheet per page, explicitly. Printing several at once put two 756pt
     sheets into one 756pt page box and the second was simply lost — a print job
     that silently drops half the paperwork. break-after on every sheet but the
     last; break-inside so a sheet is never split across two pages. */
  .printarea.sheetarea .sheet { break-inside: avoid; page-break-inside: avoid; }
  /* break-BEFORE on every wrapper after the first. break-after with a
     :last-child exception did not work: each sheet is the only child of its own
     wrapper, so :last-child matched all of them and cancelled every break. */
  .printarea.sheetarea .sheetpage + .sheetpage { break-before: page; page-break-before: always; }
}

/* ---------- Sheet 11, the state page ---------- */

.swhose { font-size: 7.2pt; line-height: 1.3; margin: 0 0 7pt; }
.sqa { margin-bottom: 4pt; }
.sq { font-size: 7.2pt; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1.5pt; }
.sa { font-size: 10.4pt; font-weight: bold; line-height: 1.12; margin-bottom: 1.5pt; }
.sd { font-size: 7.8pt; line-height: 1.3; margin-bottom: 1.5pt; }
/* Every answer names where it came from. An unsourced claim about state law is
   the thing that sends somebody to the counter with the wrong paper. */
.ssrc { font-size: 6.4pt; font-style: italic; color: var(--mid); }

/* ⭐ The same answer/source pair, inserted into sheets 5, 6, 7 and 9 at the step
   the seller acts on it. The left rule marks it as a verified fact lifted from
   the state page rather than more body copy — a seller scanning the sheet has to
   be able to see at a glance which line is his state talking.
   ⚠️ Deliberately no .sd here. See the note on sStateAnswer: those sheets are a
   single fixed page with no overflow measurement, and a detail paragraph is what
   pushes a section off the bottom silently. */
.sinline { border-left: 2pt solid var(--ink); padding-left: 6pt; margin: 0 0 4pt; }
.sinline .sq { margin-bottom: 1pt; font-weight: bold; letter-spacing: 0.06em; }
.sinline .sa { font-size: 9.2pt; }

.sforms { width: 100%; border-collapse: collapse; font-size: 7.1pt; margin-top: 4pt; }
.sforms th {
  text-align: left; font-size: 6.4pt; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray); border-bottom: 0.7pt solid var(--ink); padding: 0 4pt 2pt 0; font-weight: normal;
}
.sforms td { padding: 2pt 4pt 2pt 0; border-bottom: 0.4pt solid #D5D1CB; vertical-align: top; line-height: 1.25; }
/* break-all split the URL mid-token — "documents/3" then "80382" on the next
   line, which is a link somebody has to reassemble by eye before typing it.
   Break only at the slashes. */
.surl { font-family: ui-monospace, Menlo, monospace; font-size: 6.4pt; word-break: normal; overflow-wrap: anywhere; line-height: 1.3; }
.stier {
  display: inline-block; background: var(--ink); color: #FFF;
  font-size: 6.2pt; letter-spacing: 0.06em; padding: 1pt 3pt; vertical-align: 0.5pt; margin-left: 2pt;
}
.schk { font-size: 6.6pt; line-height: 1.28; color: var(--mid); margin: 4pt 0 0; }

/* Verdict column. The links are the proof the answers are not invented, but a
   government form beside a kit form is where a seller stops and wonders which
   to use — so every row says what to do with it, on the row itself. A separate
   "resources" list would invite browsing, and browsing is where the confusion
   happens. */
.sforms td.suse { font-weight: bold; line-height: 1.25; }
.sno { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 6.4pt; color: var(--mid); margin-top: 1pt; }
.sforms { table-layout: fixed; }
.sforms th:nth-child(1), .sforms td:nth-child(1) { width: 22%; }
.sforms th:nth-child(2), .sforms td:nth-child(2) { width: 31%; }
.sforms th:nth-child(3), .sforms td:nth-child(3) { width: 35%; }
.sforms th:nth-child(4), .sforms td:nth-child(4) { width: 12%; }

/* ---------- Sheet 6, bill of sale ---------- */

.scols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16pt; margin-bottom: 4pt; }
.scols2 .sf { margin-bottom: -2pt; }
.sp { font-size: 8pt; line-height: 1.3; margin: 0 0 3pt; }
/* Ruled writing space. Two lines for the seller's own conditions, one for the
   lien. The lien line is a BLANK, never a checkbox — a tickbox for "no liens"
   gets ticked without thought, a blank forces "none" or the lender's name. */
/* A real second element rather than a box-shadow. Shadows are the first thing a
   print engine drops, and a writing line that does not print is a line somebody
   writes on that comes out blank. */
.sruled {
  border-bottom: 0.7pt solid var(--ink);
  min-height: 13pt; margin: 0 0 2.5pt;
  font-size: 9pt; line-height: 13pt;
}
.sruled.blank { margin-bottom: 6pt; }
.sruled.one { margin-bottom: 5pt; }
.sadv { font-size: 7pt; font-style: italic; line-height: 1.28; color: var(--mid); margin: 0 0 5pt; }

/* ---------- Shared sheet furniture ---------- */

.stick { list-style: none; margin: 0 0 6pt; padding: 0; display: grid; gap: 2.5pt 14pt; font-size: 8pt; line-height: 1.3; }
.stick.c2 { grid-template-columns: 1fr 1fr; }
.stick.c3 { grid-template-columns: repeat(3, 1fr); }
.stick li { position: relative; padding-left: 13pt; break-inside: avoid; }
/* An empty square, drawn not typed — a font glyph for a ballot box is missing on
   half the machines this prints from and comes out as a blank or a tofu box. */
.stick li::before {
  content: ""; position: absolute; left: 0; top: 1.6pt;
  width: 8pt; height: 8pt; border: 0.7pt solid var(--ink);
}
.snum { margin: 0 0 6pt; padding-left: 13pt; font-size: 8pt; line-height: 1.35; }
.snum li { margin-bottom: 1pt; }
.sbullet { margin: 0 0 5pt; padding-left: 12pt; font-size: 8pt; line-height: 1.35; }

.slog { width: 100%; border-collapse: collapse; font-size: 7pt; margin: 0 0 7pt; table-layout: fixed; }
.slog th {
  text-align: left; font-size: 6.2pt; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray); font-weight: normal; border-bottom: 0.7pt solid var(--ink);
  padding: 0 3pt 2pt 0; vertical-align: bottom;
}
/* Rows people write on by hand, beside a stranger, standing up. */
.slog td { height: 15pt; border-bottom: 0.4pt solid var(--rule); padding: 0 3pt 0 0; }
.slog .stickcell { text-align: center; }
.slog .stickcell::before { content: ""; display: inline-block; width: 7pt; height: 7pt; border: 0.7pt solid var(--ink); margin-top: 4pt; }
/* ⚠️ The test-drive terms sit directly above every signature, never in a
   paragraph thirty rows away. 6.5pt, not the 5.5 the reference PDF used — Fizz
   flagged that as small enough to be argued about, and he was right. */
.slog.testdrive th.sterms { width: 27%; }
.slog th.sterms span {
  display: block; margin-top: 2pt; font-size: 6.5pt; line-height: 1.25;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}

/* Orange FILL = go here next. Never confuse with the orange OUTLINE callout,
   which means this can cost you money. BRAND.md §5c. */
.shandoff {
  background: var(--orange); color: #111;
  font-weight: bold; font-size: 9pt; letter-spacing: 0.03em;
  text-align: center; padding: 7pt 8pt; margin: 8pt 0 7pt; line-height: 1.3;
}
.shandoff span { display: block; font-size: 7pt; font-weight: bold; margin-top: 2pt; }

/* ---------- Sheet 10, SOLD — landscape, the for-sale sign geometry ---------- */

/* ⚠️ Landscape, and it needs its own @page or the artwork lands on a portrait
   sheet squeezed to fit — which is exactly what happened: SOLD ran off both
   edges and the strip fell to the bottom of the page. A named page lets one
   landscape sheet sit in a print job of portrait ones. */
.sheet.land { width: calc(11in - 2 * var(--page-margin)); height: calc(8.5in - 2 * var(--page-margin)); page: landsheet; }
.soldfield {
  position: absolute; top: 0; left: 0; right: 0;
  height: 456pt; background: var(--ink);
  border: 6pt solid #FFF;
  display: flex; align-items: center; justify-content: center;
}
/* Sized to the field rather than picked by eye — at 300pt "SOLD" was wider than
   the sign and printed as "OLD" with the ends cut off. */
.soldword { color: var(--orange); font-weight: bold; font-size: 170pt; line-height: 0.85; letter-spacing: -0.02em; white-space: nowrap; }
.soldstrip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120pt;
  background: #FFF; display: flex; align-items: center; gap: 18pt; padding: 0 18pt;
}
.soldmark { height: 84pt; width: auto; flex: none; }
.soldmid { flex: 1; text-align: center; }
/* One line, per the spec. At 30pt it wrapped after "SELL YOURS AT", which broke
   the read from across a car park — the whole point of the strip. */
.soldcta { font-weight: bold; font-size: 23pt; letter-spacing: 0.01em; white-space: nowrap; }
.soldsub { font-size: 11pt; color: var(--mid); letter-spacing: 0.14em; margin-top: 4pt; }
.soldqr { width: 84pt; height: 84pt; flex: none; }
.soldqr canvas { width: 100%; height: 100%; image-rendering: pixelated; }

/* ---------- Sheet 6, the statutory waiver block ---------- */

/* Set apart from the running agreement text, because art. 2548 requires it to be
   brought to the buyer's attention and a paragraph that looks like every other
   paragraph is not brought to anybody's attention. */
.swaiver { border: 0.7pt solid var(--ink); padding: 5pt 7pt 4pt; margin: 0 0 4pt; }
.swtitle { font-weight: bold; font-size: 8pt; letter-spacing: 0.06em; margin-bottom: 3pt; }
.swp { font-size: 7.4pt; line-height: 1.26; margin: 0 0 3pt; }
.swinit { width: 45%; margin-top: 2pt; }
.swinit .sfr { height: 13pt; min-height: 0; }

/* ---------- The for-sale sign ---------- */

/* 660 x 420 is 1.571, wider in proportion than the printable landscape box, so
   the width is what constrains it and the height follows. Centred vertically on
   the page rather than pinned to the top — it is a sign, and a sign hanging off
   the top edge of a sheet of paper looks like a mistake. */
.sheet.land.sign {
  background: #FFF;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sheet.land.sign svg { width: 756pt; height: auto; display: block; }