/*! zdoc default theme.
 *
 * The article is the page: a serif reading column, and a sans-serif rail for
 * finding things. Dark mode follows the OS preference.
 */

:root {
  --sidebar-width: 260px;
  --toc-width: 220px;
  --content-max: 40rem;

  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC",
    "Noto Serif CJK SC", serif;
  --font-sans: "Avenir Next", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Sarasa Mono SC", Menlo, Consolas,
    monospace;

  --bg: #f3f5f7;
  --bg-soft: #e6ebf0;
  --bg-code: #e9eef2;
  --border: #d0d7e0;
  --text: #1b2430;
  --text-dim: #5a6878;
  --accent: #0f5f6b;
  --accent-fill: #0f5f6b;
  --accent-soft: #d7ebee;
  --warn-bg: #f8f1e4;
  --warn-border: #c4a36a;
  --warn-text: #6d5420;
  --danger-bg: #f8e8e6;
  --danger-border: #b55248;

  /* Syntax tokens, keyed to the class names emitted by src/highlight.zig. */
  --tk-comment: #6a737d;
  --tk-keyword: #9f3040;
  --tk-string: #0f5f6b;
  --tk-number: #1d4e89;
  --tk-function: #6b4c8a;
  --tk-type: #8a4b12;
  --tk-variable: #1b2430;
  --tk-operator: #1d4e89;
  --tk-builtin: #1d6b45;
  --tk-constant: #1d4e89;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14191d;
    --bg-soft: #1c2329;
    --bg-code: #1c2329;
    --border: #313a44;
    --text: #e6ecef;
    --text-dim: #9aa6b2;
    --accent: #7ec8c4;
    --accent-fill: #14656e;
    --accent-soft: #1a3032;
    --warn-bg: #2a2418;
    --warn-border: #8a7040;
    --warn-text: #e3c98a;
    --danger-bg: #2c1c1c;
    --danger-border: #a85a52;

    --tk-comment: #8b949e;
    --tk-keyword: #ff7b72;
    --tk-string: #a5d6ff;
    --tk-number: #79c0ff;
    --tk-function: #d2a8ff;
    --tk-type: #ffa657;
    --tk-variable: #e6edf3;
    --tk-operator: #79c0ff;
    --tk-builtin: #7ee787;
    --tk-constant: #79c0ff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Layout ---------- */

.layout {
  display: flex;
  min-height: 100vh;
}

/* A landing page has no sidebar and no table of contents, so it centres its
   content instead of sitting in a column between them. */
.layout--bare {
  display: block;
}

.layout--bare .home {
  max-width: 896px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  padding: 28px 16px 48px;
  font-family: var(--font-sans);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The nav is a long list in a short column; letting the page scroll it
     while it is sticky would drag the reader's scroll position around when
     they reach the end of a section. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.sidebar__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 8px 16px;
  display: block;
  color: var(--text);
  text-decoration: none;
}

.sidebar__title:hover {
  color: var(--accent);
}

.sidebar__group {
  margin: 22px 8px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One shape for every entry, so that hover, focus and the active marker are
   written once and the indent only moves the padding. The entries used to be
   styled by element type, which made the section and the page under it look
   like the same kind of thing. */
.sidebar__item,
.sidebar__section,
.sidebar__label {
  display: block;
  margin: 1px 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
  /* The active marker is a bar on the left edge, so the text has to start
     clear of it rather than sitting on top. */
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--text-dim);
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* A section with a page to open. Weighted above its children so the shape of
   the tree is readable without relying on indentation alone. */
.sidebar__section {
  color: var(--text);
  font-weight: 600;
  margin-top: 10px;
}

.sidebar__section:first-child {
  margin-top: 2px;
}

/* A directory with no index page: a heading with nothing to click. */
.sidebar__label {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  margin-top: 12px;
}

.sidebar__item--d0,
.sidebar__section--d0,
.sidebar__label--d0 {
  padding-left: 10px;
}

.sidebar__item--d1,
.sidebar__section--d1,
.sidebar__label--d1 {
  padding-left: 22px;
}

.sidebar__item--d2,
.sidebar__section--d2,
.sidebar__label--d2 {
  padding-left: 34px;
}

.sidebar__item--d3,
.sidebar__section--d3,
.sidebar__label--d3 {
  padding-left: 46px;
}

.sidebar__item:hover,
.sidebar__section:hover,
.sidebar__label:hover {
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
}

/* Keyboard focus needs to be visible: the active-page fill is not a focus
   state, and a mouse user never sees this ring. */
.sidebar__item:focus-visible,
.sidebar__section:focus-visible,
.sidebar__label:focus-visible,
.sidebar__title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sidebar__item.is-active,
.sidebar__section.is-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 40px 48px 96px;
}

.doc {
  max-width: var(--content-max);
}

/* ---------- Table of contents ---------- */

.toc {
  width: var(--toc-width);
  flex: 0 0 var(--toc-width);
  padding: 48px 24px 48px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: 13px;
}

.toc__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}

.toc li {
  margin: 0;
}

.toc a {
  display: block;
  padding: 3px 0 3px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-dim);
}

.toc a:hover {
  color: var(--text);
  text-decoration: none;
}

.toc a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ---------- Headings ---------- */

.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
  line-height: 1.3;
  margin: 1.8em 0 0.8em;
  font-weight: 600;
  scroll-margin-top: 24px;
}

.doc h1 {
  margin-top: 0;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.doc h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.doc h3 { font-size: 1.25em; }
.doc h4 { font-size: 1.05em; }

/* Anchor link revealed on hover, matching VitePress. */
.doc .header-anchor {
  float: left;
  margin-left: -0.9em;
  padding-right: 0.25em;
  opacity: 0;
  color: var(--text-dim);
  text-decoration: none;
}

.doc h1:hover .header-anchor,
.doc h2:hover .header-anchor,
.doc h3:hover .header-anchor,
.doc h4:hover .header-anchor,
.doc h5:hover .header-anchor,
.doc h6:hover .header-anchor,
.doc .header-anchor:focus {
  opacity: 1;
}

/* ---------- Content ---------- */

.doc p,
.doc ul,
.doc ol,
.doc blockquote,
.doc table,
.doc pre {
  margin: 1em 0;
}

.doc ul,
.doc ol {
  padding-left: 1.5em;
}

.doc blockquote {
  margin-left: 0;
  padding: 0.2em 1em;
  color: var(--text-dim);
  border-left: 3px solid var(--border);
}

.doc hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.doc th,
.doc td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 8px 16px 8px 0;
  text-align: left;
  vertical-align: top;
}

.doc th {
  font-family: var(--font-sans);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-dim);
}

.doc img {
  max-width: 100%;
}

.doc :not(pre) > code {
  background: var(--bg-code);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  font-family: var(--font-mono);
}

.doc pre {
  background: var(--bg-code);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  line-height: 1.55;
}

.doc pre code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: none;
  border: none;
  padding: 0;
}

/* Task lists: SuperMD keeps `[ ]` markers as list items, so style the boxes
   when a checkbox is present. */
.doc li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.2em;
}

.doc input[type="checkbox"] {
  margin-right: 0.4em;
}

/* ---------- Syntax highlighting ---------- */

/* `highlight.zig` emits semantic tree-sitter token classes; these rules are
   language-agnostic so they cover zig, bash, sql and the rest alike. */
pre code .comment,
pre code .line_comment,
pre code .block_comment {
  color: var(--tk-comment);
  font-style: italic;
}

pre code .keyword,
pre code .operator,
pre code .punctuation,
pre code .tag {
  color: var(--tk-keyword);
}

pre code .string,
pre code .string_literal,
pre code .char_literal,
pre code .escape_sequence,
pre code .raw_string_literal {
  color: var(--tk-string);
}

pre code .number,
pre code .numeric_literal,
pre code .integer_literal,
pre code .float_literal,
pre code .integer,
pre code .float {
  color: var(--tk-number);
}

pre code .function,
pre code .function_call,
pre code .call_expression,
pre code .call {
  color: var(--tk-function);
}

pre code .type,
pre code .type_identifier,
pre code .primitive_type,
pre code .struct_item,
pre code .struct_type,
pre code .enum_item,
pre code .class_name {
  color: var(--tk-type);
}

pre code .variable,
pre code .identifier,
pre code .field_identifier,
pre code .property_identifier {
  color: var(--tk-variable);
}

pre code .builtin,
pre code .builtin_type,
pre code .predefined,
pre code .predefined_constant,
pre code .attribute {
  color: var(--tk-builtin);
}

pre code .constant,
pre code .boolean,
pre code .nil,
pre code .null {
  color: var(--tk-constant);
}

/* Mermaid blocks are rendered client-side, so keep them unstyled by the
   highlighter and let mermaid take over. */
pre.mermaid {
  background: transparent;
  border: none;
  text-align: center;
  overflow-x: auto;
}

/* Once mermaid has replaced the source with an <svg>, drop the code
   formatting entirely. */
pre.mermaid svg {
  max-width: 100%;
  height: auto;
}

.task-list-item {
  list-style: none;
}

.doc li.task-list-item {
  margin-left: -1.2em;
}

/* ---------- Small screens ---------- */

@media (max-width: 1100px) {
  .toc {
    display: none;
  }
}

/* The narrow-screen navigation drawer.
 *
 * Below this width there is no room for a permanent column, so the sidebar
 * becomes a panel that slides in over the content. It used to become a static
 * block above the content instead, which pushed the article off the screen
 * and gave the reader no way to dismiss it. */
.nav-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  width: 38px;
  height: 38px;
  padding: 9px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  margin: 3px 0;
  border-radius: 1px;
  background: var(--text);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-scrim {
  display: none;
}

@media (max-width: 800px) {
  .layout {
    display: block;
  }

  .nav-toggle {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(300px, 84vw);
    height: 100vh;
    background: var(--bg);
    border-right: 1px solid var(--border);
    /* Off-canvas until the reader opens it. Kept in the flow rather than
       removed so the transition has something to animate. */
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    padding-top: 16px;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.4);
  }

  .nav-scrim[hidden] {
    display: none;
  }

  /* The title sits under the toggle, so it needs room to clear it. */
  .sidebar__title {
    margin-left: 46px;
  }

  .content {
    padding: 62px 20px 64px;
  }

  .doc .header-anchor {
    display: none;
  }
}

/* A reader who has asked for less motion should not be animated at all. */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .search__results a {
    transition: none;
  }
}
/* ---------------------------------------------------------------- home page
 *
 * Rendered for `layout: home`. The hero is the page's pitch; the feature
 * cards below it are the short list of what the thing does. Everything is
 * driven from frontmatter, so a home page is a block of YAML and nothing
 * else.
 */

.hero {
  padding: 88px 0 40px;
  text-align: left;
}

.hero__name {
  margin: 0 0 12px;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  border: 0;
}

.hero__text {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero__tagline {
  margin: 0;
  max-width: 36rem;
  color: var(--text-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 28px;
}

.hero__action {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: transparent;
}

.hero__action:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.hero__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The template cannot concatenate a theme class, so the first action is the
   one that carries the weight. Later actions stay as quiet outlines. */
.hero__actions .hero__action:first-child,
.hero__action--brand {
  border-color: transparent;
  color: #f4fafb;
  background: var(--accent-fill);
}

.hero__actions .hero__action:first-child:hover,
.hero__action--brand:hover {
  color: #f4fafb;
  background: #0c4e58;
}

/* `.feature-grid` is the loop container: `:loop` repeats its children, so
   the element carrying `:loop` is emitted once and the cards inside it are
   what repeat. It is a grid so the cards lay themselves out. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 8px 0 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.feature {
  padding: 0;
  background: transparent;
}

.feature__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  border: 0;
}

.feature__details {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* The body of a home page sits below the feature cards and reads as an
   ordinary document rather than as part of the pitch. */
.doc--home {
  margin: 0 auto;
}

@media (max-width: 800px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 56px;
  }

  .hero__name {
    font-size: 44px;
  }

  .hero__text {
    font-size: 19px;
  }
}

/* The last-updated line. Sits under the content, quiet on purpose: it is
   metadata, not part of the document. */
.doc__footer {
  max-width: var(--content-max);
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.doc__updated {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* The attribution line. Quieter than the date it can share the footer with,
   because it is not information about the page: the name is dimmed and only
   the link itself carries the accent, so the eye lands on the date first when
   there is one. */
.doc__powered {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

/* On a landing page the column is centered rather than left-aligned with the
   document text, because there is no text to align with. */
.doc__footer--home .doc__powered {
  margin-top: 0;
  text-align: left;
}

.doc__powered a {
  color: var(--text-dim);
  text-decoration-color: var(--border);
}

/* Hover is the only moment the line is meant to be noticed. */
.doc__powered a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ ebook
 *
 * `zdoc ebook` renders the same tree as a book. The column is the article.
 * The chapter list stays folded until the reader asks for it.
 */

.ebook {
  max-width: 40rem;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

.ebook__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.ebook__home {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}

.ebook__home:hover {
  color: var(--accent);
}

.ebook__contents {
  position: relative;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.ebook__contents summary {
  cursor: pointer;
  color: var(--text-dim);
}

.ebook__contents summary:hover {
  color: var(--text);
}

/* The list is positioned against the header. A closed <details> does not
   hide that box: the list stays in the page and can be activated, so a click
   on the chapter lands on a different one. Hide it until the reader opens
   Contents. */
.ebook__contents:not([open]) ul {
  display: none;
}

.ebook__contents ul {
  position: absolute;
  z-index: 20;
  right: 0;
  width: min(280px, 70vw);
  max-height: 60vh;
  overflow-y: auto;
  margin: 8px 0 0;
  padding: 8px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ebook__turn {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
}

.ebook__prev,
.ebook__next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 46%;
  text-decoration: none;
  color: var(--text);
}

.ebook__next {
  margin-left: auto;
  text-align: right;
}

.ebook__prev:hover,
.ebook__next:hover {
  color: var(--accent);
}

.ebook__turn-label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.ebook__turn-title {
  font-size: 1.05rem;
}

/* ------------------------------------------------------------------ search
 *
 * The input sits above the sidebar list. Results are absolutely positioned
 * over the sidebar rather than pushed into the document flow, so opening the
 * list does not reflow the page under the reader's cursor.
 */

.search {
  position: relative;
  margin: 4px 4px 20px;
}

.search__input {
  width: 100%;
  padding: 7px 34px 7px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.search__input::placeholder {
  color: var(--text-dim);
}

.search__input:hover {
  border-color: var(--text-dim);
}

.search__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The "/" hint, shown only while the field is idle. Once the reader has
   focused it the shortcut is no longer news, and it would sit on top of
   whatever they type. */
.search__hint {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
}

.search.is-focused .search__hint,
.search__input:not(:placeholder-shown) ~ .search__hint {
  display: none;
}

.search__results {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  margin: 6px 0 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.search__results[hidden] {
  display: none;
}

.search__result {
  border-radius: 6px;
}

.search__result a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
}

/* Hover for a pointer, and the selection the arrow keys move. They are
   different states and a keyboard user never produces the first one. */
.search__result a:hover {
  background: var(--bg-soft);
}

.search__result[aria-selected="true"] {
  background: var(--accent-soft);
}

.search__result[aria-selected="true"] a {
  color: var(--accent);
}

.search__result-title {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
}

.search__result-page {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The matched run. A background rather than a colour change, because the
   match is often a single CJK character and a tint is easier to spot than a
   slightly bolder glyph. */
.search__result-title mark {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 1px;
}

.search__empty {
  padding: 9px 10px;
  color: var(--text-dim);
  font-size: 13.5px;
}

/* Screen-reader-only result count, so the list does not change width when it
   appears and disappear. */
.search__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- containers
 *
 * `::: tip` and friends render as SuperMD block directives, which produce
 * `<div class="block tip">`. The colour is on the container and the padding
 * on the body, so that a container with several paragraphs reads as one box
 * rather than as several bordered boxes.
 */

.block {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  background: var(--bg-soft);
}

.block > :first-child {
  margin-top: 0;
}

.block > :last-child {
  margin-bottom: 0;
}

.block.tip,
.block.info {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.block.warning {
  border-left-color: var(--warn-border);
  background: var(--warn-bg);
}

.block.danger {
  border-left-color: var(--danger-border);
  background: var(--danger-bg);
}

.block.note,
.block.details,
.block.tabs,
.block.code-group {
  border-left-color: var(--border);
}