// ─────────────────────────────────────────────────────────────────────────────
// Component: Canvas
// File:      src/scss/components/_canvas.scss
//
// Variants:  .prof-canvas, .prof-canvas__domain, .prof-canvas__cell[data-intensity]
//            .prof-canvas__legend, .prof-canvas__tooltip
// Tokens:    --canvas-0 through --canvas-4, --domain-*, --bg-elevated
// Usage:     <div class="prof-canvas">…</div>
//
// Notes:     Activity canvas replaced the old contribution graph entirely.
//            data-intensity 0-4 maps to --canvas-0 through --canvas-4.
//            Only domains with commits are rendered (no phantom rows).
// ─────────────────────────────────────────────────────────────────────────────

.prof-canvas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prof-canvas__domain {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.prof-canvas__domain-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.prof-canvas__domain-label[data-domain="code"]    { color: var(--domain-code); }
.prof-canvas__domain-label[data-domain="midi"]    { color: var(--domain-midi); }
.prof-canvas__domain-label[data-domain="mist"]    { color: var(--domain-mist); }
.prof-canvas__domain-label[data-domain="agent"]   { color: var(--domain-agent); }
.prof-canvas__domain-label[data-domain="generic"] { color: var(--domain-generic); }

.prof-canvas__grid {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.prof-canvas__week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prof-canvas__cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--canvas-0);
  box-shadow: inset 0 0 0 1px var(--canvas-border);
  cursor: default;
  transition: opacity var(--transition-fast);

  &[data-intensity="0"] { background: var(--canvas-0); }
  &[data-intensity="1"] { background: var(--canvas-1); }
  &[data-intensity="2"] { background: var(--canvas-2); }
  &[data-intensity="3"] { background: var(--canvas-3); }
  &[data-intensity="4"] { background: var(--canvas-4); }

  &:hover { opacity: 0.75; }
}

// Tooltip on hover
.prof-canvas__tooltip {
  position: absolute;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--canvas-2) 40%, transparent);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-md);
}

// Legend strip
.prof-canvas__legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.prof-canvas__legend-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;

  &[data-intensity="0"] { background: var(--canvas-0); }
  &[data-intensity="1"] { background: var(--canvas-1); }
  &[data-intensity="2"] { background: var(--canvas-2); }
  &[data-intensity="3"] { background: var(--canvas-3); }
  &[data-intensity="4"] { background: var(--canvas-4); }
}