/* Sector heatmap — filter bar, color-by-change tiles, drill-down list.
   Tiles use bucketed background classes (heat.py -> heat_class) so the color
   scale stays in one place. */

.heatmap-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.heatmap-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.heatmap-filters select {
  min-width: 160px;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.heatmap-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0 0 12px;
  font-size: 0.8rem;
}
.heat-fresh { display: inline-flex; align-items: center; gap: 7px; }
.heat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--muted);
}
.heat-dot.is-live {
  background: var(--pos);
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18);
}
.heat-dot.is-closed { background: var(--muted); }
.heat-delayed {
  color: var(--muted);
  font-size: 0.76rem;
  cursor: help;
}

/* Sector overview — one tile per sector, packed heatmap-style. */
.heat-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 3px;
}
.heat-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px 12px;
  border: none;
  border-radius: 3px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  outline: 1px solid transparent;
  transition: filter 0.08s ease, outline-color 0.08s ease;
}
.heat-tile:hover { filter: brightness(1.1); outline-color: rgba(255, 255, 255, 0.35); }
.heat-tile-name { font-weight: 600; font-size: 0.92rem; }
.heat-tile-chg { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.heat-tile-count { font-size: 0.72rem; opacity: 0.75; }

/* Average-change badge (shown in the sector breadcrumb when zoomed in). */
.heat-mosaic-avg {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.heat-stocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 3px;
}
.heat-stock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 6px 4px;
  border-radius: 3px;
  cursor: default;
}
.heat-stock-sym { font-weight: 700; font-size: 0.82rem; }
.heat-stock-chg { font-size: 0.72rem; opacity: 0.92; font-variant-numeric: tabular-nums; }
.heat-stock-name, .heat-stock-price { display: none; }

/* Zoomed-in sector: bigger tiles that surface the name + price inline. */
.heat-stocks.is-zoom {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 4px;
}
.heat-stocks.is-zoom .heat-stock {
  min-height: 84px;
  padding: 10px 8px;
  gap: 3px;
}
.heat-stocks.is-zoom .heat-stock-sym { font-size: 0.95rem; }
.heat-stocks.is-zoom .heat-stock-chg { font-size: 0.82rem; }
.heat-stocks.is-zoom .heat-stock-name,
.heat-stocks.is-zoom .heat-stock-price {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zoom breadcrumb bar */
.heat-zoom-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.heat-zoom-back {
  padding: 6px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}
.heat-zoom-back:hover { background: var(--bg); }
.heat-zoom-title { font-size: 1.05rem; font-weight: 700; }
.heat-zoom-count { font-size: 0.8rem; }

/* Color buckets — symmetric green (up) / red (down). Saturated tiles get
   light text; faint tiles keep the default text color. */
.heat-up-3  { background: #1a7f37; border-color: #1a7f37; color: #fff; }
.heat-up-2  { background: #238636; border-color: #238636; color: #fff; }
.heat-up-1  { background: rgba(63, 185, 80, 0.20); border-color: rgba(63, 185, 80, 0.35); }
.heat-flat  { background: var(--panel); }
.heat-na    { background: var(--panel); color: var(--muted); }
.heat-down-1 { background: rgba(248, 81, 73, 0.20); border-color: rgba(248, 81, 73, 0.35); }
.heat-down-2 { background: #b62324; border-color: #b62324; color: #fff; }
.heat-down-3 { background: #8e1519; border-color: #8e1519; color: #fff; }

/* Hover card for stock tiles — a styled box, not the native title tooltip. */
.heat-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  min-width: 158px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  color: var(--text);
}
.heat-tip[hidden] { display: none; }
.heat-tip-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.heat-tip-head strong { font-size: 0.9rem; }
.heat-tip-head span { color: var(--muted); font-size: 0.76rem; }
.heat-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.heat-tip-row > span:first-child { color: var(--muted); }
.heat-tip-chg.up { color: var(--pos); font-weight: 600; }
.heat-tip-chg.down { color: var(--neg); font-weight: 600; }
.heat-tip-chg.flat { color: var(--muted); }

/* Subtle on-update flash — inset ring fades out, so no layout shift. Applied by
   heatmap.js only to tiles whose value actually moved since the last poll. */
@keyframes heatFlashUp {
  from { box-shadow: inset 0 0 0 2px var(--pos); }
  to   { box-shadow: inset 0 0 0 0 transparent; }
}
@keyframes heatFlashDown {
  from { box-shadow: inset 0 0 0 2px var(--neg); }
  to   { box-shadow: inset 0 0 0 0 transparent; }
}
.flash-up  { animation: heatFlashUp 0.9s ease-out; }
.flash-down { animation: heatFlashDown 0.9s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .flash-up, .flash-down { animation: none; }
}