/* Contract-only styling. Everything the contract shares with the proposal and
   the invoice — tokens, the sheet, letterhead, meta band, fields, parties,
   text blocks, the schedule card, totals, footer, editing affordances — lives
   in doc_core.css, which loads before this file. What's left here is the part
   of the document only a contract has: its numbered clauses, the signature
   blocks, and the certificate of completion.

   The one place the contract diverges on purpose is density. A proposal is a
   pitch and can breathe; a contract is read for its clauses, so the numbered
   clause list is the typographic centre of the page.

   Used by the vendor's editor (contract_edit.html), the client-facing signing
   page (contract_public.html) and the PDF. */

:root {
  /* The hand-drawn signature mark is rendered in a script face; falling back
     to the serif italic still reads as a signature rather than as body copy. */
  --font-script: 'Fraunces', 'Segoe Script', 'Brush Script MT', cursive;
}

/* ── Recitals — the "this agreement is made between…" preamble ── */
.recitals-body { font-size: 14.5px; color: var(--ink-mid); line-height: 1.6; max-width: 64ch; }
.recitals-body p + p { margin-top: 12px; }

/* ── Scope deliverables ──
   The bullet list under the scope fields. Its separator comes from
   doc_core.css (.deliverables shares .field-grid + .field-grid's rule). */
.deliverables { list-style: none; display: grid; gap: 9px; }
.deliverables li { font-size: 14px; color: var(--ink-mid); display: flex; gap: 10px; align-items: baseline; line-height: 1.5; }
.deliverables li::before { content: '-'; color: var(--brand); font-size: 11px; flex-shrink: 0; }

/* ── Clauses ──
   doc_core.css's .text-block, numbered. The counter means inserting or
   deleting a clause in the editor can never leave a gap or a repeat. Unlike
   the proposal's terms these stack full-width rather than sitting two-up, and
   they take a hanging number instead of the accent rule above the title. */
.clauses .clause { flex-basis: 100%; }
.clause-list { counter-reset: clause; margin-top: 18px; }
.clause { position: relative; padding-left: 38px; padding-bottom: 18px; }
.clause:last-child { padding-bottom: 0; }
.clause::before {
  counter-increment: clause;
  content: counter(clause) '.';
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-serif); font-size: 12px; color: var(--brand);
}

/* ── Payment schedule ──
   The card itself is doc_core.css's .payment-table. Only the total line below
   it is the contract's own: .total-box is shrink-to-fit, so
   `justify-content: space-between` has no space to distribute and the row's
   separation is entirely its flex `gap` — which WeasyPrint doesn't honour
   here, printing "Total$650.00". */
.total-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.total-box { width: auto; }
.total-line .tl-label { padding-right: 16pt; }
.total-line .tl-value { font-size: 20px; }

/* ── Acceptance / signatures ──
   Two states share this block: unsigned (a ruled line, as a printed contract
   would have) and signed (the recorded name, mark, and timestamp). The editor
   only ever shows the unsigned state — signatures are never authorable. */
.acceptance-note { font-size: 13px; color: var(--ink-mid); line-height: 1.6; margin-top: 6px; margin-bottom: 26px; max-width: 64ch; }
.sig-grid { display: flex; flex-wrap: wrap; gap: 22px 34px; }
.sig-block { flex: 1 1 240px; min-width: 0; }
.sig-role { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }

/* Unsigned: the ruled line. Tall enough to sign by hand on a printed copy. */
.sig-line { border-bottom: 1.5px solid #c3cbd6; margin-bottom: 7px; height: 42px; }
.sig-field-label { font-size: 11px; color: var(--ink-light); margin-bottom: 18px; }

/* Signed: the executed mark. min-height keeps a typed-only signature the same
   height as a drawn one, so the two blocks stay level whichever way each
   party signed. */
.sig-mark { min-height: 42px; display: flex; align-items: flex-end; border-bottom: 1.5px solid #c3cbd6; margin-bottom: 7px; padding-bottom: 4px; }
.sig-mark img { max-height: 56px; max-width: 100%; }
.sig-typed { font-family: var(--font-script); font-size: 24px; font-style: italic; color: var(--ink); line-height: 1.1; }
.sig-meta { font-size: 11px; color: var(--ink-light); line-height: 1.6; }
.sig-meta b { color: var(--ink-mid); font-weight: 600; }
/* Not italic: this is DM Sans, which ships upright weights only, so both the
   browser and WeasyPrint were synthesizing an oblique — the only faked face
   in the document. The size and colour already read it as an aside. */
.sig-pending { font-size: 12px; color: var(--ink-light); padding-top: 8px; }

/* ── Certificate of completion ──
   The audit trail. Deliberately plain and monospaced: it's evidence, not
   design, and should read as machine-recorded rather than as something the
   vendor typed. */
.audit-title { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 14px; }
.audit-row { display: grid; grid-template-columns: 140px 1fr; gap: 10px 18px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.audit-row:last-child { border-bottom: none; }
.audit-key { color: var(--ink-light); font-weight: 500; }
.audit-val { color: var(--ink-mid); font-family: var(--font-mono); word-break: break-all; }
.audit-note { font-size: 11.5px; color: var(--ink-light); line-height: 1.6; margin-top: 14px; max-width: 64ch; }

/* PDF-only running-footer source — see doc_core.css. Kept addressable here
   because contracts saved before it moved to the page template carry one. */

/* ── Legacy compat (pre-redesign saved content) ──
   Contract.content (and a vendor's saved contract_template_html) is a frozen
   HTML snapshot and nothing ever rewrites one, so a contract signed before the
   redesign still carries the old class names verbatim and keeps rendering
   through *this* file forever.

   The retired names are aliased onto the *current* rules rather than given
   the retired rules back — `.company-name` beside `.mark-name`, `.doc-word`
   beside `.doc-label`, the retired bands beside `.pad`, all in doc_core.css —
   so an old contract renders in the design this product ships today and the
   two can never drift. Only what has no current equivalent is left here. */

/* The retired head is two columns like .letterhead, but sized to its content
   rather than split down the middle: the contract's document-type column
   carried a longer label ("Service Agreement") than the other two. */
.cover { grid-template-columns: 1fr auto; }

@media (max-width: 640px) {
  .sig-grid > .sig-block { flex-basis: 100%; }
  .audit-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Print ──
   The page box, and every component the three documents share, are handled by
   doc_print.css. What's left is the contract's own type and pagination.

   This file used to declare `@page { margin: 14mm }
` at top level, which is
   why a contract printed to a different page geometry than the other two;
   the shared @page in doc_pdf.css now governs all three. */
@media print {
  .acceptance, .audit { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .recitals-body { font-size: 10.5pt; max-width: none; }
  .deliverables li { font-size: 10pt; }
  .total-line .tl-value { font-size: 14pt; }
  .clause::before { font-size: 9.5pt; }
  .acceptance-note { font-size: 10pt; max-width: none; }
  .sig-role, .audit-title { font-size: 7.5pt; letter-spacing: .09em; }
  .sig-field-label, .sig-meta, .sig-pending { font-size: 8.5pt; }
  .sig-typed { font-size: 17pt; }
  .audit-row { font-size: 8.5pt; }
  .audit-note { font-size: 8.5pt; max-width: none; }

  /* The signature block splitting across a page break is the one break that
     genuinely misreads — a name orphaned from the line it signed, or the two
     parties landing on different pages. Same for the audit trail, which is
     short and is read as a single record. Not .clauses: it's a long list that
     splits fine, and forcing it whole pushed a mostly-empty page into every
     contract. */
  .acceptance, .sig-grid, .sig-block, .audit { break-inside: avoid; }
  .letterhead { break-after: avoid; }
  .payment-table tr { break-inside: avoid; }
  /* Small self-contained units stay whole: a clause heading stranded on one
     page with its body on the next misreads as a different clause. */
  .clause, .sc-cell, .deliverables li { break-inside: avoid; }
  /* A section heading must never be the last thing on a page while its
     content starts the next. */
  .section-label, .acceptance-note { break-after: avoid; }
  .recitals-body p, .clause-body, .acceptance-note { orphans: 3; widows: 3; }
}