/* ==========================================================================
   merchant-agreement.css — reading and printing the merchant agreement
   --------------------------------------------------------------------------
   This is the longest continuous text in the product: ~60KB of contract that a
   merchant has to scroll to the end of before they can sign. It is also the
   only screen where the reader has a legal reason to care about every word, so
   it is typeset for READING, not for fitting.

   WHAT CHANGED, 22 Sep 2026, and why:

   · MEASURE. Set to 68ch. Unconstrained, clauses ran the full width of a
     1600px monitor — around 180 characters a line, roughly triple what the eye
     tracks comfortably, and the point at which people stop reading and start
     scrolling to the button.

   · NO MORE JUSTIFICATION. Every clause carried `text-align: justify` with
     `hyphens: auto`. Justified text needs a typesetter's control over word
     spacing to look right; a browser fakes it by stretching spaces, which at
     this measure opens rivers of white down the column and is measurably
     harder to read — worst for dyslexic readers, who are not a rounding error
     among South African small-business owners. Ragged right throughout.

   · HANGING INDENTS. Clause numbers are inline in the source ("1.1  The
     details above…"), so the second line of every clause used to start under
     the number instead of under the text. A negative text-indent pulls the
     number into the margin and lines the body up beneath itself, which is how
     a contract is set, and it needed no change to the HTML.

   · THE BOLD CLAUSES CARRY WEIGHT ON PURPOSE. Section 49 of the CPA requires
     terms that limit liability, place risk on the reader or allow us to hold
     their money to be drawn to their attention. The document marks them in
     bold and the introduction says so. They are given a little more presence
     here, and NOT restyled into something a stylesheet change could quietly
     flatten.

   · PRINT. The signed copy is a standalone HTML page with @media print, so
     this is the only rendering some people will keep. Headings do not strand,
     clauses do not split across a page break, and the URL of every link is
     printed after it — a contract that says "see our website" and then hides
     which website is not much of a record.

   Colours come from the CI tokens, with literal fallbacks so the standalone
   printable copy still renders when it is opened outside the app.
   ========================================================================== */

.ma-doc-host {
  --ma-ink:    var(--bc-text-body,   #3a3833);
  --ma-strong: var(--bc-text-strong, #111111);
  --ma-muted:  var(--bc-text-muted,  #6e6a63);
  --ma-rule:   var(--bc-border,      #e4ded2);
  --ma-accent: var(--bc-text-accent, #6b4e22);
  --ma-sunken: var(--bc-grey-50,     #f4f0e7);

  color: var(--ma-ink);
  font-family: var(--bc-font-body, "Inter", Arial, sans-serif);
  font-size: 1rem;
  line-height: 1.65;          /* long-form: looser than UI's 1.45 */
  -webkit-font-smoothing: antialiased;
}

/* The measure. Centred in whatever container holds it — the review screen, the
   sign-now pop-up and the printable copy all get the same column. */
.ma-doc {
  max-width: 68ch;
  margin-inline: auto;
  padding: var(--bc-s-6, 24px);
}

/* ── Headings ────────────────────────────────────────────────────────────
   Two levels only: the document, and its numbered sections. A contract that
   needs a third level of heading needs shorter sections. */
.ma-doc-host h1 {
  font-family: var(--bc-font-display, "Inter", sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ma-strong);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 var(--bc-s-2, 8px);
}
.ma-doc-host h2 {
  font-family: var(--bc-font-display, "Inter", sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ma-strong);
  /* Generous above, tight below: the heading belongs to what follows it, and
     spacing is how a reader is told that without being told. */
  margin: var(--bc-s-8, 32px) 0 var(--bc-s-3, 12px);
  padding-top: var(--bc-s-4, 16px);
  border-top: 1px solid var(--ma-rule);
}
.ma-doc-host h2:first-of-type { border-top: 0; padding-top: 0; }

/* The reference / version / effective-date line under the title. */
.ma-doc-host .ma-sub {
  text-align: center;
  font-size: .875rem;
  color: var(--ma-muted);
  margin: 0 0 var(--bc-s-6, 24px);
}
.ma-doc-host .ma-sub strong { font-weight: 600; color: var(--ma-strong); }

/* The plain-language notice required by CPA s.22, set apart from the body. */
.ma-doc-host .ma-plain {
  background: var(--ma-sunken);
  border-left: 3px solid var(--ma-accent);
  border-radius: 0 var(--bc-radius, 8px) var(--bc-radius, 8px) 0;
  padding: var(--bc-s-4, 16px) var(--bc-s-5, 20px);
  margin: 0 0 var(--bc-s-6, 24px);
  font-size: .9375rem;
  line-height: 1.6;
}

/* ── Clauses ─────────────────────────────────────────────────────────────
   Hanging indent. The number sits in the margin; the body lines up under
   itself. Works with the number inline in the source, which is how the
   template is written. */
.ma-doc-host .ma-clause {
  margin: 0 0 var(--bc-s-4, 16px);
  text-align: left;           /* ragged right — see the note at the top */
  hyphens: manual;
  orphans: 2;
  widows: 2;
}

/* The hanging indent belongs ONLY to a clause that actually carries a number.
   Applied to every .ma-clause it also indented the unnumbered intro
   paragraphs, which then ran in from the left margin under nothing at all —
   the shape of a hanging indent with no hanger.

   The template tags its leading number as <span class="ma-n">, so :has()
   can tell the two apart. A numbered clause hangs; a plain paragraph does
   not. */
.ma-doc-host .ma-clause:has(> .ma-n:first-child) {
  padding-left: 3rem;
  text-indent: -3rem;
}
.ma-doc-host .ma-n {
  display: inline-block;
  min-width: 2.4rem;          /* holds 10.4 and 1.1 on the same left edge */
  padding-right: .6rem;
  font-variant-numeric: tabular-nums;
  color: var(--ma-muted);
  font-weight: 600;
}

/* Browsers without :has() get no hanging indent rather than a broken one.
   The clause still reads correctly; only the ornament is missing. */
@supports not selector(:has(*)) {
  .ma-doc-host .ma-clause { padding-left: 0; text-indent: 0; }
}
/* A clause is emphasised because it limits liability or moves risk. Give it
   presence without shouting. */
.ma-doc-host .ma-clause strong { font-weight: 700; color: var(--ma-strong); }
.ma-doc-host p { orphans: 2; widows: 2; }

/* ── Definitions ─────────────────────────────────────────────────────────
   Term and meaning, side by side where there is room. Below 720px they stack,
   because a 12ch term column and a 20ch definition column is worse than
   either. */
.ma-doc-host .ma-defs { margin: 0 0 var(--bc-s-6, 24px); }
.ma-doc-host .ma-defs dt {
  font-weight: 700;
  color: var(--ma-strong);
  margin-top: var(--bc-s-4, 16px);
}
.ma-doc-host .ma-defs dd {
  margin: var(--bc-s-1, 4px) 0 0;
  padding-left: var(--bc-s-5, 20px);
  text-align: left;
  border-left: 2px solid var(--ma-rule);
}

/* ── Lettered sub-lists ──────────────────────────────────────────────── */
.ma-doc-host ol.ma-list-a {
  list-style: lower-alpha;
  padding-left: 2.2rem;
  margin: var(--bc-s-3, 12px) 0 var(--bc-s-4, 16px);
}
.ma-doc-host ol.ma-list-a li { margin: 0 0 var(--bc-s-2, 8px); text-align: left; padding-left: .25rem; }
.ma-doc-host ol.ma-list-a li::marker { color: var(--ma-muted); font-weight: 600; }

/* ── Party blocks ────────────────────────────────────────────────────────
   The Platform and the Merchant, each set as a schedule rather than as prose.
   This is the part a reader checks rather than reads, so it is a table of
   facts with a clear edge, and it never splits across a printed page. */
.ma-doc-host .ma-party {
  border: 1px solid var(--ma-rule);
  border-radius: var(--bc-radius-lg, 12px);
  padding: var(--bc-s-5, 20px);
  margin: var(--bc-s-5, 20px) 0;
  background: var(--bc-bg-surface, #fff);
  break-inside: avoid;
  page-break-inside: avoid;
}
.ma-doc-host .ma-party-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ma-muted);
  margin: 0 0 var(--bc-s-1, 4px);
}
.ma-doc-host .ma-party-name {
  font-family: var(--bc-font-display, "Inter", sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ma-strong);
  margin: 0 0 var(--bc-s-4, 16px);
}
.ma-doc-host .ma-party-detail {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--bc-s-2, 8px) var(--bc-s-5, 20px);
  margin: 0;
  font-size: .9375rem;
}
.ma-doc-host .ma-party-detail dt { color: var(--ma-muted); }
.ma-doc-host .ma-party-detail dd { margin: 0; color: var(--ma-strong); font-weight: 500; }
@media (max-width: 720px) {
  .ma-doc-host .ma-party-detail { grid-template-columns: 1fr; gap: 2px; }
  .ma-doc-host .ma-party-detail dt { margin-top: var(--bc-s-3, 12px); }
}

/* Account numbers, wallet ids and agreement references: monospace, because
   here the job is telling 0 from O rather than lining up a decimal. */
.ma-doc-host .ma-ref {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .875rem;
  font-feature-settings: "zero" 0;
  word-break: break-all;
}

/* ── Schedule tables ─────────────────────────────────────────────────── */
.ma-doc-host table.ma-schedule {
  width: 100%;
  border-collapse: collapse;
  margin: var(--bc-s-4, 16px) 0 var(--bc-s-6, 24px);
  font-size: .9375rem;
}
.ma-doc-host table.ma-schedule th {
  text-align: left;
  font-weight: 700;
  color: var(--ma-strong);
  border-bottom: 2px solid var(--ma-rule);
  padding: var(--bc-s-2, 8px) var(--bc-s-3, 12px) var(--bc-s-2, 8px) 0;
}
.ma-doc-host table.ma-schedule td {
  border-bottom: 1px solid var(--ma-rule);
  padding: var(--bc-s-3, 12px) var(--bc-s-3, 12px) var(--bc-s-3, 12px) 0;
  vertical-align: top;
}
.ma-doc-host table.ma-schedule tr:last-child td { border-bottom: 0; }
/* Money columns line up. Same rule as everywhere else in the product. */
.ma-doc-host table.ma-schedule td:last-child,
.ma-doc-host table.ma-schedule th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ── The scroll container the sign-now pop-up uses ───────────────────── */
.ma-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  background: var(--bc-bg-surface, #fff);
}
/* A hairline that says there is more below, and disappears at the end. */
.ma-scroll {
  background-image: linear-gradient(to top, rgba(17,17,17,.055), transparent 28px);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 28px;
  background-attachment: local, scroll;
}

/* ── A gap that must be filled before the version is published ────────── */
.ma-todo {
  display: inline-block;
  padding: 1px 7px;
  border: 1px dashed var(--bc-danger, #b53a3a);
  border-radius: 4px;
  background: var(--bc-danger-bg, #f9eaea);
  color: var(--bc-danger-fg, #932e2e);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ==========================================================================
   PRINT
   ==========================================================================
   The signed copy is a standalone HTML page with no PDF engine behind it, so
   what prints here is the record a merchant keeps and a court may read.
   ========================================================================== */
@media print {
  .ma-doc-host {
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  .ma-doc { max-width: none; padding: 0; }

  /* A heading alone at the foot of a page is a broken document. */
  .ma-doc-host h1, .ma-doc-host h2 { break-after: avoid; page-break-after: avoid; }
  .ma-doc-host h2 { font-size: 12pt; margin-top: 18pt; border-top: .5pt solid #999; }
  .ma-doc-host .ma-clause,
  .ma-doc-host .ma-defs dd,
  .ma-doc-host ol.ma-list-a li { break-inside: avoid; page-break-inside: avoid; }

  .ma-doc-host .ma-plain,
  .ma-doc-host .ma-party { border: .5pt solid #666; background: none; }
  .ma-doc-host .ma-defs dd { border-left: .5pt solid #999; }
  .ma-todo { border-color: #000; background: none; color: #000; }

  /* Print the destination of every link. A contract that points at a web page
     and then hides which one is not a complete record. */
  .ma-doc-host a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .ma-scroll { overflow: visible; background-image: none; }
}