/* ChartExport — per-chart export disclosure in the Live Preview header (spec §08). */ .wrap { position: relative; display: inline-flex; } /* Trigger — a compact ghost button (icon + label), matching the header utilities. */ .trigger { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-3); border: var(--border-width) solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .trigger:hover:not(:disabled) { background: var(--layer-01); color: var(--text); } .trigger[aria-expanded='true'] { background: var(--layer-02); color: var(--text); } .trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .trigger:disabled { opacity: 0.45; cursor: not-allowed; } .triggerIcon { color: currentColor; } /* The disclosed panel — portaled to , positioned `fixed` (top/right set inline) so it escapes the panes' overflow clipping. Mirrors SettingsPopover. */ .pop { position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 264px; max-width: min(320px, 92vw); padding: var(--space-3); background: var(--layer-01); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .groupTitle { margin: var(--space-3) 0 var(--space-1); padding: 0 var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); } /* The first group heading sits flush with the panel top. */ .groupTitle:first-child { margin-top: 0; } /* Action rows — full-width, left-aligned ghost buttons. */ .action { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-2); border: var(--border-width) solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .action:hover:not(:disabled) { background: var(--layer-02); } .action:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; } .action:disabled { color: var(--text-placeholder); cursor: not-allowed; } /* The monospace extension hint, trailing the JSON action. */ .ext { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); } .action:disabled .ext { color: inherit; } .hint { margin: var(--space-2) 0 0; padding: 0 var(--space-2); font-size: 11px; line-height: 1.4; color: var(--text-secondary); }