/* Wiki layout: nav | article | "On this page". Colours and frames come from the skin tokens. */
.wiki { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 40px; padding-top: 40px; padding-bottom: 72px; }
.wiki-toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; font-size: 14.5px; }
/* The left nav reuses the components sidebar (.side in core.css and the skin); only the group titles are the wiki's. */
.wiki-group { margin: 14px 0 4px; padding: 0 10px; font-weight: 600; font-size: 13.5px; color: var(--fg); }
.side .wiki-group:first-of-type, .wiki-toc .wiki-group { margin-top: 0; }
.wiki-toc .wiki-group { padding: 0; }
.wiki-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wiki-toc ul { border-left: 2px solid var(--line, var(--faint)); }
.wiki-toc a { display: block; padding: 3px 12px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--soft); }
.wiki-toc a { transition: color 120ms, border-color 120ms, background-color 120ms; }
.wiki-toc a:hover { color: var(--fg); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .wiki-toc a { transition: none; } }
.wiki-toc a.on { color: var(--fg); border-left-color: var(--accent); font-weight: 500; }
.wiki-body { max-width: 720px; }
.wiki-body .crumbs { font-size: 14px; color: var(--soft); }
.wiki-body .crumbs a { text-decoration: none; }
.wiki-body .crumbs [aria-current] { color: var(--fg); }
.wiki-body h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; margin: 10px 0 12px; }
.wiki-body .lead { font-size: 19px; color: var(--soft); margin: 0 0 32px; }
.wiki-body section { scroll-margin-top: 90px; margin: 36px 0 0; padding: 0; border: 0; }
.wiki-body h2 { font-size: 24px; margin: 0 0 10px; }
.callout { margin: 18px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: var(--radius); }
.callout-warn { border-left-color: var(--fg); }
.callout p { margin: 0; }
.callout p + p { margin-top: 6px; }
.callout-title { font-weight: 600; }
details.more { margin: 18px 0; padding: 10px 16px; border: 1px solid var(--line, var(--faint)); border-radius: var(--radius); }
details.more > summary { cursor: pointer; font-weight: 500; }
details.more[open] > summary { margin-bottom: 8px; }
ol.steps { list-style: none; counter-reset: st; padding: 0; margin: 12px 0 18px; display: grid; gap: 10px; }
ol.steps li { counter-increment: st; position: relative; padding-left: 40px; min-height: 28px; }
ol.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--sel-fg); background: var(--sel); border-radius: 50%; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.path { display: grid; gap: 4px; padding: 18px; text-decoration: none; }
.path b { font-size: 18px; }
.path span { color: inherit; opacity: .8; }
.wiki-body pre.code { max-width: 100%; }
@media (max-width: 1100px) {
  .wiki { grid-template-columns: 200px minmax(0, 1fr); }
  .wiki-toc { display: none; }
}
@media (max-width: 820px) {
  .wiki { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; }
  .paths { grid-template-columns: 1fr; }
}