/* ==========================================================================
   MoneyDoc — LEGAL / POLICY DOCUMENT PAGES
   Loaded after tokens.css and components.css.

   CLIENT NOTE 2 (Round 2, 26 Aug 2026): the compliance documents used to be
   "Download" links pointing at moneydoc.africa. Every one of them now opens
   on this site. Each document is a page: its text is rendered here, it can be
   printed or saved as PDF from the browser without leaving the site, and when
   MoneyDoc supplies the signed original it is served from
   /legal/documents/<file>.pdf and embedded on the same page.

   Print styles matter here more than anywhere else on the site — "download"
   for these documents is, in practice, print-to-PDF.
   ========================================================================== */

.doc-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* ------------------------------------------------------------- masthead --- */

.doc-mast {
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}
.doc-mast .kicker {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.doc-mast h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.doc-mast .doc-lede {
  color: var(--fg-muted);
  max-width: var(--prose);
  line-height: var(--leading-base);
  margin: 0;
}

/* Document particulars: issuer, version, status, review date. */
.doc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.doc-facts div { display: flex; flex-direction: column; gap: 2px; }
.doc-facts dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.doc-facts dd { margin: 0; font-size: var(--text-sm); font-weight: 550; }

/* --------------------------------------------------------------- actions -- */

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}
.doc-actions .hint {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  line-height: var(--leading-snug);
  max-width: 40ch;
}

/* ------------------------------------------------------------ prose body -- */

.doc-body { max-width: var(--prose); }
.doc-body h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.doc-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.doc-body h3 {
  font-size: var(--text-base);
  font-weight: 650;
  margin: var(--space-5) 0 var(--space-2);
}
.doc-body p,
.doc-body li { line-height: var(--leading-base); color: var(--fg-muted); }
.doc-body p { margin: 0 0 var(--space-3); }
.doc-body strong { color: var(--fg); font-weight: 650; }
.doc-body ul, .doc-body ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.doc-body li { margin-bottom: var(--space-2); }
.doc-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-5);
}
.doc-body th, .doc-body td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.doc-body thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
}
.doc-body tbody th { font-weight: 600; color: var(--fg); }
.doc-body td { color: var(--fg-muted); }

/* An inline value MoneyDoc still has to confirm. Marked, never guessed: a
   policy that quietly invents a registered address or an Information Officer
   is worse than one that visibly has a gap. */
.tbc {
  display: inline-block;
  padding: 1px var(--space-2);
  border: 1px dashed var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-weak);
  color: var(--warn);
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------ status banners ---- */

.doc-status {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  margin-bottom: var(--space-6);
}
.doc-status[data-kind="pending"] { border-left-color: var(--warn); }
.doc-status[data-kind="draft"]   { border-left-color: var(--accent); }
.doc-status .ico { flex: none; font-size: var(--text-lg); line-height: 1.2; }
.doc-status p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}
.doc-status p + p { margin-top: var(--space-2); }
.doc-status strong { color: var(--fg); }

/* --------------------------------------- supplied-original embed slot ----- */
/* When MoneyDoc drops the signed PDF into /legal/documents/, the page shows
   it here as well as the text. Until then the slot explains itself rather
   than rendering a broken object. */

.doc-original {
  margin-top: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}
.doc-original-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: var(--text-sm);
  font-weight: 650;
}
.doc-original iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: var(--bg-sunken);
}
.doc-original-missing {
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}
.doc-original-missing code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}

/* ---------------------------------------------------------------- index --- */

.doc-index { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.doc-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.doc-card:hover { border-color: var(--border-strong); }
.doc-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); font-weight: 650; }
.doc-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--leading-snug);
  max-width: 60ch;
}
.doc-card .badge { margin-top: var(--space-2); }
@media (max-width: 620px) {
  .doc-card { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- print --- */
/* "Download" for these documents means print-to-PDF, so the printed sheet has
   to be the document and nothing else. */

@media print {
  .site-header, .site-footer, .doc-actions, .doc-original,
  .tourbar, .demo-note, .dev-switcher, .skip-link { display: none !important; }
  .doc-shell { max-width: none; padding: 0; }
  .doc-body { max-width: none; }
  .doc-body p, .doc-body li, .doc-body td { color: #000; }
  .doc-body h2 { break-after: avoid; }
  .doc-body table, .doc-body li { break-inside: avoid; }
  .doc-status { border: 1px solid #999; background: none; }
  .tbc { border-color: #999; background: none; color: #000; }
  a[href]::after { content: ""; }
}

/* --------------------------- Corporate profile link ----------------------
   CLIENT NOTE (Round 4, 22 Sep 2026): a "View more" under the compliance
   section. It points at MoneyDoc's corporate site, which is a different thing
   from the policy downloads Round 2 note 2 was about — those all still open
   here. Styled apart from .doc-card so it does not read as a seventh
   document. */

.doc-more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.doc-more h2 { font-size: var(--text-base); font-weight: 650; margin-bottom: var(--space-1); }
.doc-more p {
  margin: 0; max-width: 62ch;
  color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.6;
}
.doc-more .btn { flex: none; }