/* Documentation-only styles. Scoped under body.docs-page — must not affect
   Landing, Converter, REM↔PX, or any other page. */

/* ── Vertical rhythm ─────────────────────────────────────────────
   Paragraph→paragraph      --space-4  (16px)
   Heading→content          --space-4  (16px)
   Section→section (h2 top) --space-16 (64px) desktop / --space-12 (48px) ≤900
   Callout (.alert, card)   --space-10 (40px) desktop / --space-8  (32px) ≤900
   Article→pager            --space-12 (48px)                                */

/* Article container: bump the lede→first-section gap so the intro breathes,
   without touching the shared .help-lede rule used by REM↔PX. 40px = --space-10 on the tokens.css 8px scale. */
body.docs-page .help-lede {
    margin-bottom: 40px;
}

/* H2 = new section. Override the shared .help-content h2 rule
   (style.css sets 40/16). Desktop section spacing = 64px (--space-16).
   Bottom = 16px (--space-4) so heading→content is 16px. */
body.docs-page .help-content h2 {
    margin: var(--space-16) 0 var(--space-4);
}

/* H3 sits inside a section, above a sub-block. 32px top, 16px bottom = 8px scale. */
body.docs-page .help-content h3 {
    margin: 32px 0 var(--space-4);
}

/* Callout card blocks (.card wrapping .card-content) sit bare in docs — the
   #docs-main .card rule strips their chrome. Callout rhythm = 40px. */
body.docs-page #docs-main .card {
    margin: 40px 0;
}

/* Alert = framed callout inside a section. Same 40px rhythm as bare cards. */
body.docs-page #docs-main .alert {
    margin: 40px 0;
}

/* An H2/H3 immediately followed by its .card or .alert: collapse the double
   gap so heading→content stays 16px, not 16 + 40. */
body.docs-page #docs-main h2 + .card,
body.docs-page #docs-main h3 + .card,
body.docs-page #docs-main h2 + .alert,
body.docs-page #docs-main h3 + .alert {
    margin-top: var(--space-4);
}

/* Article → next-page navigation = 48px (--space-12, identical in both
   stylesheets). Replaces the shared .docs-pager margin-top (32px). */
body.docs-page .docs-pager {
    margin-top: var(--space-12);
}

/* Last block in the article should not add trailing margin below the pager
   line (the pager already owns that boundary). */
body.docs-page .help-inner > *:last-child {
    margin-bottom: 0;
}

/* Inside a bare docs .card, the last child paragraph should not add a
   trailing 16px gap — the card itself owns the boundary. This retires the
   ad-hoc inline `style="margin-bottom:0"` on the final <p> in each card. */
body.docs-page #docs-main .card-content > *:last-child,
body.docs-page #docs-main .card > *:last-child {
    margin-bottom: 0;
}

/* ── Responsive: compress section + callout rhythm on tablet/mobile ── */
@media (max-width: 900px) {
    body.docs-page .help-content h2 {
        margin-top: var(--space-12);   /* 48px */
    }
    body.docs-page .help-content h3 {
        margin-top: 24px;
    }
    body.docs-page #docs-main .card,
    body.docs-page #docs-main .alert {
        margin: 32px 0;
    }
    body.docs-page #docs-main h2 + .card,
    body.docs-page #docs-main h3 + .card,
    body.docs-page #docs-main h2 + .alert,
    body.docs-page #docs-main h3 + .alert {
        margin-top: var(--space-4);
    }
    body.docs-page .help-lede {
        margin-bottom: 32px;
    }
}

/* ── Documentation figures ──────────────────────────────────────
   Screenshots and loops that prove the surrounding text. Same 40px
   callout rhythm as .card / .alert. */
body.docs-page #docs-main .doc-figure {
    margin: 40px 0;
}

/* Heading immediately followed by its figure: keep heading→content at 16px. */
body.docs-page #docs-main h2 + .doc-figure,
body.docs-page #docs-main h3 + .doc-figure {
    margin-top: var(--space-4);
}

body.docs-page #docs-main .doc-figure-frame {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--card);
}

/* width/height attrs give each asset its own ratio, so the box is reserved
   before decode without forcing one aspect on assets that differ. */
body.docs-page #docs-main .doc-figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Caption carries the claim the screenshot alone cannot make, and stays
   crawlable body text rather than living only in alt. */
body.docs-page #docs-main .doc-figure figcaption {
    margin-top: var(--space-3);
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-foreground);
}

@media (max-width: 900px) {
    body.docs-page #docs-main .doc-figure {
        margin: 32px 0;
    }
    body.docs-page #docs-main h2 + .doc-figure,
    body.docs-page #docs-main h3 + .doc-figure {
        margin-top: var(--space-4);
    }
}