/* The receipt's own language (blocks/loop.md, G3). Everything else on the site speaks Instrument Sans on yellow. A
   receipt is the only thing printed on cool white paper with a torn top and bottom edge, in IBM Plex Mono, in
   lowercase keys and values like the signed JSON it comes from, and marked only in the signal code: pass green,
   fail red. Every receipt (the homepage's specimen, the two on /evidence and /demo, the room's on /trust) uses it. */
.rcpt{--paper:#fbfbf7;--rink:#17171a;--rmute:#5c5c62;--rline:#dadad4;position:relative;width:100%;max-width:36rem;margin:12px 0;padding:26px clamp(18px,2.4vw,30px) 28px;background:var(--paper);color:var(--rink);font:400 14px/1.6 var(--mono);letter-spacing:0;text-transform:none;filter:drop-shadow(0 22px 28px rgb(0 0 0 / .22))}
.rcpt::before,.rcpt::after{content:"";position:absolute;left:0;right:0;height:8px;background-size:16px 8px;background-repeat:repeat-x}
.rcpt::before{top:-8px;background-image:conic-gradient(from 135deg at 50% 0,var(--paper) 90deg,#0000 0)}
.rcpt::after{bottom:-8px;background-image:conic-gradient(from -45deg at 50% 100%,var(--paper) 90deg,#0000 0)}
.rcpt *{font:inherit;margin:0;padding:0;list-style:none}
.rcpt a,.rcpt button{color:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.rcpt .rh{display:flex;justify-content:space-between;gap:12px;font-weight:500}
.rcpt .rm{color:var(--rmute)}
.rcpt .rule{margin:14px 0;border-top:1px dashed var(--rline)}
.rcpt dl>div,.rcpt .rk>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:12px;padding:1px 0}
.rcpt dt{color:var(--rmute)}
.rcpt dd{overflow-wrap:anywhere}
.rcpt ol>li{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;column-gap:10px;align-items:start;padding:7px 0;border-bottom:1px dashed var(--rline)}
.rcpt ol>li:first-child{border-top:1px dashed var(--rline)}
.rcpt small{display:block;color:var(--rmute);font-size:12.5px}
.rcpt .act{grid-column:2 / -1;color:var(--rmute)}
/* the signal code: a block of colour with the word in lowercase, nothing else */
.rcpt .v{display:inline-block;min-width:5.6em;padding:1px 8px;text-align:center;font-weight:500;color:#fbfbf7;background:var(--rmute)}
.rcpt .v.pass{background:#0b7148}
.rcpt .v.fail{background:#8a1538}
.rcpt .v.big{min-width:0;padding:3px 12px;font-size:16px}
.rcpt .out{margin-top:6px;color:var(--rmute)}
.rcpt .out .good{color:#0b7148}.rcpt .out .bad{color:#8a1538}
/* pinned notes: a small number printed in the receipt's margin, answered by a note beside it (glyphic.bio's specimen
   labels). The number is a pseudo-element, so it is not part of the receipt's text */
.rcpt [data-pin]{position:relative}
.rcpt [data-pin]::after{content:attr(data-pin);position:absolute;right:calc(-1 * clamp(18px,2.4vw,30px) - 13px);top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--sun,#e9c44a);color:#1d1b12;font:500 12px/22px var(--f,sans-serif);text-align:center}
@media (max-width:860px){
  .rcpt:has([data-pin]){padding-right:44px}
  .rcpt [data-pin]::after{right:-36px}
}