/* Builds page. Tokens and components come from style.css (.panel, .chip, .parts and .part, .back, .empty). */

.tools { display: grid; gap: var(--sp-3); }
.tools .find { justify-content: space-between; }
.tools .filters { margin: 0; }
.intro { max-width: 52rem; margin: var(--sp-3) 0 var(--sp-4); }

/* ---------- item list ---------- */

.groups { display: grid; gap: var(--sp-4); }
.group.panel { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.item-pick {
  display: grid; gap: 0.15rem; width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-soft); border-left: 3px solid var(--void); border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--lapis-950) 60%, transparent); color: var(--ivory); text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.item-pick:hover, .item-pick:focus-visible { border-color: var(--line-hover); border-left-color: var(--gold); background: var(--surface-3); }
.item-pick:active { transform: translateY(1px); }
.item-name { font-weight: 500; overflow-wrap: anywhere; }
.item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem var(--sp-1); font: 500 var(--step--2) var(--num); color: var(--muted); font-variant-numeric: tabular-nums; }
.item-sub .chip { margin-left: auto; }

/* ---------- one item's builds ---------- */

.detail { display: grid; gap: var(--sp-3); }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
button.back { margin: 0; border: 0; background: none; cursor: pointer; }
.detail-head h2 { margin: 0; font: 400 var(--step-2) var(--display); color: var(--gold-hi); }
.detail-sub { margin: 0; }
.build-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr)); gap: var(--sp-4); align-items: start; }

/* Build cards, their mods, arcanes and shards: build-parts.css */