/* TriageCode MD: live blocks on article pages.   live-blocks-build:4   Loaded by the first live block of an article (see Live::assets).
   The plain-words note shows until assets/js/live-embed.js takes the block over (it sets data-live-state on the figure); from then on the
   stage shows the sealed frame and the note is hidden. Without JavaScript, or if the script file is missing or blocked, the reader keeps the
   note: it is kept out of sight for the first seconds only when the page has JavaScript (the <html> element has the class "js"), so that it
   does not flash while the script loads. In print the frame is replaced by the note. Only this file styles a block. */
.live-block { margin: 2rem 0; }

/* the note: feeds and readers without JavaScript see this as it is; the page hides it when the frame can run */
.live-block .live-fallback {
  margin: 0; padding: .75rem 1rem; border-left: 4px solid var(--t5); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-2); color: var(--ink-2); font: 400 .95rem/1.5 var(--font-ui);
}
.live-block .live-fallback strong { color: var(--ink); font-weight: 700; }
.live-block .live-open { display: none; }

/* the stage: a bordered card the frame fills; its height is set by the script (the block's own height, or the height of its content).
   The site sets border-box on everything; here the height is the frame's height, so the 1 px border sits outside it (otherwise the frame
   is 2 px shorter than its content and shows a scroll bar). */
.live-block .live-stage { display: none; }
.live-block[data-live-state] .live-stage {
  display: block; position: relative; box-sizing: content-box; min-height: 80px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.live-block[data-live-state] .live-fallback { display: none; }
.live-block .live-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }

/* with JavaScript but no script taking over yet: the note waits out of sight; if nothing happens for 6 seconds it appears (a missing or blocked file) */
.js .live-block:not([data-live-state]) .live-fallback { visibility: hidden; animation: live-late 0s linear 6s forwards; }
@keyframes live-late { to { visibility: visible; } }

/* "This example did not start" */
.live-block .live-note {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .6rem;
  padding: 1rem 1.25rem; background: var(--surface); color: var(--ink); font: 400 .95rem/1.5 var(--font-ui);
}
.live-block .live-note p { margin: 0; }
.live-block .live-retry { min-height: 44px; }

@media print {
  .live-block { break-inside: avoid; }
  .live-block .live-stage, .live-block figcaption { display: none !important; }   /* the note names the block, so the caption would say the title twice */
  .live-block .live-fallback { display: block !important; visibility: visible !important; animation: none; border-color: #000; background: none; color: #000; }
  .live-block .live-need { display: none; }
  .live-block .live-fallback::after { content: " (interactive: use it on the website)"; }
}
@media (forced-colors: active) {
  .live-block[data-live-state] .live-stage { border-color: CanvasText; }
  .live-block .live-fallback { border: 1px solid CanvasText; forced-color-adjust: auto; }
}