/* Ennovity — Backorder and Partial Delivery: page-specific scenes.
   Shared shell (hero, gframe, .pc, .fblock, CTA) lives in feature.css. */

/* shared check + alert circles */
.ck{width:18px;height:18px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none;color:#fff;
  transform:scale(0);animation:ckpop 5s ease-in-out infinite}
.ck svg{width:60%;height:60%}
.ck.open{background:var(--honey)}
@keyframes ckpop{0%,6%{transform:scale(0)}12%{transform:scale(1.2)}18%,92%{transform:scale(1)}100%{transform:scale(0)}}

/* == HERO: delivery timeline + running balance == */
.pc-tl{left:50%;top:26px;transform:translateX(-50%);width:100%;max-width:348px;padding:18px 18px 16px;z-index:2}
.tl-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.tl-t{font-size:13.5px;font-weight:600;color:var(--c-ink)}
.tl-ord{font-size:10px;color:var(--c-muted)}
.tl-track{position:relative;display:flex;justify-content:space-between;margin:0 4px 22px}
.tl-track::before{content:"";position:absolute;left:10%;right:10%;top:11px;height:2px;background:rgba(21,36,29,.14)}
.tl-track::after{content:"";position:absolute;left:10%;top:11px;height:2px;background:var(--green);width:0;animation:tlline 5s ease-in-out infinite}
.tl-step{position:relative;z-index:2;text-align:center;flex:1}
.tl-node{width:24px;height:24px;border-radius:50%;border:2px solid rgba(21,36,29,.18);background:#fff;margin:0 auto 9px;position:relative}
.tl-node .dot{position:absolute;inset:-2px;border-radius:50%;background:var(--green);display:grid;place-items:center;transform:scale(0);animation:tlpop 5s ease-in-out infinite}
.tl-node .dot svg{width:11px;height:11px;color:#fff}
.tl-step.n1 .dot{animation-delay:.4s}.tl-step.n2 .dot{animation-delay:1.1s}.tl-step.n3 .dot{animation-delay:1.9s}
.tl-wk{font-size:10px;font-weight:600;color:var(--c-ink);line-height:1.2}
.tl-qty{font-size:9.5px;color:var(--c-muted)}
.tl-bar{height:10px;border-radius:6px;background:rgba(21,36,29,.1);overflow:hidden;position:relative;margin:2px 0 12px}
.tl-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--green);width:0;animation:tlbar 5s ease-in-out infinite}
.tl-stats{display:flex;justify-content:space-between;font-size:11px}
.tl-stats .k{color:var(--c-muted)}
.tl-stats .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--c-ink);margin-left:6px}
.tl-stats .v.out{color:var(--honey)}
@keyframes tlline{0%,6%{width:0}34%{width:40%}60%{width:80%}82%,92%{width:80%}100%{width:0}}
@keyframes tlpop{0%,8%{transform:scale(0)}14%{transform:scale(1.18)}20%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes tlbar{0%,6%{width:0}34%{width:24%}60%{width:52%}82%,92%{width:64%}100%{width:0}}

/* == A: deliveries accumulate == */
.pc-deliv{left:50%;top:30px;transform:translateX(-50%);width:100%;max-width:352px;padding:16px;z-index:2}
.dv-h{font-size:12.5px;font-weight:600;color:var(--c-ink);margin-bottom:2px}
.dv-sub{font-size:10px;color:var(--c-muted);margin-bottom:12px}
.dv-rw{display:grid;grid-template-columns:18px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--c-line);font-size:11.5px}
.dv-rw:first-of-type{border-top:0}
.dv-grn{font-weight:600;color:var(--c-ink)}
.dv-wk{color:var(--c-muted);font-size:10px}
.dv-q{font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-ink);min-width:56px;text-align:right}
.dv-rw.d1 .ck{animation-delay:.4s}.dv-rw.d2 .ck{animation-delay:.9s}.dv-rw.d3 .ck{animation-delay:1.4s}
.dv-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-line);font-size:12px}
.dv-total .k{color:var(--c-muted)}
.dv-total .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.dv-match{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:10px;font-weight:600;color:var(--green);
  background:var(--g-soft);border:1px solid rgba(16,128,92,.25);border-radius:999px;padding:5px 11px;
  opacity:0;animation:popin 5s ease infinite;animation-delay:1.8s}

/* == B: open balance table == */
.pc-bal{left:50%;top:28px;transform:translateX(-50%);width:100%;max-width:356px;padding:16px;z-index:2}
.bal-h{font-size:12.5px;font-weight:600;color:var(--c-ink);margin-bottom:12px}
.bal-hd,.bal-rw{display:grid;grid-template-columns:1fr 42px 46px 44px;gap:8px;align-items:center;font-size:11px}
.bal-hd{font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);padding-bottom:8px;border-bottom:1px solid var(--c-line)}
.bal-hd .r,.bal-rw .num{text-align:right;font-variant-numeric:tabular-nums}
.bal-rw{padding:9px 0;border-top:1px solid var(--c-line);color:var(--c-ink)}
.bal-rw:first-of-type{border-top:0}
.bal-rw .num{color:var(--c-muted)}
.bal-rw .open{font-weight:700;color:var(--green);text-align:right;font-variant-numeric:tabular-nums}
.bal-rw.back .open{color:var(--honey)}
.bal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:9px 11px;border-radius:9px;
  background:var(--honey-soft);border:1px solid rgba(181,122,22,.28);font-size:10.5px;font-weight:600;color:#8A5A08;
  opacity:0;animation:popin 5s ease infinite;animation-delay:1.6s}

/* == C: returns & credits == */
.pc-ret{left:50%;top:34px;transform:translateX(-50%);width:100%;max-width:340px;padding:16px;z-index:2}
.rt-h{font-size:12.5px;font-weight:600;color:var(--c-ink);margin-bottom:12px}
.rt-rw{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--c-line);font-size:11.5px;color:var(--c-ink)}
.rt-rw:first-of-type{border-top:0}
.rt-rw .k{color:var(--c-muted)}
.rt-rw .v{font-weight:600;font-variant-numeric:tabular-nums}
.rt-neg{color:#B23A2E;font-weight:700}
.rt-credit{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:9px;background:var(--surface-l);border:1px solid var(--line-l);
  font-size:10.5px;color:var(--c-ink);opacity:0;animation:popin 5s ease infinite;animation-delay:1s}
.rt-credit .tag{font-weight:700;color:var(--green)}
.rt-owed{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:11px;border-top:1px solid var(--c-line);font-size:12px}
.rt-owed .k{color:var(--c-muted)}
.rt-owed .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--green-deep)}

/* == D: over-billing guard == */
.pc-bill{left:50%;top:30px;transform:translateX(-50%);width:100%;max-width:350px;padding:16px;z-index:2}
.bi-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bi-t{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.bi-recv{font-size:10px;font-weight:700;color:var(--green);background:var(--g-soft);border:1px solid rgba(16,128,92,.22);border-radius:999px;padding:3px 9px}
.bi-rw{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--c-line);font-size:11.5px;color:var(--c-ink)}
.bi-rw:first-of-type{border-top:0}
.bi-inv{font-weight:600}
.bi-cum{font-size:9.5px;color:var(--c-muted)}
.bi-q{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.bi-rw.i1 .ck{animation-delay:.5s}.bi-rw.i2 .ck{animation-delay:1s}
.bi-x{width:18px;height:18px;border-radius:50%;background:#fff;border:1.6px solid rgba(200,70,50,.5);display:grid;place-items:center;flex:none}
.bi-x svg{width:9px;height:9px;color:#C84632}
.bi-guard{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 11px;border-radius:9px;
  background:rgba(200,70,50,.08);border:1px solid rgba(200,70,50,.3);font-size:10.5px;font-weight:600;color:#B23A2E;
  opacity:0;animation:popin 5s ease infinite;animation-delay:1.7s}

/* == reduced motion == */
@media (prefers-reduced-motion:reduce){
  .ck,.tl-track::after,.tl-node .dot,.tl-bar .fill,.dv-match,.bal-foot,.rt-credit,.bi-guard{animation:none!important}
  .ck,.tl-node .dot{transform:scale(1)!important}
  .dv-match,.bal-foot,.rt-credit,.bi-guard{opacity:1!important}
  .tl-track::after{width:80%!important}
  .tl-bar .fill{width:64%!important}
}