/* docs.inbuxa.org: what the docs add to inbuxa.org's stylesheet (styles.css,
   copied from the site). Every color is one of the site's tokens, so the
   docs follow its palette, light and dark, without a color of their own.

   Since 13 October 2026 the docs wear the site's flagship design rather than
   the family shell docs.ihasmail.org still shares, so this file and the
   partials no longer match that site's. */

/* Names this file was written against, mapped onto the site's tokens. */
:root {
  --ink: var(--text); --ink-soft: var(--muted); --ink-faint: var(--faint);
  --line-strong: var(--line-2); --surface-2: var(--raised);
  --font-mono: var(--mono); --font-display: var(--sans);
  --ground-alt: var(--bg-2); --accent-hot: var(--accent-2);
  --tone-amber: #f2c14e;
  --top-h: 88px;
  --side-w: 272px;
  --frame: 1240px;
}
:root[data-theme="light"] { --tone-amber: #8f6a00; }

/* =========================================================================
   The frame: the bar across the top, the contents beside the page
   ========================================================================= */

/* The contents and the page sit in the same 1240px frame as the bar, so
   the column's edge lines up with the bar's, as the site's sections do. */
body.docs {
  display: grid;
  grid-template-columns: minmax(16px, 1fr) var(--side-w) minmax(0, calc(var(--frame) - var(--side-w))) minmax(16px, 1fr);
  grid-template-areas: "bar bar bar bar" ". side main ." "foot foot foot foot";
  background:
    radial-gradient(900px 420px at 72% -160px, color-mix(in srgb, var(--accent-ui) 13%, transparent), transparent 70%),
    radial-gradient(600px 300px at 100% 0, color-mix(in srgb, var(--warm-ui) 6%, transparent), transparent 70%),
    var(--bg);
}
/* The front page is a landing page, like the site's: no column beside it. */
body.docs.is-home { grid-template-areas: "bar bar bar bar" "main main main main" "foot foot foot foot"; background: var(--bg); }
body.docs > .bar { grid-area: bar; }
/* The column sits in a cell that fills its row, so that as it sticks it
   stops where the page ends instead of riding over the footer. */
body.docs > .side-cell { grid-area: side; }
body.docs.is-home > .side-cell { display: contents; }
body.docs > main { grid-area: main; min-width: 0; }
body.docs > footer { grid-area: foot; }
body.docs > script { display: none; }

.docs-tag {
  margin-left: 4px; padding: 3px 8px; border-radius: 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); background: var(--tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ui) 30%, transparent);
}

/* The search, as a field in the middle of the bar. */
.search-pill {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 1 1 auto; max-width: 420px; height: 40px; padding: 0 8px 0 14px;
  border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--faint);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: border-color .15s, color .15s, background .15s;
}
.search-pill:hover { border-color: var(--accent-ui); color: var(--text); background: var(--tint); }
.search-pill[hidden] { display: none; }
.search-pill .i { font-size: 1.05rem; }
.search-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .search-pill { margin-left: 8px; }
.bar .search-pill + .bar-nav { margin-left: auto; margin-right: 0; }

/* The menu button opens the contents, so it's only there when they fold. */
body.docs .menu-btn { display: none; }
body.docs.is-home .menu-btn { display: inline-flex; }

/* ---- the contents ---- */
/* A popover, shown in place as a sticky glass column on a wide screen. */
@media (min-width: 1001px) {
  body.docs:not(.is-home) #sidebar[popover] {
    display: block;
    inset: auto; position: sticky; top: calc(var(--bar-h) + 24px);
    align-self: start;
    width: auto; height: auto; max-height: calc(100vh - var(--bar-h) - 44px);
    margin: 24px 0; padding: 12px 10px 14px;
    overflow-y: auto; scrollbar-width: thin;
    color: var(--text);
    background: linear-gradient(180deg, var(--glass-hi), transparent 30%), var(--surface);
    border: 1px solid var(--line); border-radius: 20px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  body.docs:not(.is-home) .side-close { display: none; }
  /* On the front page the contents drop from the bar, like the site's menu. */
  body.docs.is-home #sidebar[popover] {
    margin: 0; inset: calc(var(--bar-h) + 22px) max(16px, calc((100vw - var(--frame)) / 2)) auto auto;
    width: 360px; max-height: calc(100vh - var(--bar-h) - 40px); overflow-y: auto;
    padding: 14px 10px 16px; color: var(--text);
    background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
    border: 1px solid var(--line-2); border-radius: 20px;
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  }
  body.docs.is-home #sidebar:popover-open { animation: menu-in .22s var(--ease); }
  body.docs.is-home #sidebar::backdrop { background: rgba(2, 8, 12, 0.45); }
}
@media (max-width: 1000px) {
  body.docs, body.docs.is-home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main" "foot"; }
  body.docs > .side-cell { display: contents; }
  body.docs .menu-btn { display: inline-flex; }
  #sidebar[popover] {
    margin: 0; inset: auto 0 0 0; width: 100%; max-height: 86vh;
    padding: 16px 14px 28px; overflow-y: auto;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
    border: 1px solid var(--line-2); border-bottom: 0; border-radius: 22px 22px 0 0;
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: var(--shadow);
  }
  #sidebar:popover-open { animation: sheet-in .28s var(--ease); }
  #sidebar::backdrop { background: rgba(2, 8, 12, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}
@media (max-width: 760px) {
  .bar .search-pill { flex: 0 0 auto; width: 40px; padding: 0; justify-content: center; margin-left: auto; }
  .bar .search-pill .search-label, .bar .search-pill kbd { display: none; }
  .bar .docs-tag { display: none; }
}

.side-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 8px 8px; }
.side-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.side-nav { display: grid; gap: 1px; }
.side-group { margin: 2px 0; }
.side-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 8px 7px; border-radius: 10px; cursor: pointer; list-style: none;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary:hover { background: var(--tint); }
.side-group > summary .chev { color: var(--faint); font-size: .9rem; transition: transform .2s var(--ease); }
.side-group[open] > summary .chev { transform: rotate(180deg); }
.side-group[open] > summary .side-label { color: var(--accent); }
.side-group .side-nav { margin-bottom: 6px; }

.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 11px;
  font-size: 14px; font-weight: 550; line-height: 1.3;
  color: var(--muted); text-decoration: none;
  transition: background .15s, color .15s;
}
a.side-item:hover { background: var(--tint); color: var(--text); }
.side-item.open { color: var(--text); }
.side-item.here {
  color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-ui) 16%, transparent), transparent);
  box-shadow: inset 2px 0 0 var(--accent-ui);
}
.side-item .out { margin-left: auto; color: var(--faint); font-size: .85rem; }
.side-item.side-heading { cursor: default; }
.side-item.near { box-shadow: inset 2px 0 0 var(--accent-ui); }

.side-sub { display: grid; gap: 1px; margin: 2px 0 6px 22px; padding-left: 12px; border-left: 1px solid var(--line); }
.side-subitem {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 9px;
  font-size: 13.5px; color: var(--faint); text-decoration: none;
}
.side-subitem:hover { color: var(--text); background: var(--tint); }
.side-subitem.here { color: var(--text); font-weight: 600; background: var(--tint); }
.side-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: none; }
.side-subitem.here .side-dot { background: var(--warm-ui); box-shadow: 0 0 8px var(--warm-ui); }

.side-group-static { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-group-static > .side-label { display: block; margin: 0 0 6px 8px; }
.side-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.side-foot a { font-size: 12.5px; color: var(--faint); text-decoration: none; }
.side-foot a:hover { color: var(--accent); }

.itile-sm { width: 1.5rem; height: 1.5rem; border-radius: 7px; font-size: .82rem; }
.itile-md { width: 1.85rem; height: 1.85rem; border-radius: 9px; font-size: .95rem; }
.itile-lg { width: 3.1rem; height: 3.1rem; border-radius: 14px; font-size: 1.45rem; }

/* docs.js draws a reading line of its own; the bar already has one. */
.read-progress { display: none; }

/* =========================================================================
   The page
   ========================================================================= */

.docs-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 0 80px clamp(28px, 3.4vw, 48px); }
.docs-main.has-onpage { grid-template-columns: minmax(0, 1fr) 200px; }
@media (max-width: 1000px) { .docs-main { padding: 32px clamp(18px, 4vw, 40px) 72px; } }
.doc { min-width: 0; max-width: 780px; width: 100%; justify-self: center; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { opacity: .5; }

.doc-title { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.doc-title .itile-lg { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, var(--accent)) 28%, transparent), 0 10px 30px -12px color-mix(in oklab, var(--t, var(--accent)) 60%, transparent); }
.doc-eyebrow { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t, var(--accent)); }
.doc-title:has(.tone-teal) .doc-eyebrow { --t: var(--tone-teal); }
.doc-title:has(.tone-orange) .doc-eyebrow { --t: var(--tone-orange); }
.doc-title:has(.tone-violet) .doc-eyebrow { --t: var(--tone-violet); }
.doc-title:has(.tone-sky) .doc-eyebrow { --t: var(--tone-sky); }
.doc-title:has(.tone-amber) .doc-eyebrow { --t: var(--tone-amber); }
.doc-title:has(.tone-emerald) .doc-eyebrow { --t: var(--tone-emerald); }
.doc h1 { margin: 0; font-size: clamp(32px, 4.4vw, 48px); font-weight: 770; letter-spacing: -0.042em; line-height: 1.04; text-wrap: balance; }
.doc-lead { margin: 0 0 12px; font-size: 18.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.doc-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 32px; font-family: var(--mono); font-size: 12px; color: var(--faint); }

.onpage-fold { display: none; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.onpage-fold summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; font-weight: 600; font-size: 14.5px; }
.onpage-fold ul { list-style: none; margin: 0; padding: 0 14px 12px; font-size: 14px; }
.onpage-fold li { margin: 5px 0; } .onpage-fold li.h3 { padding-left: 14px; }
.onpage-fold a { color: var(--muted); text-decoration: none; } .onpage-fold a:hover { color: var(--accent); }

.onpage { position: sticky; top: calc(var(--bar-h) + 36px); align-self: start; max-height: calc(100vh - var(--bar-h) - 60px); overflow: auto; scrollbar-width: thin; font-size: 13.5px; }
.op-title { display: block; margin: 4px 0 12px; }
.onpage ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.onpage li a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; color: var(--faint); text-decoration: none; line-height: 1.35; transition: color .15s, border-color .15s; }
.onpage li.h3 a { padding-left: 26px; }
.onpage li a:hover { color: var(--text); }
.onpage li a[aria-current="true"] { color: var(--accent); border-left-color: var(--warm-ui); font-weight: 600; }
.op-foot { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.op-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); text-decoration: none; }
.op-foot a:hover { color: var(--accent); }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; }
.pn {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 50%), var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.pn:hover { border-color: color-mix(in srgb, var(--accent-ui) 50%, var(--line-2)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pn .dir { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pn strong { font-size: 17px; font-weight: 680; letter-spacing: -0.02em; }
.pn small { color: var(--faint); font-size: 13px; }
.pn.next { grid-column: 2; text-align: right; align-items: flex-end; }

/* =========================================================================
   The words
   ========================================================================= */

.doc-prose { font-size: 16.5px; line-height: 1.72; color: var(--muted); }
.doc-prose > :first-child { margin-top: 0; }
.doc-prose :is(h2, h3, h4) { color: var(--text); letter-spacing: -0.025em; line-height: 1.2; position: relative; scroll-margin-top: calc(var(--bar-h) + 36px); }
.doc-prose h2 { font-size: clamp(24px, 2.7vw, 30px); font-weight: 740; letter-spacing: -0.035em; margin: 2.2em 0 0.6em; padding-top: 0.8em; border-top: 1px solid var(--line); }
.doc-prose h3 { font-size: 19.5px; font-weight: 680; margin: 1.8em 0 0.5em; }
.doc-prose h4 { font-size: 16.5px; font-weight: 680; margin: 1.5em 0 0.4em; }
.doc-prose p { margin: 0 0 1.05em; }
.doc-prose strong { color: var(--text); font-weight: 650; }
.doc-prose a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.doc-prose a:hover { text-decoration-color: currentColor; }
.doc-prose :is(ul, ol) { padding-left: 1.4em; margin: 0 0 1.1em; }
.doc-prose li { margin: 0.4em 0; }
.doc-prose li::marker { color: var(--accent-ui); }
.doc-prose code { font-family: var(--mono); font-size: 0.86em; color: var(--text); background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
.doc-prose pre {
  margin: 1.3em 0; padding: 16px 18px;
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 14px;
  overflow-x: auto; font-size: 13px; line-height: 1.7;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.doc-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: var(--text); }
.doc-prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--accent-ui); color: var(--text); }
.doc-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.doc-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.doc-prose figure { margin: 1.8em auto; max-width: 100%; }
.doc-prose figure img.shot { display: block; width: 100%; border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow); }
.doc-prose figcaption { margin: 0.8em auto 0; max-width: 46rem; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--faint); }
.doc-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0 1.4em; font-size: 14.5px; }
.doc-prose :is(th, td) { padding: 10px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-prose th { color: var(--text); font-weight: 650; border-bottom-color: var(--line-2); }
.doc-prose td code { white-space: nowrap; }
.doc-prose .anchor { position: absolute; left: -1em; padding-right: 0.25em; color: var(--faint); text-decoration: none; opacity: 0; font-weight: 500; }
.doc-prose :is(h2, h3):hover .anchor, .doc-prose .anchor:focus { opacity: 1; }
.code-wrap { position: relative; }
.code-wrap pre { padding-right: 52px; }
.code-copy { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-solid); color: var(--faint); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; font-size: 14px; }
.code-wrap:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--accent); }
.code-copy.done { color: var(--tone-emerald); opacity: 1; }
.code-copy svg { width: 1em; height: 1em; }

/* A code block's file name, on the block. */
.doc-prose .highlight > .filename { display: block; margin-top: 1.3em; padding: 8px 18px; font: 600 12px var(--mono); color: var(--faint); background: var(--raised); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; }
.doc-prose .highlight > .filename + pre, .doc-prose .highlight > .filename + .code-wrap pre { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Code colors. HotDog colors a code block that names its language when the
   site is built, with Pygments' class names. Each hue is mixed into the
   code's own text color, so one set reads on the light code blocks and the
   dark ones. hl_lines marks lines with .hll. */
.highlight { --code-keyword: #5b7cfa; --code-string: #13a39a; --code-number: #e08a2b; --code-function: #2f86d6; --code-type: #0f9488; --code-tag: #d9577a; }
.highlight :is(.k, .kd, .kn, .kp, .kr, .ow, .cp, .cpf, .nd) { color: color-mix(in srgb, var(--code-keyword) 60%, currentColor); }
.highlight :is(.s, .sa, .sb, .sc, .dl, .sd, .s1, .s2, .sh, .sx, .sr, .ss, .l, .ld, .gi) { color: color-mix(in srgb, var(--code-string) 60%, currentColor); }
.highlight :is(.m, .mb, .mf, .mh, .mi, .il, .mo, .se, .si, .no, .kc, .na) { color: color-mix(in srgb, var(--code-number) 60%, currentColor); }
.highlight :is(.nf, .fm, .nc, .nn, .ne, .gh, .gu) { color: color-mix(in srgb, var(--code-function) 60%, currentColor); }
.highlight :is(.kt, .nb, .bp) { color: color-mix(in srgb, var(--code-type) 60%, currentColor); }
.highlight :is(.nt, .nv, .vc, .vg, .vi, .vm, .gd, .gr, .gt) { color: color-mix(in srgb, var(--code-tag) 60%, currentColor); }
.highlight :is(.c, .ch, .cm, .c1, .cs, .gp, .go) { color: color-mix(in srgb, currentColor 72%, transparent); }
.highlight :is(.c, .ch, .cm, .c1, .cs, .ge) { font-style: italic; }
.highlight :is(.gh, .gu, .gs) { font-weight: 700; }
.highlight .hll { display: block; margin: 0 -18px; padding: 0 18px; background: color-mix(in srgb, var(--accent-ui) 18%, transparent); }

/* The site's .keys is a bulleted list; in the docs it's MkDocs' key combo. */
.doc-prose .keys { display: inline; gap: 0; padding: 0; white-space: nowrap; }
.doc-prose .keys > span { margin: 0 0.15em; color: var(--faint); }
.doc-prose kbd, .doc-prose .keys kbd { font-family: var(--mono); font-size: 0.8em; color: var(--text); background: var(--raised); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 0.05em 0.45em; box-shadow: none; }
.doc-prose dl { margin: 1.2em 0; }
.doc-prose dt { margin-top: 0.8em; color: var(--text); font-weight: 650; }
.doc-prose dd { margin: 0.2em 0 0 1.4em; }

/* ---- the network diagrams: inline SVG, colored from the site's tokens,
   so they follow the theme. Names unchanged from the MkDocs stylesheet. ---- */
.ihm-figure { margin: 1.8em 0; overflow-x: auto; }
.ihm-diagram { display: block; height: auto; margin: 0 auto; min-width: 26rem; max-width: 34rem; width: 100%; }
.ihm-diagram .ihm-node rect { fill: var(--surface-solid); stroke: var(--line-2); stroke-width: 0.5; }
.ihm-diagram .ihm-node-app rect { fill: var(--tint); stroke: var(--accent-ui); stroke-width: 1; }
.ihm-diagram .ihm-group rect { fill: none; stroke: var(--line-2); stroke-dasharray: 4 3; stroke-width: 0.5; }
.ihm-diagram .ihm-t { fill: var(--text); font-size: 14px; font-weight: 600; }
.ihm-diagram .ihm-s { fill: var(--muted); font-size: 12px; }
.ihm-diagram .ihm-p { font-size: 11px; font-weight: 600; }
.ihm-diagram .ihm-p-jmap { fill: var(--accent); }
.ihm-diagram .ihm-p-smtp { fill: var(--warm); }
.ihm-diagram :is(.ihm-link, .ihm-jmap, .ihm-smtp) { fill: none; stroke-width: 1.5; }
.ihm-diagram .ihm-link { stroke: var(--muted); }
.ihm-diagram .ihm-jmap { stroke: var(--accent-ui); }
.ihm-diagram .ihm-smtp { stroke: var(--warm-ui); }
.ihm-diagram-ha { max-width: 42rem; min-width: 30rem; }
.ihm-diagram .ihm-noshare { fill: none; stroke: var(--warm-ui); stroke-dasharray: 3 3; stroke-width: 1.5; }
.ihm-diagram .ihm-p-warn { fill: var(--warm); }
.ihm-diagram .ihm-halo { paint-order: stroke fill; stroke: var(--bg); stroke-linejoin: round; stroke-width: 4px; }

/* ---- notes, folding notes, tabs: MkDocs' markup, in the site's tones ---- */
.doc-prose :is(.admonition, details) {
  --adm: var(--accent-ui);
  margin: 1.5em 0; padding: 0 18px; border: 1px solid color-mix(in oklab, var(--adm) 30%, var(--line)); border-left: 3px solid var(--adm);
  border-radius: 14px; background: color-mix(in oklab, var(--adm) 7%, var(--surface-solid)); color: var(--muted);
}
.doc-prose :is(.admonition, details) > :last-child { margin-bottom: 16px; }
.doc-prose :is(.admonition-title, details > summary) {
  margin: 0 -18px; padding: 11px 18px; font-weight: 650; color: var(--text);
  background: color-mix(in oklab, var(--adm) 13%, var(--surface-solid));
}
.doc-prose .admonition-title { margin-bottom: 12px; border-radius: 0 13px 0 0; }
.doc-prose details > summary { cursor: pointer; list-style-position: inside; border-radius: 0 13px 13px 0; }
.doc-prose details[open] > summary { margin-bottom: 12px; border-radius: 0 13px 0 0; }
.doc-prose :is(.admonition, details):is(.note, .abstract, .summary, .tldr, .info, .todo) { --adm: var(--tone-sky); }
.doc-prose :is(.admonition, details):is(.tip, .hint, .important) { --adm: var(--tone-teal); }
.doc-prose :is(.admonition, details):is(.success, .check, .done) { --adm: var(--tone-emerald); }
.doc-prose :is(.admonition, details):is(.question, .help, .faq) { --adm: var(--tone-amber); }
.doc-prose :is(.admonition, details):is(.warning, .caution, .attention) { --adm: var(--tone-orange); }
.doc-prose :is(.admonition, details):is(.failure, .fail, .missing, .danger, .error, .bug) { --adm: #e5616b; }
.doc-prose :is(.admonition, details):is(.example) { --adm: var(--tone-violet); }
.doc-prose :is(.admonition, details):is(.quote, .cite) { --adm: var(--tone-slate); }

.doc-prose .tabbed-set { position: relative; display: flex; flex-direction: column; margin: 1.5em 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.doc-prose .tabbed-set > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.doc-prose .tabbed-labels { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.doc-prose .tabbed-labels > label { padding: 11px 12px 9px; cursor: pointer; color: var(--faint); font-weight: 600; font-size: 0.92em; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.doc-prose .tabbed-labels > label:hover { color: var(--text); }
.doc-prose .tabbed-content { padding: 0 18px; }
.doc-prose .tabbed-block { display: none; }
.doc-prose .tabbed-set > input:nth-child(1):checked ~ .tabbed-content > .tabbed-block:nth-child(1),
.doc-prose .tabbed-set > input:nth-child(2):checked ~ .tabbed-content > .tabbed-block:nth-child(2),
.doc-prose .tabbed-set > input:nth-child(3):checked ~ .tabbed-content > .tabbed-block:nth-child(3),
.doc-prose .tabbed-set > input:nth-child(4):checked ~ .tabbed-content > .tabbed-block:nth-child(4),
.doc-prose .tabbed-set > input:nth-child(5):checked ~ .tabbed-content > .tabbed-block:nth-child(5),
.doc-prose .tabbed-set > input:nth-child(6):checked ~ .tabbed-content > .tabbed-block:nth-child(6),
.doc-prose .tabbed-set > input:nth-child(7):checked ~ .tabbed-content > .tabbed-block:nth-child(7),
.doc-prose .tabbed-set > input:nth-child(8):checked ~ .tabbed-content > .tabbed-block:nth-child(8) { display: block; }
.doc-prose .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.doc-prose .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.doc-prose .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.doc-prose .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.doc-prose .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.doc-prose .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6),
.doc-prose .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7),
.doc-prose .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) { color: var(--accent); border-bottom-color: var(--accent-ui); }
.doc-prose .tabbed-set > input:focus-visible ~ .tabbed-labels { outline: 2px solid var(--accent-ui); outline-offset: -2px; border-radius: 12px 12px 0 0; }

/* MkDocs Material's "grid cards": a list shown as a grid of cards. The
   site's own .grid (the feature grid) mustn't take the wrapper. */
.doc-prose .grid.cards { display: block; }
.doc-prose .grid.cards > ul { list-style: none; margin: 1.2em 0 1.6em; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px; }
.doc-prose .grid.cards > ul > li {
  position: relative; margin: 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 16px;
  background: radial-gradient(420px circle at var(--mx, -600px) var(--my, -600px), var(--spot), transparent 42%), var(--surface);
  transition: border-color .2s, transform .25s var(--ease);
}
.doc-prose .grid.cards > ul > li:hover { border-color: color-mix(in srgb, var(--accent-ui) 40%, var(--line-2)); transform: translateY(-2px); }
.doc-prose .grid.cards > ul > li > :first-child { margin-top: 0; }
.doc-prose .grid.cards > ul > li > :last-child { margin-bottom: 0; }
.doc-prose .grid.cards > ul > li p { margin: 0.35em 0 0; font-size: 0.94em; }
.doc-prose .grid.cards > ul > li strong a { text-decoration: none; }

/* ---- search: the site's palette, with full-text results ---- */
.docs-search { width: min(42rem, calc(100vw - 2rem)); max-height: min(36rem, 76vh); }
.palette-list .pl-group { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 6px 10px 4px; cursor: default; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.palette-list .pl-group:hover { background: none; }
.palette-list .pl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.palette-list .pl-text .pl-name, .palette-list .pl-text .pl-note { margin-left: 0; max-width: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list mark { background: none; color: var(--accent); font-weight: 700; }
.palette-list .pl-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 7px; border: 1px solid var(--line-2); color: var(--faint); font-size: 0.8rem; }
.pl-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.pl-foot kbd { margin-right: 3px; }
.hero-jump[hidden] { display: none; }

/* =========================================================================
   The docs' front page
   ========================================================================= */

/* The site's hero, but below the bar rather than under it: here it starts
   in its own grid row. */
body.docs .docs-hero { margin-top: 0; padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(48px, 6vw, 80px); }
.docs-hero .hero-copy { max-width: 980px; }
.docs-hero h1 { font-size: clamp(44px, 7vw, 92px); }
.docs-hero .hero-ctas { margin-top: 32px; }
.search-pill.hero-jump {
  flex: none; width: min(40rem, 100%); max-width: none; height: 58px; padding: 0 12px 0 20px;
  font-size: 16.5px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
  border-color: color-mix(in srgb, var(--accent-ui) 35%, var(--line-2));
  box-shadow: 0 0 0 4px var(--tint), var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
}
.docs-hero .badges { margin-top: 28px; }

.docs-home { max-width: 1200px; margin: 0 auto; padding: 8px 28px 40px; }
/* Each section is a card with a bay number, as the site's section heads. */
.section-cards { counter-reset: bay; list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* A long section (Run it) takes two columns and lists its pages in two, so
   the three cards come out about the same height. */
.section-cards > li:has(> ul > li:nth-child(13)) { grid-column: span 2; }
.section-cards > li:has(> ul > li:nth-child(13)) > ul { display: block; columns: 2; column-gap: 12px; }
.section-cards > li:has(> ul > li:nth-child(13)) > ul > li { break-inside: avoid; margin-bottom: 2px; }
@media (max-width: 1100px) { .section-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .section-cards { grid-template-columns: minmax(0, 1fr); }
  .section-cards > li:has(> ul > li:nth-child(13)) { grid-column: auto; }
  .section-cards > li:has(> ul > li:nth-child(13)) > ul { columns: 1; }
}
.section-cards > li {
  position: relative; padding: 20px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(460px circle at var(--mx, -600px) var(--my, -600px), var(--spot), transparent 42%), linear-gradient(180deg, var(--glass-hi), transparent 40%), var(--surface);
  transition: border-color .2s, box-shadow .25s, transform .3s var(--ease);
}
.section-cards > li::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--t, var(--accent-ui)), transparent);
}
.section-cards > li:hover { border-color: color-mix(in oklab, var(--t, var(--accent-ui)) 40%, var(--line-2)); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.sc-head { counter-increment: bay; display: flex; align-items: center; gap: 10px; margin: 0 6px 12px; }
.sc-head::before {
  content: counter(bay, decimal-leading-zero);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 6px; border-radius: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--t, var(--accent)); background: color-mix(in oklab, var(--t, var(--accent)) var(--tone-mix), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, var(--accent)) 30%, transparent);
}
.sc-head .side-label { color: var(--t, var(--accent)); text-decoration: none; font-size: 12px; }
.sc-head a.side-label:hover { text-decoration: underline; }
.sc-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.section-cards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.section-cards ul a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 15px; }
.section-cards ul a:hover { background: var(--tint); color: var(--text); }
.home-doc { justify-self: start; max-width: 780px; margin: 0 auto; }
.home-doc .doc-prose { font-size: 17px; }

/* =========================================================================
   Narrower
   ========================================================================= */

@media (max-width: 1260px) {
  .docs-main.has-onpage { grid-template-columns: minmax(0, 1fr); }
  .onpage { display: none; }
  .onpage-fold { display: block; }
}
@media (max-width: 900px) {
  .prevnext { grid-template-columns: minmax(0, 1fr); }
  .pn.next { grid-column: auto; }
  .doc-title .itile-lg { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .docs-home { padding: 0 18px 32px; }
  .docs-main { padding-top: 28px; }
}

/* Cards and the page's own panels rise in as they scroll, as on the site. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .section-cards > li, .js .pn, .js .doc-prose .grid.cards > ul > li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}