/* ============================================================================
   The evidence legend.

   One visual syntax for the states this system actually has, so the same
   vocabulary works in the product, in documentation, and in a newsletter
   figure. This is the piece that comes from the operating model rather than
   from interface fashion.

   Seven states. The ideation warned that the legend must stay small or it
   becomes a compliance manual, so seven is a ceiling and not a starting point.

   Two systems, kept apart. Signals say where something came from. States say
   whether it is healthy. Without that division the legend and the token file
   contradict each other, because --state-warn is deliberately not one of the
   five approved palette values.

   Every state carries a SHAPE as well as a colour, so the legend survives
   monochrome and never relies on colour alone to carry meaning.

   State            Carrier colour       Shape
   ---------------  -------------------  --------------------------------
   source           --signal-source      filled square
   join             --ink-join           two forms meeting at a point
   current          --state-good         filled circle
   stale            --state-warn         circle with a gap
   drift            --state-error        two offset bars
   unverified       --ink-quiet          dashed open square
   approved         --ink                square with a notch removed

   Markers are graphical, not text, so the bar is 3:1. Every carrier above
   clears 4.5:1 on every ground anyway.
   ========================================================================= */

.ev {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-quiet);
  white-space: nowrap;
}

.ev::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  display: block;
}

/* --- Provenance: where a thing came from --------------------------------- */

/* source: this came from a named place. */
.ev--source        { color: var(--signal-source); }
.ev--source::before{ background: var(--signal-source); }

/* join: two sources were reconciled here. Black appears only where the
 * structure joins or grounds, per the brand lock.
 *
 * A cross, not a chevron. The chevron form read as a letter A at nine pixels,
 * which is the same misreading the B4 logo sprint recorded against its own
 * candidates. Two axes meeting at one point says "joined" without resembling
 * type in any alphabet. */
.ev--join        { color: var(--ink); }
.ev--join::before{
  background: var(--ink-join);
  clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%,
                     60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%);
}

/* --- Condition: whether a thing is healthy ------------------------------- */

/* current: checked, and inside its freshness window. */
.ev--current        { color: var(--state-good); }
.ev--current::before{ background: var(--state-good); border-radius: var(--radius-pill); }

/* stale: past its freshness window.
 *
 * A ring against current's filled disc. Two earlier forms were rejected on the
 * specimen: a gapped ring read as a letter C, and a half filled disc collapsed
 * into current at ten pixels, which is the size it actually ships at. Hollow
 * against solid is the one distinction in the circle family that still reads
 * that small, in colour and in grayscale. */
.ev--stale        { color: var(--state-warn); }
.ev--stale::before{
  border: 2px solid var(--state-warn);
  border-radius: var(--radius-pill);
  background: transparent;
}

/* drift: conflicts with newer evidence. Two bars that no longer line up. */
.ev--drift        { color: var(--state-error); }
.ev--drift::before{
  background: var(--state-error);
  clip-path: polygon(0 0, 60% 0, 60% 40%, 100% 40%, 100% 100%, 40% 100%, 40% 60%, 0 60%);
}

/* unverified: no checkable source. This is the protected member of the
 * legend and it cannot be cut.
 *
 * Every other state asserts something positive. None of them says the system
 * does not know. For a product whose decisive test is whether it can be wrong
 * on its own and know it, unknown is the most important state in the
 * vocabulary and the most common one in early use, when most context is still
 * unmapped. It is the absence of a checkable source, not a negative judgment,
 * so it takes quiet ink and an open shape rather than a warning colour. */
.ev--unverified        { color: var(--ink-quiet); }
.ev--unverified::before{
  border: 1px dashed var(--ink-quiet);
  background: transparent;
}

/* --- Authorship ---------------------------------------------------------- */

/* approved: a human accepted it. In v1 a human approves every output, so this
 * is the state that closes the loop. */
.ev--approved        { color: var(--ink); }
.ev--approved::before{
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%, 45% 55%, 0 55%);
}

/* --- Legend block -------------------------------------------------------- */
.ev-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}