/*
  /guides — hand-written, like motion.css and sections.css.

  The article body is Markdown rendered at runtime, so its elements (h2, p, ul,
  table, blockquote, code) carry no utility classes and Tailwind never sees
  them. Everything here uses the site's own tokens (--fg, --muted-fg, --border,
  --primary, --surface, --step-*), so it follows the light and dark themes
  without a single extra rule. Do not regenerate; nothing in the Next build
  needs to change for it.
*/

/* ---- Layout: contents list beside the article on wide screens ---------- */

.guide-layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .guide-layout {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
  /* No contents list (fewer than three sections): the article starts in the
     second column anyway so every guide's text lines up the same way. */
  .guide-layout > .guide-prose:only-child {
    grid-column: 2;
  }
}

.guide-toc {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

@media (min-width: 1024px) {
  .guide-toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
  }
}

.guide-toc ol {
  margin-top: 1rem;
  display: grid;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
}

.guide-toc a {
  display: flex;
  min-height: 2.75rem; /* tap target */
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--muted-fg);
  text-decoration: none;
  transition: color 150ms;
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
  color: var(--fg);
}

/* ---- Article typography ------------------------------------------------ */

.guide-prose {
  max-width: 68ch;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--fg);
}

.guide-prose > :first-child {
  margin-top: 0;
}

.guide-prose p,
.guide-prose ul,
.guide-prose ol,
.guide-prose blockquote,
.guide-prose table,
.guide-prose pre {
  margin-top: 1.25em;
}

.guide-prose h2 {
  margin-top: 2.4em;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Clear the sticky header when a contents link jumps here. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.guide-prose h3 {
  margin-top: 2em;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.guide-prose h2 + p,
.guide-prose h3 + p {
  margin-top: 0.75em;
}

.guide-prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms;
}

.guide-prose a:hover {
  text-decoration-color: var(--primary);
}

.guide-prose strong {
  font-weight: 600;
}

.guide-prose ul,
.guide-prose ol {
  padding-left: 1.4em;
}

.guide-prose ul {
  list-style: disc;
}

.guide-prose ol {
  list-style: decimal;
}

.guide-prose li {
  margin-top: 0.5em;
  padding-left: 0.25em;
}

.guide-prose li::marker {
  color: var(--primary);
}

.guide-prose blockquote {
  border-left: 3px solid var(--primary);
  padding: 0.25em 0 0.25em 1.25em;
  color: var(--muted-fg);
}

.guide-prose hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.guide-prose code {
  font-family: var(--font-jetbrains), ui-monospace, monospace;
  font-size: 0.875em;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0.375rem;
  padding: 0.1em 0.35em;
}

.guide-prose pre {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  line-height: 1.6;
}

.guide-prose pre code {
  border: 0;
  background: none;
  padding: 0;
}

.guide-prose img {
  margin-top: 1.75em;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

/* Tables scroll sideways inside themselves rather than widening the page. */
.guide-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.guide-prose th,
.guide-prose td {
  border-bottom: 1px solid var(--border);
  padding: 0.75em 1em 0.75em 0;
  text-align: left;
  vertical-align: top;
}

.guide-prose th {
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Development-only preview markers ---------------------------------- */

.guide-preview-note {
  margin-bottom: 2rem;
  border: 1px dashed var(--primary);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--fg);
}

.guide-draft-badge {
  color: var(--primary);
}