/* ==========================================================================
   Styles for the Run States page (docs/operations/runs/deep-dive/states.md).
   One file mirroring the page's path, so this table can be adjusted without
   touching any other page's styles. Applies only to the table wrapped in
   <div class="run-states-table" markdown>.
   ========================================================================== */

/* Fixed column widths; when the viewport is too narrow for them, the theme's
   own table wrapper provides the sideways scroll. */
.md-typeset .run-states-table table {
  width: 40rem;
  table-layout: fixed;
}

/* The State column mirrors the timeline items: icon above the label, centered,
   held to a fixed width so the description gets the room. */
.md-typeset .run-states-table th:first-child,
.md-typeset .run-states-table td:first-child {
  width: 6rem;
  text-align: center;
  vertical-align: middle;
}

.md-typeset .run-states-table th:nth-child(2),
.md-typeset .run-states-table td:nth-child(2) {
  width: 5rem;
}

.md-typeset .run-states-table th:nth-child(3),
.md-typeset .run-states-table td:nth-child(3) {
  width: 9rem;
}

.md-typeset .run-states-table th:nth-child(4),
.md-typeset .run-states-table td:nth-child(4) {
  width: 20rem;
}

.md-typeset .run-states-table td {
  vertical-align: middle;
}

/* Icons carry the theme's `.lg` size and their own per-state color; here only
   the gap before the label underneath. */
.md-typeset .run-states-table td:first-child .twemoji {
  margin-bottom: 0.15rem;
}