/* Guide page (/learn). Loaded AFTER /index.css, which supplies the site chrome
   (nav, footer) plus every shared visual primitive this page reuses:
   .section / .section--dark / --paper2 / --ruled, .section-head, .code-block +
   .cb-* syntax colours, .card / .feature-card, .steps-grid + .step-number,
   .features-grid, .point-list / .point, .endpoint-box / .headers-box, .tag,
   .btn, .inline-code. This file adds ONLY what the guide needs on top: a
   constrained prose column, callouts, tables, a keyword grid and an FAQ
   accordion. All colours come from the shared tokens (/tokens.css). */

/* ---------- code blocks ---------- */
/* The shared .code-block is dark; its purple .cb-directive colour is only legible
   on the light variant (which index.css scopes to .hero only). The guide has many
   syntax-coloured samples on light AND dark sections, so expose the light variant
   as a standalone modifier. .cb-ok / .cb-danger / .cb-directive are defined
   globally in index.css and are tuned for this light background. */
.code-block--light { background: hsl(var(--paper)); color: hsl(var(--ink)); }
.code-block--light .dim,
.code-block--light .cb-label,
.code-block--light .cb-comment { color: #555; }

/* ---------- layout helpers ---------- */
/* Sections on the homepage run edge-to-edge with full-width grids. The guide is
   text-heavy, so we cap the readable width — but stay LEFT-aligned (no auto
   margins) so the body shares its left edge with the full-width .section-head
   above it, exactly like the homepage where head and content align. */
.guide-wrap { max-width: 1080px; }
.guide-wrap--narrow { max-width: 820px; }

/* Stack the blocks inside a section with consistent rhythm. */
.guide-stack > * + * { margin-top: 28px; }

/* ---------- prose ---------- */
.guide-prose { font-size: 17px; line-height: 1.65; max-width: 72ch; }
.guide-prose > * + * { margin-top: 16px; }
.guide-prose h3 {
  font-size: 22px;
  line-height: 1.2;
  margin-top: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.guide-prose h3:first-child { margin-top: 0; }
.guide-prose ul, .guide-prose ol { margin-left: 22px; }
.guide-prose li { margin-bottom: 8px; max-width: 68ch; }
.guide-prose strong { font-weight: 700; }
.guide-prose a { font-weight: 600; }
.section--dark .guide-prose a { color: hsl(var(--pop)); }

/* index.css's .inline-code sets a light background but inherits text colour.
   On dark sections the body colour is light (#bbb), so the chip would be
   light-on-light. Force ink text — the chip background stays light cream. */
.section--dark .inline-code { color: hsl(var(--ink)); }

/* Bigger intro paragraph for the hero / section ledes. */
.guide-lede { font-size: 19px; line-height: 1.6; max-width: 60ch; }
.section--dark .guide-lede { color: #bbb; }

/* A mono eyebrow above sub-blocks, mirrors the dashboard section labels. */
.guide-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--ink) / 0.6);
  display: block;
  margin-bottom: 10px;
}
.section--dark .guide-eyebrow { color: #888; }

/* ---------- callouts ---------- */
/* Maps the guide's > **Tip / Note / Warning / Check / Info** blockquotes.
   Brutalist: paper bg, 1.5px border, hard shadow, accent left edge, mono label. */
.callout {
  background: hsl(var(--paper));
  color: hsl(var(--ink));
  border: 1.5px solid hsl(var(--ink));
  border-left-width: 5px;
  box-shadow: 4px 4px 0 hsl(var(--ink));
  padding: 18px 22px;
  max-width: 72ch;
}
.callout > * + * { margin-top: 10px; }
.callout p { font-size: 16px; line-height: 1.6; }
.callout code { /* inherit .inline-code look without needing the class inline */
  font-family: var(--font-mono);
  font-size: 13px;
  background: hsl(var(--paper-2));
  padding: 1px 6px;
  border: 1px solid #ddd;
}
.callout-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
}

/* Accent per variant: left edge + label colour. */
.callout--warning { border-left-color: hsl(var(--pop)); }
.callout--warning .callout-label { color: hsl(var(--pop)); }

.callout--tip { border-left-color: hsl(var(--ok)); }
.callout--tip .callout-label { color: hsl(var(--ok)); }

.callout--check { border-left-color: hsl(var(--ok)); }
.callout--check .callout-label { color: hsl(var(--ok)); }

.callout--note { border-left-color: hsl(var(--ink)); }
.callout--note .callout-label { color: hsl(var(--ink) / 0.6); }

/* Info = csplog product notes; pop accent + faint pop tint to stand apart. */
.callout--info {
  border-left-color: hsl(var(--pop));
  background: hsl(var(--pop) / 0.06);
}
.callout--info .callout-label { color: hsl(var(--pop)); }

/* Inverted treatment on dark sections. */
.section--dark .callout {
  background: hsl(0 0% 100% / 0.04);
  color: hsl(var(--paper));
  border-color: hsl(0 0% 100% / 0.28);
  box-shadow: 4px 4px 0 hsl(0 0% 100% / 0.15);
}
.section--dark .callout--info { background: hsl(var(--pop) / 0.1); }
.section--dark .callout--note { border-left-color: hsl(0 0% 100% / 0.5); }
.section--dark .callout--note .callout-label { color: hsl(var(--paper) / 0.7); }
.section--dark .callout code {
  background: hsl(0 0% 100% / 0.1);
  border-color: hsl(0 0% 100% / 0.2);
  color: hsl(var(--paper));
}
/* Keep the accented variants' colours readable on dark (pop/ok already pop). */
.section--dark .callout--warning { border-left-color: hsl(var(--pop)); }
.section--dark .callout--tip,
.section--dark .callout--check { border-left-color: hsl(var(--ok)); }

/* ---------- tables ---------- */
/* Styled like the dashboard data tables: ink mono header, 1.5px border, hard
   shadow, subtle row dividers. Wrapper scrolls horizontally on small screens. */
.guide-table { overflow-x: auto; border: 1.5px solid hsl(var(--ink)); box-shadow: 4px 4px 0 hsl(var(--ink)); background: hsl(var(--paper)); }
.guide-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.guide-table thead {
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guide-table th { text-align: left; padding: 12px 18px; font-weight: 500; white-space: nowrap; }
.guide-table td { padding: 12px 18px; border-top: 1px solid hsl(var(--ink) / 0.1); vertical-align: top; line-height: 1.5; }
.guide-table tbody tr:first-child td { border-top: 0; }
.guide-table code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: hsl(var(--code-keyword));
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- source-keyword grid ---------- */
/* Small cards for the source keywords/patterns, so Part 2 isn't a flat list. */
.kw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kw {
  border: 1.5px solid hsl(var(--ink));
  background: hsl(var(--paper));
  box-shadow: 4px 4px 0 hsl(var(--ink));
  padding: 16px 18px;
}
.kw code {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--pop));
  display: block;
  margin-bottom: 6px;
}
.kw p { font-size: 14px; line-height: 1.5; color: hsl(var(--ink) / 0.85); }

/* ---------- FAQ accordion ---------- */
.guide-faq { border-top: 1.5px solid hsl(var(--ink)); max-width: 880px; }
.guide-faq details { border-bottom: 1.5px solid hsl(var(--ink)); }
.guide-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  position: relative;
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 18px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: hsl(var(--pop));
}
.guide-faq details[open] summary::after { content: "\2212"; } /* minus */
.guide-faq .faq-body { padding: 0 40px 22px 0; max-width: 72ch; font-size: 16px; line-height: 1.6; }
.guide-faq .faq-body code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: hsl(var(--paper-2));
  padding: 1px 6px;
  border: 1px solid #ddd;
}

/* ---------- closing CTA band ---------- */
.guide-cta { text-align: center; max-width: 640px; margin: 0 auto; }
.guide-cta h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; }
.guide-cta .pop { color: hsl(var(--pop)); }
.guide-cta p { color: #bbb; font-size: 18px; line-height: 1.6; margin: 16px auto 28px; }
.guide-cta .hero-ctas { justify-content: center; }
/* The CTA sits on a dark band but is not a .hero, so the index.css
   .hero .btn:not(.btn--pop) override (which makes outline buttons visible on
   dark) doesn't apply. Re-state it here: an ink-bordered outline button would
   otherwise be ink-on-ink and invisible. */
.guide-cta .btn:not(.btn--pop) {
  color: hsl(var(--paper));
  border-color: hsl(var(--paper));
  box-shadow: 4px 4px 0 hsl(var(--paper));
}
.guide-credit { font-family: var(--font-mono); font-size: 12px; color: #888; line-height: 1.6; max-width: 70ch; margin: 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .kw-grid { gap: 14px; }
}
@media (max-width: 719px) {
  .guide-prose { font-size: 16px; }
  .guide-prose h3 { font-size: 20px; }
  .guide-lede { font-size: 17px; }
  .kw-grid { grid-template-columns: 1fr; }
  .callout { padding: 16px 18px; box-shadow: 3px 3px 0 hsl(var(--ink)); }
  .guide-table { box-shadow: 3px 3px 0 hsl(var(--ink)); }
  .kw { box-shadow: 3px 3px 0 hsl(var(--ink)); }
  .guide-faq summary { font-size: 16px; }
}