/* RIFF heatmap. Diverging levels use only RIFF tokens (--acid up, --down down) and a neutral
   gray-green midpoint (--card-hover); every tile also shows the numeric change, so color is never
   alone. Tokens come from app.css. */
.hm-head{margin:2px 2px 14px}
.hm-head h2{font-size:17px;font-weight:800}
.hm-head .sub{color:var(--muted);font-size:12.5px;margin-top:4px}
.hm-note{color:var(--muted);font-size:12px;margin-top:6px}
.hm-wrap{position:relative;width:100%;height:calc(100vh - 150px);min-height:420px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.tile{position:absolute;overflow:hidden;cursor:pointer;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4px;box-sizing:border-box;outline:2px solid var(--bg);text-decoration:none}
.tile .tk{font-weight:800;font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tile .ch{font-size:11px;font-weight:700;margin-top:2px}
.tile.strongUp{background:var(--acid);color:var(--on-acid)}
.tile.mildUp{background:rgba(183,255,60,.30);color:var(--text)}
.tile.neutral{background:var(--card-hover);color:var(--muted)}
.tile.mildDown{background:rgba(255,77,97,.28);color:var(--text)}
.tile.strongDown{background:var(--down);color:#2a0910}
.hm-tip{position:fixed;z-index:50;display:none;pointer-events:none;background:var(--panel);border:1px solid var(--line-acid);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:240px}
.hm-tip b{color:var(--text)} .hm-tip .k{color:var(--muted)}
.hm-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14px;text-align:center;padding:20px}
.hm-empty a{color:var(--acid);text-decoration:none;font-weight:700}
@media(max-width:640px){.hm-wrap{height:calc(100vh - 180px)}}