/*
 * The daily feed (docs/design-frames.html frame 3): date groups, severity stripes,
 * filter chips, expandable universe-churn lines. Tokens come from css/app.css.
 */
.tt-feed { display: flex; flex-direction: column; gap: var(--tt-sp-4); min-width: 0; }
.tt-feed-toolbar[hidden] { display: none; }
.tt-feed-filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-sp-2) var(--tt-sp-4); }
.tt-feed-chips { display: flex; flex-wrap: wrap; gap: var(--tt-sp-2); }
.tt-feed-select {
  width: auto;
  max-width: 220px;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 var(--tt-sp-3);
  font: inherit;
  font-size: var(--tt-fs-13);
  color: var(--tt-ink);
  background: var(--tt-surface);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-sm);
}

.tt-feed-body { display: flex; flex-direction: column; gap: var(--tt-sp-5); min-width: 0; }
.tt-feed-day { display: flex; flex-direction: column; gap: var(--tt-sp-2); }
.tt-feed-day-head {
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--tt-ink-muted);
  font-variant-numeric: tabular-nums;
}

.tt-feed-row {
  --stripe: var(--tt-sev-low);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tt-sp-4);
  padding: var(--tt-sp-3) var(--tt-sp-4);
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-left: 4px solid var(--stripe);
  border-radius: var(--tt-radius-sm);
}
.tt-feed-row[data-sev='high'] { --stripe: var(--tt-sev-high); }
.tt-feed-row[data-sev='medium'] { --stripe: var(--tt-sev-medium); }
.tt-feed-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.tt-feed-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: var(--tt-fs-14); min-width: 0; }
.tt-feed-sponsor { font-weight: 650; }
.tt-feed-seg { color: var(--tt-ink-secondary); overflow-wrap: anywhere; }
.tt-feed-sep { color: var(--tt-ink-muted); }
.tt-feed-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: var(--tt-fs-13);
  color: var(--tt-ink-secondary);
  font-variant-numeric: tabular-nums;
}
.tt-feed-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--tt-ink); }
.tt-feed-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-ink-muted); }
.tt-feed-before { color: var(--tt-ink-muted); text-decoration: line-through; text-decoration-color: var(--tt-axis); }
.tt-feed-after { font-weight: 650; color: var(--tt-ink); }
.tt-feed-delta { font-weight: 700; color: var(--tt-ink); }
.tt-feed-row[data-sev='high'] .tt-feed-delta { color: var(--tt-sev-high); }
.tt-feed-context { color: var(--tt-ink-muted); }
.tt-feed-why { margin: 0; font-size: var(--tt-fs-12); color: var(--tt-ink-secondary); overflow-wrap: anywhere; }
.tt-feed-tail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--tt-fs-12); color: var(--tt-ink-muted); }
.tt-feed-nct { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.tt-feed-nct:hover { color: var(--tt-ink); text-decoration: underline; }
.tt-feed-size { font-weight: 600; letter-spacing: 0.03em; }
.tt-feed-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--tt-sp-1); }

.tt-feed-churn {
  padding: var(--tt-sp-3) var(--tt-sp-4);
  background: var(--tt-surface-2, var(--tt-surface));
  border: 1px dashed var(--tt-border-strong);
  border-radius: var(--tt-radius-sm);
  font-size: var(--tt-fs-13);
}
.tt-feed-churn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--tt-sp-3); }
.tt-feed-churn-title { font-weight: 650; }
.tt-feed-churn-names { min-width: 0; overflow-wrap: anywhere; }
.tt-feed-churn-head .tt-link-btn { margin-left: auto; }
.tt-feed-churn-list { margin: var(--tt-sp-2) 0 0; padding-left: var(--tt-sp-5); display: flex; flex-direction: column; gap: 2px; color: var(--tt-ink-secondary); }
.tt-feed-more { align-self: center; }
.tt-subscribe code { font-size: 11px; }

@media (max-width: 720px) {
  .tt-feed-row { flex-direction: column; gap: var(--tt-sp-2); }
  .tt-feed-actions { justify-content: flex-start; }
  .tt-feed-filterrow { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--tt-sp-1); }
  .tt-feed-chips { flex-wrap: nowrap; flex: none; }
  .tt-feed-select { flex: none; }
}

.tt-feed-row[data-event-id] { cursor: default; }
.tt-feed-row.is-selected {
  background: var(--tt-accent-soft);
  border-color: var(--tt-accent);
  border-left-color: var(--stripe);
  box-shadow: 0 0 0 1px var(--tt-accent) inset;
}