/* The guide documents' own stylesheet, scoped under .guide-doc (specs/003-guides-section, R-43).
   Loaded only by guide and glossary pages. Every rule mirrors the <style> block the documents
   carry for standalone viewing; variables are renamed --g-* so they never collide with the site
   tokens, and each page sets the document's own colours inline on the article. The light theme
   is not offered (the site is dark) and no web font is requested (FR-091): the documents' own
   fallback stacks apply. */
.guide-doc {
  --g-bg: #141012; --g-surface: #1c171a; --g-surface2: #251e22; --g-line: #3a2f34; --g-fg: #efe8e0; --g-muted: #a89d9a;
  --g-accent: #f48fb8; --g-accent-ink: #2a0d19; --g-fel: #e8c35a; --g-fel-ink: #2a1f05; --g-warn: #e66767; --g-shadow: #8fb5f0;
  --g-display: Georgia, "Times New Roman", serif;
  --g-body: "Segoe UI", system-ui, sans-serif;
  --g-mono: Consolas, "Courier New", monospace;
  /* The documents' original names, for their inline SVG diagrams (fill="var(--fg)" and so on):
     a browser treats an undefined variable as no fill at all, which painted the charts black. */
  --bg: var(--g-bg); --surface: var(--g-surface); --surface2: var(--g-surface2); --line: var(--g-line); --fg: var(--g-fg); --muted: var(--g-muted);
  --accent: var(--g-accent); --accent-ink: var(--g-accent-ink); --fel: var(--g-fel); --fel-ink: var(--g-fel-ink); --warn: var(--g-warn); --shadow: var(--g-shadow);
  max-width: 1100px; margin: 0 auto; padding-bottom: 64px;
  color: var(--g-fg); font-family: var(--g-body); font-size: 17px; line-height: 1.55;
}
.guide-doc .prose { max-width: 72ch; }
.guide-doc h1, .guide-doc h2, .guide-doc h3, .guide-doc h4 { font-family: var(--g-display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: normal; text-transform: none; color: var(--g-fg); }
.guide-doc h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.01em; }
.guide-doc h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 3.2rem; padding-top: 1.2rem; border-top: 1px solid var(--g-line); }
.guide-doc h3 { font-size: 1.25rem; margin-top: 2rem; }
.guide-doc h4 { font-size: 1.05rem; margin-top: 1.4rem; font-family: var(--g-body); font-weight: 600; }
.guide-doc p { margin: 0.8rem 0; }
.guide-doc a { color: var(--g-accent); text-decoration: underline; }
.guide-doc ul { list-style: disc; padding-left: 1.4rem; margin: 0.8rem 0; }
.guide-doc ol { list-style: decimal; padding-left: 1.6rem; margin: 0.8rem 0; }
.guide-doc .eyebrow { font-family: var(--g-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-muted); }
.guide-doc .mast { padding: 3rem 0 1.5rem; }
.guide-doc .mast .lede { font-size: 1.2rem; max-width: 62ch; color: var(--g-fg); }
.guide-doc .note { border-left: 3px solid var(--g-accent); background: var(--g-surface); padding: 0.7rem 1rem; margin: 1.2rem 0; border-radius: 0 6px 6px 0; }
.guide-doc .note.warn { border-left-color: var(--g-warn); }
.guide-doc .note.fel { border-left-color: var(--g-fel); }
.guide-doc .toc { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.guide-doc .toc a { text-decoration: none; color: var(--g-fg); border-bottom: 1px solid var(--g-line); }
.guide-doc table { border-collapse: collapse; width: 100%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.guide-doc th, .guide-doc td { padding: 7px 9px; border-bottom: 1px solid var(--g-line); text-align: left; vertical-align: top; }
.guide-doc th { font-weight: 600; color: var(--g-muted); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; font-family: var(--g-body); }
.guide-doc .scroll { overflow-x: auto; margin: 1rem 0; }
.guide-doc .scroll table { min-width: 640px; }
.guide-doc .mono { font-family: var(--g-mono); font-size: 0.84em; }
.guide-doc code { font-family: var(--g-mono); font-size: 0.86em; background: var(--g-surface2); padding: 0.1em 0.35em; border-radius: 4px; word-break: break-all; }
.guide-doc pre { font-family: var(--g-mono); font-size: 0.86rem; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 6px; padding: 0.8rem 1rem; overflow-x: auto; margin: 0.8rem 0; }
.guide-doc pre code { background: none; padding: 0; word-break: normal; }
.guide-doc .modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 1.4rem 0; }
.guide-doc .mode { background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 8px; padding: 16px 18px; border-top: 4px solid var(--g-line); }
.guide-doc .mode.easy { border-top-color: var(--g-fel); }
.guide-doc .mode.mid { border-top-color: var(--g-accent); }
.guide-doc .mode.full { border-top-color: var(--g-shadow); }
.guide-doc .mode h3 { margin-top: 0; font-size: 1.3rem; }
.guide-doc .mode .l { color: var(--g-muted); font-size: 0.9rem; }
.guide-doc ol.prio { counter-reset: p; list-style: none; padding: 0; margin: 1rem 0; }
.guide-doc ol.prio li { counter-increment: p; position: relative; padding: 0.6rem 0 0.6rem 3rem; border-bottom: 1px solid var(--g-line); }
.guide-doc ol.prio li::before { content: counter(p); position: absolute; left: 0; top: 0.55rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--g-surface2); border: 1px solid var(--g-line); font-family: var(--g-mono); font-weight: 600; display: grid; place-items: center; font-size: 0.9rem; }
.guide-doc ol.prio li b { color: var(--g-accent); }
.guide-doc ol.prio.fel li b { color: var(--g-fel); }
.guide-doc ol.prio.shadow li b { color: var(--g-shadow); }
.guide-doc ul.check { list-style: none; padding: 0; margin: 1rem 0; }
.guide-doc ul.check li { padding: 0.4rem 0; display: flex; gap: 0.6rem; align-items: flex-start; }
.guide-doc ul.check input { margin-top: 0.35rem; accent-color: var(--g-fel); }
.guide-doc .gloss h3 { margin-top: 2.2rem; }
.guide-doc figure { margin: 1.6rem 0; padding: 16px 18px; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 8px; }
.guide-doc figure svg { width: 100%; height: auto; display: block; }
.guide-doc figcaption { color: var(--g-muted); font-size: 0.9rem; margin-top: 0.5rem; }
.guide-doc .pill { display: inline-block; font-family: var(--g-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15em 0.55em; border-radius: 999px; border: 1px solid var(--g-line); color: var(--g-muted); vertical-align: middle; margin-left: 0.4rem; }
.guide-doc .done { background: var(--g-surface2); border: 1px dashed var(--g-line); border-radius: 6px; padding: 0.7rem 1rem; margin: 1.2rem 0; }
.guide-doc footer { margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--g-line); color: var(--g-muted); font-size: 0.9rem; }
@media (max-width: 600px) {
  .guide-doc { font-size: 16px; }
  .guide-doc ol.prio li { padding-left: 2.6rem; }
}