/* zc-supplemental-ui 0.3.0 */
/* 01 tokens: the toolshell palette, copied from toolshell/static/toolshell.css
   (v0.2.0) so the docs and the admin pages read as one product. Change the
   colours there first, then copy them here. Light is the default; dark applies
   when chosen, or under data-theme="auto" when the system asks for it. */
:root{
  --bg:#F4F7FC;--side:#FFFFFF;--surface:#FFFFFF;--raised:#F8FAFF;--pop:#FFFFFF;--thead:#F1F5FB;--subtle:#EEF2F8;--line:#DCE4F0;--line2:#B8C8DD;--field:#F8FAFC;
  --fg:#131A27;--muted:#46566D;--dim:#5E6E85;
  --acc:#2563EB;--acc-hover:#1D4ED8;--acc-sub:#EAF2FF;--acc-line:#9DBEFF;--btn:#2563EB;--btn-top:#3B82F6;--btn-ink:#FFFFFF;
  --ok:#047857;--ok-sub:#D1FAE5;--warn:#92400E;--warn-sub:#FEF3C7;--bad:#BE123C;--bad-sub:#FFE4E6;
  --man:#5B21B6;--man-sub:#EDE9FE;--info:#1D4ED8;--info-sub:#DBEAFE;
  --p-blue:#1D4ED8;--p-blue-sub:#DBEAFE;--p-amber:#9A3412;--p-amber-sub:#FFEDD5;--p-sky:#075985;--p-sky-sub:#E0F2FE;
  --shadow:0 4px 16px rgba(24,48,84,.045);--lift:0 8px 24px rgba(24,48,84,.07);--pop-shadow:0 20px 64px rgba(24,48,84,.16);--hl:inset 0 1px 0 rgba(255,255,255,.9);
  --edge:0 0 16px rgba(59,130,246,.08);--nav-glow:0 0 12px rgba(59,130,246,.07);--btn-glow:0 3px 12px rgba(37,99,235,.18);
  --ok-glow:0 0 8px rgba(4,120,87,.12);--bad-glow:0 0 8px rgba(190,18,60,.10);--acc-glow:0 0 8px rgba(59,130,246,.12);
  --bloom1:rgba(59,130,246,.07);--bloom2:rgba(96,165,250,.045);--bloom3:rgba(37,99,235,0);--grid:rgba(37,99,235,.045);--arc:rgba(37,99,235,.07);
  --ring:0 0 0 3px rgba(37,99,235,.22);--scrim:rgba(15,23,42,.4);
  color-scheme:light;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.2,0,0,1);--ease-in:cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.4,0,1,1);
}
:root[data-theme="dark"]{
    --bg:#070B12;--side:#090E17;--surface:#0D1625;--raised:#111D30;--pop:#101B2C;--thead:#101B2B;--subtle:#132034;--line:#1B2A40;--line2:#2A4263;--field:#0A1220;
    --fg:#F1F5FC;--muted:#A4B3C9;--dim:#75869F;
    --acc:#60A5FA;--acc-hover:#93C5FD;--acc-sub:#102B53;--acc-line:#2059A8;--btn:#2563EB;--btn-top:#3B82F6;--btn-ink:#FFFFFF;
    --ok:#34D399;--ok-sub:#063B30;--warn:#FBBF24;--warn-sub:#422E0B;--bad:#FB7185;--bad-sub:#451D2A;
    --man:#C4B5FD;--man-sub:#2D2450;--info:#60A5FA;--info-sub:#102B53;
    --p-blue:#93C5FD;--p-blue-sub:#153B75;--p-amber:#FDBA74;--p-amber-sub:#422B12;--p-sky:#7DD3FC;--p-sky-sub:#153D52;
    --shadow:0 8px 24px rgba(0,0,0,.20);--lift:0 12px 32px rgba(0,0,0,.26);--pop-shadow:0 24px 80px rgba(0,0,0,.55);--hl:inset 0 1px 0 rgba(255,255,255,.045);
    --edge:0 0 18px rgba(59,130,246,.16);--nav-glow:0 0 16px rgba(59,130,246,.15);--btn-glow:0 4px 16px rgba(37,99,235,.25);
    --ok-glow:0 0 12px rgba(52,211,153,.28);--bad-glow:0 0 12px rgba(251,113,133,.22);--acc-glow:0 0 12px rgba(59,130,246,.30);
    --bloom1:rgba(29,78,216,.19);--bloom2:rgba(59,130,246,.10);--bloom3:rgba(37,99,235,.07);--grid:rgba(96,165,250,.07);--arc:rgba(59,130,246,.12);
    --ring:0 0 0 3px rgba(96,165,250,.35);--scrim:rgba(2,6,14,.62);
    color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --bg:#070B12;--side:#090E17;--surface:#0D1625;--raised:#111D30;--pop:#101B2C;--thead:#101B2B;--subtle:#132034;--line:#1B2A40;--line2:#2A4263;--field:#0A1220;
    --fg:#F1F5FC;--muted:#A4B3C9;--dim:#75869F;
    --acc:#60A5FA;--acc-hover:#93C5FD;--acc-sub:#102B53;--acc-line:#2059A8;--btn:#2563EB;--btn-top:#3B82F6;--btn-ink:#FFFFFF;
    --ok:#34D399;--ok-sub:#063B30;--warn:#FBBF24;--warn-sub:#422E0B;--bad:#FB7185;--bad-sub:#451D2A;
    --man:#C4B5FD;--man-sub:#2D2450;--info:#60A5FA;--info-sub:#102B53;
    --p-blue:#93C5FD;--p-blue-sub:#153B75;--p-amber:#FDBA74;--p-amber-sub:#422B12;--p-sky:#7DD3FC;--p-sky-sub:#153D52;
    --shadow:0 8px 24px rgba(0,0,0,.20);--lift:0 12px 32px rgba(0,0,0,.26);--pop-shadow:0 24px 80px rgba(0,0,0,.55);--hl:inset 0 1px 0 rgba(255,255,255,.045);
    --edge:0 0 18px rgba(59,130,246,.16);--nav-glow:0 0 16px rgba(59,130,246,.15);--btn-glow:0 4px 16px rgba(37,99,235,.25);
    --ok-glow:0 0 12px rgba(52,211,153,.28);--bad-glow:0 0 12px rgba(251,113,133,.22);--acc-glow:0 0 12px rgba(59,130,246,.30);
    --bloom1:rgba(29,78,216,.19);--bloom2:rgba(59,130,246,.10);--bloom3:rgba(37,99,235,.07);--grid:rgba(96,165,250,.07);--arc:rgba(59,130,246,.12);
    --ring:0 0 0 3px rgba(96,165,250,.35);--scrim:rgba(2,6,14,.62);
    color-scheme:dark;
  }
}

/* tokens only the docs use: syntax colours and the reading measure */
:root{
  --measure:46rem;--side-w:272px;--toc-w:232px;--hdr-h:60px;
  --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --code-bg:#F6F8FC;--code-line:#E3E9F3;--code-fg:#1E293B;
  --syn-comment:#556275;--syn-keyword:#7C3AED;--syn-string:#047857;--syn-number:#B45309;--syn-title:#1D4ED8;--syn-attr:#0369A1;--syn-meta:#5E6E85;--syn-deleted:#BE123C;
}
:root[data-theme="dark"]{
  --code-bg:#0A1220;--code-line:#1B2A40;--code-fg:#DCE6F5;
  --syn-comment:#7A8BA3;--syn-keyword:#C4B5FD;--syn-string:#6EE7B7;--syn-number:#FCD34D;--syn-title:#93C5FD;--syn-attr:#7DD3FC;--syn-meta:#75869F;--syn-deleted:#FDA4AF;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --code-bg:#0A1220;--code-line:#1B2A40;--code-fg:#DCE6F5;
    --syn-comment:#7A8BA3;--syn-keyword:#C4B5FD;--syn-string:#6EE7B7;--syn-number:#FCD34D;--syn-title:#93C5FD;--syn-attr:#7DD3FC;--syn-meta:#75869F;--syn-deleted:#FDA4AF;
  }
}

/* 02 shell: the toolshell frame (sidebar, sticky header, menus, dialogs),
   ported from toolshell.css with the admin-only parts left out. Selectors
   follow toolshell's names so a fix there can be carried over line by line. */

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr-h) + 16px);-webkit-text-size-adjust:100%}
body.locked{overflow:hidden}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:15px/1.65 var(--sans);-webkit-font-smoothing:antialiased;position:relative;isolation:isolate}
/* the light field: soft blue blooms and an arc over a grid that fades out */
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1}
body::before{inset:-6%;background:radial-gradient(circle at 68% 8%,transparent 0 27%,var(--arc) 27.1% 27.25%,transparent 27.4%),radial-gradient(60% 50% at 70% 0%,var(--bloom1),transparent 70%),radial-gradient(40% 40% at 95% 24%,var(--bloom2),transparent 70%),radial-gradient(45% 45% at 8% 75%,var(--bloom3),transparent 70%);animation:drift 24s linear infinite alternate}
body::after{inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 72% 10%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 72% 10%,#000 10%,transparent 75%)}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3%,2%,0)}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc-hover);text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
code,kbd,pre{font-family:var(--mono)}
kbd{font-size:11px;line-height:1;padding:3px 5px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;background:var(--surface);color:var(--fg);white-space:nowrap}
.muted{color:var(--muted)}
.skip{position:absolute;inset-inline-start:8px;top:8px;transform:translateY(-200%);z-index:90;background:var(--surface);padding:8px 12px;border-radius:8px;border:1px solid var(--line2)}
.skip:focus{transform:none}
.grow{flex:1}

/* buttons */
button,.btn{font:inherit;font-size:13px;font-weight:600;height:36px;border-radius:9px;border:1px solid var(--line2);color:var(--fg);background:var(--raised);padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;box-shadow:var(--hl);transition:border-color .16s var(--ease),color .16s var(--ease),background-color .16s var(--ease)}
button:hover,.btn:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button svg,.btn svg{width:15px;height:15px;flex:none}
.btn.primary{height:40px;padding:0 18px;background:linear-gradient(180deg,var(--btn-top),var(--btn) 70%);color:var(--btn-ink);border-color:var(--btn-top);box-shadow:var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.primary:hover{color:var(--btn-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--btn-top) 90%,#fff),var(--btn) 80%);box-shadow:var(--btn-glow),0 0 22px rgba(59,130,246,.35)}
.btn.mini{height:28px;padding:0 10px;font-size:12px;border-radius:7px}
.iconbtn{width:32px;height:32px;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;color:var(--muted);border-radius:8px;box-shadow:none}
.iconbtn:hover{background:var(--subtle);color:var(--fg);border-color:transparent}
.iconbtn svg{width:16px;height:16px}

/* shell: a sticky sidebar beside the page; on phones it slides in */
.shell{display:flex;min-height:100vh}
.side{width:var(--side-w);flex:none;padding:18px 12px;display:flex;flex-direction:column;gap:16px;background:color-mix(in srgb,var(--side) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-inline-end:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;view-transition-name:zc-side}
.sidetop{display:flex;align-items:center;gap:8px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);padding:2px 6px;min-width:0}
.brand:hover{text-decoration:none;color:var(--fg)}
.mark{width:30px;height:30px;flex:none}
.mark .ink{fill:currentColor}.mark .spark{fill:var(--btn-top)}
.side .brand .mark{filter:drop-shadow(var(--acc-glow))}
.brand .word{font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.brand .word small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}
.sideclose,.scrim,.drawer,.hdr-brand{display:none}
/* the version picker sits under the brand */
.ver{padding:0 2px}
.vbtn{width:100%;height:38px;justify-content:flex-start;gap:8px;padding:0 10px;background:var(--field);border-color:var(--line);font-weight:500;color:var(--muted)}
.vbtn b{color:var(--fg);font-weight:650}
.vbtn .chev{margin-inline-start:auto;display:inline-flex}
.vbtn .chev svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .18s var(--ease)}
.vbtn:has(+ .menu:popover-open){border-color:var(--acc-line);box-shadow:var(--ring)}
.vbtn:has(+ .menu:popover-open) .chev svg{transform:rotate(-90deg)}
.docnav{display:flex;flex-direction:column;gap:2px}
.navh{font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:14px 10px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docnav>.navh:first-child{margin-top:4px}
.docnav a{display:flex;align-items:center;gap:8px;color:var(--muted);min-height:36px;padding:7px 10px;border-radius:9px;font-size:13.5px;font-weight:500;line-height:1.35;border:1px solid transparent;position:relative;transition:color .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.docnav a.d1{padding-inline-start:22px}.docnav a.d2{padding-inline-start:34px;font-size:13px}
.docnav a svg{width:13px;height:13px;flex:none;color:var(--dim)}
.docnav a .lbl{flex:1;min-width:0}
.docnav a:hover{color:var(--fg);background:var(--subtle);text-decoration:none}
.docnav a.on{color:var(--fg);background:var(--acc-sub);border-color:var(--acc-line);box-shadow:var(--nav-glow),var(--hl)}
.docnav a.on::before{content:"";position:absolute;inset-inline-start:-12px;top:8px;bottom:8px;width:3px;border-start-end-radius:3px;border-end-end-radius:3px;background:var(--acc);box-shadow:var(--acc-glow)}
.docnav a[hidden],.docnav .grp[hidden],.docnav .navh[hidden],.navnone[hidden],.grpitems[hidden],.navfilter[hidden]{display:none}
.grp{display:flex;flex-direction:column;gap:2px}
.grprow{display:flex;align-items:center;gap:2px;position:relative}
.grprow>a,.grprow>.grph{flex:1;min-width:0}
.grph{display:flex;align-items:center;min-height:36px;padding:7px 10px;font-size:13.5px;font-weight:600;color:var(--fg);cursor:pointer;border-radius:9px}
.grph.d1{padding-inline-start:22px}
.grph:hover{background:var(--subtle)}
.grptog{width:30px;height:30px;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:8px;color:var(--dim);box-shadow:none;cursor:pointer}
.grptog:hover{color:var(--fg);background:var(--subtle)}
.grptog svg{width:12px;height:12px;transition:transform .18s var(--ease)}
.grptog[aria-expanded=true] svg{transform:rotate(90deg)}
[dir=rtl] .grptog[aria-expanded=false] svg{transform:rotate(180deg)}
.grpitems{display:flex;flex-direction:column;gap:2px;margin-inline-start:14px;padding-inline-start:4px;border-inline-start:1px solid var(--line)}
.grpitems a.d1,.grpitems .grph.d1{padding-inline-start:10px}
.grpitems a.d2{padding-inline-start:10px}
.grpitems a.on::before{inset-inline-start:-17px}
.navfilter{display:flex;flex:none;align-items:center;gap:8px;height:34px;padding-inline:10px;color:var(--muted);background:var(--field);border:1px solid var(--line);border-radius:9px;box-shadow:var(--hl);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.navfilter:focus-within{border-color:var(--acc-line);box-shadow:var(--ring)}
.navfilter svg{width:13px;height:13px;flex:none}
.navfilter input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--fg);font:inherit;font-size:13px;outline:none;padding:0}
.navfilter input::placeholder{color:var(--muted)}
.navnone{margin:6px 10px;font-size:13px;color:var(--muted)}
.totop{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:20;width:40px;height:40px;border-radius:12px;background:var(--pop);border-color:var(--line);color:var(--fg);box-shadow:var(--pop-shadow);animation:pop .18s var(--ease-in)}
.totop[hidden]{display:none}
.totop svg{width:16px;height:16px;transform:rotate(-90deg)}
.totop:hover{border-color:var(--acc-line);color:var(--acc)}
.doc img.zoomable{cursor:zoom-in}
.doc img.zoomable:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
dialog.zoom{max-width:none;max-height:none;width:100vw;height:100vh;margin:0;padding:0;border:0;background:transparent}
dialog.zoom::backdrop{background:color-mix(in srgb,#000 78%,transparent);backdrop-filter:blur(4px)}
dialog.zoom form,dialog.zoom .zoomshut{width:100%;height:100%;margin:0}
.zoomshut{display:flex;align-items:center;justify-content:center;padding:24px;background:none;border:0;box-shadow:none;cursor:zoom-out}
.zoomshut img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:var(--pop-shadow)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:8px}
.led{display:flex;align-items:center;gap:9px;padding:6px 8px;font-size:12px;font-weight:500;color:var(--fg);border-radius:9px}
a.led:hover{background:var(--subtle);text-decoration:none;color:var(--fg)}
.led small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.led i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:var(--ok-glow);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent),var(--ok-glow)}50%{box-shadow:0 0 0 5px transparent,var(--ok-glow)}}
.body{flex:1;min-width:0;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:1320px;margin:0 auto;padding:28px 40px 40px}
main:focus{outline:none}

/* header: search, links and the theme menu, sticky over the page */
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;min-height:var(--hdr-h);padding:10px 40px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);view-transition-name:zc-hdr}
.hbtn{height:38px;padding:0 12px;gap:8px;background:var(--field);border-color:var(--line);color:var(--fg);font-weight:500;text-decoration:none}
a.hbtn:hover{color:var(--acc)}
.hbtn svg{width:16px;height:16px}
.hbtn .chev svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .18s var(--ease);color:var(--muted)}
.hbtn:has(+ .menu:popover-open){border-color:var(--acc-line);box-shadow:var(--ring)}
.hbtn:has(+ .menu:popover-open) .chev svg{transform:rotate(-90deg)}
.hbtn.theme>span{display:inline-flex}
.hbtn.theme .t-light,.hbtn.theme .t-dark,.hbtn.theme .t-auto{display:none}
[data-theme="light"] .hbtn.theme .t-light,[data-theme="dark"] .hbtn.theme .t-dark,[data-theme="auto"] .hbtn.theme .t-auto{display:inline-flex}

/* search: the field looks like toolshell's palette hint and really is the input */
.search{position:relative;display:flex;align-items:center;gap:8px;width:min(440px,100%);height:38px;padding-inline:10px 8px;color:var(--muted);background:var(--field);border:1px solid var(--line);border-radius:9px;box-shadow:var(--hl);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.search>svg{width:15px;height:15px;flex:none}
.search:focus-within{border-color:var(--acc-line);box-shadow:var(--ring)}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--fg);font:inherit;font-size:13.5px;outline:none;padding:0}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-cancel-button{display:none}
.search input:disabled{cursor:progress}
.search:focus-within kbd{display:none}

/* menus: popovers anchored under the button that opens them */
.menu{position:fixed;inset:auto;margin:6px 0 0;min-width:240px;max-width:calc(100vw - 24px);padding:6px;border:1px solid var(--line2);border-radius:14px;background:var(--pop);color:var(--fg);box-shadow:var(--pop-shadow)}
.menu:popover-open{display:flex;flex-direction:column;gap:1px;animation:pop .14s var(--ease-in)}
[popovertarget=zc-menu]{anchor-name:--zc-menu}#zc-menu{position-anchor:--zc-menu}
[popovertarget=zc-langs]{anchor-name:--zc-langs}#zc-langs{position-anchor:--zc-langs;min-width:200px}
[popovertarget=zc-versions]{anchor-name:--zc-versions}#zc-versions{position-anchor:--zc-versions;min-width:calc(var(--side-w) - 24px)}
@supports (position-area:block-end){.menu{position-area:block-end span-inline-start;position-try-fallbacks:flip-inline}}
@supports (position-area:block-end){#zc-versions{position-area:block-end span-inline-end;position-try-fallbacks:none}}
@supports not (position-area:block-end){.menu{top:58px;inset-inline-end:16px}#zc-versions{top:120px;inset-inline:16px auto}}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:36px;padding:7px 10px;border-radius:9px;border:1px solid transparent;background:none;box-shadow:none;color:var(--fg);font-size:13px;font-weight:500;justify-content:flex-start;text-align:start}
.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--subtle);color:var(--fg);text-decoration:none;border-color:transparent;outline:none}
.menu a svg,.menu button svg{width:16px;height:16px;flex:none;color:var(--muted)}
.menu a>span:first-of-type,.menu button>span:first-of-type{flex:1}
.menu-k{font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:6px 10px 6px}
.menu a.on{color:var(--acc)}.menu a.on svg{color:var(--acc)}
.menu a.missing{color:var(--muted)}
.chip{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:650;line-height:1;background:var(--acc-sub);color:var(--acc);border:1px solid var(--acc-line);flex:none}
.chip.pre{background:var(--warn-sub);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.menu .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;margin:0 4px 6px;background:var(--field);border:1px solid var(--line);border-radius:11px}
.menu .seg button{flex-direction:column;gap:3px;min-height:0;padding:7px 0;font-size:11.5px;justify-content:center;text-align:center}
.menu .seg button>span{flex:none}
.menu .seg button.on{background:var(--acc-sub);border-color:var(--acc-line);box-shadow:var(--nav-glow);color:var(--acc)}
.menu .seg button.on svg{color:var(--acc)}

/* dialogs */
dialog.palette{width:min(600px,calc(100vw - 32px));margin:12vh auto auto;padding:0;border:1px solid var(--acc-line);border-radius:18px;background:var(--pop);color:var(--fg);box-shadow:var(--pop-shadow);overflow:hidden}
dialog.palette[open]{animation:pop .18s var(--ease-in);box-shadow:var(--pop-shadow),var(--edge)}
dialog.palette::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}
dialog.keys{padding:20px 22px;width:min(460px,calc(100vw - 32px))}
dialog.keys h2{font-size:16px;font-weight:650;margin:0 0 14px}
dialog.keys dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0 0 16px;font-size:13.5px;align-items:center}
dialog.keys dt{white-space:nowrap}
dialog.keys dd{margin:0;color:var(--muted)}
dialog.keys form{display:flex;justify-content:flex-end}

/* footer */
.foot{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);margin-top:auto}
.foot-in{max-width:1320px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.foot-brand{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:600}
.foot-brand .mark{width:20px;height:20px}
.foot-brand a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}.foot-brand a:hover{color:var(--acc);text-decoration-color:currentColor}
.foot a{color:var(--muted)}.foot a:hover{color:var(--acc)}

/* not found */
.errpage{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:12vh 16px}
.errcode{font-size:clamp(88px,16vw,148px);font-weight:800;letter-spacing:-.06em;line-height:1;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 10%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(var(--acc-glow))}
.errpage .pg{margin:0}
.errpage .sub{max-width:32rem}
.errpage .acts{margin-top:14px}

/* phones and narrow windows: the sidebar becomes a drawer */
@media (max-width:1000px){
  .drawer,.hdr-brand{display:inline-flex}
  .hdr-brand .mark{width:26px;height:26px}.hdr-brand .brand .word{font-size:16px}.hdr-brand .brand .word small{display:none}
  .side{position:fixed;inset-block:0;inset-inline-start:0;z-index:40;width:min(300px,86vw);transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--pop-shadow);visibility:hidden}
  .shell.open .side{transform:none;visibility:visible}
  .scrim{display:block;position:fixed;inset:0;z-index:30;background:var(--scrim);opacity:0;transition:opacity .22s}
  .shell.open .scrim{opacity:1}.scrim[hidden]{display:none}
  .sideclose{display:inline-flex}
  .hdr{padding:8px 16px;gap:8px}
  main{padding:24px 24px 32px}
  .foot-in{padding:16px 24px}
}
@media (max-width:720px){
  .search{width:38px;padding:0;justify-content:center;flex:none;cursor:text}
  .search kbd{display:none}
  .search input{position:absolute;inset:0;padding-inline:36px 10px;opacity:0}
  .search>svg{position:relative;z-index:1;pointer-events:none}
  .search:focus-within{position:absolute;inset-inline:12px;width:auto;z-index:25;background:var(--pop);padding-inline:10px}
  .search:focus-within input{position:static;opacity:1;padding:0}
  .hbtn .lbl,.hbtn .chev{display:none}
  .hbtn.lang{display:none}
  .hbtn{width:38px;padding:0;flex:none}
  .hdr .grow{display:none}
  .hdr-brand{flex:1;min-width:0}
  .hdr-brand .brand{min-width:0;padding:2px 0}
  .hdr-brand .brand .word{overflow:hidden;text-overflow:ellipsis}
  main{padding:20px 16px 28px}
  .foot-in{padding:16px}
}

/* pages cross-fade; the sidebar and header hold still */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  @view-transition{navigation:none}
}
@media (forced-colors:active){
  .btn,button,.search,.menu{border:1px solid CanvasText}
  .docnav a.on,.menu .seg button.on{outline:2px solid CanvasText;outline-offset:-2px}
}

/* 03 doc: the reading column, the table of contents and every block
   Asciidoctor emits, drawn with toolshell's surfaces and type scale. */

.docgrid{display:grid;grid-template-columns:minmax(0,var(--measure)) var(--toc-w);gap:56px;justify-content:center;align-items:start}
.doc{min-width:0;animation:rise .42s var(--ease-in) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* page header */
.doc .crumb ol,.crumb ol{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0 0 10px;padding:0;font-size:12.5px;color:var(--muted)}
.doc .crumb li{margin:0}
.crumb li+li::before{content:"/";margin-inline-end:4px;color:var(--dim)}
.crumb a,.doc .crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--acc)}
.doc-h{padding-bottom:22px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pg{font-size:34px;font-weight:750;letter-spacing:-.035em;line-height:1.15;margin:0;overflow-wrap:anywhere;color:var(--fg)}
.sub{color:var(--muted);font-size:17px;line-height:1.55;margin:10px 0 0}
.doc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.doc-meta .btn{color:var(--muted);font-weight:550}
.doc-meta .btn:hover{color:var(--acc)}
.doc-meta .btn.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.doc-meta .btn svg{width:14px;height:14px}

/* the table of contents rides along on wide screens */
.toc{position:sticky;top:calc(var(--hdr-h) + 24px);max-height:calc(100vh - var(--hdr-h) - 48px);overflow-y:auto;scrollbar-width:thin;padding-inline-start:16px;border-inline-start:1px solid var(--line);font-size:13px}
.toc[hidden]{display:block;visibility:hidden}
.toc .navh{margin:2px 0 8px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li a{display:block;padding:4px 0;color:var(--muted);line-height:1.4;position:relative;transition:color .16s var(--ease)}
.toc li.l2 a{padding-inline-start:12px;font-size:12.5px}
.toc li a:hover{color:var(--fg);text-decoration:none}
.toc li a.on{color:var(--acc);font-weight:600}
.toc li a.on::before{content:"";position:absolute;inset-inline-start:-17px;top:5px;bottom:5px;width:2px;border-radius:2px;background:var(--acc);box-shadow:var(--acc-glow)}

/* headings */
.doc h2,.doc h3,.doc h4,.doc h5,.doc h6{color:var(--fg);font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0;position:relative;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.doc h2{font-size:24px;margin-top:44px;padding-top:4px}
.doc .sect1:first-child>h2{margin-top:28px}
.doc h3{font-size:19px;margin-top:32px}
.doc h4{font-size:16px;margin-top:26px}
.doc h5,.doc h6{font-size:14px;margin-top:22px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.doc .anchor{position:absolute;inset-inline-start:-1.1em;width:1em;text-align:center;color:var(--dim);opacity:0;text-decoration:none;font-weight:500;transition:opacity .16s var(--ease)}
.doc .anchor::before{content:"#"}
.doc h2:hover .anchor,.doc h3:hover .anchor,.doc h4:hover .anchor,.doc .anchor:focus-visible{opacity:1}
.doc .anchor:hover{color:var(--acc)}

/* blocks: one rhythm for all of them */
.doc p{margin:0}
.doc :is(.paragraph,.ulist,.olist,.dlist,.hdlist,.colist,.admonitionblock,.listingblock,.literalblock,.imageblock,.tw,.exampleblock,.sidebarblock,.quoteblock,.verseblock,.openblock,.videoblock,.stemblock){margin:16px 0 0}
.doc .openblock>.content>:first-child,.doc .sectionbody>:first-child{margin-top:16px}
.doc .title{font-size:12.5px;font-weight:650;color:var(--muted);margin:0 0 6px}
.doc .lead p,.doc .paragraph.lead{font-size:17px;color:var(--fg)}
.doc strong{font-weight:650;color:var(--fg)}
.doc mark{background:var(--warn-sub);color:inherit;padding:0 2px;border-radius:3px}
.doc hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.doc a{text-underline-offset:2px}
.doc .paragraph a,.doc li a,.doc td a,.doc dd a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.doc .paragraph a:hover,.doc li a:hover,.doc td a:hover,.doc dd a:hover{text-decoration-color:currentColor}

/* inline code and keys */
.doc :not(pre)>code{font-size:.86em;background:var(--subtle);border:1px solid var(--line);padding:1px 5px;border-radius:6px;overflow-wrap:anywhere;color:var(--fg)}
.doc a>code{color:var(--acc)}
.doc .keyseq{white-space:nowrap}
.doc .keyseq kbd:not(:first-child){margin-inline-start:2px}

/* lists */
.doc ul,.doc ol{margin:0;padding-inline-start:1.4rem}
.doc li{margin:6px 0 0}
.doc li::marker{color:var(--dim)}
.doc li>p{margin:0}
.doc ul ul,.doc ol ol,.doc ul ol,.doc ol ul{margin-top:4px}
.doc .ulist.checklist ul{list-style:none;padding-inline-start:.2rem}
.doc .ulist.checklist li>p>i,.doc .ulist.checklist input{margin-inline-end:8px}

/* definitions: term on its own line, body set in from a rule */
.doc .dlist>dl{margin:0}
.doc dt{font-weight:650;color:var(--fg);margin-top:16px}
.doc dt:first-child{margin-top:0}
.doc dd{margin:6px 0 0;padding-inline-start:16px;border-inline-start:2px solid var(--line)}
.doc dd>:first-child{margin-top:0}
.doc .hdlist table{border-collapse:collapse}
.doc .hdlist td{padding-block:6px;padding-inline:0 16px;vertical-align:top}
.doc .hdlist1{font-weight:650;white-space:nowrap}

/* code blocks */
.doc .listingblock>.content,.doc .literalblock>.content{position:relative}
.doc pre{margin:0;background:var(--code-bg);color:var(--code-fg);border:1px solid var(--code-line);border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.6;overflow-x:auto;tab-size:2;box-shadow:var(--hl)}
.doc pre code{font-size:inherit;background:none;border:0;padding:0;color:inherit;white-space:pre}
.doc .listingblock>.content[data-lang]::before{content:attr(data-lang);position:absolute;top:8px;inset-inline-end:12px;font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);transition:opacity .16s var(--ease);pointer-events:none}
.doc .listingblock .copy{position:absolute;top:6px;inset-inline-end:6px;height:26px;padding:0 9px;font-size:11.5px;border-radius:7px;background:var(--surface);color:var(--muted);opacity:0;transition:opacity .16s var(--ease)}
.doc .listingblock>.content:hover .copy,.doc .listingblock .copy:focus-visible,.doc .listingblock .copy.on{opacity:1}
.doc .listingblock>.content:hover::before{opacity:0}
.doc .listingblock .copy.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
@media (hover:none){.doc .listingblock .copy{opacity:1}.doc .listingblock>.content[data-lang]::before{display:none}}

/* callouts: a numbered disc in the code and in the list under it */
.doc .conum[data-value]{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--acc);color:var(--btn-ink);font:700 10.5px/1 var(--sans);font-style:normal;vertical-align:1px;user-select:none}
.doc .conum[data-value]::after{content:attr(data-value)}
.doc .conum[data-value]+b{display:none}
.doc pre .conum[data-value]{width:16px;height:16px;font-size:9.5px}
.doc .colist table{border-collapse:collapse}
.doc .colist td{padding-block:4px;padding-inline:0 10px;vertical-align:top;font-size:14px}

/* admonitions: toolshell callouts with the label as a chip */
.doc .admonitionblock>table,.doc .admonitionblock>table>tbody,.doc .admonitionblock tr{display:block}
.doc .admonitionblock>table{border-collapse:collapse;width:100%}
.doc .admonitionblock{--tone:var(--info);--tone-sub:var(--info-sub)}
.doc .admonitionblock.tip{--tone:var(--ok);--tone-sub:var(--ok-sub)}
.doc .admonitionblock.important{--tone:var(--man);--tone-sub:var(--man-sub)}
.doc .admonitionblock.warning,.doc .admonitionblock.caution{--tone:var(--warn);--tone-sub:var(--warn-sub)}
.doc .admonitionblock.caution{--tone:var(--bad);--tone-sub:var(--bad-sub)}
.doc .admonitionblock tr{padding:14px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tone) 28%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--tone-sub) 75%,transparent),color-mix(in srgb,var(--tone-sub) 30%,transparent));box-shadow:var(--hl);position:relative}
.doc .admonitionblock tr::before{content:"";position:absolute;inset-inline-start:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--tone)}
.doc .admonitionblock td{display:block;padding:0}
.doc .admonitionblock td.icon{margin-bottom:6px}
.doc .admonitionblock td.icon .title,.doc .admonitionblock td.icon i::after{display:inline-flex;font:650 10.5px/20px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--tone);margin:0}
.doc .admonitionblock td.icon i::after{content:attr(title)}
.doc .admonitionblock td.icon img{display:none}
.doc .admonitionblock td.content{font-size:14.5px}
.doc .admonitionblock td.content>.title{color:var(--fg)}
.doc .admonitionblock td.content>:first-child{margin-top:0}

/* tables: toolshell's quiet rows inside a panel that scrolls on its own */
.doc .tw{overflow-x:auto;scrollbar-width:thin;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow),var(--hl)}
.doc table.tableblock{border-collapse:collapse;width:100%;margin:0;font-size:14px}
.doc table.tableblock>caption{caption-side:top;text-align:start;padding:10px 14px 0;font-size:12.5px;font-weight:650;color:var(--muted)}
.doc table.tableblock th{text-align:start;color:var(--dim);font-weight:650;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:10px 14px;background:var(--thead);border-bottom:1px solid var(--line);white-space:nowrap}
.doc table.tableblock td{padding:10px 14px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.55}
.doc table.tableblock tr:last-child td{border-bottom:0}
.doc table.tableblock tbody tr:hover td{background:color-mix(in srgb,var(--acc-sub) 35%,transparent)}
.doc table.tableblock td>:first-child,.doc table.tableblock td .content>:first-child{margin-top:0}
.doc table.tableblock td p+p{margin-top:8px}
.doc table.tableblock td code{white-space:nowrap}
.doc table.tableblock col{width:auto!important}
.doc table.tableblock.stretch{width:100%}
.doc th.halign-right,.doc td.halign-right{text-align:end}
.doc th.halign-center,.doc td.halign-center{text-align:center}

/* images */
.doc .imageblock{display:flex;flex-direction:column;align-items:center}
.doc .imageblock .content{max-width:100%}
.doc .imageblock img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--lift)}
.doc .imageblock>.title{margin:10px 0 0;font-weight:500;font-size:13px;text-align:center}
.doc .imageblock.text-left{align-items:flex-start}
.doc span.image img{max-width:100%;vertical-align:middle}

/* containers */
.doc .exampleblock>.content,.doc .sidebarblock>.content{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow),var(--hl)}
.doc .sidebarblock>.content{background:linear-gradient(180deg,var(--raised),var(--surface))}
.doc .sidebarblock>.content>.title{font-size:14px;color:var(--fg);margin-bottom:4px}
.doc .exampleblock>.content>:first-child,.doc .sidebarblock>.content>:first-child,.doc .sidebarblock>.content>.title+*{margin-top:0}
.doc .quoteblock blockquote,.doc .verseblock pre{margin:0;padding-block:4px;padding-inline:18px 0;border-inline-start:3px solid var(--acc-line);color:var(--muted);font-style:italic;background:none;border-radius:0;box-shadow:none;font-family:inherit;font-size:15px;border-top:0;border-bottom:0;border-inline-end:0}
.doc .quoteblock .attribution{margin-top:6px;font-size:13px;color:var(--dim)}

/* tabs, from the Asciidoctor Tabs extension: a quiet strip over the panels */
.doc .tabs>.content>.tablist,.doc .tablist{margin:0}
.doc .tablist>ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.doc .tablist>ul>li{position:relative;margin:0;padding:8px 14px 10px;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--muted);white-space:nowrap;cursor:pointer;border-radius:9px 9px 0 0;transition:color .16s var(--ease),background-color .16s var(--ease)}
.doc .tablist>ul>li p{margin:0}
.doc .tablist>ul>li:hover{color:var(--fg);background:var(--subtle)}
.doc .tablist>ul>li.is-selected{color:var(--acc)}
.doc .tablist>ul>li.is-selected::after{content:"";position:absolute;inset-inline:10px;bottom:0;height:2px;border-radius:2px;background:var(--acc);box-shadow:var(--acc-glow)}
.doc .tablist>ul>li:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.doc .tabpanel{margin:0}
.doc .tabpanel:focus-visible{outline:2px solid var(--acc-line);outline-offset:4px;border-radius:4px}
.doc .tabpanel>:first-child{margin-top:14px}
.doc .tabs.is-loading .tabpanel+.tabpanel,.doc .tabpanel[hidden]{display:none}

/* diagrams: inline SVG drawn with these classes follows the theme. The fill
   and stroke attributes in the file are the fallback for the PDF. */
.doc .imageblock>.content>svg{display:block;max-width:100%;height:auto}
.doc svg .d-box{fill:var(--surface);stroke:var(--line2)}
.doc svg .d-acc{fill:var(--acc-sub);stroke:var(--acc-line)}
.doc svg .d-ok{fill:var(--ok-sub);stroke:color-mix(in srgb,var(--ok) 45%,transparent)}
.doc svg .d-edge{fill:none;stroke:var(--dim)}
.doc svg .d-head{fill:var(--dim)}
.doc svg .d-text{fill:var(--fg);font-family:var(--sans)}
.doc svg .d-sub{fill:var(--muted);font-family:var(--sans)}
.doc svg .d-code{fill:var(--acc);font-family:var(--mono)}
.doc .imageblock.diagram{align-items:stretch}
.doc .imageblock.diagram>.content{padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--raised),var(--surface));box-shadow:var(--shadow),var(--hl);overflow-x:auto}
.doc .imageblock.diagram>.content>svg{margin:0 auto;min-width:560px}
/* a diagram drawn twice, [.diagram.wide] and [.diagram.narrow]: the narrow
   one, top to bottom, replaces the wide one where the wide one would scroll */
.doc .imageblock.diagram.narrow{display:none}
.doc .imageblock.diagram.narrow>.content>svg{min-width:0;max-width:340px;width:100%}
@media (max-width:640px){.doc .imageblock.diagram.wide{display:none}.doc .imageblock.diagram.narrow{display:flex}}
/* a box that scrolls sideways takes keyboard focus (zc.js sets tabindex) */
.doc [data-zc-scroll]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* roles for landing pages: [.hero] open block, [.cta] links, [.cards] list */
.doc .openblock.hero>.content>.paragraph p{font-size:17px;line-height:1.6;color:var(--fg)}
.doc .openblock.hero>.content>.paragraph+.paragraph p{color:var(--muted);font-size:15.5px}
.doc .paragraph.cta p{display:flex;flex-wrap:wrap;gap:10px}
.doc .paragraph.cta a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:9px;border:1px solid var(--line2);background:var(--raised);color:var(--fg);font-size:14px;font-weight:600;text-decoration:none;box-shadow:var(--hl);transition:border-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease)}
.doc .paragraph.cta a:hover{border-color:var(--acc);color:var(--acc);text-decoration:none}
.doc .paragraph.cta a:first-child{background:linear-gradient(180deg,var(--btn-top),var(--btn) 70%);color:var(--btn-ink);border-color:var(--btn-top);box-shadow:var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.22)}
.doc .paragraph.cta a:first-child:hover{color:var(--btn-ink);box-shadow:var(--btn-glow),0 0 22px rgba(59,130,246,.35)}
.doc .ulist.cards>ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.doc .ulist.cards>ul>li{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow),var(--hl);position:relative;font-size:14px;line-height:1.55;color:var(--muted);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.doc .ulist.cards>ul>li strong,.doc .ulist.cards>ul>li>p>a:first-child{display:inline-block;margin-bottom:2px;color:var(--fg);font-size:15px;font-weight:650;text-decoration:none}
/* a card that starts with a link is clickable all over */
.doc .ulist.cards>ul>li>p>a:first-child::after{content:"";position:absolute;inset:0;border-radius:inherit}
.doc .ulist.cards>ul>li:has(>p>a:first-child):hover{border-color:var(--acc-line);box-shadow:var(--lift),var(--edge)}
.doc .ulist.cards>ul>li:has(>p>a:first-child):hover>p>a:first-child{color:var(--acc)}

/* previous and next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px}
.pager a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow),var(--hl);color:var(--fg);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.pager a:hover{border-color:var(--acc-line);box-shadow:var(--lift),var(--edge);text-decoration:none}
.pager small{font-size:11.5px;color:var(--muted)}
.pager b{font-weight:650;color:var(--acc)}
.pager .prev small::before{content:"← "}
.pager .next{grid-column:2;text-align:end}
.pager .next small::after{content:" →"}
[dir=rtl] .pager .prev small::before{content:"→ "}[dir=rtl] .pager .next small::after{content:" ←"}
.doc-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-top:24px;font-size:13px;color:var(--muted)}
.doc-f .updated time{color:var(--fg)}
.doc-f a{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.doc-f a:hover{color:var(--acc)}
.doc-f svg{width:14px;height:14px}

@media (max-width:1240px){
  .docgrid{grid-template-columns:minmax(0,var(--measure));gap:0}
  .toc{display:none}
}
@media (max-width:720px){
  body{font-size:15px}
  .pg{font-size:27px}
  .sub{font-size:15.5px}
  .doc h2{font-size:21px;margin-top:36px}
  .doc h3{font-size:17px}
  .doc .anchor{display:none}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
  .doc table.tableblock td code{white-space:normal}
}

/* 04 highlight: highlight.js token colours from the theme tokens, so code
   follows light and dark without a second stylesheet. */
.hljs{color:var(--code-fg);background:none}
.hljs-comment,.hljs-quote{color:var(--syn-comment);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-built_in,.hljs-type,.hljs-doctag{color:var(--syn-keyword)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-symbol,.hljs-template-tag{color:var(--syn-string)}
.hljs-number,.hljs-bullet,.hljs-link{color:var(--syn-number)}
.hljs-title,.hljs-section,.hljs-function .hljs-title,.hljs-title.function_,.hljs-name{color:var(--syn-title)}
.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.hljs-property,.hljs-selector-class,.hljs-selector-id{color:var(--syn-attr)}
.hljs-meta,.hljs-meta .hljs-keyword,.hljs-subst{color:var(--syn-meta)}
.hljs-deletion{color:var(--syn-deleted)}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
/* console: the prompt steps back, the command reads as the main thing */
code[data-lang=console] .hljs-meta.prompt_,code[data-lang=console] .hljs-meta{color:var(--syn-meta);user-select:none}

/* 05 search: the lunr extension's result list, as a toolshell popover. The
   extension appends its own stylesheet after this one, so every rule here is
   one class more specific than the one it replaces. */
.search .search-result-dropdown-menu{position:absolute;z-index:60;top:calc(100% + 8px);inset-inline-start:-1px;inset-inline-end:auto;width:min(620px,calc(100vw - 32px));min-width:0;max-width:none;margin:0;padding:0;border:0;border-radius:14px;background:none;box-shadow:none;text-align:start}
.search .search-result-dataset{border:1px solid var(--line2);border-radius:14px;background:var(--pop);color:var(--fg);box-shadow:var(--pop-shadow),var(--edge);padding:6px;max-height:min(70vh,560px);overflow:auto;animation:pop .14s var(--ease-in)}
.search .search-result-component-header{display:none}
.search .search-result-item{display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:12px;margin:0;padding:6px;border-radius:10px}
.search .search-result-item+.search-result-item{border-top:1px solid var(--line);border-radius:0}
.search .search-result-document-title{width:auto;border:0;position:static;padding:6px 0;text-align:start;color:var(--fg);font-size:13px;font-weight:650}
.search .search-result-document-hit{font-size:12.5px;color:var(--muted)}
.search .search-result-document-hit>a{display:block;padding:6px 10px;scroll-margin:6px;border-radius:9px;color:inherit;border:1px solid transparent}
.search .search-result-document-hit>a:hover,.search .search-result-document-hit>a:focus-visible,.search .search-result-document-hit>a.on{background:var(--acc-sub);border-color:var(--acc-line);text-decoration:none;color:var(--fg);outline:none}
.search .search-result-document-hit .search-result-section-title{color:var(--fg);font-weight:600;font-size:inherit;margin-bottom:2px}
.search .search-result-document-hit .search-result-highlight,.search .search-result-highlight{color:var(--acc);font-weight:650;background:none;padding:0}
.search .search-result-keywords{display:none}
.search .search-result-dataset>.search-result-item:only-child:not(:has(a)),.search .search-result-dataset>div:not([class]){padding:14px;color:var(--muted);font-size:13px}
@media (max-width:720px){
  .search .search-result-dropdown-menu{position:fixed;top:calc(var(--hdr-h) + 4px);inset-inline:12px;width:auto}
  .search .search-result-item{grid-template-columns:1fr;gap:0}
}

/* 06 print: the page alone, on white, with link targets spelled out. The PDF
   of the whole guide comes from asciidoctor-pdf; this is for one page. */
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#111;font-size:11pt}
  body::before,body::after,.side,.hdr,.toc,.foot,.pager,.doc-f,.skip,.scrim,.copy,dialog,.doc-meta,.menu,.totop{display:none!important}
  .doc .tabpanel[hidden]{display:block!important}
  .doc .tablist{display:none}
  .shell,.body,main,.docgrid{display:block;padding:0;margin:0;max-width:none}
  .doc{animation:none}
  .doc a{color:inherit;text-decoration:underline}
  .doc .paragraph a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  .doc pre,.doc .tw,.doc .admonitionblock tr,.doc .imageblock img,.doc .exampleblock>.content,.doc .sidebarblock>.content{box-shadow:none;break-inside:avoid}
  .doc pre{white-space:pre-wrap;border-color:#ccc;background:#f7f7f7}
  .doc h2,.doc h3{break-after:avoid}
  .doc .anchor,.doc .listingblock>.content::before{display:none}
}

/* 07 i18n: right-to-left pages and scripts that need their own type
   settings. Most of the layout already uses logical properties, so this only
   flips what has a direction of its own: gradients, the drawer, code. */

/* code reads left to right in every language */
.doc .listingblock>.content,.doc .literalblock>.content,.doc pre{direction:ltr;text-align:left}
.doc :not(pre)>code{direction:ltr;unicode-bidi:isolate}
/* key names read left to right, "Ctrl K" and "⌘K" alike */
kbd{direction:ltr;unicode-bidi:isolate}
.doc .imageblock svg{direction:ltr}

[dir=rtl] .docnav a.on{background:linear-gradient(270deg,var(--acc-sub),color-mix(in srgb,var(--acc-sub) 55%,transparent))}
[dir=rtl] .doc .admonitionblock tr{background:linear-gradient(270deg,color-mix(in srgb,var(--tone-sub) 75%,transparent),color-mix(in srgb,var(--tone-sub) 30%,transparent))}
[dir=rtl] .menu .seg button svg,[dir=rtl] .doc-meta svg{transform:none}
@media (max-width:1000px){
  [dir=rtl] .side{transform:translateX(102%)}
  [dir=rtl] .shell.open .side{transform:none}
}

/* Arabic script: letter spacing breaks the joins between letters, and the
   script needs a little more size and line height to read as easily. */
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps)){
  --sans:system-ui,-apple-system,"SF Arabic","Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
}
:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps)) *{letter-spacing:0!important}
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps)) body{font-size:16px;line-height:1.8}
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps)) :is(.pg,.doc h2,.doc h3,.doc h4){line-height:1.45}
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps)) .navh{font-size:11.5px}
:root:is(:lang(ar),:lang(fa),:lang(ur),:lang(ps)) .doc .admonitionblock td.icon i::after{font-size:12px}