/* Tamra site v2 — the Manufacturing module page (pages/modules/manufacturing.html).
   Mock-ups drawn from src/modules/manufacturing/Manufacturing.jsx (BomEditor, MoEditor, ShopFloor, CompleteDialog),
   Unbuild.jsx and MRP.jsx, in the Quiet theme. Every selector sits under .vg-mo (the main mock-up), .vg-mo-mrp
   (planning) or .mo-… (page layout). Hidden starting states live only under .motion. */

/* ── the main mock-up: one page, five screens, switched by the tour's data-state ─────────────── */
.vg-mo .page{padding:0}
.vg-mo .mo-scr{position:absolute;inset:0;padding:15px 24px 0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.vg-mo:not([data-state]) .s-bom,.vg-mo[data-state=bom] .s-bom,.vg-mo[data-state=mo] .s-mo,.vg-mo[data-state=floor] .s-floor,
.vg-mo[data-state=complete] .s-done,.vg-mo[data-state=unbuild] .s-done{opacity:1;visibility:visible;transition:opacity .5s ease .1s,visibility 0s}
/* the header row follows the screen: its crumb, and the open records as tabs */
.vg-mo .mo-crumb em{display:none}
.vg-mo:not([data-state]) .c-bom,.vg-mo[data-state=bom] .c-bom,.vg-mo[data-state=mo] .c-mo,.vg-mo[data-state=complete] .c-mo,.vg-mo[data-state=unbuild] .c-mo,.vg-mo[data-state=floor] .c-floor{display:inline}
.vg-mo .mo-t2 em{display:none}
.vg-mo:not([data-state]) .mo-t2,.vg-mo[data-state=bom] .mo-t2{display:none}
.vg-mo[data-state=mo] .t-new,.vg-mo[data-state=floor] .t-num,.vg-mo[data-state=complete] .t-num,.vg-mo[data-state=unbuild] .t-num{display:inline}
.vg-mo:not([data-state]) .mo-t1,.vg-mo[data-state=bom] .mo-t1,.vg-mo[data-state=mo] .mo-t2,.vg-mo[data-state=complete] .mo-t2,.vg-mo[data-state=unbuild] .mo-t2{
  color:#1A1A1E;background:#FFFFFF;box-shadow:0 1px 3px rgba(18,38,28,.08),0 0 0 1px rgba(30,142,90,.16)}
.vg-mo:not([data-state]) .mo-t1 .glyph,.vg-mo[data-state=bom] .mo-t1 .glyph,.vg-mo[data-state=mo] .mo-t2 .glyph,.vg-mo[data-state=complete] .mo-t2 .glyph,.vg-mo[data-state=unbuild] .mo-t2 .glyph{color:#1E8E5A;opacity:1}

/* shared parts (mfgUi.jsx: lbl, inp, box; StatusPill; StockBadge) */
.vg-mo .mo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;min-height:38px}
.vg-mo .mo-h1{display:flex;align-items:center;gap:10px;font:800 22px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-mo .mo-code{font:400 11.5px/1.3 "SF Mono",Monaco,ui-monospace,monospace;color:#626976;margin-top:2px}
.vg-mo .mo-acts{display:flex;align-items:center;gap:8px}
.vg-mo .mo-box{padding:13px 16px;border-radius:12px;background:#FFFFFF;border:1px solid #D6DEE8;margin-bottom:11px}
.vg-mo .mo-grid{display:grid;gap:12px 14px}
.vg-mo .g-bom{grid-template-columns:2fr 1fr 1fr 1fr}
.vg-mo .g-mo{grid-template-columns:1.5fr 1.5fr 1fr 1fr}
.vg-mo label,.vg-mo-mrp label{display:block;font:700 10.5px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.vg-mo label small{font:500 10px/1 "Inter",sans-serif;color:#626976;text-transform:none;letter-spacing:0;margin-left:6px}
.vg-mo .rq{color:#E11D48;font-style:normal}
.vg-mo .in{display:block;position:relative;padding:8px 10px;border-radius:8px;background:#FFFFFF;border:1px solid #D6DEE8;color:#0F1A2B;font-size:13px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-mo .in.r{text-align:right}
.vg-mo .in.sel,.vg-mo .in.dt{padding-right:30px}
.vg-mo .in.sel .ic,.vg-mo .in.dt .ic{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:#626976}
.vg-mo .mo-hint{font-size:10px;color:#626976;margin-top:5px}
.vg-mo .mo-subc{display:flex;align-items:center;gap:9px;padding-top:9px;padding-bottom:9px}
.vg-mo .cb,.vg-mo-mrp .cb{width:13px;height:13px;border-radius:3px;border:1.5px solid #9AA3AF;background:#FFFFFF;flex:none}
.vg-mo .mo-subc b{display:block;font:700 13px/1.3 "Inter",sans-serif;color:#0F1A2B}
.vg-mo .mo-subc small{display:block;font-size:10px;color:#626976}
.vg-mo .pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font:700 10.5px/1.4 "Inter",sans-serif;letter-spacing:.02em;white-space:nowrap}
.vg-mo .pill.xs{padding:1px 6px;font-size:9.5px}
.vg-mo .pill.ok{color:#1E8E5A;background:rgba(30,142,90,.10);border:1px solid rgba(30,142,90,.22)}
.vg-mo .pill.warn{color:#9A5B00;background:rgba(154,91,0,.10);border:1px solid rgba(154,91,0,.22)}
.vg-mo .pill.mu{color:#626976;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08)}
.vg-mo .mo-info,.vg-mo-mrp .mr-info{display:flex;align-items:center;gap:6px;width:max-content;font:600 11.5px/1.2 "Inter",sans-serif;color:#2563EB;margin-bottom:14px}
.vg-mo .mo-info .ic,.vg-mo-mrp .mr-info .ic{width:13px;height:13px}

/* the lines table (a white panel, header on #F1F4F8) */
.vg-mo .mo-tbl{border-radius:12px;background:#FFFFFF;border:1px solid #D6DEE8;overflow:hidden;margin-bottom:11px}
.vg-mo .mo-tr{display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 100px 110px 30px;align-items:center}
.vg-mo .t-mo .mo-tr{grid-template-columns:minmax(0,1fr) 110px 110px 100px 110px 30px}
.vg-mo .mo-th{background:#F1F4F8;border-bottom:1px solid rgba(0,0,0,.06)}
.vg-mo .mo-th span{padding:10px 14px;font:700 10px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.5px}
.vg-mo .mo-ln{border-bottom:1px solid rgba(0,0,0,.03)}
.vg-mo .mo-ln>span{padding:5px 10px;min-width:0}
.vg-mo .r{text-align:right}
.vg-mo .mo-ln .in{font-size:12px;padding:6px 8px}
.vg-mo .mo-ln .in.sel{font-size:11px;padding:6px 24px 6px 6px}
.vg-mo .mo-ln .in.sel .ic{right:6px;width:12px;height:12px}
.vg-mo .sb{display:block;font:600 9px/1.2 "SF Mono",ui-monospace,monospace;letter-spacing:.02em;color:#1E8E5A;margin-top:3px;font-style:normal;width:max-content;padding:1px 3px;margin-left:-3px;border-radius:4px}
.vg-mo .mo-ln .uc{font-size:11px;color:#626976}
.vg-mo .mo-ln .st{font-weight:700;font-size:12px;color:#0F1A2B;border-radius:6px}
.vg-mo .mo-ln .x{color:#626976}
.vg-mo .mo-ln .x .ic{width:12px;height:12px}
.vg-mo .pq small{display:block;font-size:10px;color:#626976;margin-top:2px;text-align:right}
.vg-mo .cq{font-size:12.5px;color:#626976}
.vg-mo .mo-tot{background:#F1F4F8;font-weight:700}
.vg-mo .mo-tot .lb{grid-column:1/5;padding:8px 14px;text-align:right;font:700 11px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase}
.vg-mo .mo-tot b{padding:8px 14px;font:800 14px/1.2 "Inter",sans-serif;color:#0F1A2B}
.vg-mo .mo-tot .mo-odo{justify-content:flex-end}
.vg-mo .mo-add{padding:8px 10px;border-top:1px solid rgba(0,0,0,.04)}
.vg-mo .dash{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;border:1px dashed rgba(0,0,0,.18);font:600 11.5px/1.2 "Inter",sans-serif;color:#444D5A}
.vg-mo .dash .ic{width:11px;height:11px}

/* the roll-up strip: five cells under the lines */
.vg-mo .mo-roll{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:12px;background:#FFFFFF;border:1px solid #D6DEE8;overflow:hidden}
.vg-mo .rc{padding:12px 14px;min-width:0;border-right:1px solid #E6ECF2}
.vg-mo .rc:last-child{border-right:0}
.vg-mo .rc small{display:block;font:600 11px/1.3 "Inter",sans-serif;color:#626976}
.vg-mo .rc>b{display:flex;font:700 15px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B;margin-top:4px;height:18px}
.vg-mo .rc-cu>b{font-size:17px;height:20.4px}
.vg-mo .rc em{display:block;font-size:11px;line-height:1.3;color:#626976;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* figures that roll like a counter: each digit is a column of 0–9, set to its own figure */
.vg-mo .mo-odo{display:flex;align-items:flex-start;overflow:hidden}
.vg-mo .mo-odo i,.vg-mo .mo-odo s,.vg-mo .mo-clock i,.vg-mo .mo-clock s{display:block;height:1.2em;line-height:1.2em;overflow:hidden;text-decoration:none;font-style:normal}
/* the column is as wide as its own figure (held by the real digit, drawn clear); the strip rolls over it */
.vg-mo .mo-odo i,.vg-mo .mo-clock i{position:relative;color:transparent}
.vg-mo .mo-odo i::before,.vg-mo .mo-clock i::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";position:absolute;left:50%;top:0;white-space:pre;line-height:1.2em;text-align:center;
  color:var(--oc,#0F1A2B);transform:translate(-50%,calc(var(--v,0) * -1.2em))}
.vg-mo .mo-clock .d-t::before{content:"0\A 1\A 2\A 3\A 4\A 5"}

/* ── 2 · the new order: routing preview and its cost ───────────────────────────────────────── */
.vg-mo .tv{display:block;padding:8px 0;font-size:13px;line-height:1.3;color:#444D5A;white-space:nowrap}
.vg-mo .tv b{font-weight:700;color:#0F1A2B}
.vg-mo .tv small{font-size:11px;color:#626976;margin-left:6px}
.vg-mo .tvb{font:700 13px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-mo .mo-rp{margin-bottom:14px;padding:14px;border-radius:12px;background:#F1F4F8;border:1px solid #E6ECF2;display:flex;flex-direction:column;gap:6px}
.vg-mo .rp-t{font:700 11px/1.2 "Inter",sans-serif;color:#444D5A;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.vg-mo .rp-r{display:grid;grid-template-columns:24px 1fr 1.5fr 1fr 100px 100px;gap:10px;align-items:center;font-size:11px;padding:4px 0}
.vg-mo .rp-r .n{color:#626976}
.vg-mo .rp-r b{font-weight:600;color:#0F1A2B}
.vg-mo .rp-r span{color:#444D5A}
.vg-mo .rp-r small{font-size:10px;color:#626976}
.vg-mo .rp-r b.r{font-weight:700}
.vg-mo .mo-cost{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vg-mo .mo-cost b{display:block;font:700 14px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B;padding:4px 0}
.vg-mo .mo-cost b.ts{color:#444D5A}
.vg-mo .mo-cost b.lg{font-size:16px;font-weight:800}

/* ── 3 · the shop floor ─────────────────────────────────────────────────────────────────────── */
.vg-mo .mo-ph{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.vg-mo .ph-t{font:800 24px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#0F1A2B}
.vg-mo .ph-s{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.5;color:#626976;margin-top:4px}
.vg-mo .pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#1E8E5A;flex:none}
.vg-mo .mo-chips{display:flex;gap:6px}
.vg-mo .mo-chips span{padding:7px 13px;border-radius:999px;border:1px solid rgba(0,0,0,.10);font:700 12px/1.2 "Inter",sans-serif;color:#444D5A;white-space:nowrap}
.vg-mo .mo-chips em{opacity:.55;margin-left:5px}
.vg-mo .mo-chips .on{background:#0F1A2B;border-color:#0F1A2B;color:#FFFFFF}
.vg-mo .mo-chips .on em{opacity:.7}
.vg-mo .mo-ms,.vg-mo-mrp .mr-ms{display:flex;border:1px solid #D6DEE8;border-radius:14px;background:#FFFFFF;overflow:hidden;margin-bottom:18px}
.vg-mo .mo-ms>div,.vg-mo-mrp .mr-ms>div{flex:1;min-width:0;padding:14px 22px;border-right:1px solid rgba(0,0,0,.06)}
.vg-mo .mo-ms small,.vg-mo-mrp .mr-ms small{display:block;font:600 11px/1.3 "Inter",sans-serif;color:#626976}
.vg-mo .mo-ms b,.vg-mo-mrp .mr-ms b{display:block;font:700 22px/1.25 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#0F1A2B;margin-top:3px;white-space:nowrap}
.vg-mo .mo-ms b.ok{color:#1E8E5A}
.vg-mo .mo-ms .car,.vg-mo-mrp .mr-ms .car{width:40px;flex:none;display:grid;place-items:center;color:#626976}
.vg-mo .mo-ms .car .ic,.vg-mo-mrp .mr-ms .car .ic{width:14px;height:14px}
.vg-mo .mo-wc{border-radius:14px;background:#FFFFFF;border:1px solid #D6DEE8;overflow:hidden;margin-bottom:14px}
.vg-mo .wc-h{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#F1F4F8;border-bottom:1px solid #E6ECF2}
.vg-mo .wc-ic{width:32px;height:32px;border-radius:9px;background:#FFFFFF;border:1px solid #E6ECF2;display:grid;place-items:center;color:#626976;flex:none}
.vg-mo .wc-run .wc-ic{background:rgba(30,142,90,.14);border-color:rgba(30,142,90,.3);color:#1E8E5A}
.vg-mo .wc-h b{display:block;font:700 13px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-mo .wc-h small{display:block;font-size:11px;color:#626976}
.vg-mo .wc-h .pill{margin-left:auto}
.vg-mo .wo{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #E6ECF2}
.vg-mo .wc-h+.wo{border-top:0}
.vg-mo .wo.run{background:rgba(30,142,90,.04)}
.vg-mo .wo-n{width:28px;flex:none;display:flex;flex-direction:column;align-items:center;font-size:10px;color:#626976;gap:3px}
.vg-mo .wo-n .dot{width:10px;height:10px;border-radius:50%;background:#626976}
.vg-mo .run .wo-n .dot{background:#1E8E5A;box-shadow:0 0 0 4px rgba(30,142,90,.18)}
.vg-mo .wo-name{flex:1;min-width:0}
.vg-mo .wo-name b{display:block;font-size:13px;font-weight:600;color:#0F1A2B;margin-bottom:3px}
.vg-mo .wo-mo{width:140px;flex:none}
.vg-mo .wo-mo b{display:block;font:700 11.5px/1.3 "SF Mono",Monaco,ui-monospace,monospace;color:#444D5A}
.vg-mo .wo-mo small{display:block;font-size:11px;color:#626976;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-mo .wo-tm{width:96px;flex:none;display:flex;flex-direction:column;align-items:center}
.vg-mo .wo-tm>b{font:600 12.5px/1.2 "Inter",sans-serif;color:#444D5A}
.vg-mo .wo-tm small{display:block;font-size:10px;color:#626976;margin-top:2px}
.vg-mo .wo-tm>b.mo-clock{display:flex;font:800 16px/1.2 "SF Mono",Monaco,ui-monospace,monospace;color:#1E8E5A;--oc:#1E8E5A;height:1.2em;overflow:hidden}
.vg-mo .wo-c{width:96px;flex:none;text-align:right;font-size:12.5px;font-weight:700;color:#0F1A2B;white-space:nowrap}
.vg-mo .wo-a{width:168px;flex:none;display:flex;gap:5px;justify-content:flex-end}
.vg-mo .mini{height:28px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1 "Inter",sans-serif;white-space:nowrap}
.vg-mo .mini .ic{width:12px;height:12px}
.vg-mo .mini.ok{color:#1E8E5A;background:rgba(30,142,90,.07);border:1px solid rgba(30,142,90,.32)}
.vg-mo .mini.warn{color:#9A5B00;background:rgba(154,91,0,.07);border:1px solid rgba(154,91,0,.32)}
.vg-mo .wait{font-size:11px;color:#626976;padding:4px 2px}

/* ── 4 · MO-0015 behind the dialogs ────────────────────────────────────────────────────────── */
.vg-mo .s-done .p-dn,.vg-mo[data-state=unbuild] .s-done .p-ip{display:none}
.vg-mo[data-state=unbuild] .s-done .p-dn{display:inline-flex}
.vg-mo .mo-trace{margin-top:4px}
.vg-mo .mo-grid.ro{gap:4px 14px}
.vg-mo .mo-wop{border-radius:12px;background:#FFFFFF;border:1px solid #D6DEE8;overflow:hidden}
.vg-mo .wop-h{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:#F1F4F8;border-bottom:1px solid #E6ECF2;font-size:12px;color:#626976}
.vg-mo .wop-h b{display:block;font-size:12.5px;color:#0F1A2B}
.vg-mo .wop-h small{display:block;font-size:11.5px;margin-top:2px}
.vg-mo .wop-r{display:grid;grid-template-columns:28px 1fr 1.3fr 130px 90px 90px;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid #E6ECF2;font-size:12px;color:#444D5A}
.vg-mo .wop-r .ok{color:#1E8E5A;font-weight:700}

/* ── the dialogs ───────────────────────────────────────────────────────────────────────────── */
.vg-mo{isolation:isolate}
.vg-mo .mo-ov{position:absolute;inset:0;z-index:5;background:rgba(15,23,42,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s .45s}
.vg-mo .mo-dlg{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s ease,transform .45s ease,visibility 0s .45s}
.vg-mo[data-state=complete] .mo-ov,.vg-mo[data-state=unbuild] .mo-ov{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.vg-mo[data-state=complete] .d-complete,.vg-mo[data-state=unbuild] .d-unbuild{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .15s,transform .5s cubic-bezier(.2,.7,.2,1) .15s,visibility 0s}
.vg-mo .dlg{width:720px;max-height:774px;display:flex;flex-direction:column;background:#FFFFFF;border-radius:16px;border:1px solid #D6DEE8;box-shadow:0 24px 60px rgba(15,23,42,.22);overflow:hidden}
.vg-mo .d-unbuild .dlg{width:780px}
.vg-mo .dl-h{padding:18px 24px;border-bottom:1px solid #E6ECF2;flex:none}
.vg-mo .dl-h small{display:block;font:700 10.5px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.08em}
.vg-mo .dl-h b{display:block;font:700 16px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B;margin-top:3px}
.vg-mo .dl-h p{font-size:11px;color:#626976;margin-top:3px}
.vg-mo .dl-b{padding:18px 24px;flex:1;min-height:0;overflow:hidden}
.vg-mo .dl-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid #E6ECF2;flex:none}
.vg-mo .cg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.vg-mo .cg p{font-size:10.5px;color:#626976;margin-top:4px}
.vg-mo .in.big{font-size:16px;font-weight:700}
.vg-mo .lab{display:block;font:700 16px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B;padding:6px 0}
.vg-mo .cc-k{font:700 11px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.vg-mo .cc{border-radius:10px;border:1px solid #D6DEE8;overflow:hidden}
.vg-mo .cc-r{display:grid;grid-template-columns:minmax(0,1fr) 92px 110px 84px 124px;align-items:center;border-top:1px solid rgba(0,0,0,.04)}
.vg-mo .cc-r>*{padding:8px 12px;text-align:right;font-size:11px;color:#626976}
.vg-mo .cc-h{background:#F1F4F8;border-top:0}
.vg-mo .cc-h span{font:700 9px/1.2 "Inter",sans-serif;text-transform:uppercase;letter-spacing:.5px}
.vg-mo .cc-r>:first-child{text-align:left}
.vg-mo .cc .nm{font-size:12px;color:#0F1A2B}
.vg-mo .cc .nm i{display:block;font:600 10px/1.2 "SF Mono",ui-monospace,monospace;color:#1E8E5A;margin-top:3px;font-style:normal}
.vg-mo .cc-r b{font-size:12px;font-weight:700;color:#0F1A2B}
.vg-mo .cc .in{font-size:12px;padding:6px 8px}
.vg-mo .cc-s{display:grid;grid-template-columns:minmax(0,1fr) 124px;background:rgba(0,0,0,.02);border-top:1px solid rgba(0,0,0,.04)}
.vg-mo .cc-s span{padding:8px 12px;text-align:right;font-size:11px;color:#626976}
.vg-mo .cc-s b{padding:8px 12px;text-align:right;font-size:12px;font-weight:700;color:#0F1A2B}
.vg-mo .cc-s b.ts{color:#444D5A}
.vg-mo .cc-t{background:rgba(0,0,0,.06)}
.vg-mo .cc-t span{padding-top:10px;padding-bottom:10px;font-weight:700;color:#0F1A2B;text-transform:uppercase}
.vg-mo .cc-t b{padding-top:10px;padding-bottom:10px;font-size:14px;font-weight:800;white-space:nowrap}
.vg-mo .cnote{margin-top:12px;font-size:11px;line-height:1.5;color:#626976}
.vg-mo .cnote p+p{margin-top:4px}
.vg-mo .cnote b{color:#0F1A2B}
/* unbuild */
.vg-mo .ub-h{display:flex;gap:12px;align-items:flex-start;padding:14px 22px 10px}
.vg-mo .ub-h b{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.vg-mo .ub-h p{font-size:12px}
.vg-mo .ub-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#F1F4F8;color:#0F1A2B;flex:none}
.vg-mo .ub-ic .ic{width:17px;height:17px}
.vg-mo .ub-x{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;color:#626976}
.vg-mo .d-unbuild .dl-b{padding:13px 22px}
.vg-mo .d-unbuild .dl-f{padding:10px 22px}
.vg-mo .ug{display:grid;grid-template-columns:170px 170px 1fr;gap:12px;align-items:end;margin-bottom:8px}
.vg-mo .ug p{font-size:11px;color:#626976;margin-top:4px}
.vg-mo .ug .in.big{font-size:15px}
.vg-mo .ug .mo-info{margin:0 0 18px}
.vg-mo .ub-ok{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#444D5A;margin-bottom:8px}
.vg-mo .ub-ok .ic{width:15px;height:15px;color:#1E8E5A}
.vg-mo .ut{border-radius:12px;border:1px solid #D6DEE8;overflow:hidden;margin-bottom:8px}
.vg-mo .ut-r{display:grid;grid-template-columns:minmax(0,1fr) 92px 120px 96px 92px;align-items:center;border-top:1px solid #E6ECF2}
.vg-mo .ut-r>*{padding:5px 10px;text-align:right;font-size:12.5px;color:#444D5A}
.vg-mo .ut-r>:first-child{text-align:left}
.vg-mo .ut-h{background:#F1F4F8;border-top:0}
.vg-mo .ut-h span{padding:6px 10px;font:700 10px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.vg-mo .ut .nm{color:#0F1A2B;font-weight:600}
.vg-mo .ut .nm i{display:block;font-size:11px;font-weight:400;color:#626976;margin-top:2px;font-style:normal}
.vg-mo .ut .in{font-size:12.5px;padding:6px 8px}
.vg-mo .ut .no{color:#626976}
.vg-mo .ut .off{color:#E11D48;font-weight:700}
.vg-mo .ut .off i{display:block;font-size:11px;font-weight:600;margin-top:2px;font-style:normal}
.vg-mo .ut .v{color:#0F1A2B;font-weight:600}
.vg-mo .ut-l{grid-template-columns:minmax(0,1fr) 92px}
.vg-mo .ut-t{grid-template-columns:minmax(0,1fr) 110px;background:#F1F4F8}
.vg-mo .ut-t span:first-child{text-align:right;font:700 11px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.05em}
.vg-mo .ut-t .v{font-weight:800;white-space:nowrap}
.vg-mo .u-off{background:rgba(225,29,72,.035)}
.vg-mo .why{margin-bottom:8px}
.vg-mo .why-c{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.vg-mo .why .in{padding-top:6px;padding-bottom:6px}
.vg-mo .why-c span{padding:5px 11px;border-radius:999px;border:1px solid rgba(0,0,0,.10);font:700 11.5px/1.2 "Inter",sans-serif;color:#444D5A}
.vg-mo .why-c .on{background:#0F1A2B;border-color:#0F1A2B;color:#FFFFFF}
.vg-mo .what{padding:9px 14px;border-radius:12px;background:#F1F4F8;border:1px solid #E6ECF2;font-size:12.5px;line-height:1.5;color:#444D5A}
.vg-mo .what b{display:block;color:#0F1A2B;margin-bottom:2px}
.vg-mo .what .bad{color:#E11D48}

/* ── motion, hero only: the recipe prices itself, the totals roll up, the stock says how many ─── */
.motion .m-shot:not(.in) .vg-mo .mo-ln .uc,.motion .m-shot:not(.in) .vg-mo .mo-ln .st{opacity:0}
.motion .m-shot.in .vg-mo .mo-ln .uc{animation:moIn .45s ease calc(var(--l) * 230ms + 380ms) both}
.motion .m-shot.in .vg-mo .mo-ln .st{animation:moIn .45s ease calc(var(--l) * 230ms + 450ms) both,moRead 1.3s ease calc(var(--l) * 230ms + 450ms)}
.motion .m-shot:not(.in) .vg-mo .mo-odo,.motion .m-shot:not(.in) .vg-mo .rc em,.motion .m-shot:not(.in) .vg-mo .rc-sub b{opacity:0}
.motion .m-shot:not(.in) .vg-mo .mo-odo i::before{transform:translate(-50%,0)}
.motion .m-shot.in .vg-mo .mo-odo{animation:moIn .3s ease var(--t) both}
.motion .m-shot.in .vg-mo .mo-odo i::before{transition:transform 1.2s cubic-bezier(.16,.84,.3,1) var(--t)}
.motion .m-shot.in .vg-mo .rc em{animation:moIn .45s ease calc(var(--t, 1.85s) + .5s) both}
.motion .m-shot.in .vg-mo .rc-sub b{animation:moIn .45s ease 1.85s both}
.motion .m-shot.in .vg-mo .l-dates .sb{animation:moBadge .9s ease 2.5s}
.motion .m-shot.in .vg-mo .l-box .sb{animation:moBadge .9s ease 2.72s}
.motion .m-shot.in .vg-mo .l-rib .sb{animation:moBadge .9s ease 2.94s}
.motion .m-shot.in .vg-mo .l-dates{animation:moLimit 1.6s ease 3.15s}
.motion .m-shot.in .vg-mo .rc-cu{animation:moGlow 1.4s ease 2.95s}
.motion .m-shot.in .vg-mo .rc-cb{animation:moGlow 1.6s ease 3.6s}
@keyframes moIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes moRead{0%{box-shadow:0 0 0 0 rgba(30,142,90,0);background:rgba(30,142,90,0)}25%{box-shadow:0 0 0 2px rgba(30,142,90,.5);background:rgba(30,142,90,.1)}100%{box-shadow:0 0 0 2px rgba(30,142,90,0);background:rgba(30,142,90,0)}}
@keyframes moBadge{0%,100%{background:rgba(30,142,90,0)}35%{background:rgba(30,142,90,.16)}}
@keyframes moLimit{0%,100%{box-shadow:inset 3px 0 0 rgba(30,142,90,0);background:rgba(30,142,90,0)}30%,70%{box-shadow:inset 3px 0 0 #1E8E5A;background:rgba(30,142,90,.05)}}
@keyframes moGlow{0%,100%{background:rgba(30,142,90,0)}35%{background:rgba(30,142,90,.08)}}

/* the shop floor's clock runs while its chapter is on screen; the pulses breathe */
.motion .vg-mo[data-state=floor] .mo-clock .d-s::before{animation:moTick10 10s steps(10,end) -5s infinite}
.motion .vg-mo[data-state=floor] .mo-clock .d-t::before{animation:moTick6 60s steps(6,end) -45s infinite}
.motion .vg-mo[data-state=floor] .mo-clock .d-m::before{animation:moTick10 600s steps(10,end) -225s infinite}
.motion .vg-mo[data-state=floor] .pulse{animation:moPulse 2s ease-in-out infinite}
@keyframes moTick10{from{transform:translate(-50%,0)}to{transform:translate(-50%,-12em)}}
@keyframes moTick6{from{transform:translate(-50%,0)}to{transform:translate(-50%,-7.2em)}}
@keyframes moPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── planning (MRP.jsx): demand from open orders, netted against stock and supply ───────────── */
.vg-mo-mrp{background:#FFFFFF;padding:26px 30px}
.vg-mo-mrp .mr-ph{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.vg-mo-mrp .mr-t{font:800 24px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#0F1A2B}
.vg-mo-mrp .mr-s{font-size:12.5px;line-height:1.5;color:#626976;margin-top:4px}
.vg-mo-mrp .mr-acts{display:flex;gap:8px;align-items:center}
.vg-mo-mrp .mr-info{margin-bottom:16px}
.vg-mo-mrp .mr-ms b.bad{color:#E11D48}
.vg-mo-mrp .mr-flt{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#444D5A;margin-bottom:12px}
.vg-mo-mrp .mr-flt em{font-size:11.5px;color:#626976;margin-left:4px}
.vg-mo-mrp .mr-tbl{border:1px solid #D6DEE8;border-radius:12px;overflow:hidden;background:#FFFFFF}
.vg-mo-mrp .mr-r{display:grid;grid-template-columns:minmax(0,1.7fr) .7fr .7fr .7fr .9fr minmax(0,1.25fr) 40px;align-items:center;border-top:1px solid #E6ECF2}
.vg-mo-mrp .mr-r>*{padding:11px 14px;text-align:right;font-size:12.5px;color:#444D5A;min-width:0}
.vg-mo-mrp .mr-r>:first-child,.vg-mo-mrp .mr-r .act{text-align:left}
.vg-mo-mrp .mr-h{background:#EEF2F6;border-top:0;border-bottom:1px solid #D6DEE8}
.vg-mo-mrp .mr-h span{font:700 10.5px/1.2 "Inter",sans-serif;color:#334155;text-transform:uppercase;letter-spacing:.03em}
.vg-mo-mrp .mr-h+.mr-r{border-top:0}
.vg-mo-mrp .cmp{display:flex;align-items:center;gap:8px}
.vg-mo-mrp .cmp .ic{width:13px;height:13px;color:#626976}
.vg-mo-mrp .cmp .ic.bad{color:#E11D48}
.vg-mo-mrp .cmp b{display:block;font-size:13px;font-weight:600;color:#0F1A2B}
.vg-mo-mrp .cmp small{display:block;font:400 10.5px/1.3 "SF Mono",Monaco,ui-monospace,monospace;color:#626976}
.vg-mo-mrp .ink{color:#0F1A2B}
.vg-mo-mrp .mu{color:#626976}
.vg-mo-mrp .net{font-size:13px;font-weight:700}
.vg-mo-mrp .net.bad{color:#E11D48}
.vg-mo-mrp .net.ok{color:#1E8E5A}
.vg-mo-mrp .act{display:flex;align-items:center;gap:6px}
.vg-mo-mrp .sp{display:inline-flex;align-items:center;gap:5px;padding:1px 6px;border-radius:999px;font:700 9.5px/1.4 "Inter",sans-serif;letter-spacing:.02em;color:#444D5A;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08)}
.vg-mo-mrp .sp .ic{width:9px;height:9px}
.vg-mo-mrp .sp.ok{color:#1E8E5A;background:rgba(30,142,90,.10);border-color:rgba(30,142,90,.22)}
.vg-mo-mrp .lnk{font:700 11.5px/1.2 "Inter",sans-serif;color:#2563EB;white-space:nowrap}
.vg-mo-mrp .kb{color:#626976;display:flex;justify-content:center}
.vg-mo-mrp .kb .ic{width:14px;height:14px}
.vg-mo-mrp .mr-how{font-size:11.5px;line-height:1.55;color:#626976;margin-top:12px}
.vg-mo-mrp .mr-how b{color:#444D5A}
/* plays once: the rows come in, the shortage is found, Buy is offered */
.motion .shot:not(.in) .vg-mo-mrp .mr-row{opacity:0;transform:translateY(6px)}
.motion .shot.in .vg-mo-mrp .mr-row{transition:opacity .5s ease calc(var(--r) * 180ms + 250ms),transform .5s ease calc(var(--r) * 180ms + 250ms)}
.motion .shot:not(.in) .vg-mo-mrp .r-short .act,.motion .shot:not(.in) .vg-mo-mrp .mr-ms b{opacity:0}
.motion .shot.in .vg-mo-mrp .mr-ms b{transition:opacity .5s ease .9s}
.motion .shot.in .vg-mo-mrp .r-short .net{animation:mrShort 1.4s ease 1.1s}
.motion .shot.in .vg-mo-mrp .r-short .act{transition:opacity .5s ease 1.6s}
.motion .shot:not(.in) .vg-mo-mrp .mr-buy{opacity:.4}
.motion .shot.in .vg-mo-mrp .mr-buy{transition:opacity .5s ease 2s}
@keyframes mrShort{30%{background:rgba(225,29,72,.10)}}

/* ── page layout ───────────────────────────────────────────────────────────────────────────── */
.mo-plan .shot{box-shadow:0 1px 2px rgba(15,26,43,.06),0 24px 56px -28px rgba(15,26,43,.35)}
.mo-none .entry-empty{min-height:0;height:auto;flex:1;padding:22px 24px;background:#fff}
.mo-none .entry-empty b{font-size:17px}
.mo-none .entry-empty span{font-size:14.5px;line-height:1.55}