/* Peak hours (the experiences round): a 7×24 heatmap in the site's zone. Visits shade in
   the visitors' blue (violet in dark), sales and revenue in coral. Every metric's shade is
   a class on each cell (v0–v8, s0–s8, r0–r8) and the panel's data-metric picks one, so the
   toggle cross-fades the colours in place; the busiest three hours get a ring. Cells sweep
   in from midnight, bars grow, and nothing moves for prefers-reduced-motion. On a phone the
   grid scrolls inside its own box with the weekdays held at the left. */

.peak {
  position: relative;
  margin-top: 16px;
  --heat: var(--visitors);
  --heat-ink: var(--visitors);
  --heat-0: var(--surface-2);
  --pk-label: 40px;
  --pk-total: 116px;
  --pk-gap: 3px;
}

.peak[data-metric="sales"],
.peak[data-metric="revenue"] {
  --heat: var(--revenue);
  --heat-ink: var(--revenue-ink);
}

.peak-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.peak-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

/* The toggle: three links (they work without the script) in one segmented control; a
   thumb slides under the chosen one. */
.peak-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.peak-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 3);
  border-radius: 5px;
  background: var(--button-bg);
  transition: transform .38s var(--ease-out);
}

.peak[data-metric="sales"] .peak-thumb {
  transform: translateX(100%);
}

.peak[data-metric="revenue"] .peak-thumb {
  transform: translateX(200%);
}

.peak-opt {
  position: relative;
  min-width: 74px;
  padding: 4px 12px;
  border-radius: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 540;
  text-align: center;
  text-decoration: none;
  transition: color .25s ease;
}

.peak-opt:hover {
  color: var(--ink);
}

.peak-opt[aria-pressed="true"],
.peak-opt[aria-pressed="true"]:hover {
  color: var(--button-ink);
}

.peak-opt:focus-visible {
  outline-offset: 1px;
}

/* What the panel says: one block per metric, stacked in one place, so switching
   cross-fades and the panel keeps its height. */
.peak-says {
  display: grid;
  margin-top: 14px;
}

.peak-say {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

.peak[data-metric="visits"] .peak-say[data-for="visits"],
.peak[data-metric="sales"] .peak-say[data-for="sales"],
.peak[data-metric="revenue"] .peak-say[data-for="revenue"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease .06s, visibility 0s;
}

.peak-lead {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.peak-lead.quiet {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 620;
  letter-spacing: 0;
}

.peak-when {
  color: var(--heat-ink);
  font-weight: 800;
  white-space: nowrap;
  transition: color .3s ease;
}

.peak-detail {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.peak-detail strong {
  color: var(--ink);
  font-weight: 620;
}

.peak-connect {
  color: var(--revenue-ink);
  font-weight: 620;
}

/* The grid: a header row of hours, a row per weekday (label, 24 cells, its total) and a
   footer of hour totals. Each row is its own grid on the same columns. */
.peak-scroll {
  margin: 18px -4px 0;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.peak-grid {
  display: grid;
  gap: var(--pk-gap);
  min-width: 600px;
}

.pk-row {
  display: grid;
  grid-template-columns: var(--pk-label) repeat(24, minmax(0, 1fr)) var(--pk-total);
  gap: var(--pk-gap);
  align-items: center;
}

.pk-head {
  margin-bottom: 1px;
}

.pk-hour {
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* Every third hour is labelled; the rest keep their names for screen readers. */
.pk-hour.pk-quiet {
  color: transparent;
}

.pk-total-head {
  padding-left: 12px;
}

.pk-day {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1;
}

.pk-cell {
  display: block;
  height: 26px;
  border-radius: 4px;
  background: var(--heat-0);
  transition: background-color .4s ease, box-shadow .3s ease;
}

.pk-cell:focus-visible,
.pk-total:focus-visible,
.pk-hour-total:focus-visible,
.pk-grand:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* An hour the period never reaches (today's later hours; the other days of a one-day
   period): drawn as an outline, so it doesn't read as "nobody came". */
.pk-cell.unseen {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.peak[data-metric="visits"] .v1,
.peak[data-metric="sales"] .s1,
.peak[data-metric="revenue"] .r1,
.pk-swatch.l1 {
  background: color-mix(in srgb, var(--heat) 12%, var(--heat-0));
}

.peak[data-metric="visits"] .v2,
.peak[data-metric="sales"] .s2,
.peak[data-metric="revenue"] .r2,
.pk-swatch.l2 {
  background: color-mix(in srgb, var(--heat) 22%, var(--heat-0));
}

.peak[data-metric="visits"] .v3,
.peak[data-metric="sales"] .s3,
.peak[data-metric="revenue"] .r3,
.pk-swatch.l3 {
  background: color-mix(in srgb, var(--heat) 33%, var(--heat-0));
}

.peak[data-metric="visits"] .v4,
.peak[data-metric="sales"] .s4,
.peak[data-metric="revenue"] .r4,
.pk-swatch.l4 {
  background: color-mix(in srgb, var(--heat) 45%, var(--heat-0));
}

.peak[data-metric="visits"] .v5,
.peak[data-metric="sales"] .s5,
.peak[data-metric="revenue"] .r5,
.pk-swatch.l5 {
  background: color-mix(in srgb, var(--heat) 57%, var(--heat-0));
}

.peak[data-metric="visits"] .v6,
.peak[data-metric="sales"] .s6,
.peak[data-metric="revenue"] .r6,
.pk-swatch.l6 {
  background: color-mix(in srgb, var(--heat) 70%, var(--heat-0));
}

.peak[data-metric="visits"] .v7,
.peak[data-metric="sales"] .s7,
.peak[data-metric="revenue"] .r7,
.pk-swatch.l7 {
  background: color-mix(in srgb, var(--heat) 84%, var(--heat-0));
}

.peak[data-metric="visits"] .v8,
.peak[data-metric="sales"] .s8,
.peak[data-metric="revenue"] .r8,
.pk-swatch.l8 {
  background: var(--heat);
}

/* The busiest three hours: a ring with a gap of paper, over the shade. */
.peak[data-metric="visits"] .pk-cell.bv,
.peak[data-metric="sales"] .pk-cell.bs,
.peak[data-metric="revenue"] .pk-cell.br {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--ink);
}

/* Totals beside (per weekday) and underneath (per hour). */
.pk-total,
.pk-grand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding-left: 12px;
  border-radius: 4px;
}

.pk-bar {
  display: block;
  width: 100%;
  height: 8px;
  overflow: visible;
  border-radius: 2px;
  background: var(--line-2);
}

.pk-bar-fill {
  opacity: 0;
  transition: opacity .3s ease;
}

.pk-bar-fill.for-visits {
  fill: var(--visitors);
}

.pk-bar-fill.for-sales,
.pk-bar-fill.for-revenue {
  fill: var(--revenue);
}

.peak[data-metric="visits"] .pk-bar-fill.for-visits,
.peak[data-metric="sales"] .pk-bar-fill.for-sales,
.peak[data-metric="revenue"] .pk-bar-fill.for-revenue {
  opacity: 1;
}

.pk-nums {
  display: grid;
  min-width: 3.4em;
  text-align: right;
}

.pk-num {
  grid-area: 1 / 1;
  color: var(--ink-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .25s ease;
}

.peak[data-metric="visits"] .pk-num[data-for="visits"],
.peak[data-metric="sales"] .pk-num[data-for="sales"],
.peak[data-metric="revenue"] .pk-num[data-for="revenue"] {
  opacity: 1;
}

.pk-grand .pk-nums {
  grid-column: 1 / -1;
}

.pk-grand .pk-num {
  color: var(--ink);
  font-weight: 620;
}

.pk-foot {
  align-items: end;
  margin-top: 5px;
}

.pk-foot .pk-day {
  align-self: center;
}

.pk-hour-total {
  display: block;
  height: 34px;
  border-radius: 3px;
}

.pk-col {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pk-hour-total .pk-bar-fill.for-visits {
  fill: color-mix(in srgb, var(--visitors) 55%, var(--heat-0));
}

.pk-hour-total .pk-bar-fill.for-sales,
.pk-hour-total .pk-bar-fill.for-revenue {
  fill: color-mix(in srgb, var(--revenue) 60%, var(--heat-0));
}

/* The readout over a hovered or focused cell. */
.peak-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-menu);
  font-size: 12.5px;
  white-space: nowrap;
  pointer-events: none;
}

.peak-tip-when,
.peak-tip-seen {
  color: var(--muted);
}

.peak-tip-value {
  color: var(--ink);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.peak-tip-seen:empty {
  display: none;
}

.peak-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
}

.peak-key-scale,
.peak-key-busy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.peak-key-swatches {
  display: inline-flex;
  gap: 2px;
}

.pk-swatch,
.pk-swatch-busy {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  transition: background-color .4s ease;
}

.pk-swatch-busy {
  background: var(--heat-0);
  box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--ink);
}

.pk-note {
  margin-top: 10px;
  max-width: 78ch;
  color: var(--muted);
  font-size: 12.5px;
}

.peak-swipe {
  display: none;
}

@media (max-width: 640px) {
  .peak {
    --pk-label: 34px;
    --pk-total: 92px;
  }

  .peak-head {
    flex-direction: column;
    align-items: stretch;
  }

  .peak-opt {
    min-width: 0;
    padding: 6px 8px;
  }

  .peak-lead {
    font-size: 20px;
  }

  /* Hours keep a size you can read and tap; the grid scrolls in its own box, which fades
     at its right edge (with room past the totals, so the end is never faded). */
  .peak-scroll {
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }

  .peak-grid {
    min-width: 0;
    width: max-content;
    padding-right: 20px;
  }

  .pk-row {
    grid-template-columns: var(--pk-label) repeat(24, 20px) var(--pk-total);
  }

  .pk-cell {
    height: 24px;
  }

  /* The weekdays hold at the left as the hours scroll under them; their paper reaches
     over the box's padding and the gap, so no cell shows beside them. */
  .pk-day,
  .pk-corner,
  .pk-foot .pk-day {
    position: sticky;
    left: 0;
    z-index: 3;
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--surface);
    box-shadow: -4px 0 0 var(--surface), var(--pk-gap) 0 0 var(--surface);
  }

  .peak-swipe {
    display: block;
    margin-top: 6px;
    color: var(--faint);
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Cells sweep in from midnight to the end of the day, then the totals grow. */
  .pk-cell {
    animation: pk-in .5s var(--ease-out) both;
  }

  .pk-row > :nth-child(3) { animation-delay: 20ms; }
  .pk-row > :nth-child(4) { animation-delay: 40ms; }
  .pk-row > :nth-child(5) { animation-delay: 60ms; }
  .pk-row > :nth-child(6) { animation-delay: 80ms; }
  .pk-row > :nth-child(7) { animation-delay: 100ms; }
  .pk-row > :nth-child(8) { animation-delay: 120ms; }
  .pk-row > :nth-child(9) { animation-delay: 140ms; }
  .pk-row > :nth-child(10) { animation-delay: 160ms; }
  .pk-row > :nth-child(11) { animation-delay: 180ms; }
  .pk-row > :nth-child(12) { animation-delay: 200ms; }
  .pk-row > :nth-child(13) { animation-delay: 220ms; }
  .pk-row > :nth-child(14) { animation-delay: 240ms; }
  .pk-row > :nth-child(15) { animation-delay: 260ms; }
  .pk-row > :nth-child(16) { animation-delay: 280ms; }
  .pk-row > :nth-child(17) { animation-delay: 300ms; }
  .pk-row > :nth-child(18) { animation-delay: 320ms; }
  .pk-row > :nth-child(19) { animation-delay: 340ms; }
  .pk-row > :nth-child(20) { animation-delay: 360ms; }
  .pk-row > :nth-child(21) { animation-delay: 380ms; }
  .pk-row > :nth-child(22) { animation-delay: 400ms; }
  .pk-row > :nth-child(23) { animation-delay: 420ms; }
  .pk-row > :nth-child(24) { animation-delay: 440ms; }
  .pk-row > :nth-child(25) { animation-delay: 460ms; }

  .pk-total .pk-bar-fill {
    transform-box: fill-box;
    transform-origin: left center;
    animation: pk-grow-x .8s var(--ease-out) .35s both;
  }

  .pk-hour-total .pk-bar-fill {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: pk-grow-y .8s var(--ease-out) .35s both;
  }

  .peak-tip:not([hidden]) {
    animation: pk-fade .15s ease both;
  }
}

@keyframes pk-in {
  from {
    opacity: 0;
    transform: scale(.55);
  }
}

@keyframes pk-grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes pk-grow-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes pk-fade {
  from {
    opacity: 0;
  }
}