/* Attachment pages and slot hubs. Tokens from tokens.css, mobile first. */
.att-head { display: grid; grid-template-columns: 1fr; gap: var(--space-3) var(--space-5); align-items: start; }
.att-head > .lede, .att-head > .community, .att-head > .att-facts { grid-column: 1 / -1; }
.att-pic { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-1); }
.att-img { width: 80px; height: 80px; object-fit: contain; }
.att-title h1 { margin-bottom: var(--space-2); }
.att-title .tags { margin-bottom: 0; }
.att-facts { margin-top: var(--space-2); }
.att-changes tbody { border-top: 2px solid var(--border-strong); }
.att-changes thead + tbody { border-top: 0; }
.att-changes tbody th[scope="rowgroup"] { min-width: 7rem; vertical-align: top; }
table.data .v-better .pct, table.data td.v-better { color: var(--positive); }
table.data .v-worse .pct, table.data td.v-worse { color: var(--negative); }
table.data td.v-better, table.data td.v-worse { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data td.v-better .pct, table.data td.v-worse .pct { font-weight: 700; }
.att-pc { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.att-pc h3 { margin-top: 0; }
.att-links { margin-top: var(--space-3); }
.att-best li .v-better { color: var(--positive); }
@media (min-width: 640px) {
  .att-head { grid-template-columns: auto 1fr; }
  .att-pic { width: 128px; height: 128px; }
  .att-img { width: 112px; height: 112px; }
  .att-pc { grid-template-columns: 1fr 1fr; max-width: 58ch; }
}

/* Tables of weapons, builds and hub rows below 640px: one bordered card per row, no sideways scrolling. */
@media (max-width: 639px) {
  .table-wrap:has(.att-cards) { overflow: visible; border: 0; border-radius: 0; background: none; }
  table.att-cards, .att-cards tbody, .att-cards tr, .att-cards th, .att-cards td { display: block; }
  .att-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .att-cards tr { margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
  table.data.att-cards th, table.data.att-cards td { padding: 3px 0; border: 0; }
  table.data.att-cards td.num { text-align: left; }
  .att-cards td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  .att-changes { min-width: 30rem; }
}