/* A contract as a document: the same sheet in the admin preview, on the
   client's signing page, and on paper. Set like a letter rather than a web
   page, because it is one. */
.ctr-doc{
  --c-ink:#22201d; --c-soft:#5a5248; --c-line:rgba(34,32,29,.16); --c-accent:var(--cyan-deep,var(--gold,#7d6a52));
  background:#fffdf9; color:var(--c-ink);
  font-size:16px; line-height:1.7; font-family:var(--font-body, var(--sans, "DM Sans", system-ui, -apple-system, sans-serif));
  padding:clamp(24px,5vw,64px) clamp(20px,6vw,72px);
  border:1px solid var(--c-line); border-radius:6px;
  box-shadow:0 1px 0 rgba(34,32,29,.04), 0 30px 60px -40px rgba(34,32,29,.35);
  max-width:760px; margin:0 auto;
}
.ctr-doc h2{font-family:var(--font-head, var(--serif, "Cormorant Garamond", Georgia, serif)); font-weight:500; font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);
  line-height:1.15; letter-spacing:-.01em; margin:0 0 1.1em; text-wrap:balance;}
.ctr-doc h3{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--c-accent);
  margin:2.2em 0 .6em; padding-top:1.1em; border-top:1px solid var(--c-line);}
.ctr-doc p{margin:0 0 .9em; max-width:68ch;}
.ctr-doc ul{margin:0 0 .9em; padding-left:1.2em; max-width:68ch;}
.ctr-doc li{margin:.25em 0;}
.ctr-doc strong{font-weight:600;}
.ctr-doc .ctr-line{display:inline-block; min-width:9em; border-bottom:1px solid var(--c-ink); transform:translateY(-.25em);}
.ctr-doc mark.ctr-blank{background:#fbeccb; color:#7a4d12; padding:0 .35em; border-radius:4px; font-size:.86em;}
.ctr-doc mark.ctr-unknown{background:#f7d9d0; color:#8a2c14; padding:0 .35em; border-radius:4px; font-size:.86em;}

.ctr-items{width:100%; border-collapse:collapse; margin:.4em 0 1.2em; font-variant-numeric:tabular-nums;}
.ctr-items td,.ctr-items th{padding:.6em 0; border-bottom:1px solid var(--c-line); text-align:left; vertical-align:top; font-weight:400;}
.ctr-items td:last-child,.ctr-items th + td{text-align:right; white-space:nowrap; padding-left:1.5em;}
.ctr-items tfoot th,.ctr-items tfoot td{border-bottom:0; font-weight:600; padding-top:.9em;}
.ctr-items tfoot tr:first-child th,.ctr-items tfoot tr:first-child td{border-top:1.5px solid var(--c-ink);}
.ctr-items .ctr-items__sub th,.ctr-items .ctr-items__sub td{font-weight:400; color:var(--c-soft); padding-top:.2em;}

/* ---- the client's pages (contract, invoice, questionnaire) ----
   Their own small set of tokens, taken from whichever site they sit in, so
   the same pages read as JK's on JK and Bolton's on Bolton. */
.cpg{
  --c-bg: var(--cream-2, var(--bg-2, #f3eee6));
  --c-card: #fffdf9;
  --c-ink: var(--ink, #22201d);
  --c-soft: var(--ink-soft, var(--ink-dim, #5a5248));
  --c-accent: var(--cyan-deep, var(--gold, #7d6a52));
  --c-accent-soft: var(--cyan, var(--gold, #a08a6f));
  --c-head: var(--font-head, var(--serif, "Cormorant Garamond", Georgia, serif));
  --c-body: var(--font-body, var(--sans, "DM Sans", system-ui, sans-serif));
  font-family: var(--c-body); color: var(--c-ink);
}
/* Contracts, invoices and questionnaires are paper: on a site in dark mode
   they stay light, like a document laid on a dark desk. */
html.dark .cpg{--c-bg:#efe9df;--c-ink:#22201d;--c-soft:#5a5248;--c-accent:#7d6a52;--c-accent-soft:#a08a6f;color-scheme:light;background:var(--c-bg)}
.cpg h1,.cpg h2{font-family:var(--c-head);font-weight:400;letter-spacing:-.01em;color:var(--c-ink)}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.8em 1.5em;border-radius:100px;
  border:1px solid var(--c-ink);background:var(--c-ink);color:var(--c-card);font:600 .92rem/1.2 var(--c-body);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.cbtn:hover{transform:translateY(-1px)}
.cbtn:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.cbtn--ghost{background:transparent;color:var(--c-ink)}
.cbtn--ghost:hover{background:var(--c-ink);color:var(--c-card)}
.cpg [hidden]{display:none!important}
.cbtn[disabled]{opacity:.55;cursor:default;transform:none}
.clink{color:var(--c-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c-ink) 35%,transparent);text-underline-offset:4px;font-weight:500}
.clink:hover{text-decoration-color:var(--c-ink)}

/* The signature block */
.ctr-sigs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px 40px; margin-top:2.4em; padding-top:1.6em; border-top:1px solid var(--c-line);}
.ctr-sig__k{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-accent); font-weight:600; margin:0 0 .6em;}
.ctr-sig__img{display:block; height:72px; max-width:100%; object-fit:contain; object-position:left bottom; margin-bottom:-6px;}
.ctr-sig__typed{font-family:var(--font-head, var(--serif, "Cormorant Garamond", Georgia, serif)); font-style:italic; font-size:2rem; line-height:72px; height:72px; margin-bottom:-6px; color:#1e2a44;}
.ctr-sig__rule{border-top:1px solid var(--c-ink); padding-top:.45em; font-size:.88rem;}
.ctr-sig__meta{font-size:.76rem; color:var(--c-soft); margin-top:.2em;}
.ctr-sig__wait{height:72px; margin-bottom:-6px; display:flex; align-items:flex-end; color:var(--c-soft); font-size:.86rem; font-style:italic;}
.ctr-audit{margin-top:1.8em; font-size:.72rem; color:var(--c-soft); line-height:1.6; word-break:break-all;}

@media print{
  @page{margin:18mm 16mm;}
  body *{visibility:hidden !important;}
  .ctr-doc, .ctr-doc *{visibility:visible !important;}
  .ctr-doc{position:absolute; left:0; top:0; width:100%; max-width:none; border:0; box-shadow:none; padding:0; background:#fff; font-size:11pt;}
  .ctr-doc h3{break-after:avoid;}
  .ctr-items tr,.ctr-sigs{break-inside:avoid;}
  .ctr-noprint{display:none !important;}
}