/* The guide: a fixed index on the left, one long column of text. */

.crumb { font: 500 0.95rem var(--sans); color: var(--muted); margin-left: 4px; }

.guide {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 64px;
  padding: 48px 0 104px;
}

.toc {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  font-size: 0.9rem;
  padding-right: 8px;
}
.toc-title { font: 600 0.75rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.toc-part { margin: 18px 0 6px; font-weight: 600; }
.toc-part span { color: var(--accent-ink); font-size: 0.78rem; letter-spacing: 0.06em; margin-right: 4px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--accent-ink); }
.toc ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: 4px 0 4px 10px; color: var(--muted); }
.toc li a:hover { color: var(--ink); }

.guide-body { max-width: 46rem; }
.guide-body > * + * { margin-top: 18px; }
.guide-body [id] { scroll-margin-top: 88px; }
.guide-title { font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.guide-body p, .guide-body li { color: var(--ink); }
.guide-body ul, .guide-body ol { padding-left: 1.3em; }
.guide-body li + li { margin-top: 6px; }
.guide-body code { font: 0.9em var(--mono); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

.part { margin-top: 88px !important; padding-top: 28px; border-top: 2px solid var(--accent); }
.part h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.part p { margin-top: 10px; color: var(--muted); font-size: 1.1rem; }
.section { font-size: 1.45rem; margin-top: 52px !important; }
.guide-body h4 { font: 600 1.05rem var(--sans); margin-top: 28px; }

.tryit, .note {
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
}
.note { border-left-color: var(--link-clue); }

.table-wrap { overflow-x: auto; }
.guide-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.guide-body th { text-align: left; font: 600 0.75rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.guide-body td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-body td:last-child, .guide-body th:last-child { white-space: nowrap; }

figure.shot { margin: 24px 0 !important; }
figure.shot img { width: 100%; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); }

@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--surface); }
  .guide-body td:last-child, .guide-body th:last-child { white-space: normal; }
}