/* Chart toolbar for the GSEC tools (gsec-export.js, window.GsecExport):
   the row of actions under a figure, in this order on every page:
   Open in Chart Studio · Open in Map Studio · Download CSV · Show as table.
   On top of lrf-theme.css, which gives the buttons their size (.btn.btn-small,
   36px) and the segmented layout control its look (.seg.seg-small). Load it
   with gsec-export.js on any page that uses the helper. */

/* The row. "Show as table" is a <details> inside it: closed, its summary is
   a button like the others at the end of the row; open, it takes the whole
   width so the table sits under the buttons. The status line (what the last
   action did) goes between them, on a line of its own, and only when it
   has something to say. */
.chart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; min-width: 0; }
.chart-actions > .btn { order: 0; }
.chart-action-status { order: 10; flex: 1 1 100%; margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--lrf-ink-soft, #2a2a35); }
.chart-action-status:empty { display: none; }
.chart-actions > details { order: 20; flex: 0 1 auto; min-width: 0; margin: 0; font-size: 0.88rem; }
.chart-actions > details[open] { flex: 1 1 100%; }
/* The summary carries .btn.btn-small; the browser's own marker goes, and a
   chevron that turns when open takes its place. */
.chart-actions > details > summary { list-style: none; }
.chart-actions > details > summary::-webkit-details-marker { display: none; }
.chart-actions > details > summary::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin: -0.15rem 0 0 0.15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.chart-actions > details[open] > summary::after { transform: rotate(-135deg); margin: 0.15rem 0 0 0.15rem; }
.chart-actions > details > .table-wrap { margin-top: 0.5rem; max-height: 22rem; overflow: auto; max-width: 100%; }

/* The per-figure layout control (Stacked | Side by side | Share of total),
   drawn above a chart whose series are stacked. The theme styles the .seg. */
.chart-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0 0 0.6rem; }
.chart-layout-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lrf-muted, #6c6c78); }

/* Buttons that are busy (a studio tab opening) stay readable. */
.chart-actions > .btn[aria-disabled="true"] { cursor: progress; }

@media (max-width: 640px) {
  .chart-actions { gap: 0.4rem; }
}