/*
 * BS.Web.Blog: the embedded tool and the embed offer.      <link rel="stylesheet" href="/_content/BS.Web.Blog/bs-embed.css">
 *
 * The embed page (BlogToolEmbed.Page, in another site's iframe) links it itself:
 *
 *   <body class="bs-embed">
 *     <main class="bs-embed-tool">[the tool's markup]</main>
 *     <p class="bs-embed-credit"><a href="..." target="_blank">Liquidation calculator by ZK Futures</a></p>
 *   </body>
 *
 * The offer on the tool page (BlogTool.EmbedOffer), with /_content/BS.Web.Blog/bs-embed.js for its copy button:
 *
 *   <section class="bs-embed-offer" data-bs-embed>
 *     <h2 class="bs-embed-offer-title">Embed this tool</h2>
 *     <p class="bs-embed-offer-text">...</p>
 *     <textarea class="bs-embed-code" data-bs-embed-code readonly>...</textarea>
 *     <p class="bs-embed-actions"><button class="bs-embed-copy" data-bs-embed-copy hidden>Copy code</button>
 *       <span class="bs-embed-status" data-bs-embed-status role="status"></span></p>
 *   </section>
 *
 * The badge offer (BlogBadges.Offer) is a section of the same classes with a preview and two copy fields:
 *
 *   <section class="bs-embed-offer"> ... <p class="bs-embed-preview"><a href="..."><picture>...</picture></a></p>
 *     <div class="bs-embed-field" data-bs-embed><p class="bs-embed-field-label">Markdown</p><textarea class="bs-embed-code" ...>
 *       <p class="bs-embed-actions">...</p></div> ...
 *   </section>
 *
 * The theme is the article page's: --bs-article-bg, -ink, -muted, -accent, -accent-ink, -surface, -border, -focus, -radius, -font and
 * -font-display (bs-article.css lists them), set by the site on :root or body (on the embed page by the head the product passes).
 * This file only reads them; every colour comes from them.
 */

/* The theme with its defaults (private: --_bse-*). */
:where(.bs-embed, .bs-embed-offer) {
  --_bse-bg: var(--bs-article-bg, #ffffff);
  --_bse-ink: var(--bs-article-ink, #172033);
  --_bse-muted: var(--bs-article-muted, #5a6478);
  --_bse-accent: var(--bs-article-accent, #1d4ed8);
  --_bse-accent-ink: var(--bs-article-accent-ink, #ffffff);
  --_bse-surface: var(--bs-article-surface, #f3f5f9);
  --_bse-border: var(--bs-article-border, #dce1ea);
  --_bse-focus: var(--bs-article-focus, var(--_bse-accent));
  --_bse-radius: var(--bs-article-radius, 1rem);
}

/* The embed page: the tool fills the frame, the credit sits under it. */
.bs-embed {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0.75rem;
  background-color: var(--_bse-bg);
  color: var(--_bse-ink);
  font-family: var(--bs-article-font, system-ui, sans-serif);
}
.bs-embed-tool { flex: 1 0 auto; min-width: 0; }
.bs-embed-credit { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.25rem; text-align: end; color: var(--_bse-muted); }
.bs-embed-credit a { color: inherit; text-decoration-line: underline; text-underline-offset: 0.2em; }
.bs-embed-credit a:focus-visible { outline: 2px solid var(--_bse-focus); outline-offset: 2px; border-radius: 0.125rem; }

/* The offer on the tool page: heading, line, the code in a field and the copy button with its status. */
.bs-embed-offer {
  box-sizing: border-box;
  border-radius: var(--_bse-radius);
  background-color: var(--_bse-surface);
  padding: 1.5rem;
  color: var(--_bse-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_bse-ink) 6%, transparent);
}
.bs-embed-offer-title {
  margin: 0;
  font-family: var(--bs-article-font-display, var(--bs-article-font));
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}
.bs-embed-offer-text { margin: 0.5rem 0 0; line-height: 1.5rem; color: var(--_bse-muted); }
.bs-embed-code {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1rem 0 0;
  resize: vertical;
  border: 1px solid var(--_bse-border);
  border-radius: calc(var(--_bse-radius) * 0.5);
  background-color: var(--_bse-bg);
  padding: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--_bse-ink);
}
.bs-embed-code:focus-visible { outline: 2px solid var(--_bse-focus); outline-offset: 2px; }
.bs-embed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.75rem 0 0; }
.bs-embed-copy {
  border: 0;
  border-radius: 9999px;
  background-color: var(--_bse-accent);
  padding: 0.5rem 1.125rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--_bse-accent-ink);
  cursor: pointer;
}
.bs-embed-copy[hidden] { display: none; }
.bs-embed-copy:hover { filter: brightness(1.08); }
.bs-embed-copy:focus-visible { outline: 2px solid var(--_bse-focus); outline-offset: 2px; }
.bs-embed-status { font-size: 0.875rem; color: var(--_bse-muted); }

/* The badge offer (BlogBadges.Offer): the badge as a preview, then its Markdown and HTML, each a field with its own copy button. */
.bs-embed-preview { margin: 1rem 0 0; }
.bs-embed-preview img { display: block; max-width: 100%; height: auto; }
.bs-embed-field { margin: 1rem 0 0; }
.bs-embed-field .bs-embed-code { margin-top: 0.375rem; }
.bs-embed-field-label { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--_bse-ink); }