/* "Embed" button under a chart on the site, with the copyable <iframe> code
   (public/assets/js/embed.js). Builds on the tokens in site.css. */

.ec { margin: 0.75rem 0 0; font-size: 0.88rem; }
.ec-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--accent-dark); font: inherit; font-weight: 600; cursor: pointer;
}
.ec-toggle:hover { border-color: var(--accent-soft); background: var(--mist); }
.ec-toggle:focus-visible, .ec-copy:focus-visible, .ec-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ec-panel { margin-top: 0.6rem; padding: 0.85rem 1rem; max-width: 46rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--text); }
.ec-panel[hidden] { display: none; }
.ec-panel p { margin: 0 0 0.5rem; font-size: 0.84rem; color: var(--muted); }
.ec-code {
  display: block; width: 100%; min-height: 5.5rem; padding: 0.55rem 0.65rem; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); color: var(--text);
  font: 0.8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.6rem; }
.ec-copy { padding: 0.35rem 0.85rem; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ec-copy:hover { background: var(--accent-dark); }
.ec-actions a { font-weight: 600; color: var(--accent-dark); }
.ec-status { font-size: 0.82rem; color: var(--muted); }
.ec-on-ink .ec-toggle { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }