/* Context diagrams supplement, rather than replace, the existing topic copy. */
.quality-topic-page .bc-topic-page-diagram {
  --bc-tp-ink: #eef3e9;
  --bc-tp-muted: #b8cbb8;
  --bc-tp-line: #597653;
  --bc-tp-accent: #b9dd9f;
  --bc-tp-surface: #182a1e;
  --bc-tp-core: #2b4430;
  display: none;
  /* Match the centred content column used by the adjacent heading and list.
     A zero inline margin would pin the figure to the section's left gutter. */
  box-sizing: border-box;
  width: min(100%, var(--dd-max, 1320px));
  margin: 0 auto 42px;
  padding: 22px 28px 16px;
  border: 1px solid var(--bc-tp-line);
  background: var(--bc-tp-surface);
  color: var(--bc-tp-ink);
}
html[data-theme="light"] .quality-topic-page .bc-topic-page-diagram {
  --bc-tp-ink: #203626;
  --bc-tp-muted: #47654d;
  --bc-tp-line: #8aa580;
  --bc-tp-accent: #447931;
  --bc-tp-surface: #f4f8ef;
  --bc-tp-core: #e1edd7;
}
.quality-topic-page .bc-topic-page-diagram figcaption {
  margin: 0 0 10px;
  color: var(--bc-tp-muted);
  font: 600 12px/1.5 var(--ui-font, Arial, sans-serif);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.quality-topic-page .bc-topic-page-diagram > svg {
  display: block;
  width: 100%;
  max-width: 1040px;
  height: auto;
  margin: auto;
  overflow: visible;
}
.bc-topic-page-diagram text {
  fill: var(--bc-tp-ink);
  font-family: var(--ui-font, Arial, sans-serif);
}
.bc-topic-page-diagram .bc-tp-title {font-size: 19px;font-weight: 600;letter-spacing: -.3px;}
.bc-topic-page-diagram .bc-tp-small {font-size: 17px;fill: var(--bc-tp-muted);}
.bc-topic-page-diagram .bc-tp-note {font-size: 17px;font-weight: 500;}
.bc-topic-page-diagram .bc-tp-panel {fill: var(--bc-tp-surface);stroke: var(--bc-tp-line);stroke-width: 1.3;}
.bc-topic-page-diagram .bc-tp-core {fill: var(--bc-tp-core);stroke: var(--bc-tp-accent);stroke-width: 1.5;}
.bc-topic-page-diagram .bc-tp-link {fill: none;stroke: var(--bc-tp-accent);stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;}
.bc-topic-page-diagram .bc-tp-dot {fill: var(--bc-tp-accent);}
.bc-topic-page-diagram .bc-tp-halo {fill: var(--bc-tp-core);stroke: var(--bc-tp-line);stroke-dasharray: 3 5;}
.quality-topic-page .opportunity-grid > .bc-topic-benefit-visual::before {display: none;}
@media (min-width: 768px) {
  .quality-topic-page .bc-topic-page-diagram {display: block;}
  .quality-topic-page .opportunity-grid > .bc-topic-benefit-visual::before {
    content: "";
    display: block;
    position: static;
    width: 42px;
    height: 42px;
    margin: 0 0 22px;
    border: 0;
    background: var(--bc-visual-accent, #b9dd9f);
    -webkit-mask: var(--bc-topic-benefit-icon) center / contain no-repeat;
    mask: var(--bc-topic-benefit-icon) center / contain no-repeat;
  }
  html[data-theme="light"] .quality-topic-page .opportunity-grid > .bc-topic-benefit-visual::before {
    background: var(--bc-visual-accent, #447931);
  }
}
@media (pointer: coarse) and (max-height: 500px) {
  .quality-topic-page .bc-topic-page-diagram,
  .quality-topic-page .opportunity-grid > .bc-topic-benefit-visual::before {display: none;}
}
@media (min-width: 768px) and (max-width: 1000px) {
  .quality-topic-page .bc-topic-page-diagram {padding: 18px 12px 12px;}
}