/* Opportunity 2×2 (widgets/matrix/matrix.js) */
.mx { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px 26px; padding: 16px 26px 16px 16px; }
.mx__plot { position: relative; min-height: 0; }
.mx__ax { position: absolute; background: #a7a9ac; }
.mx__ax--h { left: 4%; right: 4%; top: 50%; height: 2px; }
.mx__ax--v { top: 6%; bottom: 6%; left: 50%; width: 2px; }
.mx__lab { position: absolute; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.mx__lab--t { top: 0; left: 50%; transform: translateX(-50%); } .mx__lab--b { bottom: 0; left: 50%; transform: translateX(-50%); }
.mx__lab--l { left: 0; top: calc(50% + 8px); } .mx__lab--r { right: 0; top: calc(50% + 8px); }
.mx__area { position: absolute; display: grid; place-items: start center; padding-top: 6%; border-radius: 50%; background: color-mix(in srgb, #f7931e 22%, transparent); box-shadow: inset 0 0 0 6px color-mix(in srgb, #f7931e 14%, transparent);
  opacity: 0; transform: scale(.6); transition: opacity .6s ease 1.1s, transform .8s cubic-bezier(.3,.8,.3,1.2) 1.1s; }
.mx__area b { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #b4610a; }
[data-theme=dark] .mx__area b { color: #fbb867; }
.mx.is-sorted .mx__area { opacity: 1; transform: none; }
.mx__dot { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; border-radius: 50%;
  background: #d9dadc; color: #3a3b3f; box-shadow: 0 1px 2px rgba(0,0,0,.2); cursor: pointer;
  transition: left .9s cubic-bezier(.3,.8,.25,1), top .9s cubic-bezier(.3,.8,.25,1), transform .2s ease, background-color .3s ease; }
.mx__dot .aha-i { width: 19px; height: 19px; }
.mx__dot.is-in { background: #fbb040; color: #3b2400; }
.mx.is-sorted .mx__dot { left: var(--x); top: var(--y); }
.mx__dot:nth-of-type(2n) { transition-delay: .05s; } .mx__dot:nth-of-type(3n) { transition-delay: .12s; }
.mx__dot:hover, .mx__dot:focus-visible { transform: scale(1.15); outline: none; z-index: 2; }
.mx__dot.is-on { background: var(--ink); color: var(--bg); transform: scale(1.18); z-index: 2; }
.mx__side { align-self: center; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mx__q { margin: 0; font-size: clamp(15px, 5cqh, 20px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.mx__from { margin: 0; font-size: 12.5px; color: var(--muted); }
.mx__from b { color: var(--ink-2); font-weight: 600; }
/* Narrow frames (≤ 640px; class set by widgets/aha-kit/kit.js). */
.mx.aha--w640 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 12px 14px; }
.aha--w640 .mx__dot { width: 29px; height: 29px; margin: -14.5px 0 0 -14.5px; }
.aha--w640 .mx__dot .aha-i { width: 16px; height: 16px; }
.aha--w640 .mx__lab { font-size: 9.5px; }
/* Stacked: the chart keeps a shape of its own (its dots are placed absolutely). */
.is-vertical .mx__plot { aspect-ratio: 1.15; }
.is-vertical .mx { grid-template-rows: auto auto; }