/* ---- typography ---------------------------------------------------------
   * Body: Source Serif Pro — the same humanist serif inkwell itself
     serves to the Kindle, so the docs site reads like part of the
     product.
   * Headings: Bricolage Grotesque — a modern editorial sans that
     gives titles a newspaper / paper-page feel.
   * Code: JetBrains Mono.                                                  */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  --inkwell-serif: "Source Serif Pro", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --inkwell-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --inkwell-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --inkwell-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Layout knobs. The column grows with the viewport up to a
     comfortable readability cap. TOC width and gap are tied together
     so the body's right margin always matches what the floating TOC
     actually consumes. */
  --inkwell-column-max: 92rem;
  --inkwell-toc-width: 12rem;
  --inkwell-toc-gap: 5rem;
}

html, body, .content {
  font-family: var(--inkwell-serif);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--inkwell-display);
  font-weight: 600;
  letter-spacing: -.015em;
}

.menu-title, .sidebar, nav, .nav-chapters {
  font-family: var(--inkwell-sans);
  letter-spacing: -.005em;
}

h1 { font-size: 2.25em; font-weight: 700; margin: .6em 0 .5em; line-height: 1.15; letter-spacing: -.025em; }
h2 { font-size: 1.55em; margin: 1.4em 0 .5em; line-height: 1.2; }
h3 { font-size: 1.2em; margin: 1.2em 0 .35em; }

code, pre, kbd, .hljs {
  font-family: var(--inkwell-mono);
  font-size: 14px;
}

/* ---- color palette ------------------------------------------------------
   Light / e-reader-inspired. Warm off-white background, charcoal text,
   muted accent. Dark mode left as mdBook's default since e-ink readers
   live in the light.                                                      */

.light {
  --bg: #fafaf6;
  --fg: #2a2826;
  --sidebar-bg: #f1ede4;
  --sidebar-fg: #4a4744;
  --sidebar-active: #2a2826;
  --sidebar-non-existant: #8a857c;
  --sidebar-spacer: #d8d3c8;
  --scrollbar: #c8c3b6;

  --icons: #8a857c;
  --icons-hover: #2a2826;

  --links: #2a2826;
  --inline-code-color: #5a4a30;
  --theme-popup-bg: #fafaf6;
  --theme-popup-border: #d8d3c8;
  --theme-hover: #ece7da;

  --quote-bg: #f3eee2;
  --quote-border: #c8c3b6;

  --warning-border: #c0a060;

  --table-border-color: #d8d3c8;
  --table-header-bg: #f1ede4;
  --table-alternate-bg: #f5f1e8;

  --searchbar-border-color: #c8c3b6;
  --searchbar-bg: #fafaf6;
  --searchbar-fg: #2a2826;
  --searchbar-shadow-color: rgba(0,0,0,.04);
  --searchresults-header-fg: #5a5752;
  --searchresults-border-color: #d8d3c8;
  --searchresults-li-bg: #f3eee2;
  --search-mark-bg: #f0d670;

  --color-scheme: light;
}

/* Article body reserves (TOC width + gap) on the right so the floating
   TOC has space to live without overlapping running text. The TOC
   itself uses `position: fixed` and tracks the right edge of <main>
   via the calc()s further down, so it stays put when the user scrolls.
   max-width uses min() so the body grows with the viewport up to
   --inkwell-column-max, and stays inside viewport edges on narrow
   screens without a media query. */
.content main {
  max-width: min(var(--inkwell-column-max), calc(100vw - 4rem));
  margin: 0 auto;
  padding: 1rem 1.75rem 4rem;
}
.content main > #main-body {
  margin-right: calc(var(--inkwell-toc-width) + var(--inkwell-toc-gap));
  min-width: 0;
}

/* Body links: subtle underline rather than bold color. */
.content a:link,
.content a:visited { color: var(--links); text-decoration-color: #b3ad9f; text-underline-offset: 2px; }
.content a:hover { text-decoration-thickness: 2px; }

/* Inline code: paper-toned panel, no border. */
.content code:not(pre code) {
  background: #f0ebde;
  padding: .08em .35em;
  border-radius: .2em;
  color: var(--inline-code-color);
}

/* Block code: a touch off-bg, no harsh outline. */
pre, pre code {
  background: #f4efe2;
  border-radius: 4px;
}
pre { padding: .9em 1em; line-height: 1.5; }

/* Tables: airy and printable. */
table { border-collapse: collapse; margin: 1em 0; }
table th, table td { padding: .4em .8em; border-bottom: 1px solid var(--table-border-color); }
table th { font-family: var(--inkwell-sans); text-align: left; }

/* Blockquotes: scholarly italic. */
.content blockquote {
  border-left: 3px solid var(--quote-border);
  padding: .2em 0 .2em 1em;
  margin: 1em 0;
  color: #5a5752;
  font-style: italic;
  background: transparent;
}

/* ---- per-page right-rail TOC (built in theme/inkwell.js) ---------------- */

#page-toc {
  position: fixed;
  /* Below mdBook's sticky menu bar (var --menu-bar-height = 50px). */
  top: calc(var(--menu-bar-height, 50px) + 1.5rem);
  width: var(--inkwell-toc-width);
  max-height: calc(100vh - var(--menu-bar-height, 50px) - 3rem);
  overflow-y: auto;
  font-family: var(--inkwell-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #6a6660;
  /* Right edge of TOC tracks the right edge of <main>. Same min() the
     column itself uses, so the TOC stays aligned with main's right
     padding as the viewport grows or shrinks. */
  right: max(1.5rem, calc((100vw - min(var(--inkwell-column-max), calc(100vw - 4rem))) / 2 + 1.75rem));
}
/* When mdBook's sidebar is visible, .content is shifted right by the
   sidebar width; recalibrate the TOC's right offset accordingly so it
   keeps aligning with main's right edge. */
html.sidebar-visible #page-toc {
  right: max(1.5rem, calc((100vw - var(--sidebar-width, 0px) - min(var(--inkwell-column-max), calc(100vw - var(--sidebar-width, 0px) - 4rem))) / 2 + 1.75rem));
}

#page-toc h4 {
  margin: 0 0 .6em;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a857c;
  font-weight: 600;
}

#page-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid #d8d3c8;
}

#page-toc li { margin: 0; padding: 0; }

#page-toc a {
  display: block;
  padding: 4px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: #6a6660;
  text-decoration: none;
  /* Long headings wrap onto a second line instead of being truncated. */
  white-space: normal;
  word-break: break-word;
}

#page-toc a:hover { color: var(--fg); }

#page-toc a.active {
  color: var(--fg);
  font-weight: 600;
  border-left-color: var(--fg);
}

#page-toc li.toc-h3 a { padding-left: 24px; font-size: 12px; }

/* Below this width the article body shrinks past readability when
   sharing space with the TOC; drop the reserved right-margin and hide
   the TOC entirely. */
@media (max-width: 1024px) {
  .content main > #main-body { margin-right: 0; }
  #page-toc { display: none; }
}

/* ---- landing screenshot ------------------------------------------------- */

.content main img {
  max-width: 100%;
  border: 1px solid var(--table-border-color);
  border-radius: 4px;
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
  margin: 1em 0;
}

/* ---- hide the theme picker (light-only) --------------------------------- */

#theme-toggle,
.theme-popup {
  display: none !important;
}