/* Popular builds (/popular-builds/): a jump list, then one closed row per weapon that opens its builds as bordered items.
   Flat and dark like the tier board and the weapon pages. Tokens come from tokens.css. */

/* Jump list: weapon name and the order key (pick rate or DMZ tier), which is always printed as text. */
.b-jump { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--space-2); }
.b-jump a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-1); font-size: var(--text-sm); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.b-jump a:hover { background: var(--surface-3); border-color: var(--text-muted); }
.j-name { min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.j-key { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* One weapon: a closed row (picture, name, order key, build count) that opens its builds. Row and open state come from .fold. */
.bw { scroll-margin-top: var(--space-2); }
.section > p + .bw { margin-top: var(--space-3); }
.bw > summary { gap: var(--space-3); }
.bw-pic { flex: none; display: block; width: 6.5rem; aspect-ratio: 8 / 3; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); }
.bw-pic img { width: 100%; max-width: none; height: 100%; border-radius: 0; object-fit: cover; }
.bw-pic .glyph { width: 70%; height: 100%; margin: 0 auto; }
.bw-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.bw-name { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); }
.bw-meta { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bw-body { padding: var(--space-3) 0 var(--space-2); }
.bw-more { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.bw-more a { display: inline-flex; align-items: center; min-height: 32px; }

/* Builds: a grid of bordered items inside the plain weapon block (no nested cards) */
.bw-builds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-3); }
.bld { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.bld-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bld-style { margin-right: var(--space-1); font-weight: 700; }
.bld-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--border-control); border-radius: 999px; font-size: var(--text-xs); line-height: 1.6; color: var(--text-muted); }
.bld-tag .ico { width: 14px; height: 14px; }

.bld-atts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bld-atts li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
.bld-pic { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.bld-pic .apic { width: 32px; height: 32px; max-width: none; object-fit: contain; }
.bld-pic .ico { width: 20px; height: 20px; }
.bld-type { font-size: var(--text-xs); line-height: 1.3; color: var(--text-muted); }
.bld-name { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.bld-code { display: grid; gap: 4px; margin: 0; }
.bld-code-label { font-size: var(--text-xs); color: var(--text-muted); }
.bld-code code { display: block; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font: var(--text-sm) / 1.4 var(--font-mono); overflow-wrap: anywhere; user-select: all; }
.bld-note { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.bld-open { margin: auto 0 0; }
.bld-open .btn { width: 100%; }

@media (max-width: 720px) {
  .bw-pic { width: 5.5rem; }
  .bld { padding: var(--space-3); gap: var(--space-2); }
  .bld-atts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  .bld-atts li { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-2); align-items: start; }
  .bld-pic { width: 32px; height: 32px; }
  .bld-pic .apic { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
  .b-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-pic { width: 3.5rem; }
  .bw-meta { font-size: var(--text-xs); }
  .b-jump a { min-height: 44px; padding: 6px 10px; }
}

/* What a build changes: main stats from the community stats file. Word and sign carry the verdict, colour only reinforces it. */
.bfx { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.bfx > p { margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
.bfx ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.bfx li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); line-height: 1.4; }
.bfx li span:first-child { min-width: 0; }
.bfx li span:last-child { flex: none; font-weight: 700; white-space: nowrap; }
.bfx .better { color: var(--positive); }
.bfx .worse { color: var(--negative); }
.bfx .same { color: var(--text-muted); }
.bfx > .bfx-note { font-weight: 400; line-height: 1.5; }