/* ============================================================
   heat-rows.css, watchlist rows (Tier-4 GL fire/ice handoff)
   Tier by |day change %|: thresholds [2,5,10,20].
   Tiers 1-3 = lightweight CSS edges. Tier 4 (>=20%) = WebGL canvas.
   Value pill = solid green/red block (abs change + %), white figures.
   ============================================================ */

.hrow {
  position: relative;
  border-radius: 13px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .5s ease, box-shadow .5s ease;
}
.hrow:not([data-tier="4"]) { overflow: hidden; }
/* Clip the tier-4 GL fire/ice to the row so it stays inside the stock and does
   not bleed into the neighbor rows. */
.hrow[data-tier="4"] { overflow: hidden; z-index: 5; }

.hrow__main {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(60px, 1fr) auto auto;
  align-items: center; gap: 16px;
  padding: 13px 16px;
}
.hrow__edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; }
.hrow__gl   { position: absolute; top: -26px; left: -30px; width: calc(100% + 60px); height: calc(100% + 52px); pointer-events: none; z-index: 0; display: block; }

/* identity */
.hrow .tk { font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: .01em; color: var(--text); display: flex; align-items: center; gap: 7px; line-height: 1.1; }
.hrow .co { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* price */
.hrow .px { font-family: var(--mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; white-space: nowrap; }

/* solid value pill: abs change (bold) + percent */
.chg {
  display: grid; justify-items: center; gap: 1px;
  min-width: 76px; padding: 6px 11px; border-radius: 8px;
  line-height: 1.08; text-align: center;
}
.chg b { font-family: var(--mono); font-weight: 700; font-size: 14.5px; color: #fff; font-variant-numeric: tabular-nums; }
.chg span { font-family: var(--mono); font-weight: 600; font-size: 11px; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
.hrow[data-dir="up"]   .chg { background: linear-gradient(180deg, #38b357, #2a9c49); box-shadow: 0 4px 14px -6px rgba(42,156,73,.7); }
.hrow[data-dir="down"] .chg { background: linear-gradient(180deg, #f15c52, #e0473d); box-shadow: 0 4px 14px -6px rgba(224,71,61,.7); }

/* feature-card mini heat watchlist: compact rows that fit the 132px viz, with
   even single-line pills (change on the left, percent on the right, both edges
   aligned across every row) instead of cramped, uneven stacked numbers. */
.feat-heat { position: absolute; inset: 12px; display: grid; gap: 5px; align-content: center; }
.feat-heat .hrow__main { padding: 6px 11px; grid-template-columns: 1fr auto; gap: 10px; }
.feat-heat .tk { font-size: 12px; }
.feat-heat .chg {
  min-width: 112px; padding: 4px 9px; border-radius: 7px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.feat-heat .chg b { font-size: 11.5px; }
.feat-heat .chg span { font-size: 10px; color: rgba(255, 255, 255, .9); }

/* sparkline, jagged, pure green (up) / red (down) */
.hrow__spark { width: 100%; height: 30px; display: block; }
.hrow__spark .ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hrow[data-dir="up"]   .hrow__spark { color: #4ade6a; }
.hrow[data-dir="down"] .hrow__spark { color: #f0564a; }

/* ============================================================
   TIERS 1-3, CSS edge glows (green up / ice-blue down)
   ============================================================ */
/* up */
.hrow[data-dir="up"][data-tier="1"] .hrow__edge { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-calm) 22%, transparent); }
.hrow[data-dir="up"][data-tier="2"] .hrow__edge { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-glow) 36%, transparent), inset 0 0 18px -7px color-mix(in oklab, var(--g-glow) 55%, transparent), 0 0 20px -10px color-mix(in oklab, var(--g-calm) 60%, transparent); }
.hrow[data-dir="up"][data-tier="3"] .hrow__edge { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-glow) 52%, transparent), inset 0 0 26px -6px color-mix(in oklab, var(--g-glow) 62%, transparent), 0 0 30px -8px color-mix(in oklab, var(--g-glow) 60%, transparent); animation: edge-breathe 3000ms ease-in-out infinite; }
.hrow[data-dir="up"][data-tier="2"] { background: linear-gradient(180deg, color-mix(in oklab, var(--g-calm) 7%, var(--panel)), var(--panel)); }
.hrow[data-dir="up"][data-tier="3"] { background: linear-gradient(180deg, color-mix(in oklab, var(--g-calm) 12%, var(--panel)), var(--panel)); }
.hrow[data-dir="up"][data-tier="3"] .tk { color: var(--g-text); }

/* down (cooling → ice-blue edge; value stays red) */
.hrow[data-dir="down"][data-tier="1"] .hrow__edge { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ice-1) 18%, transparent); }
.hrow[data-dir="down"][data-tier="2"] .hrow__edge { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ice-1) 30%, transparent), inset 0 0 18px -7px color-mix(in oklab, var(--ice-1) 42%, transparent); animation: edge-breathe 4600ms ease-in-out infinite; }
.hrow[data-dir="down"][data-tier="3"] .hrow__edge { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ice-1) 42%, transparent), inset 0 0 24px -6px color-mix(in oklab, var(--ice-1) 50%, transparent), 0 0 26px -10px color-mix(in oklab, var(--ice-1) 45%, transparent); animation: edge-breathe 5200ms ease-in-out infinite; }
.hrow[data-dir="down"][data-tier="2"] { background: linear-gradient(180deg, color-mix(in oklab, var(--ice-1) 5%, var(--panel)), var(--panel)); }
.hrow[data-dir="down"][data-tier="3"] { background: linear-gradient(180deg, color-mix(in oklab, var(--ice-1) 9%, var(--frost-bg)), var(--panel)); }
.hrow[data-dir="down"][data-tier="3"] .tk { color: var(--ice-3); }

@keyframes edge-breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

/* ============================================================
   TIER 4, GL canvas carries the rim; row sets the dark bed
   ============================================================ */
.hrow[data-tier="4"][data-dir="up"]   { background: linear-gradient(180deg, #1a120b, #0d0a07); box-shadow: inset 0 0 0 1px #3a2410; }
.hrow[data-tier="4"][data-dir="down"] { background: linear-gradient(180deg, #0c1622, #0a1019); box-shadow: inset 0 0 0 1px #1d3550; }
.hrow[data-tier="4"][data-dir="up"]   .tk { color: #ffe2b0; }
.hrow[data-tier="4"][data-dir="down"] .tk { color: var(--ice-3); }
.hrow[data-tier="4"][data-dir="down"] .co { color: color-mix(in oklab, var(--ice-2) 60%, var(--muted)); }

/* snowflake glyph for frozen rows */
.snow { width: 12px; height: 12px; flex: none; }
.snow line { stroke: var(--ice-3); stroke-width: 1.2; }

/* motion off / reduced, GL still paints one static frame (handled in JS) */
.motion-off .hrow__edge { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hrow__edge { animation: none !important; } }