/* The watch log (/feed). Night palette from brand.css, page furniture from
 * pages.css — this file is only the timeline.
 *
 * The rail is one continuous line with a status light per entry, so the shape of
 * the whole log is readable before a word of it: a column of green (examined and
 * cleared) with the rare red. That is the honest picture of the project and the
 * design should carry it rather than work against it. */

.feed-stats-band {
  padding: 28px 0 34px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feed-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.feed-stats > div {
  background: var(--panel); padding: 20px 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.feed-stats strong {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.feed-stats span { color: var(--ink-3); font-size: 0.82rem; }
.fs-caught strong { color: var(--red); }
.fs-resolved strong { color: var(--green); }
.feed-note { margin: 16px 0 0; color: var(--ink-2); font-size: 0.95rem; }
.feed-note strong { color: var(--ink); }

.feed-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px; margin-bottom: 1.2em;
}
.feed-head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.feed-live { margin: 0; color: var(--ink-3); font-size: 0.88rem; }

/* --- the timeline ------------------------------------------------------- */

.feed { list-style: none; margin: 0 0 2.4em; padding: 0; }

.fe { position: relative; }
/* The continuous rail. Drawn on the item rather than the list so the first and
 * last entries can crop it, and so an entry can tint its own segment. */
.fe::before {
  content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.fe:first-child::before { top: 22px; }
.fe:last-child::before { bottom: auto; height: 22px; }

.fe-link { display: block; text-decoration: none; color: inherit; border-radius: 10px; }
.fe-link:hover .fe-text { color: var(--ink); }
.fe-link:hover { background: rgba(233, 238, 244, 0.035); }
.fe-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fe > *, .fe-link { display: grid; grid-template-columns: 16px 1fr; }
.fe-rail { padding-top: 15px; display: flex; justify-content: center; }
.fe-body { padding: 12px 14px 14px 16px; min-width: 0; }

.sdot { width: 9px; height: 9px; border-radius: 50%; display: block; position: relative; z-index: 1; }

.fe-meta {
  margin: 0 0 0.35em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.fe-kind { font-weight: 700; letter-spacing: 0.12em; }
.fe-kind-caught   { color: var(--red); }
.fe-kind-resolved { color: var(--green); }
.fe-kind-radar    { color: var(--white); }
.fe-kind-neutral  { color: var(--ink-2); }
.fe-new {
  color: var(--bg); background: var(--amber);
  border-radius: 999px; padding: 0.15em 0.55em;
  font-weight: 800; letter-spacing: 0.08em; font-size: 0.68rem;
}
.fe-text { margin: 0 0 0.3em; color: var(--ink-2); font-size: 1rem; }
.fe-zone { margin: 0; color: var(--ink-3); font-size: 0.85rem; }
.fe-status { font-weight: 700; }
.fe-status-caught   { color: var(--red); }
.fe-status-resolved { color: var(--green); }
.fe-status-neutral  { color: var(--amber); }
.fe-status-radar    { color: var(--white); }

/* A CAUGHT entry is the only one that is an accusation; it gets the only
 * emphasis in the list, and nothing else does, so the emphasis means something. */
.fe-caught .fe-body {
  background: rgba(255, 75, 62, 0.055);
  border-left: 2px solid var(--red);
  border-radius: 0 10px 10px 0;
}
.fe-caught .fe-text { color: var(--ink); }

.fe-empty { color: var(--ink-2); }

/* Entries added in place by feed.js. Fading in makes the arrival legible
 * without moving anything the reader is looking at. */
@keyframes fe-arrive { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fe-arrived { animation: fe-arrive 420ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .fe-arrived { animation: none; }
}

@media (max-width: 640px) {
  .feed-stats { grid-template-columns: repeat(2, 1fr); }
  .fe-body { padding: 11px 0 13px 14px; }
}

/* The engine's own conclusion. Dimmer and smaller than the event line: it is
 * the answer, and the event above it is the question. */
.fe-why {
  margin: 0 0 0.4em; color: var(--ink-3); font-size: 0.9rem;
  border-left: 2px solid var(--line); padding-left: 10px;
}