/* ============================================================================
   Quant advisor — "The Hot Hand" moment.  Namespaced .hh-*, tokens only (no new
   colors/fonts), so it re-themes for free and respects prefers-reduced-motion
   via the UI kit it's built on. Layout-only; the components carry the styling.
   ============================================================================ */
.hh .hh-board { display:flex; flex-direction:column; gap:8px; margin:.9rem 0; }
.hh-row { display:grid; grid-template-columns:86px 1fr 52px; align-items:center; gap:10px; }
.hh-row--top .hh-num { color:var(--info); }
.hh-num { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink2); text-align:right; }
.hh-quant { font-size:14px; line-height:1.6; color:var(--ink); margin:.5rem 0 .8rem; }
.hh-quant em { font-style:italic; }
.hh-tally { font-size:13px; color:var(--ink2); margin:.2rem 0 .9rem; }
.hh-tally b { color:var(--ink); font-family:var(--mono); }
.hh-muted { color:var(--ink3); }
.hh-choices { display:grid; gap:8px; margin:.6rem 0; }
.hh-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:.6rem; }
.hh-takeaway { margin-top:1rem; }
.hh-canvas { display:block; width:100%; height:210px; margin:.6rem 0 .2rem; border-radius:var(--r-md); }
@media (max-width:520px) { .hh-canvas { height:180px; } }
@media (max-width:520px) { .hh-row { grid-template-columns:72px 1fr 46px; gap:8px; } }