/* Document extraction (includes/visuals/extract.php) */
.ex { container-type: inline-size; background: var(--paper); border-radius: var(--radius); padding: 24px 18px; padding: clamp(20px, 3vw, 40px) clamp(14px, 2.6vw, 36px); }
.section--paper .ex { background: var(--white); }
.ex-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ex-i { flex: none; width: 13px; height: 13px; }

/* ---------- the document (drawing) ---------- */
.ex-doc { position: relative; overflow: hidden; width: 100%; max-width: 400px; padding: 22px 22px 18px; border-radius: 4px; font-size: 12.5px; line-height: 1.35; color: var(--ink);
  background: linear-gradient(172deg, #fff 0, #fbfaf8 100%); box-shadow: 0 1px 2px rgba(12, 43, 21, .08), 0 14px 34px rgba(12, 43, 21, .13); transform: rotate(-1.2deg); }
.ex-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(150, 248, 120, 0) 55%, rgba(150, 248, 120, .22) calc(100% - 3px), var(--green-2) calc(100% - 3px)); }
.ex-doc-top { display: flex; justify-content: space-between; gap: 14px; }
.ex-from { display: grid; gap: 7px; align-content: start; justify-items: start; min-width: 0; flex: 1; }
.ex-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--sage); }
.ex-meta { display: grid; gap: 6px; justify-items: end; align-content: start; text-align: right; }
.ex-doc-t { font-family: var(--font-serif); font-size: 23px; line-height: 1; color: var(--forest); margin-bottom: 4px; }
.ex-k { color: var(--ink-2); margin-right: 3px; }
.ex-sk { display: block; height: 6px; border-radius: 3px; background: #e7e3dd; }
.ex-sk--60 { width: 70%; } .ex-sk--45 { width: 52%; } .ex-sk--30 { width: 34%; } .ex-sk--70 { width: 78%; }
.ex-sk--55 { width: 60%; } .ex-sk--62 { width: 68%; } .ex-sk--80 { width: 84%; } .ex-sk--50 { width: 56%; }
.ex-lines { display: grid; gap: 9px; margin: 22px 0 14px; }
.ex-line { display: grid; grid-template-columns: minmax(0, 1fr) 12% 18%; gap: 12px; }
.ex-line .ex-sk--qty, .ex-line .ex-sk--amt { width: 100%; }
.ex-line--h { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ex-line--h .ex-sk { background: #cfc9c0; }
.ex-totals { display: grid; gap: 5px; width: 64%; margin-left: auto; }
.ex-totals > span { display: flex; justify-content: space-between; gap: 10px; }
.ex-ttc { padding-top: 5px; border-top: 1px solid var(--ink); font-weight: 700; }
.ex-ttc .ex-k { color: var(--ink); }
.ex-due { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; }
.ex-hand { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--forest-2); transform: rotate(-5deg) translateY(-3px); border-bottom: 1.5px solid var(--forest-2); border-radius: 0 0 40% 60%; padding: 0 4px; }
.ex-foot { display: grid; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* highlighted fields on the document */
.ex-f { position: relative; display: inline-flex; align-items: baseline; padding: 1px 5px; margin: -1px -5px; border-radius: 4px; background: rgba(150, 248, 120, .25); box-shadow: 0 0 0 1.5px var(--green-2); font-weight: 600; }
.ex-from .ex-f { font-size: 13.5px; color: var(--forest); }
.ex-f7 { background: rgba(12, 43, 21, .06); box-shadow: none; outline: 1.5px dashed var(--forest); outline-offset: 0; }
.ex-doc .ex-n { position: absolute; z-index: 1; left: -9px; top: -10px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--forest); color: var(--green); font-size: 10.5px; font-weight: 700; line-height: 1; }
.ex-meta .ex-n, .ex-totals .ex-n { left: -12px; }

/* ---------- the record ---------- */
.ex-rec { position: relative; z-index: 1; width: 100%; margin-top: -26px; padding: 18px 18px 16px; border-radius: var(--radius); background: var(--forest); color: var(--white); box-shadow: 0 22px 44px rgba(12, 43, 21, .28); }
.ex-rec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ex-rec-t { margin: 0; font-size: 15.5px; font-weight: 700; }
.ex-type { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 2px 9px; border-radius: 999px; background: rgba(150, 248, 120, .14); font-size: 12px; font-weight: 600; color: var(--green); }
.ex-thr { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 12px; color: rgba(255, 255, 255, .8); }
.ex-thr-k { width: 2px; height: 12px; border-radius: 1px; background: var(--white); }
.ex-fields { margin: 0; }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ex-row dt { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sage); }
.ex-rec .ex-n { display: grid; place-items: center; flex: none; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 10.5px; font-weight: 700; color: var(--green); }
.ex-val { grid-column: 1; margin: 1px 0 0; padding-left: 24px; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ex-conf { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; margin: 0; }
.ex-bar { display: block; width: 64px; height: 6px; overflow: visible; }
.ex-bar-bg { fill: rgba(255, 255, 255, .14); }
.ex-bar-v { fill: var(--green); }
.ex-bar-t { fill: var(--white); }
.ex-pct { min-width: 38px; text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-row--low { margin: 4px -10px 0; padding: 9px 10px 10px; border: 0; border-radius: 10px; background: rgba(150, 248, 120, .09); box-shadow: inset 0 0 0 1px rgba(150, 248, 120, .35); }
.ex-row--low .ex-bar-v { fill: var(--sage); }
.ex-warn { position: relative; grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 24px; padding: 3px 9px; border-radius: 6px; background: var(--green); font-size: 12px; font-weight: 700; color: var(--forest); }
.ex-warn::after { content: ""; position: absolute; inset: -3px; border-radius: 8px; border: 2px solid var(--green); opacity: 0; }
.ex-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; }
.ex-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ex-checks .ex-i { color: var(--green); }
.ex-sum { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; color: rgba(255, 255, 255, .82); }

/* next documents in the queue (wide layouts only) */
.ex-queue { display: none; }
.ex-q-t { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
.ex-queue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ex-queue li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--white); font-size: 13px; color: var(--ink); box-shadow: 0 1px 2px rgba(12, 43, 21, .06); }
.section--paper .ex-queue li { background: var(--paper); }
.ex-q-doc { position: relative; flex: none; width: 16px; height: 20px; border-radius: 2px; border: 1.5px solid #7d8a80; }
.ex-q-doc::before { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 6px; border-top: 1.5px solid #b9b3aa; border-bottom: 1.5px solid #b9b3aa; }
.ex-q-name { flex: 1; min-width: 0; font-weight: 600; }
.ex-q-s { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--mint); font-size: 12px; font-weight: 600; color: var(--forest); }
.ex-q-unk .ex-q-doc { border-style: dashed; }
.ex-q-unk .ex-q-s { background: var(--forest); color: var(--white); }

/* side by side when there is room: the record overlaps the document */
@container (min-width: 600px) {
  .ex-in { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: start; justify-items: stretch; }
  .ex-doc { max-width: none; margin-top: 6px; }
  .ex-rec { grid-row: 1 / span 2; margin: 64px 0 0 -12px; width: calc(100% + 12px); }
  .ex-queue { display: block; grid-column: 1; grid-row: 2; align-self: start; margin: 34px 26px 0 4px; }
}
@container (max-width: 599px) {
  .ex-rec { max-width: 440px; }
}
@container (max-width: 380px) {
  .ex-doc { padding: 18px 16px 14px; font-size: 12px; }
  .ex-doc-t { font-size: 20px; }
  .ex-totals { width: 78%; }
  .ex-rec { padding: 16px 14px 14px; }
  .ex-bar { width: 44px; }
}

/* ---------- animation: the scan sweeps down, each field lights up as the line passes, then lands in the record ---------- */
.js .vz-figure .ex-doc { opacity: 0; transform: translateY(14px) rotate(-1.2deg); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure.is-visible .ex-doc { opacity: 1; transform: rotate(-1.2deg); }
.js .vz-figure.is-visible .ex-scan { animation: ex-scan 6s ease-in-out .4s infinite; }
@keyframes ex-scan { 0% { opacity: 1; transform: translateY(-100%); } 30% { opacity: 1; transform: translateY(0); } 38%, 100% { opacity: 0; transform: translateY(0); } }

.js .vz-figure .ex-f { background: transparent; box-shadow: 0 0 0 1.5px transparent; transition: background .35s ease, box-shadow .35s ease, outline-color .35s ease; }
.js .vz-figure .ex-f7 { outline-color: transparent; }
.js .vz-figure .ex-doc .ex-n { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.js .vz-figure.is-visible .ex-f { background: rgba(150, 248, 120, .25); box-shadow: 0 0 0 1.5px var(--green-2); }
.js .vz-figure.is-visible .ex-f7 { background: rgba(12, 43, 21, .06); box-shadow: none; outline-color: var(--forest); }
.js .vz-figure.is-visible .ex-doc .ex-n { opacity: 1; transform: none; }

.js .vz-figure .ex-rec { opacity: 0; transform: translateY(18px); transition: opacity .5s ease .25s, transform .6s cubic-bezier(.2, .7, .2, 1) .25s; }
.js .vz-figure.is-visible .ex-rec { opacity: 1; transform: none; }
.js .vz-figure .ex-row { opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .ex-bar-v { transform: scaleX(0); transform-box: fill-box; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure.is-visible .ex-row { opacity: 1; transform: none; }
.js .vz-figure.is-visible .ex-bar-v { transform: none; }
.js .vz-figure .ex-warn, .js .vz-figure .ex-checks li, .js .vz-figure .ex-sum { opacity: 0; transition: opacity .45s ease; }
.js .vz-figure.is-visible .ex-warn, .js .vz-figure.is-visible .ex-checks li, .js .vz-figure.is-visible .ex-sum { opacity: 1; }
.js .vz-figure.is-visible .ex-warn::after { animation: ex-ring 2.4s ease-out 2.7s infinite; }
@keyframes ex-ring { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.18, 1.5); } }

/* timing, field by field (document highlight, then the record row) */
.js .vz-figure.is-visible .ex-f1, .js .vz-figure.is-visible .ex-f1 .ex-n { transition-delay: .65s; }
.js .vz-figure.is-visible .ex-f2, .js .vz-figure.is-visible .ex-f2 .ex-n { transition-delay: .75s; }
.js .vz-figure.is-visible .ex-f3, .js .vz-figure.is-visible .ex-f3 .ex-n { transition-delay: .85s; }
.js .vz-figure.is-visible .ex-f4, .js .vz-figure.is-visible .ex-f4 .ex-n { transition-delay: .95s; }
.js .vz-figure.is-visible .ex-f5, .js .vz-figure.is-visible .ex-f5 .ex-n { transition-delay: 1.5s; }
.js .vz-figure.is-visible .ex-f6, .js .vz-figure.is-visible .ex-f6 .ex-n { transition-delay: 1.6s; }
.js .vz-figure.is-visible .ex-f7, .js .vz-figure.is-visible .ex-f7 .ex-n { transition-delay: 1.85s; }
.js .vz-figure.is-visible .ex-r1, .js .vz-figure.is-visible .ex-r1 .ex-bar-v { transition-delay: .85s; }
.js .vz-figure.is-visible .ex-r2, .js .vz-figure.is-visible .ex-r2 .ex-bar-v { transition-delay: .95s; }
.js .vz-figure.is-visible .ex-r3, .js .vz-figure.is-visible .ex-r3 .ex-bar-v { transition-delay: 1.05s; }
.js .vz-figure.is-visible .ex-r4, .js .vz-figure.is-visible .ex-r4 .ex-bar-v { transition-delay: 1.15s; }
.js .vz-figure.is-visible .ex-r5, .js .vz-figure.is-visible .ex-r5 .ex-bar-v { transition-delay: 1.7s; }
.js .vz-figure.is-visible .ex-r6, .js .vz-figure.is-visible .ex-r6 .ex-bar-v { transition-delay: 1.8s; }
.js .vz-figure.is-visible .ex-r7, .js .vz-figure.is-visible .ex-r7 .ex-bar-v { transition-delay: 2.05s; }
.js .vz-figure.is-visible .ex-warn { transition-delay: 2.35s; }
.js .vz-figure.is-visible .ex-checks li { transition-delay: 2.6s; }
.js .vz-figure.is-visible .ex-checks li + li { transition-delay: 2.75s; }
.js .vz-figure.is-visible .ex-sum { transition-delay: 2.9s; }
.js .vz-figure .ex-queue li { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.js .vz-figure.is-visible .ex-queue li { opacity: 1; transform: none; transition-delay: 2.9s; }
.js .vz-figure.is-visible .ex-queue li + li { transition-delay: 3.05s; }
.js .vz-figure.is-visible .ex-queue li + li + li { transition-delay: 3.2s; }