.activity-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -4px 0 30px;
  padding: 15px 18px;
  border: 1px solid #c9d8e6;
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: #f4f8fb;
  box-shadow: 0 4px 12px rgba(23, 50, 77, .05);
}

.activity-summary[hidden] { display: none; }
.activity-summary h2 { margin: 0 0 3px; font-size: 1.1rem; }
.activity-summary p { margin: 0; }
.activity-summary__primary p { display: flex; align-items: baseline; flex-wrap: wrap; color: #475b6f; }
.activity-summary__primary strong { color: var(--navy); font-size: 1.08rem; }
.activity-summary__separator { padding: 0 7px; color: #8a6a24; }
.activity-summary__visits { white-space: normal; }
.activity-summary__clarification { white-space: nowrap; color: var(--muted); font-size: .94rem; }
.activity-summary__link { flex: 0 0 auto; text-align: right; }
.activity-summary__link a { display: inline-block; font-weight: 800; }
.activity-summary__link a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 760px) {
  .activity-summary { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px 16px; }
  .activity-summary__primary p { align-items: flex-start; flex-direction: column; gap: 2px; }
  .activity-summary__separator { display: none; }
  .activity-summary__link { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .activity-summary, .activity-summary * { scroll-behavior: auto; }
}