/* Invoice to ERP demo. Drawn on the page: type, hairlines, one accent. */
.ie {--ie-num:'Hanken Grotesk','Hanken Fallback',Arial,sans-serif}
.ie button {font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.ie button:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}

/* The invoice header and the counters */
.ie-head {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem clamp(3rem,6vw,7rem)}
.ie-sup {min-height:1.05em;font:400 clamp(2.3rem,4.6vw,4.8rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.ie-caret {display:none;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:ie-blink 1s steps(1) infinite}
.ie-sup.is-typing .ie-caret {display:inline-block}
@keyframes ie-blink {50%{opacity:0}}
.ie-meta {margin-top:1.1rem;font-size:1rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ie-meta b {font-weight:500;color:var(--ink)}
.ie-mono {font-family:'Martian Mono',monospace;font-size:.82em;letter-spacing:-.02em;color:var(--ink)}
.ie-next {margin-top:.35rem;font-size:.875rem;color:var(--ink-2);opacity:.8}

.ie-count {display:flex;gap:clamp(1.8rem,3.5vw,3.6rem);margin:0}
.ie-count div {display:flex;flex-direction:column-reverse;gap:.5rem;min-width:3.6ch}
.ie-count dt {font-size:.8125rem;line-height:1.3;color:var(--ink-2)}
.ie-count dd {margin:0;font:300 clamp(3.2rem,6vw,6.4rem)/.82 var(--ie-num);font-stretch:62%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ie-count-flag dd {color:var(--oxide)}
.is-tick {display:inline-block;animation:ie-tick .5s var(--ease)}
@keyframes ie-tick {from{opacity:.35;transform:translateY(-.14em)}to{opacity:1;transform:none}}

/* Stage: invoice lines, the check, the result */
.ie-stage {position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,.98fr);gap:clamp(2.5rem,4.5vw,5.5rem);margin-top:clamp(2.6rem,4.5vw,4rem);padding-top:clamp(1.8rem,3vw,2.4rem);border-top:1px solid var(--rule)}

.ie-lines {list-style:none;margin:0;padding:0;align-self:start}
.ie-lines li + li {border-top:1px solid var(--rule)}
.ie-line {display:grid;grid-template-columns:minmax(0,1fr) auto 3.4rem;column-gap:1rem;row-gap:.15rem;width:100%;padding:.62rem 0;transition:opacity .45s}
.ie-line .ie-desc {grid-column:1;font-size:1rem;line-height:1.3;color:var(--ink);transition:color .3s}
.ie-line .ie-code {grid-column:1;grid-row:2;font:400 .6875rem/1.6 'Martian Mono',monospace;letter-spacing:-.02em;color:var(--ink-2);transition:color .3s}
.ie-line .ie-qp {grid-column:2;grid-row:2;justify-self:end;font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ie-amt {font-variant-numeric:tabular-nums;color:var(--ink)}
.ie-line .ie-amt {grid-column:2;grid-row:1;justify-self:end}
.ie-line .ie-st {grid-column:3;grid-row:1/3;align-self:center;justify-self:end;font-size:.8125rem;color:var(--ink-2)}
.ie-line.is-read .ie-desc,.ie-line.is-read .ie-code {color:var(--oxide)}
.ie-line.is-posted {opacity:.42}
.ie-line.is-held .ie-st,.ie-line.is-held .ie-amt {color:var(--oxide)}
.ie-line.is-focus .ie-desc {text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:.25em}
.ie[data-phase="done"] .ie-line {cursor:pointer}
.ie[data-phase="done"] .ie-line:hover {opacity:1}
.ie-lines.is-drawing li {animation:ie-draw .6s var(--ease) both;animation-delay:calc(var(--n) * 70ms)}
.ie-lines.is-leaving li {animation:ie-leave .48s var(--ease) both;animation-delay:calc(var(--n) * 25ms)}
@keyframes ie-draw {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ie-leave {to{opacity:0;transform:translateY(-14px)}}

/* The check: one line, both records side by side */
.ie-match {align-self:start;min-height:20rem}
.ie-m-name {font:300 clamp(1.9rem,2.7vw,2.8rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.01em;color:var(--ink);transform-origin:left top}
.ie-m-src {margin-top:.6rem;font-size:.8125rem;color:var(--ink-2)}
.ie-grid {display:grid;grid-template-columns:auto minmax(0,1fr) 2rem minmax(0,1fr);margin-top:1.4rem}
.ie-grid > span {display:flex;align-items:flex-end;padding:.55rem .9rem .55rem 0;border-top:1px solid var(--rule)}
.ie-grid > span:nth-child(4n) {padding-right:0}
.ie-grid > span:nth-child(-n+4) {padding-top:0;border-top:0}
.ie-col {font-size:.8125rem;color:var(--ink-2)}
.ie-k {gap:.3em;font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.ie-k i {font-style:normal;opacity:.7}
.ie-a,.ie-b {white-space:nowrap;font:400 1.3rem/1.1 var(--ie-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.ie-grid > .ie-eq,.ie-grid > span:nth-child(3) {padding-right:0}
.ie-eq {justify-content:center;color:var(--ink-2);opacity:.6}
.ie-grid .is-diff {color:var(--oxide);opacity:1}
.ie-verdict {margin-top:1.4rem;max-width:30ch;font:400 1.15rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink-2)}
.ie-verdict.is-flag {color:var(--ink)}
.ie-match.is-in > * {animation:ie-in .55s var(--ease) both}
.ie-match.is-in > .ie-m-src {animation-delay:.04s}
.ie-match.is-in > .ie-grid {animation-delay:.08s}
.ie-match.is-in > .ie-verdict {animation-delay:.5s}
.ie-match.is-in .is-diff {animation:ie-flag .9s var(--ease) .35s both}
@keyframes ie-in {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ie-flag {from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Result: the ledger and the review queue */
.ie-out {align-self:start}
.ie-h {display:flex;justify-content:space-between;gap:1rem;padding-bottom:.65rem;font:500 .9375rem/1.3 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink)}
.ie-h-review {margin-top:clamp(2rem,3.5vw,2.8rem);color:var(--oxide)}
.ie-total {font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ie-ledger,.ie-review {list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ie-row {display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;column-gap:.8rem;padding:.45rem 0;font-size:.875rem;line-height:1.35;border-bottom:1px solid var(--rule)}
.ie-acct {color:var(--ink-2);font-variant-numeric:tabular-nums}
.ie-row .ie-rdesc {color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ie-row .ie-amt {font-size:.875rem}
.ie-sum .ie-rdesc,.ie-sum .ie-amt {font-weight:500}
.ie-review li {border-bottom:1px solid var(--rule)}
.ie-item {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;row-gap:.1rem;width:100%;padding:.7rem 0;line-height:1.35}
.ie-item .ie-rdesc {grid-column:1/-1}
.ie-item .ie-rdesc {font-size:.9375rem;color:var(--ink);transition:color .25s}
.ie-why {grid-column:1;font-size:.8125rem;color:var(--oxide)}
.ie-vals {grid-column:2;grid-row:2;font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.ie-item:hover .ie-rdesc {color:var(--oxide)}
.ie-item[aria-pressed="true"] .ie-rdesc {text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:.25em}
.is-arriving {opacity:0}
.ie-out .is-in {animation:ie-in .5s var(--ease) both}

/* A line's name travelling between steps */
.ie-ghost {position:absolute;z-index:3;margin:0;color:var(--oxide);white-space:nowrap;pointer-events:none;transform-origin:left top;animation:ie-fly .6s var(--ease) both}
@keyframes ie-fly {from{transform:none}to{transform:translate(var(--dx),var(--dy)) scale(var(--s,1))}}

@media(max-width:1180px){
 .ie-stage {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .ie-out {grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,4.5vw,5.5rem);grid-template-areas:"h1 h2" "l r"}
 .ie-out .ie-h:first-child {grid-area:h1}
 .ie-h-review {grid-area:h2;margin-top:0}
 .ie-ledger {grid-area:l;align-self:start}
 .ie-review {grid-area:r;align-self:start}
}
@media(max-width:900px){
 .ie-head {grid-template-columns:1fr;gap:1.8rem}
 .ie-stage {grid-template-columns:1fr;gap:2.4rem}
 .ie-out {display:block}
 .ie-h-review {margin-top:2rem}
 .ie-match {min-height:0}
}
@media(max-width:560px){
 .ie-count {gap:1.6rem}
 .ie-count dd {font-size:3rem}
 .ie-line {grid-template-columns:minmax(0,1fr) auto 3rem;column-gap:.7rem}
 .ie-grid > span {padding-right:.55rem}
 .ie-a,.ie-b {font-size:1.05rem}
}

.ie-grid .ie-mono {font-size:.74em;letter-spacing:-.03em;color:inherit}