/* =========================================================================
   Ludic Media Studio — the way into the campaign builder
   The band that promo() in _build/build_campaign_builder.py writes: on the
   home page (black) and on Comms Campaigns (yellow). It asks the builder's
   first question, and every answer is a link into the builder. `cbp-`
   classes; loaded by those two pages after site.css, via their own `css`.
   Also the "Build your own rollout" button under the Comms rollout board.
   ========================================================================= */

.cbp { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 64rem) { .cbp { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.cbp__copy .vx-lede { margin-top: var(--space-sm); }
.cbp__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--space-sm) 0 var(--space-md); }
.cbp__facts li { padding: 0.1875rem 0.625rem; border: 2px solid var(--black); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.cbp-wrap[data-tone="black"] .cbp__facts li { border-color: var(--yellow); color: var(--yellow); }

/* On the yellow band the highlighted word and its underline go black. */
.cbp-wrap[data-tone="yellow"] .vx-hl { color: var(--black); }
.cbp-wrap[data-tone="yellow"] .vx-mark path { stroke: var(--black); }

/* ---------- the question card ------------------------------------------- */
.cbp__card {
  position: relative;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--white);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: 0.75rem 0.75rem 0 var(--black);
}
@media (min-width: 48rem) { .cbp__card { padding: var(--space-lg) var(--space-md) var(--space-md); } }
.cbp-wrap[data-tone="black"] .cbp__card { box-shadow: 0.75rem 0.75rem 0 var(--yellow); }

.cbp__sticker {
  position: absolute;
  top: -1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(4deg);
}
.cbp-wrap[data-tone="yellow"] .cbp__sticker { background: var(--black); color: var(--yellow); }

.cbp__n { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cbp__n span { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--black); border-radius: 50%; background: var(--yellow); font-size: var(--text-sm); letter-spacing: 0; }
.cbp__q { margin-top: 0.5rem; font-size: var(--text-xl); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.cbp__hint { margin-top: 0.375rem; font-size: var(--text-sm); color: var(--dark-grey); }

.cbp__picks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm); }
.cbp__pick {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--black);
  border-radius: var(--v2-radius-pill, 999px);
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cbp__pick:hover,
.cbp__pick:focus-visible { background: var(--yellow); transform: rotate(-1.5deg); box-shadow: 0.25rem 0.25rem 0 var(--black); }
.cbp__pick:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }

.cbp__steps { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 2px dashed var(--black); font-size: var(--text-xs); font-weight: 800; color: var(--dark-grey); }
.cbp__steps li { display: inline-flex; align-items: center; gap: 0.375rem; }
.cbp__steps li + li::before { content: "\2192"; margin-right: 0.375rem; color: var(--dark-grey); }
.cbp__steps span { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border: 2px solid currentColor; border-radius: 50%; font-size: 0.75rem; }
.cbp__steps .is-now { color: var(--black); }
.cbp__steps .is-now span { background: var(--black); color: var(--yellow); border-color: var(--black); }

/* ---------- Comms Campaigns: under the rollout board --------------------- */
.cc-rollout__cta { display: flex; justify-content: center; margin-top: var(--space-md); }