/* ledger-docs.css — document-page components for the ledger system
   (trust, privacy, terms, data-request, 404). Loaded AFTER ledger.css;
   all tokens come from ledger.css :root. Same rules as the system:
   no uppercase transforms, no gradients, no shadows, no JS. */

/* ── document scope (main.ldoc) ───────────────────────────────────── */
.ldoc h2{margin:52px 0 14px;scroll-margin-top:24px}
.ldoc h3{margin:26px 0 8px}
.ldoc ul,.ldoc ol{margin:0 0 16px 22px;max-width:640px}
.ldoc li{margin-bottom:8px}
.ldoc li::marker{color:var(--faint)}
.ldoc strong{color:var(--ink);font-weight:500}
.ldoc a:not([class]){color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c7c7c7}
.ldoc a:not([class]):hover{text-decoration-color:var(--ink)}

/* ── document head: title, metadata row, lede ─────────────────────── */
.ldoc-head{border-bottom:1px solid var(--hairline);padding-bottom:30px;margin-bottom:34px}
.ldoc-lede{margin:18px 0 0}
.ldoc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--faint)}
.ldoc-meta > span + span:not(.ldoc-chip)::before{content:"·";margin-right:8px;color:var(--faint)}
.ldoc-chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border:1px solid var(--hairline);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--gray);white-space:nowrap}
.ldoc-chip i{flex:none;width:5px;height:5px;border-radius:999px;background:var(--faint)}

/* ── "On this page" ───────────────────────────────────────────────── */
.ldoc-toc{border:1px solid var(--hairline);border-radius:3px;padding:18px 22px 14px;max-width:640px}
.ldoc-toc-title{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--gray);margin-bottom:10px}
.ldoc-toc ol{margin:0 0 0 20px;max-width:none}
.ldoc-toc li{margin-bottom:2px;font-size:13px}
.ldoc-toc li::marker{font-family:var(--mono);font-size:11px;color:var(--faint)}
.ldoc-toc a{display:inline-flex;align-items:center;min-height:24px}

/* ── ruled tables (status, sources, subprocessors, retention) ─────── */
.ldoc-tbl{overflow-x:auto;margin:0 0 24px}
.ldoc-tbl table{width:100%;border-collapse:collapse}
.ldoc-tbl th{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:normal;color:var(--gray);text-align:left;vertical-align:bottom;white-space:nowrap;padding:10px 20px 10px 0;border-bottom:1px solid var(--hairline)}
.ldoc-tbl td{font-size:14px;line-height:1.6;color:var(--gray);text-align:left;vertical-align:top;padding:12px 20px 12px 0;border-bottom:1px solid var(--hairline)}
.ldoc-tbl th:last-child,.ldoc-tbl td:last-child{padding-right:0}

/* ── capability status chips (Live gets the accent dot) ───────────── */
.ldoc-st{display:inline-flex;align-items:center;gap:7px;padding:2px 10px;border:1px solid var(--hairline);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--gray);white-space:nowrap}
.ldoc-st i{flex:none;width:5px;height:5px;border-radius:999px;background:var(--faint)}
.ldoc-st--live i{background:var(--accent)}

/* ── callout ──────────────────────────────────────────────────────── */
.ldoc-note{border-left:2px solid var(--kb-accent-border);padding:2px 0 2px 18px;margin:22px 0 26px;max-width:640px}
.ldoc-note-title{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--gray);margin-bottom:6px}
.ldoc-note p{margin-bottom:0}
.ldoc-note p+p{margin-top:10px}

/* ── contact block ────────────────────────────────────────────────── */
.ldoc-contact{border:1px solid var(--hairline);border-radius:3px;padding:18px 22px;margin:0 0 24px;max-width:640px}
.ldoc-contact p{margin-bottom:6px}
.ldoc-contact p:last-child{margin-bottom:0}

/* ── data-request form ────────────────────────────────────────────── */
.ldoc-form{border:1px solid var(--hairline);border-radius:3px;padding:24px;margin:0 0 28px;max-width:640px}
.ldoc-form-row{margin-bottom:18px}
.ldoc-form label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px}
.ldoc-form legend{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px;padding:0}
.ldoc-form fieldset{border:0}
.ldoc-hint{font-size:12px;color:var(--faint);margin-bottom:8px}
.ldoc-optional{color:var(--faint);font-weight:400}
.ldoc-form input[type=text],.ldoc-form input[type=email],.ldoc-form input[type=url],.ldoc-form textarea{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);border-radius:3px;padding:8px 12px;transition:border-color .15s}
.ldoc-form textarea{min-height:88px;resize:vertical}
.ldoc-form input:focus,.ldoc-form textarea:focus{border-color:var(--kb-accent-border);outline:2px solid var(--kb-accent-border);outline-offset:1px}
.ldoc-form input::placeholder,.ldoc-form textarea::placeholder{color:var(--faint)}
.ldoc-form .ldoc-opt{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;font-size:14px;font-weight:400;color:var(--gray);cursor:pointer}
.ldoc-opt input{margin-top:4px;accent-color:var(--accent);flex:none}
.ldoc-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
button.ledger-btn{border:1px solid transparent;cursor:pointer}
button.ledger-btn--quiet{border:1px solid var(--hairline)}
button.ledger-btn--quiet:hover{border-color:var(--gray)}
.ldoc-form-status{font-size:13px;color:var(--accent);min-height:20px;margin-top:12px}
.ldoc-form-preview{display:none;font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.6;color:var(--gray);background:#f6f5f3;border:1px solid var(--hairline);border-radius:3px;padding:14px;white-space:pre-wrap;max-height:260px;overflow:auto;margin-top:14px}
.ldoc-form-preview.show{display:block}

/* ── 404 ──────────────────────────────────────────────────────────── */
.ldoc-nf{padding:4px 0 24px}
.ldoc-nf-code{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--faint);margin-bottom:14px}
.ldoc-nf h1{margin-bottom:12px}

/* ── small viewports ──────────────────────────────────────────────── */
@media (max-width:560px){
  .ldoc-form{padding:18px}
  .ldoc-toc{padding:16px 18px 12px}
}