/* data-sanity.css — the data-check banner (js/data-sanity.js).
   Deliberately LOUD on failure: bad data rendered as fact is the bug this exists
   to kill, so a FAIL must be impossible to scroll past. App tokens only. */

.ds-banner {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  background: var(--card, #fff);
  font-size: 14px;
  line-height: 1.45;
}
.ds-banner[hidden] { display: none !important; }

.ds-banner.is-fail {
  border-color: #d94a3d;
  background: linear-gradient(0deg, rgba(217, 74, 61, .07), rgba(217, 74, 61, .07)), var(--card, #fff);
  box-shadow: 0 2px 14px rgba(217, 74, 61, .16);
}
.ds-banner.is-warn {
  border-color: #d99b2b;
  background: linear-gradient(0deg, rgba(217, 155, 43, .07), rgba(217, 155, 43, .07)), var(--card, #fff);
}

.ds-head { display: flex; gap: 10px; align-items: flex-start; }
.ds-dot {
  flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
  background: #d99b2b;
}
.is-fail .ds-dot { background: #d94a3d; animation: ds-pulse 1.6s ease-in-out infinite; }
@keyframes ds-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 74, 61, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 74, 61, 0); }
}
@media (prefers-reduced-motion: reduce) { .is-fail .ds-dot { animation: none; } }

.ds-headtext { min-width: 0; }
.ds-title {
  font-weight: 700; letter-spacing: .01em;
  color: var(--ink, #1d1b19);
}
.is-fail .ds-title { color: #b03528; }
.ds-sub { margin-top: 2px; color: var(--muted, #6b6560); font-size: 13px; }

.ds-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ds-item {
  padding: 9px 11px; border-radius: 10px;
  background: var(--bg, rgba(0, 0, 0, .03));
  border-left: 3px solid #d99b2b;
}
.ds-item.ds-err { border-left-color: #d94a3d; }

.ds-where {
  font-weight: 650; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink, #1d1b19); margin-right: 6px;
}
.ds-when { font-size: 12px; color: var(--muted, #6b6560); margin-right: 6px; }
.ds-tag {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 7px; border-radius: 999px;
  background: #d94a3d; color: #fff; margin-right: 6px; vertical-align: 1px;
}
.ds-msg { display: block; margin-top: 3px; color: var(--ink, #1d1b19); font-size: 13px; }

.ds-foot {
  margin-top: 10px; font-size: 11px; color: var(--muted, #6b6560);
  font-variant-numeric: tabular-nums;
}