/* ========================================================================
   Components Card tables

   Used by:
     docs/settings/status/deep-dive/components-card.md

   Supported Engines (No. + logo/name). Intentionally its own class rather
   than sharing .logo-name-table with the Deployment Card: the two tables
   happen to look alike today, but they belong to different pages and must
   be free to diverge without one edit moving the other.
   ======================================================================== */

.engine-name-table table {
  table-layout: fixed;
  width: 100%;
}

/* The theme puts min-width: 5rem on every th, which fights the narrow No.
   column and is what wrapped the header down to "N o ." before. */
.engine-name-table table th {
  min-width: 0;
}

/* No. column at 6rem, matching the numbered listings elsewhere in the guide.
   Width and padding are both in rem so they scale together with the theme's
   root font; a px width against em padding collapses the column on large
   screens. */
.engine-name-table table th:nth-child(1),
.engine-name-table table td:nth-child(1) {
  width: 6rem;
  padding-left: 1.0rem;
  padding-right: 1.0rem;
}

/* Logo + name: absorbs the remaining width, logo inline before the label. */
.engine-name-table table td:nth-child(2) img {
  vertical-align: middle;
  margin-right: 0.35rem;
}

/* Status Indicator. Same label-column treatment as the FIELD column of the card
   fields table on the Deployment Card page, so the two read consistently across
   the Status deep dive: 6rem wide with 1.0rem side padding. Written out rather
   than shared with that page's class, so each page's tables stay independently
   adjustable; keep the two in step by hand when either one moves. */
.indicator-desc-table table {
  table-layout: fixed;
  width: 100%;
}

.indicator-desc-table table th {
  min-width: 0;
}

.indicator-desc-table table th:nth-child(1),
.indicator-desc-table table td:nth-child(1) {
  width: 6rem;
  padding-left: 1.0rem;
  padding-right: 1.0rem;
}

/* Component rows. The ROW column matches the INDICATOR column below it, and the
   FIELD column on the Deployment Card page: 6rem wide with 1.0rem side padding,
   so every label column across the Status deep dive lines up. The state column is
   pinned so the middle column, which carries the longest prose on the page, keeps
   the remaining width instead of splitting it evenly under fixed layout. */
.component-row-table table {
  table-layout: fixed;
  width: 100%;
}

.component-row-table table th {
  min-width: 0;
}

.component-row-table table th:nth-child(1),
.component-row-table table td:nth-child(1) {
  width: 6rem;
  padding-left: 1.0rem;
  padding-right: 1.0rem;
}

.component-row-table table th:nth-child(3),
.component-row-table table td:nth-child(3) {
  width: 28%;
}