:root {
  color-scheme: light dark;
  --text: #1d1d1f;
  --secondary: #6e6e73;
  --background: #ffffff;
  --code-background: #f2f2f7;
  --rule: #d2d2d7;
  --link: #0066cc;
  --sidebar: #f5f5f7;
  --selection: rgba(0, 0, 0, 0.08);
  --sidebar-width: 15em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f5f5f7;
    --secondary: #a1a1a6;
    --background: #1e1e1e;
    --code-background: #2c2c2e;
    --rule: #3a3a3c;
    --link: #4da3ff;
    --sidebar: #262628;
    --selection: rgba(255, 255, 255, 0.1);
  }
}

body {
  font: -apple-system-body;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--background);
  margin: 0;
}

main {
  max-width: 40em;
  padding: 24px 32px 40px;
  margin-left: var(--sidebar-width);
}

/* The contents pane. Tips draws its native sidebar only for Apple's own guides (a list built
   into macOS), and its sidebar button doesn't reach a book inside an app, so the book draws
   this one like it and keeps it open. */
nav.toc {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 16px 10px;
  background: var(--sidebar);
  border-right: 1px solid var(--rule);
  font-size: 0.92em;
}
nav.toc .book { margin: 0 0 6px; }
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0; }
nav.toc a {
  display: block;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text);
}
nav.toc a:hover { text-decoration: none; }
nav.toc a[aria-current="page"] { background: var(--selection); font-weight: 600; }

@media (max-width: 640px) {
  nav.toc { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  main { margin-left: 0; }
}

h1 { font-size: 1.6em; margin: 0 0 0.6em; }
h2 { font-size: 1.15em; margin: 1.6em 0 0.4em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
li { margin: 0.25em 0; }

code, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--code-background);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

table { border-collapse: collapse; margin: 0.8em 0; }
td code { overflow-wrap: anywhere; }
th, td { text-align: left; padding: 0.35em 1em 0.35em 0; border-bottom: 1px solid var(--rule); }

.note { color: var(--secondary); }

pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85em; }