/* D14: the theme is CSS variables only. Light (the default) is white / very light grey with a rose accent (Bed of Roses);
   dark is the earlier Monday-style navy, kept as a per-user choice on Settings. Status fills and their text colours are chosen
   for WCAG AA contrast (4.5:1 or more) in both themes. */
:root{color-scheme:light;--bg:#f6f5f8;--surface:#fff;--surface2:#f6f4f7;--ink:#2b2a30;--mute:#5f5d68;--line:#d9d4dd;--line2:#ebe7ee;
--primary:#b83a64;--primary-ink:#fff;--on-primary:#fff;--primary-soft:#fbeef2;--link:#a8325a;--hover:#fbf0f4;--side:#fff;--side-ink:#2b2a30;--shadow:0 0.375rem 1.25rem rgba(70,30,50,.10);
--brand:linear-gradient(135deg,#f0a3b8,#b83a64);--focus:#b83a64;
--c-new:#2f6ad0;--c-wait:#f2a33a;--c-packed:#7e4cc4;--c-sent:#c2187a;--c-received:#0b7e4f;--c-invoiced:#0f6676;--c-canceled:#9f2a47;--c-grey:#d6d6dc;
--on-status:#fff;--on-wait:#2b2a30;--on-grey:#2b2a30;--t-wait:#8a5300;--t-grey:#5f5d68;
--bad:#b4233f;--bad-soft:#fdecef;--ok:#0b7a4b;--ok-soft:#e6f5ee;--warn:#8a5300;--warn-soft:#fff3e0;--on-bad:#fff;--info-soft:#eef3fc;
--banner-bg:#ffd54a;--banner-ink:#2b2a30;--paper:#f3eef0;--paper2:#faf7f8;--scrim:rgba(43,42,48,.35)}
html[data-theme=dark]{color-scheme:dark;--bg:#181b34;--surface:#30324e;--surface2:#292b48;--ink:#d5d8df;--mute:#a4a7b4;--line:#4b4e69;--line2:#3f425e;
--primary:#e8829e;--primary-ink:#1d1420;--on-primary:#1d1420;--primary-soft:rgba(232,130,158,.16);--link:#f08fab;--hover:#3b3e5c;--side:#30324e;--side-ink:#d5d8df;--shadow:0 0.375rem 1.5rem rgba(0,0,0,.5);
--brand:linear-gradient(135deg,#ff8fb0,#c2416b);--focus:#f08fab;
--t-wait:#ffb54d;--t-grey:#a4a7b4;
--bad:#ff7a8f;--bad-soft:rgba(255,122,143,.15);--ok:#3ddc97;--ok-soft:rgba(61,220,151,.14);--warn:#ffb54d;--warn-soft:rgba(255,181,77,.15);--on-bad:#1d1420;--info-soft:rgba(47,106,208,.18);
--paper:#24263f;--paper2:#2c2e4a;--scrim:rgba(0,0,0,.55)}

*{box-sizing:border-box}:focus-visible{outline:0.125rem solid var(--focus);outline-offset:0.125rem}html,body{height:100%}body{margin:0;font:0.875rem/1.4 Figtree,Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--link)}h1{font-size:1.375rem;font-weight:500;margin:0}h2{font-size:0.9375rem;margin:0.875rem 0 0.5rem}
.banner{background:var(--banner-bg);color:var(--banner-ink);text-align:center;font-weight:700;padding:0.3125rem 0.625rem;font-size:0.75rem;position:sticky;top:0;z-index:30}
.shell{display:flex;min-height:calc(100% - 1.6875rem)}
.side{width:15.625rem;flex:0 0 15.625rem;background:var(--side);color:var(--side-ink);border-right:1px solid var(--line2);padding:0.75rem 0.625rem;display:flex;flex-direction:column;gap:0.25rem;position:sticky;top:1.6875rem;height:calc(100vh - 1.6875rem);overflow:auto}
.side .brand{font-weight:700;font-size:0.9375rem;padding:0.375rem 0.625rem 0.625rem;display:flex;align-items:center;gap:0.5rem}.side .brand i{display:inline-block;width:1.375rem;height:1.375rem;border-radius:0.375rem;background:var(--brand);flex:0 0 1.375rem}
.side .sec{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);padding:0.625rem 0.625rem 0.25rem}
.side a.b{display:flex;align-items:center;gap:0.5rem;padding:0.4375rem 0.625rem;border-radius:0.375rem;color:var(--side-ink);text-decoration:none;font-size:0.875rem}
.side a.b:hover{background:var(--hover)}.side a.b.on{background:var(--hover);font-weight:600}
.side a.b .dot{width:0.5rem;height:0.5rem;border-radius:0.125rem;background:var(--c-grey);flex:0 0 0.5rem}.side a.b .badge{margin-left:auto}
.side .me{margin-top:auto;padding:0.625rem;border-top:1px solid var(--line2);font-size:0.75rem;color:var(--mute)}.side .me b{color:var(--side-ink);display:block;font-size:0.8125rem}
.side .me form{display:inline}.side .me .theme{margin-top:0.375rem;display:flex;gap:0.5rem}
html[data-pinch] body{touch-action:pan-x pan-y}body.pinching{overflow:hidden}.shell.pinching,.panel.pinching{will-change:transform}.shell.pinching *,.panel.pinching *{pointer-events:none}
#bor-size-tip{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);background:rgba(20,22,40,.78);color:#fff;font-size:1.5rem;font-weight:600;padding:0.625rem 1.25rem;border-radius:0.875rem;opacity:0;transition:opacity .18s;pointer-events:none;z-index:200;font-variant-numeric:tabular-nums}#bor-size-tip.on{opacity:1}

button.link{border:0;background:none;color:var(--link);text-decoration:underline;padding:0;cursor:pointer;font:inherit}
.burger{display:none}
main{flex:1;min-width:0;padding:0.875rem 1.25rem 2.5rem}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.875rem;margin-bottom:0.5rem}.top h1{margin-right:auto}
.top form.search{display:flex;align-items:center;gap:0.375rem}.top form.search input{font:inherit;padding:0.375rem 0.625rem;border:1px solid var(--line);border-radius:0.25rem;background:var(--surface);color:var(--ink);min-width:13.75rem}
.top form.search button{font:inherit;padding:0.375rem 0.75rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:0.25rem;cursor:pointer}
.hint{font-size:0.75rem;color:var(--mute);margin:0 0 0.625rem}
nav.tabs{display:flex;gap:0.125rem;overflow-x:auto;border-bottom:1px solid var(--line2);margin:0 0 0.875rem;scrollbar-width:none}nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:0 0 auto;padding:0.4375rem 0.75rem;color:var(--ink);text-decoration:none;font-size:0.8125rem;white-space:nowrap;border-bottom:0.125rem solid transparent}
nav.tabs a b{font-weight:600;margin-left:0.1875rem;color:var(--mute)}nav.tabs a.on{border-bottom-color:var(--primary);color:var(--link)}nav.tabs a.wait{color:var(--warn)}
nav.chips{display:flex;flex-wrap:wrap;gap:0.375rem;margin:-0.375rem 0 0.75rem}nav.chips a{padding:0.1875rem 0.5625rem;border-radius:0.75rem;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:0.75rem;white-space:nowrap}
nav.chips a.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}nav.chips a b{color:inherit;opacity:.75}
section.group{margin:0 0 1.375rem}section.group>h2{display:flex;align-items:center;gap:0.375rem;margin:0 0 0.375rem;font-size:1rem;font-weight:600;color:var(--g);cursor:pointer;user-select:none}
section.group>h2::before{content:"\25BE";font-size:0.875rem;width:1rem;display:inline-block;transition:transform .15s}section.group.collapsed>h2::before{transform:rotate(-90deg)}
section.group[style*="c-wait"]>h2{color:var(--t-wait)}section.group[style*="c-grey"]>h2{color:var(--t-grey)}section.group.collapsed>.gb{display:none}section.group>h2 .n{font-weight:400;color:var(--mute);font-size:0.8125rem}
table.mt{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;background:var(--surface);border-radius:0.25rem;border:1px solid var(--line2);border-left:0.375rem solid var(--g);font-size:0.8125rem}
table.mt th{font-weight:400;color:var(--mute);text-align:left;padding:0.4375rem 0.5rem;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);white-space:nowrap;background:var(--surface)}
table.mt td{padding:0 0.5rem;height:2.25rem;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);vertical-align:middle;max-width:22.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.mt th:last-child,table.mt td:last-child{border-right:0}table.mt tr:last-child td{border-bottom:0}table.mt tbody tr{cursor:pointer}table.mt tbody tr:hover td{background:var(--hover)}
table.mt td.r,table.mt th.r{text-align:right}table.mt td.st{padding:0;width:9.375rem;min-width:8.125rem;overflow:visible}table.mt td.po{font-weight:600}table.mt td.po a{color:var(--ink);text-decoration:none}
table.mt td.why{white-space:normal;line-height:1.2;padding:0.25rem 0.5rem}table.mt td.why .pill{white-space:normal;margin:1px 0}table.mt td .more{color:var(--mute);font-size:0.75rem}.muted{color:var(--mute)}.small{font-size:0.75rem}
.status{display:flex;align-items:center;justify-content:center;height:2.25rem;width:100%;color:var(--on-status);font-size:0.8125rem;list-style:none;cursor:pointer;text-align:center;padding:0 0.375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status::-webkit-details-marker{display:none}span.status{cursor:default}
.s-new{background:var(--c-new)}.s-wait{background:var(--c-wait);color:var(--on-wait)!important}.s-packed{background:var(--c-packed)}.s-sent{background:var(--c-sent)}.s-received{background:var(--c-received)}.s-invoiced{background:var(--c-invoiced)}.s-canceled{background:var(--c-canceled)}.s-grey{background:var(--c-grey);color:var(--on-grey)!important}
details.st{position:relative}details.st .menu{position:absolute;z-index:20;top:2.375rem;right:0;min-width:14.375rem;background:var(--surface);border:1px solid var(--line);border-radius:0.5rem;box-shadow:var(--shadow);padding:0.5rem}
details.st .menu form{display:block;margin:0 0 0.375rem}details.st .menu .opt{display:block;width:100%;border:0;border-radius:0.25rem;color:var(--on-status);padding:0.4375rem 0.5rem;font:inherit;font-size:0.8125rem;cursor:pointer;text-align:center}
details.st .menu input[type=text]{width:100%;font:inherit;font-size:0.75rem;padding:0.3125rem 0.4375rem;border:1px solid var(--line);border-radius:0.25rem;background:var(--surface2);color:var(--ink);margin-bottom:0.25rem}
details.st .menu .t{font-size:0.6875rem;color:var(--mute);margin:0 0 0.375rem}
.pill{display:inline-block;padding:1px 0.5rem;border-radius:0.5625rem;font-size:0.75rem;background:var(--surface2);border:1px solid var(--line2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge{display:inline-block;min-width:1.25rem;padding:0 0.375rem;border-radius:0.625rem;background:var(--c-wait);color:var(--on-wait);font-size:0.75rem;font-weight:700;text-align:center;line-height:1.125rem}
h1 .count{display:inline-block;padding:0 0.5625rem;border-radius:0.75rem;background:var(--c-wait);color:var(--on-wait);font-size:0.875rem;line-height:1.375rem;vertical-align:0.1875rem;font-weight:700}
.pager{display:flex;justify-content:space-between;gap:0.625rem;margin:0.875rem 0;font-size:0.8125rem}
.notice{padding:0.625rem;border-radius:0.375rem;background:var(--bad-soft);border:1px solid var(--bad);margin-bottom:0.75rem}
.login{max-width:23.75rem;margin:3.75rem auto;background:var(--surface);border:1px solid var(--line2);border-radius:0.625rem;padding:1.5rem;box-shadow:var(--shadow)}
.login h1{font-size:1.25rem}.login label{display:block;margin:0.75rem 0 0.25rem;font-weight:600}.login input{width:100%;font:inherit;padding:0.5625rem;border:1px solid var(--line);border-radius:0.25rem;background:var(--surface2);color:var(--ink)}
.login button{width:100%;margin-top:1rem;padding:0.625rem;background:var(--primary);color:var(--on-primary);border:0;border-radius:0.25rem;font:inherit;font-weight:600;cursor:pointer}
button,a.btn{font:inherit;padding:0.375rem 0.75rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:0.25rem;cursor:pointer;text-decoration:none;display:inline-block}
button.primary,a.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}button:hover{filter:brightness(1.08)}form.inline{display:inline}
input[type=text]{font:inherit;padding:0.3125rem 0.5rem;border:1px solid var(--line);border-radius:0.25rem;background:var(--surface2);color:var(--ink);min-width:10rem}
table{border-collapse:collapse;width:100%;background:var(--surface);font-size:0.8125rem}th,td{border:1px solid var(--line2);padding:0.3125rem 0.5rem;text-align:left;vertical-align:top}th{background:var(--surface2);font-weight:600}
pre{white-space:pre-wrap;word-break:break-word;background:var(--surface2);border:1px solid var(--line2);padding:0.5rem;margin:0.375rem 0;font-size:0.75rem}code{font-size:0.75rem}
.q{border-top:1px solid var(--line2);padding-top:0.625rem;margin-top:0.625rem}.q .opts{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.375rem}.q .opts button{min-height:2.375rem;background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.q .opts button:disabled{opacity:.45;cursor:not-allowed}
.q input[type=text]{margin-top:0.375rem;width:100%}details summary{cursor:pointer;color:var(--mute)}
.side2{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;align-items:start}.side2 section{min-width:0}
table.lines td.r,table.lines th.r{text-align:right;white-space:nowrap}table.lines th{white-space:nowrap}
.l3{display:flex;flex-wrap:wrap;gap:0.25rem;margin:0.375rem 0 0.625rem}.l3 .pill{white-space:normal;line-height:1.35;padding:0.125rem 0.5rem}
.panel{position:fixed;top:1.6875rem;right:0;bottom:0;width:min(40rem,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:40;display:flex;flex-direction:column}
.panel[hidden]{display:none}.panel .bar{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-bottom:1px solid var(--line2)}.panel .bar .x{margin-left:auto;border:0;background:none;font-size:1.25rem;line-height:1;color:var(--mute);cursor:pointer;padding:0.25rem 0.5rem}
.panel .bar a.full{font-size:0.75rem}.panel .body{padding:0.75rem 1rem 1.875rem;overflow:auto}.panel .body h1{font-size:1.125rem}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}.backdrop[hidden]{display:none}
.ph{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin-bottom:0.5rem}.ph .status{width:auto;display:inline-flex;height:1.75rem;padding:0 0.75rem;border-radius:0.25rem;font-size:0.75rem}.ph table.mt{background:none}.ph table.mt td{border:0;padding:0;height:auto;width:auto;overflow:visible}
.kv{display:grid;grid-template-columns:8.75rem 1fr;gap:0.25rem 0.625rem;font-size:0.8125rem;margin:0.5rem 0 0.75rem}.kv div:nth-child(odd){color:var(--mute)}
/* D10 invoicing */
.inline{display:inline}.top .actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.btn.small{padding:0.1875rem 0.5625rem;font-size:0.75rem}.btn.danger{color:var(--bad);border-color:var(--bad)}.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.cinv{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:600}.btn.cinv:hover{filter:brightness(.92)}
.ipill{width:auto;display:inline-flex;height:1.625rem;padding:0 0.75rem;border-radius:0.25rem;font-size:0.75rem;cursor:default}
.info{padding:0.625rem 0.75rem;border-radius:0.375rem;background:var(--info-soft);border:1px solid var(--c-new);margin-bottom:0.75rem}.info.ok{background:var(--ok-soft);border-color:var(--c-received)}
.testmail{background:var(--bad);color:var(--on-bad);padding:0.5625rem 0.75rem;border-radius:0.375rem;margin-bottom:0.75rem;font-size:0.8125rem}
table.rev td,table.rev th{vertical-align:top}table.rev tr.off td{color:var(--mute);opacity:.7}table.rev tr.noprice td{background:rgba(226,68,92,.08)}
table.rev input.qty{width:3.875rem;min-width:0;display:inline-block;font:inherit;padding:0.25rem 0.375rem;border:1px solid var(--line);border-radius:0.25rem;background:var(--surface2);color:var(--ink);text-align:right}
table.rev input.price{width:5.25rem;min-width:0;display:inline-block;font:inherit;padding:0.25rem 0.375rem;border:1px solid var(--line);border-radius:0.25rem;background:var(--surface2);color:var(--ink);text-align:right}table.rev input.price.missing{border-color:var(--bad);background:var(--bad-soft)}
table.rev .cur{color:var(--mute);margin-right:0.125rem;display:inline-block;vertical-align:middle;line-height:1.75rem}table.rev input.qty,table.rev input.price{vertical-align:middle}table.rev td.act{white-space:nowrap}table.rev td.act .btn{vertical-align:middle}table.rev td.act form{display:inline-block;margin-left:0.25rem;vertical-align:middle}table.rev td.amt{font-weight:600}
.recv{font-size:0.6875rem;padding:1px 0.375rem;border-radius:0.625rem;display:inline-block;margin-top:0.1875rem}.recv.ok{background:var(--ok-soft);color:var(--ok)}.recv.part{background:var(--warn-soft);color:var(--warn)}.recv.no{background:var(--surface2);color:var(--mute)}
.bad{color:var(--bad)}.small{font-size:0.75rem}
form.toggle{display:inline-flex;align-items:center;gap:0.5rem;margin-right:0.375rem}form.toggle .sw{width:2.5rem;height:1.375rem;border-radius:0.6875rem;border:0;background:var(--c-grey);position:relative;cursor:pointer;padding:0}form.toggle .sw i{position:absolute;top:0.1875rem;left:0.1875rem;width:1rem;height:1rem;border-radius:50%;background:#fff;transition:left .15s}form.toggle .sw.on{background:var(--c-received)}form.toggle .sw.on i{left:1.3125rem}
.preview{padding:1.125rem 0.5rem;background:var(--paper);border-radius:0.375rem}.preview .inv{box-shadow:0 1px 0.5rem rgba(0,0,0,.12)}
ul.log{margin:0;padding:0 0 0 1.125rem}ul.log li{padding:0.1875rem 0;font-size:0.8125rem}
.outbox{display:flex;gap:1rem;align-items:flex-start}.mails{flex:0 0 20rem;display:flex;flex-direction:column;gap:0.375rem}.mail{display:block;padding:0.625rem 0.75rem;border-radius:0.375rem;background:var(--surface);border:1px solid var(--line2);color:var(--ink);text-decoration:none}.mail.on{border-color:var(--primary);box-shadow:inset 0.1875rem 0 0 var(--primary)}
.mail .m1{display:flex;justify-content:space-between;gap:0.5rem;font-size:0.75rem}.mail .m2{font-size:0.8125rem;margin:0.1875rem 0}.mail .m3{font-size:0.6875rem}.tag{display:inline-block;padding:0 0.375rem;border-radius:0.625rem;background:var(--bad-soft);color:var(--bad);font-size:0.6875rem;font-weight:600}.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.warn{background:var(--warn-soft);color:var(--warn)}.tag.soft{background:var(--surface2);color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}
.maildetail{flex:1;min-width:0}.mailhead{background:var(--surface);border:1px solid var(--line2);border-radius:0.375rem 0.375rem 0 0;padding:0.625rem 0.875rem;font-size:0.8125rem;line-height:1.7}.mailhead .k{display:inline-block;width:6.875rem;color:var(--mute)}.mailhead .views{display:flex;align-items:center;gap:0.375rem;margin-top:0.375rem}.btn.vw.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.frame{background:var(--paper);border:1px solid var(--line2);border-top:0;border-radius:0 0 0.375rem 0.375rem;padding:0.875rem;text-align:center}.frame iframe{width:100%;max-width:100%;height:71.875rem;border:0;background:var(--paper2);transition:width .2s}
table.inv-list td.act{white-space:nowrap}table.inv-list td.act form{display:inline;margin-left:0.25rem}

/* D11: phone. Desktop keeps everything above; below 51.25rem the app becomes a phone app in Monday's mobile style:
   a top bar with the board name and a ☰ that slides the sidebar in as a drawer, cards instead of rows, status moves in a bottom sheet,
   a full-screen detail sheet, a bottom nav, 44 px tap targets, safe-area padding. */
.mbar,.bnav,.side .xnav,.mclose,.banner .short{display:none}
.tw{max-width:100%;overflow-x:auto}
@media (max-width:820px){
 :root{--bh:calc(1.375rem + env(safe-area-inset-top));--mbh:3.25rem}
 body{-webkit-text-size-adjust:100%;font-size:0.9375rem}
 .banner{font-size:0.6875rem;padding:0.25rem 0.5rem;padding-top:calc(0.25rem + env(safe-area-inset-top));line-height:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.banner .long{display:none}.banner .short{display:inline}
 .mbar{display:flex;position:sticky;top:var(--bh);z-index:30;height:var(--mbh);align-items:center;gap:0.25rem;padding:0 0.375rem 0 0.125rem;background:var(--side);border-bottom:1px solid var(--line2)}
 .mbar .burger{display:inline-flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);font-size:1.5rem;border-radius:0.625rem;padding:0;cursor:pointer}
 .mbar .ttl{flex:1;min-width:0;line-height:1.15}.mbar .ttl b{display:block;font-size:1.0625rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mbar .ttl span{display:block;font-size:0.6875rem;color:var(--mute)}

 .mbar .thf{display:inline-flex}.mbar button.thm{border:0;background:none;padding:0;min-height:0;font:inherit;cursor:pointer}.mbar .thm{width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;color:var(--mute);text-decoration:none;font-size:1.125rem;border-radius:0.625rem}
 .shell{display:block;min-height:0}
 .side{position:fixed;top:0;left:0;bottom:0;height:100%;width:min(18.75rem,86vw);z-index:60;transform:translateX(-104%);transition:transform .22s ease;border-right:1px solid var(--line);padding:calc(0.625rem + env(safe-area-inset-top)) 0.625rem calc(0.625rem + env(safe-area-inset-bottom));overflow:auto;gap:0.125rem}
 body.nav-open .side{transform:none;box-shadow:var(--shadow)}
 .side .brand{font-size:1rem;padding:0.375rem 0.625rem 0.75rem}.side .xnav{display:inline-flex;margin-left:auto;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border:0;background:none;color:var(--mute);font-size:1.625rem;border-radius:0.625rem;padding:0;cursor:pointer}
 .side a.b{min-height:2.875rem;font-size:1rem;padding:0.5rem 0.75rem;border-radius:0.625rem}.side a.b .dot{width:0.625rem;height:0.625rem;border-radius:0.1875rem}.side .sec{padding-top:0.875rem}
 .side .me{font-size:0.8125rem}.side .me b{font-size:0.9375rem}.side .me .theme{margin-top:0.5rem}.side .me a,.side .me button.link{display:inline-block;padding:0.375rem 0}
 #navback{z-index:55}
 body.nav-open,body.panel-open{overflow:hidden}
 main{padding:0.5rem 0.75rem calc(5.25rem + env(safe-area-inset-bottom))}
 h1{font-size:1.1875rem}h2{font-size:0.9375rem}
 .top{position:sticky;top:calc(var(--bh) + var(--mbh));z-index:25;background:var(--bg);margin:0 -0.75rem 0.25rem;padding:0.375rem 0.75rem 0.5rem;gap:0.5rem}
 .top>h1{display:none}.top:has(>h1:only-child){display:none}.top>span.muted{font-size:0.8125rem}
 .top form.search{width:100%;order:9;margin:0}.top form.search input{flex:1;min-width:0;height:2.75rem;border-radius:0.75rem;font-size:1rem;padding:0 0.875rem;-webkit-appearance:none;appearance:none}.top form.search button{height:2.75rem;border-radius:0.75rem;padding:0 0.875rem;font-size:0.9375rem}
 .top form.search a{font-size:0.8125rem;white-space:nowrap}
 .hint{display:none}
 nav.tabs{margin:0 -0.75rem 0.625rem;padding:0 0.75rem}nav.tabs a{padding:0.625rem 0.75rem;font-size:0.875rem;min-height:2.75rem;display:inline-flex;align-items:center}
 nav.chips{flex-wrap:nowrap;overflow-x:auto;margin:-0.25rem -0.75rem 0.75rem;padding:0 0.75rem 0.125rem;scrollbar-width:none}nav.chips::-webkit-scrollbar{display:none}nav.chips a{flex:0 0 auto;padding:0.4375rem 0.75rem;font-size:0.8125rem;min-height:2.25rem;display:inline-flex;align-items:center}
 section.group{margin:0 0 1.125rem}section.group>h2{font-size:1rem;padding:0.375rem 0.125rem;margin:0 0 0.5rem;min-height:2.75rem}section.group>h2::before{font-size:1rem}
 /* rows become cards: a 3-column grid — PO# … status on line 1, store · bride on line 2, items on line 3, then the small fields three per line */
 table.mt{display:block;border:0;background:none;border-radius:0;table-layout:auto}table.mt thead{display:none}table.mt tbody{display:block}
 table.mt tbody tr{display:grid;grid-template-columns:auto 1fr auto;grid-auto-flow:row;gap:0.25rem 0.625rem;align-items:center;background:var(--surface);border:1px solid var(--line2);border-left:0.25rem solid var(--g,var(--line));border-radius:0.75rem;padding:0.625rem 0.75rem;margin:0 0 0.5rem;cursor:pointer}
 table.mt tbody tr:hover td{background:none}table.mt tbody tr:last-child{margin-bottom:0}
 table.mt td{display:block;height:auto;padding:0;border:0;white-space:normal;max-width:none;overflow:visible;font-size:0.875rem;line-height:1.35;text-align:left;min-width:0}
 table.mt td[data-th]{font-size:0.75rem;color:var(--mute);white-space:nowrap}
 table.mt td[data-th]::before{content:attr(data-th) " ";opacity:.75}
 table.mt tbody td.po{grid-row:1;grid-column:1/3;font-size:1rem;font-weight:600;color:var(--ink)}table.mt td.po a{color:var(--ink)}
 table.mt tbody td.st{grid-row:1;grid-column:2/4;justify-self:end;width:auto;min-width:0}
 table.mt tbody td[data-th=Store]{grid-row:2;grid-column:1;justify-self:start;width:max-content;font-size:0.75rem;font-weight:600;padding:0.125rem 0.5rem;border-radius:0.375rem;background:var(--surface2);color:var(--ink)}
 table.mt tbody td[data-th=Bride]{grid-row:2;grid-column:1/4;font-size:0.875rem;color:var(--ink);white-space:normal}table.mt tbody td[data-th=Store]~td[data-th=Bride]{grid-column:2/4}
 table.mt tbody td.items,table.mt tbody td[data-th=Items],table.mt tbody td[data-th=Item]{grid-row:3;grid-column:1/4;color:var(--mute);font-size:0.8125rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 table.mt tbody td.why{grid-column:1/4;padding:0.125rem 0;white-space:normal}table.mt td.why .pill{margin:0.125rem 0.25rem 0.125rem 0;white-space:normal}
 table.mt tbody td.po::before,table.mt tbody td.st::before,table.mt tbody td[data-th=Store]::before,table.mt tbody td[data-th=Bride]::before,table.mt tbody td.items::before,table.mt tbody td[data-th=Items]::before,table.mt tbody td[data-th=Item]::before,table.mt tbody td.why::before,table.mt tbody td.act::before{content:none}
 table.mt tbody td.r{color:var(--ink);font-size:0.8125rem}table.mt tbody td.r::before{color:var(--mute)}
 table.mt tbody td.act{grid-column:1/4;display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.25rem;white-space:normal}table.mt tbody td.act:empty{display:none}table.mt td.act .btn,table.mt td.act form{margin:0}
 table.mt td.act .btn{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 0.875rem;font-size:0.875rem;border-radius:0.625rem;flex:1 1 auto;justify-content:center}table.mt td.act form{flex:1 1 auto;display:flex}table.mt td.act form .btn{width:100%}
 table.mt td .more{font-size:0.75rem}
 .ph table.mt{display:inline-block}.ph table.mt tbody tr{display:inline-block;border:0;background:none;padding:0;margin:0;border-radius:0}
 .status{width:auto;display:inline-flex;height:2rem;padding:0 0.75rem;border-radius:0.5rem;font-size:0.8125rem;font-weight:600;line-height:1}span.status{font-weight:600}
 button.status{border:0;font:inherit;font-weight:600;font-size:0.875rem;height:2.75rem;padding:0 1.125rem;border-radius:0.75rem;cursor:pointer}
 /* the status move menu becomes a bottom sheet */
 details.st[open]::after{content:"";position:fixed;inset:0;background:var(--scrim);z-index:70}
 details.st .menu{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:71;border-radius:1.25rem 1.25rem 0 0;border:0;border-top:1px solid var(--line);padding:0.625rem 1rem calc(1.125rem + env(safe-area-inset-bottom));min-width:0;box-shadow:0 -0.625rem 2.5rem rgba(0,0,0,.45);animation:sheetUp .2s ease-out}
 details.st .menu::before{content:"";display:block;width:2.5rem;height:0.25rem;border-radius:0.125rem;background:var(--line);margin:0 auto 0.75rem}
 details.st .menu .t{font-size:0.9375rem;font-weight:600;color:var(--ink);text-align:center;margin:0 0 0.75rem}
 details.st .menu form{margin:0 0 0.5rem}details.st .menu .opt{height:3.125rem;font-size:1rem;font-weight:600;border-radius:0.75rem}
 details.st .menu input[type=text]{height:2.875rem;font-size:1rem;border-radius:0.75rem;padding:0 0.75rem;margin-bottom:0.375rem}
 .mclose{display:block;width:100%;height:3rem;margin-top:0.25rem;border:0;border-radius:0.75rem;background:var(--surface2);color:var(--ink);font:inherit;font-size:1rem;font-weight:600;cursor:pointer}
 @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
 @keyframes sheetIn{from{transform:translateX(100%)}to{transform:none}}
 /* the side panel becomes a full-screen detail sheet */
 .panel{top:0;width:100%;z-index:80;border-left:0;animation:sheetIn .22s ease-out;padding-top:env(safe-area-inset-top)}
 .panel .bar{padding:0.25rem 0.5rem;min-height:3.25rem;gap:0.25rem}.panel .bar .x{order:-1;margin:0;font-size:1rem;font-weight:600;color:var(--primary);padding:0 0.625rem;height:2.75rem;display:inline-flex;align-items:center;gap:0.25rem}
 .panel .bar .x{font-size:0}.panel .bar .x::before{content:"\2039  Back";font-size:1.0625rem;line-height:1}
 .panel .bar a.full{margin-left:auto;font-size:0.8125rem;padding:0 0.625rem;height:2.75rem;display:inline-flex;align-items:center;text-decoration:none}
 .panel .body{padding:0.75rem 0.875rem calc(2.5rem + env(safe-area-inset-bottom));overflow:auto;-webkit-overflow-scrolling:touch}.panel .body h1{font-size:1.25rem}
 .ph{gap:0.5rem}.ph .status{height:1.875rem;font-size:0.75rem}.kv{grid-template-columns:6.5rem 1fr;font-size:0.875rem;gap:0.375rem 0.625rem}
 .side2{grid-template-columns:1fr;gap:0.875rem}
 table.lines{font-size:0.8125rem}table.lines td,table.lines th{padding:0.375rem 0.3125rem;word-break:break-word}
 .q{padding-top:0.75rem;margin-top:0.75rem}.q .opts{gap:0.5rem;margin-top:0.5rem}.q .opts button{min-height:3rem;flex:1 1 44%;border-radius:0.75rem;font-size:0.9375rem;font-weight:600;padding:0.5rem 0.625rem}
 .q input[type=text]{height:2.875rem;font-size:1rem;border-radius:0.75rem;padding:0 0.75rem}
 button,a.btn{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;border-radius:0.75rem;font-size:0.9375rem}
 button.link{min-height:0;display:inline;padding:0;border-radius:0;font-size:inherit}
 .btn.small{min-height:2.5rem;padding:0 0.75rem;font-size:0.875rem}
 .login{margin:1.5rem 0.75rem;padding:1.375rem 1.125rem}.login input{height:3rem;font-size:1rem;border-radius:0.75rem;padding:0 0.75rem}.login button{height:3.125rem;border-radius:0.75rem;font-size:1rem}
 .pager{font-size:0.875rem}.pager a{padding:0.625rem 0;display:inline-block}
 .notice,.info{font-size:0.875rem}
 /* bottom nav */
 .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--side);border-top:1px solid var(--line2);padding:0.125rem 0.25rem env(safe-area-inset-bottom)}
 .bnav a,.bnav button{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.1875rem;min-height:3.5rem;font:inherit;font-size:0.6875rem;font-weight:500;color:var(--mute);text-decoration:none;background:none;border:0;position:relative;padding:0.25rem 0.125rem;border-radius:0;cursor:pointer}
 .bnav .on{color:var(--primary)}.bnav svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .bnav .badge{position:absolute;top:0.3125rem;left:calc(50% + 0.25rem);line-height:1.0625rem;min-width:1.125rem;font-size:0.6875rem}
 /* create invoice: a floating action button on the store board */
 .top form.inline:has(.btn.cinv){position:fixed;right:1rem;bottom:calc(4.375rem + env(safe-area-inset-bottom));z-index:45;margin:0}
 .btn.cinv{height:3.25rem;border-radius:1.625rem;padding:0 1.25rem;font-size:0.9375rem;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.35)}
 .top>a.btn.invl{display:none}
 /* invoice review */
 .top .actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.top .actions form.toggle{grid-column:1/-1;margin:0;min-height:2.75rem;flex-wrap:wrap}.top .actions form.toggle .sw{width:2.875rem;height:1.625rem}.top .actions form.toggle .sw i{width:1.25rem;height:1.25rem}.top .actions form.toggle .sw.on i{left:1.4375rem}
 .top .actions form.inline{display:flex}.top .actions form.inline .btn,.top .actions>.btn{width:100%;min-height:3rem;font-size:0.9375rem}
 .top .ipill{height:1.75rem;font-size:0.75rem}
 table.rev tbody tr{cursor:default;grid-template-columns:auto 1fr auto}
 table.rev tbody td.po{grid-column:1}table.rev tbody td[data-th=Bride]{grid-row:1;grid-column:2/4;color:var(--mute);font-size:0.8125rem;text-align:right}
 table.rev tbody td[data-th=Item]{grid-row:2;grid-column:1/4;display:block;white-space:normal;overflow:visible;color:var(--ink);font-size:0.875rem}table.rev tbody td[data-th=Item] .small{margin-top:0.125rem}
 table.rev tbody td[data-th=Shipped]{grid-row:3;grid-column:1/4;margin-top:0.125rem;text-align:left}
 table.rev tbody td[data-th=Qty]{grid-row:4;grid-column:1;display:flex;align-items:center;gap:0.375rem}table.rev tbody td[data-th="Unit price"]{grid-row:4;grid-column:2;display:flex;align-items:center;flex-wrap:wrap;gap:0 0.25rem}
 table.rev tbody td[data-th=Qty] form{display:flex}table.rev tbody td[data-th="Unit price"]::before{content:none}table.rev tbody td[data-th="Unit price"] .small{flex:0 0 100%;font-size:0.6875rem}
 table.rev tbody td.amt{grid-row:4;grid-column:3;font-size:1rem;color:var(--ink);text-align:right;align-self:start;padding-top:0.625rem}table.rev tbody td.amt::before{display:block;font-weight:400;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.04em;opacity:.6}
 table.rev input.qty{width:3.625rem;height:2.75rem;font-size:1rem;border-radius:0.625rem;padding:0 0.5rem}table.rev input.price{width:6rem;height:2.75rem;font-size:1rem;border-radius:0.625rem;padding:0 0.5rem}table.rev .cur{line-height:2.75rem;font-size:0.9375rem}
 table.rev tbody td.act{grid-row:5}table.rev tbody tr.off td.act{display:none}table.rev tbody tr.off td.r{grid-row:4}
 .preview{padding:0.5rem 0}.preview .inv{border-radius:0.5rem}
 ul.log li{font-size:0.875rem;padding:0.3125rem 0}
 /* invoices list, outbox */
 table.inv-list tbody td[data-th=Store]{grid-column:1/4;background:none;padding:0;font-size:0.875rem;color:var(--ink);font-weight:600}table.inv-list tbody td[data-th=Store]::before{content:none}table.inv-list tbody td[data-th=Date]{grid-column:1}
 .outbox{flex-direction:column;gap:0.75rem}.mails{flex:1 1 auto;width:100%}.mail{padding:0.75rem 0.875rem;border-radius:0.75rem}.mail .m2{font-size:0.875rem}
 .mailhead{font-size:0.8125rem;line-height:1.5;padding:0.625rem 0.75rem}.mailhead>div{margin:0 0 0.375rem}.mailhead .k{display:block;width:auto;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.04em}.mailhead .views{flex-wrap:wrap;margin-top:0.625rem}.mailhead .views .btn{min-height:2.5rem}.mailhead .views .vw,.mailhead .views>.muted{display:none}
 .frame{padding:0.375rem;overflow:hidden}.frame iframe{height:81.25rem;max-width:100%}
 .testmail{font-size:0.8125rem;padding:0.625rem 0.75rem;border-radius:0.625rem}
 .tw{margin:0 -0.75rem;padding:0 0.75rem}.panel .tw{margin:0}
 pre{font-size:0.75rem}
}

.thread{margin:1.125rem 0;max-width:47.5rem}.thread .th{display:flex;align-items:center;gap:0.625rem}.thread h2{margin:0;font-size:1rem}
.cpost,.cedit form{display:flex;flex-direction:column;gap:0.375rem;margin:0.5rem 0 0.75rem}
textarea{width:100%;font:inherit;font-size:0.875rem;padding:0.5rem;border:1px solid var(--line);border-radius:0.375rem;background:var(--surface2);color:var(--ink);resize:vertical;box-sizing:border-box}
.crow{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
.cmt{border:1px solid var(--line2);border-radius:0.5rem;padding:0.625rem 0.75rem;margin:0 0 0.5rem;background:var(--surface)}
.cmt.new{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.cmt header{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.25rem}.cmt .cbody{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.cmt details.cedit summary{font-size:0.75rem;color:var(--mute);cursor:pointer;margin-top:0.375rem}
.mention{color:var(--link);font-weight:600}.pill.vis{background:var(--warn-soft);color:var(--warn)}
.mlist{display:flex;flex-direction:column;gap:0.375rem;max-width:47.5rem}.mrow{display:block;border:1px solid var(--line2);border-radius:0.5rem;padding:0.625rem 0.75rem;color:var(--ink);text-decoration:none;background:var(--surface)}
.mrow.new{border-left:0.25rem solid var(--primary)}.mrow .mh{display:flex;gap:0.375rem;align-items:center;flex-wrap:wrap}.mrow .mb{display:block;margin-top:0.25rem;color:var(--mute)}
.prefs{display:grid;gap:0.375rem;max-width:32.5rem;border:1px solid var(--line2);border-radius:0.5rem;padding:0.75rem;margin:0 0 0.625rem;background:var(--surface)}
.prefs label{display:flex;flex-direction:column;gap:0.1875rem;font-size:0.75rem;color:var(--mute)}.prefs select{font:inherit;padding:0.3125rem;border-radius:0.25rem;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.ok-note{padding:0.5rem 0.625rem;border-radius:0.375rem;background:var(--ok-soft);border:1px solid var(--ok);margin-bottom:0.75rem;max-width:32.5rem}
.switches{display:flex;flex-direction:column;gap:0.375rem}.sw{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.nlog{display:flex;flex-direction:column;gap:0.25rem}.nrow{border:1px solid var(--line2);border-radius:0.375rem;padding:0.375rem 0.625rem;background:var(--surface)}.nrow summary{cursor:pointer;display:flex;gap:0.375rem;align-items:center;flex-wrap:wrap}
.nrow pre{white-space:pre-wrap;font-size:0.75rem;background:var(--surface2);padding:0.5rem;border-radius:0.375rem}
.badge.m{margin-left:auto}
.thopts{display:flex;gap:0.625rem;flex-wrap:wrap}
.prefs .thopt{flex:1 1 12.5rem;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;align-items:center;gap:0.125rem 0.625rem;padding:0.625rem 0.75rem;border:1px solid var(--line);border-radius:0.625rem;cursor:pointer;color:var(--ink);font-size:0.875rem;background:var(--surface)}
.prefs .thopt.on,.prefs .thopt:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--primary-soft)}
.thopt input{grid-row:1/3;margin:0;accent-color:var(--primary);width:1.125rem;height:1.125rem}.thopt b{grid-column:3}.thopt .small{grid-column:3}
.thopt>span[aria-hidden]{grid-row:1/3;grid-column:2;display:inline-flex;width:2.875rem;height:2rem;border-radius:0.4375rem;overflow:hidden;border:1px solid var(--line);flex-direction:column;padding:0.25rem;gap:0.1875rem}
.thopt .sw-light{background:#f6f5f8}.thopt .sw-light i{display:block;height:0.3125rem;border-radius:0.125rem;background:#fff;border:1px solid #e3dfe6}.thopt .sw-light i:first-child{background:#b83a64;border-color:#b83a64;width:60%}
.thopt .sw-dark{background:#181b34}.thopt .sw-dark i{display:block;height:0.3125rem;border-radius:0.125rem;background:#30324e}.thopt .sw-dark i:first-child{background:#e8829e;width:60%}
.theme-form .btn{justify-self:start}
.size-form h3{margin:0 0 0.25rem;font-size:0.875rem}.thopt .sw-size{align-items:center;justify-content:center;font-weight:700;color:var(--ink);background:var(--surface2);padding:0}.thopt .sz-small{font-size:0.75rem}.thopt .sz-normal{font-size:0.875rem}.thopt .sz-large{font-size:1.0625rem}.thopt .sz-xlarge{font-size:1.25rem}
@media (min-width:821px){.prefs>.btn{justify-self:start;min-width:7.5rem}}
@media (max-width:820px){.thread{margin:0.875rem 0}.cmt{padding:0.625rem}.crow .btn{min-height:2.5rem;min-width:5.5rem}.prefs{max-width:none}textarea{font-size:1rem}}

.dg{max-width:47.5rem}.dg .dnav{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin:0 0 0.75rem}.dg .dnav .btn{min-width:2.75rem;text-align:center}
.dg .dnav b{font-size:0.9375rem}.dg .dnav .btn{min-height:2rem;padding:0.25rem 0.75rem;line-height:1.2}h2#digest{scroll-margin-top:5.625rem}.dsec{border:1px solid var(--line2);border-radius:0.625rem;background:var(--surface);padding:0.75rem 0.875rem;margin:0 0 0.625rem}
.dsec h2{font-size:0.9375rem;margin:0 0 0.5rem;display:flex;align-items:center;gap:0.5rem}.dsec h2 .n{font-size:0.75rem;font-weight:600;background:var(--primary-soft);color:var(--primary);border-radius:0.5625rem;padding:1px 0.5rem}
.dsec ul{margin:0;padding-left:1.125rem}.dsec li{margin:0 0 0.375rem;line-height:1.45;overflow-wrap:anywhere}.dsec .none{margin:0;color:var(--mute)}
.dprev{border:1px solid var(--line2);border-radius:0.625rem;background:var(--surface);padding:0.75rem 0.875rem;margin:0 0 0.875rem}.dprev h2{font-size:0.9375rem;margin:0 0 0.5rem}
.wa{background:#e7f8dc;color:#1f2a1c;border-radius:0.625rem 0.625rem 0.625rem 0.125rem;padding:0.625rem 0.75rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.875rem;line-height:1.4;max-width:28.75rem;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.dstate{margin:0 0 0.5rem;font-size:0.875rem}.dg .who{font-size:0.8125rem;color:var(--mute);margin:0 0 0.625rem}
.prefs .secs{display:grid;gap:0.375rem}.prefs .chk{flex-direction:row!important;align-items:flex-start;gap:0.5rem!important;font-size:0.875rem!important;color:var(--ink)!important}
.prefs .chk input{margin-top:0.1875rem;width:1.125rem;height:1.125rem;flex:none}.prefs .chk span small{display:block;color:var(--mute);font-size:0.75rem}
.prefs .row2{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.prefs fieldset{border:0;padding:0;margin:0;display:grid;gap:0.375rem}.prefs legend{font-size:0.75rem;color:var(--mute);padding:0;margin:0 0 0.25rem}
.prefs .stores{display:flex;flex-wrap:wrap;gap:0.375rem 0.875rem}.prefs .stores .chk{font-size:0.8125rem!important;align-items:center}.prefs .stores .chk input{margin-top:0}.prefs .acts{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center}
details.dgo{max-width:32.5rem;margin:0 0 0.5rem}details.dgo summary{cursor:pointer;padding:0.5rem 0;font-weight:600}
@media (max-width:820px){.prefs .row2{grid-template-columns:1fr}.dsec{padding:0.75rem}.prefs .acts .btn{min-height:2.5rem}}

.acct{max-width:26.25rem}
.acct .mark{display:flex;align-items:center;gap:0.5rem;font-weight:700;font-size:0.9375rem;color:var(--ink);margin:0 0 1.125rem}
.acct .mark i{width:1.375rem;height:1.375rem;border-radius:0.4375rem;background:var(--primary);display:inline-block}
.acct h1{font-size:1.375rem;line-height:1.25;margin:0 0 0.5rem}
.acct .lead{color:var(--mute);margin:0 0 0.375rem;font-size:0.9375rem;line-height:1.45}
.acct .pwhelp{font-size:0.8125rem;color:var(--mute);margin:0.375rem 0 0}
.acct .show{display:flex;align-items:center;gap:0.5rem;font-weight:400;margin:0.875rem 0 0;font-size:0.875rem;color:var(--ink)}
.acct .show input{width:auto;height:auto;margin:0}
.acct .foot{font-size:0.8125rem;color:var(--mute);margin:1rem 0 0;line-height:1.45}
.acct .who{display:block;font-size:0.875rem;color:var(--mute);margin:0.25rem 0 0}
.acct .who b{color:var(--ink)}
.acct a.alt{display:block;text-align:center;margin-top:0.875rem}
.prefs.pwbox{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.625rem}.prefs.pwbox span{flex:1 1 100%;font-size:0.875rem;color:var(--ink)}.prefs.pwbox a.btn{text-decoration:none}
.users-wrap{overflow-x:auto}
table.users{border-collapse:collapse;width:100%;max-width:61.25rem;background:var(--surface);border:1px solid var(--line2);border-radius:0.5rem}
table.users th,table.users td{text-align:left;padding:0.625rem 0.75rem;border-bottom:1px solid var(--line2);vertical-align:middle;font-size:0.875rem}
table.users th{font-size:0.75rem;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
table.users td .sub{display:block;font-size:0.75rem;color:var(--mute)}
table.users td.acts{white-space:nowrap}table.users td.acts form{display:inline-block;margin:0.125rem 0.25rem 0.125rem 0}
.pill.wait{background:var(--warn-soft,#fff3d6);color:var(--ink);border:1px solid var(--warn,#c98a00)}
.linkbox{max-width:40rem;background:var(--surface);border:1px solid var(--ok);border-radius:0.625rem;padding:0.875rem 1rem;margin:0 0 1rem}
.linkbox h2{margin:0 0 0.375rem;font-size:1rem}.linkbox .row{display:flex;gap:0.5rem;margin:0.5rem 0}
.linkbox input{flex:1 1 auto;min-width:0;font:inherit;font-size:0.8125rem;padding:0.5625rem;border:1px solid var(--line);border-radius:0.375rem;background:var(--surface2);color:var(--ink)}
.linkbox button{flex:0 0 auto}.linkbox p{margin:0.25rem 0;font-size:0.8125rem;color:var(--mute)}
table.events{border-collapse:collapse;max-width:61.25rem;width:100%}table.events td{padding:0.375rem 0.625rem;border-bottom:1px solid var(--line2);font-size:0.8125rem}
table.events td.t{color:var(--mute);white-space:nowrap}
@media (max-width:760px){
 .acct{margin:1.25rem 0.75rem}.acct h1{font-size:1.3125rem}
 .acct .show input{height:auto}
 table.users,table.users tbody,table.users tr,table.users td{display:block;width:100%}
 table.users thead{display:none}
 table.users tr{border-bottom:1px solid var(--line2);padding:0.5rem 0}
 table.users td{border:0;padding:0.25rem 0.75rem}
 table.users td[data-th]{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 0.375rem}table.users td[data-th]::before{content:attr(data-th);flex:0 0 5.25rem;font-size:0.75rem;color:var(--mute)}
 table.users td[data-th] .sub{display:inline}
 table.users td.acts form{display:block;margin:0.375rem 0}table.users td.acts .btn{width:100%;min-height:2.75rem}
 .linkbox .row{flex-direction:column}.linkbox button{min-height:2.75rem}
}

@font-face{font-family:"Inter var";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var-latin.woff2) format("woff2")}
html[data-style=clickup]{--font:"Inter var",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#f7f8f9;--surface:#fff;--surface2:#f6f7f9;--ink:#292d34;--mute:#656f7d;--line:#e3e5ea;--line2:#eceef1;--hover:#f7f7fc;
  --primary:#5b45d9;--on-primary:#fff;--primary-ink:#fff;--primary-soft:#f0edfd;--link:#5b45d9;--focus:#7b68ee;--accent:#7b68ee;--side:#fbfbfc;--side-ink:#292d34;
  --brand:linear-gradient(135deg,#a594ff,#5b45d9);--shadow:0 0.5rem 1.75rem rgba(30,24,70,.14);--radius:0.5rem;--radius-lg:0.625rem;--hdr:#fff;--fs:0.875rem;--fs-phone:0.9375rem;
  --c-new:#1e6fd9;--c-wait:#c2410c;--c-packed:#c2410c;--c-sent:#0e7490;--c-received:#15803d;--c-invoiced:#6d4ae0;--c-canceled:#6b7280;--c-grey:#d5d8de;
  --on-wait:#fff;--t-wait:#9a3412;--t-grey:#656f7d;--info-soft:#eef3fc;--paper:#f1f1f4;--paper2:#f9f9fb;
  --s-new:#1e6fd9;--s-new-ink:#fff;--s-packed:#c2410c;--s-packed-ink:#fff;--s-sent:#0e7490;--s-sent-ink:#fff;--s-received:#15803d;--s-received-ink:#fff;--s-invoiced:#6d4ae0;--s-invoiced-ink:#fff;--s-part:#a3369a;--s-part-ink:#fff;--s-paid:#047857;--s-paid-ink:#fff;--s-overdue:#d12a3f;--s-overdue-ink:#fff;--s-open:#b45309;--s-open-ink:#fff;--s-canceled:#6b7280;--s-canceled-ink:#fff;--s-review:#d12a3f;--s-review-ink:#fff;}
html[data-style=clickup][data-theme=dark]{color-scheme:dark;--bg:#17181c;--surface:#202127;--surface2:#272830;--ink:#e6e7ea;--mute:#9a9ea9;--line:#3a3c45;--line2:#2e3038;--hover:#2a2b34;
  --primary:#8f7cf2;--on-primary:#15121f;--primary-ink:#15121f;--primary-soft:rgba(143,124,242,.18);--link:#a99bf7;--focus:#a99bf7;--accent:#8f7cf2;--side:#1b1c21;--side-ink:#e6e7ea;
  --shadow:0 0.5rem 1.75rem rgba(0,0,0,.5);--hdr:#202127;--t-wait:#f0a070;--t-grey:#9a9ea9;--c-grey:#3a3c45;--info-soft:rgba(30,111,217,.2);--paper:#1d1e24;--paper2:#24252c;
  --bad:#ff7a8f;--bad-soft:rgba(255,122,143,.15);--ok:#3ddc97;--ok-soft:rgba(61,220,151,.14);--warn:#ffb54d;--warn-soft:rgba(255,181,77,.15);--on-bad:#1d1420;--scrim:rgba(0,0,0,.55)}

/* type, numbers, radii */
html[data-style] body{font-family:var(--font);font-size:var(--fs);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11"}
html[data-style] h1{font-weight:700;letter-spacing:-.02em;font-size:1.375rem}html[data-style] h2{font-weight:600}
html[data-style] .lo-num,html[data-style] .lo-d,html[data-style] .lo-inv,html[data-style] .lo-gc,html[data-style] .lo-fc b,html[data-style] td.r,html[data-style] th.r,html[data-style] .money,html[data-style] table.lines td.r{font-variant-numeric:tabular-nums}
html[data-style] input,html[data-style] select,html[data-style] textarea,html[data-style] button{font-family:inherit}
html[data-style] input:not([type]),html[data-style] input[type=text],html[data-style] input[type=search],html[data-style] input[type=password],html[data-style] input[type=email],html[data-style] input[type=number],html[data-style] select,html[data-style] textarea{border-radius:var(--radius);background:var(--surface);border-color:var(--line)}
html[data-style] input:not([type]):focus,html[data-style] input[type=text]:focus,html[data-style] input[type=search]:focus,html[data-style] input[type=password]:focus,html[data-style] select:focus,html[data-style] textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 0.1875rem var(--primary-soft)}
html[data-style] button,html[data-style] a.btn{border-radius:var(--radius);font-weight:500}
html[data-style] button.primary,html[data-style] a.btn.primary,html[data-style] .btn.cinv{box-shadow:0 1px 0.125rem rgba(30,24,70,.12)}
html[data-style] button.link{border-radius:0;font-weight:inherit;box-shadow:none}
html[data-style] .top form.search input{border-radius:var(--radius);background:var(--surface)}html[data-style] .top form.search button{border-radius:var(--radius)}
/* sidebar + phone bars */
html[data-style] .side{background:var(--side)}
html[data-style] .side .brand{font-size:1rem;font-weight:700;letter-spacing:-.01em}html[data-style] .side .brand i{border-radius:0.4375rem}
html[data-style] .side a.b{border-radius:var(--radius);font-weight:500}
html[data-style] .side a.b.on{background:var(--primary-soft);color:var(--link);font-weight:600}
html[data-style] .side a.b .dot{border-radius:50%}
@media (min-width:821px){html[data-style] main{padding:1rem 1.5rem 2.5rem}}
/* status pills everywhere (the order page, the store view, invoices): solid, uppercase, rounded */
html[data-style] .status{height:auto;width:auto;display:inline-flex;align-items:center;justify-content:center;padding:0.25rem 0.5625rem;border-radius:0.3125rem;font-size:0.6563rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.3;max-width:100%}
html[data-style] .s-new{background:var(--s-new);color:var(--s-new-ink)}html[data-style] .s-packed{background:var(--s-packed);color:var(--s-packed-ink)}html[data-style] .s-sent{background:var(--s-sent);color:var(--s-sent-ink)}
html[data-style] .s-received{background:var(--s-received);color:var(--s-received-ink)}html[data-style] .s-invoiced{background:var(--s-invoiced);color:var(--s-invoiced-ink)}html[data-style] .s-canceled{background:var(--s-canceled);color:var(--s-canceled-ink)}
html[data-style] .s-grey{background:var(--c-grey);color:var(--ink)}
html[data-style] table.mt td.st{padding:0 0.5rem;overflow:visible}html[data-style] table.mt td.st details.st,html[data-style] table.mt td.st>span.status{vertical-align:middle}
html[data-style] details.st summary.status{cursor:pointer}html[data-style] details.st .menu{border-radius:var(--radius-lg);top:2.125rem;padding:0.625rem}html[data-style] details.st .menu .opt{border-radius:var(--radius);font-weight:600;text-transform:uppercase;font-size:0.6875rem;letter-spacing:.04em}
html[data-style] .tag{border-radius:0.3125rem;padding:0.125rem 0.4375rem;font-size:0.6563rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.3}
html[data-style] .ph .status{height:auto;padding:0.3125rem 0.6875rem;border-radius:0.375rem;font-size:0.6875rem}
/* tables of the other pages: no vertical lines, a quiet uppercase header, a thin group colour bar */
html[data-style] table.mt{border-radius:var(--radius-lg);border-left-width:0.25rem;box-shadow:0 1px 0.125rem rgba(16,24,40,.04)}
html[data-style] table.mt th{font-size:0.6563rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-right:0;background:var(--hdr)}
html[data-style] table.mt td{border-right:0}
html[data-style] section.group>h2{font-size:0.9375rem}html[data-style] section.group>h2 .n{font-variant-numeric:tabular-nums}
html[data-style] .tw table,html[data-style] table.lines,html[data-style] table.inv-list{border-radius:var(--radius-lg)}
html[data-style] .badge{border-radius:0.625rem;font-variant-numeric:tabular-nums}
html[data-style] .panel{border-radius:0.875rem 0 0 0.875rem}
html[data-style] .hint{color:var(--mute)}
html[data-style] nav.tabs a.tab{border-radius:var(--radius) var(--radius) 0 0;font-weight:500}html[data-style] nav.tabs a.tab.on{color:var(--link);border-bottom-color:var(--primary);font-weight:600}
html[data-style] .card,html[data-style] .box,html[data-style] .mailhead,html[data-style] .loginbox{border-radius:var(--radius-lg)}
/* the board (board.ts) */
html[data-style] .lo-top h1{font-size:1.375rem;font-weight:700;letter-spacing:-.02em}
html[data-style] .lo-scroll{border-radius:var(--radius-lg);border-color:var(--line2);box-shadow:0 1px 0.125rem rgba(16,24,40,.04)}
html[data-style] .lo-t{font-size:0.8438rem}
html[data-style] .lo-t thead th{font-size:0.75rem;font-weight:600;color:var(--mute);background:var(--hdr)}
html[data-style] .lo-po a{color:var(--ink)}
html[data-style] .lo-fc{border-radius:var(--radius);border-color:var(--line);padding:0.3125rem 0.625rem;font-weight:500}
html[data-style] .lo-fc.on{background:var(--primary-soft);border-color:var(--primary);box-shadow:none;color:var(--link)}
html[data-style] .lo-find{border-radius:var(--radius-lg);border-color:var(--line);box-shadow:0 1px 0.125rem rgba(16,24,40,.05);padding:0.375rem 0.375rem 0.375rem 0.75rem}
html[data-style] .lo-find:focus-within{border-color:var(--accent);box-shadow:0 0 0 0.1875rem var(--primary-soft)}
html[data-style] .lo-fbtn{border-radius:var(--radius);background:var(--primary-soft);color:var(--link);font-weight:600}
html[data-style] .lo-fbtn b{background:var(--primary)}
html[data-style] .lo-flag{background:var(--s-review);color:var(--s-review-ink)}
html[data-style] .lo-cm.has{color:var(--accent)}html[data-style] .lo-cm b{background:var(--accent)}
html[data-style] .lo-filters{border-radius:0.875rem}
/* Packed by: avatar circles */
.lo-av{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent,#579bfc);color:#fff;font-size:0.6875rem;font-weight:600;vertical-align:middle}
.lo-av.none{background:none;border:1.5px dashed var(--line);color:transparent;opacity:.7;width:1.375rem;height:1.375rem}
/* pills in plain cells, no vertical lines, coloured group headers with a count */
html[data-style] .lo-t th,html[data-style] .lo-t td{border-right:0;border-left:0}
html[data-style] .lo-t thead th{text-transform:uppercase;letter-spacing:.03em;font-size:0.6563rem;padding:0 0.25rem;border-bottom:1px solid var(--line)}
html[data-style] .lo-t .lo-po{border-left:0;box-shadow:1px 0 0 var(--line2)}
html[data-style] .lo-t thead th.h0{border-left:0}
html[data-style] .lo-t tbody tr td.lo-st,html[data-style] .lo-t tbody tr:hover td.lo-st{background:transparent;color:var(--ink);border-right:0 !important;border-bottom:1px solid var(--line2) !important}
html[data-style] .lo-st .lo-pill{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--sf);color:var(--sfi);border-radius:0.3125rem;padding:0.1875rem 0.5rem;font-size:0.6563rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.35;vertical-align:middle;cursor:default}
html[data-style] .lo-st details.st>summary.lo-pill{cursor:pointer;list-style:none}html[data-style] .lo-st details.st>summary.lo-pill::after{content:" ▾";font-size:0.5625rem;opacity:.85}
html[data-style] .lo-st details.st .menu{top:1.875rem;left:0;right:auto}
html[data-style] .lo-st small{color:var(--mute);margin-top:1px;font-size:0.625rem}
html[data-style] .lo-chip{border-radius:0.3125rem;text-transform:uppercase;font-size:0.6563rem;font-weight:700;letter-spacing:.04em}
html[data-style] .lo-gh td{border-bottom:0}
html[data-style] .lo-gt{color:var(--ink);padding:0.75rem 0.5rem 0.375rem}
html[data-style] .lo-gn{background:var(--sf,var(--g));color:var(--sfi,#fff);border-radius:0.3125rem;padding:0.1875rem 0.5625rem;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
html[data-style] .lo-gc{font-size:0.7813rem;font-weight:500;color:var(--mute)}
html[data-style] .lo-car{color:var(--mute)}
html[data-style] .g-new{--g:var(--s-new);--sf:var(--s-new);--sfi:var(--s-new-ink)}html[data-style] .g-packed{--g:var(--s-packed);--sf:var(--s-packed);--sfi:var(--s-packed-ink)}html[data-style] .g-sent{--g:var(--s-sent);--sf:var(--s-sent);--sfi:var(--s-sent-ink)}html[data-style] .g-received{--g:var(--s-received);--sf:var(--s-received);--sfi:var(--s-received-ink)}html[data-style] .g-invoiced{--g:var(--s-invoiced);--sf:var(--s-invoiced);--sfi:var(--s-invoiced-ink)}html[data-style] .g-canceled{--g:var(--s-canceled);--sf:var(--s-canceled);--sfi:var(--s-canceled-ink)}

/* phone: a bit larger type, a clean top bar, the floating Quick find */
@media (max-width:820px){
  html[data-style] body{font-size:var(--fs-phone)}
  html[data-style] .mbar{background:var(--surface);border-bottom:1px solid var(--line2);box-shadow:0 1px 0.1875rem rgba(16,24,40,.05)}
  html[data-style] .mbar .ttl b{font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
  html[data-style] .mbar .ttl span{font-size:0.75rem}
  html[data-style] .lo{--rowh:2.25rem}
  html[data-style] .lo-t{font-size:0.875rem}
  html[data-style] .lo-find{bottom:calc(4.5rem + env(safe-area-inset-bottom));border-radius:0.875rem;padding:0.4375rem 0.4375rem 0.4375rem 0.875rem;box-shadow:0 0.625rem 1.875rem rgba(20,20,50,.18),0 1px 0.1875rem rgba(20,20,50,.08);border-color:var(--line2);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(0.75rem);backdrop-filter:blur(0.75rem)}
  html[data-style][data-theme=dark] .lo-find{background:rgba(32,33,39,.94)}
  html[data-style] .lo-find input{font-size:1rem}
  html[data-style] .bnav{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(0.75rem);backdrop-filter:blur(0.75rem)}
  html[data-style][data-theme=dark] .bnav{background:rgba(27,28,33,.96)}
  html[data-style] .bnav a,html[data-style] .bnav button{font-size:0.7188rem;font-weight:600}
  html[data-style] .lo-scroll{border-radius:0}
}

.lo{--rowh:2.125rem}
.lo-top{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin:0 0 0.25rem}.lo-top h1{margin:0;font-size:1.25rem;margin-right:auto}
.lo-hint{margin:0 0 0.5rem}
.lo-filters{display:flex;flex-direction:column;gap:0.375rem;margin:0 0 0.5rem}.lo-fr{display:flex;gap:0.375rem;align-items:center;flex-wrap:wrap}.lo-fl{font-size:0.75rem;color:var(--mute);width:2.75rem}
.lo-fc{display:inline-flex;align-items:center;gap:0.3125rem;padding:0.25rem 0.625rem;border:1px solid var(--line);border-radius:0.875rem;font-size:0.7813rem;color:var(--ink);text-decoration:none;background:var(--surface);white-space:nowrap}
.lo-fc b{font-weight:600;color:var(--mute)}.lo-fc i{width:0.5625rem;height:0.5625rem;border-radius:0.125rem;display:inline-block}
.lo-fc.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.lo-fc.c-new i{background:var(--s-new)}.lo-fc.c-packed i{background:var(--s-packed)}.lo-fc.c-sent i{background:var(--s-sent)}.lo-fc.c-received i{background:var(--s-received)}.lo-fc.c-invoiced i{background:var(--s-invoiced)}.lo-fc.c-canceled i{background:var(--s-canceled)}.lo-fc.c-review i{background:var(--s-overdue);border-radius:50%}.lo-fc.c-wait i{background:var(--c-wait);border-radius:50%}
.lo-find{display:flex;align-items:center;gap:0.5rem;background:var(--surface);border:1px solid var(--line);border-radius:1.25rem;padding:0.25rem 0.375rem 0.25rem 0.75rem;margin:0 0 0.625rem;max-width:32.5rem;color:var(--mute)}
.lo-find input{flex:1;border:0 !important;outline:0;background:none !important;font:inherit;font-size:0.9375rem;color:var(--ink);min-width:0;padding:0.25rem 0;box-shadow:none !important}
.lo-find .lo-clear{color:var(--mute);text-decoration:none;padding:0 0.25rem}
.lo-fbtn{display:none;align-items:center;gap:0.25rem;border:0;background:var(--surface2);color:var(--ink);border-radius:0.875rem;padding:0.375rem 0.625rem;font:inherit;font-size:0.8125rem}.lo-fbtn b{background:var(--primary);color:#fff;border-radius:0.5rem;padding:0 0.3125rem;font-size:0.6875rem}
/* the scroll box: both directions, so the header (top) and the PO# column (left) stay put */
.lo-scroll{overflow:auto;max-height:calc(100vh - 14.375rem);border:1px solid var(--line2);border-radius:0.5rem;background:var(--surface);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.lo-t{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;min-width:68.75rem;font-size:0.8125rem}
.lo-t th,.lo-t td{height:var(--rowh);padding:0 0.5rem;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle}
.lo-t thead th{position:sticky;top:0;z-index:3;background:var(--hdr);font-weight:500;font-size:0.75rem;color:var(--mute);height:2rem;text-align:center}
.lo-t thead th.h0{left:0;z-index:5;text-align:left}
.lo-t .lo-po{position:sticky;left:0;z-index:2;background:var(--surface);font-weight:600;border-left:0.375rem solid var(--g);box-shadow:0.1875rem 0 0.375rem -1px rgba(0,0,0,.16);border-right:1px solid var(--line)}
.lo-t thead th.h0{border-left:0.375rem solid var(--hdr)}
.lo-po a{color:var(--ink);text-decoration:none}.lo-po.cont a{color:var(--mute);font-weight:400}
.lo-po .lo-n{display:block;font-size:0.6563rem;font-weight:400;color:var(--mute);line-height:1.1}
.lo-r.first .lo-po{line-height:1.15}.lo-t th.lo-po,.lo-t td{vertical-align:middle !important}
.lo-clip{margin-left:0.25rem;font-size:0.6875rem;text-decoration:none;opacity:.75;vertical-align:1px}.lo-clip:hover{opacity:1}
.lo-flag{display:inline-flex;align-items:center;justify-content:center;width:0.9375rem;height:0.9375rem;margin-left:0.3125rem;border-radius:50%;background:var(--s-overdue);color:#fff;font-size:0.6563rem;font-weight:700;vertical-align:1px}
.lo-t tbody tr{cursor:pointer}.lo-t tbody tr:hover td,.lo-t tbody tr:hover th{background:var(--hover)}
.lo-st{text-align:center !important;color:#fff;font-weight:500;font-size:0.7813rem;padding:0 0.25rem !important;border-right:1px solid var(--surface) !important;border-bottom:1px solid var(--surface) !important}
.lo-t td.lo-st{overflow:visible}
.lo-st small{display:block;font-size:0.625rem;opacity:.9;font-weight:400;line-height:1}
.lo-st details.st{position:static}.lo-st details.st .menu{text-align:left;color:var(--ink);font-weight:400}
.lo-st.s-new{--sf:var(--s-new);--sfi:var(--s-new-ink,#fff)}.lo-st.s-packed{--sf:var(--s-packed);--sfi:var(--s-packed-ink,#fff)}.lo-st.s-sent{--sf:var(--s-sent);--sfi:var(--s-sent-ink,#fff)}.lo-st.s-received{--sf:var(--s-received);--sfi:var(--s-received-ink,#fff)}.lo-st.s-invoiced{--sf:var(--s-invoiced);--sfi:var(--s-invoiced-ink,#fff)}.lo-st.s-part{--sf:var(--s-part);--sfi:var(--s-part-ink,#fff)}.lo-st.s-canceled{--sf:var(--s-canceled);--sfi:var(--s-canceled-ink,#fff)}.lo-st.s-paid{--sf:var(--s-paid);--sfi:var(--s-paid-ink,#fff)}.lo-st.s-overdue{--sf:var(--s-overdue);--sfi:var(--s-overdue-ink,#fff)}.lo-st.s-open{--sf:var(--s-open);--sfi:var(--s-open-ink,#fff)}
.s-none{--sf:transparent;--sfi:var(--mute)}.lo-t tbody tr td.lo-st,.lo-t tbody tr:hover td.lo-st,.lo-chip{background:var(--sf);color:var(--sfi)}
.lo-t td.s-none{background:transparent;color:var(--mute);border-right:1px solid var(--line2) !important;border-bottom:1px solid var(--line2) !important}
.lo-chip{display:inline-block;padding:0.1875rem 0.5625rem;border-radius:0.25rem;font-size:0.75rem;font-weight:500;white-space:nowrap}
.lo-c{text-align:center !important;padding:0 !important}
.lo-cm{display:inline-flex;align-items:center;gap:1px;color:#c3c6d4;text-decoration:none;position:relative;padding:0.25rem}
.lo-cm.has{color:#579bfc}.lo-cm b{position:absolute;right:-1px;bottom:0;min-width:0.875rem;height:0.875rem;border-radius:0.4375rem;background:#579bfc;color:#fff;font-size:0.5938rem;line-height:0.875rem;text-align:center;padding:0 0.1875rem;border:1.5px solid var(--surface)}
.lo-d,.lo-store,.lo-size,.lo-who,.lo-inv{text-align:center !important;color:var(--ink)}.lo-t td.lo-store,.lo-t td.lo-size{padding:0 0.1875rem}
.lo-num{text-align:right !important;font-variant-numeric:tabular-nums}
.lo-nil{color:#b9b6c0}
.lo-bride{color:var(--mute);font-size:0.75rem}.lo-why{color:var(--mute);font-size:0.7188rem;margin-left:0.5rem}
.lo-gh td{background:var(--surface);height:2.25rem;border-right:0;padding:0;overflow:visible}
.lo-ghi{position:sticky;left:0;display:inline-flex;align-items:center;gap:0.25rem}
.lo-gt{display:inline-flex;align-items:center;gap:0.5rem;border:0;background:none;padding:0.5rem 0.625rem 0.25rem;font:inherit;cursor:pointer;color:var(--g);box-shadow:none}
.lo-gn{font-weight:700;font-size:0.9375rem}.lo-gc{font-size:0.75rem;color:var(--mute);font-weight:400}.lo-car{display:inline-block;width:0.625rem;transition:transform .15s;font-size:0.75rem}
.lo-g.closed .lo-car{transform:rotate(-90deg)}.lo-g.closed tr:not(.lo-gh){display:none}
.lo-more{font-size:0.7813rem;margin-left:0.5rem}
.g-new{--g:var(--s-new)}.g-packed{--g:var(--s-packed)}.g-sent{--g:var(--s-sent)}.g-received{--g:var(--s-received)}.g-invoiced{--g:var(--s-invoiced)}.g-canceled{--g:var(--s-canceled)}
.lo-empty{padding:1.875rem;text-align:center;color:var(--mute)}
.lo-pager{margin:0.625rem 0 0;font-size:0.8125rem}
.lo button{min-height:0}
@media (max-width:820px){.lo button{min-height:0;border-radius:inherit}.lo .lo-gt{height:auto;font-size:inherit}.lo .lo-fbtn{border-radius:0.875rem;height:1.875rem;padding:0 0.625rem;font-size:0.8125rem}
  .lo-st details.st .menu .opt{border-radius:0.75rem;height:3.125rem}.lo-st details.st .menu input[type=text]{border-radius:0.75rem;height:2.875rem}}
/* phone */
@media (max-width:820px){
  .lo-top{margin:0.125rem 0 0.375rem}.lo-top h1{display:none}.lo-hint{display:none}
  .lo-filters{display:none;position:fixed;left:0.5rem;right:0.5rem;bottom:calc(7.625rem + env(safe-area-inset-bottom));z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:0.875rem;padding:0.75rem;box-shadow:var(--shadow)}
  .lo-filters.open{display:flex}.lo-fl{width:100%}
  .lo-find{position:fixed;left:0.75rem;right:0.75rem;bottom:calc(4.125rem + env(safe-area-inset-bottom));z-index:55;margin:0;max-width:none;box-shadow:0 0.25rem 1.125rem rgba(40,30,60,.18);padding:0.375rem 0.375rem 0.375rem 0.875rem;border-radius:1.5rem}
  .lo-fbtn{display:inline-flex}
  .lo-scroll{max-height:calc(100dvh - var(--bh) - 3.25rem - 4.125rem - 4.625rem - env(safe-area-inset-bottom));margin:0 -0.75rem;border-radius:0;border-left:0;border-right:0}
  .lo{--rowh:1.9375rem}.lo-t{font-size:0.8125rem;width:var(--tw,max-content);min-width:0;table-layout:fixed}.lo-t col.ci{width:14.375rem}.lo-t th,.lo-t td{padding:0 0.375rem}
  /* D20: a swipe settles with a column's left edge flush against the pinned PO#, so no cell (the Price "$") hides under it */
  .lo-scroll{scroll-snap-type:x proximity;scroll-padding-left:6rem}.lo-t thead th{scroll-snap-align:start}.lo-t td.lo-num{padding-left:0.625rem}
  .lo-gh td{height:2.125rem}.lo-gt{padding:0.375rem 0.5rem 0.25rem}
  .lo-top .btn{padding:0.375rem 0.625rem;font-size:0.8125rem}
  .lo-pager{padding-bottom:5rem}
}