/* Botleague, one design system.
 *
 * Before this file the site had seven content widths (640, 680, 760, 860, 900,
 * 960, 1200), two type scales that disagreed about what h2 means, five corner
 * radii and three button styles. On one page the header started at x=24, the
 * article at x=839 and the footer at x=669: nothing on the page shared a left
 * edge with anything else, and every link you followed moved the column.
 *
 * Everything below is the whole site's: the grid, the type scale, the surfaces,
 * the buttons, the forms, the tables. home.css and the app.js stylesheet load
 * after this one and only carry what is theirs alone.
 *
 * Load order matters. index.html links this before home.css; app.js links it
 * before its own <style>; the shell adds it as a fallback for any page that
 * gets neither.
 */

:root {
  /* ---- colour, unchanged: these are already the site's ---- */
  --bg: #06070c;
  --bg2: #0a0c13;
  --panel: #0e111a;
  --panel2: #0b0e16;
  --line: #1c2030;
  --line2: #2a3044;
  --text: #e4e7f0;
  --ink: #e4e7f0;          /* home.css's name for --text */
  --muted: #878ea3;
  --dim: #878ea3;          /* home.css's name for --muted */
  --blue: #6fb2ff;
  --red: #ff6f7d;
  --gold: #d3aa64;
  --goldsoft: #f0d9a8;
  --green: #4ec99b;
  --violet: #a78bfa;

  /* ---- the grid. One measure, one gutter, for the header, the page and the
         footer, so they share a left edge on every page. ---- */
  --maxw: 1180px;
  --gutter: clamp(18px, 3.4vw, 34px);
  --measure: 72ch;         /* longest a line of prose is allowed to run */

  /* ---- rhythm ---- */
  --s1: 8px;
  --s2: 12px;
  --s3: 18px;
  --s4: 28px;
  --s5: 44px;
  --s6: 72px;

  /* ---- surfaces ---- */
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  --shadow: 0 10px 34px rgba(0, 0, 0, .38);

  /* ---- type ---- */
  --f-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --f-serif: ui-serif, Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, Menlo, Consolas, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  overflow-x: hidden;      /* on html only: body must not become the scroller,
                              or the sticky header stops sticking */
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The page is a column: header, content, footer pinned to the bottom. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.62 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
body > main,
body > article,
body > section { flex: 0 0 auto; }
body > main,
body > article { flex: 1 0 auto; }

img, canvas, svg, video { max-width: 100%; }

/* ---------------------------------------------------------------- the grid */
/* `body > article` beats the inline stylesheet main.ts writes for the markdown
   pages, which set their own 860px measure. */
body > main,
body > article {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--s4) var(--gutter) var(--s6);
}
/* A page of prose is two columns: the text at a readable measure, starting at
   the same left edge as the logo, and a rail beside it for the contents. The
   rail is what stops a documentation page from being a narrow ribbon with half
   the window empty next to it. */
body > article {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  column-gap: 56px;
  align-content: start;
}
body > article > * { grid-column: 1; min-width: 0; }
body > article > .bl-toc { grid-column: 2; grid-row: 1 / span 999; align-self: start; position: sticky; top: 92px; }
@media (max-width: 1000px) {
  body > article { display: block; }
  body > article > .bl-toc { display: none; }
}

/* Prose gets a measure inside the column rather than a narrower column, so a
   page of text still starts at the same left edge as the logo above it. */
body > main > p,
body > article > p,
body > article > ul,
body > article > ol,
body > article > blockquote,
main > .lead,
p.lead { max-width: var(--measure); }

/* --------------------------------------------------------------- type ---- */
h1, h2, h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--text);
}
h1 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.06;
  margin: 0 0 var(--s2);
}
h2 {
  font-size: clamp(21px, 1.8vw, 28px);
  line-height: 1.18;
  margin: var(--s5) 0 var(--s2);
}
h3 {
  font-size: 19px;
  line-height: 1.25;
  margin: var(--s3) 0 var(--s1);
}
h1 + p, h2 + p, h3 + p { margin-top: 0; }

/* The gold monospace label. It is the site's small heading: on a kicker, on a
   heading inside a panel, on a table head, on a form label. */
/* `body > article h2` and `body > article h3` outrank the inline stylesheet
   main.ts writes for the markdown pages, which made their section labels grey
   sans-serif while every other page's were gold monospace. */
.kicker,
.panel > h2:first-child, .panel h2,
.card > h2, .goal .t, label.f, th,
body > article h2 {
  font: 600 10px/1.35 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--f-mono);
}
.kicker { margin: 0 0 var(--s2); }
.panel h2 { margin: 0 0 var(--s2); }
label.f { display: block; margin-top: var(--s2); color: var(--muted); }

/* The markdown pages' own stylesheet sets `article h1 {font-size:28px}`, which
   outranks a bare h1 and left the docs two sizes smaller than every other page
   title. Three type selectors beats its two. */
body > article > h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.06; margin: 0 0 var(--s2); }
body > article > p:first-of-type { font-size: 17px; color: #b9c0d0; }
body > article h2 { margin: var(--s5) 0 var(--s2); font-size: 10px; }
body > article h3 { font-family: var(--f-serif); font-size: 18px; color: var(--text); text-transform: none; letter-spacing: -.01em; }
body > article li { max-width: var(--measure); margin: 5px 0; }
body > article blockquote { border-left: 2px solid var(--gold); margin: var(--s2) 0; padding: 6px 16px; background: rgba(211,170,100,.05); border-radius: 0 var(--r-md) var(--r-md) 0; }

p { margin: 0 0 var(--s2); }
.lead { font-size: 17px; color: #b9c0d0; }
.muted, .dim { color: var(--muted); }
.gold { color: var(--gold); }
.mono { font-family: var(--f-mono); }
small { font-size: 12.5px; }

a { color: var(--goldsoft); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- surfaces ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s3);
}
/* A short page (a form, a note) keeps its content on the site column but does
   not stretch a 600px form across 1180px of panel. */
.slim { max-width: 640px; }
.mid { max-width: 860px; }

.card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s3);
}

/* ------------------------------------------------------------ buttons ---- */
.btn, button.btn, .cta, .ghost, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #151a27;
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 9px 15px;
  font: 600 14px/1.15 var(--f-sans);
  cursor: pointer;
  text-decoration: none;
  transition: background .14s, border-color .14s, filter .14s, transform .06s;
}
.btn:hover, .cta:hover, .ghost:hover, a.btn:hover {
  background: #1c2333; border-color: #3a4258; text-decoration: none; color: var(--text);
}
.btn:active, .cta:active { transform: translateY(1px); }
.btn.gold, .cta {
  background: linear-gradient(160deg, var(--goldsoft), #c39a4e);
  color: #1a1305;
  border-color: transparent;
}
.btn.gold:hover, .cta:hover { filter: brightness(1.07); background: linear-gradient(160deg, var(--goldsoft), #c39a4e); color: #1a1305; }
.btn.small, .cta.small, .ghost.small { padding: 7px 11px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: default; }

/* -------------------------------------------------------------- forms ---- */
input.txt, textarea.txt, select, .field select, .field input {
  background: #0a0d15;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  font: 400 14px/1.4 var(--f-sans);
}
input.txt:focus, textarea.txt:focus, select:focus {
  outline: none; border-color: var(--line2); box-shadow: 0 0 0 3px rgba(211, 170, 100, .13);
}
textarea.txt { width: 100%; min-height: 74px; }

/* ------------------------------------------------------------- tables ---- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px; }
td { padding: 11px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #11151f; }

pre {
  background: #05060b; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s2); overflow: auto; font: 13px/1.5 var(--f-mono);
}
code { background: #05060b; padding: 1px 5px; border-radius: 4px; font: 13px var(--f-mono); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }

/* ---------------------------------------------------------------- contents */
.bl-toc { padding-left: 18px; border-left: 1px solid var(--line); }
.bl-toc h2 {
  margin: 0 0 10px;
  font: 600 10px/1.35 var(--f-mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.bl-toc a {
  display: block; padding: 5px 0; font-size: 13px; line-height: 1.35;
  color: var(--muted); text-decoration: none;
}
.bl-toc a:hover { color: var(--text); text-decoration: none; }
.bl-toc a[aria-current="true"] { color: var(--goldsoft); }

/* --------------------------------------------------------------- phone --- */
@media (max-width: 760px) {
  body > main, body > article { padding: var(--s3) var(--gutter) var(--s5); }
  h2 { margin-top: var(--s4); }
  .panel, .card { padding: var(--s2); }
  pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
  p, li { overflow-wrap: break-word; }
  td, th { padding: 9px 7px; }
}