@layer components {
  .activity-section { border-bottom: 1px solid var(--color-rule-strong); padding-block: var(--space-6); }
  .activity-heading { align-items: end; display: flex; gap: var(--space-5); justify-content: flex-start; }
  .activity-heading h2 { font-family: var(--font-reading); font-size: 1rem; font-weight: 750; letter-spacing: 0; margin-bottom: var(--space-1); }
  .activity-heading p { color: var(--color-text-muted); margin-bottom: 0; }
  .activity-heading .activity-range { color: var(--color-success); font-family: var(--font-reading); font-size: 0.82rem; white-space: nowrap; }
  .activity-loading, .activity-error { border-block: 1px solid var(--color-rule); margin-top: var(--space-5); padding-block: var(--space-5); }
  .activity-error { align-items: center; display: flex; gap: var(--space-4); justify-content: space-between; }
  .activity-error p { margin: 0; }
  .activity-overview { align-items: center; display: grid; gap: clamp(1.5rem, 2.5vw, 2.5rem); grid-template-columns: minmax(0, 1fr) auto; margin-top: var(--space-4); width: 100%; }
  .activity-summary { display: grid; grid-template-columns: repeat(3, minmax(6rem, 1fr)); }
  .activity-summary p { border-left: 1px solid var(--color-rule); display: grid; margin: 0; min-width: 7rem; padding: var(--space-4) var(--space-5); }
  .activity-summary strong { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; line-height: 1; }
  .activity-summary span { color: var(--color-text-muted); font-size: 0.76rem; margin-top: var(--space-1); }
  .activity-calendar { --activity-cell: 0.625rem; --activity-gap: 0.1875rem; display: grid; gap: var(--space-3); grid-template-columns: 2rem minmax(0, 1fr); max-width: 100%; width: 100%; }
  .activity-weekdays { display: grid; font-size: 0.78rem; gap: var(--activity-gap); grid-template-rows: repeat(7, var(--activity-cell)); line-height: 1; padding-top: 1.25rem; }
  .activity-weekdays span { align-items: center; color: var(--color-text-muted); display: flex; }
  .activity-grid-wrap { min-width: 0; overflow: visible; padding: 0.4rem; width: 100%; }
  .activity-months, .activity-grid { display: grid; gap: var(--activity-gap); grid-template-columns: repeat(var(--activity-weeks), var(--activity-cell)); width: max-content; }
  .activity-months { color: var(--color-text-muted); font-size: 0.78rem; height: 1rem; line-height: 1; }
  .activity-months span { overflow: visible; white-space: nowrap; }
  .activity-week { display: grid; gap: var(--activity-gap); grid-template-rows: repeat(7, var(--activity-cell)); }
  .activity-week button { aspect-ratio: 1; background: var(--color-canvas); border: 1px solid var(--color-rule); border-radius: 0; display: block; padding: 0; position: relative; transform: scale(1); transform-origin: center; width: var(--activity-cell); z-index: 0; }
  .activity-week button[data-level="1"], .activity-legend i[data-level="1"] { background: var(--color-activity-1); }
  .activity-week button[data-level="2"], .activity-legend i[data-level="2"] { background: var(--color-activity-2); }
  .activity-week button[data-level="3"], .activity-legend i[data-level="3"] { background: var(--color-activity-3); }
  .activity-week button[data-level="4"], .activity-legend i[data-level="4"] { background: var(--color-activity-4); }
  .activity-week button[aria-selected="true"] { box-shadow: 0 0 0 2px var(--color-sheet), 0 0 0 4px var(--color-activity-selected); }
}

@media (hover: hover) and (pointer: fine) {
  .activity-week button { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
  .activity-week button[data-wave="peak"] { transform: scale(1.25); transition-delay: 0ms; will-change: transform; z-index: 3; }
  .activity-week button[data-wave="near"] { transform: scale(1.1); transition-delay: 24ms; will-change: transform; z-index: 2; }
  .activity-week button[data-wave="far"] { transform: scale(1.04); transition-delay: 48ms; will-change: transform; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .activity-week button { transition: border-color 120ms ease, outline-color 120ms ease; }
  .activity-week button[data-wave] { transform: none; }
  .activity-week button[data-wave="peak"] { border-color: var(--color-activity-selected); outline: 2px solid var(--color-activity-selected); outline-offset: 2px; }
}

@layer responsive {
  @media (max-width: 82rem) {
    .activity-overview { align-items: start; grid-template-columns: 1fr; }
    .activity-summary { max-width: 28rem; }
  }

  @media (max-width: 48rem) {
    .activity-heading { align-items: start; flex-direction: column; gap: var(--space-2); }
    .activity-overview { gap: var(--space-5); grid-template-columns: 1fr; }
    .activity-calendar { --activity-cell: 0.8rem; --activity-gap: 0.2rem; grid-template-columns: 1.8rem minmax(0, 1fr); }
    .activity-summary { max-width: none; width: 100%; }
    .activity-summary p { min-width: 0; padding: var(--space-3); }
    .activity-error { align-items: stretch; flex-direction: column; }
  }
}