/* ==========================================================================
   SMUI.HTML: ANALYZE > QUALITY AND PROCESS (smui-p-quality.js)
   Control Chart Builder, Process Capability, Pareto Plot, Variability /
   Attribute Gauge Chart. Colours are kvot.css's tokens; the graphs pick
   their own for the theme.
   ========================================================================== */

/* the spec limits in the Process Capability launch */
.sm-q-launch { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sm-q-launch h4 { margin: 0; }
.sm-q-speclist { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere; }

/* Pareto plots of the grouping cells, side by side */
.sm-q-cells { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start; }

/* the Pareto plot's Category Legend */
.sm-q-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 6px; font-size: 11.5px; color: var(--text-secondary); max-width: 760px; }
.sm-q-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.sm-q-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }

/* the Ppk slider under the goal plot */
.sm-report .sm-slider output { font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 5.5em; }

@media (max-width: 760px) {
  .sm-q-cells { gap: 6px; }
}