/* Shared documentation layout — a sticky table-of-contents rail beside a max-width prose column.
   Inherits the site palette from styles.css (--ink/--muted/--rule/--accent/--tile/--bg). */

.doclayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 78rem;
  margin: 0 auto;
  padding: 3.6rem 1.4rem 0;
}
@media (min-width: 60rem) {
  .doclayout { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; }
}

/* ── the TOC rail ── */
.toc { display: none; }
@media (min-width: 60rem) {
  .toc {
    display: block;
    position: sticky;
    top: 4.2rem;
    align-self: start;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    font-size: 0.82rem;
    line-height: 1.9;
    padding-bottom: 2rem;
  }
}
.toc .lib { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin: 0 0 0.4rem; }
.toc a { display: block; color: var(--muted); text-decoration: none; padding: 0.02rem 0; }
.toc a:hover { color: var(--ink); }
.toc a.sub { padding-left: 0.9rem; font-size: 0.78rem; color: var(--faint); }
.toc a.sub:hover { color: var(--muted); }

/* ── prose column ── */
.prose { min-width: 0; max-width: 46rem; padding-bottom: 7rem; }
.prose .lead { font-size: 1.05rem; color: var(--muted); line-height: 1.7; margin: 0 0 2.4rem; }
.prose h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.prose .kicker { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 0 0 0.7rem; opacity: 0.8; }
.prose h2 {
  font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em;
  margin: 3.2rem 0 0.9rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  scroll-margin-top: 4.5rem;
}
.prose h3 { font-size: 1.05rem; font-weight: 600; margin: 1.8rem 0 0.5rem; scroll-margin-top: 4.5rem; }
.prose p { margin: 0 0 1.05rem; line-height: 1.72; }
.prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.2rem; line-height: 1.7; }
.prose li { margin: 0.2rem 0; }
.prose a { color: var(--ink); text-underline-offset: 2px; text-decoration-color: var(--faint); }
.prose strong { font-weight: 600; }
.prose em { color: var(--muted); font-style: normal; }

/* inline + block code */
.prose code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 0.86em; background: var(--tile); padding: 0.08rem 0.34rem; border-radius: 4px;
}
.prose pre {
  background: var(--tile); border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.95rem 1.1rem; overflow-x: auto; margin: 0 0 1.4rem; line-height: 1.55;
}
.prose pre code { background: none; padding: 0; font-size: 0.82rem; }

/* figures (screenshots) — assets are rendered at 2×, so cap the displayed width at the logical size
   (the per-figure `style="width:…"`) to keep them crisp but not huge; never exceed the column. */
.prose figure { margin: 1.6rem 0 1.8rem; }
.prose figure img {
  display: block; max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 10px;
}
.prose figure.tight img { display: inline-block; max-width: 100%; height: auto; }
.prose figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 0.55rem; }

/* rendered SVG diagrams (replacing ASCII art) — theme-aware via CSS vars, responsive */
.prose figure.diagram-svg { margin: 1.4rem 0 1.8rem; }
.prose figure.diagram-svg svg { width: 100%; height: auto; max-width: 100%; }
.prose figure.diagram-svg text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.d-box { fill: var(--tile); stroke: var(--rule); }
.d-box-accent { fill: var(--tile); stroke: var(--accent); }
.d-title { fill: var(--ink); font-weight: 600; }
.d-label { fill: var(--ink); }
.d-muted { fill: var(--muted); }
.d-line { stroke: var(--rule); fill: none; }
.d-flow { stroke: var(--accent); fill: none; }
.d-dot { fill: var(--accent); }

/* a gallery of small captioned shots */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.2rem; margin: 1.4rem 0 1.8rem; }
.shots figure { margin: 0; }
.shots img { border: 1px solid var(--rule); border-radius: 8px; width: 100%; background: #1a1c22; }
.shots figcaption { margin-top: 0.45rem; font-size: 0.78rem; }
.shots .name { color: var(--ink); }
.shots .desc { color: var(--muted); }

/* a callout / aside */
.note {
  border-left: 2px solid var(--accent); background: var(--tile);
  padding: 0.75rem 1rem; border-radius: 0 6px 6px 0; margin: 0 0 1.4rem;
  font-size: 0.92rem; color: var(--muted);
}
.note strong { color: var(--ink); }

/* a small module/widget reference list */
.deflist { margin: 0.4rem 0 1.6rem; }
.deflist dt { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86rem; color: var(--ink); margin-top: 0.9rem; }
.deflist dd { margin: 0.15rem 0 0; color: var(--muted); line-height: 1.6; }

/* an ascii/diagram block that shouldn't be syntax-highlighted */
.prose pre.diagram { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }

/* page footer nav between the two libraries */
.docnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.docnav a { color: var(--muted); text-decoration: none; }
.docnav a:hover { color: var(--ink); }