/* wgf-freshness.css — the canonical "Live · Verified price" AH trust badge (goal #7).
   One look everywhere live AH/token data appears. A quiet bordered block with a
   verification SEAL, a trust line, and the exact time since the last scan. Authority
   comes from the seal + left accent rule + honest wording — NOT from glow or motion
   (both on the foundations avoid-list). TWO states only: fresh (Live · Verified) and
   offline (Last verified / No live data). Colours/type come only from _tokens.css. */

.wgf-snapshot {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.5rem 0.65rem;
  background: var(--wgf-panel-2);
  border: 1px solid var(--wgf-border-neutral);
  border-left: 3px solid var(--wgf-gold-dim);
  border-radius: var(--radius-control);
  max-width: max-content;
}

/* Verification seal — disc + state glyph (check when live, ring when offline). */
.wgf-snapshot__seal {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--wgf-up-rgb), 0.16);
  color: var(--wgf-up);
}
.wgf-snapshot__seal svg { width: 12px; height: 12px; display: block; }

.wgf-snapshot__body { display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; }

/* Trust line — the loud part. Green = verified-live by default. */
.wgf-snapshot__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wgf-up);
  line-height: 1.1;
}

.wgf-snapshot__meta { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.wgf-snapshot__sep { color: var(--wgf-border-strong); }

.wgf-snapshot__src {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--wgf-muted);
}

.wgf-snapshot__rel {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  color: var(--wgf-text);
  cursor: help; /* exact UTC is in the title tooltip */
}

.wgf-snapshot__scope {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--wgf-muted);
}

/* ── STATES ──────────────────────────────────────────────────────────────────
   fresh:   green seal + "Live · Verified price"  (the default people see)
   offline: muted hollow seal + "Last verified <age>" / "No live data" (rare outage) */
.wgf-snapshot--fresh { border-left-color: var(--wgf-up); }
.wgf-snapshot--fresh .wgf-snapshot__seal { background: rgba(var(--wgf-up-rgb), 0.16); color: var(--wgf-up); }
.wgf-snapshot--fresh .wgf-snapshot__label { color: var(--wgf-up); }

.wgf-snapshot--offline { border-left-color: var(--wgf-border-neutral); }
.wgf-snapshot--offline .wgf-snapshot__seal {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wgf-muted);
  color: var(--wgf-muted);
}
.wgf-snapshot--offline .wgf-snapshot__label { color: var(--wgf-muted); }
.wgf-snapshot--offline .wgf-snapshot__rel { color: var(--wgf-muted); font-style: italic; }

/* ── COMPACT — inline, no box. The one-badge-per-card header form. ─────────────
   seal + trust word + age; source/scope are in the aria-label, not on screen. */
.wgf-snapshot--compact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: 0;
  max-width: none;
}
.wgf-snapshot--compact .wgf-snapshot__seal { width: 16px; height: 16px; }
.wgf-snapshot--compact .wgf-snapshot__seal svg { width: 10px; height: 10px; }
.wgf-snapshot--compact .wgf-snapshot__label { font-size: 0.66rem; }
.wgf-snapshot--compact .wgf-snapshot__rel { font-size: 0.8rem; color: var(--wgf-muted); }