/* ============================================================================
   Scrub docs — theme
   ----------------------------------------------------------------------------
   The documentation counterpart to the earn app. Same design language:
     - the earn type stack — Newsreader display, Libre Franklin body,
       IBM Plex Mono for figures
     - earn's shape tokens — 8 / 12 / 18px radii, hairline borders
     - one background (#0b1220); #131d2e is only for things that sit on it
     - panel = 1px border + surface fill, the treatment earn uses for cards

   Contrast is deliberately high: body text is #c6d3e5 on #0b1220 (~12:1),
   secondary text #8fa0b9 (~6.5:1). Nothing on these pages sits below 4.5:1.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Libre+Franklin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --bg: #0b1220;
  --surface: #131d2e;
  --surface-2: #1a2537;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f2f7fd;
  --text-soft: #c6d3e5;
  --text-muted: #8fa0b9;

  --accent: #4cc4fb;
  --accent-strong: #8dd9fd;
  --accent-rgb: 76 196 251;
  --gold: #eab458;

  /* earn's shape tokens */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 9999px;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --sidebar: 304px;
  --header: 64px;
  --rail: 228px;

  --base: 19px;
}

/* ---------------------------------------------------------------------------
   Backgrounds
   ------------------------------------------------------------------------ */

.book.color-theme-1,
.book.color-theme-2,
.book.color-theme-3,
.book.color-theme-1 .book-body,
.book.color-theme-2 .book-body,
.book.color-theme-3 .book-body,
.book.color-theme-1 .book-summary,
.book.color-theme-2 .book-summary,
.book.color-theme-3 .book-summary {
  background: var(--bg);
  color: var(--text-soft);
}

html,
body,
.book,
.book-body,
.book-body .body-inner,
.page-wrapper,
.page-inner {
  background: var(--bg) !important;
  color: var(--text-soft);
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------ */

.book-summary {
  width: var(--sidebar);
  background: var(--bg);
  border-right: 1px solid var(--line);
  font-family: var(--font-body);
  padding-bottom: 56px;
}

/* Desktop only. Honkit's own breakpoint is 600px — below it the sidebar slides
   in over the content via `left: -100%` and the body is moved with a transform
   instead. Offsetting `left` here at every width pushed the whole page 304px
   off a phone screen and left the menu permanently open. */
@media screen and (min-width: 600px) {
  .book.with-summary .book-body {
    left: var(--sidebar);
  }
}

@media screen and (max-width: 600px) {
  .book-summary {
    width: min(var(--sidebar), calc(100% - 60px));
  }
}

.book-summary::before {
  content: "Scrub";
  display: flex;
  align-items: center;
  height: var(--header);
  padding-left: 62px;
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-position: 24px center;
  background-size: 28px 28px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
}

.book-summary ul.summary {
  padding: 22px 0 0;
}

.book-summary ul.summary li.header {
  padding: 30px 26px 10px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.book-summary ul.summary li a,
.book-summary ul.summary li span {
  padding: 10px 26px;
  margin: 0 12px;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  transition: background 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

.book-summary ul.summary li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
}

.book-summary ul.summary li.active > a {
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent);
  font-weight: 500;
}

.book-summary .gitbook-link,
.book-summary p.gitbook-link {
  display: none !important;
}

#book-search-input {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 18px 22px;
}

#book-search-input input,
#book-search-input input:focus,
#book-search-input input:hover {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 11px 14px;
  font-size: 0.9375rem;
  box-shadow: none;
}

#book-search-input input::placeholder {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Header

   On desktop there is no header. It held one thing — the page title, in italic
   serif — which is already the H1 directly beneath it, and the sidebar brand
   block already carries the logo. It was a 64px band of duplicated text, so it
   is gone above 900px.

   Below that the sidebar collapses and the header earns its place: it holds the
   toggle, which theme.js injects and which has nowhere else to live.
   ------------------------------------------------------------------------ */

.book-header {
  background: rgba(11, 18, 32, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  height: var(--header);
  padding: 0 28px;
  display: flex;
  align-items: center;
}

.book-header h1 {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--text-soft);
  margin: 0;
  opacity: 1;
}

.book-header h1 a {
  color: var(--text-muted);
}

.book-header h1 i {
  display: none;
}

.book-header .btn,
.book-header .js-toolbar-action {
  color: var(--text-muted);
  height: var(--header);
  line-height: var(--header);
  padding: 0 14px;
}

.book-header .btn:hover {
  color: var(--text);
}

/* Placed after the base rule on purpose: source order decides here, and the
   base rule sets display: flex. Putting this above it silently loses.
   The breakpoint matches Honkit's sidebar breakpoint, so the toggle appears at
   exactly the width where the sidebar stops being permanently visible. */
@media screen and (min-width: 600px) {
  .book-header {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Page shell — a two-column grid: content, then the "on this page" rail
   ------------------------------------------------------------------------ */

.page-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 56px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 68px 48px 140px;
  align-items: start;
}

body.has-page-toc .page-inner {
  grid-template-columns: minmax(0, 1fr) var(--rail);
}

.page-inner > #book-search-results {
  grid-column: 1;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Content
   ------------------------------------------------------------------------ */

.markdown-section {
  font-family: var(--font-body);
  color: var(--text-soft);
  font-size: var(--base);
  line-height: 1.72;
  max-width: 100%;
  padding: 0;
}

.markdown-section > :first-child {
  margin-top: 0 !important;
}

/* headings — Newsreader, the face the earn app uses for display */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.markdown-section h1 {
  font-size: 2.5em;
  margin: 0 0 0.4em;
}

.markdown-section h2 {
  font-size: 1.6em;
  margin: 2em 0 0.7em;
}

.markdown-section h3 {
  font-size: 1.2em;
  margin: 1.9em 0 0.5em;
}

.markdown-section h4 {
  font-size: 1.02em;
  margin: 1.7em 0 0.45em;
  color: var(--text-soft);
}

/* one short accent rule under each section heading */
.markdown-section h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 0.5em;
  border-radius: 2px;
  background: rgb(var(--accent-rgb) / 0.7);
}

.markdown-section h3::after,
.markdown-section h4::after {
  display: none;
}

.markdown-section p,
.markdown-section li {
  font-size: 1em;
  line-height: 1.72;
  color: var(--text-soft);
}

.markdown-section p {
  margin: 0 0 1.05em;
}

.markdown-section h1 + p {
  font-size: 1.22em;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 1.5em;
}

.markdown-section strong {
  color: var(--text);
  font-weight: 600;
}

.markdown-section em {
  color: var(--text);
}

.markdown-section ul,
.markdown-section ol {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}

.markdown-section li {
  margin-bottom: 0.5em;
}

.markdown-section li::marker {
  color: var(--text-muted);
}

.markdown-section a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.35);
  transition: border-color 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

.markdown-section a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-strong);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Tables — the panel treatment, hairline rows, no zebra
   ------------------------------------------------------------------------ */

.markdown-section table {
  display: table;
  width: 100%;
  margin: 1.7em 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.markdown-section table tr,
.markdown-section table tr:nth-child(2n) {
  background: transparent;
}

.markdown-section table th {
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.85em 1.15em;
  border: none;
  border-bottom: 1px solid var(--line);
}

.markdown-section table td {
  padding: 0.9em 1.15em;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.95em;
  vertical-align: top;
}

.markdown-section table tr:last-child td {
  border-bottom: none;
}

.markdown-section table td:first-child {
  color: var(--text);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Code and diagrams
   ------------------------------------------------------------------------ */

.markdown-section code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface);
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.15em 0.42em;
}

.markdown-section pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.1em 1.3em;
  margin: 1.6em 0;
  overflow: auto;
}

.markdown-section pre code {
  background: transparent;
  border: none;
  color: var(--text-soft);
  padding: 0;
  font-size: 0.86em;
  line-height: 1.65;
}

.markdown-section .mermaid,
.markdown-section [class*="mermaid"] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.9em 1em;
  margin: 1.8em 0;
  text-align: center;
}

/* Figures
   The plugin replaces the <img> with an inlined <svg>, which carries its own
   width/height attributes — so the img rule below does not reach it and a
   1200px-wide figure overflows the column. Both need constraining. */
.markdown-section img,
.markdown-section .scrub-figure-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.markdown-section img {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  margin: 1.8em auto;
}

.markdown-section figure.scrub-figure {
  margin: 2em 0;
}

.markdown-section figure.scrub-figure picture {
  display: block;
  width: 100%;
}

/* The narrow variant is drawn at 360px. Without a cap it is upscaled on a
   tablet — at a 700px viewport it rendered 1.82x and its 6px bar became 11px.
   Capping it keeps the scale between 0.95x and 1.11x across the whole band
   below the breakpoint, with no gap where neither variant is legible. */
.markdown-section .fig-narrow img,
.markdown-section .fig-narrow .scrub-figure-svg {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.markdown-section .scrub-figure-svg {
  border-radius: var(--r-md);
  overflow: visible;
}

/* ---------------------------------------------------------------------------
   Blockquote, hr
   ------------------------------------------------------------------------ */

.markdown-section blockquote {
  margin: 1.7em 0;
  padding: 1.05em 1.4em;
  background: rgb(var(--accent-rgb) / 0.07);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text);
}

.markdown-section blockquote p {
  color: var(--text);
  margin: 0 0 0.6em;
}

.markdown-section blockquote p:last-child {
  margin-bottom: 0;
}

.markdown-section hr {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 2.6em 0;
}

/* ---------------------------------------------------------------------------
   The "on this page" rail
   ------------------------------------------------------------------------ */

.page-toc {
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.page-toc-label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.page-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-toc li {
  margin: 0 0 2px;
}

.page-toc a {
  display: block;
  padding: 6px 0 6px 12px;
  margin-left: -12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.page-toc a:hover {
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: none;
}

.page-toc a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

.page-toc li.is-sub a {
  padding-left: 24px;
  font-size: 0.84375rem;
}

/* ---------------------------------------------------------------------------
   Search results — the default styling is near-unreadable on a dark theme
   ------------------------------------------------------------------------ */

#book-search-results .search-results-title,
#book-search-results .search-results-count {
  font-family: var(--font-display);
  color: var(--text);
}

#book-search-results .search-results-title {
  font-size: 1.5em;
  font-weight: 500;
  margin: 0 0 1.4em;
}

#book-search-results .search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#book-search-results .search-results-list li,
#book-search-results .search-results-item {
  margin: 0 0 14px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

#book-search-results .search-results-list li p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.94em;
  line-height: 1.65;
}

#book-search-results .search-results-list li a {
  color: var(--text);
  font-weight: 500;
}

/* the matched terms — the default yellow is unreadable here */
#book-search-results .search-results-list li p em {
  background: rgb(var(--accent-rgb) / 0.2);
  color: var(--text);
  font-style: normal;
  border-radius: 3px;
  padding: 0 3px;
}

#book-search-results .no-results {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Prev / next
   ------------------------------------------------------------------------ */

.navigation {
  top: 50%;
  bottom: auto;
  margin-top: -18px;
  height: 34px;
  max-width: 34px;
  min-width: 34px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.navigation:hover {
  opacity: 1;
  color: var(--accent);
  border-color: rgb(var(--accent-rgb) / 0.45);
  text-decoration: none;
}

.navigation.navigation-next {
  right: 16px;
}

.navigation.navigation-prev {
  left: 16px;
}

/* ---------------------------------------------------------------------------
   Scrollbars
   ------------------------------------------------------------------------ */

.book-body::-webkit-scrollbar,
.book-summary::-webkit-scrollbar,
.page-toc::-webkit-scrollbar {
  width: 10px;
}

.book-body::-webkit-scrollbar-track,
.book-summary::-webkit-scrollbar-track,
.page-toc::-webkit-scrollbar-track {
  background: transparent;
}

.book-body::-webkit-scrollbar-thumb,
.book-summary::-webkit-scrollbar-thumb,
.page-toc::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.11);
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
}

.book-body::-webkit-scrollbar-thumb:hover,
.book-summary::-webkit-scrollbar-thumb:hover,
.page-toc::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------------------
   Narrow screens — the rail goes first
   ------------------------------------------------------------------------ */

@media (max-width: 1200px) {
  .page-inner {
    padding: 48px 32px 120px;
  }
}

@media (max-width: 900px) {
  .page-inner {
    padding: 36px 22px 100px;
  }

  .markdown-section h1 {
    font-size: 2em;
  }

  .markdown-section h2 {
    font-size: 1.4em;
  }
}

/* ---------------------------------------------------------------------------
   Light mode
   ------------------------------------------------------------------------ */

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fc;
    --surface: #ffffff;
    --surface-2: #eef3f9;
    --line: rgba(14, 26, 43, 0.11);
    --line-strong: rgba(14, 26, 43, 0.18);
    --text: #0b1727;
    --text-soft: #33445c;
    --text-muted: #5f7186;
    --accent: #0284c7;
    --accent-strong: #0369a1;
    --accent-rgb: 2 132 199;
    --gold: #8a6210;
  }

  html,
  body,
  .book,
  .book-body,
  .book-body .body-inner,
  .page-wrapper,
  .page-inner,
  .book-summary {
    background: var(--bg) !important;
  }

  .book-header {
    background: rgba(247, 249, 252, 0.92);
  }

  .book-summary ul.summary li a:hover,
  .page-toc a:hover {
    background: rgba(14, 26, 43, 0.05);
  }

  .book-body::-webkit-scrollbar-thumb,
  .book-summary::-webkit-scrollbar-thumb,
  .page-toc::-webkit-scrollbar-thumb {
    background: rgba(14, 26, 43, 0.14);
    border-color: var(--bg);
  }
}