:root{--bg:#EBEFE8;--panel:#FFFFFF;--ink:#16302A;--muted:#5A6D64;--line:#D2DBD3;--leaf:#1F5C43;--leaf2:#2E7A58;--leafbg:#E1EEE6;--gold:#B9821F;--goldbg:#F7EDD8;--warn:#94510F;--warnbg:#FBEDDB;--bad:#A3241C;--badbg:#FBE5E2;--ok:#23704A;--okbg:#E0F0E6;--scr:#F7F9F6;--dev:#252B2D;--bump:#D69E27;--neu:#EEF1EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1613;--panel:#16201C;--ink:#E2EBE5;--muted:#93A69C;--line:#2A3832;--leaf:#5DB98E;--leaf2:#4FA87F;--leafbg:#17302A;--gold:#E0AE4E;--goldbg:#33291A;--warn:#F0B26A;--warnbg:#36271A;--bad:#F08A80;--badbg:#3A1D1A;--ok:#6CCB97;--okbg:#173026;--scr:#111A16;--dev:#060908;--bump:#B9861E;--neu:#1E2a25}}
:root[data-theme="dark"]{--bg:#0E1613;--panel:#16201C;--ink:#E2EBE5;--muted:#93A69C;--line:#2A3832;--leaf:#5DB98E;--leaf2:#4FA87F;--leafbg:#17302A;--gold:#E0AE4E;--goldbg:#33291A;--warn:#F0B26A;--warnbg:#36271A;--bad:#F08A80;--badbg:#3A1D1A;--ok:#6CCB97;--okbg:#173026;--scr:#111A16;--dev:#060908;--bump:#B9861E;--neu:#1E2a25}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;margin:0;letter-spacing:-.01em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--leaf2);outline-offset:2px}
.top{max-width:1240px;margin:0 auto;padding:18px 20px 4px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:38px;height:38px;border-radius:10px;background:var(--leaf);display:grid;place-items:center}
.top h1{font-size:26px;font-weight:700;line-height:1.1}
.top p{margin:2px 0 0;color:var(--muted);font-size:14px}
.tools{display:flex;gap:8px}
.wrap{max-width:1240px;margin:0 auto;padding:16px 20px 40px;display:grid;grid-template-columns:392px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:980px){.wrap{grid-template-columns:minmax(0,1fr)}}
.devcol{position:sticky;top:12px}
@media (max-width:980px){.devcol{position:static}}
.device{position:relative;isolation:isolate;width:360px;max-width:100%;margin:8px auto 0;background:var(--dev);border-radius:40px;padding:26px 12px 26px;box-shadow:0 20px 40px rgba(10,30,20,.25)}
.bump{position:absolute;width:64px;height:64px;background:var(--bump);border-radius:24px;z-index:-1}
.bump.tl{left:-6px;top:-6px}.bump.tr{right:-6px;top:-6px}.bump.bl{left:-6px;bottom:-6px}.bump.br{right:-6px;bottom:-6px}
.scanwin{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:70px;height:8px;border-radius:4px;background:#5a1712;box-shadow:inset 0 0 4px #e5372b}
.devlabel{position:absolute;bottom:7px;left:0;right:0;text-align:center;color:#8d968f;font-size:10px;letter-spacing:.04em}
.screen{background:var(--scr);border-radius:24px;height:640px;overflow:auto;overscroll-behavior:contain}
.sbar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;padding:7px 16px;font-size:12px;font-weight:600;background:var(--scr);color:var(--muted)}
.sbar .sig{color:var(--warn)}.sbar .sig.on{color:var(--ok)}
.sh{padding:6px 16px 10px;border-bottom:1px solid var(--line)}
.sh h3{font-size:19px}
.sh p{margin:3px 0 0;color:var(--muted);font-size:13px}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.row.wrap{flex-wrap:wrap;justify-content:flex-start}
.pad{padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}
.steps{display:flex;gap:4px;margin:2px 0 8px}
.steps span{flex:1;font-size:10.5px;font-weight:600;color:var(--muted);padding-top:5px;border-top:3px solid var(--line)}
.steps span.done{border-color:var(--leaf2);color:var(--leaf2)}
.steps span.on{border-color:var(--gold);color:var(--ink)}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 14px;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--leaf2)}
.btn.pri{background:var(--leaf);border-color:var(--leaf);color:#fff}
:root[data-theme="dark"] .btn.pri{color:#06130d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{color:#06130d}}
.btn.big{width:100%;padding:13px 14px;font-size:15.5px;border-radius:12px}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.lnk{background:none;border:0;color:var(--leaf2);font-weight:600;cursor:pointer;padding:4px 0;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chip.ok{background:var(--okbg);color:var(--ok)}.chip.warn{background:var(--warnbg);color:var(--warn)}.chip.bad{background:var(--badbg);color:var(--bad)}.chip.neu{background:var(--neu);color:var(--muted)}.chip.ai{background:var(--goldbg);color:var(--gold)}
.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.check li{display:flex;gap:10px;align-items:flex-start}
.check b{display:block;font-size:14px}.check small,.calib small{color:var(--muted);font-size:12.5px;display:block}
.tick{width:22px;height:22px;border-radius:50%;background:var(--okbg);color:var(--ok);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.calib{border:1px dashed var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.okline{background:var(--okbg);color:var(--ok);border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:500}
.alert{border-radius:12px;padding:11px 12px;font-size:13.5px}
.alert b{display:block;margin-bottom:2px}
.alert.warn{background:var(--warnbg);color:var(--warn)}.alert.bad{background:var(--badbg);color:var(--bad)}.alert.neu{background:var(--neu);color:var(--ink)}
.alert .row{margin-top:8px;justify-content:flex-start}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mini3>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px}
.mini3 b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.mini3 small{color:var(--muted);font-size:11.5px}
.nextT{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:10px 12px}
.nextT small{display:block;color:var(--muted);font-size:12px}.nextT b{display:block;font-size:17px}.nextT span{font-size:13px;color:var(--muted)}
.hint{margin:-4px 0 0;color:var(--muted);font-size:12.5px}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:13px}
.tview{background:#D9D2C1;border-radius:12px;padding:10px}
.tview.cam{background:#1d2220;position:relative}
.tview.cam::after{content:"";position:absolute;inset:16px;border:2px solid rgba(255,255,255,.7);border-radius:8px;pointer-events:none}
.tview svg{display:block;width:100%;height:auto}
.laser{animation:sweep 1s ease-in-out infinite alternate}
@keyframes sweep{from{transform:translateY(0)}to{transform:translateY(152px)}}
.flist{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.f{display:grid;grid-template-columns:92px 1fr auto;gap:8px;align-items:center;padding:7px 12px;border-top:1px solid var(--line)}
.f:first-child{border-top:0}
.f small{color:var(--muted);font-size:12px}.f b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.typed{margin:-4px 0 0;font-size:12.5px;color:var(--ok);font-weight:600}
.crop{margin:8px 0 2px}.crop svg{width:170px;height:auto;display:block}
.bt{font-size:12.5px;color:var(--ok);font-weight:600}
.scale{background:#10201a;color:#7CF0B0;border-radius:12px;padding:12px 14px}
.scale small{color:#8fb9a3;font-size:12px}
.scale div{display:flex;align-items:baseline;gap:8px}
.scale span{font-size:42px;font-weight:700;font-variant-numeric:tabular-nums;font-family:"Bricolage Grotesque",Figtree,sans-serif}
.scale em{font-style:normal;color:#8fb9a3}
.scale.locked{box-shadow:inset 0 0 0 2px #39b876}
.scale.sm span{font-size:28px}
.photo{border-radius:12px;overflow:hidden;position:relative;background:#2b2f2d}
.photo svg{display:block;width:100%;height:auto}
.photo.empty{height:170px;display:grid;place-items:center;color:#c8cfca;font-size:13px;border:2px dashed #59615c;background:#1f2422}
.stamp{position:absolute;left:8px;bottom:6px;color:#fff;font-size:10.5px;background:rgba(0,0,0,.45);padding:1px 6px;border-radius:4px}
.ai{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:10px 12px}
.ai.bad{border-left-color:var(--bad)}.ai.warnb{border-left-color:var(--warn)}
.aih{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ai p{margin:4px 0 6px;font-size:13.5px}
.ai details{font-size:13px;margin-bottom:6px}
.ai summary{cursor:pointer;color:var(--gold);font-weight:600}
.ai details p{color:var(--muted)}
.voice{border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.voice p{margin:0}.te{font-size:15px;font-weight:600}
.label{display:flex;gap:12px;align-items:center;background:#fff;color:#111;border-radius:10px;padding:12px;border:1px solid #cfcfc8}
.label .lq svg{width:86px;height:86px;display:block}
.label small{font-size:11px;color:#555;display:block}.label b{font-size:17px;display:block}.label span{display:block;font-size:12.5px}
.sigbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sigbox small{display:block;color:var(--muted);font-size:12px}
.sigbox code{font-size:13.5px;word-break:break-all;color:var(--ink)}
.note{width:360px;max-width:100%;margin:16px auto 0;font-size:13.5px;color:var(--muted);border-left:3px solid var(--gold);padding:2px 0 2px 12px}
.note b{color:var(--ink)}
.side{display:flex;flex-direction:column;gap:18px;min-width:0}
.conn{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-radius:16px;padding:16px 18px;background:var(--warnbg);color:var(--warn)}
.conn.on{background:var(--okbg);color:var(--ok)}
.conn h2{font-size:22px}
.conn p{margin:2px 0 0;font-size:14px}
.blk{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.blk h2{font-size:17px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.blk h2 small{font-family:Figtree,sans-serif;font-weight:500;color:var(--muted);font-size:13px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right}
tr.new td{background:var(--leafbg)}
.empty{color:var(--muted);font-size:14px;padding:6px 0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats div{border-top:3px solid var(--leaf2);padding-top:6px}
.stats b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:26px;display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.stats small{color:var(--muted);font-size:12.5px}
.chain{display:flex;gap:6px;align-items:center;overflow-x:auto;padding-bottom:4px}
.link{border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12px;flex:none;background:var(--scr)}
.link b{display:block;font-size:12.5px}
.link code{font-size:11.5px;color:var(--muted)}
.arrow{color:var(--muted);flex:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.ex{display:flex;flex-direction:column;gap:8px}
.exi{border-radius:10px;padding:9px 12px;font-size:13.5px}
.exi b{display:block}
.exi.warn{background:var(--warnbg);color:var(--warn)}.exi.bad{background:var(--badbg);color:var(--bad)}.exi.info{background:var(--neu);color:var(--ink)}
.matchsum{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-size:14px}
.matchsum b{font-size:20px;font-family:"Bricolage Grotesque",Figtree,sans-serif}
.ins{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.p{margin:0;font-size:14px;color:var(--muted)}
.store{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.store{grid-template-columns:1fr}}
.sc{border:1px solid var(--line);border-top:3px solid var(--leaf2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.sc.off{border-top-color:var(--line);opacity:.65}
.sc b{font-size:14.5px}.sc small{color:var(--muted);font-size:12px;margin-bottom:4px}
.sc em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.how{margin-top:10px;font-size:13.5px}.how summary{cursor:pointer;font-weight:600;color:var(--leaf2)}
.how td{white-space:normal;word-break:break-all;font-size:12.5px;padding:4px 8px}
.where{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px}
.where small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.where .w{color:var(--muted)}.where .w.ok{color:var(--ok);font-weight:600}
.roles{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px 14px}
.viewas{margin:0 0 6px;font-size:12.5px;color:var(--muted);font-weight:600}
.tabs{display:flex;gap:4px;background:var(--neu);padding:4px;border-radius:12px;overflow-x:auto}
.tab{flex:1;border:0;background:none;padding:8px 10px;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;color:var(--muted)}
.tab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.vbody{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.vbody .blk{border-radius:12px}
.vhead h2{font-size:20px}.vhead .p{margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-left:4px solid var(--leaf2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.kpi.warn{border-left-color:var(--warn)}.kpi.ok{border-left-color:var(--ok)}
.kpi small{color:var(--muted);font-size:12.5px}.kpi b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}.kpi span{font-size:12.5px;color:var(--muted)}
.quiet{background:var(--neu);border:0}.quiet b{display:block;margin-bottom:2px}
.truck{background:var(--leafbg);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column}
.truck span{font-size:13.5px;color:var(--muted)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:760px){.three{grid-template-columns:1fr}}
.three .blk h2{font-size:15px}
.headline{font-size:15px;font-weight:500}
.bar{margin-bottom:10px}.barl{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:4px}
.track{position:relative;height:12px;background:var(--neu);border-radius:6px}
.fill{height:100%;background:var(--leaf2);border-radius:6px;min-width:3px}
.mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--gold)}
.scale-note{margin:0;padding:10px 14px;border-radius:10px;background:var(--goldbg);color:var(--ink);font-size:14px}
.next{display:block;margin-top:6px;color:var(--leaf2);font-weight:600}
.stages{max-width:1240px;margin:0 auto;padding:8px 20px 0}
.stin{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:4px}
.stg{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px 7px 8px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.stg em{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--neu);font-size:12px}
.stg.on{background:var(--leaf);border-color:var(--leaf);color:#fff}.stg.on em{background:rgba(255,255,255,.25)}
.stg:disabled{opacity:.6;cursor:default}.stg small{font-size:11px;color:var(--muted);font-weight:600}
.sarr{color:var(--muted)}
body:not([data-stage="buy"]) #buyView{display:none}
body:not([data-stage="ship"]) #ship{display:none}
body:not([data-stage="flow"]) #flow{display:none}
body:not([data-stage="roles"]) #rolepick{display:none}
body[data-stage="roles"] #stages{display:none}
.stg.dn em{background:var(--leaf2);color:#fff}
.stg.on.dn em{background:rgba(255,255,255,.25)}
.shipwrap{max-width:1240px;margin:0 auto;padding:16px 20px 40px;display:flex;flex-direction:column;gap:14px}
.shiphead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.shiphead h2{font-size:24px}
.filt{display:flex;gap:6px;flex-wrap:wrap}
.fchip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:600;cursor:pointer}
.fchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.shiphint{margin:0;color:var(--leaf2);font-weight:600;font-size:14.5px}
.kpis.six{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.shipgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:980px){.shipgrid{grid-template-columns:minmax(0,1fr)}}
tr.clk{cursor:pointer}tr.clk:hover td{background:var(--neu)}tr.sel td{background:var(--leafbg)}
.gm{display:inline-block;font-size:11.5px;font-weight:600;background:var(--neu);border-radius:5px;padding:1px 5px;margin-right:3px}
.detail{position:sticky;top:12px}@media (max-width:980px){.detail{position:static}}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.dhead h2{font-size:20px;margin:0}
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.tl small{display:block;color:var(--muted);font-size:12px}.tl b{font-size:16px}
h3.sub{font-size:15px;margin:16px 0 6px}
tr.tot td{font-weight:700;border-top:2px solid var(--line)}
.docs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.balelist{max-height:260px;overflow:auto}
.lstep{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.lstep.cur{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}.lstep.ok{border-color:var(--ok)}.lstep.off{opacity:.55}
.lh{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}.lh span{font-size:13px;color:var(--muted)}
.lstep .track{margin-bottom:4px}
.modal{position:fixed;inset:0;background:rgba(8,16,12,.55);display:grid;place-items:center;padding:16px;z-index:20}
.modal[hidden]{display:none}
.mcard{background:#fff;color:#141414;border-radius:14px;max-width:640px;width:100%;max-height:90vh;overflow:auto;padding:20px}
.mcard .p{color:#555}.mcard th{color:#555}.mcard td,.mcard th{border-color:#ddd}
.mtop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.mtop small{color:#666}
.ngrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin-bottom:12px}.ngrid small{display:block;color:#666;font-size:12px}
.sigs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.sigs div{border-top:1px solid #999;padding-top:4px;font-size:12px;color:#555}
@media print{body.mopen>*:not(#modal){display:none!important}.modal{position:static;background:none;padding:0}.mcard{max-height:none;box-shadow:none}.mtop .docs{display:none}}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.laser{animation:none}#toast{transition:none}}

/* ---------- factory stages: receipt to run cost, and System Admin ---------- */
:root{--ai:#2D5D8A;--aibg:#E4EEF8;--g0:#3E8E5E;--g1:#C99A2E;--g2:#8A5A8C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ai:#8DB7E2;--aibg:#1A2A3A}}
:root[data-theme="dark"]{--ai:#8DB7E2;--aibg:#1A2A3A}
.flowwrap{max-width:1240px;margin:0 auto;padding:14px 20px 48px;font-variant-numeric:tabular-nums}
.flowwrap .ftitle{font-size:clamp(22px,2.8vw,28px);line-height:1.15;max-width:34ch;margin:0}
.flowwrap .ribbon{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:0 0 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.flowwrap .rn{padding:9px 12px;border-right:1px solid var(--line);position:relative;min-width:0}
.flowwrap .rn:last-child{border-right:0}
.flowwrap .rn small,.flowwrap .rn span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flowwrap .rn b{display:block;font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:19px;font-weight:600;color:var(--muted);line-height:1.25}
.flowwrap .rn.lit b{color:var(--ink)}
.flowwrap .rn.lit::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--leaf2)}
.flowwrap .rn.out.lit::before{background:var(--gold)}
.flowwrap .rn.sum{background:var(--leafbg)}
.flowwrap .rn.sum.lit b{color:var(--leaf2)}
.flowwrap .fhd{margin-bottom:14px}
.flowwrap .who{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.flowwrap .role,.flowwrap .loc{font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--leafbg);color:var(--leaf2)}
.flowwrap .loc{background:var(--goldbg);color:var(--gold)}
.flowwrap .lead{color:var(--muted);max-width:76ch;margin:8px 0 0;font-size:15px}
.flowwrap .h2{font-size:17px;margin:0 0 10px;display:block}
.flowwrap .h3{font-size:15px;margin:18px 0 8px}
.flowwrap .p{margin:0 0 10px;max-width:78ch}
.flowwrap .fine{font-size:12.5px;color:var(--muted);margin:10px 0 0;max-width:82ch}
.flowwrap .okmsg{color:var(--ok);font-weight:600;margin:6px 0 0}
.flowwrap .frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flowwrap .btn{font-size:14px;line-height:1.3}
.flowwrap .grid3,.flowwrap .grid4{display:grid;gap:10px;margin:0 0 14px}
.flowwrap .grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.flowwrap .fkpi{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--leaf2);border-radius:10px;padding:10px 12px;min-width:0}
.flowwrap .fkpi small{display:block;font-size:12.5px;color:var(--muted)}
.flowwrap .fkpi b{display:block;font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:21px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.flowwrap .fkpi span{display:block;font-size:12.5px;color:var(--muted)}
.flowwrap .fkpi.hero{background:var(--leaf);border-color:var(--leaf);color:#fff}
.flowwrap .fkpi.hero small,.flowwrap .fkpi.hero span{color:rgba(255,255,255,.85)}
:root[data-theme="dark"] .flowwrap .fkpi.hero{color:#06130d}:root[data-theme="dark"] .flowwrap .fkpi.hero small,:root[data-theme="dark"] .flowwrap .fkpi.hero span{color:rgba(6,19,13,.8)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .flowwrap .fkpi.hero{color:#06130d}:root:not([data-theme="light"]) .flowwrap .fkpi.hero small,:root:not([data-theme="light"]) .flowwrap .fkpi.hero span{color:rgba(6,19,13,.8)}}
.flowwrap .fkpi.ok b{color:var(--ok)}.flowwrap .fkpi.warn{border-left-color:var(--warn)}.flowwrap .fkpi.warn b{color:var(--warn)}.flowwrap .fkpi.bad b{color:var(--bad)}
.flowwrap .blk{margin:0 0 14px;min-width:0}
.flowwrap .cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px}
.flowwrap .cols>.blk{margin:0}
.flowwrap .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.flowwrap .tw.scroll{max-height:420px;overflow:auto}
.flowwrap table{width:100%;border-collapse:collapse;font-size:13.5px}
.flowwrap th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel);position:sticky;top:0}
.flowwrap td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.flowwrap td.n,.flowwrap th.n{text-align:right;white-space:nowrap}
.flowwrap tr.tot td{font-weight:700;border-top:1.5px solid var(--ink);border-bottom:0}
.flowwrap tr.fsub td{font-weight:600;background:var(--leafbg)}
.flowwrap .chip.neu{background:transparent;border:1px solid var(--line)}
.flowwrap .falert{border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:13.5px}
.flowwrap .falert.neu{background:var(--leafbg)}.flowwrap .falert.ai{background:var(--aibg);color:var(--ink)}
.flowwrap .seq{display:grid;gap:8px;margin:0 0 14px}
.flowwrap .sq{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;padding:12px 16px}
.flowwrap .sq.cur{border-left-color:var(--gold)}.flowwrap .sq.ok{border-left-color:var(--ok)}.flowwrap .sq.off{opacity:.6}
.flowwrap .sq b{font-size:14.5px}
.flowwrap .sq p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.flowwrap .sq>div:first-child{flex:1;min-width:0}
.flowwrap .exc{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.flowwrap .exc.done{border-left-color:var(--ok)}
.flowwrap .exc p{margin:4px 0 8px;font-size:13.5px;color:var(--muted)}
.flowwrap .exc .okmsg{margin:0}
.flowwrap .nextbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.flowwrap .gatecard{background:var(--panel);border:1px dashed var(--leaf2);border-radius:14px;padding:22px}
.flowwrap .gatecard h2{font-size:19px;margin-bottom:6px}.flowwrap .gatecard p{color:var(--muted);margin:0 0 14px}
.flowwrap .ftabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.flowwrap .ftab{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.flowwrap .ftab.on{color:var(--ink);border-bottom-color:var(--gold)}
.flowwrap .tabbody{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.flowwrap .form{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 18px}
.flowwrap .fld{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.flowwrap .fld span{font-size:14px;font-weight:500}
.flowwrap .fld small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.flowwrap .fld input{width:110px;font:inherit;font-size:14px;text-align:right;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.flowwrap .fld input:disabled{opacity:.6}
.flowwrap .dd summary{cursor:pointer;font-weight:600;font-family:"Bricolage Grotesque",Figtree,sans-serif}
.flowwrap .dd[open] summary{margin-bottom:10px}
.flowwrap .rackmap{display:grid;gap:8px;margin-bottom:12px}
.flowwrap .rack{display:flex;align-items:center;gap:10px}
.flowwrap .rl{width:78px;flex:none;font-weight:600;font-size:13px}
.flowwrap .rl small{display:block;color:var(--muted);font-weight:500;font-size:11.5px}
.flowwrap .cells{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:3px;flex:1}
.flowwrap .cell{aspect-ratio:1;border-radius:3px;border:1px solid var(--line);background:var(--bg)}
.flowwrap .cell.g0{background:var(--g0);border-color:var(--g0)}.flowwrap .cell.g1{background:var(--g1);border-color:var(--g1)}.flowwrap .cell.g2{background:var(--g2);border-color:var(--g2)}.flowwrap .cell.g3{background:var(--g3);border-color:var(--g3)}
.flowwrap .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:6px 0 14px}
.flowwrap .seg button{font:inherit;font-size:14px;font-weight:600;padding:7px 16px;border:0;border-right:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.flowwrap .seg button:last-child{border-right:0}
.flowwrap .seg button.on{background:var(--leaf);color:#fff}
.flowwrap .seg button:disabled{cursor:not-allowed;opacity:.6}
.flowwrap .ftrack{height:6px;background:var(--neu);border-radius:6px;overflow:hidden;margin-top:8px;max-width:360px}
.flowwrap .ftrack i{display:block;height:100%;width:0;background:var(--leaf2);border-radius:6px}
.flowwrap .ftrack i.go{width:100%;transition:width 1.35s ease-in-out}
.flowwrap .ftrack i.full{width:100%}
.flowwrap .log{margin:0;padding-left:18px;font-size:14px}
.flowwrap .log li{margin:4px 0}
.flowwrap .ftl{display:grid;border-left:2px solid var(--leaf2);margin-left:6px}
.flowwrap .ftl>div{position:relative;padding:4px 0 14px 18px}
.flowwrap .ftl>div::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--leaf2)}
.flowwrap .ftl b{display:block;font-size:14px}
.flowwrap .ftl span{color:var(--muted);font-size:13.5px}
.flowwrap .tracepick{margin-bottom:12px}
.flowwrap .tracepick label{display:flex;flex-direction:column;font-size:12.5px;color:var(--muted);gap:3px}
.flowwrap .tracepick select{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px;max-width:100%}
@media (max-width:1100px){.flowwrap .ribbon{grid-template-columns:repeat(4,minmax(0,1fr))}.flowwrap .rn:nth-child(4){border-right:0}.flowwrap .rn:nth-child(-n+4){border-bottom:1px solid var(--line)}.flowwrap .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.flowwrap .cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.flowwrap{padding:12px 12px 40px}.flowwrap .rn{padding:7px 8px}.flowwrap .rn b{font-size:15px}.flowwrap .rn small,.flowwrap .rn span{font-size:10.5px}.flowwrap .sq{flex-direction:column;align-items:flex-start}.flowwrap .form{grid-template-columns:1fr}.flowwrap .fld input{width:96px}}
@media (prefers-reduced-motion:reduce){.flowwrap .ftrack i.go{transition:none}}
@media print{.top,.stages,.flowwrap .ribbon,.flowwrap .nextbar,.flowwrap .noprint,#toast,.flowwrap .frow .btn{display:none!important}.flowwrap{padding:0;max-width:none}.flowwrap .blk,.flowwrap .fkpi{break-inside:avoid}body{background:#fff}.flowwrap .tw.scroll{max-height:none}}

/* ---------- guidance, colour key and AI ---------- */
.flowwrap .stepno{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--bg)}
.flowwrap .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted);margin:-8px 0 14px}
.flowwrap .legend span{display:inline-flex;align-items:center;gap:6px}
.flowwrap .lg{width:10px;height:10px;border-radius:3px;display:inline-block}
.flowwrap .lg.ok,.flowwrap .lgt.ok{background:var(--ok)}.flowwrap .lg.warn,.flowwrap .lgt.warn{background:var(--warn)}.flowwrap .lg.k-ai{background:var(--ai)}.flowwrap .lg.neu{background:var(--line)}
.flowwrap .guide{display:flex;gap:12px;align-items:center;background:var(--goldbg);border:1px solid var(--gold);border-radius:12px;padding:10px 14px;margin:0 0 12px}
.flowwrap .guide .gi{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-weight:700}
.flowwrap .guide b{display:block;font-size:12.5px;color:var(--gold)}
.flowwrap .guide span{font-size:15px;font-weight:600;color:var(--ink)}
.flowwrap .guide.gdone{background:var(--okbg);border-color:var(--ok)}
.flowwrap .guide.gdone .gi{background:var(--ok)}.flowwrap .guide.gdone b{color:var(--ok)}
.flowwrap .aicard{background:var(--aibg);border:1px solid color-mix(in srgb,var(--ai) 30%,transparent);border-left:4px solid var(--ai);border-radius:12px;padding:10px 14px;margin:0 0 14px}
.flowwrap .aihd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px}
.flowwrap .aihd b{color:var(--ai)}
.flowwrap .aihd span:last-child{color:var(--ink);font-weight:600}
.flowwrap .spark{color:var(--ai);font-size:14px}
.flowwrap .aicard p{margin:4px 0 0;font-size:14px;color:var(--ink);max-width:90ch}
.flowwrap .aicard details{margin-top:6px;font-size:13px}
.flowwrap .aicard summary{cursor:pointer;color:var(--ai);font-weight:600}
.flowwrap .aicard details p{color:var(--muted);font-size:13px}
.flowwrap .gdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px}
.flowwrap .gdot.g0{background:var(--g0)}.flowwrap .gdot.g1{background:var(--g1)}.flowwrap .gdot.g2{background:var(--g2)}
.flowwrap .btn.nextup{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent)}
@media (prefers-reduced-motion:no-preference){.flowwrap .btn.nextup{animation:nudge 2.4s ease-in-out infinite}@keyframes nudge{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 15%,transparent)}}}
/* ---------- run cost report ---------- */
.flowwrap .glance{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin:0 0 14px}
.flowwrap .gl-text{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.flowwrap .gl-text h3{font-size:17px;margin:0 0 6px}
.flowwrap .gl-text p{margin:0 0 8px;font-size:15px;line-height:1.6;max-width:70ch}
.flowwrap .gl-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flowwrap .checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.flowwrap .okcheck{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.flowwrap .okcheck.ok{background:var(--okbg);color:var(--ok)}.flowwrap .okcheck.bad{background:var(--badbg);color:var(--bad)}
.flowwrap .cols.eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.flowwrap .vbar{display:flex;height:22px;border-radius:7px;overflow:hidden;background:var(--neu);margin:8px 0 10px}
.flowwrap .vbar i{display:block;height:100%}
.flowwrap .v-ok{background:var(--g0)}.flowwrap .v-gold{background:var(--g1)}.flowwrap .v-brown{background:var(--g2)}.flowwrap .v-grey{background:#9AA8A0}.flowwrap .v-mint{background:#8CC7A5}
.flowwrap .vkey{display:grid;gap:5px;font-size:13.5px}
.flowwrap .vkey span{display:flex;align-items:center;gap:8px}
.flowwrap .vkey i{width:11px;height:11px;border-radius:3px;flex:none}
.flowwrap .vkey b{font-weight:600;min-width:118px}
.flowwrap .vkey em{font-style:normal;color:var(--muted);margin-left:auto}
.flowwrap .chain3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;font-size:13px}
.flowwrap .chain3 div{background:var(--bg);border-radius:8px;padding:6px 10px}
.flowwrap .chain3 small{display:block;color:var(--muted);font-size:11.5px}
.flowwrap .chain3 b{font-size:14px}
.flowwrap .chain3>span{color:var(--muted);font-size:12px}
.flowwrap .askcard .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.flowwrap .askchip{font:inherit;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ai) 40%,transparent);background:var(--panel);color:var(--ai);cursor:pointer;text-align:left}
.flowwrap .askchip.on{background:var(--ai);color:#fff}
.flowwrap .answer{background:var(--panel);border-radius:10px;padding:10px 12px;margin-top:10px}
.flowwrap .answer b{font-size:14px}.flowwrap .answer p{margin:4px 0 0}
.flowwrap .rsec .h2{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.flowwrap .sn{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:var(--leaf);color:#fff;font-size:13px;flex:none}
.flowwrap .rsec .p{margin-top:-4px}
.flowwrap .bcol{color:var(--muted)}
.flowwrap tr.tot td{background:var(--bg)}
.flowwrap tr.grand td{background:var(--leaf);color:#fff;font-size:14.5px}
.flowwrap .log{list-style:none;padding:0}
.flowwrap .log li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line)}
.flowwrap .log li:last-child{border-bottom:0}
.flowwrap .lgt{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
/* finished goods label */
.flowwrap .fglabel{background:#fff;color:#111;border:1.5px solid #222;border-radius:8px;padding:12px 14px;max-width:320px;font-family:"IBM Plex Sans",Figtree,sans-serif}
.flowwrap .fglabel .lt{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:8px}
.flowwrap .fglabel .bc{display:block;width:100%;height:46px;color:#111}
.flowwrap .fglabel .lc{text-align:center;font-weight:700;letter-spacing:.3em;font-size:17px;margin:4px 0 8px}
.flowwrap .fglabel .lg2{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font-size:12px}
@media (max-width:1100px){.flowwrap .glance,.flowwrap .cols.eq{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.flowwrap .bcol{display:none}.flowwrap .gl-kpis{grid-template-columns:1fr 1fr}.flowwrap .guide span{font-size:14px}.flowwrap .vkey b{min-width:96px}
 .top{padding:12px 12px 2px;align-items:center}.top h1{font-size:19px}.top p{font-size:12.5px}.logo{width:32px;height:32px}.tools{width:100%}.tools .btn{flex:1;padding:7px 6px;font-size:12.5px}.stages{padding:6px 12px 0}.stg{font-size:13px;padding:6px 12px 6px 6px}}
@media print{.flowwrap .legend,.flowwrap .guide,.flowwrap .askcard{display:none!important}.flowwrap tr.grand td{color:#000;background:#eee}}
.flowwrap .chip.gold{background:var(--goldbg);color:var(--gold)}
.flowwrap .log li{display:block;position:relative;padding:6px 0 6px 20px}
.flowwrap .log .lgt{position:absolute;left:2px;top:12px}
@media (max-width:560px){.flowwrap table{font-size:12.5px}.flowwrap th,.flowwrap td{padding:6px 6px}.flowwrap .blk{padding:12px 12px}}
.stin{scrollbar-width:thin}
.stin::-webkit-scrollbar{height:6px}.stin::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* ---------- roles ---------- */
.rolesel{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.rolesel select{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
body:not([data-role="planthead"]) .adminbtn{display:none}
.tools{flex-wrap:wrap;align-items:center}
.rolewrap{max-width:1100px;margin:0 auto;padding:18px 20px 48px}
.rp-head h2{font-size:clamp(22px,3vw,28px);margin:0 0 6px}
.rp-head .p{max-width:62ch;font-size:15px}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.rp-card{font:inherit;text-align:left;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-height:220px}
.rp-card:hover,.rp-card:focus-visible{border-color:var(--leaf2);box-shadow:0 0 0 3px var(--leafbg)}
.rp-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--leaf);color:#fff;font-weight:700;font-size:19px;margin-bottom:4px}
.rp-card b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:19px}
.rp-p{color:var(--gold);font-weight:700;font-size:14px}
.rp-d{color:var(--muted);font-size:14px;line-height:1.45}
.rp-dev{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:6px}
.rp-go{font-weight:700;color:var(--leaf2);font-size:14px}
.rp-fine{margin-top:16px}
/* ---------- buyer: simple, large, made for a phone or tablet ---------- */
.bhint{display:none}
body[data-role="buyer"] .bhint{display:block;width:100%;max-width:440px;margin:0 auto 10px}
body[data-role="buyer"] .note{display:none}
.bh{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--goldbg);border:1px solid var(--gold);border-radius:14px;padding:12px 14px}
.bh-i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-weight:700}
.bh>div{flex:1;min-width:180px}
.bh b{display:block;font-size:12.5px;color:var(--gold)}
.bh span{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
body[data-role="buyer"] .wrap{max-width:1080px;grid-template-columns:auto minmax(0,1fr)}
body[data-role="buyer"] .side{gap:14px}
.bstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bstats div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.bstats b{display:block;font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:24px;line-height:1.2}
.bstats span{font-size:13px;color:var(--muted)}
.bex{margin:8px 0 0;padding-left:18px;font-size:14px}
.bex li{margin:3px 0}
body[data-role="buyer"] .stg{font-size:15.5px;padding:9px 18px 9px 10px}
body[data-role="buyer"] .stg em{width:26px;height:26px}
.bship{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.bshead h2{font-size:24px;margin:0}
.bship .detail .blk{padding:16px}
body[data-role="buyer"] #ship .btn{padding:11px 16px;font-size:15px}
@media (min-width:1000px){body[data-role="buyer"] .device{zoom:1.1}}
@media (max-width:860px){body[data-role="buyer"] .wrap{grid-template-columns:minmax(0,1fr);padding:10px 12px 32px;gap:14px}
 body[data-role="buyer"] .device{width:100%;max-width:460px}}
@media (max-width:560px){body[data-role="buyer"] .device{background:none;box-shadow:none;padding:0;border-radius:0;max-width:none}
 body[data-role="buyer"] .bump,body[data-role="buyer"] .scanwin,body[data-role="buyer"] .devlabel{display:none}
 body[data-role="buyer"] .screen{height:auto;min-height:62vh;border-radius:16px;border:1px solid var(--line);overflow:visible}
 body[data-role="buyer"] .bhint{max-width:none}
 .rolesel{width:100%}.rolesel select{flex:1}.rp-card{min-height:0}.bstats b{font-size:19px}}
/* ---------- leadership reports ---------- */
.flowwrap .rbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 14px}
.flowwrap .rbar label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.flowwrap .rbar input{font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.flowwrap .printhead{display:none}
/* ---------- printing and Save as PDF ---------- */
@media print{
 @page{size:A4;margin:12mm}
 html,body{background:#fff!important;color:#111!important}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 body:not(.mopen) #buyView,body:not(.mopen) #ship,body:not(.mopen) #rolepick,body:not(.mopen) .top,body:not(.mopen) .stages{display:none!important}
 .flowwrap{padding:0!important;max-width:none!important}
 .flowwrap .printhead{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;border-bottom:2px solid #1F5C43;padding-bottom:6px;margin-bottom:10px;font-size:11px;color:#333}
 .flowwrap .printhead b{color:#1F5C43;font-size:13px}
 .flowwrap .fhd .who,.flowwrap .guide,.flowwrap .legend,.flowwrap .ribbon,.flowwrap .askcard,.flowwrap .nextbar,.flowwrap .noprint,.flowwrap .rbar .frow,.flowwrap .aicard details{display:none!important}
 .flowwrap .ftitle{font-size:20px}
 .flowwrap .lead{font-size:11.5px}
 .flowwrap .glance,.flowwrap .cols,.flowwrap .cols.eq{grid-template-columns:1fr 1fr!important;gap:8px}
 .flowwrap .grid4{grid-template-columns:repeat(4,1fr)!important;gap:6px}
 .flowwrap .gl-kpis{grid-template-columns:1fr 1fr}
 .flowwrap .blk,.flowwrap .fkpi,.flowwrap .gl-text,.flowwrap .aicard{break-inside:avoid;box-shadow:none;border-color:#bbb}
 .flowwrap .rsec{break-inside:avoid}
 .flowwrap .h2,.flowwrap h2{break-after:avoid}
 .flowwrap .glance{align-items:start}
 .flowwrap .gl-kpis{align-content:start}
 .flowwrap table{font-size:10.5px}
 .flowwrap th{position:static;background:#f1f4f1}
 .flowwrap th,.flowwrap td{padding:4px 6px}
 .flowwrap tr{break-inside:avoid}
 .flowwrap .tw,.flowwrap .tw.scroll{overflow:visible!important;max-height:none!important}
 .flowwrap .bcol{display:table-cell!important}
 .flowwrap .rbar{display:none!important}
 .flowwrap .rbar input{border:0;padding:0;background:none;font-weight:700}
 .flowwrap details>summary{list-style:none}
 #toast{display:none!important}
}
body[data-stage="roles"] .rolesel{display:none}
.rp-fine{font-size:13px;color:var(--muted)}
@media (max-width:560px){body[data-role="buyer"] .stg{font-size:14px;padding:7px 12px 7px 7px}}
.flowwrap .rsum{font-weight:700;font-size:15px;align-self:center;padding-bottom:2px}
body[data-role="receiver"] .flowwrap .ribbon{display:none}

/* ---------- overview, role views, tablet and print refinements ---------- */
.stg.home em{background:var(--goldbg);color:var(--gold);font-size:13px}
.stg.home.on em{background:rgba(255,255,255,.25);color:#fff}
.flowwrap .waitmsg{margin:4px 0 8px;font-size:13.5px;color:var(--warn);font-weight:600}
.flowwrap .where{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.flowwrap .where button{font:inherit;color:inherit;width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:var(--bg);border:1px solid transparent;border-radius:10px;padding:9px 12px;cursor:pointer}
.flowwrap .where button:hover{border-color:var(--leaf2)}
.flowwrap .where i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;background:var(--line);color:var(--muted)}
.flowwrap .where b{display:block;font-size:14.5px}
.flowwrap .where small{display:block;color:var(--muted);font-size:13px}
.flowwrap .where .w-ok i{background:var(--ok);color:#fff}
.flowwrap .where .w-cur button{background:var(--goldbg);border-color:var(--gold)}
.flowwrap .where .w-cur i{background:var(--gold);color:#fff}
.flowwrap .where .w-wait{opacity:.7}
.flowwrap .task{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.flowwrap .task b{display:block;font-size:14.5px}
.flowwrap .task span{display:block;font-size:13px;color:var(--muted)}
.flowwrap .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flowwrap .hk{margin-top:12px}
.flowwrap .lcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
.flowwrap .lcard{font:inherit;color:var(--ink);text-align:left;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--leaf2);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-height:150px}
.flowwrap .lcard:hover,.flowwrap .lcard:focus-visible{border-color:var(--leaf2);box-shadow:0 0 0 3px var(--leafbg)}
.flowwrap .lcard small{color:var(--muted);font-size:13px;font-weight:600}
.flowwrap .lcard b{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:22px;line-height:1.2}
.flowwrap .lcard span{color:var(--muted);font-size:13.5px}
.flowwrap .lcard em{font-style:normal;margin-top:auto;padding-top:8px;color:var(--leaf2);font-weight:700;font-size:13.5px}
@media (max-width:1100px){.flowwrap .lcards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flowwrap .lcards{gap:8px}.flowwrap .lcard{min-height:0;padding:12px}.flowwrap .lcard b{font-size:18px}}
/* receiving clerk on a tablet: bigger targets, calmer screens */
body[data-role="receiver"] .flowwrap .btn{min-height:48px;padding:12px 18px;font-size:15.5px;border-radius:12px}
body[data-role="receiver"] .flowwrap .sq{padding:16px 18px}
body[data-role="receiver"] .flowwrap .sq b{font-size:16.5px}
body[data-role="receiver"] .flowwrap .sq p{font-size:14.5px}
body[data-role="receiver"] .flowwrap .guide span{font-size:16.5px}
body[data-role="receiver"] .flowwrap .legend{display:none}
@media (max-width:820px){body[data-role="receiver"] .flowwrap .sq{flex-direction:column;align-items:stretch}body[data-role="receiver"] .flowwrap .sq .btn{width:100%}}
/* buyer on a tablet: the handheld becomes the full screen */
@media (min-width:561px) and (max-width:1100px){
 body[data-role="buyer"] .wrap{grid-template-columns:minmax(0,1fr);max-width:760px;padding:10px 16px 32px;gap:14px}
 body[data-role="buyer"] .device{background:none;box-shadow:none;padding:0;border-radius:0;width:100%;max-width:none;zoom:1}
 body[data-role="buyer"] .bump,body[data-role="buyer"] .scanwin,body[data-role="buyer"] .devlabel{display:none}
 body[data-role="buyer"] .screen{height:auto;min-height:60vh;border-radius:18px;border:1px solid var(--line);overflow:visible;zoom:1.12}
}
/* leadership: no step furniture */
body[data-role="leader"] .flowwrap .guide{display:none}
/* print: let long sections flow across pages instead of leaving blank space */
@media print{
 .flowwrap .rsec,.flowwrap .blk{break-inside:auto!important}
 .flowwrap .glance,.flowwrap .fkpi,.flowwrap .gl-text,.flowwrap .aicard{break-inside:avoid}
 .flowwrap thead{display:table-header-group}
 .flowwrap .lcards{grid-template-columns:repeat(4,1fr)}
}
@media print{.flowwrap .rsec{break-inside:avoid!important}.flowwrap .rsec.long{break-inside:auto!important}.flowwrap .rsec{margin-bottom:8px}.flowwrap .rsec .fine{margin-top:4px}}