/* COMPONENTS. one source: the product and components.html both read this file. what a component is, where it's used and why: components.html */
:root{--ink:#17171B;--ink2:#5E5E68;--wall:#F4F2EC;--white:#fff;--line:rgba(23,23,27,.11);--f1:rgba(23,23,27,.07);--f2:rgba(23,23,27,.11);--f3:rgba(23,23,27,.16);--lemon:#FFFB80;--sh-ctl:0 1px 8px rgba(20,20,30,.1);--sh-sheet:0 1px 8px rgba(20,20,30,.07);--sh-pop:0 14px 44px rgba(20,20,30,.22)}
/* size: one for all the controls. a Button, a Dropdown, a Switcher and a Search of one size stand side by side */
.L{--h:40px;--r:12px;--f:14px;--it:32px;--ir:8px;--ip:12px}
.S{--h:32px;--r:8px;--f:13px;--it:24px;--ir:4px;--ip:8px}
/* BUTTON */
.c-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 12px;border-radius:var(--r);font-size:var(--f);font-weight:500;line-height:1;white-space:nowrap;transition:var(--state);max-width:min(240px,100%);min-width:0}
.c-btn>span{overflow:hidden;text-overflow:ellipsis;line-height:var(--h)}
.c-btn.black{background:var(--ink);color:#fff}.c-btn.black:hover,.c-btn.black.is-hover{background:#34343B}.c-btn.black:active,.c-btn.black.is-press{background:#000}
.c-btn.light{background:var(--f1)}.c-btn.light:hover,.c-btn.light.is-hover{background:var(--f2)}.c-btn.light:active,.c-btn.light.is-press{background:var(--f3)}
.c-btn.yellow{background:var(--lemon);color:#111}.c-btn.yellow:hover,.c-btn.yellow.is-hover{background:#F6F16C}.c-btn.yellow:active,.c-btn.yellow.is-press{background:#E9E458}
.c-btn.clear{background:rgba(255,255,255,.14);color:#fff}.c-btn.clear:hover,.c-btn.clear.is-hover{background:rgba(255,255,255,.22)}.c-btn.clear:active,.c-btn.clear.is-press{background:rgba(255,255,255,.3)}
.c-btn.white{background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(0,0,0,.2)}.c-btn.white:hover,.c-btn.white.is-hover{background:#fff}.c-btn.white:active,.c-btn.white.is-press{background:#ECEBE5}
.c-btn:disabled{opacity:.4;cursor:default;pointer-events:none}
:is(.c-btn,.c-ibtn,.c-tbtn,.c-sw button,.c-dd,.c-chip,.c-row,.c-stack):focus-visible,.is-focus{outline:2px solid var(--ink);outline-offset:2px}
.s-ink .c-btn:focus-visible,.s-ink .is-focus,.c-sel .c-btn:focus-visible{outline-color:#fff}
.to-end{margin-left:auto}
/* TEXT BUTTON */
.c-tbtn{align-self:flex-start;text-align:left;display:inline-block;max-width:200px;height:24px;padding:0;font-size:13px;font-weight:400;line-height:24px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border-radius:4px;transition:var(--state)}
.c-tbtn:hover,.c-tbtn.is-hover{color:var(--ink)}.c-tbtn:active,.c-tbtn.is-press{color:#000}.c-tbtn:disabled{opacity:.4;pointer-events:none}
/* ICON BUTTON */
.c-ibtn{flex:none;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:8px;color:var(--ink2);line-height:1;transition:var(--state)}
.c-ibtn.S{--s:24px}.c-ibtn.L{--s:32px}.c-ibtn svg{width:16px;height:16px;display:block}
.c-ibtn:hover,.c-ibtn.is-hover{background:var(--f1);color:var(--ink)}.c-ibtn:active,.c-ibtn.is-press{background:var(--f2)}.c-ibtn:disabled{opacity:.3;pointer-events:none}
/* CHIP */
.c-chip{display:inline-flex;align-items:center;max-width:200px;height:24px;padding:0 8px;border-radius:8px;font-size:13px;line-height:1;font-weight:400;white-space:nowrap;background:var(--f1);transition:var(--state);min-width:0}
.c-chip>span,.c-chip>button:first-child{overflow:hidden;min-width:0;text-overflow:ellipsis;line-height:24px}
.c-chip .x{flex:none;width:16px;margin-right:-4px;display:grid;place-items:center;height:16px;border-radius:4px;font-size:14px;line-height:1;color:inherit;opacity:.6;transition:opacity 120ms,width 200ms cubic-bezier(.2,.8,.2,1),margin 200ms cubic-bezier(.2,.8,.2,1)}.c-chip .x:hover{opacity:1}
button.c-chip:hover{background:var(--f2)}
.c-chip.value{background:var(--tn,var(--f1));font-weight:500}button.c-chip.value:hover{filter:brightness(.96);background:var(--tn,var(--f2))}
.c-chip.mine{background:var(--ink);color:#fff}
.c-chip.ai{background:none;box-shadow:inset 0 0 0 1px var(--f3);color:var(--ink2)}
.c-chip.mine .x,.c-chip.ai .x{width:0;margin-right:0;opacity:0;overflow:hidden}
.c-chip.mine:hover .x,.c-chip.ai:hover .x{width:16px;margin-right:-4px;opacity:.7}
.c-chip.pick{background:var(--f1)}.c-chip.pick:hover{background:var(--f2)}.c-chip.pick.on{background:var(--ink);color:#fff}
.c-chip.pick i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--tn);margin-right:4px}
.c-add{border:0;outline:0;background:none;font:inherit;font-size:13px;height:24px;width:64px;color:var(--ink);padding:0}.c-add::placeholder{color:var(--ink2)}
/* CHECKBOX */
.c-ck{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--f3);color:#fff;font-size:11px;line-height:1;cursor:pointer;transition:var(--state)}
.c-ck:hover,.c-ck.is-hover{box-shadow:inset 0 0 0 1px var(--ink)}.c-ck.on{background:var(--ink);box-shadow:none}
/* THUMB */
.c-th{flex:none;position:relative;display:block;width:var(--s);height:var(--s);border-radius:var(--t-r,8px);background:#fff;overflow:hidden}
.c-th>span.in{position:absolute;inset:0;display:flex}.c-th img{width:100%;height:100%;object-fit:cover;object-position:top}.c-th i{flex:1;font-style:normal}.c-th .tx{padding:2px;font-size:5px;line-height:1.1;font-weight:600;overflow:hidden;width:100%}
.c-th.xs{--s:24px;--t-r:4px}.c-th.sm{--s:32px}.c-th.md{--s:40px}.c-th.lg{--s:58px}
/* SECTION TITLE */
.c-st,.pn h3,.doc h3{display:flex;align-items:center;gap:8px;min-height:24px;margin:16px 0 4px;font-size:13px;font-weight:600;line-height:1.4}.c-st:first-child,.pn h3:first-child{margin-top:0}
.c-st em{font-style:normal;font-weight:400;color:var(--ink2)}.c-st>span{flex:1;min-width:0}
/* CONTROLS */
.c-ctl{background:#fff;border-radius:var(--r);box-shadow:var(--sh-ctl);height:var(--h);display:flex;align-items:center}
.c-dd{gap:8px;padding:0 12px;font-size:var(--f);font-weight:500;white-space:nowrap;text-align:left;min-width:0;transition:var(--state)}
.c-dd:hover,.c-dd.is-hover{box-shadow:0 1px 8px rgba(20,20,30,.2)}.c-dd:active,.c-dd.is-press{background:#FAF9F5}.c-dd.open{box-shadow:0 0 0 2px var(--ink)}
.c-dd b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis}.c-dd .n{flex:none;font-weight:400;font-size:13px;color:var(--ink2)}
.c-dd .m{flex:none;width:12px;height:12px;display:block;transition:transform 200ms cubic-bezier(.2,.8,.2,1)}.c-dd.open .m{transform:rotate(180deg)}
.c-dd.fixed{width:236px;flex:0 1 236px;min-width:120px}.c-dd.auto{flex:0 0 auto;max-width:210px}
.c-sw{position:relative;display:inline-flex;align-items:center;padding:4px;background:#fff;border-radius:var(--r);box-shadow:var(--sh-ctl);height:var(--h);flex:none;max-width:100%;overflow:hidden}
.c-sw .mark{position:absolute;left:0;top:4px;bottom:4px;background:var(--ink);border-radius:var(--ir)}
.c-sw button{position:relative;height:var(--it);padding:0 var(--ip);border-radius:var(--ir);font-size:var(--f);color:var(--ink2);transition:var(--state);white-space:nowrap}
.c-sw button:hover{color:var(--ink)}.c-sw button.on{color:#fff}
.c-sw>span.sep{width:1px;height:16px;background:var(--line);margin:0 4px;flex:none}
.c-sw.soft{background:var(--f1);box-shadow:none}.c-sw.soft .mark{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}.c-sw.soft button.on{color:var(--ink)}
.c-search{gap:8px;padding:0 12px;flex:0 1 340px;min-width:120px;transition:var(--state)}
.c-search:focus-within{box-shadow:0 0 0 2px var(--ink)}
.c-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:var(--f);color:var(--ink)}.c-search input::placeholder{color:var(--ink2)}
.c-search .n{flex:none;font-size:13px;color:var(--ink2);white-space:nowrap}
/* POPOVER */
.c-pop,.menu,.sdrop{position:fixed;z-index:70;width:272px;max-height:70vh;overflow:auto;background:#fff;border-radius:12px;box-shadow:var(--sh-pop);padding:8px;font-size:14px;scrollbar-width:thin}
:is(.c-pop,.menu,.sdrop) .c-st{margin:8px 8px 0}:is(.c-pop,.menu,.sdrop) .c-st:first-child{margin-top:0}
:is(.menu,.sdrop) h5{font-size:13px;font-weight:600;line-height:1.4;margin:8px 8px 0;min-height:24px;display:flex;align-items:center}:is(.menu,.sdrop) h5:first-child{margin-top:0}
:is(.c-pop,.menu,.sdrop) input{display:block;width:100%;border:0;outline:0;background:var(--f1);border-radius:8px;height:32px;padding:0 8px;font:inherit;font-size:14px;margin-bottom:4px;color:var(--ink)}
:is(.c-pop,.menu) .list{max-height:240px;overflow:auto;scrollbar-width:thin}:is(.c-pop,.menu,.sdrop) .chips{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 8px}
:is(.c-pop,.menu,.sdrop) .chips.cut{max-height:176px;overflow:auto}
/* ROW */
.c-row{position:relative;display:flex;gap:8px;align-items:center;width:100%;min-width:0;padding:4px;text-align:left;border-radius:8px;transition:var(--state);font-size:13px}
.c-row.big{gap:12px;padding:4px 8px;font-size:14px}.c-row.item{padding:8px;gap:8px;font-size:14px}
button.c-row:hover,.c-row.is-hover,label.c-row:hover{background:var(--f1)}
.c-row.cur{background:#fff;box-shadow:0 1px 4px rgba(20,20,30,.1)}
.c-row .t{flex:1;min-width:0}.c-row .t b{display:block;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-row .t small{display:block;font-size:12px;line-height:1.4;margin-top:2px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row .end{flex:none;font-size:13px;color:var(--ink2)}
.c-row.item .t b{font-weight:400}.c-row.item.on .t b{font-weight:600}
.c-row.nav{padding:4px 8px;min-height:32px;font-size:14px;color:var(--ink2)}.c-row.nav.cur{color:var(--ink);font-weight:500}.c-row.nav .t b{font-weight:inherit}
/* PROPERTY ROW */
.c-prop{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center;min-height:28px;font-size:14px}
.c-prop>span:first-child{color:var(--ink2)}.c-prop .v{min-width:0;overflow-wrap:anywhere}.c-prop .ph{color:var(--ink2)}
[contenteditable]:empty::before{content:attr(data-ph);color:var(--ink2)}
/* STACK */
.c-stack{display:flex;gap:8px;align-items:center;width:100%;padding:4px;text-align:left;border-radius:8px;transition:var(--state);font-size:13px}
.c-stack:hover,.c-stack.open{background:var(--f1)}
.c-stack .ths{flex:none;display:flex}.c-stack .ths .c-th{box-shadow:0 0 0 2px #fff}.c-stack .ths .c-th+.c-th{margin-left:-24px}
.c-stack .t{flex:1;min-width:0}.c-stack .t b{display:block;font-weight:500;line-height:1.2}.c-stack .t small{display:block;font-size:12px;line-height:1.4;margin-top:2px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* BARS */
.c-sel{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:8px;align-items:center;background:var(--ink);color:#fff;border-radius:12px;padding:8px 8px 8px 16px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.c-toast{display:inline-flex;gap:12px;align-items:center;background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;font-size:13px}.c-toast button{font-weight:500}
/* TOP BAR */
.c-bar{display:flex;gap:8px;align-items:center;width:100%}.c-bar .gap{flex:1 1 0;min-width:0}
.c-bar.two{flex-wrap:wrap}.c-bar.two .gap{display:none}.c-bar.two .c-sw{order:1}.c-bar.two .newb{order:2;margin-left:auto}.c-bar.two .breaker{display:block;order:3;flex:0 0 100%;height:0;margin-top:-8px}.c-bar.two .c-dd.auto{order:4}.c-bar.two .c-dd.fixed{order:5;flex:0 1 136px;min-width:88px}.c-bar.two .c-search{order:6;flex:1 1 0;min-width:0}
.breaker{display:none}
.c-bar.compact .n{display:none}
.tb-frame{position:relative;border-radius:8px;background:var(--wall);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.tb-outer{overflow:hidden;padding:1px}
.tb-canvas{transform-origin:0 0;padding:12px}
.tb-pre{height:56px;margin:12px -12px -12px;background:#fff;border-radius:18px 18px 0 0;box-shadow:var(--sh-sheet)}
/* RIGHT PANEL */
.pn{position:relative;display:flex;flex-direction:column;padding:32px 16px 16px;min-height:0;overflow:auto;background:var(--wall);font-size:14px;scrollbar-width:thin}
.pn .fill{flex:1 0 16px}
.pn .foot{flex:none;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px;position:sticky;bottom:-16px;background:var(--wall);padding-bottom:16px;margin-bottom:-16px;z-index:1}
.pn .foot .acts{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.pn .pic{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#fff;margin-bottom:8px;flex:none}.pn .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.pn .pic .c-btn{position:absolute;right:8px;bottom:8px;opacity:0}.pn .pic:hover .c-btn{opacity:1}
.pn h2{margin:0 0 8px;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1;padding-right:24px;outline:0}
.pn .cl{position:absolute;top:28px;right:12px;z-index:2}
.pn .notes{font-size:14px;min-height:24px;outline:0}
.tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.zone{position:relative;flex:none}.zone+.zone{margin-top:24px}.fill+.zone{margin-top:0}
.zone>label{display:none;position:absolute;left:0;top:-16px;font-size:11px;font-weight:500;color:#B3261E}
.pn.zones .zone{box-shadow:0 0 0 1px rgba(255,80,80,.6);border-radius:4px}.pn.zones .zone>label{display:block}
.orow{display:flex;gap:8px;align-items:center;min-width:0}.orow .t{flex:1;min-width:0}.orow .t b{display:block;font-weight:500;font-size:13px;line-height:1.2}.orow .t small{display:block;font-size:12px;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* TABLE */
.tb{display:grid;font-size:14px;width:100%;position:relative}
.tb .row{display:contents}
.tb .hd{position:sticky;top:-32px;z-index:2;display:flex;align-items:center;gap:4px;height:36px;padding:0 12px;font-size:13px;color:var(--ink2);background:#fff;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;user-select:none;cursor:grab}
.tb .hd[data-h]>span:first-child{cursor:pointer;border-radius:4px;padding:2px 4px;margin-left:-4px}.tb .hd[data-h]>span:first-child:hover{background:var(--f1);color:var(--ink)}.tb.nomenu .hd[data-h]>span:first-child{cursor:inherit;background:none}
.tb .hd>span:first-child{overflow:hidden;text-overflow:ellipsis}
.tb .hd:hover{color:var(--ink)}.tb .hd.first{padding-left:32px}
.tb .hd.add{cursor:pointer;justify-content:center;padding:0}.tb .hd.add svg{width:16px;height:16px}
.tb .hd .sz{position:absolute;top:0;bottom:0;right:-4px;width:8px;cursor:col-resize;z-index:3}.tb .hd .sz::after{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:transparent}.tb .hd:hover .sz::after{background:var(--line)}.tb .hd .sz:hover::after,body.rzing .tb .hd .sz:hover::after{background:var(--ink);width:2px}
.tb .ce{position:relative;display:flex;align-items:center;min-height:40px;padding:8px 12px;border-bottom:1px solid var(--line);min-width:0;background:#fff;transition:background-color 120ms,opacity 120ms;cursor:pointer}
.tb .ce.first{padding-left:32px;font-weight:600}
.tb .tx:empty::before{content:attr(data-ph);color:var(--ink2)}
.tb .ce>span.tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tb .ce.wrap>span.tx{white-space:normal}
.tb .row:hover .ce{background:#FAF9F5}.tb .row.cur .ce,.tb .row.pick .ce{background:#F4F2EC}
.tb .ce .c-ck{position:absolute;left:8px;top:50%;translate:0 -50%;opacity:0}.tb .row:hover .c-ck,.tb.picking .c-ck{opacity:1}
.tb .ce .ph{color:var(--ink2)}
.tb .ce .swt{flex:none;width:24px;height:24px;border-radius:8px;margin-right:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tb .grp{grid-column:1/-1;padding:16px 12px 4px;font-size:13px;font-weight:600;border-bottom:1px solid var(--line);background:#fff}
body.coldrag,body.coldrag *{cursor:grabbing!important;user-select:none}
body.rzing,body.rzing *{cursor:col-resize!important;user-select:none}
body.coldrag .tb .row>*,body.rzing .tb .row>*{pointer-events:none}
.tb .hd.moving{opacity:.35}
.colghost{position:fixed;z-index:90;display:flex;align-items:center;padding:0 12px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(26,29,33,.16),0 0 0 1px var(--line);font-size:13px;font-weight:500;color:var(--ink);pointer-events:none;white-space:nowrap;overflow:hidden;transform-origin:center}
.tb-add{padding:8px 12px 8px 32px;font-size:14px;color:var(--ink2);grid-column:1/-1;height:40px;justify-self:start;max-width:none;text-align:left}