/* v2.5 the Guides section (SEO agent): /guides, /guides/<slug> and /glossary, plus the "Guides and strategy" cards
   on the category and collection pages (src/render.mjs layout() loads this file for those page kinds only; the game
   pages' link to their guide is a plain row of the "At a glance" card and needs nothing here). Theme tokens only
   (style.css redefines them for the dark theme), no inline styles. */

/* ---------- shared: guide cards (hub page, related guides, category pages) ---------- */
.guide-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.guide-card { display: grid; gap: 6px; height: 100%; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--cat, var(--club)); color: var(--text); text-decoration: none; box-shadow: var(--sh-1); transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast); }
.guide-card:hover { transform: translateY(-2px); text-decoration: none; border-color: var(--cat, var(--club)); }
.guide-card b { font-weight: 800; font-size: var(--fs-base); line-height: 1.3; }
.guide-card span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.guide-card small { color: var(--cat-ink, var(--club)); font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- the guides' hub ---------- */
.guide-fams { margin-top: calc(-1 * var(--s-2)); }
.guide-fam { margin-top: var(--s-6); }
.guide-fam-blurb { color: var(--muted); max-width: 70ch; margin: calc(-1 * var(--s-3)) 0 var(--s-4); }
.guides-about { margin-top: var(--s-7); }

/* ---------- a guide ---------- */
.guide-page { gap: 0; }
.guide-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 820px; }
.guide-kicker { margin: 0; font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.guide-kicker a { color: var(--cat-ink, var(--club)); text-decoration: none; }
.guide-kicker a:hover { text-decoration: underline; }
.guide-head h1 { font-size: var(--fs-2xl); margin: 0; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 650; }
.guide-meta span { display: inline-block; line-height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2); }
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }

.guide-layout { display: grid; gap: var(--s-5); }
@media (min-width: 1100px) { .guide-layout { grid-template-columns: 250px minmax(0, var(--read)); column-gap: var(--s-8); align-items: start; } }
.guide-toc { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 1100px) { .guide-toc { position: sticky; top: calc(var(--head-h) + var(--s-4)); max-height: calc(100vh - var(--head-h) - var(--s-6)); overflow: auto; } }
.guide-toc h2 { font-size: var(--fs-base); margin: 0 0 var(--s-2); }
.guide-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.guide-toc li { counter-increment: toc; }
.guide-toc a { display: grid; grid-template-columns: 26px 1fr; align-items: center; min-height: 36px; padding: 4px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.guide-toc a::before { content: counter(toc); color: var(--cat-ink, var(--club)); font-weight: 800; font-variant-numeric: tabular-nums; }
.guide-toc a:hover { background: var(--surface-2); }

.guide-body { min-width: 0; max-width: var(--read); font-size: var(--fs-read); line-height: var(--lh-read); }
.guide-body p { margin: 0; }
.guide-body p + p, .guide-body p + ul, .guide-body p + ol, .guide-body ul + p, .guide-body ol + p { margin-top: 1em; }
.guide-intro { font-size: var(--fs-md); }
.guide-sect { margin-top: var(--s-7); scroll-margin-top: calc(var(--head-h) + 16px); }
.guide-sect > h2 { margin: 0 0 var(--s-3); }
.guide-sect h3 { margin: var(--s-5) 0 var(--s-2); }
.guide-body ul, .guide-body ol { padding-left: 1.3em; margin: var(--s-3) 0; }
.guide-body li + li { margin-top: .5em; }
.guide-body li::marker { color: var(--cat, var(--club)); font-weight: 800; }
.guide-body code { font: 600 .9em/1 var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.guide-body a { font-weight: 650; }

.guide-table { overflow-x: auto; margin: var(--s-4) 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.4; }
.guide-table th, .guide-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.guide-table thead th { background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); font-weight: 750; }
.guide-table tbody th { font-weight: 750; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }

.guide-tip { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--cat-soft, var(--club-soft)); border-left: 4px solid var(--cat, var(--club)); }
.guide-example { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.guide-example-h { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-base); margin-bottom: var(--s-2) !important; color: var(--cat-ink, var(--club)); }
.guide-example-h::before { content: "Worked example: "; color: var(--muted); font-family: var(--font); font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; display: block; }

.guide-play { margin-top: var(--s-7); padding: var(--s-5); border-radius: var(--r-xl); background: var(--cat-soft, var(--club-soft)); display: grid; gap: var(--s-4); }
.guide-play h2 { margin: 0; }
.guide-play-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.guide-play p { font-size: var(--fs-base); }
.guide-faq .faq-list { margin-top: var(--s-3); }
.guide-foot { margin-top: var(--s-6) !important; padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.guide-related { margin-top: var(--s-7); }

/* ---------- the glossary ---------- */
.glossary-az { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s-2) 0; background: var(--bg); }
/* computers and tablets: the letters stay in view under the header (on phones they would cover too much) */
@media (min-width: 720px) { .glossary-az { position: sticky; top: var(--head-h); z-index: 2; } }
.glossary-az a { display: inline-grid; place-items: center; min-width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 800; text-decoration: none; }
.glossary-az a:hover { border-color: var(--club); background: var(--club-soft); }
.glossary-letter { scroll-margin-top: calc(var(--head-h) + 16px); }
@media (min-width: 720px) { .glossary-letter { scroll-margin-top: calc(var(--head-h) + 64px); } }
.glossary-letter > h2 { font-size: var(--fs-xl); margin: var(--s-5) 0 var(--s-3); color: var(--club); }
.glossary-list { margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.glossary-item { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 64px); }
.glossary-item:target { border-color: var(--club); box-shadow: 0 0 0 3px var(--club-soft); }
.glossary-item dt { font-weight: 800; }
.glossary-item dd { margin: 4px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.glossary-more { display: inline-block; margin-top: 4px; font-size: var(--fs-sm); font-weight: 700; }
.glossary-more::before { content: "Guide: "; color: var(--muted); font-weight: 600; }