/* Progressive interaction around the complete, unchanged paper plots. */
.rl-results-carousel[data-enhanced] [data-result-slide][data-interactive="true"] > figcaption { display: none; }
.rl-interactive-plot { position: relative; width: 100%; aspect-ratio: 1.38; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface-raised); }
.rl-interactive-plot > svg { position: absolute; inset: 18px; display: block; width: calc(100% - 36px); height: calc(100% - 36px); overflow: visible; }
.rl-result-hit { fill: transparent; stroke: transparent; stroke-width: .65; cursor: pointer; outline: none; }
.rl-result-hit.is-active { fill: var(--violet); fill-opacity: .08; stroke: var(--violet); stroke-opacity: .72; }
.rl-result-hit:focus-visible { stroke-width: 1.25; stroke-opacity: 1; }
.rl-result-inspector { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; align-items: start; margin-top: 13px; padding: 13px 0; border-block: 1px solid var(--hair); }
.rl-result-row-nav { display: flex; gap: 6px; align-items: center; }
.rl-result-row-nav button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hair); border-radius: 5px; background: transparent; color: var(--ink); font: 18px/1 var(--sans); cursor: pointer; }
.rl-result-row-nav button:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.rl-result-row-nav button:disabled { opacity: .3; cursor: default; }
.rl-result-row-position { min-width: 42px; text-align: center; color: var(--grey); font: 11px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.rl-result-detail { min-width: 0; color: var(--grey); font: 12px/1.6 var(--sans); }
.rl-result-detail strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; font-size: 13px; }
.rl-result-values { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.rl-result-help { grid-column: 1 / -1; margin: -5px 0 0; color: var(--grey); font: 11px/1.5 var(--sans); }
@media (max-width: 720px) {
  .rl-interactive-plot > svg { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .rl-result-inspector { grid-template-columns: 1fr; gap: 9px; }
  .rl-result-row-nav { justify-content: flex-start; }
  .rl-result-row-nav button { width: 44px; height: 44px; }
  .rl-result-values { display: grid; gap: 3px; }
  .rl-result-help { margin-top: 0; }
}
