/* /activity - page-specific styles. Hero + ribbon come
   from library-shared.css; the working zone here is one column
   of timestamped event rows grouped by day, with a category-
   filter pill row above. */

.lib-act-work {
  display: block;
  /* Tighten vertical rhythm — the previous ~88px stack
     (hero padding-bottom + work padding-top) made the
     filter row feel adrift from the page title. Drop our
     own padding-top and pair with the hero override below
     to bring the filters close to the title. */
  padding-top: 0;
}
/* Scoped hero override for the activity page only — the
   main /library page keeps its taller hero/filter air. */
.lib-h-page:has(.lib-act-work) .lib-h {
  padding-bottom: clamp(20px, 2.4vw, 32px);
}

/* Category filters — same outlined-pill family as the /track
   hero tag editor (.te-pill-chip). Active pill flips to ink
   fill with bone text. */
.lib-act-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(var(--rail) + 2 * var(--rail-x));
  margin: 0 auto clamp(28px, 3.5vw, 40px);
}
.lib-act-filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  line-height: 1.4;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.lib-act-filter:hover { background: rgba(10, 10, 10, 0.04); }
.lib-act-filter.is-active {
  background: var(--ink);
  color: var(--bone);
}

.lib-act-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* The list uses the full content width - no sticky aside on
     this view because chronological is the only useful ordering
     for a scan feed; jumping by month is less compelling than on
     the track index. */
  max-width: calc(var(--rail) + 2 * var(--rail-x));
  margin: 0 auto;
}
/* Narrative row — variant D. Each event reads as a
   complete sentence with proper nouns bold inline; the
   time sits below as a quiet mono caption. No hover state
   (rows aren't clickable; the activity feed is read-only).
   Pure block stack, no <a>. */
.lib-act-row {
  display: grid;
  gap: 2px;
  /* Inter-row padding — 12px each side gives a 24px gap
     between rows, a touch more breathing room than the
     previous 16px without losing scan rhythm. */
  padding: 12px 0;
}
.lib-act-line {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  max-width: 56ch;
}
.lib-act-line strong { font-weight: 700; }
/* Track name link inside the narrative sentence — bold at
   rest, underline appears on hover. text-underline-offset
   keeps the line clear of descenders. The rest of the
   sentence stays non-interactive. */
.lib-act-track {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: text-decoration-color 120ms ease;
}
.lib-act-track:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lib-act-time {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
}

/* ----- Day chapters (no enclosing month wrapper) -----
   Day labels read at the same scale as a track-page section
   header (.ta-section-title — "Leak Tracking", "Activity"
   on /track). Big enough to anchor the chronological
   structure on its own without needing a month band above. */
.lib-act-day + .lib-act-day { margin-top: clamp(48px, 6vw, 72px); }
.lib-act-day-head {
  /* Gap from day title to first row matches the inter-row
     gap (12px top + 12px bottom = 24px). line-height: 1
     strips the heading font's built-in descent so the
     margin alone governs the visual gap. */
  margin: 0 0 24px;
  font-family: inherit;
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink);
  padding-bottom: 0;
  border-bottom: 0;
}
.lib-act-day-body { display: flex; flex-direction: column; }
/* Drop the first row's own top padding so the only gap
   between the day title and its first event is the heading
   margin above. Subsequent rows keep their 8px breathing. */
.lib-act-day-body .lib-act-row:first-child { padding-top: 0; }

/* ----- Infinite-scroll sentinel ----- */
.lib-act-load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  margin-top: clamp(40px, 5vw, 64px);
}
/* Same spinner shape/timing as /library's .library-load-spinner
   so loading states across the app share one visual language. */
.lib-act-load-spinner {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-top-color: transparent;
  border-radius: 999px;
  animation: lib-act-load-spin 0.7s linear infinite;
}
@keyframes lib-act-load-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lib-act-load-spinner { animation: none; }
}

.lib-act-end-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
}
.lib-act-end {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 0;
  padding: 24px 0;
}

@media (max-width: 720px) {
  .lib-act-row:hover { transform: none; }
}