/* IQAI Diagnostics — Disagreement Lens
   Keeps the chart still at rest. Under attention, one sample is isolated against the
   independently calculated reference and the rest of the authored sample set recedes. */

.iq-page-diagnostics #interactive-example .iq-chart{
  overflow:visible;
}

.iq-page-diagnostics #interactive-example :is(
  [data-sample-dot],
  [data-sample-label]
){
  transition:opacity 180ms ease,transform 220ms cubic-bezier(.22,1,.36,1);
  transform-box:fill-box;
  transform-origin:center;
}

.iq-page-diagnostics #interactive-example.iq-diagnostic-lens-active [data-sample-dot],
.iq-page-diagnostics #interactive-example.iq-diagnostic-lens-active [data-sample-label]{
  opacity:.18;
}

.iq-page-diagnostics #interactive-example.iq-diagnostic-lens-active [data-iq-lens-active="true"]{
  opacity:1!important;
}

.iq-page-diagnostics #interactive-example [data-sample-dot][data-iq-lens-active="true"]{
  transform:scale(1.34);
  stroke-width:2.2;
  fill:#fff;
}

.iq-page-diagnostics #interactive-example .iq-diagnostic-gap{
  stroke:#111;
  stroke-width:1.25;
  stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity 150ms ease;
}

.iq-page-diagnostics #interactive-example .iq-diagnostic-gap.is-visible{
  opacity:.85;
}

.iq-page-diagnostics #interactive-example .iq-diagnostic-lens-label{
  font:10px "Helvetica Neue",Helvetica,Arial,sans-serif;
  fill:#444;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity 150ms ease;
}

.iq-page-diagnostics #interactive-example .iq-diagnostic-lens-label.is-visible{
  opacity:1;
}

.iq-page-diagnostics #interactive-example .iq-table tbody tr{
  transition:opacity 160ms ease,background 160ms ease;
}

.iq-page-diagnostics #interactive-example.iq-diagnostic-lens-active .iq-table tbody tr{
  opacity:.26;
}

.iq-page-diagnostics #interactive-example.iq-diagnostic-lens-active .iq-table tbody tr[data-iq-lens-row="true"]{
  opacity:1;
  background:#fafafa;
}

.iq-diagnostic-lens-note{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:baseline;
  min-height:42px;
  padding:10px 0 11px;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  font-size:12px;
  color:#555;
}

.iq-diagnostic-lens-note strong{
  font-size:10px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#222;
}

.iq-diagnostic-lens-note output{
  margin:0;
}

@media(max-width:760px){
  .iq-diagnostic-lens-note{display:none}
}

@media(prefers-reduced-motion:reduce){
  .iq-page-diagnostics #interactive-example :is([data-sample-dot],[data-sample-label]),
  .iq-page-diagnostics #interactive-example .iq-table tbody tr{
    transition:none!important;
  }
}