/* W2o: Quick Momentum Check, About-you options (KZ 3 Nov 2026).
   Normal ink text, a round icon badge before each label, hover and focus invert to brand red,
   selected = ink border + tint + filled ink badge (distinct from the red hover). Icons are decoration (aria-hidden). */
.ctxq .chip { color: #111; font-weight: 500; gap: 10px; padding-left: 10px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ctxq .tiles .chip { justify-content: flex-start; text-align: left; }
.ctxq .chip .ic { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #F1F3F4; border: 1px solid #DDE2E5; font-size: 1rem; line-height: 1; transition: background-color .15s ease, border-color .15s ease; }
.ctxq .chip .tx { min-width: 0; overflow-wrap: break-word; hyphens: manual; }
/* selected: clear, and different from hover */
.ctxq .chip:has(input:checked) { border: 2px solid #111; background: #FFF6F7; color: #111; font-weight: 700; }
.ctxq .chip:has(input:checked) .ic { background: #fff; border: 2px solid #111; }
/* hover (mouse only) and keyboard focus: invert */
@media (hover: hover) and (pointer: fine) {
  .ctxq .chip:hover { background: #D44040; border-color: #D44040; color: #fff; }
  .ctxq .chip:hover .ic { background: #fff; border-color: #fff; }
}
.ctxq .chip:has(input:focus-visible) { background: #D44040; border-color: #D44040; color: #fff; outline: 3px solid #111; outline-offset: 2px; }
.ctxq .chip:has(input:focus-visible) .ic { background: #fff; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .ctxq .chip, .ctxq .chip .ic { transition: none; } }
/* phones: 1 column so long labels never break mid-word */
@media (max-width: 480px) { .ctxq .chips, .ctxq .tiles { grid-template-columns: 1fr; } }