/*
 * Cell — the colored square used in grid views (year-per-tracker, all-
 * trackers-per-year). DESIGN.md §6 hard constraint: cells are true squares.
 * Pair with a .bg-* utility from palette.css to paint it.
 */

@layer components {
  .cell {
    aspect-ratio: 1;
    border-radius: var(--radius-cell);
    background: var(--c-gray);
    display: block;
    width: 100%;
  }

  .cell--empty {
    background: color-mix(in srgb, var(--c-gray) 20%, transparent);
  }

  .cell--photo {
    background: none;
    overflow: hidden;
  }

  .cell__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
}