/* wtf Term: JetBrains Mono Nerd Font Mono (SIL OFL 1.1, fonts/OFL.txt), cut to what wtf draws
   and with its bus ends drawn in by site/tools/font.py */
@font-face { font-family: "wtf Term"; font-weight: 400; font-display: swap; src: url("fonts/wtf-term-400.woff2") format("woff2"); }
@font-face { font-family: "wtf Term"; font-weight: 700; font-display: swap; src: url("fonts/wtf-term-700.woff2") format("woff2"); }
/* Bricolage Grotesque and IBM Plex Sans (SIL OFL 1.1, fonts/OFL-*.txt), their Latin subsets as
   Google Fonts serves them, variable in weight; served from here, so the site makes no outside
   requests */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap; src: url("fonts/ibm-plex-sans.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 100 700; font-display: swap; src: url("fonts/ibm-plex-sans-italic.woff2") format("woff2"); }
/* Layout: a narrow reading column for prose; the terminal screens break out wider, as the
   evidence. Sections are steps of one session on one trace, labelled by simulation time. */
:root {
  --paper: #eef0f3;      /* cool, slightly blue: the light theme's panel grey */
  --ink: #14161b;
  --muted: #576070;
  --rule: #d3d7de;
  --amber: #9a6500;      /* wtf's accent, the cursor's colour, darkened for text on paper */
  --amber-soft: #f2d896;
  --x: #c8414c;          /* an X on the bus: used once, in the mark */
  --code-bg: #e2e5ea;
  --term-bg: #1b1d23;    /* screens stay a dark terminal in both themes */
  --term-fg: #abb2bf;
  --term-edge: #2c313c;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  /* the type scale: headline, headings, intro, body, small */
  --t1: clamp(40px, 6.4vw, 76px); --t2: clamp(26px, 3vw, 34px); --t3: 20px; --t4: 17px; --t5: 14px;
  /* the agent benchmark: wtf in amber, without it in blue (checked with the dataviz validator) */
  --bench-wtf: #a86e00; --bench-bare: #4a78c8;
  --mono: "wtf Term", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111317; --ink: #e5e7eb; --muted: #9aa2b0; --rule: #272b33;
    --amber: #e5c07b; --amber-soft: #5c4f2c; --x: #e06c75; --code-bg: #1d2027;
    --term-bg: #181a1f; --term-edge: #2c313c; --bench-wtf: #c08518; --bench-bare: #5a86d8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111317; --ink: #e5e7eb; --muted: #9aa2b0; --rule: #272b33;
  --amber: #e5c07b; --amber-soft: #5c4f2c; --x: #e06c75; --code-bg: #1d2027;
  --term-bg: #181a1f; --term-edge: #2c313c; --bench-wtf: #c08518; --bench-bare: #5a86d8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper); color: var(--ink);
  font: 400 var(--t4)/1.6 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 48px;
}
a { color: inherit; text-decoration-color: var(--amber); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px; z-index: 1; }
.skip:focus { top: 12px; }
code, kbd { font: 0.88em var(--mono); background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
kbd { border-bottom: 2px solid var(--rule); }

.wrap { max-width: 1120px; margin: 0 auto; }
.prose { max-width: 640px; }

/* the top bar */
nav.top { display: flex; align-items: center; gap: 28px; padding-block: 20px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.mark { font: 700 var(--t3)/1 var(--mono); letter-spacing: 0.08em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.12em; }
.mark .wt { color: var(--amber); }
.mark .bar { display: inline-block; width: 3px; height: 1.05em; background: var(--ink); margin-inline: 0.18em; }
.mark .f { color: var(--x); }
nav.top ul { display: flex; gap: 22px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: var(--t5); color: var(--muted); flex-wrap: wrap; }
nav.top a { text-decoration: none; }
nav.top a:hover { color: var(--ink); }

/* the hero */
header.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 64px 40px; }
h1 {
  font: 800 var(--t1)/0.98 var(--display);
  letter-spacing: -0.025em; margin: 0; text-wrap: balance; max-width: 15ch;
}
.lede { font-size: var(--t3); color: var(--muted); max-width: 40ch; margin: 0; text-wrap: pretty; }
.lede b { color: var(--ink); font-weight: 600; }

.install { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.cmd {
  display: flex; align-items: center; gap: 14px; min-width: 0; max-width: 100%;
  font: var(--t5)/1.4 var(--mono); background: var(--term-bg); color: var(--term-fg);
  padding: 12px 12px 12px 16px; border-radius: 8px;
}
.cmd .p { color: #7f848e; user-select: none; }
.cmd .t { overflow-x: auto; white-space: nowrap; min-width: 0; }
.cmd button {
  font: 600 var(--t5) var(--body); color: var(--term-bg); background: #e5c07b; border: 0;
  border-radius: 5px; padding: 6px 12px; cursor: pointer; flex: none;
}
.cmd button:hover { background: #f0d08f; }
.try { align-self: center; font-size: var(--t5); color: var(--muted); }

/* a terminal screen: the real output of `wtf --snapshot --ansi` */
figure.screen { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
figure.screen figcaption { order: 2; }
/* on a phone a screen is wider than the page and scrolls sideways: say so */
@media (max-width: 600px) {
  figure.screen::after { content: "Scroll sideways to see the whole screen \2192"; order: 1; font-size: var(--t5); color: var(--muted); margin-top: 6px; }
}
.term {
  background: var(--term-bg); color: var(--term-fg); border-radius: 10px;
  border: 1px solid var(--term-edge); overflow-x: auto; width: fit-content; max-width: 100%;
  box-shadow: 0 1px 0 var(--term-edge), 0 24px 48px -28px rgba(0,0,0,.55);
}
.tsvg {
  /* 0.6em cells at 14px type, smaller to fit its box, no smaller than 9px (then the box scrolls) */
  display: block; height: auto; padding: 12px 14px; box-sizing: content-box;
  width: calc(var(--cols) * 0.6 * 14px); max-width: calc(100% - 28px); min-width: calc(var(--cols) * 0.6 * 9px);
  font-family: var(--mono); font-variant-ligatures: none;
}
figcaption { font-size: var(--t5); color: var(--muted); margin-top: 10px; max-width: 80ch; }

/* the tour: steps of one session, each at its time */
section.step {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 48px;
  padding-block: 56px; border-top: 1px solid var(--rule); align-items: start;
}
.at { font: 700 var(--t5)/1 var(--mono); color: var(--amber); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.at::before { content: ""; width: 3px; height: 16px; background: var(--amber); }
h2 { font: 700 var(--t2)/1.1 var(--display); letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: balance; }
.step p { margin: 0 0 12px; text-wrap: pretty; }
.step .keys { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-size: var(--t5); }
.step .keys li { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: baseline; }
.step .keys kbd { justify-self: start; }

/* the agent's session: calls and answers, as the agent reads them */
.log { background: var(--term-bg); color: var(--term-fg); border-radius: 10px; border: 1px solid var(--term-edge); overflow-x: auto; }
.log pre { margin: 0; padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--t5)/1.5 var(--mono); }
.log .call { color: #e5c07b; }
.log .arg { color: #98c379; }
.log .ans { color: #abb2bf; }
.log .dim { color: #7f848e; }
.log .err { color: #e06c75; }
.log .say { color: #e6e8ec; font-family: var(--body); font-size: var(--t5); white-space: pre-wrap; display: block; max-width: 72ch; }


/* where the traces stay, before where next */
section.local { border-top: 1px solid var(--rule); padding-block: 56px 44px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 48px; }
section.local h2 { grid-row: span 2; }
section.local p { margin: 0 0 12px; max-width: 68ch; text-wrap: pretty; }
@media (max-width: 860px) { section.local { grid-template-columns: minmax(0, 1fr); } section.local h2 { grid-row: auto; } }

/* where next: the other pages, after the tour */
nav.next { border-top: 1px solid var(--rule); padding-block: 56px 0; }
nav.next ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
nav.next li { display: grid; gap: 6px; align-content: start; }
nav.next a { font: 600 var(--t4)/1.3 var(--body); }
nav.next span { font-size: var(--t5); color: var(--muted); text-wrap: pretty; }
@media (max-width: 860px) { nav.next ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { nav.next ul { grid-template-columns: minmax(0, 1fr); } }

footer { margin-top: 48px; font-size: var(--t5); color: var(--muted); display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 860px) {
  section.step { grid-template-columns: minmax(0, 1fr); padding-block: 40px; }
  header.hero { padding-block: 40px 28px; }
}
@media (max-width: 480px) {
  nav.top ul { margin-left: 0; gap: 16px; }
}

/* the dark boxes scroll with dark bars */
.term, .cmd .t, .log, .doc pre { scrollbar-color: #3a3f4b transparent; scrollbar-width: thin; }

/* the hero's screen spans the page, its right edge on the nav's and the rule's; the install
   note sits under the command, so the text keeps one edge */
.hero .term { width: auto; align-self: stretch; }
.hero .tsvg { width: calc(100% - 28px); max-width: none; }
.install { flex-direction: column; align-items: flex-start; }
.try { align-self: auto; }

/* the hero: the headline and the intro side by side, on the headline's last line; the install bar
   and the screen under them span the page, so every edge is the nav's */
@media (min-width: 861px) {
  header.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  /* the intro's last line on the headline's, baseline to baseline */
  header.hero h1, header.hero .lede { align-self: last baseline; }
  header.hero .install, header.hero figure.screen { grid-column: 1 / -1; }
}
.install .cmd { align-self: stretch; }
.cmd .t { flex: 1; }
.try { font-size: var(--t4); }
/* the screen as far from the install note as the install bar is from the headline, whose
   descender space adds 5px to the grid's gap, measured */
header.hero figure.screen { margin-top: 5px; }

/* a doc page: one reading column, the five sizes: title t2, sections t3, subsections t4 */
nav.top a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); }
/* the tour's grid: the title and contents at the left, kept in view, the page at the right */
.doc {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 48px;
  padding-block: 56px 24px; align-items: start;
}
.doc aside { position: sticky; top: 24px; }
.doc article > :first-child { margin-top: 0; }
.doc h1 { font: 700 var(--t2)/1.1 var(--display); letter-spacing: -0.015em; margin: 0 0 18px; text-wrap: balance; }
.doc h2 { font: 700 var(--t3)/1.25 var(--display); margin: 48px 0 12px; scroll-margin-top: 16px; }
.doc h3 { font: 600 var(--t4)/1.3 var(--body); margin: 28px 0 8px; scroll-margin-top: 16px; }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
/* prose at a reading measure; screens, tables and code take the column */
.doc article > p, .doc article > ul, .doc article > ol { max-width: 68ch; }
@media (max-width: 860px) {
  .doc { grid-template-columns: minmax(0, 1fr); padding-block: 40px 24px; }
  .doc aside { position: static; }
  .doc .toc ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
}
.doc .toc ul { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: var(--t5); }
.doc .toc a { color: var(--muted); text-decoration: none; }
.doc .toc a:hover { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--t5); margin: 0 0 8px; }
.doc table thead { color: var(--muted); }
.doc th { font-weight: 500; text-align: left; }
.doc th, .doc td { padding: 7px 16px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.doc td:first-child { white-space: nowrap; }
.doc pre { background: var(--term-bg); color: var(--term-fg); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font: var(--t5)/1.5 var(--mono); }
.doc pre code { background: none; padding: 0; font: inherit; color: inherit; }
/* drawings in wtf's glyphs join from line to line, as in a terminal */
.doc pre:has(> code[data-lang="screen"]) { line-height: 1.2; }
.doc .keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.doc .keys h3 { margin-top: 20px; }
@media (max-width: 640px) { .doc .keys { grid-template-columns: minmax(0, 1fr); } }
.doc figure.screen { margin: 20px 0 28px; }

/* a chart drawn in the page's own colours and type */
figure.chart { margin: 24px 0 28px; }
/* on a phone the chart keeps a readable size and scrolls sideways, as do wide tables */
figure.chart { overflow-x: auto; scrollbar-color: var(--rule) transparent; scrollbar-width: thin; }
figure.chart svg { display: block; min-width: 720px; }
@media (max-width: 600px) { .doc table { display: block; overflow-x: auto; scrollbar-color: var(--rule) transparent; scrollbar-width: thin; } }