/* ============================================================
   CLEAR SKIES PROJECT — EVIDENCE UI
   evidence.css

   The signature component set. Two DISTINCT badge systems +
   the evidence card + the "best available" tag. Brutalist
   language: flat fills, hard 2–3px offset shadow, sharp corners,
   Space Mono uppercase labels.

   CRITICAL RULE — never signal by color alone.
   Every badge renders COLOR + GLYPH + TEXT LABEL. Markup:
     <span class="badge badge--documented">
       <span class="badge__glyph" aria-hidden="true">✓</span>DOCUMENTED
     </span>

   Requires colors_and_type.css (tokens) loaded first.
   ============================================================ */

/* ---------- BADGE (shared base for BOTH systems) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  padding: .5em .7em;
  border-radius: 0;                       /* brutalist: sharp */
  box-shadow: 2px 2px 0 var(--ink);       /* hard offset — NOT a button (buttons carry a 2px border) */
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.badge__glyph {
  font-size: 1.05em;
  line-height: 1;
  transform: translateY(.02em);
}

/* — CLAIM-CONFIDENCE — grades a specific claim — */
.badge--documented     { background: var(--c-documented);     color: #fff; }
.badge--contested      { background: var(--c-contested);      color: var(--ink); }   /* amber → ink text (AA) */
.badge--unverified     { background: var(--c-unverified);     color: #fff; }
.badge--unsupported    { background: var(--c-unsupported);    color: #fff; }
.badge--misinformation { background: var(--c-misinformation); color: #fff; }

/* — INVESTIGATION-STATUS — where OUR work stands (a lifecycle) — */
.badge--open          { background: var(--s-open);          color: #fff; }
.badge--investigating { background: var(--s-investigating); color: #fff; }
.badge--published     { background: var(--s-published);     color: #fff; }
.badge--legal         { background: var(--s-legal);         color: #fff; }

/* press: collapse the offset (stamp). Disabled under reduced-motion via tokens file. */
.badge:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* ---------- EVIDENCE CARD (the signature component) ----------
   CONTENT RULE: a card with NO cited source must not render. That rule is
   the brand — enforce it where cards are generated (see Investigations.jsx). */
.evidence-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-hard);          /* 6px 6px 0 ink — signature elevation */
  padding: 22px 24px 20px;
  max-width: 560px;
}
.evidence-card__top,
.evidence-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.evidence-card__date {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.evidence-card__claim {
  font-family: var(--font-display);
  font-weight: var(--w-x);
  font-size: var(--t-lg);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.evidence-card__summary {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.evidence-card__source {
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  border-top: var(--rule-hair);
  border-bottom: var(--rule-hair);
  padding: 10px 0;
  word-break: break-word;
}
.evidence-card__source .k {                 /* the "Source:" key */
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.evidence-card__source a {
  color: var(--azure);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.evidence-card__source a:hover { color: var(--azure-deep); }
.evidence-card__action {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--azure-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
}
.evidence-card__action:hover { color: var(--ink); }
.evidence-card__action .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.evidence-card__action:hover .arrow { transform: translateX(3px); }

/* ---------- "BEST AVAILABLE" TAG ----------
   Marks the current leading explanation as PROVISIONAL — defeasible, can be
   dethroned by better evidence. Dashed border encodes the "for now". */
.best-available {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dawn-ink);
  background: var(--dawn-soft);
  border: 1.5px dashed var(--ink);
  border-radius: 0;
  padding: .45em .7em;
  line-height: 1;
}
.best-available__glyph { font-size: 1.05em; line-height: 1; transform: translateY(.02em); }