/* src/contract-document.css — how the contract prints, wherever it is drawn.
 *
 * The document itself is src/contract-document.js, drawn by the iPad where it
 * is signed, by the office reading a signed one, and by the customer at their
 * own copy (D.12). This is what makes all three look like the same piece of
 * paper — which, for a contract, is not a matter of taste: two renderings of
 * one document that do not match are two documents.
 *
 * It carries its own --doc-* tokens, so it does not depend on either app's
 * palette, and neither app's own styles reach into it.
 */

/* ===========================================================================
   Contract document
   ---------------------------------------------------------------------------
   The contract is a legal document a customer reads and signs, not an app
   screen. It renders on white paper with document typography both on screen and
   in print, so what the rep shows at the table is what the PDF looks like.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Design notes
   Palette  ink #12151a · body #2f353b · muted #79818a · rule #d4dade
            brand #1f4e4c (the teal in the mark) · wash #f1f6f5
            accent #e07b18 (the sun in the mark), spent in exactly two places
   Type     Iowan Old Style / Palatino for reading matter; Helvetica Neue for
            structural labels; monospace for the licence and job number, which
            are data rather than prose.
   Layout   The contract is a stack of paper sheets on a desk, not one flat
            wall of white. Each sheet carries a footer rule; each section is
            announced by a short brand spine; each unit is a card with a
            tinted header strip and the style drawing in its own well.
   --------------------------------------------------------------------------- */

.contract-doc {
  --doc-ink: #12151a;
  --doc-body: #2f353b;
  --doc-mute: #79818a;
  --doc-rule: #d4dade;
  --doc-hair: #eaedf0;
  --doc-brand: #1f4e4c;
  --doc-wash: #f1f6f5;
  --doc-accent: #e07b18;
  --doc-paper: #ffffff;
  --doc-desk: #e6e9ec;

  background: var(--doc-desk);
  color: var(--doc-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 20px 16px 26px;
  border-radius: 8px;
  /* Its padding inside its width, wherever it is drawn: the customer's own pages
     set no box-sizing of their own, as both apps do, and a sheet 100% wide plus
     its padding ran off a phone and an iPad (the UX sweep, 22 Oct). */
  box-sizing: border-box;
  max-width: none;
  margin: 0;
  counter-reset: docsheet doclegal;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contract-doc strong { color: var(--doc-ink); }

/* Bulleted changes on an addendum. Set like .doc-intro so the list reads as part
   of the document rather than as app UI dropped into it. */
.doc-list { margin: 8px 0 0 20px; padding: 0; }
.doc-list li { margin: 0 0 5px; line-height: 1.5; color: var(--doc-ink); }

/* --- the sheet ------------------------------------------------------------ */
.contract-page {
  background: var(--doc-paper);
  width: 100%;
  max-width: 8.5in;
  margin: 0 auto;
  padding: 34px 40px 16px;
  box-sizing: border-box;
  border-radius: 2px;
  position: relative;
  counter-increment: docsheet;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(18, 21, 26, .07),
    0 1px 2px rgba(18, 21, 26, .07),
    0 14px 28px -14px rgba(18, 21, 26, .28);
}

/* Running footer. On screen the sheet count is exact, so it is shown; on paper
   a sheet can flow onto a second page, so only the always-true half prints. */
.doc-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--doc-hair);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--doc-mute);
}
.doc-foot .doc-foot-sheet::before { content: "Sheet " counter(docsheet); }

/* --- letterhead ----------------------------------------------------------- */
.doc-head {
  display: flex; justify-content: space-between; gap: 28px;
  align-items: flex-start; padding-bottom: 16px;
  border-bottom: 2.5px solid var(--doc-brand);
}
.doc-co-name {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1.1;
  color: var(--doc-brand);
}
.doc-co-lines, .doc-party-lines { font-size: 11px; color: var(--doc-body); margin-top: 6px; }
.doc-co-lines div, .doc-party-lines div { margin-top: 1px; }
.doc-lic {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .02em; color: var(--doc-brand);
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--doc-hair);
}
.doc-party { text-align: right; min-width: 40%; }
.doc-party-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--doc-mute); margin-bottom: 3px;
}
.doc-party-name { font-weight: 700; font-size: 15px; letter-spacing: -.005em; }
.doc-job {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--doc-ink); margin-top: 6px;
}

/* --- document title ------------------------------------------------------- */
.doc-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: .14em;
  text-transform: uppercase; text-align: center; margin: 22px 0 0;
}
.doc-title::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--doc-accent); margin: 9px auto 0;
}
.doc-subtitle {
  text-align: center; font-size: 11px; color: var(--doc-mute);
  letter-spacing: .04em; margin-top: 8px;
}
.doc-intro { font-size: 12px; color: var(--doc-body); margin: 16px 0; }
.doc-intro:first-letter { /* nothing decorative — kept so the rule is explicit */ }

/* What the price includes besides the windows and doors, under the scope of work (from the third wording; the UX
   sweep, round 2, 22 Oct): a short list, read as part of the sentence above it. */
.doc-extras { font-size: 12px; color: var(--doc-body); margin: -4px 0 14px; }
.doc-extras-head {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--doc-mute);
  margin-bottom: 4px;
}
.doc-extras ul { margin: 0 0 0 18px; padding: 0; line-height: 1.6; }
.doc-extra-name { color: var(--doc-ink); font-weight: 600; }

/* --- section headings ----------------------------------------------------- */
.doc-section {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--doc-brand);
  margin: 22px 0 12px; padding-left: 11px; position: relative;
  border-bottom: 1px solid var(--doc-rule); padding-bottom: 7px;
}
.doc-section::before {
  content: ""; position: absolute; left: 0; top: 1px; bottom: 8px;
  width: 3px; background: var(--doc-brand);
}
.contract-page > .doc-section:first-child { margin-top: 0; }

/* --- a window or door ----------------------------------------------------- */
.unit-card {
  border: 1px solid var(--doc-rule);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--doc-paper);
  break-inside: avoid; page-break-inside: avoid;
}
.unit-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 12px;
  background: var(--doc-wash);
  border-bottom: 1px solid var(--doc-rule);
}
.unit-no {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--doc-brand);
}
.unit-room {
  font-size: 11.5px; color: var(--doc-body); font-style: italic;
}
.unit-main { display: flex; gap: 14px; align-items: flex-start; padding: 11px 12px 12px; }
.unit-body { flex: 1; min-width: 0; }
.unit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 9px 18px;
}
.unit-field .k {
  display: block; font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: var(--doc-mute);
  margin-bottom: 1px;
}
.unit-field .v { font-size: 12px; font-variant-numeric: tabular-nums; }
.unit-opts {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--doc-hair); font-size: 11px;
  color: var(--doc-body);
}
.unit-opts .k {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: var(--doc-mute);
  margin-right: 4px;
}

/* The style drawing, in its own well so it reads as a figure. */
.unit-icon-wrap {
  flex: none; width: auto; min-width: 54px; padding: 5px 4px;
  border: 1px solid var(--doc-hair); border-radius: 2px; background: var(--doc-wash);
  color: var(--doc-brand); line-height: 0;
}
.unit-icon { width: 46px; height: 61px; display: block; margin: 0 auto; }
/* A sliding door is drawn wide; the well sizes to whatever it holds. */
.unit-icon-wide { width: 74px; height: 64px; }

/* --- key/value rows (totals, payments) ------------------------------------ */
.doc-kv { width: 100%; border-collapse: collapse; font-size: 12px; }
.doc-kv td { padding: 7px 0; border-bottom: 1px solid var(--doc-hair); }
.doc-kv td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.doc-kv tr.total td {
  border-top: 2px solid var(--doc-brand); border-bottom: 2px solid var(--doc-brand);
  font-weight: 700; font-size: 14px; padding: 10px 0;
  background: var(--doc-wash);
}
.doc-kv tr.total td:first-child {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  padding-left: 10px;
}
.doc-kv tr.total td:last-child { padding-right: 10px; }

/* --- counts --------------------------------------------------------------- */
.doc-counts { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-counts span {
  flex: 1 1 130px;
  border: 1px solid var(--doc-rule); border-top: 2px solid var(--doc-brand);
  padding: 9px 11px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--doc-mute);
}
.doc-counts b {
  display: block; font-size: 21px; letter-spacing: -.01em; color: var(--doc-ink);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* --- plain document facts (replaces app notice boxes inside the contract) -- */
.doc-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 4px; }
.doc-fact { flex: 1 1 190px; }
.doc-fact .k {
  display: block; font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: var(--doc-mute);
}
.doc-fact .v {
  display: block; font-size: 12px; padding: 5px 0 4px;
  border-bottom: 1px solid var(--doc-rule); white-space: pre-wrap; min-height: 1.5em;
}

/* --- legal body ----------------------------------------------------------- */
.doc-legal { font-size: 11px; line-height: 1.6; color: var(--doc-body); white-space: pre-wrap; }
.doc-legal-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: .02em;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--doc-rule);
  color: var(--doc-ink);
  counter-increment: doclegal;
}
.doc-legal-title::before {
  content: counter(doclegal, decimal-leading-zero);
  font-size: 10px; letter-spacing: .06em; color: var(--doc-accent);
  margin-right: 9px; vertical-align: 1px;
}

/* --- initials + signatures ------------------------------------------------ */
.doc-initials {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--doc-rule);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--doc-mute);
}
.doc-initials input {
  width: 104px; padding: 6px 8px; border: 1px solid var(--doc-rule); border-radius: 2px;
  background: var(--doc-wash); color: var(--doc-ink);
  font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 13px;
  text-align: center; letter-spacing: .08em;
}

/* What was written in that box, on a contract that has been signed. Without
   this it inherited the row's own label style — 9px, uppercase, muted grey —
   so a customer opening their signed copy could not see their initials at all
   and the contract read as unsigned. It is the same box as the input above,
   because it is the same thing: the box, filled in. */
.doc-initials .doc-initialled {
  display: inline-block; min-width: 104px; padding: 6px 8px;
  border: 1px solid var(--doc-rule); border-radius: 2px;
  background: var(--doc-paper); color: var(--doc-ink);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 13px; text-transform: uppercase; text-align: center; letter-spacing: .08em;
}
/* A box nobody initialled says so, and does not pretend to be a value. */
.doc-initials .doc-initialled.missing {
  color: var(--doc-mute); background: var(--doc-wash);
  font-size: 10px; font-style: italic; text-transform: none; letter-spacing: 0;
}

.doc-sign-grid { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
/* min-width:0 matters: the pad canvas is 640px intrinsically, and without it a
   pair of signature blocks can never sit side by side. */
.doc-sign-grid > div { flex: 1 1 240px; min-width: 0; }
/* A lone signature block keeps the width of a paired one, so all three pads on
   the page are the same size. */
.doc-sign-grid-single > div { flex: 0 1 calc(50% - 11px); }

/* The pad is where a signature is written, so it reads as a ruled space on the
   page rather than as an app control. */
.contract-doc .sig-pad {
  border: 1px solid var(--doc-rule);
  border-bottom: 1.5px solid var(--doc-ink);
  border-radius: 2px 2px 0 0;
  background: var(--doc-paper);
  overflow: hidden;
}
.contract-doc .sig-pad canvas,
.contract-doc .sig-pad img { display: block; width: 100%; height: auto; }
/* A signature is drawn on a 640×180 pad, so it lands about 111px tall here. The
   cap is for anything that is not that shape: without it an image with an odd
   aspect ratio stretches the block to its own height and pushes the rest of the
   page off the sheet. */
.contract-doc .sig-pad img { max-height: 130px; object-fit: contain; object-position: left bottom; }

/* A signature block on a contract nobody has finished. It has to read as a
   gap rather than as an empty box somebody might take for a signature. */
.contract-doc .sig-unsigned {
  min-height: 56px; display: flex; align-items: flex-end; padding: 0 0 6px 2px;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 10px; font-style: italic;
  color: var(--doc-mute);
}

/* Inputs sitting inside the document print and read as document text. */
.contract-doc .print-plain-input {
  color: var(--doc-ink);
  background: transparent;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 12px;
  border: none; border-bottom: 1px solid var(--doc-rule); border-radius: 0;
  padding: 2px 0;
}
.contract-doc .print-plain-input[readonly] { border-bottom-color: transparent; }
.doc-sign-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--doc-mute); margin-bottom: 5px;
}
.doc-sign-meta {
  display: flex; gap: 18px; margin-top: 7px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: var(--doc-mute);
}
.doc-sign-meta > span { flex: 1; border-top: 1px solid var(--doc-ink); padding-top: 4px; }

.doc-note { font-size: 11px; color: var(--doc-mute); font-style: italic; margin-top: 10px; }

/* --- lead safety (JD, 6 Oct) ----------------------------------------------
   One ruled box: the question and its answer on a line, and on a Yes the
   terms and a dated signature for each homeowner. */
.doc-lead { border: 1px solid var(--doc-rule); padding: 10px 12px 12px; }
.doc-lead-q {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 12.5px; color: var(--doc-ink);
}
.doc-lead-answer { font-weight: 400; }
.doc-lead-choice { display: flex; gap: 20px; font-weight: 400; }
.doc-lead-choice label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; }
.doc-lead-choice input { width: 20px; height: 20px; margin: 0; }
.doc-lead-terms { white-space: normal; margin-top: 6px; }
.doc-lead-head {
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 11.5px;
  color: var(--doc-ink); margin: 10px 0 4px;
}
.doc-lead-terms p { margin: 0 0 6px 18px; }
.doc-lead-sign { margin-top: 14px; }
.doc-lead-date { min-height: 1.4em; margin-top: 6px; font-size: 12px; color: var(--doc-ink); }

/* --- the second wording's pages (8 Oct 2026) -------------------------------
   Sizes in points, because the law gives them in points: the lien law notice
   in capitals, bold, 12 point or more (s. 713.015, F.S.); the right to cancel
   beside the buyer's signature, and the notice of cancellation, bold, 10 point
   or more (16 CFR 429.1(a)-(b)). Each set a half point over, so no rounding
   anywhere takes them under. The browser tests measure them. */
.doc-lien-text {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5pt; font-weight: 700; text-transform: uppercase;
  line-height: 1.45; color: var(--doc-ink); margin: 2px 0 14px;
}
.doc-lien-lead { font-size: 11pt; color: var(--doc-ink); margin: 0 0 6px; }
.doc-lien-sign { margin-top: 10px; }
.doc-lien-date { min-height: 1.4em; margin-top: 6px; font-size: 12px; color: var(--doc-ink); }
.doc-lien-sign .doc-sign-meta > span + span { flex: 0 0 34%; }
/* The day signed over the Date rule, on the right, the width of that rule (the UX sweep, round 3, 23 Oct — SA3-03): the
   same row as the labels below it, so the one sits over the other. */
.doc-lien-datebox { display: flex; gap: 18px; }
.doc-lien-datebox > span { flex: 1; }
.doc-lien-datebox > .doc-lien-date { flex: 0 0 34%; box-sizing: border-box; }

.doc-cancel-right {
  border: 1.5px solid var(--doc-ink); padding: 12px 14px 14px; margin: 14px 0 16px;
  color: var(--doc-ink);
}
.doc-cancel-caption {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13pt; font-weight: 700; letter-spacing: .04em; color: var(--doc-ink);
}
.doc-cancel-right p {
  font-size: 10.5pt; font-weight: 700; line-height: 1.5; margin: 8px 0 0; color: var(--doc-ink);
}
.doc-filled { border-bottom: 1px solid currentColor; padding: 0 2px; }

/* The rep's tick: theirs, not the customer's — an amber note on the iPad, never on paper. */
.doc-oral {
  border: 1px dashed #c47716; background: #fff7ec; border-radius: 4px;
  padding: 10px 12px; margin: 0 0 14px;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.45; color: var(--doc-ink);
}
.doc-oral-head {
  font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: #9a5a0c; margin-bottom: 6px;
}
.doc-oral-tick { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-height: 44px; }
.doc-oral-tick input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; }

.doc-cancel-copy {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px; letter-spacing: .11em; text-transform: uppercase; color: var(--doc-mute);
  margin: 0 0 10px;
}
.doc-cancel-notice {
  border: 1.5px dashed var(--doc-ink); padding: 16px 18px 20px;
  font-size: 10.5pt; font-weight: 700; line-height: 1.5; color: var(--doc-ink);
}
.doc-cancel-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13pt; font-weight: 700; letter-spacing: .08em; text-align: center; margin-bottom: 12px;
}
.doc-cancel-dateline { min-height: 1.5em; }
.doc-cancel-under { font-size: 10.5pt; }
.doc-cancel-notice p { margin: 10px 0 0; }
.doc-cancel-line { margin-top: 22px; }
.doc-cancel-line > span { display: block; width: 62%; height: 28px; border-bottom: 1px solid var(--doc-ink); }
.doc-cancel-about { font-size: 10.5pt; color: var(--doc-body); margin: 10px 0 0; }

.doc-warranty-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14pt; font-weight: 700; letter-spacing: .12em; text-align: center; margin: 0 0 14px;
}
.doc-warranty-sheet p { font-size: 11pt; line-height: 1.55; color: var(--doc-ink); margin: 0 0 9px; }
.doc-warranty-part { padding-left: 10px; border-left: 3px solid var(--doc-brand); }
.doc-placeholder {
  background: #fdecea; color: #8a1f11; border: 1px solid #d9a39b; border-radius: 3px;
  padding: 8px 10px; font-weight: 700;
}

/* --- letterhead logo ------------------------------------------------------
   The mark already contains the wordmark, so the company name is not repeated
   as text beside it. */
.doc-co { display: flex; flex-direction: column; }
.doc-logo { width: 138px; height: auto; display: block; margin: -8px 0 2px -6px; }

/* --- a phone ---------------------------------------------------------------
   The same sheets, with less desk and margin round them: at 40px a side on a
   390px phone the words had a column narrower than a receipt (the UX sweep, 22
   Oct). The page is drawn the same — nothing of what it says changes. */
@media screen and (max-width: 600px) {
  .contract-doc { padding: 10px 6px 16px; gap: 12px; border-radius: 0; }
  .contract-page { padding: 22px 16px 12px; }
  .doc-head { flex-wrap: wrap; gap: 14px; }
  .doc-party { text-align: left; min-width: 0; flex: 1 1 100%; }
}

/* --- print ----------------------------------------------------------------
   Paper is already paper, so the desk, shadows and sheet counter go away. The
   brand rules stay: this PDF is what the customer keeps. */
@media print {
  .contract-doc {
    padding: 0; border-radius: 0; max-width: none; gap: 0; display: block;
    background: #fff !important;
  }
  .contract-page {
    box-shadow: none !important; border-radius: 0; padding: 0 0 10px;
    max-width: none; display: block;
  }
  .doc-foot { border-top-color: #999 !important; }
  .doc-foot .doc-foot-sheet { display: none; }
  /* The office's and the customer's copy count their sheets in words (readableHtml), the third of the footer's three:
     not printed either — on paper a sheet can flow onto two, and "Sheet 3 of 9" printed on the fifth page is wrong
     (the UX sweep, 22 Oct). By its place, so a contract signed draws exactly as it did. */
  .doc-foot > span:nth-child(3) { display: none; }
  .unit-card { border-color: #999 !important; }
  .unit-head { border-bottom-color: #999 !important; }
  .doc-head { border-bottom-color: #000 !important; }
  .doc-section {
    border-bottom-color: #9aa3a2 !important;
    color: #1f4e4c !important;
  }
  .doc-section::before { background: #1f4e4c !important; }
  .doc-title::after { background: #e07b18 !important; }
  .doc-co-name, .doc-lic, .unit-no { color: #1f4e4c !important; }
  .doc-legal-title::before { color: #e07b18 !important; }
  .doc-kv tr.total td { border-color: #000 !important; }
  .doc-counts span { border-color: #999 !important; border-top-color: #000 !important; }
  .doc-fact .v { border-bottom-color: #000 !important; }
  .doc-sign-meta > span { border-top-color: #000 !important; }
  .unit-icon-wrap { color: #000 !important; border-color: #999 !important; }
  .contract-doc .sig-pad { border-color: #999 !important; border-bottom-color: #000 !important; }
  .contract-doc .print-plain-input { border-bottom-color: transparent !important; }
  .doc-logo { width: 120px; }
  /* A page of its own: the lien law notice "on a separate page", and each copy
     of the notice of cancellation on a sheet that tears off whole. */
  .contract-page:has(> .doc-own-sheet) {
    break-before: page; page-break-before: always;
    break-after: page; page-break-after: always;
  }
  .doc-cancel-notice, .doc-cancel-right { break-inside: avoid; page-break-inside: avoid; }
  .doc-oral { display: none !important; }
}

/* ==== PAPER DAY R1 (src/contract-document.js PAPER_R1; phase 1, stage A) ====
   What a paper dated on or after R1 is drawn with that one before it is not. Only such a paper carries a doc-r1 class,
   so nothing here can reach a paper already signed; and nothing above this block is ever edited for it — taken out, the
   file is the one every earlier paper was drawn with (tests/paper-css-freeze.test.cjs). */

/* The estimated completion, a day from the calendar (B5; JD's decision #8): said as the customer reads a date, in the
   paper's own type over its rule, with the calendar's picker laid unseen over it — a tap opens the calendar, a finger tall.
   Printed, the day alone. */
.doc-r1-day { position: relative; display: inline-block; min-width: 150px; text-align: right; vertical-align: bottom; }
.doc-r1-said {
  display: block; min-height: 1.5em; padding: 2px 0; box-sizing: border-box;
  border-bottom: 1px solid var(--doc-rule);
  font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 12px; color: var(--doc-ink);
}
.doc-r1-said:empty::before { content: attr(data-placeholder); color: var(--doc-mute); }
.doc-r1-pick {
  position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; width: 100%; height: auto; box-sizing: border-box;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px;
}
.doc-r1-pick:disabled { cursor: default; }
.doc-r1-day:focus-within .doc-r1-said { outline: 2px solid var(--doc-brand); outline-offset: 2px; }
@media print {
  .doc-r1-pick { display: none !important; }
  .doc-r1-said { border-bottom-color: transparent !important; }
}
/* ==== END OF PAPER DAY R1 ==== */
/* ==== PAPER DAY R3 (src/contract-document.js PAPER_R3; phase 1, stage H2) ====
   The papers' second look. Only a paper dated on or after R3 carries doc-look-2 on its sheets, so nothing here can reach a
   paper already signed; and nothing above this block is ever edited for it — R1's block and this one taken out, the file
   is the one every earlier paper was drawn with (tests/paper-css-freeze.test.cjs). */

/* The letterhead's job and licence lines in the paper's own type — its sans, its figures the same width — where a
   typewriter's face set them apart from the rest of the head (§3 component 18: one letterhead, set as the paper is). */
.doc-look-2 .doc-lic,
.doc-look-2 .doc-job {
  font-family: "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.doc-look-2 .doc-job { font-size: 10.5px; color: var(--doc-body); }

/* The lead-safety answers a finger's size across as well as up (the round-5 audit, R5S-09: 33 wide): each answer's label
   reaches past its button on the left, which brings Yes 12px and No 6px to the left of where they stood. */
.doc-look-2 .doc-lead-choice label { padding: 0 6px 0 12px; margin-left: -12px; }

/* The right-to-cancel tick the same (R5S-09: 34 × 35): its label reaches to the left of the box, and the box comes down
   inside it. Never up over the heading: a touch on the label writes that the notice was given (contract.oralNotice), the
   record of 16 CFR 429.1(e), so a touch on the heading must stay nobody's. */
.doc-look-2 .doc-oral-tick { padding: 12px 0 2px 11px; margin-left: -11px; }

/* Clear, under each pad: the paper's own quiet button, a finger tall — not the iPad app's small one (.btn.small), which
   the paper does not own. Only the iPad draws it, and its print sheet hides every button (styles.css). */
.doc-look-2 .doc-sign-clear {
  min-height: 44px; min-width: 64px; padding: 0 14px; margin: 0; box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; color: var(--doc-brand);
  background: var(--doc-paper); border: 1px solid var(--doc-rule); border-radius: 6px; cursor: pointer;
}
.doc-look-2 .doc-sign-clear:focus-visible { outline: 2px solid var(--doc-brand); outline-offset: 2px; }
/* ==== END OF PAPER DAY R3 ==== */