/* deep-guide.css — long-form guides injected by src/deep-guides.js (2026-10-08).
   One stylesheet for every deep guide; fragments in content/deep-guides/ use only
   the dg-* classes below. Tokens come from tokens.css via site.css. */

.dg {
  max-width: 72ch;
  margin: var(--space-2xl) auto var(--space-xl);
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-ink-2);
}
.dg h1, .dg h2, .dg h3 { font-family: var(--font-display); color: var(--color-ink); line-height: 1.2; }
.dg h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-sm); }
.dg h2 {
  font-size: var(--text-xl);
  margin: var(--space-2xl) 0 var(--space-sm);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-rule);
  scroll-margin-top: var(--space-xl);
}
.dg h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-xs); }
.dg p, .dg ul, .dg ol { margin: 0 0 var(--space-md); }
.dg ul, .dg ol { padding-left: 1.3em; }
.dg li + li { margin-top: var(--space-2xs); }
.dg a { color: var(--color-focus); text-underline-offset: 3px; }
.dg strong { color: var(--color-ink); }

/* eyebrow + standfirst under the H2/H1 */
.dg-kicker {
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-xs);
}
.dg-lede { font-size: var(--text-lg); color: var(--color-ink); line-height: 1.55; }
.dg-meta { font-family: var(--font-label); font-size: var(--text-xs); color: var(--color-muted); }

/* table of contents */
.dg-toc {
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0;
}
.dg-toc p { font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--space-xs); color: var(--color-muted); }
.dg-toc ol { margin: 0; columns: 2 16rem; column-gap: var(--space-lg); }
.dg-toc a { color: var(--color-ink); text-decoration: none; }
.dg-toc a:hover { text-decoration: underline; }

/* figures: real screenshots and diagrams */
.dg-figure { margin: var(--space-lg) 0; }
.dg-figure img, .dg-figure svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-input); border: 1px solid var(--color-rule); background: var(--color-paper-2);
}
.dg-figure figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); line-height: 1.5; }
.dg-figure--narrow { max-width: 360px; margin-inline: auto; }
.dg-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0; }
.dg-gallery .dg-figure { margin: 0; }

/* callouts */
.dg-tip, .dg-warn, .dg-pro {
  border-radius: var(--radius-input); padding: var(--space-sm) var(--space-md); margin: var(--space-lg) 0;
  border-left: 5px solid var(--color-accent-deep); background: var(--color-paper-2);
}
.dg-tip > :last-child, .dg-warn > :last-child, .dg-pro > :last-child { margin-bottom: 0; }
.dg-warn { border-left-color: var(--color-accent-3); background: var(--color-coral-band); }
.dg-pro { border-left-color: var(--color-accent-2); background: var(--color-cyan-band); }
.dg-tip strong:first-child, .dg-warn strong:first-child, .dg-pro strong:first-child {
  display: block; font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
}

/* numbered steps */
.dg-steps { list-style: none; padding: 0; counter-reset: dg; display: grid; gap: var(--space-sm); }
.dg-steps > li {
  counter-increment: dg; position: relative; padding: var(--space-sm) var(--space-md) var(--space-sm) 3.2rem;
  background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-input);
}
.dg-steps > li::before {
  content: counter(dg); position: absolute; left: var(--space-sm); top: var(--space-sm);
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; background: var(--color-accent); color: var(--color-ink);
}

/* data tables */
.dg-table-wrap { overflow-x: auto; margin: var(--space-lg) 0; }
.dg-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dg-table th, .dg-table td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.dg-table th { font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); background: var(--color-paper-2); }

/* FAQ */
.dg-faq details { border-bottom: 1px solid var(--color-rule); padding: var(--space-sm) 0; }
.dg-faq summary { cursor: pointer; font-weight: 700; color: var(--color-ink); list-style-position: outside; }
.dg-faq details p { margin: var(--space-xs) 0 0; }

/* play CTA */
.dg-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); justify-content: space-between;
  background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg); margin: var(--space-xl) 0;
}
.dg-cta p { margin: 0; color: var(--color-paper); font-weight: 600; }
.dg-cta .btn { text-decoration: none; }

/* related links */
.dg-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); padding: 0; list-style: none; }
.dg-related a {
  display: block; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  text-decoration: none; color: var(--color-ink); background: var(--color-paper);
}
.dg-related a:hover { background: var(--color-paper-2); }
.dg-related small { display: block; color: var(--color-muted); }

/* guide-page mode: the fragment replaces article.prose content */
.prose.dg-host { max-width: 72ch; }
.prose.dg-host > .dg { margin-top: 0; padding: 0; }

@media (max-width: 480px) {
  .dg { padding: 0 var(--space-md); font-size: 1rem; }
  .dg-toc ol { columns: 1; }
  .dg-steps > li { padding-left: 2.8rem; }
}