/* wargear-picker.css — wargear picker under the Add-to-Army box.
 * Rows follow the redesigned pane's card treatment; steppers echo the
 * stockpile (Reserves/Requisitions) − n + pill. Over-limit is a SOFT
 * signal: rows go red, nothing is blocked. */

/* The picker now lives INSIDE the official-wording Wargear section (below the
   prose), so it just needs a little separation above and nothing when empty. */
#detail-wargear-picker { margin-top: 10px; }
#detail-wargear-picker:empty { display: none; }

/* Band: title left, "official wording" hover affordance right. The ID
   out-specifies detail-redesign.css's `display: block` on section titles,
   which was flattening this back to inline flow. */
#detail-wargear-picker .detail-section-title.wgp-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.wgp-info {
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: help;
  border-bottom: 1px dotted var(--text-muted);
  flex-shrink: 0;
}
.wgp-info:hover { color: var(--text); }

/* GDC wording is multi-line ("Replace X: • A • B") — render the newlines the
   picker bakes into data-tooltip. Safe globally: other tooltips are one line. */
.global-tooltip { white-space: pre-line; }

.wgp-option {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
/* Head stacks vertically: constraint chip on top, then the full-width
   "Replace X + Y" line. Side-by-side, a long nowrap chip starved the
   replaces text down to one word per line. */
.wgp-option-head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 5px;
}
.wgp-replaces {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
  min-width: 0;
}
.wgp-chip {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: normal;
}

.wgp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
.wgp-item {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}
.wgp-pts {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 3px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}

/* Stepper pill: − n + (echoes the stockpile widget) */
.wgp-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 3px;
  flex-shrink: 0;
}
.wgp-btn {
  /* 24x24 is the WCAG 2.2 AA (2.5.8) minimum target size. Was 20x20. */
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wgp-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.wgp-count {
  min-width: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Default-loadout block: live effective counts (dim when reduced from the
   default, red when over-swapped below zero). */
.wgp-eff {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  flex-shrink: 0;
}
.wgp-count-dim { color: var(--text-muted); }
.wgp-neg { color: #e86a6a; }

/* Soft over-limit: red signal, never a block. */
.wgp-row-over .wgp-item,
.wgp-row-over .wgp-count { color: #e86a6a; }
.wgp-row-over .wgp-stepper { border-color: rgba(220, 74, 74, 0.6); }
.wgp-option.wgp-over { border-color: rgba(220, 74, 74, 0.45); }
.wgp-note {
  font-size: 10.5px;
  color: #e86a6a;
  margin-top: 3px;
}

/* Point-costing options grouped by the model they apply to. The model name
   heads each group so identical upgrades on different models (a squad member
   vs its pack leader) are distinguishable. */
.wgp-group {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px 8px;
  margin-bottom: 6px;
}
.wgp-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Live wargear-points readout (not a warning — accent, matches the chips). */
.wgp-total {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

/* ── Touch sizing ───────────────────────────────────────────────────────── */
/* The −/+ steppers were 20x20 with a 2px gap, so on a phone the two targets
 * sat ~22px apart centre-to-centre and a thumb aimed at "remove a model"
 * routinely landed on "add" instead. A transparent expanded hit area is NOT
 * usable here: the two buttons are immediate siblings, so overlapping
 * overlays would make the mis-tap worse, not better. Instead the pill grows
 * to real 44x44 (Apple HIG) targets and the count between them widens to
 * ~26px of dead space, which is what actually separates the two actions.
 *
 * Width check: 44 + 26 + 44 + (2 x 4px gap) + (2 x 4px pad) = ~130px. Inside
 * a 320px viewport the detail pane leaves ~276px for .wgp-row, so the
 * stepper (flex-shrink: 0) still leaves ~138px for the label, which has
 * min-width: 0 and wraps. No horizontal overflow at any supported width. */
@media (max-width: 820px) {
  .wgp-row {
    padding: 5px 0;
    gap: 10px;
  }
  .wgp-stepper {
    gap: 4px;
    padding: 2px 4px;
  }
  .wgp-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .wgp-count {
    min-width: 26px;
    font-size: 14px;
  }
}