/* ============================================================================
   Guides (marketing/guides/, 9 Oct 2026): long-form reading on top of
   styles.css. Loaded after it by the guide pages and their hub only.

   Every colour is a token from chrome.css, so the light theme and both dark
   blocks apply here without a rule of their own. Weights are 400 and 700 only,
   like the rest of the site. A table wider than the column scrolls inside its
   own frame, never the page, and the frame takes keyboard focus so it can be
   scrolled without a mouse.
   ========================================================================== */

/* the line under a guide's headline: who wrote it, when, how long it takes */
.byline { margin-top: 24px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* the article: one reading column */
.guide-body { max-width: 44rem; }
.guide-body > * + * { margin-top: 16px; }
.guide-body > h2 { margin-top: 64px; font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: 1.2; }
.guide-body > h2:first-child { margin-top: 0; }
.guide-body > h3 { margin-top: 40px; font-size: 1.25rem; line-height: 1.3; }
.guide-body > h2 + *, .guide-body > h3 + * { margin-top: 12px; }
.guide-body p, .guide-body li { color: var(--text); line-height: 1.65; }
.guide-body ul, .guide-body ol { padding-left: 1.5em; display: grid; gap: 8px; }
.guide-body li::marker { color: var(--ink-2); }
.guide-body b { color: var(--ink); }

/* tables: framed, and scrolled inside the frame on a narrow screen */
.table-scroll {
  margin-top: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.guide-body > .table-scroll { margin-top: 24px; }
.guide-body > .table-scroll + * { margin-top: 24px; }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.guide-table { width: 100%; font-size: .9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text); }
.guide-table thead th, .guide-table thead td { background: var(--tint); color: var(--ink); font-size: var(--t-small); font-weight: 700; border-bottom: 2px solid var(--ink); }
.guide-table tbody th { color: var(--ink); font-weight: 700; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }
/* the codebook is seven columns: it keeps its shape and scrolls instead */
.guide-table.codebook { min-width: 60rem; }
.guide-table.codebook td:nth-child(4) { white-space: nowrap; }

/* the template download */
.guide-body > .download { margin-top: 24px; }
@media (max-width: 479px) { .download .btn { white-space: normal; text-align: center; padding-block: 12px; } }

/* the hub's five cards sit two up, then three, like the platform hub */
.guide-list .feature-card h3 { text-wrap: balance; }