/* ============================================================================
   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;
}

/* ---------------------------------------------------------------------------
   NOTE ON UNITS — read before adding any type here.

   Honkit's own stylesheet sets `html { font-size: 62.5% }`, so 1rem is 10px,
   NOT 16px. Every rem in this file was silently rendering at 62.5% of what it
   was written to mean: the sidebar nav was 10px instead of 16px, and the TOC
   links 8.75px instead of 14px. All chrome type is therefore in px.

   Content type inside .markdown-section is em, scaled from --base (19px), and
   is unaffected. Do not reintroduce rem for chrome sizes.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   Motion tokens — mirror of earn/src/lib/motion/tokens.ts

   These were hand-typed in two places before (a 0.14s duration and a raw
   bezier, neither of which was even DUR.fast). Kept here so the docs and the
   app settle the same way.
   ------------------------------------------------------------------------ */
:root {
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ink: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-reveal: 0.5s;
}

/* earn's tokens.css has the same global hatch. Figures also gate in JS, but the
   theme's own transitions need this. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   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 Money";
  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: 21px;
  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: 14px;
  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: 16px;
  font-weight: 400;
  line-height: 1.5;
  transition: background var(--dur-fast) var(--ease-settle),
    color var(--dur-fast) var(--ease-settle);
}

.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: 15px;
  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: 17px;
  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;

  /* Matches the rail-present column. Without it, a page too short to earn a
     TOC rail ran its text to 1124px — about 110 characters a line, against 840
     on every other page. Measured: venues/numbers/links were the outliers. */
  max-width: 840px;
  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 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 var(--dur-fast) var(--ease-settle),
    color var(--dur-fast) var(--ease-settle);
}

.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 {
  /* the fallback <img> has this border from the rule above; without it the
     figure changes edge the moment the inline SVG replaces the image */
  border: 1px solid var(--line);
  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.

   This MUST stay inside the media query. Unscoped it also clamped the wide
   figures to 400px on desktop.

   Measured, not guessed. The content area is (viewport - 304px sidebar), so
   the column only reaches its full 840px at about a 1520px viewport — not at
   1200, which is where the rail merely appears. At 1200px the column is 538px
   and the wide figure rendered at 0.61x: WORSE than the mobile variant.

   So the narrow variant runs to 1449px, capped at 460px. The cap matters in
   both directions: uncapped it upscales past 1.8x on a tablet, and the stacked
   layout is far too tall to run at desktop widths — at 700px wide it would be
   1360px tall. Above 1449px the wide figure holds at 0.87-0.95x. */
@media screen and (max-width: 1449px) {
  .markdown-section .fig-narrow img,
  .markdown-section .fig-narrow .scrub-figure-svg {
    max-width: 460px;
    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: 15px;
  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: 14px;
  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: 13.5px;
}

/* ---------------------------------------------------------------------------
   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);
  }
}