/* The iDesign.Market product UI, drawn in HTML for case-study screens.
   Shared by File Manager and Vendor & PO; each page sets where a screen sits. */

/* each screen is drawn on a canvas --cw units wide and scaled to its window, so one
   kit serves a full app window, a dialog and a gallery thumbnail alike */
.an-img.is-ui, .win.is-ui, .float.is-ui { container-type: inline-size; }
.k { --cw: 1080; --u: calc(100cqw / var(--cw)); position: relative; overflow: hidden; border-radius: calc(10 * var(--u)); font-family: var(--f); font-size: calc(12 * var(--u)); line-height: 1.35; letter-spacing: 0; color: #1b1f29; background: #fff; }
.k.is-app { aspect-ratio: 1080 / 690; display: flex; flex-direction: column; }
.k.is-modal { --cw: 600; font-size: calc(13 * var(--u)); }
.k.is-modal.is-tall { --cw: 560; }
.k.is-mini { --cw: 380; font-size: calc(13 * var(--u)); }
.k p { margin: 0; }
.k b { font-weight: 600; }
.k small { display: block; margin-top: calc(2 * var(--u)); font-size: .85em; color: #8a8f9c; }
.k s { text-decoration: none; font-weight: 400; opacity: .75; }
.k-sp { flex: 1; }
.k-mute { color: #8a8f9c; }
.k-sm { font-size: calc(11 * var(--u)); }
.k-link { font-weight: 600; color: #1f6fe5; }

/* the pieces every screen shares */
.k-ic { flex: none; display: inline-grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(8 * var(--u)); font-style: normal; font-weight: 700; }
.k-ic.is-dwg { color: #7a4fd0; background: #f1ecfd; }
.k-ic.is-pdf { color: #d2453b; background: #fdecea; }
.k-ic.is-xls { color: #2f8a52; background: #e6f4ea; }
.k-ic.is-doc { color: #2f68c8; background: #e8f1fd; }
.k-ic.is-jpg { color: #1f8a8a; background: #e3f5f4; }
.k-v { flex: none; display: inline-block; padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 600; line-height: 1.3; color: #2f68c8; background: #f5f8ff; box-shadow: inset 0 0 0 calc(1 * var(--u)) #c9d8f7; }
.k-av { flex: none; display: inline-grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; font-size: calc(8.5 * var(--u)); font-style: normal; font-weight: 700; }
.k-av.is-or { color: #8a4a12; background: #fbd9b2; }
.k-av.is-pu { color: #5a3fa8; background: #e6defb; }
.k-av.is-gr { color: #2f6a43; background: #d9efe0; }
.k-av.is-pk { color: #b23a55; background: #fbdde4; }
.k-av.is-gy { color: #5b6170; background: #e9ecf1; }
.k-st { flex: none; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(99 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; white-space: nowrap; }
.k-st::before { content: ''; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; }
.k-for { flex: none; display: inline-block; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; white-space: nowrap; }
.k-due { flex: none; font-size: calc(11 * var(--u)); font-weight: 500; color: #b4581c; }
.k-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; white-space: nowrap; color: #2c313c; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) #dfe2e8; }
.k-btn.is-pri { color: #fff; background: #1f6fe5; box-shadow: none; }
.k-btn.is-ok { color: #fff; background: #23a05a; box-shadow: none; }
.k-btn.is-rej { color: #d2453b; background: #fff7f6; box-shadow: inset 0 0 0 calc(1 * var(--u)) #f3c6c0; }
.k-sq { flex: none; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: #5b6170; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-lbl { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(9.5 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a8f9c; }
.k-lbl i, .k-lbl em { margin-left: auto; font-style: normal; letter-spacing: 0; }
.k-more { font-style: normal; color: #b4b8c2; }
.k-x { margin-left: auto; font-style: normal; font-size: calc(18 * var(--u)); line-height: 1; color: #8a8f9c; }

/* app chrome */
.k-top { flex: none; display: flex; align-items: center; gap: calc(18 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(11.5 * var(--u)); color: rgb(255 255 255 / .72); background: #17181c; }
.k-top .on { padding: calc(5 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u)); color: #fff; background: rgb(255 255 255 / .1); }
.k-logo { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-right: calc(4 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(9 * var(--u)); font-style: normal; font-weight: 700; color: #fff; background: #1f8fe5; }
.k-bell { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50% 50% calc(2 * var(--u)) calc(2 * var(--u)); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgb(255 255 255 / .7); }
.k-me { margin-left: calc(-10 * var(--u)); color: #fff; }
.k-bar { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(46 * var(--u)); padding: 0 calc(14 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eceef2; }
.k-bar p { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); color: #5b6170; }
.k-bar p i { font-style: normal; color: #c3c7d0; }
.k-bar b { color: #1b1f29; }
.k-search { display: flex; align-items: center; justify-content: space-between; width: calc(240 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: #9a9fab; background: #f4f5f8; }
.k-search kbd { font: inherit; font-size: calc(9 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-body { flex: 1; display: flex; min-height: 0; }
.k-side { flex: none; display: flex; flex-direction: column; gap: calc(2 * var(--u)); width: calc(190 * var(--u)); padding: calc(14 * var(--u)) calc(10 * var(--u)); border-right: calc(1 * var(--u)) solid #eceef2; background: #fcfcfd; }
.k-side > p:not(.k-lbl), .k-foot p { display: flex; align-items: center; padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); color: #3a3f4b; }
.k-side p span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.k-side p em { margin-left: auto; font-style: normal; font-size: calc(10.5 * var(--u)); color: #9a9fab; }
.k-side p em.is-hot { display: grid; place-items: center; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; font-weight: 700; color: #fff; background: #f07d2c; }
.k-side .k-lbl { margin: calc(12 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); }
.k-side .k-lbl:first-child { margin-top: 0; }
.k-fd::before, .k-foot p::before { content: ''; flex: none; width: calc(12 * var(--u)); height: calc(9 * var(--u)); margin-right: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); box-shadow: inset 0 0 0 calc(1.3 * var(--u)) #e0a93a; }
.k-foot p::before { box-shadow: inset 0 0 0 calc(1.3 * var(--u)) #9a9fab; }
.k-fd.on { font-weight: 600; color: #1f5fd1 !important; background: #e8f0fe; }
.k-foot { margin-top: auto; padding-top: calc(8 * var(--u)); border-top: calc(1 * var(--u)) solid #eceef2; }
.k-main { flex: 1; min-width: 0; padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.k-ttl { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.k-ttl b { font-size: calc(17 * var(--u)); letter-spacing: -.01em; }
.k-ttl span { font-size: calc(11.5 * var(--u)); color: #8a8f9c; }
.k-tabs { display: flex; align-items: center; gap: calc(16 * var(--u)); margin: calc(14 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); color: #6b7080; }
.k-tabs em { font-style: normal; color: #a3a8b3; }
.k-tabs .on { padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(7 * var(--u)); color: #fff; background: #17181c; }
.k-tabs .on em { color: rgb(255 255 255 / .6); }
.k-tabs .is-wait { color: #c76a1f; }
.k-tabs .is-wait::before { content: '● '; font-size: .8em; }
.k-chipb { padding: calc(5 * var(--u)) calc(9 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(10.5 * var(--u)); color: #3a3f4b; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-r { display: grid; grid-template-columns: calc(14 * var(--u)) calc(28 * var(--u)) minmax(0, 1fr) calc(128 * var(--u)) calc(72 * var(--u)) calc(100 * var(--u)) calc(14 * var(--u)); align-items: center; gap: calc(10 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(10 * var(--u)); border-bottom: calc(1 * var(--u)) solid #f0f1f4; font-size: calc(11.5 * var(--u)); color: #5b6170; }
.k-r.is-h { height: calc(30 * var(--u)); border: 0; border-radius: calc(7 * var(--u)); font-size: calc(10.5 * var(--u)); color: #8a8f9c; background: #f6f7f9; }
.k-r.is-on { background: #f3f7ff; box-shadow: inset calc(2 * var(--u)) 0 0 #1f6fe5; }
.k-cb { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3 * var(--u)); box-shadow: inset 0 0 0 calc(1.2 * var(--u)) #c3c7d0; }
.k-cb.is-on { background: #1f6fe5; box-shadow: none; }
.k-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(6 * var(--u)); min-width: 0; }
.k-nm b { overflow: hidden; font-size: calc(12 * var(--u)); color: #1b1f29; white-space: nowrap; text-overflow: ellipsis; }
.k-nm small { flex-basis: 100%; margin-top: calc(1 * var(--u)); }
.k-who { display: flex; align-items: center; gap: calc(7 * var(--u)); }

/* viewer */
.k-vh { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(14 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eceef2; }
.k-vh p b { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }
.k-ths { flex: none; display: grid; align-content: start; gap: calc(10 * var(--u)); width: calc(70 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)); border-right: calc(1 * var(--u)) solid #eceef2; background: #fcfcfd; }
.k-ths i { position: relative; height: calc(62 * var(--u)); border-radius: calc(5 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-ths i.on { box-shadow: inset 0 0 0 calc(2 * var(--u)) #1f6fe5; }
.k-ths b { position: absolute; left: calc(4 * var(--u)); bottom: calc(3 * var(--u)); font-size: calc(9 * var(--u)); font-style: normal; color: #8a8f9c; }
.k-cv { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; background: #f2f3f6; }
.k-zm { display: flex; gap: calc(12 * var(--u)); margin: calc(10 * var(--u)) 0; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(10.5 * var(--u)); color: #3a3f4b; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / .08); }
.k-sheet { flex: 1; width: 82%; margin-bottom: calc(10 * var(--u)); border-radius: calc(4 * var(--u)); background: #fff linear-gradient(#f0f1f4 1px, transparent 1px) 0 0 / calc(14 * var(--u)) calc(14 * var(--u)), linear-gradient(90deg, #f0f1f4 1px, transparent 1px) 0 0 / calc(14 * var(--u)) calc(14 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / .07); }
.k-plan { width: 100%; height: 100%; fill: none; stroke: #23262e; }
.k-plan .w { stroke-width: 2.6; }
.k-plan .t { stroke-width: .8; }
.k-plan text { fill: #9a9fab; stroke: none; font-family: var(--f); font-size: 4.2px; letter-spacing: .1em; text-anchor: middle; }
.k-plan .pin { fill: rgb(220 70 70 / .14); stroke: #d84a4a; stroke-width: .8; stroke-dasharray: 2 2; }
.k-plan .pin-n { fill: #d84a4a; stroke: none; }
.k-plan .pin-t { fill: #fff; font-size: 5px; font-weight: 700; letter-spacing: 0; }
.k-pg { display: flex; justify-content: center; gap: calc(22 * var(--u)); width: 100%; padding: calc(10 * var(--u)) 0; border-top: calc(1 * var(--u)) solid #eceef2; font-size: calc(11 * var(--u)); font-weight: 600; color: #3a3f4b; background: #fff; }
.k-rp { flex: none; width: calc(250 * var(--u)); padding: calc(14 * var(--u)); border-left: calc(1 * var(--u)) solid #eceef2; }
.k-in { margin: calc(10 * var(--u)) 0 calc(4 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: #9a9fab; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-cm { display: flex; gap: calc(9 * var(--u)); padding: calc(11 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #f0f1f4; font-size: calc(11 * var(--u)); line-height: 1.45; }
.k-cm p:first-child { display: flex; gap: calc(6 * var(--u)); align-items: baseline; margin-bottom: calc(2 * var(--u)); }
.k-cm p:first-child span { font-size: calc(9.5 * var(--u)); color: #8a8f9c; }

/* dialogs */
.k-mh { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eceef2; }
.k-mh > b, .k-mh p b { font-size: calc(15 * var(--u)); }
.k-mb { padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); }
.k-mf { display: flex; justify-content: flex-end; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); border-top: calc(1 * var(--u)) solid #eceef2; }
.k-file { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.k-file p { flex: 1; min-width: 0; }
.k-file b { font-size: calc(13 * var(--u)); }
.k-arr { font-style: normal; color: #9a9fab; }
.k-ban { margin: calc(14 * var(--u)) 0; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff7ef; box-shadow: inset 0 0 0 calc(1 * var(--u)) #f6dcc4; }
.k-ban p:first-child { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.k-ban .k-due { margin-left: auto; }
.k-ban-t { margin-top: calc(8 * var(--u)) !important; font-size: calc(12 * var(--u)); color: #8a4a12; }
.k-opt { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-opt.is-on { background: #f3f7ff; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #1f6fe5; }
.k-rd { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #c3c7d0; }
.k-opt.is-on .k-rd { box-shadow: inset 0 0 0 calc(5 * var(--u)) #1f6fe5; }
.k-no { padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 700; color: #1f5fd1; background: #e8f0fe; }
.k-fl { display: flex; align-items: center; gap: calc(6 * var(--u)); margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; color: #3a3f4b; }
.k-fl em { font-style: normal; font-weight: 400; color: #9a9fab; }
.k-mb > .k-fl:first-child { margin-top: 0; }
.k-inp { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(34 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #dfe2e8; }
.k-inp i { margin-left: auto; font-style: normal; color: #9a9fab; }
.k-inp.is-add { justify-content: center; margin-top: calc(8 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #c9d8f7; background: #f8faff; }
.k-hint { margin-top: calc(6 * var(--u)) !important; font-size: calc(10.5 * var(--u)); color: #8a8f9c; }
.k-tr { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(9 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #f0f1f4; }
.k-tr .k-nm { flex: 1; }
.k-tst { display: flex; gap: calc(6 * var(--u)); }
.k-tr.is-off > :not(.k-nm) { opacity: .4; }
.k-tr.is-off .k-nm b { color: #9a9fab; }
.k-tr.is-off .k-nm small { color: #c76a1f; }
.k-sel { flex: none; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); color: #3a3f4b; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }

/* the four final screens */
.k-lg { display: flex; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #f0f1f4; }
.k-lgi { flex: none; display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; font-size: calc(11 * var(--u)); font-style: normal; color: #5b6170; background: #f1f2f5; }
.k-lgi.is-ok { color: #2f7a46; background: #e6f4ea; }
.k-lgi.is-no { color: #c0383c; background: #fbe7e7; }
.k-lg p { flex: 1; font-size: calc(12 * var(--u)); }
.k-act { display: flex; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
.k-q { display: block; margin-top: calc(5 * var(--u)); padding: calc(6 * var(--u)) calc(9 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11 * var(--u)); color: #5b6170; background: #f6f7f9; }
.k-seg { display: flex; padding: calc(3 * var(--u)); border-radius: calc(8 * var(--u)); background: #f1f2f5; }
.k-seg span { flex: 1; padding: calc(6 * var(--u)) 0; border-radius: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); text-align: center; color: #5b6170; }
.k-seg .on { font-weight: 600; color: #1b1f29; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .1); }
.k-ch { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-ch > i:first-child { font-style: normal; font-size: calc(10.5 * var(--u)); font-weight: 700; color: #1f6fe5; }
.k-ch b { font-size: calc(12 * var(--u)); }
.k-add { margin-top: calc(8 * var(--u)) !important; font-size: calc(11.5 * var(--u)); }
.k-drop { margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(11.5 * var(--u)); text-align: center; color: #6b7080; background: #f8faff; box-shadow: inset 0 0 0 calc(1.3 * var(--u)) #c9d8f7; }
.k-up { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(9 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #f0f1f4; }
.k-up p { flex: 1; min-width: 0; font-size: calc(12 * var(--u)); }
.k-up b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.k-bar2 { display: block; height: calc(4 * var(--u)); margin-top: calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: #eceef2; }
.k-bar2 i { display: block; height: 100%; border-radius: calc(4 * var(--u)); background: #1f6fe5; }
.k-st-tabs { display: flex; gap: calc(14 * var(--u)); padding: 0 calc(22 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eceef2; font-size: calc(11.5 * var(--u)); color: #6b7080; }
.k-st-tabs span { padding: calc(10 * var(--u)) 0; }
.k-st-tabs .on { font-weight: 600; color: #1b1f29; box-shadow: inset 0 calc(-2 * var(--u)) 0 #1f6fe5; }
.k-rs { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #f0f1f4; font-size: calc(12 * var(--u)); }
.k-rs p { flex: 1; color: #5b6170; }
.k-sys { font-size: calc(10 * var(--u)); font-weight: 600; color: #8a8f9c; }
.k-tg { display: flex; align-items: center; justify-content: space-between; margin-top: calc(14 * var(--u)) !important; font-size: calc(12 * var(--u)); }
.k-sw { width: calc(30 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(99 * var(--u)); background: #23a05a; box-shadow: inset calc(-12 * var(--u)) 0 0 calc(2 * var(--u)) #23a05a, inset calc(-12 * var(--u)) 0 0 calc(9 * var(--u)) #fff; }
.ss .win.is-ui { padding: .55cqw; }


/* ---------- Vendor & PO: purchase orders, deliveries and payments ---------- */
.k-steps { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(11.5 * var(--u)); color: #8a8f9c; }
.k-steps span { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.k-steps i { display: inline-grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; font-size: calc(9.5 * var(--u)); font-style: normal; font-weight: 700; color: #5b6170; background: #eceef2; }
.k-steps .on { font-weight: 600; color: #1b1f29; }
.k-steps .on i { color: #fff; background: #1f6fe5; }
.k-steps .done i { color: #2f7a46; background: #e6f4ea; }
.k-steps b { width: calc(36 * var(--u)); height: calc(1 * var(--u)); background: #e3e6eb; }
.k-row { display: grid; align-items: center; gap: calc(12 * var(--u)); min-height: calc(46 * var(--u)); padding: 0 calc(12 * var(--u)); border-bottom: calc(1 * var(--u)) solid #f0f1f4; font-size: calc(11.5 * var(--u)); color: #5b6170; }
.k-row.is-h { min-height: calc(30 * var(--u)); border: 0; border-radius: calc(7 * var(--u)); font-size: calc(10.5 * var(--u)); color: #8a8f9c; background: #f6f7f9; }
.k-g1 { grid-template-columns: minmax(0, 1fr) calc(70 * var(--u)) calc(60 * var(--u)) calc(56 * var(--u)) calc(84 * var(--u)) calc(140 * var(--u)) calc(74 * var(--u)); }
.k-g2 { grid-template-columns: calc(18 * var(--u)) minmax(0, 1fr) calc(96 * var(--u)) calc(96 * var(--u)) calc(70 * var(--u)) calc(84 * var(--u)); }
.k-g3 { grid-template-columns: calc(62 * var(--u)) minmax(0, 1fr) calc(54 * var(--u)) calc(34 * var(--u)) calc(44 * var(--u)) calc(64 * var(--u)); }
.k-g4 { grid-template-columns: minmax(0, 1fr) calc(70 * var(--u)) calc(60 * var(--u)) calc(76 * var(--u)); }
.k-g5 { grid-template-columns: minmax(0, 1fr) calc(80 * var(--u)); }
.k-it { min-width: 0; }
.k-it b { display: block; overflow: hidden; font-size: calc(12 * var(--u)); color: #1b1f29; white-space: nowrap; text-overflow: ellipsis; }
.k-it small { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.k-num { text-align: right; font-variant-numeric: tabular-nums; color: #1b1f29; }
.k-num.k-mute { color: #8a8f9c; }
.k-bdg { padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(4 * var(--u)); font-size: calc(8.5 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6170; background: #e9ecf1; }
.k-bdg.is-nt { color: #6b4fcf; background: #efeafd; }
.k-pick { display: inline-flex; justify-content: center; width: calc(64 * var(--u)); padding: calc(5 * var(--u)) 0; border-radius: calc(7 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: #1f6fe5; box-shadow: inset 0 0 0 calc(1 * var(--u)) #c9d8f7; }
.k-pick.is-on { color: #fff; background: #1f6fe5; box-shadow: none; }
.k-box { display: flex; align-items: center; justify-content: space-between; height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(7 * var(--u)); font-variant-numeric: tabular-nums; color: #1b1f29; box-shadow: inset 0 0 0 calc(1 * var(--u)) #dfe2e8; }
.k-box i { font-style: normal; font-size: calc(10 * var(--u)); color: #9a9fab; }
.k-box.is-r { justify-content: flex-end; }
.k-fbar { display: flex; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(14 * var(--u)); padding-top: calc(12 * var(--u)); border-top: calc(1 * var(--u)) solid #eceef2; font-size: calc(11.5 * var(--u)); color: #6b7080; }
.k-fbar b { color: #1b1f29; }
.k-tot { font-size: calc(12 * var(--u)); color: #6b7080; }
.k-tot b { margin-left: calc(4 * var(--u)); font-size: calc(16 * var(--u)); color: #1b1f29; }
.k-vend { display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(14 * var(--u)) 0; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: #fafbfc; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e9ebef; }
.k-vav { flex: none; display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(11 * var(--u)); font-style: normal; font-weight: 700; color: #fff; background: #23262e; }
.k-vend > p b { font-size: calc(13 * var(--u)); }
.k-tchip { padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 500; color: #5b6170; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e3e6eb; }
.k-tchip.is-b { color: #1f5fd1; background: #e8f0fe; box-shadow: none; }
.k-met { font-size: calc(12 * var(--u)); }
.k-met small { margin: 0 0 calc(2 * var(--u)); }
.k-two { display: grid; grid-template-columns: minmax(0, 1fr) calc(280 * var(--u)); gap: calc(22 * var(--u)); }
.k-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.k-sum { align-self: start; padding: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: #fafbfc; box-shadow: inset 0 0 0 calc(1 * var(--u)) #e9ebef; }
.k-sum > p:not(.k-lbl):not(.k-hint) { display: flex; justify-content: space-between; align-items: center; padding: calc(7 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #eef0f3; font-size: calc(11.5 * var(--u)); color: #6b7080; }
.k-sum b { color: #1b1f29; font-variant-numeric: tabular-nums; }
.k-sum .is-tot b { font-size: calc(16 * var(--u)); }
.k-sum .k-lbl { margin-bottom: calc(6 * var(--u)); }
.k-recv { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: #f6faf7; }
.k-recv p { display: flex; justify-content: space-between; font-size: calc(12 * var(--u)); }
.k-recv b { color: #2f7a46; }
.k-dl { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #f0f1f4; }
.k-dl p { flex: 1; min-width: 0; font-size: calc(12 * var(--u)); }
.k-dli { flex: none; display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; font-size: calc(11 * var(--u)); font-style: normal; color: #5b6170; background: #f1f2f5; }
.k-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin: calc(12 * var(--u)) 0 calc(4 * var(--u)); }
.k-figs p { padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: #f6f7f9; font-size: calc(12 * var(--u)); }
.k-figs small { margin: 0 0 calc(3 * var(--u)); font-size: calc(9.5 * var(--u)); }
.k-figs b { font-variant-numeric: tabular-nums; }
.k-figs .is-ok { background: #e9f6ee; box-shadow: inset 0 0 0 calc(1 * var(--u)) #bfe5cd; }
.k-figs .is-ok b { font-size: calc(14 * var(--u)); color: #2f7a46; }
.k-mf > span:not(.k-btn) { font-size: calc(11.5 * var(--u)); color: #6b7080; }
.k-mf > span:not(.k-btn) b { color: #1b1f29; }
.k-mf { align-items: center; }
.k-rl { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid #f0f1f4; }
.k-rl p { flex: 1; min-width: 0; font-size: calc(12 * var(--u)); }

/* ---------- the after side of a compare slider ---------- */
/* it fills the before image's frame exactly, so the two line up under the divider */
.cmp-b .k { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.k-g6 { grid-template-columns: calc(62 * var(--u)) minmax(0, 1fr) calc(58 * var(--u)) calc(82 * var(--u)) calc(168 * var(--u)) calc(118 * var(--u)) calc(70 * var(--u)) calc(14 * var(--u)); }
.k-poid { font-size: calc(12 * var(--u)); color: #1f6fe5 !important; font-variant-numeric: tabular-nums; }
.k-vw { display: flex; align-items: center; padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); color: #3a3f4b; }
.k-vw.on { font-weight: 600; color: #1f5fd1; background: #e8f0fe; }