.blog-embed { margin: 26px 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--card-border); background: var(--card-bg); }
.blog-embed iframe { display: block; width: 100%; height: 640px; border: 0; }

/* SM-812 (Jason, 2026-09-27: "A FUCKING SCROLLBAR?!?!"): the 640px above is
   no longer a frame. Every kind -- exercise/chain/routine included -- now
   reports its content height through static/tads/embed-resize.js, which sets
   the iframe's height inline, so 640px is only the pre-message default. It
   stays above 480px on purpose: the Exercise Viewer switches to its phone
   single-view (Fretboard/Sequence/TAB tabs) on a viewport under 480px tall,
   and an iframe's viewport IS its height. The old 460px narrow-width value
   was below that line and is gone. */

/* SM-232 (Jason, verbatim): "when embedding picking patterns into TADS
   Course Content, it's drawing an unnecessary border around the whole
   thing, PLUS making the embed much taller than its content ... The
   actual content height should be the embed height, period." Scoped to
   .blog-embed-picking ONLY (root cause: the two rules above, shared by
   every embed kind, were a fixed border + a fixed 640px/460px height with
   no relationship to actual content) -- exercise/chain/routine were
   deliberately left UNCHANGED, still governed by the rules above.

   Height is content-driven via postMessage from the embed page itself
   (static/tools/alt-picking/picking-public.js) to this host page's own
   listener (static/tads/embed-resize.js, loaded by templates/tads/
   lesson.html and templates/blog_detail.html); this fixed value is only
   the SANE INITIAL height before that first message arrives, sized to the
   typical single-line pattern + controls content (avoids a visible jump
   on the common case without ever being a real ceiling -- the JS listener
   overwrites it inline once the true height is known). */
.blog-embed-picking { border: 0; background: transparent; }
.blog-embed-picking iframe { height: 220px; }

/* SM-238 (Jason, 2026-08-01, verbatim): "There's already an embed on a
   real TADS Course lesson - that's what I was describing, so fix it."
   The real lesson (technique/ultimate-picking/tremolo-picking) uses a
   picking-CHALLENGE embed, not a plain picking-pattern embed -- SM-232
   above deliberately excluded picking-challenge, so it still shipped
   with the old border + fixed 640px/460px frame. Same fix, same
   mechanism, extended to this one remaining kind: border removed, height
   content-driven via postMessage from picking-challenge-public.js (SM-238
   gave it the same reporter picking-public.js already had) to this same
   embed-resize.js listener. exercise/chain/routine remain the only kinds
   still on the generic .blog-embed rules above -- picking-challenge's own
   internal one-card carousel sizing (SM-218) is unchanged; only the OUTER
   iframe frame around it is now content-height instead of fixed.

   The 220px default above is sized to a single-line picking pattern;
   this default is sized to a typical one-card CHALLENGE (pattern +
   heading + playback row + fader), which measures taller -- 460px is the
   real content height measured on the live tremolo-picking lesson embed
   at its actual rendered column width (~976px), same "sane initial,
   never a ceiling" role as the 220px default above. */
.blog-embed-picking-challenge { border: 0; background: transparent; }
.blog-embed-picking-challenge iframe { height: 460px; }