/* Version: 1.1.0 | Created: 2026-09-07 | Updated: 2026-09-07 Shared styles for /features.html and /guides/*.html. Loaded AFTER site.css. Adds only what site.css does not have: data tables, figures with captions, numbered steps, callouts, a sticky in-page contents rail, and the guide index cards. v1.1.0: guide and feature pages run wider than the marketing pages (body.wide raises --max), while running prose keeps a readable measure. Screenshots, tables, formulas and callouts use the full column. */ /* ---- Page width ---- Marketing pages stay at the 1100px --max from site.css. Guide and feature pages carry class="wide" on , which widens the whole shell. clamp's lower bound is the old value, so nothing gets narrower than before. */ body.wide { --max: clamp(1100px, 90vw, 1560px); } /* ---- Layout: prose column plus a contents rail on wide screens ---- */ .guide-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:3.5rem; align-items:start; } .guide-toc { position:sticky; top:5rem; font-size:0.84rem; } .guide-toc h4 { font-size:0.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:0 0 0.75rem; } .guide-toc ul { list-style:none; margin:0; padding:0; border-left:1px solid var(--border); } .guide-toc li a { display:block; padding:0.3rem 0 0.3rem 0.9rem; color:var(--muted); text-decoration:none; border-left:2px solid transparent; margin-left:-1px; } .guide-toc li a:hover { color:var(--gold); border-left-color:var(--gold); } @media(max-width:900px){ .guide-layout { grid-template-columns:minmax(0,1fr); gap:2rem; } .guide-toc { position:static; } } /* ---- Prose ---- */ .guide-body { max-width:none; } .guide-body > p, .guide-body > ul, .guide-body > ol, .guide-body > h2, .guide-body > h3, .guide-body > h4 { max-width:100ch; } .guide-body h2 { margin:2.75rem 0 0.85rem; font-size:1.45rem; scroll-margin-top:5rem; } .guide-body h2:first-child { margin-top:0; } .guide-body h3 { margin:2rem 0 0.6rem; font-size:1.08rem; color:var(--gold); scroll-margin-top:5rem; } .guide-body p { line-height:1.75; margin:0 0 1rem; } .guide-body ul, .guide-body ol { line-height:1.75; padding-left:1.3rem; margin:0 0 1rem; } .guide-body li { margin-bottom:0.4rem; } .guide-body code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.86em; background:var(--surface2); border:1px solid var(--border); border-radius:4px; padding:0.1rem 0.35rem; color:var(--gold); } /* ---- Data tables (site.css has none) ---- */ .guide-table-wrap { overflow-x:auto; margin:0 0 1.5rem; border:1px solid var(--border); border-radius:var(--radius); } table.guide-table { width:100%; border-collapse:collapse; font-size:0.88rem; min-width:520px; } table.guide-table th { text-align:left; font-weight:600; color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.8px; padding:0.7rem 0.9rem; background:var(--surface2); border-bottom:1px solid var(--border); white-space:nowrap; } table.guide-table td { padding:0.7rem 0.9rem; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.6; } table.guide-table tr:last-child td { border-bottom:none; } table.guide-table td:first-child { color:var(--text); font-weight:500; white-space:nowrap; } table.guide-table code { white-space:nowrap; } /* ---- Figures ---- */ figure.guide-fig { margin:1.75rem 0; } figure.guide-fig img { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); } figure.guide-fig figcaption { font-size:0.8rem; color:var(--muted); margin-top:0.6rem; line-height:1.6; } figure.guide-fig figcaption strong { color:var(--text); } /* ---- Numbered steps ---- */ ol.guide-steps { list-style:none; padding:0; margin:0 0 1.5rem; counter-reset:gstep; } ol.guide-steps > li { position:relative; padding:0 0 1.4rem 2.6rem; counter-increment:gstep; border-left:1px solid var(--border); margin-left:0.85rem; } ol.guide-steps > li:last-child { border-left-color:transparent; padding-bottom:0; } ol.guide-steps > li::before { content:counter(gstep); position:absolute; left:-0.85rem; top:0; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--surface2); border:1px solid var(--gold); color:var(--gold); font-size:0.78rem; font-weight:600; display:flex; align-items:center; justify-content:center; } ol.guide-steps > li h4 { margin:0.15rem 0 0.4rem; font-size:0.98rem; color:var(--text); } ol.guide-steps > li p { margin:0 0 0.5rem; } /* ---- Callouts ---- */ .callout { border-radius:var(--radius); padding:1rem 1.15rem; margin:1.5rem 0; font-size:0.9rem; line-height:1.7; border:1px solid var(--border); background:var(--surface); } .callout h4 { margin:0 0 0.4rem; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.9px; } .callout p:last-child, .callout ul:last-child { margin-bottom:0; } .callout-note { border-left:3px solid var(--accent); background:var(--accent-dim); } .callout-note h4 { color:var(--accent); } .callout-tip { border-left:3px solid var(--gold); background:var(--gold-dim); } .callout-tip h4 { color:var(--gold); } .callout-warn { border-left:3px solid var(--danger); background:rgba(248,81,73,0.08); } .callout-warn h4 { color:var(--danger); } /* ---- Formula block ---- */ .formula { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:var(--radius); padding:1rem 1.15rem; margin:1.25rem 0; font-size:0.92rem; color:var(--text); overflow-x:auto; line-height:1.9; } .formula .fdef { display:block; font-family:inherit; font-size:0.82rem; color:var(--muted); } /* ---- Guide index / feature cards ---- */ .guide-index { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; } @media(max-width:900px){ .guide-index { grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .guide-index { grid-template-columns:1fr; } } .guide-index a.gcard { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; text-decoration:none; transition:border-color .15s, transform .15s; } .guide-index a.gcard:hover { border-color:var(--gold); transform:translateY(-2px); } .gcard h3 { margin:0.5rem 0 0.35rem; font-size:1rem; color:var(--text); } .gcard p { margin:0; font-size:0.84rem; color:var(--muted); line-height:1.6; } .gcard .gcard-meta { font-size:0.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.9px; } /* ---- Prev / next ---- */ .guide-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border); font-size:0.88rem; flex-wrap:wrap; } .guide-nav a { color:var(--muted); text-decoration:none; } .guide-nav a:hover { color:var(--gold); } /* ---- Breadcrumb ---- */ .crumb { font-size:0.8rem; color:var(--muted); margin-bottom:0.75rem; } .crumb a { color:var(--muted); text-decoration:none; } .crumb a:hover { color:var(--gold); }