/* /live — the anonymised live feed. Design: docs/design/Feed.dc.html */

.live-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 40px; }
.live-h1 { margin: 12px 0 14px; }
.live-lead { max-width: 56ch; }
.live-counter-wrap { text-align: right; }
.live-counter {
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums;
}
.live-counter-meta { font-family: var(--font-mono); font-size: 12px; color: var(--mute); margin-top: 6px; }

.live-filters { margin-bottom: 20px; }

/* grid shared by the header row and every row card */
.live-th, .live-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(120px, 1.6fr) 96px 52px 44px minmax(110px, .9fr);
  gap: 12px;
  align-items: center;
}
.live-th { padding: 0 18px 10px; }
.live-list { margin: 0; padding: 0; list-style: none; }
.live-row { padding: 14px 18px; }
.live-row[hidden] { display: none; }
.live-task-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.live-task-kind { font-size: 12px; color: var(--mute); }
.live-num { font-family: var(--font-mono); font-size: 13px; }
.live-model { min-width: 0; }
.live-model-name { font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.live-app { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 0; min-width: 0; }
.live-app .seed-tag.is-hidden { display: none; }
.live-empty { margin-top: 8px; }

.live-foot { display: flex; gap: 16px; align-items: center; margin-top: 20px; font-size: 13px; color: var(--mute); flex-wrap: wrap; }

.live-sm { display: none; }

@media (max-width: 760px) {
  .live-title { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .live-counter-wrap { text-align: left; }
  .live-filters .chip-group-aside { width: 100%; margin-left: 0; }
  .live-th { display: none; }
  .live-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "task outcome" "path path" "model sm";
    gap: 8px 12px;
    padding: 14px 16px;
  }
  .live-row .live-task { grid-area: task; }
  .live-row .outcome { grid-area: outcome; align-self: start; justify-self: end; }
  .live-row .live-path { grid-area: path; }
  .live-row .live-num { display: none; }
  .live-row .live-model { grid-area: model; display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
  .live-row .live-model-name { flex: 0 1 auto; }
  .live-row .live-app { flex: none; gap: 0; }
  .live-row .live-sm { grid-area: sm; display: block; font-family: var(--font-mono); font-size: 12px; color: var(--mute); white-space: nowrap; align-self: baseline; }
  .live-foot .push { margin-left: 0; }
}
