.native-invoice{height:520svh;padding:0 var(--gutter);background:#f7f5ef;border-block:var(--rule)}
.native-sticky{position:sticky;top:0;height:100svh;min-height:620px;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:24px 0}
.native-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px}.native-heading h2{font-size:clamp(1.7rem,2.5vw,2.7rem);letter-spacing:-.04em}.native-heading>span{font-size:.75rem;color:var(--color-muted);white-space:nowrap}
.native-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.native-tabs button{display:flex;align-items:center;gap:12px;border-top:1px solid var(--color-line);padding:12px 0 0;text-align:left;font-size:.8125rem;min-height:42px;position:relative}.native-tabs button:before{content:'';position:absolute;top:-2px;left:0;width:44px;height:3px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform 250ms}.native-tabs button[aria-pressed=true]:before{transform:scaleX(1)}.native-tabs button span{font-size:.6875rem;color:var(--color-muted)}
.native-canvas{position:relative;display:grid;grid-template-columns:52% 48%;align-items:center;min-height:0;flex:1;max-height:620px;padding:20px 4%;border:var(--rule);border-radius:8px;background:rgba(255,255,255,.26);overflow:hidden}
.native-art{display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:0;height:100%;min-height:0;order:0;gap:12px}.native-paper{position:relative;width:auto;height:100%;max-height:540px;aspect-ratio:1054/1492;max-width:100%;flex:none}.native-paper>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 9px rgba(66,51,26,.10))}
.native-result{min-width:0;position:relative;padding:12px 0 12px 7%;z-index:2}.native-start p{font-size:clamp(1rem,1.5vw,1.3rem);color:var(--color-muted);max-width:25ch}
.native-extract{max-width:360px;margin-inline:auto}.native-field{padding:20px 0;border-bottom:var(--rule)}.native-field:last-child{border:0}.native-field>span{display:block;font-size:.8125rem;color:var(--color-muted);margin-bottom:8px}.native-field strong{font-size:clamp(1.45rem,2vw,2.15rem);line-height:1.3;display:inline-block;font-weight:550;letter-spacing:-.03em}.native-field.is-active strong{background:rgba(204,255,54,.13);box-shadow:0 0 0 8px rgba(204,255,54,.13);border-radius:4px}
.native-scan{position:absolute;left:8%;width:87%;height:1.2%;min-height:3px;top:20%;background:linear-gradient(transparent,rgba(204,255,54,.35),transparent);box-shadow:0 0 8px rgba(204,255,54,.15);pointer-events:none;display:none}
.native-source-bracket,.native-note-bracket{position:absolute;display:none;pointer-events:none;background:linear-gradient(var(--color-accent),var(--color-accent)) left top/9px 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) left top/2px 9px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) right top/9px 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) right top/2px 9px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) left bottom/9px 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) left bottom/2px 9px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) right bottom/9px 2px no-repeat,linear-gradient(var(--color-accent),var(--color-accent)) right bottom/2px 9px no-repeat}
.native-note-bracket{left:84%;top:48%;width:14%;height:8%;border:1px dashed #bc8b30;background:none}
.native-connection{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}.native-connection path{fill:none;stroke:#a8ce35;stroke-width:1.25;opacity:.65}.native-data-chip{position:absolute;z-index:4;padding:6px 12px;border:1px solid #c4da8a;background:#f7fae9;color:var(--color-ink);font-size:.8125rem;white-space:nowrap;border-radius:20px;pointer-events:none;transform:translate(-50%,-50%)}
.native-invoice[data-native-stage="2"] .native-canvas{grid-template-columns:26% 74%}.native-invoice[data-native-stage="2"] .native-paper{height:auto;width:min(100%,230px)}.native-invoice[data-native-stage="2"] .native-note-bracket{display:block}.native-invoice[data-native-stage="2"] .native-result{padding-left:6%}
.native-table-wrap{overflow-x:auto}.native-review table{width:100%;border-collapse:collapse;font-size:.8125rem;line-height:1.35}.native-review th{text-align:left;color:var(--color-muted);font-size:.6875rem;font-weight:500;border-bottom:var(--rule);padding:7px 8px}.native-review td{padding:7px 8px;border-bottom:1px solid #e2e1d7}.native-review td:nth-child(n+2),.native-review th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}.native-license{background:#fff2d2}.native-review-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.native-review-foot p{display:flex;gap:22px;font-size:.875rem}.native-review-foot .btn{min-height:42px;padding:10px 16px;font-size:.8125rem}.native-review-note{display:flex;justify-content:space-between;gap:24px;border-left:2px solid #cfa349;padding:12px 0 0 14px;margin-top:18px;color:#735d32;font-size:.8125rem;align-items:center}.native-review-note span{display:block;font-size:.6875rem;color:var(--color-muted);margin-bottom:4px}.native-review-note strong{font-weight:500;color:#aa4139;font-style:italic}.native-review-note small{max-width:29ch;font-size:.75rem}
.native-invoice[data-native-stage="3"] .native-canvas{grid-template-columns:70% 30%}.native-invoice[data-native-stage="3"] .native-art{order:2}.native-invoice[data-native-stage="3"] .native-paper{height:auto;width:min(100%,180px)}.native-invoice[data-native-stage="3"] .native-result{order:1;padding:20px 10% 20px 4%;border-right:var(--rule)}.native-attachment-caption{font-size:.75rem;color:var(--color-muted)}.native-accounting h3{font-size:clamp(1.45rem,2vw,2rem);margin-bottom:26px}.native-accounting dl{margin:0;display:grid;gap:20px}.native-accounting dl>div{display:grid;grid-template-columns:140px 1fr;gap:24px;font-size:.9375rem}.native-accounting dt{color:var(--color-muted);font-size:.8125rem}.native-accounting dd{margin:0}.native-approved{padding:4px 12px;background:#ebf4ce;border-radius:20px;font-size:.8125rem}.native-accounting-note{font-size:.75rem;color:var(--color-muted);margin-top:30px;max-width:42ch}
.native-controls{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--color-muted);min-height:28px;gap:20px}.native-controls .text-link{font-size:.75rem;min-height:30px}
@media(max-height:760px) and (min-width:761px){.native-sticky{gap:12px;padding-block:18px;min-height:560px}.native-heading h2{font-size:1.8rem}.native-canvas{padding-block:12px}.native-review td,.native-review th{padding-block:5px}.native-review-note{margin-top:12px}.native-field{padding-block:16px}}
@media(max-width:760px){.native-invoice{height:625svh}.native-sticky{min-height:660px;padding-block:16px;gap:12px}.native-heading{display:block}.native-heading h2{font-size:1.5rem}.native-heading>span{display:block;margin-top:5px}.native-tabs{gap:8px}.native-tabs button{font-size:.6875rem;gap:5px;line-height:1.35;min-height:42px}.native-tabs button span{font-size:.625rem}.native-tabs button:before{width:28px}.native-canvas{padding:12px;grid-template-columns:56% 44%;min-height:390px}.native-result{padding-left:12px}.native-field{padding-block:15px}.native-field>span{font-size:.6875rem}.native-field strong{font-size:1rem}.native-start p{font-size:.875rem}.native-paper{height:auto;width:100%}.native-data-chip{font-size:.625rem;padding:4px 7px}.native-invoice[data-native-stage="2"] .native-canvas{grid-template-columns:1fr;display:block;overflow-y:auto}.native-invoice[data-native-stage="2"] .native-art{display:none}.native-invoice[data-native-stage="2"] .native-result{padding:0}.native-review table{font-size:.75rem}.native-review td,.native-review th{padding:7px 4px}.native-review-foot{display:block}.native-review-foot .btn{margin-top:14px;width:100%}.native-review-foot p{justify-content:space-between}.native-review-note{display:block;margin-top:16px}.native-review-note small{display:block;margin-top:8px}.native-invoice[data-native-stage="3"] .native-canvas{grid-template-columns:1fr;display:flex;flex-direction:column;justify-content:center;gap:20px;overflow-y:auto}.native-invoice[data-native-stage="3"] .native-art{height:auto;order:2}.native-invoice[data-native-stage="3"] .native-paper{width:80px}.native-invoice[data-native-stage="3"] .native-result{padding:0;width:100%;border:0}.native-accounting h3{font-size:1.4rem;margin-bottom:22px}.native-accounting dl{gap:15px}.native-accounting dl>div{grid-template-columns:110px 1fr;gap:12px;font-size:.875rem}.native-accounting-note{margin-top:18px}.native-controls{font-size:.6875rem;gap:10px}.native-controls .text-link{font-size:.6875rem;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.native-invoice{height:auto}.native-sticky{position:relative;height:auto;min-height:620px}.native-scan,.native-data-chip,.native-connection{display:none!important}}
.native-totals small{display:block;color:var(--color-muted);font-size:.6875rem;margin-bottom:6px}

.native-review-state{font-size:.8125rem;padding:6px 12px;background:#fff2d2;color:#735d32;border-radius:20px;white-space:nowrap;transition:background 300ms,color 300ms}
.native-invoice[data-review-complete="true"] .native-review-state{background:#ebf4ce;color:var(--color-ink)}
.native-invoice[data-review-complete="true"] .native-license{background:#f1f5e6}
@media(max-width:760px){.native-review-state{display:inline-block;margin-top:14px}}

.native-destination{font-size:.75rem;color:var(--color-muted);margin-bottom:12px}
.native-human-flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;margin:20px 0 0;border-top:var(--rule)}
.native-human-flow li{position:relative;font-size:.6875rem;line-height:1.4;color:var(--color-muted);padding-top:12px}
.native-human-flow li:before{content:'';position:absolute;width:6px;height:6px;background:#c6c6ba;border-radius:50%;top:-3px;left:0}
.native-human-flow li[data-state=current]{color:var(--color-ink);font-weight:600}
.native-human-flow li[data-state=current]:before,.native-human-flow li[data-state=done]:before{background:#819d2b}
.native-human-flow li[data-state=pending]{opacity:.55}
@media(max-width:760px){.native-human-flow{gap:10px;margin-top:16px}.native-human-flow li{font-size:.625rem}.native-invoice[data-native-stage="2"] .native-review td,.native-invoice[data-native-stage="2"] .native-review th{padding-block:5px}.native-review-note{margin-top:10px}.native-review-foot{margin-top:12px}}
/* Same outer frame for every step; the final record has a compact inner layout. */
@media(min-width:761px){
 .native-invoice[data-native-stage="3"] .native-canvas{width:100%;max-width:none;flex:1;grid-template-columns:minmax(0,620px) minmax(180px,320px);justify-content:center;gap:32px;padding:28px 32px;max-height:620px;overflow-y:auto}
 .native-invoice[data-native-stage="3"] .native-result{padding:0 32px 0 0}
 .native-invoice[data-native-stage="3"] .native-art{height:auto;gap:12px}
 .native-invoice[data-native-stage="3"] .native-paper{width:min(100%,240px);max-height:none}
 .native-invoice[data-native-stage="3"] .native-accounting h3{margin-bottom:18px}
 .native-invoice[data-native-stage="3"] .native-accounting dl{gap:0}
 .native-invoice[data-native-stage="3"] .native-accounting dl>div{grid-template-columns:120px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:var(--rule)}
 .native-invoice[data-native-stage="3"] .native-accounting dd{text-align:right}
 .native-invoice[data-native-stage="3"] .native-accounting-note{max-width:none;margin-top:20px;font-size:.8125rem;line-height:1.6}
}
@media(min-width:761px) and (max-width:1000px){
 .native-invoice[data-native-stage="3"] .native-canvas{gap:24px;padding:24px}
 .native-invoice[data-native-stage="3"] .native-result{padding-right:24px}
 .native-invoice[data-native-stage="3"] .native-accounting dl>div{grid-template-columns:100px minmax(0,1fr);font-size:.875rem}
 .native-invoice[data-native-stage="3"] .native-paper{width:min(100%,190px)}
}
@media(max-width:760px){.native-controls{min-height:3.3em;flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.native-invoice[data-native-stage] .native-canvas{height:clamp(390px,calc(var(--native-viewport-height,100svh) - 200px),620px);flex:none;overflow-y:auto}}
/* Accounting record shown inside a business-system workspace. */
.native-system-bar,.native-system-sidebar{display:none}
.native-invoice[data-native-stage="3"] .native-canvas{display:grid;grid-template-columns:160px minmax(0,1fr) 300px;grid-template-rows:48px minmax(0,1fr);align-items:stretch;justify-content:normal;gap:0;padding:0;overflow:hidden}
.native-invoice[data-native-stage="3"] .native-system-bar{display:flex;grid-column:1/-1;grid-row:1;align-items:center;gap:24px;padding:0 20px;border-bottom:var(--rule);background:var(--color-white);min-width:0;font-size:.75rem}
.native-system-brand{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;flex:none}
.native-system-brand i{width:12px;height:12px;background:var(--color-accent);border:1px solid var(--color-line);border-radius:3px}
.native-system-breadcrumb{color:var(--color-muted);min-width:0;white-space:nowrap}
.native-system-breadcrumb>span{margin-inline:8px;color:var(--color-line)}
.native-system-saved{margin-left:auto;color:var(--color-muted);white-space:nowrap;font-size:.6875rem}
.native-invoice[data-native-stage="3"] .native-system-sidebar{display:block;grid-column:1;grid-row:2;padding:24px 12px;border-right:var(--rule);background:var(--color-wash)}
.native-system-sidebar p{font-size:.625rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);margin:0 10px 18px}
.native-system-sidebar ul{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.native-system-sidebar li{padding:10px;font-size:.75rem;line-height:1.4;color:var(--color-muted);border-radius:4px}
.native-system-sidebar li.is-selected{background:var(--color-paper);color:var(--color-ink);font-weight:600;box-shadow:inset 2px 0 var(--color-accent)}
.native-invoice[data-native-stage="3"] .native-result{grid-column:2;grid-row:2;padding:28px;border:0;order:0;min-height:0;overflow-y:auto}
.native-record-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:var(--rule);margin-bottom:20px}
.native-record-header .native-destination{font-size:.6875rem;margin:0 0 6px;color:var(--color-muted)}
.native-invoice[data-native-stage="3"] .native-accounting h3{font-size:1.6rem;line-height:1.2;margin:0}
.native-record-header .native-approved{font-size:.6875rem;white-space:nowrap}
.native-record-label{font-family:var(--font-body);font-size:.6875rem;letter-spacing:.055em;text-transform:uppercase;font-weight:600;line-height:1.4;color:var(--color-muted);margin:0 0 12px}
.native-invoice[data-native-stage="3"] .native-accounting dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.native-invoice[data-native-stage="3"] .native-accounting dl>div{display:block;min-width:0;padding:12px;border:var(--rule);border-radius:4px;background:var(--color-white)}
.native-invoice[data-native-stage="3"] .native-accounting dt{font-size:.6875rem;line-height:1.4;margin-bottom:6px}
.native-invoice[data-native-stage="3"] .native-accounting dd{text-align:left;font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}
.native-record-history{margin-top:24px;padding-top:18px;border-top:var(--rule)}
.native-record-history ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.native-record-history li{position:relative;padding-left:20px;font-size:.75rem;line-height:1.5;color:var(--color-muted)}
.native-record-history li:before{content:'';position:absolute;left:1px;top:6px;width:6px;height:6px;border:1px solid var(--color-line);border-radius:50%;background:var(--color-paper)}
.native-record-history li:last-child{color:var(--color-ink)}
.native-record-history li:last-child:before{background:var(--color-accent)}
.native-invoice[data-native-stage="3"] .native-art{grid-column:3;grid-row:2;order:0;justify-content:flex-start;align-items:center;height:auto;padding:28px 20px;border-left:var(--rule);gap:18px;background:var(--color-wash);overflow-y:auto}
.native-invoice[data-native-stage="3"] .native-attachment-caption{align-self:flex-start;font-size:.75rem;font-weight:500}
.native-invoice[data-native-stage="3"] .native-paper{width:min(100%,220px);height:auto;max-height:none}
@media(max-width:1200px){.native-invoice[data-native-stage="3"] .native-canvas{grid-template-columns:140px minmax(0,1fr) 240px}.native-invoice[data-native-stage="3"] .native-accounting dl{grid-template-columns:repeat(2,minmax(0,1fr))}.native-invoice[data-native-stage="3"] .native-result{padding:20px}.native-invoice[data-native-stage="3"] .native-art{padding:24px 16px}}
@media(max-width:1000px){.native-invoice[data-native-stage="3"] .native-canvas{grid-template-columns:minmax(0,1fr) 210px}.native-invoice[data-native-stage="3"] .native-system-sidebar{display:none}.native-invoice[data-native-stage="3"] .native-result{grid-column:1}.native-invoice[data-native-stage="3"] .native-art{grid-column:2}.native-system-saved{display:none}}
@media(max-width:760px){.native-invoice[data-native-stage="3"] .native-canvas{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;overflow-y:auto}.native-invoice[data-native-stage="3"] .native-system-bar{order:0;min-height:44px;flex:none;gap:12px;padding:0 14px;font-size:.625rem}.native-system-brand{font-size:.75rem}.native-system-breadcrumb>span{margin-inline:4px}.native-invoice[data-native-stage="3"] .native-result{order:1;flex:none;padding:16px;overflow:visible}.native-record-header{padding-bottom:14px;margin-bottom:14px}.native-invoice[data-native-stage="3"] .native-accounting h3{font-size:1.35rem}.native-invoice[data-native-stage="3"] .native-accounting dl{gap:8px}.native-invoice[data-native-stage="3"] .native-accounting dl>div{padding:10px}.native-invoice[data-native-stage="3"] .native-accounting dd{font-size:.75rem}.native-record-history{margin-top:16px;padding-top:14px}.native-record-history ol{gap:8px}.native-record-history li{font-size:.6875rem}.native-invoice[data-native-stage="3"] .native-art{order:2;flex:none;border-left:0;border-top:var(--rule);padding:16px;gap:12px;overflow:visible}.native-invoice[data-native-stage="3"] .native-paper{width:100px}}
/* A phone's expanding browser bars must not move every section below this demo. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .native-invoice{height:calc(var(--native-viewport-height,100svh) * 6.25)}
 .native-sticky{height:var(--native-viewport-height,100svh)}
}