/* hero-lab — Accounts Payable page: three animated hero scenes (?hero=a|b|c).
   Each scene is drawn 1440 wide, scaled by ap-hero.js, and runs past the bottom of the hero. Labels follow the app
   (status strip Source / Validation / Matches / Supplier comms, "Line Items (N)", "Payment run #N"). */

.ap-hv { display: none; }
.ap-hv [hidden] { display: none !important; }
html:not([data-hero]) .ap-hv[data-hv="a"], html[data-hero="a"] .ap-hv[data-hv="a"],
html[data-hero="b"] .ap-hv[data-hv="b"], html[data-hero="c"] .ap-hv[data-hv="c"] { display: block; }

.ap-hv.ha-stage .ha-zoom { left: 50%; right: auto; width: 1440px; height: var(--wh, 624px); margin-left: -720px; }
.ap-hv.ha-stage .om-window { width: 1440px; height: var(--wh, 624px); }
/* Data panels on white, as in the app's detail views */
.ap-hv .om-app, .ap-hv .om-main { background: #fff; }
.ap-hv .om-main { position: relative; }
/* Made-up company logos stay quiet: greyscale, softened */
.ap-hv .paper svg.lg, .ap-hv .dm-from > svg { filter: grayscale(1) contrast(.85); opacity: .55; }

/* ── Detail view (A, B) ── */
.hv-head { height: 50px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--om-border); white-space: nowrap; }
.hv-head .back { font-size: 13px; color: var(--om-fg-subtle); padding-right: 12px; border-right: 1px solid var(--om-border); }
.hv-head .nr { font-family: "OM Mono", ui-monospace, monospace; font-size: 13.5px; font-weight: 600; }
.hv-head .sup { font-size: 14px; color: var(--om-fg-muted); }
.hv-head .amt { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hv-strip { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-bottom: 1px solid var(--om-border); }
.hv-strip .seg { padding: 8px 16px 9px; display: grid; gap: 2px; min-width: 0; border-right: 1px solid var(--om-border-subtle); transition: background .3s; }
.hv-strip .seg:last-child { border-right: 0; }
.hv-strip .seg .k { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--om-fg-subtle); }
.hv-strip .seg .v { font-size: 13px; font-weight: 600; color: var(--om-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.hv-strip .seg .v.muted { color: var(--om-fg-faint); font-weight: 500; }
.hv-strip .seg .v.ok { color: var(--om-ok); }
.hv-strip .seg .v.warn { color: var(--om-warn); }
.hv-strip .seg .v.info { color: var(--om-brand); }
.hv-strip .seg.flash { background: var(--om-tint-hover); }
.hv-strip .om-mb { margin-right: 0; }

.hv-split { flex: 1; min-height: 0; display: flex; }
.hv-pdf { width: 380px; flex: none; background: #f1f1ef; padding: 16px; border-right: 1px solid var(--om-border); overflow: hidden; }
.hv-data { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }

.paper { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 22px; font-size: 10px; line-height: 1.45; color: #333; overflow: hidden; }
.paper > * { flex: none; }
.paper .lh { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.paper .co { font-weight: 700; font-size: 13px; color: #1c1813; }
.paper .co small { display: block; font-weight: 400; font-size: 8.5px; color: #79736b; }
.paper .lg { display: block; width: 34px; height: 34px; flex: none; }
.paper h4 { font-size: 14px; margin: 14px 0 8px; color: #1c1813; }
.paper .meta { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; }
.paper table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.paper th { text-align: left; border-bottom: 1px solid #333; padding: 3px 0; font-weight: 600; }
.paper td { padding: 3px 0; border-bottom: 1px solid #eee; }
.paper .r { text-align: right; }
.paper .tot td { border: 0; font-weight: 700; padding-top: 6px; }
.paper .foot { margin-top: auto; padding-top: 6px; border-top: 1px solid #ddd; color: #79736b; font-size: 8.5px; }
.hit { border-radius: 2px; transition: background .35s, box-shadow .35s; }
.hit.on { background: rgba(10,109,189,.10); box-shadow: 0 0 0 1.5px rgba(10,109,189,.55); }
.hit.miss { display: inline-block; min-width: 92px; height: 12px; vertical-align: -2px; box-shadow: 0 0 0 1.5px rgba(207,34,46,.6); background: rgba(207,34,46,.06); border-radius: 2px; }
.hit.good { background: rgba(26,127,55,.10); box-shadow: 0 0 0 1.5px rgba(26,127,55,.55); }
.scan { position: absolute; left: 0; right: 0; height: 46px; top: -46px; background: linear-gradient(transparent, rgba(10,109,189,.10) 70%, rgba(10,109,189,.5) 98%, transparent); pointer-events: none; opacity: 0; }
.scan.go { animation: hv-scan 2s ease-in-out both; }
@keyframes hv-scan { 0% { top: -46px; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.paper .ver { transition: opacity .4s; }

/* Line items */
.li-card { padding-bottom: 6px; }
.li-card .om-card-h .math { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--om-ok); display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .3s; }
.li-card .om-card-h .math.on { opacity: 1; }
.li-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.li-t th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--om-fg-muted); padding: 4px 6px 6px; border-bottom: 1px solid var(--om-border); white-space: nowrap; }
.li-t td { padding: 8px 6px; border-bottom: 1px solid var(--om-border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.li-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.li-t tr.sum td { border-bottom: 0; font-weight: 600; padding-top: 9px; }
.slot { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.slot .om-acct { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.slot .add { font-size: 11px; color: var(--om-fg-faint); border: 1px dashed var(--om-border-strong); border-radius: 3px; padding: 0 6px; }
.slot .pc { font-size: 11px; font-weight: 600; color: var(--om-ok); }
.slot .pc.mid { color: var(--om-warn); }
.slot.pop .om-acct { animation: hv-pop .35s ease both; }
@keyframes hv-pop { from { opacity: 0; transform: scale(.85); } }
.li-why { font-size: 12px; line-height: 1.5; color: var(--om-fg-muted); white-space: normal !important; background: var(--om-bg-subtle); }
.li-why b { color: var(--om-fg); font-weight: 600; }
.li-whyrow td { padding: 0 !important; border-bottom: 1px solid var(--om-border-subtle); }
.li-whyrow .in { max-height: 0; overflow: hidden; transition: max-height .45s ease, padding .45s ease; padding: 0 10px; }
.li-whyrow.open .in { max-height: 70px; padding: 8px 10px; }
.li-toggle { font-size: 11.5px; color: var(--om-brand); }

.hv-data.b2 { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; }
.hv-data.b2 .sc-f .in.body { height: 142px; }
.sc-acts.sent .om-btn { display: none; }
.hv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hv-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.om-check .r.bad { color: var(--om-bad); }
.om-card-h .cnt { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--om-ok); }
.om-card-h .cnt.warn { color: var(--om-bad); }

/* Toast */
.hv-toast { position: absolute; right: 16px; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--om-border); border-radius: 8px; box-shadow: var(--om-shadow-pop);
  font-size: 13px; opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s; }
.hv-toast.show { opacity: 1; transform: none; }
.hv-toast .ic { width: 26px; height: 26px; border-radius: 50%; background: var(--om-ok-t); color: var(--om-ok-s); display: grid; place-items: center; }
.hv-toast .ic.info { background: var(--om-tint); color: var(--om-brand); }
.hv-toast b { display: block; font-weight: 600; }
.hv-toast span { color: var(--om-fg-muted); font-size: 12px; }

/* ── B: Supplier communication ── */
.sc-card .om-card-h .tag { margin-left: auto; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--om-border); color: var(--om-fg-muted); background: var(--om-bg-subtle); }
.sc-card .om-card-h .tag.warn { background: var(--om-warn-t); border-color: var(--om-warn-b); color: var(--om-warn-s); }
.sc-card .om-card-h .tag.ok { background: var(--om-ok-t); border-color: var(--om-ok-b); color: var(--om-ok-s); }
.sc-why { margin: 2px 0 10px; padding: 7px 10px; border-radius: 5px; background: var(--om-warn-t); border: 1px solid var(--om-warn-b); font-size: 12.5px; color: var(--om-warn-s); }
.sc-why b { font-weight: 600; }
.sc-f { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: start; margin-bottom: 6px; font-size: 12.5px; }
.sc-f label { padding-top: 5px; color: var(--om-fg-subtle); }
.sc-f .in { min-height: 28px; padding: 5px 10px; border: 1px solid var(--om-border-strong); border-radius: 5px; background: #fff; color: var(--om-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-f .in.body { height: 132px; white-space: pre-wrap; line-height: 1.45; }
.sc-prep { display: flex; align-items: center; gap: 8px; padding: 18px 4px; font-size: 13px; color: var(--om-fg-muted); }
.sc-acts { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sc-acts .om-btn { font-size: 13px; height: 30px; transition: transform .15s, box-shadow .15s; }
.sc-acts .om-btn.press { transform: scale(.95); box-shadow: 0 0 0 4px var(--om-az-100); }
.sc-sent { font-size: 12.5px; color: var(--om-ok-s); display: flex; align-items: center; gap: 6px; }
.typing::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--om-fg); animation: hv-blink 1s steps(1) infinite; }
@keyframes hv-blink { 50% { opacity: 0; } }
.hv-day { position: absolute; left: 50%; top: 230px; z-index: 6; transform: translate(-50%, -50%) scale(.96); padding: 12px 22px; border-radius: 999px; background: #1c1813; color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: 0 16px 40px rgba(28,24,19,.3); opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; }
.hv-day.show { opacity: 1; transform: translate(-50%, -50%); }

/* ── C: Cash discount → payment run ── */
.pr-screen { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .45s ease, transform .45s ease; }
.pr-screen.off { opacity: 0; transform: translateX(16px); pointer-events: none; }
.pr-toolbar { gap: 8px; }
.pr-ind { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--om-ok-b); background: var(--om-ok-t); color: var(--om-ok-s); border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pr-ind .om-ic { width: 14px; height: 14px; }
.pr-sk { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--om-ok-t); color: var(--om-ok-s); border: 1px solid var(--om-ok-b); }
.pr-sk.soon { background: var(--om-warn-t); color: var(--om-warn-s); border-color: var(--om-warn-b); }
.pr-sk.none { background: none; border-color: transparent; color: var(--om-fg-faint); font-weight: 500; }
.ap-hv .om-table tr.sel td { background: var(--om-tint-hover); }
.om-cb.on { background: var(--om-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; border-color: var(--om-brand); }

.pr-modal-bg { position: absolute; inset: 0; z-index: 4; background: rgba(28,24,19,.28); display: grid; place-items: start center; padding-top: 22px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pr-modal-bg.show { opacity: 1; }
.pr-modal { width: 780px; background: #fff; border-radius: 10px; box-shadow: var(--om-shadow-pop); transform: translateY(10px); transition: transform .35s; }
.pr-modal-bg.show .pr-modal { transform: none; }
.pr-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--om-border); font-size: 16px; font-weight: 600; }
.pr-modal-h .x { color: var(--om-fg-subtle); font-weight: 400; }
.pr-sumbar { display: flex; gap: 8px; padding: 12px 18px 4px; }
.pr-sumbar span { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--om-border); color: var(--om-fg-muted); background: var(--om-bg-subtle); }
.pr-sumbar span.on { background: var(--om-tint); border-color: var(--om-az-200); color: var(--om-brand-strong); }
.pr-sumbar span.save { background: var(--om-ok-t); border-color: var(--om-ok-b); color: var(--om-ok-s); }
.pr-mt { width: calc(100% - 36px); margin: 6px 18px 0; border-collapse: collapse; font-size: 13px; }
.pr-mt th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--om-fg-muted); padding: 8px 6px; border-bottom: 1px solid var(--om-border); }
.pr-mt td { padding: 9px 6px; border-bottom: 1px solid var(--om-border-subtle); white-space: nowrap; }
.pr-mt td small { display: block; font-family: "OM Mono", ui-monospace, monospace; font-size: 11px; color: var(--om-fg-subtle); }
.pr-mt .num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-mt .cur-s { color: var(--om-ok-s); font-weight: 600; }
.pr-mt .nxt { color: var(--om-fg-subtle); }
.pr-modal-f { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; margin-top: 8px; border-top: 1px solid var(--om-border); font-size: 13px; color: var(--om-fg-muted); }

.pr-detail { padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pr-slot { display: grid; }
.pr-slot > * { grid-area: 1 / 1; }
.pr-form { transition: opacity .3s; }
.pr-file.show ~ .pr-form { opacity: 0; }
.pr-top { display: flex; align-items: center; gap: 12px; }
.pr-top .back { font-size: 13px; color: var(--om-fg-subtle); }
.pr-top h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.pr-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pr-form div { display: grid; gap: 4px; }
.pr-form label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--om-fg-subtle); }
.pr-form .in { height: 32px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--om-border-strong); border-radius: 5px; background: #fff; font-size: 13px; }
.pr-inv { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr-inv th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--om-fg-muted); padding: 6px 8px; border-bottom: 1px solid var(--om-border); }
.pr-inv .num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-inv td.disc { color: var(--om-ok-s); font-weight: 600; }
.pr-inv td.tr { font-weight: 600; }
.pr-inv td { padding: 7px 8px; border-bottom: 1px solid var(--om-border-subtle); white-space: nowrap; vertical-align: top; }
.pr-inv td small { display: block; font-family: "OM Mono", ui-monospace, monospace; font-size: 11px; color: var(--om-fg-subtle); }
.pr-inv .amts { display: grid; grid-template-columns: auto auto; gap: 0 14px; justify-content: end; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pr-inv .amts span:nth-child(odd) { color: var(--om-fg-subtle); }
.pr-inv .amts .disc { color: var(--om-ok-s); font-weight: 600; }
.pr-inv .amts .tr { font-weight: 600; }
.pr-inv .take { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--om-fg-muted); }
.pr-tot { display: flex; align-items: center; gap: 28px; padding: 10px 14px; border: 1px solid var(--om-border); border-radius: 6px; background: #fff; }
.pr-tot div { display: grid; }
.pr-tot > div:not(.acts) > span { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--om-fg-subtle); }
.pr-tot b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-tot b.save { color: var(--om-ok-s); }
.pr-tot .acts { margin-left: auto; display: flex; gap: 8px; }
.pr-tot .om-btn { transition: transform .15s, box-shadow .15s; }
.pr-tot .om-btn.press { transform: scale(.95); box-shadow: 0 0 0 4px var(--om-az-100); }
.pr-file { display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 0 26px; align-items: center; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--om-ok-b); background: var(--om-ok-t);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.pr-file.show { opacity: 1; transform: none; }
.pr-file div { display: grid; }
.pr-file > div > span { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--om-ok-s); }
.pr-file b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-file .om-btn { justify-self: end; }

/* Prototype-only switcher */
.hv-switch { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: #1c1813; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 12.5px; }
.hv-switch span { padding: 0 8px 0 10px; color: rgba(255,255,255,.6); }
.hv-switch a { white-space: nowrap; padding: 5px 11px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 500; }
.hv-switch a.on { background: #fff; color: #1c1813; }

@media (max-width: 980px) {
  .ap-hv.ha-stage { flex: none; }
  .ap-hv.ha-stage .ha-zoom { left: 0; margin-left: 0; transform-origin: top left; }
  .hv-switch { left: 50%; transform: translateX(-50%); font-size: 11.5px; }
  .hv-switch a { padding: 5px 8px; }
}

@media (max-width: 640px) { .ap-hv .om-side { display: flex !important; } }

/* Phones (scenes with data-phone): narrower window, PDF pane hidden, data reflowed and readable */
@media (max-width: 980px) {
  .ap-hv.ha-stage[data-phone] .ha-zoom, .ap-hv.ha-stage[data-phone] .om-window { width: var(--vw, 1200px); }
  .ap-hv.narrow .om-side { display: none !important; }
  .ap-hv.narrow .hv-pdf { display: none; }
  .ap-hv.narrow .hv-head .back, .ap-hv.narrow .hv-head .om-btn { display: none; }
  .ap-hv.narrow .hv-head { gap: 8px; padding: 0 12px; }
  .ap-hv.narrow .hv-head .sup { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ap-hv.narrow .hv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-hv.narrow .hv-strip .seg:nth-child(2n) { border-right: 0; }
  .ap-hv.narrow .hv-strip .seg:nth-child(n+3) { border-top: 1px solid var(--om-border-subtle); }
  .ap-hv.narrow .hv-data { padding: 12px; }
  /* Line items: description, debit account (AP) or quantity (AR), amount */
  .ap-hv.narrow .li-t colgroup { display: none; }
  .ap-hv.narrow .li-t th:nth-child(n+3):not(:last-child), .ap-hv.narrow .li-t td:nth-child(n+3):not(:last-child) { display: none; }
  .ap-hv.narrow .li-t th:first-child, .ap-hv.narrow .li-t td:first-child { width: 42%; }
  .ap-hv.narrow .li-t th:last-child, .ap-hv.narrow .li-t td:last-child { width: 22%; }
  .ap-hv.narrow .li-t tr.sum { display: none; }
  .ap-hv.narrow .hv-toast { left: 12px; right: 12px; }
  /* Accounts Receivable scene */
  .ap-hv.narrow .ar-data { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .ap-hv.narrow .ar-col:last-child { order: -1; }
}