/* ------------------------------------------------------------------ *
 * Murk docs theme — dark + purple, matched to the app (apps/web).
 * Overrides the Honkit default (GitBook) light theme.
 *   base #08090b · surface #0e1013 · elevated #14171b · line #1e2228
 *   text #f3f5f8 · muted #9aa3af · accent #7c5cff · accent-soft #a78bfa
 * ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --base: #08090b;
  --surface: #0d0f13;
  --elevated: #14171b;
  --line: #1e2228;
  --fg: #f3f5f8;
  --muted: #9aa3af;
  --faint: #5b6472;
  --accent: #7c5cff;
  --accent-soft: #a78bfa;
  --accent-glow: rgba(124, 92, 255, 0.14);
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Shell ---- */
.book,
.book-body,
.book .book-body .body-inner,
.book .book-body .page-wrapper .page-inner section.normal {
  background: var(--base);
  color: var(--fg);
}
.book { font-family: var(--font-sans); }

/* ---- Sidebar ---- */
.book .book-summary {
  background: var(--surface);
  border-right: 1px solid var(--line);
  color: var(--muted);
}
.book .book-summary ul.summary li a,
.book .book-summary ul.summary li span {
  color: var(--muted);
  font-weight: 500;
  border-bottom: none;
  transition: color .15s ease, background .15s ease;
}
.book .book-summary ul.summary li a:hover {
  color: var(--fg);
  background: var(--elevated);
  text-decoration: none;
}
.book .book-summary ul.summary li.active > a {
  color: var(--fg);
  background: var(--accent-glow);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.book .book-summary ul.summary li.header {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 700;
  padding-top: 20px;
}
.book .book-summary ul.summary li.divider { background: var(--line); }

/* Sidebar search box */
#book-search-input {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
}
#book-search-input input,
#book-search-input input:focus {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  padding: 8px 12px;
  outline: none;
  box-shadow: none;
}
#book-search-input input:focus { border-color: var(--accent); }
#book-search-input input::placeholder { color: var(--faint); }
#book-search-results .search-results .has-results .search-results-item { border-bottom: 1px solid var(--line); }
#book-search-results .search-results-item a { color: var(--accent-soft); }

/* ---- Header (top bar) ---- */
.book .book-header {
  background: var(--base);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.book .book-header h1 { color: var(--fg); font-weight: 600; }
.book .book-header a,
.book .book-header a:hover { color: var(--muted); }
.book .book-body .page-wrapper .page-inner section.normal.markdown-section > .book-header { display: none; }

/* ---- Typography ---- */
.markdown-section {
  color: var(--fg);
  font-size: 16px;
  line-height: 1.72;
}
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5 {
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: none;
}
.markdown-section h1 {
  font-size: 2.1em;
  font-weight: 800;
  background: linear-gradient(180deg, #fff 0%, #cfc7ff 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.markdown-section h2 {
  margin-top: 2em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--line);
}
.markdown-section p,
.markdown-section li { color: #dfe3ea; }
.markdown-section strong { color: var(--fg); font-weight: 700; }
.markdown-section hr { background: var(--line); height: 1px; border: 0; }

/* ---- Links ---- */
.markdown-section a { color: var(--accent-soft); text-decoration: none; }
.markdown-section a:hover { color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Inline code ---- */
.markdown-section code {
  background: var(--elevated);
  color: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .12em .4em;
  font-family: var(--font-mono);
  font-size: .88em;
}

/* ---- Code blocks ---- */
.markdown-section pre {
  background: #0b0d10;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: .86em;
  line-height: 1.6;
}
.markdown-section pre code {
  background: transparent;
  border: 0;
  color: #e7ebf1;
  padding: 0;
}

/* highlight.js — dark purple-tinted palette */
.hljs-comment, .hljs-quote { color: #5b6472; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name { color: #a78bfa; }
.hljs-string, .hljs-title, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #7ee0c0; }
.hljs-number, .hljs-literal, .hljs-type, .hljs-params, .hljs-meta, .hljs-link { color: #f0a67a; }
.hljs-attribute, .hljs-variable, .hljs-template-variable { color: #38bdf8; }
.hljs-function, .hljs-class { color: #f3f5f8; }
.hljs-deletion { color: #f43f5e; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ---- Blockquotes (our converted hints) ---- */
.markdown-section blockquote {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
  padding: 14px 18px;
}
.markdown-section blockquote p { color: #cfd4dd; margin: 0; }
.markdown-section blockquote strong { color: var(--fg); }

/* ---- Tables ---- */
.markdown-section table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.markdown-section table th {
  background: var(--elevated);
  color: var(--fg);
  border: 1px solid var(--line);
  font-weight: 600;
}
.markdown-section table td { border: 1px solid var(--line); color: #dfe3ea; }
.markdown-section table tr { background: var(--base); border-top: 1px solid var(--line); }
.markdown-section table tr:nth-child(2n) { background: var(--surface); }

/* ---- Prev/next page nav ---- */
.book .book-body .navigation { color: var(--faint); }
.book .book-body .navigation:hover { color: var(--accent-soft); }

/* ---- Scrollbars ---- */
.book-summary::-webkit-scrollbar,
.body-inner::-webkit-scrollbar { width: 10px; }
.book-summary::-webkit-scrollbar-thumb,
.body-inner::-webkit-scrollbar-thumb { background: #262b33; border-radius: 6px; }
.book-summary::-webkit-scrollbar-track,
.body-inner::-webkit-scrollbar-track { background: transparent; }

/* ---- Search results highlight ---- */
.markdown-section .search-highlight { background: var(--accent-glow); color: var(--accent-soft); }

/* ================================================================== *
 * Murk branding (injected by brand.mjs)
 * Sidebar becomes a flex column: brand pinned top · nav scrolls ·
 * footer pinned bottom.
 * ================================================================== */

.book .book-summary {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;   /* the <nav> scrolls, not the whole rail */
}
.book .book-summary > .murk-brand,
.book .book-summary > #book-search-input { flex: 0 0 auto; }
.book .book-summary > nav[role="navigation"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.book .book-summary > .murk-footer { flex: 0 0 auto; }

/* ---- Logo lockup (top) ---- */
.murk-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 18px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.07), transparent 90%);
}
.murk-mark {
  flex: none;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 9px rgba(124, 92, 255, 0.45));
}
.murk-word {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--fg) !important;
  line-height: 1;
  transition: color .15s ease;
}
.murk-brand:hover .murk-word { color: #fff !important; }
.murk-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-soft) !important;
  background: var(--accent-glow);
  border: 1px solid rgba(124, 92, 255, 0.28);
  border-radius: 999px;
  padding: 3px 8px 2px;
  margin-left: auto;   /* push the pill to the right edge */
  line-height: 1;
}

/* ---- Footer (bottom) ---- */
.murk-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 20px;
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, var(--surface), transparent);
}
.murk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: #fff !important;
  background: linear-gradient(180deg, #8b6bff, #6b47ff);
  border: 1px solid rgba(167, 139, 250, 0.55);
  border-radius: 11px;
  padding: 11px 14px;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: filter .15s ease, transform .06s ease, box-shadow .15s ease;
}
.murk-cta:hover { filter: brightness(1.09); box-shadow: 0 8px 22px rgba(124, 92, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.murk-cta:active { transform: translateY(1px); }
.murk-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 4px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.murk-x:hover { color: var(--fg) !important; background: var(--elevated); }
.murk-x svg { opacity: .85; }