/* jpraxc.com/docs — the user guides inside the public website. Everything is scoped to
   .jx-docs and drawn with the website's own --nx-* tokens, so the site header, footer,
   fonts and light/dark switch apply unchanged. */
.jx-docs {
  --d-ink: var(--nx-ink, #32131f);
  --d-muted: var(--nx-muted, #71616a);
  --d-paper: var(--nx-paper, #f7f2e9);
  --d-surface: var(--nx-surface, #fffdf8);
  --d-soft: var(--nx-soft, #eee6dd);
  --d-line: var(--nx-line, #dfd2cf);
  --d-line-strong: var(--nx-line-strong, #baa3aa);
  --d-accent: var(--nx-accent, #650d2d);
  --d-on-accent: var(--nx-on-accent, #fff8ed);
  --d-wine: var(--nx-wine, #650d2d);
  --d-gold: var(--nx-gold, #b88442);
  --d-top: calc(var(--nx-header-height, 88px) + 14px);
  --d-side: 272px;
  --d-toc: 220px;
  --d-measure: 46rem;
  --d-note: #6b4f8a; --d-note-bg: #f3eef8;
  --d-tip: #2f7a53; --d-tip-bg: #e8f4ec;
  --d-imp: #9a5a00; --d-imp-bg: #fdf1dc;
  --d-warn: #a3122c; --d-warn-bg: #fbe7ea;
  --d-code: #efe6de;
  color: var(--d-ink);
  padding: 0 0 120px; /* room for the website's floating bar */
}
html[data-theme="dark"] .jx-docs {
  --d-note: #c9b1e2; --d-note-bg: #2a2133;
  --d-tip: #7fd0a2; --d-tip-bg: #1b2b22;
  --d-imp: #f2bd62; --d-imp-bg: #33261a;
  --d-warn: #ff9aaa; --d-warn-bg: #3a1b24;
  --d-code: #3a2531;
}
.jx-docs *, .jx-docs *::before, .jx-docs *::after { box-sizing: border-box; }
.jx-docs a { color: var(--d-accent); text-underline-offset: 2px; }
.jx-docs a:hover { color: var(--d-ink); }
.jx-docs :focus-visible { outline: 3px solid var(--d-gold); outline-offset: 2px; border-radius: 4px; }
.jx-docs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.jx-docs .docs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jx-docs kbd { display: inline-block; min-width: 1.5em; padding: 0 .4em; border: 1px solid var(--d-line); border-bottom-width: 2px; border-radius: 5px; background: var(--d-surface); color: var(--d-muted); font: 700 12px/1.6 inherit; text-align: center; }

/* The docs bar: title, guides menu (small screens) and search */
.jx-docs .docs-bar { border-bottom: 1px solid var(--d-line); background: var(--d-surface); }
.jx-docs .docs-bar-inner { display: flex; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 14px 24px; }
.jx-docs .docs-home { display: inline-flex; align-items: baseline; gap: 6px; color: var(--d-ink); font-size: 19px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.jx-docs .docs-home b { color: var(--d-accent); }
.jx-docs .docs-nav-toggle { display: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--d-line-strong); border-radius: 999px; background: transparent; color: var(--d-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.jx-docs .docs-search { position: relative; flex: 1 1 420px; max-width: 560px; margin-left: auto; }
.jx-docs .docs-search input { width: 100%; height: 44px; padding: 0 40px; border: 1px solid var(--d-line-strong); border-radius: 999px; background: var(--d-paper); color: var(--d-ink); font: inherit; font-size: 15px; }
.jx-docs .docs-search input::placeholder { color: var(--d-muted); }
.jx-docs .docs-search input:focus { outline: 3px solid var(--d-gold); outline-offset: 0; }
.jx-docs .docs-search-icon { position: absolute; left: 14px; top: 13px; color: var(--d-muted); pointer-events: none; }
.jx-docs .docs-search-key { position: absolute; right: 14px; top: 11px; }
.jx-docs .docs-search:focus-within .docs-search-key { display: none; }
.jx-docs .docs-results { position: absolute; left: 0; right: 0; top: 50px; z-index: 60; max-height: min(70vh, 540px); overflow-y: auto; padding: 6px; border: 1px solid var(--d-line); border-radius: 16px; background: var(--d-surface); color: var(--d-ink); box-shadow: 0 18px 48px rgba(30, 10, 16, .22); }
.jx-docs .docs-results a { display: block; padding: 10px 12px; border-radius: 12px; color: var(--d-ink); text-decoration: none; }
.jx-docs .docs-results a small { display: block; color: var(--d-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jx-docs .docs-results a strong { display: block; font-size: 15px; }
.jx-docs .docs-results a span { display: block; color: var(--d-muted); font-size: 14px; line-height: 1.45; }
.jx-docs .docs-results a:hover, .jx-docs .docs-results a[aria-selected="true"] { background: var(--d-soft); }
.jx-docs .docs-results mark { background: #ffe19a; color: #32131f; border-radius: 3px; padding: 0 1px; }
.jx-docs .docs-empty { margin: 0; padding: 12px; color: var(--d-muted); font-size: 14px; }

/* Layout */
.jx-docs .docs-layout { display: grid; grid-template-columns: var(--d-side) minmax(0, 1fr) var(--d-toc); gap: 0 40px; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.jx-docs .docs-layout.docs-no-toc { grid-template-columns: var(--d-side) minmax(0, 1fr); }
.jx-docs .docs-sidebar { position: sticky; top: var(--d-top); align-self: start; max-height: calc(100vh - var(--d-top)); overflow-y: auto; padding: 22px 8px 40px 0; border-right: 1px solid var(--d-line); }
.jx-docs .docs-sidebar-head { display: none; }
.jx-docs .docs-nav, .jx-docs .docs-nav ul { list-style: none; margin: 0; padding: 0; }
.jx-docs .docs-nav details { margin-bottom: 2px; }
.jx-docs .docs-nav summary { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 10px; color: var(--d-ink); font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; }
.jx-docs .docs-nav summary::-webkit-details-marker { display: none; }
.jx-docs .docs-nav summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--d-muted); border-bottom: 2px solid var(--d-muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.jx-docs .docs-nav details[open] > summary::after { transform: rotate(45deg); }
.jx-docs .docs-nav summary:hover { background: var(--d-soft); }
.jx-docs .docs-nav details ul { margin: 2px 0 10px 10px; padding-left: 10px; border-left: 1px solid var(--d-line); }
.jx-docs .docs-nav details a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--d-muted); font-size: 14.5px; line-height: 1.4; text-decoration: none; }
.jx-docs .docs-nav details a:hover { background: var(--d-soft); color: var(--d-ink); }
.jx-docs .docs-nav a[aria-current="page"] { background: var(--d-soft); color: var(--d-accent); font-weight: 800; box-shadow: inset 3px 0 0 var(--d-accent); }

.jx-docs .docs-main { min-width: 0; padding: 28px 0 24px; }
.jx-docs .docs-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; color: var(--d-muted); font-size: 14px; }
.jx-docs .docs-crumbs a { color: var(--d-muted); }

/* A guide */
.jx-docs .docs-article { max-width: var(--d-measure); font-size: 16.5px; line-height: 1.7; }
.jx-docs .docs-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--d-line); }
.jx-docs .docs-article h1 { margin: 0 0 8px; color: var(--d-ink); font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.jx-docs .docs-lede { margin: 0; color: var(--d-muted); font-size: 18px; line-height: 1.55; }
.jx-docs .docs-meta { margin: 10px 0 0; color: var(--d-muted); font-size: 14px; }
.jx-docs .docs-article h2 { margin: 40px 0 12px; color: var(--d-ink); font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.jx-docs .docs-article h3 { margin: 28px 0 8px; color: var(--d-ink); font-size: 19px; font-weight: 800; line-height: 1.3; }
.jx-docs .docs-article h4 { margin: 22px 0 6px; color: var(--d-ink); font-size: 16.5px; font-weight: 800; }
.jx-docs .docs-article :is(h2, h3, h4)[id] { scroll-margin-top: var(--d-top); }
.jx-docs .docs-article :is(h2, h3, h4) .anchor { margin-left: 8px; color: var(--d-line-strong); font-weight: 400; text-decoration: none; opacity: 0; }
.jx-docs .docs-article :is(h2, h3, h4):hover .anchor, .jx-docs .docs-article .anchor:focus { opacity: 1; color: var(--d-muted); }
.jx-docs .docs-article :is(p, ul, ol) { margin: 0 0 14px; }
.jx-docs .docs-article :is(ul, ol) { padding-left: 1.4em; }
.jx-docs .docs-article ul { list-style: disc; }
.jx-docs .docs-article ol { list-style: decimal; }
.jx-docs .docs-article li { margin: 4px 0; }
.jx-docs .docs-article li > :is(ul, ol) { margin: 6px 0; }
.jx-docs .docs-article ol > li::marker { color: var(--d-accent); font-weight: 800; }
.jx-docs .docs-article strong { font-weight: 800; }
.jx-docs .docs-article code { padding: 1px 6px; border-radius: 6px; background: var(--d-code); font: 600 .9em/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.jx-docs .docs-article pre { margin: 0 0 16px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-code); }
.jx-docs .docs-article pre code { padding: 0; background: none; font-weight: 400; }
.jx-docs .docs-article .table-wrap { margin: 0 0 18px; overflow-x: auto; border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-surface); }
.jx-docs .docs-article table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; }
.jx-docs .docs-article :is(th, td) { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--d-line); text-align: left; vertical-align: top; }
.jx-docs .docs-article th { background: var(--d-soft); color: var(--d-ink); font-weight: 800; white-space: nowrap; }
.jx-docs .docs-article tr:last-child td { border-bottom: 0; }
.jx-docs .docs-article .callout { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--d-line); border-left: 4px solid var(--d-note); border-radius: 12px; background: var(--d-note-bg); }
.jx-docs .docs-article .callout p { margin: 0 0 8px; }
.jx-docs .docs-article .callout p:last-child { margin-bottom: 0; }
.jx-docs .docs-article .callout-title { color: var(--d-note); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.jx-docs .docs-article .callout-tip { border-left-color: var(--d-tip); background: var(--d-tip-bg); }
.jx-docs .docs-article .callout-tip .callout-title { color: var(--d-tip); }
.jx-docs .docs-article .callout-important { border-left-color: var(--d-imp); background: var(--d-imp-bg); }
.jx-docs .docs-article .callout-important .callout-title { color: var(--d-imp); }
.jx-docs .docs-article .callout-warning { border-left-color: var(--d-warn); background: var(--d-warn-bg); }
.jx-docs .docs-article .callout-warning .callout-title { color: var(--d-warn); }
.jx-docs .docs-article .shot { margin: 6px 0 22px; }
.jx-docs .docs-article .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-surface); box-shadow: 0 10px 30px rgba(50, 19, 31, .08); }
.jx-docs .docs-article .shot-link { display: block; border-radius: 14px; cursor: zoom-in; }
.jx-docs .docs-article .shot figcaption { margin-top: 8px; color: var(--d-muted); font-size: 14px; line-height: 1.45; }
.jx-docs .docs-article a.ext::after { content: "\2197"; display: inline-block; margin-left: 2px; font-size: .8em; text-decoration: none; }

/* Cards */
.jx-docs .docs-cards { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.jx-docs .docs-cards-guides { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.jx-docs .docs-cards-sections { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.jx-docs .docs-card { display: flex; flex-direction: column; gap: 4px; height: 100%; margin: 0; padding: 16px 18px; border: 1px solid var(--d-line); border-radius: 18px; background: var(--d-surface); color: var(--d-ink); text-decoration: none; }
.jx-docs a.docs-card:hover { border-color: var(--d-accent); color: var(--d-ink); }
.jx-docs .docs-card strong { color: var(--d-accent); font-size: 16px; }
.jx-docs .docs-card > span { color: var(--d-muted); font-size: 14.5px; line-height: 1.5; }
.jx-docs .docs-card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; line-height: 1.25; }
.jx-docs .docs-card h2 a { color: var(--d-ink); text-decoration: none; }
.jx-docs .docs-card h2 a:hover { color: var(--d-accent); }
.jx-docs .docs-card p { margin: 0 0 10px; color: var(--d-muted); font-size: 15px; line-height: 1.55; }
.jx-docs .docs-card ul { list-style: none; margin: 0 0 12px; padding: 0; }
.jx-docs .docs-card li { margin: 0; border-top: 1px solid var(--d-line); }
.jx-docs .docs-card li a { display: block; padding: 7px 0; font-size: 15px; text-decoration: none; }
.jx-docs .docs-card li a:hover { text-decoration: underline; }
.jx-docs .docs-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-weight: 800; font-size: 14px; text-decoration: none; }

.jx-docs .docs-hero { margin: 4px 0 28px; padding: 36px 36px 32px; border-radius: 24px; background: var(--d-wine); color: #fff8ed; }
.jx-docs .docs-hero .docs-eyebrow { margin: 0; color: #edccae; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.jx-docs .docs-hero h1 { margin: 6px 0 10px; color: #fff8ed; font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.jx-docs .docs-hero .docs-lede { max-width: 44rem; color: rgba(255, 248, 237, .86); }
.jx-docs .docs-hero-hint { margin: 16px 0 0; color: rgba(255, 248, 237, .78); font-size: 14px; }
.jx-docs .docs-hero kbd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff8ed; }
html[data-theme="dark"] .jx-docs .docs-hero { background: #4c1229; }

.jx-docs .docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: var(--d-measure); margin: 34px 0 20px; }
.jx-docs .docs-pager a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--d-line); border-radius: 16px; background: var(--d-surface); text-decoration: none; }
.jx-docs .docs-pager a:hover { border-color: var(--d-accent); }
.jx-docs .docs-pager span { display: flex; flex-direction: column; font-weight: 800; line-height: 1.35; }
.jx-docs .docs-pager small { color: var(--d-muted); font-weight: 400; font-size: 13px; }
.jx-docs .docs-pager-next { justify-content: flex-end; text-align: right; grid-column: 2; }
.jx-docs .docs-help { max-width: var(--d-measure); margin: 24px 0 0; padding: 14px 18px; border: 1px dashed var(--d-line-strong); border-radius: 16px; color: var(--d-muted); font-size: 15px; }
.jx-docs .docs-help p { margin: 0; }

.jx-docs .docs-toc { position: sticky; top: var(--d-top); align-self: start; max-height: calc(100vh - var(--d-top)); overflow-y: auto; padding: 30px 0; font-size: 14px; }
.jx-docs .docs-toc-title { margin: 0 0 8px; color: var(--d-muted); font-weight: 800; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.jx-docs .docs-toc ul { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 1px solid var(--d-line); }
.jx-docs .docs-toc li { margin: 0; }
.jx-docs .docs-toc a { display: block; padding: 4px 8px; color: var(--d-muted); text-decoration: none; line-height: 1.4; }
.jx-docs .docs-toc a:hover, .jx-docs .docs-toc a[aria-current="true"] { color: var(--d-accent); }
.jx-docs .docs-toc .docs-toc-l3 a { padding-left: 20px; font-size: 13.5px; }

/* Narrower screens */
@media (max-width: 1200px) {
  .jx-docs .docs-layout { grid-template-columns: var(--d-side) minmax(0, 1fr); }
  .jx-docs .docs-toc { display: none; }
}
@media (max-width: 900px) {
  .jx-docs .docs-bar-inner { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; }
  .jx-docs .docs-nav-toggle { display: inline-flex; }
  .jx-docs .docs-search { flex-basis: 100%; max-width: none; margin-left: 0; order: 3; }
  .jx-docs .docs-search-key { display: none; }
  .jx-docs .docs-layout, .jx-docs .docs-layout.docs-no-toc { display: block; padding: 0 16px; }
  .jx-docs .docs-sidebar { position: fixed; top: 0; left: 0; z-index: 130; width: min(330px, 88vw); max-height: none; height: 100dvh; padding: 0 12px 40px; background: var(--d-surface); border-right: 1px solid var(--d-line); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); transform: translateX(-105%); transition: transform .2s ease; visibility: hidden; }
  .jx-docs .docs-sidebar-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -12px 10px; padding: 14px 12px 12px 22px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); font-weight: 800; }
  .jx-docs .docs-sidebar-close { width: 40px; height: 40px; border: 1px solid var(--d-line-strong); border-radius: 999px; background: transparent; color: var(--d-ink); font-size: 22px; line-height: 1; cursor: pointer; }
  .jx-docs.docs-nav-open .docs-sidebar { transform: none; visibility: visible; }
  .jx-docs.docs-nav-open::after { content: ""; position: fixed; inset: 0; z-index: 120; background: rgba(20, 8, 12, .45); }
  .jx-docs .docs-hero { padding: 26px 20px 22px; border-radius: 20px; }
  .jx-docs .docs-pager { grid-template-columns: 1fr; }
  .jx-docs .docs-pager-next { grid-column: auto; }
  .jx-docs .docs-article th { white-space: normal; }
}
/* The website's chapter rail sits at the left edge above phone widths; keep clear of it. */
@media (min-width: 761px) {
  .jx-docs .docs-bar-inner, .jx-docs .docs-layout, .jx-docs .docs-layout.docs-no-toc { padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) { .jx-docs * { transition: none !important; } }
@media print {
  .jx-docs .docs-bar, .jx-docs .docs-sidebar, .jx-docs .docs-toc, .jx-docs .docs-pager, .jx-docs .docs-help, .jx-docs .anchor { display: none !important; }
  .jx-docs .docs-layout, .jx-docs .docs-layout.docs-no-toc { display: block; padding: 0; }
}