/* From the design board Portal-MerchantInvoices.dc.html (canvas MDPbvdiG5xFWMBLYHqGzyw). */
:root{--ink:#4D4D4D;--forest:#143719;--green:#55C637;--mint:#D0FCA5;--soft:#F6F7F5;--line:#EBEBEB;--muted:#5E635D}
*{box-sizing:border-box}
body{margin:0;font:400 15px/1.5 Inter,system-ui,sans-serif;color:var(--ink);background:#FFFFFF}
a{color:var(--forest)}a:hover{color:#2F7A1F}
button,input,select,textarea{font:inherit}
.hd{background:var(--forest);min-height:64px;display:flex;align-items:center;gap:16px;padding:0 28px;flex-wrap:wrap}
.logo{height:28px;width:auto}
.wm small{font:600 13px Inter,sans-serif;color:var(--mint);letter-spacing:.06em;text-transform:uppercase}
.org{margin-left:auto;font:600 14px Inter,sans-serif;color:var(--mint);min-width:0;overflow-wrap:anywhere}
.signout{background:transparent;border:1.5px solid #2F7A1F;color:var(--mint);border-radius:7px;padding:6px 12px;cursor:pointer;min-height:36px}
.wrap{display:flex;flex-wrap:wrap;gap:24px;padding:24px 28px 48px}
.side{flex:1 1 220px;max-width:260px;display:flex;flex-direction:column;gap:4px}
.nav{background:transparent;border:0;border-radius:8px;text-align:left;padding:10px 12px;cursor:pointer;color:var(--ink);font:600 15px Inter,sans-serif;min-height:44px;text-decoration:none;display:flex;align-items:center}
.nav:hover{background:var(--soft)}
.nav.on{background:#F2FAEF;color:var(--forest);box-shadow:inset 3px 0 0 var(--green)}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px}
.gate{max-width:520px;margin:0 auto;padding:40px 28px 56px;display:flex;flex-direction:column;gap:18px}
.gate>*,.main>*{min-width:0;max-width:100%}   /* a wide table scrolls inside its .box instead of widening the page */
h1{font:800 38px/1.05 'Barlow Semi Condensed',sans-serif;text-transform:uppercase;color:var(--forest);margin:0}
h2{font:700 22px/1.2 'Barlow Semi Condensed',sans-serif;color:var(--forest);margin:0 0 8px}
.lead{margin:0;color:#6B706A;max-width:760px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tile{background:var(--soft);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tile b{font:800 30px/1 'Barlow Semi Condensed',sans-serif;color:var(--forest)}
.tile span{font:600 14px Inter,sans-serif}
.tile small{font-size:12px;color:var(--muted)}
.card{border:1.5px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.card.warn{border-color:#E8C35A;background:#FFFBEF}
.box{border:1px solid var(--line);border-radius:12px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th{background:var(--soft);font:600 12px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 14px;white-space:nowrap}
td{border-top:1px solid var(--line);padding:10px 14px}
tr.tot td{font-weight:600;color:var(--forest);background:#FAFBF9}
.n{text-align:right;font-variant-numeric:tabular-nums}
.st{font:600 11px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:2px 7px;white-space:nowrap}
.st.ok{background:var(--mint);color:var(--forest)}
.st.warn{background:#FFF3CD;color:#6B5103}
.st.info{background:#DCEBFF;color:#163E73}
.st.off{background:var(--line);color:var(--ink)}
.btn{display:inline-block;background:var(--green);color:var(--forest);border:0;border-radius:7px;padding:11px 16px;font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none;min-height:44px}
.btn[disabled]{background:#E3E6E1;color:#6B706A;cursor:not-allowed}
.btn.quiet{background:transparent;border:2px solid #D5D8D3;color:var(--ink);padding:9px 14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
label{display:flex;flex-direction:column;gap:4px;font:600 14px Inter,sans-serif;color:var(--forest)}
input,select,textarea{border:1.5px solid #D5D8D3;border-radius:7px;padding:9px 11px;font-weight:400;color:var(--ink);background:#FFFFFF;min-height:44px}
.muted{font-size:13px;color:var(--muted);margin:0}
.err{color:#9B1C1C;margin:0}
@media (max-width:640px){.hd,.wrap,.gate{padding-left:16px;padding-right:16px}.hd{padding-top:10px;padding-bottom:10px;row-gap:6px}.org{order:3;flex-basis:100%;margin-left:0}.signout{margin-left:auto}.gate table{min-width:0}.side{max-width:none;flex-direction:row;overflow-x:auto}h1{font-size:30px}}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.step{font:600 13px Inter,sans-serif;padding:6px 12px;border-radius:20px;background:var(--soft);color:#6B706A}
.step.on{background:var(--forest);color:var(--mint)}
.step.done{background:var(--mint);color:var(--forest)}
.card.hi{border-color:var(--green);background:#F2FAEF}
.amt{font:800 30px/1 'Barlow Semi Condensed',sans-serif;color:var(--forest)}
label.tick{flex-direction:row;align-items:flex-start;gap:12px;font-weight:400;color:var(--ink);padding:12px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer}
label.tick input{width:22px;height:22px;min-height:0;margin:1px 0 0;accent-color:#2F7A1F;flex:none}
.gate .card h2{font-size:18px;margin:8px 0 0}
main.gate:has(.box){max-width:820px}
.ph{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.shot{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.img{height:160px;background:#EEF1EC;display:flex;align-items:center;justify-content:center;color:#6B706A;font:600 13px Inter,sans-serif;overflow:hidden}
.img img{width:100%;height:100%;object-fit:cover}
.img.miss{background:repeating-linear-gradient(45deg,#FAFAF7,#FAFAF7 10px,#F1F2EE 10px,#F1F2EE 20px)}
.shot div.b{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.shot b{color:var(--forest)}
label.btn.up{display:inline-flex;align-items:center;justify-content:center;flex-direction:row;font:600 14px Inter,sans-serif;color:var(--ink)}
.chart svg{width:100%;height:auto;display:block}
.chart .ax{font:400 12px Inter,sans-serif;fill:#5E635D}
.chart .dl{font:600 12px Inter,sans-serif;fill:#143719}
.plot{position:relative}
.tip{position:absolute;pointer-events:none;background:#143719;color:#FFFFFF;font:600 13px Inter,sans-serif;padding:6px 10px;border-radius:6px;max-width:220px;z-index:2}
.legend{display:flex;gap:16px;flex-wrap:wrap;font:600 13px Inter,sans-serif;color:#4D4D4D}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.seg .btn{min-height:40px;padding:8px 14px}
details summary{cursor:pointer;font:600 14px Inter,sans-serif;color:#143719;margin:6px 0}
.ph2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin:8px 0}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}