/* Shared plot language, matching the accepted camera-comparison study. */
.results-plot { box-sizing: border-box; width: 100%; max-width: 800px; margin: 18px auto 22px; text-align: left; }
.results-plot--compact { max-width: 540px; }
.results-plot svg, .results-plot-fallback { display: block; width: 100%; height: auto; }
.results-plot svg { overflow: visible; }
.results-plot svg text { font-family: 'Avenir Next', Avenir, 'Open Sans', sans-serif; fill: #555; font-size: 13px; letter-spacing: 0; }
.results-plot .rp-tick { fill: #8c9093; font-size: 11px; }
.results-plot .rp-value { fill: #333; font-size: 11px; font-weight: 400; }
.results-plot .rp-grid { stroke: #e8ebed; stroke-width: 1; }
.results-plot svg * { transition: none !important; animation: none !important; }
.results-plot-title { margin: 0 0 4px; font: 500 13px/1.4 'Avenir Next', Avenir, 'Open Sans', sans-serif; color: #555; letter-spacing: 0; }
.results-plot--compact .results-plot-title { text-align: center; }
.results-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; font: 400 13px/1.4 'Avenir Next', Avenir, 'Open Sans', sans-serif; }
.results-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.results-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--series-color); flex: none; }
.results-swatch--hatched { background: repeating-linear-gradient(135deg,transparent 0 5px,#fff9 5px 6px),var(--series-color); }
.results-plot > .carousel-caption { margin-top: 12px; }
/* Same control treatment as gaze-sequencing .pipeline-controls. */
.results-controls { display: flex; flex-wrap: wrap; gap: 5px; width: fit-content; max-width: 100%; padding: 4px; background: #f3f4f4; border-radius: 10px; box-sizing: border-box; }
.results-controls button { appearance: none; min-width: 0; min-height: 38px; border: 1px solid transparent; border-radius: 7px; padding: 9px 16px; background: transparent; color: #626c71; font: 500 14px/1.3 'Avenir Next', Avenir, Arial, sans-serif; cursor: pointer; transition: color 180ms, background 180ms, box-shadow 180ms; }
.results-controls button:hover { background: #e8ecee; color: #303438; }
.results-controls button[aria-pressed=true] { background: #fff; color: #355e79; border-color: #dce3e7; box-shadow: 0 1px 3px #243f4e0c; }
.results-controls button:focus-visible { outline: 2px solid #527e9c; outline-offset: 3px; }
.results-metrics { margin: 0 auto 14px; }
@media(max-width:700px) { .results-controls button { padding: 9px 10px; font-size: 13px; } }
@media(max-width:550px) { .results-legend { font-size: 11px; gap: 8px 12px; } }
@media(max-width:380px) { .results-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .results-controls button { transition: none; } }