/* ============================================================
   embed.css        wA-campaign, 2026-08-02

   THE EMBED BUILDER'S rules, hoisted out of the <style> block in
   the first edition's EmbedBuilder.aspx (copy-and-adapt, ruling
   112). Every value is the first edition's, character for
   character; only the selector prefix changed.

   THIS FILE IS NOT THE CARD'S STYLESHEET, and that distinction
   is the whole reason to write this paragraph down.

   The builder page (/embed) is OUR page, inside OUR chrome, so
   its CSS belongs here like every other page's. The CARD that
   Embed.ashx serves is a whole self-contained HTML document that
   renders inside SOMEBODY ELSE'S page, and its <style> stays
   inline in EmbedHandler.vb deliberately. Three reasons, all the
   first edition's and all still true:

     1. An embed that fetches a stylesheet from the atlas on every
        host page load is a tracker whether or not anybody meant
        it to be. The card is served to readers of a stranger's
        blog who have no relationship with us.
     2. A card that needs a second request to look right is a card
        a strict Content Security Policy on the host site breaks.
     3. The card must render correctly the first time, with no
        flash of unstyled content, in a frame whose height the
        host chose.

   So "no inline CSS" is honoured for the builder and deliberately
   NOT for the card. Moving the card's <style> into this file
   would be a regression, not a cleanup.
   ============================================================ */

/* SELECTOR RESTORED TO h1.page, THEN MADE TAG-INDEPENDENT (.embedpage
   .page), w-launchfix3-2241, 2026-08-23 (board 1793/1812 reversal). See
   campaign.css for the full reasoning: EmbedBuilder.aspx's own "Embed a
   Card" heading is h1 again, and the selector drops the tag qualifier so
   a future heading-level change never forces a rename here. */
.embedpage .page{font-family:var(--serif);font-size:2rem;margin:0 0 6px;font-weight:600}

.embedpage .ebfrm{display:flex;flex-direction:column;gap:12px;margin-top:18px;max-width:44rem}
.embedpage .ebfrm label{font-size:.8rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.embedpage .ebfrm input,.embedpage .ebfrm select,.embedpage .ebfrm textarea{width:100%;max-width:100%;background:var(--ground);
  border:1px solid var(--edge2);color:var(--ink);border-radius:9px;padding:9px 11px;
  font-family:var(--sans);font-size:.95rem}
.embedpage .ebfrm textarea{min-height:5em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.5}
.embedpage .ebfld{display:flex;flex-direction:column;gap:5px;min-width:0}
.embedpage .ebbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.embedpage .fldhint{color:var(--faint);font-size:.78rem;line-height:1.45}
.embedpage .msg{border-radius:11px;padding:11px 13px;margin:0 0 14px;font-size:.92rem;line-height:1.5}
.embedpage .msg.bad{color:var(--dark-c);border:1px solid var(--dark-c);background:rgba(190,120,120,.10)}
/* The preview frame. A fixed height would clip a long fact at large text sizes,
   so it is min-height in em and the frame is allowed to grow. */
.embedpage .ebprev{width:100%;min-height:11em;border:1px dashed var(--edge2);border-radius:11px;background:transparent}
.embedpage .terms{border:1px solid var(--edge);border-radius:12px;padding:14px 16px;margin-top:22px;line-height:1.6;color:var(--muted)}
/* The terms heading is NOT the section heading two rules down: the first
   edition draws it at 1.1rem tight against the list inside its own box, not at
   1.22rem with 26px of air above it. It moved from h3 to h2 for the same
   read-aloud reason as the others, and these are its own declarations
   unchanged, so the box looks exactly as it did. */
.embedpage .terms h2.termshd{font-family:var(--serif);font-size:1.1rem;margin:0 0 8px;color:var(--ink);font-weight:600}
.embedpage .terms ul{margin:8px 0 0;padding-left:1.15rem}
.embedpage .terms li{margin:5px 0}

/* The snippet block sits tighter under its heading than a form does under the
   lede. This was an inline style="margin-top:10px" on that one .ebfrm. */
.embedpage .ebfrm.ebsnip{margin-top:10px}

/* h2.ebsechd, where the first edition wrote the same two declarations as an
   inline style="" on an <h3> inside BuildPreview. Same font and size; the
   level moved because each heading now opens a <section class="sec">, which
   is what js/panel-speak.js walks. */
.embedpage h2.ebsechd{font-family:var(--serif);font-size:1.22rem;margin:26px 0 0;font-weight:600}

/* A .sec draws a panel only under .dvpage (site.css:1442). Here it is an
   invisible read-aloud hook and must introduce no spacing of its own. */
.embedpage .sec{margin:0;padding:0;background:none;border:0}