/* The manual's theme over mdBook's: the landing page's palette, dark whatever the system prefers, quiet chrome.
   The palette is declared under the landing page's own names, the site build checks the values agree, and mdBook's
   names are mapped onto it, all on the root at the rank of mdBook's no-script rule, so whichever theme its script
   lands on, or none, reads the same, and its theme menu is hidden. Text has two tones: the ink, `--fg`, for
   headings, emphasis and the chrome, and `--text` a step below it for the running prose, so a long read never
   glares. */

html:root {
  --sidebar-target-width: 280px;
  --content-max-width: 800px;
  --menu-bar-height: 56px;
  --page-padding: 24px;
  --mono-font: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --code-font-size: 0.875em;

  /* The landing page's palette, under its names */
  --bg: #0f0f10;
  --fg: #ececec;
  --muted: #9c9ca3;
  --faint: #6c6c73;
  --line: #232326;
  --line-strong: #303035;
  --panel: #151517;
  --accent: #e5761d;
  --accent-ink: #ea8a40;
  --accent-soft: rgba(234, 138, 64, .12);
  --term-bg: #141416;
  --term-fg: #ebe8e3;
  --term-dim: #8f8c86;
  --term-in: #ffffff;
  --term-ok: #8fd48a;
  --term-mid: #f0c060;
  --term-no: #ff7b73;
  --tk-key: #f0a15c;
  --tk-table: #a3a6ff;
  --tk-string: #9ad18f;
  --tk-num: #f0c060;
  --tk-comment: #7d7d7d;
  --tk-punct: #7d7d7d;
  --tk-kw: #a3a6ff;

  /* The manual's own two: the running prose, and the sidebar's links */
  --text: #cccccc;
  --sidebar-fg: #bdbdbd;

  /* mdBook's names, onto the palette */
  --sidebar-bg: var(--panel);
  --sidebar-non-existant: var(--faint);
  --sidebar-active: var(--accent-ink);
  --sidebar-spacer: var(--line);
  --sidebar-header-border-color: var(--line);
  --scrollbar: var(--line-strong);
  --icons: var(--faint);
  --icons-hover: var(--fg);
  --links: var(--accent-ink);
  --inline-code-color: var(--text);
  --theme-hover: var(--line);
  --quote-bg: color-mix(in srgb, var(--accent) 5%, var(--panel));
  --quote-border: var(--accent);
  --warning-border: var(--accent);
  --table-border-color: var(--line);
  --table-header-bg: transparent;
  --table-alternate-bg: transparent;
  --searchbar-border-color: var(--line-strong);
  --searchbar-bg: var(--panel);
  --searchbar-fg: var(--fg);
  --searchbar-shadow-color: transparent;
  --searchresults-header-fg: var(--muted);
  --searchresults-border-color: var(--line);
  --searchresults-li-bg: var(--panel);
  --search-mark-bg: color-mix(in srgb, var(--accent) 25%, var(--bg));
  --footnote-highlight: var(--search-mark-bg);
  --color-scheme: dark;
  --copy-button-filter: invert(55%);
  --copy-button-filter-hover: invert(95%);
  --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* Type */

html {
  font-family: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
}

/* The page reads in the text tone. Headings keep the ink through mdBook's own rule; emphasis takes it back. */
.content main {
  padding: 12px 0 64px;
  color: var(--text);
}

.content strong {
  color: var(--fg);
}

.content p,
.content li {
  line-height: 1.65;
}

/* Lines break so that no last line is a lone word, and headings balance their lines */
.content :is(p, li, dd) {
  text-wrap: pretty;
}

.content :is(h1, h2, h3, h4) {
  text-wrap: balance;
}

.content li + li {
  margin-top: 0.3em;
}

.content h1 {
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0.5em 0 0.7em;
}

.content h2 {
  font-size: 2.15rem;
  font-weight: 560;
  letter-spacing: -0.012em;
  margin-block-start: 2.4em;
  margin-block-end: 0.6em;
}

.content h3 {
  font-size: 1.7rem;
  font-weight: 560;
  margin-block-start: 2em;
}

.content a,
.content a:visited {
  color: var(--links);
}

.content .header:link,
.content .header:visited {
  color: var(--fg);
}

/* Code */

/* Inline code wears the colour of its sentence: ink in a heading or a lead, text in the prose, the link's in a link */
.content :not(pre) > code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.38em;
  font-size: 0.86em;
  color: inherit;
}

.content pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  line-height: 1.85;
  overflow: auto;
}

.content pre > code {
  background: transparent;
  border: 0;
  padding: 0;
}

.hljs {
  background: transparent !important;
  color: var(--fg);
}

.content pre > .buttons {
  margin: 8px 8px 0 0;
}

.content pre > .buttons button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  padding: 4px;
}

/* Tables, quotes, keys */

.content table {
  width: 100%;
  margin: 1.2em 0;
  font-size: 0.95em;
}

.content table thead tr {
  border: 0;
  border-bottom: 1px solid var(--line);
}

.content table th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px 10px;
}

.content table td {
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

.content table tbody tr:last-child td {
  border-bottom: 0;
}

.content blockquote {
  margin: 1.4em 0;
  padding: 10px 18px;
  border: 0;
  border-left: 3px solid var(--quote-border);
  border-radius: 0 8px 8px 0;
  color: inherit;
}

.content kbd {
  border-radius: 5px;
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--panel);
}

/* The bar */

#mdbook-menu-bar {
  height: var(--menu-bar-height);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

#mdbook-menu-bar.bordered {
  border-bottom-color: var(--line);
}

.menu-title {
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.menu-title a {
  color: inherit;
  text-decoration: none;
}

.menu-title a::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -5px;
  background: url("/logo.png") center / contain no-repeat;
}

.icon-button {
  color: var(--icons);
}

#mdbook-searchbar {
  border: 1px solid var(--searchbar-border-color);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1.5rem;
}

#mdbook-searchbar:focus,
#mdbook-searchbar.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: var(--accent);
}

/* One theme, so no menu to choose it */
#mdbook-theme-toggle,
#mdbook-theme-list {
  display: none;
}

/* The sidebar */

.sidebar {
  font-size: 1.45rem;
  border-right: 1px solid var(--line);
}

.sidebar .sidebar-scrollbox {
  padding: 18px 12px 30px;
}

.chapter li.part-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 10px 6px;
}

/* The open page's own headings, listed under it */
.chapter li.header-item {
  font-size: 1.3rem;
  color: var(--muted);
  margin: 1px 0;
}

.chapter li.header-item a {
  padding: 4px 10px;
}

.chapter a.current-header {
  color: var(--sidebar-active);
}

.chapter li.chapter-item {
  margin-block-start: 2px;
}

.chapter li a {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--sidebar-fg);
}

.chapter li a:hover {
  background: var(--theme-hover);
  color: var(--fg);
  text-decoration: none;
}

.chapter li a.active {
  color: var(--sidebar-active);
  background: var(--accent-soft);
}

.sidebar .sidebar-resize-handle {
  background: transparent;
}

/* Previous and next */

.nav-chapters {
  color: var(--icons);
}

.nav-chapters:hover {
  background: var(--panel);
  color: var(--fg);
}

.nav-wrapper {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 20px;
}

.mobile-nav-chapters {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Code, in the site's palette */

.hljs { color: var(--fg); }
.hljs-comment, .hljs-quote { color: var(--tk-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type, .hljs-meta { color: var(--tk-kw); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--tk-string); }
.hljs-number, .hljs-literal { color: var(--tk-num); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--tk-key); }
.hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--tk-table); font-weight: 500; }
.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-punctuation { color: var(--fg); }

/* A transcript, or a command: the site's terminal, in both themes */

.content pre.term {
  background: var(--term-bg);
  border-color: var(--line);
  color: var(--term-fg);
}

.content pre.term code { color: var(--term-fg); }
pre.term .p, pre.term .arrow { color: var(--accent); }
pre.term .in, pre.term .name { color: var(--term-in); }
pre.term .name { font-weight: 500; }
pre.term .own, pre.term .c { color: var(--term-dim); }
pre.term .c { font-style: italic; }
pre.term .out { color: var(--term-fg); }
pre.term .add, pre.term .hi { color: var(--term-ok); }
pre.term .del, pre.term .no { color: var(--term-no); }
pre.term .mid { color: var(--term-mid); }
pre.term .buttons button { color: var(--term-dim); }
pre.term .buttons button:hover { color: var(--term-fg); }

/* The bar: the brand leads home, a way to the use cases */

.right-buttons a.use-cases {
  display: inline-block;
  margin: 0 14px 0 0;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sidebar-fg);
  text-decoration: none;
  vertical-align: 1px;
}

.right-buttons a.use-cases:hover { color: var(--links); }

/* Below tablet width the bar is full; the six sentences at the end of the page lead the way instead. */
@media (max-width: 720px) {
  .right-buttons a.use-cases { display: none; }
}

/* The six sentences, closing every page. The tracks may go narrower than a sentence, which then ends in an
   ellipsis instead of widening the card past the column. */

.at-work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 3.2rem;
  align-items: center;
  margin: 6rem 0 1rem;
  padding: 2.6rem 3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.at-work .label {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--links);
}

.at-work h2 {
  margin: 0 0 1rem;
  color: var(--fg);
  font-size: 2.5rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.at-work .words p {
  margin: 0 0 1.8rem;
  color: var(--muted);
  font-size: 1.55rem;
  line-height: 1.55;
}

.at-work .go {
  display: inline-block;
  padding: 1rem 1.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg) !important;
  font-weight: 500;
  font-size: 1.5rem;
  text-decoration: none !important;
  transition: border-color 0.15s;
}

.at-work .go:hover { border-color: var(--muted); }

.at-work .said {
  margin: 0;
  padding: 1.5rem 1.8rem;
  list-style: none;
  border-radius: 12px;
  background: var(--term-bg);
  border: 1px solid var(--line);
  font: 1.3rem/1.9 var(--mono-font);
}

.at-work .said a {
  display: block;
  color: var(--term-dim) !important;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.at-work .said a:hover { color: var(--term-in) !important; }
.at-work .said i { font-style: normal; color: var(--accent); }

@media (max-width: 720px) {
  .at-work { grid-template-columns: minmax(0, 1fr); padding: 2rem 2.2rem; }
}