/* ========================================================================
   Observability chart color tables

   Used by:
     docs/observability/deep-dive/how-it-works.md

   The first column holds the color swatch and its name and must never wrap,
   so it takes only the width it needs. The Meaning column takes the rest of
   the table's full width, with a floor so the sentence does not collapse
   into a narrow ribbon on small screens.
   ======================================================================== */

.observability-chart-colors-table table {
  width: 100%;
}

.observability-chart-colors-table table th,
.observability-chart-colors-table table td {
  vertical-align: top;
}

.observability-chart-colors-table table th:nth-child(1),
.observability-chart-colors-table table td:nth-child(1) {
  white-space: nowrap;
  padding-right: 1.5rem;
}

.observability-chart-colors-table table th:nth-child(2),
.observability-chart-colors-table table td:nth-child(2) {
  width: 100%;
  min-width: 24rem;
}