/* datanovia-echarts facade — poster + "Load interactive chart" overlay + loaded iframe.
   Brand azure (#3a86d4) focus/hover; amber (#f5a524) play token (the one action color). */
.dnv-echarts-facade { margin: 1.75rem 0 0.4rem; }

.dnv-echarts-load {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--bs-border-color, #d9dee5);
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}
.dnv-echarts-load:hover { box-shadow: 0 8px 24px rgba(11, 41, 66, .16); transform: translateY(-1px); }
.dnv-echarts-load:focus-visible { outline: 3px solid #3a86d4; outline-offset: 2px; }

.dnv-echarts-poster { display: block; }

.dnv-echarts-cue {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  line-height: 1.4;
  color: #fff;
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  font-size: .95rem;
  letter-spacing: .01em;
  background: rgba(11, 41, 66, .42);
  opacity: 0;
  transition: opacity .18s ease;
}
.dnv-echarts-load:hover .dnv-echarts-cue,
.dnv-echarts-load:focus-visible .dnv-echarts-cue { opacity: 1; }

.dnv-echarts-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #f5a524;
  color: #0b2942;
  font-size: 1rem;
  padding-left: .12rem; /* optically center the ▶ glyph */
}

/* Touch devices have no hover — keep the affordance always visible but restrained. */
@media (hover: none) {
  .dnv-echarts-cue { opacity: 1; background: linear-gradient(0deg, rgba(11,41,66,.55), rgba(11,41,66,.10) 55%); align-items: flex-end; padding-bottom: 1rem; }
}

/* Caption authored as a `::: {.dnv-echarts-cap}` markdown block right after the facade
   (translatable prose, D-12). Pulled tight under the poster; it is the poster's accessible
   description (the <img> is alt="" decorative). */
.dnv-echarts-cap {
  margin: 0 0 1.75rem;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--bs-secondary-color, #5b6b7d);
  text-align: center;
}
.dnv-echarts-cap p { margin: 0; }

.dnv-echarts-frame { border-radius: 12px; display: block; }

@media (prefers-color-scheme: dark) {
  .dnv-echarts-load { border-color: #2a3a4d; }
}
:root[data-theme="dark"] .dnv-echarts-load { border-color: #2a3a4d; }
:root[data-theme="light"] .dnv-echarts-load { border-color: #d9dee5; }

@media (prefers-reduced-motion: reduce) {
  .dnv-echarts-load { transition: none; }
  .dnv-echarts-load:hover { transform: none; }
}