/* ========================================================================
   Create a Computed Join field reference tables

   Used by:
     docs/container/computed-join/how-tos/create-a-computed-join.md

   Widths tuned for Field / Required / Type / Description. The Field column
   holds a bold label and must never wrap, so it takes the width of its longest
   entry. The two middle columns hold a single icon or a one-word type and stay
   narrow. The Description column absorbs the rest and keeps a floor so that on
   narrow screens the table scrolls sideways (the theme's table wrapper already
   handles the overflow) instead of squeezing the text into a sliver.
   ======================================================================== */
.create-a-computed-join-fields-table table {
  width: 100%;
}

/* The theme puts min-width: 5rem on every th, which fights the two narrow columns. */
.create-a-computed-join-fields-table table th {
  min-width: 0;
}

.create-a-computed-join-fields-table table th,
.create-a-computed-join-fields-table table td {
  vertical-align: top;
}

.create-a-computed-join-fields-table table th:nth-child(1),
.create-a-computed-join-fields-table table td:nth-child(1) {
  white-space: nowrap;
  padding-right: 1.5rem;
}

.create-a-computed-join-fields-table table th:nth-child(2),
.create-a-computed-join-fields-table table td:nth-child(2),
.create-a-computed-join-fields-table table th:nth-child(3),
.create-a-computed-join-fields-table table td:nth-child(3) {
  white-space: nowrap;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.create-a-computed-join-fields-table table th:nth-child(4),
.create-a-computed-join-fields-table table td:nth-child(4) {
  width: 100%;
  min-width: 28rem;
}