/* Guide page (/learn). Loaded AFTER /index.css, which supplies the site chrome
   (nav, footer) plus every shared visual primitive this page reuses:
   .section / --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: hsl(var(--ink-muted)); }
/* .pop marks the origin the reader should look at. As orange TEXT on this paper
   variant it is 2.96:1 and fails AA, so the stamp becomes a fill with ink text
   on it (6.17:1). No padding, so the sample's line metrics don't move. */
.code-block--light .pop {
  background: hsl(var(--pop));
  color: hsl(var(--ink));
}
/* The three syntax colours are set for the ink ground, where each clears 7:1.
   On paper they would be 1.5-2:1, so this variant restates all three. No single
   value can serve both grounds — they are 14.8:1 apart. Danger is the orange
   text token, not a red: the palette has no red. */
.code-block--light .cb-directive { color: hsl(var(--ink)); }
.code-block--light .cb-ok { color: hsl(var(--ok)); }
.code-block--light .cb-danger { color: hsl(var(--pop-text)); }

/* ---------- 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: 700;
  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; }

/* 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. */

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

/* 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;
}

/* ---------- hero ---------- */
/* These four groups used to live in index.css, which this page loaded for them.
   That coupling meant a homepage edit could silently break the guide — and did,
   when the homepage hero was rewritten. They are the guide's own now.

   The hero is on paper, like the homepage's. It was an ink field, which made
   this and /scan the only two pages that opened dark. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.hero-grid > * { min-width: 0; }
.hero-left { display: flex; flex-direction: column; gap: 28px; }
.hero-right { display: flex; flex-direction: column; gap: 16px; }
.hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}
.guide-lede { font-size: 19px; line-height: 1.5; color: hsl(var(--ink-muted)); max-width: 58ch; }
/* The callout sits on the hero's own ground, so it steps up a paper rather than
   matching it. */
.hero .callout { background: hsl(var(--paper-2)); }
.hero-ctas {
  display: flex;
  gap: 14px 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* ---------- explainer bands ---------- */
.explainer-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.explainer-grid > * { min-width: 0; }
.explainer-aside { position: sticky; top: 96px; }
.explainer-aside h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}
.explainer-aside h2 .pop { color: hsl(var(--pop)); }
.explainer-tag-row { display: flex; justify-content: flex-end; margin-bottom: 24px; }

.point-list { display: flex; flex-direction: column; }
.point {
  padding: 28px 0;
  border-top: 1px solid hsl(var(--hairline));
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
  min-width: 0;
}
.point > * { min-width: 0; }
.point:last-child { border-bottom: 1px solid hsl(var(--hairline)); }
/* Two left-column markers. `.num` carries order and is used only by the rollout
   sequence, where the order is the content. `.point-label` names the mechanism
   a point is about, and replaced the numbers on the inline-code list, which was
   five parallel answers rather than five steps. */
.point .num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: hsl(var(--ink)); }
.point-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--ink-muted));
  margin-top: 4px;
}
.point h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.01em; }
.point p { font-size: 15px; line-height: 1.55; color: hsl(var(--ink)); }

/* ---------- 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: var(--rule-width) solid hsl(var(--ink));
  border-left-width: 5px;
  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 hsl(var(--hairline));
}
.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. The orange variants carry their
   accent on the 5px left edge only — as a label colour Hazard Orange would be
   2.96:1 on the callout's paper background. `inherit` keeps the label ink on
   paper and paper on the dark-section inversion, both well clear of AA. */
.callout--warning { border-left-color: hsl(var(--pop)); }
.callout--warning .callout-label { color: inherit; }

.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: inherit; }

/* ---------- 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: var(--rule-width) solid 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-paper));
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- definition rows ---------- */
/* A glossary as ruled rows, not a grid of bordered cards. It is not a second
   `.guide-table` either: the Reference part already carries the terse version
   of this list as a table, and two tables of the same shape read as a mistake.
   Here the definitions are the teaching ones and run long. */
.deflist { display: flex; flex-direction: column; }
.defrow {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px 32px;
  padding-block: 16px;
  border-top: 1px solid hsl(var(--hairline));
  align-items: start;
}
.defrow:last-child { border-bottom: 1px solid hsl(var(--hairline)); }
.defrow > * { min-width: 0; }
.defrow > code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: hsl(var(--code-keyword-paper));
  overflow-wrap: anywhere;
}
.defrow p { font-size: 15px; line-height: 1.55; color: hsl(var(--ink-muted)); margin: 0; }
.defrow p + p { margin-top: 8px; }

/* ---------- FAQ accordion ---------- */
.guide-faq { border-top: var(--rule-width) solid hsl(var(--ink)); max-width: 880px; }
.guide-faq details { border-bottom: var(--rule-width) solid hsl(var(--ink)); }
.guide-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  position: relative;
}
.guide-faq summary::-webkit-details-marker { display: none; }
/* The marker is two crossed hairlines rather than a +/− glyph, because text
   content cannot transition: a character swap would snap while the panel below
   it is still opening. Opening collapses the upright stroke into its own
   centre, which is the same gesture read as a shape.
   Ink, not Hazard Orange: the marker is a control, and orange on paper is
   2.96:1 — under AA for text and under 3:1 for a control.
   top is fixed rather than centred so the marker holds the first line of a
   summary that wraps to two. 29px is the optical centre of the glyph it
   replaced (an 18px cap line plus half of 22px). */
.guide-faq summary::before,
.guide-faq summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 29px;
  inline-size: 14px;
  block-size: var(--rule-width);
  background: hsl(var(--ink));
}
.guide-faq summary::before {
  transform: rotate(90deg);
  transition: transform var(--motion-quick) var(--motion-ease),
              opacity var(--motion-quick) var(--motion-ease);
}
.guide-faq details[open] summary::before {
  transform: rotate(90deg) scaleX(0);
  opacity: 0;
  transition-duration: var(--motion-panel);
}

/* The body's height is the one place the system animates a layout property:
   there is no transform that grows a box from nothing without distorting the
   text inside it, which is the exception an accordion is allowed.
   `interpolate-size` is what makes 0 → auto interpolable at all, and
   allow-discrete holds content-visibility until the collapse has finished. A
   browser that does not know ::details-content ignores every rule here and
   opens the panel instantly — exactly what it did before this existed. */
:root { interpolate-size: allow-keywords; }
.guide-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size var(--motion-quick) var(--motion-ease),
              opacity var(--motion-quick) var(--motion-ease),
              content-visibility var(--motion-quick);
  transition-behavior: allow-discrete;
}
.guide-faq details[open]::details-content {
  block-size: auto;
  opacity: 1;
  transition-duration: var(--motion-panel);
}
/* Movement out, signal kept: the panel still fades, the marker still changes,
   the height simply arrives. */
@media (prefers-reduced-motion: reduce) {
  .guide-faq summary::before { transition-property: opacity; }
  .guide-faq details::details-content,
  .guide-faq details[open]::details-content {
    block-size: auto;
    transition-property: opacity, content-visibility;
  }
}
.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 hsl(var(--hairline));
}

/* ---------- 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 p { color: hsl(var(--ink-muted)); font-size: 18px; line-height: 1.6; margin: 16px auto 28px; }
.guide-cta .hero-ctas { justify-content: center; }
.guide-credit { font-family: var(--font-mono); font-size: 12px; color: hsl(var(--ink-muted)); line-height: 1.6; max-width: 70ch; margin: 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hero-grid, .explainer-grid { grid-template-columns: 1fr; gap: 40px; }
  .explainer-aside { position: static; }
}
@media (max-width: 719px) {
  .hero h1 { font-size: clamp(28px, 8vw, 42px); }
  .explainer-aside h2 { font-size: clamp(26px, 7vw, 36px); }
  .hero-right .code-block { font-size: 12px; padding: 16px; line-height: 1.6; }
  .guide-prose { font-size: 16px; }
  .guide-prose h3 { font-size: 20px; }
  .guide-lede { font-size: 17px; }
  .defrow { grid-template-columns: 1fr; gap: 6px; padding-block: 14px; }
  .point { grid-template-columns: 1fr; gap: 8px; }
  .point-label { margin-top: 0; }
  .callout { padding: 16px 18px;}
  .guide-faq summary { font-size: 16px; }
}