/* ==========================================================================
   system-receipt.css — the proof layer's look, shared by every Studio.

   Pairs with system-receipt.js. Styled for a light host surface (the cream
   sheet a room answers on); a future dark-surfaced Studio adds
   `.sr-receipt--dark`. The block is a quiet disclosure at rest — it must never
   compete with the finding above it (Constitution 4.5). It only becomes
   fixed-width, dense, and technical once the reader opens it.
   ========================================================================== */

.sr-receipt {
  --sr-ink: #2a1d16;
  --sr-ink-soft: rgba(42, 29, 22, 0.6);
  --sr-hair: rgba(42, 29, 22, 0.14);
  --sr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  margin: 4px 0 0;
}

.sr-receipt__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 4px 0 0;
  border: 0;
  background: transparent;
  color: var(--sr-ink-soft);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.28s var(--sr-ease);
}

.sr-receipt__head:hover { color: var(--sr-ink); }

.sr-receipt__head svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.34s var(--sr-ease);
}

.sr-receipt.is-open .sr-receipt__head svg { transform: rotate(90deg); }

.sr-receipt__label {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sr-receipt__meta {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(42, 29, 22, 0.4);
}

.sr-receipt__meta::before {
  content: "·";
  margin-right: 8px;
  color: rgba(42, 29, 22, 0.3);
}

/* Collapsed by default — grid-rows 0fr→1fr is the only height animation that
   works without measuring, and it degrades cleanly under reduced motion. */
.sr-receipt__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--sr-ease);
}

.sr-receipt.is-open .sr-receipt__panel { grid-template-rows: 1fr; }

.sr-receipt__clip {
  overflow: hidden;
  min-height: 0;
}

.sr-receipt__pre {
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--sr-hair);
  border-radius: 12px;
  background: rgba(42, 29, 22, 0.035);
  color: var(--sr-ink);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px;
  line-height: 1.55;
  /* Mobile overflow guard — a fixed-width block must wrap, never scroll the
     page sideways (mirrors the chat receipt's guarantee). */
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.sr-receipt__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--sr-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--sr-ink-soft);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.28s var(--sr-ease), border-color 0.28s var(--sr-ease), background 0.28s var(--sr-ease);
}

.sr-receipt__copy svg { width: 13px; height: 13px; display: block; }
.sr-receipt__copy:hover { color: var(--sr-ink); border-color: rgba(42, 29, 22, 0.26); }
.sr-receipt__copy.is-done { color: var(--sr-ink); border-color: rgba(42, 29, 22, 0.26); }

.sr-receipt__head:focus-visible,
.sr-receipt__copy:focus-visible {
  outline: 1px solid rgba(42, 29, 22, 0.7);
  outline-offset: 2px;
}

/* ── Dark host (future Studios that answer in their own dark) ─────────────── */
.sr-receipt--dark {
  --sr-ink: rgba(255, 255, 255, 0.92);
  --sr-ink-soft: rgba(255, 255, 255, 0.56);
  --sr-hair: rgba(255, 255, 255, 0.14);
}

.sr-receipt--dark .sr-receipt__pre { background: rgba(255, 255, 255, 0.04); }
.sr-receipt--dark .sr-receipt__meta,
.sr-receipt--dark .sr-receipt__meta::before { color: rgba(255, 255, 255, 0.38); }
.sr-receipt--dark .sr-receipt__head:focus-visible,
.sr-receipt--dark .sr-receipt__copy:focus-visible {
  outline-color: rgba(255, 255, 255, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .sr-receipt__panel,
  .sr-receipt__head svg { transition-duration: 0.01ms; }
}