/* ==========================================================================
   Contributions — GitHub heatmap rendered client-side, recolored to brand
   tokens via the data-level attribute on each cell.
   ========================================================================== */

@layer pages {
  .contributions {
    margin-block-start: var(--space-4);
  }

  .contributions-years {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }

  .contributions-year {
    --year-color: var(--color-ink-tertiary);
    --year-border: var(--border-subtle);
    --year-background: transparent;
    --year-font-weight: var(--font-weight-normal);

    appearance: none;
    border: 1px solid var(--year-border);
    background-color: var(--year-background);
    color: var(--year-color);
    font-family: var(--font-family-mono);
    font-size: var(--text-x-small);
    font-weight: var(--year-font-weight);
    padding-block: 0.25rem;
    padding-inline: 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
      color var(--transition-fast),
      border-color var(--transition-fast),
      background-color var(--transition-fast);
  }

  @media (any-hover: hover) {
    .contributions-year:hover {
      --year-color: var(--color-ink-primary);
      --year-border: var(--border-default);
    }
  }

  .contributions-year[data-active] {
    --year-color: var(--color-ink-primary);
    --year-border: var(--color-ink-primary);
    --year-font-weight: var(--font-weight-semibold);
  }

  .contributions-year:focus-visible {
    outline: 2px solid var(--focus-primary);
    outline-offset: 2px;
  }

  .contributions-grid {
    inline-size: 100%;
    block-size: auto;
    min-inline-size: 28rem;
  }

  .contributions-grid rect {
    transition: fill var(--transition-fast);
  }

  .contributions-grid rect[data-level="0"] {
    fill: var(--surface-elevated);
  }

  .contributions-grid rect[data-level="1"] {
    fill: color-mix(in oklch, var(--interactive-primary) 22%, var(--surface-elevated));
  }

  .contributions-grid rect[data-level="2"] {
    fill: color-mix(in oklch, var(--interactive-primary) 45%, var(--surface-elevated));
  }

  .contributions-grid rect[data-level="3"] {
    fill: color-mix(in oklch, var(--interactive-primary) 70%, var(--surface-elevated));
  }

  .contributions-grid rect[data-level="4"] {
    fill: var(--interactive-primary);
  }

  .contributions-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    color: var(--color-ink-tertiary);
    font-family: var(--font-family-mono);
    font-size: var(--text-small);
  }

  .contributions-source {
    color: inherit;
  }

  .contributions-loading {
    block-size: 6rem;
    background-color: var(--surface-elevated);
    border-radius: var(--radius-md);
    animation: contributions-pulse 1.5s ease-in-out infinite;
  }

  @keyframes contributions-pulse {
    0%,
    100% {
      opacity: 0.5;
    }

    50% {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .contributions-loading {
      animation: none;
    }
  }

  .contributions-fallback {
    color: var(--color-ink-secondary);
  }
}