/* As cards on a phone (table-cards.css), the header row is gone: its sort buttons stay, as a row of
   their own above the cards. */
@media (max-width: 767px) {
  .files-table.reflow-cards thead {
    display: block;
    margin-bottom: 0.5rem;
  }
  .files-table.reflow-cards thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .files-table.reflow-cards thead th {
    display: block;
    padding: 0;
    border: none;
  }
  .files-table.reflow-cards thead th:empty {
    display: none;
  }
  .files-table.reflow-cards tbody td:first-child {
    font-weight: 600;
  }
}

#files {
  container: files / inline-size;
}
.files-table {
  width: 100%;
}
/* A long filename or type (application/vnd.openxmlformats-…) is one word: unbroken it pushed the
   table past a tablet's edge, and a card past a phone's. */
.files-table td:nth-child(-n + 2) {
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .files-table td:nth-child(n + 3):nth-child(-n + 4),
  .files-table td button {
    white-space: nowrap;
  }
}
/* Beside a tablet's sidebar six columns do not fit: the type goes, which the filename's extension
   already tells. */
@media (min-width: 768px) {
  @container files (max-width: 720px) {
    .files-table th:nth-child(2),
    .files-table td:nth-child(2) {
      display: none;
    }
  }
}