/* ============================================================
   MASTER VORTEX — Market Heatmap view styles.
   Pairs with heatmap.js (view: #heatmapView). Tokens match
   styles.css / screener.css / earnings.css (--green #1ee308,
   --red #ff3b47, --panel, --panel-2, --edge, --dim, --ink).
   Tiles are EQUAL SIZE by design — the universe file carries
   no market-cap data, so tile size implies nothing; color
   alone carries the day's % change. Every weight in this file
   is 400 — the platform unbold rule.
   ============================================================ */

/* When the Heatmap view is open it owns the workspace: the chart
   grid steps aside, exactly like the sibling views. */
body.mv-heatmap-open .main{display:none}
body.mv-heatmap-open .tf-group{visibility:hidden}

.heat-view{flex:1; min-height:0; display:flex; flex-direction:column;
  background:var(--panel); margin:10px; border:1px solid var(--edge); border-radius:14px;
  overflow:hidden}
.heat-view[hidden]{display:none}

.heat-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--edge); background:var(--panel-2)}
.heat-title{font-size:15px; font-weight:400; letter-spacing:1.5px; color:var(--ink)}
.heat-chip{font-size:10px; font-weight:400; letter-spacing:1.1px; color:var(--d-yellow);
  border:1px solid rgba(255,216,77,.55); border-radius:20px; padding:4px 9px; white-space:nowrap}
.heat-chip[hidden]{display:none}
.heat-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto}
.heat-refresh{font:inherit; font-size:12px; font-weight:400; letter-spacing:.4px;
  background:var(--panel); color:var(--ink); border:1px solid var(--edge);
  border-radius:10px; padding:7px 14px; cursor:pointer}
.heat-refresh:hover{border-color:var(--green); color:var(--green)}
.heat-refresh:disabled{opacity:.5; cursor:default}
.heat-status{font-size:12px; color:var(--dim); font-weight:400}
.heat-status.err{color:var(--red)}

/* The tile field scrolls inside the view; the page never scrolls. */
.heat-body{flex:1; min-height:0; overflow:auto; padding:12px 14px}
.heat-empty{padding:60px 20px; text-align:center; color:var(--dim);
  font-size:14px; font-weight:400}
.heat-empty[hidden]{display:none}

.heat-sector{border:1px solid var(--edge); border-radius:10px; overflow:hidden;
  margin-bottom:12px; background:#0a1322}
.heat-sector-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 12px; border-bottom:1px solid var(--edge); background:var(--panel-2)}
.heat-sector-name{font-size:12.5px; font-weight:400; letter-spacing:1.2px; color:var(--ink)}
.heat-sector-meta{font-size:11.5px; font-weight:400; color:var(--dim);
  font-variant-numeric:tabular-nums}

/* Equal-size tiles: every tile takes the same flex basis, so the
   grid can never imply market cap. */
.heat-grid{display:flex; flex-wrap:wrap; gap:5px; padding:8px}
.heat-tile{flex:1 1 92px; max-width:150px; min-height:58px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:1px; padding:6px 8px; border:1px solid rgba(232,244,255,.14); border-radius:6px;
  color:var(--ink); font-family:inherit; text-align:left; cursor:pointer;
  font-variant-numeric:tabular-nums}
.heat-tile:hover{border-color:rgba(232,244,255,.65)}
.heat-tile-sym{font-size:13px; font-weight:400; letter-spacing:.3px}
.heat-tile-pct{font-size:12px; font-weight:400}
.heat-tile-price{font-size:10.5px; font-weight:400; opacity:.85}
/* At strong intensity the background reaches the screener palette's
   full green/red, which takes the active-tab dark text treatment. */
.heat-tile.strong-up{color:#03140a}
.heat-tile.strong-dn{color:#1a0205}

.heat-foot{flex:0 0 auto; padding:7px 14px; font-size:11px; font-weight:400;
  color:#7d8ea6; border-top:1px solid var(--edge); background:var(--panel-2)}

@media (max-width:900px){
  .heat-view{margin:6px}
  .heat-head{gap:10px; padding:8px 10px}
  .heat-title{font-size:14px}
  .heat-controls{margin-left:0}
  .heat-body{padding:8px}
}

@media (max-width:700px){
  .heat-grid{gap:4px; padding:6px}
  .heat-tile{flex-basis:64px; min-height:50px; padding:5px 6px}
  .heat-tile-sym{font-size:11.5px}
  .heat-tile-pct{font-size:11px}
  .heat-tile-price{font-size:9.5px}
  .heat-sector-head{padding:7px 9px}
}