/* @import must precede every rule or the browser ignores it. Inter and
 * JetBrains Mono per docs/brandguide.md; Pages allows the fonts host. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

/* Presentation layer for the book.
 *
 * Everything here is expressed through mdBook's own theme variables rather
 * than fixed colours, because the reader picks the theme and there are five
 * of them. A hardcoded background is invisible in the theme you developed in
 * and unreadable in the other four.
 *
 * Nothing here changes content. If a rule below is doing semantic work —
 * hiding something, reordering something — it is in the wrong file.
 *
 * Lengths are in px, not rem, and that is deliberate. mdBook sets
 * `html { font-size: 62.5% }`, so 1rem is 10px here rather than 16px. Every
 * spacing value in the first version of this file was written in the ordinary
 * assumption and came out at about 60% of its intended size — cramped tables,
 * a 7.8px sidebar label, and a content column narrower than the default it
 * was widening. */

/* ---------------------------------------------------------------- content */

/* The stock 750px measure predates every table on this site. These pages
 * carry wide reference tables and 1440px screenshots, both of which spend the
 * whole budget on the first two columns and wrap the rest into noise.
 *
 * Set the variable rather than `.content main`, so everything mdBook derives
 * from it stays consistent.
 *
 * Not `rem`: mdBook sets `html { font-size: 62.5% }`, the old trick that makes
 * 1rem = 10px. A `62rem` written here in the ordinary 16px assumption came out
 * as 620px — *narrower* than the 750px default it was meant to widen, which is
 * why the first attempt at this made the column smaller and left more empty
 * space, not less. */
:root {
  --content-max-width: 1150px;
}

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

.content h2 {
  margin-top: 42px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--table-border-color);
}

.content h3 {
  margin-top: 32px;
}

/* ----------------------------------------------------------------- tables */

/* Most tables in these docs are two-column `| | |` pairs — a term and what it
 * means. Stock mdBook renders them with an empty header row taking up space
 * and saying nothing. */
.content table {
  width: 100%;
  display: table;
  margin: 22px 0;
  border-collapse: collapse;
}

.content table thead th:empty {
  padding: 0;
  border: none;
}

.content table thead tr:has(th:empty:only-child),
.content table thead tr:not(:has(th:not(:empty))) {
  display: none;
}

.content table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.86em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}

.content table td,
.content table th {
  padding: 9px 14px;
  vertical-align: top;
  border: none;
  border-bottom: 1px solid var(--table-border-color);
}

.content table tbody tr {
  background: none;
}

/* The first column of a two-column table is the term. Give it the weight the
 * markdown cannot express without bolding every single cell by hand. */
.content table tbody td:first-child {
  white-space: normal;
  font-weight: 500;
}

/* Digits that line up in columns should line up. */
.content table td code {
  font-variant-numeric: tabular-nums;
}

/* Wide tables scroll inside themselves. The page body never scrolls
 * sideways — a horizontally scrolling article is a broken article. */
.content .table-wrapper,
.content table {
  overflow-x: auto;
}

/* -------------------------------------------------------------- callouts */

/* Blockquotes carry the warnings on these pages. Stock rendering makes them
 * look like an aside, which is the opposite of the intent. */
.content blockquote {
  border-left: 3px solid var(--links);
  border-top: none;
  border-bottom: none;
  border-right: none;
  border-radius: 0 4px 4px 0;
  padding: 14px 18px;
  margin: 22px 0;
}

/* --------------------------------------------------------------- figures */

/* Screenshots are UI, and a UI needs an edge to read as one. Without a border
 * a dark screenshot on a dark theme bleeds into the page and the reader
 * cannot tell where the application stops. */
.content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--table-border-color);
  margin: 19px 0;
}

/* The benchmark charts are SVGs drawn with their own transparent ground and
 * no interior of their own to frame. */
.content img[src$=".svg"] {
  border: none;
  border-radius: 0;
}

/* ---------------------------------------------------------------- mermaid */

.content pre.mermaid,
.content .mermaid {
  background: none;
  text-align: center;
  margin: 29px 0;
  padding: 0;
  overflow-x: auto;
}

.content .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------- code */

.content code {
  font-variant-ligatures: none;
}

/* Long lines wrap rather than scroll out of sight.
 *
 * mdBook's default is a horizontal scrollbar on the block, and on a trackpad
 * with overlay scrollbars there is nothing on screen to say the line
 * continues — a `docker run` with six `-e` flags simply ended mid-URL, and it
 * read as the whole command. Wrapping is visual only: what you copy is still
 * the original text, newlines included.
 *
 * The hanging indent is what keeps it readable. Without it a wrapped
 * continuation starts hard against the left edge and looks like the next
 * command rather than the rest of this one. */
.content pre > code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-left: 2.2ch;
  text-indent: -2.2ch;
}

/* Playground/editable blocks keep mdBook's own behaviour — those are edited,
 * not read, and a wrapped editor is a worse editor. */
.content pre > code.editable {
  white-space: pre;
  text-indent: 0;
  padding-left: 0;
}

/* An inline `code` span inside a heading should not shout louder than the
 * heading it sits in. */
.content h1 code,
.content h2 code,
.content h3 code,
.content h4 code {
  font-size: 0.92em;
}

/* ---------------------------------------------------------------- sidebar */

/* The logo heads the navigation. A pseudo-element rather than an index.hbs
 * override: the template drifts with every mdBook release, one CSS rule
 * does not. The url is relative to this stylesheet, which mdBook copies to
 * theme/ in the site output — one level above images/. */
/* The menu bar's text title says what the sidebar logo already shows.
 * Hidden, not removed from book.toml: the title still names the browser
 * tab and the search index. */
.menu-title {
  visibility: hidden;
}

.sidebar-scrollbox::before {
  content: "";
  display: block;
  /* The mark is 2.8:1; at the sidebar's ~272px of usable width this height
   * lets it span the full column. */
  height: 96px;
  margin: 12px 14px 16px;
  background: url("../images/logo.webp") no-repeat center / contain;
}

/* The section headers in SUMMARY.md ("Using it", "Running it", "Reference")
 * are the book's structure and were rendering at the same weight as the
 * pages under them. */
.chapter li.part-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 22px;
}

/* ------------------------------------------------------------------ brand */

/* The FastLLM identity from docs/brandguide.md, expressed through mdBook's
 * own theme variables so every derived surface follows. Ayu is the book's
 * canonical dark theme (default and preferred-dark in book.toml), so it
 * carries the full navy palette; the light theme gets the guide's light
 * mode. The other three themes stay stock — the reader chose them on
 * purpose. */

:root {
  --fast-violet: #8b20ff;
  --fast-blue: #1769ff;
  --fast-cyan: #00d9f5;
  --gradient-fastllm: linear-gradient(
    90deg,
    #8b20ff 0%,
    #6726ff 25%,
    #1769ff 60%,
    #00d9f5 100%
  );
}

html {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

code,
kbd,
pre {
  font-family: "JetBrains Mono", "Source Code Pro", Consolas, monospace;
}

.ayu {
  --bg: #030817;
  --fg: #f8faff;
  /* Matches the black baked into the logo image, so the mark sits on the
   * sidebar without a visible rectangle around it. */
  --sidebar-bg: #000209;
  --sidebar-fg: #aab7d1;
  --sidebar-active: #00d9f5;
  --sidebar-non-existant: #687897;
  --scrollbar: #253a6b;
  --icons: #687897;
  --icons-hover: #f8faff;
  --links: #23b7f5;
  --inline-code-color: #00d9f5;
  --theme-popup-bg: #0a1530;
  --theme-popup-border: #253a6b;
  --theme-hover: #0d1b38;
  --quote-bg: #0a1530;
  --quote-border: #17254a;
  --table-border-color: #17254a;
  --table-header-bg: #0d1b38;
  --table-alternate-bg: #071126;
  --searchbar-border-color: #253a6b;
  --searchbar-bg: #071126;
  --searchbar-fg: #f8faff;
  --searchresults-header-fg: #aab7d1;
  --searchresults-border-color: #17254a;
  --searchresults-li-bg: #0a1530;
  --search-mark-bg: #1769ff;
  --color-scheme: dark;
}

.light {
  --bg: #f6f8fc;
  --fg: #071126;
  --sidebar-bg: #ffffff;
  --sidebar-fg: #445377;
  --sidebar-active: #1769ff;
  --scrollbar: #dce4f2;
  --links: #1769ff;
  --inline-code-color: #6726ff;
  --theme-hover: #eef2fa;
  --quote-bg: #ffffff;
  --quote-border: #dce4f2;
  --table-border-color: #dce4f2;
  --table-header-bg: #eef2fa;
  --table-alternate-bg: #ffffff;
  --searchbar-border-color: #dce4f2;
  --searchbar-bg: #ffffff;
}

/* Selected chapter: the guide's active-navigation treatment — a quiet blue
 * wash, not a colour swap. */
.chapter li a.active {
  background: rgba(23, 105, 255, 0.12);
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
}

/* Fenced code sits on a card surface with the guide's subtle border. */
.ayu pre > .hljs {
  background: #0a1530;
  border: 1px solid #17254a;
  border-radius: 8px;
}

/* h1s take the brand gradient — "occasional headline text" is exactly a
 * page title, and nowhere else. The rule lives on the anchor mdBook wraps
 * around every heading's text, because that anchor paints its own --fg
 * on top of anything the h1 itself does. */
.ayu .content h1 a.header,
.light .content h1 a.header {
  background: var(--gradient-fastllm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------ landing (design) */

/* The Introduction page's designed sections (from FastLLM Docs.dc.html).
 * Cards are deliberately dark in every theme — the brand is dark-first and
 * these are branded panels, like the banner itself. Hover and responsive
 * behaviour lives here because the page's markup carries only inline
 * layout. */

.f-card,
.f-start,
.f-frow {
  transition: 150ms ease;
}

.f-card:hover,
.f-start:hover {
  border-color: #253a6b !important;
}

a.f-start:hover {
  border-color: #1769ff !important;
}

a.f-start {
  text-decoration: none;
}

.f-frow:hover {
  background: #0a1530 !important;
}

@media (max-width: 1100px) {
  .f-metrics {
    grid-template-columns: 1fr 1fr !important;
  }
  .f-starts {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 720px) {
  .f-hero-title {
    font-size: 38px !important;
  }
  .f-pillars,
  .f-metrics,
  .f-starts {
    grid-template-columns: 1fr !important;
  }
  .f-flow {
    display: none !important;
  }
  .f-frow {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}