/* One width system: the SEO blocks (breadcrumb, guide, related, footer) follow the page container they sit under. */
:root { --page-gutter: 32px; --seo-w: min(100% - 40px, 1400px); }
body:has(> .content-page) { --seo-w: min(100% - var(--page-gutter), 960px); }
body:has(> .kit-page) { --seo-w: min(100% - 48px, 1132px); }
body:has(.kit-home-intro) { --seo-w: min(100% - 40px, 1040px); }
body:has(.yut-app) { --seo-w: min(100% - 40px, 1160px); }
body:has(.board-app) { --seo-w: min(100% - 40px, 1220px); }
@media (max-width: 640px) { :root { --page-gutter: 20px; --seo-w: min(100% - 24px, 1400px); } body:has(> .kit-page) { --seo-w: min(100% - 48px, 1132px); } body:has(.kit-home-intro) { --seo-w: min(100% - 24px, 1040px); } body:has(.yut-app), body:has(.board-app) { --seo-w: min(100% - 24px, 1400px); } }
.seo-information { position:relative; z-index:1; width:var(--seo-w); margin:24px auto; padding:24px; border:1px solid var(--color-border,#cbd5e1); border-radius:16px; background:var(--color-surface,#fff); color:var(--text-primary,#0f172a); }
.seo-information h2 { font:700 1.25rem var(--font-display,system-ui); margin:0 0 16px; }
.seo-answers details { border-top:1px solid var(--color-border-subtle,#e2e8f0); padding:12px 0; }
.seo-answers summary { cursor:pointer; font-weight:700; min-height:44px; line-height:1.6; }
.seo-answers p { margin:8px 0 0; color:var(--text-secondary,#475569); line-height:1.8; }
.seo-tool-links,.seo-breadcrumb { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.seo-tool-links { margin-top:18px; }.seo-tool-links a { color:var(--accent-blue,#c2410c); font-weight:700; min-height:44px; display:flex; align-items:center; }
.seo-breadcrumb { position:relative; z-index:1; width:var(--seo-w); margin:20px auto; font-size:.85rem; color:var(--text-secondary,#475569); }
.seo-breadcrumb a { color:inherit; text-decoration:none; line-height:1.6; overflow-wrap:anywhere; }.seo-breadcrumb a:hover { text-decoration:underline; }
.seo-information summary:focus-visible,.seo-information a:focus-visible,.seo-breadcrumb a:focus-visible { outline:3px solid var(--accent-blue,#c2410c); outline-offset:4px; }
@media(max-width:560px) { .seo-information { padding:18px; }.seo-information h2 { font-size:1.1rem; } }
/* Page guides, related pages and the static footer rendered by scripts/seo.js. */
.page-guide,.related-pages { position:relative; z-index:1; width:var(--seo-w); margin:24px auto; padding:clamp(20px,4vw,36px); border:1px solid var(--color-border,#cbd5e1); border-radius:16px; background:var(--color-surface,#fff); color:var(--text-primary,#0f172a); }
.page-guide h2,.related-pages h2 { font:700 1.3rem/1.35 var(--font-display,system-ui); margin:0 0 14px; }
.page-guide h3 { font:700 1.02rem/1.4 var(--font-display,system-ui); margin:0 0 8px; }
.page-guide p,.page-guide li { color:var(--text-secondary,#475569); line-height:1.8; }
.page-guide-intro { max-width:820px; margin:0 0 22px; font-size:1rem; }
.page-guide-steps { margin:0 0 22px; padding:18px 20px; border-radius:12px; background:var(--color-surface-hover,#f1f5f9); }
.page-guide-steps ol { margin:0; padding-left:1.4em; display:grid; gap:6px; }
.page-guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.page-guide-grid article { padding-top:14px; border-top:2px solid var(--color-border,#cbd5e1); }
.page-guide-grid p { margin:0; font-size:.94rem; }
.page-guide-meta { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:22px 0 0; font-size:.85rem; }
.page-guide-meta a,.related-pages a { color:var(--accent-blue,#c2410c); font-weight:700; }
.page-guide-meta a { min-height:44px; display:inline-flex; align-items:center; }
.related-pages ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.related-pages a { display:grid; gap:4px; height:100%; padding:14px 16px; border:1px solid var(--color-border,#cbd5e1); border-radius:12px; text-decoration:none; }
.related-pages a:hover { border-color:var(--accent-blue,#c2410c); }
.related-pages a span { color:var(--text-secondary,#475569); font-weight:400; font-size:.88rem; line-height:1.6; }
.site-static-footer { position:relative; z-index:1; display:block; width:var(--seo-w); margin:18px auto 30px; padding:16px; border-top:1px solid var(--color-border-subtle,#e2e8f0); text-align:center; }
.site-static-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; }
.site-static-footer a { min-height:44px; display:inline-flex; align-items:center; color:var(--text-muted,#64748b); font-weight:700; text-decoration:none; }
.site-static-footer a:hover { color:var(--accent-blue,#c2410c); text-decoration:underline; }
.site-static-footer p { margin:6px 0 0; color:var(--text-muted,#64748b); font-size:.78rem; line-height:1.6; }
.page-guide a:focus-visible,.related-pages a:focus-visible,.site-static-footer a:focus-visible { outline:3px solid var(--accent-blue,#c2410c); outline-offset:3px; }
@media(max-width:560px) { .page-guide,.related-pages { padding:18px; }.page-guide h2,.related-pages h2 { font-size:1.12rem; }.page-guide-steps { padding:14px 16px; } }
@media (max-width: 480px) { body:has(> .kit-page) { --seo-w: min(100% - 32px, 1132px); } }