/* The docs share the site's look: a warm grey studio ground, black type, thin rules, one
   typeface (Inter Tight) with JetBrains Mono for code. The fonts are the site's own files
   in ../fonts/, since this sheet is written into site/docs/ beside the pages.

   Light is the default; dark is used when the device asks for it or the reader picks it
   from the switch in the top bar. The inline snippet in each page's <head> writes
   `data-theme` on <html> before the first paint. The dark palette is written twice
   because CSS has no way to say "the device asked, OR the reader picked" in one rule. */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/inter-tight.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
}
:root {
  --radius: 8px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --top: 56px;
}
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #ecebe8;
  --sweep-1: #f3f2ef; --sweep-2: #e9e8e4; --sweep-3: #dedcd7;
  --bar: rgba(239, 238, 235, .82);
  --surface: #e4e2de;
  --surface-2: #dad8d3;
  --line: #d6d4cf;
  --ink: #111111;
  --ink-2: #3a3a3a;
  --muted: #6b6964;
  --faint: #8a8781;
  --accent: #111111;
  --accent-ink: #ffffff;
  --button-hover: #333333;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211;
    --sweep-1: #1c1c1a; --sweep-2: #141413; --sweep-3: #0e0e0d;
    --bar: rgba(22, 22, 21, .82);
    --surface: #1d1d1b;
    --surface-2: #272725;
    --line: #2c2c29;
    --ink: #ededea;
    --ink-2: #c9c8c3;
    --muted: #9b9992;
    --faint: #7d7b75;
    --accent: #ededea;
    --accent-ink: #121211;
    --button-hover: #ffffff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211;
  --sweep-1: #1c1c1a; --sweep-2: #141413; --sweep-3: #0e0e0d;
  --bar: rgba(22, 22, 21, .82);
  --surface: #1d1d1b;
  --surface-2: #272725;
  --line: #2c2c29;
  --ink: #ededea;
  --ink-2: #c9c8c3;
  --muted: #9b9992;
  --faint: #7d7b75;
  --accent: #ededea;
  --accent-ink: #121211;
  --button-hover: #ffffff;
}
* { box-sizing: border-box; }
/* `display` on a class outranks the browser's own [hidden] rule, so say it here. */
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--top) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, var(--sweep-1) 0%, var(--sweep-2) 55%, var(--sweep-3) 100%) fixed var(--bg);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; }
code { font-family: var(--mono); font-size: .875em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .6rem 1rem; z-index: 10; }

/* Top bar: the name, the two places, and the controls. Opaque, with one rule under it,
   because the article scrolls beneath it. */
.top {
  position: sticky; top: 0; z-index: 5; height: var(--top);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 clamp(16px, 3vw, 32px);
  background: var(--bar); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 17px; letter-spacing: -.02em; text-decoration: none; }
.brand svg { display: block; flex: none; }
.links { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.links a { color: var(--ink-2); text-decoration: none; transition: color .15s ease; }
.links a:hover, .links a[aria-current="page"] { color: var(--ink); }
.links a.key { background: var(--accent); color: var(--accent-ink); padding: 7px 15px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.links a.key:hover { background: var(--button-hover); color: var(--accent-ink); }
/* Two icon buttons in the top bar: the sidebar toggle, which only exists once the page
   is narrow enough to hide the sidebar, and the light/dark switch, which is always there.
   Both are the same square so the row reads as one set of controls. */
.icon-button {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--muted); cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
.icon-button:hover { color: var(--ink); background: var(--surface); }
.icon-button svg { display: block; width: 15px; height: 15px; }
.menu { display: none; }
/* The bars become a cross while the sidebar is open, so the button says how to close it. */
.menu .bars { display: block; }
.menu .cross { display: none; }
.menu[aria-expanded="true"] .bars { display: none; }
.menu[aria-expanded="true"] .cross { display: block; }
:root[data-theme="dark"] .theme .moon, :root[data-theme="light"] .theme .sun { display: none; }

/* The sidebar and the on-this-page column scroll inside the page. Their bars are drawn
   from the palette, like everything else here, rather than left to the browser's default
   chrome; `color-scheme` above turns the window's own bar over with the theme. */
* { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: var(--faint); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Three columns: sidebar, article, on-this-page. The sidebar sits against a hairline that
   runs the height of the window, so the navigation reads as its own pane rather than a
   list floating beside the article. */
.shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr) 13rem; gap: 0 clamp(2rem, 4vw, 4rem); max-width: 1380px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
/* `dvh` is the viewport the reader can actually see, which on a phone shrinks and grows
   as the browser's own bars come and go; `vh` is the tallest it ever gets, so a column
   sized in `vh` runs off the bottom of the screen. The `vh` line stays first for a
   browser that has not got `dvh`. `overscroll-behavior` keeps a flick that reaches the
   end of this column from carrying on into the page behind it. */
.side, .toc {
  position: sticky; top: var(--top); overflow-y: auto; overscroll-behavior: contain;
  max-height: calc(100vh - var(--top)); max-height: calc(100dvh - var(--top));
  font-size: .875rem; line-height: 1.4;
}
.side { padding: 1.75rem .75rem 3rem 0; border-right: 1px solid var(--line); scrollbar-gutter: stable; }
.toc { padding: 2.4rem 0 3rem; }

/* A section: a quiet label above its pages, which hang off a thin rule. The current page
   draws that rule in ink beside itself, which is the one strong mark in the column. */
.group + .group { margin-top: 1.4rem; }
.group summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  list-style: none; cursor: pointer; user-select: none;
  padding: .3rem .25rem .3rem 0; margin-bottom: .3rem;
  color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.group summary::-webkit-details-marker { display: none; }
.group summary .chevron { color: var(--faint); transform: rotate(90deg); transition: transform .18s ease, color .15s ease; flex: none; }
.group summary:hover .chevron { color: var(--ink); }
.group:not([open]) summary .chevron { transform: rotate(0deg); }
.group:not(.here) summary { color: var(--ink-2); }
.side ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.side li { margin: 0; }
.side a {
  position: relative; display: flex; align-items: baseline; gap: .35rem;
  margin-left: -1px; padding: .34rem .5rem .34rem .9rem; border-left: 1px solid transparent;
  color: var(--muted); text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.side a:hover { color: var(--ink); border-left-color: var(--faint); }
.side a[aria-current="page"] { color: var(--ink); font-weight: 500; border-left: 2px solid var(--ink); padding-left: calc(.9rem - 1px); }
.side a .out { flex: none; color: var(--faint); transform: translateY(1px); }

.toc-title { margin-bottom: .6rem; color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.toc a {
  display: block; padding: .3rem 0 .3rem .85rem; border-left: 1px solid var(--line);
  color: var(--muted); text-decoration: none; text-wrap: pretty;
  transition: color .15s ease, border-color .15s ease;
}
.toc a:hover { color: var(--ink); }
.toc a[data-active] { color: var(--ink); border-left-color: var(--ink); }

main { min-width: 0; padding: 2.25rem 0 4rem; }
.crumb { color: var(--muted); font-size: .875rem; margin: 0 0 .6rem; }
article { max-width: 46rem; }
article h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; margin: 0 0 1.25rem; text-wrap: balance; }
article h2 { font-size: 1.75rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; margin: 3rem 0 .8rem; }
article h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; margin: 2.2rem 0 .5rem; }
article h4 { font-size: 1rem; font-weight: 600; margin: 1.6rem 0 .4rem; color: var(--muted); }
.anchor { margin-left: .4rem; color: var(--faint); text-decoration: none; opacity: 0; font-weight: 400; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }
article p, article ul, article ol { margin: 0 0 1.1rem; }
article li { margin: .3rem 0; }
article li > ul, article li > ol { margin: .3rem 0 .3rem; }
article li::marker { color: var(--faint); }
article a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: .2em;
  transition: text-decoration-color .15s ease;
}
article a:hover { text-decoration-color: var(--ink); }
article code { background: var(--surface-2); border-radius: 4px; padding: .1em .35em; }
article pre { background: color-mix(in srgb, var(--surface) 85%, transparent); border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 0 0 1.4rem; font-size: .8125rem; line-height: 1.65; }
article pre code { background: none; padding: 0; font-size: inherit; }
/* Long identifiers, paths and URLs in running text break rather than widen the page on a phone. */
article :where(p, li, dd) { overflow-wrap: anywhere; }
article :where(td, th) { overflow-wrap: break-word; }
article blockquote { margin: 0 0 1.1rem; padding: .1rem 1rem; border-left: 2px solid var(--surface-2); color: var(--muted); }
article hr { border: none; height: 1px; background: var(--line); margin: 2.5rem 0; }
article img { max-width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }
.table { overflow-x: auto; margin: 0 0 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: .55rem .75rem; border-bottom: 1px solid var(--line); }
th { font-weight: 500; color: var(--muted); font-size: .8125rem; }
.note { font-size: .8125rem; color: var(--muted); margin: 0 0 .3rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 3.5rem 0 0; font-size: .9375rem; font-weight: 500; }
.pager a { display: block; padding: .9rem 1.1rem; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.pager a:hover { background: var(--surface-2); }
.pager span:last-child { text-align: right; }
main footer { margin-top: 2.5rem; font-size: .8125rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
main footer a { color: var(--muted); }

/* Cards on the index, made from its lists of links: tiles a tone off the ground. */
article .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0 0 1.6rem; }
article .cards li { margin: 0; border-radius: 0; padding: 1rem 0; background: none; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.5; }
article .cards a { text-decoration: none; font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; display: block; margin-bottom: .25rem; }
article .cards a:hover::after { content: " \2192"; }
article .cards span { color: var(--muted); }

@media (max-width: 1100px) {
  .shell { grid-template-columns: 16rem minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu { display: inline-grid; }
  main { padding-top: 1.5rem; }
  .links { gap: .9rem; }
  /* The menu is the whole screen below the bar, and it scrolls on its own: the guide
     list is longer than a phone. It keeps that scrolling to itself, so a flick that runs
     off the end of the list does not carry on into the article underneath and leave the
     reader somewhere they never scrolled to. The page itself is never locked — locking it
     unsticks the bar and loses the line they were on — and it is covered anyway. */
  .side {
    display: none; position: fixed; top: var(--top); left: 0; right: 0; bottom: 0;
    max-height: none; background: var(--bg); z-index: 4; border-right: 0;
    padding: 1.25rem clamp(1rem, 4vw, 2rem) calc(2.5rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    font-size: .9375rem;
  }
  .side-inner { max-width: 34rem; }
  /* Fingers, not a pointer: each row is a comfortable target. */
  .group summary { min-height: 42px; font-size: .75rem; }
  .side a { min-height: 42px; align-items: center; padding-top: .45rem; padding-bottom: .45rem; }
  .group + .group { margin-top: 1rem; }
  .side.open { display: block; }
}

@media (max-width: 560px) {
  .links .opt { display: none; }
  .links a.key { padding: 6px 12px; font-size: 13.5px; }
  .links { gap: 10px; }
}
@media (max-width: 440px) {
  .brand .name { display: none; }
}