/* Перераспределение бюджета по предельному CPA и симулятор «что если». */
.bo-controls { margin-bottom: 16px; }
.bo-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.bo-row > .field { min-width: 180px; }
.bo-grow { flex: 1 1 260px; }
.bo-row .check { align-self: center; }
.bo-plan .callout p { margin: 0; }
.bo-plan .callout svg.i { width: 14px; height: 14px; vertical-align: -2px; color: var(--ink-3); }
.bo-kpi table { max-width: 720px; }
.bo-units td { vertical-align: top; }
.bo-why { max-width: 420px; color: var(--ink-2); }
tr.bo-frozen td { color: var(--ink-2); }
tr.bo-frozen td b { font-weight: 500; }
tr.bo-now td { background: var(--brand-soft); }
td.num, th.num { font-variant-numeric: tabular-nums; }

/* what-if */
.bo-slider { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.bo-range { width: 100%; accent-color: var(--brand); height: 28px; }
.bo-num { width: 140px; }
.bo-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.bo-res > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; display: grid; gap: 2px; background: var(--surface); }
.bo-res span { font-size: 12px; color: var(--ink-2); }
.bo-res b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bo-res .sub { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#bo-res .callout svg.i, #bo-res p svg.i { width: 14px; height: 14px; vertical-align: -2px; color: var(--warning); }

.bo-chart { position: relative; }
.bo-chart svg { width: 100%; height: auto; display: block; }
.bo-chart text { font: 11px var(--font); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.bo-chart .bo-grid { stroke: var(--line); stroke-width: 1; }
.bo-chart .bo-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.bo-chart .bo-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.bo-chart .bo-cur { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.bo-chart text.bo-cur-l { fill: var(--brand-ink); font-weight: 600; }
.bo-chart .bo-sel { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.bo-chart .bo-guide { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.bo-chart .bo-hover { stroke: var(--line-2); stroke-width: 1; }
.bo-tip { position: absolute; top: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px 10px; font-size: 12px; pointer-events: none; min-width: 150px; font-variant-numeric: tabular-nums; }
.bo-tip[hidden] { display: none; }

@media (max-width: 640px) {
  .bo-row > .field, .bo-num { min-width: 0; width: 100%; }
  .bo-why { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .bo-range { transition: none; } }