/* docs.golem.team layout, on top of the marketing site's site.css tokens. */

.skip { position: absolute; left: -999px; top: 0; z-index: 100; }
.skip:focus { left: 1rem; top: 0.6rem; background: var(--amber); color: var(--hard); padding: 0.5rem 0.8rem; font-family: var(--mono); font-size: var(--step--1); }

.topbar nav a.txt[aria-current] { color: var(--amber); }

.docs {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr) 13rem;
  gap: 3rem;
  max-width: 86rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
@media (max-width: 78rem) {
  .docs { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; }
  .toc { display: none; }
}
@media (max-width: 52rem) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.4rem 1rem 3rem; }
  .sidenav { display: none; }
}

/* ---- Sidebar ---- */
.sidenav, .toc {
  position: sticky; top: 4.6rem; align-self: start;
  max-height: calc(100vh - 5.6rem); overflow-y: auto;
  scrollbar-width: thin;
}
.navgroup + .navgroup { margin-top: 1.5rem; }
.navgroup .label { margin-bottom: 0.45rem; font-size: 0.66rem; }
.navgroup ul, .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.navgroup a, .toc a {
  display: block; padding: 0.26rem 0 0.26rem 0.9rem; margin-left: -1px;
  border-left: 2px solid transparent; color: var(--bone-dim); text-decoration: none;
  font-size: var(--step--1); line-height: 1.4;
}
.navgroup a:hover, .toc a:hover { color: var(--amber); }
.navgroup a[aria-current="page"] { color: var(--bone); border-left-color: var(--amber); font-weight: 600; }
.toc .label { font-size: 0.66rem; margin-bottom: 0.45rem; }

.mnav { display: none; margin: 0 0 1.6rem; border: 2px solid var(--line); background: var(--raised); box-shadow: 4px 4px 0 var(--hard); }
.mnav summary { cursor: pointer; padding: 0.7rem 0.9rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::before { content: "▸ "; color: var(--amber); }
.mnav[open] summary::before { content: "▾ "; }
.mnav > nav { padding: 0.2rem 0.9rem 1rem; }
@media (max-width: 52rem) { .mnav { display: block; } }

/* ---- Article ---- */
.doc { min-width: 0; max-width: 46rem; }
.doc > h1 { font-size: var(--step-3); letter-spacing: -0.015em; margin-top: 0.6rem; overflow-wrap: break-word; }
.doc > .dek { margin-top: 1rem; max-width: 40rem; }

.prose { margin-top: 2.2rem; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.05rem; }
.prose p, .prose li { max-width: 44rem; }
.prose h2 { font-size: var(--step-2); margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2.1rem; scroll-margin-top: 5rem; }
.prose h4 { font-family: var(--mono); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-top: 1.8rem; scroll-margin-top: 5rem; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.8rem; }
.prose .hash { margin-left: 0.45rem; color: var(--stone); text-decoration: none; font-family: var(--mono); font-size: 0.7em; opacity: 0; }
.prose :is(h2, h3, h4):hover .hash, .prose .hash:focus-visible { opacity: 1; }
.prose strong { color: var(--bone); }
.prose em { color: var(--bone); }
.prose a { text-underline-offset: 0.16em; }

.prose ul, .prose ol { margin-bottom: 0; padding-left: 1.4rem; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: "▸"; position: absolute; left: -1.2rem; color: var(--amber); font-size: 0.85em; top: 0.1em; }
.prose ol > li::marker { font-family: var(--mono); color: var(--amber); font-size: 0.9em; }
.prose li + li { margin-top: 0.45rem; }
.prose li > * + * { margin-top: 0.7rem; }
.prose li > ul, .prose li > ol { margin-top: 0.45rem; }

.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--sunk); border: 1px solid var(--line); padding: 0.06em 0.35em; overflow-wrap: anywhere; }
.codeblock { position: relative; }
.prose pre {
  margin: 0; background: var(--sunk); border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--hard);
  padding: 0.9rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: var(--step--1); line-height: 1.6; color: var(--bone);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.copy {
  position: absolute; top: 0.45rem; right: 0.45rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--raised); color: var(--bone-dim); border: 1.5px solid var(--line); padding: 0.25rem 0.5rem; cursor: pointer;
}
.copy:hover { color: var(--amber); }
.codeblock pre { padding-right: 4.2rem; }
@media (max-width: 46rem) { .codeblock pre { padding: 2.1rem 1rem 0.9rem; } }

.prose pre.mermaid { background: var(--raised); text-align: center; color: var(--bone-dim); padding: 1.2rem 1rem; white-space: pre; }
.prose pre.mermaid[data-processed] { white-space: normal; }
.prose pre.mermaid svg { max-width: 100%; height: auto; }
.prose pre.mermaid .label { font-family: var(--sans); font-size: inherit; letter-spacing: normal; text-transform: none; color: inherit; margin: 0; }

.prose blockquote { margin-left: 0; margin-right: 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--line); color: var(--bone-dim); }
.prose blockquote > * + * { margin-top: 0.7rem; }

.callout { background: var(--raised); border: 2px solid var(--line); border-left: 3px solid var(--amber); box-shadow: 4px 4px 0 var(--hard); padding: 0.9rem 1.1rem 1rem; }
.callout > * + * { margin-top: 0.6rem; }
.callout .k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.callout.tip { border-left-color: var(--good); }
.callout.tip .k { color: var(--good); }
.callout.warning { border-left-color: var(--bad); }
.callout.warning .k { color: var(--bad); }
.callout p { color: var(--bone-dim); }

.table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); text-align: left; font-weight: 400; padding: 0 0.9rem 0.6rem 0; vertical-align: bottom; }
.prose td { border-top: 1px solid var(--line); padding: 0.6rem 0.9rem 0.6rem 0; color: var(--bone-dim); vertical-align: top; line-height: 1.5; }
.prose td:first-child { color: var(--bone); }
.prose td code { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 46rem) { .prose td code { white-space: normal; overflow-wrap: anywhere; } }

.prose hr { border: 0; border-top: 1px dashed var(--line); margin: 2.2rem 0; }
.prose img { display: block; max-width: 100%; height: auto; border: 2px solid var(--line); box-shadow: 5px 5px 0 var(--hard); background: var(--sunk); }

/* ---- Pager and meta ---- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; }
.pager a { display: block; padding: 0.9rem 1rem; border: 2px solid var(--line); background: var(--raised); box-shadow: 4px 4px 0 var(--hard); text-decoration: none; color: var(--bone); font-family: var(--serif); font-size: var(--step-0); font-weight: 600; }
.pager a span { display: block; font-family: var(--mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.25rem; }
.pager a:hover { color: var(--amber); }
.pager .next { grid-column: 2; text-align: right; }
@media (max-width: 30rem) { .pager { grid-template-columns: 1fr; } .pager .next { grid-column: 1; } }
.meta { margin-top: 1.6rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--stone); }
.meta a { color: var(--stone); }
.meta a:hover { color: var(--amber); }

footer { border-top: 1px solid var(--line); }
.foot-mark { font-family: var(--mono); letter-spacing: 0.08em; color: var(--stone); }