/*
 * Markup cell component — pairs with app/views/shared/_markup_cell.html.erb,
 * rendered once per market (Canada, Global) in a .wines-table row.
 * The headline reads "+38.9% (+$35.01)": percentage first, the same gap in
 * dollars in brackets beside it, then the sources naming the baseline the
 * markup was measured against. Red is always "the LCBO charges more".
 */
.wines-table .markup-canada,
.wines-table .markup-global {
  white-space: nowrap;
}

.wines-table .markup-percentage {
  font-weight: 600;
}

.wines-table .markup-amount {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.wines-table .markup-percentage.positive,
.wines-table .markup-amount.positive {
  color: var(--color-danger);
}

.wines-table .markup-percentage.negative,
.wines-table .markup-amount.negative {
  color: var(--color-success);
}

.wines-table .no-markup {
  color: var(--color-text-light);
  font-weight: 600;
}

.wines-table .markup-sources {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-xs);
}

.wines-table .markup-source {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}