/* ═══ 20. ACTIVITY BELL + CONTRIBUTION SUMMARY (plan doc 12 §5/§7) ════════ */

/* ── bell dropdown feed ───────────────────────────────────────────────── */

.activity-menu {
  min-width: 300px; max-width: 340px; padding: 0;
  overflow: hidden;
}
/* Mobile centers this on the header (≈ page center) instead of hugging the
   bell icon — feels more like a natural pop-up than a strict icon-anchored
   dropdown there; desktop keeps the icon-aligned default (see mobile.css).
   Own keyframe composes translateX(-50%) with the entrance slide so the two
   transforms don't fight — the shared menu-pop-in keyframe only ever set
   translateY, and interpolating that against a static translateX(-50%)
   would drift diagonally for the animation's duration instead of sliding
   straight up. Defined here (used only under the mobile override in
   mobile.css) since keyframes are global regardless of which rule uses them. */
@keyframes activity-menu-pop-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.activity-head {
  padding: 9px 12px 7px;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .3px;
  color: var(--ink-faint); text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.activity-feed { max-height: 340px; overflow-y: auto; }
.activity-line {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base); line-height: var(--lh-body);
}
.activity-line:last-child { border-bottom: none; }
.activity-who {
  flex: none;
  min-width: 22px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .3px;
  color: var(--bg); background: var(--fg);
}
.activity-text { flex: 1 1 auto; color: var(--ink-soft); }
/* (The old inline "· N edits" tail is gone — a folded run's count is now the
   sub-line below the sentence. See .activity-sub.) */
.activity-time { flex: none; font-size: var(--text-xs); color: var(--ink-faint); }
.activity-line.unseen { background: var(--hover-bg); }
.activity-line.unseen .activity-text { color: var(--fg); }
/* The second line under a sentence — currently the folded edit count ("2
   updates"). Muted and set apart so it reads as a footnote to the line above,
   never as another event. The progress range itself is inline in the sentence. */
.activity-sub {
  display: block; margin-top: 2px;
  font-size: var(--text-xs); color: var(--ink-faint);
}

/* ── full activity log modal ──────────────────────────────────────────────
   Same line markup as the dropdown, just unbounded in height and never
   highlighting unseen rows (everything is "seen" once you open the log). */
.activity-log { display: flex; flex-direction: column; }
.activity-log .activity-line { padding: 9px 2px; }
.activity-log .activity-line:last-child { border-bottom: 1px solid var(--line); }

.activity-more {
  width: 100%; padding: 9px 12px; text-align: left;
  font-size: var(--text-sm); color: var(--ink-soft);
  border-top: 1px solid var(--line);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.activity-more:hover { background: var(--hover-bg); color: var(--fg); }

/* ── contribution summary modal ───────────────────────────────────────── */

.act-modal .modal-head { flex-wrap: wrap; gap: 10px; align-items: center; }
/* FN-only person selector — hidden entirely for everyone else, so the head
   keeps its original shape rather than showing a disabled control. */
.act-who { display: flex; align-items: center; gap: 6px; }
.act-who-lbl { font-size: var(--text-sm); color: var(--ink-faint); }
.act-who select { height: var(--control-h-sm); font-size: var(--text-sm); }
.act-range { display: flex; gap: 6px; }
.act-custom {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--ink-faint);
}
.act-custom input[type="date"] {
  height: var(--control-h-sm); font-size: var(--text-sm);
}
.act-body { display: flex; flex-direction: column; gap: 4px; }
.act-rangecap {
  font-size: var(--text-sm); color: var(--ink-faint);
  margin-bottom: 8px;
}
.act-section {
  font-size: var(--text-base); font-weight: 600; letter-spacing: .2px;
  color: var(--fg); margin: 14px 0 8px;
}

.act-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.act-card {
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: 12px; background: var(--panel-bg);
}
.act-person { margin-bottom: 10px; }
.act-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base); font-weight: 600; letter-spacing: .5px;
  color: var(--bg); background: var(--fg);
}
.act-metrics { display: flex; gap: 16px; }
.act-metric { display: flex; flex-direction: column; gap: 2px; }
.act-num { font-size: var(--text-lg); color: var(--fg); }
.act-lbl { font-size: var(--text-xs); color: var(--ink-faint); }
.act-metric-soft .act-num { color: var(--ink-faint); }

.act-list { display: flex; flex-direction: column; gap: 10px; }
.act-proj-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.act-proj-name { font-size: var(--text-base); color: var(--fg); }
.act-proj-total { font-size: var(--text-sm); color: var(--ink-faint); }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.act-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--chip-bg); font-size: var(--text-sm); color: var(--ink-soft);
}
.act-chip-none { color: var(--ink-faint); font-style: italic; }
.act-flags { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.act-flag {
  font-size: var(--text-sm); color: var(--ink-faint);
  padding-left: 14px; position: relative;
}
.act-flag::before {
  content: "•"; position: absolute; left: 4px; color: var(--ink-faint);
}
.act-flag-warn { color: var(--warn-text); }
.act-flag-warn::before { color: var(--warn); }