/* ProofCard: one proof, as a bordered card on the surface colour with the card radius, as the
   snapshot draws its cards. It wears the same surface and hairline a Panel does rather than reusing
   it, because what goes inside is fixed here and a Panel's slots are not. */
.proof-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proof-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.proof-card-number {
  margin: 0;
  font-size: var(--text-md);
}

/* When it was decided, beside the chip that says what it was decided to. */
.proof-card-decided {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Who posted it and when, on one quiet line under the number. */
.proof-card-who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Whatever the page puts underneath: the customer's two buttons, staff's controls. Separated by a
   hairline so the card's own content ends somewhere visible. */
.proof-card-beneath {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.proof-card > :first-child {
  margin-top: 0;
}

.proof-card > :last-child {
  margin-bottom: 0;
}

/* ---- the small form: a thumbnail and a caption, as the snapshot draws the proofs beside
   "Design — out with the customer" ---- */
.proof-card-small {
  width: var(--proof-small-width);
  padding: 0;
  gap: 0;
  border-radius: var(--radius-chip);
  overflow: hidden;
}

/* The artwork, or — for a proof that carried none — the hatch the snapshot draws in its place. */
.proof-card-art {
  height: var(--proof-small-art);
  background: repeating-linear-gradient(
    135deg,
    var(--color-line) 0 var(--hairline),
    transparent var(--hairline) var(--space-3)
  );
}

.proof-card-art-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-surface);
}

.proof-card-caption {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-meta);
  overflow-wrap: anywhere;
}

.proof-card-small > .proof-card-beneath {
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-top: 0;
}

/* A quiet link under a small card wraps inside the card rather than running out of it. */
.proof-card-small > .proof-card-beneath .button-quiet {
  white-space: normal;
  text-align: left;
  line-height: var(--leading-section);
}