/* ═══════════════════════════════════════════════════════════════════════════════
   THE EXHIBIT                                                        26 Aug 2026
   "Nothing here was written without a call behind it."
   ═══════════════════════════════════════════════════════════════════════════════
   One object, defined once, used wherever the product makes a claim it has to back:
   plate 04's deal record uses it twice on a single screen, and every later plate
   that shows a buyer's sentence uses this rather than drawing its own.

   The shape, top to bottom, and each part is load-bearing:
     EXHIBIT tab · where and when   the provenance, before the claim
     the claim, in serif            what the call established
     — the gloss, in ink-2          why that counts, in ordinary words
     THE PASSAGE, AS RECORDED       the eyebrow that separates claim from evidence
     Rep / Buyer, in mono           the transcript, verbatim, unstyled
     the cited line, highlighted    the sentence the claim rests on
     ● state · time · Open the call the footer strip, so the source is one click away

   TWO FACES DO THE ARGUING, and this is plate 07's rule rather than a preference:
   "Mono is the passage as recorded; the serif is the sentence being cited." The
   mono is evidence; the serif is the claim drawn from it. A reader can tell which
   is which without reading either.

   IT SITS ON THE RECESSED PLANE. Plate 04's review note is explicit about why —
   the correction and its proof have to "read as one object", so the exhibit sinks
   INTO the card that makes the claim rather than floating as a second card on top
   of it. --plane-footnote is `none` for exactly this reason: a footnote does not
   cast a shadow.
   ═══════════════════════════════════════════════════════════════════════════════ */

.ex { background:var(--recessed); border:1px solid var(--line); border-radius:var(--r-card);
      box-shadow:var(--plane-footnote); overflow:hidden; }

/* THE STAMP. Tab left, provenance right — the same object as the drawer's, and the
   same order: what kind of thing this is, then where it came from. */
.ex-stamp { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
            padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); }
.ex-tab { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
          text-transform:uppercase; color:var(--ink-2); background:var(--surface);
          border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 8px; }
.ex-where { font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
            text-transform:uppercase; color:var(--ink-3); text-align:right;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ex-body { padding:var(--sp-4) var(--sp-5) var(--sp-4); }

/* THE CLAIM. Serif, because it is the sentence being cited rather than the record.
   The gloss beside it is the plain-words version — "the buyer accepted it out loud"
   — and it is ink-2 so the claim reads first and the reason reads second. */
.ex-claim { font-family:var(--face-serif); font-size:var(--fs-quote); line-height:var(--lh-quote);
            color:var(--ink); margin:0; }
/* THE GLOSS WRAPS. It was nowrap, sized for the plate's short "the buyer accepted it
   out loud" — and then it became the place a dimension's summary goes, which runs to
   "Need confirmed: manual call notes cost the team hours weekly" and ran straight out
   of the card. A rule that only holds for the sentence it was drawn against is not a
   rule. */
.ex-gloss { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
            color:var(--ink-2); font-weight:400; }
/* IN A NARROW COLUMN IT TAKES ITS OWN LINE. Trailing a 13px sans clause off the end of
   a 27px serif claim reads fine while both fit on one line and badly the moment it
   breaks — on the sign-in screen at 375 it orphaned "out loud" under the claim, which
   looks like a rendering fault rather than a sentence. Below this width it becomes a
   sub-line, which is what it has always been. */
@media (max-width:600px){
  .ex-gloss { display:block; margin-top:4px; }
  .ex-claim { text-wrap:balance; }
}

/* THE CITED LINE — the buyer's own words, before the passage they came from. */
.ex-cited { font-family:var(--face-serif); font-style:italic; font-size:var(--fs-card);
            line-height:var(--lh-quote); color:var(--ink); margin:var(--sp-3) 0 0; }

.ex-passage-label { font-family:var(--face-ui); font-size:var(--fs-eyebrow);
                    letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
                    color:var(--ink-3); margin:var(--sp-4) 0 var(--sp-2); }

/* THE PASSAGE. Mono, 64px speaker gutter, and the cited line carries the tint. The
   highlight is --accent-weak rather than a state colour on purpose: it marks WHICH
   line is being cited, which is a reading aid, not a claim about the deal. Using a
   state colour here would put a second, contradictory state on the same block. */
.ex-line { display:grid; grid-template-columns:52px minmax(0,1fr); gap:var(--sp-3); padding:2px 0;
           font-family:var(--face-mono); font-size:var(--fs-mono); line-height:var(--lh-mono);
           color:var(--ink-2); }
.ex-who { color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ex-line.is-cited .ex-said { background:var(--accent-weak); color:var(--ink);
                             padding:2px 6px; margin:-2px -6px; border-radius:var(--r-pill); }

/* THE FOOTER STRIP. State on the left in its own tone, provenance and the way back
   on the right. It is a strip rather than a row of buttons because the exhibit is a
   thing you read, and the only action it offers is "show me the whole call". */
.ex-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
           flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line);
           background:var(--band); font-family:var(--face-ui); font-size:var(--fs-meta); }
.ex-state { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.ex-foot-right { display:inline-flex; align-items:center; gap:var(--sp-3); color:var(--ink-3);
                 font-variant-numeric:tabular-nums; }
.ex-open { font-family:var(--face-ui); font-size:var(--fs-meta); font-weight:600; color:var(--accent);
           background:none; border:0; padding:0; cursor:pointer; }
.ex-open:hover { text-decoration:underline; }
.ex-open:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-pill); }

/* PLATE 08 INSIDE THE EXHIBIT. "not set" and "no call on file" are two different
   absences and the plate is explicit that they must not collapse into one another,
   nor into an em dash. An exhibit with no passage says which fact is missing. */
.ex-none { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
           color:var(--ink-2); margin:var(--sp-3) 0 0; max-width:60ch; }