/* ══ Customer documentation (/docs, DocsService) ══════════════════════════════
   Built only on site.css's tokens (--ink, --mut, --line, --card, --acc, …), so
   every theme and dark mode follow. body.docs-embed = inside DynBrowser: no site
   nav/footer, so the menu sticks to the top of the window. ═══════════════════ */
.docs-wrap {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px;
  padding-top: 36px; padding-bottom: 72px; align-items: start;
}
.docs-embed .docs-wrap { padding-top: 22px; padding-bottom: 40px; }

.docs-side {
  position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; font-size: .92rem; padding-right: 4px;
}
.docs-embed .docs-side { top: 22px; max-height: calc(100vh - 44px); }
.docs-home, .docs-side li a {
  display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink); line-height: 1.35;
}
.docs-home { font-weight: 600; }
.docs-home:hover, .docs-side li a:hover { background: var(--acc-soft); text-decoration: none; }
.docs-home.on, .docs-side li a.on { background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.docs-sec-h {
  font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut); padding: 0 10px 6px;
}
.docs-side ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.docs-main { min-width: 0; }
.docs-article {
  max-width: 780px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 36px 42px 40px; color: var(--ink);
}
.docs-article > * + * { margin-top: 14px; }
.docs-article h1 { font-size: 2rem; margin-bottom: 6px; }
.docs-article h2 { font-size: 1.35rem; margin-top: 34px; padding-top: 8px; }
.docs-article h3 { font-size: 1.08rem; margin-top: 24px; }
.docs-article h2 + *, .docs-article h3 + * { margin-top: 10px; }
.docs-article p, .docs-article li { color: var(--ink); }
.docs-article ul, .docs-article ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.docs-article li > ul, .docs-article li > ol { margin-top: 6px; }
.docs-article strong { font-weight: 650; }
.docs-article code {
  font-family: 'JetBrains Mono', monospace; font-size: .86em; background: var(--chip);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere;
}
.docs-article pre {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  overflow-x: auto; font-size: .88rem; line-height: 1.5;
}
.docs-article pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.docs-article table { width: 100%; border-collapse: collapse; font-size: .93rem; display: block; overflow-x: auto; }
.docs-article th, .docs-article td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
/* A file name or command in a table cell stays on one line (it broke at every hyphen); the table scrolls instead. */
.docs-article td code { white-space: nowrap; overflow-wrap: normal; }
.docs-article th { font-weight: 600; color: var(--mut); font-size: .84rem; background: var(--bg-2); }
/* Screenshots: the app is light, so a border keeps them apart from a dark page; never wider than the column. */
.docs-article img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.docs-article p:has(> img:only-child) { margin-top: 18px; margin-bottom: 4px; }
.docs-article blockquote {
  border-left: 3px solid var(--acc); background: var(--acc-soft); border-radius: 0 10px 10px 0;
  padding: 10px 16px; color: var(--ink);
}
/* GitHub-style alerts (> [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION]). The word stays --ink;
   only the stripe and tint carry the colour. */
.docs-article .markdown-alert { border-left: 3px solid var(--acc); background: var(--acc-soft); border-radius: 0 10px 10px 0; padding: 10px 16px; }
.docs-article .markdown-alert-title { font-weight: 650; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.docs-article .markdown-alert-title svg { display: none; }
.docs-article .markdown-alert-warning, .docs-article .markdown-alert-caution { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.docs-article .markdown-alert-important { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.docs-article .markdown-alert-tip { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.docs-article .markdown-alert > p:last-child { margin-bottom: 0; }

.docs-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.docs-ov-sec { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--bg-2); }
.docs-ov-sec h2 { font-size: 1.05rem; margin: 0 0 8px; padding: 0; }
.docs-ov-sec ul { list-style: none; padding: 0; gap: 4px; }

@media (max-width: 860px) {
  .docs-wrap { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .docs-side { position: static; max-height: none; gap: 10px; }
  .docs-article td code { white-space: normal; overflow-wrap: anywhere; }
  .docs-article { padding: 24px 18px 28px; border-radius: 12px; }
  .docs-article h1 { font-size: 1.6rem; }
}