/* Guide pages (/guides/*): long-form reading column, tables and inline SVG diagrams.
   Loaded only by pages with `css: guides.css` in their front matter. */
.byline{margin-top:16px;font-size:13.5px;color:var(--mut)}
.guide{max-width:820px;margin:0 auto;padding:4px 24px 64px}
.guide h2{font-size:clamp(24px,3vw,30px);font-weight:700;margin:48px 0 14px;color:#fff}
.guide h3{font-size:19px;font-weight:700;margin:28px 0 10px;color:#fff}
.guide p{color:var(--soft);font-size:16.5px;line-height:1.72;margin:0 0 14px}
.guide ul,.guide ol{color:var(--soft);font-size:16px;line-height:1.7;padding-left:22px;margin:0 0 16px}
.guide li{margin:6px 0}
.guide li::marker{color:var(--cyan)}
.guide a{color:var(--cyan)}
.guide a:hover{text-decoration:underline}
.guide .tablewrap{margin:18px 0 10px}
.guide .cmp{min-width:0}
.guide .cmp tbody th{width:auto}
.guide .tnote{font-size:13.5px;color:var(--mut);margin:0 0 18px}
.guide .answer{border:1px solid rgba(34,211,238,.3);background:rgba(34,211,238,.05);border-radius:14px;padding:18px 20px;margin:8px 0 6px}
.guide .answer p{margin:0;color:var(--ink)}
.guide .faq{max-width:none;margin-top:10px}
.guide .sources{font-size:14px;color:var(--mut)}
.guide .sources li{margin:4px 0}
.guide .linkcards{margin-top:18px}

/* diagrams: drawn inline so they stay sharp and follow the site palette */
figure.diagram{margin:28px 0 30px;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
figure.diagram .dg-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:start}
figure.diagram svg{width:100%;height:auto}
figure.diagram figcaption{margin-top:12px;font-size:13.5px;color:var(--mut);line-height:1.55}
.dg .ln{fill:none;stroke:#cdd9ec;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.dg .thin{fill:none;stroke:#8a94a8;stroke-width:1.3}
.dg .dash{fill:none;stroke:#8a94a8;stroke-width:1.3;stroke-dasharray:6 5}
.dg .ac{fill:none;stroke:#22d3ee;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dg .av{fill:none;stroke:#a78bfa;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dg .solid{fill:rgba(205,217,236,.10);stroke:#cdd9ec;stroke-width:2;stroke-linejoin:round}
.dg .solidac{fill:rgba(34,211,238,.16);stroke:#22d3ee;stroke-width:2;stroke-linejoin:round}
.dg .solidv{fill:rgba(167,139,250,.18);stroke:#a78bfa;stroke-width:2;stroke-linejoin:round}
.dg .hd{fill:#22d3ee}
.dg .hdv{fill:#a78bfa}
.dg .hdg{fill:#8a94a8}
.dg text{font-family:'Inter',system-ui,sans-serif;font-size:15px;fill:#8a94a8}
.dg .t{fill:#eaf0fb;font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;font-size:20px}
.dg .s{fill:#cdd9ec;font-size:15px}
.dg .tac{fill:#22d3ee;font-weight:600}
.dg .tv{fill:#a78bfa;font-weight:600}
.dg .sm{font-size:13px}
/* generated technical diagrams (tools/guide_diagrams.py): colours and sizes live in the SVG itself */
.dgx{display:block;width:100%;height:auto;border-radius:10px}
.dgx text{font-family:'Inter',system-ui,sans-serif}
figure.diagram .dg-4{grid-template-columns:repeat(4,1fr);gap:10px}
figure.diagram .dg-3{grid-template-columns:repeat(3,1fr);gap:10px}
figure.diagram .dg-one{max-width:620px;margin:0 auto}
figure.diagram .dg-plan{max-width:580px;margin:0 auto;grid-template-columns:1fr 1fr}
figure.diagram.wide{width:min(1120px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
@media(max-width:720px){figure.diagram .dg-4{grid-template-columns:repeat(2,1fr)}figure.diagram .dg-3{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
@media(max-width:640px){.guide{padding:0 16px 48px}figure.diagram{padding:12px}}