/* lists.css: list hubs (pages.list_view). The table is the default view; ?view=cards (listview.js)
   draws the same rows as the row panels the other lists use (theme.css ".grid > li"). Theme tokens only. */

.view-toggle { display: inline-flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.view-toggle[hidden] { display: none; }
.view-toggle .btn[aria-pressed="true"] { border-image: var(--s-panel-hover) 12 fill / 12px stretch; }

@media (min-width: 640px) { .list-table td.nm { min-width: 10rem; } }
.list-table td.nm .conf { margin-left: var(--sp-2); }
.list-table tr[hidden] { display: none; }

.view-cards .table-wrap { overflow: visible; }
.view-cards .list-table { display: block; }
.view-cards .list-table thead { display: none; }
.view-cards .list-table tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 640px) { .view-cards .list-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .view-cards .list-table tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.view-cards .list-table tr {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  background: var(--c-panel-bg);
  border: 6px solid transparent;
  border-image: var(--s-row) 12 fill / 12px stretch;
  padding: 4px 6px;
  image-rendering: pixelated;
}
.view-cards .list-table tr[hidden] { display: none; }
.view-cards .list-table td, .view-cards .list-table td.num { border: 0; padding: 0; text-align: left; }
.view-cards .list-table td:not(.nm) { flex: 1 1 100%; font-size: var(--fs-s); }
.view-cards .list-table td:not(.nm):empty { display: none; }
.view-cards .list-table td[data-label]:not(.nm)::before { content: attr(data-label) ": "; color: var(--fg-soft); }

/* rows a finger can hit (44 px), and on phones no sideways scroll: the name plus the columns list_view
   did not mark "lo" (a lane's own table without data-prio: the name plus its next two columns) */
.list-table tbody tr { height: 44px; }
.list-table tbody td { vertical-align: middle; }
.list-table td.nm .ent { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.list-table td .ent .n { min-width: 0; overflow-wrap: break-word; }
.list-table:not([data-prio]) td:not(.nm), .list-table:not([data-prio]) thead th:not(:first-child) { text-align: right; }
@media (max-width: 599px) {
  .list-view:not(.view-cards) .list-table[data-prio] .lo { display: none; }
  .list-view:not(.view-cards) .list-table:not([data-prio]) tr > :nth-child(n+4) { display: none; }
  .list-view:not(.view-cards) table.list-table td:nth-child(n), .list-view:not(.view-cards) table.list-table th:nth-child(n) { white-space: normal; min-width: 0; }
  .list-view table.list-table th, .list-view table.list-table td { overflow-wrap: break-word; padding-left: var(--sp-1); padding-right: var(--sp-1); }
  .list-view:not(.view-cards) table.list-table td.num:nth-child(n) { white-space: nowrap; }
  /* a text cell keeps room for a short word ("Debuff") and breaks a game word longer than the cell ("BzzzBzzBZZZZBzzz") */
  .list-view:not(.view-cards) table.list-table td:not(.nm):not(.num):nth-child(n) { overflow-wrap: anywhere; min-width: 3.5em; }
  /* the name column keeps 40 % of the phone width; a name word breaks only when it is wider than that */
  .list-view:not(.view-cards) table.list-table { width: 100%; }
  .list-view:not(.view-cards) table.list-table thead th:first-child { width: 40%; }
  .list-table td.nm img { width: 24px; height: 24px; }
}