/* TAO Subnet Heatmap v3 */

/* ── Full width breakout ── */
.tao-hm-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #111118;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  margin: 1.5rem 0;
  position: relative;
  color: #fff;
  /* Full width breakout — works in most WP themes */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* Header */
.tao-hm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1.1rem 2rem .5rem;
}
.tao-hm-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
.tao-hm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  flex-shrink: 0;
  animation: tao-pulse 2s ease-in-out infinite;
}
@keyframes tao-pulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.4)}
}
.tao-hm-meta {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .72rem;
  color: #666;
}
.tao-hm-source { color: #666; text-decoration: none; }
.tao-hm-source:hover { color: #aaa; }

/* Tabs */
.tao-hm-tabs {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem 2rem .7rem;
  flex-wrap: wrap;
}
.tao-hm-tab {
  padding: .28rem .8rem;
  border: 1px solid #333;
  border-radius: 6px;
  background: transparent;
  color: #888;
  font-size: .8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.tao-hm-tab:hover  { border-color: #666; color: #fff; }
.tao-hm-tab.active { background: #fff; color: #111; border-color: #fff; }
.tao-hm-legend {
  margin-left: .8rem;
  font-size: .7rem;
  color: #555;
}
.tao-hm-legend b { color: #888; }

/* Color legend bar */
.tao-hm-color-legend {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 2rem .6rem;
  font-size: .7rem;
  color: #666;
}
.tao-hm-color-bar {
  width: 140px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #b71c1c, #1c1c28, #1b5e20);
  flex-shrink: 0;
}
.tao-hm-color-label-neg { color: #ef5350; font-weight: 700; }
.tao-hm-color-label-pos { color: #4caf7d; font-weight: 700; }

/* Treemap */
/* Treemap — height fixed, inner content taller, scrolls vertically */
.tao-hm-treemap {
  width: 100%;
  background: #111118;
  /* scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #333 #111118;
}
.tao-hm-treemap::-webkit-scrollbar { width: 6px; }
.tao-hm-treemap::-webkit-scrollbar-track { background: #111118; }
.tao-hm-treemap::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.tao-hm-treemap::-webkit-scrollbar-thumb:hover { background: #555; }

/* Cell */
.tao-hm-cell {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #111118;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 3px;
  text-decoration: none;
  color: #fff;
  transition: filter .15s, border-color .15s;
}
.tao-hm-cell:hover {
  border-color: rgba(255,255,255,.5);
  filter: brightness(1.18);
  z-index: 5;
}
.tao-hm-cell-logo {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.tao-hm-cell-name {
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.tao-hm-cell-sn {
  font-size: .58rem;
  opacity: .65;
  text-align: center;
}
.tao-hm-cell-val {
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  margin-top: 1px;
}
.tao-hm-up   { color: #81c784; }
.tao-hm-down { color: #ef9a9a; }
.tao-hm-neutral { color: #aaa; }

/* Scale content in small cells — never hide logo completely */
.tao-hm-cell.sz-xs .tao-hm-cell-logo { width:14px; height:14px; margin-bottom:0; }
.tao-hm-cell.sz-xs .tao-hm-cell-name { font-size:.55rem; }
.tao-hm-cell.sz-xs .tao-hm-cell-sn   { display:none; }
.tao-hm-cell.sz-xs .tao-hm-cell-val  { display:none; }

.tao-hm-cell.sz-sm .tao-hm-cell-logo { width:16px; height:16px; margin-bottom:1px; }
.tao-hm-cell.sz-sm .tao-hm-cell-name { font-size:.6rem; }
.tao-hm-cell.sz-sm .tao-hm-cell-sn   { display:none; }
.tao-hm-cell.sz-sm .tao-hm-cell-val  { font-size:.58rem; }

.tao-hm-cell.sz-md .tao-hm-cell-logo { width:20px; height:20px; }
.tao-hm-cell.sz-md .tao-hm-cell-name { font-size:.65rem; }

/* Tooltip */
.tao-hm-tooltip {
  position: fixed;
  display: none;
  background: rgba(18,18,28,.97);
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .78rem;
  color: #fff;
  pointer-events: none;
  z-index: 99999;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.tao-hm-tip-name { font-weight: 800; font-size: .92rem; margin-bottom: .4rem; }
.tao-hm-tip-row  { display:flex; justify-content:space-between; gap:1.5rem; margin:.15rem 0; color:#888; font-size:.73rem; }
.tao-hm-tip-row b { color:#fff; }

/* Loading */
.tao-hm-loading {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(17,17,24,.8);
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.tao-hm-loading.show { display:flex; }
.tao-hm-spinner {
  width: 36px; height: 36px;
  border: 4px solid rgba(255,255,255,.1);
  border-top-color: #00d9ff;
  border-radius: 50%;
  animation: tao-spin 1s linear infinite;
}
@keyframes tao-spin { to { transform:rotate(360deg); } }

/* Footer */
.tao-hm-footer {
  display: flex;
  justify-content: space-between;
  padding: .5rem 2rem .8rem;
  font-size: .68rem;
  color: #444;
}
.tao-hm-footer a { color: #444; text-decoration:none; }
.tao-hm-footer a:hover { color: #888; }

/* Mobile */
@media (max-width:600px) {
  .tao-hm-header, .tao-hm-tabs,
  .tao-hm-color-legend, .tao-hm-footer { padding-left:1rem; padding-right:1rem; }
  .tao-hm-title  { font-size:1rem; }
  .tao-hm-legend { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .tao-hm-dot, .tao-hm-spinner { animation:none!important; }
  .tao-hm-cell { transition:none!important; }
}

/* Scroll container */
.tao-hm-treemap-outer {
  width: 100%;
  overflow: auto;
  background: #111118;
  scrollbar-width: thin;
  scrollbar-color: #555 #111118;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.tao-hm-treemap-outer:active { cursor: grabbing; }
.tao-hm-treemap-outer::-webkit-scrollbar { width: 8px; height: 8px; }
.tao-hm-treemap-outer::-webkit-scrollbar-track { background: #111118; }
.tao-hm-treemap-outer::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.tao-hm-treemap-outer::-webkit-scrollbar-thumb:hover { background: #777; }
.tao-hm-treemap-outer::-webkit-scrollbar-corner { background: #111118; }

/* Logo fallback */
.tao-hm-logo-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 800;
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}