/* mods.css: the mod database (/mods, /mods/<slug>), lane MODS.
   Tokens and atoms only (theme.css, docs/LOOK.md): .card, .chip, .btn, .namebox, table.data and .ent-head come
   from the theme; this sheet only lays them out. */

.mods-credit { margin: 0 0 var(--sp-3); }
.mods-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-2); }
.mods-tabs .chip[aria-selected="true"] { background: var(--c-panel-hover-bg); color: var(--fg-link); }
.mods-help { margin: 0 0 var(--sp-3); }
.mods-filters { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.mods-filters .namebox { width: 100%; box-sizing: border-box; min-height: var(--tap); }
.mods-filters .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.mods-filters .facet-label { font-size: var(--fs-s); color: var(--fg-soft); margin-right: var(--sp-1); min-width: 5.5rem; }
.mods-table td, .mods-table th { vertical-align: top; }
.mods-table td.num, .mods-table th.num { text-align: right; }
.mods-table td.num { white-space: nowrap; }
.mods-table td:nth-child(2) { min-width: 11rem; }
.mods-by { display: block; font-size: var(--fs-s); }
.mods-table .chip { white-space: nowrap; }
.mods-more { margin: 0 0 var(--sp-2); }

.mods-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.mods-art { flex: none; width: 128px; height: 128px; object-fit: contain; background: var(--c-surface); }
.mods-head h1 { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .mods-head { flex-direction: column; }
  .mods-art { width: 96px; height: 96px; }
}
.mods-facts th[scope="row"] { text-align: left; white-space: normal; width: 45%; }
.mods-range { display: flex; gap: var(--sp-1); margin: 0 0 var(--sp-2); }
.mods-graph { margin: 0; }
.mods-graph svg { display: block; width: 100%; height: 180px; background: var(--c-surface); }
.mods-line { fill: none; stroke: var(--c-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mods-graph figcaption { font-size: var(--fs-s); color: var(--fg-soft); margin-top: var(--sp-1); }
.mods-vote-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mods-table td.date { white-space: nowrap; }
.mods-fold > summary { margin: 0 0 var(--sp-2); }
.mods-fold[open] { display: grid; gap: var(--sp-2); }
/* phone: one card per mod instead of a sideways table (lead 2026-09-26) */
@media (max-width: 480px) {
  .mods-hub .table-wrap { overflow: visible; }
  .mods-table, .mods-table tbody { display: block; }
  .mods-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mods-table tr { display: grid; grid-template-columns: 2.25rem repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2);
                   padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
  .mods-hub table.data.mods-table td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; white-space: normal; }
  .mods-table td:nth-child(2) { min-width: 0; }
  .mods-table .mods-rank { grid-row: span 3; }
  .mods-table .mods-name { grid-column: 2 / -1; font-size: var(--fs-0); }
  .mods-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-s); line-height: 1.2; color: var(--fg-soft); }
  .mods-table .mods-vote:empty { display: none; }
  .mods-table td.empty { grid-column: 1 / -1; }
}
.mods-pager ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); list-style: none; padding: 0; margin: var(--sp-2) 0; }
.mods-pager [aria-current] { color: var(--fg-link); }
.mods-steps { display: flex; gap: var(--sp-3); }
.mods-index td:nth-child(2) { min-width: 9rem; }