/* The page's look. Loaded by platform-mockup.html; make_clean.py puts it inline for CityU. */
:root{
  --ground:#E4E9E1; --bar:#DCE3D8; --tabhover:#E8EDE5; --panel:#F4F6F1; --card:#FFFFFF; --ink:#1E2820; --ink2:#5A665C; --ink3:#8A948B;
  --line:#D6DDD3; --accent:#2D3A2F; --on-accent:#F4F6F1; --hi:#D8F078; --on-hi:#1E2820;
  --red:#C0412D; --red-bg:#FBE9E5; --amber:#A8700A; --amber-bg:#FBF1DC; --green:#3A8653; --green-bg:#E3F2E7;
  --buy:#4F74A0; --buy-bg:#E4ECF5;
  --muted-bg:#EBEEE8; --s-off:#5E8A2E; --s-on:#4A3AA7; --on-bg:#ECE9F8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131815; --bar:#0F1311; --tabhover:#171D19; --panel:#1A201C; --card:#222A24; --ink:#E7ECE5; --ink2:#A2ADA4; --ink3:#77827A;
    --line:#333D36; --accent:#CFDFC8; --on-accent:#18201A; --hi:#C9E25C; --on-hi:#18201A;
    --red:#F2826D; --red-bg:#3A221D; --amber:#E6B653; --amber-bg:#352B17; --green:#71C98F; --green-bg:#1D3326;
    --buy:#8FB3DA; --buy-bg:#1E2A38;
    --muted-bg:#2A322C; --s-off:#72A03A; --s-on:#9085E9; --on-bg:#262238;
  }
}
:root[data-theme="dark"]{
  --ground:#131815; --bar:#0F1311; --tabhover:#171D19; --panel:#1A201C; --card:#222A24; --ink:#E7ECE5; --ink2:#A2ADA4; --ink3:#77827A;
  --line:#333D36; --accent:#CFDFC8; --on-accent:#18201A; --hi:#C9E25C; --on-hi:#18201A;
  --red:#F2826D; --red-bg:#3A221D; --amber:#E6B653; --amber-bg:#352B17; --green:#71C98F; --green-bg:#1D3326;
  --buy:#8FB3DA; --buy-bg:#1E2A38;
  --muted-bg:#2A322C; --s-off:#72A03A; --s-on:#9085E9; --on-bg:#262238;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;padding-inline:16px;padding-block:28px 48px}
.wrap{max-width:1220px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* app frame + folder tabs */
.frame-scroll{overflow-x:auto;border-radius:22px}
.app{min-width:1040px;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
/* The frame's horizontal scroll captures position:sticky, so the group headings never pin.
   Above 1100px nothing needs to scroll sideways: hand scrolling back to the page so they do. */
@media (min-width:1100px){.frame-scroll{overflow:visible}.app{overflow:clip}}
.datebar{padding:14px 16px 10px 30px;font-size:19px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Undo / Start again, top right (Julia 23 Sep): undo the last send or change; start again clears them all */
.slim{list-style:none;margin:6px 0 0;padding:0}.slim li{padding:11px 0 11px 26px;border-top:1px solid var(--line);position:relative;font-size:14px;color:var(--ink)}
.slim li:first-child{border-top:0}.slim li::before{content:'';position:absolute;left:4px;top:15px;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);background:var(--hi)}
/* Ask AI (preview): 3 set questions with real answers, chat-style (Julia 24 Sep) */
.ask{width:100%;max-width:780px;margin:0 auto;display:flex;flex-direction:column;min-height:100%;box-sizing:border-box}
.askhead{text-align:center;padding:18px 0 6px}.askhead h2{margin:0;font-size:22px}.askhead p{margin:6px 0 0;color:var(--ink2);font-size:14px}
.askhead .pv0{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--hi);color:var(--on-hi);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:4px}
.chat{display:flex;flex-direction:column;gap:12px;padding:14px 0}.chat:not(:empty){flex:1}.chat:empty{padding:0}
.askbar{margin-top:auto}
.msg{max-width:88%;padding:12px 16px;border-radius:18px;font-size:14.5px;line-height:1.5}
.msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;width:88%}
.msg.ai p{margin:0 0 10px}.msg.ai p:last-child{margin:0}
.msg.ai a{color:var(--accent);font-weight:600;text-decoration:underline}
.msg.ai .src{display:block;margin-top:10px;font-size:12px;color:var(--ink3)}
.msg.ai table{width:100%;border-collapse:collapse;font-size:13.5px;margin:4px 0 8px}
.msg.ai td,.msg.ai th{padding:7px 6px;border-top:1px solid var(--line);text-align:left}.msg.ai th{font-weight:500;color:var(--ink3);font-size:12px;border-top:0}
.msg.ai td.r,.msg.ai th.r{text-align:right}
.dots{display:inline-flex;gap:4px;padding:4px 0}.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sugg{display:flex;flex-direction:column;gap:8px;align-items:center;padding:6px 0 12px}
.more2{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-2px 0 4px}.more2 .lbl{font-size:12px;color:var(--ink3);margin-right:2px}
.more2 button{font:inherit;font-size:13px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--ink2)}
.more2 button:hover{border-color:var(--accent);color:var(--ink)}
.fadein{animation:fadeup .28s ease-out both}@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fadein{animation:none}}
.sugg .lbl{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.sugg button{font:inherit;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink)}
.sugg button:hover{border-color:var(--accent)}
.askbar{position:sticky;bottom:0;background:var(--bg,#F4F6F1);padding:10px 0 14px;display:flex;gap:8px}
.askbar input{flex:1;font:inherit;font-size:15px;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);outline:0}
.askbar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,240,120,.55)}
.askbar button{font:inherit;font-weight:600;border:0;border-radius:999px;padding:0 20px;background:var(--accent);color:#fff;cursor:pointer}
.aibars{display:block;width:100%;max-width:420px;margin:4px 0 6px}
.hist{display:flex;gap:6px}.hist button{font:inherit;font-size:13px;font-weight:600;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
.hist button:hover:not(:disabled){color:var(--ink);border-color:var(--ink3)}.hist button:disabled{opacity:.4;cursor:default}
/* ⋯ menu (10 Oct): Undo and Start again are rare, so they sit behind one button, top right */
.hmenu{position:relative}.hmenu summary{list-style:none;cursor:pointer;font-size:18px;line-height:1;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:var(--card)}
.hmenu summary::-webkit-details-marker{display:none}.hmenu[open] summary{color:var(--ink);border-color:var(--ink3)}
.hpop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 10px 24px -8px rgba(0,0,0,.3);min-width:150px}
.hpop button{text-align:left}
.hplbl{font-size:12px;font-weight:600;color:var(--ink3);padding:4px 4px 0}
.dbright{display:flex;align-items:center;gap:10px}.asrole{font-size:14px;font-weight:600;color:var(--ink2)}
.anbar{display:flex;gap:8px;justify-content:flex-end;margin:0 0 12px}
.topbar{display:flex;align-items:flex-end;gap:6px;padding:12px 16px 0;border-bottom:1px solid var(--line)}
.tgroup{display:flex;gap:2px;align-items:flex-end}
.tsec{display:flex;flex-direction:column;gap:1px}
.tglabel{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:700;padding:0 0 2px 14px}
.tdiv{width:1px;align-self:stretch;background:var(--line);margin:20px 18px 10px}
.tab{position:relative;display:flex;align-items:center;gap:8px;border:1px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;padding:10px 16px 11px;margin-bottom:-1px;background:transparent;color:var(--ink2);font-size:13.5px;font-weight:500;white-space:nowrap}
.tab:hover{background:var(--tabhover);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600}
.tab[aria-selected="true"]::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.tab.gear{margin-left:auto;padding:10px 13px 11px}
.tab.gear svg{width:18px;height:18px;display:block}
.badge{min-width:20px;height:20px;border-radius:999px;padding:0 6px;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;background:var(--accent);color:var(--on-accent)}
.badge.ok{background:var(--green-bg);color:var(--green)}
.content{display:flex;flex-direction:column}

.body{padding:18px;display:flex;flex-direction:column;gap:14px}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pagehead h2{margin:0;font-size:20px;font-weight:600}
.pagehead h2 small{font-size:13px;font-weight:500;color:var(--ink3);margin-left:8px}
.pagehead p{margin:0;color:var(--ink2);font-size:13px}
button.card{text-align:left;cursor:pointer;font:inherit;color:inherit}
button.card:hover{border-color:var(--ink3)}
td .sub{display:block;font-size:12px;color:var(--ink3);font-weight:400;margin-top:1px}
/* VB: restock list + side calendar */
.ftrow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ftabs{display:flex;gap:6px;flex-wrap:wrap}
.ftab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;color:var(--ink)}
.ftab i{width:8px;height:8px;border-radius:50%;background:currentColor}
.ftab .n{font-size:12px;font-weight:700;opacity:.8}
.ftab:hover{border-color:var(--ink3)}
.ftab.t-amber{color:var(--amber);background:var(--amber-bg);border-color:transparent}
.ftab.t-green{color:var(--green);background:var(--green-bg);border-color:transparent}
.ftab.t-blue{color:var(--buy);background:var(--buy-bg);border-color:transparent}
.ftab.t-grey{color:var(--ink2);background:var(--muted-bg);border-color:transparent}
.ftab.t-ready{color:var(--on-accent);background:var(--green);border-color:transparent}
.ftab[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent);font-weight:700}
.ftab:not([class*="t-"])[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.btn.sm{padding:5px 11px;font-size:12px}
.lnk{border:0;background:none;padding:0;font-size:12px;color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.lnk:hover{color:var(--ink)}
.look{display:grid;grid-template-columns:214px minmax(0,1fr);gap:20px;align-items:start}   /* every day: VB opens at weekends; no deliveries or transfers then yet */
.side{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.cal{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .mo{grid-column:1/-1;font-size:12px;font-weight:600;padding:2px 4px}
.mv{display:grid;grid-template-columns:52px 1fr;gap:10px;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:9px 12px;font-size:13px}
.mv:hover{border-color:var(--accent)}
/* step 1: grouped decisions. Fixed column widths - opening a row moves nothing. */
.ostep{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3);flex-wrap:wrap}
.ostep span{display:inline-flex;align-items:center;gap:8px}
.ostep b{width:21px;height:21px;border-radius:50%;background:var(--muted-bg);color:var(--ink3);font-size:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.ostep .on{color:var(--ink);font-weight:600}
.ostep .on b{background:var(--accent);color:var(--on-accent)}
.ogroup{display:flex;flex-direction:column;gap:9px;background:var(--tint);border-radius:20px;padding:4px 10px 10px}
.oghead{position:sticky;top:8px;z-index:3;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;background:var(--tint);border-radius:14px;padding:8px 6px;margin:0 -6px}
.oghead h3{margin:0;font-size:15.5px;font-weight:600}
.pill.pillh{font-size:17px;font-weight:600;padding:6px 15px;letter-spacing:-.01em}
.oghead .n{font-size:14px;font-weight:700;color:var(--ink2);background:var(--card);border-radius:999px;padding:3px 11px}
.oghead p{margin:0;font-size:12.5px;color:var(--ink2);flex:1 1 0;min-width:220px;max-width:92ch}
.olist{background:var(--card);border:1px solid var(--line);border-radius:18px}
.orow{position:relative;border-bottom:1px solid var(--line)}
.orow.pop{z-index:60}
.orow.just{animation:justmoved 1.5s ease-out}
@keyframes justmoved{0%,55%{background:var(--hi)}100%{background:transparent}}
.dim{position:fixed;inset:0;background:rgba(0,0,0,.22);z-index:40}
.olist>.orow:last-child{border-bottom:0}
.orow.open{background:var(--panel)}
.orow.open .olist{background:var(--card)}
.oalt{position:absolute;top:calc(100% - 6px);left:8px;right:8px;z-index:50;display:flex;flex-direction:column;gap:7px;
 background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.22)}
.oalt h4{margin:0 0 1px;font-size:13px;font-weight:600}
.oaltb{display:grid;grid-template-columns:17px 1fr;gap:11px;align-items:start;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:13px;padding:10px 13px;color:inherit}
.oaltb:not(:disabled):hover{border-color:var(--accent)}
.oaltb i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ink3);margin-top:2px}
.oaltb.on{border-color:var(--green)}
.oaltb.on i{border-color:var(--green);border-width:5px}
.oaltb:disabled{background:var(--muted-bg)}
.oaltb:disabled i{opacity:.4}
.oaltb .t b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:600;font-size:13.5px}
.oaltb .t>span{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px;max-width:76ch}
.osug{font-size:12px;font-weight:500;color:var(--green)}
.ono{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--muted-bg);color:var(--ink2);border-radius:6px;padding:2px 7px}
.odet{padding:0 5px 14px}
.osec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:28px 4px 10px;padding-top:18px;border-top:1px solid var(--line)}
.odet>.osec:first-child{margin-top:6px;padding-top:0;border-top:0}.osub{margin:0;font-size:15px;font-weight:700;color:var(--ink)}.osec>span{font-size:13px;color:var(--ink2)}
.rsnote{display:block;font-size:11px;height:15px;line-height:15px}
.shbar{margin:0 4px 8px}.shbar .lnk{margin-left:6px}.shshort{margin:0 4px 10px}
.rst input[type=checkbox]{width:20px;height:20px;accent-color:var(--green);cursor:pointer}.rst tr[data-rowtick]{cursor:pointer}.rst tr[data-rowtick]:hover td{background:var(--panel)}.rst tr.rsoff td{color:var(--ink3)}.rst tr.rsoff .pname b{color:var(--ink3);font-weight:500}
.pname b.red{color:var(--red);font-weight:600}
.rskeep{width:64px;font:inherit;font-size:13px;text-align:right;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.tsort{display:flex;align-items:center;gap:12px;margin:0 4px 8px}.tsort .tblnote{margin:0}.tsort .inp{margin-left:auto;flex:none}
.tblnote{margin:0 4px 8px;font-size:12px;color:var(--ink3);max-width:78ch}
.odet .tbl{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:4px 9px}
/* step 2: one card per destination, each sent on its own */
.osent{font-size:13px;font-weight:700;color:var(--green);padding:8px 0}
/* orders page: one card per supplier, one line per address. Fixed columns - opening a line moves nothing sideways. */
.scard2{padding:4px 0 6px}
.shead{display:flex;align-items:baseline;gap:12px;padding:10px 14px 2px}
.shead b{font-size:15px;font-weight:600}
.shead span{font-size:12px;color:var(--ink3)}
.aline{position:relative}
.aline.pop{z-index:60}
.aline.open{background:var(--panel)}
.ahead{display:grid;grid-template-columns:86px 1fr 150px 16px 96px;gap:12px;align-items:start;padding:8px 14px}
.ato{font-size:11.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;padding-top:5px}
.aword .pill{font-size:11.5px;padding:3px 10px}
.aamt{text-align:right;display:flex;flex-direction:column;gap:1px;padding-top:3px}
.aline1 .l1,.aline1 .l2{display:block}.aline1 .l2{color:var(--ink2);margin-top:3px}
.aamt b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.aamt span{font-size:11.5px;color:var(--ink3)}
.ahead{grid-template-columns:86px 1fr 170px 150px}
.aamt .bar{width:150px;margin:2px 0 5px auto}
.aamt .asplit{grid-column:1/-1;text-align:right;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--ink2);margin-top:2px}.aamt .asug{grid-column:1/-1;text-align:right;font-style:normal;font-size:12.5px;font-weight:400;color:var(--ink2);margin-top:3px;white-space:nowrap;justify-self:end}.arow .aamt .asug .osug{font-size:12.5px;grid-column:auto;color:var(--green);font-weight:500}
.aline.open{background:transparent}
.arow{grid-template-columns:86px 150px 1fr 250px 40px !important;align-items:center !important;cursor:pointer;border-radius:12px;padding:9px 14px}
.arow:hover{background:var(--panel)}
.aline.pop .arow:hover{background:transparent}
.aword .pill{white-space:nowrap}
.aline1{font-size:13px;color:var(--ink);min-width:0}
.arow .aamt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 10px;padding-top:0}
.arow .aamt .bar{grid-column:1/-1;width:100%;margin:0 0 4px}
.arow .aamt b{grid-column:1;text-align:right}
.arow .aamt span:not(.bar){grid-column:2;font-size:11.5px;color:var(--ink3)}
.aend{text-align:right}
.aend .osent{font-size:12px;white-space:nowrap}
.ppwhy{margin:2px 8px 10px;font-size:13px;color:var(--ink)}
.tbl.vs{margin:10px 0 4px;background:var(--card)}.tbl.vs td,.tbl.vs th{font-size:12.5px;vertical-align:top}
.onday{margin:4px 0 16px}.ondf{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;font-size:14px;color:var(--ink)}
.ondf b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-right:5px}.onday p{margin:4px 0 0;font-size:13px;color:var(--ink2)}
tr.ongrp td{background:var(--muted-bg);padding-top:8px}.ondvb{margin-top:12px}.ppop .ppfoot{min-height:66px;box-sizing:border-box}.ppop .pphead{min-height:66px;box-sizing:border-box}.tbl.vs td:first-child{color:var(--ink2)}
.vsch{min-height:56px;font-weight:500 !important;display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 9px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.vsch i{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink3);margin-top:2px}.vsch.on{border-color:var(--green)}.vsch.on i{border-color:var(--green);border-width:5px}
.vsch:disabled{cursor:default;background:var(--muted-bg);color:var(--ink3)}.vsl{display:flex;flex-direction:column;gap:1px}.vsch .osug{margin:0}.vsq{font-weight:400;color:var(--ink3)}.tbl.vs .vrec{background:var(--green-bg)}.vsrec{margin:8px 2px 4px;font-size:13px;color:var(--ink)}.tbl.vs th{white-space:normal;overflow:visible}.tbl.vs th .osug{display:inline-block;margin-top:2px}.vbtop{margin-top:18px}
.pphow{margin:0 4px 12px}
.today table{width:100%;border-collapse:collapse;table-layout:fixed;margin:6px 0 4px;font-size:13px}.today th{font-size:11.5px;font-weight:600;color:var(--ink3);text-align:left;padding:2px 6px 4px 0}.today td{padding:5px 6px 5px 0;border-top:1px solid var(--line);vertical-align:top}.today th.c,.today td.c{text-align:center;width:13%}.today th.r,.today td.r{text-align:right;width:14%}.today th:last-child,.today td:last-child{width:31%}.today .pill{white-space:normal}
.today .tpill{display:none}
@media (max-width:600px){.today th:last-child,.today td:last-child{display:none}.today .tpill{display:block;margin-top:3px}.today th.c,.today td.c{width:18%}.today th.r,.today td.r{width:20%}}
.ppdec{background:var(--muted-bg);border-radius:14px;padding:12px 8px 1px;margin:0 0 26px}.ppdec .ppwhy{margin-top:0}
.step{border:1px solid var(--line);border-radius:14px;padding:14px 12px 12px;margin:0 0 16px;background:var(--card)}
.step.opt{border-style:dashed;background:transparent}
.stephd{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin:0 4px 12px}
.stepn{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;white-space:nowrap}
.step.opt .stepn{background:var(--muted-bg);color:var(--ink)}
.stephd h4{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.stephd .sd{flex-basis:100%;font-size:13px;color:var(--ink2)}
.step .ppdec{margin:0 0 16px}.step .today{margin:0 4px}
.pplab{margin:0 8px 4px;font-size:12px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.onmain,.oninner{display:flow-root}.tfix th.r,.tfix td.r{text-align:right}
.onfit th.c1{width:50%}.onfit th.cf{width:12%}.onfit th.c3{width:12%}.onfit th.ce{width:13%}.onfit th.c5{width:13%}
.onfit .monly{display:none}
@media (max-width:600px){.onfit th.c1{width:54%}.onfit th.c3{width:22%}.onfit th.c5{width:24%}
  .onfit th.cf,.onfit td.cf,.onfit th.ce,.onfit td.ce{display:none}.onfit .monly{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px;font-weight:400}}
.onfit tr.flash td{animation:flash 1.4s ease-out}@keyframes flash{from{background:var(--hi)}to{background:transparent}}
.tbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 4px 10px;font-size:12.5px;color:var(--ink2)}.tbar .lnk{margin-left:4px}
.tbar .cbtn{width:128px;text-align:center}@media (max-width:600px){.tbar>span{flex-basis:100%}.tbar .cbtn{width:auto;flex:1}}
.taddw{margin:10px 0 0}.tadd{max-width:100%}
.treason{display:block;font-size:11.5px;color:var(--ink3);margin-top:4px;line-height:1.4}
.tpick{font:inherit;font-size:13px;width:100%;max-width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.howl{display:flex;flex-direction:column;gap:6px}
.howl h4{margin:0 4px 2px;font-size:12px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.howl .oaltb{padding:7px 11px}
.howl .oaltb .t>span{font-size:12px}
.aline.pop{background:var(--card);border-radius:12px}
.btn.sm{padding:6px 14px;font-size:12.5px}
.aline.sent .aword .pill{opacity:.55}
.ppop{position:fixed;top:7vh;left:50%;right:auto;transform:translateX(-50%);width:min(980px,calc(100vw - 32px));max-height:86vh;padding:0;gap:0;overflow:hidden;z-index:70}
.howl .oaltb .t>span{max-width:none}
.howl .oaltb{padding:6px 11px}
.pphead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.pphead h4{margin:0;font-size:14.5px}
.pphead p{margin:2px 0 0;font-size:12.5px;color:var(--ink2)}
.ppbody{overflow-y:auto;padding:10px 8px}
.ppbody .odet{padding:0}
.ppfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
.fsec{background:var(--card);border:1px solid var(--line);border-radius:16px}
.fsec .flist{padding:0 14px 8px}
.fshead{width:100%;display:flex;align-items:center;gap:14px;border:0;background:none;padding:13px 16px;text-align:left;color:inherit;font:inherit;cursor:pointer}
.fshead b{font-size:15px;font-weight:600}
.ghbtn{width:100%;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit;align-items:center}
.ghbtn:hover .gtog{color:var(--ink)}
.gsum{font-size:13px;color:var(--ink2);flex:1 1 auto;min-width:0}
.gtog{font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.ghbtn p{flex-basis:100%}
.nm{font-weight:600;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer;color:var(--ink)}
.nm:hover,.nm:focus-visible{color:var(--buy)}
#npop{position:fixed;z-index:80;max-width:340px;background:var(--accent);color:var(--on-accent);border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.25)}
#npop ul{margin:0;padding-left:16px}
@media (max-width:760px){.ahead{grid-template-columns:1fr 96px}.ato{display:none}.aamt{grid-column:1;text-align:left}}
/* the one action bar */
.obar{position:sticky;bottom:10px;z-index:20;background:var(--card);border:1.5px solid var(--accent);border-radius:18px;padding:13px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:4px;box-shadow:0 14px 32px -10px rgba(0,0,0,.32),0 3px 10px rgba(0,0,0,.14)}
.obar>div:first-child{flex:1 1 0;min-width:0}
.obar b{font-size:15px;font-weight:600;display:block}
.obar p{margin:1px 0 0;font-size:12.5px;color:var(--ink2)}
.pname b{font-weight:600}
.pname span{display:block;font-size:12px;color:var(--ink3)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0;font-size:16px;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.why{margin:0;color:var(--ink2);font-size:13px;max-width:90ch}
.pill{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.p-red{background:var(--red-bg);color:var(--red)} .p-amber{background:var(--amber-bg);color:var(--amber)}
.p-green{background:var(--green-bg);color:var(--green)} .p-grey{background:var(--muted-bg);color:var(--ink2)}
.p-blue{background:var(--buy-bg);color:var(--buy)} .p-sug{background:var(--hi);color:var(--on-hi)}
.p-on{background:var(--on-bg);color:var(--s-on)}
/* Products tab: every shop / online figure in its own pill, centred under its header (Julia 23 Sep) */
.pv{display:inline-block;min-width:38px;padding:2px 9px;border-radius:999px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.pv.s{background:color-mix(in srgb,var(--s-off) 15%,transparent);color:var(--s-off)}
.pv.o{background:var(--on-bg);color:var(--s-on)}
.tfix th.grp{text-align:center;padding-bottom:0}
.tfix th.c,.tfix td.c{text-align:center}
.facts b .pv{display:inline-block;width:auto;margin:2px 4px 0 0;font-size:12.5px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-weight:500;color:var(--ink3);font-size:11.5px;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
table.tfix{table-layout:fixed}
.flag{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
.f-red{background:var(--red)} .f-amber{background:var(--amber)} .f-green{background:var(--green)} .f-grey{background:var(--ink3)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--card)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.more{font-size:12.5px;color:var(--ink3)}

/* online */
.bar{height:8px;background:var(--muted-bg);border-radius:999px;position:relative;overflow:hidden;margin-bottom:4px;min-width:90px}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:999px}
.bar.short i{background:var(--amber)}
.choice{display:flex;gap:6px}
.cbtn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;white-space:nowrap}
.cbtn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cbtn .sg{display:block;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.75}

/* explainer below the app */
.explain{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.explain h2{grid-column:1/-1;margin:0;font-size:18px;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.explain ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.explain ol li::marker{font-weight:700;color:var(--ink3)}
.explain .rules{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.explain h4{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.explain ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.explain .proof{grid-column:1/-1;font-size:13px;color:var(--ink2);border-top:1px solid var(--line);padding-top:12px;margin:0}
@media (max-width:760px){.explain{grid-template-columns:1fr}}

/* products + sales */
.fchip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--ink2);cursor:pointer}
.fchip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.fchip b{color:var(--ink);font-weight:600}
.fchip.on b{color:var(--on-accent)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wkpop.actpop{width:min(560px,calc(100vw - 32px))}.wkpop.actpop .ppbody{padding:18px 22px 22px}ol.acts{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:14px}.acts li{line-height:1.45}.acts li span{display:block;font-weight:600}.acts .lnk{padding:0;text-align:left}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.chg{display:flex;flex-direction:column;gap:6px;font-size:13px}
.chg div{display:grid;grid-template-columns:70px 1fr;gap:8px}
.up{color:var(--green);font-weight:600} .dn{color:var(--red);font-weight:600}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--panel)}
tr.click.on td{background:var(--panel)}
.big{font-size:26px;font-weight:600;letter-spacing:-.01em}
.watch .big{font-size:24px}
.watch p{margin:0;font-size:13px;color:var(--ink2)}
.watch ul{margin:0;padding-left:18px;font-size:12.5px;display:flex;flex-direction:column;gap:3px}
.ghost{background:transparent;border-style:dashed}
.ghost .big{color:var(--ink2)}
.caveat{font-size:12px;color:var(--amber);background:var(--amber-bg);border-radius:8px;padding:4px 8px;width:max-content;max-width:100%}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;font-size:13px}
.facts div span{display:block;font-size:11.5px;color:var(--ink3)}
.facts div b{font-weight:600}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--ink3);font-size:11px;font-family:inherit}
.chart .b-off{fill:var(--s-off)} .chart .b-on{fill:var(--s-on)}
.chart .hit{fill:transparent;cursor:default}
.chart .hit:hover{fill:var(--muted-bg);opacity:.6}
.chart .ann{fill:var(--ink2);font-size:11px;font-family:inherit}
.chart .annl{stroke:var(--ink3);stroke-dasharray:3 3}
.ckey{display:flex;gap:14px;font-size:12.5px;color:var(--ink2)}
.ckey span{display:inline-flex;gap:6px;align-items:center}
.ckey i{width:10px;height:10px;border-radius:3px;display:inline-block}
.tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.12);white-space:nowrap}
.tip b{display:block;margin-bottom:2px}
.tip span{display:flex;gap:6px;align-items:center}
.tip i{width:8px;height:8px;border-radius:2px;display:inline-block}
.pexp>td{background:var(--panel);padding:4px 16px 16px}
.detail{display:flex;flex-direction:column;gap:12px}

/* settings */
.sgroup{display:flex;flex-direction:column}
.srow3{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.srow3:last-child{border-bottom:0}
.srow3 label{font-weight:500;grid-column:1;grid-row:1}
.srow3 .inp,.srow3 .days{grid-column:2;grid-row:1 / span 2;justify-self:end}
.srow3 .hint{color:var(--ink3);font-size:12px;grid-column:1;grid-row:2}
.inp{display:inline-flex;align-items:center;gap:6px}
.inp input,.inp select{font:inherit;font-size:13px;width:70px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.inp input{text-align:right}
.inp select{width:auto}
.inp span{font-size:12.5px;color:var(--ink2)}
.days{display:flex;gap:4px}
.days span{font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:3px 6px;color:var(--ink2)}
.days span.off{background:var(--red-bg);color:var(--red);border-color:transparent;text-decoration:line-through}

/* files */
.drop{border:2px dashed var(--line);border-radius:18px;background:var(--card);padding:22px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center}
.drop b{font-size:15px;font-weight:600}
.drop span{color:var(--ink2);font-size:13px}
.fover{font-size:13px;font-weight:600;color:var(--ink2)}
.fover.ok::before{content:"✓ ";color:var(--green)}
.fover.bad::before{content:"✗ ";color:var(--red)}
.flist{display:flex;flex-direction:column}
.fitem{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:baseline;padding:7px 2px;border-bottom:1px solid var(--line);font-size:12.5px}
.flist .fitem:last-child{border-bottom:0}
.fitem .ficon{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;background:var(--green-bg);color:var(--green);align-self:center}
.fitem.bad .ficon{background:var(--red-bg);color:var(--red)}
.fitem .ftxt b{font-weight:600;font-size:13px}
.fitem .ftxt span{display:block;color:var(--ink3);font-size:11.5px;margin-top:1px}
.fitem .fwhen{color:var(--ink2);font-size:12px;text-align:right;white-space:nowrap}
.fitem .fwhen small{display:block;color:var(--ink3);font-size:11px}

/* slide summary */
.slide{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.slide h2{margin:0;font-size:18px;font-weight:600}
.slide>p{margin:0;color:var(--ink2);font-size:13px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.scard{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.scard h4{margin:0;font-size:14.5px;font-weight:600}
.scard p{margin:0;font-size:13px}
.scard ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink2);display:flex;flex-direction:column;gap:2px}
.disclaimer{font-size:12.5px;color:var(--ink3);max-width:110ch;margin:0}
@media (prefers-reduced-motion:no-preference){.tab,.cbtn,.ftab{transition:background .15s,border-color .15s}}

/* drafted order (24 Sep): the message as it will open - WhatsApp, email draft, Hill's form */
.draft{padding:4px 8px 2px}
.dnote{font-size:12.5px;color:var(--ink2);margin:0 0 10px}
.em{border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:720px;background:var(--card)}
.em .emrow{display:flex;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}
.em .emrow span{color:var(--ink3);width:60px;flex:none}
.em pre{margin:0;padding:12px 14px;font:13.5px/1.55 system-ui,-apple-system,sans-serif;white-space:pre-wrap;color:var(--ink)}
.em.wa .emrow span{width:74px}
.omail{font-size:12.5px;color:var(--ink3);margin-right:12px}.ppact{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px}
/* Hill's form, laid out as Hill's own sheet: header block, their column names, yellow fill-in cells */
.hform{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.hftitle{padding:10px 14px;font-weight:700;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
.hfgrid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 12px;padding:10px 14px;font-size:12.5px;border-bottom:1px solid var(--line)}
.hfgrid span{color:var(--ink3)}.hfgrid b{font-weight:600;color:var(--ink)}
.hform .tbl{border:0;border-radius:0;margin:0}
.hftab{width:100%;border-collapse:collapse;font-size:12px}
.hftab th{font-size:11px;font-weight:600;color:var(--ink2);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:bottom}
.hftab td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.hftab .r{text-align:right}.hftab .sub{display:block;font-size:10.5px;color:var(--ink3);font-weight:400}
.hftab .hfsec td{font-weight:600;font-size:11.5px;color:var(--ink2);background:var(--panel)}
.hform .yl{background:var(--amber-bg)}
.hfgrid b.yl{justify-self:start;padding:0 6px;border-radius:3px}
.hform .tbl{overflow-x:auto}.hftab{min-width:820px}.hftab td,.hftab th{white-space:nowrap}
/* weekly summary (24 Sep): the Monday email to the head of shops */
.wkpop{width:min(820px,calc(100vw - 32px))}.wkpop .ppbody{padding:0}
.wkmail{padding:14px 20px 18px}
.wkmail h5{font-size:13px;margin:18px 0 6px;color:var(--ink)}
.wkmail p,.wkmail li{font-size:13.5px;line-height:1.55;color:var(--ink)}
.wkmail p{margin:0 0 8px}.wkmail ul{margin:0;padding-left:18px}.wkmail li{margin:0 0 5px}
.wkmail .lead{font-size:14.5px}
.wkcharts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 4px}
@media (max-width:700px){.wkcharts{grid-template-columns:1fr}}
.wkc{border:1px solid var(--line);border-radius:10px;padding:10px 12px 6px}
.wkc b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.wkc .lg{display:flex;gap:12px;font-size:11.5px;color:var(--ink2);margin:4px 0 2px}
.wkc .lg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.wkc svg{display:block;width:100%;height:auto}
.wkc svg text{fill:var(--ink3);font-size:10px}
.wkc svg .gl{stroke:var(--line);stroke-width:1}
.wkc svg .cl{fill:var(--ink2);font-size:10.5px}.wkc svg .cv{fill:var(--ink);font-size:10.5px;font-weight:600}
.wkc svg .cb{fill:var(--accent)}.wkc svg .cur{stroke:var(--card);stroke-width:6;stroke-linecap:round}.wkc svg .cu{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.wkc .lg i.lgu{width:2px;height:11px;border-radius:1px;background:var(--ink);vertical-align:-2px}

/* ---- narrow windows, tablets and phones (Julia 24 Sep): the app always fits the window, nothing is cut off.
   Was: min-width 1040px, so a narrower window cut off the right side. ---- */
.app{min-width:0;overflow:clip}.frame-scroll{overflow:visible}
.datebar,.topbar{flex:none}
@media (max-width:1100px){.look{grid-template-columns:180px minmax(0,1fr)}}
@media (max-width:900px){
  .topbar{overflow-x:auto;scrollbar-width:none}.topbar::-webkit-scrollbar{display:none}
  .tdiv{margin:20px 8px 10px}
  .look{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl>table.tfix{min-width:620px}
  /* each order: address, status and › on top; why underneath; the minimum bar and amount last */
  .ahead.arow{grid-template-columns:auto minmax(0,1fr) auto !important;grid-template-areas:"to word end" "line line line" "amt amt amt";gap:6px 10px;padding:10px 12px}
  .arow .ato{display:block;grid-area:to;padding-top:0}
  .arow .aword{grid-area:word}.arow .aline1{grid-area:line}.arow .aend{grid-area:end}
  .arow .aamt{grid-area:amt;grid-template-columns:auto 1fr;text-align:left;max-width:420px}
  .arow .aamt b{text-align:left}
}
@media (max-width:760px){
  body{padding-inline:8px;padding-block:8px 16px}
  .datebar{padding:12px 14px 6px;font-size:16px;flex-wrap:wrap;row-gap:8px}
  .hist button{padding:5px 10px;font-size:12px}
  .tglabel,.tdiv{display:none}
  .topbar{flex-wrap:wrap;overflow:visible;gap:6px;padding:4px 12px 10px;align-items:center}
  .tsec,.tgroup{display:contents}
  .tab{border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin:0;background:var(--card);font-size:13px}
  .tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .tab[aria-selected="true"]::before{display:none}
  .tab[aria-selected="true"] .badge{background:var(--on-accent);color:var(--accent)}
  .tab.gear{margin-left:0;padding:6px 9px}.tab.gear svg{width:16px;height:16px}
  .body{padding:12px 10px}
  .pagehead p{display:none}
  .ogroup{padding:4px 6px 8px;border-radius:16px}
  .pill.pillh{font-size:15px;padding:5px 12px}
  .shead{flex-wrap:wrap;row-gap:0;padding:10px 12px 2px}
  .obar{padding:10px 12px}.obar p{display:none}
  .two,.three{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar .gsep{display:none}.topbar .gbr{display:block;flex-basis:100%;height:0}
  .dact{padding:8px 12px 12px}.obar.dock{flex-wrap:wrap;height:104px;align-content:center;bottom:12px}.obar.dock>div:first-child{width:100%}.obar.dock b{flex-wrap:nowrap}
  .obar.dock .actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.obar.dock .actions .btn{width:100%;min-width:0}.pin{margin:-12px -10px 0;padding:8px 12px;font-size:12.5px}
  .scard{grid-template-columns:minmax(0,1fr)}.scard .sact{justify-content:flex-start}
  /* popups fill the screen */
  .ppop{top:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .ppop .tbl>table.tfix{min-width:620px}.ppop .tbl>table.tfix.onfit{min-width:0}
  .ppop .tbl.vs>table.tfix{min-width:0}.tbl.vs td,.tbl.vs th{padding:7px 5px;overflow-wrap:anywhere}
  .ppfoot{flex-wrap:wrap;padding:10px 12px}.ppfoot .btn{margin-left:auto}
  .pphead{padding:12px 12px 8px}
  .wkmail{padding:12px 12px 14px}.hfgrid{grid-template-columns:auto 1fr}
  /* calendar: day number and coloured dots; the day's detail opens below */
  .msg{max-width:100%}.msg.ai{width:100%}
}
/* why this amount: one floating note, fixed to the screen so the scrolling table can't cut it off */
.qwhy{cursor:help;text-decoration:underline dotted;text-underline-offset:3px;outline:none}
#qtip{position:fixed;z-index:95;width:330px;max-width:calc(100vw - 16px);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;font-weight:400;line-height:1.4;text-align:left;pointer-events:none;display:none;box-shadow:0 12px 32px rgba(30,40,32,.16)}
#qtip .qh{display:block;font-weight:700;margin-bottom:8px}
#qtip table{width:100%;border-collapse:collapse}#qtip td{padding:4px 0;vertical-align:top;font-size:13px}
#qtip td.r{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
#qtip td small,#qtip .qf{display:block;color:var(--ink2);font-size:12px}#qtip .qf{margin-top:8px}
#qtip tr.sum td{border-top:1px solid var(--line);padding-top:7px;font-weight:700}
.qwhy:focus-visible{outline:2px solid var(--buy);outline-offset:2px}

/* guided Orders (8 Oct): steps across the top; the next thing to do glows; later steps are dimmed but always open (UI rule 4) */
.gst .gn{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;background:var(--muted-bg);color:var(--ink2)}
.gst.done .gn{background:var(--green-bg);color:var(--green)}
.gst.later{opacity:.45}.gst.later:hover{opacity:.8}
.gst.next .gn{background:var(--hi);color:var(--on-hi)}
.gbr{display:none}
@media (min-width:761px) and (max-width:1060px){.topbar{flex-wrap:wrap;overflow:visible;row-gap:2px}.tdiv{display:none}.seclook{flex-basis:100%}.tab.gear{position:absolute;right:16px;top:auto}}   /* steps on one row, Analysis on the next: nothing cut off */
.gsep{color:var(--ink3);font-size:12px;padding:0 0 12px;user-select:none}
@keyframes glow{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--hi) 35%,transparent)}}
.oghead .gright{margin-left:auto;display:flex;align-items:center;gap:10px}
.dcard{border-bottom:1px solid var(--line)}.olist>.dcard:last-child{border-bottom:0}
.dcard .scard2{padding-bottom:0}
.dact{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 16px 14px;min-height:62px;box-sizing:border-box}   /* same height agreed or not: nothing below moves (UI rule 6) */
.dact .osent{padding:0}.dact .chg{font-weight:500;color:var(--ink2)}
.dr{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.dact .btn,.gright .btn,.scard .btn,.obar .btn{min-height:40px;padding:9px 18px;font-size:13.5px}
/* the next thing to do: a lime button, the word Next beside it, a lime outline round its card (colour repeats the word, UI rule 2) */
.btn.go{background:var(--hi);color:var(--on-hi);border-color:color-mix(in srgb,var(--on-hi) 25%,var(--hi));font-weight:700;animation:glow 1.8s ease-in-out infinite;box-shadow:0 0 0 3px color-mix(in srgb,var(--hi) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.btn.go{animation:none}}
.p-next{background:var(--hi);color:var(--on-hi);font-weight:700;font-size:11.5px;padding:3px 10px}
.dcard.isnext{outline:2.5px solid var(--hi);outline-offset:-2.5px;border-radius:14px}
.ogroup.isnext{outline:3px solid var(--hi);outline-offset:-3px}
.gright .p-next{margin-right:-2px}
/* today's figures, one slim bar pinned to the top while the list scrolls */
.pin{position:sticky;top:0;z-index:12;display:flex;justify-content:space-between;align-items:center;gap:6px 18px;flex-wrap:wrap;margin:-18px -18px 0;padding:10px 18px;background:var(--card);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}
.pin b{color:var(--ink);font-size:14.5px}.pin .lnk{font-size:13px}
/* the guiding bar on Decide (10 Oct): where you are in words, one sentence on what to do, today's figures */
.pin.guide{display:block;padding:10px 18px 2px}
.dsubs{display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap;margin:0 0 10px}
.dsub{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 12px 4px 5px;font:inherit;font-size:13px;color:var(--ink3);cursor:pointer}
.dsub .gn{width:20px;height:20px;border-radius:50%;background:var(--muted-bg);color:var(--ink3);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.dsub.on{color:var(--ink);font-weight:600;border-color:var(--ink)}.dsub.on .gn{background:var(--ink);color:var(--card)}
.dsub.done{color:var(--ink2)}.dsub.done .gn{background:var(--muted-bg);color:var(--ink)}
/* figure chips in the guiding bar: the colour repeats the words (UI rule 2) */
.gfacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.gchip{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--muted-bg);color:var(--ink2)}.gchip b{color:inherit}
.g-green{background:var(--green-bg);color:var(--green)}.g-amber{background:var(--amber-bg);color:var(--amber)}.g-red{background:var(--red-bg);color:var(--red)}.g-blue{background:var(--buy-bg);color:var(--buy)}
.dchg{font-size:13px;color:var(--ink3);margin-left:10px}
.btn.choice{border-color:var(--amber);background:var(--amber-bg);color:var(--ink)}.btn.choice b{font-weight:600}
/* Continue sits in the same place on all three screens (UI rule 6): the bar is pushed to the foot of the screen */
.body.pinned{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column}.body.pinned>.detail{flex:1 0 auto;display:flex;flex-direction:column}.body.pinned .obar.dock{margin-top:auto}
@media (min-width:701px){.body.pinned .dock .btn.go{width:270px}.body.pinned .dock .actions{display:flex;gap:8px}.body.pinned .obar.dock{height:96px;align-items:center}}
.body.pinned .dock .gfacts{flex:1;min-width:0}
.dock .gfacts b{display:inline;font-size:inherit}.dock .gchip{white-space:nowrap}
@media (max-width:700px){.body.pinned .obar.dock .actions{grid-template-columns:92px 1fr}.body.pinned .obar.dock .actions .btn.go{grid-column:2}.pin.guide{position:static}.obar.dock{height:auto;min-height:0;padding-block:10px}}
.pinned .oghead{top:calc(var(--pinh,44px) + 6px)}
.dcard[data-cn]:not(.ok):not(.isnext){cursor:pointer}
.dock{min-height:84px;box-sizing:border-box;flex-wrap:nowrap;bottom:18px}   /* = the page padding, so it sits the same floating or at the end */
.dock .btn.go{min-width:132px}
.dock b{min-width:0}   /* one height whatever it says: OK never moves (UI rule 6) */
.dock>div:first-child{min-width:0}.dock .actions{flex:none;display:flex;gap:10px}
.dock b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toast{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:500;line-height:1.4}
.toast .lnk{color:var(--hi);font-weight:700}
.dcard.ok .scard2{opacity:.55}
.dcard.ok{background:color-mix(in srgb,var(--green-bg) 45%,transparent)}
.scard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.scard h4{margin:0;font-size:15px;font-weight:600}.scard p{margin:2px 0 0;font-size:12.5px;color:var(--ink2)}
.scard .sact{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.scard.sent{background:color-mix(in srgb,var(--green-bg) 45%,var(--card))}

/* ---- Decide, 13 Oct (Julia): OK in the card's header, Change at the end of each line, ticked steps in green ---- */
.shead{align-items:center;padding-bottom:0}.dcard .shead{min-height:40px}
.sright{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.sright .chg{font-size:12px;color:var(--ink2)}
.btn.okb{min-height:34px;min-width:76px;padding:6px 16px;font-size:13.5px;font-weight:600}
.btn.okb.on{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.dcard.ok .scard2{opacity:1}.dcard.ok .aline{opacity:.6}   /* an OK'd card fades its lines, never its OK */
.arow{cursor:default !important;grid-template-columns:110px 150px 1fr 250px 84px !important}.arow:hover{background:transparent}
.aend .lnk{font-size:13px}
.dsub.done{color:var(--green);border-color:var(--green)}.dsub.done .gn{background:var(--green);color:var(--card)}
.dsub:not(.on):not(.done){opacity:.7}
.dsub.locked{opacity:.4;cursor:not-allowed}
@media (max-width:700px){.sright{flex-wrap:nowrap}
  .obar.dock .gfacts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-height:30px}.obar.dock .toast{white-space:nowrap}.obar.dock .gfacts::-webkit-scrollbar{display:none}}   /* phone: one row of chips, it scrolls inside the bar; the bar's height never changes */
.tfix tr.rsoff>td{opacity:.5}.tfix tr.rsoff>td:last-child{opacity:1}
.bks{display:none}@media (max-width:700px){.bkl{display:none}.bks{display:inline}}   /* phone: "‹ Back" fits on one line */
.body.pinned{flex-shrink:0}   /* never squeezed to one screen: the step strip stays stuck to the bottom of the list (13 Oct) */
.pname .rswarn{display:block;color:var(--amber);font-size:12px;margin-top:2px}

/* Decide, 13 Oct (Julia): each supplier its own box; its header row names the columns; decided = greyed under a veil with Reopen */
.dboxes{display:flex;flex-direction:column;gap:10px}
.chead{align-items:center !important;padding:10px 14px 4px !important;border-bottom:1px solid var(--line);margin-bottom:2px}
.chead .cname{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.chead .clab{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}.chead .clab.r{text-align:right}
.chead .cdays{font-size:12px;color:var(--ink3)}
.chead .sright{justify-content:flex-end}.dcard.ok .aline{opacity:1}
@media (max-width:700px){.chead{display:flex !important;flex-wrap:wrap;gap:4px 10px}.chead .clab,.chead .cdays{display:none}.chead .sright{margin-left:auto}}
.chead .sright{flex-wrap:nowrap;white-space:nowrap;justify-self:end;width:max-content}   /* "Your call" beside Accept, spilling left into the free space, never a second line */

/* Decide boxes v3 (Julia, 13 Oct): name + Review; per line Recommended + Before → After; Accept only in Review's last tab */
.barow{display:grid;grid-template-columns:62px 130px minmax(0,1fr);gap:12px;align-items:center}
.bbar .bar{width:130px;margin:0}
.bak{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.rpop .rtabs{margin:8px 0 0}
.rpop .stephd .stepn,.rpop .stephd h4{display:none}.rpop .step{border:0;padding:4px 6px;margin:0}
.rpop .ppact .btn{min-height:40px;padding:9px 18px}
@media (max-width:700px){.barow{grid-template-columns:52px 70px minmax(0,1fr);gap:8px}.bbar .bar{width:70px;min-width:0}
  .rpop .ppfoot{flex-wrap:wrap}.rpop .ppact{width:100%}.rpop .ppact .btn{width:100%}}
.bbar{display:block}.bbar .bar{display:block}
.barow{grid-template-columns:112px 130px minmax(0,1fr) !important}.barow .pill{font-size:11.5px;padding:2px 9px;margin-right:4px}
@media (max-width:700px){.barow{grid-template-columns:1fr !important;gap:3px}.bbar .bar{width:100%}}

/* Decide as a to-do list (Julia, 13 Oct, option A): one line per order: who · what · minimum bar · one reason · Review */

/* Decide boxes, status first (Julia, 13 Oct): name · Status · Before · Recommended, each with its bar; Accept + Review on the last row */
.sbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 16px 14px}
.sbrow{display:grid;grid-template-columns:110px 170px minmax(0,1fr) 200px;gap:14px;align-items:center;padding:4px 0}
.sbk{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.sbbar .bar{display:block;width:100%;margin:0}
.sbt{font-size:13.5px}.sbt b{font-variant-numeric:tabular-nums}
.sbact{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.sbox.ok{background:color-mix(in srgb,var(--green-bg) 40%,var(--card))}.sbox.ok .sbrow>:not(.sbact){opacity:.45}
@media (max-width:760px){.sbrow{grid-template-columns:96px minmax(0,1fr);gap:4px 10px}.sbbar:empty{display:none}.sbt{grid-column:2}.sbact{grid-column:1/-1;justify-content:flex-start;margin-top:6px}.sbact:empty{display:none}}
.sbt.sbwide{grid-column:2/4}   /* the status line starts where the bars start */
@media (max-width:760px){.sbt.sbwide{grid-column:2}}

/* Order tab (Julia, 13 Oct): key point big, then box 1 (reaching the minimum, tinted) and box 2 (worth adding, dashed) */
.keyline{margin:2px 4px 14px}.keyline b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.keyline span{display:block;font-size:14px;color:var(--ink2);margin-top:3px}
.mbox{border-radius:14px;padding:12px 12px 10px;margin:0 0 14px}
.mbox.m1{background:color-mix(in srgb,var(--green-bg) 55%,var(--card));border:1px solid color-mix(in srgb,var(--green) 35%,transparent)}
.mbox.m2{border:1.5px dashed var(--line);background:transparent}
.mhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 8px}.mhead .pill{font-size:12.5px;padding:4px 11px}.mhead b{font-size:16px;font-variant-numeric:tabular-nums}.mhead span:not(.pill){font-size:13px;color:var(--ink2)}
.mnote{font-size:13px;color:var(--ink2);margin:8px 2px 0}
.mtab td.why{color:var(--ink2);font-size:13px}.xbtn{font-size:14px;text-decoration:none;color:var(--ink3)}.xbtn:hover{color:var(--red)}
.btn.sm{min-height:30px;padding:4px 12px;font-size:12.5px}
.tbar.inl{display:inline-flex;margin:0 0 0 6px;vertical-align:middle}
.mhead .mright{margin-left:auto}.mbox .taddw{margin:8px 0 0}.mtab .rskeep{width:64px}

/* Order tab: Order now / Wait first, as two equal option cards (Julia, 13 Oct); Review keeps one height, inside scrolls */
.mopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.mopt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;font:inherit;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;color:var(--ink)}
.mopt.on{border-color:var(--green);background:color-mix(in srgb,var(--green-bg) 55%,var(--card))}
.mopt:disabled{cursor:not-allowed;opacity:.6}
.mot{display:flex;align-items:center;gap:8px;margin-bottom:2px}.mot b{font-size:16px}
.mot i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink3);flex:none}.mopt.on .mot i{border:4px solid var(--green)}
.mopt>span:not(.mot){font-size:13px;color:var(--ink2)}
.rpop{height:min(86vh,980px);display:flex;flex-direction:column}.rpop .ppbody{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (max-width:700px){.mopts{grid-template-columns:1fr}}
.keyline.why{margin-top:-4px}.keyline.why span{font-size:14.5px;color:var(--ink)}
.mopts.m3{grid-template-columns:1fr 1fr 1fr}@media (max-width:700px){.mopts.m3{grid-template-columns:1fr}}

/* Transfer (Julia, 13 Oct): the direction on the left, with space; the list on the right */
.trstat{margin:2px 4px 14px}.trstat b{display:block;font-size:20px;font-weight:700}.trstat span{display:block;font-size:14px;color:var(--ink2);margin-top:3px}
.trsec{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 14px}
.trlab{display:flex;flex-direction:column;gap:4px;padding:4px 0 0 4px;border-left:4px solid var(--c);padding-left:12px}
.trlab b{font-size:20px;font-weight:700;color:var(--c)}.trlab span{font-size:14px;color:var(--ink)}.trlab em{font-style:normal;font-size:12.5px;color:var(--ink3)}
.t-vg{--c:var(--buy,#3B6EA8)}.t-gv{--c:var(--green)}
@media (max-width:760px){.trsec{grid-template-columns:1fr;gap:10px}}
.trlab{position:sticky;top:calc(var(--pinh,0px) + 8px);align-self:start}
.trdoneline{margin:4px 2px 14px;font-size:13.5px;color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mscroll{max-height:380px;overflow:auto;border:1px solid var(--line);border-radius:12px}.mscroll .tbl{margin:0;overflow:visible}
.mscroll thead th{position:sticky;top:0;background:var(--card);z-index:1}   /* the direction stays in view down its list */
@media (max-width:760px){.trlab{position:static}}

/* Send (Julia, 13 Oct, rule 0): three labelled sections on the left; one short row per thing to send */
.sdlist{display:flex;flex-direction:column}
.sdrow{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.sdlist>.sdrow:last-child{border-bottom:0}
.sdname{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sdname b{font-size:15px}.sdname .pill{font-size:11px;padding:2px 8px}
.sdwhat{font-size:13.5px;color:var(--ink2)}.sdwhat b{color:var(--ink);font-variant-numeric:tabular-nums}
.sdrow.sent>:not(.sact){opacity:.5}
.t-vb{--c:var(--amber)}
@media (max-width:760px){.sdrow{grid-template-columns:1fr;gap:6px}}
.sdrow .sact{display:flex;align-items:center;gap:14px}

/* Decide by rule 0 (Julia, 13 Oct): supplier name on the left like Transfer and Send; the Recommended row stands out */
.sbox.trsec{padding:16px}.sbrows{display:flex;flex-direction:column}
.sbox .sbrow{grid-template-columns:100px 160px minmax(0,1fr) auto}
.sbrow.sbrec .sbt{font-size:15px}.sbrow.sbrec .sbt b{font-size:18px}
.sbox.ok .trlab{opacity:.5}
.t-red{--c:var(--red)}.t-grey{--c:var(--ink3)}
.trsec .tbl{padding:0 !important}
@media (max-width:760px){.sbox .sbrow{grid-template-columns:96px minmax(0,1fr)}}
.dlist{list-style:none;margin:0;padding:0}.dlist li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}.dlist li:last-child{border-bottom:0}.dlist li span{color:var(--ink2)}

/* Analysis as questions (Julia, 13 Oct, option B) */
.qa{margin:0 0 6px;font-size:15px;font-weight:600}
.qr{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line)}.qr:last-of-type{border-bottom:0}.qr span{color:var(--ink2)}.qr b{font-weight:500;text-align:right}
.qsee{margin-top:8px}.anbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.an-in .pagehead{display:none}
.an-in .ftrow{display:none}

/* box note (Julia, 24 Oct): a box that lasts past PACK_NOTE_MONTHS is still bought, and says so */
.pk{display:inline-block;margin-top:3px;font-size:11.5px;font-weight:500;background:var(--amber-bg);color:var(--amber);border-radius:999px;padding:1px 8px;white-space:nowrap}
/* the supplier box, layout 3 (Julia, 24 Oct): GOL left, VB right; To GOL / To VB in the Transfer screen's blue and green */
.sdmain{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;align-items:center}
.sdstat{grid-column:1;margin:0 0 12px;font-size:13px;color:var(--ink2)}
.sds{grid-column:1;display:grid;grid-template-columns:1fr 1fr}
.sdmain .sbact{grid-column:2;grid-row:1/3}
.sdside{min-width:0;padding:2px 20px 2px 0}.sdside+.sdside{padding:2px 0 2px 20px;border-left:1px solid var(--muted-bg)}
.to{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}.to small{font-weight:500;opacity:.85}
.to-g{background:var(--buy-bg);color:var(--buy)}.to-v{background:var(--green-bg);color:var(--green)}
.sdhead{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin-top:8px}
.sdamt{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.sdmet{font-size:13.5px;color:var(--ink2)}.sdmet.short{color:var(--amber)}
.sdnone{margin:10px 0 0;font-size:13.5px;color:var(--ink3)}
.sdbar{position:relative;height:12px;border-radius:999px;background:var(--muted-bg);display:flex;margin:10px 0 30px}
.sdbar i{display:block;height:100%}.sdbar i:first-child{border-radius:999px 0 0 999px}.sdbar i:last-of-type{border-radius:0 999px 999px 0}.sdbar i:only-of-type{border-radius:999px}
.sdbar i+i{border-left:2px solid var(--card)}
.sp-f{background:var(--accent)}.sp-o{background:#A3ADA5}.sp-o2{background:#CCD3CD}.sp-t{background:repeating-linear-gradient(135deg,#D9A441 0 4px,#EBC77E 4px 8px)}
.sdmin{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}.sdmin span{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:500;color:var(--ink2);white-space:nowrap}
.sdparts{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px 10px;align-items:center;font-size:13px}
.sdparts em{font-style:normal;font-size:11.5px;color:var(--ink3)}.sdparts .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.sbox.ok .sdmain>:not(.sbact){opacity:.45}
@media (max-width:900px){.sds{grid-template-columns:1fr}.sdside+.sdside{border-left:0;border-top:1px solid var(--muted-bg);padding:12px 0 0;margin-top:12px}.sdside{padding-right:0}
  .sdmain{grid-template-columns:1fr}.sdmain .sbact{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:12px}}
.mopts3{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 4px 12px}@media (max-width:700px){.mopts3{grid-template-columns:1fr}}
.qtipsrc{display:none !important}.trstat .qwrap,.trstat .qwhy{display:inline}

/* supplier steps as tables (26 Oct) */
.mtab tr.sok td{background:color-mix(in srgb,var(--green-bg) 55%,transparent)}.treason.short{color:var(--red)}.treason.chg{color:var(--amber)}
.mtab th small{font-weight:400;color:var(--ink3)}