/* Chirpy wraps every table in .table-wrapper. These articles reflow tables instead of scrolling them. */
.interactive-article .table-wrapper,
.interactive-article .tw {
  max-width: 100%;
  overflow-x: visible !important;
}

.interactive-article .tw > .table-wrapper {
  margin-bottom: 0;
  border-radius: inherit;
}

.interactive-article table.responsive-table {
  width: 100% !important;
  max-width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

.interactive-article table.responsive-table th,
.interactive-article table.responsive-table td {
  min-width: 0;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* Balanced defaults for the common table shapes. */
.interactive-article table.responsive-table[data-columns="2"] > :is(thead, tbody) > tr > :first-child {
  width: 31%;
}

.interactive-article table.responsive-table[data-columns="3"] > :is(thead, tbody) > tr > :first-child {
  width: 23%;
}

.interactive-article table.responsive-table[data-columns="4"]:not(.matrix, .ptable) > :is(thead, tbody) > tr > :first-child {
  width: 22%;
}

.interactive-article table.responsive-table[data-columns="5"] > :is(thead, tbody) > tr > :first-child {
  width: 19%;
}

.interactive-article table.responsive-table[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(2) {
  width: 25%;
}

.interactive-article table.responsive-table:is([data-columns="6"], [data-columns="7"]) > :is(thead, tbody) > tr > :first-child {
  width: 20%;
}

/* Article-specific proportions, based on each column's actual content. */
.article-entity-awareness table.plain[data-columns="3"] > :is(thead, tbody) > tr > :nth-child(1) { width: 17%; }
.article-entity-awareness table.plain[data-columns="3"] > :is(thead, tbody) > tr > :nth-child(2) { width: 27%; }
.article-entity-awareness table.plain[data-columns="3"] > :is(thead, tbody) > tr > :nth-child(3) { width: 56%; }

.article-entity-awareness table.dataTable > :is(thead, tbody) > tr > :nth-child(1) { width: 26%; }
.article-entity-awareness table.dataTable > :is(thead, tbody) > tr > :nth-child(2) { width: 20%; }
.article-entity-awareness table.dataTable > :is(thead, tbody) > tr > :nth-child(3) { width: 27%; }
.article-entity-awareness table.dataTable > :is(thead, tbody) > tr > :nth-child(4) { width: 27%; }

.article-mechanistic-interpretability table.plain[data-columns="4"] > :is(thead, tbody) > tr > :nth-child(1) { width: 18%; }
.article-mechanistic-interpretability table.plain[data-columns="4"] > :is(thead, tbody) > tr > :nth-child(2) { width: 36%; }
.article-mechanistic-interpretability table.plain[data-columns="4"] > :is(thead, tbody) > tr > :nth-child(3) { width: 16%; }
.article-mechanistic-interpretability table.plain[data-columns="4"] > :is(thead, tbody) > tr > :nth-child(4) { width: 30%; }

.article-modular-cognitive-architecture table.cognitive-domains[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(1) { width: 18%; }
.article-modular-cognitive-architecture table.cognitive-domains[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(2) { width: 18%; }
.article-modular-cognitive-architecture table.cognitive-domains[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(3) { width: 9%; }
.article-modular-cognitive-architecture table.cognitive-domains[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(4) { width: 13%; }
.article-modular-cognitive-architecture table.cognitive-domains[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(5) { width: 42%; }

.article-xiaomi-mesh table[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(1) { width: 17%; }
.article-xiaomi-mesh table[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(2) { width: 26%; }
.article-xiaomi-mesh table[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(3) { width: 17%; }
.article-xiaomi-mesh table[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(4) { width: 25%; }
.article-xiaomi-mesh table[data-columns="5"] > :is(thead, tbody) > tr > :nth-child(5) { width: 15%; }

.article-urban-simulation table.matrix col.matrix-axis { width: 22%; }
.article-urban-simulation table.matrix col.matrix-scale { width: 26%; }
.article-urban-simulation table.matrix tbody th { width: auto !important; }

.article-urban-simulation table.ptable col.paper-year { width: 9%; }
.article-urban-simulation table.ptable col.paper-venue { width: 17%; }
.article-urban-simulation table.ptable col.paper-detail { width: 58%; }
.article-urban-simulation table.ptable col.paper-thread { width: 16%; }

@media (max-width: 760px) {
  .interactive-article .table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .interactive-article .tw {
    overflow-x: visible !important;
  }

  .interactive-article table.responsive-table[data-columns="2"] { min-width: 34rem !important; }
  .interactive-article table.responsive-table[data-columns="3"] { min-width: 40rem !important; }
  .interactive-article table.responsive-table[data-columns="4"] { min-width: 48rem !important; }
  .interactive-article table.responsive-table[data-columns="5"] { min-width: 56rem !important; }
  .interactive-article table.responsive-table[data-columns="6"] { min-width: 62rem !important; }
  .interactive-article table.responsive-table[data-columns="7"] { min-width: 68rem !important; }

  /* Restore the paper table's real table layout; its article CSS used a stacked mobile layout. */
  .article-urban-simulation table.ptable { display: table !important; }
  .article-urban-simulation table.ptable thead { display: table-header-group !important; }
  .article-urban-simulation table.ptable tbody { display: table-row-group !important; }
  .article-urban-simulation table.ptable tr { display: table-row !important; }
  .article-urban-simulation table.ptable th,
  .article-urban-simulation table.ptable td {
    display: table-cell !important;
    width: auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--main-border-color);
  }
}