/* tool_planner.css: the loadout planner (lane TOOL-PLANNER). Tokens and atoms from theme.css only.
   Equipment slots use the inventory slot sprite (Inventory_Back, --s-slot), as the game's equipment page. */

.lp .card { margin: 0 0 var(--sp-4); }
.lp h3 { font-size: var(--fs-1); margin: var(--sp-3) 0 var(--sp-2); }
.lp-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); }
.lp-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.lp-field select, .lp-field input { max-width: 100%; }
.lp-num input { width: 6rem; }
.lp-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; }
.lp-check input { width: 20px; height: 20px; }

/* slots */
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); }
@media (min-width: 720px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-group > h3:first-child { margin-top: 0; }
.lp-slot { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0 0 var(--sp-2); min-width: 0; }
.lp-slot-btn {
  flex: 0 0 var(--slot); width: var(--slot); height: var(--slot); padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; cursor: pointer;
  border: 4px solid transparent;
  border-image: var(--s-slot) 12 fill / 12px stretch;
  box-sizing: border-box;
  image-rendering: pixelated;
}
.lp-slot-btn:hover { border-image-source: var(--s-slot-sel); }
.lp-slot-btn img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.lp-locked .lp-slot-btn { cursor: default; opacity: 0.5; }
.lp-locked .lp-slot-btn:hover { border-image-source: var(--s-slot); }
.lp-slot-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; flex: 1 1 auto; }
.lp-slot-info > .lab { flex: 1 1 100%; font-size: var(--fs-s); }
.lp-slot-info .ent { overflow-wrap: anywhere; }
.lp-rm { min-width: 32px; min-height: 32px; padding: 0 var(--sp-2); cursor: pointer; background: var(--c-panel-bg); border: 2px solid var(--c-line); }
.lp-rm:hover { border-color: var(--c-accent); }
.lp-prefix select { max-width: 11rem; }

/* set bonus */
.lp-set { margin: var(--sp-3) 0 0; }
.lp-bonus { margin: 0 0 var(--sp-1); }

/* picker */
.lp-picker { margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: 2px solid var(--c-line); }
.lp-picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.lp-picker-head h3 { margin: 0; }
.lp-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.lp-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); min-width: 0; }
.lp-item .ent { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.lp-item .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.lp-val { font-variant-numeric: tabular-nums; }
.lp-where { font-size: var(--fs-s); }

/* totals */
.lp-total { border-bottom: 1px solid var(--c-line); }
.lp-total > summary { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; cursor: pointer; }
.lp-t-val { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-accent); }
.lp-parts { list-style: none; margin: 0 0 var(--sp-2); padding: 0 0 0 var(--sp-4); }
.lp-parts > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-1); }
.lp-p-val { min-width: 4.5rem; font-variant-numeric: tabular-nums; }
.lp-total > .note { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.lp-uncounted { margin: var(--sp-3) 0 0; }
.lp-unc { margin: 0 0 var(--sp-2); }
.lp-tt { margin: 0 0 0 var(--sp-4); font-size: var(--fs-s); }

/* saves and farm list */
.lp-saves { list-style: none; margin: 0; padding: 0; }
.lp-saves > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.lp-save-name { flex: 1 1 10rem; overflow-wrap: anywhere; }
.lp-farm-items { margin: 0; padding-left: 1.4em; }
.lp-farm-items > li { margin: 0 0 var(--sp-3); }
.lp-farm-head { margin: 0 0 var(--sp-1); }
.lp-src { margin: 0 0 var(--sp-1); overflow-wrap: anywhere; }

.lp-guide { margin: 0 0 var(--sp-3); }
.lp-guide .btn { margin-top: var(--sp-1); }

/* print: only the farm list */
@media print {
  .lp-printing body * { visibility: hidden; }
  .lp-printing [data-lp-farm], .lp-printing [data-lp-farm] * { visibility: visible; }
  .lp-printing [data-lp-farm] { position: absolute; left: 0; top: 0; width: 100%; }
  .lp-printing .lp-noprint { display: none; }
}

/* damage against the target */
.lp-dps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.lp-dps-num { font-size: var(--fs-3); color: var(--c-accent); font-variant-numeric: tabular-nums; }
.lp-dps-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); }
.lp-dps-list dt { margin: 0; }
.lp-dps-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lp-dps-notes { margin: 0; padding-left: 1.2em; font-size: var(--fs-s); }
.lp-dps-notes > li { margin: 0 0 var(--sp-1); }

/* public builds (/builds) */
.bl-bar { margin: 0 0 var(--sp-3); }
.bl-list { list-style: none; margin: 0; padding: 0; }
.bl-item { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.bl-item.bl-here { border-left: 4px solid var(--c-accent); padding-left: var(--sp-2); }
.bl-name { margin: 0 0 var(--sp-1); font-size: var(--fs-1); overflow-wrap: anywhere; }
.bl-item .note { margin: 0 0 var(--sp-2); }
.bl-votes { font-variant-numeric: tabular-nums; }
.bl-item .lp-row { align-items: center; margin: 0; }
.bl-mine-list { list-style: none; margin: 0; padding: 0; } .bl-mine-list > li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }