/* Customer report outcomes and directory refinements.
 * Layouts, groups, bars and tables use the shared report components. */

/* A tier's bar in the tier's colour, the same three the group markers use. */
.customer-fill--violet { --bar-fill: var(--k-color-violet); }
.customer-fill--sky { --bar-fill: var(--k-color-sky); }
.customer-fill--mint { --bar-fill: var(--k-color-mint); }

/* "$18.4K · 12 buyers" is wider than a platform's name; the label column
   gives the room back. */
.report-bar--wide {
  grid-template-columns: 80px minmax(0, 1fr) auto;
}

/* The buyer mix beside what followed it. */
.customer-outcomes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px 28px;
  padding-bottom: 8px;
}

.customer-outcomes__head {
  margin-top: 0;
  border-top: 0;
}

.customer-outcome {
  padding: 10px 20px 4px;
}

.customer-outcome__label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 0 0 8px;
  font-size: 13px;
}

.customer-outcome__label span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

/* One buyer, one outcome: the segments are parts of a whole, which is the
   one place on the page a stacked bar is honest. */
.customer-outcome__track {
  display: flex;
  height: 16px;
  overflow: hidden;
  border-radius: 4px;
}

.customer-outcome__segment--full { background: var(--k-color-violet); }
.customer-outcome__segment--discount { background: var(--k-color-coral); }
.customer-outcome__segment--none { background: color-mix(in srgb, var(--k-color-ink) 10%, var(--k-color-paper)); }

.customer-outcomes__legend {
  flex-wrap: wrap;
  padding: 10px 20px 0;
  white-space: normal;
}

/* Every filter, group link and merge comes back to the records, under a
   sticky bar that would otherwise cover their heading. */
#records {
  scroll-margin-top: calc(var(--topbar) + 20px);
}

/* The merge bar sits under the filters now, not in the panel's head. */
.customer-merge-bar {
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--k-color-line);
}

.directory-panel > .flash {
  margin: 0 20px 12px;
}

/* Two facts in one cell: the figure, and the quieter one under it. */
.customer-cell__line {
  display: block;
  white-space: nowrap;
}

.customer-cell__line--quiet {
  margin-top: 2px;
  font-size: 12px;
  color: var(--k-color-muted);
}

@media (max-width: 900px) {
  .customer-outcomes {
    grid-template-columns: 1fr;
  }
}