/* ============================================================================
   Zambezi Trade Capital — the white paper page
   ----------------------------------------------------------------------------
   A sibling of the landing page, not a separate design: same tokens, same
   faces, same ground. What changes is the job. The landing page is a
   composition; this is a document, so the measure, the vertical rhythm and the
   heading hierarchy are set for sustained reading rather than for impact.

   The page is generated by scripts/render-docs.js from docs/white-paper.md.
   Do not hand-edit white-paper/index.html.
   ============================================================================ */

.doc-page {
  /* The reading measure, and the width of the contents rail beside it. */
  --doc-measure: 68ch;
  --doc-rail: 17rem;
  /* Anchored headings must clear the fixed site header. */
  --doc-anchor-offset: 5.5rem;
}

.doc-page :where(h1, h2, h3, h4) {
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Compact hero
   ---------------------------------------------------------------------------
   Deliberately not full-viewport. A reader who has arrived here wants the
   argument, not the identity; the mark and the designation are enough to place
   the document, and the first section should be reachable in one scroll.
   --------------------------------------------------------------------------- */

.doc-hero {
  padding: calc(var(--space-3xl) + 2rem) var(--gutter) var(--space-xl);
  border-bottom: 1px solid var(--rule-soft);
}

.doc-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  max-width: var(--page-max);
  margin-inline: auto;
}

.doc-hero__mark {
  flex: none;
  width: clamp(4.5rem, 9vw, 8rem);
  height: auto;
}

.doc-hero__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.doc-hero h1 {
  margin-top: var(--space-2xs);
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.doc-hero__subtitle {
  max-width: 40rem;
  margin-top: var(--space-s);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-body);
}

.doc-hero__actions {
  margin-top: var(--space-l);
}

/* ---------------------------------------------------------------------------
   The regulatory statement
   ---------------------------------------------------------------------------
   This is the one block on the site that must NOT be visually de-emphasised.
   It is body weight, full ink contrast, at the reading size — not small print,
   not grey, not a footnote. The gold left edge and the panel exist to make it
   unmissable rather than to decorate it. Its wording comes from
   docs/white-paper.md and is not editable here.
   --------------------------------------------------------------------------- */

.doc-notice {
  max-width: min(var(--page-max), 58rem);
  margin: var(--space-xl) auto 0;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--border-panel);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-m);
  background: var(--panel);
  box-shadow: var(--shadow-s);
}

@media (max-width: 62rem) {
  .doc-notice {
    margin-inline: var(--gutter);
  }
}

.doc-notice p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-body);
}

/* ---------------------------------------------------------------------------
   Layout: contents rail and article
   --------------------------------------------------------------------------- */

.doc-body {
  display: grid;
  grid-template-columns: var(--doc-rail) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-2xl) var(--gutter) var(--space-3xl);
}

@media (max-width: 62rem) {
  .doc-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }
}

/* --- Contents rail -------------------------------------------------------- */

.doc-nav {
  position: sticky;
  top: var(--doc-anchor-offset);
  max-height: calc(100dvh - var(--doc-anchor-offset) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.doc-nav__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-mid);
}

/* The rail is a <details> so it can fold on a narrow screen without needing
   two markups. On desktop the summary is hidden and it is always open. */
.doc-nav__summary {
  display: none;
}

.doc-nav__list {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule-soft);
  list-style: none;
}

.doc-nav__list a {
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 0.75rem;
  padding: 0.42rem 0;
  font-size: var(--step--1);
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease);
}

.doc-nav__num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-bright);
  text-align: right;
}

.doc-nav__list a:hover {
  color: var(--ink);
}

/* The reader's current position. The marker is a colour and weight change plus
   a bar in the gutter — not a background fill, which would fight the rail's
   quietness. */
.doc-nav__list a[data-current] {
  position: relative;
  font-weight: 700;
  color: var(--teal);
}

.doc-nav__list a[data-current]::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.doc-nav__list a[data-current] .doc-nav__num {
  color: var(--gold);
}

@media (max-width: 62rem) {
  .doc-nav {
    position: static;
    max-height: none;
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-m);
    background: var(--panel);
  }

  .doc-nav__label {
    display: none;
  }

  .doc-nav__summary {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--1);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal-mid);
    cursor: pointer;
  }

  .doc-nav__list {
    columns: 2;
    column-gap: var(--space-m);
  }

  .doc-nav__list a[data-current]::before {
    display: none;
  }
}

@media (max-width: 30rem) {
  .doc-nav__list {
    columns: 1;
  }
}

/* ---------------------------------------------------------------------------
   The article
   --------------------------------------------------------------------------- */

.doc-article {
  max-width: var(--doc-measure);
}

/* No scroll-margin here: html carries scroll-padding-top, and the two would
   add, dropping an anchored section twice the header's height down the page. */
.doc-section {
  scroll-margin-top: 0;
}

/* Space does the separating, not rules. Only the gap between sections is
   large; everything inside one stays tight enough to read as a unit. */
.doc-section + .doc-section {
  margin-top: var(--space-3xl);
}

/* --- Section headings ----------------------------------------------------
   The numeral is large, light and gold, set beside the title. It is
   aria-hidden and the accessible heading carries "Section N." in visually
   hidden text instead, so a screen reader hears the number in the right place
   rather than as a stray digit before the heading. --------------------------- */

.doc-section__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

/* Scoped through .doc-section__head so it outranks `.doc-article p`, which is
   also (0,1,1) and would otherwise reset this to the body size. */
.doc-section__head .doc-section__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  margin-top: 0;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /* Gold at display size only. Small gold text uses --gold; this is well past
     the 24px threshold where 3:1 applies, and --gold-light clears that. */
  color: var(--gold-light);
}

/* Optical alignment: the numeral's cap sits higher than the heading's, so
   baseline alignment alone leaves it looking as though it has floated up. */
.doc-section__head {
  align-items: baseline;
}

.doc-section__title {
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--ink);
}

/* Sections with no number (the Summary) should not leave a hole. */
.doc-section__head:not(:has(.doc-section__num)) {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Subsections: 6.1, 6.2 ... -------------------------------------------
   The most important analytical section is section 6, and it is the only one
   long enough that the reader needs a second level to navigate by. -------- */

.doc-sub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.7rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--teal);
}

.doc-sub__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* --- Prose ---------------------------------------------------------------- */

.doc-article p {
  margin-top: var(--space-s);
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--ink-body);
}

.doc-article p:first-child {
  margin-top: 0;
}

.doc-article strong {
  font-weight: 700;
  color: var(--ink);
}

/* :not(.button) matters. This rule is (0,1,1) and beats .button--download's
   (0,1,0), which turned the download button at the foot of the article into
   teal text on a teal fill — invisible. npm run check:contrast caught it. */
.doc-article a:not(.button) {
  color: var(--teal);
}

/* "**Name.** Body" — a definition-style lead-in. The name carries the weight;
   the paragraph is otherwise ordinary prose. */
.doc-lead-in strong {
  color: var(--teal);
}

/* A paragraph that is nothing but bold in the source is a pulled statement. */
.doc-pullquote {
  margin-top: var(--space-l);
  padding-left: var(--space-m);
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.doc-article ul,
.doc-article ol {
  margin-top: var(--space-s);
  padding-left: 1.3em;
}

.doc-article :where(ul, ol) li {
  margin-top: var(--space-2xs);
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--ink-body);
}

.doc-article ul li::marker {
  color: var(--teal-bright);
}

.doc-article ol li::marker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
}

.doc-article blockquote {
  margin: var(--space-l) 0 0;
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--teal-bright);
  background: rgb(255 255 255 / 0.55);
}

.doc-article blockquote p {
  margin-top: 0;
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink);
}

.doc-article code {
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background: rgb(14 124 134 / 0.09);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
  color: var(--teal);
}

.doc-article hr {
  margin: var(--space-xl) 0;
  border: 0;
  border-top: 1px solid var(--rule-soft);
}

/* --- Tables --------------------------------------------------------------- */

.doc-table {
  margin-top: var(--space-l);
  overflow-x: auto;
}

.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.doc-table th,
.doc-table td {
  padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 2px solid var(--teal-bright);
}

.doc-table td {
  color: var(--ink-body);
}

/* ---------------------------------------------------------------------------
   The four propositions
   ---------------------------------------------------------------------------
   The spine of the document. Lifted out of the Summary into a panel so a
   reader skimming can find them in one pass.
   --------------------------------------------------------------------------- */

.doc-propositions {
  margin-top: var(--space-l);
  padding: var(--space-l);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-m);
  background: var(--panel);
  box-shadow: var(--shadow-s);
}

.doc-propositions__label {
  margin: 0 0 var(--space-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.doc-propositions ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: proposition;
}

.doc-propositions li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--space-s);
  margin: 0;
  padding: var(--space-s) 0;
  counter-increment: proposition;
}

.doc-propositions li + li {
  border-top: 1px solid var(--rule-soft);
}

.doc-propositions li::before {
  content: counter(proposition, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--teal-bright);
}

.doc-propositions li strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.doc-propositions li span {
  display: block;
  margin-top: var(--space-3xs);
  line-height: 1.6;
  color: var(--ink-body);
}

/* ---------------------------------------------------------------------------
   The transaction sequence (3.1)
   ---------------------------------------------------------------------------
   Seven events in order, so it is drawn as a sequence: a connecting spine with
   a node per step, rather than a plain numbered list.
   --------------------------------------------------------------------------- */

.doc-steps {
  position: relative;
  margin-top: var(--space-l);
  padding-left: 0;
  list-style: none;
}

.doc-steps li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-m) 3.4rem;
}

/* The spine. Drawn on each item rather than the list so it stops cleanly at
   the last node instead of running past it. */
.doc-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.9rem;
  bottom: -0.2rem;
  width: 2px;
  background: var(--rule);
}

.doc-steps__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 2px solid var(--teal-bright);
  background: var(--panel);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--teal);
}

.doc-steps strong {
  display: block;
  padding-top: 0.32rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.doc-steps span {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-body);
}

/* ---------------------------------------------------------------------------
   "What this is not" (section 10)
   ---------------------------------------------------------------------------
   Its rhetorical job is the opposite of the surrounding prose — it rules
   things out — so it gets its own block rather than reading as more argument.
   --------------------------------------------------------------------------- */

.doc-negative {
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.6);
}

.doc-negative ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-negative li {
  position: relative;
  margin: 0;
  padding: var(--space-s) 0 var(--space-s) 1.9rem;
}

.doc-negative li + li {
  border-top: 1px solid var(--rule-soft);
}

/* A rule-out mark rather than a bullet. */
.doc-negative li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-s) + 0.72em);
  width: 0.85rem;
  height: 2px;
  background: var(--gold);
}

.doc-negative li strong {
  color: var(--teal);
}

/* ---------------------------------------------------------------------------
   Risks (section 11)
   --------------------------------------------------------------------------- */

.doc-risks {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.doc-risk {
  padding: var(--space-m);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--teal-bright);
  border-radius: var(--radius-s);
  background: var(--panel);
}

.doc-risk__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}

.doc-risk p {
  margin-top: var(--space-2xs);
  font-size: var(--step-0);
  line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   The closing regulatory statement
   ---------------------------------------------------------------------------
   Reproduced in full, at body weight and full contrast, for the same reason as
   the opening one.
   --------------------------------------------------------------------------- */

.doc-signoff {
  margin-top: var(--space-3xl);
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--border-panel);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-m);
  background: var(--panel);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-body);
}

.doc-article__actions {
  margin-top: var(--space-xl);
}

/* ---------------------------------------------------------------------------
   The sticky download
   ---------------------------------------------------------------------------
   Appears once the reader is past the hero. A pill on desktop; a full-width
   bar on a phone, where a floating pill would sit over the text.
   --------------------------------------------------------------------------- */

.doc-sticky {
  position: fixed;
  right: var(--gutter);
  bottom: 1.5rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.4em;
  border-left: 4px solid var(--gold-light);
  border-radius: 100px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-l);

  opacity: 0;
  translate: 0 1rem;
  pointer-events: none;
  transition:
    opacity var(--dur-slow) var(--ease),
    translate var(--dur-slow) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.doc-sticky svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.doc-sticky[data-shown] {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.doc-sticky:hover {
  background: var(--ink);
  color: #fff;
}

/* Without JavaScript there is nothing to reveal it, so it stays visible. */
html:not(.js) .doc-sticky {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

@media (max-width: 40rem) {
  .doc-sticky {
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    border-radius: 0;
    border-left: 0;
    border-top: 3px solid var(--gold-light);
    padding: 1em 1.2em;
    translate: 0 100%;
  }

  /* The bar covers the foot of the page, so the document needs room under it. */
  .doc-page .site-footer {
    padding-bottom: 5rem;
  }
}

/* ---------------------------------------------------------------------------
   Reveal
   ---------------------------------------------------------------------------
   The ceiling the brief set: a short fade and rise, once, on first entry.
   --------------------------------------------------------------------------- */

.doc-section[data-reveal] {
  opacity: 0;
  translate: 0 0.75rem;
  transition:
    opacity 520ms var(--ease),
    translate 520ms var(--ease);
}

.doc-section[data-reveal="shown"] {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .doc-section[data-reveal] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}