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

.plot-host { container-type: inline-size; }
.plot-controls { display: grid; gap: 8px; margin-bottom: 10px; }
.plot-control-group { min-width: 0; }
.plot-control-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px 14px; }
.plot-control-options, .plot-control-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.plot-controls label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plot-controls select { max-width: 240px; padding: 6px 8px; border: 1px solid #cfc9bd; border-radius: 2px; background: var(--paper-raised); color: var(--ink); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.plot-control-axes label { min-width: 0; }
.plot-control-axes select { min-width: 0; width: 100%; max-width: none; }
.plot-controls select:hover { border-color: #aaa499; }
.plot-controls select:focus { border-color: var(--blue); outline: 0; }
.plot-label-y2 { color: #b53b2f; }
.plot-label-y2 select { border-color: #ddb7b1; }
.plot-btn { min-height: 28px; padding: 1px 10px 0; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plot-btn:hover { border-color: var(--ink); color: var(--ink); }
.plot-control-actions > [data-plot-fullscreen]:only-child { margin-left: auto; }
.plot-note { margin-left: auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }

@container (max-width: 430px) {
  .plot-control-actions .plot-note { width: 100%; margin-left: 0; order: 2; }
}

.plot-canvas { width: 100%; }
.plot-empty { margin: 0; padding: 30px 0; color: var(--muted); font-size: 12px; text-align: center; }
.plot-host:fullscreen { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 18px; overflow: hidden; background: var(--paper-raised); }
.plot-host:fullscreen .plot-controls { flex: 0 0 auto; }
.plot-host:fullscreen .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); }
.plot-cycle-list { width: 110px; padding: 6px 8px; border: 1px solid #cfc9bd; border-radius: 2px; background: var(--paper-raised); color: var(--ink); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }