/* « Par rue » matrix: the page keeps the vertical scroll, only the week columns
   scroll horizontally, and the header stays pinned to the viewport — with no JS.
   The header lives outside the scroller (so `sticky top` resolves against the page)
   and mirrors the body's horizontal offset through a scroll-driven animation.
   Column widths must stay fixed: the translation distance is computed from them. */

.street-matrix {
  --col-street: 18rem;
  --col-distribution: 10rem;
  --col-state: 8rem;
  --col-day: 1.875rem;
  --matrix-width: calc(var(--col-street) + var(--col-distribution) + var(--col-state) + var(--col-day) * var(--day-count));

  timeline-scope: --street-matrix-x;
}

.street-matrix-rail {
  @apply relative;

  width: max(var(--matrix-width), 100%);
}

/* Without scroll-driven animations the header stops following the horizontal
   scroll, but it must not be left translated sideways. */
@supports (animation-timeline: scroll()) {
  .street-matrix-rail {
    animation: street-matrix-track linear both;
    animation-timeline: --street-matrix-x;
  }
}

@keyframes street-matrix-track {
  from {
    left: 0;
  }

  to {
    left: calc(100% - max(var(--matrix-width), 100%));
  }
}

.street-matrix-body {
  @apply overflow-x-auto;

  scroll-timeline-name: --street-matrix-x;
  scroll-timeline-axis: x;
}

.street-matrix-row {
  @apply grid;

  grid-template-columns: var(--col-street) var(--col-distribution) var(--col-state) repeat(var(--day-count), var(--col-day));
  width: max(var(--matrix-width), 100%);
}

/* Keeps a long street name from overflowing its fixed track. Cells stay block
   level: a flex cell would collapse the tooltip wrapper of the distribution bar,
   whose own width is a percentage. */
.street-matrix-row > * {
  @apply min-w-0;
}