/* /heatmap: market heatmap on the cobalt palette. Tiles are positioned by heatmap.js. */
.hm-body{background:var(--bg);background-image:none}
.hm-main{max-width:1600px;margin:0 auto;padding:0 16px 16px}
.hm-main h1{margin:4px 0 8px;font-size:20px;line-height:1.3}
.hm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 8px}
#hm-q{min-height:40px;width:220px;padding:0 12px;border:1px solid var(--line2);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:16px}
#hm-note{margin:0 0 0 auto;font-size:12.5px;color:var(--muted)}
.hm-legend{display:flex;align-items:center;gap:2px;font-size:11px;color:var(--muted)}.hm-legend i{width:22px;height:12px}
.hm-map{position:relative;overflow:hidden;background:var(--bg)}
.hm-t{position:absolute;box-sizing:border-box;border:1px solid var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;color:#fff;font-size:11px;line-height:1.25;text-align:center;font-family:var(--mono)}
.hm-t:hover,.hm-t:focus-visible{outline:2px solid #fff;outline-offset:-2px;z-index:1}
.hm-t{font-size:10px}.hm-t b{font-size:11px;font-weight:700}.hm-t b.l{font-size:15px}
.hm-t.dim{opacity:.25}.hm-t.hit{outline:2px solid #fff;outline-offset:-2px;z-index:1}
@media(max-width:700px){#hm-q{width:100%}#hm-note{margin:0}}
.hm-t{text-shadow:0 1px 2px rgba(0,0,0,.55)}