/* SOF2 Guides — uses the SOF2MP theme's colour tokens, with fallbacks for other themes. */

.sof2g-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .95rem; color: var(--muted, #aab6b5); }
.sof2g-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--dim, #7f8d8b); }
.sof2g-crumbs a { color: var(--gold, #d3a45d); text-decoration: none; }
.sof2g-crumbs a:hover { text-decoration: underline; }
.sof2g-crumbs [aria-current] { color: var(--muted, #aab6b5); }

.sof2g-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--dim, #7f8d8b); font-size: .95rem; }
.sof2g-meta a { color: var(--gold, #d3a45d); }

/* Layout: article + "On this page" */
.sof2g-layout { display: block; }
.sof2g-layout.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 270px; grid-template-areas: "main toc"; gap: 48px; align-items: start; }
.sof2g-layout.has-toc .site-main { grid-area: main; min-width: 0; }
.sof2g-toc { grid-area: toc; position: sticky; top: 96px; padding: 18px 20px; border: 1px solid var(--line, #26333b); border-radius: var(--radius, 14px); background: var(--panel, #131b21); }
.sof2g-toc-title { margin: 0 0 10px; font-size: .85rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--dim, #7f8d8b); }
.sof2g-toc ul { margin: 0; padding: 0; list-style: none; }
.sof2g-toc li { margin: 6px 0; line-height: 1.35; font-size: .95rem; }
.sof2g-toc a { color: var(--muted, #aab6b5); text-decoration: none; }
.sof2g-toc a:hover { color: var(--gold-2, #f2ce8d); }
@media (max-width: 1000px) {
	.sof2g-layout.has-toc { display: block; }
	.sof2g-toc { position: static; margin-bottom: 28px; }
}

/* Content */
.sof2g-content { max-width: 820px; }
.sof2g-content h2 { margin-top: 2.2em; scroll-margin-top: 90px; }
.sof2g-content h3 { margin-top: 1.6em; scroll-margin-top: 90px; }
.sof2g-content > :first-child { margin-top: 0; }
.sof2g-content kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--line-2, #33434c); border-bottom-width: 2px; border-radius: 5px; background: var(--panel-2, #18222a); font: 600 .88em/1.4 ui-monospace, Consolas, monospace; color: var(--text, #eef1ee); }
.sof2g-content code { padding: 1px 6px; border-radius: 5px; background: var(--panel-2, #18222a); font-size: .9em; color: var(--gold-2, #f2ce8d); }
.sof2g-content pre { overflow-x: auto; padding: 16px 18px; border: 1px solid var(--line, #26333b); border-radius: var(--radius-sm, 8px); background: var(--bg-2, #0e141a); line-height: 1.55; }
.sof2g-content pre code { padding: 0; background: none; color: var(--text, #eef1ee); }

.sof2g-answer { margin: 0 0 28px; padding: 18px 22px; border-left: 4px solid var(--gold, #d3a45d); border-radius: var(--radius-sm, 8px); background: var(--panel, #131b21); font-size: 1.08em; line-height: 1.6; }
.sof2g-note { margin: 24px 0; padding: 14px 18px; border: 1px solid var(--line, #26333b); border-radius: var(--radius-sm, 8px); background: var(--panel, #131b21); }
.sof2g-note > :last-child { margin-bottom: 0; }
.sof2g-note.is-warning { border-color: rgba(224, 103, 92, .45); }
.sof2g-note.is-tip { border-color: rgba(127, 209, 140, .4); }

.sof2g-steps { counter-reset: sof2g-step; list-style: none; padding-left: 0; }
.sof2g-steps > li { counter-increment: sof2g-step; position: relative; margin: 0 0 16px; padding-left: 46px; }
.sof2g-steps > li::before { content: counter(sof2g-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--gold, #d3a45d); color: #111; font-weight: 700; line-height: 30px; text-align: center; }

.sof2g-table-wrap { overflow-x: auto; margin: 20px 0; }
.sof2g-content table, .sof2g-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sof2g-content caption { caption-side: top; padding: 0 0 8px; text-align: left; color: var(--muted, #aab6b5); font-size: .9rem; }
.sof2g-content th, .sof2g-content td, .sof2g-table th, .sof2g-table td { padding: 9px 12px; border-bottom: 1px solid var(--line, #26333b); text-align: left; vertical-align: top; }
.sof2g-content thead th, .sof2g-table thead th { color: var(--dim, #7f8d8b); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.sof2g-content tbody th { color: var(--text, #eef1ee); font-weight: 600; font-size: inherit; letter-spacing: normal; text-transform: none; }
.sof2g-muted { color: var(--dim, #7f8d8b); }

.sof2g-content dl dt { margin-top: 16px; font-weight: 700; color: var(--gold-2, #f2ce8d); }
.sof2g-content dl dd { margin: 4px 0 0; }

.sof2g-faq h3 { font-size: 1.1em; }

/* Footer, pager, related */
.sof2g-foot { max-width: 820px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line, #26333b); color: var(--dim, #7f8d8b); font-size: .92rem; }
.sof2g-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 32px 0; }
.sof2g-pager a { display: block; padding: 14px 18px; border: 1px solid var(--line, #26333b); border-radius: var(--radius-sm, 8px); background: var(--panel, #131b21); color: var(--text, #eef1ee); text-decoration: none; }
.sof2g-pager a:hover { border-color: var(--gold-dark, #8f6f42); }
.sof2g-pager small { display: block; color: var(--dim, #7f8d8b); }
.sof2g-pager .next { text-align: right; }
@media (max-width: 640px) { .sof2g-pager { grid-template-columns: 1fr; } .sof2g-pager .next { text-align: left; } }

.sof2g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.sof2g-card { display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid var(--line, #26333b); border-radius: var(--radius, 14px); background: var(--panel, #131b21); }
.sof2g-card-title { margin: 0 0 8px !important; font-size: 1.15rem !important; line-height: 1.3; }
.sof2g-card-title a { color: var(--text, #eef1ee); text-decoration: none; }
.sof2g-card-title a:hover { color: var(--gold-2, #f2ce8d); }
.sof2g-card p { margin: 0 0 10px; color: var(--muted, #aab6b5); font-size: .95rem; }
.sof2g-card .sof2g-card-meta { margin: auto 0 0; color: var(--dim, #7f8d8b); font-size: .85rem; }

.sof2g-topic { margin: 0 0 44px; }
.sof2g-topic h2 a { color: inherit; text-decoration: none; }
.sof2g-topic-desc { margin: 0; color: var(--muted, #aab6b5); }
.sof2g-topics { margin-top: 40px; }
.sof2g-topics ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.sof2g-topics a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line, #26333b); border-radius: 999px; color: var(--muted, #aab6b5); text-decoration: none; }
.sof2g-related { margin-top: 40px; }

.sof2g-related-box { margin: 36px 0 0; padding: 18px 22px; border: 1px solid var(--gold-dark, #8f6f42); border-radius: var(--radius, 14px); background: var(--panel, #131b21); }
.sof2g-related-box h2 { margin: 0 0 8px; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, #d3a45d); }
.sof2g-related-box ul { margin: 0; padding: 0; list-style: none; }
.sof2g-related-box li { margin: 8px 0 0; }
.sof2g-related-box a { font-weight: 700; font-size: 1.1rem; }
.sof2g-related-box span { display: block; color: var(--muted, #aab6b5); font-size: .95rem; }