/* The receipt page's signature: "A receipt, assembling". A draft receipt in the centre starts as an empty, ruled form
   and writes itself in, group by group, as the page scrolls; every hash settles on the real SHA-256 of the sample text
   shown beside it, and the receipt code presses into the corner once all five groups are in.
   Base rules below are the finished receipt (no script, reduced motion). receipt.js adds .is-live for the animation. */

.asm{position:relative;padding:clamp(72px,10vh,130px) 0 clamp(64px,9vh,120px)}
.asm-head{width:min(var(--wrap),100% - 2*var(--gut));margin:0 auto clamp(36px,5vh,60px)}
.asm-stage{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}

/* the document */
.asm-doc{position:relative;max-width:1080px;margin-inline:auto;background:var(--card);border-radius:22px;
  box-shadow:0 0 0 1px rgba(15,23,34,.08),0 40px 80px -40px rgba(15,23,34,.45);
  padding:clamp(20px,2.6vw,34px) clamp(18px,2.8vw,40px) clamp(18px,2.4vw,30px);font-family:var(--mono);font-size:13px;line-height:1.5}
.asm-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:3em;padding:0 7em 1em 0;border-bottom:1.5px solid var(--ink)}
.asm-id{color:var(--text-2);letter-spacing:.02em}
.asm-grp{padding:.85em 0 .95em;border-bottom:1px dashed #C9CBD0}
.asm-gk{font-size:.86em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:400;margin:0 0 .3em}
.asm-row{display:grid;grid-template-columns:minmax(7.4em,9.6em) minmax(0,1fr);gap:0 1em;padding:.32em 0;
  background:linear-gradient(#E4E4E6,#E4E4E6) left bottom/100% 1px no-repeat}
.asm-k{color:var(--text-3)}
.asm-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .9em;min-width:0}
.asm-x{color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.asm-x.hold-text{color:var(--hold-text)}
.asm-in{font-size:.84em;color:var(--text-3);overflow-wrap:anywhere}
.asm-js{display:none}
.js .asm-js{display:inline}
.asm.nokey .asm-js{display:none}

/* the explanation of each group */
.asm-note{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--text-2)}
.asm-note .h3{color:var(--ink);font-size:clamp(20px,1.6vw,25px);margin:0 0 6px}
.asm-num{font-family:var(--mono);font-size:12px;color:var(--text-3);margin:0 0 6px}

/* the progress line down the document's edge */
.asm-prog{position:absolute;left:-14px;top:22px;bottom:22px;width:2px;border-radius:2px;background:#DCDDE0;display:none}
.asm-prog i{position:absolute;inset:0;border-radius:inherit;background:var(--ink);transform-origin:50% 0;transform:scaleY(0);transition:background-color .6s var(--calm)}
.asm.signed .asm-prog i{background:var(--ok)}

/* the receipt code, pressed into the corner, and the signed line */
.asm-seal{position:absolute;top:-22px;right:-12px;width:clamp(84px,9vw,124px);aspect-ratio:1;border-radius:50%;background:var(--card);padding:7px;
  box-shadow:0 0 0 1px rgba(15,23,34,.1),0 14px 28px -12px rgba(15,23,34,.45),inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(15,23,34,.08);
  transform:rotate(-6deg);z-index:3}
.asm-seal:empty{display:none}
.asm-seal svg{width:100%;height:100%}
.asm-sign{display:none;padding-top:1em}
.asm.sealed .asm-sign{display:block}
.asm-said{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);line-height:1.4}
.asm-said:empty{display:none}
.asm-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:.5em}
.asm-sk{color:var(--text-3)}
.asm-sh{color:var(--ink)}
.asm-ok,.asm-fine{display:none}
.asm.signed .asm-ok{display:inline-flex}
.asm.signed .asm-fine{display:block}
.asm-fine{font-size:.92em;color:var(--text-3);margin-top:.35em}

/* finished receipt, wide screens: each group's explanation sits beside its fields */
@media (min-width:901px){
  .asm-grp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,64px)}
  .asm-gk,.asm-rows{grid-column:1;align-self:start}
  .asm-note{grid-column:2;grid-row:1/span 2;align-self:start;padding-top:.2em}
}
/* finished receipt, phones: the document fills the width and the explanation sits under each group */
@media (max-width:900px){
  .asm-stage{width:calc(100% - 24px)}
  .asm-doc{border-radius:18px;font-size:12.5px}
  .asm-row{grid-template-columns:minmax(6.6em,8.4em) minmax(0,1fr);gap:0 .7em}
  .asm-note{margin-top:.75em;padding:12px 14px;border-radius:12px;background:var(--page);font-size:15px}
  .asm-note .h3{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .asm-num{display:none}
  /* on phones the code presses into the bottom corner, next to the signed line, where the reader is */
  .asm-seal{top:auto;bottom:-20px;right:8px}
  .asm-sign{padding-right:clamp(84px,24vw,104px)}
  .asm-prog{left:-8px}
}

/* ====================================================================================================================
   Live: the receipt assembles. Labels first, then values; the explanation of the group being written shows.
   ==================================================================================================================== */
.asm.is-live .asm-prog{display:block}
.asm.is-live .asm-gk,.asm.is-live .asm-k{opacity:0;transform:translateY(.35em);transition:opacity .45s var(--calm),transform .6s var(--ease)}
.asm.is-live .asm-grp.lab .asm-gk,.asm.is-live .asm-grp.lab .asm-k{opacity:1;transform:none}
.asm.is-live .asm-grp.lab .asm-row .asm-k{transition-delay:calc(var(--i,0) * 70ms + 90ms)}
.asm.is-live .asm-in{opacity:0;transition:opacity .5s var(--calm)}
.asm.is-live .asm-row.wr .asm-in{opacity:1}
.asm.is-live .asm-x.typing::after{content:"";display:inline-block;width:.5em;height:1.05em;margin-left:1px;vertical-align:-.18em;background:var(--ink)}
.asm.is-live .asm-x.mixing{color:var(--text-3)}
.asm.is-live .asm-row{transition:background-color .5s var(--calm)}
.asm.is-live .asm-sign{display:block;opacity:1}
/* the signed line keeps its room from the start, so nothing moves when it arrives */
.asm.is-live .asm-said,.asm.is-live .asm-said:empty{display:block;min-height:1.4em}
.asm.is-live .asm-ok{display:inline-flex;visibility:hidden}
.asm.is-live.signed .asm-ok{visibility:visible}
.asm.is-live .asm-fine{display:block;visibility:hidden}
.asm.is-live.signed .asm-fine{visibility:visible}
.asm.is-live.pressed .asm-sign{opacity:1}
.asm.is-live .asm-seal{opacity:0;transform:rotate(-6deg) scale(1.3)}
.asm.is-live.pressed .asm-seal{opacity:1;transform:rotate(-6deg);animation:asm-press .62s cubic-bezier(.2,.9,.25,1) both}
.asm.is-live.pressed .asm-doc{animation:asm-thud .5s var(--ease) .26s both}
@keyframes asm-press{
  0%{opacity:0;transform:translate(14px,-18px) rotate(-18deg) scale(1.6)}
  55%{opacity:1;transform:translate(0,0) rotate(-5deg) scale(.93)}
  100%{opacity:1;transform:rotate(-6deg) scale(1)}
}
@keyframes asm-thud{0%{transform:none}35%{transform:translateY(3px) scale(.996)}100%{transform:none}}

/* phones, live: each group writes in as it reaches the reading line; its explanation follows under it */
@media (max-width:900px){
  .asm.is-live .asm-note{opacity:0;transform:translateY(8px);transition:opacity .5s var(--calm) .5s,transform .7s var(--ease) .5s}
  .asm.is-live .asm-grp.lab .asm-note{opacity:1;transform:none}
}

/* wide screens, live: the receipt pins in the centre of the screen while the page scrolls past it */
@media (min-width:901px){
  .asm.is-live{--docw:min(700px,44vw,100vw - 2 * var(--gut) - 380px);--notew:320px;padding-bottom:0}
  .asm.is-live .asm-run{min-height:calc(100vh + 420vh)}
  .asm.is-live .asm-stage{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));display:flex;align-items:center;width:min(var(--wrap),100% - 2 * var(--gut))}
  .asm.is-live .asm-doc{width:var(--docw);max-width:none;margin:0;font-size:clamp(10.8px,1.42vh,14.5px);padding:2.4em 2.6em 2em}
  .asm.is-live .asm-grp{display:flex;flex-direction:column;padding:.6em 0 .7em}
  .asm.is-live .asm-gk,.asm.is-live .asm-rows{align-self:stretch}
  .asm.is-live .asm-row{padding:.26em 0}
  .asm.is-live .asm-top{min-height:2.6em;padding-bottom:.8em}
  .asm.is-live .asm-seal{width:clamp(96px,11vh,128px);top:-14px;right:-22px}
  .asm.is-live .asm-prog{left:-20px;top:26px;bottom:26px}
  /* the explanation of the group being written, level with it, beside the document */
  .asm.is-live .asm-note{position:absolute;left:calc(100% + 56px);width:var(--notew);font-size:16.5px;
    opacity:0;transform:translateX(-12px);transition:opacity .45s var(--calm),transform .7s var(--ease);pointer-events:none}
  .asm.is-live .asm-note::before{content:"";position:absolute;right:calc(100% + 12px);top:.55em;width:34px;height:1.5px;background:var(--ink)}
  .asm.is-live .asm-grp.on .asm-note{opacity:1;transform:none;transition-delay:.12s}
  .asm.is-live .asm-grp.on{background:linear-gradient(90deg,rgba(15,23,34,.045),rgba(15,23,34,0) 70%);margin-inline:-1em;padding-inline:1em;border-radius:8px}
  .asm.is-live .asm-sign{padding-top:.8em}
  .asm.is-live .asm-said{font-size:clamp(14px,1.75vh,16.5px)}
}
@media (min-width:901px) and (max-width:1359px){
  .asm.is-live .asm-run{margin-top:clamp(8px,2vh,24px)}
  /* the receipt and its explanation, centred as a pair */
  .asm.is-live{--docw:min(620px,100vw - 2 * var(--gut) - 400px);--notew:min(320px,100vw - 2 * var(--gut) - var(--docw) - 64px)}
  .asm.is-live .asm-stage{justify-content:center}
  .asm.is-live .asm-doc{margin-right:calc(var(--notew) + 56px)}
}
/* very wide: the heading stays at the left while the receipt is made in the centre */
@media (min-width:1360px){
  .asm.is-live{--side:min(420px,calc((100vw - 20px - 2 * var(--gut) - var(--docw)) / 2 - 56px));--notew:var(--side)}
  .asm.is-live .asm-track{display:grid;grid-template-columns:1fr;grid-template-rows:1fr}
  .asm.is-live .asm-head{grid-area:1/1;position:sticky;top:calc(var(--nav) + 10vh);align-self:start;width:var(--side);margin:0 0 0 var(--gut);z-index:2}
  .asm.is-live .asm-head .h2{font-size:clamp(34px,2.7vw,52px)}
  .asm.is-live .asm-head .lead{font-size:17px;margin-top:18px}
  .asm.is-live .asm-run{grid-area:1/1}
  .asm.is-live .asm-stage{justify-content:center;width:100%}
}

/* v13 (31 Oct 2026): no cards and no drop shadows; the work stands on the canvas, divided by hairlines */
.asm-doc{box-shadow:0 0 0 1px rgba(15,23,34,.12);border-radius:2px}
.asm-seal{box-shadow:0 0 0 1px rgba(15,23,34,.12),inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(15,23,34,.08)}
@media (max-width:900px){.asm-doc{border-radius:2px}.asm-note{background:none;border-radius:0;padding:4px 0 4px 14px;border-left:2px solid var(--ink)}}
.asm{overflow-x:clip}
@media (max-width:900px){.asm.is-live .asm-seal{right:8px}}