/* Stock, Buying and Drops in Locus. profit/supply.js draws them; tokens only (v2.css, mobius.css).
   2026-10-09 redesign: the pages are `.v2 .spx` and use the v2 pieces (v2card, v2tiles, v2tbl, ds-btn, ds-seg,
   ds-chip, the v2 side sheet). This file only adds what those do not have. The `sp-` rules at the end serve Brand
   settings > Stock and factories, the forms and the stock chip on Meta ads. */

/* ---------- shared bits on the three pages ---------- */
.spx .spx-mut{color:var(--muted)} .spx-bad{color:var(--bad);font-weight:600} .spx-warn{color:var(--warn);font-weight:600} .spx-good{color:var(--good);font-weight:600}
.spx-grow{flex:1}
.spx-u{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:6px}
.spx-upd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:-8px;font-size:12.5px;color:var(--muted)}
.spx-upd > span{display:inline-flex;align-items:center;gap:6px}
.ds-btn.sm{height:28px;padding:0 10px;font-size:12.5px;gap:5px}
.ds-btn.sm svg,.ds-btn svg{width:14px;height:14px}
.ds-btn[disabled]{opacity:.6;cursor:default}
.spx-sec{margin:4px 0 -6px}
.spx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.spx .spx-bar .ds-seg button{display:inline-flex;align-items:center;gap:6px}
.spx-n{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ds-seg button.on .spx-n{color:var(--muted)}
.spx-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.spx-acts.end{justify-content:flex-end;margin-top:0;flex-wrap:nowrap}
.spx-call{height:24px;font-size:12px;font-weight:600}
.v2tile[data-sp-f]{cursor:pointer}
.v2tile[data-sp-f]:hover{border-color:var(--line-strong)}
.spx .v2tile .sub{font-size:12px;color:var(--muted);line-height:1.45}

/* a product's name with its picture */
.spx-pn{display:flex;align-items:center;gap:10px;min-width:0;text-align:left;cursor:pointer}
.spx-pn > div{min-width:0;display:flex;flex-direction:column}
.spx-pn b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.spx-pn span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.sp-av{width:32px;height:32px;border-radius:var(--r-sm,8px);background:var(--surface-2);background-size:cover;background-position:center;display:grid;place-items:center;font-weight:700;font-size:11.5px;color:var(--ink-2);flex:none;border:1px solid var(--line)}

/* the one Stock table (2026-10-21 review): fixed columns that fit at 1280 and 1024, no sideways scroll, numbers right
   aligned and tabular, header words on one line, names wrap to two lines. Under 600px phone.css turns rows into cards. */
.spx-tbl td{vertical-align:middle}
.spx-arr{font-size:11px;color:var(--brand)}
[data-ui="v2"] .spx .spx-tbl{overflow-x:visible}
[data-ui="v2"] .spx .spx-tbl table{table-layout:fixed;width:100%}
.spx-tbl col.c-num{width:84px}
.spx-tbl col.c-days{width:176px}
.spx-tbl col.c-land{width:116px}
.spx-tbl col.c-call{width:124px}
[data-ui="v2"] .spx .spx-tbl th.v2srt button{white-space:normal;word-break:keep-all;overflow-wrap:normal;line-height:1.25}
[data-ui="v2"] .spx .spx-tbl th{white-space:normal;vertical-align:bottom}
[data-ui="v2"] .spx .spx-tbl td{white-space:normal;font-variant-numeric:tabular-nums;padding-top:8px;padding-bottom:8px}
[data-ui="v2"] .spx .spx-tbl td.c-name{min-width:0}
[data-ui="v2"] .spx .spx-tbl td.c-days{text-align:left}
[data-ui="v2"] .spx .spx-tbl th.c-days button{justify-content:flex-start}
[data-ui="v2"] .spx .spx-tbl td.c-call .ds-chip{white-space:nowrap}
.spx-tbl .spx-pn b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;max-width:none;line-height:1.3;overflow-wrap:anywhere}
.spx-tbl .spx-pn span{max-width:none}
/* the one bar on the page: days of stock left, a tick at the lead time; colour only from that comparison */
.spx-dc{display:flex;flex-direction:column;min-width:0}
.spx-db{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:8px;align-items:center;width:100%}
.spx-dbt{position:relative;height:6px;border-radius:2px;background:var(--line)}
.spx-dbt i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--brand)}
.spx-db.warn .spx-dbt i{background:var(--warn)}
.spx-db.bad .spx-dbt i{background:var(--bad)}
.spx-dbt em{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink-2)}
.spx-db b{font-weight:600;text-align:right;color:var(--ink)}
/* narrow windows above phone size: drop the two least-needed columns, then Restock */
@media (min-width:601px) and (max-width:960px){.spx-tbl .c-sold,.spx-tbl .c-ads{display:none}}
@media (min-width:601px) and (max-width:740px){.spx-tbl .c-land{display:none}}
@media (max-width:600px){.spx-tbl .spx-dc{width:170px}.spx-tbl .spx-dc .sub{text-align:right}}

/* ---------- the product sheet ---------- */
.spx-verdict{padding:12px 14px;border-radius:var(--r-md,10px);display:grid;gap:3px;margin-bottom:12px}
.spx-verdict b{font-size:14px;font-weight:650}
.spx-verdict p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.spx-verdict.bad{background:var(--bad-bg)} .spx-verdict.bad b{color:var(--bad)}
.spx-verdict.good{background:var(--good-bg)} .spx-verdict.good b{color:var(--good)}
.spx-verdict.warn{background:var(--warn-bg)} .spx-verdict.warn b{color:var(--warn)}
.spx-verdict.n{background:var(--surface-2)} .spx-verdict.n b{color:var(--ink)}
.spx-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--surface)}
.spx-stats.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}
.spx-stats > div{padding:12px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.spx-stats > div:last-child{border-right:0}
.spx-stats > div > span{font-size:12px;color:var(--muted)}
.spx-stats b{font-size:19px;font-weight:650;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.spx-stats em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.4}
@media (max-width:900px){.spx-stats,.spx-stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}.spx-stats > div{border-right:0;border-bottom:1px solid var(--line)}}
.spx-say{margin:0 0 10px}
.spx-flags{position:relative;margin:0 0 2px}
.spx-flag{position:absolute;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill,999px);font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.spx-flag i{position:absolute;bottom:-5px;width:1px;height:5px;background:currentColor;opacity:.5}
.spx-flag.bad{background:var(--bad-bg);color:var(--bad)} .spx-flag.good{background:var(--good-bg);color:var(--good)} .spx-flag.acc{background:var(--brand-soft);color:var(--brand-ink,var(--brand))}
.spx-chart svg{display:block;width:100%;height:auto;touch-action:pan-y}
.spx-chart .v2tip{min-width:180px}
.spx-tbad{color:var(--bad)} .spx-tgood{color:var(--good)}
.spx-lg{margin:10px 0 0}
.spx-lg i.sq{width:10px;height:10px;border-radius:2px}
.spx-first td{background:color-mix(in srgb,var(--bad-bg) 55%,transparent)}
.spx-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 16px}
.spx-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.spx-f.wide{grid-column:1/-1}
.spx-f > label{font-size:12.5px;font-weight:600;color:var(--ink)}
.spx-help{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
.spx-in{width:100%;box-sizing:border-box;height:34px;padding:0 10px;border-radius:var(--r-sm,8px);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px}
textarea.spx-in{height:auto;min-height:72px;padding:8px 10px;resize:vertical;line-height:1.45}
.spx-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.spx-in.qty{width:84px;height:30px;text-align:right}
.spx-in[disabled]{background:var(--surface-2);color:var(--muted)}
.spx-kind{display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box}
.spx-kind button{flex:1 1 auto;min-width:110px;padding:7px 12px}
.spx-box{padding:10px 12px;border-radius:var(--r-sm,8px);font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:10px}
.spx-box.warn{background:var(--warn-bg)} .spx-box.warn b{color:var(--warn)}
.spx-box.info{background:var(--brand-soft)} .spx-box.info b{color:var(--brand-ink,var(--brand))}
.spx-box.bad{background:var(--bad-bg)} .spx-box.bad b{color:var(--bad)}
.spx-box.good{background:var(--good-bg)} .spx-box.good b{color:var(--good)}

#v2panel .ph .pacts .ds-btn{height:30px;padding:0 11px;font-size:12.5px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
#v2panel .ph .pacts .ds-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

/* ---------- Buying ---------- */
.spx-och{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.spx-oct{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spx-oct h3{margin:0;font-size:16px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.spx-oc > .v2say{margin:8px 0 0}
.spx-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md,10px);overflow:hidden;margin:14px 0 6px}
.spx-facts > div{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.spx-facts span{font-size:12px;color:var(--muted)} .spx-facts b{font-size:16px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:760px){.spx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spx-ol{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(0,1.6fr) 110px auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.spx-ol:last-child{border-bottom:0}
.spx-ol.out{opacity:.55}
.spx-why{font-size:13px;color:var(--ink-2);line-height:1.5}
.spx-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.spx-sizes .ds-chip{height:24px;font-size:12px}
.spx-sizes .ds-chip b{color:var(--ink);font-weight:650;margin-left:2px}
.spx-q{text-align:right;display:flex;flex-direction:column}
.spx-q b{font-size:16px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums} .spx-q span{font-size:12px;color:var(--muted)}
.spx-io{display:flex;justify-content:flex-end}
@media (max-width:860px){.spx-ol{grid-template-columns:1fr auto}.spx-ol .spx-why{grid-column:1/-1;grid-row:2}.spx-ol .spx-io{grid-column:1/-1;justify-content:flex-start}}
.spx-po{display:block;padding:14px 12px;margin:0 -12px;border-radius:var(--r-md,10px);cursor:pointer;border-bottom:1px solid var(--line)}
.spx-po:last-of-type{border-bottom:0}
.spx-po:hover{background:var(--surface-2)}
.spx-poh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.spx-poh > b{font-size:14px;color:var(--ink)}
.spx-land{font-weight:600;color:var(--ink)}
.spx-pot{font-size:12.5px;margin-top:8px}
.spx-prog{height:4px;border-radius:2px;background:var(--surface-2);margin-top:10px;overflow:hidden}
.spx-prog i{display:block;height:100%;background:var(--brand);border-radius:2px}
.spx-orow{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer;flex-wrap:wrap}
.spx-orow:hover{color:var(--brand)}
.spx-landed summary{cursor:pointer;color:var(--muted);font-size:13px;padding:10px 0 4px}

/* a row of stages (orders, drops, designs): each step owns its column, so no label can overlap another */
.spx-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(96px,1fr));overflow-x:auto}
.spx-steps li{position:relative;display:flex;flex-direction:column;gap:2px;padding:18px 8px 0 0;min-width:0}
.spx-steps li::before{content:'';position:absolute;top:5px;left:0;right:0;height:2px;background:var(--line-strong)}
.spx-steps li:last-child::before{right:auto;width:12px}
.spx-steps li.done::before{background:var(--brand)}
.spx-steps li i{position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);box-sizing:border-box}
.spx-steps li.done i{background:var(--brand);border-color:var(--brand)}
.spx-steps li.now i{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.spx-steps li.late i{border-color:var(--bad)}
.spx-steps b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spx-steps li:not(.done):not(.now) b{color:var(--ink-2)}
.spx-steps span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spx-steps li.late span{color:var(--bad)}

/* ---------- Drops ---------- */
.spx-closed{display:flex;align-items:center;gap:6px;margin-top:12px}
.spx-due{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.spx-due li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.spx-due li:last-child{border-bottom:0}
.spx-due li > span:last-child{display:flex;flex-direction:column;min-width:0}
.spx-dd{display:flex;flex-direction:column}
.spx-dd b{font-weight:650;color:var(--ink)} .spx-dd em{font-style:normal;font-size:12px;color:var(--muted)}
.spx-dd.late b,.spx-dd.late em{color:var(--bad)}
.spx-kcn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md,10px);overflow:hidden;margin:12px 0}
.spx-kcn > div{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column}
.spx-kcn b{font-size:20px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums} .spx-kcn span{font-size:12px;color:var(--muted)}
.spx-kc .spx-box{margin:0 0 12px}
.spx-barc{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.spx-kbar{position:relative;display:inline-block;width:140px;height:8px;border-radius:4px;background:var(--surface-2);flex:none}
.spx-kbar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--brand)}
.spx-kbar em{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--bad)}
.spx-barc b{min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.spx-kc td .ds-chip{height:24px;font-size:12px}
.spx-mix{margin-top:14px;display:flex;flex-direction:column;gap:6px;max-width:420px}
.spx-mixr{display:grid;grid-template-columns:80px 1fr 40px;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.spx-mixr b{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.spx-mixr .spx-kbar{width:100%}

/* ---------- Brand settings > Stock and factories, forms, the chip on Meta ads (unchanged look) ---------- */
.sp{display:grid;gap:16px;min-width:0}
.sp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,14px);padding:16px 18px;min-width:0}
.sp-ch{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sp-ch h3{font-size:13.5px;font-weight:650;margin:0;color:var(--ink)}
.sp-ch .cap{font-size:12px;color:var(--muted)} .sp-ch .r{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.sp-hint{color:var(--muted);font-size:12.5px;margin:0}
.sp-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;vertical-align:1px}
.sp-pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.sp-pill.bad{background:var(--bad-bg);color:var(--bad)} .sp-pill.warn{background:var(--warn-bg);color:var(--warn)} .sp-pill.good{background:var(--good-bg);color:var(--good)} .sp-pill.n{background:var(--surface-2);color:var(--ink-2)} .sp-pill.acc{background:var(--brand-soft);color:var(--brand-ink)}
.sp-tbl{overflow-x:auto}
.sp-tbl table{width:100%;border-collapse:collapse;font-size:13px}
.sp-tbl th{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap;background:transparent}
.sp-tbl td{padding:9px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:middle;color:var(--ink)}
.sp-tbl th.l,.sp-tbl td.l{text-align:left} .sp-tbl th:first-child,.sp-tbl td:first-child{padding-left:0} .sp-tbl tr:last-child td{border-bottom:0}
.sp-tbl tr.link{cursor:pointer} .sp-tbl tr.link:hover td{background:var(--surface-2)}
.sp-tbl td .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px;white-space:normal}
.sp-tbl td .nm{font-weight:600}
.sp-late{color:var(--bad);font-weight:600} .sp-mut{color:var(--muted)} .sp-good{color:var(--good);font-weight:600} .sp-warn{color:var(--warn);font-weight:600}
.sp-box{padding:10px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2)}
.sp-box.warn{background:var(--warn-bg)} .sp-box.warn b{color:var(--warn)}
.sp-box.info{background:var(--brand-soft)} .sp-box.info b{color:var(--brand-ink)}
.sp-box.bad{background:var(--bad-bg)} .sp-box.bad b{color:var(--bad)}
.sp-box.good{background:var(--good-bg)} .sp-box.good b{color:var(--good)}
.sp-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sp-field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;font-weight:500}
.sp-field input,.sp-field select,.sp-field textarea{width:100%;padding:7px 9px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;box-sizing:border-box}
.sp-field textarea{min-height:64px;resize:vertical}
.sp-field .help{font-size:11.5px;color:var(--faint);margin-top:4px}
.sp-field.wide{grid-column:1/-1}
.sp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sp-row .grow{flex:1}
/* the stock chip on Meta ad sets, ads and the ad preview */
.sp-adchip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:650;padding:1px 7px;border-radius:5px;margin-left:8px;white-space:nowrap;vertical-align:1px}
.sp-adchip.bad{background:var(--bad-bg);color:var(--bad)} .sp-adchip.warn{background:var(--warn-bg);color:var(--warn)} .sp-adchip.good{background:var(--good-bg);color:var(--good)}
/* settings */
.sp-layers{display:grid;gap:12px}
.sp-layer{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.sp-layer .num{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:17px;background:var(--surface-2);color:var(--ink-2)}
.sp-layer.on .num{background:var(--brand);color:var(--on-brand)}
.sp-layer h4{margin:0 0 4px;font-size:15px;font-weight:650;color:var(--ink)}
.sp-layer p{margin:0 0 6px;color:var(--muted);max-width:80ch}
.sp-layer ul{margin:0;padding-left:18px;display:grid;gap:3px;color:var(--ink-2)}
.sp-layer .who{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.sp-srow{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sp-srow:last-child{border-bottom:0}
.sp-srow b{font-weight:600;font-size:13px;color:var(--ink)} .sp-srow span{display:block;font-size:12px;color:var(--muted)}
.sp-srow input{width:100%;padding:6px 8px;border-radius:7px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;text-align:right;box-sizing:border-box}
.sp-srow.three{grid-template-columns:minmax(0,1fr) repeat(3,76px)}
.sp-srow.tg{grid-template-columns:minmax(0,1fr) auto}
.spx-kc .v2tbl th:nth-child(2),.spx-kc .v2tbl td:nth-child(2){text-align:left}
.spx-bar .ds-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.spx-bar .ds-seg button{flex:none;white-space:nowrap}
#v2panel .pb > .spx-steps,#v2panel .pb > .spx-form,#v2panel .pb > .spx-acts{flex-shrink:0}

/* 2026-10-10 (Cole: "the circle looks cut off"): the list scrolls sideways, which clips anything outside its box,
   so the current step's ring lost its top and left edge. Room inside the scroller for the ring. */
.spx-steps{padding:5px 4px 2px 5px}