/* Flash Finance — /highs + /nifty-heatmap (market pulse pages).
   Builds on market.css (ff-*) and seasonality.css (tabs/panels). */

/* ── new-high badge on /highs ── */
.hl-new {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── treemap ── */
.hm-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 340px;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}
.hm-tile {
  position: absolute;
  /* Geometry arrives as custom properties so the phone breakpoint can swap in
     the portrait packing (--lm/--tm/--wm/--hm) computed alongside it. */
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 2px solid #fff;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #0f172a;
  transition: filter .15s ease;
}
.hm-tile:hover { filter: brightness(0.93); z-index: 2; }

/* A label wider than its tile used to be clipped at BOTH ends, because the
   flex column centres it and the tile hides the overflow — so BHARTIARTL read
   as "IARTIAR" and KOTAKBANK as "OTAKBAI", which look like other tickers
   rather than like truncation. Clip from one side with an ellipsis instead,
   so a shortened label still starts at the real first letter. */
.hm-tile > span {
  max-width: 100%;
  padding-inline: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.hm-sym  { font-weight: 700; letter-spacing: -0.01em; }
.hm-chg  { font-weight: 600; opacity: .85; }
.hm-pts  { font-weight: 500; opacity: .7; }

.hm-lg .hm-sym { font-size: 17px; }
.hm-lg .hm-chg { font-size: 13px; }
.hm-lg .hm-pts { font-size: 11px; }
.hm-md .hm-sym { font-size: 13px; }
.hm-md .hm-chg { font-size: 11px; }
.hm-md .hm-pts { font-size: 10px; }
.hm-sm .hm-sym { font-size: 10px; }
.hm-sm .hm-chg { font-size: 9px; }
.hm-sm .hm-pts { display: none; }
.hm-xs .hm-sym { font-size: 8px; }
.hm-xs .hm-chg, .hm-xs .hm-pts { display: none; }

@media (max-width: 640px) {
  /* Portrait packing: same weights, re-squarified into a 5:7 rectangle so the
     tiles are wide enough to carry a ticker on a ~330px-wide card. */
  .hm-wrap { aspect-ratio: 5 / 7; min-height: 420px; }
  .hm-tile {
    left: var(--lm, var(--l));
    top: var(--tm, var(--t));
    width: var(--wm, var(--w));
    height: var(--hm, var(--h));
  }

  /* Type scale keys off the portrait size class (hmm-*), not the landscape
     one — the two packings rank tiles differently. */
  .hmm-lg .hm-sym { font-size: 14px; }
  .hmm-lg .hm-chg { font-size: 11px; }
  .hmm-lg .hm-pts { font-size: 10px; }
  .hmm-md .hm-sym { font-size: 11px; }
  .hmm-md .hm-chg { font-size: 9px; }
  .hmm-md .hm-pts { display: none; }
  .hmm-sm .hm-sym { font-size: 9px; }
  .hmm-sm .hm-chg, .hmm-sm .hm-pts { display: none; }
  /* An 8px fragment on a 20px tile names nothing — at that size the tile's
     colour and its tap-through carry the meaning. */
  .hmm-xs .hm-sym, .hmm-xs .hm-chg, .hmm-xs .hm-pts { display: none; }
}

/* ── contributor / drag bars ── */
.hm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px) { .hm-cols { grid-template-columns: 1fr; } }

.hm-side { display: flex; flex-direction: column; gap: 8px; }
.hm-bar-row {
  display: grid;
  grid-template-columns: 92px 1fr 52px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.hm-bar-row .sym { font-weight: 600; }
.hm-bar-row .bar {
  display: block;
  height: 12px;
  border-radius: 3px;
  min-width: 2px;
}
.hm-bar-row .bar.pos { background: #16a34a; }
.hm-bar-row .bar.neg { background: #dc2626; }
.hm-bar-row .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── sector chips ── */
.hm-sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chip-pos { background: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; }
.hm-chip-neg { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #991b1b !important; }