/* =========================================================================
 * Activity page — live feed rows/groups + a dotted globe in the TOC rail's
 * slot. Reuses the site tokens (--measure, --text-*, --border-*, accent,
 * font families) so it reads as a sibling of the writing index.
 * ====================================================================== */

:root {
  --activity-accent: var(--accent-primary, var(--color-hibiscus, #be3455));
  --activity-line: var(--border-primary, #e9e8ea);
  --activity-muted: var(--text-tertiary, rgba(25, 10, 38, 0.55));
  --activity-globe-gap: 36px;
  --activity-globe-size: 340px;
}

[data-theme="dark"] {
  --activity-line: var(--dm-border-primary, #2c2c2c);
  --activity-muted: var(--dm-text-tertiary, #808080);
}

/* ---- Title + live pill ------------------------------------------------ */

.activity-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.activity-header h1 { margin: 0; }

.activity-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-family-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--activity-muted);
  padding: 4px 10px;
  border: 1px solid var(--activity-line);
  border-radius: 999px;
  white-space: nowrap;
}
.activity-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14b866;
  position: relative;
  flex: none;
}
.activity-live__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #14b866;
  opacity: 0.45;
  animation: activity-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.activity-live.is-quiet .activity-live__dot { background: var(--activity-muted); }
.activity-live.is-quiet .activity-live__dot::after { display: none; }

@keyframes activity-ping {
  0% { transform: scale(1); opacity: 0.45; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ---- Feed rows / groups ---------------------------------------------- */

#activity-feed-root { display: flex; flex-direction: column; }

.activity-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 4px;
  border-bottom: 1px solid var(--activity-line);
}
.activity-row:last-child { border-bottom: none; }

.activity-glyph { flex: none; line-height: 1; padding-top: 1px; }

.activity-body {
  font-family: var(--font-family-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-primary);
  min-width: 0;
}

.activity-who { font-weight: 500; }
.activity-who--head { margin-bottom: 4px; }

.activity-single { display: inline; }
.activity-single .activity-who { font-weight: 500; }

.activity-actions { display: flex; flex-direction: column; gap: 2px; }
.activity-action { color: var(--activity-muted); }
.activity-verb { color: var(--activity-muted); }
.activity-target {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.activity-target:hover { border-bottom-color: var(--activity-accent); }

.activity-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--activity-muted);
  border: 1px solid var(--activity-line);
  border-radius: 6px;
  padding: 0 5px;
  margin-left: 2px;
}

/* GoFundMe-style arrival highlight */
.activity-row--flash {
  animation: activity-flash 1.4s ease-out;
  border-radius: 8px;
}
@keyframes activity-flash {
  0% { background: color-mix(in srgb, var(--activity-accent) 14%, transparent); }
  100% { background: transparent; }
}

/* Twemoji glyphs */
.twemoji {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  display: inline-block;
}
.activity-glyph .twemoji { width: 22px; height: 22px; vertical-align: middle; margin-bottom: 0 !important; }
.twemoji--fallback { font-size: 20px; line-height: 1; }

/* Empty state */
.activity-empty {
  color: var(--activity-muted);
  font-family: var(--font-family-ui, sans-serif);
  padding: 40px 4px;
  font-size: 0.95rem;
}

/* ---- Globe rail (in the TOC's slot) ---------------------------------- */

.activity-globe-rail {
  position: fixed;
  top: 160px;
  left: 50%;
  transform: translateX(calc(var(--measure, 38em) / 2 + var(--activity-globe-gap)));
  width: var(--activity-globe-size);
  z-index: 30;
  pointer-events: none;
}
.activity-globe-rail__inner { position: relative; width: 100%; }
#activity-globe {
  width: var(--activity-globe-size);
  height: var(--activity-globe-size);
  max-width: 100%;
  aspect-ratio: 1;
  contain: layout paint;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: auto; /* draggable even though the rail ignores pointers */
  touch-action: none;   /* let drag work on touch without scrolling the page */
}
#activity-globe.is-ready { opacity: 1; }
.activity-globe-rail__caption {
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-family-ui, sans-serif);
  font-size: 0.75rem;
  color: var(--activity-muted);
}

/* Hide the globe on narrower viewports so it never clips the right edge —
   feed goes full width, matching how the TOC rail behaves. */
@media (max-width: 1359px) {
  .activity-globe-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .activity-live__dot::after { animation: none; }
  .activity-row--flash { animation: none; }
}

/* ---- Globe comparison (temporary) ------------------------------------ */

.globe-compare {
  max-width: 1120px;
  margin: 64px auto 40px;
  padding: 0 20px;
}
.globe-compare__head { text-align: center; margin-bottom: 28px; }
.globe-compare__head h2 { margin: 0 0 6px; }
.globe-compare__head p {
  margin: 0;
  color: var(--activity-muted);
  font-family: var(--font-family-ui, sans-serif);
  font-size: 0.95rem;
}
.globe-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 720px) { .globe-compare__grid { grid-template-columns: 1fr; } }

.globe-card {
  margin: 0;
  border: 1px solid var(--activity-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary, rgba(127, 127, 127, 0.03));
}
.globe-card__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.globe-card__stage canvas {
  width: 320px;
  height: 320px;
  max-width: 100%;
  aspect-ratio: 1;
  cursor: grab;
  touch-action: none;
}
.globe-card--three .globe-card__stage { display: block; }
.globe-card--three .globe-card__stage canvas { width: 100%; height: 100%; }
.globe-card figcaption {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--activity-line);
  font-family: var(--font-family-ui, sans-serif);
}
.globe-card figcaption b { display: block; font-size: 0.95rem; color: var(--text-primary); }
.globe-card figcaption span { display: block; margin-top: 3px; font-size: 0.82rem; color: var(--activity-muted); }