@layer components {
  .heatmap {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  .heatmap-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .heatmap rect.cell {
    shape-rendering: crispEdges;
    stroke: var(--bg);
    stroke-width: 0.5;
  }
  .heatmap rect.cell:hover {
    stroke: var(--ac);
    stroke-width: 1.5;
  }
  .heatmap .label {
    fill: var(--tx3);
    font-size: 10px;
    font-family: var(--font-ui);
  }

  .chart-tooltip {
    position: absolute;
    z-index: 10;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    color: var(--tx);
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: var(--shadow-2);
  }

  .chart-empty {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--tx2);
  }
}