/* dexsql documentation — generated by docs-site.mjs. Do not edit: edit that script and re-stage.
   The custom properties below are the app's own (dexstudio/app.css :root); test/docs-site.test.mjs fails
   if the two drift, so this is a copy with a guard rather than a second theme. */
:root {
  --bg-app: #17181b;
  --bg-panel: #1f2125;
  --bg-panel-2: #24262b;
  --bg-editor: #1b1d21;
  --bg-hover: #2c2f35;
  --bg-active: #33373f;
  --bg-input: #141518;
  --border: #33363c;
  --border-strong: #454952;
  --text: #d6d8dc;
  --text-dim: #9aa0aa;
  --text-faint: #6f757f;
  --accent: #4ea1ff;
  --accent-dim: #2b6cb0;
  --amber: #ffb454;
  --green: #7ec699;
  --red: #ff6b6b;

  --mono: "JetBrains Mono", "Cascadia Mono", "Consolas", "SFMono-Regular", "Liberation Mono", monospace;
  --ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --sidebar-width: clamp(190px, 20vw, 300px);
  --toc-width: clamp(180px, 18vw, 260px);
  --topbar-height: 42px;
}

* { box-sizing: border-box; }

/* Dark form controls and scrollbars, as in the app. */
:root { color-scheme: dark; }

html { background: var(--bg-app); }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font: 13px/1.45 var(--ui);
}

a { color: var(--accent); }

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-height);
  padding: 0 14px;
  background: linear-gradient(180deg, #23262b, #1d2024);
  border-bottom: 1px solid var(--border);
}
.topbar .grow { flex: 1 1 auto; }
.brand { font-weight: 600; letter-spacing: 0.2px; text-decoration: none; }
.brand-mark { color: var(--amber); }
.brand-code { color: var(--accent); }
.brand-note { color: var(--text-faint); font-size: 12px; }
.app-link { color: var(--text-dim); font-size: 12px; text-decoration: none; }
.app-link:hover { color: var(--accent); }

/* The language switcher: two links in one small segmented control, beside the brand. The current language
   is filled, so "which language am I reading" is answered by the same two anchors that change it. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
}
.lang-link {
  padding: 1px 7px 2px;
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.lang-link:hover { color: var(--accent); }
.lang-link.is-current { background: var(--bg-active); color: var(--text); font-weight: 600; }

/* The fallback page's note: this URL is the Chinese page, but its text is the English source. The amber
   rule is the app's own accent for "look here", and the box is the panel colour so it reads as chrome
   rather than as part of the manual's prose. */
.lang-note {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--amber);
  background: var(--bg-panel);
  color: var(--text-dim);
  font-size: 12.5px;
}

/* ------------------------------------------------------------------ layout */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-areas: "sidebar content";
  align-items: start;
}
body.has-toc .layout {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width);
  grid-template-areas: "sidebar content toc";
}

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: var(--topbar-height);
  max-height: calc(100vh - var(--topbar-height));
  overflow: auto;
  padding: 16px 12px 32px;
  border-right: 1px solid var(--border);
}
.content {
  grid-area: content;
  min-width: 0;
  padding: 20px 28px 80px;
}
.toc {
  grid-area: toc;
  position: sticky;
  top: var(--topbar-height);
  max-height: calc(100vh - var(--topbar-height));
  overflow: auto;
  padding: 20px 14px 32px;
  border-left: 1px solid var(--border);
}

/* Below three columns' worth of room the page stacks, and the table of contents and the manual come after
   the text rather than squeezing it. */
@media (max-width: 1080px) {
  .layout,
  body.has-toc .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "toc" "sidebar";
  }
  .sidebar, .toc {
    position: static;
    max-height: none;
    border-right: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* ------------------------------------------------------------------ sidebar */

.nav-group { margin: 0 0 14px; }
.nav-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: block;
  padding: 3px 8px;
  border-left: 2px solid transparent;
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 12.5px;
  text-decoration: none;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link.is-current {
  background: var(--bg-active);
  border-left-color: var(--accent);
  color: var(--text);
}

/* ------------------------------------------------------------------ table of contents */

.toc-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc li.h2 { margin-top: 6px; }
.toc li.h3 { margin-left: 10px; }
.toc li.h3 a { font-size: 11.5px; }
.toc a { display: block; padding: 2px 0; color: var(--text-dim); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ the page */

.page-head { margin: 0 0 20px; }
.page-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.page-meta { margin: 0; color: var(--text-faint); font-size: 12px; }
.page-meta a { color: var(--text-dim); text-decoration: none; }
.page-meta a:hover { color: var(--accent); text-decoration: underline; }

.doc { font-size: 14px; line-height: 1.65; }
.doc h2, .doc h3, .doc h4 { font-weight: 600; line-height: 1.25; scroll-margin-top: calc(var(--topbar-height) + 10px); }
.doc h2 { margin: 1.7em 0 0.6em; padding-bottom: 0.25em; font-size: 19px; border-bottom: 1px solid var(--border); }
.doc h3 { margin: 1.5em 0 0.5em; font-size: 15.5px; }
.doc h4 { margin: 1.3em 0 0.4em; font-size: 14px; }
.doc > :first-child { margin-top: 0; }
/* A prose measure. The column is as wide as the widest table in the manual needs, which is far too wide to
   read a paragraph across — measured on sql/index.html at 1440px, the lines ran ~130 characters. Only the
   prose is capped: tables, code blocks and the headings keep the whole column, because that is what needs it. */
.doc > p, .doc > ul, .doc > ol, .doc > blockquote { max-width: 90ch; }
.doc p, .doc ul, .doc ol { margin: 0.75em 0; }
.doc li { margin: 0.25em 0; }
.doc a { text-decoration: none; }
.doc a:hover { text-decoration: underline; }
.doc strong { color: var(--text); font-weight: 600; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 1.6em 0; }
.doc blockquote {
  margin: 0.9em 0;
  padding: 0.1em 1em;
  border-left: 3px solid var(--border-strong);
  color: var(--text-dim);
}

/* Inline code is frequent here (~1600 spans): a bordered chip reads as code without shouting. */
.doc code {
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-input);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
}

/* Fenced blocks: the editor background, a scroll for the long lines, and no chip inside it. */
.doc pre {
  margin: 0.9em 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-editor);
  overflow-x: auto;
}
.doc pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Tables are the bulk of the manual (625 rows): ruled, with a header fill, the panel colour for stripes,
   and wrapping cells so a long descriptor wraps instead of widening the page. */
.table-wrap { margin: 0.9em 0; overflow-x: auto; }
.doc table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
}
.doc th, .doc td {
  padding: 5px 8px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.doc th { background: var(--bg-panel-2); font-weight: 600; }
.doc tbody tr:nth-child(even) { background: var(--bg-panel); }
.doc tbody tr:hover { background: var(--bg-hover); }