/* Version Updates page: the list of versions, each version's release notes,
   their tables and notes. The hero, sections and contact use styles.css. */

.version-index {
  margin: 4px 0 0;
  background: rgb(255 255 250 / 55%);
  box-shadow: none;
}

.version-empty {
  margin: 0;
  color: #506158;
  font-size: var(--text-md);
  line-height: 1.6;
}

.version-notes .version-summary { color: #31493d; }
.version-notes h3 { margin-top: 18px; }

.version-notes h4 {
  margin: 12px 0 4px;
  color: #2b4939;
  font-size: var(--text-md);
}

.version-notes ol {
  margin: 0 0 10px;
  padding-left: 1.4em;
  color: #3c4e44;
  font-size: var(--text-md);
  line-height: 1.6;
}

.version-table {
  margin: 4px 0 14px;
  overflow-x: auto;
  border: 1px solid rgb(60 92 74 / 18%);
  border-radius: 12px;
  background: rgb(255 255 250 / 75%);
}

.version-table table {
  width: 100%;
  border-collapse: collapse;
  color: #3c4e44;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.version-table th,
.version-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.version-table th {
  background: rgb(229 237 216 / 75%);
  color: #2b4939;
  font-weight: 700;
}

.version-table tbody tr + tr td { border-top: 1px solid rgb(62 94 76 / 12%); }

.version-note {
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-left: 3px solid #7a9a4a;
  border-radius: 0 12px 12px 0;
  background: rgb(122 154 74 / 10%);
}

.version-note > :is(p, ul, ol) { margin: 0; }
.version-note > * + * { margin-top: 6px; }

/* On a phone, each table row becomes a small card: every cell sits under the
   name of its column. */
@media (max-width: 700px) {
  .version-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .version-table table,
  .version-table tbody,
  .version-table tr,
  .version-table td { display: block; }

  .version-table tbody tr + tr { border-top: 1px solid rgb(62 94 76 / 12%); }
  .version-table tbody tr + tr td { border-top: 0; }
  .version-table td { padding: 4px 12px; }
  .version-table td:first-child { padding-top: 10px; }
  .version-table td:last-child { padding-bottom: 10px; }

  .version-table td::before {
    content: attr(data-label);
    display: block;
    color: #52705f;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}