/* Docs pages: sidebar, article, on-this-page list. Builds on site.css. */
.navlink.on { background: var(--pink); color: #2c0716; box-shadow: 0 3px 0 var(--pink-d), 0 6px 0 var(--drop); }

.docs-grid {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 210px; gap: 44px;
  max-width: 1320px; padding-block: 36px 72px;
}

/* sidebar */
.side { position: relative; }
.side-menu { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 18px;
  border-right: 2px dashed var(--line); }
.side-menu > summary { display: none; }
.side-sec { display: grid; gap: 2px; margin-bottom: 22px; }
.side-sec p { margin: 0 0 6px; font: 700 15px var(--font-round); color: var(--yellow); }
.side-sec.s1 p { color: var(--lilac); }
.side-sec.s2 p { color: var(--pink); }
.side-sec a { padding: 6px 10px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.side-sec a:hover { color: var(--ink); background: var(--panel); }
.side-sec a[aria-current="page"] { background: var(--yellow); color: #2a1d00; font-weight: 600; box-shadow: 0 3px 0 var(--yellow-d); }
.side-extra { display: grid; gap: 10px; padding: 4px 10px 8px; }
.side-extra a { color: var(--muted); text-decoration: none; font: 600 14px var(--font-round); }
.side-extra a.try { color: var(--cyan); }
.side-extra a:hover { color: var(--ink); }

/* article */
.article { min-width: 0; max-width: 820px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chips .chip { padding: 4px 10px; border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink-2); font: 600 12.5px var(--font-round); text-decoration: none; }
a.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--lilac); }
.doc-title { margin: 0 0 26px; font-size: clamp(22px, 3.2vw, 34px); color: var(--yellow); --fd: var(--yellow-d); text-wrap: balance; }
.article p, .article li { font-size: 17px; line-height: 1.75; }
.article p { margin: 0 0 18px; }
.article strong { color: var(--ink); }
.article a { color: var(--cyan); text-underline-offset: 3px; }
.article a:hover { color: var(--ink); }
.article .ext { margin-left: 2px; font-size: .8em; }
.article h2, .article h3, .article h4 { color: var(--ink); scroll-margin-top: 84px; text-wrap: balance; }
.article h2 { display: flex; align-items: center; gap: 10px; margin: 52px 0 16px; font: 700 26px/1.25 var(--font-round); }
.article h3 { margin: 34px 0 12px; font: 700 20px/1.3 var(--font-round); }
.article h4 { margin: 26px 0 10px; font: 700 17px/1.3 var(--font-round); }
.article h2 a, .article h3 a, .article h4 a { color: inherit; text-decoration: none; }
.article h2 .star { flex: none; width: 14px; height: 14px; background: var(--yellow);
  clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); }
.article ul, .article ol { margin: 0 0 20px; padding-left: 22px; }
.article ul li::marker { content: "■  "; color: var(--pink); font-size: .7em; }
.article li { margin: 4px 0; }
.article :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--yellow); font: 500 .86em var(--font-mono); overflow-wrap: anywhere; }
.article hr { border: 0; border-top: 2px dashed var(--line); margin: 40px 0; }
.article blockquote { margin: 0 0 20px; padding: 12px 18px; border-radius: 12px; background: var(--panel);
  box-shadow: inset 4px 0 0 var(--lilac); }
.article blockquote p:last-child { margin: 0; }

/* code */
figure.code { margin: 0 0 22px; border-radius: 14px; background: var(--screen); overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--cyan), 0 5px 0 var(--cyan-d), 0 9px 0 var(--drop); }
figure.code figcaption { display: flex; align-items: center; gap: 12px; padding: 8px 14px 0; }
figure.code .code-file { color: var(--muted); font: 500 12.5px var(--font-mono); text-decoration: none; }
figure.code .code-file:hover { color: var(--cyan); }
figure.code .code-lang { margin-left: auto; color: var(--cyan); font: 400 9px var(--font-px); letter-spacing: .08em; text-transform: uppercase; }
figure.code pre { margin: 0; padding: 14px 18px 18px; overflow-x: auto; background: transparent !important;
  font: 400 14px/1.65 var(--font-mono); tab-size: 4; }

/* tables */
.table-wrap { margin: 0 0 24px; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line); }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article th { padding: 12px 14px; text-align: left; background: var(--panel-2); color: var(--yellow); font: 700 14px var(--font-round); }
.article td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.article td code { white-space: nowrap; }

/* pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 2px dashed var(--line); }
.pager a { display: grid; gap: 2px; padding: 16px 20px; border-radius: 14px; background: var(--panel); text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--drop); }
.pager a:hover { box-shadow: inset 0 0 0 2px var(--lilac), 0 4px 0 var(--drop); }
.pager .next { text-align: right; grid-column: 2; }
.pager span { color: var(--muted); font: 600 13px var(--font-round); }
.pager b { color: var(--ink); font: 700 17px var(--font-round); }

/* on this page */
.toc { position: sticky; top: 92px; align-self: start; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow: auto; }
.toc p { margin: 0 0 8px; color: var(--muted); font: 400 9px var(--font-px); letter-spacing: .12em; text-transform: uppercase; }
.toc a { padding: 4px 0 4px 12px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.4; }
.toc a.d3 { padding-left: 24px; font-size: 13.5px; }
.toc a:hover { color: var(--ink); border-color: var(--yellow); }

footer.site .built { margin: 0 auto; padding-bottom: 22px; color: var(--dim); font: 400 12px var(--font-mono); }

@media (max-width: 1180px) {
  .docs-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 899px) {
  .docs-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 20px 56px; }
  .side-menu { position: static; max-height: none; padding: 0; border: 0; border-radius: 14px; background: var(--panel);
    box-shadow: inset 0 0 0 2px var(--line); }
  .side-menu > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer;
    list-style: none; color: var(--ink); font: 600 15px var(--font-round); }
  .side-menu > summary::-webkit-details-marker { display: none; }
  .side-menu > summary::after { content: "☰"; color: var(--yellow); }
  .side-menu[open] { padding-bottom: 8px; }
  .side-sec, .side-extra { padding: 0 12px; }
  .article p, .article li { font-size: 16px; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { grid-column: 1; }
}