/* Procurelens app.css — build 2026.10.14.18. One stylesheet (Assurance design, shared with CargoLens). */
:root{--top:env(safe-area-inset-top,0px);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:#fff;color:#111}
*{box-sizing:border-box}
[hidden]{display:none!important}
button,input,select,textarea,output{font:inherit;color:inherit}
.sp{flex:1 1 auto}

/* ============ shared structure (visuals come from each design's tokens) ============ */
.app{font-family:var(--font);font-size:var(--fs);line-height:1.4;color:var(--ink);background:var(--bg);min-height:calc(100vh - var(--top));color-scheme:light}
.app h1,.app h2,.app h3,.app p,.app dl,.app dd,.app ol,.app ul{margin:0}
.app a{color:inherit;text-decoration:none;cursor:pointer}
.app main{padding:var(--mp);min-width:0}
.app :focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.m,.n,.num{font-family:var(--mono)}
.neg{color:var(--bad)}

.ph{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap;margin-bottom:var(--gap)}
.ph .pt{margin-right:auto;min-width:0}
.eyebrow{color:var(--mut);font-size:.88em}
.ph h1{font-size:var(--h1);font-weight:600;line-height:1.15}
.docno{font-family:var(--mono);white-space:nowrap;align-self:center}
.docno span{color:var(--mut)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.pside{display:contents}

.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--ctl-h);padding:0 12px;border:1px solid var(--line2);border-radius:var(--rad);background:var(--surf);color:var(--ink);font-weight:500;white-space:nowrap;cursor:pointer}
span.btn{cursor:default}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-fg)}
.btn.dan{border-color:var(--bad);color:var(--bad)}
.btn.s{height:24px;padding:0 8px;font-size:.92em}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.kpi{min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--rad);background:var(--surf)}
.kpi .l{color:var(--mut);font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-family:var(--mono);font-size:1.6em;font-weight:600;line-height:1.25;white-space:nowrap}
.kpi .c{color:var(--mut);font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.warn .v{color:var(--warn)}.kpi.bad .v{color:var(--bad)}.kpi.ok .v{color:var(--ok)}

.tabs{display:flex;border-bottom:1px solid var(--line2);margin-bottom:8px;overflow-x:auto}
.tabs button{flex:none;height:28px;padding:0 12px;border:0;background:none;color:var(--mut);white-space:nowrap;cursor:pointer}
.tabs button i{margin-left:6px;font-style:normal;font-family:var(--mono);font-size:.85em;opacity:.8}
.tabs button.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--pri)}

.filters{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.filters label{display:flex;align-items:center;gap:6px;color:var(--mut)}
.filters .q{margin-left:auto}
.filters .q input{width:230px}
.app input:not([type=checkbox]):not([type=radio]),.app select,.app textarea,.app output{height:var(--ctl-h);padding:0 8px;border:1px solid var(--line2);border-radius:var(--rad);background:var(--field,var(--surf));min-width:0;max-width:100%}
.app output{display:block;line-height:calc(var(--ctl-h) - 2px);border-style:dashed}
.app input.num,.app output.num{text-align:right}
.app input[readonly]{opacity:.75}

.tw{max-width:100%;overflow-x:auto}
table.grid{width:100%;border-collapse:collapse}
.grid th,.grid td{height:var(--rh);padding:0 8px;white-space:nowrap;text-align:left}
.grid th{background:var(--th-bg);color:var(--th-fg);font-weight:600;font-size:.92em}
.grid td{border-bottom:1px solid var(--line)}
.grid td.t{max-width:300px;overflow:hidden;text-overflow:ellipsis}
.grid th.n,.grid td.n{text-align:right}
.grid tbody tr:nth-child(even) td{background:var(--zebra)}
.grid tr[data-fn]{cursor:pointer}
.grid tr.sel td{box-shadow:inset 0 2px 0 var(--selc),inset 0 -2px 0 var(--selc)}
.grid tr.hl td{font-weight:600}
.grid td.empty{height:64px;text-align:center;color:var(--mut)}
.grid tfoot td{font-weight:600}
.grid tfoot tr.tot td{border-top:2px solid var(--line2);font-size:1.08em}
table.grid.fit3{table-layout:fixed}
.grid.fit3 th:first-child{width:28%}.grid.fit3 th:last-child{width:26%}
.grid.fit3 th,.grid.fit3 tfoot td{overflow:hidden;text-overflow:ellipsis}
.grid.fit3 td.t{max-width:none}
.note{color:var(--mut);max-width:60ch}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 var(--gap);color:var(--mut)}
.pg{display:flex;gap:2px}
.pg button{min-width:24px;height:24px;padding:0 4px;border:1px solid var(--line2);border-radius:var(--rad);background:var(--surf);font-family:var(--mono);font-size:.9em;cursor:pointer}
.pg button.on{background:var(--pri);border-color:var(--pri);color:var(--pri-fg)}
.pg button:disabled{opacity:.4;cursor:default}

.cols{display:grid;gap:var(--gap);margin-bottom:var(--gap);align-items:start}
.cols>*{min-width:0}
.cols.c2{grid-template-columns:1fr 1fr}.cols.c32{grid-template-columns:3fr 2fr}.cols.c23{grid-template-columns:minmax(300px,2fr) 3fr}
.stack{display:grid;gap:var(--gap);align-content:start;min-width:0}
@media(max-width:1000px){.cols.c2,.cols.c32,.cols.c23{grid-template-columns:minmax(0,1fr)}}
.panel{min-width:0;border:1px solid var(--line);border-radius:var(--rad);background:var(--surf)}
.phd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line)}
.phd h2{font-size:1em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbd{padding:10px}
.pbd .pager{margin-bottom:0}
.pft{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:10px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px}
.kv>div{min-width:0}
.kv dt{color:var(--mut);font-size:.88em}
.kv dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv+.tw,.kv+.form,.form+.tw,.strip+.form{margin-top:12px}
.form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px}
.form.f2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fld{display:grid;gap:2px;min-width:0;align-content:start}
.fld>span{color:var(--mut);font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld.w2{grid-column:span 2}.fld.w4{grid-column:1/-1}
.fld input,.fld select,.fld textarea,.fld output{width:100%}
@media(max-width:640px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 12px;margin-top:12px}
.chk label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.chk span{color:var(--mut);font-size:.88em}

.pill{display:inline-block;height:18px;padding:0 6px;border:1px solid currentColor;border-radius:var(--rad);color:var(--mut);font-size:.82em;font-weight:600;line-height:16px;white-space:nowrap}
.pill.ok{color:var(--ok)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}
.flash{margin-bottom:var(--gap);padding:6px 10px;border:1px solid var(--ok);border-radius:var(--rad);background:var(--surf);color:var(--ok);font-weight:600}
.flash.warn{border-color:var(--warn);color:var(--warn)}
.strip{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;margin-top:12px;padding:6px 10px;border:1px solid var(--warn);border-radius:var(--rad)}
.strip.ok{border-color:var(--ok)}
.tl{list-style:none;padding:0}
.tl li{position:relative;padding:0 0 10px 20px}
.tl li::before{content:"";position:absolute;left:2px;top:5px;width:9px;height:9px;border-radius:var(--dot,0);background:var(--line2)}
.tl li::after{content:"";position:absolute;left:6px;top:16px;bottom:-3px;width:1px;background:var(--line2);opacity:.5}
.tl li:last-child{padding-bottom:0}.tl li:last-child::after{display:none}
.tl li.done::before{background:var(--ok)}.tl li.now::before{background:var(--warn)}
.tl b{display:block;font-weight:600}
.tl span{display:block;color:var(--mut);font-size:.9em}
.tl li.todo b{font-weight:400}
.checks{list-style:none;padding:0;display:grid;gap:4px;margin-top:12px}
.checks li::before{content:"\2713";margin-right:8px;color:var(--ok);font-weight:700}
.checks li.wn::before{content:"!";color:var(--warn)}

.mail .mh{display:grid;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mail .mh>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px}
.mail .mh dt{color:var(--mut)}
.mail .mh dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail .mb{padding-top:10px}
.mail .mb p{margin:0 0 10px;max-width:62ch}
.mail .mb .kv{margin-bottom:12px}
.mail .fine{color:var(--mut);font-size:.88em}

svg.chart{display:block;width:100%;height:auto}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--mut);font-family:var(--mono);font-size:10px}
.chart .sd{stroke:var(--bad);stroke-width:1.5;stroke-dasharray:5 4}
.chart .sdl{fill:var(--bad);font-family:var(--mono);font-size:10px}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2}
.chart .pt{fill:var(--ok)}

.photo{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:6px;border:1px solid var(--line)}
.thumb{width:44px;height:44px;background:repeating-linear-gradient(0deg,var(--line) 0 2px,transparent 2px 7px),var(--surf);border:1px solid var(--line2)}

.legend{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:10px;color:var(--mut);font-size:.9em}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg::before{content:"";width:10px;height:10px;background:var(--sc);border:1px solid var(--line2)}


/* ============ ledes and bar charts (designs 5 to 7) ============ */
.lede{display:none}
svg.bchart{display:block;width:100%;max-width:560px;height:auto}
.bchart text{font-family:var(--font);font-size:12px;fill:var(--ink)}
.bchart .bl{font-size:11px;font-weight:400;fill:var(--mut)}
.bchart .bt,.bchart .hv{font-weight:600}
.bchart .b0{fill:var(--c0)}.bchart .b1{fill:var(--c1)}.bchart .b2{fill:var(--c2)}
.bchart .hbk{fill:var(--band)}
.bchart .bx{stroke:var(--line2);stroke-width:1}
.lg.b0{--sc:var(--c0)}.lg.b1{--sc:var(--c1)}.lg.b2{--sc:var(--c2)}


/* ============ design 6: assurance (audit-firm clean) ============ */
.d6{--font:'Open Sans','Segoe UI',Arial,sans-serif;--mono:var(--font);--fs:14px;
  --ink:#111;--mut:#63666a;--bg:#fff;--surf:#fff;--line:#e0e0e0;--line2:#a7a8aa;--pri:#000;--pri-fg:#fff;--ok:#26890d;--warn:#b25f00;--bad:#da291c;--selc:#26890d;--grn:#86bc25;
  --rad:0;--rh:38px;--th-bg:#f0f0f0;--th-fg:#111;--zebra:transparent;--ctl-h:36px;--gap:20px;--h1:30px;--mp:28px 28px 64px;--focus:#26890d;--sea:#eef0f1;--land:#fff;--dot:50%;
  --c0:#26890d;--c1:#86bc25;--c2:#d0d0ce;--band:#f0f0f0}
.d6 .m,.d6 .n,.d6 .num,.d6 .bchart text{font-variant-numeric:tabular-nums lining-nums}
.d6 .top{position:sticky;top:var(--top);z-index:30;display:flex;align-items:center;gap:16px;height:52px;padding:0 24px;background:#000;color:#fff;white-space:nowrap;overflow-x:auto}
.d6 .brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.d6 .brand .clogo{height:28px;max-width:140px;object-fit:contain;background:#fff;padding:2px 4px}
.d6 .brand::before{content:"";width:9px;height:22px;background:var(--grn)}
.d6 .top select{height:32px;padding:0 10px;border:1px solid #5a5a5a;border-radius:16px;background:#000;color:#fff}
.d6 .top .lab{display:flex;align-items:center;gap:8px;color:#bdbdbd}
.d6 .top .org{font-weight:600}
.d6 .top .user{color:#bdbdbd}
.d6 .top .user b{color:#fff;font-weight:600}
.d6 .top :focus-visible{outline-color:var(--grn)}
.d6 .wrap{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start}
.d6 .side{position:sticky;top:calc(var(--top) + 52px);height:calc(100vh - var(--top) - 52px);overflow:auto;padding:16px 0;border-right:1px solid var(--line)}
.d6 .side a{display:flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 17px;border-left:3px solid transparent;color:#333;white-space:nowrap}
.d6 .side a .n{width:18px;color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums}
.d6 .side a .who{margin-left:auto;color:var(--mut);font-size:11.5px}
.d6 .side a:hover{background:#f6f6f6}
.d6 .side a.on{border-left-color:var(--grn);background:#f0f0f0;color:#000;font-weight:600}
.d6 .eyebrow{font-size:13px}
.d6 .ph h1{font-weight:300;letter-spacing:-.015em}
.d6 .lede{display:block;max-width:70ch;margin-top:4px;color:var(--mut);font-size:15px}
.d6 .docno{color:var(--mut)}
.d6 .docno b{color:var(--ink);font-weight:600}
.d6 .btn{padding:0 18px;border-color:#000;border-radius:18px;font-weight:600}
.d6 .btn.dan{border-color:var(--bad)}
.d6 .btn.s{height:26px;padding:0 12px;border-radius:13px;font-size:12.5px}
.d6 .kpi{position:relative;padding:18px 16px 14px;border:0;background:#f4f4f4}
.d6 .kpi::before{content:"";position:absolute;left:16px;top:0;width:36px;height:4px;background:var(--grn)}
.d6 .kpi.warn::before{background:#ed8b00}.d6 .kpi.bad::before{background:var(--bad)}
.d6 .kpi .l{color:#333;font-size:12.5px;font-weight:600}
.d6 .kpi .v,.d6 .kpi.ok .v,.d6 .kpi.warn .v,.d6 .kpi.bad .v{color:#000;font-size:28px;font-weight:300}
.d6 .kpi .c{font-size:12.5px}
.d6 .tabs{gap:4px;border-color:var(--line)}
.d6 .tabs button{height:38px;padding:0 14px}
.d6 .tabs button.on{color:#000;box-shadow:inset 0 -3px 0 var(--grn)}
.d6 input:not([type=checkbox]):not([type=radio]),.d6 select,.d6 output{border-radius:2px}
.d6 .grid th{font-size:12.5px}
.d6 .grid tr.sel td,.d6 .grid tr.hl td{background:#f3f8ec;box-shadow:none}
.d6 .grid tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--grn)}
.d6 .pill{height:22px;padding:0 10px;border:0;border-radius:11px;background:#ededed;color:#444;font-size:12px;line-height:22px}
.d6 .pill.ok{background:#e3f1d4;color:#1e5e0a}.d6 .pill.warn{background:#fcebcf;color:#7a4b00}.d6 .pill.bad{background:#fbe1de;color:#9e1b12}
.d6 .pg button{min-width:30px;height:30px;border-color:var(--line);border-radius:15px}
.d6 .phd{padding:12px 16px}
.d6 .phd h2{font-size:15px}
.d6 .pbd{padding:16px}
.d6 .kv dt,.d6 .fld>span{font-size:12.5px}
.d6 .flash,.d6 .strip{padding:10px 14px;border:0;border-left:4px solid var(--grn);background:#f3f8ec;color:var(--ink)}
.d6 .flash.warn,.d6 .strip{border-left-color:#ed8b00;background:#fdf3e3}
.d6 .strip.ok{border-left-color:var(--grn);background:#f3f8ec}
.d6 .tl li.now::before{background:#000}
.d6 .chart .ln{stroke:#000;stroke-width:2.5}
.d6 .chart .sd{stroke:var(--mut)}.d6 .chart .sdl{fill:var(--mut)}


/* ============ design 6 extras: page head, routes, reports, settings, small screens ============ */
.d6 .top>:not(.sp){flex:none}
.d6 .ph{flex-wrap:nowrap;align-items:flex-start;gap:10px 28px}
.d6 .pside{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:8px;max-width:100%}
.d6 .docno{align-self:auto}
.d6 .actions{justify-content:flex-end}
.d6 .side .grp{padding:16px 20px 6px;color:var(--mut);font-size:11.5px;font-weight:600}
.d6 .side .grp:first-child{padding-top:2px}
.d6 input[type=checkbox],.d6 input[type=radio]{flex:none;width:16px;height:16px;margin:0;accent-color:#26890d}
.d6 .lnk{color:#1e6e0a;font-weight:600;text-decoration:underline;white-space:nowrap}
.hint{display:block;color:var(--mut);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d6 .grid th,.d6 .grid td{padding:0 7px}
.src{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;color:var(--mut);font-size:.9em}
.rng{color:var(--mut)}
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:var(--gap)}
.icard{display:grid;gap:4px;min-width:0;padding:14px 16px;border:1px solid var(--line);background:var(--surf);text-align:left;cursor:pointer}
.icard b{font-size:1.05em}
.icard>span{color:var(--mut);font-size:.9em}
.icard .ist{display:flex;align-items:center;gap:8px;min-width:0;margin-top:6px}
.icard .ist i{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icard.on{border-color:#000;box-shadow:inset 0 3px 0 var(--grn)}
.chk .tog{align-items:flex-start;gap:8px;white-space:normal}
.chk.one{grid-template-columns:minmax(0,1fr)}
.photo+.kv,.kv+.chk,.form+.kv,.chk+.form,.form+.strip,.form+.chk,.kv+.tl{margin-top:12px}
.tw+.note{margin-top:10px}
.bchart .bbad{fill:var(--bad)}.bchart .btick{fill:var(--ink)}
.lg.bbad{--sc:var(--bad)}
.lg.tick::before{width:3px;height:12px;border:0;background:var(--ink)}
@media(max-width:860px){
  .d6 .ph{flex-wrap:wrap}
  .d6 .pside{align-items:flex-start}
  .d6 .actions{justify-content:flex-start}
}
@media(max-width:640px){.d6{--mp:18px 16px 44px;--gap:12px}.d6 .top{padding:0 14px}.d6 .phd{flex-wrap:wrap}.d6 .phd h2{white-space:normal}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ============ portals: shipper, vendor, driver ============ */
.d6 .top .ctl{display:flex;align-items:center;gap:16px}
.d6 .top .as{max-width:240px}
.d6 .mbtn,.d6 .ctxrow,.d6 .bbar,.d6 .scrim{display:none}
.d6 .side a .n:empty{display:none}
.d6 .bbar{position:fixed;z-index:40;left:0;right:0;bottom:0;justify-content:space-around;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff}
.d6 .bbar a{display:grid;justify-items:center;gap:1px;min-width:58px;padding:6px 6px 4px;border-top:3px solid transparent;color:var(--mut);font-size:11.5px;font-weight:600}
.d6 .bbar a.on{border-top-color:var(--grn);color:#000}
.stack>*{min-width:0}
.checks+.form,.checks+.pft{margin-top:12px}
.pg{flex-wrap:wrap}
.pg .gap{align-self:center;padding:0 3px;color:var(--mut)}
.d6 .top .org+.lab{color:#bdbdbd}
@media(max-width:860px){
  .d6 .mbtn{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:1px solid #5a5a5a;border-radius:19px;background:#000;color:#fff;cursor:pointer}
  .d6 .top{gap:10px;padding:0 12px}
  .d6 .top .ctl{display:none}
  .d6 .top .as{max-width:156px}
  .d6 .ctxrow{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:#fafafa;white-space:nowrap}
  .d6 .ctxrow>select{flex:1 1 0;min-width:0;height:36px}
  .d6 .ctxrow .lab{display:flex;flex:1 1 0;min-width:0;align-items:center;gap:6px;color:var(--mut)}
  .d6 .ctxrow .lab select{flex:1 1 0;min-width:0;height:36px}
  .d6 .ctxrow .org{font-weight:600}
  .d6 .wrap{grid-template-columns:minmax(0,1fr)}
  .d6 .side{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(84vw,300px);height:auto;padding:18px 0;overflow:auto;border-right:1px solid var(--line);background:#fff;transform:translateX(-105%);transition:transform .18s ease}
  .d6 .side a{height:46px}
  .d6.mo .side{transform:none}
  .d6.mo .scrim{display:block;position:fixed;z-index:65;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.45)}
  .d6.p-vendor .bbar{display:flex}
  .d6.p-vendor main{padding-bottom:104px}
  .d6 .ph{flex-wrap:wrap}
  .d6 .pside{align-items:flex-start}
  .d6 .actions{justify-content:flex-start}
}
@media(max-width:640px){
  .d6{--mp:16px 16px 44px;--gap:12px;--h1:25px}
  .d6 .phd{flex-wrap:wrap}
  .d6 .phd h2{white-space:normal}
  .d6 .lede{font-size:14px}
  .d6 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d6 .kpi{padding:14px 12px 12px}
  .d6 .kpi::before{left:12px}
  .d6 .kpi .v{font-size:23px}
  .filters label{flex:1 1 46%;min-width:0}
  .filters label select{flex:1 1 0;min-width:0}
  .filters .q{flex:1 1 100%;margin-left:0}
  .filters .q input{flex:1 1 0;width:auto}
  .pager{flex-wrap:wrap}
  .pft .btn{flex:1 1 auto}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv dd{white-space:normal}
  .mail .mh dd{white-space:normal}
  /* one record becomes one card: label on the left, value on the right */
  .grid:not(.fit3) thead{display:none}
  .grid:not(.fit3),.grid:not(.fit3) tbody,.grid:not(.fit3) tfoot,.grid:not(.fit3) tr{display:block;width:100%}
  .grid:not(.fit3) tbody tr{padding:9px 0;border-bottom:1px solid var(--line2)}
  .grid:not(.fit3) tbody tr:last-child{border-bottom:0}
  .grid:not(.fit3) td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;height:auto;min-height:25px;max-width:none;padding:2px 12px;overflow:visible;border:0;background:none!important;box-shadow:none!important;text-align:right;white-space:normal}
  .grid:not(.fit3) td::before{content:attr(data-l);flex:none;max-width:48%;color:var(--mut);font-weight:400;text-align:left}
  .grid:not(.fit3) td[data-l=""]::before,.grid:not(.fit3) tbody td:first-child::before{display:none}
  .grid:not(.fit3) tbody td:first-child{justify-content:flex-start;font-size:1.05em;font-weight:600;text-align:left}
  .grid:not(.fit3) td:empty{display:none}
  .grid:not(.fit3) td.c{justify-content:flex-end}
  .grid:not(.fit3) td.c:first-child{justify-content:flex-start}
  .grid:not(.fit3) tbody tr.sel{background:#f3f8ec;box-shadow:inset 4px 0 0 var(--grn)}
  .grid:not(.fit3) td.empty{display:block;padding:18px 12px;text-align:center}
  .grid:not(.fit3) tfoot tr{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:2px solid var(--line2)}
  .grid:not(.fit3) tfoot td{display:block;min-height:0;padding:0;font-weight:600}
  .grid:not(.fit3) tfoot td::before{display:none}
  .grid:not(.fit3) tfoot tr.multi{display:block;padding:9px 0}
  .grid:not(.fit3) tfoot tr.multi td{display:flex;padding:2px 12px}
  .grid:not(.fit3) tfoot tr.multi td::before{display:block}
  .grid:not(.fit3) tfoot tr.multi td:first-child::before{display:none}
  .d6 .tw{border:1px solid var(--line)}
  .d6 .panel .tw{border:0}
  .d6 .pbd{padding:12px}
  .d6 .phd{padding:10px 12px}
  .icards{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.d6 .side{transition:none}}

/* ============ job tracker (the five stages are also the tabs) ============ */
.jtrack{display:flex;margin-bottom:var(--gap);overflow-x:auto;border:1px solid var(--line);background:var(--surf)}
.jst{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;align-items:center;padding:12px 10px;border:0;border-right:1px solid var(--line);border-bottom:3px solid transparent;background:none;text-align:left;cursor:pointer}
.jst:last-child{border-right:0}
.jst .jn{grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--line2);border-radius:50%;color:var(--mut);font-size:.9em;font-weight:700}
.jst b{font-weight:600;font-size:.96em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jst i{font-style:normal;color:var(--mut);font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jst.done .jn{border-color:var(--ok);background:var(--ok);color:#fff}
.jst.now .jn{border-color:var(--ink);background:var(--ink);color:#fff}
.jst.now i{color:var(--ink);font-weight:600}
.jst.on{border-bottom-color:var(--grn);background:#f4f4f4}
.jst:hover{background:#f8f8f8}
.kv+.tl,.tl+.pft,.kv+.note,.note+.pft,.kv+.checks{margin-top:12px}
@media(max-width:640px){
  .jst{flex:1 1 0;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center;gap:4px;padding:10px 2px;text-align:center}
  .jst .jn{grid-row:auto}
  .jst b{font-size:11.5px;line-height:1.2;white-space:normal}
  .jst i{display:none}
}


/* ============ procurelens additions ============ */
.grid td input:not([type=checkbox]):not([type=radio]),.grid td select{width:124px;height:26px;padding:0 6px}
.grid td output{display:inline-block;width:124px;height:26px;padding:0 6px;line-height:24px}
.grid td.c .btn+.btn{margin-left:4px}
.grid tr.off td{color:var(--mut)}
.filters .pick select{max-width:420px}
.pft .lft{margin-right:auto;align-self:center;color:var(--mut)}
.att{display:grid;gap:6px;margin-top:12px}
.tl li.bad::before{background:var(--bad)}
.tl .tla{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.strip.bad,.d6 .strip.bad{border-left-color:var(--bad);background:#fbe9e7}
.kv+.strip,.tw+.strip,.tw+.form,.tw+.kv,.tw+.pft,.strip+.tw,.strip+.kv,.checks+.strip,.att+.pft,.form+.att,.tw+.att,.kv+.att,.tw+.checks,.strip+.pft,.tl+.strip{margin-top:12px}
@media(max-width:640px){.grid td input:not([type=checkbox]):not([type=radio]),.grid td output{width:132px}}
@media(max-width:640px){.chk label{align-items:flex-start;white-space:normal}}
.grid.fx td.t{width:99%;min-width:170px;max-width:0}
@media(max-width:640px){.grid.fx td.t{width:auto;max-width:none}}
.kv.wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.form+.checks,.checks+.att{margin-top:12px}


/* ============ application additions ============ */
html,body{background:#fff}
.mut{color:var(--mut)}
.tabs a{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 14px;color:var(--mut);white-space:nowrap}
.tabs a i{margin-left:6px;font-style:normal;font-size:.85em;opacity:.8;font-variant-numeric:tabular-nums}
.tabs a.on{color:#000;font-weight:600;box-shadow:inset 0 -3px 0 var(--grn)}
.tabs a:hover{color:#000}
.pg .pgb{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border:1px solid var(--line);border-radius:15px;background:#fff;font-size:.9em;font-variant-numeric:tabular-nums}
.pg .pgb.on{background:#000;border-color:#000;color:#fff}
.pg .pgb.dis{opacity:.4}
.grid tr[data-href]{cursor:pointer}
.grid tr[data-href]:hover td{background:#fafafa}
.grid td a{color:inherit}
.grid td.r{white-space:nowrap}
.grid td.m,.grid td.n{font-variant-numeric:tabular-nums lining-nums}
form.inl{display:inline}
.actions form.inl,.tla form.inl,.pft form.inl{display:inline-flex}
.btn{text-decoration:none}
a.btn{display:inline-flex}
.d6 .top a{color:#fff}
.d6 .top .user{color:#bdbdbd;font-size:13px}
.d6 .top .out{padding:6px 14px;border:1px solid #5a5a5a;border-radius:16px;font-size:13px}
.d6 .top .ctxf{display:flex;align-items:center;gap:12px}
.demo-tag{padding:2px 10px;border-radius:11px;background:#86bc25;color:#000;font-size:12px;font-weight:700}
.d6 .side .sidefoot{display:none;margin-top:16px;padding-top:8px;border-top:1px solid var(--line)}
@media(max-width:860px){.d6 .side .sidefoot{display:block}.d6 .top .user,.d6 .top .out{display:none}}
.ctxrow .ctxf{display:flex;flex:1 1 auto;gap:8px;align-items:center;min-width:0}
.ctxrow .ctxf select{flex:1 1 0;min-width:0;height:36px}
.app textarea{width:100%;min-height:72px;padding:6px 8px;border:1px solid var(--line2);border-radius:2px;background:#fff;resize:vertical}
.fld textarea{height:auto}
.fld .hint{font-style:normal}
.form .sec{grid-column:1/-1;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-weight:600}
.chk .tog{display:flex;gap:8px;align-items:flex-start;white-space:normal}
.chk .tog b{display:block;font-weight:600}
.chk .tog i{display:block;font-style:normal;color:var(--mut);font-size:12.5px}
dialog.pop{width:min(520px,92vw);padding:18px;border:1px solid #000;border-radius:0}
dialog.pop::backdrop{background:rgba(0,0,0,.45)}
dialog.pop h3{margin:0 0 12px;font-size:17px;font-weight:600}
dialog.pop .fld{margin-bottom:10px}
dialog.pop .pft{margin-top:12px}
/* line grid: rows of items typed like a spreadsheet */
.grid.lines td.c{padding:0 4px}
.grid.lines td input:not([type=checkbox]),.grid.lines td select,.grid.lines td output{height:28px;padding:0 6px}
.grid.lines td input.wide{width:100%;min-width:200px}
.grid.lines td output{width:110px}.grid.lines td .ro:not(.n){max-width:200px}.grid.lines td input.num{width:96px}.grid.lines td input.code{width:84px}.grid.lines td select{width:96px}
.grid.lines td output{width:110px}.grid.lines td .ro:not(.n){max-width:200px}.grid.lines td input.num{width:96px}
.grid.lines td select{width:auto;min-width:92px;max-width:180px}
.grid.lines td output{width:116px}
.grid.lines td .ro{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.grid.lines td.ln{width:34px;color:var(--mut)}
.grid.lines tr.err td{background:#fbe1de!important}
.grid.lines .btn.x{width:26px;padding:0;font-size:16px;line-height:1}
.lg-tools{display:flex;align-items:center;gap:12px;margin-top:8px}
.lg-tools .hint{white-space:normal}
template{display:none}
.att .upl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.att .upl input[type=file]{height:auto;border:0;padding:0}
.photo .hint{display:block}
.strip p{margin:0}
.strip .btn{margin-left:auto}
.kv dd .pill{vertical-align:middle}
.flash.bad{border-left-color:var(--bad)!important;background:#fbe9e7!important}
.flash.warn{border-left-color:#ed8b00!important;background:#fdf3e3!important}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.cols.c3{grid-template-columns:minmax(0,1fr)}}
.bare main.narrow{max-width:460px;margin:48px auto;padding:0 16px}
.bare .top{justify-content:flex-start}
.login .form{grid-template-columns:minmax(0,1fr)}
.login .pft{justify-content:space-between;align-items:center}
.qr{font-family:monospace;word-break:break-all;padding:10px;background:#f4f4f4}
.big-num{font-size:34px;font-weight:300}
.cmp td.best{background:#e3f1d4!important;font-weight:600}
.cmp th.v{min-width:140px}
.cmp td.v{text-align:right}
.rank{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:#ededed;font-size:12px;font-weight:700}
.rank.r1{background:#26890d;color:#fff}
.timer{font-size:28px;font-weight:300;font-variant-numeric:tabular-nums}
.ok-t{color:var(--ok)}.warn-t{color:var(--warn)}.bad-t{color:var(--bad)}
.steps-ed td input,.steps-ed td select{width:auto!important}
.rule-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.rule-row select,.rule-row input{width:auto}
.print-only{display:none}
@media print{
  .top,.side,.ctxrow,.bbar,.actions,.pft,.lg-tools,.flash,form.upl{display:none!important}
  .d6 .wrap{display:block}
  .app main{padding:0}
  .print-only{display:block}
}

/* sign-in, demo and password pages: product on the left, form on the right */
.au{display:grid;grid-template-columns:minmax(320px,42%) 1fr;min-height:100vh}
.au-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:32px 48px;background:#000;color:#fff}
.au-side .brand{color:#fff;font-size:20px;text-decoration:none}
.au-pitch h2{margin:0 0 24px;font-size:30px;font-weight:300;line-height:1.25;max-width:20ch}
.au-ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:#d6d6d6}
.au-ticks li{display:flex;gap:12px;align-items:baseline}
.au-ticks li::before{content:"";flex:none;width:8px;height:8px;background:var(--grn);transform:translateY(-2px)}
.au-small{margin:0;color:#8a8a8a;font-size:12.5px}
.au-main{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;padding:48px 24px 24px}
.au-box{width:100%;max-width:420px}
.au-box.wide{max-width:640px}
.au-box .ph{margin-bottom:16px}
.au-foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:12.5px}
.au-foot a{color:var(--mut);text-decoration:none}
.au-foot a:hover{color:var(--ink);text-decoration:underline}
.au .login .form{grid-template-columns:minmax(0,1fr)}
.au .login .pft{justify-content:space-between;align-items:center}
.demo-list{border:1px solid var(--line);background:var(--surf)}
.demo-list h3{margin:0;padding:10px 16px;background:#f0f0f0;font-size:12.5px;font-weight:700}
.demo-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.demo-row form{display:contents}
.demo-who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-who b{font-weight:600}
.demo-who span{color:var(--mut);margin-left:8px}
.demo-cred{margin-top:12px;color:var(--mut);font-size:13px}
@media(max-width:860px){.au{grid-template-columns:1fr}.au-side{position:static;height:auto;padding:20px 16px}.au-pitch{display:none}.au-small{display:none}.au-main{justify-content:flex-start;padding:24px 16px}}

/* global search */
.gsbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 12px;margin-right:12px;border:1px solid #4a4a4a;border-radius:17px;background:#111;color:#cfcfcf;font:inherit;font-size:13px;cursor:pointer}
.gsbtn svg{width:16px;height:16px}
.gsbtn:hover{border-color:#8a8a8a;color:#fff}
.gsbtn kbd,.gs kbd{font:inherit;font-size:11px;padding:1px 5px;border:1px solid #5a5a5a;color:#9a9a9a}
.gs{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px;background:rgba(0,0,0,.45)}
.gs-box{width:100%;max-width:680px;max-height:76vh;display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line2)}
.gs-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line)}
.gs-in svg{flex:none;color:var(--mut)}
.gs-in input{flex:1;height:52px;border:0;outline:0;font:inherit;font-size:16px;background:transparent}
.gs-in kbd{border-color:var(--line2);color:var(--mut)}
.gs-res{overflow:auto;padding:6px 0}
.gs-hint{margin:0;padding:18px 16px;color:var(--mut)}
.gs-grp h4{margin:8px 0 2px;padding:0 16px;font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.gs-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:7px 16px;color:var(--ink);text-decoration:none;border-left:3px solid transparent}
.gs-item.on,.gs-item:hover{background:#f3f8ec;border-left-color:var(--grn)}
.gs-t{min-width:0;display:flex;gap:10px;align-items:baseline;white-space:nowrap;overflow:hidden}
.gs-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.gs-t i{font-style:normal;color:var(--mut);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.gs-a{font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:9px 16px;border-top:1px solid var(--line);color:var(--mut);font-size:12px}
.gs-foot kbd{border-color:var(--line2);color:var(--mut);margin-right:3px}
.gs-foot .lnk{margin-left:auto}
body.gs-open{overflow:hidden}
@media(max-width:860px){.gsbtn span,.gsbtn kbd{display:none}.gsbtn{padding:0 9px;margin-right:6px}.gs{padding-top:8px}}
/* multi-select lists */
.pick-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.pick-bar .q{flex:1 1 220px;max-width:320px}
.pick-bar .q input{width:100%;height:32px;padding:0 10px;border:1px solid var(--line2);font:inherit}
.pick-bar .pick-info{color:var(--mut);font-size:13px;white-space:nowrap}
.pick-bar .pick-info b{color:var(--ink);font-variant-numeric:tabular-nums}
.pick-bar .sp{flex:1}
.grid td.ck,.grid th.ck{width:34px;text-align:center}
.grid td.ck input,.grid th.ck input{width:16px!important;height:16px!important;margin:0;accent-color:#000}
[data-pick] tbody tr{cursor:pointer}
.au-alt{display:flex;align-items:center;justify-content:space-between;gap:12px}
.au-alt b{display:block}.au-alt span{color:var(--mut);font-size:13px}
.au .login .sec{grid-column:1/-1}
.au .login .form > .sec:first-child{border-top:0;margin-top:0;padding-top:0}
/* invoice beside the entry: 40% preview, 60% form */
.inv-split{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:var(--gap);align-items:start}
.inv-main{min-width:0}
.inv-pane{position:sticky;top:calc(var(--top) + 64px);height:calc(100vh - var(--top) - 140px);min-height:420px;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surf)}
.inv-hd{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-bottom:1px solid var(--line);background:#f4f4f4;white-space:nowrap}
.inv-hd .inv-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:.9em;color:var(--mut)}
.inv-pick{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--ink);background:#fff;font-size:.92em;font-weight:500;cursor:pointer}
.inv-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.inv-view{flex:1 1 auto;min-height:0;overflow:auto;background:#e9e9e9;display:flex;align-items:flex-start;justify-content:center}
.inv-view iframe{width:100%;height:100%;border:0;background:#fff}
.inv-view img{max-width:100%;height:auto;display:block;background:#fff}
.inv-view .inv-empty{margin:auto;padding:24px;max-width:300px;text-align:center;color:var(--mut)}
.inv-split .inv-main .cols.c32{grid-template-columns:minmax(0,1fr)}
@media(max-width:1100px){.inv-split{grid-template-columns:minmax(0,1fr)}.inv-pane{position:static;height:70vh}}
/* lines beside the invoice preview: compact, so the quantity and rate billed stay in view */
.inv-main .grid.lines{font-size:.92em}
.inv-main .grid.lines th,.inv-main .grid.lines td{padding-left:4px;padding-right:4px}
.inv-main .grid.lines th{white-space:normal;line-height:1.15;vertical-align:bottom}
.inv-main .grid.lines td .ro:not(.n){max-width:112px}
.inv-main .grid.lines td input.num{width:66px}
.inv-main .grid.lines td input.wide{min-width:140px}
.inv-main .grid.lines td select{min-width:58px;max-width:120px}
.inv-main .grid.lines td output{width:84px}
.inv-main .grid.lines th{width:auto!important;min-width:0!important}
.inv-main .grid.lines td select{width:60px}
/* document head and stage tracker stay in view (Layout::freeze); --dh is its height, set by app.js */
.dochead{position:sticky;top:calc(var(--top) + 52px);z-index:20;background:var(--bg);margin-top:-12px;padding-top:12px;padding-bottom:1px;box-shadow:0 1px 0 var(--line)}
.dochead .jtrack{margin-bottom:12px}
.dochead .ph{margin-bottom:12px}
.dochead + *{margin-top:var(--gap)}
.inv-pane{top:calc(var(--top) + 52px + var(--dh,0px) + 12px);height:calc(100vh - var(--top) - 136px - var(--dh,0px));min-height:360px}
@media(max-width:860px){.dochead{position:static;box-shadow:none}.inv-pane{top:auto}}
@media print{.dochead{position:static}}
.checks li.mt{color:var(--mut)}.checks li.mt::before{content:"\2013";color:var(--mut)}
.chk-sec{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-weight:600}
.progress{height:6px;background:#ececec;margin:2px 0 8px}.progress span{display:block;height:100%;background:var(--grn)}
dialog.pop.wide{width:min(720px,94vw)}
/* tabs and the list's filter bar share one row (Layout::page); the bar wraps below when it does not fit */
.tabbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 16px;border-bottom:1px solid var(--line2);margin-bottom:12px}
.tabbar>.tabs{flex:1 1 auto;border-bottom:0;margin-bottom:0}
.tabbar>.filters{flex:0 1 auto;margin:0 0 6px auto}
.tabbar>.filters .q{margin-left:0}
@media(max-width:640px){.tabbar>.filters{flex:1 1 100%;margin:8px 0}}
.msg{border-left:3px solid var(--line2);padding:4px 10px;margin:0 0 10px}.msg.from-v{border-color:var(--warn)}.msg p{margin:4px 0 0;white-space:normal}.msg i{font-style:normal;margin-left:6px}
.sso{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}