/* ==========================================================================
   Bid strategy selector — tool-only CSS.

   Shared components (jbm-panel, jbm-pill, jbm-stat, jbm-list, jbm-callout)
   come from jbm-tools.css. Only the strategy cards and the target box are new.
   ========================================================================== */

/* ── one strategy card ────────────────────────────────────────────────────── */

.jbm-bid {
  padding: 1rem;
  border: 1px solid var(--jbm-line);
  border-radius: 10px;
  background: var(--jbm-surface);
}
.jbm-bid + .jbm-bid { margin-top: .75rem; }

/* An eligible strategy and a recommended one are different states. A strategy
   the account cannot use is called out; an absent reading is not a good one. */
.jbm-bid[data-state="no"]   { border-left: 3px solid var(--jbm-warn); }
.jbm-bid[data-state="warn"] { border-left: 3px solid var(--jbm-warn); }
.jbm-bid[data-state="yes"]  { border-left: 3px solid var(--jbm-line); }
.jbm-bid[data-state="pick"] { border-left: 3px solid var(--jbm-good); }

.jbm-bid__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.jbm-bid__name {
  font-weight: 700;
  color: #fff;
  font-size: .98rem;
  line-height: 1.3;
  min-width: 0;
}

.jbm-bid__pill { flex: none; }

.jbm-bid__optimises {
  margin: .4rem 0 0;
  font-size: .84rem;
  color: var(--jbm-muted);
  font-style: italic;
  line-height: 1.5;
}

.jbm-bid__body {
  margin: .6rem 0 0;
  font-size: .87rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
}
.jbm-bid__body b { color: #fff; }

/* The named trade: what this strategy costs the operator. */
.jbm-bid__gives {
  margin: .6rem 0 0;
  padding-left: 1.15rem;
  font-size: .85rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
}
.jbm-bid__gives li { margin: .2rem 0; }
.jbm-bid__gives li::marker { color: var(--jbm-muted); }

/* A strategy that is not eligible names its unmet prerequisite, rather than
   being greyed out with no reason given. */
.jbm-bid__blocker {
  margin: .6rem 0 0;
  padding: .6rem .75rem;
  border-radius: 8px;
  background: var(--jbm-bg-alt);
  font-size: .85rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
}
.jbm-bid__blocker b { color: #fff; }

.jbm-bid__reqs {
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.jbm-bid__req {
  font-size: .74rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--jbm-line);
  color: var(--jbm-muted);
  white-space: nowrap;
}
.jbm-bid__req[data-met="no"] { border-color: var(--jbm-warn); color: var(--jbm-warn); }
.jbm-bid__req[data-met="yes"] { border-color: var(--jbm-good); color: var(--jbm-good); }

/* ── the target box ───────────────────────────────────────────────────────── */

.jbm-target {
  padding: 1rem;
  border: 1px solid var(--jbm-line);
  border-radius: 10px;
  background: var(--jbm-surface);
}
.jbm-target[data-state="refuse"] { border-left: 3px solid var(--jbm-warn); }
.jbm-target[data-state="loose"] { border-left: 3px solid var(--jbm-good); }
.jbm-target[data-state="tight"] { border-left: 3px solid var(--jbm-warn); }
.jbm-target[data-state="mismatch"] { border-left: 3px solid var(--jbm-warn); }
.jbm-target[data-state="none"]  { border-left: 3px solid var(--jbm-line); }
/* A maximum CPC limit is a real ceiling, so it is drawn apart from a target
   CPA rather than sharing the warning edge. */
.jbm-target[data-state="cap"]   { border-left: 3px solid var(--jbm-good); }

.jbm-target__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.jbm-target__name {
  font-weight: 700;
  color: #fff;
  font-size: .98rem;
  line-height: 1.3;
  min-width: 0;
}

.jbm-target__pill { flex: none; }

/* The refusal, set where a number would otherwise have gone. */
.jbm-target__refuse {
  margin: .6rem 0 0;
  padding: .7rem .8rem;
  border-radius: 8px;
  background: var(--jbm-bg-alt);
  font-size: .87rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
}
.jbm-target__refuse b { color: #fff; }

.jbm-target__body {
  margin: .6rem 0 0;
  font-size: .87rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
}
.jbm-target__body b { color: #fff; }

/* ── the ordered next steps ───────────────────────────────────────────────── */

[data-jbm-out="steps"] li {
  margin: .6rem 0;
  line-height: 1.6;
  color: var(--jbm-ink-soft);
}
[data-jbm-out="steps"] li b { color: #fff; }
[data-jbm-out="steps"] li::marker { color: var(--jbm-muted); }

/* ── the give-up line in the recommendation ───────────────────────────────── */

[data-jbm-out="rec-give"] {
  font-size: .87rem;
  color: var(--jbm-ink-soft);
  line-height: 1.6;
  padding-top: .75rem;
  border-top: 1px solid var(--jbm-line);
}
[data-jbm-out="rec-give"] b { color: #fff; }

@media (max-width: 560px) {
  .jbm-bid__top,
  .jbm-target__head { align-items: flex-start; }
  .jbm-bid__reqs { gap: .3rem; }
}