/* One frame per daily/hourly pair; subgrid aligns both rows across the four sets. */
#activity-charts {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  gap: 12px;
}
.activity-pair-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.activity-chart-pair {
  --pair-accent: #4d81ba;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce5ee;
  border-top: 3px solid var(--pair-accent);
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fbfe, #fff 70px);
  box-shadow: 0 2px 8px #172c4408;
}
.activity-chart-pair[data-kind="players"] { --pair-accent: #218a7f; }
.activity-chart-pair[data-kind="play-time"] { --pair-accent: #bc7a25; }
.activity-chart-pair[data-kind="ascension"] { --pair-accent: #855ab0; }
.activity-chart-pair > section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.activity-chart-pair > section:first-child { padding-bottom: 10px; }
.activity-chart-pair > section + section { padding-top: 10px; border-top: 1px solid #e7edf3; }
.activity-chart-pair > section > .chart-scroll { margin-top: auto; }
.activity-charts .activity-share-grid { padding-top: 12px; border-top: 1px solid #e7edf3; }
.activity-chart-note { margin: -4px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.activity-charts .activity-share-grid { margin: 0; }
@media (max-width: 1280px) {
  .activity-pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  #activity-charts { gap: 16px; }
  .activity-pair-grid { grid-template-columns: minmax(0, 1fr); }
  .activity-chart-pair { padding: 8px; }
  .activity-hourly-chart .count-chart { min-width: 720px; }
}