/* Hot Meter: the same file in every copy. Chain colours are fixed here because this page shows all three chains whichever radar serves it. */
:root { --elysium: #0f8a74; --robinhood: #c2500a; --solana: #6d38d4; --ethereum: #2456c9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --elysium: #5fdcc0; --robinhood: #ff9a4d; --solana: #b896ff; --ethereum: #80a8ff; } }
:root[data-theme="dark"] { --elysium: #5fdcc0; --robinhood: #ff9a4d; --solana: #b896ff; --ethereum: #80a8ff; }

.hot { display: grid; gap: 14px; padding: 16px 20px 40px; min-width: 0; }
.hot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.chain { --c: var(--ink); display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.chain.elysium { --c: var(--elysium); } .chain.robinhood { --c: var(--robinhood); } .chain.solana { --c: var(--solana); } .chain.ethereum { --c: var(--ethereum); }
.chain-head { display: flex; align-items: center; gap: 8px; }
.chain-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--c); }
.level { font: 500 11px var(--mono); padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; letter-spacing: 0.06em; margin-left: auto; color: var(--ink-2); }
.level.HOT { color: var(--bad); } .level.WARM { color: var(--warn); } .level.LEARNING { border-style: dashed; }
.stale { font: 500 11px var(--mono); color: var(--bad); }

.gauge { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: end; }
.gauge b { font: 500 40px/1 var(--mono); font-variant-numeric: tabular-nums; }
.gauge .asof { font-size: 12px; color: var(--ink-2); text-align: right; }
.track { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.track span { display: block; height: 100%; background: var(--c); }
.track i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--surface); }
.read { margin: 0; font-size: 13px; line-height: 1.4; }
.conf { font-size: 12px; color: var(--ink-2); margin: 0; }

.chain table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chain th { text-align: left; font-weight: 500; font-size: 11px; color: var(--ink-2); padding: 3px 4px 3px 0; white-space: nowrap; }
.chain td { padding: 4px 4px 4px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.chain .n, .spike-card .n { text-align: right; font-family: var(--mono); white-space: nowrap; }
.chain td.up { color: var(--bad); font-weight: 500; }
.sect { font-size: 11px; color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 4px; }
.spark { display: block; width: 100%; height: 56px; }
.spark path { fill: none; stroke: var(--c); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.alerts span { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.err { font-size: 13px; color: var(--ink-2); margin: 0; }

.spike-card h2 { margin: 0; font-size: 15px; font-weight: 600; }
.spike-card .scroll { overflow-x: auto; }
.spike-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spike-card th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-2); padding: 4px 12px 4px 0; white-space: nowrap; }
.spike-card td { padding: 5px 12px 5px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); }
.c-elysium { --c: var(--elysium); } .c-robinhood { --c: var(--robinhood); } .c-solana { --c: var(--solana); } .c-ethereum { --c: var(--ethereum); }
.good { color: var(--good); }

@media (max-width: 960px) { .hot { padding: 12px 16px 32px; } }