/* ---------- rapidmlx.com /docs shared styles ----------
   Pulled out of landing/index.html so the docs pages stay reasonably
   small and consistent without dragging the full landing-page CSS in.
   Token values and naming mirror the landing so a light/dark toggle
   feels identical between the two surfaces.
-------------------------------------------------------------------- */
:root {
  --bg:#FFFFFF; --surface:#F7F8FA; --panel:#F4F6F8; --panel-2:#FBFCFD;
  --ink:#0E1116; --ink-2:#2C333B; --ink-3:#3D434B; --dim:#5F6772; --dim-2:#8A929C; --dim-3:#9AA2AC;
  --line:#DCE1E7; --line-soft:#ECEFF2; --line-soft2:#F0F2F5;
  --accent:#3A5C86; --accent-2:#5E80AE; --accent-3:#7E9BC2; --accent-4:#8AA0C0; --accent-hi:#7EA8FF;
  --accent-tint:#EEF2F7; --accent-tint-line:#DCE6F0;
  --amber:#EFA23A; --amber-deep:#9A6614; --amber-tint:#FFF3E0; --amber-tint-line:#F4DCB4;
  --term:#0C0E12; --term-line:#1C2026; --term-fg:#E8ECF1; --term-dim:#6A7079; --term-green:#5FC7A0;
  --green:#3D9A6E; --code-str:#2E7D55;
  --btn-ink:#0E1116; --btn-ink-fg:#FFFFFF;
  --mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter', -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw:1100px; --pad:clamp(20px,5vw,40px);
}
html[data-theme="dark"] {
  --bg:#15171B; --surface:#1A1D21; --panel:#1F2329; --panel-2:#1B1E23;
  --ink:#F2F4F7; --ink-2:#D7DCE2; --ink-3:#C2C9D2; --dim:#9AA4B0; --dim-2:#828D99; --dim-3:#6E7882;
  --line:#2D323A; --line-soft:#262B31; --line-soft2:#23272D;
  --accent:#6E96C8; --accent-2:#5E80AE; --accent-3:#52749E; --accent-4:#46627F;
  --accent-tint:#1E2A3A; --accent-tint-line:#2C3C53;
  --amber:#EBB35A; --amber-deep:#EBB35A;
  --green:#5FC7A0; --code-str:#5FC7A0;
  --btn-ink:#EAEDF1; --btn-ink-fg:#15171B;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { display:block; max-width:100%; }
.mono, code { font-family:var(--mono); }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }

/* ---------- Header (mirrors landing) ---------- */
header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line-soft); padding-inline:var(--pad); }
.nav { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:18px; }
.logo img { height:26px; width:auto; }
html[data-theme="dark"] .logo img, html[data-theme="dark"] .footer-logo img { filter:invert(1) brightness(1.7); }
.nav-links { display:flex; align-items:center; gap:clamp(18px,3vw,32px); }
.nav-links a { font-size:14px; color:var(--dim); text-decoration:none; }
.nav-links a:hover { color:var(--accent); text-decoration:none; }
.nav-links a.current { color:var(--ink); font-weight:600; }
.nav-gh { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink); border:1px solid var(--line); padding:8px 15px; border-radius:8px; }
.nav-gh .star { width:15px; height:15px; color:var(--amber); flex-shrink:0; }
.nav-gh:hover { border-color:var(--accent); }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:transparent; color:var(--dim); flex-shrink:0; }
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); }
.theme-toggle svg { width:16px; height:16px; }
.theme-toggle .moon { display:none; }
html[data-theme="dark"] .theme-toggle .sun { display:none; }
html[data-theme="dark"] .theme-toggle .moon { display:block; }

/* ---------- Page layout ---------- */
.docshell { display:grid; grid-template-columns:240px 1fr; gap:clamp(32px,5vw,60px); max-width:var(--maxw); margin:0 auto; padding:clamp(36px,5vw,56px) var(--pad) 64px; align-items:start; }
.docnav { position:sticky; top:84px; max-height:calc(100vh - 100px); overflow-y:auto; padding-right:8px; }
.docnav h4 { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim-3); font-weight:600; margin:18px 0 10px; }
.docnav h4:first-child { margin-top:0; }
.docnav ul { list-style:none; display:flex; flex-direction:column; gap:4px; }
.docnav a { display:block; padding:6px 10px; font-size:14px; color:var(--dim); border-radius:6px; }
.docnav a:hover { color:var(--accent); background:var(--surface); text-decoration:none; }
.docnav a.current { color:var(--ink); background:var(--accent-tint); font-weight:500; }

.doc { min-width:0; }
.doc-kicker { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--dim); margin-bottom:10px; }
.doc-kicker .dot { width:7px; height:7px; border-radius:4px; background:var(--accent); flex-shrink:0; }
.doc h1 { font-size:clamp(30px,4.4vw,40px); line-height:1.1; letter-spacing:-0.03em; color:var(--ink); margin-bottom:10px; font-weight:700; }
.doc .lede { font-size:18px; line-height:1.55; color:var(--dim); margin-bottom:32px; max-width:64ch; }

.doc h2 { font-size:24px; letter-spacing:-0.02em; color:var(--ink); margin:48px 0 14px; font-weight:700; border-top:1px solid var(--line-soft); padding-top:36px; }
.doc h2:first-of-type { border-top:0; padding-top:0; }
.doc h3 { font-size:18px; color:var(--ink); margin:30px 0 10px; font-weight:600; }
.doc p { margin-bottom:14px; color:var(--ink-2); max-width:74ch; }
.doc ul, .doc ol { margin:6px 0 18px 22px; color:var(--ink-2); }
.doc li { margin-bottom:6px; }
.doc li > p { margin-bottom:6px; }
.doc strong { color:var(--ink); font-weight:600; }
.doc code:not(pre code) { font-family:var(--mono); font-size:.92em; color:var(--accent); background:var(--surface); border:1px solid var(--line-soft); padding:1px 6px; border-radius:5px; }

/* ---------- Code blocks ---------- */
pre.code { font-family:var(--mono); font-size:13px; line-height:1.55; background:var(--term); color:var(--term-fg); border:1px solid var(--term-line); border-radius:10px; padding:16px 18px; overflow-x:auto; margin:8px 0 22px; }
pre.code .c { color:var(--term-dim); }
pre.code .p { color:var(--accent-hi); }
pre.code .ok { color:var(--term-green); }
pre.code .s { color:#A6E3A1; }

/* ---------- Tables ---------- */
.tbl { width:100%; border-collapse:collapse; margin:8px 0 28px; font-size:14px; }
.tbl th, .tbl td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft); }
.tbl th { font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); background:var(--surface); font-size:13px; letter-spacing:.02em; }
.tbl td { color:var(--ink-2); }
.tbl td.mono, .tbl th.mono { font-family:var(--mono); font-size:13px; }
.tbl tr:hover td { background:var(--surface); }
.tbl-wrap { overflow-x:auto; }

/* ---------- Callouts ---------- */
.note { display:flex; gap:14px; align-items:flex-start; background:var(--accent-tint); border:1px solid var(--accent-tint-line); border-radius:10px; padding:14px 16px; margin:8px 0 22px; font-size:14.5px; color:var(--ink-2); }
.note b { color:var(--ink); font-weight:600; }
.note.warn { background:var(--amber-tint); border-color:var(--amber-tint-line); }
html[data-theme="dark"] .note.warn { background:#2A2113; border-color:#4A3A1E; }

/* ---------- Cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin:8px 0 28px; }
.card { display:block; padding:18px 20px; background:var(--bg); border:1px solid var(--line); border-radius:12px; color:var(--ink); text-decoration:none; transition:.15s; }
.card:hover { border-color:var(--accent); transform:translateY(-1px); text-decoration:none; }
.card .ctitle { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.card .ctitle .tag { font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--amber-deep); background:var(--amber-tint); border:1px solid var(--amber-tint-line); padding:2px 7px; border-radius:5px; text-transform:uppercase; font-weight:600; }
html[data-theme="dark"] .card .ctitle .tag { color:var(--amber); background:#2A2113; border-color:#4A3A1E; }
.card .csub { font-size:13.5px; color:var(--dim); line-height:1.5; }

/* ---------- Spec sheet — used on model pages ---------- */
.spec { display:grid; grid-template-columns:140px 1fr; gap:8px 16px; padding:18px 20px; background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; margin:8px 0 28px; font-size:14px; }
.spec dt { color:var(--dim); font-family:var(--mono); font-size:12.5px; }
.spec dd { color:var(--ink-2); }
.spec dd.mono { font-family:var(--mono); font-size:13px; }

/* ---------- Footer ---------- */
footer { background:var(--surface); border-top:1px solid var(--line); padding-inline:var(--pad); margin-top:60px; }
.foot-inner { max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:24px; padding-block:36px 44px; }
.foot-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-logo img { height:25px; }
.foot-links { display:flex; gap:24px; flex-wrap:wrap; }
.foot-links a { font-size:14px; font-weight:500; color:var(--accent); text-decoration:none; }
.foot-links a:hover { text-decoration:underline; }
.foot-bottom { padding-top:18px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--dim-2); }

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .docshell { grid-template-columns:1fr; gap:24px; }
  .docnav { position:static; max-height:none; padding-right:0; padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:8px; }
  .docnav ul { display:flex; flex-wrap:wrap; gap:4px; }
  .docnav h4 { display:inline-block; margin:10px 12px 6px 0; }
  .nav-links a:not(.nav-gh){ display:none; }
}
@media (max-width:560px){
  body { font-size:15.5px; }
  .doc h1 { font-size:28px; }
  .doc h2 { font-size:21px; margin:36px 0 12px; padding-top:28px; }
  .doc h3 { font-size:17px; }
  .spec { grid-template-columns:1fr; gap:2px; }
  .spec dt { margin-top:8px; }
}

/* ---------- Blog (single-column article + index) ----------
   Reuses the .doc prose styles above; .blogwrap just swaps the docs
   two-column grid for a centered reading column. Built by build_blog.py.
-------------------------------------------------------------------- */
.blogwrap { max-width:760px; margin:0 auto; padding:clamp(32px,5vw,52px) var(--pad) 64px; }
.blogpost, .bloglist { min-width:0; }
.doc-kicker a { color:var(--dim); }
.doc-kicker a:hover { color:var(--accent); text-decoration:none; }

.post-meta { font-size:13.5px; color:var(--dim-2); margin:-2px 0 18px; font-family:var(--mono); }
.post-meta a { color:var(--dim); }
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.chip { font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-tint-line); padding:3px 9px; border-radius:20px; }

.post-toc { background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; padding:14px 18px 16px; margin:0 0 30px; }
.post-toc h4 { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim-3); font-weight:600; margin-bottom:8px; }
.post-toc ul { list-style:none; margin:0; display:flex; flex-direction:column; gap:5px; }
.post-toc a { font-size:14px; color:var(--dim); }
.post-toc a:hover { color:var(--accent); text-decoration:none; }

.blogpost img { border:1px solid var(--line-soft); border-radius:10px; margin:8px 0 24px; }
.blogpost hr, .bloglist hr { border:0; border-top:1px solid var(--line-soft); margin:40px 0 26px; }
.post-cta { margin-top:0; }

/* index list */
.post-index { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.post-row { display:block; padding:20px 4px; border-bottom:1px solid var(--line-soft); text-decoration:none; }
.post-row:hover { text-decoration:none; }
.post-row:hover .post-row-title { color:var(--accent); }
.post-row-meta { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; color:var(--dim-2); margin-bottom:6px; }
.post-row-title { font-size:20px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); margin-bottom:6px; }
.post-row-desc { font-size:15px; color:var(--dim); line-height:1.55; max-width:66ch; }