/* Additions for long-form guides under /guides/, layered on top of
 * app-page.css (which already supplies nav, h1/h2, .lede, .note, .faq,
 * .closer, .related, .crumb and the footer — guides reuse all of it). This
 * file only adds what prose specifically needs: sub-headings, code blocks,
 * and a comparison table for weighing approaches against each other. */

h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
  letter-spacing: -0.005em; margin: var(--space-lg) 0 var(--space-xs);
}

.guide ul, .guide ol { max-width: 62ch; margin: 0 0 var(--space-md) var(--space-lg); }
.guide li { font-size: var(--text-base); margin-bottom: var(--space-2xs); }
.guide li::marker { color: var(--color-muted); }
.guide em { color: var(--color-ink); font-style: italic; }

.guide code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: 4px; padding: 0.05em 0.35em;
}
.guide pre {
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); padding: var(--space-md);
  max-width: 68ch; overflow-x: auto; margin-bottom: var(--space-md);
}
.guide pre code { background: none; border: none; padding: 0; }

/* Comparison tables, e.g. weighing "second user account" vs "open -n" vs a
 * real clone against each other — the honest tradeoffs, laid out plainly. */
.compare-scroll { overflow-x: auto; margin-bottom: var(--space-lg); }
.compare { width: 100%; border-collapse: collapse; min-width: 480px; }
.compare th, .compare td {
  text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm);
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-muted); font-weight: 500;
}
.compare td:first-child { font-weight: 500; color: var(--color-ink); white-space: nowrap; }

/* Publish date, next to the h1 — the freshness signal a long-form page needs
 * that a product page doesn't. */
.guide__meta {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted);
  letter-spacing: 0.03em; margin-bottom: var(--space-md);
}

/* /guides index — a plain list of cards, one per guide. */
.guide-list { list-style: none; border-top: 1px solid var(--color-rule); }
.guide-list li { border-bottom: 1px solid var(--color-rule); padding: var(--space-lg) 0; }
.guide-list a { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.guide-list a:hover { color: var(--color-accent); }
.guide-list p { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-2xs) 0 0; max-width: 60ch; }