/* suggest styles for the Team Builder (loaded after builder.css).
   Suggested Pokémon (builder/suggest-view.js, prefix bd-sg-) and the Auto Build
   result's compared teams and "Why it was added" (builder-page.js, bd-auto-). */

/* --- the list and its controls ---------------------------------------------- */

.bd-sg-head { align-items: center; }
.bd-sg-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.bd-gate-actions .bd-sg-controls { justify-content: center; }
/* "Only Box" with an empty Box: shown, but it cannot be chosen. */
.bd-sg-controls .bd-seg button:disabled,
.bd-sg-controls .bd-seg button:disabled:hover { color: var(--muted); background: transparent; opacity: 0.45; cursor: not-allowed; }
.bd-sg-checking:empty { display: none; }
.bd-sg-checking { margin: 0; }

/* --- the closed row ---------------------------------------------------------------- */

.bd-sg-row > summary { align-items: start; }
.bd-sg-row > summary > .bd-sprite { margin-top: 0.1rem; }
.bd-sg-main { display: grid; gap: 0.28rem; min-width: 0; }
.bd-sg-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; }
.bd-sg-title h3 { overflow-wrap: anywhere; }
.bd-suggestion .bd-sg-helps { color: var(--text); font-size: 0.76rem; }
.bd-sg-deltas { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bd-sg-delta {
  padding: 0.08rem 0.42rem;
  border: 1px solid var(--bd-line);
  border-radius: 6px;
  font-family: var(--bd-mono);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.bd-sg-delta.up { color: #a7f3c9; border-color: rgba(114, 255, 171, 0.4); background: rgba(114, 255, 171, 0.08); }
.bd-sg-delta.down { color: #ffab9c; border-color: rgba(255, 122, 102, 0.42); background: rgba(255, 122, 102, 0.08); }
.bd-sg-delta.flat { color: var(--muted); }

/* --- the breakdown -------------------------------------------------------------- */

.bd-sg-body { display: grid; gap: 0.85rem; padding: 0.2rem 0.8rem 0.85rem; border-top: 1px solid var(--bd-line); }
.bd-sg-section { display: grid; gap: 0.4rem; min-width: 0; }
.bd-sg-section h4 { margin: 0.55rem 0 0; font-family: var(--bd-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bd-sg-section .bd-note { margin: 0; line-height: 1.45; }
/* Prefixed so it wins over builder.css's `.bd-suggestion p` (the muted note style). */
.bd-suggestion .bd-sg-sub { margin: 0.2rem 0 0; font-size: 0.78rem; font-weight: 700; color: var(--text); }

.bd-sg-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.4rem; }
.bd-sg-metric { display: grid; gap: 0.12rem; padding: 0.45rem 0.55rem; border: 1px solid var(--bd-line); border-left-width: 3px; border-radius: 8px; background: rgba(7, 17, 11, 0.6); min-width: 0; }
.bd-sg-metric.up { border-left-color: var(--bd-good); }
.bd-sg-metric.down { border-left-color: var(--bd-bad); }
.bd-sg-metric-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bd-sg-metric strong { font-family: var(--bd-mono); font-size: 0.86rem; }
.bd-sg-metric strong small { font-weight: 700; color: var(--muted); }
.bd-sg-metric.up strong small { color: #a7f3c9; }
.bd-sg-metric.down strong small { color: #ffab9c; }
.bd-sg-metric-real { font-size: 0.72rem; color: var(--text); }
.bd-sg-metric-real.up { color: #a7f3c9; }
.bd-sg-metric-real.down { color: #ffab9c; }
.bd-sg-metric-real.flat { color: var(--muted); }

.bd-sg-impact { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; }
.bd-sg-impact li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0.4rem; align-items: start; line-height: 1.4; }
.bd-sg-badge {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  font-family: var(--bd-mono);
  font-size: 0.68rem;
  font-weight: 900;
  color: var(--muted);
  border: 1px solid var(--bd-line);
}
.bd-sg-badge.good { color: #062010; background: var(--bd-good); border-color: var(--bd-good); }
.bd-sg-badge.yellow { color: #1d1502; background: var(--bd-mid); border-color: var(--bd-mid); }
.bd-sg-badge.red { color: #200703; background: var(--bd-bad); border-color: var(--bd-bad); }
.bd-sg-impact li.red > span:last-child { color: #ffab9c; }
.bd-sg-impact li.good > span:last-child { color: var(--text); }
.bd-sg-impact li.neutral > span:last-child { color: var(--muted); }
.bd-sg-more {
  justify-self: start;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bd-line);
  border-radius: 6px;
  color: var(--bd-good);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.bd-sg-more:hover, .bd-sg-more:focus-visible { border-color: var(--bd-line-strong); }

.bd-sg-checks { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.bd-sg-checks li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; font-size: 0.78rem; }
.bd-sg-check-label { font-weight: 700; min-width: 0; }
.bd-sg-checks .bd-status { min-width: 0; }
.bd-sg-arrow { color: var(--muted); }
.bd-sg-checks small { flex-basis: 100%; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
.bd-suggestion .bd-sg-req { margin: 0; font-size: 0.76rem; line-height: 1.45; }
.bd-suggestion .bd-sg-req.good { color: #a7f3c9; }
.bd-suggestion .bd-sg-req.bad { color: #ffab9c; }

.bd-sg-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.4rem; }
.bd-sg-answer { display: grid; gap: 0.2rem; padding: 0.45rem 0.55rem; border: 1px solid var(--bd-line); border-radius: 8px; background: rgba(7, 17, 11, 0.6); min-width: 0; }
.bd-sg-answer.struck { border-style: dashed; opacity: 0.85; }
.bd-sg-answer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 0.5rem; }
.bd-sg-answer-head strong { font-family: var(--bd-mono); font-size: 0.8rem; }
.bd-sg-calc { display: grid; gap: 0.05rem; padding-left: 0.45rem; border-left: 2px solid rgba(255, 122, 102, 0.55); font-size: 0.74rem; line-height: 1.35; min-width: 0; }
.bd-sg-calc.ours { border-left-color: rgba(114, 255, 171, 0.6); }
.bd-sg-calc-who { font-weight: 700; overflow-wrap: anywhere; }
.bd-sg-calc-out { color: var(--muted); overflow-wrap: anywhere; }
.bd-sg-calc-out small { font-size: 0.7rem; }

.bd-sg-threat-moves { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.2rem 0.8rem; margin: 0; padding: 0; list-style: none; font-size: 0.76rem; }
.bd-sg-threat-moves li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; border-bottom: 1px dashed var(--bd-line); min-width: 0; }
.bd-sg-threat-moves li span { overflow-wrap: anywhere; }
.bd-sg-threat-moves b { font-family: var(--bd-mono); font-size: 0.72rem; white-space: nowrap; }
.bd-sg-threat-moves li.up b { color: #a7f3c9; }
.bd-sg-threat-moves li.down b { color: #ffab9c; }

/* --- V511: the three views on the threats ------------------------------------- */
/* One sentence at the top of the breakdown: what this Pokemon does for the team. */
.bd-suggestion .bd-sg-verdict { margin: 0; font-size: 0.82rem; line-height: 1.45; font-weight: 700; color: var(--text); }
.bd-suggestion .bd-sg-verdict.up { color: #a7f3c9; }
.bd-suggestion .bd-sg-verdict.down { color: #ffab9c; }

/* One measured matchup. Only a plain win or a plain loss is coloured: a trade is left
   neutral rather than dressed up as one. */
.bd-sg-verdicts { display: grid; gap: 0.35rem; }
.bd-sg-verdicts.quiet { opacity: 0.72; }
.bd-sg-vd { display: grid; gap: 0.2rem; padding: 0.4rem 0.55rem; border: 1px solid var(--bd-line); border-radius: 8px; background: rgba(7, 17, 11, 0.6); border-left-width: 3px; min-width: 0; }
.bd-sg-vd.good { border-left-color: rgba(114, 255, 171, 0.65); }
.bd-sg-vd.bad { border-left-color: rgba(255, 122, 102, 0.6); }
.bd-sg-vd.flat { border-left-color: var(--bd-line); }
.bd-sg-vd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; min-width: 0; }
.bd-sg-vd-head strong { font-family: var(--bd-mono); font-size: 0.82rem; overflow-wrap: anywhere; }
.bd-sg-vd-tag { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.bd-sg-vd-tag.good { color: #a7f3c9; }
.bd-sg-vd-tag.bad { color: #ffab9c; }
/* The two hit counts are what moved the score, so they carry the weight; the words recede. */
.bd-sg-vd-hits { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: 0.74rem; color: var(--muted); }
.bd-sg-vd-hits b { font-family: var(--bd-mono); font-size: 0.86rem; font-weight: 700; color: var(--text); margin-right: 0.2rem; }
.bd-sg-vd-order { font-style: italic; }
.bd-sg-vd-calcs { display: grid; gap: 0.2rem; margin-top: 0.15rem; }
.bd-sg-vd-calcs-head { color: var(--muted); font-size: 0.7rem; }

.bd-sg-tsg { display: grid; gap: 0.25rem; }
.bd-sg-threat-moves small { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.bd-suggestion .bd-sg-net { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--muted); }
.bd-suggestion .bd-sg-net b { font-family: var(--bd-mono); font-size: 0.86rem; color: var(--text); }
.bd-suggestion .bd-sg-net.up b { color: #a7f3c9; }
.bd-suggestion .bd-sg-net.down b { color: #ffab9c; }

.bd-sg-typeonly { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.76rem; line-height: 1.45; }
.bd-sg-typeonly li { padding-left: 0.5rem; border-left: 2px dashed var(--bd-line); overflow-wrap: anywhere; }
.bd-sg-typeonly strong { font-family: var(--bd-mono); font-size: 0.78rem; }
.bd-sg-typeonly span { color: var(--muted); }

.bd-sg-set { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.2rem 0.8rem; margin: 0; font-size: 0.78rem; }
.bd-sg-set dt { color: var(--muted); }
.bd-sg-set dd { margin: 0; overflow-wrap: anywhere; }

.bd-sg-ledger { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; font-size: 0.74rem; }
.bd-sg-ledger li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; padding: 0.2rem 0.5rem; border: 1px solid var(--bd-line); border-radius: 7px; background: rgba(7, 17, 11, 0.6); }
.bd-sg-ledger b { font-family: var(--bd-mono); }
.bd-sg-ledger li.base b { color: var(--text); }
.bd-sg-ledger li.up b { color: #a7f3c9; }
.bd-sg-ledger li.down b { color: #ffab9c; }
.bd-sg-ledger small { color: var(--muted); font-size: 0.68rem; }
/* A term the calcs added says what it measured, in the same words the groups above use. */
.bd-sg-ledger li.wide { flex: 1 1 100%; }
.bd-sg-ledger li.wide .bd-sg-ledger-detail { flex: 1 1 100%; line-height: 1.4; }

/* --- Auto Build: running, why each member was added, compared teams ------------- */

.bd-auto-run { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.8rem; flex-wrap: wrap; }
.bd-auto-run .bd-note { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.bd-auto-why { margin-top: 0.15rem; font-size: 0.76rem; }
.bd-auto-why > summary { cursor: pointer; color: var(--bd-good); font-weight: 700; font-size: 0.74rem; }
.bd-auto-why[open] > summary { margin-bottom: 0.3rem; }
.bd-auto-why .bd-sg-impact { margin-bottom: 0.3rem; }
.bd-auto-text .bd-auto-why p { margin: 0.1rem 0 0.3rem; }

.bd-auto-compare { padding: 0.8rem 0.9rem; border: 1px solid var(--bd-line); border-radius: 10px; background: var(--bd-card-deep); }
.bd-auto-compare > .bd-note { margin: 0 0 0.6rem; line-height: 1.45; }
.bd-auto-compare-list { display: grid; gap: 0.45rem; }
.bd-auto-compare-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 0.9rem; padding: 0.55rem 0.65rem; border: 1px solid var(--bd-line); border-radius: 9px; background: rgba(7, 17, 11, 0.6); }
.bd-auto-compare-row.chosen { border-color: rgba(114, 255, 171, 0.5); }
.bd-auto-compare-main { display: grid; gap: 0.22rem; min-width: 0; }
.bd-auto-compare-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.bd-auto-compare-title strong { font-family: var(--bd-mono); font-size: 0.84rem; }
.bd-auto-compare-main p { margin: 0; font-size: 0.76rem; }
.bd-auto-compare-team { color: var(--muted); overflow-wrap: anywhere; }
.bd-auto-compare-team b { color: var(--text); }
.bd-auto-compare-scores { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-family: var(--bd-mono); font-size: 0.72rem; }
.bd-auto-compare .bd-auto-compare-list + .bd-note { margin: 0.5rem 0 0; }

@media (max-width: 560px) {
  .bd-sg-row > summary { grid-template-columns: 36px minmax(0, 1fr); }
  .bd-sg-row > summary > .bd-sprite { width: 36px; height: 36px; }
  .bd-sg-row .bd-suggestion-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .bd-sg-controls { justify-content: flex-start; }
  .bd-sg-body { padding: 0.2rem 0.55rem 0.7rem; }
  .bd-sg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-sg-answers, .bd-sg-threat-moves { grid-template-columns: minmax(0, 1fr); }
  /* At phone width the hit counts stack rather than being squeezed onto one line. */
  .bd-sg-vd-hits { gap: 0.1rem 0.6rem; }
  .bd-sg-threat-moves li { flex-wrap: wrap; }
  .bd-auto-compare-row { flex-direction: column; align-items: stretch; }
  .bd-auto-compare-row > .ghost-button { align-self: flex-start; }
}