/* Yolt v11 — bubble scatter block · 2-axis Spend×ROAS
 * Source: _DESIGN_HANDOFF/_DESIGN_BLOCKS_funnel-scatter.html
 * 4 zones: KILL · SCALE · INVESTIGATE · HOLD. Threshold ROAS=1 dashed line.
 */

.bubble-scatter-block ═════ */
.scatter-block { display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: start; }
.scatter-svg { width: 100%; height: 480px; display: block; }
.scatter-svg .axis-line { stroke: var(--line); stroke-width: 1; fill: none; }
.scatter-svg .axis-tick { stroke: var(--line-soft); stroke-width: 1; }
.scatter-svg .axis-label { fill: var(--ink-3); font-family: ui-monospace, monospace; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.scatter-svg .axis-title { fill: var(--ink-2); font-size: 11.5px; font-family: ui-monospace, monospace; letter-spacing: 0.04em; }
.scatter-svg .grid-line { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.scatter-svg .threshold-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; }
.scatter-svg .threshold-label { fill: var(--ink-3); font-family: ui-monospace, monospace; font-size: 10px; font-style: italic; }
.scatter-svg .zone-bg { opacity: 0.06; }
.scatter-svg .zone-label {
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scatter-svg .bubble {
  cursor: pointer;
  transition: filter 120ms ease, stroke-width 120ms ease;
  stroke-width: 1;
}
.scatter-svg .bubble:hover { filter: brightness(1.3); stroke-width: 2; }

.scatter-legend {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.scatter-legend .legend-h { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.scatter-legend .row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-1); }
.scatter-legend .row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.scatter-legend .row .name { flex: 1; }
.scatter-legend .row .count { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }
.scatter-legend .divider { height: 1px; background: var(--line-soft); margin: 2px 0; }
.scatter-legend .size-key { display: flex; flex-direction: column; gap: 6px; }
.scatter-legend .size-key .ring-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.scatter-legend .size-key svg { flex: none; }

.scatter-tip {
  position: absolute;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 10px;
  font-size: 11.5px; color: var(--ink-1);
  box-shadow: 0 8px 24px color-mix(in oklch, oklch(0 0 0) 50%, transparent);
  pointer-events: none; z-index: 100;
  font-family: ui-monospace, monospace;
}
.scatter-tip .tip-h { font-weight: 600; color: var(--ink-0); margin-bottom: 4px; font-size: 11px; }
.scatter-tip .row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.scatter-tip .row span:first-child { color: var(--ink-3); }
.scatter-stage { position: relative; }

.batch-foot {
  border-top: 1px solid var(--line-soft); padding-top: 12px;
  font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.batch-foot b { color: var(--ink-1); font-weight: 600; }