/* Guide styles inherit the shared site width, typography and theme tokens. */
main .guide-jump{display:flex;flex-wrap:wrap;gap:8px 16px;padding-block:12px;margin:16px 0 24px;border-block:1px solid var(--line);font-size:var(--text-sm)}
main section{margin-block:24px;scroll-margin-top:16px}
main .guide-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:24px;align-items:start;padding-block:24px;border-top:1px solid var(--line)}
main .guide-step>div{min-width:0}
main .guide-step h2{margin-top:0}
main .guide-instructions{padding-inline-start:24px;margin-block:12px}
main .guide-instructions li+li{margin-top:12px}
main .guide-note{border-inline-start:2px solid var(--accent-border);padding-inline-start:12px;color:var(--muted)}
main .guide-caption,main figcaption{font-size:var(--text-xs);color:var(--muted);line-height:1.6}
main .guide-screenshot{margin:0;min-width:0;max-width:380px;width:100%;justify-self:start}
main .guide-screenshot a{display:block;border:1px solid var(--line);border-radius:var(--radius-control);overflow:hidden;background:var(--soft)}
main .guide-screenshot img{display:block;width:100%;height:auto}
main figcaption{margin-top:8px}
main details{margin-block:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
main summary{cursor:pointer;min-height:44px;padding-block:8px;padding-inline:8px 0;font-weight:500;line-height:1.6;overflow-wrap:anywhere}
main details p:last-child{margin-bottom:0}
main .guide-actions,main .guide-recovery{margin:16px 0}
main dt{font-weight:600;line-height:1.6;margin-top:16px}
main dd{margin:4px 0 0;line-height:1.65;color:var(--muted);overflow-wrap:anywhere}
main .guide-actions dd,main .guide-recovery dd{max-width:75ch}
main kbd{display:inline-block;max-width:100%;padding:2px 6px;border-radius:var(--radius-sm);background:var(--soft);font:inherit;font-size:var(--text-sm);white-space:normal;overflow-wrap:anywhere}
/* Wide extractor screenshots retain readable labels; extension captures remain compact. */
main .guide-screenshot:has(img[src$="text-input.jpg"]),main .guide-screenshot:has(img[src$="extractor-results.jpg"]),main .guide-screenshot:has(img[src$="webpage-input.jpg"]){max-width:100%}
@media(max-width:900px){main .guide-step{grid-template-columns:1fr;gap:16px}main .guide-screenshot{max-width:340px}}
@media(pointer:coarse){main .guide-jump a{display:inline-flex;align-items:center;min-height:44px}}

/* Match the extractor: one information icon, a readable note and an 8 px gap. */
main .guide-note{display:flex;align-items:flex-start;gap:var(--space-2);border:0;padding:0;text-align:start}
main .guide-note>.icon{width:16px;height:16px;flex:none;color:var(--icon-blue);margin-block-start:calc((1em * var(--line-body) - 16px) / 2)}
main .guide-note>span{min-width:0;overflow-wrap:anywhere}

/* Navigation and a step should not create adjacent separator lines. */
main .guide-jump{border:0;padding-block:8px;margin:16px 0}
main .guide-step{border-top:0;padding-block:0}
main details{border-bottom:0;padding-bottom:0}
main summary{padding-inline:0;line-height:var(--line-body)}
main .localized-quickstart{margin:0 0 16px}