/* ==========================================================================
   TRUST_LAYER.CSS — Apex Nexus / Nova Bastion
   Freshness badges, trust bar, news trust tags, loading states.
   ========================================================================== */

/* ---- Freshness Badges ---- */
.freshness-badge,
.freshness-badge-slot {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18em 0.5em;
  border-radius: 4px;
  line-height: 1.3;
  vertical-align: middle;
  text-transform: uppercase;
}

.freshness--live {
  color: #06d6a0;
}
.freshness-badge.freshness--live,
.freshness-badge-slot.freshness--live {
  background: rgba(6, 214, 160, 0.15);
  color: #06d6a0;
  border: 1px solid rgba(6, 214, 160, 0.3);
}

.freshness--recent {
  color: #ffd166;
}
.freshness-badge.freshness--recent,
.freshness-badge-slot.freshness--recent {
  background: rgba(255, 209, 102, 0.12);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.3);
}

.freshness--stale {
  color: #ef476f;
}
.freshness-badge.freshness--stale,
.freshness-badge-slot.freshness--stale {
  background: rgba(239, 71, 111, 0.12);
  color: #ef476f;
  border: 1px solid rgba(239, 71, 111, 0.3);
}

.freshness--unknown {
  color: #7b8794;
}
.freshness-badge.freshness--unknown,
.freshness-badge-slot.freshness--unknown {
  background: rgba(123, 135, 148, 0.1);
  color: #7b8794;
  border: 1px solid rgba(123, 135, 148, 0.25);
}

.freshness-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
}

.freshness-reltime {
  color: var(--text-secondary, #b0b3b8);
  font-size: 0.75rem;
}

/* ---- System Trust Bar ---- */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  color: var(--text-secondary, #b0b3b8);
  background: rgba(10, 10, 25, 0.6);
  border-bottom: 1px solid var(--border, rgba(45, 45, 68, 0.5));
  flex-wrap: wrap;
  min-height: 1.6rem;
}

.trust-bar__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7b8794;
  flex-shrink: 0;
}
.trust-bar__dot.freshness--live { background: #06d6a0; box-shadow: 0 0 4px rgba(6,214,160,0.5); }
.trust-bar__dot.freshness--recent { background: #ffd166; }
.trust-bar__dot.freshness--stale { background: #ef476f; }

.trust-bar__status {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.trust-bar__sep {
  color: rgba(123, 135, 148, 0.4);
}

.trust-bar__hint {
  color: var(--text-muted, #636e78);
  font-style: italic;
}

/* ---- News Trust Tags ---- */
.news-trust-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.12em 0.4em;
  border-radius: 3px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.news-trust-tag--verified {
  background: rgba(6, 214, 160, 0.12);
  color: #06d6a0;
  border: 1px solid rgba(6, 214, 160, 0.25);
}
.news-trust-tag--context {
  background: rgba(255, 209, 102, 0.1);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.25);
}
.news-trust-tag--stale {
  background: rgba(239, 71, 111, 0.1);
  color: #ef476f;
  border: 1px solid rgba(239, 71, 111, 0.25);
}
.news-trust-tag--fallback {
  background: rgba(123, 135, 148, 0.08);
  color: #7b8794;
  border: 1px solid rgba(123, 135, 148, 0.2);
}

/* ---- Skeleton Loaders ---- */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem 0;
}
.skeleton-bar {
  height: 0.85rem;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(45,45,68,0.3) 25%, rgba(45,45,68,0.5) 50%, rgba(45,45,68,0.3) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-bar--wide { width: 90%; }
.skeleton-bar--med { width: 60%; }
.skeleton-bar--short { width: 35%; }

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Stale Warning Banner ---- */
.stale-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  color: #ef476f;
  background: rgba(239, 71, 111, 0.06);
  border: 1px solid rgba(239, 71, 111, 0.15);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

/* ---- Dashboard Panel Stale Banner ---- */
.panel-stale-banner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.06);
  border: 1px solid rgba(255, 209, 102, 0.15);
  border-radius: 6px;
  margin-bottom: 0.65rem;
  line-height: 1.4;
}
.panel-stale-banner--archived {
  color: var(--muted, #7b8794);
  background: rgba(123, 135, 148, 0.06);
  border-color: rgba(123, 135, 148, 0.15);
}

/* ---- Stale alert card dimming ---- */
.alert-card--stale {
  opacity: 0.65;
}
.alert-card--stale .alert-card__time::after {
  content: " · ARCHIVED";
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted, #7b8794);
}

/* ---- Stale log feed state ---- */
.log-feed--stale .log-entry {
  opacity: 0.6;
}

/* ---- Card Freshness Row ---- */
.card-freshness {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

/* ---- Alert Card Improvements ---- */
.sn-card__freshness {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
}

/* ---- Loading State Text ---- */
.syncing-text {
  text-align: center;
  color: var(--text-secondary, #b0b3b8);
  padding: 1.5rem 1rem;
  font-size: 0.88rem;
}
.syncing-text::before {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid rgba(6, 214, 160, 0.3);
  border-top-color: #06d6a0;
  border-radius: 50%;
  animation: spin-subtle 0.8s linear infinite;
  margin-right: 0.4rem;
  vertical-align: middle;
}
@keyframes spin-subtle {
  to { transform: rotate(360deg); }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .trust-bar {
    font-size: 0.65rem;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
  }
  .trust-bar__hint { display: none; }
  .freshness-badge,
  .freshness-badge-slot {
    font-size: 0.58rem;
    padding: 0.1em 0.35em;
  }
  .freshness-inline {
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  .news-trust-tag {
    font-size: 0.56rem;
    padding: 0.1em 0.3em;
  }
  .sn-card__freshness {
    flex-wrap: wrap;
  }
  .card-freshness {
    flex-wrap: wrap;
  }
}