/* ==========================================================================
   CRM Sync — Reference Doc design system
   Monochrome · print/PDF-ready · 100-weight hero (bold emphasis spans allowed)
   No emojis · Roboto / Roboto Mono · faint grid ground.
   One canonical source, shared by every styled reference page.
   ========================================================================== */

:root{
  --ink:#0a0a0a; --paper:#ffffff;
  --g1:#f4f4f4; --g2:#e6e6e6; --g3:#cfcfcf; --g4:#9a9a9a; --g5:#5c5c5c; --g6:#3a3a3a;
  --grid:#eeeeee; --rule:#111; --link:#0a0a0a;
  --cyan:#06b6d4;   /* brand accent — heading rules, so they don't get lost on the grid */
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-print-color-adjust:exact; print-color-adjust:exact; color-scheme:light}
body{
  margin:0; color:var(--ink); background:var(--paper);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:20px 20px;
  font:400 15px/1.6 var(--sans); letter-spacing:.1px; -webkit-font-smoothing:antialiased;
}

/* ---- top command bar (nav + downloads) --------------------------------- */
.docbar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(8px); border-bottom:1px solid var(--g2)}
.docbar .inner{max-width:940px; margin:0 auto; padding:11px 40px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font:600 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase}
.docbar a{color:var(--g5); text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.docbar a:hover{color:var(--ink)}
.docbar .spacer{flex:1 1 auto}
.docbar .dl{color:var(--ink); border:1.5px solid var(--ink); padding:7px 12px; border-radius:2px;
  background:var(--paper); transition:background .12s,color .12s}
.docbar .dl:hover{background:var(--ink); color:var(--paper)}
.docbar svg{width:13px; height:13px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round}

/* ---- shell ------------------------------------------------------------- */
.wrap{max-width:940px; margin:0 auto; padding:56px 40px 104px}

/* ---- hero -------------------------------------------------------------- */
.hero{padding-bottom:30px; margin-bottom:14px; border-bottom:2px solid var(--cyan)}
.hero .kicker{font:600 12px/1 var(--mono); letter-spacing:.30em; text-transform:uppercase; color:var(--g5)}
.hero h1{                          /* 100-weight headline */
  font-weight:100; font-size:clamp(36px,5.4vw,58px); line-height:1.08; letter-spacing:-1px;
  margin:22px 0 0; max-width:19ch; color:var(--ink);
}
.hero h1 strong,.hero h1 b{font-weight:700} /* bold emphasis spans inside the thin headline */
.hero .sub{color:var(--ink); font-size:17px; line-height:1.6; margin:22px 0 0; max-width:72ch}
.hero .sub strong,.hero .sub b{color:var(--ink); font-weight:700}
.hero .meta{display:flex; gap:20px; flex-wrap:wrap; margin-top:22px;
  font:600 11px/1 var(--mono); letter-spacing:.08em; color:var(--g5)}
.hero .meta b{color:var(--ink)}

/* ---- rendered markdown body ------------------------------------------- */
.doc{font-size:15px}
.doc > h1:first-child{display:none}   /* first h1 is lifted into the hero */
.doc h2{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  margin:54px 0 16px; padding-bottom:9px; border-bottom:1.5px solid var(--cyan)}
.doc h3{font-size:17px; margin:30px 0 6px; font-weight:700; letter-spacing:-.2px}
.doc h4{font-size:13px; margin:20px 0 4px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g6)}
.doc p{margin:11px 0; max-width:74ch}
.doc a{color:var(--link); text-decoration:none; border-bottom:1px solid var(--g3)}
.doc a:hover{border-bottom-color:var(--ink)}
.doc strong{font-weight:700}
.doc em{font-style:italic}
.doc ul,.doc ol{margin:11px 0; padding-left:22px; max-width:74ch}
.doc li{margin:6px 0}
.doc li::marker{color:var(--g4)}
.doc hr{border:none; border-top:1px solid var(--g2); margin:36px 0}
.doc blockquote{margin:16px 0; padding:14px 20px; border-left:3px solid var(--ink);
  background:var(--g1); color:var(--ink); font-size:15px}
.doc blockquote p{margin:5px 0; max-width:none}

/* code */
.doc code{font-family:var(--mono); font-size:12.5px; background:var(--g1);
  border:1px solid var(--g2); border-radius:3px; padding:1px 5px}
.doc pre{background:var(--g1); border:1px solid var(--g2); border-left:3px solid var(--ink);
  padding:16px 18px; overflow-x:auto; margin:16px 0; border-radius:2px}
.doc pre code{background:none; border:none; padding:0; font-size:12.5px; line-height:1.6}

/* tables */
.doc table{width:100%; border-collapse:collapse; margin:18px 0 6px; font-size:13.5px; display:block; overflow-x:auto}
.doc thead th{border-bottom:2px solid var(--rule); font:700 11px/1.3 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; text-align:left; padding:11px 13px; vertical-align:bottom; white-space:nowrap}
.doc tbody td,.doc tbody th{text-align:left; vertical-align:top; padding:11px 13px; border-bottom:1px solid var(--g2)}
.doc tbody th{font-weight:600}
.doc tbody tr:hover{background:var(--g1)}

/* task-list checkboxes rendered by marked (- [ ]) */
.doc input[type=checkbox]{appearance:none; -webkit-appearance:none; width:15px; height:15px;
  border:2px solid var(--ink); border-radius:2px; vertical-align:-2px; margin-right:8px}
.doc ul:has(input[type=checkbox]){list-style:none; padding-left:2px}

/* ---- footer ------------------------------------------------------------ */
.docfoot{max-width:940px; margin:0 auto; padding:24px 40px 60px;
  border-top:1px solid var(--g3); color:var(--g4); font:12px/1.6 var(--mono);
  letter-spacing:.04em; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.docfoot a{color:var(--g5); text-decoration:none}
.docfoot a:hover{color:var(--ink)}

/* ---- loading / error --------------------------------------------------- */
.doc .doc-status{color:var(--g4); font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:680px){
  body{background-position:0 0}
  .wrap{padding:34px 20px 80px}
  .docbar .inner{padding:10px 20px; gap:12px}
  .docfoot{padding:20px}
  .hero h1{font-size:34px}
}

/* ---- print / PDF ------------------------------------------------------- */
@media print{
  body{background-image:none}
  .docbar{display:none}
  .wrap{padding:0 0 12px; max-width:none}
  .docfoot{padding:16px 0 0; max-width:none}
  .hero h1{font-size:42px}
  .doc table,.doc pre,.doc blockquote,.doc tr{break-inside:avoid}
  .doc h2,.doc h3{break-after:avoid}
  a{color:var(--ink) !important}
}