/* live.css — the freshness bar.
 *
 * A separate stylesheet on purpose. The CSP is `style-src 'self'`, so live.js
 * cannot inject a <style> block, and keeping it out of app.css means a redesign
 * of app.css cannot accidentally take the staleness indicator with it.
 *
 * Three states, and they must be tellable apart at a glance and without colour:
 *   live   green dot, "47s ago"
 *   stale  amber dot, a sentence saying it has not updated
 *   dead   red dot, a sentence saying it is a stored snapshot
 * The wording carries the meaning; the colour only speeds it up.
 */
.freshbar {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
}
.freshbar-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 7px var(--gut);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.freshbar .fresh-main { color: var(--text-2); white-space: nowrap; }
.freshbar .fresh-main b { font-weight: 600; color: var(--text); }
.freshbar .fresh-note { color: var(--muted); font-family: var(--sans); font-size: 12.5px; }

.fresh-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--flat);
  flex: 0 0 auto;
  align-self: center;
  box-shadow: 0 0 0 3px rgba(140, 152, 173, .16);
}
.freshbar[data-state="live"] .fresh-dot { background: var(--up); box-shadow: 0 0 0 3px rgba(20, 164, 90, .16); }
.freshbar[data-state="stale"] .fresh-dot { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(232, 145, 45, .2); }
.freshbar[data-state="dead"] .fresh-dot { background: var(--down); box-shadow: 0 0 0 3px rgba(212, 48, 74, .2); }

/* Stale and dead are not decoration — they change what the numbers mean, so the
   whole bar changes, not just a dot. */
.freshbar[data-state="stale"] { background: var(--accent-bg); border-bottom-color: var(--accent-2); }
.freshbar[data-state="stale"] .fresh-note { color: var(--accent); }
.freshbar[data-state="dead"] { background: var(--down-bg); border-bottom-color: var(--down); }
.freshbar[data-state="dead"] .fresh-note { color: var(--down); font-weight: 600; }

@media (max-width: 720px) {
  .freshbar-in { padding: 6px var(--gut); gap: 6px; }
  .freshbar .fresh-note { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .freshbar[data-state="live"] .fresh-dot { animation: freshPulse 4s ease-in-out infinite; }
}
@keyframes freshPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(20, 164, 90, .16); }
  50%      { box-shadow: 0 0 0 5px rgba(20, 164, 90, .05); }
}