/* ========================================================================
   Deployment Card tables

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

   Supported Cloud Platforms (No. + logo/name) and Deployment Sizes
   (icon badge + size + description).
   ======================================================================== */
/* Card fields table. Its label column is held at the same 6rem as the No. column
   on Supported Cloud Platforms and the icon column on Deployment Sizes, so all
   three tables on this page start their text column on one vertical line. */
.field-desc-table table {
  table-layout: fixed;
  width: 100%;
}

/* The theme puts min-width: 5rem on every th, which fights the narrow label column. */
.field-desc-table table th {
  min-width: 0;
}

/* Left padding is larger than on the two tables below because this column holds
   left-aligned text: at 0.25rem the labels read as glued to the table border. The
   two below centre a number and an icon, where the same padding is invisible.
   0.4rem is ~8px at the theme's 125% base and scales up from there; the column
   still clears "Deployment Size" on one line at 6rem. */
.field-desc-table table th:nth-child(1),
.field-desc-table table td:nth-child(1) {
  width: 6rem;
  padding-left: 1.0rem;
  padding-right: 1.0rem;
}

/* No. + logo/name reference table (e.g. Supported Cloud Platforms). The logo sits
   inline before its label instead of occupying its own column. Column widths mirror
   .connector-list-table so numbered listings line up across the guide. Deliberately
   NOT folded into .icon-name-table: that class is shared with the directory-sync and
   connector listings, which keep a separate logo column. */
.logo-name-table table {
  table-layout: fixed;
  width: 100%;
}

/* The theme puts min-width: 5rem on every th, which fights the narrow No. column. */
.logo-name-table table th {
  min-width: 0;
}

/* No. column: same 6rem as the Available Connectors tables, so the two line up.
   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. */
.logo-name-table table th:nth-child(1),
.logo-name-table table td:nth-child(1) {
  width: 6rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

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

/* Icon + name + description reference table (e.g. Deployment Sizes). The icon
   column carries a rounded badge that used to be repeated as an inline style on
   every row; it lives here instead so the markdown stays a plain shortcode. */
.size-desc-table table {
  table-layout: fixed;
  width: 100%;
}

/* The theme puts min-width: 5rem on every th, which fights the narrow icon column. */
.size-desc-table table th {
  min-width: 0;
}

/* The icon badge is taller than a line of text, so a top-aligned row
   leaves the size label sitting above the badge's centre. Centring every cell puts
   the badge, the size, and the first line of the description on one axis. */
.size-desc-table table td {
  vertical-align: middle;
}

/* Icon column: same 6rem as the No. column on Supported Cloud Platforms above, so
   both tables on this page start on the same vertical line. Width and padding are
   both in rem so they scale together with the theme's root font. */
.size-desc-table table th:nth-child(1),
.size-desc-table table td:nth-child(1) {
  width: 6rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: center;
}

.size-desc-table table th:nth-child(2),
.size-desc-table table td:nth-child(2) {
  width: 20%;
}

/* vertical-align is load-bearing: an inline-flex box sits on the text baseline by
   default, so the badge hangs a descender's worth below the line and reads as lower
   than the size label next to it. Centring it on the line removes that gap. */
.size-desc-table table td:nth-child(1) .twemoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: var(--md-default-fg-color--lightest);
}

/* Kept at the same ~55% of the badge as before, so the glyph does not look
   cramped now that the box is 32px. */
.size-desc-table table td:nth-child(1) .twemoji svg {
  width: 18px;
  height: 18px;
}