/* embed.css — standalone, fit-to-screen embed of just the LoRa diagram */

html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body::before { display: none; }   /* drop the page grid backdrop for a clean embed */

.embed-root {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2.4vh, 26px) clamp(14px, 2.6vw, 34px);
  gap: clamp(8px, 1.4vh, 16px);
  box-sizing: border-box;
}

/* the Diagram root fills the embed and lays out as a column */
.embed-root .diagram {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* no control bar / hover hint in the embed — it auto-plays */
.embed-root .diagram-controls { display: none; }

/* caption sits on top, fixed height */
.embed-root .step-caption { flex: none; margin-bottom: 0; }

/* svg fills the remaining height and scales to fit (preserveAspectRatio=meet) */
.embed-root .diagram-svg {
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
}

/* tighten the caption a touch so it never crowds the diagram on short embeds */
@media (max-height: 760px) {
  .embed-root .cap-badge { width: 46px; height: 46px; font-size: 21px; border-radius: 11px; }
  .embed-root .cap-title { font-size: 19px; }
  .embed-root .cap-detail { font-size: 12.5px; }
  .embed-root .step-caption { padding: 12px 16px; gap: 14px; }
}
@media (max-height: 560px) {
  .embed-root .cap-detail { display: none; }
  .embed-root .cap-badge { width: 40px; height: 40px; font-size: 18px; }
  .embed-root .cap-title { font-size: 16px; }
}