/* Shared Plotly XY plotter. Used by the file details modal; reusable elsewhere. */

.plot-host { container-type: inline-size; }
.plot-controls { margin-bottom: 10px; }

/* The icon-toggle row: click one to open its control on the line below,
   instead of always-visible dropdowns — those used to dominate this row's
   width and wrap unpredictably as more of them appeared. Any number can be
   open at once. */
.plot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plot-toggle { min-width: 34px; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plot-toggle:hover:not(:disabled) { border-color: var(--muted-line); color: var(--ink); }
.plot-toggle.is-open { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.plot-toggle:disabled { opacity: .35; cursor: not-allowed; }

.plot-toolbar-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.plot-note { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }

/* Reset axes / legend / fullscreen: one grouped pill of icon buttons. */
.plot-icon-actions { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised); }
.plot-icon-actions .icon-button.is-active { background: var(--blue-soft); color: var(--blue); }
/* The empty-plot placeholder's lone fullscreen button, before any data has
   loaded — pushed to the same corner it ends up in once the plot is full. */
.plot-control-group.plot-control-actions { display: flex; justify-content: flex-end; }

/* The open toggles' actual controls, left-aligned below the row and tinted
   so it reads as clearly separate from the plain toggle row above it. */
.plot-reveal { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--blue-soft) 25%, var(--paper)); }
.plot-reveal label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* Same underline treatment as .field select/input (core/base.css) — the
   app's one standard for a form control, not a one-off boxed dropdown. */
.plot-reveal select, .plot-cycle-list { min-width: 108px; padding: 4px 18px 4px 0; border: 0; border-bottom: 1px solid var(--muted-line); outline: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.plot-reveal select:focus, .plot-cycle-list:focus { border-color: var(--blue); }
.plot-reveal select:disabled { opacity: .4; cursor: not-allowed; }
.plot-label-y2 { color: var(--red); }
.plot-label-y2 select { border-color: #ddb7b1; }

/* A control with several dependent parts (Cycles: mode + slider/list) wraps
   as one unit instead of splitting mid-control across lines. */
.plot-control-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

@container (max-width: 430px) {
  .plot-toolbar-end { width: 100%; margin-left: 0; justify-content: space-between; }
}

.plot-canvas { width: 100%; }
.plot-empty { margin: 0; padding: 30px 0; color: var(--muted); font-size: 12px; text-align: center; }

/* "Fill the page" — an in-page overlay of the content area below the
   masthead (74px, core/base.css), not the OS-level Fullscreen API. */
.plot-host.is-maximized { position: fixed; top: 74px; left: 0; right: 0; bottom: 0; z-index: 400; display: flex; flex-direction: column; padding: 18px; overflow: auto; background: var(--paper-raised); }
.plot-host.is-maximized .plot-controls { flex: 0 0 auto; }
.plot-host.is-maximized .plot-canvas { min-height: 0; flex: 1 1 auto; }

/* Cycle splitting: walk one cycle at a time, or pick a set. */
.plot-cycle-slider { gap: 9px; }
.plot-cycle-slider input[type="range"] { width: 150px; accent-color: var(--blue); }
.plot-cycle-onion { gap: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; }
.plot-cycle-onion input { accent-color: var(--blue); }