/* ==========================================================================
   LED Sign City — shared workspace system (Sales Desk + Production)
   Loaded AFTER each app's own <style>, so it is the last word on chrome,
   controls, badges, progress, panels and phone behaviour. Both apps use the
   same class vocabulary (.card .t .btn .chip .pill .acts .row2 #dw .dh .db).
   ========================================================================== */

:root{
  --ws-font:"Helvetica Neue",Helvetica,Arial,-apple-system,"Segoe UI",sans-serif;
  --ws-bg:#F3F6F5;            /* workspace ground — off-white with a green bias */
  --ws-surface:#FFFFFF;
  --ws-ink:#141A1F;
  --ws-muted:#4A5560;            /* 7:1 on white — helper text everyone can read (was #5F6B72) */
  --ws-faint:#6B7580;            /* 4.8:1 — crumbs and counts, never below AA */
  --ws-line:#D9E0DD;
  --ws-hair:#E7ECEA;
  --ws-green:#1B6E47;         /* selection + active workflow */
  --ws-green-ink:#155538;
  --ws-green-bg:#E3F0E9;
  --ws-green-line:#B9D9C7;
  --ws-amber:#7A4F0E;  --ws-amber-bg:#FBF1DF; --ws-amber-line:#E9CF9C;
  --ws-red:#B23A2C;    --ws-red-bg:#FBE7E4;   --ws-red-line:#EBB5AD;
  --ws-gray:#3D4852;   --ws-gray-bg:#EEF1F0;  --ws-gray-line:#D3DAD7;
  --ws-yellow:#FFE94A; --ws-yellow-ink:#14171C; --ws-yellow-line:#E3CE2C;
  --ws-r-ctl:10px; --ws-r-card:14px; --ws-r-pill:999px;
  --ws-shadow:0 1px 2px rgba(20,26,31,.05),0 1px 1px rgba(20,26,31,.03);
  --ws-shadow-pop:0 12px 32px rgba(20,26,31,.18);
  --ws-side:244px;
  --ws-head:56px;
  --ws-tap:44px;
  --ws-fs:14.5px;
  /* bridge the legacy tokens so old rules pick up the new palette */
  --desk:var(--ws-bg); --desk-ink:var(--ws-ink); --desk-muted:var(--ws-muted);
  --desk-selected:var(--ws-green); --desk-selected-width:2px;
  --bg:var(--ws-bg); --card:var(--ws-surface); --ink:var(--ws-ink); --mut:var(--ws-muted); --sub:var(--ws-muted);
  --line:var(--ws-line); --hair:var(--ws-hair); --red:var(--ws-red); --grn:var(--ws-green);
  --on:var(--ws-yellow); --on-ink:var(--ws-yellow-ink);
  --r-card:var(--ws-r-card); --r-ctl:var(--ws-r-ctl); --r-sheet:0;
  --shadow-card:var(--ws-shadow);
  --font-sans:var(--ws-font);
  --ring:0 0 0 3px rgba(27,110,71,.18);
  --gold-bg:#FFF8CF; --blu:#1B6E47; --blu-bg:#E3F0E9;
}

/* ---------- ground ---------- */
html,body{background:var(--ws-bg)}
body{font-family:var(--ws-font);font-size:var(--ws-fs);color:var(--ws-ink);-webkit-font-smoothing:antialiased}
body.ws{margin:0}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ws-green);outline-offset:2px;border-radius:6px}

/* the legacy chrome is kept in the DOM (ids are referenced everywhere) but never shown */
body.ws>header{display:none!important}

/* ---------- shell ---------- */
.ws-shell{display:flex;min-height:100vh}
.ws-side{width:var(--ws-side);flex:0 0 var(--ws-side);background:var(--ws-surface);border-right:1px solid var(--ws-hair);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:35}
.ws-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
body.ws main{max-width:1180px;width:100%;margin:0 auto;padding:22px 28px 90px;flex:1 1 auto}

/* ---------- sidebar ---------- */
.ws-brand{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;min-height:var(--ws-head);border-bottom:1px solid var(--ws-hair)}
.ws-brand img{height:26px;width:auto;display:block}
.ws-brand .ws-app{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ws-muted);font-weight:700;margin-left:auto}
.ws-nav{display:block!important;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:10px 10px 8px;gap:0!important;flex-wrap:nowrap}
.ws-side .ws-grp>button,.ws-side .ws-item{padding:10px 12px;border-radius:9px;min-height:40px;font:600 14px/1.2 var(--ws-font);background:none;border:0;box-shadow:none}
.ws-nav-bottom{border-top:1px solid var(--ws-hair);padding:8px 10px 12px}
/* r3a: on a short window the bottom of an open menu group was cut off with nothing to say so (Purchase orders, Suppliers and
   Module library sat below the fold of an invisible scroller). The scroller now shows it has more: a thin scrollbar and a
   shadow at the edge that still has items; on short windows the whole menu scrolls as one piece. */
.ws-nav{scrollbar-width:thin;scrollbar-color:#b9c2cc transparent;
 background:linear-gradient(var(--ws-surface) 30%,rgba(255,255,255,0)) top/100% 28px no-repeat local,linear-gradient(rgba(255,255,255,0),var(--ws-surface) 70%) bottom/100% 28px no-repeat local,
  radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.20),rgba(0,0,0,0)) top/100% 9px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.22),rgba(0,0,0,0)) bottom/100% 9px no-repeat scroll}
.ws-nav::-webkit-scrollbar{width:8px}.ws-nav::-webkit-scrollbar-thumb{background:#b9c2cc;border-radius:8px}
@media (max-height:860px) and (min-width:901px){.ws-side{overflow-y:auto;scrollbar-width:thin}.ws-nav{flex:0 0 auto;overflow:visible;background:none}.ws-nav-bottom{margin-top:auto}}
.ws-grp{margin:2px 0}
.ws-item,.ws-grp>button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  font:600 14px/1.2 var(--ws-font);color:var(--ws-ink);padding:10px 12px;border-radius:9px;cursor:pointer;min-height:40px;text-decoration:none}
.ws-item:hover,.ws-grp>button:hover{background:var(--ws-gray-bg)}
.ws-item .ws-ico{width:18px;text-align:center;color:var(--ws-faint);font-size:15px;flex:none}
.ws-item.on{background:var(--ws-green-bg);color:var(--ws-green-ink);box-shadow:inset 3px 0 0 var(--ws-green)}
.ws-item.on .ws-ico{color:var(--ws-green)}
.ws-grp>button .ws-car{margin-left:auto;color:var(--ws-faint);font-size:12px;transition:transform .15s}
.ws-grp.open>button .ws-car{transform:rotate(90deg)}
.ws-grp.on>button{color:var(--ws-green-ink)}
.ws-sub{display:none;padding:2px 0 4px 0}
.ws-grp.open .ws-sub{display:block}
.ws-sub .ws-item{padding:8px 12px 8px 40px;font-weight:500;font-size:13.5px;min-height:36px}
.ws-sub .ws-item.on{font-weight:700}
.ws-item .ws-cnt{margin-left:auto;background:var(--ws-red);color:#fff;border-radius:var(--ws-r-pill);padding:1px 7px;font-size:12px;font-weight:800}
.ws-item .ws-cnt:empty{display:none}
.ws-item .ws-ro{margin-left:auto;font-size:12px;color:var(--ws-muted);font-weight:700}
.ws-item .ws-ext{margin-left:auto;font-size:12px;color:var(--ws-faint)}
.th-motion .ws-grp>button .ws-car{transition:none}

/* ---------- header ---------- */
.ws-head{height:var(--ws-head);display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--ws-surface);
  border-bottom:1px solid var(--ws-hair);position:sticky;top:0;z-index:30}
.ws-head .ws-menu{display:none;width:40px;height:40px;border:1px solid var(--ws-line);border-radius:9px;background:#fff;font-size:18px;cursor:pointer;flex:none;align-items:center;justify-content:center}
.ws-head .ws-loc{font-weight:800;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ws-head .ws-loc .ws-crumb{color:var(--ws-faint);font-weight:600}
.ws-search{flex:1 1 320px;max-width:520px;display:flex;align-items:center;gap:8px;min-width:0}
.ws-search input{width:100%;min-height:38px;padding:8px 12px 8px 34px;border:1px solid var(--ws-line);border-radius:var(--ws-r-ctl);
  font:14px var(--ws-font);background:var(--ws-bg);color:var(--ws-ink)}
.ws-search{position:relative}
.ws-search:before{content:'';position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141A1F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ws-search input:focus{background:#fff;border-color:var(--ws-green);box-shadow:var(--ring);outline:none}
.ws-head .ws-spacer{flex:1 1 auto}
.ws-hbtn{min-height:38px;padding:8px 13px;border:1px solid var(--ws-line);border-radius:var(--ws-r-ctl);background:#fff;font:600 13.5px var(--ws-font);color:var(--ws-ink);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.ws-hbtn:hover{background:var(--ws-gray-bg)}
.ws-save{font-size:12px;color:var(--ws-muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ws-save:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ws-green);flex:none}
.ws-save.bad{color:var(--ws-red);font-weight:700;background:var(--ws-red-bg);border:1px solid var(--ws-red-line);border-radius:var(--ws-r-pill);padding:4px 10px 4px 9px}
.ws-save.bad:before{background:var(--ws-red)}
.ws-save.warn{color:var(--ws-amber)}
.ws-save.warn:before{background:var(--ws-amber)}
.ws-save.off{color:var(--ws-faint)}
.ws-save.off:before{background:var(--ws-faint)}
.ws-prof{position:relative}
.ws-avatar{width:36px;height:36px;border-radius:50%;background:var(--ws-green);color:#fff;font:800 13px var(--ws-font);display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;letter-spacing:.02em}
.ws-avatar:hover{background:var(--ws-green-ink)}
.ws-pop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--ws-line);border-radius:12px;box-shadow:var(--ws-shadow-pop);min-width:260px;padding:8px;z-index:60}
.ws-pop[hidden]{display:none}
.ws-pop .ws-pop-h{padding:8px 10px 6px;font-size:12px;font-weight:700;color:var(--ws-muted)}
.ws-pop .ws-pop-h strong{color:var(--ws-ink);font-size:13.5px;display:block}
.ws-pop button,.ws-pop a{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;padding:10px 10px;border-radius:8px;
  font:600 13.5px var(--ws-font);color:var(--ws-ink);cursor:pointer;text-decoration:none;min-height:40px}
.ws-pop button:hover,.ws-pop a:hover{background:var(--ws-gray-bg)}
.ws-pop .ws-pop-sep{height:1px;background:var(--ws-hair);margin:6px 4px}
.ws-pop .ws-tog{margin-left:auto;font-size:12px;color:var(--ws-faint);font-weight:700}
.ws-pop .ws-tog.on{color:var(--ws-green)}

/* read-only banner — relocated under the header */
#robar{background:var(--ws-amber-bg)!important;border:1px solid var(--ws-amber-line)!important;color:var(--ws-amber)!important;
  border-radius:10px!important;padding:9px 14px!important;margin:14px 28px 0!important;font-size:13.5px!important;font-weight:600!important}
#robar[hidden]{display:none!important}

/* ---------- page header (title + primary action) ---------- */
.ws-page{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.ws-page h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ws-page .ws-page-sub{color:var(--ws-muted);font-size:13.5px;margin-top:4px}
.ws-page .ws-page-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* section headings inside a page stay quiet labels */
body.ws h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ws-muted);font-weight:700;margin:26px 0 10px}
body.ws h2:first-child{margin-top:0}
body.ws .hi{display:none}

/* ---------- metrics ---------- */
.ws-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 18px}
.ws-metric{background:var(--ws-surface);border:1px solid var(--ws-hair);border-radius:var(--ws-r-card);padding:13px 15px 12px;box-shadow:var(--ws-shadow);
  text-align:left;font:inherit;color:inherit;cursor:pointer;display:block;width:100%}
.ws-metric:hover{border-color:var(--ws-line);box-shadow:0 3px 10px rgba(20,26,31,.08)}
.ws-metric .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ws-muted);font-weight:700}
.ws-metric .v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px;line-height:1.1}
.ws-metric .n{font-size:12.5px;color:var(--ws-muted);margin-top:4px}
.ws-metric.warn .v{color:var(--ws-amber)}
.ws-metric.bad .v{color:var(--ws-red)}
.ws-metric.good .v{color:var(--ws-green)}
/* legacy tiles inherit the same look */
body.ws .tiles{gap:10px}
body.ws .t{border-radius:var(--ws-r-card);box-shadow:var(--ws-shadow);border-color:var(--ws-hair)}

/* ---------- tabs / view switches ---------- */
.ws-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ws-hair);margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.ws-tabs::-webkit-scrollbar{display:none}
.ws-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 12px;font:600 13.5px var(--ws-font);color:var(--ws-muted);cursor:pointer;white-space:nowrap;min-height:40px;border-radius:0}
.ws-tab:hover{color:var(--ws-ink)}
.ws-tab.on{color:var(--ws-green-ink);border-bottom-color:var(--ws-green)}
.ws-tab .ws-n{font-size:12px;font-weight:700;color:var(--ws-faint);margin-left:5px;background:var(--ws-gray-bg);border-radius:var(--ws-r-pill);padding:1px 6px}
.ws-tab.on .ws-n{background:var(--ws-green-bg);color:var(--ws-green-ink)}
.ws-tabs:focus-within .ws-tab:focus-visible{outline-offset:-3px}

/* ---------- toolbar: search + filters ---------- */
body.ws .toolbar{gap:8px;margin-bottom:12px;align-items:center}
body.ws .toolbar input[type=search]{flex:1 1 260px;min-width:200px;background:#fff;min-height:40px;padding:8px 12px}
body.ws .toolbar select{min-height:40px;padding:8px 32px 8px 11px;border-radius:var(--ws-r-ctl);border:1px solid var(--ws-line);background:#fff;font:600 13px var(--ws-font);max-width:220px}
body.ws .chip{padding:8px 13px;min-height:38px;border:1px solid var(--ws-line);background:#fff;border-radius:var(--ws-r-pill);font:600 12.5px var(--ws-font);color:var(--ws-ink);cursor:pointer}
body.ws .chip:hover{border-color:var(--ws-green-line);background:var(--ws-green-bg)}
body.ws .chip.on{background:var(--ws-green-bg);color:var(--ws-green-ink);border:1px solid var(--ws-green);font-weight:700;box-shadow:inset 0 0 0 1px var(--ws-green)}
body.ws .count{color:var(--ws-muted);font-size:12.5px}
.ws-more{position:relative;display:inline-block}
.ws-more>.ws-more-pop{position:absolute;left:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--ws-line);border-radius:12px;box-shadow:var(--ws-shadow-pop);padding:12px;z-index:50;min-width:280px;display:flex;flex-direction:column;gap:8px}
.ws-more>.ws-more-pop[hidden]{display:none}
.ws-more-pop select,.ws-more-pop .chip,.ws-more-pop button{width:100%;max-width:none!important;justify-content:flex-start;text-align:left}

/* ---------- buttons ---------- */
body.ws .btn{font:600 13.5px var(--ws-font);border-radius:var(--ws-r-ctl);padding:9px 15px;min-height:var(--ws-tap);cursor:pointer;
  background:var(--ws-ink);color:#fff;border:1px solid var(--ws-ink);display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2}
body.ws .btn:hover{background:#000}
body.ws .btn.y,body.ws .lsc-btn{background:var(--ws-yellow)!important;color:var(--ws-yellow-ink)!important;border:1px solid var(--ws-yellow-line)!important;font-weight:700!important}
body.ws .btn.y:hover,body.ws .lsc-btn:hover{background:#FFE22C!important}
body.ws .btn.g,body.ws .btn.o{background:#fff!important;color:var(--ws-ink)!important;border:1px solid var(--ws-line)!important}
body.ws .btn.g:hover,body.ws .btn.o:hover{background:var(--ws-gray-bg)!important;border-color:#B9C2BE!important}
body.ws .btn.r{background:var(--ws-red)!important;color:#fff!important;border-color:var(--ws-red)!important}
body.ws .btn.danger{background:#fff!important;color:var(--ws-red)!important;border:1px solid var(--ws-red-line)!important}
body.ws .btn.danger:hover{background:var(--ws-red-bg)!important}
body.ws .btn.sm{min-height:34px;padding:6px 11px;font-size:12.5px}
body.ws .btn.link{background:none!important;border-color:transparent!important;color:var(--ws-green-ink)!important;padding-left:6px;padding-right:6px;text-decoration:underline;text-underline-offset:3px}
body.ws .btn:disabled{opacity:.5;cursor:default}
body.ws .acts a,body.ws .acts button{border-radius:9px;border:1px solid var(--ws-line);background:#fff;color:var(--ws-ink);font:600 12.5px var(--ws-font);min-height:36px;padding:7px 11px;text-decoration:none}
body.ws .acts a:hover,body.ws .acts button:hover{background:var(--ws-gray-bg);border-color:#B9C2BE}
body.ws .acts a.danger,body.ws .acts button.danger{color:var(--ws-red);border-color:var(--ws-red-line)}
body.ws .acts a.danger:hover,body.ws .acts button.danger:hover{background:var(--ws-red-bg)}
/* nav-style legacy buttons that survive inside pages */
body.ws .cname{font:700 14px var(--ws-font);color:var(--ws-ink)}

/* ---------- cards / lists / tables ---------- */
body.ws .card{border-radius:var(--ws-r-card);border:1px solid var(--ws-hair);box-shadow:var(--ws-shadow);padding:16px 18px;margin-bottom:12px}
body.ws .pcard{border-radius:var(--ws-r-card);border:1px solid var(--ws-hair);border-left:1px solid var(--ws-hair);box-shadow:var(--ws-shadow)}
body.ws .qc{border-radius:12px;border-color:var(--ws-hair)}
body.ws .qc.top{background:var(--ws-green-bg);border-color:var(--ws-green-line)}
body.ws .jobcard{background:var(--ws-yellow)!important;border:1px solid var(--ws-yellow-line)!important;color:var(--ws-yellow-ink)!important;box-shadow:none!important}
body.ws table{border-radius:var(--ws-r-card);border-color:var(--ws-hair);box-shadow:var(--ws-shadow)}
body.ws thead th,body.ws th{background:#FAFBFA;color:var(--ws-muted);font-size:12px;letter-spacing:.07em;padding:9px 12px}
body.ws td{padding:11px 12px;font-size:13.5px;border-color:var(--ws-hair)}
body.ws tbody tr:hover td{background:#F6F8F7}
body.ws tbody tr.hit td{background:var(--gold-bg)!important}
.ws-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:var(--ws-r-card)}
.ws-scroll>table{min-width:640px}
.ws-list{display:flex;flex-direction:column;gap:8px}
.ws-row{background:var(--ws-surface);border:1px solid var(--ws-hair);border-radius:12px;padding:12px 14px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--ws-shadow);text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer}
.ws-row:hover{border-color:var(--ws-line);box-shadow:0 3px 10px rgba(20,26,31,.08)}
.ws-row .ws-row-main{flex:1 1 auto;min-width:0}
.ws-row .ws-row-t{font-weight:700;font-size:14.5px;overflow-wrap:anywhere}
.ws-row .ws-row-s{color:var(--ws-muted);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.ws-row .ws-row-side{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ws-row .ws-row-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--ws-muted)}
.ws-row .ws-row-meta strong{color:var(--ws-ink)}
.ws-kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:13.5px}
.ws-kv dt{color:var(--ws-muted);font-weight:600;font-size:12.5px}
.ws-kv dd{margin:0}

/* ---------- pills / badges ---------- */
body.ws .pill,body.ws .st{font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--ws-r-pill);border:1px solid transparent}
body.ws .st{background:var(--ws-gray-bg);color:var(--ws-ink);border-color:var(--ws-gray-line)}
.ws-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--ws-r-pill);white-space:nowrap;line-height:1.3;border:1px solid transparent}
.ws-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.ws-badge.cur{background:var(--ws-green);color:#fff;border-color:var(--ws-green)}
.ws-badge.done{background:var(--ws-green-bg);color:var(--ws-green-ink);border-color:var(--ws-green-line)}
.ws-badge.wait{background:var(--ws-amber-bg);color:var(--ws-amber);border-color:var(--ws-amber-line)}
.ws-badge.block{background:var(--ws-red-bg);color:var(--ws-red);border-color:var(--ws-red-line)}
.ws-badge.off{background:var(--ws-gray-bg);color:var(--ws-gray);border-color:var(--ws-gray-line)}
.ws-badge.plain{background:#fff;color:var(--ws-ink);border-color:var(--ws-line)}
.ws-badge.plain:before,.ws-badge.nodot:before{display:none}

/* ---------- workflow progress ---------- */
.ws-prog{display:flex;flex-direction:column;gap:6px;min-width:0}
.ws-prog .ws-prog-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-prog .ws-prog-pos{font-size:12px;color:var(--ws-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ws-prog .ws-prog-track{display:flex;gap:3px;height:6px}
.ws-prog .ws-prog-track span{flex:1 1 0;border-radius:3px;background:var(--ws-gray-line)}
.ws-prog .ws-prog-track span.done{background:var(--ws-green-line)}
.ws-prog .ws-prog-track span.cur{background:var(--ws-green)}
.ws-prog.lost .ws-prog-track span.cur{background:var(--ws-gray)}
.ws-prog.blocked .ws-prog-track span.cur{background:var(--ws-red)}
.ws-prog.wait .ws-prog-track span.cur{background:var(--ws-amber)}
.ws-prog .ws-prog-names{display:flex;gap:3px;font-size:12px;color:var(--ws-faint);margin-top:-2px}
.ws-prog .ws-prog-names span{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.ws-prog .ws-prog-names span.done{color:var(--ws-green-ink)}
.ws-prog .ws-prog-names span.cur{color:var(--ws-ink);font-weight:700}
.ws-prog.compact .ws-prog-names{display:none}
.ws-prog.compact{gap:4px;max-width:260px}
.ws-prog.compact .ws-prog-track{height:5px}
.ws-prog .ws-prog-note{font-size:12px;color:var(--ws-muted)}
.ws-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* legacy stage bar (Desk drawer) adopts the same colours */
body.ws .stg .dot{background:var(--ws-gray-bg);color:var(--ws-faint)}
body.ws .stg.done .dot{background:var(--ws-green-bg);color:var(--ws-green-ink)}
body.ws .stg.cur .dot{background:var(--ws-green);color:#fff;border:0;padding:5px 12px}
body.ws .stg.lost .dot{background:var(--ws-gray-bg);color:var(--ws-gray)}
/* stage-change control */
.ws-stage-ctl{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-stage-ctl select{min-height:38px;width:auto!important;max-width:280px;padding:7px 30px 7px 11px;border-radius:var(--ws-r-ctl);border:1px solid var(--ws-line);background:#fff;font:600 13px var(--ws-font);margin:0}
.ws-stage-ctl .ws-stage-lbl{font-size:12px;color:var(--ws-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
/* checklist for non-linear milestones */
.ws-check{display:flex;flex-wrap:wrap;gap:6px}
.ws-check .ws-badge{cursor:default}

/* ---------- record panel (drawer) ---------- */
body.ws #ov{background:rgba(20,26,31,.38);z-index:40;backdrop-filter:blur(1px)}
body.ws #dw{width:min(600px,100%);background:var(--ws-bg);box-shadow:-12px 0 40px rgba(20,26,31,.18);z-index:41;right:0;top:0;bottom:0;height:auto;display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .18s ease-out}
body.ws #dw.on{transform:none;right:0}
body.ws .dh{background:#fff;color:var(--ws-ink);border-bottom:1px solid var(--ws-hair);padding:14px 56px 12px 20px;border-radius:0;position:sticky;top:0;z-index:2}
body.ws .dh h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
body.ws .dh .sub{color:var(--ws-muted);font-size:12.5px}
body.ws .dh button{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:9px;background:#fff;border:1px solid var(--ws-line);color:var(--ws-ink);font-size:16px;cursor:pointer}
body.ws .dh button:hover{background:var(--ws-gray-bg)}
body.ws .db{padding:16px 20px 80px;overflow-y:auto;flex:1 1 auto}
.ws-ptabs{display:flex;gap:4px;border-bottom:1px solid var(--ws-hair);margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.ws-ptabs::-webkit-scrollbar{display:none}
.ws-ptabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 11px;font:600 13.5px var(--ws-font);color:var(--ws-muted);cursor:pointer;min-height:40px;white-space:nowrap;border-radius:0}
.ws-ptabs button.on{color:var(--ws-green-ink);border-bottom-color:var(--ws-green)}
.ws-ptabs button .ws-n{font-size:12px;color:var(--ws-faint);margin-left:4px}
.ws-sec{background:#fff;border:1px solid var(--ws-hair);border-radius:12px;padding:13px 15px;margin-bottom:10px;box-shadow:var(--ws-shadow)}
.ws-sec-h{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ws-muted);font-weight:700;margin:0 0 7px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ws-contact{font-size:14px}
.ws-contact .ws-contact-n{font-weight:700;font-size:15px}
.ws-contact .ws-contact-l{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:4px;font-size:13.5px}
.ws-contact .ws-contact-l a{color:var(--ws-ink)}
.ws-contact .ws-contact-l .ws-cp{border:0;background:none;color:var(--ws-faint);cursor:pointer;padding:0 4px;font-size:13px;min-height:24px}
.ws-primary-acts{display:flex;gap:8px;flex-wrap:wrap}
.ws-danger{border-top:1px solid var(--ws-red-line);margin-top:8px;padding-top:8px}
.ws-danger .ws-danger-h{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ws-red);font-weight:700;margin:2px 0 6px}
body.ws .dsec{border-radius:12px;border-color:var(--ws-hair);box-shadow:var(--ws-shadow)}
body.ws .dsec>summary{font-size:14px}

/* ---------- dialogs ---------- */
.ws-dlg-bd{position:fixed;inset:0;background:rgba(20,26,31,.42);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.ws-dlg{background:#fff;border:1px solid var(--ws-line);border-radius:14px;box-shadow:var(--ws-shadow-pop);width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:18px 20px 16px}
.ws-dlg h3{margin:0 0 4px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.ws-dlg .ws-dlg-ctx{font-size:12.5px;color:var(--ws-muted);margin-bottom:10px}
.ws-dlg .ws-dlg-ctx strong{color:var(--ws-ink)}
.ws-dlg label{display:block;font-size:12px;font-weight:700;color:var(--ws-muted);text-transform:none;letter-spacing:0;margin:8px 0 5px}
.ws-dlg input,.ws-dlg textarea,.ws-dlg select{width:100%;font:14.5px var(--ws-font);padding:10px 12px;border:1px solid var(--ws-line);border-radius:var(--ws-r-ctl);min-height:var(--ws-tap);background:#fff}
.ws-dlg textarea{min-height:96px;resize:vertical}
.ws-dlg .ws-dlg-hint{font-size:12px;color:var(--ws-muted);margin-top:5px}
.ws-dlg .ws-dlg-err{font-size:12.5px;color:var(--ws-red);font-weight:600;margin-top:6px;min-height:16px}
.ws-dlg .ws-dlg-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.ws-dlg .ws-dlg-acts .btn{min-width:96px}
.ws-dlg p{margin:0 0 8px;font-size:14px}

/* ---------- states ---------- */
.ws-state{border:1px dashed var(--ws-line);border-radius:12px;padding:22px 18px;text-align:center;color:var(--ws-muted);font-size:14px;background:#fff}
.ws-state strong{display:block;color:var(--ws-ink);font-size:15px;margin-bottom:3px}
.ws-state.ok{border-style:solid;border-color:var(--ws-green-line);background:var(--ws-green-bg);color:var(--ws-green-ink)}
.ws-state.err{border-style:solid;border-color:var(--ws-red-line);background:var(--ws-red-bg);color:var(--ws-red)}
.ws-state .btn{margin-top:10px}
.ws-loading{color:var(--ws-muted);font-size:13px;padding:12px 0}
.ws-loading:before{content:'';display:inline-block;width:12px;height:12px;border:2px solid var(--ws-line);border-top-color:var(--ws-green);border-radius:50%;margin-right:8px;vertical-align:-2px;animation:wsspin .8s linear infinite}
@keyframes wsspin{to{transform:rotate(360deg)}}
.th-motion .ws-loading:before{animation:none}
body.ws .ro .btn,body.ws .ro .acts a,body.ws .ro .acts button,body.ws .ro input,body.ws .ro select,body.ws .ro textarea{pointer-events:none!important;opacity:.5!important}
body.ws .ro .ws-tabs .ws-tab,body.ws .ro .toolbar input,body.ws .ro .toolbar select,body.ws .ro .toolbar .chip,body.ws .ro .cname,body.ws .ro .ws-row,body.ws .ro .ws-metric,body.ws .ro .dmore>summary{pointer-events:auto!important;opacity:1!important}

/* ---------- forms ---------- */
body.ws label{font-size:12px;text-transform:none;letter-spacing:0;font-weight:700;color:var(--ws-muted)}
body.ws input[type=search],body.ws input[type=text],body.ws input[type=url],body.ws input[type=email],body.ws input[type=tel],body.ws input[type=number],body.ws input[type=date],body.ws input[type=time],body.ws input[type=password],body.ws select,body.ws textarea{
  border-radius:var(--ws-r-ctl);border:1px solid var(--ws-line);font-family:var(--ws-font)}
body.ws input:focus,body.ws select:focus,body.ws textarea:focus{border-color:var(--ws-green);box-shadow:var(--ring);outline:none}
.ws-field{margin-bottom:10px}
.ws-field .ws-err{color:var(--ws-red);font-size:12px;font-weight:600;margin-top:4px}
.ws-field input[aria-invalid=true],.ws-field textarea[aria-invalid=true]{border-color:var(--ws-red)}

/* toast */
body.ws #tst{border-radius:12px!important;font-weight:600!important;box-shadow:var(--ws-shadow-pop)!important}

/* ---------- legacy bits that no longer belong ---------- */
body.ws #svtgl,body.ws #idbox,body.ws #svst,body.ws .brand-row{display:none!important}
body.ws #ws-a11y-legacy{display:none}
/* sales-desk-only floating accessibility button keeps working but sits lower-left, out of the way of panels */
body.ws #a11yfab,body.ws #a11ybtn{left:16px;right:auto;bottom:16px}
body.ws .desk-phone{display:inline-flex}

/* ---------- mobile queue cards (Desk pipeline) ---------- */
body.ws #call #tb td.ws-mob{display:none}
.ws-mobonly{display:none}
#call .ws-scroll>table{min-width:0}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  :root{--ws-side:216px}
  body.ws main{padding:18px 20px 90px}
  #robar{margin:12px 20px 0!important}
}
@media(max-width:900px){
  .ws-side{position:fixed;left:0;top:0;bottom:0;height:100vh;transform:translateX(-104%);transition:transform .18s ease-out;box-shadow:none;width:min(300px,86vw);flex-basis:auto}
  .ws-side.open{transform:none;box-shadow:12px 0 40px rgba(20,26,31,.22)}
  .th-motion .ws-side{transition:none}
  .ws-side-bd{position:fixed;inset:0;background:rgba(20,26,31,.42);z-index:34;display:none}
  .ws-side-bd.on{display:block}
  .ws-side .ws-close{display:inline-flex}
  .ws-head .ws-menu{display:inline-flex}
  .ws-head{padding:0 12px;gap:8px}
  .ws-head .ws-loc{font-size:15px}
  .ws-search{flex:1 1 140px;max-width:none}
  .ws-hbtn .ws-hbtn-t{display:none}
  .ws-hbtn{padding:8px 10px}
  .ws-save .ws-save-t{display:none}
  .ws-save.bad .ws-save-t{display:inline}
  body.ws main{padding:14px 14px 100px}
  #robar{margin:10px 14px 0!important}
  .ws-page h1{font-size:21px}
  .ws-metrics{grid-template-columns:repeat(2,1fr);gap:8px}
  .ws-metric{padding:11px 12px 10px}
  .ws-metric .v{font-size:21px}
}
.ws-side .ws-close{display:none;margin-left:auto;width:36px;height:36px;border:1px solid var(--ws-line);border-radius:9px;background:#fff;cursor:pointer;font-size:16px;align-items:center;justify-content:center}
@media(max-width:640px){
  body.ws #dw{width:100%;transform:translateX(100%)}
  body.ws #dw.on{transform:none}
  body.ws .dh{padding:12px 56px 10px 14px}
  body.ws .db{padding:12px 14px 90px}
  .ws-dlg-bd{padding:0;align-items:flex-end}
  .ws-dlg{width:100%;max-height:92vh;border-radius:14px 14px 0 0}
  .ws-page{margin-bottom:12px}
  .ws-page .ws-page-act{width:100%}
  .ws-page .ws-page-act .btn{flex:1 1 auto}
  body.ws .toolbar input[type=search]{flex:1 1 100%;min-width:0}
  body.ws .toolbar select{max-width:none;flex:1 1 45%}
  /* Desk pipeline: stacked cards with labels, hidden columns stay hidden */
  .ws-mobonly{display:block;margin-top:3px}
  .ws-row{padding:12px}
  .ws-row .ws-row-side{align-items:flex-start;text-align:left}
  .ws-tabs{margin-left:-14px;margin-right:-14px;padding:0 14px}
  .ws-ptabs{margin-left:-14px;margin-right:-14px;padding:0 14px}
}
@media(max-width:400px){
  .ws-metrics{grid-template-columns:1fr 1fr;gap:6px}
  .ws-metric .v{font-size:19px}
}

/* ---------- print ---------- */
@media print{.ws-side,.ws-head,#robar,.ws-side-bd{display:none!important}body.ws main{padding:0}}

/* projects: value is information, not the headline */
body.ws #proj .pv{font-size:16px;font-weight:700;color:var(--ws-muted)}
@media(max-width:640px){#stagehint{display:none}}
.ws-prog.compact .ws-prog-top{gap:6px}
body.ws a.btn{text-decoration:none}
@media(max-width:900px){.ws-side .ws-close{display:inline-flex}}
/* phone tap targets on the pipeline and in panels */
@media(max-width:640px){
  .ws-contact .ws-contact-l .ws-cp{min-width:36px;min-height:36px}
  body.ws .acts a,body.ws .acts button{min-height:44px}
}
.ws-contact .ws-contact-l .ws-cp{min-width:32px;min-height:32px}
@media(max-width:640px){.ws-tab{padding:10px 8px;font-size:13px}.ws-tab .ws-n{margin-left:3px}}

/* ===================================================================== sales workspace (customer panel) — rev 2 */
body.ws #dw.wk-wide{width:min(960px,100%)}
.wk{margin-bottom:10px}
.wk [hidden],.wk-tpl[hidden]{display:none!important}
.wk-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;justify-content:space-between;font-size:13.5px;margin:-4px 0 6px;line-height:1.5}
.wk-contact{min-width:0;overflow-wrap:anywhere}
.wk-contact strong{font-size:14.5px}
.wk-sep{color:var(--ws-faint)}
.wk-status-line{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:13px;padding:6px 0;border-top:1px solid var(--ws-hair);border-bottom:1px solid var(--ws-hair)}
.wk-status-line .wk-stage{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.wk-status-line .wk-stage .ws-prog{margin:0}
.wk-status-line select{width:auto;min-height:30px}
#wk-stage-detail{margin-top:8px}
#wk-stage-detail .ws-sec{margin-bottom:0}
.wk-nexts{margin:8px 0 10px}
.wk-next{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:7px 10px;border-left:4px solid var(--ws-yellow);background:#fff;border-radius:0 10px 10px 0;box-shadow:var(--ws-shadow);font-size:13.5px}
.wk-next+.wk-next,.wk-next-more{margin-top:4px}
.wk-next.appt{border-left-color:var(--ws-green)}
.wk-next.od{border-left-color:var(--ws-red)}
.wk-next.od strong{color:var(--ws-red)}
.wk-next-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ws-muted);font-weight:700;min-width:34px}
.wk-task-main{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.wk-task-acts{display:flex;gap:6px;flex:0 0 auto;align-items:center;margin-left:auto}
.wk-task-acts .ws-more-pop{right:0;left:auto;min-width:200px}
.wk-next-more .wk-next{margin-top:4px}
.wk-reply{margin-top:6px;background:var(--ws-green-bg);border:1px solid var(--ws-green);border-radius:10px;padding:9px 12px;font-size:13.5px}
.wk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.wk-grid>.ws-sec{margin-bottom:0}
@media(min-width:1180px){body.ws #dw.wk-wide .wk-grid{grid-template-columns:minmax(0,1fr) 300px}}
.wk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ws-hair);margin:-4px -4px 10px;overflow-x:auto;scrollbar-width:none}
.wk-tabs::-webkit-scrollbar{display:none}
.wk-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 10px;font:600 13.5px var(--ws-font);color:var(--ws-muted);cursor:pointer;min-height:42px;white-space:nowrap;border-radius:0}
.wk-tab.on{color:var(--ws-green-ink);border-bottom-color:var(--ws-green)}
.wk-tab:focus-visible{outline:2px solid var(--ws-green);outline-offset:-2px}
.wk-form label.wk-lbl,.wk-form .wk-lbl{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ws-muted);font-weight:700;margin:10px 0 5px}
.wk-form .wk-lbl:first-child{margin-top:0}
.wk-form .wk-lbl .sub{text-transform:none;letter-spacing:0;font-weight:500}
.wk-form textarea{min-height:76px;width:100%;box-sizing:border-box}
.wk-form input:not([type=radio]):not([type=checkbox]),.wk-form select{width:100%;box-sizing:border-box;min-height:40px}
.wk-form input[type=date],.wk-form input[type=time]{max-width:220px}
.wk-form .wk-chips select{width:auto;max-width:100%}
.wk-form textarea[readonly],.wk-form input[readonly]{background:var(--ws-bg);color:var(--ws-muted)}
.wk-radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px}
.wk-radio{display:flex;align-items:center;gap:8px;border:1px solid var(--ws-line);border-radius:10px;padding:8px 10px;font:600 13.5px var(--ws-font);color:var(--ws-ink);cursor:pointer;min-height:44px;text-transform:none;letter-spacing:0;margin:0;background:#fff}
.wk-radio input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--ws-green)}
.wk-radio.on{background:var(--ws-green-bg);border-color:var(--ws-green);color:var(--ws-green-ink);box-shadow:inset 0 0 0 1px var(--ws-green)}
.wk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.wk-chips .chip{min-height:36px;padding:7px 12px}
.wk-short{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px}
.wk-short .chip{min-height:36px;padding:7px 12px}
.wk-warn{background:var(--ws-amber-bg);border:1px solid var(--ws-amber-line);color:var(--ws-amber);border-radius:10px;padding:8px 11px;margin:8px 0;font-size:13px;font-weight:600}
.wk-warn .btn{margin-left:6px}
.wk-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--ws-muted);margin:0 0 8px}
.wk-meta strong{color:var(--ws-ink)}
.wk-prev{margin:0}
.wk-prev-sub,.wk-prev-body{background:var(--ws-bg);border:1px dashed var(--ws-line);border-radius:8px;padding:7px 10px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.wk-prev-sub{margin-bottom:4px;white-space:normal}
.wk-status{margin:8px 0 0;min-height:0}
.wk-st{border-radius:10px;padding:9px 12px;font-size:13.5px;margin-top:8px;background:var(--ws-bg);border:1px solid var(--ws-line)}
.wk-st.ok{background:var(--ws-green-bg);color:var(--ws-green-ink);border:1px solid var(--ws-green)}
.wk-st.bad{background:var(--ws-red-bg);color:var(--ws-red);border:1px solid var(--ws-red-line)}
.wk-st.warn{background:var(--ws-amber-bg);color:var(--ws-amber);border:1px solid var(--ws-amber-line)}
.wk-st .btn{vertical-align:middle}
.wk-unknown{background:var(--ws-amber-bg);border:1px solid var(--ws-amber-line);border-radius:10px;padding:10px 12px;margin-top:8px;font-size:13.5px}
.wk-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 14px}
.wk-savebar{background:#fff;border-top:1px solid var(--ws-hair);margin:12px -15px -13px;padding:10px 15px 12px;border-radius:0 0 12px 12px}
.wk-savebar .btn.y{min-width:160px}
.wk-lr{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:13px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--ws-hair)}
.wk-ix{padding:6px 0;border-top:1px solid var(--ws-hair)}
.wk-ix.grp{border-left:3px solid var(--ws-line);padding-left:10px;margin:4px 0}
.wk-act{font-size:13.5px;padding:3px 0}
.wk-act .ws-badge{vertical-align:middle}
.wk-act .sub{font-size:12px}
.wk-tpl{border:1px solid var(--ws-line);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--ws-bg)}
.wk-tpl .toolbar{margin:0 0 8px}
.wk-tpl .toolbar input{flex:1 1 180px;min-width:0}
.wk-tpl .toolbar select{width:auto;max-width:180px}
.wk-tpl .wk-tabs{background:transparent}
.wk-tpl-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
.wk-tpl-row{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;background:#fff;border:1px solid var(--ws-hair);border-radius:9px;padding:8px 10px}
.wk-tpl-main{flex:1 1 auto;min-width:0;font-size:13px}
.wk-tpl-main .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.wk-tpl-acts{display:flex;gap:4px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.wk-tpl-prev{white-space:pre-wrap;font-size:13px;background:#fff;border:1px dashed var(--ws-line);border-radius:8px;padding:8px 10px;margin:6px 0}
@media(max-width:640px){
  body.ws .db{padding:12px 14px 80px}
  .wk-head{font-size:13px}
  .wk-status-line{gap:4px 10px;font-size:12.5px}
  .wk-next{padding:6px 8px;font-size:13px}
  .wk-task-acts{margin-left:0;width:100%;justify-content:flex-start}
  .wk-lr{grid-template-columns:1fr}
  .wk-tab{padding:8px 8px;font-size:13px}
  .wk-tpl-row{flex-direction:column}
  .wk-tpl-acts{justify-content:flex-start}
  .wk-savebar{margin:12px -14px -13px;padding:10px 14px 12px}
  .wk-radios{grid-template-columns:1fr 1fr}
}

/* ===================================================================== writing assistance (shared) */
.ws-ai{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 2px;width:100%;flex-basis:100%}
.ws-ai .btn.sm{min-height:34px}
.ws-ai .ws-more-pop{left:0;right:auto}
.ws-ai-st{font-size:12.5px;color:var(--ws-muted)}
.ws-ai-rev{width:100%;flex-basis:100%;margin:6px 0 8px;background:var(--ws-bg);border:1px solid var(--ws-line);border-left:4px solid var(--ws-green);border-radius:10px;padding:10px 12px;font-size:13.5px}
.ws-ai-rev[hidden]{display:none!important}
.ws-ai-h{margin-bottom:4px}
.ws-ai-flag{background:var(--ws-amber-bg);border:1px solid var(--ws-amber-line);color:var(--ws-amber);border-radius:8px;padding:6px 10px;margin:4px 0 6px;font-size:13px;font-weight:600}
.ws-ai-txt{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px dashed var(--ws-line);border-radius:8px;padding:8px 10px;max-height:320px;overflow:auto}
.row2>.ws-ai,.row2>.ws-ai-rev{flex-basis:100%}
@media(max-width:640px){.ws-ai .btn.sm{padding:6px 9px;font-size:12.5px}}

/* ---- Accessibility settings reach the workspace (22 Sep 2026) ----
   body.ws re-bridges --mut / --line to the workspace tokens, which silently cancelled the html.th-* settings:
   "High contrast" and "Larger text" did nothing on the redesigned screens. These rules put them back, and go
   further where a reader who only sees bold black text needs it: no light grey anywhere, bigger option lists,
   dark placeholders, yellow (not blue) selection. */
html.th-contrast body.ws{--ws-muted:#1F2933;--ws-faint:#4A5560;--ws-line:#8E99A4;--ws-hair:#A9B3BD;--ws-gray:#1F2933;--ws-gray-bg:#E4E8EC;--ws-gray-line:#8E99A4;
  --ws-amber:#7A4F0E;--ws-red:#B23A2C;--ws-green-ink:#155538}
html.th-contrast body.ws .sub,html.th-contrast body.ws .wk-sep,html.th-contrast body.ws .ws-save,html.th-contrast body.ws .count,html.th-contrast body.ws .wk-meta,
html.th-contrast body.ws .ws-row-sub,html.th-contrast body.ws .ws-sec-h,html.th-contrast body.ws .ws-app,html.th-contrast body.ws small{color:#1F2933!important;font-weight:700}
html.th-contrast body.ws h2{color:#111!important}
html.th-contrast body.ws .pill,html.th-contrast body.ws .st{color:#111!important;border:1px solid #6B7683}
html.th-contrast body.ws .ws-badge{font-weight:800;border-width:1.5px}
html.th-contrast body.ws .ws-badge.off,html.th-contrast body.ws .ws-badge.nodot{color:#111!important;background:#E4E8EC!important;border-color:#6B7683!important}
html.th-contrast body.ws .card,html.th-contrast body.ws .qc,html.th-contrast body.ws .act,html.th-contrast body.ws table,html.th-contrast body.ws td,html.th-contrast body.ws th,
html.th-contrast body.ws input,html.th-contrast body.ws select,html.th-contrast body.ws textarea,html.th-contrast body.ws .btn.o{border-color:#6B7683!important}
html.th-contrast body.ws input,html.th-contrast body.ws select,html.th-contrast body.ws textarea{color:#111!important;background:#fff!important}
html.th-contrast body.ws ::placeholder{color:#3D4852!important;opacity:1}
html.th-contrast body.ws option{color:#111;background:#fff}
html.th-contrast body.ws ::selection{background:#FFE94A;color:#111}
html.th-contrast body.ws a{color:#0B3D91;text-decoration:underline}
html.th-contrast body.ws .ws-nav a,html.th-contrast body.ws .ws-nav button{color:#111!important;font-weight:700}
html.th-contrast body.ws .ws-row:hover,html.th-contrast body.ws .qc:hover{background:#FFF9D6!important}
html.th-big body.ws{--ws-fs:17px}
html.th-big body.ws .sub,html.th-big body.ws .wk-sep,html.th-big body.ws .ws-row-sub,html.th-big body.ws .wk-meta,html.th-big body.ws small{font-size:15px!important;line-height:1.5}
html.th-big body.ws .ws-badge,html.th-big body.ws .pill,html.th-big body.ws .st{font-size:13.5px!important;padding:4px 11px!important}
html.th-big body.ws option,html.th-big body.ws select,html.th-big body.ws input,html.th-big body.ws textarea{font-size:17px!important}
html.th-big body.ws .ws-sec-h,html.th-big body.ws h2,html.th-big body.ws thead th{font-size:14.5px!important;letter-spacing:.02em}
html.th-big body.ws .ws-nav a,html.th-big body.ws .ws-nav button{font-size:17px!important;min-height:48px}
html.th-big body.ws .ws-loc{font-size:17px!important}
html.th-big body.ws .act,html.th-big body.ws .qc,html.th-big body.ws td{font-size:16px!important;line-height:1.55}
html.th-big body.ws .wk-act{font-size:16px!important}
html.th-focus body.ws :focus-visible{outline:4px solid #0B3D91!important;outline-offset:2px!important}

/* ---- Readable by default (22 Sep 2026) — the audit found 1,000+ helper texts at 12.5px and badges at 10.5–11px.
   Everyone gets 13.5px helper text, 12px badges and pills, 12.5px section labels with less tracking, darker amber,
   a visible focus ring, readable disabled buttons, and the Windows contrast / reduce-motion settings honoured. ---- */
body.ws{--fs-sub:13.5px}
body.ws .sub,body.ws .lt,body.ws .ws-row-s,body.ws .ws-save-t,body.ws .wk-meta{font-size:13.5px}
body.ws .ws-prog-pos{font-size:13px}
body.ws .ws-badge{font-size:12px;padding:3px 10px}
body.ws .ws-n{font-size:12px;color:#3D4852;background:#E1E6EA}
body.ws .pill,body.ws .st{font-size:12px;padding:3px 10px}
body.ws .ws-sec-h,body.ws h2,body.ws thead th,body.ws .sth,body.ws .t .k{font-size:12.5px;letter-spacing:.04em}
body.ws .t .n{font-size:13px}
body.ws label,body.ws .wk-radio{font-size:13px}
body.ws .ws-crumb{color:var(--ws-muted)}
body.ws .ws-app{font-size:12px}
body.ws a.warm,body.ws strong.warm{color:#7A4F0E}
body.ws .btn[style*="background:#128c4a"],body.ws .btn[style*="background: #128c4a"]{background:#0F7A40!important}
/* a badge that blocks or waits says so with a mark, not only a colour */
body.ws .ws-badge.block:before{content:"\26A0";background:none;width:auto;height:auto;font-size:12px;line-height:1}
body.ws .ws-badge.wait:before{content:"\23F3";background:none;width:auto;height:auto;font-size:12px;line-height:1}
/* disabled = still readable, just plainly off */
body.ws .btn:disabled,body.ws button:disabled{opacity:1;background:#EDF0F2!important;color:#3D4852!important;border:1px dashed #8E99A4!important;cursor:not-allowed}
/* keyboard focus is visible without a setting */
body.ws :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #0B3D91;outline-offset:2px}
/* the operating system's settings apply on their own */
@media (prefers-contrast: more){
  body.ws{--ws-muted:#1F2933;--ws-faint:#4A5560;--ws-line:#8E99A4;--ws-hair:#A9B3BD}
  body.ws .sub,body.ws .wk-sep,body.ws .ws-save,body.ws .count,body.ws .wk-meta,body.ws .ws-row-sub,body.ws .ws-sec-h{color:#1F2933!important}}
@media (prefers-reduced-motion: reduce){
  body.ws *,body.ws *::before,body.ws *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media (forced-colors: active){
  body.ws .btn,body.ws .ws-hbtn,body.ws .ws-badge,body.ws .pill,body.ws .st,body.ws .card,body.ws .qc,body.ws .jobcard{border:1px solid CanvasText!important}
  body.ws .ws-nav .on,body.ws .ws-tab.on,body.ws [aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}
  body.ws :focus-visible{outline:3px solid Highlight!important}
  body.ws .ws-badge:before{forced-color-adjust:none}}

/* ---- Easy read, second pass (Kelli's second reading session, 22 Sep) ----
   What she could read at every size: black, heavy strokes. What she could not: regular-weight grey, underlined
   digits (she transposed a phone number), greyed-out controls. So Easy read now uses a low-vision typeface with
   sturdy strokes and unmistakable digits (Atkinson Hyperlegible, Verdana fallback), black helper text at 600,
   phone numbers and emails as bold chips instead of underlined links, and no greyed-out controls. */
html.th-contrast body.ws,html.th-big body.ws{--ws-font:"Atkinson Hyperlegible",Verdana,"Segoe UI",Arial,sans-serif;font-family:var(--ws-font)}
html.th-contrast body.ws .sub,html.th-contrast body.ws .wk-sep,html.th-contrast body.ws .ws-save,html.th-contrast body.ws .count,html.th-contrast body.ws .wk-meta,
html.th-contrast body.ws .ws-row-sub,html.th-contrast body.ws .ws-sec-h,html.th-contrast body.ws .ws-app,html.th-contrast body.ws small,html.th-contrast body.ws .lt,html.th-contrast body.ws label{color:#111!important;font-weight:700}
html.th-contrast body.ws .ws-badge.off,html.th-contrast body.ws .ws-badge.nodot{color:#111!important}
html.th-contrast body.ws a[href^="tel:"],html.th-contrast body.ws a[href^="mailto:"],html.th-contrast body.ws a[href^="sms:"]{text-decoration:none!important;font-weight:700;color:#111!important;background:#EEF2F5;border:1px solid #6B7683;border-radius:6px;padding:1px 7px;white-space:nowrap}
html.th-contrast body.ws a[href^="tel:"]{font-variant-numeric:tabular-nums;letter-spacing:.02em}
html.th-contrast body.ws .btn:disabled,html.th-contrast body.ws button:disabled{color:#111!important;background:#fff!important;border:2px dashed #111!important}
html.th-contrast body.ws .btn.o,html.th-contrast body.ws .ws-hbtn{border:2px solid #111!important;color:#111!important;font-weight:700}
html.th-contrast body.ws ::placeholder{color:#111!important;opacity:.85;font-weight:700}
/* digits are read as digits everywhere: tabular, a touch of tracking */
body.ws a[href^="tel:"],body.ws .tel,body.ws td.num{font-variant-numeric:tabular-nums;letter-spacing:.03em}

/* ---------- Pinned header: optional, and never at the cost of the page ----------
   The top bar and the sidebar stay pinned on a normal screen. When the person turns on "Let the header scroll away"
   (part of Easy read), or when the window is short — which is what heavy browser zoom looks like to the page —
   they scroll off with the content so the rows get the room. */
html.th-nostick .ws-head{position:static}
html.th-nostick body.ws .dh{position:static}
@media (min-width:901px){html.th-nostick .ws-side{position:static;height:auto;align-self:flex-start}}
@media (max-height:640px){
  .ws-head{position:static}
  body.ws .dh{position:static}
}
@media (max-height:640px) and (min-width:901px){.ws-side{position:static;height:auto;align-self:flex-start}}
/* the header itself is leaner once text is large: one line, no wasted height */
html.th-big .ws-head{height:auto;min-height:var(--ws-head);padding:6px 16px;flex-wrap:wrap;row-gap:6px}
html.th-big .ws-head .ws-loc{font-size:15px}

/* ---------- Simple view: the tablet layout at any width ----------
   One column, the menu behind ☰, the pipeline as stacked cards, a record fills the screen, nothing pinned.
   Same rules the narrow screens already use, applied by the person's setting instead of the window width. */
html.th-simple .ws-side{position:fixed;left:0;top:0;bottom:0;height:100vh;transform:translateX(-104%);transition:transform .18s ease-out;box-shadow:none;width:min(300px,86vw);flex-basis:auto}
html.th-simple .ws-side.open{transform:none;box-shadow:12px 0 40px rgba(20,26,31,.22)}
html.th-simple.th-motion .ws-side{transition:none}
html.th-simple .ws-side-bd{position:fixed;inset:0;background:rgba(20,26,31,.42);z-index:34;display:none}
html.th-simple .ws-side-bd.on{display:block}
html.th-simple .ws-side .ws-close{display:inline-flex}
html.th-simple .ws-head .ws-menu{display:inline-flex}
html.th-simple .ws-head{padding:0 12px;gap:8px}
html.th-simple .ws-head .ws-loc{font-size:15px}
html.th-simple .ws-search{flex:1 1 140px;max-width:none}
html.th-simple .ws-hbtn .ws-hbtn-t{display:none}
html.th-simple .ws-hbtn{padding:8px 10px}
html.th-simple .ws-save .ws-save-t{display:none}
html.th-simple .ws-save.bad .ws-save-t{display:inline}
html.th-simple body.ws main{padding:14px 14px 100px}
html.th-simple #robar{margin:10px 14px 0!important}
html.th-simple .ws-page h1{font-size:21px}
html.th-simple .ws-metrics{grid-template-columns:repeat(2,1fr);gap:8px}
html.th-simple .ws-metric{padding:11px 12px 10px}
html.th-simple .ws-metric .v{font-size:21px}
html.th-simple body.ws #dw{width:100%;transform:translateX(100%)}
html.th-simple body.ws #dw.on{transform:none}
html.th-simple body.ws .dh{padding:12px 56px 10px 14px}
html.th-simple body.ws .db{padding:12px 14px 90px}
html.th-simple .ws-dlg-bd{padding:0;align-items:flex-end}
html.th-simple .ws-dlg{width:100%;max-height:92vh;border-radius:14px 14px 0 0}
html.th-simple .ws-page{margin-bottom:12px}
html.th-simple .ws-page .ws-page-act{width:100%}
html.th-simple .ws-page .ws-page-act .btn{flex:1 1 auto}
html.th-simple body.ws .toolbar input[type=search]{flex:1 1 100%;min-width:0}
html.th-simple body.ws .toolbar select{max-width:none;flex:1 1 45%}
html.th-simple .ws-mobonly{display:block;margin-top:3px}
html.th-simple .ws-row{padding:12px}
html.th-simple .ws-row .ws-row-side{align-items:flex-start;text-align:left}
html.th-simple .ws-tabs{margin-left:-14px;margin-right:-14px;padding:0 14px}
html.th-simple .ws-ptabs{margin-left:-14px;margin-right:-14px;padding:0 14px}
html.th-simple .ws-contact .ws-contact-l .ws-cp{min-width:36px;min-height:36px}
html.th-simple body.ws .acts a,html.th-simple body.ws .acts button{min-height:44px}
html.th-simple .ws-head{position:static}
html.th-simple body.ws .dh{position:static}
html.th-simple body.ws main{max-width:900px}
html.th-simple #stagehint{display:none}
html.th-simple .ws-hbtn .ws-hbtn-t{display:inline}   /* the header buttons keep their words — "Aa" alone means nothing to a reader */
html.th-simple .ws-search{flex:1 1 200px}
html.th-simple .ws-tab{padding:10px 8px}
/* the pipeline table becomes cards (the same rules index.html uses under 640px) */
html.th-simple .toolbar select,html.th-simple .toolbar input[type=search]{flex:1 1 100%}
html.th-simple .prow{flex-direction:column}
html.th-simple body.ws .db{padding:12px 14px 80px}
html.th-simple .wk-lr{grid-template-columns:1fr}
html.th-simple .wk-tpl-row{flex-direction:column}
html.th-simple .wk-radios{grid-template-columns:1fr 1fr}
html.th-simple #supp .acts a,html.th-simple #supp .acts button{min-height:44px;padding:10px 14px}
html.th-simple #supp input[type=search]{width:100%}

/* Simple layout, Today: one clear "Open customer" per item; Standard keeps the click-the-row behaviour */
body.ws .wk-open,.wk-open{display:none}
html.th-simple body.ws .wk-open{display:inline-flex;min-height:44px}
html.th-simple .ws-row{flex-wrap:wrap}
html.th-simple .ws-row .ws-row-side{flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;width:100%;justify-content:flex-start;margin-top:6px}
html.th-simple .ws-row .ws-row-t{font-size:17px}
/* saved quote specification on the record: compact, always visible, wraps */
.wk-spec{font-size:13.5px;color:var(--ws-ink);background:var(--ws-bg);border:1px solid var(--ws-hair);border-radius:8px;padding:6px 10px;margin:6px 0 8px;overflow-wrap:anywhere}
.wk-spec-k{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:12px;margin-right:6px}
html.th-big .wk-spec{font-size:15.5px}
/* Simple layout: the record is one column; recent activity follows the work */
html.th-simple body.ws #dw.wk-wide .wk-grid{grid-template-columns:minmax(0,1fr)}
/* record header phone: the same labelled chip as the pipeline */
body.ws .wk-contact .dr-phone{margin:2px 0}
.wk-num{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-weight:800}

/* ================= Easy read emphasis hierarchy (23 Sep, design brief 3) =================
   Semantic pieces are in the markup for every reader: .vgroup (one value with its label), .value-label, .crit-value
   (phone, quote id, money, due), .contact-number, .next-action-value, .due-flag, .vcopy (Copy control), .wk-why (why a
   control is disabled). Standard shows them exactly as before: labels hidden, copy as the icon, no extra groups.
   Easy read (html.th-contrast) turns them into labelled groups. Loaded Atkinson faces are 400 and 700 only, so every
   Easy read weight below is 700 — hierarchy comes from size, position, grouping and rules, not from a 600 that does not exist. */
.value-label{display:none}
.vcopy-t{display:none}
.ez-only{display:none!important}
.vcopy{text-decoration:none}
.due-flag{font-weight:800;color:#B23A2C;text-transform:uppercase;font-size:12px;letter-spacing:.04em;margin-left:4px}
.wk-why{display:block;flex-basis:100%;font-size:13.5px;color:var(--ws-muted);margin:4px 0 0;font-weight:600}
/* ---- Easy read: labelled groups */
html.th-contrast .ez-only{display:block!important}
html.th-contrast .wk-values{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 2px}
html.th-contrast .vgroup{display:inline-block;vertical-align:top;margin:2px 18px 6px 0}
html.th-contrast .vgroups .vgroup{display:block;margin:6px 0 0}
html.th-contrast .vsep{display:none}
html.th-contrast .value-label{display:block;font-size:12.5px;line-height:1.2;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#111;margin:0 0 2px}
html.th-contrast .crit-value{font-weight:700;color:#111;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.06em}
html.th-contrast .contact-number{letter-spacing:.02em;font-size:1.12em}
html.th-contrast .money-value{font-size:1.12em}
html.th-contrast .quote-id{font-size:1.06em}
html.th-contrast .due-value{white-space:nowrap}
html.th-contrast .vactions{display:inline-flex;align-items:center;gap:8px;margin-left:8px;white-space:nowrap}
html.th-contrast .vcopy{display:inline-flex;align-items:center;min-height:32px;padding:2px 10px;border:2px solid #111;border-radius:7px;font-weight:700;color:#111;background:#fff;text-decoration:none!important}
html.th-contrast .vcopy-i{display:none}
html.th-contrast .vcopy-t{display:inline}
html.th-contrast .contact-name{font-size:1.06em}
html.th-contrast .next-action{display:block;line-height:1.5}
html.th-contrast .next-action-value{font-weight:700;color:#111}
html.th-contrast .next-who{font-weight:700;color:#111}
html.th-contrast .next-due{white-space:nowrap}
html.th-contrast .due-flag{color:#B23A2C;border:2px solid #B23A2C;border-radius:6px;padding:0 6px;background:#fff}
/* the pipeline cell keeps the money on its own line under its label; the quote number below it */
/* ---- Easy read: notes, message bodies, drafts — dark, substantial, comfortable line spacing; never oversized */
html.th-contrast body.ws textarea,html.th-contrast body.ws input[type=text],html.th-contrast body.ws input[type=search],html.th-contrast body.ws input[type=email],html.th-contrast body.ws input:not([type]),html.th-contrast body.ws select{color:#111!important;font-weight:700;line-height:1.5}
html.th-contrast body.ws textarea{line-height:1.55;padding:10px 12px}
html.th-contrast body.ws .wk-prev,html.th-contrast body.ws .ws-ai-txt,html.th-contrast body.ws .wk-note,html.th-contrast body.ws .acts,html.th-contrast body.ws .wk-recent .ws-row-s,html.th-contrast body.ws .wk-st{color:#111;font-weight:700;line-height:1.55}
html.th-contrast body.ws .ws-ai-txt{white-space:pre-wrap}
html.th-contrast body.ws .wk-prev p,html.th-contrast body.ws .ws-ai-txt p{margin:0 0 .6em}
/* ---- Easy read: why a control is disabled sits right beside it, in the same weight as the screen */
html.th-contrast .wk-why{color:#111;font-weight:700;font-size:15px}
html.th-contrast .wk-form .btn:disabled,html.th-contrast .wk-form button:disabled{opacity:1;color:#111;border:2px dashed #111;background:#f4f4f4}
/* ---- forced colours: boundaries survive */
@media (forced-colors:active){.vcopy,.due-flag{border:1px solid CanvasText}html.th-contrast .crit-value{forced-color-adjust:auto}}
/* the pipeline table scrolls inside its own container when Easy read makes the columns wider than the window; the page never scrolls sideways */
/* Easy read: the record header is a row of labelled groups */
html.th-contrast body.ws .wk-contact{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 22px}
html.th-contrast body.ws .wk-contact .wk-sep{display:none}
html.th-contrast body.ws .wk-contact .contact-name{align-self:flex-end;padding-bottom:6px}
html.th-contrast body.ws .wk-contact .vgroup{margin:0}
html.th-contrast body.ws .wk-spec{font-weight:700;color:#111;border-color:#111}
html.th-contrast body.ws .wk-next{flex-wrap:wrap;line-height:1.5}
html.th-contrast body.ws .wk-task-main{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px}
html.th-contrast body.ws .next-pieces{display:inline-flex;flex-wrap:wrap;gap:6px 18px;align-items:flex-end}
html.th-contrast body.ws .next-pieces .vgroup{margin:0}

/* ================= Pipeline (design brief 4, 23 Sep): five columns, one job each =================
   Customer | Contact | Next action | Stage | Quote total (+ a companion "Quote spec" row per customer when a spec is saved).
   Columns are addressed by data-col, never by position. #call.cards is set by script when the person is on Simple layout
   or the section is too narrow for five columns (usable width after the sidebar and zoom), and turns each row into a
   labelled card in the same reading order. */
body.ws #call .ws-scroll{overflow-x:auto;overflow-y:visible;max-width:100%}
body.ws table.pipe{table-layout:fixed;width:100%}
body.ws table.pipe th,body.ws table.pipe td{vertical-align:top;padding:12px 12px}
body.ws table.pipe th[data-col=customer]{width:24%}
body.ws table.pipe th[data-col=contact]{width:27%}
body.ws table.pipe th[data-col=next]{width:27%}
body.ws table.pipe th[data-col=stage]{width:11%}
body.ws table.pipe th[data-col=total]{width:11%}
body.ws table.pipe th.num,body.ws table.pipe td[data-col=total]{text-align:right}
body.ws table.pipe td{overflow-wrap:anywhere}
body.ws table.pipe td[data-col=customer] .cname{text-align:left;font-weight:700;font-size:15px;line-height:1.3;padding:0!important;margin:0;white-space:normal;background:none;border:0;box-shadow:none}
body.ws table.pipe .loc{margin-top:3px}
body.ws table.pipe .restrict{margin:6px 0 2px;padding:5px 9px;border:1px solid #7A4F0E;border-left-width:4px;border-radius:7px;background:#fff8e6;font-size:13px;font-weight:600;color:#111}
body.ws table.pipe .restrict-k{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
body.ws table.pipe .contact-name{display:block;margin-bottom:4px}
body.ws table.pipe .vgroup{display:block;margin:0 0 6px}
body.ws table.pipe .vgroup .value-label{display:none}
body.ws table.pipe .contact-email{overflow-wrap:anywhere;word-break:break-word;user-select:text}
body.ws table.pipe .vactions{display:inline-flex;align-items:center;gap:8px;margin-left:8px;white-space:nowrap}
body.ws table.pipe .vcopy{display:inline-flex;align-items:center;min-height:30px;padding:2px 9px;border:1px solid var(--ws-line);border-radius:7px;font-size:12.5px;font-weight:700;color:var(--ws-ink);background:#fff;text-decoration:none!important}
body.ws table.pipe .vcopy-i{display:none}
body.ws table.pipe .vcopy-t{display:inline}
body.ws table.pipe .vtext{font-weight:700}
body.ws table.pipe .nx .next-action-value{display:block;font-weight:700;color:var(--ws-ink);line-height:1.35}
body.ws table.pipe .nx .next-action-value.neutral{font-weight:600;color:var(--ws-muted)}
body.ws table.pipe .nx-meta{margin-top:3px;font-size:13.5px}
body.ws table.pipe .nx-meta .next-who{font-weight:600}
body.ws table.pipe .nx-meta .next-due{font-weight:700;white-space:nowrap}
body.ws table.pipe .nx-meta .next-due.late{color:#B23A2C}
body.ws table.pipe .nx-appt{margin-top:4px;font-size:13.5px}
body.ws table.pipe .nx-last{margin-top:5px;padding-top:5px;border-top:1px dashed var(--ws-hair)}
body.ws table.pipe .nx-open{padding:4px 0;min-height:32px;margin-top:2px}   /* r5o: a real tap target in the table too */
body.ws table.pipe .stage-badge{white-space:nowrap}
body.ws table.pipe td[data-col=total] .money-value{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
body.ws table.pipe td[data-col=total] .quote-id{font-variant-numeric:tabular-nums}
body.ws table.pipe tr.pipe-row td{border-top:1px solid var(--ws-hair)}
body.ws table.pipe tr.pipe-row:nth-child(4n+3) td,body.ws table.pipe tr.pipe-row:nth-child(4n+3)+tr.spec-row td{background:#fafbfc}
body.ws table.pipe tr.has-spec td{border-bottom:0}
body.ws table.pipe tr.spec-row td{border-top:0;padding:0 12px 12px}
body.ws table.pipe .spec-k{display:inline-block;margin-right:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ws-ink)}
body.ws table.pipe .spec-v{font-size:13.5px;color:var(--ws-ink);overflow-wrap:anywhere}
body.ws table.pipe tr.spec-row td{background:var(--ws-bg);border-radius:0 0 8px 8px}
.ws-mobonly{display:none}
/* ---- cards: the same five groups, labelled, in reading order (Simple layout, or too narrow for the table) */
body.ws #call.cards .ws-scroll{overflow:visible}
body.ws #call.cards table.pipe,body.ws #call.cards table.pipe thead,body.ws #call.cards table.pipe tbody,body.ws #call.cards table.pipe tr,body.ws #call.cards table.pipe td{display:block;width:auto}
body.ws #call.cards table.pipe{background:transparent;border:0;box-shadow:none}
body.ws #call.cards table.pipe thead{display:none}
body.ws #call.cards table.pipe tbody{display:grid;grid-template-columns:1fr;gap:14px}
body.ws #call.cards table.pipe tr.pipe-row{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;background:#fff;border:1px solid #85958e;border-radius:12px;padding:14px 16px;margin:0}
body.ws #call.cards table.pipe tr.pipe-row td{border:0;padding:0;background:transparent}
body.ws #call.cards table.pipe tr.pipe-row td[data-col=customer]{grid-column:1/-1}
body.ws #call.cards table.pipe tr.pipe-row td[data-col=contact],body.ws #call.cards table.pipe tr.pipe-row td[data-col=next]{border-top:1px solid #b5c0ba;padding-top:8px}
body.ws #call.cards table.pipe tr.pipe-row td[data-col=stage],body.ws #call.cards table.pipe tr.pipe-row td[data-col=total]{border-top:1px solid #b5c0ba;padding-top:8px}
body.ws #call.cards table.pipe tr.pipe-row td[data-col=total]{text-align:left}
body.ws #call.cards table.pipe td[data-l]:before{content:attr(data-l);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ws-ink);font-weight:800;margin-bottom:3px}
body.ws #call.cards table.pipe td[data-col=customer]:before{display:none}
body.ws #call.cards table.pipe td[data-col=customer] .cname{font-size:19px;font-weight:800}
body.ws #call.cards table.pipe tr.has-spec{border-radius:12px 12px 0 0;border-bottom:0}
body.ws #call.cards table.pipe tr.spec-row{background:var(--ws-bg);border:1px solid #85958e;border-top:1px dashed #b5c0ba;border-radius:0 0 12px 12px;padding:10px 16px;margin:-14px 0 0}
body.ws #call.cards table.pipe tr.spec-row td{padding:0;border:0;background:transparent}
body.ws #call.cards table.pipe tr:not(.pipe-row):not(.spec-row){display:block}
body.ws #call.cards table.pipe tr:not(.pipe-row):not(.spec-row) td{display:block;border:0;background:transparent;padding:8px 6px}
body.ws #call.cards .ws-mobonly{display:block;margin-top:4px}
body.ws #call.cards table.pipe .nx-open,body.ws #call.cards table.pipe .vcopy{min-height:36px}
body.ws #call.cards table.pipe tr.pipe-row td[data-col=stage] .stage-badge{white-space:nowrap}
@media (max-width:640px){body.ws #call.cards table.pipe tr.pipe-row{grid-template-columns:1fr}
 body.ws #call.cards table.pipe tr.pipe-row td[data-col=stage],body.ws #call.cards table.pipe tr.pipe-row td[data-col=total]{border-top:0;padding-top:0}}
/* ---- Easy read: the same cells, labelled and heavy; numbers larger (rules in the emphasis block above still apply) */
html.th-contrast body.ws table.pipe .vgroup .value-label{display:block}
html.th-contrast body.ws table.pipe .restrict{border-color:#111;background:#fff8c2;font-weight:700}
html.th-contrast body.ws table.pipe .nx .next-action-value.neutral{color:#111;font-weight:700}
html.th-contrast body.ws table.pipe .nx-meta{font-size:15px;color:#111}
html.th-contrast body.ws table.pipe .nx-meta .next-due.late{color:#B23A2C}
html.th-contrast body.ws table.pipe .spec-v{font-weight:700;font-size:15px}
html.th-contrast body.ws table.pipe .vcopy{border:2px solid #111;min-height:32px}
html.th-contrast body.ws table.pipe .nx-last{border-top-color:#111}
html.th-contrast body.ws #call.cards table.pipe td[data-l]:before{color:#111}
/* Simple layout, Today rows and the record (unchanged) */
html.th-contrast body.ws table.pipe .nx-meta .next-due{margin-left:10px}
body.ws table.pipe .nx .classify{margin-left:6px}
html.th-contrast body.ws table.pipe td[data-col=total] .quote-id{font-weight:700;color:#111}

/* ==========================================================================
   Help (assets/help.js) — "Help with this page", the help panel, the Desk handbook, field help. build r2r
   The panel is a separate layer: opening or closing it never re-renders the page, so drafts and scroll stay put.
   ========================================================================== */
.ws-page h1+.ws-help-link,.ws-help-link{display:inline-block;margin-top:4px;font-size:14px;font-weight:600;color:var(--ws-green-ink);text-decoration:underline;text-underline-offset:3px}
.ws-help-link:hover{color:var(--ws-ink)}
.ws-help-link:focus-visible,.ws-fhelp:focus-visible,.hp a:focus-visible,.hp button:focus-visible,.hp summary:focus-visible,.hp input:focus-visible,.hp textarea:focus-visible{outline:3px solid var(--ws-ink);outline-offset:2px;border-radius:4px}
#dw .dh #dws{display:inline}
#dw .dh .ws-help-dw{display:inline-block;margin:2px 0 0 8px;font-size:13.5px;line-height:1.6;white-space:nowrap}
.ws-fhelp{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin:0 4px;border-radius:999px;border:1.5px solid var(--ws-green-ink);color:var(--ws-green-ink);font:700 12.5px/1 var(--ws-font);text-decoration:none;vertical-align:middle}
.ws-fhelp:hover{background:var(--ws-green-bg)}
.hp{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:260;background:var(--ws-surface);color:var(--ws-ink);box-shadow:-10px 0 36px rgba(20,26,31,.20);
 display:flex;flex-direction:column;border-left:1px solid var(--ws-line);font-family:var(--ws-font);font-size:var(--ws-fs)}
.hp[hidden]{display:none}
.hp.full{width:min(920px,100vw)}
.hp.nar,.hp.full.nar{width:100vw;border-left:0}
html.hp-lock body{overflow:hidden}
.hp-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--ws-line)}
.hp-top h2{flex:1;margin:0;font-size:1.15em;line-height:1.3}
.hp-top h2:focus{outline:none}
.hp-top h2:focus-visible{outline:3px solid var(--ws-ink)}
.hp-bar{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px;border-bottom:1px solid var(--ws-hair)}
.hp-body{flex:1;overflow-y:auto;padding:12px 16px 20px;line-height:1.55}
.hp-foot{padding:10px 14px;border-top:1px solid var(--ws-line)}
.hp-foot .hp-ret[hidden]{display:none}
.hp:not(.nar):not(.full) .hp-foot{display:none}
.hp-btn{min-height:var(--ws-tap);padding:8px 12px;border:1.5px solid var(--ws-line);background:var(--ws-surface);color:var(--ws-ink);border-radius:var(--ws-r-ctl);font:600 0.95em var(--ws-font);cursor:pointer}
.hp-btn:hover{border-color:var(--ws-ink)}
.hp-btn.hp-pri{background:var(--ws-yellow);border-color:var(--ws-yellow-line)}
.hp-btn.hp-mini{min-height:34px;padding:5px 10px;font-size:0.88em}
.hp-x{min-width:var(--ws-tap)}
.hp-meta{color:var(--ws-muted);font-size:0.92em;margin-bottom:8px}
.hp-muted{color:var(--ws-muted);font-size:0.9em}
.hp-warn{background:var(--ws-amber-bg);border:1px solid var(--ws-amber-line);color:var(--ws-ink);border-radius:10px;padding:10px 12px;margin:6px 0 12px}
.hp-ok{background:var(--ws-green-bg);border:1px solid var(--ws-green-line);border-radius:10px;padding:6px 10px;margin:6px 0 12px;font-size:0.92em}
.hp-tag{display:inline-block;font-size:0.78em;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--ws-amber-bg);color:var(--ws-amber);border:1px solid var(--ws-amber-line)}
.hp-sec{border-top:1px solid var(--ws-hair);padding:4px 0}
.hp-sec>summary{cursor:pointer;min-height:var(--ws-tap);display:flex;align-items:center;font-weight:700;font-size:1.02em;list-style:none}
.hp-sec>summary::-webkit-details-marker{display:none}
.hp-sec>summary::before{content:'▸';display:inline-block;width:1.2em;color:var(--ws-muted)}
.hp-sec[open]>summary::before{content:'▾'}
.hp-sb{padding:0 0 8px 1.2em}
.hp-sb h3{font-size:1em;margin:14px 0 4px}
.hp-sb h4{font-size:0.95em;margin:12px 0 4px}
.hp-sb p,.hp-sb li{max-width:68ch}
.hp-sb ol,.hp-sb ul{padding-left:1.4em}
.hp-sb li{margin:3px 0}
.hp-sb li.hp-check{list-style:none;margin-left:-1.2em}
.hp-sb strong.hl{font-weight:700;background:var(--ws-gray-bg);border-radius:4px;padding:0 3px}
.hp-sb code,.hp code{font-size:0.9em;background:var(--ws-gray-bg);padding:0 4px;border-radius:4px}
.hp-note{border-left:4px solid var(--ws-green);background:var(--ws-green-bg);padding:8px 10px;border-radius:0 8px 8px 0;margin:8px 0}
.hp-tbl{overflow-x:auto;margin:8px 0}
.hp-tbl table{border-collapse:collapse;width:100%;font-size:0.92em}
.hp-tbl th,.hp-tbl td{border:1px solid var(--ws-line);padding:6px 8px;text-align:left;vertical-align:top}
.hp-tbl th{background:var(--ws-gray-bg)}
.hp-fig{margin:10px 0}
.hp-fig img{max-width:100%;border:1px solid var(--ws-line);border-radius:8px;display:block}
.hp-fig figcaption{font-size:0.85em;color:var(--ws-muted);margin-top:4px}
.hp-sl{margin-top:8px}
.hp-hit{animation:hpHit 1.6s ease-out 1}
@keyframes hpHit{from{background:var(--ws-yellow)}to{background:transparent}}
html.th-motion .hp-hit{animation:none;background:var(--ws-yellow)}
.hp-gfoot{margin-top:16px;padding-top:10px;border-top:1px solid var(--ws-line)}
.hp-rel{padding-left:1.1em}
.hp-rel li{margin:6px 0}
.hp-search label{font-weight:700;display:block;margin-bottom:4px}
.hp-srow{display:flex;gap:8px;flex-wrap:wrap}
.hp-srow input{flex:1 1 200px;min-height:var(--ws-tap);padding:8px 10px;border:1.5px solid var(--ws-line);border-radius:var(--ws-r-ctl);font:inherit}
.hp-start{background:var(--ws-yellow);border:1px solid var(--ws-yellow-line);border-radius:10px;padding:10px 12px;margin:12px 0}
.hp-repf textarea{width:100%;box-sizing:border-box;min-height:80px;padding:8px;border:1.5px solid var(--ws-line);border-radius:8px;font:inherit}
.hp-repf label{font-weight:700;display:block;margin:8px 0 4px}
.hp a{color:var(--ws-green-ink)}
html.th-contrast .hp,html.th-contrast .hp-muted,html.th-contrast .hp-meta{color:#000}
html.th-contrast .hp a,html.th-contrast .ws-help-link{color:#000;text-decoration:underline}
html.th-contrast .hp-sb strong.hl{background:transparent;text-decoration:underline}
@media (max-width:900px){.hp{width:100vw}}
@media print{.hp,.ws-help-link,.ws-fhelp{display:none!important}}
.hp .hp-top h2{text-transform:none;letter-spacing:normal;font-size:1.15em;font-weight:700;color:var(--ws-ink);margin:0}
.hp h3,.hp h4{text-transform:none;letter-spacing:normal;color:var(--ws-ink)}
.hp.hp-left{box-shadow:10px 0 36px rgba(20,26,31,.20);border-left:0;border-right:1px solid var(--ws-line)}
/* r2r: on the narrowest phones the header's text labels pushed the account button 5px past the edge in Simple view */
@media (max-width:420px){.ws-head .ws-hbtn .ws-hbtn-t{display:none!important}.ws-head .ws-hbtn{padding:8px 10px}.ws-head .ws-search{min-width:0}}

/* the Assistant page is in the menu only for a person who switched the AI view on */
.ws-grp[data-one="assistant"]{display:none}
body.ai-on .ws-grp[data-one="assistant"]{display:block}

/* r5o: on a phone the tab and chip rows wrap instead of running off the edge (the hidden scrollbar gave no cue) */
@media (max-width:480px){.ws-tabs,.wk-tabs,.ws-ptabs{flex-wrap:wrap;overflow:visible;row-gap:4px}.ws-tabs,.ws-ptabs,html.th-simple .ws-ptabs{margin-left:0;margin-right:0;padding:0}}

/* r5q: inline links and icon buttons are real targets on both desks (style check, 18 Oct) */
.ws-help-link,.ws-fhelp,.vcopy,.tp-open,.contact-email{display:inline-flex;align-items:center;min-height:32px}
.ws-fhelp{min-width:32px;justify-content:center}
@media (max-width:480px){.ws-help-link,.ws-fhelp,.vcopy,.tp-open,.contact-email{min-height:44px}}