/* ProofVignette — one dramatized field vignette per view (S80 dark single-accent).
 * One big statement number per view; differentiation by SCALE + weight + motion,
 * not hue. Lime only on the small layer tag. Illustrative field patterns (framed
 * as such in markup). data-layer feeds the SignalProbe dwell attribution.
 * Canonical: components/primitives/ProofVignette/ProofVignette.css */

.vignette {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: var(--content-max);
  margin: 0 auto;
  padding-block: var(--space-section);
  border-top: 1px solid var(--hairline);
}
.vignette:first-of-type { border-top: 0; }

.vignette__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--lime);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.vignette__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--lime);
  display: inline-block;
}

.vignette__stat {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  color: var(--text);
}

.vignette__line {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--text-2);
}
.vignette__note {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.04em;
}

@media (min-width: 900px) {
  .vignette {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    column-gap: var(--space-2xl);
  }
  .vignette__tag { grid-column: 1; }
  .vignette__stat { grid-column: 1; grid-row: 2; }
  .vignette__body { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; gap: var(--space-md); }
}