/* =============================================================================
   Proceeds Ledger - doc.css
   The Guide and the legal pages (Terms, Privacy, Refund policy).

   Loads after css/style.css and reads --pl-* tokens only. It adds what the shared
   component CSS does not have: the guide's reading flow, the "On this page" list,
   the call-to-action card, the text-table variant and the legal meta row.
   Every rule is scoped under body.page-doc, so no other page is affected.
   ============================================================================= */

/* Emphasis is weight, never slant. */
body.page-doc :is(em, i) {
  font-style: normal;
  font-weight: var(--pl-weight-semibold);
}

/* ---- Guide: page shell and head ---- */
body.page-doc .doc-page {
  padding-block: clamp(var(--pl-space-6), 5vw, var(--pl-space-8)) var(--pl-block-gap);
}
body.page-doc .doc .page-head {
  margin-bottom: var(--pl-space-6);
}

/* ---- Guide: reading flow ----
   The article body is a flat run of lead, callout, list, heading, paragraph and
   table blocks. Spacing comes from the direct-child rules below. */
body.page-doc .doc-body {
  min-width: 0;
  overflow-wrap: break-word;
  line-height: var(--pl-leading-lead);
}
body.page-doc .doc-body > * + * {
  margin-top: var(--pl-space-4);
}
body.page-doc .doc-body > h2 {
  margin-top: var(--pl-space-8);
  font: var(--pl-weight-semibold) var(--pl-type-title)/var(--pl-leading-title) var(--pl-font-ui);
  letter-spacing: 0;
}
body.page-doc .doc-body > h3 {
  margin-top: var(--pl-space-6);
  font: var(--pl-weight-semibold) var(--pl-type-body-large)/1.35 var(--pl-font-ui);
  letter-spacing: 0;
}
/* Keep these two rules after the heading rules: a heading stays close to what it introduces. */
body.page-doc .doc-body > :is(h2, h3) + * {
  margin-top: var(--pl-space-3);
}
body.page-doc .doc-body > h2 + h3 {
  margin-top: var(--pl-space-4);
}
body.page-doc .doc-body > :is(.callout, .toc) {
  margin-top: var(--pl-space-5);
}
body.page-doc .doc-body > :is(ul, ol) {
  display: grid;
  gap: var(--pl-space-3);
  padding-left: 1.25rem;
}
body.page-doc .doc-body > :is(ul, ol) > li {
  padding-left: var(--pl-space-1);
}
body.page-doc .doc-body > :is(ul, ol) > li::marker {
  color: var(--pl-text-subtle);
  font-variant-numeric: tabular-nums;
}
/* Source links (a list item that holds one link) are stacked touch targets: at least the control minimum.
   Direct-child lists only, so inline prose links and the "On this page" list are not affected. */
body.page-doc .doc-body > :is(ul, ol) > li > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--pl-control-min);
}

/* ---- Guide: tables ----
   The shared .table keeps every cell on one line, which suits figures. In the guide
   only the figure cells (.num) stay on one line: labels and headers may wrap, so
   the amounts remain in view on a phone. The padding is tightened so six columns
   fit the reading column. A table of sentences opts in to .table-prose, which
   stacks into one block per row on a phone instead of scrolling sideways. */
body.page-doc .doc-body .table :is(th, td) {
  padding: var(--pl-space-3) var(--pl-space-1);
}
body.page-doc .doc-body .table :is(th, td):first-child {
  padding-left: var(--pl-space-3);
}
body.page-doc .doc-body .table :is(th, td):last-child {
  padding-right: var(--pl-space-3);
}
@media (min-width: 37.5rem) {
  body.page-doc .doc-body .table :is(th, td) {
    padding: var(--pl-space-3) var(--pl-space-2);
  }
  body.page-doc .doc-body .table :is(th, td):first-child {
    padding-left: var(--pl-space-4);
  }
  body.page-doc .doc-body .table :is(th, td):last-child {
    padding-right: var(--pl-space-4);
  }
}
body.page-doc .doc-body .table :is(th, td):not(.num),
body.page-doc .doc-body .table thead th {
  white-space: normal;
}
/* A caption wider than the visible scroll box would be cut off on a phone. */
body.page-doc .doc-body .table caption {
  box-sizing: border-box;
  max-width: calc(100vw - 2 * var(--pl-gutter) - 2px);
}
/* Second caption line (aria-hidden in the markup): only while the table scrolls sideways on a phone. */
body.page-doc .doc-body .table .swipe-hint {
  display: block;
  font-weight: var(--pl-weight-regular);
  color: var(--pl-text-muted);
}
@media (min-width: 37.5rem) {
  body.page-doc .doc-body .table .swipe-hint {
    display: none;
  }
}
body.page-doc .doc-body .table-prose {
  font-size: var(--pl-type-body);
}
/* .table-prose on a phone: one block per row, and each cell shows its column name
   (data-label) above its text. The header row is hidden visually and stays in the
   page for screen readers. The block at the end of this group turns it back into a
   table from 37.5rem. */
body.page-doc .doc-body .table-prose :is(tr, th, td) {
  display: block;
}
body.page-doc .doc-body .table-prose :is(th, td) {
  padding: var(--pl-space-2) var(--pl-space-3);
}
/* Only the last cell of a row keeps its rule, so the lines fall between rows, not inside one. */
body.page-doc .doc-body .table-prose :is(th, td):not(:last-child) {
  border-bottom-color: transparent;
}
body.page-doc .doc-body .table-prose tbody th[scope="row"] {
  font-weight: var(--pl-weight-semibold);
}
body.page-doc .doc-body .table-prose thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.page-doc .doc-body .table-prose td::before {
  content: attr(data-label);
  display: block;
  font-weight: var(--pl-weight-semibold);
  color: var(--pl-text-muted);
}
@media (min-width: 37.5rem) {
  body.page-doc .doc-body .table-prose tr {
    display: table-row;
  }
  body.page-doc .doc-body .table-prose :is(th, td) {
    display: table-cell;
    padding: var(--pl-space-3) var(--pl-space-2);
  }
  body.page-doc .doc-body .table-prose :is(th, td):not(:last-child) {
    border-bottom-color: var(--pl-divider);
  }
  body.page-doc .doc-body .table-prose thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  body.page-doc .doc-body .table-prose td::before {
    display: none;
  }
  body.page-doc .doc-body .table-prose td {
    min-width: 12rem;
  }
  body.page-doc .doc-body .table-prose tbody th[scope="row"] {
    min-width: 8rem;
    font-weight: var(--pl-weight-medium);
  }
}

/* ---- "On this page" list (guide, and Terms inside its legal-head) ----
   On Terms the nav is a .legal-nav. The shared recipe for that class is a row of
   policy pills with a rule above it, placed at the end of a page; the selector
   below turns that off for the copy that sits in the legal-head. */
body.page-doc .toc,
body.page-doc .legal-head .legal-nav {
  display: block;
  margin: 0;
  padding: var(--pl-space-3) 0 var(--pl-space-2);
  border-block: 1px solid var(--pl-divider);
}
body.page-doc .legal-head .legal-nav {
  justify-self: stretch;
  margin-top: var(--pl-space-2);
}
body.page-doc .toc-title {
  margin: 0 0 var(--pl-space-1);
  color: var(--pl-text-subtle);
  font: var(--pl-weight-semibold) var(--pl-type-metadata)/var(--pl-leading-note) var(--pl-font-ui);
  letter-spacing: var(--pl-tracking-label);
}
body.page-doc .toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.page-doc .toc-list li {
  break-inside: avoid;
}
body.page-doc .toc-list a {
  display: flex;
  align-items: center;
  min-height: var(--pl-control-min);
  padding-block: var(--pl-space-1);
  line-height: var(--pl-leading-body);
}
@media (min-width: 37.5rem) {
  body.page-doc .toc-list {
    columns: 2;
    column-gap: var(--pl-space-6);
  }
  /* Rows size to their text here, so the first row of each column starts at the same height. */
  body.page-doc .toc-list a {
    min-height: 0;
    padding-block: var(--pl-space-2);
  }
}

/* ---- Call-to-action card (guide, after the worked example and before Sources) ---- */
body.page-doc .cta-card {
  display: grid;
  justify-items: start;
  gap: var(--pl-space-3);
  border-color: var(--pl-edge-hover);
}
body.page-doc .doc-body > .cta-card {
  margin-top: var(--pl-space-7);
}
body.page-doc .cta-title {
  margin: 0;
  font: var(--pl-weight-semibold) var(--pl-type-title)/var(--pl-leading-title) var(--pl-font-ui);
  letter-spacing: 0;
}
body.page-doc .cta-text {
  margin: 0;
  color: var(--pl-text-muted);
}
body.page-doc .cta-card .btn-row {
  margin-top: var(--pl-space-2);
}

/* ---- Legal pages ---- */
body.page-doc .legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-space-2);
  margin: 0;
}