/* ============================================================
   /activity: one compact filter bar (broadcast.css .filter-bar), day
   headings in condensed italic, and each story as a dark row: a
   square tag, the lap time big when there is one, the driver with
   the combo under them, and the time, likes and comments on the
   right. Comments open full width under their row.
   ============================================================ */

/* ---------- filter bar ---------- */
.activity-filters { margin-top: 6px; }
.activity-filters .filter-select {
  width: auto;
  max-width: 13rem;
  min-height: 2.25rem;
  padding-block: 6px;
  border-color: var(--edge-strong);
  border-radius: 3px;
  background-color: var(--surface);
  color: #d6dae0;
  font-size: 0.9rem;
}
.activity-filters .filter-select.is-set { border-color: var(--accent-edge); color: #fff; }
.activity-clear { font-size: 0.9rem; }
@media (max-width: 640px) {
  .activity-filters .filter-select { flex: 1 1 8rem; max-width: none; }
}

/* ---------- the feed ---------- */
.activity-feed { margin-top: 10px; }
.activity-day {
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #fff;
}
.activity-row {
  display: grid;
  grid-template-columns: 116px 132px minmax(0, 1fr) auto;
  grid-template-areas: "tag time story side";
  align-items: center;
  min-height: 64px;
  margin-bottom: 4px;
  background: #101216;
}
.activity-tag { grid-area: tag; justify-self: start; margin-left: 12px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.activity-time {
  grid-area: time;
  padding-left: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: #fff;
  white-space: nowrap;
}
/* A story with no lap time lets its words take the time's column. */
.activity-story { grid-area: story; min-width: 0; padding: 10px 14px; }
.activity-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; color: #fff; }
.activity-who a:hover { color: var(--accent); }
.activity-row:not(.has-time) .activity-story { grid-column: time-start / story-end; }
.activity-what { margin-top: 2px; font-size: 0.9rem; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
.activity-what a { color: #c3c8cf; }
.activity-what a:hover { color: var(--accent); }
.activity-side { grid-area: side; display: grid; justify-items: end; gap: 0; padding: 6px 16px 6px 8px; }
.activity-ago { font-size: 0.85rem; color: var(--ink-faint); white-space: nowrap; }

/* Likes and the comments toggle sit together under the time. */
.activity-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 14px; }
.activity-like { flex-shrink: 0; }
.activity-like-button, .activity-comments > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--ink-muted);
  font-size: 0.85rem;
  cursor: pointer;
}
.activity-like-button:hover, .activity-comments > summary:hover, .activity-like-button.is-liked { color: var(--accent); }
.activity-like-button > span:first-child { font-size: 1.05rem; }
.activity-comments { min-width: 0; }
.activity-comments > summary { width: fit-content; list-style: none; }
.activity-comments > summary::-webkit-details-marker { display: none; }
.activity-comments > summary::before { content: "\25B8"; font-size: 0.75rem; }
.activity-comments[open] > summary::before { content: "\25BE"; }

/* Open comments take a full row under the story, side panel and all. */
.activity-row:has(.activity-comments[open]) { grid-template-areas: "tag time story story" "side side side side"; }
.activity-row:has(.activity-comments[open]) .activity-side { justify-items: stretch; padding: 0 16px 12px; border-top: 1px solid var(--edge); }
.activity-row:has(.activity-comments[open]) .activity-ago { display: none; }
.activity-row:has(.activity-comments[open]) .activity-social { justify-content: flex-start; }
.activity-comments[open] { flex-basis: 100%; order: -1; }
.activity-like-button:disabled { cursor: wait; }
.activity-like-error { max-width: 240px; margin-top: 6px; color: var(--danger); font-size: 13px; }

.activity-empty { padding: 48px 20px; background: #101216; text-align: center; font-size: 0.9rem; color: var(--ink-faint); }
.activity-empty-title { margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: #fff; }

@media (max-width: 640px) {
  .activity-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "tag time" "story story" "side side";
    padding-top: 10px;
  }
  .activity-row:not(.has-time) .activity-story { grid-column: story-start / story-end; }
  .activity-time { font-size: 1.45rem; }
  .activity-story { padding: 6px 12px 0; }
  .activity-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 2px; }
  .activity-row:has(.activity-comments[open]) { grid-template-areas: "tag time" "story story" "side side"; }
}

/* ---------- comments (activity_comments, inside the lazy frame) ---------- */
.activity-comment-form label { display: block; margin-bottom: 7px; color: var(--ink-muted); font-size: 14px; }
.activity-conversation { padding: 12px 0; max-width: 760px; }
.activity-conversation-heading, .activity-comment-footer, .activity-comment-meta, .activity-comment-pages { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.activity-conversation-heading { margin-bottom: 16px; }
.activity-conversation-heading h2 { font-weight: 600; }
.activity-conversation-heading .link-quiet, .activity-comment-meta, .activity-comment-footer { font-size: 13px; color: var(--ink-muted); }
.activity-comment-form textarea { display: block; width: 100%; resize: vertical; }
.activity-comment-footer { margin-top: 8px; }
.activity-comment { border-top: 1px solid var(--edge); margin-top: 18px; padding-top: 16px; }
.activity-comment-meta { justify-content: start; }
.activity-comment-meta form { margin-left: auto; }
.activity-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; line-height: 1.5; }
.activity-comment-empty { margin-top: 20px; color: var(--ink-muted); font-size: 14px; }
.activity-comment-error { color: var(--danger); margin-bottom: 8px; }
.activity-comment-pages { margin-top: 20px; }
.activity-social :is(button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 600px) {
  .activity-comment-footer > span { max-width: 170px; }
}