/* Additive styles only. No changes to the system's palette, shell or typography. */
#opInsights { margin-top: 20px; }
#opInsights > summary { min-height: 36px; }
#opInsights .op-metrics { margin-block: 16px; }
#opInsights .op-metric details { margin-top: 12px; font-size: .85em; }
#opInsights .op-metric details p { overflow-wrap: anywhere; }
#opInsightsCharts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.op-insights-chart { min-width: 0; padding: 14px; border: 1px solid var(--op-border); border-radius: 10px; background: var(--op-panel); }
.op-insights-chart h3 { margin: 0; font-size: 1em; }
.op-insights-chart p, .op-insights-note { color: var(--op-muted); font-size: .85em; }
.op-insights-bars { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding: 4px; }
.op-insights-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; width: 100%; padding: 10px; text-align: left; background: var(--op-panel); }
.op-insights-label { overflow-wrap: anywhere; }
.op-insights-bar strong { font-variant-numeric: tabular-nums; }
.op-insights-track { display: block; grid-column: 1 / -1; height: 6px; background: var(--op-border); border-radius: 6px; }
.op-insights-track > span { display: block; height: 100%; background: var(--op-accent); border-radius: inherit; }
.op-insights-link { margin-top: 12px; width: 100%; }
#opRecordFilter { overflow-wrap: anywhere; }
@media (max-width: 1100px) { #opInsightsCharts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { #opInsights * { animation: none !important; transition: none !important; } }