/* correlation topic CSS. Loaded after dev_basic/style.css. Tokens only. */

/* The chart column's second row (blueprint 3-2-4-3-2/3): the scatter of one pair
   beside the heatmap of every pair, each half taking the height the first chart
   leaves. Phones stack them: the scoped rule in dev_basic/style.css @media. */
.corr-row {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
}
.corr-half {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.corr-body {
  flex: 1;
  min-height: 0;
}

/* The pair picker sits in the scatter's heading: two selects and the r they give. */
.corr-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: normal;
}
.corr-pick select { font: inherit; }
.corr-r {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.corr-hint { color: var(--header-fg); }

/* The ellipse switch in the toolbar: a checkbox and its label on one line. */
.corr-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}