/* mix-case.css · S5 the receipt register: exhibit cards + dated receipt rows
 * for /case-studies (Mix spec #s5, phase V3; mockup B's evidence voice).
 *
 * Prefix: mxc- (this sheet owns it). Tokens only: the exhibits live on the
 * warm canvas (they are records, not product windows, so no obsidian here).
 * The red still-behind treatment uses the semantic --error token; the
 * verified stamp uses --ok. ?v= date bump on every edit (house law). */

/* ---- The hero ----------------------------------------------------------- */
.mxc-hero {
  padding: 148px var(--pad) clamp(40px, 6vw, 72px);
  background: var(--paper);
}
.mxc-hero .section-head { max-width: 760px; }
.mxc-kicker { color: var(--error); }

/* ---- The exhibit file --------------------------------------------------- */
.mxc-file {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: clamp(20px, 4vw, 44px);
}
.mxc-file-tab {
  display: inline-block;
  margin-bottom: var(--s-5);
  padding: 5px 14px;
  background: var(--forest);
  color: #fff;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mxc-exhibit + .mxc-exhibit {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px dashed var(--line-2);
}
.mxc-exno {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.mxc-exhibit h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: var(--s-2) 0 var(--s-1);
}
.mxc-src {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.mxc-story { max-width: 62ch; color: var(--muted); }

/* Receipt rows: date · verbatim reading · flag */
.mxc-rows {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.mxc-row {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.mxc-row p { margin: 0; }
.mxc-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.mxc-flag {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--ok);
  color: var(--ok);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* The honest losing lines, printed in red (the mockup B credibility move) */
.mxc-behind p { color: var(--error); }
.mxc-behind .mxc-flag {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-bg);
}

/* The stamp */
.mxc-stamp {
  display: inline-block;
  margin-top: var(--s-5);
  padding: 3px 12px;
  transform: rotate(-3deg);
  border: 2px solid var(--ok);
  border-radius: 4px;
  color: var(--ok);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---- Mobile (375px works) ----------------------------------------------- */
@media (max-width: 560px) {
  .mxc-hero { padding-top: 120px; }
  .mxc-row { grid-template-columns: 1fr; gap: 4px; }
  .mxc-flag { justify-self: start; }
}