:root{--blue:#0B4FB3;--blue-d:#083D8C;--sub:#C9DBF5;--ground:#EBEEF2;--ink:#11151C;--muted:#65676B;--line:#E2E5EA;--div:#EEF0F3;--tint:#E8F0FB;--coral:#FF8562;--coral-d:#D9541E;--green:#127A4B;--amber:#9A4A00;--card:#FFFFFF;--ret:#B42318;--ret-d:#8F1C13;--ret-tint:#FEF1F0;--ok:#1F7A5A;--warnbtn:#B5401C;--b3160-fg:#A0561A;--b3160-bg:#FFF4E5;--b6190-fg:#B54708;--b6190-bg:#FDEBDD;--b90-fg:#B42318;--b90-bg:#FDE3E1;--ink2:#1B2230;--chg:#FFF3B0;--amber-edge:#D9822B}
/* ==== 0.9.67 design system: BEGIN ==== */
/* The ONE set of shared parts (docs/ui-batch-0967-approved-mockups.html, "Design system", approved 2 Nov). Every screen uses only these.
   Text 22/16/14/12, weights 400/600. Spacing 4/8/12/16/24/32. Radius 8/12/16/24/full. Colours: the tokens below only (no coral, one blue).
   Gallery: /gallery "Design system" (preview only). Guard: test/ds-guard.test.mjs (values outside this set), test/e2e/ds_nowrap.py (wrap / cut).
   The block is the allow-list: only here may a raw size / colour / radius be written; everywhere else uses var(--ds-...). */
:root{--ds-fs-xl:22px;--ds-fs-l:16px;--ds-fs-m:14px;--ds-fs-s:12px;--ds-fw:400;--ds-fw-b:600;
--ds-text:#11151C;--ds-muted:#65676B;--ds-page:#EBEEF2;--ds-card:#FFFFFF;--ds-line:#E2E5EA;--ds-edge:#C9CDD3;--ds-on:#FFFFFF;
--ds-info:#0B4FB3;--ds-info-bg:#E8F0FB;--ds-info-d:#083D8C;--ds-ok:#127A4B;--ds-ok-bg:#EAF6EF;--ds-warn:#9A4A00;--ds-warn-bg:#FFF4E5;
--ds-bad:#B42318;--ds-bad-bg:#FDE3E1;--ds-bad-d:#8F1C13;--ds-pro:#6B3FA0;--ds-pro-bg:#F1EAFA;--ds-neutral:#65676B;--ds-neutral-bg:#EBEEF2;
--ds-total:#1B2230;--ds-chg-bg:#FBEAF0;--ds-chg:#993556;--ds-press:rgba(17,21,28,.06);--ds-scrim:rgba(17,21,28,.45);--ds-on-glass:rgba(255,255,255,.2);--ds-shadow:rgba(17,21,28,.16);--ds-focus:rgba(11,79,179,.2);
--ds-1:4px;--ds-2:8px;--ds-3:12px;--ds-4:16px;--ds-5:24px;--ds-6:32px;
--ds-r-s:8px;--ds-r-m:12px;--ds-r-l:16px;--ds-r-xl:24px;--ds-r-full:999px;
--ds-h-l:48px;--ds-h-s:32px;--ds-tap:44px;--ds-row:56px;--ds-trow:40px}
/* Text */
.ds-t-xl{font-size:var(--ds-fs-xl);font-weight:var(--ds-fw-b);line-height:28px}.ds-t-l{font-size:var(--ds-fs-l);line-height:22px}.ds-t-m{font-size:var(--ds-fs-m);line-height:20px}.ds-t-s{font-size:var(--ds-fs-s);line-height:16px}
.ds-b{font-weight:var(--ds-fw-b)}.ds-mut{color:var(--ds-muted)}
/* Buttons: Primary / Secondary / Danger outline / Danger filled x L (phone, 48) / S (desktop, rows, 32); Link; Icon; Menu; Add photos.
   Labels never wrap (nowrap, fixed side padding, the button grows). Pressed = darker. Busy = spinner + "Sending…", same width, no taps.
   No greyed-out look: :disabled / [aria-disabled] keep the normal colours (tapping explains what is missing). */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-2);height:var(--ds-h-l);min-width:max-content;padding:0 var(--ds-4);border-radius:var(--ds-r-m);border:1px solid transparent;font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);line-height:22px;white-space:nowrap;flex-shrink:0;cursor:pointer;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;opacity:1}
.ds-btn svg{flex-shrink:0}
.ds-btn.ds-s,.ds-desk .ds-btn{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}
.ds-btn.ds-s::before,.ds-desk .ds-btn::before{content:"";position:absolute;inset:-7px 0}
.ds-primary{background:var(--ds-info);color:var(--ds-on)}.ds-primary:active,.ds-primary.is-pressed{background:var(--ds-info-d)}
.ds-ret .ds-primary,.ds-primary.ds-red{background:var(--ds-bad)}.ds-ret .ds-primary:active,.ds-ret .ds-primary.is-pressed,.ds-primary.ds-red:active,.ds-primary.ds-red.is-pressed{background:var(--ds-bad-d)}
.ds-secondary{background:var(--ds-card);color:var(--ds-text);border-color:var(--ds-edge)}.ds-secondary:active,.ds-secondary.is-pressed{background:var(--ds-page)}
.ds-danger-o{background:var(--ds-card);color:var(--ds-bad);border-color:var(--ds-bad)}.ds-danger-o:active,.ds-danger-o.is-pressed{background:var(--ds-bad-bg)}
.ds-danger{background:var(--ds-bad);color:var(--ds-on)}.ds-danger:active,.ds-danger.is-pressed{background:var(--ds-bad-d)}
.ds-menu::after{content:"▾";font-weight:var(--ds-fw)}.ds-menu:empty{min-width:var(--ds-h-l);padding:0}.ds-menu.ds-s:empty,.ds-desk .ds-menu:empty{min-width:var(--ds-h-s)}   /* a menu button with only its ▾ is a square */
.ds-add{background:var(--ds-card);color:var(--ds-info);border:1px dashed var(--ds-edge)}.ds-add:active,.ds-add.is-pressed{background:var(--ds-info-bg)}
.ds-btn:disabled,.ds-btn[aria-disabled=true]{opacity:1;cursor:pointer}
.ds-btn.is-busy,.ds-btn[aria-busy=true]{pointer-events:none;cursor:progress}
.ds-wide{width:100%}
.ds-link{display:inline-flex;align-items:center;gap:var(--ds-1);min-height:var(--ds-tap);padding:0 var(--ds-1);border:0;background:transparent;color:var(--ds-info);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);white-space:nowrap;text-decoration:none;cursor:pointer}
.ds-link:active,.ds-link.is-pressed{color:var(--ds-info-d);text-decoration:underline}
.ds-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ds-tap);height:var(--ds-tap);padding:0;border:0;border-radius:var(--ds-r-m);background:transparent;color:inherit;position:relative;flex-shrink:0;cursor:pointer}
.ds-icon.ds-s,.ds-desk .ds-icon{width:var(--ds-h-s);height:var(--ds-h-s);border-radius:var(--ds-r-s)}
.ds-icon.ds-framed{border:1px solid var(--ds-edge);background:var(--ds-card);color:var(--ds-text)}
.ds-icon:active,.ds-icon.is-pressed{background:var(--ds-press)}
.ds-btnrow{display:flex;flex-wrap:wrap;gap:var(--ds-2)}.ds-btnrow>.ds-btn{flex:1 1 0}
.ds-btnstack{display:flex;flex-direction:column;gap:var(--ds-2)}.ds-btnstack>.ds-btn{width:100%}
.ds-spin{display:inline-block;width:16px;height:16px;border-radius:var(--ds-r-full);border:2px solid currentColor;border-right-color:transparent;animation:ds-spin .8s linear infinite;flex-shrink:0}
@keyframes ds-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ds-spin{animation-duration:2.4s}}
/* Confirm sheet: ONE sheet for every destructive action (dsConfirmHtml in public/app/20-ds.js) */
.ds-scrim{position:fixed;inset:0;z-index:60;background:var(--ds-scrim);display:flex;align-items:flex-end;justify-content:center}
.ds-sheet{width:100%;max-width:480px;max-height:90vh;overflow:auto;background:var(--ds-card);color:var(--ds-text);border-radius:var(--ds-r-xl) var(--ds-r-xl) 0 0;padding:var(--ds-2) var(--ds-4) var(--ds-5);display:flex;flex-direction:column;gap:var(--ds-3)}
.ds-handle{width:32px;height:4px;border-radius:var(--ds-r-full);background:var(--ds-line);margin:0 auto var(--ds-1);flex-shrink:0}
.ds-sheet-t{margin:0;font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);line-height:22px}
.ds-sheet-n{margin:0;font-size:var(--ds-fs-m);line-height:20px;color:var(--ds-muted)}
.ds-sheet .ds-btnrow{margin-top:var(--ds-1)}
@media (min-width:760px){.ds-scrim{align-items:center}.ds-sheet{border-radius:var(--ds-r-xl);max-width:440px}.ds-sheet .ds-handle{display:none}}
.ds-inline .ds-scrim,.ds-scrim.ds-inline{position:relative;inset:auto;z-index:auto;min-height:0;padding-top:var(--ds-6)}
/* Badges: status (24, 6 tones), number marks (circle 28, square 28, tile 40), red count, red dot, header badge, suggestion chip (the only tappable badge) */
.ds-badge{display:inline-flex;align-items:center;gap:var(--ds-1);height:24px;padding:0 var(--ds-2);border-radius:var(--ds-r-full);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);line-height:16px;white-space:nowrap;flex-shrink:0;vertical-align:middle;background:var(--ds-neutral-bg);color:var(--ds-neutral)}
.ds-badge svg{width:12px;height:12px;flex-shrink:0}
.ds-neutral{background:var(--ds-neutral-bg);color:var(--ds-neutral)}.ds-info{background:var(--ds-info-bg);color:var(--ds-info)}.ds-done{background:var(--ds-ok-bg);color:var(--ds-ok)}
.ds-attn{background:var(--ds-warn-bg);color:var(--ds-warn)}.ds-problem{background:var(--ds-bad-bg);color:var(--ds-bad)}.ds-special{background:var(--ds-pro-bg);color:var(--ds-pro)}
.ds-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--ds-r-full);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);background:var(--ds-info-bg);color:var(--ds-info);flex-shrink:0}
.ds-mark.ds-sq{border-radius:var(--ds-r-s)}
.ds-tile{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ds-r-s);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);background:var(--ds-info-bg);color:var(--ds-info);flex-shrink:0;overflow:hidden;white-space:nowrap}
.ds-count{position:absolute;top:var(--ds-1);right:var(--ds-1);min-width:20px;height:20px;padding:0 var(--ds-1);border-radius:var(--ds-r-full);background:var(--ds-bad);color:var(--ds-on);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);line-height:20px;text-align:center;white-space:nowrap}
.ds-count.ds-flow{position:static;display:inline-block}
.ds-dot{position:absolute;top:var(--ds-2);right:var(--ds-2);width:8px;height:8px;border-radius:var(--ds-r-full);background:var(--ds-bad)}
.ds-icon.ds-s .ds-count,.ds-desk .ds-icon .ds-count{top:-6px;right:-6px}.ds-icon.ds-s .ds-dot,.ds-desk .ds-icon .ds-dot{top:-2px;right:-2px}
.ds-hbadge{display:inline-flex;align-items:center;height:24px;padding:0 var(--ds-2);border-radius:var(--ds-r-full);background:var(--ds-on-glass);color:var(--ds-on);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);white-space:nowrap}
.ds-sugg{display:inline-flex;align-items:center;gap:var(--ds-1);height:32px;padding:0 var(--ds-3);border-radius:var(--ds-r-full);border:0;background:var(--ds-info-bg);color:var(--ds-info);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);white-space:nowrap;position:relative;cursor:pointer}
.ds-sugg::before{content:"";position:absolute;inset:-7px 0}.ds-sugg:active,.ds-sugg.is-pressed{background:var(--ds-info);color:var(--ds-on)}
/* Fields: one field. Phone 48 / 16px / radius 12; desktop and rows (.ds-s or inside .ds-desk) 32 / 14px / radius 8. Label above; units inside right.
   Kinds: text, search, qty / price, dropdown, date, note, special colour, checkbox. States: focus, error, changed, read-only. */
.ds-field{display:flex;flex-direction:column;gap:var(--ds-1);min-width:0}
.ds-label{font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);line-height:16px;color:var(--ds-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-box{display:flex;align-items:center;gap:var(--ds-2);height:var(--ds-h-l);min-width:96px;padding:0 var(--ds-3);border:1px solid var(--ds-edge);border-radius:var(--ds-r-m);background:var(--ds-card);color:var(--ds-text);font-size:var(--ds-fs-l);position:relative}
.ds-box.ds-s,.ds-desk .ds-box{height:var(--ds-h-s);padding:0 var(--ds-2);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m)}
.ds-box input,.ds-box select,.ds-box textarea{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;color:inherit;font:inherit;font-size:inherit;outline:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.ds-box svg{flex-shrink:0;color:var(--ds-muted)}
.ds-unit{flex-shrink:0;font-size:var(--ds-fs-m);color:var(--ds-muted);white-space:nowrap}
.ds-box.ds-num input{text-align:right}
/* UI r3 A10 (owner-approved 3 Nov): THE select chevron, one for every dropdown field (.ds-box.ds-dd and the filter dropdowns' .fbox + I.chev):
   16 px, vertically centred, 12 px from the field's trailing edge (inset-inline-end: right in LTR, left in RTL), the select keeps 36 px
   at its end so the value never runs under it. The <select> stays native (keyboard, the platform's picker, screen readers); forced colours
   (Windows contrast themes) = the system's own arrow and no drawn chevron. Not the fold arrows (.ds-chev / ofchev). */
.ds-box.ds-dd,.fbox:has(>.chev){padding-inline-end:0}
.ds-box.ds-dd select,.fbox:has(>.chev)>select{-webkit-appearance:none;appearance:none;padding-inline-end:calc(var(--ds-5) + var(--ds-3));cursor:pointer}
.ds-box.ds-dd::after,.fbox>.chev{content:"";position:absolute;top:50%;right:auto;left:auto;inset-inline-end:var(--ds-3);transform:translateY(-50%);width:16px;height:16px;display:block;pointer-events:none;color:var(--ds-muted)}
.ds-box.ds-dd::after{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat}
@media (forced-colors:active){.ds-box.ds-dd select,.fbox:has(>.chev)>select{-webkit-appearance:auto;appearance:auto;padding-inline-end:var(--ds-2)}.ds-box.ds-dd::after,.fbox>.chev{display:none}}
.ds-box.ds-multi{height:auto;min-height:96px;align-items:stretch;padding:var(--ds-2) var(--ds-3)}
.ds-box.ds-multi textarea{white-space:pre-wrap;overflow:auto;resize:vertical;min-height:80px;line-height:22px}
.ds-box.ds-special{border-color:var(--ds-pro)}.ds-box.ds-special svg{color:var(--ds-pro)}
.ds-n20{flex-shrink:0;font-size:var(--ds-fs-s);color:var(--ds-muted);white-space:nowrap}
.ds-box:focus-within,.ds-box.is-focus{border-color:var(--ds-info);box-shadow:0 0 0 1px var(--ds-info)}
.ds-box.ds-err{border-color:var(--ds-bad);box-shadow:0 0 0 1px var(--ds-bad)}
.ds-box.ds-chg{background:var(--ds-chg-bg);border-color:var(--ds-chg);color:var(--ds-chg)}
.ds-box.ds-ro{background:var(--ds-page);border-color:var(--ds-line);color:var(--ds-text)}
.ds-msg-err{font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-bad)}
.ds-was{font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-chg);white-space:nowrap}.ds-was s{color:var(--ds-muted)}
.ds-check{display:flex;align-items:center;gap:var(--ds-3);min-height:46px;padding-left:var(--ds-4);margin-left:calc(-1*var(--ds-4));font-size:var(--ds-fs-m);cursor:pointer}   /* the row reaches 16 px left of the box: a 44 x 44 target around a 20 px box at the row's start */
.ds-check input{width:20px;height:20px;margin:0;accent-color:var(--ds-info);flex-shrink:0}
.ds-sort{display:inline-flex;align-items:center;gap:var(--ds-1);min-height:var(--ds-tap);padding:0;border:0;background:transparent;color:var(--ds-text);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);white-space:nowrap;cursor:pointer}
.ds-sort::after{content:"▾";color:var(--ds-muted);font-weight:var(--ds-fw)}
/* Text that ends with "…": the ellipsis goes at the END of the text in its own direction (an Arabic name is cut at its left end, not its start) */
.ds-row-t,.ds-row-s,.ds-cut,.ds-header-t,.ds-label,.ds-dofirst-b>span,.ds-val b,.ds-table td,.ds-box input{unicode-bidi:plaintext}
.ds-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ds-cut{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Selectors: tabs, segmented, filter chips, switch row, choice cards */
.ds-tabs{display:flex;gap:var(--ds-4);border-bottom:1px solid var(--ds-line);overflow-x:auto}
.ds-tab{min-height:var(--ds-tap);padding:0 var(--ds-1);border:0;background:transparent;color:var(--ds-muted);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);white-space:nowrap;cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
.ds-tab.on,.ds-tab[aria-selected=true]{color:var(--ds-info);box-shadow:inset 0 -2px 0 var(--ds-info)}
.ds-seg{display:inline-flex;gap:var(--ds-1);padding:var(--ds-1);border-radius:var(--ds-r-m);background:var(--ds-page);max-width:100%}
.ds-seg>button{flex:1 1 0;min-width:max-content;height:36px;padding:0 var(--ds-3);border:0;border-radius:var(--ds-r-s);background:transparent;color:var(--ds-muted);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);white-space:nowrap;position:relative;cursor:pointer}
.ds-seg>button::before{content:"";position:absolute;inset:-5px 0}
.ds-seg>button.on,.ds-seg>button[aria-pressed=true]{background:var(--ds-card);color:var(--ds-text)}
.ds-desk .ds-seg>button,.ds-seg.ds-s>button{height:24px;font-size:var(--ds-fs-m)}
.ds-chips{display:flex;flex-wrap:wrap;gap:var(--ds-4) var(--ds-2)}   /* row gap 16: wrapped rows keep their own hit areas (32 + 2 x 7 = 46 px, a probe at +-22 px stays inside) */
.ds-chip{display:inline-flex;align-items:center;gap:var(--ds-1);height:32px;padding:0 var(--ds-3);border-radius:var(--ds-r-full);border:1px solid var(--ds-edge);background:var(--ds-card);color:var(--ds-text);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);white-space:nowrap;position:relative;cursor:pointer;flex-shrink:0}
.ds-chip::before{content:"";position:absolute;inset:-7px 0}
.ds-chip.on,.ds-chip[aria-pressed=true]{background:var(--ds-info);border-color:var(--ds-info);color:var(--ds-on)}
.ds-chip.ds-need{border-color:var(--ds-bad);color:var(--ds-bad)}.ds-chip.ds-need.on{background:var(--ds-bad);color:var(--ds-on)}
.ds-chip:active,.ds-chip.is-pressed{background:var(--ds-page)}.ds-chip.on:active,.ds-chip.on.is-pressed{background:var(--ds-info-d)}
.ds-swrow{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-3);min-height:var(--ds-row);padding:var(--ds-2) var(--ds-4);width:100%;border:0;background:transparent;color:var(--ds-text);text-align:left;font-size:var(--ds-fs-m);cursor:pointer}
.ds-swrow>span:first-child{min-width:0}
.ds-switch{width:48px;height:28px;border-radius:var(--ds-r-full);background:var(--ds-edge);position:relative;flex-shrink:0}
.ds-switch::after{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:var(--ds-r-full);background:var(--ds-card);transition:left .15s}
.ds-swrow[aria-checked=true] .ds-switch{background:var(--ds-info)}.ds-swrow[aria-checked=true] .ds-switch::after{left:24px}
.ds-choices{display:flex;flex-direction:column;gap:var(--ds-2)}
.ds-choice{display:flex;align-items:center;gap:var(--ds-3);min-height:var(--ds-row);padding:var(--ds-2) var(--ds-4);width:100%;border:1px solid var(--ds-line);border-radius:var(--ds-r-m);background:var(--ds-card);color:var(--ds-text);text-align:left;font-size:var(--ds-fs-m);cursor:pointer}
.ds-choice::before{content:"";width:20px;height:20px;border-radius:var(--ds-r-full);border:2px solid var(--ds-edge);flex-shrink:0;box-sizing:border-box}
.ds-choice.on,.ds-choice[aria-checked=true]{border-color:var(--ds-info);box-shadow:0 0 0 1px var(--ds-info)}
.ds-choice.on::before,.ds-choice[aria-checked=true]::before{border:6px solid var(--ds-info)}
.ds-choice b{display:block;font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b)}.ds-choice small{display:block;font-size:var(--ds-fs-s);color:var(--ds-muted)}
/* Surfaces: header (blue; red on Returns), card, section header, list rows, bottom sheet, total box, footer bar + bottom menu, desktop table, admin tiles */
.ds-header{background:var(--ds-info);color:var(--ds-on);padding:var(--ds-3) var(--ds-4);display:flex;flex-direction:column;gap:var(--ds-2)}
.ds-header.ds-ret,.ds-ret .ds-header{background:var(--ds-bad)}
.ds-header-row{display:flex;align-items:center;gap:var(--ds-2);min-height:var(--ds-h-s)}
.ds-header-t{margin:0;font-size:var(--ds-fs-xl);font-weight:var(--ds-fw-b);line-height:28px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.ds-header-s{font-size:var(--ds-fs-m);line-height:20px}
.ds-card{background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-r-l);padding:var(--ds-3) var(--ds-4);color:var(--ds-text)}
.ds-card.ds-flush{padding:0;overflow:hidden}
.ds-sec{margin:0 0 var(--ds-2);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);line-height:16px;color:var(--ds-muted);text-transform:none;letter-spacing:0}
.ds-list{display:flex;flex-direction:column}
.ds-row{display:flex;align-items:center;gap:var(--ds-3);min-height:var(--ds-row);padding:var(--ds-2) var(--ds-4);border:0;border-top:1px solid var(--ds-line);background:transparent;width:100%;text-align:left;color:var(--ds-text);font-size:var(--ds-fs-m)}
.ds-row:first-child{border-top:0}
.ds-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ds-row-t{font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-row-s{font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-row-v{flex-shrink:0;font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);white-space:nowrap}
.ds-chev{flex-shrink:0;color:var(--ds-muted)}
.ds-total{background:var(--ds-total);color:var(--ds-on);border-radius:var(--ds-r-l);padding:var(--ds-3) var(--ds-4);display:flex;align-items:baseline;justify-content:space-between;gap:var(--ds-3)}
.ds-total span{font-size:var(--ds-fs-s)}.ds-total b{font-size:var(--ds-fs-xl);font-weight:var(--ds-fw-b);white-space:nowrap}
.ds-footer{background:var(--ds-card);border-top:1px solid var(--ds-line);padding:var(--ds-2) var(--ds-4);display:flex;flex-direction:column;gap:var(--ds-2)}
.ds-bnav{display:flex;height:var(--ds-row);background:var(--ds-card);border-top:1px solid var(--ds-line)}
.ds-bnav>button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-1);border:0;background:transparent;color:var(--ds-muted);font-size:var(--ds-fs-s);white-space:nowrap;position:relative;cursor:pointer}
.ds-bnav>button.on{color:var(--ds-info);font-weight:var(--ds-fw-b)}
.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-fs-m);color:var(--ds-text)}
.ds-table th{height:32px;padding:0 var(--ds-2);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);color:var(--ds-muted);text-align:left;white-space:nowrap;border-bottom:1px solid var(--ds-line)}
.ds-table td{height:var(--ds-trow);padding:0 var(--ds-2);border-bottom:1px solid var(--ds-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;vertical-align:middle}
.ds-table tr.ds-sub td{background:var(--ds-page)}
.ds-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-2)}
.ds-tilecard{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-2);min-height:88px;padding:var(--ds-3) var(--ds-4);border:1px solid var(--ds-line);border-radius:var(--ds-r-l);background:var(--ds-card);color:var(--ds-text);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);text-align:left;cursor:pointer}
.ds-tilecard svg{color:var(--ds-info)}
.ds-toolbar{display:flex;align-items:center;gap:var(--ds-2);flex-wrap:wrap}
/* Messages: message box (4 tones), Do first card, inline note, action strip, toast, progress, empty, error */
.ds-msg{display:flex;gap:var(--ds-3);align-items:flex-start;padding:var(--ds-3) var(--ds-4);border-radius:var(--ds-r-m);font-size:var(--ds-fs-m);line-height:20px;color:var(--ds-text)}
.ds-msg>svg{flex-shrink:0}
.ds-msg-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ds-1)}
.ds-msg-t{font-weight:var(--ds-fw-b)}.ds-msg-l{color:var(--ds-text)}
.ds-msg.ds-info{background:var(--ds-info-bg)}.ds-msg.ds-info>svg{color:var(--ds-info)}
.ds-msg.ds-done{background:var(--ds-ok-bg)}.ds-msg.ds-done>svg{color:var(--ds-ok)}
.ds-msg.ds-attn{background:var(--ds-warn-bg)}.ds-msg.ds-attn>svg{color:var(--ds-warn)}
.ds-msg.ds-problem{background:var(--ds-bad-bg)}.ds-msg.ds-problem>svg{color:var(--ds-bad)}
.ds-msg .ds-link{min-height:var(--ds-tap);padding:0;align-self:flex-start}
.ds-dofirst{display:flex;align-items:center;gap:var(--ds-3);background:var(--ds-card);border:1px solid var(--ds-bad);border-radius:var(--ds-r-l);padding:var(--ds-3) var(--ds-4)}
.ds-dofirst-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ds-1);font-size:var(--ds-fs-m);line-height:20px}
.ds-dofirst-h{display:flex;align-items:center;gap:var(--ds-2);font-weight:var(--ds-fw-b);min-width:0}
.ds-dofirst-b>span:not(.ds-dofirst-h){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-dofirst-h{flex-wrap:wrap;row-gap:var(--ds-1)}   /* the title (badge + type) wraps, the facts end with "…" */
.ds-desk .ds-dofirst-b{flex-direction:row;align-items:center;gap:var(--ds-3)}
.ds-inote{display:block;font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-muted)}.ds-inote.ds-attn{background:none;color:var(--ds-warn)}.ds-inote.ds-problem{background:none;color:var(--ds-bad)}
.ds-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-3);min-height:var(--ds-tap);padding:0 var(--ds-3);border-radius:var(--ds-r-m);background:var(--ds-warn-bg);color:var(--ds-warn);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b)}
.ds-strip>span{min-width:0}
.ds-strip .ds-link{padding:0;flex-shrink:0}
.ds-toast{display:flex;align-items:center;gap:var(--ds-3);min-height:var(--ds-row);padding:var(--ds-2) var(--ds-4);border-radius:var(--ds-r-m);background:var(--ds-total);color:var(--ds-on);font-size:var(--ds-fs-m);line-height:20px;max-width:440px}
.ds-toast>span{flex:1 1 auto;min-width:0}
.ds-toast .ds-link{color:var(--ds-info-bg);flex-shrink:0;padding:0}
.ds-toast.ds-float{position:fixed;left:var(--ds-4);right:var(--ds-4);bottom:calc(var(--ds-row) + var(--ds-4));margin:0 auto;z-index:70}
.ds-progress{display:flex;flex-direction:column;gap:var(--ds-2);font-size:var(--ds-fs-m)}
.ds-bar{height:8px;border-radius:var(--ds-r-full);background:var(--ds-line);overflow:hidden}
.ds-bar>i{display:block;height:100%;border-radius:var(--ds-r-full);background:var(--ds-info)}
.ds-bar.ds-run>i{width:40%;animation:ds-run 1.4s ease-in-out infinite}
@keyframes ds-run{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.ds-progress-w{display:flex;align-items:center;gap:var(--ds-2);color:var(--ds-text)}
.ds-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ds-2);padding:var(--ds-5) var(--ds-4);color:var(--ds-muted);font-size:var(--ds-fs-m)}
.ds-empty svg{color:var(--ds-muted)}.ds-empty b{font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);color:var(--ds-text)}
.ds-error{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ds-3);padding:var(--ds-5) var(--ds-4);font-size:var(--ds-fs-m);color:var(--ds-muted)}
.ds-error svg{color:var(--ds-bad)}.ds-error b{font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);color:var(--ds-text)}
/* Layout: values in labelled boxes (Qty · Price · Amount), one-row controls share height and font */
.ds-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-2)}
.ds-val{display:flex;flex-direction:column;gap:var(--ds-1);padding:var(--ds-2);border-radius:var(--ds-r-s);background:var(--ds-page);min-width:0}
.ds-val span{font-size:var(--ds-fs-s);color:var(--ds-muted)}.ds-val b{font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-val.ds-amt{background:var(--ds-card);border:1px solid var(--ds-edge);text-align:right}
.ds-stack{display:flex;flex-direction:column;gap:var(--ds-3)}.ds-gap2{display:flex;flex-direction:column;gap:var(--ds-2)}
/* Screen agents' requests (0.9.67 A3, docs/ui-0967-css-requests-<group>.md): parts the screens needed */
.ds-copy{-webkit-user-select:all;user-select:all}
.apdacts>.ds-msg{margin:0 var(--ds-4)}
.ds-swrow+.ds-swrow{border-top:1px solid var(--ds-line)}
.ds-pre{margin:var(--ds-1) 0 0;padding:var(--ds-2) var(--ds-3);border-radius:var(--ds-r-s);background:var(--ds-page);font:inherit;font-size:var(--ds-fs-m);line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ds-text)}
.ds-row-lead{flex-shrink:0;width:72px;align-self:flex-start;font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-muted);white-space:nowrap}
.ds-row-head{display:flex;align-items:center;gap:var(--ds-2);min-width:0}.ds-row-head>.ds-row-t,.ds-row-head>.ds-cut{flex:1 1 auto;min-width:0}
.ds-thumbs{display:flex;flex-wrap:wrap;gap:var(--ds-2)}
.ds-thumb{position:relative;width:72px;height:72px;flex-shrink:0;border:1px solid var(--ds-line);border-radius:var(--ds-r-s);background:var(--ds-page);overflow:hidden;padding:0;cursor:pointer}
.ds-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ds-thumb.is-reading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:var(--ds-r-full);border:2px solid var(--ds-line);border-top-color:var(--ds-info);animation:ds-spin .8s linear infinite}
.ds-search{position:relative}
.ds-drop{position:absolute;left:0;right:0;top:calc(100% + var(--ds-1));z-index:40;max-height:320px;overflow:auto;background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-r-m);box-shadow:0 8px 24px var(--ds-shadow)}
.ds-box.ds-ro select{-webkit-appearance:none;appearance:none;cursor:default}.ds-box.ds-dd.ds-ro::after{content:none}
/* the app's date box (datebox(), 06-fulfilment.js) inside a field: the field part's sizes */
.ds-field .datebox{display:flex;width:100%;min-width:96px;height:var(--ds-h-l);padding:0 var(--ds-3);border:1px solid var(--ds-edge);border-radius:var(--ds-r-m);background:var(--ds-card)}
.ds-field .datebox .dbv{font-size:var(--ds-fs-l)}
.ds-desk .ds-field .datebox,.ds-field.ds-s .datebox{height:var(--ds-h-s);padding:0 var(--ds-2);border-radius:var(--ds-r-s)}.ds-desk .ds-field .datebox .dbv,.ds-field.ds-s .datebox .dbv{font-size:var(--ds-fs-m)}
.ds-field .datebox:focus-within{outline:0;border-color:var(--ds-info);box-shadow:0 0 0 1px var(--ds-info)}
/* A3-F requests (docs/ui-0967-css-requests-f.md 3-12) */
.ds-dofirst[data-level=amber]{border-color:var(--ds-warn)}
.ds-inote.ds-done{background:none;color:var(--ds-ok)}
.ds-sec.ds-ret{color:var(--ds-bad)}
.ds-desk .ds-link{min-height:var(--ds-h-s);position:relative}.ds-desk .ds-link::before{content:"";position:absolute;inset:-7px 0}
.ds-hlink{display:inline-flex;align-items:center;min-height:var(--ds-tap);padding:0;border:0;background:transparent;color:var(--ds-on);font-size:var(--ds-fs-m);font-weight:var(--ds-fw-b);text-decoration:underline;white-space:nowrap;cursor:pointer}
.ds-pop{position:absolute;z-index:50;min-width:200px;padding:var(--ds-1) 0;background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-r-m);box-shadow:0 8px 24px var(--ds-shadow)}
.ds-pop-item{display:flex;align-items:center;gap:var(--ds-2);width:100%;min-height:var(--ds-tap);padding:0 var(--ds-4);border:0;background:transparent;color:var(--ds-text);font-size:var(--ds-fs-m);text-align:left;white-space:nowrap;cursor:pointer}
.ds-pop-item:hover,.ds-pop-item:focus-visible,.ds-pop-item.is-pressed{background:var(--ds-page)}.ds-desk .ds-pop-item{min-height:var(--ds-h-s)}
.ds-keep{display:inline-block}
.ds-tickhit{display:inline-flex;align-items:center;justify-content:center;width:var(--ds-tap);height:var(--ds-tap);flex-shrink:0;cursor:pointer}.ds-desk .ds-tickhit{width:var(--ds-h-s);height:var(--ds-h-s)}
.ds-tickhit input{width:20px;height:20px;margin:0;accent-color:var(--ds-info);cursor:pointer}
/* a link or icon button narrower / lower than 44 px keeps a 44 x 44 tap target (the hit area grows around it, the look does not move) */
.ds-link{position:relative}.ds-link::after,.ds-icon::after{content:"";position:absolute;z-index:1;left:min(0px,calc((100% - var(--ds-tap)) / 2 - 1px));right:min(0px,calc((100% - var(--ds-tap)) / 2 - 1px));top:min(0px,calc((100% - var(--ds-tap)) / 2 - 1px));bottom:min(0px,calc((100% - var(--ds-tap)) / 2 - 1px))}
.ds-desk .ds-link::after,.ds-desk .ds-icon::after{content:none}
/* C1 requests 8-10 (docs/ui-0967-css-requests-c1.md) */
.ds-attn-t{color:var(--ds-warn);font-weight:var(--ds-fw-b)}
.ds-mark.ds-problem,.ds-tile.ds-problem{background:var(--ds-bad-bg);color:var(--ds-bad)}.ds-mark.ds-attn,.ds-tile.ds-attn{background:var(--ds-warn-bg);color:var(--ds-warn)}
.ds-mark.ds-done,.ds-tile.ds-done{background:var(--ds-ok-bg);color:var(--ds-ok)}.ds-mark.ds-neutral,.ds-tile.ds-neutral{background:var(--ds-neutral-bg);color:var(--ds-neutral)}
.ds-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--ds-2)}
.ds-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-1);min-height:var(--ds-row);min-width:0;padding:var(--ds-2) var(--ds-1);border:0;border-radius:var(--ds-r-m);background:transparent;color:var(--ds-text);text-align:center;cursor:pointer}
.ds-step b{font-size:var(--ds-fs-xl);font-weight:var(--ds-fw-b);line-height:28px}.ds-step span{font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-muted);overflow-wrap:anywhere}.ds-step small{font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-info)}
.ds-step.ds-attn b,.ds-step.ds-attn small{color:var(--ds-warn)}.ds-step.ds-problem b,.ds-step.ds-problem small{color:var(--ds-bad)}.ds-step.on,.ds-step:active,.ds-step.is-pressed{background:var(--ds-info-bg)}
/* A3-r requests R5 / R7 */
.ds-field{position:relative}button.ds-box{text-align:left;cursor:pointer}
fieldset.rdlock{border:0;margin:0;padding:0;min-width:0}
/* UI r2 A2: the read-only fact row (dsFacts in 20-ds.js). Label beside value, 32 px min row, values wrap (never "…"); a pair that cannot fit
   stacks inside its fact. Phone 14 label / 16 value, computer 12 / 14, weight 400. .ds-pairs: two facts a row on a computer only when each keeps
   200 px (the label then takes only its own width). .ds-fcard: its own framed box. Not for editable fields, Qty / Price / Amount boxes, receivables or totals. */
.ds-facts{margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;color:var(--ds-text)}
.ds-fact{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--ds-3);min-height:var(--ds-h-s);min-width:0;padding:var(--ds-1) 0;box-sizing:border-box;box-shadow:0 -1px 0 var(--ds-line);align-content:center}
.ds-fact>dt{flex:0 1 auto;width:8em;max-width:45%;margin:0;font-size:var(--ds-fs-m);font-weight:var(--ds-fw);line-height:20px;color:var(--ds-muted);overflow-wrap:anywhere}
.ds-fact>dd{flex:1 1 9em;min-width:0;margin:0;font-size:var(--ds-fs-l);font-weight:var(--ds-fw);line-height:22px;color:var(--ds-text);overflow-wrap:anywhere;white-space:normal;unicode-bidi:plaintext;text-align:left}
.ds-fact>dd b{font-weight:var(--ds-fw-b)}
.ds-fcard{background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-r-l)}.ds-fcard>.ds-fact{padding:var(--ds-1) var(--ds-3)}
.ds-card.ds-flush>.ds-facts>.ds-fact{padding:var(--ds-1) var(--ds-3)}
.ds-desk .ds-fact>dt{width:10em;font-size:var(--ds-fs-s);line-height:16px}.ds-desk .ds-fact>dd{font-size:var(--ds-fs-m);line-height:20px}
.ds-desk .ds-facts.ds-pairs{grid-template-columns:repeat(auto-fill,minmax(max(min(100%,200px),calc(50% - var(--ds-2))),1fr));column-gap:var(--ds-4)}.ds-desk .ds-fact.ds-fwide{grid-column:1/-1}.ds-desk .ds-pairs>.ds-fact>dt{width:auto}.ds-desk .ds-pairs>.ds-fact>dd{flex:1 1 0;min-width:min-content}
@media (min-width:1000px){.ds-fact>dt{width:10em;font-size:var(--ds-fs-s);line-height:16px}.ds-fact>dd{font-size:var(--ds-fs-m);line-height:20px}
.ds-facts.ds-pairs{grid-template-columns:repeat(auto-fill,minmax(max(min(100%,200px),calc(50% - var(--ds-2))),1fr));column-gap:var(--ds-4)}.ds-fact.ds-fwide{grid-column:1/-1}.ds-pairs>.ds-fact>dt{width:auto}.ds-pairs>.ds-fact>dd{flex:1 1 0;min-width:min-content}
.ds-phone .ds-fact>dt{width:8em;font-size:var(--ds-fs-m);line-height:20px}.ds-phone .ds-fact>dd{font-size:var(--ds-fs-l);line-height:22px}.ds-phone .ds-facts.ds-pairs{grid-template-columns:minmax(0,1fr)}}   /* .ds-phone: a phone-width preview inside a wide window (the gallery) */
/* r3 V2: in a pair list the value takes the room beside its label and wraps there (it moves under the label only when its longest word cannot
   fit); a fact that would still stack its label above its value (dsPairFit, 20-ds.js) takes its own full row, label beside value */
.ds-facts.ds-pairs>.ds-fact.ds-fsolo{grid-column:1/-1}
/* UI r2 A3 / A4: the loading message and the failed-load message for a content slot (dsLoading / dsLoadErr), the pending count (DS_PENDING) */
.ds-loading,.ds-loaderr{display:flex;align-items:center;gap:var(--ds-3);padding:var(--ds-3) var(--ds-4);border:1px solid var(--ds-line);border-radius:var(--ds-r-m);background:var(--ds-card);color:var(--ds-text)}
.ds-loading-i{flex-shrink:0;color:var(--ds-info);animation:ds-spin .8s linear infinite}
.ds-loading-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ds-loading-t{font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);line-height:22px;overflow-wrap:anywhere}
.ds-loading-s{font-size:var(--ds-fs-m);line-height:20px;color:var(--ds-muted);overflow-wrap:anywhere}
.ds-loaderr{flex-wrap:wrap;row-gap:var(--ds-2)}
.ds-loaderr-m{flex:1 1 10em;min-width:0;display:flex;align-items:center;gap:var(--ds-3)}
.ds-loaderr-i{flex-shrink:0;color:var(--ds-bad)}
.ds-loaderr>.ds-btn{flex-shrink:0}
.ds-loaderr-x{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-2) var(--ds-3);font-size:var(--ds-fs-m);line-height:20px;color:var(--ds-muted)}
/* r3 V5: the extra row's button (the order form's Clear draft, Danger outline) takes Try again's size: 32 px on a computer, 48 px on a phone */
.ds-desk :is(.ds-loaderr,.ds-loaderr-x)>.ds-btn{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m)}
@media (min-width:1000px){:is(.ds-loaderr,.ds-loaderr-x)>.ds-btn{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}
:is(.ds-loaderr,.ds-loaderr-x)>.ds-btn::before{content:"";position:absolute;inset:-7px 0}
.ds-phone :is(.ds-loaderr,.ds-loaderr-x)>.ds-btn{height:var(--ds-h-l);padding:0 var(--ds-4);border-radius:var(--ds-r-m);font-size:var(--ds-fs-l);line-height:22px}.ds-phone :is(.ds-loaderr,.ds-loaderr-x)>.ds-btn::before{content:none}}
.ds-pend{display:inline-block;min-width:1em;text-align:center;letter-spacing:0}
/* UI r2 A1: the compact shared page header (top() in 01c-core.js). Content-sized rows, 12 / 16 padding, no blank row for absent content.
   The title row's icon buttons LOOK 32 px; each keeps a 44 x 44 tap area (.ds-icon::after) and 16 px between them, so the tap areas never
   overlap. .ds-header-ctx = a context line and its own action on one row (the text wraps, the action stays beside it);
   .ds-header-links = the phone's direct shortcuts (each link 44 px tall). A header part drawn inside the header adds no second padding. */
.ds-header-row>.ds-icon{width:var(--ds-h-s);height:var(--ds-h-s);border-radius:var(--ds-r-s)}
/* UI r3 A8 (owner-approved final header refinement): every header icon on a 24 px canvas with 2 px rounded strokes, on the title's centreline
   (also a caller's own svg); refresh = the paired-arrow refresh-cw (I.refresh). The labelled PDF slot (dsHdrPdf: icon + "PDF") is 64 px wide and
   keeps the 44 px tap height of every header icon button (.ds-icon::after); its handler and permission gates stay the caller's. */
.ds-header .ds-icon>svg{width:24px;height:24px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.ds-header-row>.ds-icon.ds-hpdf{width:auto;min-width:64px;gap:var(--ds-1);padding:0 var(--ds-1);font-size:var(--ds-fs-l);font-weight:var(--ds-fw);line-height:22px;white-space:nowrap}
.ds-header-row>.ds-icon+.ds-icon{margin-left:var(--ds-2)}
.ds-header-row>.ds-hlink{min-height:var(--ds-h-s);position:relative}.ds-header-row>.ds-hlink::after{content:"";position:absolute;left:0;right:0;top:calc(-1*var(--ds-2) + 1px);bottom:calc(-1*var(--ds-2) + 1px)}
.ds-header .ds-header{padding:0;background:transparent;border-radius:0}
.ds-header-ctx{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--ds-4)}.ds-header-ctx>:first-child{flex:1 1 12em;min-width:0;margin:0;overflow-wrap:anywhere}.ds-header-ctx>.ds-hlink{flex-shrink:0}
.ds-header-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--ds-4)}
/* UI r3: a field's note beside its label (admField): "Label · note" on one line where it fits, the note wrapping naturally under it when long;
   the label keeps its own words whole (never wraps, never cut). 12 px, label 600, note 400, both muted. */
.ds-lrow{display:block;font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-muted)}
.ds-lrow>.ds-label{display:inline;overflow:visible}
.ds-lnote{font-weight:var(--ds-fw)}.ds-lnote::before{content:" · "}
/* UI r3: the two SAP numbers of a sales rep side by side (the owner's displayed paired-field design, Add / Edit user only); one per row under 300 px */
.ds-fpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,144px),1fr));gap:var(--ds-4) var(--ds-3);align-items:end}
/* UI r3 A11 (role list revision 2): one column on phone and computer; the name 16 / 600, its full description muted 12 / 400 beside it where it
   fits (2 px / 8 px wrap gaps), natural wrapping; min 56 px cards 8 px apart (.ds-choices); the radio aligned with the name's first line */
.ds-choice.ds-role{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:var(--ds-3);align-items:start;align-content:center}
.ds-role-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--ds-1)/2) var(--ds-2);min-width:0}
.ds-choice .ds-role-t>b{display:inline;font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);line-height:20px;overflow-wrap:anywhere}
.ds-choice .ds-role-t>small{display:inline;font-size:var(--ds-fs-s);font-weight:var(--ds-fw);line-height:16px;color:var(--ds-muted);overflow-wrap:anywhere}
/* UI r3 A12 (full identity, shared direction approved): inside .ds-idfull (a list / home that shows customers, people or orders) a row's
   title and its line under it take their full width and wrap naturally - no "…", no clamp, no hover-only reveal; an Arabic name (.ar) wraps
   inside its own isolate. Opt-in per screen so each caller's fit is checked when it adopts it. */
.ds-idfull :is(.ds-row-t,.ds-row-s,.hn){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.ds-idfull .hn{display:inline}
.ds-idfull :is(.ds-row-t,.ds-row-s,.hn)>.ar{display:inline;max-width:none;overflow:visible;white-space:normal}
/* UI r4 H1 (owner-approved, gatekeeper 3 Nov): the blue OUTLINE button (.ds-outline: white, blue text and edge; the desktop per-item Release:
   one solid blue per screen) and the standalone focused-page Back (dsBack in 20-ds.js: Primary blue, white chevron-left 16 px + label, 8 px
   gap; phone 48 px / 16 px, computer 32 px / 14 px with a 44 px tap height; its left edge is the box edge below it, no side margin of its own) */
.ds-outline{background:var(--ds-card);color:var(--ds-info);border-color:var(--ds-info)}.ds-outline:active,.ds-outline.is-pressed{background:var(--ds-info-bg)}
.ds-btn.ds-back{gap:var(--ds-2);padding:0 var(--ds-4) 0 var(--ds-3);margin:0}
.ds-btn.ds-back:focus-visible{outline:2px solid var(--ds-info);outline-offset:2px}
[dir=rtl] .ds-back .ds-chev-l{transform:scaleX(-1)}
@media (min-width:1000px){.ds-btn.ds-back{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}.ds-btn.ds-back::before{content:"";position:absolute;inset:-6px 0}}
/* UI r4 H1: on a computer the menu (nav.nav, placed by dsNavPlace) is a compact group in the header's title row, right after the title: no
   separate menu row, no floating underline. Each item 32 px high with a 44 px tap height, white on the blue bar; the open one = the glass
   fill + 600 weight (aria-current="page"); hover = the glass fill; keyboard focus = the white ring. The phone's bottom menu is unchanged. */
@media (min-width:1000px){
  .ds-header-row>.ds-header-t:has(+nav.ds-hnav){flex:0 1 auto}
  #app.ds-deskmenu .ds-header-row>nav.nav.ds-hnav{display:flex;align-items:center;gap:var(--ds-1);flex:0 0 auto;margin:0 auto 0 var(--ds-2);padding:0;background:transparent;box-shadow:none;border-radius:0;position:static;min-height:0}
  #app.ds-deskmenu .ds-header-row>nav.ds-hnav button{flex-direction:row;height:var(--ds-h-s);min-height:var(--ds-h-s);padding:0 var(--ds-2);gap:var(--ds-1);color:var(--ds-on);font-size:var(--ds-fs-s);font-weight:var(--ds-fw);line-height:16px;border-radius:var(--ds-r-s);box-shadow:none;position:relative;white-space:nowrap}
  #app.ds-deskmenu .ds-header-row>nav.ds-hnav button::before{content:"";position:absolute;inset:-6px 0}
  #app.ds-deskmenu .ds-header-row>nav.ds-hnav button>svg,#app.ds-deskmenu .ds-header-row>nav.ds-hnav .ds-navic>svg{width:20px;height:20px}
  #app.ds-deskmenu .ds-header-row>nav.ds-hnav button.on{background:var(--ds-on-glass);font-weight:var(--ds-fw-b);box-shadow:none}
  #app.ds-deskmenu .ds-header-row>nav.ds-hnav button:hover{background:var(--ds-on-glass)}
  #app.ds-deskmenu .ds-header-row>nav.ds-hnav button:focus-visible{outline:2px solid var(--ds-on);outline-offset:0}
  .ds-header-row:has(>nav.ds-hnav-wrap){flex-wrap:wrap;row-gap:var(--ds-2)}
  #app.ds-deskmenu .ds-header-row>nav.ds-hnav.ds-hnav-wrap{order:9;flex:1 0 100%;margin:0;flex-wrap:wrap}
  .ds-header-row>.ds-header-t:has(+nav.ds-hnav-wrap){flex:1 1 auto}
}
/* UI r4 A17a: the Action required count sits on its OWN icon (.ds-navic = the icon's box; the count's left edge at the icon's right part,
   above its top), so it never reaches a neighbour (New); it grows to the right with the digits (99+); 0 = hidden; unknown = "…" (loading) */
.ds-navic{position:relative;display:inline-flex;flex:none}
.nav button.ds-navlast{flex-direction:column-reverse}   /* the label is first in the DOM (the accessible name: "Action required 4"); the icon is drawn above it */
@media (min-width:1000px){#app.ds-deskmenu nav.nav button.ds-navlast{flex-direction:row-reverse}#app.ds-deskmenu nav.nav .ds-navic{align-items:center;gap:var(--ds-1)}#app.ds-deskmenu nav.nav .ds-navic>.navbadge{position:static}}   /* rc12 item 1: Order Fulfilment only */   /* a computer: the count sits in the icon's box right after the icon (any number of digits, never over the label) */
.ds-navic>.navbadge{top:-6px;left:calc(100% - 8px);right:auto}
#app nav.nav .ds-navic>.navbadge{top:-6px;left:calc(100% - 8px);right:auto}
/* UI r4 A15: the shared trailing row chevron (dsRowChev): 16 px, centred on the row's own height at any row height (no fixed top offset) */
.ds-rchev{display:inline-flex;align-items:center;align-self:center;flex:none;color:var(--ds-muted)}
.ds-rchev>svg{display:block;width:16px;height:16px}
.ds-row.ds-rro{cursor:default}   /* a read-only row (nothing to open): no button, no chevron */
/* UI r4 A13b: THE header refresh icon (I.refresh / dsRefreshIcon): the same 24 px canvas, ~20 px glyph and 2 px rounded stroke in every header;
   the 44 px target is the header icon button's (.ds-icon::after) */
.ds-header .rfbtn>svg{width:24px;height:24px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ==== 0.9.67 design system: END ==== */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ground);color:var(--ink);font-family:Outfit,system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
.ar{font-family:'IBM Plex Sans Arabic',Outfit,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--ds-info);outline-offset:2px}
a{color:var(--blue)}
#app{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--ground);position:relative}
#app.wide{max-width:1280px}
.top{flex-shrink:0;position:relative;overflow:hidden;background:var(--blue);color:#fff;border-radius:0 0 24px 24px;box-shadow:0 10px 30px var(--ds-focus);padding:4px 16px 16px 8px}
.top .arch{position:absolute;right:-30px;top:-14px;width:200px;opacity:.09;pointer-events:none}
[dir=rtl] .top .arch{right:auto;left:-30px}
.top .row{position:relative;display:flex;align-items:center;gap:8px;min-height:44px}
.top .label{flex-grow:1;margin:0;font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--ds-on)}
.iconbtn{width:44px;height:44px;border:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;border-radius:12px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:400;color:#fff;background:var(--ds-on-glass);padding:4px 12px;border-radius:999px;border:0}
.dot{width:7px;height:7px;border-radius:999px;background:var(--ds-ok)}.dot.off{background:var(--ds-warn)}
.who{position:relative;margin:4px 0 0 12px;display:flex;align-items:center;gap:8px}
.who .name{display:block;font-size:22px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.who .sub{display:block;font-size:14px;color:var(--ds-on);margin-top:4px}
.incard{position:relative;margin:12px 0 0 12px;background:#fff;color:var(--ink);border-radius:16px;padding:12px;box-shadow:0 4px 14px var(--ds-focus)}
.big{font-size:22px;font-weight:600;line-height:1}
main{flex-grow:1;padding:16px 16px 40px;display:flex;flex-direction:column;gap:16px}
h2.sec{margin:0 4px 8px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.card{background:var(--card);border-radius:16px;border:1px solid var(--line);box-shadow:0 1px 2px var(--ds-shadow);overflow:hidden}

.cell{display:flex;flex-direction:column;gap:4px;padding:8px 16px;min-width:0}
.cell.r{border-right:1px solid var(--ds-line)}.cell.t,.t{border-top:1px solid var(--ds-line)}
.cell .k,.k{font-size:12px;color:var(--muted)}
.cell select,.cell input{width:100%;min-width:0;min-height:28px;border:0;padding:0;background:transparent;font-weight:600;font-size:16px}
.full{grid-column:1/-1}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 8px;border-bottom:1px solid var(--ds-line)}
.tabs button{min-height:46px;border:0;background:transparent;color:var(--muted);font-weight:400;font-size:14px}
.tabs button.on{color:var(--blue);font-weight:600;box-shadow:inset 0 -3px 0 var(--blue)}


.switch{width:46px;height:28px;border-radius:999px;background:var(--ds-edge);position:relative;flex-shrink:0;border:0}
.switch.on{background:var(--blue)}.switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:999px;background:#fff;transition:left .15s}
.switch.on::after{left:21px}
.search{position:relative;margin:8px}
.search label{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.search input{flex-grow:1;min-width:0;border:0;outline:0;font-size:16px;font-weight:400;background:transparent}
.drop{position:absolute;left:0;right:0;top:58px;z-index:5;list-style:none;margin:0;padding:8px;background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 40px var(--ds-shadow);display:flex;flex-direction:column;gap:4px;max-height:330px;overflow:auto}
.drop button{width:100%;border:0;background:transparent;text-align:left;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 12px;border-radius:12px}
.drop button:hover,.drop button.sel{background:var(--tint)}
.chip{height:40px;border-radius:12px;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.chip.warn{background:var(--ds-warn-bg);color:var(--ds-warn)}
.line{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--ds-line)}
.line .n{display:block;font-size:16px;font-weight:400}.line .s{font-size:12px;color:var(--muted)}
.line .amt{font-size:16px;font-weight:600}
.qp{display:flex;gap:8px;margin-top:4px;align-items:flex-end}
.bottom{position:sticky;bottom:0;flex-shrink:0;z-index:4}.bottom .foot,.bottom .nav{position:static}
.foot{flex-shrink:0;position:sticky;bottom:0;z-index:4;background:#fff;padding:16px 16px 24px;box-shadow:0 -1px 0 var(--ds-line);display:flex;align-items:center;gap:12px}
.btn{min-height:56px;border:0;border-radius:16px;background:var(--blue);color:#fff;font-weight:600;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 24px}
.btn:disabled{opacity:.45}.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ds-edge)}.btn.small{min-height:42px;font-size:14px;border-radius:12px;padding:0 16px}
.muted{color:var(--muted)}.green{color:var(--green)}.amber{color:var(--amber)}.coral{color:var(--ds-warn)}
.bar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--ds-page);margin-top:8px}
.list-item{padding:16px;display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid var(--ds-line);width:100%;background:transparent;border-left:0;border-right:0;border-bottom:0;text-align:left}
.list-item:first-child{border-top:0}
.tag{padding:4px 8px;border-radius:999px;background:var(--tint);color:var(--blue);font-size:12px;font-weight:600;white-space:nowrap}
.tag.green{background:var(--ds-page);color:var(--green)}.tag.coral{background:var(--ds-warn-bg);color:var(--ds-warn)}.tag.grey{background:var(--ds-page);color:var(--muted)}
.nav{flex-shrink:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);column-gap:4px;background:#fff;padding:8px 12px 16px;box-shadow:0 -1px 0 var(--ds-line);position:sticky;bottom:0}
.nav button{min-height:54px;border:0;background:transparent;color:var(--muted);font-size:12px;white-space:nowrap;padding:0 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav button.on{color:var(--blue);font-weight:600}
.toast.errtoast{display:flex;align-items:center;gap:8px;background:#B42318;color:#fff;text-align:left;font-size:14px;padding:12px 12px 12px 16px}


.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;z-index:50;max-width:90%;box-shadow:0 10px 30px var(--ds-shadow)}
/* 0.9.45 (owner 21 Oct, item 1): refresh - the small header icon (and the big circle while the screen reloads) turns; "Updated · tap to see" bar under the header */
.rfbtn.spin svg,#ptr.spin svg{animation:spin .8s linear infinite}
.updbar{position:fixed;left:50%;transform:translateX(-50%);z-index:60;background:#0B4FB3;color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;line-height:1.2;font-family:inherit;box-shadow:0 4px 14px var(--ds-shadow);cursor:pointer;white-space:nowrap}
.errors{background:var(--ds-bad-bg);color:var(--ds-bad);border-radius:12px;padding:12px 16px;font-size:14px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keypad button{min-height:50px;border:0;border-radius:12px;background:var(--ds-page);font-size:22px;font-weight:400}
.keypad button.add{background:var(--blue);color:#fff;font-size:16px;font-weight:600}
.slot{border:0;border-radius:12px;padding:8px 12px;text-align:left;display:flex;flex-direction:column;justify-content:center;min-height:62px;background:var(--ds-page)}
.slot.on{background:#fff;box-shadow:inset 0 0 0 2px var(--blue)}.slot .k{font-weight:600;letter-spacing:.1em}.slot.on .k{color:var(--blue)}
.slot .v{font-size:22px;font-weight:600}
.dock{flex-shrink:0;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -8px 24px var(--ds-shadow);padding:16px 16px 16px;display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0}



.round{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:0;text-decoration:none}
.choice{min-height:92px;border-radius:24px;font-size:22px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff}
.choice.on{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 6px 16px var(--ds-shadow)}
.login{max-width:420px;margin:0 auto;padding:32px 24px}
table.t{width:100%;border-collapse:collapse}table.t th{text-align:left;padding:12px 16px;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--line);background:var(--ds-page)}
table.t td{padding:12px 16px;border-bottom:1px solid var(--ds-line);font-size:14px}
.hide{display:none!important}
/* rounded bottom bars (Ahmed, 14 Oct: no sharp edges) */
.bottom{background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -8px 24px var(--ds-shadow);overflow:hidden}
.bottom .foot{box-shadow:none;background:transparent}
.bottom .nav{box-shadow:0 -1px 0 var(--ds-line);background:transparent}
#app > .nav,#app > .foot,#app > div > footer.foot{border-radius:24px 24px 0 0;box-shadow:0 -8px 24px var(--ds-shadow)}

/* customer search bar with drop-down in the header */
.archclip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.top .archclip .arch{position:absolute}
.top.open{overflow:visible;z-index:6}
.cswrap{position:relative;margin:12px 0 0 12px;z-index:6}

.csdrop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;color:var(--ink);border-radius:16px;padding:8px;box-shadow:0 18px 40px var(--ds-shadow);max-height:360px;overflow:auto}
.csdrop button{width:100%;border:0;background:transparent;border-radius:12px;padding:12px 12px;display:flex;justify-content:space-between;gap:8px;text-align:left}
.csdrop button.sel,.csdrop button:hover{background:var(--tint)}
.cshead{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--muted);padding:8px 12px 4px}

.longcode{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.2;word-break:break-word;text-align:center}
.drop button .longcode{text-align:left}

/* product line: qty × price = total */
.pl{padding:12px 16px 12px;border-top:1px solid var(--ds-line)}

.pl-n{display:block;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pl .rm{width:32px;height:32px;color:var(--muted)}

.fx{display:flex;flex-direction:column;gap:4px;min-width:0}
.fk{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-left:4px}
.fi{display:flex;align-items:baseline;gap:4px;height:44px;padding:0 12px;border-radius:12px;background:var(--ds-page);border:1.5px solid transparent;align-items:center}
.fi input{flex:1;min-width:0;width:100%;border:0;background:transparent;font-size:16px;font-weight:600;padding:0;outline:none}
.fi input::placeholder{color:var(--ds-muted);font-weight:400}
.fi em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
.fx:focus-within .fi{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px var(--ds-focus)}
.fx.need .fi{border:1.5px dashed var(--ds-line);background:var(--ds-page)}
.fx.need .fk{color:var(--blue)}
.fx.bad .fi{border:1.5px solid var(--ds-bad);background:var(--ds-bad-bg)}.fx.bad .fk{color:var(--ds-bad)}
.fx.tot b{height:44px;display:flex;align-items:center;justify-content:flex-end;font-size:16px;font-weight:600;padding-right:4px;white-space:nowrap}
.op{height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px}


.btn.dim{opacity:.55}
/* approvals: live SAP status */
.st{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.st.run{background:var(--tint);color:var(--blue)}.st.ok{background:var(--ds-page);color:var(--green)}.st.err{background:var(--ds-bad-bg);color:var(--ds-bad)}
.st.run::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.st.ok::before{content:"✓"}
@keyframes spin{to{transform:rotate(360deg)}}
.seg-h{display:flex;justify-content:space-between;align-items:baseline}

html{scroll-padding-bottom:230px;scroll-padding-top:90px}
.zonecell.need{box-shadow:inset 0 0 0 1.5px var(--ds-line);background:var(--ds-page)}
.zonecell.bad{box-shadow:inset 0 0 0 1.5px var(--ds-bad);background:var(--ds-bad-bg)}
.k .req{font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-left:4px}
.zonecell.bad .k .req{color:var(--ds-bad)}


a.btn{text-decoration:none;display:inline-flex;align-items:center;gap:8px}



.btn.warn{background:var(--ds-warn)}

/* owner home */
.flow{position:relative;display:flex;align-items:center;gap:8px;margin:16px 12px 0 0;padding:12px 16px;border-radius:16px;background:var(--ds-on-glass)}
.flow div{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}.flow b{font-size:22px;font-weight:600;line-height:1}.flow span{font-size:12px;color:var(--ds-on);margin-top:4px;white-space:nowrap}
.flow i{width:14px;height:2px;background:var(--ds-on-glass);border-radius:8px;flex-shrink:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:24px;border:0;background:#fff;text-align:left;box-shadow:0 1px 0 var(--ds-line)}
.tile .n{font-size:22px;font-weight:600;line-height:1}.tile .l{font-size:14px;font-weight:600}.tile .s{font-size:12px;color:var(--muted)}
.tile.blue{background:var(--blue);color:#fff}.tile.blue .s{color:var(--ds-on)}
.tile.coral{background:var(--ds-warn-bg)}.tile.coral .n,.tile.coral .s{color:var(--ds-warn)}
.att{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:12px 16px;border:0;border-top:1px solid var(--ds-line);background:#fff;text-align:left;font-size:14px}
.att:first-child{border-top:0}.att b{font-weight:600;font-size:14px}.att span span{color:var(--muted)}
.att .ic,.card.ok .ic{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--blue);font-weight:600}
.att.coral .ic{background:var(--ds-warn-bg);color:var(--ds-warn)}
.card.ok{display:flex;align-items:center;gap:12px;padding:16px;font-size:14px;color:var(--green)}.card.ok .ic{background:var(--ds-page);color:var(--green)}


.act{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:12px 16px;border-top:1px solid var(--ds-line);font-size:14px}
.act:first-child{border-top:0}.dotx{width:8px;height:8px;border-radius:8px;background:var(--blue);align-self:center}.dotx.u{background:var(--ds-bad)}.dotx.s{background:var(--green)}

/* form cards (new order) — titled cards, labelled field boxes, pill segments */





.fld{display:flex;flex-direction:column;gap:8px;min-width:0}.fld.full,.flink.full{grid-column:1 / -1}
.fl{font-size:14px;color:var(--ds-muted);margin-left:4px}.fl .opt{color:var(--ds-muted);font-size:12px}
.fbox{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:12px;background:var(--ds-page);border:1px solid var(--ds-line);transition:border-color .15s,box-shadow .15s}
.fbox input,.fbox select{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:16px;font-weight:400;color:var(--ink);padding:0;-webkit-appearance:none;appearance:none}
/* .fbox .chev / the select's end padding: the shared A10 chevron (design-system block) */
.fbox.empty select{color:var(--ds-muted)}
.fbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--ds-focus);background:#fff}
.fbox input:focus,.fbox select:focus{outline:none}
.fbox.toggle{padding:12px 16px}
.fld.need .fbox{border:1.5px dashed var(--ds-line);background:var(--ds-page)}
.fld.bad .fbox{border:1.5px solid var(--ds-bad);background:var(--ds-bad-bg)}.fld.bad .fl{color:var(--ds-bad)}


.fhint{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ds-muted);margin:4px 4px 0}.fhint svg{flex-shrink:0;color:var(--ds-muted)}
.plist{margin:0 -16px -16px}.plist .pl:first-child{border-top:1px solid var(--ds-line)}

/* customer dues (inside the white box) */
/* 0.9.43 (owner 20 Oct): compact customer balance card, approved visual "B compact" (ar-card2.png) */
.ag{display:flex;flex-direction:column;gap:8px}
.agtot{font-size:22px;font-weight:600;line-height:1.1;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}.agtot span{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}

.draftrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.draftrow .dopen{border:0;background:transparent;text-align:left;padding:0;min-width:0}
.ddel{border:0;background:var(--ds-page);color:var(--muted);border-radius:8px;min-width:36px;height:36px;font-weight:600;font-size:14px;padding:0 12px}
.ddel.armed{background:var(--ds-bad-bg);color:var(--ds-bad)}

.foot > div:first-child{min-width:0}#fcount{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot #fcount{font-size:12px !important;letter-spacing:.04em !important}
.foot #sendbtn{padding:0 16px}
.fx.odd .fi{border:1.5px solid var(--ds-warn);background:var(--ds-warn-bg)}.fx.odd .fk{color:var(--ds-warn)}
.fbox.locked{background:var(--ds-page)}.fbox.locked select{color:var(--ink);opacity:1}.fbox.locked .chev{display:none}



/* More menu */
.res{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-top:1px solid var(--ds-line)}.res:first-child{border-top:0}
.res b{font-weight:600;font-size:16px}
.rtext{margin:4px 0 0;font:14px/1.5 Outfit,'IBM Plex Sans Arabic',sans-serif;white-space:pre-wrap;color:var(--ds-text);background:var(--ds-page);border-radius:8px;padding:8px 12px}


/* KPI strip: label / value + unit / basis, separated by thin dividers (no dashes that read as minus) */
.kpis{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:12px 0 0 12px;border-radius:16px;background:var(--ds-on-glass);overflow:hidden}
.kpi{display:flex;flex-direction:column;gap:4px;padding:12px 12px 12px;min-width:0;border-left:1px solid var(--ds-on-glass)}.kpi:first-child{border-left:0}


.kpi{padding-right:8px}
.list-item>span:last-child>b{white-space:nowrap}
.cur{font-size:12px;font-weight:600;letter-spacing:.04em;margin-right:4px;opacity:.8;vertical-align:.25em}

.flow{margin-top:4px}.flow i{width:auto;height:auto;background:none;color:var(--ds-on);font-style:normal;font-size:16px;flex-shrink:0}
.flow span{white-space:normal;text-align:center;line-height:1.2}
.tile .n small{font-size:14px;font-weight:400;color:inherit;opacity:.7}
/* fingerprint trail: time column, a dot on a line, then what / who / device */
.tag.dead{background:var(--ds-page);color:var(--muted);text-decoration:line-through}
.seal{font-size:12px;font-weight:600;padding:4px 8px;border-radius:999px;white-space:nowrap}.seal.ok{background:var(--ds-page);color:var(--green)}.seal.bad{background:var(--ds-bad-bg);color:var(--ds-bad)}

.fptrail{padding:8px 0}
.fp{display:grid;grid-template-columns:64px 14px minmax(0,1fr);gap:8px;padding:8px 16px 8px 12px;position:relative}
.fp .fpt{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;line-height:1.3}.fp .fpt b{font-weight:600;font-size:12px}.fp .fpt span{color:var(--muted);font-size:12px}
.fp .fpd{position:relative}.fp .fpd::before{content:"";position:absolute;left:6px;top:0;bottom:-8px;width:2px;background:var(--ds-page)}.fp:last-child .fpd::before{bottom:auto;height:12px}
.fp .fpd::after{content:"";position:absolute;left:2px;top:5px;width:10px;height:10px;border-radius:8px;background:var(--blue);box-shadow:0 0 0 3px #fff}
.fp.s .fpd::after{background:var(--green)}.fp.c .fpd::after{background:var(--ds-bad)}.fp.u .fpd::after{background:var(--ds-warn)}
.fp .fpm{display:flex;flex-direction:column;gap:0;min-width:0;font-size:14px}.fp .fpm>b{font-weight:600}
.fpx{font-size:12px;color:var(--ink);opacity:.8;overflow-wrap:anywhere}.fpw{font-size:12px;color:var(--muted)}.fpv{font-size:12px;color:var(--muted);letter-spacing:.01em;overflow-wrap:anywhere}
/* cancel panel */
.btn.cxbtn{width:100%;color:var(--ds-bad);border-color:var(--ds-bad)}
.cxbox{border:1px solid var(--ds-bad);background:var(--ds-bad-bg);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.cxbox>b{color:var(--ds-bad)}.cxbox p{margin:0;font-size:14px;color:var(--ds-bad)}
.cxbox textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 12px;font:inherit;font-size:16px;resize:vertical;background:#fff}
.cxrow{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.btn.cxgo{background:var(--ds-bad)}.btn.cxgo.armed{background:var(--ds-bad);box-shadow:0 0 0 3px var(--ds-bad)}
.cxreq{border-left:3px solid var(--ds-bad);padding:8px 12px;background:var(--ds-bad-bg);border-radius:0 12px 12px 0;font-size:14px;margin-bottom:8px}
.cxdone{border-left:3px solid var(--muted);padding:12px 12px;background:var(--ds-page);border-radius:0 12px 12px 0;font-size:14px}

/* pilot: line status under each line, rep answers, SAP flow, chat, returns */
.tag.amber{background:#FFF4E5;color:var(--amber)}
.lful{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;padding:0 16px 12px 76px;margin-top:-4px}
.lnote{width:100%;font-size:12px;color:var(--ink);opacity:1;overflow-wrap:anywhere}.lnote.green{color:var(--green);opacity:1}   /* 0.9.67 A3: no opacity on text (the .85 put the muted words and the steps line under 4.5:1) */

.flowline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;background:#fff;border-radius:16px;padding:12px 12px 12px}
.flowline>div{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);position:relative;padding-top:16px;min-width:0}
.flowline>div i{position:absolute;top:0;left:0;right:0;height:5px;border-radius:8px;background:var(--ds-page)}.flowline>div.on i{background:var(--blue)}
.flowline>div b{font-size:12px;font-weight:600;color:var(--muted);line-height:1.2}.flowline>div.on b{color:var(--ink)}.flowline span{overflow-wrap:anywhere}
.chat{padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:86%;align-self:flex-start;display:flex;flex-direction:column;gap:4px}.msg.me{align-self:flex-end;align-items:flex-end}

.msg .mm{font-size:12px;color:var(--muted)}


.lsf{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600;margin-top:8px}
.lsf input,.lsf textarea{border:1px solid var(--line);border-radius:12px;padding:12px 12px;font:inherit;font-size:16px;color:var(--ink);background:#fff;font-weight:400}

.rq{border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;font-size:16px;text-align:right;width:100%}
/* round 2: alarms, confirm sheet, pipeline filters, history, availability, origin */
.sheetbg{position:fixed;inset:0;background:var(--ds-scrim);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{background:#fff;width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
.cs-h{font-size:22px;font-weight:600;margin-bottom:12px}.cs-r{display:flex;justify-content:space-between;gap:12px;padding:8px 4px;border-bottom:1px solid var(--ds-line);font-size:14px}.cs-r span{color:var(--muted)}.cs-r b{font-weight:600;text-align:right}

.hdates{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hdates .lsf{margin-top:0}

.althint{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--amber);background:#FFF4E5;border-radius:8px;padding:8px 12px;margin-top:4px}

.orig{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0 12px;font-size:12px;border-bottom:1px solid var(--ds-line)}.orig.bad{color:var(--ds-bad)}

/* 0.4.0 audit fixes: return receipts in batches, disabled origin chips, quarantine box */


   /* R2-FE04: a New return locked while it sends does not strike its order chips through */
.qbox{border:1.5px solid var(--ds-warn);background:var(--ds-warn-bg);border-radius:12px;padding:12px 16px;margin:8px 0;font-size:14px;color:var(--ds-warn)}.qbox b{display:block;margin-bottom:4px;color:var(--ds-warn)}
/* Order Fulfilment master line view */




/* Order Fulfilment order view (option A) */
.fsteps{display:flex;gap:4px;margin-top:12px}.fsteps i{flex:1;height:6px;border-radius:8px;background:var(--ds-page)}.fsteps i.on{background:var(--blue)}.fsteps i.now{background:repeating-linear-gradient(90deg,var(--blue) 0 8px,var(--ds-info) 8px 12px)}


.fq{font-size:14px;color:var(--muted);margin-top:4px}




/* confirmations (sign out and every "are you sure"): a pop-up in the middle of the screen (Ahmed, 15 Oct) */
.sheetbg.mid{align-items:center;padding:16px}.sheetbg.mid .sheet{border-radius:24px;max-width:420px;padding:24px 16px;box-shadow:0 12px 40px var(--ds-shadow);animation:popin .14s ease-out}
@keyframes popin{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}

.invlist{display:flex;flex-direction:column;gap:4px;margin:0 4px 8px}.inv{font-size:14px;background:var(--ds-page);color:var(--ds-ok);border-radius:12px;padding:8px 12px}

/* fingerprint per line + SO title (16 Oct) */

.trtag{display:inline-block;margin-left:8px;padding:0 8px;border-radius:999px;background:var(--tint);color:var(--blue);font-size:12px;font-weight:600;vertical-align:1px}
.fp.m .fpd::after{background:var(--ds-pro)}


/* Activity stream (16 Oct) */

.actcard{padding:0;overflow:hidden}
.actin{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ds-line);background:var(--ds-page)}
.actin textarea{width:100%;box-sizing:border-box}

.arow{display:grid;grid-template-columns:92px 1fr;gap:8px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--ds-line);background:#fff;padding:12px 16px;font:inherit;cursor:pointer}
.arow:hover{background:var(--ds-page)}.arow .art{font-size:12px;color:var(--muted);padding-top:4px}.arow .arm{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:14px}.arow .arm>b{font-weight:600}
.arow.sap .arm>b{color:var(--ds-ok)}.arow.system{opacity:.7}
.amsg{padding:12px 16px;border-bottom:1px solid var(--ds-line);border-left:3px solid var(--ds-pro);background:var(--ds-page);display:flex;flex-direction:column;gap:8px}
.amsg.me{border-left-color:var(--blue);background:var(--ds-page)}.amsg.new{background:var(--ds-warn-bg)}.amsg.ask{border-left-color:var(--ds-bad)}
.amh{display:flex;flex-wrap:wrap;gap:8px 8px;align-items:center;font-size:12px;color:var(--muted)}.amh b{color:var(--ink);font-size:14px;font-weight:600}
.amb{font-size:14px;line-height:1.4;overflow-wrap:anywhere}.amq{font-size:12px;color:var(--muted);border-left:2px solid var(--line);padding-left:8px}
.amf{display:flex;gap:12px}.linkb{border:0;background:none;padding:0;color:var(--blue);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.trtag.ok{background:var(--ds-page);color:var(--ds-ok)}.trtag.ask{background:var(--ds-bad-bg);color:var(--ds-bad)}.trtag.newt{background:var(--ds-warn-bg);color:var(--ds-warn)}

.audt td{font-size:12px;vertical-align:top}.audt td:nth-child(4){max-width:320px;overflow-wrap:anywhere}
.arow .arm>b .trtag{font-weight:600}
.sapsteps2{margin:4px 0 4px;padding-left:16px;font-size:14px;line-height:1.5;color:var(--ds-text)}.sapsteps2 li{margin:4px 0}
/* ---- 0.9.17 owner-approved UI audit (17 Oct) ---- */

.monthline{font-size:12px;color:var(--muted);padding:4px 4px}.monthline b{color:var(--ink);font-weight:600}
.secacts{display:flex;flex-wrap:wrap;gap:8px}.secacts .btn{flex:0 0 auto}
.olink{display:inline-flex;align-items:center;font:inherit;font-size:12px;font-weight:600;color:var(--blue);background:var(--tint);border:1px solid var(--ds-line);border-radius:999px;padding:4px 12px;cursor:pointer}

.adev{display:block;font-size:12px;color:var(--muted);margin-top:4px}.amf .adev{display:inline;margin-left:auto}.amf{display:flex;align-items:center;gap:8px}
.arow{cursor:default}


.fpanel{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.btn.small.on{background:var(--tint);color:var(--blue)}
/* 0.9.17 item 17: one hint line above search results */
.drophint{list-style:none;padding:8px 12px 4px;font-size:12px;color:var(--muted);font-weight:600}.drophint.ok{color:var(--blue)}
/* 0.9.17 item 16a (owner 17 Oct; mock "html.slim", now the default): compact blue bar, Annex arch kept; a box inside the bar sits
   14px below the text above it and 14px above the bar's bottom edge. The sign-in screen keeps its big header. */
.top{border-radius:0 0 16px 16px;box-shadow:none;padding:0 16px 16px 8px}
.top .row{min-height:40px}
.who{margin-top:0}.who .name{font-size:16px}.who .sub{font-size:12px;margin-top:4px}
.top [style*="font-size:24px"]{font-size:16px!important}
.top .cswrap,.top .incard,.top .kpis{margin-top:12px}
.top.signin{border-radius:0 0 24px 24px;box-shadow:0 10px 30px var(--ds-focus)}
.secacts .btn.cxbtn{width:auto}

/* 0.9.17 review: warehouse line rows - the product name gets the full width; status and Update sit underneath */

/* 0.9.20: drop-down filters (status, rep, site, sort) */
.ddrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:4px 0 8px;align-items:end}
.ddf{display:flex;flex-direction:column;gap:4px;min-width:0}
.ddf .fl{font-size:14px;color:var(--ds-muted);margin:0 0 0 4px}
.ddf .fbox{min-height:42px;background:#fff}
.ddf .fbox select{font-size:16px;text-overflow:ellipsis}
/* 0.9.22: Order Fulfilment review (owner 18 Oct) */















/* 0.9.23: one row per sales order on a computer */






/* 0.9.24: approval reads like an invoice (owner 18 Oct) */
.lnote.steps b.coral{color:var(--ds-warn)}

.aplink .cxbtn{background:none;border:0;color:var(--ds-bad);font-weight:600;font-size:14px;width:100%;box-shadow:none}
/* 0.9.24: computer table - the order opens under its row (owner: one screen summary like before) */



/* 0.9.27: Order Fulfilment declutter (owner 18 Oct) */
.dofirst{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--ds-bad-bg);border:1px solid var(--ds-bad);border-radius:12px;padding:8px 16px;margin-bottom:8px;font:inherit;font-size:14px;color:var(--ds-bad);cursor:pointer}
.dofirst b{font-weight:600}.dofirst .go{margin-left:auto;color:var(--ds-bad);font-weight:600;white-space:nowrap}.dofirst.info{background:var(--ds-page);border-color:var(--line);color:var(--ds-text);cursor:default}

.qt{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 16px 12px;font:inherit;font-size:14px;color:var(--ds-muted);font-weight:400;white-space:nowrap;cursor:pointer}
.qt b{display:inline-block;min-width:22px;text-align:center;margin-left:4px;border-radius:999px;background:var(--ds-page);font-size:12px;padding:0 8px;color:var(--ds-text);font-weight:600}
.qt.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}.qt.on b{background:var(--blue);color:#fff}.qt.hot b{background:var(--ds-warn-bg);color:var(--ds-warn)}




/* 0.9.28 (owner 18 Oct, draft 1): compact order panel under the table row */
.fcomp .qbox,.fcomp .cxbox{margin:0 0 8px}
.cstrip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--ds-text);margin:0 4px 8px}
.cstrip .fsteps{display:inline-flex;gap:4px;margin:0 4px 0 0}.cstrip .fsteps i{width:26px;height:5px}
.cstrip b{font-weight:600;color:var(--ink)}

.cgrid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr);gap:12px;align-items:start}
@media (max-width:1100px){.cgrid{grid-template-columns:1fr}}
.cbox{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.clines table{width:100%;border-collapse:collapse;font-size:14px}
.clines th{text-align:left;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ds-muted);font-weight:600;background:var(--ds-page);padding:8px 12px;border-bottom:1px solid var(--ds-line)}
.clines td{padding:8px 12px;border-top:1px solid var(--ds-line);vertical-align:middle}
.clines tr:first-child td{border-top:0}
.clines .cn{color:var(--ds-muted);width:34px;font-variant-numeric:tabular-nums}



.clines tr.cx td{color:var(--ds-muted)}
.clines tr.on td{background:var(--ds-page)}


.cfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--ds-line);background:var(--ds-page);font-size:14px}
.cfoot .cnote{flex-grow:1;color:var(--ds-text);min-width:0}

.cm span{color:var(--ds-muted);font-size:12px}.cm b{font-weight:600}.cm.ask{border-left:3px solid var(--ds-bad);padding-left:8px}
.cin{display:flex;gap:8px;margin-top:8px}.cin input{flex-grow:1;min-width:0;border:1px solid var(--ds-edge);border-radius:8px;padding:8px 8px;font:inherit;font-size:14px}
/* 0.9.31 (owner 18 Oct): one neat toolbar row - every control 44 px high, labels inside the drop-downs, no card around the search */








/* line status drop-down (0.9.31) */










/* 0.9.33 (owner 19 Oct, drafts 3 + 5): order details as compact rows; calendar pop-up; product line stock table, solid fields */






.odate{cursor:pointer;justify-content:space-between}.odate em{font-style:normal;font-size:14px;font-weight:600;white-space:nowrap}.odate em.std{color:var(--green)}.odate em.urg{color:var(--ds-warn)}
.odate.urgent{border-color:var(--ds-warn);background:var(--ds-warn-bg)}


.calpop{position:absolute;right:0;top:56px;z-index:30;width:min(300px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px var(--ds-shadow);padding:12px}
.calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.calh b{font-size:16px}
.calh button{border:0;background:transparent;color:var(--blue);font-size:22px;width:34px;height:30px;cursor:pointer}.calh button:disabled{color:var(--ds-muted)}
.calg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:14px}.calg b{font-size:12px;color:var(--muted);font-weight:600;padding:4px 0}
.calg i{font-style:normal;padding:8px 0}.calg i.x{color:var(--ds-muted)}
.calg button{border:0;background:transparent;border-radius:8px;padding:8px 0;font:inherit;color:var(--ink);cursor:pointer}.calg button.t{box-shadow:inset 0 0 0 1px var(--ds-edge)}.calg button.on{background:var(--blue);color:#fff;font-weight:600}
.calq{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.calq button{border:1px solid var(--ds-edge);border-radius:8px;background:#fff;padding:8px 8px;cursor:pointer;font:inherit}.calq b{display:block;font-size:14px}.calq small{font-size:12px;color:var(--muted)}
.calq button.urg{border-color:var(--ds-warn);background:var(--ds-warn-bg)}.calq button.urg b{color:var(--ds-warn)}.calq button.on{box-shadow:0 0 0 2px var(--blue)}
/* product line */

.fx.need .fi{border:1.5px solid var(--ds-edge);background:#fff}.fx.need .fk{color:var(--muted)}
.fx.tot .fk{text-align:right}
.pl-s2{display:block;margin-top:4px}

.rfbtn .rflab{display:none;font-size:12px;font-weight:600;margin-left:4px;white-space:nowrap}.rfbtn.spin .rflab{display:inline}.rfbtn.spin{width:auto;padding:0 8px}
.dlist{margin:4px 4px 0;font-size:14px;line-height:1.5}
.sapspin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:4px}.sapprog .muted{font-weight:400}
.stkc{display:block;font-size:14px;color:var(--muted)}.stkc1{white-space:nowrap}.stkc .sq{font-weight:600;color:var(--ink)}.stkc .sq.amber{color:var(--amber)}.stkc .sq.z,.stkc .sq.muted{color:var(--muted)}.stkc .sa{display:block;font-size:12px}

.stkw{display:block;font-size:12px;font-weight:600;margin-top:4px}
/* 0.9.35 (owner 19 Oct, option B): product line - product left, numbers right; "Entering for" pill on the header */
.plb{display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:4px 12px;align-items:start}
.plb-l{min-width:0}.plb-t{display:flex;align-items:center;justify-content:space-between;gap:8px}.plb-t .rm{width:30px;height:30px}
.plb .pl-n{margin-top:4px;white-space:normal;font-weight:600}
.plb .pl-s2{margin-top:4px}
.plb-in{display:grid;grid-template-columns:72px 1fr;gap:8px}.plb .fi{height:40px;padding:0 8px;border-radius:8px}.plb .fi input{font-size:16px}
.plb-k{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:var(--muted);min-height:16px}.plb-k .ph{text-align:right}
.plb-k .usual{border:0;background:var(--tint);color:var(--blue);font-weight:600;font-size:12px;padding:4px 8px;border-radius:999px}
.plb-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;font-size:12px;color:var(--muted)}.plb-tot b{color:var(--ink);font-size:16px;font-weight:600}
.plb .pl-alt{grid-column:1 / -1}
.forpill{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 4px;margin:0 12px 8px;background:var(--ds-on-glass);border:1px solid var(--ds-on-glass);border-radius:12px;padding:4px 12px;font-size:14px;color:#fff}.forpill b{font-weight:600}.forpill span{opacity:.85}

/* 0.9.36 Edit order */
.pl-e{display:block;font-size:12px;color:var(--muted);margin-top:4px}.pl-e.new,.newtag{display:inline-block;background:var(--ds-info-bg);color:var(--ds-info);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-radius:8px;padding:0 8px}
.newtag{margin-right:4px}


.vtot{margin-top:4px;font-size:14px}.vtot s{color:var(--muted)}
.fi input:disabled{color:var(--muted);background:transparent}

/* 0.9.37 product line, owner option A: units inside both boxes, date on its own line, total with EGP */
.plb .plb-t .chip{height:28px;width:auto;min-width:0;padding:0 12px;border-radius:8px;font-weight:600}
.plb-in{grid-template-columns:76px 1fr}.plb .fi em{font-size:12px}
.plb-k{justify-content:flex-end;min-height:0}.plb-k .ph:empty{display:none}
.plb-tot{margin-top:4px;padding-top:8px;border-top:1px solid var(--ds-line)}.plb-tot b{font-size:16px}
/* R-2 carry 13 (a11y, 44 px at 390): the added line's Remove button keeps its drawn 30 px with an invisible 44 x 44 hit area; the Quantity / Price
   boxes (each the label of its input) are 44 px tall */
.plb-t .rm{width:30px;height:30px;position:relative}.plb-t .rm::before{content:"";position:absolute;inset:-7px}
.plb .fi{height:44px}
/* 0.9.40 rep home (owner-approved draft 19 Oct): 4-step progress bar, view-only collect / call rows, long names ellipsize */
.pb{display:flex;align-items:flex-start;padding:12px 8px}
.pb .q-st{flex:1;display:block;text-align:center;border:0;background:none;padding:0;font:inherit;color:inherit;min-width:0;cursor:pointer}
.pb .q-n{font-size:22px;font-weight:600;line-height:1.1}
.pb .q-lb{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.25}
.pb .q-wt{font-size:12px;color:var(--blue);font-weight:600;margin-top:4px}
.pb .q-ar{color:var(--ds-muted);font-size:16px;padding-top:4px}

.hneeds{border-color:var(--ds-warn)}
.hrow .hl{min-width:0;flex:1 1 auto}.hrow .hs{font-size:12px}.hrow .hr{text-align:right;flex-shrink:0}.hrow>.tag{flex-shrink:0}
.hrow .amt{font-weight:600;font-size:16px;white-space:nowrap}

.hfoot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;margin:8px 4px 0}.hfoot .linkb{margin-left:auto;white-space:nowrap}
.hupd{font-size:12px;text-align:right;margin:4px 4px 0}
.hnone{padding:16px;font-size:14px}
.hn{font-weight:600}
.hn,.list-item b>.ar{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.list-item .hn>.ar{display:inline;max-width:none}
.hn:has(>.ar){direction:rtl;text-align:left}   /* 0.9.41: a long Arabic name is cut at its END (ellipsis on the left), never its start */
/* 0.9.41 team leader home (owner-approved draft 20 Oct): coral-edged To approve card, wait in brand blue, grey chevrons, "n with Seif" */
.tap{border-color:var(--ds-warn)}
.hrow .hw{color:var(--blue);font-weight:600;white-space:nowrap}

.pb .q-seif{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap}
.hrow .hr .tag{display:inline-block;margin-top:4px}

/* 0.9.42 (owner 20 Oct): coordinator home (co-home.png) + the check screen's changed fields */

.hrow .hw.late{color:var(--ds-warn)}
.chgv mark{background:var(--ds-chg-bg);color:var(--ink);border-radius:8px;padding:0 4px;font-weight:600}
/* 0.9.42 fix: the warehouse "Do first" row reads as one text block + Open; a To release row the checker rule blocks for him is greyed */
.dofirst .dfx{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}

/* 0.9.44 (owner 21 Oct) package C: Total receivables parts, Approvals badge, director / owners home (top-home.png), stock sites setting */
.agtot.green{color:var(--green)}
.navbadge{position:absolute;top:4px;left:calc(50% + 4px);background:var(--ds-bad);color:#fff;font-size:12px;font-weight:600;line-height:1.35;border-radius:999px;padding:0 8px;min-width:18px;text-align:center}
.navbadge.hide{display:none}


.tpnote{font-size:12px;margin:8px 4px 0}

.tpneed{border:1px solid var(--ds-warn)}
.swcard{margin-bottom:8px;padding:16px 16px}.swh{display:flex;align-items:center;justify-content:space-between;gap:8px}.swt{font-size:16px;min-width:0;white-space:normal;overflow:visible;text-overflow:clip}
.swbadge{display:inline-flex;align-items:center;flex:0 0 auto;padding:0 8px 0 16px;min-height:44px;gap:8px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}.swbadge.on{background:var(--ds-page);color:var(--ds-ok)}.swbadge.off{background:var(--ds-page);color:var(--ds-muted)}
.swtog{position:relative;display:inline-block;width:40px;height:24px;border-radius:999px;background:var(--muted);flex:none}.swtog::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--card);transition:left .15s}.swbadge.on .swtog{background:var(--green)}.swbadge.on .swtog::after{left:18px}
.swcard input[type=checkbox],.swcard input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.swbadge:focus-within,.swchip:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.swd{margin:4px 0 8px;font-size:14px;color:var(--muted)}.swfor{margin:0 0 4px;font-size:14px;color:var(--muted)}

.swlast{font-size:12px;margin:8px 0 0;color:var(--muted)}
.ssrow{cursor:pointer}.ssrow input{width:22px;height:22px;flex-shrink:0;accent-color:var(--blue)}
/* 0.9.44 package A (owner 21 Oct, item 1 · visual chg2.png): the change box - WHO · WHAT CHANGED · WHOSE TURN · WHAT HAPPENS NEXT */
.chgbox{background:#fff;border:1.5px solid var(--ds-line);border-radius:16px;padding:16px}
.chgbox.turn{border-color:var(--ds-warn);background:var(--ds-warn-bg)}
.chgwho{font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.chgwhen{font-size:12px;color:var(--ds-muted);margin-top:4px}
.chgpill{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;margin-top:8px}
.chgpill.t{background:var(--ds-warn);color:#fff}.chgpill.w{background:var(--ds-page);color:var(--ds-muted)}
.chgsec{font-size:12px;letter-spacing:.08em;color:var(--ds-muted);font-weight:600;margin:12px 0 4px}
.chgln{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--ds-line);font-size:14px}
.chgno{font-size:12px;font-weight:600;border-radius:8px;text-align:center;padding:4px 0;background:var(--ds-info-bg);color:#0B4FB3}
.chgno.add{background:var(--ds-warn-bg);color:var(--ds-warn)}.chgno.rem{background:var(--ds-info-bg);color:var(--ds-muted)}

.chgsm{font-size:12px;color:var(--ds-muted)}
.chgtot{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding-top:8px;border-top:1px solid var(--ds-line)}
.chgsteps{font-size:14px;line-height:1.55}.chgsteps>div{display:flex;gap:8px;padding:4px 0}
.chgsteps .d{width:16px;flex:none;text-align:center;font-weight:600}.chgsteps .ok{color:var(--ds-ok)}.chgsteps .now{color:var(--ds-warn)}.chgsteps .nx{color:var(--ds-muted)}
.chgbtns{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:12px}
.chgbtns .btn{min-height:46px}
.rtbanner{background:var(--ds-bad-bg);border:1px solid var(--ds-bad);border-radius:16px;padding:12px 16px;color:var(--ds-bad);font-size:14px}
.rtbanner b{color:var(--ds-bad)}.rtbanner .rtacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rtbanner .rtoff,.arcard .aroff{margin-top:4px;font-size:14px;color:var(--ds-bad)}   /* 0.9.46.1: "<typer> is switched off, so you correct it." */
.sapmark{font-size:12px;font-weight:600;color:var(--ds-warn);margin-left:4px;letter-spacing:.04em}
.line.removed .n{text-decoration:line-through;color:var(--ds-muted)}
/* 0.9.45 (owner 21 Oct, item 2; visuals action-required-v2/v3.png): Action required - tab label on two lines, rows, cards with buttons, edit from a refusal */
.nav button.actb{text-align:center;line-height:1.15}
.acrow .arh{font-weight:600;color:var(--ds-warn)}.acrow .arflag.coral{color:var(--ds-warn)}.acrow .arflag.amber{color:var(--amber)}
.hnone.arok{color:var(--green);font-weight:600}
.arcard{padding:16px 16px;border-color:var(--ds-warn);margin-bottom:12px}.arcard .art{font-weight:600;font-size:16px}.arcard .ars,.rdban .ars{font-size:12px}.arcard .ars{margin-top:4px}
.arcard .arw{margin-top:8px;font-size:14px}.arcard .arq{margin:8px 0 0;padding:8px 12px;background:var(--ds-warn-bg);border-radius:8px;font-size:14px}.arcard .arthen{margin-top:8px}

.arcard .arbt{display:flex;gap:8px;margin-top:8px}.arcard .arbt:empty{display:none}
.rdoff{color:var(--ds-bad)}
.pl-e.rdsap{color:var(--muted)}.pl-e.rdref{color:var(--ds-bad)}
/* 0.9.46 (owner 21 Oct, item 2; screens-tabs.png): the "New" sheet - New order / New return */


/* 0.9.46 (owner 21/22 Oct, item 8; screens-rep.png right panel "4b"): the SAP-made change card - Accept / Put back for whoever decides */

/* 0.9.46.1: the checker's card on the owners' home ("Waiting, but nobody can see it") */
.tpball{background:var(--ds-warn-bg);border:1px solid var(--ds-warn);padding:16px 16px}.tpball .tpbh{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.tpball .tpbl{display:block;width:100%;text-align:left;background:none;border:0;padding:4px 0;font:inherit;font-size:14px;line-height:1.45;color:var(--muted);cursor:pointer}
.tpball .tpbn{margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted)}
.tag.urg{font-size:12px;padding:4px 8px;letter-spacing:.04em;vertical-align:1px}
/* 0.9.47 (owner 22 Oct, items 11 / 12 / 20): Health line, Fix in SAP rows + cards, Where orders wait */
.hbad{background:var(--ds-bad-bg);border-radius:16px;padding:16px 16px;color:var(--ds-bad);margin-bottom:8px}.hbad .hbi b{display:block;font-weight:600;font-size:16px}.hbad .hbi span{display:block;font-size:14px;line-height:1.45;margin-top:4px}.hbad .hbi+.hbi{margin-top:12px}
.hbad .hbi+.hbi{margin-top:12px}.hbad .hdl{display:inline-block;margin-top:4px;padding:4px 0;font-size:14px;font-weight:600;color:var(--blue);background:none;border:0;text-decoration:underline;cursor:pointer}.hbad .hdet{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--ds-bad);word-break:break-word}
.hok{color:var(--green);font-weight:600;font-size:14px;margin:4px 4px 8px}
.pb .q-wt.fixw{color:var(--ds-warn)}
.cofcard{position:relative}.cofrow .cold{font-size:12px;color:var(--muted)}.cofrow .cold.hot{color:var(--ds-warn);font-weight:600}


.csurg{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;font-size:14px}.csurg input{width:20px;height:20px;accent-color:var(--ds-warn)}
/* 0.9.47 (owner 22 Oct 23:05 / 23:26, /home/claude/b47/of-screens.png): Order Fulfilment from SAP's release status + the rep's line */
.ofhead{position:relative;margin:4px 0 0 12px;font-size:14px;color:var(--ds-on)}


.tag.urgent{letter-spacing:.04em}
.ofchip{display:inline-block;padding:4px 8px;border-radius:999px;background:#FFF4E5;color:var(--amber);font-size:12px;font-weight:600;white-space:normal;line-height:1.35}
.ofchip.due{background:var(--ds-warn-bg);color:var(--ds-warn)}.ofchip.grey{background:var(--ds-page);color:var(--muted)}
.ofchip.conf{background:var(--ds-page);color:var(--ds-ok)}   /* 0.9.52 D item 15: a Dyeing date confirmed by the dyehouse */
.ofconf{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;color:var(--ds-muted);cursor:pointer;white-space:nowrap;line-height:1.2}.ofconf input{margin:0;width:14px;height:14px;cursor:pointer}.ofconf.on{color:var(--ds-ok);font-weight:600}   /* item 15: "Dyehouse confirmed" under a Dyeing date */

.card.ofl{padding:16px 16px 16px;margin-bottom:8px;display:flex;flex-direction:column;gap:8px}
.ofln{font-size:16px;font-weight:600}.oflo{font-size:14px;margin-top:-4px}
.ofrel{background:var(--ds-page);border-radius:12px;padding:12px 12px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.ofrel b{font-weight:600}.ofrel .muted{font-size:12px}
.relbar{display:block;height:6px;border-radius:8px;background:var(--ds-page);overflow:hidden;min-width:120px}.relbar i{display:block;height:100%;background:var(--ds-ok);border-radius:8px}
.relasof{display:block;font-size:12px;color:var(--amber);font-weight:600}
.ofsf{font-size:12px;font-weight:600}
.ofsaved{font-size:12px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}




.ofdate{position:relative;display:block;height:44px;border:1px solid var(--ds-edge);border-radius:12px;background:#fff}

.ofdate input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;margin:0}
.ofdate:focus-within{outline:2px solid var(--ds-info);outline-offset:2px}

.oflines{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}.oflines .card.ofl{margin:0;box-shadow:none;border:1px solid var(--ds-line)}
.ofnote{font-size:12px;margin:4px 4px 0}
/* 0.9.47.1 (split-rest.png): the rest in parts - one box per part (Part 1 · [qty] kg · Remove), "+ Split the rest", the reason line */



.ofsplit{align-self:flex-start;font-size:16px;font-weight:600;color:var(--blue)}

.ofchip.ofneed{background:#FFF4E5;color:var(--amber)}
.ofwhole b{color:var(--ink)}
/* the rep's line (picture 3) */
.lful.relline{flex-direction:column;align-items:stretch;gap:8px}
.rlwho{font-size:12px;color:var(--muted)}




.lful.relline{padding-right:16px}
/* 0.9.47.1 master list: the row states kept by the 0.9.47.2 page */
.omothers{font-size:12px;margin:8px 16px 0}
.omok{color:var(--ds-ok);font-size:12px;font-weight:600}.omerr,.omhint{font-size:12px}



/* 0.9.47.2 (owner 23 Oct): ONE date box everywhere - icon + the day over a transparent date input; a click anywhere on it opens the calendar (app.js datebox + global click handler) */
.datebox{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:120px;height:36px;padding:0 12px;border:1px solid var(--ds-edge);border-radius:8px;background:#fff;vertical-align:middle;cursor:pointer;box-sizing:border-box;font-weight:400}
.lsf .datebox{display:flex;width:100%;height:44px;padding:0 12px;border:1px solid var(--ds-edge);border-radius:12px}
.datebox .dbi{flex:none;color:var(--ds-info)}.dbv{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.lsf .dbv{font-size:16px}.dbv.ph{color:var(--ds-muted)}
.datebox input[type=date]{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;cursor:pointer;border:0!important;padding:0!important;margin:0;background:transparent}
.datebox input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.datebox:focus-within{outline:2px solid var(--ds-info);outline-offset:2px}
.datebox.off{opacity:.45;cursor:default}.datebox.off input{pointer-events:none}
/* a header-style button (white outline pill) - "Turn on alerts" on the blue Order Fulfilment header */

.ico{vertical-align:-3px;flex:none}.tag .ico{margin-right:4px}
/* 0.9.47.2 (owner 23 Oct ~23:00, of-two-views10.png / views10.html): Order Fulfilment's page - header links, bar, the two views' table, bulk bar,
   messages, the dark note, phone cards. Colours as drawn in the mock (blue #2250B0, urgent date #C2410C). */
.ofmain,.ofnote{--ofb:var(--ds-info);--ofl:var(--ds-edge);--ofm:var(--ds-muted);--ofi:#1B2230}
.ofhr{display:inline-flex;align-items:center;gap:12px;margin-right:4px;white-space:nowrap}
.ofhr .ofsapread,.ofhead .ofsapread{font-size:12px;color:#fff;opacity:.9}

.ofcard{overflow:visible;border-radius:16px}
.ofbar{display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ds-line);flex-wrap:wrap}


.offs{display:inline-flex;gap:16px 8px;flex-wrap:wrap}



.ofvt{overflow:visible}
.ofvtab{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;color:var(--ofi)}
.ofvtab th{text-align:left;font-size:12px;letter-spacing:1px;color:var(--ds-muted);font-weight:600;padding:8px 8px;border-bottom:1px solid var(--ds-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofvtab td{padding:8px 8px;border-bottom:1px solid var(--ds-line);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofvtab .ofc{text-align:center;padding-left:4px;padding-right:4px}
.ofvtab tr.ofvo td{background:var(--ds-page);font-weight:600;border-top:2px solid var(--ds-line)}
.ofvtab td.ofvor{text-align:right;font-weight:400;overflow:visible}.ofvor .omok,.ofvcr .omok{margin-right:12px}
.ofvtab td.ofstc,.ofvtab td.ofsx,.ofvtab td.ofnrc{white-space:normal}
.ofvtab td.ofsx{font-size:12px}
.ofck{width:15px;height:15px;accent-color:var(--ds-info);cursor:pointer;margin:0;vertical-align:middle}.ofck:disabled{cursor:default;opacity:.35}.ofck0{display:inline-block;width:15px}

.ofneed{font-weight:600;white-space:nowrap}.ofneed.urg{color:var(--ds-warn);font-weight:600}

.ofv .no{display:inline-block;width:28px;color:var(--ds-muted);font-weight:600}
.ofin{overflow:hidden;text-overflow:ellipsis}

.ofgrey td,.ofvcl.ofgrey{color:var(--ds-muted)}.ofgrey .no{color:var(--ds-muted)}
.ofro{color:var(--ds-muted);font-weight:400}.ofro.coral{color:var(--ds-warn)}

/* the date box inside the OF table / bulk bar: the table's height and width (views10.html); T2's general .datebox rules hold elsewhere */
.ofbulk .datebox,.ofvcl .datebox{height:34px;border:1.5px solid var(--ds-edge);width:118px;min-width:0;max-width:100%;color:#1B2230}
.ofvtab .datebox.off,.ofbulk .datebox.off,.ofvcl .datebox.off{opacity:.4}
.ofvtab .dbv,.ofbulk .dbv,.ofvcl .dbv{font-size:14px}
.ofsplit{color:var(--ds-info);font-weight:600;font-size:14px;padding:0 4px;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.ofsplit::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M5 8l-3 4 3 4M19 8l3 4-3 4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M5 8l-3 4 3 4M19 8l3 4-3 4'/%3E%3C/svg%3E") center/contain no-repeat}


.ofnr{font-size:12px}
.ofunder{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.ofvtab tr.ofmsgr td{background:var(--ds-page);white-space:normal;border-top:1px dashed var(--ds-line);padding:12px 24px 12px 8px;overflow:visible}

.ofmn{color:var(--ds-muted);font-size:12px;margin-bottom:4px;overflow-wrap:anywhere;white-space:normal}.ofmn b{color:var(--ofi)}
.oftag{background:var(--ds-info-bg);color:var(--ds-info);border-radius:8px;padding:0 8px;font-weight:600;font-size:12px;white-space:nowrap}
.ofmc{display:flex;gap:8px;align-items:center;margin-top:8px}
   /* 0.9.52 D item 9: "Requires answer from rep" under the message / reply box */
.ofabout{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--ds-edge);border-radius:8px;padding:0 4px 0 8px;font-size:12px;white-space:nowrap;height:36px;background:#fff;box-sizing:border-box;flex:0 1 auto;min-width:0}
.ofabout select{border:0;font:inherit;font-weight:600;font-size:12px;background:transparent;max-width:260px;min-width:0;color:var(--ofi);cursor:pointer}
#ofMsgIn{flex:1;min-width:0;border:1.5px solid var(--ds-info);border-radius:8px;padding:0 12px;font:inherit;font-size:14px;height:38px;box-sizing:border-box;color:var(--ofi)}

.ofbulk{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--ds-info-bg);border-bottom:1px solid var(--ds-line);font-size:14px;flex-wrap:wrap}
.ofbulk .datebox{width:150px}

.ofleg{padding:8px 16px;font-size:12px;color:var(--ds-muted);border-top:1px solid var(--ds-line)}.ofleg svg{width:14px;height:14px;color:var(--ds-info);vertical-align:-2px}.ofleg .urgtxt{color:var(--ds-warn);font-weight:600}
.ofnote{position:fixed;right:24px;bottom:92px;z-index:55;display:inline-flex;gap:8px;align-items:center;background:#1B2230;color:#fff;border-radius:8px;padding:8px 16px;font-size:14px;box-shadow:0 10px 30px var(--ds-shadow);max-width:calc(100vw - 32px)}

.omnone{margin:12px 16px}
/* 0.9.47.2 T4: By line - sortable headers (blue, arrow on the active one), the SO link, ticked rows, the resize handle (a 6-px edge, drawn as the mock's
   2-px grey bar), the message icon at the mock's 18 px */
.ofvtab th{position:relative}
.ofvtab th .ofthx{display:block;overflow:hidden;text-overflow:ellipsis}
.ofvtab th.ofsort{color:var(--ds-info);cursor:pointer;user-select:none}.ofvtab th.ofsort:hover .ofthx{text-decoration:underline}
.rh{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:2;touch-action:none}
.rh::after{content:"";position:absolute;right:2px;top:50%;width:2px;height:18px;margin-top:-9px;background:var(--ds-edge);border-radius:8px}
.rh:hover::after,.rh.on::after{background:var(--ds-info);height:100%;top:0;margin-top:0}
body.ofdragging,body.ofdragging *{cursor:col-resize!important;user-select:none!important}


.ofvtab tr.ofon td{background:var(--ds-page)}
.ofvt.ofvtx{overflow-x:auto;overflow-y:hidden}   /* By line: a narrow window or wide columns scroll inside the card, never the page (By order stays visible for Print ▾) */

.ofvtab td.ofcust{overflow:hidden;text-overflow:ellipsis;text-align:left}   /* an Arabic name: dir=rtl, so a long one keeps its first word and ellipsizes on the left */
/* 0.9.47.2 (owner 23 Oct): final review - ONE rule for the table's date box: it fills the Ready date cell (By line 136 px, By order 140 px, 4-px cell
   padding), so EVERY day fits in Outfit ("Wed, Oct 28" / "Mon, May 10" were cut at 128 px) */
.ofvtab .datebox{height:34px;border:1.5px solid var(--ds-edge);width:100%;min-width:0;max-width:132px;padding:0 8px;gap:4px;color:#1B2230}.ofvtab .dbv{font-size:14px}
.ofvtab td.ofdtc{padding-left:4px;padding-right:4px}
/* phone: the same bar (filters scroll sideways), a card per order, one stacked row per line, no column resize */
.ofvc{padding:12px 12px;margin:0 0 8px;color:var(--ofi)}
.ofvch{display:flex;gap:8px;align-items:flex-start;background:var(--ds-page);margin:-10px -12px 0;padding:12px 12px;border-bottom:2px solid var(--ds-line);font-weight:600;font-size:14px}
.ofvcw{flex:1;min-width:0;overflow-wrap:anywhere}
.ofvcr{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.ofvcl{padding:8px 0;border-top:1px solid var(--ds-line);display:flex;flex-direction:column;gap:8px;font-size:14px}
.ofvcl .ofr1{display:flex;gap:8px;align-items:center;min-width:0}.ofvcl .ofit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofvcl .ofr2,.ofvcl .ofr3,.ofvcl .ofr4{padding-left:24px}.ofvcl .ofr3{display:flex;gap:8px;align-items:flex-start}
.ofvcl .ofstc{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.ofvcl .ofdtc .datebox{width:136px}
.ofvcl .ofr4{font-size:12px}
.ofmsgc{background:var(--ds-page);margin:8px -12px -10px;padding:12px 12px;border-top:1px dashed var(--ds-line)}
.ofmsgc .ofmc{flex-wrap:wrap}.ofmsgc #ofMsgIn{flex:1 1 100%;order:3}.ofmsgc .ofabout{flex:1 1 auto}.ofmsgc .ofabout select{max-width:100%}
@media (max-width:999px){
  .ofcard{background:transparent;border:0;box-shadow:none;overflow:visible}
  .ofbar{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:12px 12px}
  .offs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;padding:8px 0}   /* 0.9.67: room for the chips' 44 px hit areas inside the sideways scroller */.offs::-webkit-scrollbar{display:none}
  
  .omothers{margin:0 4px 8px}.omnone{margin:0 0 8px}
  .ofnote{right:12px;left:12px;bottom:84px;justify-content:center}
  .ofleg{border:0;padding:4px 4px 12px}
}
/* 0.9.47.3 (owner 24 Oct, of-fix11.png PROPOSED + of-fix12.png Option A / Option 2; colours from fix11.html / fix12.html)
   1+2. the OF date box says what the date needs: blue = pick a day (the next thing to click, no hint text), coral = the ready date passed with
   "Passed · pick a new day" under it. border-box + the same height, so the row does not move. */
.datebox.need,.ofvtab .datebox.need,.ofbulk .datebox.need,.ofvcl .datebox.need{border:2px solid var(--ds-info);background:var(--ds-info-bg);box-shadow:0 0 0 3px var(--ds-focus)}
.datebox.need .dbv,.datebox.need .dbv.ph{color:var(--ds-info);font-weight:600}
.datebox.due,.ofvtab .datebox.due,.ofbulk .datebox.due,.ofvcl .datebox.due{border-color:var(--ds-warn);background:var(--ds-warn-bg)}
.datebox.due .dbv{color:var(--ds-warn);font-weight:600}
.ofdsub{font-size:12px;margin-top:4px;white-space:nowrap;color:var(--ds-warn)}
/* 3. the rep's line: ONE coloured line (dot + text) under the quantity; a tap shows who / when; Cancel the rest is a link under it */
.lful.relline{gap:4px;padding-bottom:12px}
.rlone{display:block;width:100%;border:0;background:none;padding:0;margin:0;font:inherit;font-size:14px;line-height:1.4;text-align:left;color:inherit;cursor:default}
button.rlone{cursor:pointer}
.rldot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:1px}
.rldot.a{background:var(--ds-warn)}.rldot.g{background:var(--ds-ok)}.rldot.r{background:var(--ds-bad)}.rldot.k{background:var(--ds-muted)}
.rlt{font-weight:600}
.rlt.a{color:var(--ds-warn)}.rlt.g{color:var(--ds-ok)}.rlt.r{color:var(--ds-bad)}.rlt.k{color:var(--ds-muted)}
.rlsep,.rlsub{color:var(--ds-muted);font-weight:400}
.relline:not(.open) .rlwhot{display:none}
.rlwhot{font-size:12px;margin-top:-2px}

/* 0.9.47.3 (decision): on a phone the 76-px indent leaves ~265 px, so "Winding · was ready Oct 20 · being updated" would wrap and the card would
   grow - there the one line starts at the badge's left edge (still right under the item and its quantity) and is 13.5 px, so it stays ONE line */
@media (max-width:480px){.lful.relline{padding-left:16px}.rlone{font-size:14px}.rlwhot,.lnkbtn.crbtn.rlcancel{font-size:12px}}
/* 0.9.47.3 review fix 1: "Update due" + "Still the same" on ONE line under the Status select (of-fix11.png PROPOSED), so every due row has the same
   height: no wrap, a 4-px gap, the chip 11.5px / 1px 7px, the link 12px. Together 147.6 px in Outfit - the Status column is 170 px in both views
   (OFW) so they fit inside its 16-px padding; on the phone the status column is wider than that. */
.ofunder{flex-wrap:nowrap;gap:4px}

/* 0.9.47.4 (owner 24 Oct ~11:45, PROBLEMS "0.9.47.4", picture of-qa2.png; colours / sizes from ofqa.html)
   1+2. the order row's right side: "Download PDF ▾" (split: the default downloads, ▾ opens the menu) and the message button - one height (30 px),
   one centre line (.ofri); the message button is a 30x30 outlined square, speech bubble 16 px, the red unread count on its top-right corner */
.ofri{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px;height:30px;vertical-align:middle}



.ofdlm{position:fixed;z-index:65;width:170px;box-sizing:border-box;background:#fff;border:1px solid var(--ds-line);border-radius:8px;box-shadow:0 6px 18px var(--ds-shadow);padding:8px 0;text-align:left;font-weight:400}
/* review fix 1: position:fixed, left / top set from the ▾'s rect (ofDlOpen) - a card's overflow:hidden can never clip it; .up = opened upwards */
.ofdlm button{display:block;width:100%;border:0;background:none;text-align:left;padding:8px 16px;font:inherit;font-size:14px;font-weight:400;cursor:pointer;color:#1B2230;white-space:normal}
.ofdlm button.ofdlm1{color:var(--ds-info);font-weight:600}.ofdlm button:hover,.ofdlm button:focus-visible{background:var(--ds-page);outline:0}


.ofbadge{position:absolute;top:-7px;right:-7px;background:var(--ds-bad);color:#fff;border-radius:8px;font-size:12px;font-weight:600;padding:0 4px;line-height:16px}
.ofvtab td.ofmc0,.ofvtab td.ofvor{overflow:visible}
.ofvtab td.ofvor{white-space:nowrap}
/* 3. "To answer · N": a coral pill after All, a thin divider before it; the coral "1 to answer" badge; the coral-tinted block */
.ofvsep{display:inline-block;width:1px;height:22px;background:var(--ds-page);margin:0 4px;align-self:center;flex:0 0 auto}


.ofvtab tr.ofansr td{background:var(--ds-bad-bg);white-space:normal;overflow:visible;border-top:1px dashed var(--ds-bad);padding:12px 24px 12px 8px}

.ofansm{font-size:14px;margin-bottom:8px;color:#1B2230;overflow-wrap:anywhere;font-weight:400}.ofansm b{font-weight:600}
.ofansc{display:flex;gap:8px;align-items:center}
.ofansc .ofabout{height:auto;min-height:34px;padding:0 4px 0 8px}


.ofansq{font-size:14px;color:#1B2230}
.ofansw{background:var(--ds-bad-bg);margin:8px -12px 0;padding:12px 12px;border-top:1px dashed var(--ds-bad)}
.ofansw:last-child{margin-bottom:-10px;border-radius:0 0 12px 12px}
.ofansw .ofansc{flex-wrap:wrap}.ofansw .ofabout{flex:1 1 100%}.ofansw .ofabout select{max-width:100%}   /* phone: About, the reply box, then Send + No reply needed */
@media (max-width:999px){.ofvcr .ofri{gap:8px}}
/* F-F ui-24 (Release B, owner P17, picture fyi1.png part 1): FOR YOUR INFORMATION on the sales director's home; Admin > Returned orders */
.fyicard{padding:0}
.fyirow{position:relative;background:var(--card)}
.fyirow+.fyirow{border-top:1px solid var(--ds-line)}
.fyirow .wrow,.fyirow .wrow:first-child,.fyirow .wrow:last-child{padding:12px 40px 12px 16px;border-top:0}
.fyirow .wx{display:flex;flex-direction:column;gap:8px}
.fyi-open{position:absolute;inset:0;width:100%;min-height:44px;margin:0;padding:0 16px 0 0;border:0;background:transparent;display:flex;align-items:center;justify-content:flex-end}
.fyi-q{display:block;padding:8px 12px;border-radius:8px;background:var(--ds-page);font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.fyi-f{font-size:14px}.fyi-f b{color:var(--blue);font-weight:600}
.fyi-c{color:var(--muted);font-size:22px;line-height:1}
.fxcard{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.fxlab{font-size:14px;font-weight:600}
.btn.fxb{min-height:44px}
.fxsel{min-height:44px;width:100%;border:1.5px solid var(--ds-edge);border-radius:12px;background:#fff;padding:0 12px;font-size:16px}
/* the switched-off line ("<typer> is switched off, so you correct it. Seif is told."): the new token reads 5.5:1 on white (--coral-d reads 4.0:1); the returned card's buttons reach 44 px */
:root{--coral-aa:#BA3F0B}
.rtbanner .rtoff,.arcard .aroff{color:var(--ds-bad)}
/* FX-1 (coordinator ruling 26 Oct): every coral section heading reads >= 4.5:1 - an h2.sec in coral (class "coral", or the inline --coral-d of
   NEEDS YOU / TO APPROVE / TO RELEASE / FIX IN SAP / NEEDS FIXING / ACTION REQUIRED ...) takes the existing AA coral token --coral-aa (4.74:1 on the
   page ground, 5.5:1 on white; --coral-d is 3.45:1 on the ground). One rule for all of them; no token changes (G-UI-15). */
h2.sec.coral,h2.sec[style*="--coral-d"]{color:var(--ds-warn)!important}
h2.sec[style*="--coral-aa"]{color:var(--ds-warn)!important}   /* 0.9.67: no coral - the Action required / Escalated headings drawn with an inline coral are the warning tone */

/* end F-F ui-24 */

/* ==== Release B (v0.9.49) reserved sections: each lane appends its rules inside its own section only (Phase 6 plan, File structure) ==== */
/* SC-1 warn */
/* S7 UI-17 (warn1.png): card edge 4 px in the worst level's colour; round icon; bold title (red / amber / blue / ink); one grey plain line */
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
section.warn{margin:0;min-width:0}
section.warn .wh{margin:0 4px 8px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.wbox{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:16px;box-shadow:0 1px 2px var(--ds-shadow);padding:12px 16px}
section.warn[data-level=red] .wbox{border-left-color:var(--ret)}
section.warn[data-level=amber] .wbox{border-left-color:var(--ds-warn)}
section.warn[data-level=info-blue] .wbox{border-left-color:var(--blue)}
.wrow{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:start;padding:8px 0;border-top:1px solid var(--ds-line);color:var(--ink)}
.wrow:first-child{border-top:0;padding-top:4px}.wrow:last-child{padding-bottom:4px}
.wic{grid-row:1/span 2;width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;line-height:1;margin-top:0;background:var(--ds-page);color:var(--muted)}
.wrow .wt{grid-column:2;font-size:16px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.wrow .wl{grid-column:2;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.35;overflow-wrap:anywhere}
.wrow .wx{grid-column:2;min-width:0;margin-top:4px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.wrow[data-level=red] .wic{background:var(--b90-bg);color:var(--ret)}
.wrow[data-level=amber] .wic{background:var(--b3160-bg);color:var(--ds-warn)}
.wrow[data-level=info-blue] .wic{background:var(--tint);color:var(--blue)}
.wrow[data-level=red] .wt{color:var(--ret)}
.wrow[data-level=amber] .wt{color:var(--ds-warn)}
.wrow[data-level=info-blue] .wt{color:var(--blue)}

/* SC-2 sheet */
/* S7 SC-2 (apconf.png parts 1 + 1b, retconf.png, roles2.png part 2): one sheet for every confirmation. Shared parts (also today's ask sheets,
   their inline styles moved here unchanged): title heading, list, who box, note line, button row. sh2 = the runtime sheet: a bottom sheet on
   the phone, a centred dialog from 760 px, two equal buttons; tone sets the confirm colour (SC-6 tokens), who-* the who box. */
h2.cs-h{margin:0 0 12px;line-height:1.25;overflow-wrap:anywhere}h2.cs-h:focus{outline:none}h2.cs-h:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
.cs-list{margin-top:8px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.cs-who{margin-top:8px;padding:12px 12px;border-radius:12px;background:var(--tint);color:var(--blue);font-weight:600;font-size:14px;overflow-wrap:anywhere}
:root{--ok-tint:#EAF6EF}   /* SC-6 style addition: the green tint of the who box and the no-alerts line (4.7:1 with --ok) */
.who-exp{background:var(--ds-page);color:var(--muted)}.who-green{background:var(--ok-tint);color:var(--ds-ok)}.who-red{background:var(--ds-bad-bg);color:var(--ret)}
.cs-note{margin-top:8px}.cs-btns{margin-top:12px}
.cs-r b{min-width:0;overflow-wrap:anywhere}
.sheet.sh2{padding:20px 20px calc(22px + env(safe-area-inset-bottom))}
.shal{display:flex;flex-direction:column;gap:8px;margin:0 0 4px}
.shok{padding:8px 12px;border-radius:8px;background:var(--ok-tint);color:var(--ds-ok);font-size:14px;font-weight:600}
.sh2 .cs-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:nowrap}
.sh2 .cs-btns .btn{flex:1 1 0;min-width:0;min-height:48px;border-radius:12px;font-size:16px;padding:0 12px}


@media (min-width:760px){.sheetbg.sh2bg{align-items:center;padding:16px}.sheetbg.sh2bg .sheet{border-radius:24px;max-width:480px;box-shadow:0 12px 40px var(--ds-shadow);animation:popin .14s ease-out}}

/* SC-3 item */
/* Release B (C-1, S7 SC-3 / UI-14; appr3.png option 2, roles1.png): one card per item - 4 px blue edge (amber / red / grey from the item warning),
   number badge, the SAP-code chip (L0-5's .pkchip, sized to the code here), name with line 2 under it, Qty · Price · Amount boxes (Amount white,
   outlined, right-aligned); a changed box is yellow (--chg) with the old value struck under it */
.itc{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:16px;padding:12px 16px 16px;box-shadow:0 1px 2px var(--ds-shadow);min-width:0}
.itc.itc-amber{border-left-color:var(--ds-warn)}.itc.itc-red{border-left-color:var(--ret)}.itc.itc-grey{border-left-color:var(--ds-edge)}.itc.itc-gone{border-left-color:var(--line)}
.ith{display:flex;align-items:flex-start;gap:8px;min-width:0}
.itno{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.itc .itchip{width:auto;min-width:0;max-width:110px;min-height:28px;padding:4px 8px;flex-shrink:0;font-size:14px}
.itt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;padding-top:4px}
.itn{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.itw{font-size:14px;color:var(--muted);margin-top:4px}.itw .amber{color:var(--amber)}
.itb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:8px;margin-top:8px}
.itx{min-width:0;background:var(--ds-page);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.itl{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itv{font-size:16px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}.itv.itv-l{font-size:16px}.itv.itv-xl{font-size:14px}.itnum{white-space:nowrap}   /* a quantity never breaks inside the number; its unit may go under it */.itv small{font-size:14px;font-weight:400;color:var(--muted)}
.itx small.amber{font-size:12px;font-weight:600;color:var(--amber)}
.itx.ita{background:var(--card);border:1px solid var(--line);text-align:right;align-items:flex-end}
.itx.chg{background:var(--ds-chg-bg)}.itwas{font-size:12px;color:var(--muted)}
.its{margin-top:8px}
.itc-gone .itv{color:var(--muted);text-decoration:line-through}.itgone{margin-top:8px;font-size:12px;font-weight:600;color:var(--ds-bad)}
@media (max-width:380px){.itc{padding:12px 12px 12px}.itx{padding:8px 8px}.itv{font-size:16px}.itb{gap:8px}}
/* R-2 carry 6: a long price or amount (itemCard itb-long): below 420 px Qty and Price share the first row, Amount takes the second; a money figure
   never breaks inside the number (the quantity box keeps its unit free to go under the number) */
@media (max-width:420px){.itb.itb-long{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.itb.itb-long .ita{grid-column:1/-1}}
.itb.itb-long .itv{white-space:nowrap}.itb.itb-long .itx:first-child .itv{white-space:normal}

/* SC-4 chip */
/* Release B (C-1, S7 SC-4; roles3.png part 3): "Item 10 qty 4 -> 5" - old value struck, new value bold; the lanes that place chips colour them */
.chgchip{display:inline-block;padding:4px 12px;border-radius:8px;background:var(--ds-page);color:var(--ink);font-size:14px;line-height:1.4}
.chgchip del{color:var(--muted)}.chgchip ins{text-decoration:none;font-weight:600}

/* SC-5 back */
/* S7 UI-28 (offocus_zoom.png: blue, 42 px, radius 12, padding 0 20 0 16, gap 10, chevron 9x15) and UI-30 (apback.png: white on rgba(255,255,255,.16)
   over the blue header, ~36 px visual inside a 44 px button); the own box is >= 44 px on a phone */
.bpill{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;border:0;border-radius:12px;padding:0 24px 0 16px;font-size:16px;font-weight:600;line-height:1;white-space:nowrap}
.bpill .bpch{flex:none}.bpill .bptx{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bpill-blue{min-height:42px;background:var(--blue);color:#fff}
.bpill-blue:focus-visible{outline:2px solid var(--blue);outline-offset:2px;box-shadow:inset 0 0 0 2px #fff}
.bpill-onblue{gap:8px;padding:0 12px 0 12px;background:transparent;color:#fff}
.bpill-onblue::before{content:"";position:absolute;inset:4px 0;border-radius:12px;background:var(--ds-on-glass)}
.bpill-onblue>*{position:relative}
.bpill-onblue:focus-visible{outline:2px solid transparent;outline-offset:-2px}.bpill-onblue:focus-visible::before{box-shadow:0 0 0 2px #fff}   /* the white ring hugs the visible 36 px pill; the transparent outline shows in forced colours */
[dir=rtl] .bpill .bpch{transform:scaleX(-1)}
@media (max-width:999px){.bpill-blue{min-height:44px}}

/* SC-7 stock */
.stk2{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:84px;text-align:right;font-size:14px;line-height:1.4;color:var(--muted)}
.stk2 .sl{white-space:nowrap}
@media (max-width:999px){.stk2{max-width:max(32vw,128px)}.stk2 .sl{white-space:normal}.stk2 .sq{overflow-wrap:anywhere}}   /* a 12-character figure wraps under its site word instead of squeezing the name; everyday figures stay on one line */
.stk2 .sq{font-weight:600;color:var(--ink)}
.stk2 .sq.amber{color:var(--amber)}
.stk2 .sq.z,.stk2 .sq.muted{color:var(--muted)}
.stk2 .sq.muted{font-weight:400}
.stk2 .cone{display:block;font-size:12px;color:var(--muted);white-space:normal}   /* item 25: "yellow cone 300 · white cone 80" under the polyester figure */
.cn{white-space:nowrap}.cn::first-letter{text-transform:uppercase}.stk2 .cone .cnl{display:block}
.stk2 .sa{font-size:12px;color:var(--muted);white-space:normal;margin-top:0}
.stk2 .sad{white-space:nowrap}   /* "as of Wed, Oct 21" never leaves the day alone on a line */
button.pkrow{width:100%;min-height:48px;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border:0;border-radius:12px;background:transparent;text-align:left;color:var(--ink)}
.drop button.pkrow{grid-template-columns:96px minmax(0,1fr) auto;gap:12px;padding:8px 12px}
button.pkrow.sel{background:var(--tint)}
button.pkrow.sel .pkchip{background:#fff}
@media (hover:hover){button.pkrow:hover{background:var(--tint)}button.pkrow:hover .pkchip{background:#fff}}
.pkchip{box-sizing:border-box;width:96px;min-height:32px;display:flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:8px;background:var(--tint);color:var(--blue);font-weight:600;font-size:14px;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.pkt{display:flex;flex-direction:column;min-width:0}
.pkn{font-weight:400;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.pku{font-size:12px;color:var(--muted);margin-top:0}

/* SC-8 recv */
/* S7 UI-01 option C (rep7.png, mock rep7.html): header 12 px grey, total 21 px, pill 12 px in the oldest band's colours (SC-6 tokens), 8 px split bar
   open invoices (app blue, G-UI-15) | cheques (light blue), legend 12 px, Overdue row of band chips; the pill drops under a total of 12+ characters;
   UI-02 boxes 3 columns (After full width under 340 px); desktop max 560 px. New tokens only: --rc-chq, --rc-ok-bg, --rc-box, --rc-after */
:root{--rc-chq:#B8C7EA;--rc-ok-bg:#EAF6EF;--rc-box:#F5F6F8;--rc-after:#EEF3FD;--rc-after-b:#C9D7F5}
.ag.rc{display:flex;flex-direction:column;gap:0;max-width:560px;min-width:0}
.rchd{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 8px;min-width:0}
.rcmain{min-width:0}
.rck{font-size:12px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.rck .coral{color:var(--ds-warn)}   /* the old-figures date (0.9.43 coral rule) in the darker coral: --coral-d is 4.0:1 on white, --warnbtn 5.6:1 (12 px text) */
.rc .rctot{font-size:22px;font-weight:600;line-height:1.2;color:var(--ink);letter-spacing:0;white-space:nowrap}
.rc .rctot .cur{font-size:12px;font-weight:600;color:var(--muted);margin-right:4px;letter-spacing:0;opacity:1;vertical-align:baseline}
.rc .rctot span[dir]{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}   /* not the old .agtot span label style */
.rc .rctot.green{color:var(--ds-ok)}
.rcwide .rchd{flex-direction:column;align-items:flex-start}
.rcpill{display:inline-block;border-radius:12px;padding:4px 8px;font-size:12px;font-weight:600;white-space:nowrap;flex:none}
.rcpill.rcok{background:var(--rc-ok-bg);color:var(--ds-ok)}
.rcpill[data-band="30"]{background:var(--b3160-bg);color:var(--ds-warn)}
.rcpill[data-band="60"]{background:var(--ds-warn-bg);color:var(--ds-warn)}
.rcpill[data-band="90"]{background:var(--b90-bg);color:var(--b90-fg)}
.rcbar{display:flex;height:8px;border-radius:8px;overflow:hidden;margin-top:8px;background:var(--ds-page)}
.rcbar .rcbn{background:var(--blue)}.rcbar .rcbc{background:var(--ds-info-bg)}
.rcleg{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink);margin-top:4px;line-height:1.4}
.rcleg b{font-weight:600}
.rcdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:1px}
.rcdot.rcdn{background:var(--blue)}.rcdot.rcdc{background:var(--ds-info-bg)}
.rcfrom{color:var(--ds-warn)}
.rcwh{margin-top:8px}.rcwh .wrow{padding:0}.rcwh .wrow .wt{font-size:14px;line-height:24px}
.rcod{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--ds-line)}
.rcodk{font-size:12px;color:var(--muted)}
.rcchip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;border-radius:8px;padding:4px 8px 4px;line-height:1.2;max-width:100%;min-width:0;box-sizing:border-box}
.rcbl{font-size:12px;font-weight:400;white-space:nowrap}   /* O-1: the age band, small, above the amount (the band's own token colour: 4.7:1 or better on its tint) */
.wrow .wat{display:block;font-size:12px;color:var(--muted)}   /* O-1: the "at sending: ..." history under a WHY amount */
.rcba{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.rcchip[data-band="30"]{background:var(--b3160-bg);color:var(--ds-warn)}
.rcchip[data-band="60"]{background:var(--ds-warn-bg);color:var(--ds-warn)}
.rcchip[data-band="90"]{background:var(--b90-bg);color:var(--b90-fg)}
.rcunk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);line-height:1.35}
.rcunk b{color:var(--ink);font-weight:600}
.rcq{width:28px;height:28px;border-radius:12px;background:var(--ds-page);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:600;flex:none}
.rcboxes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--ds-line)}
.rcbox{min-width:0;border-radius:12px;padding:8px 8px;background:var(--ds-page)}
.rcbk{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.rcbox b{display:block;font-size:16px;font-weight:600;margin-top:4px;overflow-wrap:anywhere}
.rcbox.rcafter{background:var(--ds-page);border:1.5px solid var(--ds-line)}
.rcbox.rcafter .rcbk{color:var(--blue);font-weight:600}.rcbox.rcafter b{font-weight:600}
@media (max-width:339px){.rcboxes{grid-template-columns:repeat(2,minmax(0,1fr))}.rcboxes .rcafter{grid-column:1/-1}}

/* F-A */
/* UI-04 (cut-urgent.png): the Urgent switch row inside Order details. The 46x28 .switch keeps its look; its hit area is padded to 44 px with ::before and the label
   is the rest of the row (>= 58 px high). The off switch gets a 1 px edge (--sw-edge, 3.7:1 on white) so its boundary is not grey on white only. */
:root{--sw-edge:#7C8595}



/* UI-05 / UI-06 / UI-07 (A-2): the two-site stock block (SC-7 .stk2) on an added line and on a Colours line sits in the product column, so it starts at the
   left edge there and takes the column's width (the picker row keeps the right-hand column of SC-7); the "short" words under it keep their size */
.plb .pl-s2 .stk2,.line .s .stk2{align-items:flex-start;text-align:left;min-width:0;max-width:none}
.plb .pl-s2 .stk2 .sl,.line .s .stk2 .sl{white-space:normal}
.stkw.coral{color:var(--ds-warn)}   /* "none at Obour": the coral token is 4.0:1 on white at 12 px; the existing --warnbtn is 5.6:1 */
/* picker row (A-2 fix round 1): the name keeps at least 96 px and only breaks inside a word that is longer than its column; the stock column gives way
   (its figures wrap, 84 px floor). When the row is too narrow for 96 + 96 + 84 px (phones under 390 px) the two stock lines go under the name instead; the chip stays 96 px. */
button.pkrow,.drop button.pkrow{grid-template-columns:96px minmax(96px,1fr) minmax(84px,auto)}
button.pkrow .pkn{overflow-wrap:break-word}
@media (max-width:389px){button.pkrow,.drop button.pkrow{grid-template-columns:96px minmax(0,1fr);row-gap:4px}button.pkrow .stk2{grid-column:2;align-items:flex-start;text-align:left;max-width:none}button.pkrow .stk2 .sl{white-space:normal}}

/* F-B */
/* UI-10 (B-2): the return reason drop-down inside a .lsf label: the existing .obox.sel box, full width, 44 px, grey while nothing is picked */

.rdlock .lsf input#rdInv{min-height:44px}

/* UI-11 (B-3, ret3.png part 3): "Add photos" - 72 px thumbnails (radius 10) on the left, the dashed red button filling the rest of the row (wraps
   under them on a narrow phone), the grey helper line; the return page shows the stored photos as the same squares */
.phrow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;min-width:0}
.phthumb{flex:none;width:72px;height:72px;border-radius:8px;border:1px solid var(--line);padding:0;margin:0;overflow:hidden;background:var(--ds-page);cursor:pointer;display:block}
.phthumb .phimg{width:100%;height:100%;object-fit:cover;display:block}
.phthumb:focus-visible,.phadd:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.phspin{position:relative;cursor:default}
.phspin::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ret);animation:phspin .9s linear infinite}
@keyframes phspin{to{transform:rotate(360deg)}}


.phview{margin:4px 0}
/* UI-08 / UI-09 (B-1, cut-red.png, ret3.png part 3): return screens in red. `.ret` (on the header, the <main> and the form's footer - never on the
   bottom nav) redefines the three blue tokens to the red ones, so chips, search-box borders, buttons and links follow without a fork. */
.ret{--blue:var(--ret);--blue-d:var(--ret-d);--tint:var(--ret-tint)}
.top-ret{--sub:var(--ds-bad-bg);box-shadow:0 10px 30px var(--ds-shadow)}
.ret input:focus-visible,.ret select:focus-visible,.ret textarea:focus-visible,.ret button:focus-visible,.ret a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.top-ret button:focus-visible,.top-ret a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.ret .btn.ghost{border-color:var(--ds-edge)}
h2.sec.ret{color:var(--ret)}
/* the New return customer row: the name block may shrink and wrap (a long Arabic name), the Change button keeps its size */
.rdcust{min-width:0}.rdcust .btn{flex-shrink:0;min-height:44px}.rdcn{min-width:0;overflow-wrap:anywhere}
.rdcust b>.ar{display:inline;max-width:none;overflow:visible;text-overflow:clip;white-space:normal}
.ret .search svg{stroke:var(--blue)}

/* F-C */
/* UI-17 (C-2, S7 UI-17, warn1.png part 3): the SC-1 card at the order-page sites (Stopped, SAP did not accept the customer, cancel check, changed since last
   sent, 409 changed while looking, the terms page read failure) takes the page margin the old .qbox / .chgwarn had; the send sheet's duplicate sits under
   the list. The note box and the button of a Stopped order are the row's extra (.wx). The old rules stay until R-2. */
section.warn.wsite{margin:8px 0}
section.warn.csdupebox{margin:8px 0 0}
section.warn.wsite .wxl{color:var(--muted)}   /* the change lines under "Changed since last sent": grey like the row's line (warn1.png part 3) */
section.warn.wsite .wx .lsf{display:block;min-width:0;margin:0 0 8px}section.warn.wsite .wx .lsf input{width:100%;min-width:0;box-sizing:border-box}
section.warn.wsite .wx .cxrow{margin-top:8px;min-width:0}section.warn.wsite .wx .cxrow .btn{min-height:44px;max-width:100%;white-space:normal;text-align:center}   /* >= 44 px on a phone, a long label wraps */

/* F-D */

/* F-E */
/* UI-25 (E-1, S7 UI-25 / P18, fyi1.png part 3): "Changed in SAP" = red flag. Row: 5 px red edge, customer + amount on top, the solid red label
   CHANGED IN SAP (white on --ret 6.57:1) and amber ESCALATED · n H, red-tint change chips (old struck --ret, new bold --ret-d), bottom line
   "SAP <id> · by <name>" + the red Approve button (44 px). The labels use F-3's .lbl / .lbl-red (F-F); .lbl-amber is here. Order page: the red SC-1 box with the same chips. */
   /* with F-3's .lbl base; .lbl-red is F-3's (F-F) */
.list-item.sapflag{display:block;border-left:5px solid var(--ret);padding:16px 16px 16px 12px;cursor:pointer;min-width:0}
.sapflag .sfh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.sapflag .sfh .hn{flex:1 1 auto;min-width:0;font-size:16px}
.sapflag .amt{flex:none;font-weight:600;font-size:16px;white-space:nowrap}
.sapflag .sflb{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sfchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;min-width:0}
.sfchips .chgchip{background:var(--ds-chg-bg);color:var(--ink);max-width:100%;overflow-wrap:anywhere}
.sfchips .chgchip del{color:var(--ret)}.sfchips .chgchip ins{color:var(--ret-d)}
.sapflag .sff{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;min-width:0}
.sapflag .sfm{min-width:0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.btn.sfgo{flex:none;min-height:44px;min-width:44px;padding:0 16px;border-radius:12px;font-size:16px}
.btn.sfgo:focus-visible{outline:2px solid var(--ret);outline-offset:2px}
section.warn.sapbox{margin:12px 0}
.sapbox .sfd{font-size:14px;color:var(--ink);margin-top:4px;overflow-wrap:anywhere}

/* F-F */
/* UI-27 (Phase 6 F-3): the Orders page - filters, quick chips, sort and the order card. Tokens are added only; every colour pair is >= 4.5:1 for text. */
:root{--ord-coral:#A13B17;--ord-bar-amber:#C26E10;--ord-track:#E3E6EB;--ord-item-amber:#FFF6E8;--ord-item-amber-ink:#7A3E00;--ord-item-red:#FEEDEC;--ord-item-red-ink:#8F1C13}



.ordq{margin:0;padding:0;border:0;border-radius:16px;box-shadow:none}
.ordq label{box-shadow:none;border-radius:16px;min-height:52px}
.ordq label:focus-within{box-shadow:inset 0 0 0 2px var(--blue)}
.lbl{display:inline-block;padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap}

.ordf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:4px 0 0}
@media (max-width:340px){.ordf{grid-template-columns:minmax(0,1fr)}}   /* a 320 px phone: one select per row, so "Last 30 days" shows whole */
.ordf .ddf{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px 4px;gap:0}
.ordf .ddf .fl{font-size:14px;margin:0}
.ordf .ddf .fbox{border:0;background:transparent;min-height:44px;padding:0}
.ordf .ddf .fbox select{font-size:16px;font-weight:600;padding-inline-end:24px}.ordf .ddf .fbox>.chev{inset-inline-end:0}   /* r3 A10: the box is the framed .ddf (12 px side padding), so the chevron sits 12 px and the value ends 36 px from its edge */
.ordcustom{margin:0}
.qchips{display:flex;flex-wrap:wrap;gap:8px}




.ordh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 4px -6px}
.ordh h2.sec{margin:0}
/* 0.9.52 D item 4: the Orders page's "Orders | Not released" switch and the Not released view (customer cards, one row per item) */
.ordviews{display:inline-flex;align-self:flex-start;border:1.5px solid var(--blue);border-radius:8px;overflow:hidden;background:#fff}
.ordviews button{border:0;background:#fff;color:var(--blue);font:inherit;font-size:14px;font-weight:600;padding:0 16px;min-height:44px;cursor:pointer}
.ordviews button+button{border-left:1.5px solid var(--blue)}.ordviews button.on{background:var(--blue);color:#fff}
.nrlist{display:flex;flex-direction:column;gap:12px}.nr-c{padding:0;overflow:hidden}
.nr-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 16px 8px;font-size:16px}.nr-h .muted{font-size:12px;white-space:nowrap}
.nr-row{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;border:0;border-top:1px solid var(--ds-line);background:#fff;padding:12px 16px;font:inherit;cursor:pointer;min-height:44px}
.nr-row:hover{background:var(--ds-page)}.nr-a{font-size:14px;overflow-wrap:anywhere}.nr-b{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:14px;align-items:center}
.nr-q{color:var(--ds-text)}.nr-st{font-weight:600}.nr-st.amber{color:var(--ds-warn)}.nr-st.red{color:var(--ds-bad)}.nr-st.grey{color:var(--ds-muted)}
.nr-eta{font-weight:600;color:#1B2230}.nr-eta.exp{color:var(--ds-warn)}.nr-eta.conf{color:var(--ds-ok)}.nr-eta.passed{color:var(--ds-warn)}.nr-eta.nodate{color:var(--ds-muted);font-weight:400}
.ordsort{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 12px;color:var(--blue);font-size:14px;font-weight:600;border-radius:8px}
.ordsort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.ordsort:focus-within{outline:2px solid var(--ds-info);outline-offset:2px}
.oclist{display:flex;flex-direction:column;gap:8px;min-width:0}
.oclist.busy{opacity:.55;pointer-events:none}
.oc{display:block;width:100%;min-height:44px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 16px;box-shadow:0 1px 2px var(--ds-shadow);color:var(--ink);font:inherit;position:relative}
.oc.chg{border-left:5px solid var(--ret)}
.oc.ocsk{height:118px;background:linear-gradient(90deg,var(--ds-page),var(--ds-page),var(--ds-page));pointer-events:none}
.oc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.oc-id{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.oc-lbls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.oc-nm{font-size:16px;font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.oc-amt{font-size:16px;font-weight:600;white-space:nowrap}
.oc-meta{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.oc-w{font-weight:600;color:var(--ink)}.oc-w.late,.oc-late{color:var(--ret);font-weight:600}
.oc-ptxt{display:block;margin-top:4px;font-size:14px;color:var(--ds-warn);overflow-wrap:anywhere}
.oc-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 8px}
.oc-bar i{display:block;height:6px;border-radius:999px;background:var(--ds-page)}
.oc-bar i.done{background:var(--ds-ok)}.oc-bar i.blue{background:var(--blue)}.oc-bar i.amber{background:var(--ds-warn)}
.oc-stage{display:flex;justify-content:space-between;align-items:baseline;gap:8px}

.oc-r{flex:none;font-size:14px;color:var(--muted);white-space:nowrap}
.oc-asof{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.oc-items{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.oi{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px;border-radius:12px;background:var(--ds-warn-bg);color:var(--ds-warn);font-size:14px}
.oi.red{background:var(--ds-bad-bg);color:var(--ord-item-red-ink)}
.oit{min-width:0;overflow-wrap:anywhere}.ois{white-space:nowrap}
.oid{flex:none;font-weight:600;white-space:nowrap}
@media (min-width:1000px){.oclist,.qchips{max-width:760px}.ordcustom{max-width:520px}}

/* F-G */
/* UI-28 homes (Task G-2): rows under an order's header in the master (O-1 red cancellation row, O-2 / O-4 / O-6 grey lines, O-3 amber
   warehouse row), the focused order's facts line, the stop text on its lines, the plain Delivered today / Returns lists, the OQ-04 notice */
.ofx{display:flex;flex-direction:column;gap:8px;min-width:0;padding:4px 0 8px}
.ofxr>td{padding-top:0}.ofvtab td.ofxc{min-width:0;white-space:normal;overflow:visible}
.ofvc>.ofx{padding:0 12px 12px}
.ofhd2{white-space:normal;margin-top:4px;font-size:12px;font-weight:400;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}

.ofcx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 12px;background:var(--ds-bad-bg);border-left:4px solid var(--ret);border-radius:0 12px 12px 0;color:var(--ink);font-size:14px;line-height:1.35}
.ofcxt{min-width:0;overflow-wrap:anywhere}.ofcxt b{color:var(--ret);font-weight:600}

.ofcxs{grid-column:1/-1;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.ofwh{padding:8px 12px;border-left:4px solid var(--ds-warn);border-radius:0 12px 12px 0;background:#fff}
.ofwh .wrow{padding:0;border-top:0}
.ofwhm,.ofwhs{font-size:12px;color:var(--muted);margin-bottom:4px;overflow-wrap:anywhere}
.ofwhl{max-width:420px}.ofwhb{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ofx>.wrow{padding:8px 12px;border-top:0}
.ofplain{min-width:0;display:flex;flex-direction:column}

.ofrethint{margin:8px 4px;font-size:14px}
/* 0.9.52 D item 23: Returns beside the order list ("Orders | Returns · N") and its rows (products with quantities, site, approved, days waiting) */


.ofret{align-items:flex-start;gap:12px}.ofretm{min-width:0;display:flex;flex-direction:column;gap:4px}
.ofretls{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;color:var(--ofi)}.ofretl{overflow-wrap:anywhere}
.ofretw{font-size:12px;color:var(--ds-muted)}.ofret.late{background:var(--ds-warn-bg)}
.ofrett{flex:none;text-align:right}

.ofdrop{margin:8px 0}.ofdrop .wx{display:flex;flex-wrap:wrap;gap:4px 12px}
/* review round 1 (kept until the owner rules): the focused order's SAP stage row and per-line stock / delivered fact; the master's Filter control */
.ofstg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:4px 12px;font-size:14px;color:var(--ink);white-space:normal}
.ofstg .ofsteps{margin:0;flex:0 0 140px;max-width:100%}
.oflfx{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--muted);white-space:normal;overflow-wrap:anywhere}
.offp{padding:0 16px}
@media (max-width:999px){.ofcx .btn,.ofwh .btn,.ofwh input{min-height:44px}.offp{padding:0}.offp select{min-height:44px}}
@media (max-width:600px){.ofcx{grid-template-columns:minmax(0,1fr)}}
/* UI-29 (Task G-3), carry from G-2 review: at 320 px Download PDF covered the 'Cancellation request' tag. A header that has a tag (cancellation request, Stop, Held in SAP) may wrap: name + tag on the first line, Download PDF and the message button below, right-aligned, when the three do not fit side by side */
.dofirst .go{color:var(--ds-bad)}   /* UI-29: 'Open ›' on the Do first banner was 3.64:1 (#D9541E on #FFF1EC); the coral tag's text colour is 6:1 */
@media (max-width:999px){.ofvch.oftg{flex-wrap:wrap}.ofvch.oftg .ofvcw{flex:1 1 136px}.ofvch.oftg .ofvcr{margin-left:auto}}
/* O-2 (owner 26 Oct): the Order Fulfilment master visually clean, laptop first. Same functions, facts, controls and focus order (G-2 homes);
   only the look: the order head leads with customer + SO, the facts are one muted line of separate items (their own tinted row on the laptop),
   the SAP stage bar sits in a fixed column, the warnings are compact SC-1 rows, the Filter panel is one short row, the pickers fill their
   columns; on the phone every control is a 44 px target and the head's buttons go under the name. Tokens added (SC-6): --ofg greyed text
   (#646B78, 5.4:1 on white; was #9AA1AD 2.6:1), --ofm2 muted text on the tinted head (#5B6472). */
.ofmain,.ofnote{--ofg:var(--ds-muted);--ofm2:var(--ds-muted)}
.ofgrey td,.ofvcl.ofgrey,.ofgrey .no,.ofro{color:var(--ds-muted)}
.ofro.coral{color:var(--ds-warn)}

.ofvtab .datebox.off,.ofbulk .datebox.off,.ofvcl .datebox.off{opacity:1;background:var(--ds-page);border-style:dashed;border-color:var(--ds-edge);color:var(--ds-muted)}
.ofmain .datebox.off .dbv,.ofmain .datebox.off .dbv.ph,.ofmain .datebox.off .dbi{color:var(--ds-muted)}
/* the order head: customer and SO first and strongest; rep · needed <day> after them, muted; the facts as separate items */
.ofvoh .ofcu,.ofvoh .lnkbtn.ofsolink,.ofvoh .ofsotx,.ofvch .ofcu,.ofvch .lnkbtn.ofsolink,.ofvch .ofsotx{font-size:16px;font-weight:600}

.ofhd2{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px;font-size:12px;color:var(--ds-muted)}
.ofhd2 .offt{white-space:nowrap}
/* the SAP stage row: stage name, "Next in SAP: ...", the 5-step bar */
.ofstg{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:4px 12px;padding:0;font-size:14px}
.ofstgn{font-weight:600}.ofstgx{min-width:0;color:var(--ds-muted);overflow-wrap:anywhere}
.ofstg .ofstgx{grid-column:1/-1;grid-row:2}
.ofstg .ofsteps{flex:none;width:120px;max-width:100%;justify-self:end}
/* SC-1 look for the cancellation row and the Do first banner (their markup and words are G-3's, unchanged): round icon, 4 px red edge */
/* the level's colours come from the SC-1 tokens warnRow / warnBox use (red: --ret / --b90-bg; amber: --amber-edge / --b3160-bg / --b3160-fg;
   information: --muted / --div), through --sc1-* on the element - a change of the SC-1 colours follows here too */
.ofcx,.dofirst{--sc1-edge:var(--ds-bad);--sc1-icbg:var(--ds-bad-bg);--sc1-ic:var(--ds-bad);--sc1-t:var(--ds-bad)}
.dofirst[data-level=amber]{--sc1-edge:var(--ds-warn);--sc1-icbg:var(--ds-warn-bg);--sc1-ic:var(--ds-warn);--sc1-t:var(--ds-warn)}
.dofirst.info{--sc1-edge:var(--ds-muted);--sc1-icbg:var(--ds-page);--sc1-ic:var(--ds-muted);--sc1-t:var(--ds-text)}
.ofcx{grid-template-columns:24px minmax(0,1fr) auto;column-gap:8px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--sc1-edge);border-radius:12px;padding:12px 12px}
.ofcx::before{content:"!" / "";grid-column:1;grid-row:1;align-self:start;width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;line-height:1;background:var(--sc1-icbg);color:var(--sc1-ic)}
.ofcxt b{color:var(--sc1-t)}
.ofcxt{grid-column:2;grid-row:1}.ofcxs{grid-column:2/-1}
.dofirst{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--sc1-edge);border-radius:12px;padding:12px 16px;gap:8px;color:var(--ink);box-shadow:0 1px 2px var(--ds-shadow)}
.dofirst::before{content:"!" / "";flex:none;width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;line-height:1;background:var(--sc1-icbg);color:var(--sc1-ic)}
.dofirst b{color:var(--sc1-t)}.dofirst .go{color:var(--sc1-t)}
.dofirst.info{color:var(--ink)}.dofirst.info::before{content:"i" / ""}
@media (min-width:1000px){
  .ofbar{gap:8px;padding:12px 16px}
  
  .offp{padding:12px 16px 12px;border-bottom:1px solid var(--ds-line);background:var(--ds-page)}
  .offp .ddrow{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0;align-items:center}
  .offp .ddf{flex:0 1 260px;flex-direction:row;align-items:center;gap:8px}
  .offp .ddf .fl{font-size:14px;white-space:nowrap}
  .offp .ddf .fbox{flex:1 1 auto;min-width:0;min-height:36px;border-radius:8px;padding-inline:12px 0}
  .offp .ddf .fbox select{font-size:14px}
  .ofvtab tr.ofvo td{padding-top:12px;padding-bottom:12px;border-top:1px solid var(--ds-line)}
  .ofvtab tr.ofvo.ofvo2 td{padding-bottom:4px;border-bottom:0}   /* the head row followed by its facts row (no :has - Review Focus 1 speed) */
  .ofvtab td.ofvoh{font-size:16px}
  .ofvoh .ofneed{font-size:14px}
  .ofvtab tr.ofvf td{background:var(--ds-page);padding-top:0;padding-bottom:12px;white-space:normal;overflow:visible}
  .ofvf .ofhd2{margin:0}
  .ofhd2 .offt+.offt{margin-left:8px;padding-left:12px;border-left:1px solid var(--ds-edge)}
  
  .ofstg{display:grid;grid-template-columns:max-content minmax(0,1fr) 150px;row-gap:0}
  .ofstg .ofstgx{grid-column:2;grid-row:1}
  .ofstg .ofsteps{width:150px}
  .ofx>.wrow{grid-template-columns:20px max-content minmax(0,1fr);align-items:center;padding:4px 0}
  .ofx>.wrow .wic{grid-row:1;width:20px;height:20px;font-size:12px;margin:0}
  .ofx>.wrow .wt{grid-column:2;font-size:14px}
  .ofx>.wrow .wl{grid-column:3;margin:0 0 0 8px}
  .ofx>.wrow .wx{grid-column:2/-1}
}
@media (max-width:999px){
  
  
  .ofvcl .datebox,.ofbulk .datebox{height:44px}
  .ofri,.ofdl{height:44px}
  
  
  
  #ofMsgIn,.ofansin,.ofabout,.ofqty{min-height:44px}
  .ofconf,.askbox.ofask{min-height:44px;margin-top:0;padding-left:16px;margin-left:-15px;box-sizing:border-box}   /* 0.9.52 D items 15 / 9: the tick's label is its 44 px target */
  .ofck{-webkit-appearance:none;appearance:none;flex:none;width:44px;height:44px;margin:-12px;border-radius:12px;cursor:pointer;opacity:1;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='5' fill='white' stroke='%2365676B' stroke-width='1.6'/%3E%3C/svg%3E") center/20px 20px no-repeat}
  .ofck:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='5' fill='%232250B0' stroke='%232250B0' stroke-width='1.6'/%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .ofck:disabled{opacity:1;cursor:default;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='5' fill='%23F3F4F6' stroke='%23D5DAE1' stroke-width='1.6'/%3E%3C/svg%3E")}
  .ofck:focus-visible{outline:2px solid var(--ds-info);outline-offset:-10px}
  .ofck0{width:20px}
  .ofvcl{gap:4px}
  .ofvcl .ofr1{gap:12px}
  .ofvcl .ofr2,.ofvcl .ofr3,.ofvcl .ofr4{padding-left:34px}
  .ofvch{flex-wrap:wrap;align-items:flex-start;gap:12px;padding-top:16px}   /* 14 px: the SO link's 44 px tap area stays inside the card */
  .ofvch .ofvcw{flex:1 1 220px}
  
  .ofvch .ofvcr{margin-left:auto}
  .ofhd2{column-gap:12px;margin-top:4px}
  .ofhd2 .offt{white-space:normal;overflow-wrap:anywhere;min-width:0}
  .ofcx{grid-template-columns:24px minmax(0,1fr)}
  .ofx>.wrow .wt{font-size:14px}
  .ofleg{color:var(--ds-muted)}.ofleg .urgtxt{color:var(--ds-warn)}
     /* By line head: "· <rep>" wraps as one piece - no dot left dangling at a line end */
  
}

/* ==== Release B approve page (Task C-1): one section per slot of apPage, each edited only by the slot's owner (Phase 6 plan Lane C) ==== */
/* ap:apPage */

/* ap:apHeader */
/* S7 UI-30 (apback.png): the white-on-blue pill top left (SC-5, backPill), the page name small under it, then the customer */
.aprow .bpill{margin-left:8px;min-width:0}.aprow .apsp{flex-grow:1}
.aprow+.label{position:relative;margin:8px 0 0 12px;font-size:12px}

/* ap:apRecv */

/* ap:apSteps */
.apstk{margin:0}

/* ap:apWhy */
/* S7 UI-21: #whyCard = h2.sec + the SC-1 box (warnBox, info-blue rows); no rule of its own - it sits in the page like ORDER DETAILS and ITEMS */

/* ap:apCheckBox */
/* S7 UI-18 (warn1.png part 1): the SC-1 card (warnBox) under the receivables card (rc4's coral paragraph box is gone) */
.apchk{min-width:0}

/* ap:apDetails */
/* S7 UI-13 (appr2.png): 3 equal columns with dividers, one line each (ellipsis + title); 2 + 1 at 340 px and below; the note full width */
.apdets{min-width:0}.apdcard{padding:0}
.apdet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.apdc{min-width:0;padding:12px 12px 12px 12px;border-left:1px solid var(--ds-line)}.apdc:first-child{border-left:0}
.apdet dt{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apdet dd{margin:4px 0 0;font-size:16px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apdet dd small{display:block;font-size:12px;font-weight:600;white-space:normal;overflow-wrap:anywhere}   /* the amber "usual <term>" note may take a second line, never cut */.apdet dd small.apsub{font-weight:400;color:var(--muted)}
.apdc.chg{background:var(--ds-chg-bg)}
.apdn{grid-column:1/-1;padding:12px 16px 12px;border-top:1px solid var(--ds-line)}.apdn dd{white-space:normal;font-weight:400;font-size:14px;overflow-wrap:anywhere}
.apsu{font-size:12px;margin:4px 4px 0}
@media (max-width:340px){.apdet{grid-template-columns:repeat(2,minmax(0,1fr))}.apdc:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--ds-line)}}

/* ap:apItems */
/* S7 UI-14: "ITEMS · n" left, "EGP" right; 10 px between the item cards */
.apitems{min-width:0}.apsec{display:flex;justify-content:space-between;gap:12px}
.itlist{display:flex;flex-direction:column;gap:8px}

/* ap:apItemWarn */
/* S7 UI-19 (warn1.png part 2, roles1.png): the strip under the item boxes (amber / red / grey tint, bold title, chips), the amber / red number badge
   (edge colour: amber #D9822B, 3:1 on white, --amber-edge), the amber Price box with "<n>% below usual <price>" (:has - a browser without it keeps the amber text) */
.itc-amber .itno{background:var(--b3160-bg);color:var(--ds-warn)}.itc-red .itno{background:var(--b90-bg);color:var(--b90-fg)}
.istrip{border-radius:12px;padding:12px 12px;background:var(--b3160-bg);min-width:0}
.istrip[data-level=red]{background:var(--ds-bad-bg)}.istrip[data-level=grey]{background:var(--ds-page)}
.ist{display:block;font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;color:var(--amber)}
.istrip[data-level=red] .ist{color:var(--ret)}.istrip[data-level=grey] .ist{color:var(--muted)}
.ichips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ichip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 4px;min-height:28px;max-width:100%;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;line-height:1.25;overflow-wrap:anywhere;color:var(--muted)}
.ichip b{font-weight:600}
.ichip.amber{color:var(--amber);border-color:var(--ds-warn)}.ichip.green{color:var(--green);border-color:var(--ds-ok)}.ichip.red{color:var(--ret);border-color:var(--ds-bad)}
.isa{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.itx:has(.itbelow){background:var(--b3160-bg);box-shadow:inset 0 0 0 1px var(--ds-warn)}

/* ap:apTotal */
/* S7 UI-15: the dark total bar, white text on --ink2 (#1B2230, about 15:1) */
.aptot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;background:var(--ink2);color:#fff;border-radius:16px;padding:16px 16px}
.aptl{font-size:14px;font-weight:600;letter-spacing:.1em}.aptv{margin-left:auto;font-size:22px;font-weight:600;white-space:nowrap}

/* ap:apActions */

/* ap:apConflict */

/* ap:apCheckChanges */
/* S7 UI-23: the amber SC-1 card; the new value is a --chg yellow mark, the old one struck in grey; the grey "you entered this order" box above the footer */
.apck{min-width:0}
.apck del{color:var(--muted);text-decoration:line-through}
.apck ins{text-decoration:none;font-weight:600;background:var(--ds-chg-bg);color:var(--ink);border-radius:8px;padding:0 4px}
.apnochk{padding:0 16px 12px}.apnochk .wrow{padding:4px 0}

/* ap:apCheckDetails */
/* S7 UI-23: 2 rows x 3 (dividers between the cells), 3 rows x 2 below 360 px; a changed cell is yellow with the old value struck under it */
.apdet.apck2 .apdc:nth-child(3n+1){border-left:0}.apdet.apck2 .apdc:nth-child(n+4){border-top:1px solid var(--ds-line)}
.apdet.apck2 .apdc.chg{background:var(--ds-chg-bg)}
.apdet.apck2 dd{white-space:normal;overflow-wrap:anywhere}   /* the coordinator must read the whole sales unit / name: two lines, never cut */
.apdet dd small.apwas{font-weight:400;color:var(--muted)}.apdet dd small.apwas del{text-decoration:line-through}
@media (max-width:359px){.apdet.apck2{grid-template-columns:repeat(2,minmax(0,1fr))}.apdet.apck2 .apdc,.apdet.apck2 .apdc:nth-child(3){grid-column:auto;border-left:1px solid var(--ds-line);border-top:0}.apdet.apck2 .apdc:nth-child(odd){border-left:0}.apdet.apck2 .apdc:nth-child(n+3){border-top:1px solid var(--ds-line)}}

/* ap:apDecideRecv */
/* S7 UI-26: the receivables card of the DECIDE page = SC-8 with "+ This change" / "= After this change" (the boxes keep SC-8's own look) */
.incard .rc[data-mode=decide] .rcboxes{margin-top:12px}

/* ap:apDecideCard */
/* S7 UI-26 / UI-25 (roles3 part 3): "CHANGED IN SAP AFTER APPROVAL" in red over the red SC-1 card; the row title is the solid label (white on --ret
   6.57:1; an edit: amber label --b3160-fg on --b3160-bg); chips wrap (UI-25 .sfchips) */
.apdecs{min-width:0}h2.sec.apdech{color:var(--ret)}
.apdec .wrow .wt{justify-self:start;display:inline-block;padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.2;max-width:100%}   /* the label texts are capitals already; a name keeps its own case */
.apdec .wrow[data-level=red] .wt{background:var(--ret);color:#fff}
.apdec .wrow[data-level=amber] .wt{background:var(--b3160-bg);color:var(--ds-warn)}
.apdec .wrow .wl{margin-top:4px;font-size:14px}
.apdec .sfd{font-size:14px;color:var(--ink);margin-top:4px}

/* ap:apDecideActions */
/* S7 UI-26 footer (roles3 part 3): Put SAP back (ghost) + Accept change (green), two equal columns on one line, 48 px buttons; the state rows above it */
.apdacts{display:flex;flex-direction:column;gap:8px;min-width:0}
.apdacts>section.warn,.apdacts>.sdcap,.apdacts>.qbox{margin:0 16px}
.foot.apdfoot{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.foot.apdfoot .btn{min-height:48px;white-space:nowrap;padding-left:8px;padding-right:8px}
.foot.apdfoot .btn:disabled{opacity:.55}

/* ap:viewApproved */
/* S7 UI-20 (apdone.png, roles2.png parts 1 + 3): the done page. Green hero (gradient #1F7A5A -> #2A9470, the light end behind the overlapping
   card so the white text keeps >= 4.5:1 on #1F7A5A), WHAT HAPPENS NEXT as an ordered list (done = green check, now = blue ring, later = grey
   ring), the next card with a full-width "Open next order ›" (>= 48 px); a centred 560 px column on the laptop */
:root{--ok-hi:#2A9470;--ok-line:#B9DCCB;--ring:#8A8F98}   /* C-6: done page tokens (SC-6: added, none changed) */

.apdtop .label:focus-visible,.apdh:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}.apdtop .label:focus,.apdh:focus{outline-offset:4px}



.apdmain{gap:12px}
.apdcard{padding:16px 16px}

.steps2{list-style:none;margin:0;padding:0}
.s2{position:relative;display:flex;gap:12px;padding:0 0 16px}.s2:last-child{padding-bottom:0}
.s2:not(:last-child)::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--ds-ok)}
.s2i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:14px;font-weight:600;line-height:1}
.s2.done .s2i{background:var(--ds-ok);color:#fff}
.s2.now .s2i{background:#fff;box-shadow:inset 0 0 0 2.5px var(--blue),inset 0 0 0 7px #fff,inset 0 0 0 14px var(--blue)}
.s2.todo .s2i{background:#fff;box-shadow:inset 0 0 0 2px var(--ds-edge)}
.s2x{display:flex;flex-direction:column;min-width:0;padding-top:4px}
.s2x b{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.s2.now b{color:var(--blue)}.s2.todo b{color:var(--muted);font-weight:400}
.s2s{margin-top:4px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}

.apnxb{width:100%;min-height:48px}

.apdlink{display:block;margin:4px auto 0;min-height:44px;padding:0 16px;font-size:16px;font-weight:600}
.apdwarn{margin:0}
@media (min-width:1000px){.apdmain>*,.apdhero{width:100%;max-width:560px;margin-left:auto;margin-right:auto}.apdtop .row{max-width:560px;margin:0 auto}}

/* ap:apDecideHead */

/* ap:apDecideSteps */
/* S7 UI-26: "You or <name> decide" bold in --ret (6.57:1 on the page ground), the wait / escalation muted */
.lnote.apdsteps{color:var(--muted);opacity:1}.apdsteps .apdwho{color:var(--ret);font-weight:600}

/* ap:apCheckItemOpts */
/* S7 UI-23: the plain stock line under the item name; a changed Qty / Price box is yellow with a fine edge (old value struck inside it, .itwas) */
.itw .itstk{color:var(--muted)}
.itx.chg{background:var(--ds-chg-bg);box-shadow:inset 0 0 0 1.5px var(--ds-chg)}

/* ap:apDecideLines */

/* ap:apDecideItemOpts */
/* S7 UI-26: a changed item = red card edge; its changed Qty / Price boxes red-tint (not the check page's yellow), the old value struck under in red */
.itc[data-mode=decide] .itx.chg{background:var(--ds-chg-bg);box-shadow:inset 0 0 0 1px var(--ds-chg)}
.itc[data-mode=decide] .itx.chg .itwas{color:var(--ret-d)}

/* ap:apDecideTotalOld */
/* S7 UI-15 / UI-26: the old total struck before the new one, on the dark bar (#C9CED8 on --ink2 about 10:1) */
.aptold{margin-left:auto;font-size:16px;color:var(--ds-muted);white-space:nowrap}.aptold+.aptv{margin-left:8px}
/* the old delivery date / payment term struck under the new value in ORDER DETAILS (apDecideDetailWas) */
.apdet dd s.apdwas{display:block;font-size:12px;font-weight:400;color:var(--muted)}

/* UI-28 (Task G-1): the one Back above the focused order's card (blue pill = SC-5), and the order number as plain text while focused */
.ofbackrow{margin:0 0 12px}
.ofsotx{font-weight:600}.ofsotx:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
/* batch G 0.9.55 (item 5: Close order; item 11: "Release in SAP", read-only) */

.clcard .clhead{display:flex;align-items:center;justify-content:space-between;gap:8px}.clcard .clstep{display:flex;gap:8px;align-items:flex-start;font-size:14px}.clcard .clst{display:flex;flex-direction:column;min-width:0}.clcard .clsub{font-size:12px}.clcard .clic{display:flex;flex:none}.clcard .clstep.done .clic{color:var(--green)}.clcard .clstep.wait .clic{color:var(--amber)}.clcard .clstep.next{color:var(--muted)}.clcard .clstep.next .clic{color:var(--muted)}.clcard .cldet{border-top:1px solid var(--line);padding-top:8px}
.relsap{margin-top:4px}
/* batch H 0.9.56 (item 11): Release to warehouse */
.relapp{margin-top:4px}.relgo{margin-top:4px}

/* 0.9.51 C item 27 (owner 31 Oct): the quantity box hid the last zero of 1000 (and with a long unit like "cone / carton" the digits had 0 px).
   The digits now have their own minimum width (6 digits in the quantity box, 8 characters like 12345.50 in the price box, measured in the box's own font);
   the unit word shrinks and ends in "…" before it may squeeze them. On a phone (up to 520 px) the product line is one block: the name on top, the
   quantity / price boxes in full width under it; wider screens keep product left, numbers right, with a wider right column. */
.plb{grid-template-columns:minmax(0,1fr) 264px}
.plb-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.plb .fi{gap:4px;padding:0 8px;min-width:0}
.plb .fi input{flex:1 1 0;width:0}
.plb .fx:first-child .fi input{min-width:6ch}.plb .fx:last-child .fi input{min-width:8ch}
.plb .fi em{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){
  .plb{grid-template-columns:minmax(0,1fr)}
}

/* 0.9.51 C item 14 (owner 31 Oct): the sentence that says what is missing, above Send / Submit change; empty = nothing shown. A greyed Send is never silently dead: a tap explains. */
.fneed{padding:12px 16px 0;font-size:12px;line-height:1.35;font-weight:600;color:var(--ds-bad)}.fneed:empty{display:none}
#sendbtn[aria-disabled="true"]{cursor:pointer}

/* 0.9.51 C item 1 (owner 31 Oct): the send pop-up shows the whole order. The part between the title and the buttons scrolls; Send / Back to edit stay pinned at the bottom. */
.sheet.cs-full{display:flex;flex-direction:column;overflow:hidden;max-height:min(88vh,88dvh)}.sheetbg.mid .sheet.cs-full{max-width:480px}
.cs-full .cs-h{flex:0 0 auto}.cs-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
.cs-full .cs-btns{flex:0 0 auto;margin-top:0;padding-top:12px;border-top:1px solid var(--ds-line)}
.cs-lines{margin-top:12px}.cs-lh{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.cs-ln{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 8px;align-items:baseline;padding:8px 4px;border-top:1px solid var(--ds-line);font-size:14px}
.cs-lc{grid-row:1;font-weight:600;color:var(--blue);background:var(--tint);border-radius:8px;padding:0 8px;font-size:14px}.cs-lt{grid-row:1;grid-column:2 / 4;overflow-wrap:anywhere}
.cs-lq{grid-row:2;grid-column:1 / 3;color:var(--muted);font-size:14px;overflow-wrap:anywhere}.cs-lv{grid-row:2;grid-column:3;font-weight:600;text-align:right;white-space:nowrap}
.cs-ordnote{margin-top:12px;padding:12px 12px;border:1.5px solid var(--ds-edge);border-radius:12px;background:var(--ds-page);font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}.cs-ordnote span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.cs-total{margin-top:4px;border-bottom:0;font-size:16px}.cs-total b{font-size:16px}

/* 0.9.51 C item 20 (owner 31 Oct; Returns "Add product: name or code" showed a dark square box inside the red rounded box): the return screens drew a dark
   2 px outline round the text field itself (.ret input:focus-visible) inside the search box's own red rounded outline = a double outline. The field has no outline of its
   own now; the red rounded box is the one outline, and it gets thicker with a soft ring while the field is focused (a visible focus state). Search boxes on the return screens only. */
.ret .search input:focus,.ret .search input:focus-visible{outline:0}
.ret .search label:focus-within{box-shadow:inset 0 0 0 2.5px var(--ret),0 0 0 3px var(--ds-shadow)}
/* review NIT: forced-colours (Windows high contrast) does not draw box-shadows, so the focused box gets a real outline there; prefers-contrast: more gets one too */
@media (forced-colors:active){.ret .search label:focus-within{outline:3px solid Highlight;outline-offset:2px}}
@media (prefers-contrast:more){.ret .search label:focus-within{outline:3px solid var(--ret);outline-offset:2px}}

/* 0.9.66 (owner 2 Nov, approved visuals 6 and 7): special-colour products. --pro is the purple of the "Special" badge and the colour field (no dark theme exists in the app: one value) */
:root{--pro:#6B3FA0;--pro-tint:#F1EAFA}
.spbadge{display:inline-block;background:var(--pro-tint);color:var(--pro);font-size:12px;font-weight:600;border-radius:999px;padding:4px 8px;margin-right:4px;vertical-align:1px;white-space:nowrap}
.special-field{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;border:1px solid var(--pro);border-radius:8px;color:var(--pro);background:var(--card)}
.special-field.bad{border-color:var(--ds-bad)}
.sphint{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:var(--muted)}.sphint b{font-weight:600}
.sperr{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--ds-bad)}.sperr:empty{display:none}
.special-field .spic{display:flex;flex:none}.special-field .spin{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.special-field .splab{font-size:12px;font-weight:600;color:var(--pro)}
.special-field input{width:100%;box-sizing:border-box;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:4px 0}
.special-field:focus-within{box-shadow:0 0 0 3px var(--ds-shadow)}
/* ==== 0.9.67 items (Lane 3; Lane 1 restyles these into the shared design-system classes) ==== */
.swrow{cursor:pointer;min-height:44px}.swfor b{font-weight:600;color:var(--ink)}
.c67main{gap:16px}.c67done{display:flex;flex-direction:column;gap:12px;padding:16px}.c67prog{margin:0;font-size:16px;font-weight:600;color:var(--blue)}
.c67bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}.c67bar i{display:block;height:100%;width:40%;background:var(--blue);border-radius:999px;animation:c67slide 1.4s ease-in-out infinite}
@keyframes c67slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}@media (prefers-reduced-motion:reduce){.c67bar i{animation:none;width:60%}}

.c67so{margin:0;font-size:22px;font-weight:600}.c67f{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:8px}
.c67k{font-size:12px;color:var(--muted)}.c67v{font-size:16px;font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}.c67v.c67tot{font-size:22px}

.c67crw{display:flex}.c67crbtn{width:100%;min-height:48px}
.c67crl{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:4px}.c67crl.off{color:var(--muted)}.c67crh{display:flex;justify-content:space-between;gap:8px}
.btn.c67crgo{background:var(--ret);color:#fff;min-height:48px;font-size:16px;margin-top:8px;white-space:nowrap}

.c67need{outline:2px solid var(--ret)!important;outline-offset:2px}


.c67tiles{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}.c67kt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;color:var(--ink);text-align:left;min-height:44px;min-width:0}
.c67kt b{font-size:22px;font-weight:600;line-height:1.1;overflow-wrap:anywhere}.c67kt span{font-size:12px;color:var(--muted)}.c67kt.late{background:#FDE3E1;border-color:var(--ds-warn)}.c67kt.late b,.c67kt.late span{color:var(--ret)}.c67ktl[aria-pressed="true"]{outline:2px solid var(--blue);outline-offset:1px}

.c67srow{display:flex;gap:8px;align-items:stretch}.c67srow .ordq{flex:1 1 auto;margin:0;min-width:0}.c67filt{flex:none;min-height:48px;font-size:16px;gap:8px;padding:0 16px;white-space:nowrap}.c67filt.on{border-color:var(--blue);color:var(--blue)}
.c67na{background:#FFF4E5;border:1px solid var(--ds-warn);border-radius:12px;color:var(--amber)}.c67nah{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;background:none;border:0;padding:12px;min-height:44px;font:inherit;font-size:14px;color:inherit;text-align:left}.c67nah b{font-weight:600}.c67na.open .c67nah i{transform:rotate(180deg)}
.c67nar{display:flex;flex-direction:column;border-top:1px solid var(--ds-warn)}.c67nab{display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:1px solid var(--ds-warn);padding:0 12px;min-height:44px;font:inherit;font-size:14px;color:inherit;text-align:left}.c67nab:last-child{border-bottom:0}.c67nab.on{background:var(--ds-warn-bg);font-weight:600}.c67nab b{font-weight:600}
.c67ord .ordsort span{font-size:12px;color:var(--muted)}

.c67row .oc-stage{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.c67row .oc-n{font-size:12px;color:var(--muted)}.c67late{margin-left:auto;font-size:12px;font-weight:600;color:var(--ret)}
.c67fs .c67fsh{display:flex;justify-content:space-between;align-items:center;gap:8px}.c67fs .c67fsh .linkb{min-height:44px;font-size:14px}.c67fsk{font-size:12px;font-weight:600;color:var(--muted);margin-top:8px}.c67fsd{display:flex;flex-direction:column;gap:12px;margin:12px 0}.c67fsd .ddf{width:100%}.c67fs .cs-btns .btn{flex:1 1 0}
.line.c67line{grid-template-columns:48px minmax(0,1fr)}.line.c67line .c67lv{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}
.c67b{display:flex;flex-direction:column;gap:4px;background:var(--ground);border-radius:8px;padding:8px 12px;min-width:0}.c67b small{font-size:12px;color:var(--muted)}.c67b b{font-size:16px;font-weight:600;max-width:100%;overflow-wrap:anywhere}.c67b em{font-style:normal;font-size:12px;font-weight:400;color:var(--muted)}
.c67b.c67amt{background:var(--card);border:1px solid var(--line);text-align:right;align-items:flex-end}
/* 0.9.67 item 3: the line's values sit in the Qty · Price · Amount boxes (full row), so the production-status line under them starts at the left edge of the Qty box, on the phone and on a laptop, at one size (14 px; its small who / when line 12 px) */
.line.c67line+.lful{padding-left:14px}.line.c67line+.lful .rlone{font-size:14px}.line.c67line+.lful .rlwhot,.line.c67line+.lful .lsap{font-size:12px}
.rlone .rlt{font-size:inherit}   /* the grey "Not released" words (.rlt.k) were caught by the old 11 px ".k" label rule: every part of the line is one size */
.c67sent{margin:0;font-size:14px;color:var(--ink)}.c67sent>span:first-child{font-size:12px;color:var(--muted)}
/* ==== end 0.9.67 items ==== */
/* ==== 0.9.67 Fulfilment desktop (UI batch 0.9.67 item 8, owner-approved mock-up 2 Nov) - start ====================================
   One block so Lane 1's shared design-system classes can be mapped onto it later. Existing variables only (--blue, --ink, --muted, --line,
   --tint, --card, --ret, --ret-tint, --amber, --green). Text 22/16/14/12, weights 400/600. Desktop rows 40 px, every control in a row 28 px,
   every toolbar control 32 px / 14 px. Text is never cut: one line with an ellipsis inside fixed minimum columns; the table scrolls sideways. */
/* -- Do first (phone AND computer): white card, red border, "Do first" badge + what, SO + customer, who: why; Open beside the text -- */
.dofirst.ofdf{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--ds-bad);border-radius:12px;padding:12px 12px;margin-bottom:8px;box-shadow:none;color:var(--ink);font-size:14px;font-weight:400;line-height:20px}   /* whole pixels: the card never leaves the page below it on a half pixel */
.dofirst.ofdf::before{content:none}
.dofirst.ofdf[data-level=amber]{border-color:var(--ds-warn)}
.dofirst.ofdf .dfx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;overflow-wrap:anywhere}

   /* the SC-1 tokens, so the card matches its order's row */


.dofirst.ofdf .go{flex:none;align-self:center;margin-left:0;display:inline-flex;align-items:center;height:44px;padding:0 16px;border:1px solid var(--ds-bad);border-radius:12px;color:var(--ret);font-size:16px;font-weight:600;white-space:nowrap;background:var(--card)}
.dofirst.ofdf[data-level=amber] .go{border-color:var(--ds-warn);color:var(--ds-warn)}
@media (min-width:1000px){
  /* the computer: the Do first card on ONE line (each part ellipsizes rather than wraps), Open 32 px */
  .dofirst.ofdf{min-height:48px;padding:8px 12px}
  .dofirst.ofdf .dfx{flex-direction:row;align-items:center;gap:12px;white-space:nowrap;overflow:hidden}
  
  
  .dofirst.ofdf .go{height:32px;padding:0 16px;border-radius:8px;font-size:14px}
  /* -- the header: SAP read · Daily summary ▾ · Turn on alerts (bell icon) · the bell -- */
  .ofhr .ofdaysb{font-size:14px;font-weight:600}
  
  .ofdesk{position:relative}
  .ofdaym{position:absolute;right:16px;top:4px;z-index:66;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px var(--ds-shadow);padding:8px 0;display:flex;flex-direction:column}
  .ofdaym .ofdaymi{display:flex;align-items:center;height:40px;padding:0 16px;border:0;background:none;font:inherit;font-size:14px;font-weight:400;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap}
  .ofdaym .ofdaymi.on{color:var(--blue);font-weight:600}.ofdaym .ofdaymi:hover,.ofdaym .ofdaymi:focus-visible{background:var(--tint);outline:0}
  /* -- the toolbar: one line, every control 32 px and 14 px -- */
  .ofdbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:12px 16px;overflow-x:auto}
  
  
  
  .ofdbar .ofvsep{flex:none;width:1px;height:20px;background:#C9CDD3;margin:0 4px}
  .ofdbar .ofdsp{flex:1 1 8px;min-width:8px}
  
  
  
  .ofdfp .ofleg{padding:8px 0 0;margin:0}
  /* -- the grid: one set of columns for the order rows and the item rows -- */
  .ofdvt{overflow-x:auto;overflow-y:hidden}
  .ofdtab{font-size:14px;color:var(--ink)}
  .ofdtab th{height:28px;padding:0 8px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);text-transform:none}
  .ofdtab th .rh{opacity:0;transition:opacity .15s}.ofdtab thead:hover .rh,.ofdtab th .rh.on{opacity:1}   /* the column edges show on hover */
  .ofdtab td{height:40px;padding:0 8px;box-sizing:border-box;font-size:14px;line-height:20px}
  .ofdtab .ofc{width:32px;padding:0 4px}
  .ofdtab tr.ofvo td,.ofdtab tr.ofdo td{background:var(--tint);font-weight:400;border-top:1px solid var(--line);padding-top:0;padding-bottom:0}
  .ofdtab tr.ofdo:not(.open) td{background:var(--card)}
  .ofdtab tr.ofdo b,.ofdtab tr.ofdo .ofsolink,.ofdtab tr.ofdo .ofsotx{font-weight:600}
  .ofdtab td.ofdt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  
  .ofdtab .ofdneed.r{color:var(--ret);font-weight:600}.ofdtab .ofdneed.a{color:var(--amber);font-weight:600}.ofdtab .ofdneed.g{color:var(--green)}
  .ofdtab .ofchev{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--muted);padding:0;cursor:pointer;vertical-align:middle}
  .ofdtab .ofchev svg{width:16px;height:16px;transform:rotate(-90deg);transition:transform .15s}
  .ofdtab .ofchev[aria-expanded="true"] svg{transform:none}
  .ofdtab .ofchev:hover{background:var(--ds-press)}
  .ofdtab td.ofdac{text-align:right;overflow:visible;white-space:nowrap}
  .ofdacts{display:inline-flex;align-items:center;gap:8px;height:28px;vertical-align:middle}
  
  
  
  .ofinfom{position:fixed;z-index:65;width:300px;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px var(--ds-shadow);padding:8px 12px;text-align:left;white-space:normal;font-size:14px;font-weight:400;color:var(--ink)}
  .ofinfom .ofir{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;padding:4px 0;overflow-wrap:anywhere}
  .ofinfom .ofir .k{font-size:12px;color:var(--muted);line-height:20px}
  .ofdacts .ofdlm{font-size:14px}
  /* item rows: controls 28 px, the status / date fill their column, the Release button a fixed 92 px */
  .ofdtab tr.ofdi td{border-bottom:1px solid var(--line)}
  
  .ofdtab .datebox{width:100%;max-width:none;height:28px;border:1px solid #C9CDD3;border-radius:8px}.ofdtab .dbv{font-size:14px}
  
  .ofdtab .ofunder .lnkbtn,.ofdtab .ofunder .ofchip{font-size:12px}
  .ofdtab td.ofstc,.ofdtab td.ofdtc,.ofdtab td.ofnrc{padding-top:8px;padding-bottom:8px}
  .ofdtab .ofunder,.ofdtab .ofsx,.ofdtab .ofdsub,.ofdtab .ofconf{font-size:12px}
  
  
  .ofdtab tr.ofgrey td{color:var(--muted)}
  .ofdtab tr.ofrelr td{white-space:normal;overflow:visible;padding:4px 8px 12px;height:auto}
  .ofdtab tr.ofrelr .relsheet{max-width:640px}
  .ofdtab tr.ofansr td,.ofdtab tr.ofmsgr td,.ofdtab tr.ofxr td,.ofdtab tr.ofvf td{height:auto;padding:8px;white-space:normal;overflow:visible;background:var(--card);border-top:0}
  /* the rep's question inside the order: who · item · time, the question, About · Type a reply · No reply needed · Send */
  .ofdans{border:1px solid var(--ds-bad);border-radius:8px;padding:8px 12px;background:var(--card)}
  .ofdans .ofansm{font-size:14px;margin-bottom:4px}.ofdans .ofasker{color:var(--ret);font-weight:600}
  .ofdans .ofansx{font-size:14px;margin-bottom:8px;overflow-wrap:anywhere}
  .ofdans .ofansc{gap:8px}
  .ofdans .ofansc .ofabout{min-height:32px;height:32px;font-size:14px}
  
  
  /* Select off: By line hides its tick boxes too */
  .ofv:not(.ofselon) .ofvtab[data-view="line"] .ofck{visibility:hidden}
}
/* ==== 0.9.67 Fulfilment desktop - end ============================================================================================ */

/* ==== 0.9.67 A3: legacy classes drawn as the shared parts (C1 requests 5-7) - their markup is pinned by many tests, so the look moves here;
   the classes go when no screen draws them (phase 2 step 4) ==== */
/* 5. the header: top() draws header.top.ds-header - the shared header's box wins over the legacy .top box */
.top.ds-header{border-radius:0 0 var(--ds-r-l) var(--ds-r-l);box-shadow:none;padding:var(--ds-3) var(--ds-4)}
.top.ds-header .row{min-height:var(--ds-h-s)}
.top.signin.ds-header{border-radius:0 0 var(--ds-r-xl) var(--ds-r-xl)}
/* 6. SC-1 warning card (warnBox / warnRow) = the message box, by level: red = problem, amber = attention, info-blue / grey = info */
section.warn .wbox{border:0;border-radius:var(--ds-r-m);box-shadow:none;padding:var(--ds-3) var(--ds-4);background:var(--ds-info-bg)}
section.warn[data-level=red] .wbox{background:var(--ds-bad-bg)}section.warn[data-level=amber] .wbox{background:var(--ds-warn-bg)}
section.warn .wh{letter-spacing:0;text-transform:none}
.wrow[data-level] .wt{font-size:var(--ds-fs-m);line-height:20px}.wrow[data-level] .wl{color:var(--ds-text);line-height:20px}
section.warn .wrow .wic{background:transparent}
section.warn .wrow[data-level=red] .wic{color:var(--ds-bad)}section.warn .wrow[data-level=amber] .wic{color:var(--ds-warn)}section.warn .wrow[data-level=info-blue] .wic,section.warn .wrow[data-level=grey] .wic{color:var(--ds-info)}
section.warn .wrow[data-level=grey] .wt{color:var(--ds-text)}
/* 7. tag() / stateTag() / rowTag() / urgChip() = the status badge (24 px, 12 / 600, full radius), the colour words by meaning */
.tag.tag{display:inline-flex;align-items:center;height:24px;padding:0 var(--ds-2);border-radius:var(--ds-r-full);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b);line-height:16px;white-space:nowrap;vertical-align:middle;letter-spacing:0}
.tag.tag.green{background:var(--ds-ok-bg);color:var(--ds-ok)}
.tag.tag.grey,.tag.tag.dead{background:var(--ds-neutral-bg);color:var(--ds-neutral)}
.tag.tag.amber{background:var(--ds-warn-bg);color:var(--ds-warn)}
.tag.tag.coral{background:var(--ds-bad-bg);color:var(--ds-bad)}
.tag.tag.coral.urg{background:var(--ds-warn-bg);color:var(--ds-warn)}

/* R12 (A3-r): the field part draws its own focus (the box's 2 px blue): the global input:focus outline (and the returns screens' focus ring)
   must not add a second, square one inside it - these come after those rules and weigh more */
.ds-box input:focus,.ds-box select:focus,.ds-box textarea:focus,.ds-box input:focus-visible,.ds-box select:focus-visible,.ds-box textarea:focus-visible,
.ret .ds-box input:focus,.ret .ds-box select:focus,.ret .ds-box textarea:focus,.ret .ds-box input:focus-visible,.ret .ds-box select:focus-visible,.ret .ds-box textarea:focus-visible{outline:none}
/* nothing hides under a footer bar: what the page scrolls into view stays 16 px above the tallest bottom bar (--ds-foot, 20-ds.js dsFootPad) */
html{scroll-padding-bottom:calc(var(--ds-foot,0px) + var(--ds-4))}

/* ==== 0.9.67 after-audit fixes (d18c806 audit) ==== */
/* 1. two weights only: the browser's own bold (b, strong, headings; "bolder" inside a 600 parent = 900) is the semibold 600 */
b,strong,h1,h2,h3,h4,h5,h6,th{font-weight:var(--ds-fw-b)}
/* 2. one-offs onto the shared parts */
.rcchip{font-size:var(--ds-fs-s)}.rcpill{border-radius:var(--ds-r-full)}
.cs-lc{display:inline-flex;align-items:center;height:24px;border-radius:var(--ds-r-full);font-size:var(--ds-fs-s);font-weight:var(--ds-fw-b)}
.swtog{width:48px;height:28px;background:var(--ds-edge)}.swtog::after{top:4px;left:4px}.swbadge.on .swtog{background:var(--ds-info)}.swbadge.on .swtog::after{left:24px}
.sheet.sh2{padding:var(--ds-2) var(--ds-4) calc(var(--ds-5) + env(safe-area-inset-bottom));border-radius:var(--ds-r-xl) var(--ds-r-xl) 0 0}
.ds-row input[type=checkbox],.csurg input,.search .label input{margin:0;padding:0}
.fxsel{min-height:var(--ds-h-l)}
/* 3. the Danger outline keeps its red outline everywhere (the old .aplink .cxbtn text-link rule took it off on the Check page) */
.aplink .ds-btn.ds-danger-o{border:1px solid var(--ds-bad);background:var(--ds-card);width:auto}
/* 5. Fulfilment header at phone width: the header links have their 8 px gap and wrap; "Turn on alerts" goes to its own line so the title fits */
.ofhlks{display:flex;flex-wrap:wrap;gap:var(--ds-2) var(--ds-4);text-decoration:none}
/* UI r2 A1: the phone Fulfilment header (its body has the SAP-read line .ofhead): content-sized rows - title + Refresh + Notifications on the
   top row; the SAP-read line and Turn on alerts together on the next (the line wraps in its own column); Delivered today · Returns · Daily
   summary stay direct links on the last row. Same buttons and order in the markup (06-fulfilment.js unchanged); the grid places them. */
.top.ds-header:has(>.ofhead){display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:var(--ds-4);row-gap:var(--ds-2);align-items:center}
.top.ds-header:has(>.ofhead)>.ds-header-row{display:contents}
.top.ds-header:has(>.ofhead)>.ds-header-row>.ds-header-t{grid-row:1;grid-column:1}
.top.ds-header:has(>.ofhead)>.ds-header-row>.ds-icon{grid-row:1;margin-left:0}
.top.ds-header:has(>.ofhead)>.ds-header-row>.ds-icon.rfbtn{grid-column:3}.top.ds-header:has(>.ofhead)>.ds-header-row>.ds-icon:last-child{grid-column:4}
.top.ds-header:has(>.ofhead)>.ofhead{grid-row:2;grid-column:1;margin:0;line-height:16px}
.top.ds-header:has(>.ofhead)>.ds-header-row>.ofalrt{grid-row:2;grid-column:2/-1;justify-self:end}
.top.ds-header:has(>.ofhead):not(:has(.ofalrt))>.ofhead{grid-column:1/-1}
.top.ds-header:has(>.ofhead)>.ofhlks{grid-row:3;grid-column:1/-1;column-gap:var(--ds-4);row-gap:0}
/* 6. the phone Fulfilment card keeps 12 / 16 padding: its rows ("Dyehouse confirmed", the date box) no longer touch the card edge */
.ds-card.ds-flush.ofvc{padding:0 var(--ds-4) var(--ds-1)}
.ds-card.ofvc .ofvch{margin:0 calc(-1*var(--ds-4));padding:var(--ds-3) var(--ds-4)}
/* 7. desktop Fulfilment table: the actions column holds its four 32 px buttons (4 x 32 + 3 x 8 + 16): the message icon is not clipped */
.ofdtab col:last-child{width:176px!important}

/* phone 320-400: the cancellation row's action (Release undone · check now, one line) uses the card's whole width - its toolbar starts at the
   alert icon's left edge (24 px icon + 8 px gap), so the button is never pushed past the screen edge */
@media (max-width:400px){.ofcx .ofcxa{margin-left:calc(-1*(24px + var(--ds-2)))}}

/* ==== 0.9.67 re-audit polish (34aebd9) ==== */
/* the send sheet: exactly the bottom-sheet radius (24 top; the centred dialog from 760 px: 24 all round, as .ds-sheet) */
.sheet.cs-full{border-radius:var(--ds-r-xl) var(--ds-r-xl) 0 0}@media (min-width:760px){.sheetbg.mid .sheet.cs-full,.sheet.cs-full{border-radius:var(--ds-r-xl)}}
/* the Orders search field and the header icon buttons: no browser-default padding / margin */
.search label input,.search .label input{margin:0;padding:0}
.iconbtn{padding:0;margin:0}
/* desktop Fulfilment rows: a long customer name ends with "…" at its own end (an Arabic name keeps its beginning) */
.ofdtab .ofcu,.ofvtab .ofcu,.ofvoh .ofcu{display:inline-block;max-width:min(360px,60%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;unicode-bidi:plaintext}
.ofvtab td.ofcust{unicode-bidi:plaintext}
/* phone Fulfilment header: the "SAP read …" line starts where the links start */
.ds-header .ofhead{margin-left:0}
/* the Do first card is a button: its lines read left like every card */
.ds-dofirst{text-align:left}
.ds-header-row>span[aria-hidden="true"]:empty{display:none}   /* no Back button: the title starts at the header edge, with the lines under it */
.ofcu:has(>.ar),td.ofcust:has(>.ar){direction:rtl;unicode-bidi:normal;text-align:left}   /* an Arabic name (span.ar, an isolate) sets the line direction: its beginning stays, "…" at its end (as .hn) */
:is(.ds-row-t,.ds-row-s,.ds-cut,.ds-header-t,.ds-label,.ds-dofirst-b>span,.ds-val b,.ds-table td,td.ofcust) :is(bdi,.ar){unicode-bidi:normal}   /* inside a one-line "…" text, an Arabic run (bdi / .ar isolate) counts for the line direction (unicode-bidi:plaintext): a name that starts the line makes it right-to-left, so the name keeps its beginning */
/* a line that starts in Latin ("SO 85461 · ") and ends with an Arabic name: the name is its own "…" box, so the name keeps its beginning
   and is cut at its own end (the line's "…" would cut the right-to-left name at its start) */
:is(.ds-dofirst-b>span,.ds-row-t,.ds-row-s)>.ar{display:inline-block;max-width:100%;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-dofirst-b>span>.ar{max-width:calc(100% - 11ch)}   /* after "SO 85461 · " */
/* desktop (>= 1000 px): the bottom menu is in the top bar (the spec: "desktop: menu in the top bar") - the same nav.nav and buttons (every
   data-act / data-r stays), drawn as a strip of the blue bar right under the header; the order form's footer bar stays at the bottom.
   rc12 item 1 (owner 5 Nov): ORDER FULFILMENT ONLY (#app.ds-deskmenu); every other role keeps the bottom menu and bottom block on a computer */
@media (min-width:1000px){
  #app.ds-deskmenu > header.top{order:-2}
  #app.ds-deskmenu > nav.nav,#app.ds-deskmenu > .bottom > nav.nav{order:-1;position:static;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;min-height:0;padding:0 var(--ds-2) var(--ds-2);background:var(--ds-info);box-shadow:none;border-radius:0 0 var(--ds-r-l) var(--ds-r-l);margin:0}
  #app.ds-deskmenu > .bottom{display:contents}
  #app.ds-deskmenu > .bottom > :not(nav){order:1;position:sticky;bottom:0;z-index:4;background:var(--ds-card)}
  #app.ds-deskmenu > .bottom > :not(nav):last-of-type,#app.ds-deskmenu > .bottom > footer{box-shadow:0 -8px 24px var(--ds-shadow)}
  #app.ds-deskmenu > .bottom > div:first-child:not(:empty){bottom:calc(var(--ds-h-l) + 2*var(--ds-2) + 1px);padding:var(--ds-2) var(--ds-4) 0}   /* the action strip sits on the footer bar (48 px buttons + 2 x 8 + its line) */
  #app.ds-deskmenu:has(> nav.nav) > header.top,#app.ds-deskmenu:has(> .bottom > nav.nav) > header.top{border-radius:0}
  #app.ds-deskmenu nav.nav button{flex-direction:row;min-height:var(--ds-tap);padding:0 var(--ds-2);gap:var(--ds-1);color:var(--ds-on);font-size:var(--ds-fs-s);border-radius:var(--ds-r-s);position:relative}
  #app.ds-deskmenu nav.nav button.on{color:var(--ds-on);font-weight:var(--ds-fw-b);background:var(--ds-on-glass)}   /* r4 H1: no floating underline (a strip only before the menu is placed in the title row) */
  #app.ds-deskmenu nav.nav button:hover{background:var(--ds-on-glass)}
  #app.ds-deskmenu nav.nav .navbadge{top:var(--ds-1);left:auto;right:0}
}

/* ==== r3 (A8-A12) workstream CSS blocks: each workstream edits ONLY its own block (merge-safe); shared parts stay in the design-system block above (workstream S) ==== */
/* r3-F begin (Fulfilment: 06-fulfilment.js) */
/* UI r3 A9 rev. 4: the dyehouse "Confirmed" tick, attached to its date. 20 px square, 4 px corner, 2 px border, D86-1 (owner 4 Nov): the muted grey #65676B (>= 3:1) when enabled and unticked; white
   unticked, --ds-info with a white tick when ticked. Drawn as the phone order tick (.ofck) is - an SVG in the box - because the guard's radius
   set has no 4 px (the owner's approved 4 px corner lives in the SVG: an 18 px rect at 1 px with rx 3 + the 2 px stroke = 20 px / 4 px). */
.ofconf.ofcnf{display:inline-flex;align-items:center;gap:var(--ds-2);margin:0;font-size:var(--ds-fs-m);font-weight:var(--ds-fw);color:var(--ds-text);white-space:nowrap;cursor:pointer}
.ofconf.ofcnf.on{color:var(--ds-ok);font-weight:var(--ds-fw)}
.ofconf.ofcnf .ds-tickhit{width:20px;height:20px}
.ofconf.ofcnf input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border:0;border-radius:0;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='3' fill='white' stroke='%2365676B' stroke-width='2'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.ofconf.ofcnf input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='3' fill='%230B4FB3' stroke='%230B4FB3' stroke-width='2'/%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ofconf.ofcnf input:focus-visible{outline:2px solid var(--ds-info);outline-offset:2px}
.ofdtg{display:flex;align-items:center;gap:var(--ds-3);min-width:0}
/* A12 (all widths): the customer name in the Fulfilment heads (b.ofcu > span.ar) is never cut */
.ofcu,.ofcu>.ar,.ofvcline .ofwho b,.ofvcline .ofwho b>.ar{max-width:none;overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
.ofvcline .ofwho b{min-width:0}
/* A12 (all widths): the Fulfilment Do first card shows the full customer identity and reason - they wrap; nothing ends with "…" */
.ds-dofirst.ofdf .ds-dofirst-b>span:not(.ds-dofirst-h){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.ds-dofirst.ofdf .ds-dofirst-b>span>.ar{display:inline;max-width:none;overflow:visible;white-space:normal;text-overflow:clip}
@media (min-width:1000px){
  /* A9: the Ready date column (280 px): the 154 px date box and Confirmed (32 px high) on one line */
  .ofdtab .ofdtg .datebox{flex:none;width:154px;height:var(--ds-h-s)}
  .ofdtab .ofconf.ofcnf{height:var(--ds-h-s);font-size:var(--ds-fs-m)}
  /* By line keeps its 136 px Ready date column: Confirmed sits under its date box (32 px label) */
  .ofvtab[data-view="line"] .ofdtg{flex-direction:column;align-items:flex-start;gap:0}
  .ofvtab[data-view="line"] .ofconf.ofcnf{height:var(--ds-h-s);font-size:var(--ds-fs-m)}
  /* A9: an ordinary item row keeps the 40 px row contract - 32 px controls with 4 px above and below (was 8: 49 px rows); conditional rows grow */
  .ofdtab td.ofstc,.ofdtab td.ofdtc,.ofdtab td.ofnrc,.ofvtab[data-view="line"] td.ofstc,.ofvtab[data-view="line"] td.ofdtc,.ofvtab[data-view="line"] td.ofnrc{padding-top:var(--ds-1);padding-bottom:var(--ds-1)}
  .ofdtab .datebox,.ofvtab[data-view="line"] .datebox{height:var(--ds-h-s)}
  /* By line: text cells on the controls' centre line (text 10 px down, the 15 px tick 12 px, the 32 px message button 4 px) */
  .ofvtab[data-view="line"] td{padding-top:10px;padding-bottom:var(--ds-1);vertical-align:top}
  .ofvtab[data-view="line"] td.ofc{padding-top:var(--ds-3)}
  .ofvtab[data-view="line"] td.ofmc0{padding-top:var(--ds-1)}
  .ofdtab td,.ofvtab[data-view="line"] td{vertical-align:top}
  .ofdtab td.ofit,.ofdtab td.ofdac,.ofdtab td.ofc{padding-top:var(--ds-1);padding-bottom:var(--ds-1);line-height:32px}
  .ofdtab tr.ofdo td{vertical-align:middle}
  /* A9: quantities 14 px on the computer (ordered and remaining), their colours kept */
  .ofdtab .oflastq,.ofdtab td.ofnrc .ds-mut,.ofvtab[data-view="line"] .oflastq{font-size:var(--ds-fs-m)}
  /* A9 / A12: the order row's customer and SO wrap naturally (no "…", no clamp) when the laptop narrows the Order · item column */
  .ofdtab td.ofdt{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:20px;padding-top:var(--ds-1);padding-bottom:var(--ds-1)}
  .ofdtab .ofcu,.ofvtab .ofcu,.ofvoh .ofcu{display:inline;max-width:none;overflow:visible;white-space:normal;text-overflow:clip}
  .ofdtab .ofdt .ofsol{white-space:nowrap}
  .ofdtab td.ofit .ofin{white-space:normal;overflow-wrap:anywhere}
  .ofdtab td.ofit{line-height:20px;padding-top:10px;padding-bottom:10px}
  /* the order row: customer and SO on one text baseline (the SO link keeps its 32 px target through its ::before) */
  .ofdtab td.ofdt .ofsol{display:inline;min-height:0;padding:0;vertical-align:baseline}
  /* read-only cells line up with the 32 px controls' centre line: text 6 px down, a 24 px badge 4 px down */
  .ofdtab td.ofnrc,.ofvtab[data-view="line"] td.ofnrc{padding-top:10px}
  .ofdtab td.ofnrc .ds-link,.ofvtab[data-view="line"] td.ofnrc .ds-link,.ofvtab[data-view="line"] td .ofsoj{min-height:20px}
  .ofdtab td.ofstc>.ds-badge,.ofvtab[data-view="line"] td.ofstc>.ds-badge{margin-top:var(--ds-1)}
  .ofdtab td.ofstc>.ofro,.ofdtab td.ofdtc>.ofro,.ofdtab td.ofstc>.ofchp{display:inline-block;margin-top:6px}
  /* A12: the Do first card keeps the whole customer name and reason - natural wrapping, no "…" */
  .ds-dofirst.ofdf .ds-dofirst-b{flex-wrap:wrap;row-gap:0}
  /* A12: By line's customer and rep cells and every Order · item name wrap naturally (the table cells' old one-line "…" is off for them) */
  .ofvtab td.ofcust,.ofvtab td.ofrepc,.ofvtab td.ofit{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .ofvtab td.ofcust{line-height:20px}
  /* A10: the Filter panel - every label beside its 32 px control on one baseline, the full selected wording (the select is as wide as its words) */
  .ofdfp{padding:var(--ds-3) var(--ds-4)}
  .ofdfp .ddrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-2) var(--ds-5);margin:0}
  .ofdfp .ddf{flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--ds-2);min-width:0}
  .ofdfp .ddf .fl{margin:0;font-size:var(--ds-fs-m);color:var(--ds-muted);white-space:nowrap}
  .ofdfp .ddf .fbox{flex:0 0 auto;min-height:var(--ds-h-s);height:var(--ds-h-s);border-radius:var(--ds-r-s);padding-inline:var(--ds-3) 0;background:var(--ds-card)}
  .ofdfp .ddf .fbox select{width:auto;font-size:var(--ds-fs-m);text-overflow:clip}   /* the shared A10 chevron (workstream S) keeps its 36 px end */
  .ofdfp .ds-seg{padding:var(--ds-1)}
  .ofdfp .ds-seg>button{height:24px;min-width:88px}
  /* A10 conditional: Site or Rep present = two aligned rows (Show / View / Site over Status / Rep / Sort); an absent group leaves its cell */
  .ofdfp .ddrow.ofdf2{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start;gap:var(--ds-2) var(--ds-5)}
  .ofdfp .ofdf2 .ddf .fl{min-width:48px}
  .ofdfp .ofdf2 .ddf .fbox{flex:1 1 auto}.ofdfp .ofdf2 .ddf .fbox select{width:100%}
  .ofdfp .ofdf2>.ddf:has(select[data-dd="fulQ"]){grid-column:1;grid-row:1}.ofdfp .ofdf2>.ofg2{grid-column:2;grid-row:1}.ofdfp .ofdf2>.ofg3{grid-column:3;grid-row:1}
  .ofdfp .ofdf2>.ddf:has(select[data-dd="ffChip"]){grid-column:1;grid-row:2}.ofdfp .ofdf2>.ddf:has(select[data-dd="ffRep"]){grid-column:2;grid-row:2}.ofdfp .ofdf2>.ddf:has(select[data-dd="fulSortSet"]){grid-column:3;grid-row:2}
  /* the legend: separate facts, Reset column widths at its end beside the resize instruction */
  .ofdfp .ofleg.ofdleg{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-1) var(--ds-5);padding:var(--ds-2) 0 0;margin:0;font-size:var(--ds-fs-s);color:var(--ds-muted)}
  .ofdleg .urgtxt{color:var(--ds-warn);font-weight:var(--ds-fw-b)}
  .ofdleg .ofleg1{display:inline-flex;align-items:center;gap:var(--ds-1)}.ofdleg .ofleg1 svg{width:14px;height:14px;color:var(--ds-info)}
  .ofdleg .ds-btn{margin-left:auto}
}
@media (max-width:999px){
  /* ---- UI r3 A9 phone: the order card. Container spacing reduced, never the controls (48 px fields, 44 px targets) ---- */
  .ds-card.ofvc .ofvch.ofvchp{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:var(--ds-3);row-gap:var(--ds-1);align-items:start;padding:var(--ds-3) var(--ds-4)}
  .ofvchp>.ofck{margin:-10px -12px -14px}   /* A10: the 20 px tick centred on the first identity row (24 px): 2 px down, 44 px target, no height added */
  .ofvchp>.ofvcw{grid-column:2;min-width:0}
  .ofvchp>.ofvcr{grid-column:1/-1;justify-self:stretch;margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--ds-2)}
  .ofid{display:flex;flex-direction:column;gap:var(--ds-1);min-width:0;font-weight:var(--ds-fw)}
  .ofid2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--ds-3);min-width:0}
  .ofid1{display:block;line-height:24px;min-width:0}   /* the SO floats to the right end of the name's LAST line (a long name wraps; the SO joins its end when it fits) */
  .ofid1::after{content:"";display:block;clear:both}
  .ofid1 .ofcu{min-width:0;font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);overflow-wrap:anywhere;unicode-bidi:isolate}   /* A12: the whole name, wrapping - no "…" */
  .ofid1 .ofsol,.ofid1 .ofsotx{float:right;margin-left:var(--ds-3);min-height:24px;padding:0;font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);white-space:nowrap}   /* the SO link's 44 px target is its ::after */
  .ofid2{font-size:var(--ds-fs-m);line-height:20px}
  .ofid2 .ofrep{min-width:0;overflow-wrap:anywhere}
  .ofid2 .ds-keep{margin-left:auto;white-space:nowrap}
  .ofid3{flex-wrap:wrap;gap:var(--ds-1) var(--ds-2);min-width:0}
  .ofvchp .ofhd2{margin-top:var(--ds-1)}
  /* the phone toolbar (queue strip unchanged): 8 px above and below its rows instead of 12 */
  .ofcard>.ofbar{padding-top:var(--ds-2);padding-bottom:var(--ds-2)}
  /* the line: tick · number + name (wraps) · Split at the right end; "Not released <qty>"; Status | Ready date */
  .ofvc .ofvcl{gap:var(--ds-1);padding:var(--ds-2) 0}
  .ofvc .ofvcl .ofr1{align-items:flex-start;line-height:20px}
  .ofvc .ofvcl .ofr1>.ofck{margin-top:-12px;margin-bottom:-12px}
  .ofvc .ofvcl .ofit{flex:1 1 auto;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .ofvc .ofvcl .ofit .ofin{overflow:visible;text-overflow:clip}
  .ofvc .ofvcl .ofspc{flex:none;margin-left:auto;display:inline-flex;gap:var(--ds-2)}
  .ofvc .ofvcl .ofspc .ds-link{min-height:20px;padding:0}   /* 44 px target through the shared ::after */
  .ofvc .ofvcl .ofr2{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--ds-2);line-height:24px}
  .ofvc .ofvcl .ofr2>*{line-height:24px}
  .ofvc .ofvcl .ofnrl{font-size:var(--ds-fs-s);color:var(--ds-muted)}
  .ofvc .ofvcl .oflastq,.ofvc .ofvcl .ofr2>.ds-mut,.ofvc .ofvcl .ofnrc>.ds-mut,.ofvc .ofvcl .ofr2>b{font-size:var(--ds-fs-l)}   /* A9: remaining and ordered quantities 16 px */
  .ofvc .ofvcl .ofr2 .ofnr,.ofvc .ofvcl .ofr2 .relasof{font-size:var(--ds-fs-s)}
  .ofvc .ofvcl .ofr3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ds-3);margin-top:0;align-items:start}
  .ofvc .ofvcl .ofr3 .ofstc .ds-box{height:var(--ds-h-l)}
  .ofvc .ofvcl .ofdtc .datebox{width:100%;height:var(--ds-h-l)}
  .ofvc .ofvcl .ofdtc .datebox .dbv{font-size:var(--ds-fs-l)}   /* the same 16 px as the Status value beside it */
  .ofvc .ofvcl .ofdtg{flex-direction:column;align-items:stretch;gap:0}
  .ofvc .ofvcl .ofconf.ofcnf{min-height:var(--ds-tap);margin:0;padding-left:var(--ds-3)}   /* Confirmed directly under its date, a 44 px target */
  .ofvc .ofvcl .ofconf.ofcnf .ds-tickhit{width:20px;height:20px}
  /* a line that cannot be changed here: quantity and state on one row under the name ("— Released") */
  .ofvc .ofvcl.ofvro .ofr2{column-gap:var(--ds-3);row-gap:var(--ds-1)}
  .ofvc .ofvcl.ofvro .ofr2>span{flex:none;display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ds-1) var(--ds-2)}
  /* A10: the order tick 20 px square with a 4 px corner (drawn in its SVG, as before), 44 px target */
  .ofck{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='3' fill='white' stroke='%2365676B' stroke-width='1.6'/%3E%3C/svg%3E")}
  .ofck:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='3' fill='%230B4FB3' stroke='%230B4FB3' stroke-width='1.6'/%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .ofck:disabled{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='18' height='18' rx='3' fill='%23EBEEF2' stroke='%23C9CDD3' stroke-width='1.6'/%3E%3C/svg%3E")}
  /* the rep's question (To answer): About on its own row, the reply box + Send, then Requires answer from rep + No reply needed */
  .ofansw .ofansc>.ds-dd{flex:1 1 100%}
  .ofansw .ofansc>.ds-box:not(.ds-dd){flex:1 1 160px;min-width:0}
  .ofansw .ofansc>.ds-btn{flex:none}
  .ofansw .ofansb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--ds-3)}
  .ofansw .ofansb .ofaskb{flex:0 1 auto}
  /* A10 phone filter: one labelled 48 px select per row (Status, Rep when there is more than one, Sort), the label beside it, the full value at 14 px */
  .offp:not(.ofdfp) .ddrow{display:flex;flex-direction:column;align-items:stretch;gap:var(--ds-2);margin:0;padding:0 0 var(--ds-2)}
  .offp:not(.ofdfp) .ddf{flex-direction:row;align-items:center;gap:var(--ds-3);width:100%}
  .offp:not(.ofdfp) .ddf .fl{flex:none;width:48px;margin:0;font-size:var(--ds-fs-s);color:var(--ds-muted)}
  .offp:not(.ofdfp) .ddf .fbox{flex:1 1 auto;min-height:var(--ds-h-l);height:var(--ds-h-l);border-radius:var(--ds-r-m);background:var(--ds-card)}
  .offp:not(.ofdfp) .ddf .fbox select{min-height:0;font-size:var(--ds-fs-m);text-overflow:clip}
  /* A10 phone bulk bar: count, then Status | Ready date labelled side by side, then Apply | Clear selection (equal, 48 px), 12 px gaps */
  .ofbulk.ofbulkp{display:flex;flex-direction:column;align-items:stretch;gap:var(--ds-3);padding:var(--ds-3) var(--ds-4)}
  .ofbulkp>b{font-size:var(--ds-fs-m)}
  .ofbulkp .ofbk2,.ofbulkp .ofbk3{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--ds-3)}
  .ofbulkp .ofbk3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ofbulkp .ds-field .ds-box,.ofbulkp .datebox{height:var(--ds-h-l);width:100%;font-size:var(--ds-fs-m)}
  .ofbulkp .ds-field .ds-box select{font-size:var(--ds-fs-m)}
  .ofbulkp .ds-label{font-weight:var(--ds-fw)}
  .ofbulkp .ofbk3 .ds-btn{width:100%;height:var(--ds-h-l);font-size:var(--ds-fs-m)}
}
/* r3-F end */


/* r3-R begin (rep: order page, quotations, returns, new order) */
/* A8 order page (viewOrderDetail, main.r3o): 12 px between the page's blocks, 16 px under the last one (no bottom menu on this page) */
main.r3o{gap:var(--ds-3);padding-bottom:var(--ds-4)}
#itemsSec .t.ds-row{min-height:var(--ds-h-l)}   /* the total row: content-sized (28 px figure + 8 px padding), 48 px */
.r3st{display:flex;flex-direction:column;gap:var(--ds-1)}
/* A8: Edit order and Cancel order equal (phone 48 px from .ds-btnrow; desktop 32 px) */
@media (min-width:1000px){.r3acts>.ds-btn{height:var(--ds-h-s);min-height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}}
/* A8: a line's Qty / Price / Amount boxes - compact (8 px under the name, 48 px boxes); on the computer the boxes sit in the name's column */
.line.c67line{row-gap:var(--ds-2)}
.line.c67line .c67b{gap:var(--ds-1);padding:var(--ds-1) var(--ds-3);min-height:var(--ds-h-l);justify-content:center}
@media (min-width:1000px){.line.c67line>.ds-tile{grid-row:span 2;align-self:start}.line.c67line .c67lv{grid-column:2}}
/* integration (b4723 U7): on the computer the boxes sit in the name's column, so the release line under a line starts under the Qty box too
   (line padding 16 + tile column 48 + gap 12) - as it did when the boxes spanned the card */
@media (min-width:1000px){.line.c67line+.lful{padding-left:calc(var(--ds-4) + 48px + var(--ds-3))}}
/* A8: SAP progress card - 8 px side padding so a step's date ("Nov 2 00:00") keeps one line on a 390 px phone (all five steps stay) */
main.r3o .flowline{padding:var(--ds-3) var(--ds-2)}
/* A8 height: the order page's message box is one 56 px row (main's size; drag the corner for more), Needs an answer + Send unchanged */
main.r3o .actin .ds-box.ds-multi{min-height:0}main.r3o .actin .ds-box.ds-multi textarea{min-height:var(--ds-row);height:var(--ds-row)}
/* A12: a rep screen's header identity (.who.r3who): the full customer name wraps (no "…"), facts + status beneath, wrapping as needed */
.who.r3who .name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.who.r3who .r3meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-1) var(--ds-2)}
/* A12: identity rows (returns, quotations, customer search: .ds-row.r3id) - the name 16 px in full (wraps; an Arabic run is not cut), facts
   12 px; identifying facts + status share one band (.r3band) and wrap when they do not fit */
.ds-row.r3id .ds-row-t{font-size:var(--ds-fs-l);line-height:22px}
.ds-row.r3id :is(.ds-row-t,.ds-row-s){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}   /* as .ds-idfull (S), also where the row is drawn outside such a list (the return customer search) */
.ds-row.r3id :is(.ds-row-t,.ds-row-s)>.ar{display:inline;max-width:none;white-space:normal;overflow:visible}
.r3band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-1) var(--ds-2)}
/* A12 / A8: one quotation - product names and values in full (wrap, no "…"); desktop actions 32 px / 14 px (V4), 8 px apart */
.ds-row-t.r3wrap{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;min-width:0}
#qLines .ds-val b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#qLines .ds-val{padding:var(--ds-1) var(--ds-2);min-height:var(--ds-h-l);justify-content:center}
main#qDetail{padding-bottom:var(--ds-5)}   /* 24 px above the bottom menu, as the order page */
@media (min-width:1000px){#qDetail .ds-btnstack .ds-btn{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}}
/* V1 (A5, desktop): the editable line card - the identity row spans the card above the values; the name and the Special badge wrap in full */
.plb>.plb-t{grid-column:1 / -1}
.plb>.plb-t>.ds-row-head{flex:1 1 auto;min-width:0}
.plb .plb-t .pl-n{flex:1 1 auto;min-width:0;margin-top:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.plb .plb-t .spbadge{white-space:normal}
/* V3 (A6, desktop): Add photos (phHead: New order / correction ophHtml, New return) 32 px / 14 px on the computer; the phone keeps 48 px */
@media (min-width:1000px){[data-phhead] .ds-btn.ds-add{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}}
/* New order footer (height): the count / total and Save draft + Send share one row when they fit (wraps back to two rows otherwise);
   desktop buttons 32 px */
main.r3new{padding-bottom:var(--ds-4)}   /* New order / Edit order: 16 px above the footer bar (it sits right under the last card) */
.ds-footer.r3foot{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--ds-3)}
.ds-footer.r3foot>.ds-row-main{flex:1 1 auto;width:auto}
.ds-footer.r3foot>.ds-btnrow{flex:1 1 232px}
@media (min-width:1000px){.ds-footer.r3foot .ds-btn{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}}
/* A10 (S's request): rep Orders Sort - a native select under its label; the shared 16 px chevron instead of the "▾" glyph */
.ordsort>.chev{width:16px;height:16px;flex:none;margin-inline-start:var(--ds-1);color:currentColor}
/* A11 / D4: the New menu's navigation rows - no radio-like circle, title + trailing arrow, equal 56 px rows, 16 px side padding */
.ds-choice.r3nav{height:var(--ds-row);padding:0 var(--ds-4);justify-content:space-between}
.ds-choice.r3nav::before{content:none}
.ds-choice.r3nav b{font-size:var(--ds-fs-l);font-weight:var(--ds-fw-b);min-width:0}
/* r3-R end */


/* r3-A begin (approve / check / POS) */
/* A8 (final revision 3): the approve / coordinator check item cards keep the three grouped boxes Qty · Price · Amount on stable columns (SC-3
   grid 1fr 1fr 1.3fr; a long price / amount still takes the full-width labelled Amount row below 420 px, itb-long) with compact spacing:
   the card 12 px all round, each box 8 px / 12 px with no extra gap between label and value. Font sizes, units, old values, warnings, edges unchanged. */
.apitems .itc{padding:12px 16px}
.apitems .itx{padding:8px 12px;gap:0}
@media (max-width:380px){.apitems .itc{padding:12px}.apitems .itx{padding:8px}}
/* A8: where a long price / amount needs the full-width Amount row (itb-long, below 420 px) it stays labelled - the label and the figure share
   that one row (label left, figure right) instead of stacking, so the long figure keeps its full width without an extra line */
@media (max-width:420px){.apitems .itb.itb-long .ita{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px}}
/* A8 / D1: the one next-step line (apNextStepHtml) */
.lnote.apnext b.coral{color:var(--ds-warn)}
/* A12: full customer identity - the approve / check / POS order header name wraps in full (no ellipsis, no clamp); the POS list uses the shared
   .ds-idfull (S) for its name / facts and only lays out its facts + badge band here */
.apwho .name,.poswho .name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.posrow{align-items:flex-start}
.posrow .posmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;min-width:0}
/* r3-A end */


/* r3-S begin (shared callers / admin / homes) */
.ueform>#errs:empty{display:none}
.ds-box.ds-multi.plbox{flex-direction:column;gap:var(--ds-1)}   /* Product lists: the list's explanation inside its text field, above the entries */   /* Add / Edit user: the error slot takes no gap until it shows an error */
/* r3-S end */


/* r4-F begin */
/* A13a: the failed SAP read of the focused order - amber warnRow (title + this order's last read); desktop one line, phone stacked */
@media (min-width:1000px){.ofx>.wrow.ofrdf .wl{grid-column:3;margin:0 0 0 var(--ds-2);color:var(--ds-text)}}
@media (max-width:999px){.ofx>.wrow.ofrdf .wl{grid-column:2;margin-top:var(--ds-1)}}
/* H1: the focused order's Back (shared dsBack) - equal space above and below when something (Do first, an error bar) is drawn above it */
.ds-row-main>*+.ofbackrow{margin-top:var(--ds-3)}
/* r4-F end */


/* r4-R begin */
/* r4 A18: the returned-order correction notice (03-core returnedHtml) in the shared attention message; title + meta on one row when they fit */
.r4rt .r4rthd{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--ds-2);row-gap:var(--ds-1)}
.r4rt .r4rtwhy{overflow-wrap:anywhere}
.r4rt .rtacts{display:flex;flex-wrap:wrap;gap:var(--ds-2);margin-top:var(--ds-1)}
@media (min-width:1000px){.r4rt .rtacts>.ds-btn{height:var(--ds-h-s);padding:0 var(--ds-3);border-radius:var(--ds-r-s);font-size:var(--ds-fs-m);line-height:20px}}
/* r4-R end */


/* r4-A begin */
/* A14: the coordinator's Sending to SAP card - "Waiting for SAP confirmation" sits close under "Sending to SAP…" (one group, 4 px) where the bar was */
.c67wait{margin:0}.c67prog+.c67wait{margin-top:calc(-1*var(--ds-1))}
/* r4-A end */


/* r4-S begin */
/* A17b: an Action required row (Home / Action required): customer + full metadata on the left (wraps, the row grows), the amount and the
   Review order shortcut in ONE right summary column - right-aligned, centred against the left column */
.acrow>.arsum{align-self:center;align-items:flex-end;justify-content:center;text-align:right}
/* F86-7: while a failure toast shows, the page has room for it under its content (19-errors.js toastClear) */
html.ds-toasting #app main{padding-bottom:var(--ds-toast-pad,0px)}
/* r4-S end */


/* r5-F begin */
/* UI r5 (owner 4 Nov): the FOCUSED Order Fulfilment order on the phone only (the computer does not change).
   P1 (approved picture): Back at the start of the toolbar row, By order | By line at its end - both 48 px, centred on one line (top and bottom
   aligned), each view choice a 44 px target.
   P4: the facts one group (rep | Needed; terms, delivery, contact, note, segment | the APP no.); Sent at the start of the PDF / ▾ / messages row; the short "PDF" control (icon + label); "SAP update failed" + the last read on one row that
   wraps the time (as one piece, under the title) when it does not fit; +16 px above the SAP stage (its title, bar and next step stay one block). */
@media (max-width:999px){
  .ofbar.ofbarf{align-items:center}
  .ofbar.ofbarf>.ofbackrow{display:flex;margin:0}
  .ofbarf>.ofbackrow>.ds-back{height:var(--ds-h-l)}
  .ofbar.ofbarf>.ds-seg.ofsegm{height:var(--ds-h-l);box-sizing:border-box;margin-left:auto;padding:calc((var(--ds-h-l) - var(--ds-tap)) / 2)}
  .ofbar.ofbarf>.ds-seg.ofsegm>button{height:var(--ds-tap)}   /* the design system's segmented choice at the 44 px tap token: 2 + 44 + 2 = 48 */
  .ds-row-main>*+.ofcard.ofcardf{margin-top:var(--ds-3)}   /* Do first / an error bar above: 12 px, as the Back row had */
  .ofvchp .ofhd2.ofhd2p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:var(--ds-2)}
  .ofhd2p>.ofhdl{display:flex;flex-wrap:wrap;column-gap:var(--ds-2);min-width:0}
  .ofhd2p>.ofapp{margin-left:auto}
  .ofvchp>.ofvcr>.ofsent{margin-right:auto;min-width:0;font-size:var(--ds-fs-s);line-height:16px;color:var(--ds-muted)}
  .ofri .ds-hpdf{gap:var(--ds-1);padding:0 var(--ds-3)}
  .ofri .ds-hpdf>svg{width:20px;height:20px}
  .ofx>.wrow.ofrdf{display:block;padding:var(--ds-2) 0 var(--ds-2) calc(var(--ds-5) + var(--ds-2))}   /* the icon on the stage's text edge (as the approved P4 picture) */
  .ofx>.wrow.ofrdf .wic{position:absolute;left:0;top:var(--ds-2)}
  .ofx>.wrow.ofrdf .wt{display:inline;margin-right:var(--ds-2);line-height:24px}
  .ofx>.wrow.ofrdf .wl{display:inline-block;margin:0;line-height:24px;white-space:nowrap;vertical-align:top;color:var(--ds-text)}
  .ofx>.ofstg{margin-top:var(--ds-4)}
}
/* r5-F end */


/* r5-R begin */
/* r5 P2: a returned order's status slot holds the amber notice (03-core returnedHtml) instead of a red badge; a SAP error under it keeps 8 px */
#oStatus>.r4rt+.ds-msg{margin-top:var(--ds-2)}
/* r5 quotation (phone): the space above the bottom menu = the order page's 16 px (was 24); rows, type and targets unchanged */
main#qDetail{padding-bottom:var(--ds-4)}
/* r5-R end */