/* ============================================================================
   VERISCO — the documentation at /docs.
   ----------------------------------------------------------------------------
   Loaded after site.css and built only from its tokens: the same two
   typefaces, the same type and spacing scales, the same single signal colour.
   Nothing here declares a colour or a size of its own.

   The rules the rest of the site follows hold here too: surfaces are separated
   by a 1px rule and a small shift of ground, never a shadow (the search dialog
   is the one true overlay, and it gets one); the signal colour marks where you
   are and what you can press, and nothing else.

   Reading text is the product on these pages, so the article is a measure, not
   a container: 72ch of 15px at 1.7, and everything wider than that is a table
   or a figure that scrolls inside its own box.
   ========================================================================== */

.docs {
  --bar-h: 48px;
  --docs-top: calc(var(--header-h) + var(--bar-h));
  --nav-w: 224px;
  --toc-w: 200px;
}
html:has(.docs) { scroll-padding-top: calc(var(--header-h) + 48px + var(--sp-5)); }

/* ── The bar: which documentation this is, and the search ─────────────────── */

.docs-bar { position:sticky; top: var(--header-h); z-index:50; height: var(--bar-h);
            background: var(--page); border-bottom:1px solid var(--rule); }
.docs-bar__in { display:flex; align-items:center; gap: var(--sp-4); height:100%; }
.docs-bar__home { color: var(--ink); font:500 var(--fs-300)/1 var(--sans); }
.docs-bar__home:hover { color: var(--signal); }
.docs-bar__menu { display:none; padding: var(--sp-2) var(--sp-3); }

.docs-switch { display:flex; border:1px solid var(--rule); border-radius: var(--r); overflow:hidden; }
.docs-switch__opt { padding: 6px var(--sp-3); border-left:1px solid var(--rule);
                    color: var(--ink-2); font:500 var(--fs-200)/1.4 var(--sans);
                    transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.docs-switch__opt:first-child { border-left:0; }
.docs-switch__opt:hover { background: var(--raised); color: var(--ink); }
.docs-switch__opt[aria-current] { background: var(--ink); color: var(--page); }

.docs-searchbtn { display:flex; align-items:center; gap: var(--sp-2); margin-left:auto;
                  width: 280px; padding: 6px var(--sp-3);
                  border:1px solid var(--rule); border-radius: var(--r);
                  background: var(--raised); color: var(--ink-3);
                  font:400 var(--fs-300)/1.4 var(--sans); text-align:left; cursor:pointer;
                  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.docs-searchbtn span { flex:1; }
.docs-searchbtn:hover { border-color: var(--ink-3); color: var(--ink-2); }
.docs-searchbtn:active { transform: translateY(1px); }

.docs kbd, .docs-search kbd {
  display:inline-block; min-width:20px; padding: 1px 5px; text-align:center;
  border:1px solid var(--rule-2); border-radius: var(--r); background: var(--page);
  color: var(--ink-2); font:500 var(--fs-100)/1.5 var(--mono); }

/* ── The three columns ────────────────────────────────────────────────────── */

.docs-grid { display:grid; grid-template-columns: var(--nav-w) minmax(0,1fr) var(--toc-w);
             gap: var(--sp-6); align-items:start; }

.docs-nav, .docs-toc { position:sticky; top: var(--docs-top);
                       max-height: calc(100vh - var(--docs-top)); overflow-y:auto;
                       padding-block: var(--sp-6) var(--sp-7); scrollbar-width:thin; }

.docs-nav { border-right:1px solid var(--rule); padding-right: var(--sp-5); }
.docs-nav__group + .docs-nav__group { margin-top: var(--sp-5); }
.docs-nav__h { margin-bottom: var(--sp-2); padding-left: var(--sp-3); }
.docs-nav__link { display:block; padding: 5px var(--sp-3); border-left:2px solid transparent;
                  border-radius: 0 var(--r) var(--r) 0;
                  color: var(--ink-2); font-size: var(--fs-300); line-height:1.45;
                  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.docs-nav__link:hover { background: var(--raised); color: var(--ink); }
.docs-nav__link[aria-current] { border-left-color: var(--signal); background: var(--raised);
                                color: var(--ink); font-weight:500; }

.docs-toc__h { margin-bottom: var(--sp-3); }
.docs-toc__list { border-left:1px solid var(--rule); }
.docs-toc__list a { display:block; margin-left:-1px; padding: 3px 0 3px var(--sp-3);
                    border-left:1px solid transparent;
                    color: var(--ink-3); font-size: var(--fs-200); line-height:1.5;
                    transition: color var(--dur-micro) var(--ease-out); }
.docs-toc__list ul a { padding-left: var(--sp-5); }
.docs-toc__list a:hover { color: var(--ink); }
.docs-toc__list a.is-active { border-left-color: var(--signal); color: var(--ink); }

/* ── The article ──────────────────────────────────────────────────────────── */

.docs-article { min-width:0; max-width: 46rem; padding-block: var(--sp-6) var(--sp-9); }
.docs-crumbs { display:flex; gap: var(--sp-2); margin-bottom: var(--sp-4);
               color: var(--ink-3); font:500 var(--fs-100)/1.4 var(--mono);
               letter-spacing:.12em; text-transform:uppercase; }
.docs-crumbs a:hover { color: var(--ink); }
.docs-title { font-size: var(--fs-700); line-height:1.15; }
.docs-badges { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.docs-badge { padding: 2px var(--sp-2); border:1px solid var(--rule-2); border-radius: var(--r);
              color: var(--ink-2); font:500 var(--fs-100)/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase;
              transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.docs-badge:hover { border-color: var(--ink-3); color: var(--ink); }
.docs-badge--plan { border-color: var(--signal); color: var(--signal); }
.docs-badge--plan:hover { border-color: var(--signal); color: var(--signal); background: color-mix(in srgb, var(--signal) 6%, var(--page)); }
.docs-lede { margin-top: var(--sp-3); max-width: 60ch; color: var(--ink-2);
             font-size: var(--fs-500); line-height:1.55; }

.docs-prose { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top:1px solid var(--rule);
              font-size: var(--fs-400); line-height:1.7; }
.docs-prose > * + * { margin-top: var(--sp-4); }
.docs-prose h2 { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top:1px solid var(--rule);
                 font-size: var(--fs-600); line-height:1.25; letter-spacing:-.02em; }
.docs-prose > h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.docs-prose h3 { margin-top: var(--sp-6); font-size: var(--fs-500); line-height:1.3; letter-spacing:-.015em; }
.docs-prose h4 { margin-top: var(--sp-5); font-size: var(--fs-400); line-height:1.4; letter-spacing:0; font-weight:600; }
.docs-prose h2 + *, .docs-prose h3 + *, .docs-prose h4 + * { margin-top: var(--sp-3); }

.docs-prose strong { color: var(--ink); font-weight:600; }
.docs-prose a:not(.btn):not(.docs-anchor):not(.docs-card) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.docs-prose a:not(.btn):not(.docs-anchor):not(.docs-card):hover { color: var(--signal); text-decoration-color: currentColor; }

.docs-prose ul, .docs-prose ol { padding-left: var(--sp-5); }
.docs-prose ul { list-style: none; }
.docs-prose ul > li { position:relative; }
.docs-prose ul > li::before { content:""; position:absolute; left: calc(-1 * var(--sp-4)); top:.75em;
                              width:5px; height:1px; background: var(--ink-3); }
.docs-prose ol { list-style: decimal; }
.docs-prose ol > li::marker { color: var(--ink-3); font:500 var(--fs-200) var(--mono); }
.docs-prose li + li { margin-top: var(--sp-2); }
.docs-prose li > ul, .docs-prose li > ol, .docs-prose li > p + p,
.docs-prose li > figure, .docs-prose li > .docs-table { margin-top: var(--sp-2); }

.docs-prose :not(pre) > code { padding: 1px 5px; border:1px solid var(--rule); border-radius: var(--r);
                               background: var(--raised); color: var(--ink);
                               font-size: var(--fs-300); overflow-wrap:anywhere; }
.docs-prose hr { height:1px; border:0; background: var(--rule); margin-block: var(--sp-6); }

.docs-prose dl { display:grid; gap: var(--sp-3); }
.docs-prose dt { color: var(--ink); font-weight:600; }
.docs-prose dd { margin: var(--sp-1) 0 0; }

/* The link beside a heading. There for someone who wants to send a colleague
   to this exact section; invisible until the heading is pointed at. */
.docs-anchor { margin-left: var(--sp-2); color: var(--ink-3); font:400 .8em var(--mono);
               opacity:0; transition: opacity var(--dur-micro) var(--ease-out); }
h2:hover .docs-anchor, h3:hover .docs-anchor, .docs-anchor:focus-visible { opacity:1; }
.docs-anchor:hover { color: var(--signal); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.docs-table { overflow-x:auto; border:1px solid var(--rule); border-radius: var(--r); }
.docs-table table { width:100%; border-collapse:collapse; font-size: var(--fs-300); line-height:1.55; }
.docs-table th { padding: var(--sp-2) var(--sp-4); border-bottom:1px solid var(--rule);
                 background: var(--raised); color: var(--ink-3); text-align:left; white-space:nowrap;
                 font:500 var(--fs-100)/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.docs-table td { padding: var(--sp-3) var(--sp-4); border-top:1px solid var(--rule); vertical-align:top; }
.docs-table tr:first-child td { border-top:0; }
.docs-table td:first-child { color: var(--ink); }
.docs-table td code { white-space:nowrap; }

/* ── Code ─────────────────────────────────────────────────────────────────── */

.docs-code { margin-inline:0; }
.docs-code .code__bar { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3);
                        padding-block: var(--sp-1); padding-right: var(--sp-2); }
.docs-code .code__body { padding-block: var(--sp-3); font-size: var(--fs-300); line-height:1.65; color: var(--ink-2); }
.docs-copy { padding: 3px var(--sp-2); border:1px solid transparent; border-radius: var(--r);
             background:none; color: var(--ink-3); font:500 var(--fs-100)/1.6 var(--mono);
             letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
             transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.docs-copy:hover { color: var(--ink); border-color: var(--rule-2); }
.docs-copy:active { transform: translateY(1px); }
.docs-copy[data-copied] { color: var(--ink); }

/* Highlighting in the site's own three inks rather than a borrowed theme: what
   the code does is darkest, what it says about itself is lightest. */
.docs-code .k, .docs-code .kd, .docs-code .kn, .docs-code .kr, .docs-code .kc, .docs-code .kt,
.docs-code .nt, .docs-code .nb, .docs-code .ow { color: var(--ink); font-weight:500; }
.docs-code .nf, .docs-code .nc, .docs-code .nx, .docs-code .na, .docs-code .nn { color: var(--ink); }
.docs-code .s, .docs-code .s1, .docs-code .s2, .docs-code .sb, .docs-code .se, .docs-code .si,
.docs-code .mi, .docs-code .mf, .docs-code .m { color: var(--ink); }
.docs-code .c, .docs-code .c1, .docs-code .cm, .docs-code .ch, .docs-code .cp { color: var(--ink-3); }
.docs-code .p, .docs-code .o { color: var(--ink-3); }
.docs-code .err { color: inherit; }

/* Tabs: several code blocks, one shown. Without the script every block shows,
   each under its own label, which is the same information read downwards. */
.docs-tabs > * + * { margin-top: var(--sp-3); }
.docs-tabs__list { display:flex; flex-wrap:wrap; gap: var(--sp-1); border-bottom:1px solid var(--rule); }
.docs-tabs__tab { margin-bottom:-1px; padding: var(--sp-2) var(--sp-3); border:0; border-bottom:2px solid transparent;
                  background:none; color: var(--ink-3); font:500 var(--fs-300)/1.4 var(--sans); cursor:pointer;
                  transition: color var(--dur-micro) var(--ease-out); }
.docs-tabs__tab:hover { color: var(--ink); }
.docs-tabs__tab[aria-selected="true"] { border-bottom-color: var(--signal); color: var(--ink); }
.docs-tabs[data-ready] > .docs-code { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; border-top:0; }
.docs-tabs[data-ready] > .docs-code .code__label { visibility:hidden; }

/* ── Callouts ─────────────────────────────────────────────────────────────── */

.docs-prose .admonition { padding: var(--sp-3) var(--sp-4); border:1px solid var(--rule);
                          border-left:2px solid var(--ink-3); border-radius: var(--r); background: var(--raised);
                          font-size: var(--fs-300); line-height:1.65; }
.docs-prose .admonition > * + * { margin-top: var(--sp-2); }
.docs-prose .admonition-title { color: var(--ink); font-weight:600; }
.docs-prose .admonition.tip { border-left-color: var(--ok); }
.docs-prose .admonition.warning { border-left-color: var(--warn); }
.docs-prose .admonition.danger { border-left-color: var(--stop); }

/* ── Steps ────────────────────────────────────────────────────────────────── */

.docs-steps > ol { list-style:none; padding-left:0; counter-reset: step; }
.docs-steps > ol > li { position:relative; padding: 0 0 var(--sp-5) var(--sp-7); counter-increment: step; }
.docs-steps > ol > li + li { margin-top:0; }
.docs-steps > ol > li::before { content: counter(step); position:absolute; left:0; top:1px;
                                width:26px; height:26px; display:grid; place-items:center;
                                border:1px solid var(--rule-2); border-radius: var(--r); background: var(--page);
                                color: var(--ink); font:500 var(--fs-200)/1 var(--mono); }
.docs-steps > ol > li::after { content:""; position:absolute; left:13px; top:32px; bottom:4px;
                               width:1px; background: var(--rule); }
.docs-steps > ol > li:last-child { padding-bottom:0; }
.docs-steps > ol > li:last-child::after { display:none; }
.docs-steps > ol > li > p:first-child > strong:first-child { display:block; color: var(--ink); font-size: var(--fs-500); font-weight:500; letter-spacing:-.015em; line-height:1.6; }
.docs-steps > ol > li > * + * { margin-top: var(--sp-3); }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.docs-cards > ul { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3);
                   padding-left:0; }
.docs-cards > ul > li { margin:0; }
.docs-cards > ul > li::before { display:none; }
.docs-cards > ul > li > a:first-child { display:block; height:100%; padding: var(--sp-4);
                         border:1px solid var(--rule); border-radius: var(--r);
                         color: var(--ink-2) !important; font-size: var(--fs-300); line-height:1.55;
                         text-decoration:none !important;
                         transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.docs-cards > ul > li > a:first-child:hover { border-color: var(--ink-3); background: var(--raised); }
.docs-cards > ul > li > a:first-child:active { transform: translateY(1px); }
.docs-cards > ul > li > a strong { display:block; margin-bottom: var(--sp-1); font-size: var(--fs-400); font-weight:500; }

/* ── An API endpoint ──────────────────────────────────────────────────────── */

.docs-endpoint { border:1px solid var(--rule); border-radius: var(--r); padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.docs-endpoint > * + * { margin-top: var(--sp-3); }
.docs-endpoint__sig { display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap;
                      margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) 0; padding: var(--sp-3) var(--sp-4);
                      border-bottom:1px solid var(--rule); background: var(--raised); }
.docs-endpoint__sig code { padding:0 !important; border:0 !important; background:none !important;
                           font-size: var(--fs-300) !important; }
.docs-method { padding: 2px var(--sp-2); border:1px solid var(--rule-2); border-radius: var(--r);
               background: var(--page); color: var(--ink); font:500 var(--fs-100)/1.6 var(--mono); letter-spacing:.08em; }
.docs-method[data-method="POST"] { background: var(--ink); border-color: var(--ink); color: var(--page); }
.docs-endpoint + .docs-endpoint { margin-top: var(--sp-5); }

/* ── Figures ──────────────────────────────────────────────────────────────── */

.docs-figure { margin: var(--sp-5) 0 0; padding: var(--sp-4); border:1px solid var(--rule);
               border-radius: var(--r); background: var(--raised); overflow-x:auto; }
.docs-figure svg { min-width: 540px; }
.docs-figure__narrow { max-width: 420px; margin-inline:auto; }
.docs-figure__narrow svg { min-width:0; }
.docs-figure figcaption { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top:1px solid var(--rule);
                          color: var(--ink-3); font-size: var(--fs-200); line-height:1.6; }
.docs-figure .arch__box { fill: var(--page); }

/* ── Screenshots ──────────────────────────────────────────────────────────── */

.docs-shot { margin: var(--sp-5) 0 0; }
.docs-shot__open { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius: var(--r); }
.docs-shot__open .shot { transition: border-color var(--dur-micro) var(--ease-out); }
.docs-shot__open:hover .shot { border-color: var(--ink-3); }
.docs-shot figcaption { margin-top: var(--sp-2); color: var(--ink-3); font-size: var(--fs-200); line-height:1.6; }

.docs-zoom { width: min(1920px, calc(100vw - var(--sp-5))); max-width:none; max-height: calc(100vh - var(--sp-5));
             margin:auto; padding:0; border:1px solid var(--rule-2); border-radius: var(--r);
             background: var(--page); overflow:auto; box-shadow: 0 24px 64px -16px rgb(0 0 0 / .45); }
.docs-zoom[open] { animation: docs-search-in var(--dur-ui) var(--ease-out); }
.docs-zoom::backdrop { background: rgb(0 0 0 / .6); }
.docs-zoom img { display:block; width:100%; height:auto; cursor:zoom-out; }
.docs-zoom__close { position:sticky; top: var(--sp-3); float:right; margin: var(--sp-3) var(--sp-3) calc(-1 * var(--sp-7)) 0; z-index:1;
                    padding: var(--sp-1) var(--sp-2); border:1px solid var(--rule-2); border-radius: var(--r);
                    background: var(--page); color: var(--ink-2); font:500 var(--fs-200)/1.6 var(--sans); cursor:pointer; }
.docs-zoom__close:hover { border-color: var(--ink-3); color: var(--ink); }

/* ── Previous / next, and the footer of an article ────────────────────────── */

.docs-pager { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-8); }
.docs-pager__link { display:block; padding: var(--sp-4); border:1px solid var(--rule); border-radius: var(--r);
                    transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.docs-pager__link:hover { border-color: var(--ink-3); background: var(--raised); }
.docs-pager__link:active { transform: translateY(1px); }
.docs-pager__link--next { text-align:right; }
.docs-pager__title { display:block; margin-top: var(--sp-1); color: var(--ink); font-weight:500; }
.docs-help { margin-top: var(--sp-5); color: var(--ink-3); font-size: var(--fs-300); }
.docs-help a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset:3px; }
.docs-help a:hover { color: var(--signal); }

/* ── Empty and not-found ──────────────────────────────────────────────────── */

.docs-empty { padding-block: var(--sp-8); max-width: 38rem; }
.docs-empty--page { margin-inline:auto; padding-block: var(--sp-9) var(--sp-10); text-align:center; }
.docs-empty--page .docs-lede { margin-inline:auto; }
.docs-empty__icon { margin: 0 auto var(--sp-5); color: var(--ink-3); }
.docs-empty .label { margin-bottom: var(--sp-3); }
.docs-empty__actions { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.docs-empty--page .docs-empty__actions { justify-content:center; }

/* ── /docs: choosing a product ────────────────────────────────────────────── */

.docs-home { padding-block: var(--sp-8) var(--sp-9); }
.docs-home__head .label { margin-bottom: var(--sp-3); }
.docs-home__title { max-width: 22ch; font-size: var(--fs-800); }
.docs-home__h { font-size: var(--fs-600); letter-spacing:-.02em; }

.docs-products { display:grid; grid-template-columns: 1fr 1fr; margin-top: var(--sp-7);
                 border:1px solid var(--rule); border-radius: var(--r); }
.docs-product { display:flex; flex-direction:column; align-items:flex-start; padding: var(--sp-6); }
.docs-product + .docs-product { border-left:1px solid var(--rule); }
.docs-product.is-pending { background: var(--raised); }
.docs-product__name { margin-top: var(--sp-3); font-size: var(--fs-700); }
.docs-product__tag { margin-top: var(--sp-2); max-width: 44ch; }
.docs-product__note { margin-top: var(--sp-5); max-width: 44ch; color: var(--ink-3); font-size: var(--fs-300); }
.docs-product__links { width:100%; margin-top: var(--sp-5); border-top:1px solid var(--rule); }
.docs-product__links a { display:block; padding: var(--sp-3) 0; border-bottom:1px solid var(--rule);
                         color: var(--ink); font-weight:500;
                         transition: color var(--dur-micro) var(--ease-out); }
.docs-product__links a span { display:block; color: var(--ink-3); font-weight:400; font-size: var(--fs-300); }
.docs-product__links a:hover { color: var(--signal); }
.docs-product .btn { margin-top: auto; }
.docs-product__links + .btn, .docs-product__note + .btn { margin-top: var(--sp-5); }

.docs-home__index { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top:1px solid var(--rule); }
.docs-index { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-6) var(--sp-5);
              margin-top: var(--sp-5); }
.docs-index .label { margin-bottom: var(--sp-2); }
.docs-index a { display:block; padding: 3px 0; color: var(--ink-2); font-size: var(--fs-300); }
.docs-index a:hover { color: var(--signal); }

/* ── Search: the one overlay ──────────────────────────────────────────────── */

.docs-search { width: min(640px, calc(100vw - var(--sp-6))); max-height: min(560px, calc(100vh - 120px));
               margin: 96px auto 0; padding:0; border:1px solid var(--rule-2); border-radius: var(--r);
               background: var(--page); color: var(--ink-2); overflow:hidden;
               box-shadow: 0 24px 64px -16px rgb(0 0 0 / .35); }
.docs-search[open] { display:flex; flex-direction:column;
                     animation: docs-search-in var(--dur-ui) var(--ease-out); }
.docs-search::backdrop { background: rgb(0 0 0 / .35); }
@keyframes docs-search-in { from { opacity:0; transform: translateY(-6px) scale(.985); } }

.docs-search__field { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
                      border-bottom:1px solid var(--rule); color: var(--ink-3); }
.docs-search__field input { flex:1; min-width:0; border:0; outline:0; background:none; color: var(--ink);
                            font:400 var(--fs-500)/1.5 var(--sans); }
.docs-search__field input::-webkit-search-cancel-button { display:none; }
.docs-search__close { padding: 2px var(--sp-2); border:1px solid var(--rule-2); border-radius: var(--r);
                      background: var(--page); color: var(--ink-2); font:500 var(--fs-100)/1.5 var(--mono); cursor:pointer; }
.docs-search__close:hover { border-color: var(--ink-3); color: var(--ink); }

.docs-search__results { flex:1; overflow-y:auto; padding: var(--sp-2); }
.docs-search__group { padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.docs-search__hit { display:block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r); }
.docs-search__hit[aria-selected="true"] { background: var(--raised); }
.docs-search__hit strong { display:block; color: var(--ink); font-size: var(--fs-400); font-weight:500; }
.docs-search__hit strong small { margin-left: var(--sp-2); color: var(--ink-3); font-size: var(--fs-200); font-weight:400; }
.docs-search__hit span { display:block; color: var(--ink-3); font-size: var(--fs-300); line-height:1.5;
                         overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.docs-search__hit mark { background:none; color: var(--ink); font-weight:600;
                         text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset:3px; }
.docs-search__state { padding: var(--sp-6) var(--sp-4); text-align:center; color: var(--ink-3); font-size: var(--fs-300); }
.docs-search__state strong { display:block; margin-bottom: var(--sp-1); color: var(--ink); font-size: var(--fs-400); font-weight:500; }
.docs-search__foot { display:flex; gap: var(--sp-5); padding: var(--sp-2) var(--sp-4); border-top:1px solid var(--rule);
                     background: var(--raised); color: var(--ink-3); font-size: var(--fs-200); }
.docs-search__foot kbd + kbd { margin-left: 3px; }

/* ── Narrower screens ─────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .docs-grid { grid-template-columns: var(--nav-w) minmax(0,1fr); gap: var(--sp-6); }
  .docs-toc { display:none; }
  .docs-index { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 940px) {
  .docs-products { grid-template-columns: 1fr; }
  .docs-product + .docs-product { border-left:0; border-top:1px solid var(--rule); }
  .docs-index { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .docs-grid { grid-template-columns: minmax(0,1fr); }
  .docs-bar__menu { display:inline-flex; }
  .docs-searchbtn { width:auto; margin-left:auto; }
  .docs-searchbtn span, .docs-searchbtn kbd { display:none; }
  .docs-bar__home { display:none; }
  /* The contents become a sheet under the bar. Closed, it is out of the flow
     entirely, so it cannot be tabbed into. */
  .docs-nav { display:none; position:fixed; z-index:45; inset: var(--docs-top) 0 0 0; max-height:none;
              padding: var(--sp-5) var(--sp-6) var(--sp-8); border-right:0; background: var(--page); }
  .docs-nav[data-open] { display:block; }
  .docs-cards > ul { grid-template-columns: 1fr; }
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager__link--next { text-align:left; }
  .docs-home__title { font-size: var(--fs-700); }
}
@media (max-width: 620px) {
  .docs-index { grid-template-columns: 1fr; }
  .docs-search { margin-top: var(--sp-5); }
  .docs-search__foot { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-search[open], .docs-zoom[open] { animation:none; }
}
@media print {
  .docs-bar, .docs-nav, .docs-toc, .docs-pager, .docs-help, .docs-copy { display:none !important; }
  .docs-grid { display:block; }
}