/* 11-14 "Embed this chart" panel (embed_pages.py) + the /embed/ how-to page. Prefix emx- */
.emx { margin: 10px 0 0; }
.emx > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--mute, #6e6e73); padding: 6px 12px; border: 1px solid var(--line, #d2d2d7); border-radius: 999px; background: #fff; }
.emx > summary::-webkit-details-marker { display: none; }
.emx > summary::before { content: "</>"; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.emx > summary:hover, .emx[open] > summary { color: var(--ink, #1d1d1f); border-color: #86868b; }
.emx-p { margin: 10px 0 0; padding: 14px; border-radius: 16px; background: #f5f5f7; max-width: 720px; }
.emx-h { margin: 0 0 8px; font-size: 14.5px; }
.emx-t { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; }
.emx-t legend { float: left; font-weight: 700; color: var(--mute, #6e6e73); margin-right: 4px; padding: 0; }
.emx-t label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.emx .cpy-r code, .emxp .emx-gen .cpy-r code { font-size: 12px; word-break: break-all; background: #fff; max-height: 9.5em; overflow: auto; }
.emx-l { margin: 4px 0 0; font-size: 14px; }
.emxp .emx-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin: 0 0 6px; }
.emxp .emx-f label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.emxp .emx-f select { width: 100%; min-width: 0; font: inherit; font-weight: 400; padding: 9px 10px; border: 1px solid var(--line, #d2d2d7); border-radius: 10px; background: #fff; color: inherit; }
.emxp .emx-gen { background: #f5f5f7; border-radius: 18px; padding: 16px; }
.emxp .emx-gen .cpy-r code { max-height: none; }