/* [project]/node_modules/.pnpm/@fontsource+inter@5.3.0/node_modules/@fontsource/inter/300.css [app-client] (css) */
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url("../media/inter-cyrillic-ext-300-normal.0gdz..r6xwt4z.woff2") format("woff2"), url("../media/inter-cyrillic-ext-300-normal.0nzttp79uuz6t.woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url("../media/inter-cyrillic-300-normal.15e1fz4ii3afe.woff2") format("woff2"), url("../media/inter-cyrillic-300-normal.105eq8saizytp.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url("../media/inter-greek-ext-300-normal.0uwj7fpunfwmq.woff2") format("woff2"), url("../media/inter-greek-ext-300-normal.12x2_ub48-t_q.woff") format("woff");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url("../media/inter-greek-300-normal.0zqudz1hp8030.woff2") format("woff2"), url("../media/inter-greek-300-normal.01bh5ybu.9qsk.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url("../media/inter-vietnamese-300-normal.0u6atqgo-bm0k.woff2") format("woff2"), url("../media/inter-vietnamese-300-normal.0qqtp.h42hsry.woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url("../media/inter-latin-ext-300-normal.09uqfmdtw0dg3.woff2") format("woff2"), url("../media/inter-latin-ext-300-normal.0g0pg8t_puzlr.woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url("../media/inter-latin-300-normal.0pw5ffrrwbn-o.woff2") format("woff2"), url("../media/inter-latin-300-normal.0~cgs1jmq1m77.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/node_modules/.pnpm/@fontsource+inter@5.3.0/node_modules/@fontsource/inter/400.css [app-client] (css) */
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/inter-cyrillic-ext-400-normal.14tx4pkryervk.woff2") format("woff2"), url("../media/inter-cyrillic-ext-400-normal.0rs1xbf~i0gne.woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/inter-cyrillic-400-normal.0j0nt6xj209ja.woff2") format("woff2"), url("../media/inter-cyrillic-400-normal.0tfcly~dae28g.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/inter-greek-ext-400-normal.0sjxwfwy1.7-1.woff2") format("woff2"), url("../media/inter-greek-ext-400-normal.0-p59y6vp.j7a.woff") format("woff");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/inter-greek-400-normal.16tk2qho83alr.woff2") format("woff2"), url("../media/inter-greek-400-normal.0xmwnv-gh.rhf.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/inter-vietnamese-400-normal.0kilhpqoeqy~3.woff2") format("woff2"), url("../media/inter-vietnamese-400-normal.0zq7snwe4.thc.woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/inter-latin-ext-400-normal.0e~6uobz6nk3d.woff2") format("woff2"), url("../media/inter-latin-ext-400-normal.0a.r_3c33o5qt.woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/inter-latin-400-normal.0vig85~_2mxl3.woff2") format("woff2"), url("../media/inter-latin-400-normal.0br~z6nf9coz0.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/node_modules/.pnpm/@fontsource+inter@5.3.0/node_modules/@fontsource/inter/500.css [app-client] (css) */
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/inter-cyrillic-ext-500-normal.18aqar8gdpfb3.woff2") format("woff2"), url("../media/inter-cyrillic-ext-500-normal.0b6k1s8sd~.jo.woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/inter-cyrillic-500-normal.15z7kt55vzj85.woff2") format("woff2"), url("../media/inter-cyrillic-500-normal.01w2czofewpso.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/inter-greek-ext-500-normal.119li9m07s-bi.woff2") format("woff2"), url("../media/inter-greek-ext-500-normal.13bpn5itdsi7i.woff") format("woff");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/inter-greek-500-normal.0uymz0-h_z_7l.woff2") format("woff2"), url("../media/inter-greek-500-normal.0t4lph5.f_m8~.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/inter-vietnamese-500-normal.0fn~r.ogm5_nw.woff2") format("woff2"), url("../media/inter-vietnamese-500-normal.0zfob_1.u8~co.woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/inter-latin-ext-500-normal.0876mliq8ouqp.woff2") format("woff2"), url("../media/inter-latin-ext-500-normal.0~3-c8.xj40g-.woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/inter-latin-500-normal.0frew35n-hgkk.woff2") format("woff2"), url("../media/inter-latin-500-normal.1230h4u3v4whv.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/node_modules/.pnpm/@fontsource+inter@5.3.0/node_modules/@fontsource/inter/600.css [app-client] (css) */
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/inter-cyrillic-ext-600-normal.0_ber5txd3bqi.woff2") format("woff2"), url("../media/inter-cyrillic-ext-600-normal.0j75vko.6hoc-.woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/inter-cyrillic-600-normal.094xsiulqcmrl.woff2") format("woff2"), url("../media/inter-cyrillic-600-normal.10~mc7cizcdk~.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/inter-greek-ext-600-normal.0nlmm4r71lqf~.woff2") format("woff2"), url("../media/inter-greek-ext-600-normal.14y94o9jt0miw.woff") format("woff");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/inter-greek-600-normal.0u.n5f3_8u-b0.woff2") format("woff2"), url("../media/inter-greek-600-normal.0~7_25pf1n8ik.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/inter-vietnamese-600-normal.072fyohqu9xp-.woff2") format("woff2"), url("../media/inter-vietnamese-600-normal.04aaopgj782ex.woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/inter-latin-ext-600-normal.0mo._bh5xz7ol.woff2") format("woff2"), url("../media/inter-latin-ext-600-normal.0jjnjripmqy49.woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/inter-latin-600-normal.0rm8x4lrq0d8z.woff2") format("woff2"), url("../media/inter-latin-600-normal.0uetcz5d-i_71.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/node_modules/.pnpm/@fontsource+inter@5.3.0/node_modules/@fontsource/inter/700.css [app-client] (css) */
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../media/inter-cyrillic-ext-700-normal.0~zt0hwtubila.woff2") format("woff2"), url("../media/inter-cyrillic-ext-700-normal.0.c9t1hqygse9.woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../media/inter-cyrillic-700-normal.051zy7d9em9n7.woff2") format("woff2"), url("../media/inter-cyrillic-700-normal.0qs5m73fobq4n.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../media/inter-greek-ext-700-normal.0ovkxxyaf_urn.woff2") format("woff2"), url("../media/inter-greek-ext-700-normal.09b65f6yfp90..woff") format("woff");
unicode-range: U+1F??;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../media/inter-greek-700-normal.14rpzjcnzq9ul.woff2") format("woff2"), url("../media/inter-greek-700-normal.133diu88dtv~a.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../media/inter-vietnamese-700-normal.03reem5x7sox_.woff2") format("woff2"), url("../media/inter-vietnamese-700-normal.0r4b-sn6pknwd.woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../media/inter-latin-ext-700-normal.0y38bjpa.~h~y.woff2") format("woff2"), url("../media/inter-latin-ext-700-normal.04~cmsc24-.k..woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Inter;
font-style: normal;
font-display: swap;
font-weight: 700;
src: url("../media/inter-latin-700-normal.17~mssnzv.d-8.woff2") format("woff2"), url("../media/inter-latin-700-normal.0wo4xus9c6mqx.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/node_modules/.pnpm/@fontsource+jetbrains-mono@5.3.0/node_modules/@fontsource/jetbrains-mono/400.css [app-client] (css) */
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/jetbrains-mono-cyrillic-ext-400-normal.0xpgvcoxruq.8.woff2") format("woff2"), url("../media/jetbrains-mono-cyrillic-ext-400-normal.0tng7c41iftcp.woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/jetbrains-mono-cyrillic-400-normal.087r1-tljb70l.woff2") format("woff2"), url("../media/jetbrains-mono-cyrillic-400-normal.0bpn27hhc~-d3.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/jetbrains-mono-greek-400-normal.0bemy31mtia~~.woff2") format("woff2"), url("../media/jetbrains-mono-greek-400-normal.15k7shgxnlfr2.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/jetbrains-mono-vietnamese-400-normal.0yjr~p._1wjhq.woff2") format("woff2"), url("../media/jetbrains-mono-vietnamese-400-normal.0if3lc5k5lnhh.woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/jetbrains-mono-latin-ext-400-normal.0m58wcl-45-e_.woff2") format("woff2"), url("../media/jetbrains-mono-latin-ext-400-normal.00uufft-w4e71.woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("../media/jetbrains-mono-latin-400-normal.0~~285bd0hytg.woff2") format("woff2"), url("../media/jetbrains-mono-latin-400-normal.0ytsw4b~7cqpy.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/node_modules/.pnpm/@fontsource+jetbrains-mono@5.3.0/node_modules/@fontsource/jetbrains-mono/500.css [app-client] (css) */
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/jetbrains-mono-cyrillic-ext-500-normal.0v-do.6chvl-f.woff2") format("woff2"), url("../media/jetbrains-mono-cyrillic-ext-500-normal.0bzpbwglq0q.~.woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/jetbrains-mono-cyrillic-500-normal.12i~2hcxiz8-i.woff2") format("woff2"), url("../media/jetbrains-mono-cyrillic-500-normal.10dlyaafl6a1q.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/jetbrains-mono-greek-500-normal.09_afli7imgm3.woff2") format("woff2"), url("../media/jetbrains-mono-greek-500-normal.10069fmo9b06~.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/jetbrains-mono-vietnamese-500-normal.14cm-1f4iq109.woff2") format("woff2"), url("../media/jetbrains-mono-vietnamese-500-normal.0ko-k0pg.ozz..woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/jetbrains-mono-latin-ext-500-normal.0855hw.bh9ima.woff2") format("woff2"), url("../media/jetbrains-mono-latin-ext-500-normal.06rlmnvgtxy6y.woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url("../media/jetbrains-mono-latin-500-normal.0sp08a3_wd31b.woff2") format("woff2"), url("../media/jetbrains-mono-latin-500-normal.0wy1e4e0.ul5s.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/node_modules/.pnpm/@fontsource+jetbrains-mono@5.3.0/node_modules/@fontsource/jetbrains-mono/600.css [app-client] (css) */
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/jetbrains-mono-cyrillic-ext-600-normal.15l1uglw06i2m.woff2") format("woff2"), url("../media/jetbrains-mono-cyrillic-ext-600-normal.15aye3ng77~2..woff") format("woff");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/jetbrains-mono-cyrillic-600-normal.0zm.b9icodj1d.woff2") format("woff2"), url("../media/jetbrains-mono-cyrillic-600-normal.0b5vejrrirynb.woff") format("woff");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/jetbrains-mono-greek-600-normal.0.qfkh0.i7~80.woff2") format("woff2"), url("../media/jetbrains-mono-greek-600-normal.0tkl4oj11l_1h.woff") format("woff");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/jetbrains-mono-vietnamese-600-normal.0-bvm4.0k8yo6.woff2") format("woff2"), url("../media/jetbrains-mono-vietnamese-600-normal.04vz7.37ouk2l.woff") format("woff");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/jetbrains-mono-latin-ext-600-normal.0cj1gverw~qa~.woff2") format("woff2"), url("../media/jetbrains-mono-latin-ext-600-normal.06nws4-kvn67y.woff") format("woff");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("../media/jetbrains-mono-latin-600-normal.0uc1d..6ne28b.woff2") format("woff2"), url("../media/jetbrains-mono-latin-600-normal.0q148sfpujlfj.woff") format("woff");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* [project]/apps/web/src/app/layout-fonts.css [app-client] (css) */
:root {
--font-inter: "Inter";
--font-jetbrains-mono: "JetBrains Mono";
}
/* [project]/apps/web/src/app/globals.css [app-client] (css) */
@layer properties {
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-space-x-reverse: 0;
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--tw-leading: initial;
--tw-font-weight: initial;
--tw-tracking: initial;
--tw-ordinal: initial;
--tw-slashed-zero: initial;
--tw-numeric-figure: initial;
--tw-numeric-spacing: initial;
--tw-numeric-fraction: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-outline-style: solid;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-ease: initial;
}
}
}
@layer theme {
:root, :host {
--font-sans: var(--font-inter), system-ui, -apple-system, sans-serif;
--font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
--color-red-50: #fef2f2;
--color-red-100: #ffe2e2;
--color-red-200: #ffcaca;
--color-red-300: #ffa3a3;
--color-red-500: #fb2c36;
--color-red-600: #e40014;
--color-red-700: #bf000f;
--color-red-800: #9f0712;
--color-red-900: #82181a;
--color-amber-50: #fffbeb;
--color-amber-200: #fee685;
--color-amber-300: #ffd236;
--color-amber-800: #953d00;
--color-amber-900: #7b3306;
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #b9f8cf;
--color-green-300: #7bf1a8;
--color-green-500: #00c758;
--color-green-600: #00a544;
--color-green-700: #008138;
--color-green-800: #016630;
--color-green-900: #0d542b;
--color-emerald-100: #d0fae5;
--color-emerald-600: #009767;
--color-emerald-800: #005f46;
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-200: #bedbff;
--color-blue-500: #3080ff;
--color-blue-600: #155dfc;
--color-blue-700: #1447e6;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-300: #d1d5dc;
--color-gray-400: #99a1af;
--color-gray-500: #6a7282;
--color-gray-600: #4a5565;
--color-gray-700: #364153;
--color-zinc-100: #f4f4f5;
--color-zinc-500: #71717b;
--color-zinc-950: #09090b;
--color-black: #000;
--color-white: #fff;
--spacing: .25rem;
--container-xs: 20rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--text-xs: .75rem;
--text-xs--line-height: calc(1 / .75);
--text-sm: .875rem;
--text-sm--line-height: calc(1.25 / .875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-wide: .025em;
--tracking-wider: .05em;
--tracking-widest: .1em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-relaxed: 1.625;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: .75rem;
--shadow-xs: 0 1px 2px #0000000d;
--shadow-sm: 0 2px 6px #00000012;
--shadow-md: 0 4px 14px #00000021;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--animate-spin: spin 1s linear infinite;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-horn-blue: #2a6fdb;
--color-horn-blue-deep: #1f5bb5;
--color-horn-blue-soft: #e7effa;
--color-ai: #7c5cff;
--color-ai-deep: #5a3fd6;
--color-ai-soft: #f0ecff;
--color-ink: #1c1a17;
--color-ink-2: #3a3631;
--color-ink-3: #6a645b;
--color-ink-4: #9a9388;
--color-paper: #f6f4ef;
--color-paper-2: #efece5;
--color-page-bg: #f0eee9;
--canvas: #ebe9e3;
--status-ok: #2f8a4d;
--status-ok-soft: #e3f5ea;
--status-warn: #c9a85c;
--status-warn-soft: #fef3dd;
--status-risk: #c45a3e;
--status-risk-soft: #fee8e6;
--status-info: #1e5cb0;
--status-info-soft: #e6effa;
--status-warn-deep: #8a5700;
--status-risk-deep: #8a2a22;
--env-dev: #5b3fa6;
--env-dev-soft: #ece7f7;
--env-dev-deep: #3d2a73;
--env-stage: #a6631f;
--env-stage-soft: #f6e9d7;
--env-stage-deep: #7a4712;
--brand-primary: #0080c8;
--brand-primary-deep: #00618f;
--brand-primary-soft: #e2f0f8;
--ai: #6d5ae0;
--ai-deep: #4b3bbf;
--ai-soft: #efeafc;
--ai-bright: #9a82ff;
--ai-tint: #fbfaff;
--ai-grad: linear-gradient(180deg, var(--ai-tint), var(--white));
--r-lg: 12px;
--r-md: 8px;
--shadow-card: 0 2px 24px #0000001a;
--shadow-pop: 0 8px 28px #00000029;
--mono: var(--font-jetbrains-mono), monospace;
--topbar-h-main: 57px;
--topbar-h-sub: 37px;
--topbar-h: calc(var(--topbar-h-main) + var(--topbar-h-sub));
--ink: var(--color-ink);
--ink-2: var(--color-ink-2);
--ink-3: var(--color-ink-3);
--ink-4: var(--color-ink-4);
--rule: var(--color-rule);
--rule-soft: var(--color-rule-soft);
--rule-strong: var(--color-rule-strong);
--paper: var(--color-paper);
--paper-2: var(--color-paper-2);
--white: var(--color-white);
--r-sm: 6px;
--status-muted: #5f6670;
--status-muted-soft: #ececee;
--label-slate: #5e7491;
--label-slate-soft: #eaedf2;
--label-violet: #6b50a0;
--label-violet-soft: #ece8f5;
--label-teal: #2d8a8f;
--label-teal-soft: #e0eff0;
--label-azure: #357fbf;
--label-azure-soft: #e3eef8;
--label-magenta: #b0517f;
--label-magenta-soft: #f6e7ef;
--label-bronze: #94703a;
--label-bronze-soft: #f0ead9;
--label-green: #3f8c63;
--label-green-soft: #e3f1ea;
--label-plum: #8a4f9e;
--label-plum-soft: #f1e8f5;
--label-coral: #c4674f;
--label-coral-soft: #f7e9e3;
--label-gray: #7c8088;
--label-gray-soft: #ededee;
--label-indigo: #4a3fa6;
--label-indigo-soft: #e9e7f5;
--vis-platform: var(--status-info);
--vis-company: var(--status-ok);
--vis-area: var(--label-teal);
--vis-team: var(--status-warn);
--vis-restricted: var(--status-risk);
--ci-grp-standorte: var(--label-slate);
--ci-grp-compute: var(--label-violet);
--ci-grp-virtualisierung: var(--label-teal);
--ci-grp-netzwerk: var(--label-azure);
--ci-grp-endgeraete: var(--label-magenta);
--ci-grp-industrie: var(--label-bronze);
--ci-grp-services: var(--label-green);
--ci-grp-sonstiges: var(--label-gray);
--ci-grp-messtechnik: var(--label-plum);
--ci-grp-fahrzeuge: var(--label-coral);
--ci-grp-entwicklung: var(--label-indigo);
--ci-grp-werkzeug: var(--label-bronze);
--ci-grp-gebaeudetechnik: var(--label-slate);
--custody-stock: var(--status-info);
--custody-issued: var(--status-ok);
--custody-loan: var(--status-warn);
--custody-repair: var(--status-warn);
--custody-retired: var(--status-muted);
--custody-disposed: var(--ink-4);
--insp-locked: #7a1f18;
--insp-locked-soft: var(--status-risk-soft);
--color-rule: #ece8e0;
--color-rule-soft: #efece5;
--color-rule-strong: #d6d1c6;
--color-status-ja-bg: #eaf3de;
--color-status-ja-fg: #27500a;
--color-status-teilweise-bg: #faeeda;
--color-status-teilweise-fg: #633806;
--color-status-nein-bg: #fcebeb;
--color-status-nein-fg: #791f1f;
--color-status-entbehrlich-bg: #f1efe8;
--color-status-entbehrlich-fg: #444441;
--color-ok: #3f8a52;
--color-ok-soft: #e7f0e7;
--color-warn: #c08a2e;
--color-warn-soft: #f6efe0;
--color-stop: #b3403a;
--color-stop-soft: #f6e6e4;
--mod-heute: #327cd9;
--mod-cmdb: #4b5e9e;
--mod-cmdb-soft: #e9ecf6;
--mod-cmdb-deep: #33457e;
--mod-compliance: #a8323a;
--mod-compliance-soft: #f6e3e4;
--mod-compliance-deep: #7a1f25;
--mod-stammdaten: #8c4a72;
--mod-stammdaten-soft: #f4e6ef;
--mod-stammdaten-deep: #5f2f4c;
--mod-kommunikation: #4f72cc;
--mod-projekte: #2f7e6b;
--mod-projekte-soft: #e2efeb;
--mod-projekte-deep: #1d5346;
--mod-regulierte-stoffe: #1f7a8c;
--mod-regulierte-stoffe-soft: #e1eff2;
--mod-regulierte-stoffe-deep: #135866;
--mod-digital-puls: #b3711f;
--mod-digital-puls-soft: #f6ead7;
--mod-digital-puls-deep: #7a4a12;
--mod-fertigung: #8a5a2e;
--mod-fertigung-soft: #f1e8dd;
--mod-fertigung-deep: #5c3c1b;
--mod-intranet: #c4674f;
--mod-intranet-soft: #f7e9e3;
--mod-intranet-deep: #96432d;
--mod-aktionen: #6b50a0;
--mod-wiki: #3f8c63;
--mod-wiki-soft: #e3f1ea;
--mod-wiki-deep: #2c6146;
--mod-wissen: #5e7491;
--mod-wissen-soft: #eaedf2;
--mod-wissen-deep: #3f4d63;
--mod-kantine: #6b7a35;
--mod-kantine-soft: #eef0da;
--mod-kantine-deep: #4a5522;
--mod-prozesse: #4a3fa6;
--mod-prozesse-soft: #e9e7f5;
--mod-prozesse-deep: #332875;
--mod-crm: #b0517f;
--mod-crm-soft: #f6e7ef;
--mod-crm-deep: #7e3459;
--mod-erp: #2d8a8f;
--mod-erp-soft: #e0eff0;
--mod-erp-deep: #1d5f63;
--mod-ideenpool: #8a4f9e;
--mod-ideenpool-soft: #f1e8f5;
--mod-ideenpool-deep: #603670;
--mod-chatbot: #357fbf;
--mod-chatbot-soft: #e3eef8;
--mod-chatbot-deep: #245a89;
--mod-lernpfade: #94703a;
--mod-lernpfade-soft: #f0ead9;
--mod-lernpfade-deep: #674c26;
--mod-glossar: #7c8088;
--mod-glossar-soft: #ededee;
--mod-glossar-deep: #565a61;
--mod-inhalte: #5a6472;
--mod-dev: #0e7c86;
--mod-inventar: #7a8a3a;
--mod-operations: #2f7d9e;
--mod-mappen: #4756c4;
--mod-modadmin: #6a6a6a;
--radius-card: 14px;
--radius-input: 9px;
--radius-btn: 9px;
}
@supports (color: lab(0% 0 0)) {
:root, :host {
--color-red-50: lab(96.5005% 4.18508 1.52328);
--color-red-100: lab(92.243% 10.2865 3.83865);
--color-red-200: lab(86.017% 19.8815 7.75869);
--color-red-300: lab(76.5514% 36.422 15.5335);
--color-red-500: lab(55.4814% 75.0732 48.8528);
--color-red-600: lab(48.4493% 77.4328 61.5452);
--color-red-700: lab(40.4273% 67.2623 53.7441);
--color-red-800: lab(33.7174% 55.8993 41.0293);
--color-red-900: lab(28.5139% 44.5539 29.0463);
--color-amber-50: lab(98.6252% -.635922 8.42309);
--color-amber-200: lab(91.7203% -.505269 49.9084);
--color-amber-300: lab(86.4156% 6.13147 78.3961);
--color-amber-800: lab(37.8822% 37.1699 52.2718);
--color-amber-900: lab(31.2288% 30.2627 40.0378);
--color-green-50: lab(98.1563% -5.60117 2.75915);
--color-green-100: lab(96.1861% -13.8464 6.52365);
--color-green-200: lab(92.4222% -26.4702 12.9427);
--color-green-300: lab(86.9953% -47.2691 25.0054);
--color-green-500: lab(70.5521% -66.5147 45.8073);
--color-green-600: lab(59.0978% -58.6621 41.2579);
--color-green-700: lab(47.0329% -47.0239 31.4788);
--color-green-800: lab(37.4616% -36.7971 22.9692);
--color-green-900: lab(30.797% -29.6927 17.382);
--color-emerald-100: lab(94.9004% -17.0769 5.63836);
--color-emerald-600: lab(55.0481% -49.9246 15.93);
--color-emerald-800: lab(35.3675% -33.1188 8.04002);
--color-blue-50: lab(96.492% -1.14644 -5.11479);
--color-blue-100: lab(92.0301% -2.24757 -11.6453);
--color-blue-200: lab(86.15% -4.04379 -21.0797);
--color-blue-500: lab(54.1736% 13.3369 -74.6839);
--color-blue-600: lab(44.0605% 29.0279 -86.0352);
--color-blue-700: lab(36.9089% 35.0961 -85.6872);
--color-gray-50: lab(98.2596% -.247031 -.706708);
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--color-gray-300: lab(85.1236% -.612259 -3.7138);
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--color-gray-500: lab(47.7841% -.393182 -10.0268);
--color-gray-600: lab(35.6337% -1.58697 -10.8425);
--color-gray-700: lab(27.1134% -.956401 -12.3224);
--color-zinc-100: lab(96.1634% .0993311 -.364041);
--color-zinc-500: lab(47.8878% 1.65477 -5.77283);
--color-zinc-950: lab(2.51107% .242703 -.886115);
}
}
}
@layer base {
*, :after, :before, ::backdrop {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
::file-selector-button {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
html, :host {
-webkit-text-size-adjust: 100%;
tab-size: 4;
line-height: 1.5;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
vertical-align: middle;
display: block;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentColor;
}
@supports (color: color-mix(in lab, red, red)) {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit {
padding-block: 0;
}
::-webkit-datetime-edit-year-field {
padding-block: 0;
}
::-webkit-datetime-edit-month-field {
padding-block: 0;
}
::-webkit-datetime-edit-day-field {
padding-block: 0;
}
::-webkit-datetime-edit-hour-field {
padding-block: 0;
}
::-webkit-datetime-edit-minute-field {
padding-block: 0;
}
::-webkit-datetime-edit-second-field {
padding-block: 0;
}
::-webkit-datetime-edit-millisecond-field {
padding-block: 0;
}
::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]) {
appearance: button;
}
::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button {
height: auto;
}
::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer components;
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.\!visible {
visibility: visible !important;
}
.collapse {
visibility: collapse;
}
.visible {
visibility: visible;
}
.sr-only {
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0;
}
.top-0 {
top: 0;
}
.top-1 {
top: var(--spacing);
}
.top-1\.5 {
top: calc(var(--spacing) * 1.5);
}
.top-1\/2 {
top: 50%;
}
.top-2 {
top: calc(var(--spacing) * 2);
}
.top-2\.5 {
top: calc(var(--spacing) * 2.5);
}
.top-7 {
top: calc(var(--spacing) * 7);
}
.top-9 {
top: calc(var(--spacing) * 9);
}
.top-10 {
top: calc(var(--spacing) * 10);
}
.top-12 {
top: calc(var(--spacing) * 12);
}
.top-14 {
top: calc(var(--spacing) * 14);
}
.top-16 {
top: calc(var(--spacing) * 16);
}
.top-full {
top: 100%;
}
.right-0 {
right: 0;
}
.right-1 {
right: var(--spacing);
}
.right-1\.5 {
right: calc(var(--spacing) * 1.5);
}
.right-2 {
right: calc(var(--spacing) * 2);
}
.right-6 {
right: calc(var(--spacing) * 6);
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
}
.left-2 {
left: calc(var(--spacing) * 2);
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
.z-\[5\] {
z-index: 5;
}
.z-\[60\] {
z-index: 60;
}
.z-\[100\] {
z-index: 100;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-full {
grid-column: 1 / -1;
}
.row-1 {
grid-row: 1;
}
.row-2 {
grid-row: 2;
}
.row-3 {
grid-row: 3;
}
.row-4 {
grid-row: 4;
}
.container {
width: 100%;
}
@media (min-width: 40rem) {
.container {
max-width: 40rem;
}
}
@media (min-width: 48rem) {
.container {
max-width: 48rem;
}
}
@media (min-width: 64rem) {
.container {
max-width: 64rem;
}
}
@media (min-width: 80rem) {
.container {
max-width: 80rem;
}
}
@media (min-width: 96rem) {
.container {
max-width: 96rem;
}
}
.m-1 {
margin: var(--spacing);
}
.m-4 {
margin: calc(var(--spacing) * 4);
}
.-mx-8 {
margin-inline: calc(var(--spacing) * -8);
}
.mx-0\.5 {
margin-inline: calc(var(--spacing) * .5);
}
.mx-2 {
margin-inline: calc(var(--spacing) * 2);
}
.mx-auto {
margin-inline: auto;
}
.-my-8 {
margin-block: calc(var(--spacing) * -8);
}
.my-1 {
margin-block: var(--spacing);
}
.my-2 {
margin-block: calc(var(--spacing) * 2);
}
.my-3 {
margin-block: calc(var(--spacing) * 3);
}
.my-4 {
margin-block: calc(var(--spacing) * 4);
}
.my-6 {
margin-block: calc(var(--spacing) * 6);
}
.my-8 {
margin-block: calc(var(--spacing) * 8);
}
.ms-1 {
margin-inline-start: var(--spacing);
}
.ms-2 {
margin-inline-start: calc(var(--spacing) * 2);
}
.-mt-8 {
margin-top: calc(var(--spacing) * -8);
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * .5);
}
.mt-1 {
margin-top: var(--spacing);
}
.mt-1\.5 {
margin-top: calc(var(--spacing) * 1.5);
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-2\.5 {
margin-top: calc(var(--spacing) * 2.5);
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
margin-top: calc(var(--spacing) * 5);
}
.mt-6 {
margin-top: calc(var(--spacing) * 6);
}
.mt-7 {
margin-top: calc(var(--spacing) * 7);
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
.mr-1 {
margin-right: var(--spacing);
}
.mr-1\.5 {
margin-right: calc(var(--spacing) * 1.5);
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.mr-3 {
margin-right: calc(var(--spacing) * 3);
}
.mb-0\.5 {
margin-bottom: calc(var(--spacing) * .5);
}
.mb-1 {
margin-bottom: var(--spacing);
}
.mb-1\.5 {
margin-bottom: calc(var(--spacing) * 1.5);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-2\.5 {
margin-bottom: calc(var(--spacing) * 2.5);
}
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-5 {
margin-bottom: calc(var(--spacing) * 5);
}
.mb-6 {
margin-bottom: calc(var(--spacing) * 6);
}
.mb-7 {
margin-bottom: calc(var(--spacing) * 7);
}
.mb-8 {
margin-bottom: calc(var(--spacing) * 8);
}
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.ml-1 {
margin-left: var(--spacing);
}
.ml-1\.5 {
margin-left: calc(var(--spacing) * 1.5);
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-3 {
margin-left: calc(var(--spacing) * 3);
}
.ml-4 {
margin-left: calc(var(--spacing) * 4);
}
.ml-5 {
margin-left: calc(var(--spacing) * 5);
}
.ml-9 {
margin-left: calc(var(--spacing) * 9);
}
.ml-auto {
margin-left: auto;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.block {
display: block;
}
.contents {
display: contents;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.h-1\.5 {
height: calc(var(--spacing) * 1.5);
}
.h-2 {
height: calc(var(--spacing) * 2);
}
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-7 {
height: calc(var(--spacing) * 7);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-24 {
height: calc(var(--spacing) * 24);
}
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-\[34px\] {
height: 34px;
}
.h-\[calc\(100vh-64px\)\] {
height: calc(100vh - 64px);
}
.h-\[calc\(100vh-220px\)\] {
height: calc(100vh - 220px);
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.h-screen {
height: 100vh;
}
.max-h-32 {
max-height: calc(var(--spacing) * 32);
}
.max-h-48 {
max-height: calc(var(--spacing) * 48);
}
.max-h-64 {
max-height: calc(var(--spacing) * 64);
}
.max-h-72 {
max-height: calc(var(--spacing) * 72);
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.max-h-\[260px\] {
max-height: 260px;
}
.max-h-\[400px\] {
max-height: 400px;
}
.max-h-\[480px\] {
max-height: 480px;
}
.min-h-0 {
min-height: 0;
}
.min-h-\[calc\(100vh-200px\)\] {
min-height: calc(100vh - 200px);
}
.min-h-screen {
min-height: 100vh;
}
.w-1 {
width: var(--spacing);
}
.w-2 {
width: calc(var(--spacing) * 2);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-7 {
width: calc(var(--spacing) * 7);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-16 {
width: calc(var(--spacing) * 16);
}
.w-20 {
width: calc(var(--spacing) * 20);
}
.w-32 {
width: calc(var(--spacing) * 32);
}
.w-48 {
width: calc(var(--spacing) * 48);
}
.w-56 {
width: calc(var(--spacing) * 56);
}
.w-60 {
width: calc(var(--spacing) * 60);
}
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-72 {
width: calc(var(--spacing) * 72);
}
.w-80 {
width: calc(var(--spacing) * 80);
}
.w-\[28px\] {
width: 28px;
}
.w-\[244px\] {
width: 244px;
}
.w-\[280px\] {
width: 280px;
}
.w-\[400px\] {
width: 400px;
}
.w-\[440px\] {
width: 440px;
}
.w-\[480px\] {
width: 480px;
}
.w-full {
width: 100%;
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl {
max-width: var(--container-3xl);
}
.max-w-4xl {
max-width: var(--container-4xl);
}
.max-w-5xl {
max-width: var(--container-5xl);
}
.max-w-6xl {
max-width: var(--container-6xl);
}
.max-w-\[75\%\] {
max-width: 75%;
}
.max-w-\[80\%\] {
max-width: 80%;
}
.max-w-\[85\%\] {
max-width: 85%;
}
.max-w-\[90vw\] {
max-width: 90vw;
}
.max-w-\[140px\] {
max-width: 140px;
}
.max-w-\[260px\] {
max-width: 260px;
}
.max-w-\[1080px\] {
max-width: 1080px;
}
.max-w-\[1100px\] {
max-width: 1100px;
}
.max-w-\[1400px\] {
max-width: 1400px;
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: var(--container-lg);
}
.max-w-md {
max-width: var(--container-md);
}
.max-w-xl {
max-width: var(--container-xl);
}
.max-w-xs {
max-width: var(--container-xs);
}
.min-w-0 {
min-width: 0;
}
.min-w-\[1rem\] {
min-width: 1rem;
}
.min-w-\[140px\] {
min-width: 140px;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[280px\] {
min-width: 280px;
}
.flex-1 {
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0, .shrink-0 {
flex-shrink: 0;
}
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}
.animate-pulse {
animation: var(--animate-pulse);
}
.animate-spin {
animation: var(--animate-spin);
}
.cursor-grab {
cursor: grab;
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.resize-none {
resize: none;
}
.resize-y {
resize: vertical;
}
.scroll-mt-20 {
scroll-margin-top: calc(var(--spacing) * 20);
}
.list-inside {
list-style-position: inside;
}
.list-decimal {
list-style-type: decimal;
}
.list-disc {
list-style-type: disc;
}
.list-none {
list-style-type: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-\[1fr_1fr_80px_28px\] {
grid-template-columns: 1fr 1fr 80px 28px;
}
.grid-cols-\[2fr_1fr\] {
grid-template-columns: 2fr 1fr;
}
.grid-cols-\[100px_1fr\] {
grid-template-columns: 100px 1fr;
}
.grid-cols-\[120px_1fr\] {
grid-template-columns: 120px 1fr;
}
.grid-cols-\[140px\,1fr\] {
grid-template-columns: 140px,1fr;
}
.grid-cols-\[140px_1fr\] {
grid-template-columns: 140px 1fr;
}
.grid-cols-\[200px_1fr\] {
grid-template-columns: 200px 1fr;
}
.grid-cols-\[auto_1fr\] {
grid-template-columns: auto 1fr;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-baseline {
align-items: baseline;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-start {
align-items: flex-start;
}
.items-stretch {
align-items: stretch;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.gap-0 {
gap: 0;
}
.gap-0\.5 {
gap: calc(var(--spacing) * .5);
}
.gap-1 {
gap: var(--spacing);
}
.gap-1\.5 {
gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-2\.5 {
gap: calc(var(--spacing) * 2.5);
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-3\.5 {
gap: calc(var(--spacing) * 3.5);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.gap-5 {
gap: calc(var(--spacing) * 5);
}
.gap-6 {
gap: calc(var(--spacing) * 6);
}
:where(.space-y-0\.5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1\.5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2\.5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-3 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-4 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-6 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
.gap-x-3 {
column-gap: calc(var(--spacing) * 3);
}
.gap-x-4 {
column-gap: calc(var(--spacing) * 4);
}
.gap-x-8 {
column-gap: calc(var(--spacing) * 8);
}
:where(.space-x-2 > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
}
.gap-y-1 {
row-gap: var(--spacing);
}
.gap-y-1\.5 {
row-gap: calc(var(--spacing) * 1.5);
}
.gap-y-2 {
row-gap: calc(var(--spacing) * 2);
}
:where(.divide-y > :not(:last-child)) {
--tw-divide-y-reverse: 0;
border-bottom-style: var(--tw-border-style);
border-top-style: var(--tw-border-style);
border-top-width: calc(1px * var(--tw-divide-y-reverse));
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
.self-center {
align-self: center;
}
.self-start {
align-self: flex-start;
}
.truncate {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
.rounded {
border-radius: .25rem;
}
.rounded-full {
border-radius: 3.40282e38px;
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-0 {
border-style: var(--tw-border-style);
border-width: 0;
}
.border-2 {
border-style: var(--tw-border-style);
border-width: 2px;
}
.border-t {
border-top-style: var(--tw-border-style);
border-top-width: 1px;
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-l-4 {
border-left-style: var(--tw-border-style);
border-left-width: 4px;
}
.border-dashed {
--tw-border-style: dashed;
border-style: dashed;
}
.border-none {
--tw-border-style: none;
border-style: none;
}
.border-amber-200 {
border-color: var(--color-amber-200);
}
.border-green-200 {
border-color: var(--color-green-200);
}
.border-green-300 {
border-color: var(--color-green-300);
}
.border-red-200 {
border-color: var(--color-red-200);
}
.border-red-300 {
border-color: var(--color-red-300);
}
.border-red-500 {
border-color: var(--color-red-500);
}
.bg-\[var\(--color-paper-2\)\] {
background-color: var(--color-paper-2);
}
.bg-amber-50 {
background-color: var(--color-amber-50);
}
.bg-black\/30 {
background-color: #0000004d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-black\/30 {
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
}
}
.bg-blue-100 {
background-color: var(--color-blue-100);
}
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-blue-600 {
background-color: var(--color-blue-600);
}
.bg-emerald-100 {
background-color: var(--color-emerald-100);
}
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.bg-green-50 {
background-color: var(--color-green-50);
}
.bg-green-50\/50 {
background-color: #f0fdf480;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-green-50\/50 {
background-color: color-mix(in oklab, var(--color-green-50) 50%, transparent);
}
}
.bg-green-100 {
background-color: var(--color-green-100);
}
.bg-green-500 {
background-color: var(--color-green-500);
}
.bg-red-50 {
background-color: var(--color-red-50);
}
.bg-red-100 {
background-color: var(--color-red-100);
}
.bg-red-600 {
background-color: var(--color-red-600);
}
.bg-transparent {
background-color: #0000;
}
.bg-white {
background-color: var(--color-white);
}
.bg-zinc-950 {
background-color: var(--color-zinc-950);
}
.p-0 {
padding: 0;
}
.p-0\.5 {
padding: calc(var(--spacing) * .5);
}
.p-1 {
padding: var(--spacing);
}
.p-1\.5 {
padding: calc(var(--spacing) * 1.5);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
padding: calc(var(--spacing) * 2.5);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
.p-5 {
padding: calc(var(--spacing) * 5);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
.p-7 {
padding: calc(var(--spacing) * 7);
}
.p-8 {
padding: calc(var(--spacing) * 8);
}
.p-10 {
padding: calc(var(--spacing) * 10);
}
.p-12 {
padding: calc(var(--spacing) * 12);
}
.px-0\.5 {
padding-inline: calc(var(--spacing) * .5);
}
.px-1 {
padding-inline: var(--spacing);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-3\.5 {
padding-inline: calc(var(--spacing) * 3.5);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.py-0 {
padding-block: 0;
}
.py-0\.5 {
padding-block: calc(var(--spacing) * .5);
}
.py-1 {
padding-block: var(--spacing);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
.py-3\.5 {
padding-block: calc(var(--spacing) * 3.5);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-6 {
padding-block: calc(var(--spacing) * 6);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.py-10 {
padding-block: calc(var(--spacing) * 10);
}
.py-12 {
padding-block: calc(var(--spacing) * 12);
}
.pt-0 {
padding-top: 0;
}
.pt-1 {
padding-top: var(--spacing);
}
.pt-1\.5 {
padding-top: calc(var(--spacing) * 1.5);
}
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
.pt-3 {
padding-top: calc(var(--spacing) * 3);
}
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
.pr-1 {
padding-right: var(--spacing);
}
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pr-3 {
padding-right: calc(var(--spacing) * 3);
}
.pr-4 {
padding-right: calc(var(--spacing) * 4);
}
.pr-7 {
padding-right: calc(var(--spacing) * 7);
}
.pr-8 {
padding-right: calc(var(--spacing) * 8);
}
.pr-16 {
padding-right: calc(var(--spacing) * 16);
}
.pb-0\.5 {
padding-bottom: calc(var(--spacing) * .5);
}
.pb-1 {
padding-bottom: var(--spacing);
}
.pb-2 {
padding-bottom: calc(var(--spacing) * 2);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.pb-5 {
padding-bottom: calc(var(--spacing) * 5);
}
.pl-3 {
padding-left: calc(var(--spacing) * 3);
}
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.pl-5 {
padding-left: calc(var(--spacing) * 5);
}
.pl-6 {
padding-left: calc(var(--spacing) * 6);
}
.pl-7 {
padding-left: calc(var(--spacing) * 7);
}
.pl-8 {
padding-left: calc(var(--spacing) * 8);
}
.text-center {
text-align: center;
}
.text-end {
text-align: end;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-start {
text-align: start;
}
.align-baseline {
vertical-align: baseline;
}
.align-top {
vertical-align: top;
}
.font-mono {
font-family: var(--font-mono);
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[8px\] {
font-size: 8px;
}
.text-\[9\.5px\] {
font-size: 9.5px;
}
.text-\[9px\] {
font-size: 9px;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[11\.5px\] {
font-size: 11.5px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[12\.5px\] {
font-size: 12.5px;
}
.text-\[12px\] {
font-size: 12px;
}
.leading-none {
--tw-leading: 1;
line-height: 1;
}
.leading-relaxed {
--tw-leading: var(--leading-relaxed);
line-height: var(--leading-relaxed);
}
.leading-snug {
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
}
.leading-tight {
--tw-leading: var(--leading-tight);
line-height: var(--leading-tight);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-normal {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[0\.1em\] {
--tw-tracking: .1em;
letter-spacing: .1em;
}
.tracking-\[0\.04em\] {
--tw-tracking: .04em;
letter-spacing: .04em;
}
.tracking-\[0\.05em\] {
--tw-tracking: .05em;
letter-spacing: .05em;
}
.tracking-\[0\.06em\] {
--tw-tracking: .06em;
letter-spacing: .06em;
}
.tracking-\[0\.08em\] {
--tw-tracking: .08em;
letter-spacing: .08em;
}
.tracking-\[0\.12em\] {
--tw-tracking: .12em;
letter-spacing: .12em;
}
.tracking-wide {
--tw-tracking: var(--tracking-wide);
letter-spacing: var(--tracking-wide);
}
.tracking-wider {
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
}
.tracking-widest {
--tw-tracking: var(--tracking-widest);
letter-spacing: var(--tracking-widest);
}
.break-words {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.text-amber-300 {
color: var(--color-amber-300);
}
.text-amber-800 {
color: var(--color-amber-800);
}
.text-amber-900 {
color: var(--color-amber-900);
}
.text-blue-700 {
color: var(--color-blue-700);
}
.text-emerald-600 {
color: var(--color-emerald-600);
}
.text-emerald-800 {
color: var(--color-emerald-800);
}
.text-gray-400 {
color: var(--color-gray-400);
}
.text-gray-500 {
color: var(--color-gray-500);
}
.text-gray-600 {
color: var(--color-gray-600);
}
.text-gray-700 {
color: var(--color-gray-700);
}
.text-green-600 {
color: var(--color-green-600);
}
.text-green-700 {
color: var(--color-green-700);
}
.text-green-800 {
color: var(--color-green-800);
}
.text-green-900 {
color: var(--color-green-900);
}
.text-red-300 {
color: var(--color-red-300);
}
.text-red-600 {
color: var(--color-red-600);
}
.text-red-700 {
color: var(--color-red-700);
}
.text-red-800 {
color: var(--color-red-800);
}
.text-red-900 {
color: var(--color-red-900);
}
.text-white {
color: var(--color-white);
}
.text-zinc-100 {
color: var(--color-zinc-100);
}
.text-zinc-500 {
color: var(--color-zinc-500);
}
.capitalize {
text-transform: capitalize;
}
.lowercase {
text-transform: lowercase;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}
.line-through {
text-decoration-line: line-through;
}
.no-underline {
text-decoration-line: none;
}
.underline {
text-decoration-line: underline;
}
.opacity-0 {
opacity: 0;
}
.opacity-30 {
opacity: .3;
}
.opacity-40 {
opacity: .4;
}
.opacity-50 {
opacity: .5;
}
.opacity-70 {
opacity: .7;
}
.opacity-80 {
opacity: .8;
}
.opacity-90 {
opacity: .9;
}
.opacity-100 {
opacity: 1;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 14px var(--tw-shadow-color, #00000021);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.filter {
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.ease-in {
--tw-ease: var(--ease-in);
transition-timing-function: var(--ease-in);
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
}
.ease-out {
--tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out);
}
.outline-none {
--tw-outline-style: none;
outline-style: none;
}
.select-all {
-webkit-user-select: all;
user-select: all;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.\[seed\:verify\] {
seed: verify;
}
@media (hover: hover) {
.group-hover\:opacity-60:is(:where(.group):hover *) {
opacity: .6;
}
}
@media (hover: hover) {
.group-hover\:opacity-100:is(:where(.group):hover *) {
opacity: 1;
}
}
@media (hover: hover) {
.group-hover\/code\:opacity-100:is(:where(.group\/code):hover *) {
opacity: 1;
}
}
@media (hover: hover) {
.group-hover\/msg\:opacity-100:is(:where(.group\/msg):hover *) {
opacity: 1;
}
}
.focus-within\:opacity-100:focus-within {
opacity: 1;
}
@media (hover: hover) {
.hover\:bg-\[var\(--color-paper-2\)\]:hover {
background-color: var(--color-paper-2);
}
}
@media (hover: hover) {
.hover\:bg-blue-50:hover {
background-color: var(--color-blue-50);
}
}
@media (hover: hover) {
.hover\:bg-blue-200:hover {
background-color: var(--color-blue-200);
}
}
@media (hover: hover) {
.hover\:bg-blue-700:hover {
background-color: var(--color-blue-700);
}
}
@media (hover: hover) {
.hover\:bg-gray-50:hover {
background-color: var(--color-gray-50);
}
}
@media (hover: hover) {
.hover\:bg-gray-100:hover {
background-color: var(--color-gray-100);
}
}
@media (hover: hover) {
.hover\:bg-red-700:hover {
background-color: var(--color-red-700);
}
}
@media (hover: hover) {
.hover\:bg-white:hover {
background-color: var(--color-white);
}
}
@media (hover: hover) {
.hover\:underline:hover {
text-decoration-line: underline;
}
}
@media (hover: hover) {
.hover\:\!opacity-100:hover {
opacity: 1 !important;
}
}
@media (hover: hover) {
.hover\:opacity-100:hover {
opacity: 1;
}
}
.focus\:opacity-100:focus {
opacity: 1;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
opacity: .5;
}
@media (min-width: 40rem) {
.sm\:block {
display: block;
}
}
@media (min-width: 40rem) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 40rem) {
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 40rem) {
.sm\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 40rem) {
.sm\:pt-24 {
padding-top: calc(var(--spacing) * 24);
}
}
@media (min-width: 48rem) {
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 48rem) {
.md\:col-span-6 {
grid-column: span 6 / span 6;
}
}
@media (min-width: 48rem) {
.md\:block {
display: block;
}
}
@media (min-width: 48rem) {
.md\:flex {
display: flex;
}
}
@media (min-width: 48rem) {
.md\:hidden {
display: none;
}
}
@media (min-width: 48rem) {
.md\:inline {
display: inline;
}
}
@media (min-width: 48rem) {
.md\:inline-flex {
display: inline-flex;
}
}
@media (min-width: 48rem) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:grid-cols-\[1\.4fr_1fr\] {
grid-template-columns: 1.4fr 1fr;
}
}
@media (min-width: 48rem) {
.md\:flex-row {
flex-direction: row;
}
}
@media (min-width: 48rem) {
.md\:p-6 {
padding: calc(var(--spacing) * 6);
}
}
@media (min-width: 48rem) {
.md\:px-8 {
padding-inline: calc(var(--spacing) * 8);
}
}
@media (min-width: 48rem) {
.md\:py-8 {
padding-block: calc(var(--spacing) * 8);
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
}
.lastact {
text-align: left;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
cursor: pointer;
align-items: center;
gap: 9px;
width: 100%;
margin-bottom: 4px;
padding: 9px 12px;
font-family: inherit;
display: flex;
}
.lastact:hover {
border-color: var(--ink-4);
}
.lastact .ico {
color: var(--ink-4);
flex-shrink: 0;
}
.lastact .m {
min-width: 0;
color: var(--ink-2);
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
font-size: 12.5px;
overflow: hidden;
}
.lastact .t {
font-family: var(--mono);
color: var(--ink-4);
flex-shrink: 0;
font-size: 10px;
}
.dv {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
max-width: 880px;
box-shadow: var(--shadow-card);
padding: 36px 44px 44px;
}
.dv-kicker {
font-family: var(--mono);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ink-4);
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 10px;
display: flex;
}
.dv-title {
letter-spacing: -.01em;
text-wrap: pretty;
margin-top: 6px;
font-size: 23px;
font-weight: 650;
}
.dv-meta {
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 12px;
display: flex;
}
.dv-meta .sep {
color: var(--rule);
}
.dv-stand {
margin-top: 16px;
}
.dv-facts {
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--r-md);
grid-auto-columns: 1fr;
grid-auto-flow: column;
gap: 1px;
margin-top: 16px;
display: grid;
overflow: hidden;
}
.dv-facts > div {
background: var(--white);
padding: 11px 13px;
}
.dv-facts .dvf-k {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9px;
}
.dv-facts .dvf-v {
font-family: var(--mono);
color: var(--ink);
margin-top: 3px;
font-size: 16px;
font-weight: 600;
}
.dv-facts .dvf-v.is-warn {
color: var(--status-warn-deep, var(--status-warn));
}
.dv-facts .dvf-v.is-mod {
color: var(--mod-deep);
font-family: var(--font);
font-size: 14px;
}
.dv-facts .dvf-s {
color: var(--ink-4);
margin-top: 2px;
font-size: 11px;
}
.dv-sec ul.pts {
color: var(--ink-2);
flex-direction: column;
gap: 6px;
font-size: 13px;
line-height: 1.5;
list-style: none;
display: flex;
}
.dv-sec ul.pts li {
gap: 9px;
display: flex;
}
.dv-sec ul.pts li:before {
content: "—";
color: var(--ink-4);
flex: none;
}
.dv-sec ul.pts b {
font-family: var(--mono);
color: var(--ink);
font-size: 12.5px;
font-weight: 600;
}
.dv-sec {
margin-top: 28px;
}
.dv-sec > h2 {
color: var(--ink);
border-bottom: 1px solid var(--rule-soft);
align-items: baseline;
gap: 9px;
margin-bottom: 11px;
padding-bottom: 7px;
font-size: 13px;
font-weight: 650;
display: flex;
}
.dv-sec > h2 .no {
font-family: var(--mono);
color: var(--mod);
font-size: 10px;
font-weight: 600;
}
.dv-sec p {
color: var(--ink-2);
max-width: 72ch;
font-size: 13.5px;
line-height: 1.65;
}
.dv-sec p + p {
margin-top: 8px;
}
.frist {
font-family: var(--mono);
color: var(--status-warn-deep, var(--status-warn));
background: var(--status-warn-soft);
border-radius: var(--r-sm);
align-items: center;
gap: 6px;
margin-bottom: 8px;
padding: 3px 8px;
font-size: 11px;
display: inline-flex;
}
.src-art {
font-family: var(--mono);
color: var(--ink-4);
text-transform: uppercase;
letter-spacing: .05em;
white-space: nowrap;
font-size: 10px;
}
.opt-grid {
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
gap: 12px;
display: grid;
}
.opt-card {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
flex-direction: column;
gap: 10px;
padding: 14px 15px;
display: flex;
}
.opt-card.is-empf {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.opt-card.is-empf {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod) 14%, transparent);
}
}
.opt-card .oc-head {
justify-content: space-between;
align-items: flex-start;
gap: 8px;
display: flex;
}
.opt-card .oc-key {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.opt-card h3 {
margin-top: 2px;
font-size: 13px;
font-weight: 650;
line-height: 1.35;
}
.opt-card .oc-list {
color: var(--ink-2);
flex-direction: column;
gap: 4px;
font-size: 12px;
line-height: 1.45;
list-style: none;
display: flex;
}
.opt-card .oc-list li {
gap: 7px;
display: flex;
}
.opt-card .oc-list .pm {
font-family: var(--mono);
flex: none;
padding-top: 1px;
font-size: 11px;
}
.opt-card .oc-list.pro .pm {
color: var(--status-ok);
}
.opt-card .oc-list.con .pm {
color: var(--status-risk);
}
.opt-card .oc-cost {
border-top: 1px solid var(--rule-soft);
color: var(--ink-2);
margin-top: auto;
padding-top: 9px;
font-size: 12px;
}
.opt-card .oc-cost b {
font-family: var(--mono);
color: var(--ink);
font-size: 12px;
font-weight: 600;
}
.oc-lbl {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 3px;
font-size: 9px;
}
.beschluss {
border: 1px solid var(--mod);
background: var(--mod-soft);
border-radius: var(--r-md);
padding: 16px 18px;
}
.beschluss .b-lbl {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mod-deep);
margin-bottom: 6px;
font-size: 9.5px;
}
.beschluss .b-satz {
color: var(--ink);
max-width: 66ch;
font-size: 14.5px;
font-weight: 550;
line-height: 1.55;
}
.src-changed td {
background: #fbf9f4;
}
@supports (color: color-mix(in lab, red, red)) {
.src-changed td {
background: color-mix(in srgb, var(--status-warn) 7%, var(--white));
}
}
.wk {
grid-template-columns: 262px 1fr;
align-items: start;
gap: 18px;
display: grid;
}
.wk-tree {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
padding: 12px 10px;
}
.wk-tree-head {
border-bottom: 1px solid var(--rule-soft);
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding: 2px 6px 10px;
display: flex;
}
.wk-tree-head .t {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9.5px;
}
.wk-node {
border-radius: var(--r-sm);
color: var(--ink-2);
cursor: pointer;
align-items: center;
gap: 8px;
padding: 6px 8px;
font-size: 13px;
text-decoration: none;
display: flex;
}
.wk-node:hover {
background: var(--paper);
color: var(--ink);
}
.wk-node.is-on {
background: var(--mod-soft);
color: var(--mod-deep);
font-weight: 600;
}
.wk-node .ico {
width: 14px;
height: 14px;
color: var(--ink-4);
flex: none;
}
.wk-node.is-on .ico {
color: var(--mod);
}
.wk-sub {
border-left: 1px solid var(--rule-soft);
margin-left: 14px;
padding-left: 6px;
}
.wk-page {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
padding: 28px 34px 34px;
}
.wk-page-head {
border-bottom: 1px solid var(--rule-soft);
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding-bottom: 14px;
display: flex;
}
.wk-page-head h2 {
letter-spacing: -.01em;
font-size: 20px;
font-weight: 650;
}
.wk-page-head .hx-t {
letter-spacing: -.01em;
color: var(--ink);
font-size: 20px;
font-weight: 650;
}
.wk-page-meta {
color: var(--ink-4);
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 7px;
font-size: 12px;
display: flex;
}
.wk-body {
margin-top: 18px;
}
.wk-body ul {
flex-direction: column;
gap: 6px;
margin: 8px 0;
list-style: none;
display: flex;
}
.wk-body ul li {
gap: 9px;
display: flex;
}
.wk-body ul li:before {
content: "—";
color: var(--ink-4);
}
.wk-used {
border-top: 1px solid var(--rule-soft);
margin-top: 26px;
padding-top: 14px;
}
.wk-used .t {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 9px;
font-size: 9.5px;
}
.wk-used-list {
flex-direction: column;
gap: 7px;
display: flex;
}
.wk-hist {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
padding: 24px 30px 28px;
}
.wk-hist-head {
border-bottom: 1px solid var(--rule-soft);
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 6px;
padding-bottom: 14px;
display: flex;
}
.wk-hist-head h2 {
font-size: 18px;
font-weight: 650;
}
.wk-hist .tl-top .v {
font-family: var(--mono);
color: var(--ink);
font-size: 11px;
font-weight: 600;
}
.wk-hist .tl-acts {
gap: 6px;
margin-top: 7px;
display: flex;
}
.wk-hist .tl-acts a, .wk-hist .tl-acts button {
font-family: var(--mono);
color: var(--mod-deep);
cursor: pointer;
background: none;
border: none;
padding: 0;
font-size: 10.5px;
text-decoration: none;
}
.wk-hist .tl-acts a:hover, .wk-hist .tl-acts button:hover {
text-decoration: underline;
}
.wk-hist .tl-acts .sep {
color: var(--rule);
}
.wk-diff-head {
border-bottom: 1px solid var(--rule-soft);
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding-bottom: 14px;
display: flex;
}
.wk-diff-head h2 {
font-size: 18px;
font-weight: 650;
}
.wk-diff-pick {
font-family: var(--mono);
color: var(--ink-4);
align-items: center;
gap: 7px;
font-size: 11px;
display: flex;
}
.wk-diff-legend {
color: var(--ink-4);
align-items: center;
gap: 14px;
margin-left: auto;
font-size: 11px;
display: flex;
}
.wk-diff-legend span {
align-items: center;
gap: 5px;
display: inline-flex;
}
.wk-diff-legend i {
border-radius: 3px;
width: 11px;
height: 11px;
font-style: normal;
display: inline-block;
}
.wk-diff-body {
margin-top: 18px;
}
.wk-diff-body p + p, .wk-diff-body .kv-table {
margin-top: 10px;
}
ins.d {
background: #deece3;
}
@supports (color: color-mix(in lab, red, red)) {
ins.d {
background: color-mix(in srgb, var(--status-ok) 16%, var(--white));
}
}
ins.d {
color: var(--ink);
text-decoration: none;
box-shadow: 0 0 0 1px #2f8a4d4d;
}
@supports (color: color-mix(in lab, red, red)) {
ins.d {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-ok) 30%, transparent);
}
}
ins.d {
border-radius: 2px;
}
del.d {
background: #f7eae6;
}
@supports (color: color-mix(in lab, red, red)) {
del.d {
background: color-mix(in srgb, var(--status-risk) 13%, var(--white));
}
}
del.d {
color: var(--ink-3);
text-decoration: line-through;
box-shadow: 0 0 0 1px #c45a3e42;
}
@supports (color: color-mix(in lab, red, red)) {
del.d {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-risk) 26%, transparent);
}
}
del.d {
border-radius: 2px;
}
.wk-diff-block {
padding-left: 13px;
position: relative;
}
.wk-diff-block:before {
content: "";
background: var(--dc, transparent);
border-radius: 2px;
width: 3px;
position: absolute;
top: 2px;
bottom: 2px;
left: 0;
}
.wk-diff-block.is-new {
--dc: var(--status-ok);
}
.wk-diff-block.is-gone {
--dc: var(--status-risk);
}
.wk-diff-body .unchanged {
color: var(--ink-4);
}
.widget {
grid-column: span var(--span, 4);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-direction: column;
padding: 14px 16px;
display: flex;
}
.widget .w-head {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 10px;
display: flex;
}
.widget .w-title {
color: var(--ink);
align-items: center;
gap: 7px;
min-width: 0;
font-size: 13px;
font-weight: 600;
display: flex;
position: relative;
}
.widget .w-body {
flex: 1;
min-height: 0;
display: block;
}
.widget .w-meta {
font-family: var(--mono);
color: var(--ink-4);
white-space: nowrap;
flex-shrink: 0;
font-size: 10.5px;
}
.w-foot {
margin-top: auto;
}
.widget.w-ai {
border-color: #d0c9e0;
}
@supports (color: color-mix(in lab, red, red)) {
.widget.w-ai {
border-color: color-mix(in srgb, var(--ai) 22%, var(--rule));
}
}
.widget.w-ai .w-title {
color: var(--ai-deep);
}
.widget.w-ai .w-title .ico {
color: var(--ai);
}
.hz-obs-list {
background: #6d5ae024;
flex-direction: column;
gap: 1px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.hz-obs-list {
background: color-mix(in srgb,var(--ai) 14%,transparent);
}
}
.hz-obs-list {
border: 1px solid #6d5ae033;
}
@supports (color: color-mix(in lab, red, red)) {
.hz-obs-list {
border: 1px solid color-mix(in srgb,var(--ai) 20%,transparent);
}
}
.hz-obs-list {
border-radius: var(--r-md);
overflow: hidden;
}
.hz-obs {
background: var(--white);
padding: 9px 11px;
}
.hz-obs-t {
color: var(--ink-2);
font-size: 12px;
line-height: 1.5;
}
.hz-obs-t b {
color: var(--ink);
font-weight: 600;
}
.hz-obs-src {
font-family: var(--mono);
color: var(--ink-4);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 3px;
font-size: 9.5px;
display: block;
}
.hz-obs-a {
cursor: pointer;
font-family: var(--mono);
color: var(--ai-deep);
background: none;
border: none;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 0;
font-size: 10.5px;
display: inline-flex;
}
.hz-obs-a:hover {
text-decoration: underline;
}
.hz-obs-a .ico {
width: 11px;
height: 11px;
}
.hz-obs-ft {
color: var(--ink-4);
align-items: center;
gap: 10px;
margin-top: 10px;
font-size: 10.5px;
display: flex;
}
.hz-obs-ft a {
font-family: var(--mono);
color: var(--ai-deep);
margin-left: auto;
font-size: 10.5px;
text-decoration: none;
}
.subnav {
background: var(--paper);
border-bottom: 1px solid var(--rule);
align-items: center;
gap: 8px;
height: 38px;
padding: 0 20px;
display: flex;
}
.subnav-label {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mod-deep, var(--brand-primary-deep));
margin-right: 6px;
font-size: 10px;
}
.subnav-link {
color: var(--ink-3);
white-space: nowrap;
border-radius: 5px;
padding: 5px 12px;
font-size: 13px;
text-decoration: none;
}
.subnav-link:hover {
color: var(--ink);
background: var(--paper-2);
}
.subnav-link.active {
background: var(--mod-soft, var(--brand-primary-soft));
color: var(--mod-deep, var(--brand-primary-deep));
font-weight: 600;
}
.eyebrow {
font-family: var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mod-deep);
margin-bottom: 6px;
font-size: 10px;
}
.page-head {
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 18px;
display: flex;
}
.page-title {
align-items: center;
gap: 10px;
display: flex;
}
.page-title h1 {
letter-spacing: -.02em;
font-size: 24px;
font-weight: 600;
}
.mod-dot {
background: var(--mod);
border-radius: 50%;
width: 10px;
height: 10px;
}
.page-sub {
color: var(--ink-3);
max-width: 720px;
margin-top: 4px;
font-size: 13px;
}
.page-title-input {
letter-spacing: -.02em;
color: var(--ink);
background: none;
border: none;
border-bottom: 1.5px solid #0000;
width: 100%;
padding: 0;
font-family: inherit;
font-size: 24px;
font-weight: 600;
}
.page-title-input:focus {
border-bottom-color: var(--mod, var(--brand-primary));
outline: none;
}
.page-title-input::placeholder {
color: var(--ink-4);
font-weight: 500;
}
.btn {
border-radius: var(--r-sm);
cursor: pointer;
border: 1px solid var(--rule);
background: var(--white);
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
font-family: var(--font);
white-space: nowrap;
align-items: center;
gap: 6px;
padding: 8px 15px;
text-decoration: none;
display: inline-flex;
}
.btn:hover {
border-color: var(--ink-4);
}
.btn-primary {
background: var(--brand-primary);
color: var(--white);
border-color: var(--brand-primary);
}
.btn-mod {
background: var(--mod);
color: var(--white);
border-color: var(--mod);
}
.btn-sm {
padding: 5px 11px;
font-size: 12px;
}
.kpi-strip {
grid-auto-columns: 1fr;
grid-auto-flow: column;
gap: 12px;
display: grid;
}
.kpi-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 14px 18px;
}
.kpi-label {
font-family: var(--mono);
text-transform: uppercase;
color: var(--ink-4);
letter-spacing: .06em;
margin-bottom: 6px;
font-size: 9.5px;
}
.kpi-value {
color: var(--ink);
font-size: 26px;
font-weight: 600;
line-height: 1;
}
.kpi-value.ok {
color: var(--status-ok);
}
.kpi-value.warn {
color: var(--status-warn);
}
.kpi-value.risk {
color: var(--status-risk);
}
.kpi-sub {
color: var(--ink-4);
margin-top: 5px;
font-size: 11px;
}
.panel {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
overflow: hidden;
}
.panel-head {
border-bottom: 1px solid var(--rule-soft);
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 18px;
display: flex;
}
.panel-head .h {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.panel-head .s {
color: var(--ink-4);
font-size: 11px;
font-family: var(--mono);
}
.panel-body {
padding: 16px 18px;
}
.fb-section {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 18px 20px;
}
.fb-section + .fb-section {
margin-top: 14px;
}
.fb-section-head {
justify-content: space-between;
align-items: baseline;
gap: 14px;
margin-bottom: 12px;
display: flex;
}
.fb-section-head h3 {
color: var(--ink);
font-size: 15px;
font-weight: 600;
}
.fb-section-idx {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
white-space: nowrap;
font-size: 10px;
}
.fb-decisions li {
color: var(--ink-2);
align-items: flex-start;
gap: 9px;
font-size: 13px;
line-height: 1.5;
display: flex;
}
.fb-decisions li:before {
content: "✓";
background: var(--status-ok-soft);
width: 16px;
height: 16px;
color: var(--status-ok);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-top: 1px;
font-size: 9.5px;
font-weight: 700;
display: flex;
}
.fb-empty {
color: var(--ink-4);
margin-bottom: 14px;
font-size: 12.5px;
font-style: italic;
}
.fb-board {
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 16px;
display: grid;
}
.fb-board-group {
flex-direction: column;
gap: 12px;
display: flex;
}
.fb-board-group-label {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
padding: 2px 2px 0;
font-size: 10px;
}
.fb-question {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-direction: column;
gap: 11px;
padding: 14px 16px;
display: flex;
}
.fb-question-head {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.fb-question-title {
color: var(--ink);
margin-bottom: 3px;
font-size: 13.5px;
font-weight: 600;
}
.fb-question-desc {
color: var(--ink-3);
font-size: 12.5px;
line-height: 1.5;
}
.chip {
white-space: nowrap;
font-size: 11px;
font-weight: 500;
font-family: var(--mono);
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 3px 9px;
display: inline-flex;
}
.chip .dot {
border-radius: 50%;
width: 6px;
height: 6px;
}
.chip-ok {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.chip-ok .dot {
background: var(--status-ok);
}
.chip-warn {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.chip-warn .dot {
background: var(--status-warn);
}
.chip-risk {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
}
.chip-risk .dot {
background: var(--status-risk);
}
.chip-info {
background: var(--status-info-soft);
color: var(--status-info);
}
.chip-info .dot {
background: var(--status-info);
}
.chip-muted {
background: var(--status-muted-soft);
color: var(--status-muted);
}
.chip-muted .dot {
background: var(--status-muted);
}
.chip-mod {
background: var(--mod-soft);
color: var(--mod-deep);
}
.chip-mod .dot {
background: var(--mod);
}
.chip-gray {
background: var(--paper-2);
color: var(--ink-3);
}
.chip-gray .dot {
background: var(--ink-4);
}
.label-chip {
letter-spacing: .03em;
text-transform: uppercase;
background: var(--tc-soft, var(--paper-2));
color: var(--tc, var(--ink-3));
border-radius: 99px;
align-items: center;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
display: inline-flex;
}
.cat-firma {
--tc: var(--mod);
--tc-soft: var(--mod-soft);
}
.cat-hr {
--tc: var(--label-magenta);
--tc-soft: var(--label-magenta-soft);
}
.cat-it {
--tc: var(--label-azure);
--tc-soft: var(--label-azure-soft);
}
.cat-events {
--tc: var(--label-green);
--tc-soft: var(--label-green-soft);
}
.cat-produkt {
--tc: var(--label-teal);
--tc-soft: var(--label-teal-soft);
}
.chip-planned {
background: var(--status-info-soft);
color: var(--status-info);
}
.chip-planned .dot {
background: var(--status-info);
}
.chip-active {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.chip-active .dot {
background: var(--status-ok);
}
.chip-maintenance {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.chip-maintenance .dot {
background: var(--status-warn);
}
.chip-decommissioned {
background: var(--status-muted-soft);
color: var(--status-muted);
}
.chip-decommissioned .dot {
background: var(--status-muted);
}
.chip-type {
background: var(--paper-2);
color: var(--ink-3);
}
.chip-type .dot {
background: var(--ink-4);
}
.m {
font-family: var(--mono);
color: var(--ink-4);
align-items: center;
gap: 4px;
font-size: 10.5px;
line-height: 1.35;
display: inline-flex;
}
.m.is-due {
color: var(--status-risk-deep);
font-weight: 500;
}
.tag {
--tag: var(--ink-3);
--tag-soft: transparent;
font: 500 11px/1 var(--mono);
border-radius: var(--r-sm);
border: 1.5px solid var(--tag);
align-items: center;
gap: 4px;
padding: 3px 8px 3px 7px;
display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
.tag {
border: 1.5px solid color-mix(in srgb, var(--tag) 42%, transparent);
}
}
.tag {
background: var(--tag-soft);
color: var(--tag);
white-space: nowrap;
}
.tag:before {
content: "#";
opacity: .65;
font-weight: 700;
}
.tag.is-tint {
background: var(--tag);
}
@supports (color: color-mix(in lab, red, red)) {
.tag.is-tint {
background: color-mix(in srgb, var(--tag) 10%, var(--white));
}
}
.tag.is-locked {
border-style: solid;
border-color: var(--tag);
}
@supports (color: color-mix(in lab, red, red)) {
.tag.is-locked {
border-color: color-mix(in srgb, var(--tag) 55%, transparent);
}
}
.tag.is-locked:before {
content: "";
opacity: .8;
background: currentColor;
width: 9px;
height: 11px;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.tag.is-level:before {
content: "";
opacity: .7;
background: currentColor;
width: 10px;
height: 11px;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.has-flag:before {
content: "";
opacity: .7;
background: currentColor;
width: 10px;
height: 11px;
margin-right: 4px;
display: inline-block;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.tag .x {
opacity: .55;
cursor: pointer;
margin-left: 1px;
font-weight: 700;
}
.tag .x:hover {
opacity: 1;
}
.tag-slate {
--tag: var(--label-slate);
--tag-soft: var(--label-slate-soft);
}
.tag-violet {
--tag: var(--label-violet);
--tag-soft: var(--label-violet-soft);
}
.tag-teal {
--tag: var(--label-teal);
--tag-soft: var(--label-teal-soft);
}
.tag-azure {
--tag: var(--label-azure);
--tag-soft: var(--label-azure-soft);
}
.tag-magenta {
--tag: var(--label-magenta);
--tag-soft: var(--label-magenta-soft);
}
.tag-bronze {
--tag: var(--label-bronze);
--tag-soft: var(--label-bronze-soft);
}
.tag-green {
--tag: var(--label-green);
--tag-soft: var(--label-green-soft);
}
.tag-plum {
--tag: var(--label-plum);
--tag-soft: var(--label-plum-soft);
}
.tag-coral {
--tag: var(--label-coral);
--tag-soft: var(--label-coral-soft);
}
.tag-gray {
--tag: var(--label-gray);
--tag-soft: var(--label-gray-soft);
}
.crit {
border-radius: var(--r-sm);
width: 18px;
height: 18px;
font: 700 11px/1 var(--mono);
border: 1px solid #0000;
justify-content: center;
align-items: center;
display: inline-flex;
}
.crit:before {
content: attr(data-level);
}
.crit-a {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
border-color: #c45a3e59;
}
@supports (color: color-mix(in lab, red, red)) {
.crit-a {
border-color: color-mix(in srgb, var(--status-risk) 35%, transparent);
}
}
.crit-b {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
border-color: #c9a85c66;
}
@supports (color: color-mix(in lab, red, red)) {
.crit-b {
border-color: color-mix(in srgb, var(--status-warn) 40%, transparent);
}
}
.crit-c {
background: var(--status-muted-soft);
color: var(--status-muted);
border-color: #5f667059;
}
@supports (color: color-mix(in lab, red, red)) {
.crit-c {
border-color: color-mix(in srgb, var(--status-muted) 35%, transparent);
}
}
.crit-pa {
background: var(--label-plum);
color: var(--white);
border-color: #0000;
}
.crit-pb {
background: #ece3ef;
}
@supports (color: color-mix(in lab, red, red)) {
.crit-pb {
background: color-mix(in srgb, var(--label-plum) 16%, var(--white));
}
}
.crit-pb {
color: var(--label-plum);
border-color: #8a4f9e6b;
}
@supports (color: color-mix(in lab, red, red)) {
.crit-pb {
border-color: color-mix(in srgb, var(--label-plum) 42%, transparent);
}
}
.crit-pc {
background: var(--white);
color: var(--ink-3);
border-color: var(--rule);
}
.crit-wrap {
color: var(--ink-3);
font-size: 11px;
font-family: var(--mono);
align-items: center;
gap: 6px;
display: inline-flex;
}
.grp-dot {
background: var(--grp, var(--ink-4));
border-radius: 2px;
width: 9px;
height: 9px;
display: inline-block;
}
.grp-standorte {
--grp: var(--ci-grp-standorte);
}
.grp-compute {
--grp: var(--ci-grp-compute);
}
.grp-virtualisierung {
--grp: var(--ci-grp-virtualisierung);
}
.grp-netzwerk {
--grp: var(--ci-grp-netzwerk);
}
.grp-endgeraete {
--grp: var(--ci-grp-endgeraete);
}
.grp-industrie {
--grp: var(--ci-grp-industrie);
}
.grp-services {
--grp: var(--ci-grp-services);
}
.grp-sonstiges {
--grp: var(--ci-grp-sonstiges);
}
.grp-messtechnik {
--grp: var(--ci-grp-messtechnik);
}
.grp-fahrzeuge {
--grp: var(--ci-grp-fahrzeuge);
}
.grp-entwicklung {
--grp: var(--ci-grp-entwicklung);
}
.grp-werkzeug {
--grp: var(--ci-grp-werkzeug);
}
.grp-gebaeudetechnik {
--grp: var(--ci-grp-gebaeudetechnik);
}
.custody {
--cu: var(--ink-3);
font: 500 11px var(--mono);
border-radius: var(--r-sm);
border: 1.5px solid var(--cu);
align-items: center;
gap: 5px;
padding: 3px 9px 3px 7px;
display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
.custody {
border: 1.5px solid color-mix(in srgb, var(--cu) 45%, transparent);
}
}
.custody {
background: var(--cu);
}
@supports (color: color-mix(in lab, red, red)) {
.custody {
background: color-mix(in srgb, var(--cu) 8%, var(--white));
}
}
.custody {
color: var(--cu);
white-space: nowrap;
}
.custody svg {
flex: none;
width: 12px;
height: 12px;
}
.custody-stock {
--cu: var(--custody-stock);
}
.custody-issued {
--cu: var(--custody-issued);
}
.custody-loan {
--cu: var(--custody-loan);
}
.custody-repair {
--cu: var(--custody-repair);
}
.custody-retired {
--cu: var(--custody-retired);
}
.custody-disposed {
--cu: var(--custody-disposed);
}
.due {
--d: var(--ink-4);
font: 600 11px var(--mono);
border-radius: var(--r-sm);
white-space: nowrap;
border: 1px solid var(--d);
align-items: center;
gap: 5px;
padding: 3px 9px 3px 7px;
display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
.due {
border: 1px solid color-mix(in srgb, var(--d) 32%, transparent);
}
}
.due {
background: var(--d);
}
@supports (color: color-mix(in lab, red, red)) {
.due {
background: color-mix(in srgb, var(--d) 10%, var(--white));
}
}
.due {
color: var(--d);
}
.due svg {
flex: none;
width: 12px;
height: 12px;
}
.due-ok {
--d: var(--status-ok);
}
.due-soon {
--d: var(--status-warn-deep);
}
.due-over {
--d: var(--status-risk-deep);
}
.due-none {
--d: var(--ink-4);
}
.due-locked {
background: var(--status-risk);
color: var(--white);
border-color: var(--status-risk);
--d: var(--white);
font-weight: 700;
}
.due-locked svg {
stroke: var(--white);
}
.select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-position: right 11px center;
background-repeat: no-repeat;
padding-right: 32px;
}
.req-star {
color: var(--status-risk);
margin-left: 2px;
font-weight: 700;
}
.field-req {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--status-risk-deep);
margin-left: 6px;
font-size: 9px;
}
.is-invalid {
background: #fdf8f7;
border-color: var(--status-risk) !important;
}
@supports (color: color-mix(in lab, red, red)) {
.is-invalid {
background: color-mix(in srgb, var(--status-risk) 4%, var(--white));
}
}
.is-invalid:focus {
box-shadow: 0 0 0 3px var(--status-risk-soft) !important;
}
.field-error {
color: var(--status-risk-deep);
font-size: 11px;
font-family: var(--mono);
align-items: center;
gap: 5px;
margin-top: 6px;
display: flex;
}
.field-error:before {
content: "";
background: currentColor;
flex-shrink: 0;
width: 12px;
height: 11px;
display: inline-block;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.guard-note {
--gc: var(--status-warn);
border: 1px solid var(--gc);
align-items: flex-start;
gap: 9px;
font-size: 12.5px;
line-height: 1.45;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.guard-note {
border: 1px solid color-mix(in srgb, var(--gc) 32%, var(--white));
}
}
.guard-note {
background: var(--gc);
}
@supports (color: color-mix(in lab, red, red)) {
.guard-note {
background: color-mix(in srgb, var(--gc) 8%, var(--white));
}
}
.guard-note {
color: var(--gc);
}
@supports (color: color-mix(in lab, red, red)) {
.guard-note {
color: color-mix(in srgb, var(--gc) 64%, var(--ink));
}
}
.guard-note {
border-radius: var(--r-md);
padding: 10px 13px;
}
.guard-note .gi {
flex-shrink: 0;
font-weight: 700;
line-height: 1.4;
}
.guard-info {
--gc: var(--status-info);
}
.guard-warn {
--gc: var(--status-warn);
}
.guard-risk {
--gc: var(--status-risk);
}
.guard-mod {
--gc: var(--mod);
}
.skel {
flex-direction: column;
gap: 7px;
display: flex;
}
.skel i {
background: linear-gradient(90deg, var(--paper) 0%, #edecea 50%, var(--paper) 100%);
border-radius: 5px;
height: 9px;
display: block;
}
@supports (color: color-mix(in lab, red, red)) {
.skel i {
background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb,var(--ink-4) 18%,var(--white)) 50%, var(--paper) 100%);
}
}
.skel i {
background-size: 200% 100%;
animation: 1.3s ease-in-out infinite ai-shimmer;
}
.skel i:nth-child(2) {
width: 86%;
}
.skel i:nth-child(3) {
width: 64%;
}
.kv-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
font-size: 12.5px;
}
.kv-table th {
text-align: left;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ink-4);
padding: 0 10px 8px 0;
font-size: 9.5px;
font-weight: 600;
}
.kv-table td {
border-top: 1px solid var(--rule-soft);
vertical-align: top;
color: var(--ink-2);
padding: 10px 10px 10px 0;
}
.kv-table tr:first-child td {
border-top: none;
}
.kv-table .kv-lbl {
color: var(--ink);
white-space: nowrap;
align-items: center;
gap: 7px;
font-weight: 600;
display: flex;
}
.kv-table .kv-lbl .ico {
color: var(--ink-4);
flex-shrink: 0;
}
.kv-table .kv-mono {
color: var(--ink-4);
font-family: var(--mono);
white-space: nowrap;
font-size: 11px;
}
.catpill-bar {
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
display: flex;
}
.catpill:hover {
color: var(--ink);
}
.catpill .cnt {
font-family: var(--mono);
background: var(--paper-2);
color: var(--ink-4);
text-align: center;
border-radius: 99px;
min-width: 16px;
padding: 0 5px;
font-size: 10px;
}
.catpill.active .cnt {
color: var(--white);
background: #ffffff40;
}
.catpill-warn {
border-color: #deceab;
}
@supports (color: color-mix(in lab, red, red)) {
.catpill-warn {
border-color: color-mix(in srgb, var(--status-warn) 40%, var(--rule));
}
}
.catpill-warn {
color: #8b7543;
}
@supports (color: color-mix(in lab, red, red)) {
.catpill-warn {
color: color-mix(in srgb, var(--status-warn) 64%, var(--ink));
}
}
.catpill-warn .cnt {
background: var(--status-warn-soft);
color: #8b7543;
}
@supports (color: color-mix(in lab, red, red)) {
.catpill-warn .cnt {
color: color-mix(in srgb, var(--status-warn) 64%, var(--ink));
}
}
.catpill-warn.active {
background: var(--status-warn);
border-color: var(--status-warn);
color: var(--white);
}
.catpill-group {
border-style: dashed;
border-color: var(--ink-4);
color: var(--ink-3);
gap: 5px;
}
.catpill-group .cp-ic {
opacity: .65;
}
.catpill-group.active {
background: var(--ink-3);
border-color: var(--ink-3);
color: var(--white);
border-style: solid;
}
.catpill-group.active .cp-ic {
opacity: 1;
}
.catpill-all {
border-width: 1.5px;
border-color: var(--ink-2);
color: var(--ink-2);
gap: 5px;
font-weight: 600;
}
.catpill-all .cp-ic {
opacity: .8;
}
.catpill-all.active {
background: var(--ink-2);
border-color: var(--ink-2);
color: var(--white);
}
.catpill-all.active .cp-ic {
opacity: 1;
}
.hx-backdrop {
z-index: var(--z-backdrop);
background: var(--overlay-backdrop);
justify-content: center;
align-items: center;
padding: 24px;
display: flex;
position: fixed;
inset: 0;
}
.hx-dialog {
--dc: var(--status-warn);
z-index: var(--z-overlay);
background: var(--white);
border-radius: var(--r-lg);
width: 440px;
max-width: 94vw;
box-shadow: var(--shadow-pop);
position: relative;
overflow: hidden;
}
.hx-dialog.is-plain {
width: auto;
max-width: 92vw;
box-shadow: none;
background: none;
border-radius: 0;
overflow: visible;
}
.hx-dialog.is-plain img {
border-radius: var(--r-md);
width: auto;
max-width: 92vw;
height: auto;
max-height: 92vh;
box-shadow: var(--shadow-pop);
background: var(--white);
display: block;
}
.hx-dialog-hd {
align-items: flex-start;
gap: 13px;
padding: 18px 20px 6px;
display: flex;
}
.hx-dialog-ic {
border-radius: var(--r-md);
background: var(--dc);
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
font-size: 18px;
font-weight: 700;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.hx-dialog-ic {
background: color-mix(in srgb, var(--dc) 15%, var(--white));
}
}
.hx-dialog-ic {
color: var(--dc);
}
.hx-dialog-hd .hx-t {
color: var(--ink);
padding-top: 7px;
font-size: 15.5px;
font-weight: 600;
}
.hx-dialog-bd {
color: var(--ink-3);
padding: 4px 20px 16px 69px;
font-size: 13px;
line-height: 1.5;
}
.hx-dialog-ft {
border-top: 1px solid var(--rule-soft);
background: var(--paper);
justify-content: flex-end;
gap: 10px;
padding: 13px 20px;
display: flex;
}
.hx-dialog.is-info {
--dc: var(--status-info);
}
.hx-dialog.is-warn {
--dc: var(--status-warn);
}
.hx-dialog.is-danger {
--dc: var(--status-risk);
}
.hx-backdrop.is-over-drawer {
z-index: var(--z-dialog);
background: var(--overlay-backdrop);
}
.btn-danger {
background: var(--status-risk);
color: var(--white);
border-color: var(--status-risk);
}
.btn-danger:hover {
background: var(--status-risk-deep);
border-color: var(--status-risk-deep);
}
.appr {
--appr: var(--rule);
border: 1px solid var(--appr);
border-radius: var(--r-md);
background: var(--white);
flex-direction: column;
gap: 10px;
padding: 12px 14px;
display: flex;
}
.appr.is-mine {
--appr: var(--status-warn);
background: var(--status-warn-soft);
}
.appr-h {
color: var(--ink);
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
display: flex;
}
.appr-h .ico {
width: 14px;
height: 14px;
color: var(--appr);
flex-shrink: 0;
}
.appr-who {
color: var(--ink-3);
font-size: 12px;
line-height: 1.5;
}
.appr-who b {
color: var(--ink-2);
font-weight: 600;
}
.appr-act {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.appr-form {
flex-direction: column;
gap: 8px;
display: flex;
}
.appr-form .appr-lbl {
color: var(--ink-2);
font-size: 12px;
font-weight: 600;
}
.appr-q {
border-radius: var(--r-sm);
background: var(--white);
border: 1px solid #ede1c8;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.appr-q {
border: 1px solid color-mix(in srgb, var(--status-warn) 34%, var(--white));
}
}
.appr-q {
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.5;
}
.appr-q .appr-qm {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--status-warn-deep);
font-size: 10px;
}
.appr-q.is-done {
border-color: var(--rule);
}
.appr-q.is-done .appr-qm {
color: var(--ink-4);
}
.appr-q.is-done > span:nth-of-type(2) {
color: var(--ink-3);
}
.appr-a {
border-top: 1px solid var(--rule);
color: var(--ink-2);
padding-top: 7px;
}
.appr-a b {
color: var(--ink-3);
font-weight: 600;
}
.appr-a.is-none {
color: var(--ink-4);
font-style: italic;
}
.appr.is-done {
background: var(--white);
}
.appr.is-done .appr-h {
color: var(--ink-2);
}
.appr.is-erteilt {
--appr: #a0c2a5;
}
@supports (color: color-mix(in lab, red, red)) {
.appr.is-erteilt {
--appr: color-mix(in srgb, var(--status-ok) 40%, var(--rule));
}
}
.appr.is-abgelehnt {
--appr: #dcaf9f;
}
@supports (color: color-mix(in lab, red, red)) {
.appr.is-abgelehnt {
--appr: color-mix(in srgb, var(--status-risk) 40%, var(--rule));
}
}
.appr.is-attached {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -1px;
}
.appr.is-attached .appr-h {
display: none;
}
.callout:has( + .appr.is-attached) {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0;
}
.hx-toaster {
z-index: var(--z-toast);
pointer-events: none;
flex-direction: column;
align-items: center;
gap: 9px;
display: flex;
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
}
.hx-toast {
--tc: var(--ink-3);
pointer-events: auto;
background: var(--ink);
color: var(--white);
border-radius: var(--r-md);
box-shadow: var(--shadow-pop);
border-left: 3px solid var(--tc);
align-items: center;
gap: 12px;
min-width: 300px;
max-width: 460px;
padding: 10px 12px 10px 14px;
font-size: 13px;
display: flex;
}
.hx-toast .t-msg {
flex: 1;
}
.hx-toast .t-act {
color: var(--white);
cursor: pointer;
font-weight: 600;
font-family: var(--font);
white-space: nowrap;
background: none;
border: none;
font-size: 13px;
text-decoration: underline;
}
.hx-toast .t-x:hover {
opacity: 1;
}
.hx-toast.is-ok {
--tc: var(--status-ok);
}
.hx-toast.is-warn {
--tc: var(--status-warn);
}
.hx-toast.is-risk {
--tc: var(--status-risk);
}
.hx-toast.is-undo {
--tc: var(--mod);
}
.hx-tip {
z-index: var(--z-picker);
pointer-events: none;
background: var(--ink);
max-width: 260px;
color: var(--white);
border-radius: var(--r-sm);
box-shadow: var(--shadow-md);
padding: 6px 9px;
font-size: 11.5px;
line-height: 1.45;
position: absolute;
}
.hx-tip.is-mono {
font-family: var(--mono);
letter-spacing: .03em;
font-size: 10.5px;
}
.hx-pop {
z-index: var(--z-picker);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
width: 280px;
max-width: 92vw;
box-shadow: var(--shadow-pop);
padding: 12px 13px;
position: absolute;
}
.hx-pop .p-h {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 7px;
font-size: 9px;
}
.hx-pop .p-d {
color: var(--ink-2);
font-size: 12px;
line-height: 1.55;
}
.hx-pop .p-foot {
border-top: 1px solid var(--rule);
justify-content: flex-end;
gap: 8px;
margin-top: 11px;
padding-top: 9px;
display: flex;
}
.hx-pop.is-ai {
border-color: #cbc3e0;
}
@supports (color: color-mix(in lab, red, red)) {
.hx-pop.is-ai {
border-color: color-mix(in srgb, var(--ai) 26%, var(--rule));
}
}
.hx-pop.is-ai .p-h {
color: var(--ai-deep);
}
.meter {
margin-bottom: 10px;
}
.meter:last-child {
margin-bottom: 0;
}
.meter-head {
font-family: var(--mono);
color: var(--ink-4);
justify-content: space-between;
gap: 10px;
margin-bottom: 5px;
font-size: 11px;
display: flex;
}
.meter-track {
background: var(--rule);
border-radius: 99px;
height: 6px;
overflow: hidden;
}
.meter-fill {
background: var(--mod);
border-radius: 99px;
height: 100%;
}
.meter.is-empty .meter-head {
color: var(--ink-4);
}
.meter.is-empty .meter-track {
background: var(--rule-soft);
box-shadow: inset 0 0 0 1px var(--rule);
}
.meter.is-over .meter-fill {
background: var(--status-risk);
}
.meter.is-over .meter-head {
color: var(--status-risk-deep);
font-weight: 600;
}
.bar-cell {
align-items: center;
gap: 10px;
display: flex;
}
.bar-num {
font-family: var(--mono);
color: var(--ink-3);
width: 38px;
font-size: 11px;
}
.bar-mini {
background: var(--rule);
border-radius: 99px;
flex-shrink: 0;
width: 120px;
height: 6px;
overflow: hidden;
}
.bar-mini > i {
background: var(--mod);
border-radius: 99px;
height: 100%;
display: block;
}
.bar-mini.is-warn > i {
background: var(--status-warn);
}
.bar-mini.is-risk > i {
background: var(--status-risk);
}
.stackbar {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--rule);
height: 26px;
display: flex;
overflow: hidden;
}
.stackbar-seg {
font-family: var(--mono);
color: var(--white);
justify-content: center;
align-items: center;
min-width: 0;
font-size: 10px;
font-weight: 600;
transition: width .3s;
display: flex;
}
.stackbar-seg.open {
background: var(--rule);
color: var(--ink-4);
}
.stackbar.is-mini {
border: none;
border-radius: 99px;
width: 120px;
height: 6px;
}
.stackbar.is-mini .stackbar-seg {
font-size: 0;
}
.loadbar {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-wrap: wrap;
align-items: center;
gap: 14px;
padding: 10px 14px;
display: flex;
}
.loadbar-title {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9px;
}
.load {
color: var(--ink-2);
align-items: center;
gap: 7px;
font-size: 12px;
display: inline-flex;
}
.load-c {
font-family: var(--mono);
color: var(--ink-4);
font-size: 11px;
}
.load-c.is-over {
color: var(--status-risk-deep);
font-weight: 600;
}
.loadbar.is-list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 4px 14px;
}
.loadbar.is-list .load {
border-top: 1px solid var(--rule-soft);
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 0;
display: grid;
}
.loadbar.is-list .load:first-of-type {
border-top: none;
}
.loadbar.is-list .load .nm {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.loadbar.is-list .load .meter {
min-width: 90px;
margin: 0;
}
.hx-drawer-backdrop {
z-index: var(--z-backdrop);
background: var(--overlay-backdrop-light);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-backdrop);
position: fixed;
inset: 0;
}
.hx-drawer-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.hx-drawer {
z-index: var(--z-overlay);
width: min(var(--drawer-width), 100%);
background: var(--overlay-bg);
box-shadow: var(--overlay-shadow);
transition: transform var(--transition-drawer-in);
flex-direction: column;
display: flex;
position: fixed;
top: 0;
bottom: 0;
right: 0;
transform: translateX(100%);
}
.hx-drawer.is-open {
transform: none;
}
.hx-drawer.is-wide {
width: min(var(--drawer-width-wide), 100%);
}
.hx-drawer.is-detail {
width: min(var(--drawer-width-detail), 100%);
}
.hx-drawer-hd {
border-bottom: 1px solid var(--overlay-hairline);
flex: none;
align-items: center;
gap: 11px;
padding: 16px 20px;
display: flex;
}
.hx-drawer-hd.is-stacked {
flex-direction: column;
align-items: stretch;
gap: 13px;
}
.hx-drawer-hd.is-stacked > .sec-row {
align-items: flex-start;
}
.hx-drawer-ic {
border-radius: var(--r-sm);
background: var(--mod-soft);
width: 30px;
height: 30px;
color: var(--mod-deep);
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.hx-drawer-hd .hx-t {
color: var(--ink);
font-size: 15px;
font-weight: 600;
}
.hx-drawer-hd .hx-s {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 1px;
font-size: 11px;
}
.hx-drawer-x {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
width: 30px;
height: 30px;
color: var(--ink-3);
cursor: pointer;
justify-content: center;
align-items: center;
margin-left: auto;
font-size: 14px;
display: flex;
}
.hx-drawer-x:hover {
border-color: var(--ink-4);
color: var(--ink);
}
.hx-drawer-x.is-ghost {
background: none;
border-color: #0000;
}
.hx-drawer-x.is-ghost:hover {
border-color: var(--ink-4);
background: var(--white);
}
.hx-drawer-bd {
flex-direction: column;
flex: auto;
gap: 15px;
padding: 18px 20px;
display: flex;
overflow-y: auto;
}
.hx-drawer-ft {
border-top: 1px solid var(--overlay-hairline);
flex: none;
align-items: center;
gap: 10px;
padding: 13px 20px;
display: flex;
}
.optrow {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
cursor: pointer;
align-items: flex-start;
gap: 11px;
padding: 11px 13px;
display: flex;
}
.optrow:hover {
border-color: var(--ink-4);
}
.optrow:has(input:checked) {
border-color: var(--mod);
background: var(--mod-soft);
}
.optrow > input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--mod);
cursor: pointer;
flex: none;
margin-top: 1px;
}
.optrow-tx {
flex: 1;
min-width: 0;
}
.optrow-t {
color: var(--ink);
flex-wrap: wrap;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
display: flex;
}
.optrow-sub {
color: var(--ink-4);
margin-top: 2px;
font-size: 11.5px;
}
.optrow.is-disabled {
opacity: .55;
pointer-events: none;
}
.field {
flex-direction: column;
gap: 6px;
display: flex;
}
.field-meta {
font-family: var(--mono);
color: var(--ink-4);
align-items: center;
gap: 8px;
font-size: 10px;
display: flex;
}
.field-label {
color: var(--ink-2);
align-items: center;
font-size: 12px;
font-weight: 500;
display: flex;
}
.field-label .opt {
color: var(--ink-4);
font-weight: 400;
font-family: var(--mono);
margin-left: 5px;
font-size: 10px;
}
.tbl-list {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.tbl-list th {
color: var(--ink-4);
text-align: left;
border-bottom: 1px solid var(--rule);
padding: 0 12px 8px;
font-size: 11px;
font-weight: 500;
}
.tbl-list td {
color: var(--ink-2);
border-bottom: 1px solid var(--rule-soft);
padding: 11px 12px;
font-size: 13px;
}
.tbl-list tr.row-click {
cursor: pointer;
}
.tbl-list tr.row-click:hover td {
background: var(--paper);
}
.tbl-list .cell-primary {
color: var(--ink);
font-weight: 600;
}
.tbl-list .cell-chevron {
color: var(--ink-4);
text-align: right;
}
.cell-muted {
color: var(--ink-4);
}
.cell-sub {
color: var(--ink-4);
margin-top: 1px;
font-size: 11px;
display: block;
}
.cell-mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.cell-dim {
color: var(--ink-4);
}
.cell-warn {
color: var(--status-warn-deep);
}
.cell-warn .ico {
vertical-align: -2px;
color: var(--status-warn);
margin-right: 5px;
}
.tbl-list tr.is-overridden td:first-child {
box-shadow: inset 3px 0 0 var(--mod);
}
.tbl-list tr.is-overridden {
box-shadow: none;
}
.back-link:hover {
color: var(--ink);
}
.hx-detail {
grid-template-columns: 1fr 200px;
align-items: start;
gap: 20px;
display: grid;
}
.detail-facts {
flex-wrap: wrap;
gap: 11px 26px;
display: flex;
}
.detail-facts-grp {
flex-wrap: wrap;
flex: 240px;
align-content: flex-start;
gap: 11px 26px;
min-width: 0;
display: flex;
}
.detail-facts-grp + .detail-facts-grp {
flex: 0 auto;
max-width: 220px;
}
.detail-facts-grp + .detail-facts-grp .m {
white-space: normal;
text-align: right;
line-height: 1.5;
}
.detail-facts > .detail-facts-grp > div, .detail-facts > div:not(.detail-facts-grp) {
flex-direction: column;
gap: 3px;
min-width: 0;
display: flex;
}
.detail-facts-grp + .detail-facts-grp {
border-left: 1px solid var(--rule);
padding-left: 26px;
}
.detail-facts .k {
font-family: var(--mono);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9px;
}
.detail-facts .v {
color: var(--ink);
align-items: center;
gap: 6px;
min-width: 0;
font-size: 13px;
display: flex;
}
.detail-facts .v.is-empty {
color: var(--ink-4);
}
.detail-facts .v.is-due {
color: var(--status-risk-deep);
font-weight: 600;
}
.detail-facts .fsep {
background: var(--rule);
align-self: stretch;
width: 1px;
margin: 0 4px;
}
.hx-detail.is-single {
grid-template-columns: minmax(0, 1fr);
}
.refgrid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 8px;
display: grid;
}
.hx-detail-main {
flex-direction: column;
gap: 20px;
min-width: 0;
display: flex;
}
.hx-detail-meta {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
flex-direction: column;
align-self: start;
gap: 0;
padding: 2px 15px;
display: flex;
}
.hx-detail-meta > div {
border-top: 1px solid var(--rule-soft);
padding: 14px 0;
}
.hx-detail-meta > div:first-child {
border-top: none;
}
.sec-h {
font-family: var(--mono);
letter-spacing: .11em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 9px;
font-size: 9.5px;
font-weight: 600;
}
.sec-h.is-ruled {
align-items: center;
gap: 8px;
display: flex;
}
.sec-h.is-ruled:after {
content: "";
background: var(--rule);
flex: 1;
height: 1px;
}
.sec-row {
align-items: center;
gap: 8px;
display: flex;
}
.sec-h .m, .sec-h .chip, .sec-h .tag {
font-family: var(--font);
letter-spacing: 0;
text-transform: none;
font-size: 11px;
font-weight: 500;
}
.sec-mk {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.sec-sep {
background: var(--rule);
height: 1px;
margin: 15px 0;
}
.addrow {
flex-wrap: wrap;
align-items: center;
gap: 7px 16px;
display: flex;
}
.add-btn {
font: inherit;
color: var(--mod-deep);
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 6px;
padding: 2px 0;
font-size: 12.5px;
font-weight: 500;
display: inline-flex;
}
.add-btn:hover {
text-decoration: underline;
}
.add-btn .ico, .add-btn svg {
width: 13px;
height: 13px;
}
.add-btn:disabled {
color: var(--ink-4);
cursor: not-allowed;
text-decoration: none;
}
.fold-head {
cursor: pointer;
text-align: left;
background: none;
border: none;
align-items: center;
gap: 8px;
width: 100%;
padding: 4px 0;
font-family: inherit;
display: flex;
}
.fold-head:hover .sec-h {
color: var(--ink-3);
}
.fold-body {
flex-direction: column;
gap: 10px;
display: flex;
}
.ai-callout {
background: #f5f3fd;
}
@supports (color: color-mix(in lab, red, red)) {
.ai-callout {
background: color-mix(in srgb, var(--ai) 7%, var(--white));
}
}
.ai-callout {
border: 1px solid #dfdbf8;
}
@supports (color: color-mix(in lab, red, red)) {
.ai-callout {
border: 1px solid color-mix(in srgb, var(--ai) 22%, var(--white));
}
}
.ai-callout {
border-left: 3px solid var(--ai);
border-radius: var(--r-md);
padding: 13px 15px;
}
.ai-panel {
border: 1px solid #dcd7f8;
}
@supports (color: color-mix(in lab, red, red)) {
.ai-panel {
border: 1px solid color-mix(in srgb, var(--ai) 24%, var(--white));
}
}
.ai-panel {
background: var(--ai-tint);
border-radius: var(--r-md);
padding: 12px 13px;
}
.ai-panel-h {
color: var(--ai-deep);
align-items: center;
gap: 7px;
margin-bottom: 5px;
font-size: 12.5px;
font-weight: 600;
display: flex;
}
.ai-panel-d {
color: var(--ink-2);
font-size: 12px;
line-height: 1.55;
}
.ai-skel {
flex-direction: column;
gap: 7px;
display: flex;
}
.ai-skel i {
background: linear-gradient(90deg, var(--ai-soft) 0%, #e8e5fa 50%, var(--ai-soft) 100%);
border-radius: 5px;
height: 9px;
display: block;
}
@supports (color: color-mix(in lab, red, red)) {
.ai-skel i {
background: linear-gradient(90deg, var(--ai-soft) 0%, color-mix(in srgb,var(--ai) 16%,var(--white)) 50%, var(--ai-soft) 100%);
}
}
.ai-skel i {
background-size: 200% 100%;
animation: 1.3s ease-in-out infinite ai-shimmer;
}
.ai-skel i:nth-child(2) {
width: 86%;
}
.ai-skel i:nth-child(3) {
width: 64%;
}
@keyframes ai-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.ai-empty {
color: var(--ink-4);
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.5;
display: flex;
}
.ai-stale {
color: var(--ink-3);
align-items: flex-start;
gap: 8px;
font-size: 11.5px;
line-height: 1.45;
display: flex;
}
.ai-stale .ai-refresh, .ai-error .ai-retry, .mc-ai.is-error .ai-retry {
font: inherit;
cursor: pointer;
white-space: nowrap;
background: none;
border: none;
padding: 0;
text-decoration: underline;
}
.ai-stale .ai-refresh {
color: var(--ai-deep);
font-size: 11.5px;
}
.ai-error {
color: var(--status-risk-deep);
align-items: flex-start;
gap: 8px;
font-size: 11.5px;
line-height: 1.45;
display: flex;
}
.ai-error .ai-retry, .mc-ai.is-error .ai-retry {
color: var(--status-risk-deep);
font-size: 11.5px;
}
.ai-ts {
font-family: var(--mono);
letter-spacing: .03em;
color: var(--ink-4);
align-items: center;
gap: 6px;
margin-top: 9px;
font-size: 9.5px;
display: flex;
}
.mc-ai {
border-left: 2px solid var(--ai);
min-width: 0;
color: var(--ink-3);
align-items: baseline;
gap: 8px;
margin-top: 8px;
padding-left: 10px;
font-size: 12px;
line-height: 1.5;
display: flex;
}
.mc-ai .mc-ai-t {
text-overflow: ellipsis;
white-space: nowrap;
flex: auto;
min-width: 0;
overflow: hidden;
}
.mc-ai .ai-ts {
flex: none;
margin-top: 0;
}
.mc-ai.is-empty {
color: var(--ink-4);
}
.mc-ai.is-error {
color: var(--status-risk-deep);
border-left-color: var(--status-risk);
}
.mc-ai.is-loading {
color: var(--ink-4);
}
.mc-ai.is-loading .mc-ai-t {
background: linear-gradient(90deg, var(--ai-soft) 0%, #e8e5fa 50%, var(--ai-soft) 100%);
border-radius: 5px;
flex: none;
width: min(220px, 60%);
height: 9px;
}
@supports (color: color-mix(in lab, red, red)) {
.mc-ai.is-loading .mc-ai-t {
background: linear-gradient(90deg, var(--ai-soft) 0%, color-mix(in srgb,var(--ai) 16%,var(--white)) 50%, var(--ai-soft) 100%);
}
}
.mc-ai.is-loading .mc-ai-t {
background-size: 200% 100%;
animation: 1.3s ease-in-out infinite ai-shimmer;
}
[data-ai="off"] .mc-ai {
display: none;
}
.acc-layout {
grid-template-columns: 1fr 300px;
align-items: start;
gap: 22px;
display: grid;
}
.acc-search {
margin-bottom: 14px;
position: relative;
}
.acc-search input {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
width: 100%;
font: inherit;
background: var(--white);
color: var(--ink);
padding: 9px 11px;
font-size: 13px;
}
.acc-search input:focus {
border-color: var(--mod, var(--brand-primary));
box-shadow: 0 0 0 3px var(--mod-soft, var(--brand-primary-soft));
outline: none;
}
.acc-group-l {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
margin: 16px 2px 8px;
font-size: 9.5px;
}
.acc-group-l:first-child {
margin-top: 0;
}
.acc-pkgbar {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.acc-pkg {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
cursor: pointer;
font: inherit;
color: var(--ink-2);
align-items: center;
gap: 8px;
padding: 8px 11px;
font-size: 12.5px;
display: inline-flex;
}
.acc-pkg:hover {
border-color: var(--mod, var(--brand-primary));
}
.acc-pkg.is-on {
border-color: var(--mod, var(--brand-primary));
background: var(--mod-soft, var(--brand-primary-soft));
color: var(--mod-deep, var(--brand-primary-deep));
font-weight: 500;
}
.acc-pkg .pk-ic {
color: var(--mod, var(--brand-primary));
display: flex;
}
.acc-pkg.is-on .pk-ic {
color: var(--mod-deep, var(--brand-primary-deep));
}
.acc-pkg .pk-c {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.acc-pkg.is-on .pk-c {
color: var(--mod-deep, var(--brand-primary-deep));
}
.acc-sys {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
overflow: hidden;
}
.acc-modgroup {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
margin-bottom: 10px;
overflow: hidden;
}
.acc-modhead {
cursor: pointer;
width: 100%;
font: inherit;
text-align: left;
border: none;
border-left: 3px solid var(--mod, var(--brand-primary));
background: none;
align-items: center;
gap: 10px;
padding: 11px 14px;
display: flex;
}
.acc-modhead:hover {
background: var(--paper);
}
.acc-moddot {
background: var(--mod, var(--brand-primary));
border-radius: 50%;
flex-shrink: 0;
width: 9px;
height: 9px;
}
.acc-modname {
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
}
.acc-modmeta {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.acc-modcount {
font-family: var(--mono);
color: var(--mod-deep, var(--brand-primary-deep));
background: var(--mod-soft, var(--brand-primary-soft));
border-radius: 99px;
margin-left: auto;
padding: 2px 8px;
font-size: 10px;
}
.acc-modcount.is-zero {
color: var(--ink-4);
background: var(--paper-2);
}
.acc-caret {
color: var(--ink-4);
transition: transform .15s;
display: inline-flex;
}
.acc-modgroup.is-open .acc-caret {
transform: rotate(90deg);
}
.acc-rolelist {
border-top: 1px solid var(--rule-soft);
}
.acc-rolerow {
border-top: 1px solid var(--rule-soft);
align-items: center;
gap: 12px;
padding: 10px 14px;
display: flex;
}
.acc-rolerow:first-child {
border-top: none;
}
.acc-role-main {
flex: 1;
min-width: 0;
}
.acc-role-n {
color: var(--ink-2);
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
display: flex;
}
.acc-role-code {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 2px;
font-size: 10.5px;
}
.acc-role-d {
color: var(--ink-4);
margin-top: 2px;
font-size: 11.5px;
}
.acc-role-ct {
flex-shrink: 0;
align-items: center;
gap: 9px;
display: flex;
}
.acc-locknote {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-4);
align-items: center;
gap: 4px;
font-size: 9px;
display: inline-flex;
}
.acc-vis {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
position: sticky;
top: 16px;
overflow: hidden;
}
.acc-vis-hd {
border-bottom: 1px solid var(--rule-soft);
padding: 13px 15px;
}
.acc-vis-hd .h {
color: var(--ink);
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
display: flex;
}
.acc-vis-hd .s {
color: var(--ink-3);
margin-top: 3px;
font-size: 11.5px;
line-height: 1.45;
}
.acc-vis-bd {
padding: 13px 15px;
}
.acc-vis-l {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 8px;
font-size: 9px;
}
.acc-vis-l.gap {
margin-top: 16px;
}
.acc-vis-chips {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.acc-vischip {
color: var(--mod-deep, var(--brand-primary-deep));
background: var(--mod-soft, var(--brand-primary-soft));
border: 1px solid var(--mod, #0080c8);
align-items: center;
gap: 6px;
font-size: 12px;
display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
.acc-vischip {
border: 1px solid color-mix(in srgb, var(--mod, var(--brand-primary)) 26%, transparent);
}
}
.acc-vischip {
border-radius: 99px;
padding: 3px 10px 3px 8px;
}
.acc-vischip .vd {
background: var(--mod, var(--brand-primary));
border-radius: 50%;
width: 7px;
height: 7px;
}
.acc-vischip.is-base {
color: var(--ink-3);
background: var(--paper-2);
border-color: var(--rule);
}
.acc-vischip.is-base .vd {
background: var(--ink-4);
}
.acc-vis-count {
align-items: baseline;
gap: 6px;
margin-top: 4px;
display: flex;
}
.acc-vis-count .n {
color: var(--ink);
font-size: 22px;
font-weight: 600;
}
.acc-vis-count .u {
color: var(--ink-4);
font-size: 11.5px;
}
.acc-empty {
color: var(--ink-4);
padding: 2px 0;
font-size: 12px;
font-style: italic;
}
.clampbox {
--clamp: 128px;
--clamp-bg: var(--white);
}
.clampbox .cb-body {
max-height: var(--clamp);
position: relative;
overflow: hidden;
}
.clampbox.is-open .cb-body {
max-height: none;
}
.clampbox:not(.is-open) .cb-body:after {
content: "";
background: linear-gradient(transparent, var(--clamp-bg));
pointer-events: none;
height: 42px;
position: absolute;
inset: auto 0 0;
}
.cb-toggle {
font: inherit;
color: var(--mod-deep);
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 5px;
margin-top: 7px;
padding: 0;
font-size: 12px;
font-weight: 500;
display: inline-flex;
}
.cb-toggle:hover {
text-decoration: underline;
}
.jump-link {
color: var(--mod-deep);
cursor: pointer;
align-items: center;
gap: 5px;
font-size: 12px;
text-decoration: none;
display: inline-flex;
}
.jump-link:hover {
text-decoration: underline;
}
.ref-chips {
flex-wrap: wrap;
gap: 7px;
display: flex;
}
.ref-chip {
font-family: var(--mono);
color: var(--ink-3);
background: var(--paper-2);
border: 1px solid var(--rule);
cursor: pointer;
border-radius: 99px;
align-items: center;
gap: 6px;
padding: 4px 9px;
font-size: 10px;
text-decoration: none;
display: inline-flex;
}
.ref-chip:hover {
border-color: var(--ink-4);
}
.ref-chip b {
color: var(--ink-2);
font-weight: 600;
}
.ref-chip .x {
color: var(--ink-4);
cursor: pointer;
background: none;
border: none;
margin-left: 2px;
padding: 0;
display: inline-flex;
}
.ref-chip .x:hover {
color: var(--status-risk-deep);
}
.ref-chip.is-isms {
border-color: #a4b7cf;
}
@supports (color: color-mix(in lab, red, red)) {
.ref-chip.is-isms {
border-color: color-mix(in srgb, var(--status-info) 35%, var(--rule));
}
}
.ref-chip.is-isms {
background: #e0e2e1;
}
@supports (color: color-mix(in lab, red, red)) {
.ref-chip.is-isms {
background: color-mix(in srgb, var(--status-info) 7%, var(--paper-2));
}
}
.ref-chip.is-isms {
color: var(--status-info-deep, #1c5e8a);
}
.ref-chip.is-isms b {
color: inherit;
}
.mediadrop {
text-align: center;
border: 1px dashed var(--rule);
border-radius: var(--r-md);
background: var(--paper);
cursor: pointer;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 22px 18px;
transition: border-color .15s, background .15s;
display: flex;
}
.mediadrop:hover {
border-color: var(--mod, var(--brand-primary));
}
.mediadrop.is-over {
border-color: var(--mod, var(--brand-primary));
background: var(--mod-soft);
border-style: solid;
}
.mediadrop .md-ic {
border-radius: var(--r-sm);
background: var(--mod-soft);
width: 34px;
height: 34px;
color: var(--mod-deep);
justify-content: center;
align-items: center;
display: flex;
}
.mediadrop .md-ic svg, .mediadrop .md-ic .ico {
width: 18px;
height: 18px;
}
.mediadrop .md-t {
color: var(--ink-2);
font-size: 13px;
}
.mediadrop .md-t b {
color: var(--mod-deep);
font-weight: 600;
}
.mediadrop .md-lim {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10.5px;
}
.mediadrop.is-error {
border-color: var(--status-risk);
background: var(--status-risk-soft);
border-style: solid;
}
.mediadrop.is-error .md-ic {
background: var(--status-risk-soft);
color: var(--status-risk);
}
.medialib {
flex-direction: column;
gap: 9px;
display: flex;
}
.medialib-bar {
align-items: center;
gap: 9px;
display: flex;
}
.medialib-bar .segctl {
flex: none;
}
.medialib-bar .combo {
flex: auto;
min-width: 0;
}
.medialib-grid {
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 9px;
display: grid;
}
.mediatile {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
cursor: pointer;
text-align: left;
flex-direction: column;
padding: 0;
display: flex;
overflow: hidden;
}
.mediatile:hover {
border-color: var(--ink-4);
}
.mediatile.is-selected {
border-color: var(--mod, var(--brand-primary));
box-shadow: 0 0 0 2px var(--mod-soft);
}
.mediatile .mt-img {
aspect-ratio: 4 / 3;
background: var(--paper-2);
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
}
.mediatile .mt-img img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.mediatile .mt-meta {
border-top: 1px solid var(--rule);
flex-direction: column;
gap: 1px;
min-width: 0;
padding: 6px 8px 7px;
display: flex;
}
.mediatile .mt-n {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11.5px;
overflow: hidden;
}
.mediatile .mt-s {
font-family: var(--mono);
color: var(--ink-4);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 10px;
overflow: hidden;
}
.mediatile .mt-scope {
position: relative;
}
.mediatile.is-global .mt-img:after {
content: "global";
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--white);
border: 1px solid var(--rule);
border-radius: 99px;
padding: 1px 6px;
font-size: 9px;
position: absolute;
top: 5px;
right: 5px;
}
.mediatile.is-busy .mt-img {
background: var(--paper);
}
.mediabar {
background: var(--rule);
border-radius: 99px;
height: 3px;
overflow: hidden;
}
.mediabar span {
background: var(--mod, var(--brand-primary));
height: 100%;
transition: width .2s linear;
display: block;
}
.matrix {
border-collapse: separate;
border-spacing: 0;
width: 100%;
font-size: 12.5px;
}
.matrix th, .matrix td {
border-bottom: 1px solid var(--rule-soft);
text-align: center;
padding: 8px 12px;
}
.matrix thead th {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ink-4);
border-bottom: 1px solid var(--rule);
white-space: nowrap;
font-size: 9.5px;
font-weight: 600;
}
.matrix tbody th {
text-align: left;
color: var(--ink-2);
white-space: nowrap;
background: var(--white);
font-weight: 600;
position: sticky;
left: 0;
}
.matrix tbody tr:hover td, .matrix tbody tr:hover th {
background: var(--paper);
}
.matrix .cell {
border-radius: 50%;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
font-size: 12px;
display: inline-flex;
}
.matrix .cell.is-allow {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.matrix .cell.is-deny {
background: var(--paper-2);
color: var(--ink-4);
}
.matrix .cell.is-mismatch {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
}
.widget-cfg-btn:hover, .widget-cfg-btn.is-active {
color: var(--mod-deep);
border-color: var(--mod);
background: var(--mod-soft);
}
.widget-cfg-pop.is-open {
display: block;
}
.wcfg-h {
color: var(--ink);
margin-bottom: 10px;
font-size: 12px;
font-weight: 600;
}
.wcfg-field {
margin-bottom: 12px;
}
.wcfg-field:last-of-type {
margin-bottom: 0;
}
.wcfg-ft {
border-top: 1px solid var(--rule-soft);
flex-direction: column;
gap: 7px;
margin-top: 14px;
padding-top: 12px;
display: flex;
}
.ident-preview {
background: var(--paper-2);
border: 1px dashed var(--rule);
border-radius: var(--r-sm);
align-items: center;
gap: 9px;
padding: 9px 11px;
display: flex;
}
.ident-preview .iv {
font-family: var(--mono);
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
}
.ident-preview .ih {
color: var(--ink-4);
margin-left: auto;
font-size: 11px;
}
.segctl {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
gap: 2px;
padding: 2px;
display: flex;
}
.segctl button {
font-family: var(--font);
color: var(--ink-2);
border-radius: calc(var(--r-sm) - 2px);
cursor: pointer;
background: none;
border: 1px solid #0000;
flex: 1;
padding: 6px;
font-size: 12.5px;
}
.segctl button:hover {
color: var(--ink);
}
.segctl button.is-on {
background: var(--mod-soft);
border-color: var(--mod);
color: var(--mod-deep);
font-weight: 600;
}
.segctl.is-status button[data-tone="info"].is-on {
background: var(--status-info-soft);
border-color: var(--status-info);
color: var(--status-info);
}
.segctl.is-status button[data-tone="warn"].is-on {
background: var(--status-warn-soft);
border-color: var(--status-warn);
color: var(--status-warn-deep);
}
.segctl.is-status button[data-tone="ok"].is-on {
background: var(--status-ok-soft);
border-color: var(--status-ok);
color: var(--status-ok);
}
.filter-bar {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.filter-chip {
font-family: var(--mono);
border: 1px solid var(--rule);
background: var(--white);
color: var(--ink-3);
cursor: pointer;
border-radius: 99px;
align-items: center;
gap: 6px;
padding: 4px 11px;
font-size: 11px;
display: inline-flex;
}
.filter-chip:hover {
border-color: var(--ink-4);
}
.filter-chip.is-on {
background: var(--mod);
color: var(--white);
border-color: var(--mod);
}
.filter-chip .n {
opacity: .75;
font-size: 10px;
}
.switch {
--sw: var(--mod);
background: var(--ink-4);
cursor: pointer;
border: none;
border-radius: 99px;
flex-shrink: 0;
width: 40px;
height: 23px;
padding: 0;
transition: background .15s;
position: relative;
}
.switch:after {
content: "";
background: var(--white);
border-radius: 99px;
width: 19px;
height: 19px;
transition: transform .15s;
position: absolute;
top: 2px;
left: 2px;
}
.switch.is-on {
background: var(--sw);
}
.switch.is-on:after {
transform: translateX(17px);
}
.switch.is-ai {
--sw: var(--ai-deep);
}
.row {
border-bottom: 1px solid var(--rule-soft);
align-items: center;
gap: 14px;
padding: 12px 0;
display: flex;
}
.row:last-child {
border-bottom: none;
}
.row .rl {
flex: 1;
}
.row .rl .n {
color: var(--ink-2);
font-size: 13px;
font-weight: 500;
}
.row .rl .d {
color: var(--ink-4);
margin-top: 2px;
font-size: 11.5px;
}
.row .rc {
flex-shrink: 0;
align-items: center;
gap: 8px;
display: flex;
}
.combo {
position: relative;
}
.combo-pop {
z-index: var(--z-picker);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
box-shadow: var(--shadow-pop);
max-height: 196px;
padding: 4px;
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
overflow-y: auto;
}
.combo-pop.is-open {
display: block;
}
.combo-pop.is-inline {
z-index: auto;
box-shadow: none;
max-height: 240px;
margin-top: 6px;
position: static;
top: auto;
left: auto;
right: auto;
}
.combo-pop.is-nested {
z-index: auto;
box-shadow: none;
background: none;
border: none;
border-radius: 0;
max-height: 196px;
margin: 0;
padding: 0;
position: static;
top: auto;
left: auto;
right: auto;
}
.combo-opt {
border-radius: var(--r-sm);
cursor: pointer;
align-items: center;
gap: 9px;
padding: 7px 9px;
display: flex;
}
.combo-opt:hover, .combo-opt.is-active {
background: var(--mod-soft);
}
.combo-opt .av {
background: var(--mod);
width: 24px;
height: 24px;
color: var(--white);
border-radius: 99px;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 600;
display: flex;
}
.combo-opt .nm {
color: var(--ink);
font-size: 13px;
}
.combo-opt .rl {
color: var(--ink-4);
margin-left: auto;
font-size: 11px;
}
.combo-empty {
color: var(--ink-4);
padding: 10px 9px;
font-size: 12px;
line-height: 1.5;
}
.combo-hidden {
border-top: 1px solid var(--rule-soft);
color: var(--ink-4);
align-items: center;
gap: 7px;
margin-top: 2px;
padding: 8px 9px;
font-size: 11.5px;
display: flex;
}
.combo-hidden button {
font: inherit;
color: var(--mod-deep);
cursor: pointer;
background: none;
border: none;
margin-left: auto;
padding: 0;
font-weight: 500;
}
.combo-hidden button:hover {
text-decoration: underline;
}
.combo-opt.is-retired .nm {
color: var(--ink-3);
}
.combo-empty a {
color: var(--mod-deep);
cursor: pointer;
font-weight: 500;
}
.combo-empty a:hover {
text-decoration: underline;
}
.combo-opt-group {
border-radius: var(--r-sm);
margin-bottom: 2px;
overflow: hidden;
}
.combo-opt-primary {
border-radius: var(--r-sm);
cursor: pointer;
align-items: center;
gap: 9px;
padding: 7px 9px;
display: flex;
}
.combo-opt-primary:hover, .combo-opt-primary.is-active {
background: var(--mod-soft);
}
.combo-opt-primary .merge-badge {
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 99px;
flex-shrink: 0;
margin-left: auto;
padding: 1px 7px;
font-size: 9px;
font-weight: 600;
}
.combo-opt-sub {
border-radius: var(--r-sm);
cursor: pointer;
color: var(--ink-3);
align-items: center;
gap: 8px;
padding: 6px 9px 6px 26px;
font-size: 12px;
display: flex;
}
.combo-opt-sub:hover, .combo-opt-sub.is-active {
background: var(--paper-2);
color: var(--ink-2);
}
.combo-opt-sub .id {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 10px;
}
.combo-sel {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--paper);
align-items: center;
gap: 9px;
min-width: 0;
padding: 7px 10px;
display: flex;
}
.combo-sel .rc-dot {
background: var(--rc-tone, var(--mod));
border-radius: 50%;
flex-shrink: 0;
width: 8px;
height: 8px;
}
.combo-sel .rc-nm {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 500;
overflow: hidden;
}
.combo-sel .rc-id {
font-family: var(--mono);
color: var(--ink-4);
flex-shrink: 0;
font-size: 11px;
}
.combo-sel .rc-x {
cursor: pointer;
color: var(--ink-4);
background: none;
border: none;
flex-shrink: 0;
margin-left: auto;
padding: 2px;
}
.combo-sel .rc-x:hover {
color: var(--ink);
}
.combo-sel.is-freeform {
background: var(--white);
border-style: dashed;
}
.combo-sel.is-freeform .rc-dot {
background: var(--ink-4);
}
.vis-scale {
flex-direction: column;
gap: 8px;
display: flex;
}
.vis-track {
align-items: flex-start;
display: flex;
}
.vis-node {
flex-direction: column;
flex-shrink: 0;
align-items: center;
gap: 7px;
display: flex;
}
.vis-label {
color: var(--ink-3);
white-space: nowrap;
font-size: 11px;
}
.vis-node:has(.vis-stop.is-active) .vis-label {
color: var(--ink);
font-weight: 600;
}
.vis-line {
background: var(--rule);
flex: 1;
min-width: 18px;
height: 2px;
margin: 15px 2px 0;
}
.vis-stop {
--vc: var(--ink-4);
border: 2px solid var(--rule);
background: var(--white);
width: 32px;
height: 32px;
color: var(--ink-4);
cursor: pointer;
border-radius: 50%;
justify-content: center;
align-items: center;
padding: 0;
transition: border-color .15s, background .15s, box-shadow .15s;
display: flex;
}
.vis-stop svg {
width: 14px;
height: 14px;
}
.vis-stop[data-v="platform"] {
--vc: var(--vis-platform);
}
.vis-stop[data-v="company"] {
--vc: var(--vis-company);
}
.vis-stop[data-v="area"] {
--vc: var(--vis-area);
}
.vis-stop[data-v="team"] {
--vc: var(--vis-team);
}
.vis-stop[data-v="restricted"] {
--vc: var(--vis-restricted);
}
.vis-stop:hover:not(:disabled) {
border-color: var(--vc);
color: var(--vc);
}
.vis-stop.is-active {
background: var(--vc);
border-color: var(--vc);
color: var(--white);
box-shadow: 0 0 0 4px var(--vc);
}
@supports (color: color-mix(in lab, red, red)) {
.vis-stop.is-active {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc) 20%, transparent);
}
}
.vis-stop.is-locked {
cursor: not-allowed;
opacity: .5;
background: var(--paper-2);
border-color: var(--rule);
color: var(--ink-4);
}
.vis-stop.is-locked.is-active {
opacity: 1;
}
.vis-custom-note {
color: var(--ink-3);
align-items: center;
gap: 6px;
font-size: 11.5px;
display: flex;
}
.vis-custom-note a {
color: var(--mod-deep);
cursor: pointer;
font-weight: 500;
}
.vis-custom-note a:hover {
text-decoration: underline;
}
.src-tag {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--white);
background: var(--st-tone, var(--ink-4));
border-radius: 4px;
flex-shrink: 0;
padding: 2px 6px;
font-size: 8.5px;
font-weight: 700;
}
.src-wiki {
--st-tone: var(--label-azure);
}
.src-pol {
--st-tone: var(--label-violet);
}
.src-cmdb {
--st-tone: var(--label-slate);
}
.src-sa {
--st-tone: var(--label-teal);
}
.src-doc {
--st-tone: var(--label-bronze);
}
.src-url {
--st-tone: var(--label-green);
}
.ref-manage {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
cursor: pointer;
font: inherit;
color: var(--ink-2);
align-items: center;
gap: 8px;
padding: 4px 9px 4px 7px;
font-size: 12px;
display: inline-flex;
}
.ref-manage:hover {
border-color: var(--mod, var(--brand-primary));
}
.ref-strip {
display: inline-flex;
}
.ref-strip .ref-dot {
border: 1.5px solid var(--white);
background: var(--st-tone, var(--ink-4));
border-radius: 50%;
width: 9px;
height: 9px;
margin-left: -3px;
}
.rm-count {
color: var(--ink-3);
font-size: 11.5px;
}
.rm-add {
color: var(--ink-3);
font-size: 12px;
}
.ref-manage:hover .rm-add {
color: var(--mod-deep, var(--brand-primary-deep));
}
.ref-item {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
align-items: center;
gap: 9px;
min-width: 0;
padding: 9px 11px;
text-decoration: none;
display: flex;
overflow: hidden;
}
.ref-item .ri-main {
flex: 1;
min-width: 0;
}
.ref-item .ri-label {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 500;
display: block;
overflow: hidden;
}
.ref-item .ri-meta {
font-family: var(--mono);
color: var(--ink-4);
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 2px;
font-size: 10px;
display: block;
overflow: hidden;
}
.ref-item .ri-x {
cursor: pointer;
color: var(--ink-4);
background: none;
border: none;
flex-shrink: 0;
margin-left: auto;
padding: 3px;
}
.ref-item .ri-x:hover {
color: var(--status-risk-deep);
}
.person-pill {
border: 1px solid var(--rule);
background: var(--white);
border-radius: 99px;
align-items: center;
gap: 7px;
max-width: 100%;
padding: 3px 8px 3px 4px;
display: inline-flex;
}
.person-pill .pp-av {
width: 22px;
height: 22px;
color: var(--white);
background: var(--mod);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 9px;
font-weight: 600;
display: flex;
}
.person-pill .pp-name {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12.5px;
overflow: hidden;
}
.person-pill .pp-you {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 99px;
flex-shrink: 0;
padding: 1px 5px;
font-size: 8.5px;
}
.person-pill .pp-x {
cursor: pointer;
color: var(--ink-4);
background: none;
border: none;
flex-shrink: 0;
padding: 2px;
display: flex;
}
.person-pill .pp-x:hover {
color: var(--status-risk-deep);
}
.topic-ref {
color: var(--ink-2);
background: var(--paper);
border: 1px solid var(--rule);
cursor: pointer;
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 2px 9px 2px 4px;
font-size: 11px;
display: inline-flex;
}
.topic-ref:hover {
border-color: var(--mod);
background: var(--mod-soft);
}
.topic-ref .tr-tag {
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
color: var(--white);
background: var(--tr-tone, var(--ink-4));
border-radius: 4px;
padding: 1px 4px;
font-size: 8px;
font-weight: 700;
}
.topic-ref.tr-task {
--tr-tone: var(--mod);
}
.topic-ref.tr-cmdb {
--tr-tone: var(--label-teal);
}
.topic-ref.tr-doc {
--tr-tone: var(--label-bronze);
}
.topic-ref.tr-risk {
--tr-tone: var(--status-risk);
}
.topic-ref.tr-proto {
--tr-tone: var(--label-violet);
}
.topic-origin {
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
border: 1px solid #0000;
border-radius: 5px;
align-items: center;
gap: 4px;
padding: 2px 7px;
font-size: 9px;
display: inline-flex;
}
.topic-origin .ico {
width: 11px;
height: 11px;
}
.topic-origin.o-aufgabe {
color: var(--mod-deep);
background: var(--mod-soft);
border-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.topic-origin.o-aufgabe {
border-color: color-mix(in srgb,var(--mod) 26%,transparent);
}
}
.topic-origin.o-carry {
color: var(--ink-3);
background: var(--paper-2);
border-color: var(--rule);
}
.topic-origin.o-zuruf {
color: var(--label-violet);
background: #edeaf4;
}
@supports (color: color-mix(in lab, red, red)) {
.topic-origin.o-zuruf {
background: color-mix(in srgb,var(--label-violet) 12%,white);
}
}
.topic-origin.o-zuruf {
border-color: #6b50a04d;
}
@supports (color: color-mix(in lab, red, red)) {
.topic-origin.o-zuruf {
border-color: color-mix(in srgb,var(--label-violet) 30%,transparent);
}
}
.topic-origin.o-vorfeld {
color: var(--status-info);
background: #e9eff7;
}
@supports (color: color-mix(in lab, red, red)) {
.topic-origin.o-vorfeld {
background: color-mix(in srgb,var(--status-info) 10%,white);
}
}
.topic-origin.o-vorfeld {
border-color: #1e5cb047;
}
@supports (color: color-mix(in lab, red, red)) {
.topic-origin.o-vorfeld {
border-color: color-mix(in srgb,var(--status-info) 28%,transparent);
}
}
.comp-src {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--white);
background: var(--cs-tone, var(--ink-4));
border-radius: 4px;
flex-shrink: 0;
padding: 2px 6px;
font-size: 8.5px;
font-weight: 700;
}
.comp-src.is-ad {
--cs-tone: var(--label-azure);
}
.comp-src.is-hr {
--cs-tone: var(--label-teal);
}
.comp-src.is-manual {
--cs-tone: var(--ink-4);
}
.ai-orb {
background: radial-gradient(circle at 32% 28%, var(--ai-bright), var(--ai));
color: var(--white);
}
.chat {
flex-direction: column;
gap: 16px;
display: flex;
}
.chat-msg {
gap: 11px;
max-width: 760px;
display: flex;
}
.chat-msg.is-me {
flex-direction: row-reverse;
align-self: flex-end;
}
.chat-av {
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
font-size: 14px;
display: flex;
}
.chat-av.is-ai {
background: radial-gradient(circle at 32% 28%, var(--ai-bright), var(--ai));
color: var(--white);
}
.chat-av.is-me {
background: var(--mod);
color: var(--white);
font-size: 11px;
font-weight: 600;
}
.chat-who {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 5px;
font-size: 9px;
}
.chat-bubble {
background: var(--white);
border: 1px solid var(--rule);
color: var(--ink-2);
border-radius: 4px 12px 12px;
padding: 12px 15px;
font-size: 13.5px;
line-height: 1.55;
}
.chat-bubble p + p {
margin-top: 8px;
}
.chat-msg.is-me .chat-bubble {
background: var(--mod-soft);
border-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.chat-msg.is-me .chat-bubble {
border-color: color-mix(in srgb, var(--mod) 22%, var(--rule));
}
}
.chat-msg.is-me .chat-bubble {
color: var(--mod-deep);
border-radius: 12px 4px 12px 12px;
}
.actcard {
border: 1px solid #cbc3e0;
margin-top: 11px;
}
@supports (color: color-mix(in lab, red, red)) {
.actcard {
border: 1px solid color-mix(in srgb, var(--ai) 26%, var(--rule));
}
}
.actcard {
border-radius: var(--r-md);
overflow: hidden;
}
.actcard-hd {
background: var(--ai-soft);
font-size: 11px;
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ai-deep);
align-items: center;
gap: 6px;
padding: 8px 12px;
display: flex;
}
.actcard-bd {
padding: 11px 13px;
}
.actcard-row {
align-items: center;
gap: 10px;
padding: 6px 0;
display: flex;
}
.actcard-row .nm {
flex: 1;
font-size: 13px;
font-weight: 500;
}
.actcard-ft {
border-top: 1px solid var(--rule-soft);
background: var(--paper);
align-items: center;
gap: 8px;
padding: 10px 13px;
display: flex;
}
.actcard-ft .hint {
color: var(--ink-4);
align-items: center;
gap: 6px;
font-size: 11px;
display: flex;
}
.ki-badge {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ai-deep);
background: var(--ai-soft);
border-radius: 99px;
padding: 1px 7px;
font-size: 9px;
font-weight: 700;
}
.prompt-chips {
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
display: flex;
}
.prompt-chip {
font: inherit;
color: var(--ai-deep);
background: var(--ai-soft);
border: 1px solid #6d5ae038;
font-size: 12px;
}
@supports (color: color-mix(in lab, red, red)) {
.prompt-chip {
border: 1px solid color-mix(in srgb, var(--ai) 22%, transparent);
}
}
.prompt-chip {
cursor: pointer;
border-radius: 99px;
padding: 5px 12px;
}
.prompt-chip:hover {
background: #ebe8fb;
}
@supports (color: color-mix(in lab, red, red)) {
.prompt-chip:hover {
background: color-mix(in srgb, var(--ai) 14%, var(--white));
}
}
.composer {
align-items: flex-end;
gap: 10px;
display: flex;
}
.composer-input {
resize: none;
border: 1px solid var(--rule);
border-radius: var(--r-md);
font-family: var(--font);
color: var(--ink);
flex: 1;
min-height: 44px;
max-height: 160px;
padding: 11px 13px;
font-size: 13.5px;
}
.composer-input:focus {
border-color: var(--ai);
box-shadow: 0 0 0 3px var(--ai-soft);
outline: none;
}
.composer-send {
border-radius: var(--r-md);
background: var(--ai);
height: 44px;
color: var(--white);
cursor: pointer;
border: none;
flex-shrink: 0;
align-items: center;
gap: 7px;
padding: 0 18px;
font-size: 13.5px;
font-weight: 500;
display: flex;
}
.composer-send:hover {
background: var(--ai-deep);
}
.composer.is-discussion {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
align-items: center;
gap: 8px;
padding: 6px 6px 6px 8px;
}
.composer.is-discussion:focus-within {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod-soft);
}
.composer.is-discussion .composer-me {
flex-shrink: 0;
}
.composer.is-discussion .composer-input {
background: none;
border: none;
border-radius: 0;
min-height: 0;
padding: 5px 3px;
}
.composer.is-discussion .composer-input:focus {
box-shadow: none;
border: none;
outline: none;
}
.composer.is-discussion .composer-send {
background: var(--mod);
width: 28px;
height: 28px;
color: var(--white);
cursor: pointer;
border: none;
border-radius: 50%;
flex: 0 0 28px;
justify-content: center;
align-items: center;
padding: 0;
display: flex;
}
.composer.is-discussion .composer-send:hover {
background: var(--mod-deep);
}
.composer.is-discussion.is-compact {
padding: 4px 4px 4px 7px;
}
.composer.is-discussion.is-compact .composer-send {
flex-basis: 26px;
width: 26px;
height: 26px;
}
.mn {
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: var(--r-sm);
white-space: pre-wrap;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
margin: 0 -2px;
padding: 1px 2px;
font-weight: 500;
display: inline;
}
.mn-field {
flex: 1;
min-width: 0;
position: relative;
}
.mn-mirror, .mn-field .composer-input {
font-family: var(--font);
white-space: pre-wrap;
overflow-wrap: break-word;
padding: 5px 3px;
font-size: 13.5px;
line-height: 1.5;
}
.mn-mirror {
pointer-events: none;
color: var(--ink);
position: absolute;
inset: 0;
overflow: hidden;
}
.mn-field .composer-input {
color: #0000;
width: 100%;
caret-color: var(--ink);
-webkit-text-fill-color: transparent;
background: none;
display: block;
position: relative;
}
.mn-field .composer-input::selection {
color: var(--ink);
-webkit-text-fill-color: var(--ink);
background: var(--mod-soft);
}
.mn-field .composer-input::placeholder {
color: var(--ink-4);
-webkit-text-fill-color: var(--ink-4);
}
.mn.is-armed {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
box-shadow: 0 0 0 1px var(--status-risk);
}
.quick-replies {
flex-direction: column;
align-items: flex-start;
gap: 7px;
margin: 8px 0 0 41px;
display: flex;
}
.quick-replies .qr-label {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ai-deep);
align-items: center;
gap: 5px;
font-size: 9px;
display: flex;
}
.quick-replies .qr-label:before {
content: "";
background: var(--ai);
border-radius: 50%;
flex-shrink: 0;
width: 5px;
height: 5px;
}
.quick-replies .qr-row {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.qr-btn {
font: inherit;
background: var(--white);
color: var(--ai-deep);
border: 1.5px solid #c3bbe0;
font-size: 13px;
font-weight: 600;
}
@supports (color: color-mix(in lab, red, red)) {
.qr-btn {
border: 1.5px solid color-mix(in srgb, var(--ai) 32%, var(--rule));
}
}
.qr-btn {
cursor: pointer;
border-radius: 999px;
padding: 8px 16px;
}
.qr-btn:hover {
background: var(--ai-tint);
border-color: var(--ai);
}
.qr-btn:disabled {
opacity: .45;
cursor: default;
background: var(--white);
border-color: var(--rule);
color: var(--ink-3);
}
.chat-range {
background: var(--ai-tint);
border: 1px solid #d0c9e0;
max-width: 340px;
margin: 8px 0 0 41px;
}
@supports (color: color-mix(in lab, red, red)) {
.chat-range {
border: 1px solid color-mix(in srgb, var(--ai) 22%, var(--rule));
}
}
.chat-range {
border-radius: var(--r-lg);
padding: 14px 16px;
}
.chat-range .cr-label {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ai-deep);
align-items: center;
gap: 5px;
margin-bottom: 10px;
font-size: 9px;
display: flex;
}
.chat-range .cr-label:before {
content: "";
background: var(--ai);
border-radius: 50%;
flex-shrink: 0;
width: 5px;
height: 5px;
}
.chat-range .cr-row {
align-items: center;
gap: 12px;
display: flex;
}
.chat-range input[type="range"] {
accent-color: var(--ai);
flex: 1;
}
.chat-range .cr-value {
font-family: var(--mono);
color: var(--ai-deep);
text-align: right;
min-width: 64px;
font-size: 13px;
font-weight: 700;
}
.chat-range .cr-confirm {
width: 100%;
font: inherit;
background: var(--ai);
color: var(--white);
border-radius: var(--r-md);
cursor: pointer;
border: none;
margin-top: 12px;
padding: 9px 14px;
font-size: 13px;
font-weight: 600;
}
.chat-range .cr-confirm:hover {
background: var(--ai-deep);
}
.chat-range.is-done {
opacity: .5;
pointer-events: none;
}
.threadrail {
flex-direction: column;
min-height: 0;
display: flex;
}
.thread {
border-radius: var(--r-sm);
cursor: pointer;
color: inherit;
align-items: center;
gap: 10px;
padding: 9px 10px;
text-decoration: none;
display: flex;
}
.thread:hover {
background: var(--paper);
}
.thread.is-on {
background: var(--ai-soft);
}
.thread.is-on .nm {
color: var(--ai-deep);
}
.thread .dot {
border-radius: 50%;
flex-shrink: 0;
width: 9px;
height: 9px;
}
.thread .nm {
color: var(--ink);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.thread .sb {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 2px;
font-size: 10px;
}
.subtask {
border-top: 1px solid var(--rule-soft);
align-items: center;
gap: 10px;
padding: 8px 0;
display: flex;
}
.subtask:first-of-type {
border-top: none;
}
.subtask.is-done .subtask-title {
color: var(--ink-4);
text-decoration: line-through;
}
.subtask-check {
flex-shrink: 0;
justify-content: flex-start;
align-items: center;
min-width: 30px;
display: flex;
}
.subtask-box {
border: 1.5px solid var(--rule);
background: var(--white);
color: #0000;
cursor: pointer;
border-radius: 5px;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
display: flex;
}
.subtask-box.is-on {
background: var(--mod);
border-color: var(--mod);
color: var(--white);
}
.subtask-slider {
align-items: center;
gap: 8px;
display: inline-flex;
}
.subtask-slider input[type="range"] {
width: 92px;
height: 14px;
accent-color: var(--mod);
cursor: pointer;
margin: 0;
}
.subtask-slider-v {
font-family: var(--mono);
color: var(--mod-deep);
text-align: right;
min-width: 36px;
font-size: 10px;
}
.subtask-count {
font-family: var(--mono);
color: var(--mod-deep);
font-size: 11px;
font-weight: 600;
}
.subtask-body {
flex: 1;
min-width: 0;
}
.subtask-title {
color: var(--ink-2);
min-width: 0;
font-size: 12.5px;
overflow: hidden;
}
.subtask-meta {
font-family: var(--mono);
color: var(--ink-4);
flex-shrink: 0;
align-items: center;
gap: 8px;
margin-top: 2px;
font-size: 10px;
display: flex;
}
.subtask-due {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.subtask-due.is-over {
color: var(--status-risk-deep);
font-weight: 600;
}
.subtask-msg {
cursor: pointer;
font-family: var(--mono);
color: var(--ink-4);
background: none;
border: none;
flex-shrink: 0;
align-items: center;
gap: 3px;
padding: 0;
font-size: 10px;
display: inline-flex;
}
.subtask-msg .ico {
width: 11px;
height: 11px;
}
.subtask-msg:hover {
color: var(--ink-2);
}
.subtask-msg.is-unread {
color: var(--mod-deep);
font-weight: 600;
}
.subtask-grip {
color: var(--ink-4);
cursor: grab;
opacity: .4;
flex-shrink: 0;
align-items: center;
transition: opacity .12s, color .12s;
display: none;
}
.subtask-grip:active {
cursor: grabbing;
}
.is-editing .subtask:hover .subtask-grip {
opacity: 1;
color: var(--ink-3);
}
.is-editing .subtask-grip, .is-editing .subtask-del {
display: inline-flex;
}
.subtask-del {
cursor: pointer;
color: var(--ink-4);
background: none;
border: none;
flex-shrink: 0;
margin-left: auto;
padding: 3px;
display: none;
}
.subtask-del:hover {
color: var(--status-risk-deep);
}
.subtask.dragging {
opacity: .45;
}
.subtask-edit {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-direction: column;
gap: 10px;
margin: 0 0 10px 28px;
padding: 11px 13px;
display: flex;
}
.subtask-edit-row {
justify-content: space-between;
align-items: center;
gap: 10px;
display: flex;
}
.subtask-edit-row.stack {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.subtask-edit-lbl {
font-size: 10px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--ink-4);
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.subtask-edit-lbl b {
color: var(--mod-deep);
font-family: var(--font);
font-size: 11px;
font-weight: 600;
}
.subtask-ring {
font-family: var(--mono);
color: var(--ink-3);
align-items: center;
gap: 8px;
font-size: 11px;
display: inline-flex;
}
.subtask-ring .ring {
background: conic-gradient(var(--mod) calc(var(--p, 0)*1%), var(--rule) 0);
border-radius: 50%;
flex-shrink: 0;
width: 20px;
height: 20px;
}
.subtask.is-deleted {
opacity: .55;
}
.subtask.is-deleted .subtask-title {
color: var(--ink-4);
text-decoration: line-through;
}
.subtask-deleted-tag {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
border: 1px solid var(--rule);
border-radius: 99px;
padding: 0 5px;
font-size: 8.5px;
}
.subtask-restore {
cursor: pointer;
font-family: var(--mono);
color: var(--mod-deep);
background: none;
border: none;
padding: 0;
font-size: 10px;
}
.subtask-restore:hover {
text-decoration: underline;
}
.subtask-warn {
border-radius: var(--r-md);
background: var(--status-warn-soft);
border: 1px solid #efe5ce;
align-items: flex-start;
gap: 8px;
margin-top: 9px;
padding: 9px 11px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.subtask-warn {
border: 1px solid color-mix(in srgb, var(--status-warn) 30%, var(--white));
}
}
.subtask-warn {
color: var(--status-warn-deep);
font-size: 12px;
line-height: 1.45;
}
.subtask-warn > .ico {
flex-shrink: 0;
margin-top: 1px;
font-size: 14px;
}
.subtask-add {
align-items: center;
gap: 7px;
margin-top: 9px;
display: flex;
}
.subtask-add .flt {
flex: 1;
}
.subtask-add.is-ghost {
color: var(--ink-4);
cursor: text;
border-top: 1px solid var(--rule-soft);
margin-top: 4px;
padding: 7px 0 7px 28px;
}
.subtask-add.is-ghost .subtask-add-glyph {
color: var(--ink-4);
align-items: center;
gap: 8px;
font-size: 12.5px;
display: inline-flex;
}
.subtask-add.is-ghost:hover .subtask-add-glyph {
color: var(--mod-deep);
}
.subtask-add.is-ghost .subtask-add-glyph .ico {
opacity: .7;
width: 14px;
height: 14px;
}
.callout {
--cc: var(--status-info);
border: 1px solid var(--cc);
align-items: flex-start;
gap: 11px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.callout {
border: 1px solid color-mix(in srgb, var(--cc) 30%, var(--white));
}
}
.callout {
background: var(--cc);
}
@supports (color: color-mix(in lab, red, red)) {
.callout {
background: color-mix(in srgb, var(--cc) 9%, var(--white));
}
}
.callout {
border-radius: var(--r-md);
padding: 12px 13px;
}
.callout.is-active {
border-color: var(--cc);
box-shadow: 0 0 0 3px var(--cc);
}
@supports (color: color-mix(in lab, red, red)) {
.callout.is-active {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 16%, transparent);
}
}
.callout .co-tx {
flex: 1;
min-width: 0;
}
.callout .co-h {
color: var(--cc);
font-size: 12.5px;
font-weight: 600;
}
@supports (color: color-mix(in lab, red, red)) {
.callout .co-h {
color: color-mix(in srgb, var(--cc) 72%, black);
}
}
.callout .co-h {
align-items: center;
gap: 6px;
display: flex;
}
.callout .co-d {
color: var(--cc);
font-size: 11.5px;
}
@supports (color: color-mix(in lab, red, red)) {
.callout .co-d {
color: color-mix(in srgb, var(--cc) 80%, black);
}
}
.callout .co-d {
margin-top: 3px;
line-height: 1.5;
}
.callout.is-ai {
--cc: var(--ai);
}
.callout.is-ai .co-h, .callout.is-ai .co-d {
color: var(--ai-deep);
}
.callout.is-warn {
--cc: var(--status-warn);
}
.callout.is-risk {
--cc: var(--status-risk);
}
.callout.is-ok {
--cc: var(--status-ok);
}
.callout.is-compact {
align-items: center;
padding: 8px 12px;
}
.callout.is-compact .co-tx {
flex-wrap: wrap;
align-items: baseline;
gap: 7px;
min-width: 0;
display: flex;
}
.callout.is-compact .co-h {
white-space: nowrap;
}
.callout.is-compact .co-d {
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 0;
font-size: 11px;
overflow: hidden;
}
.callout.is-mod {
--cc: var(--mod);
}
.timeline {
flex-direction: column;
display: flex;
}
.tl-item {
--tc: var(--ink-4);
gap: 10px;
padding: 7px 0;
display: flex;
position: relative;
}
.tl-item:not(:last-child):before {
content: "";
background: var(--rule);
width: 1px;
position: absolute;
top: 17px;
bottom: -7px;
left: 4px;
}
.tl-dot {
z-index: 1;
background: var(--tc);
width: 9px;
height: 9px;
box-shadow: 0 0 0 2px var(--white);
border-radius: 99px;
flex-shrink: 0;
margin-top: 4px;
position: relative;
}
.tl-body {
flex: 1;
min-width: 0;
}
.tl-top {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.tl-text {
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.45;
}
.tl-meta {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 2px;
font-size: 9.5px;
}
.tl-meta .rel {
opacity: .62;
}
.tl-more {
font-family: var(--mono);
color: var(--mod-deep);
cursor: pointer;
padding: 7px 0 2px 19px;
font-size: 10.5px;
display: inline-block;
}
.tl-more:hover {
text-decoration: underline;
}
.tl-create {
--tc: var(--status-info);
}
.tl-edit {
--tc: var(--ink-3);
}
.tl-archive {
--tc: var(--status-risk);
}
.tl-restore {
--tc: var(--status-ok);
}
.tl-nis2 {
--tc: var(--ai-deep);
}
.tl-review {
--tc: var(--status-ok);
}
.stepper {
align-items: center;
gap: 0;
display: flex;
}
.step {
color: var(--step-todo);
white-space: nowrap;
align-items: center;
gap: 9px;
display: flex;
}
.step-num {
border: 1.5px solid;
border-radius: 99px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 26px;
height: 26px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.step-label {
font-size: 13px;
font-weight: 500;
}
.step-link {
background: var(--step-rail);
flex: 1;
min-width: 24px;
height: 1px;
margin: 0 14px;
}
.step.is-current {
color: var(--step-current);
}
.step.is-current .step-num {
border-color: var(--step-current);
box-shadow: 0 0 0 3px var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.step.is-current .step-num {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--mod) 18%, transparent);
}
}
.step.is-done {
color: var(--step-done);
}
.step.is-done .step-num {
background: var(--step-done);
border-color: var(--step-done);
color: var(--white);
}
.step.is-done + .step-link {
background: var(--step-rail-done);
}
.sidenav {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-shrink: 0;
width: 232px;
overflow: hidden;
}
.sidenav.is-sticky {
position: sticky;
top: 14px;
}
.detail-layout {
align-items: flex-start;
gap: 20px;
display: flex;
}
.detail-main {
flex: 1;
min-width: 0;
}
.sidenav-title {
font-family: var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-4);
padding: 11px 14px 6px;
font-size: 9px;
}
.sidenav-group {
padding: 0 6px 8px;
}
.sidenav-group-label {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 8px 8px 4px;
font-size: 9px;
}
.sidenav-item {
border-radius: var(--r-sm);
color: var(--ink-2);
cursor: pointer;
text-align: left;
width: 100%;
font-size: 12.5px;
font-family: var(--font);
background: none;
border: none;
align-items: center;
gap: 8px;
padding: 7px 9px;
text-decoration: none;
display: flex;
}
.sidenav-item:hover {
background: var(--paper);
color: var(--ink);
}
.sidenav-item.is-active {
background: var(--mod-soft);
color: var(--mod-deep);
border-left: 2px solid var(--mod);
padding-left: 9px;
font-weight: 500;
}
.sidenav-item .sn-ic {
opacity: .7;
flex-shrink: 0;
width: 15px;
height: 15px;
}
.sidenav-item.is-active .sn-ic {
opacity: 1;
}
.sidenav-item .sn-dot {
background: var(--ink-4);
border-radius: 2px;
flex-shrink: 0;
width: 7px;
height: 7px;
}
.sidenav-item.is-active .sn-dot {
background: var(--mod);
}
.sidenav-badge {
font-family: var(--mono);
background: var(--paper-2);
color: var(--ink-4);
text-align: center;
border-radius: 9px;
min-width: 16px;
margin-left: auto;
padding: 1px 6px;
font-size: 10px;
}
.sidenav-item.is-active .sidenav-badge {
background: var(--mod);
color: var(--white);
}
.sidenav-soon {
font-family: var(--mono);
letter-spacing: .03em;
color: var(--ink-4);
border: 1px solid var(--rule);
border-radius: 99px;
margin-left: auto;
padding: 1px 6px;
font-size: 8.5px;
}
.sidenav-item.is-disabled {
color: var(--ink-4);
cursor: default;
}
.sidenav-item.is-disabled:hover {
background: none;
}
.sidenav-divider {
background: var(--rule-soft);
height: 1px;
margin: 4px 8px;
}
.sidenav-note {
color: var(--ink-4);
border-top: 1px solid var(--rule-soft);
padding: 10px 12px;
font-size: 11px;
line-height: 1.5;
}
.sidenav-note b {
color: var(--ink-3);
}
.fs {
z-index: var(--z-overlay, 901);
background: var(--paper);
flex-direction: column;
display: flex;
position: fixed;
inset: 0;
}
.fs-top {
background: var(--white);
border-bottom: 1px solid var(--rule);
flex-shrink: 0;
align-items: center;
gap: 12px;
height: 54px;
padding: 0 18px;
display: flex;
}
.fs-top.is-tall {
align-items: flex-start;
height: auto;
min-height: 54px;
padding-top: 10px;
padding-bottom: 10px;
}
.fs-body {
flex: 1;
padding: 20px;
overflow: auto;
}
.fs-wrap {
align-items: start;
gap: 20px;
max-width: 960px;
margin: 0 auto;
display: flex;
}
.code-inline {
font-family: var(--mono);
color: var(--ink);
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 1px 5px;
font-size: .92em;
}
.ed-tasklist {
margin: 0;
padding-left: 2px;
list-style: none;
}
.ed-tasklist li {
align-items: flex-start;
gap: 8px;
display: flex;
}
.ed-tasklist input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--mod, var(--brand-primary));
flex: none;
margin-top: 3px;
}
.ed-tasklist li[data-checked="true"] > div {
color: var(--ink-4);
text-decoration: line-through;
}
.wk-prose {
color: var(--ink-2);
text-wrap: pretty;
max-width: 72ch;
font-size: 15px;
line-height: 1.72;
}
.wk-prose > * + * {
margin-top: 12px;
}
.wk-prose h1 {
letter-spacing: -.02em;
color: var(--ink);
margin-top: 34px;
margin-bottom: -2px;
font-size: 24px;
font-weight: 680;
line-height: 1.25;
}
.wk-prose h2 {
letter-spacing: -.015em;
color: var(--ink);
margin-top: 30px;
margin-bottom: -2px;
font-size: 19px;
font-weight: 660;
line-height: 1.3;
}
.wk-prose h3 {
color: var(--ink);
margin-top: 24px;
margin-bottom: -4px;
font-size: 16px;
font-weight: 640;
line-height: 1.35;
}
.wk-prose > :first-child {
margin-top: 0;
}
.wk-prose ul, .wk-prose ol {
flex-direction: column;
gap: 5px;
padding-left: 22px;
display: flex;
}
.wk-prose li::marker {
color: var(--ink-4);
}
.wk-prose li > ul, .wk-prose li > ol {
margin-top: 5px;
}
.wk-prose blockquote {
border-left: 2px solid var(--rule);
color: var(--ink-3);
padding-left: 14px;
}
.wk-prose hr {
border: 0;
border-top: 1px solid var(--rule);
margin-top: 26px;
margin-bottom: 26px;
}
.wk-prose a {
color: var(--mod-deep);
text-underline-offset: 2px;
text-decoration: underline;
-webkit-text-decoration-color: var(--mod);
text-decoration-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.wk-prose a {
-webkit-text-decoration-color: color-mix(in srgb,var(--mod) 40%,transparent);
text-decoration-color: color-mix(in srgb,var(--mod) 40%,transparent);
}
}
.wk-prose a:hover {
color: var(--mod);
text-decoration-color: currentColor;
}
.wk-prose table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
}
.wk-prose th, .wk-prose td {
border: 1px solid var(--rule);
text-align: left;
vertical-align: top;
padding: 7px 10px;
}
.wk-prose th {
background: var(--paper);
color: var(--ink);
font-weight: 600;
}
.wk-prose ::selection {
background: var(--mod-soft);
}
.wk-prose .is-empty:before {
content: attr(data-placeholder);
float: left;
pointer-events: none;
height: 0;
color: var(--ink-4);
}
.blockgutter {
opacity: 0;
align-items: center;
gap: 1px;
transition: opacity .12s;
display: flex;
position: absolute;
}
.blockgutter.is-shown {
opacity: 1;
}
.blockgutter button {
border-radius: var(--r-sm);
width: 22px;
height: 22px;
color: var(--ink-4);
cursor: grab;
background: none;
border: 0;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
}
.blockgutter button:hover {
background: var(--paper);
color: var(--ink-2);
}
.blockgutter button svg {
width: 14px;
height: 14px;
}
.savestate {
font-family: var(--mono);
color: var(--ink-4);
align-items: center;
gap: 6px;
font-size: 11px;
display: inline-flex;
}
.savestate .ss-dot {
background: var(--ink-4);
border-radius: 50%;
width: 6px;
height: 6px;
}
.savestate.is-dirty .ss-dot {
background: var(--status-warn);
}
.savestate.is-saved .ss-dot {
background: var(--status-ok);
}
.savestate.is-error {
color: var(--status-risk);
}
.savestate.is-error .ss-dot {
background: var(--status-risk);
}
.savestate.is-draft .ss-dot {
border: 1.5px solid var(--ink-4);
background: none;
}
.gridpick {
flex-direction: column;
gap: 7px;
display: flex;
}
.gridpick-g {
grid-template-columns: repeat(var(--cols, 8), 17px);
gap: 3px;
display: grid;
}
.gridpick-g i {
border: 1px solid var(--rule);
background: var(--white);
cursor: pointer;
border-radius: 3px;
width: 17px;
height: 17px;
font-style: normal;
display: block;
}
.gridpick-g i.is-on {
border-color: var(--mod, var(--brand-primary));
background: var(--mod-soft);
}
.gridpick-lbl {
font-family: var(--mono);
color: var(--ink-3);
text-align: center;
font-size: 11px;
}
.gridpick-more {
color: var(--ink-4);
cursor: pointer;
text-align: left;
background: none;
border: 0;
padding: 2px;
font-size: 12px;
}
.gridpick-more:hover {
color: var(--mod-deep);
}
.wk-prose .column-resize-handle {
cursor: col-resize;
z-index: 2;
background: none;
width: 4px;
position: absolute;
top: 0;
bottom: 0;
right: -2px;
}
.wk-prose .column-resize-handle:after {
content: "";
background: none;
border-radius: 2px;
transition: background .12s;
position: absolute;
inset: 0 1px;
}
.wk-prose .column-resize-handle:hover:after {
background: var(--rule);
}
.wk-prose.resize-cursor .column-resize-handle:after, .wk-prose .column-resize-dragging .column-resize-handle:after {
background: var(--mod, var(--brand-primary));
}
.wk-prose table {
table-layout: fixed;
}
.wk-prose td, .wk-prose th {
position: relative;
}
.wk-prose .selectedCell:after {
content: "";
background: var(--mod-soft);
opacity: .55;
pointer-events: none;
position: absolute;
inset: 0;
}
.wk-prose td[data-align="center"], .wk-prose th[data-align="center"] {
text-align: center;
}
.wk-prose td[data-align="right"], .wk-prose th[data-align="right"] {
text-align: right;
}
.wk-prose td[data-valign="middle"], .wk-prose th[data-valign="middle"] {
vertical-align: middle;
}
.wk-prose td[data-valign="bottom"], .wk-prose th[data-valign="bottom"] {
vertical-align: bottom;
}
.ed-popover {
z-index: var(--z-picker);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
box-shadow: var(--shadow-pop);
align-items: center;
gap: 2px;
padding: 4px 5px;
display: flex;
position: absolute;
}
.ed-popover.is-list {
flex-direction: column;
align-items: stretch;
gap: 1px;
min-width: 196px;
padding: 4px;
}
.ed-popover.is-list button {
border-radius: var(--r-sm);
width: 100%;
font: inherit;
color: var(--ink);
text-align: left;
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 9px;
padding: 7px 9px;
font-size: 13px;
display: flex;
}
.ed-popover.is-list button:hover {
background: var(--mod-soft);
color: var(--mod-deep);
}
.ed-popover .sep {
background: var(--rule);
align-self: stretch;
width: 1px;
margin: 2px 5px;
}
.callout-tools {
background: var(--white);
border: 1px solid var(--rule);
box-shadow: var(--shadow-card);
border-radius: 99px;
align-items: center;
gap: 4px;
padding: 3px 5px;
display: none;
position: absolute;
top: 6px;
right: 6px;
}
.callout:focus-within .callout-tools, .callout.is-focused .callout-tools {
display: flex;
}
.callout-tools button {
border: 1px solid var(--rule);
background: var(--cc-soft, var(--paper));
cursor: pointer;
border-radius: 50%;
width: 16px;
height: 16px;
padding: 0;
}
.callout-tools button:hover {
border-color: var(--ink-4);
}
.callout-tools button.is-active {
border-color: var(--ink-2);
box-shadow: 0 0 0 2px var(--white) inset;
}
.callout .co-title-input {
width: 100%;
font: inherit;
color: var(--ink);
background: none;
border: none;
padding: 0;
font-size: 13px;
font-weight: 600;
}
.callout .co-title-input:focus {
outline: none;
}
.callout .co-title-input::placeholder {
color: var(--ink-4);
font-weight: 500;
}
.wk-figure {
flex-direction: column;
align-items: center;
gap: 7px;
margin: 16px 0;
display: flex;
}
.wk-figure img {
border-radius: var(--r-md);
max-width: 100%;
height: auto;
display: block;
}
.wk-figure figcaption {
color: var(--ink-4);
text-align: center;
min-height: 1.2em;
font-size: 11.5px;
line-height: 1.45;
}
.wk-figure figcaption:empty:before {
content: "Bildunterschrift";
color: var(--ink-4);
opacity: .6;
}
.wk-upload-slot {
border: 1px dashed var(--rule);
border-radius: var(--r-md);
background: var(--paper);
min-height: 96px;
color: var(--ink-4);
justify-content: center;
align-items: center;
gap: 9px;
margin: 16px 0;
font-size: 12px;
display: flex;
}
.ed-popover .tt-group {
align-items: center;
gap: 2px;
display: flex;
}
.ed-popover .tt-sep {
background: var(--rule);
align-self: stretch;
width: 1px;
margin: 2px 5px;
}
.ed-tb {
cursor: pointer;
width: 32px;
height: 30px;
color: var(--ink-3);
background: none;
border: 0;
border-radius: 5px;
justify-content: center;
align-items: center;
font-size: 13px;
display: flex;
}
.ed-tb:hover {
background: var(--paper);
color: var(--ink);
}
.ed-tb.is-on {
background: var(--mod-soft, var(--brand-primary-soft));
color: var(--mod-deep, var(--brand-primary-deep));
}
.ed-tb:disabled {
opacity: .4;
pointer-events: none;
}
.ed-tb b {
font-weight: 700;
}
.ed-tb i {
font-style: italic;
}
.ed-tb-sep {
background: #9a938857;
flex: none;
width: 1px;
height: 16px;
margin: 0 8px;
}
@supports (color: color-mix(in lab, red, red)) {
.ed-tb-sep {
background: color-mix(in srgb, var(--ink-4) 34%, transparent);
}
}
.wk-node.is-dropzone {
background: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.wk-node.is-dropzone {
background: color-mix(in srgb, var(--mod) 5%, var(--white));
}
}
.wk-node.is-dropzone {
outline: 1.5px dashed var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.wk-node.is-dropzone {
outline: 1.5px dashed color-mix(in srgb, var(--mod) 45%, var(--white));
}
}
.wk-node.is-dropzone {
outline-offset: -2px;
}
.wk-node.is-dragging {
opacity: .45;
}
.wk-droplin {
height: 0;
position: relative;
}
.wk-droplin:before {
content: "";
left: var(--wk-indent, 0px);
background: var(--mod, var(--brand-primary));
border-radius: 1px;
height: 2px;
position: absolute;
top: -1px;
right: 2px;
}
.wk-droplin:after {
content: "";
left: var(--wk-indent, 0px);
background: var(--mod, var(--brand-primary));
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute;
top: -3px;
}
.co-tone {
flex-shrink: 0;
align-items: center;
gap: 4px;
margin-left: auto;
display: none;
}
.callout.is-editing .co-tone, .callout:focus-within .co-tone {
display: flex;
}
.co-tone button {
cursor: pointer;
border: 1px solid #0000;
border-radius: 50%;
width: 15px;
height: 15px;
padding: 0;
}
.co-tone button[data-tone="info"] {
border-color: #9ab6db;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="info"] {
border-color: color-mix(in srgb, var(--status-info) 45%, var(--white));
}
}
.co-tone button[data-tone="info"] {
background: #cedbee;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="info"] {
background: color-mix(in srgb, var(--status-info) 22%, var(--white));
}
}
.co-tone button[data-tone="info"]:hover {
background: #a5bedf;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="info"]:hover {
background: color-mix(in srgb, var(--status-info) 40%, var(--white));
}
}
.co-tone button[data-tone="info"].is-on {
background: var(--status-info);
border-color: var(--status-info);
box-shadow: 0 0 0 2px #1e5cb038;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="info"].is-on {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-info) 22%, transparent);
}
}
.co-tone button[data-tone="ok"] {
border-color: #a1caaf;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="ok"] {
border-color: color-mix(in srgb, var(--status-ok) 45%, var(--white));
}
}
.co-tone button[data-tone="ok"] {
background: #d1e5d8;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="ok"] {
background: color-mix(in srgb, var(--status-ok) 22%, var(--white));
}
}
.co-tone button[data-tone="ok"]:hover {
background: #acd0b8;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="ok"]:hover {
background: color-mix(in srgb, var(--status-ok) 40%, var(--white));
}
}
.co-tone button[data-tone="ok"].is-on {
background: var(--status-ok);
border-color: var(--status-ok);
box-shadow: 0 0 0 2px #2f8a4d38;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="ok"].is-on {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-ok) 22%, transparent);
}
}
.co-tone button[data-tone="warn"] {
border-color: #e7d8b6;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="warn"] {
border-color: color-mix(in srgb, var(--status-warn) 45%, var(--white));
}
}
.co-tone button[data-tone="warn"] {
background: #f3ecdb;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="warn"] {
background: color-mix(in srgb, var(--status-warn) 22%, var(--white));
}
}
.co-tone button[data-tone="warn"]:hover {
background: #e9dcbe;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="warn"]:hover {
background: color-mix(in srgb, var(--status-warn) 40%, var(--white));
}
}
.co-tone button[data-tone="warn"].is-on {
background: var(--status-warn);
border-color: var(--status-warn);
box-shadow: 0 0 0 2px #c9a85c38;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="warn"].is-on {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-warn) 22%, transparent);
}
}
.co-tone button[data-tone="risk"] {
border-color: #e4b5a8;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="risk"] {
border-color: color-mix(in srgb, var(--status-risk) 45%, var(--white));
}
}
.co-tone button[data-tone="risk"] {
background: #f2dbd5;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="risk"] {
background: color-mix(in srgb, var(--status-risk) 22%, var(--white));
}
}
.co-tone button[data-tone="risk"]:hover {
background: #e7bdb2;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="risk"]:hover {
background: color-mix(in srgb, var(--status-risk) 40%, var(--white));
}
}
.co-tone button[data-tone="risk"].is-on {
background: var(--status-risk);
border-color: var(--status-risk);
box-shadow: 0 0 0 2px #c45a3e38;
}
@supports (color: color-mix(in lab, red, red)) {
.co-tone button[data-tone="risk"].is-on {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-risk) 22%, transparent);
}
}
.hovercard {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
width: 288px;
box-shadow: var(--shadow-pop);
z-index: var(--z-picker);
padding: 12px 13px;
}
.hovercard .hc-h {
align-items: flex-start;
gap: 9px;
display: flex;
}
.hovercard .hc-title {
color: var(--ink);
min-width: 0;
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
}
.hovercard .hc-scope {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--mod-deep, var(--brand-primary-deep));
background: var(--mod-soft, var(--brand-primary-soft));
border-radius: 99px;
flex-shrink: 0;
margin-left: auto;
padding: 2px 6px;
font-size: 9px;
}
.hovercard .hc-meta {
color: var(--ink-2);
grid-template-columns: auto 1fr;
gap: 3px 10px;
margin-top: 9px;
font-size: 11.5px;
display: grid;
}
.hovercard .hc-meta dt {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.hovercard .hc-foot {
border-top: 1px solid var(--rule);
font-family: var(--mono);
color: var(--ink-4);
align-items: center;
gap: 8px;
margin-top: 10px;
padding-top: 9px;
font-size: 10px;
display: flex;
}
.hovercard.is-missing .hc-title {
color: var(--ink-3);
}
.hovercard .hc-note {
color: var(--status-warn-deep, var(--status-warn));
margin-top: 8px;
font-size: 11.5px;
}
.hovercard .hc-thumb {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--paper);
aspect-ratio: 16 / 10;
justify-content: center;
align-items: center;
margin-top: 9px;
display: flex;
overflow: hidden;
}
.hovercard .hc-thumb img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.wk-prose a.wk-ref {
display: inline;
}
.wk-prose a.wk-ref .wr-i {
vertical-align: -1px;
width: 12px;
height: 12px;
color: var(--mod, var(--brand-primary));
opacity: .85;
margin-right: 3px;
display: inline-block;
}
.wk-prose a.wk-ref:hover .wr-i {
opacity: 1;
}
.wk-prose a.wk-ref.is-missing {
color: var(--ink-3);
text-decoration-style: dotted;
}
.wk-prose .wk-mention {
color: var(--mod-deep, var(--brand-primary-deep));
background: var(--mod-soft, var(--brand-primary-soft));
white-space: nowrap;
cursor: default;
border-radius: 4px;
padding: 0 4px;
font-weight: 530;
}
.wk-prose .wk-mention:hover {
background: var(--mod, #0080c8);
}
@supports (color: color-mix(in lab, red, red)) {
.wk-prose .wk-mention:hover {
background: color-mix(in srgb, var(--mod, var(--brand-primary)) 22%, var(--white));
}
}
.wk-prose .wk-mention.is-inactive {
color: var(--ink-3);
background: var(--paper);
}
.wk-prose .wk-date {
font-family: var(--mono);
color: var(--ink-2);
border-bottom: 1px dotted var(--ink-4);
cursor: pointer;
font-size: .94em;
}
.wk-prose .wk-date:hover {
color: var(--mod-deep, var(--brand-primary-deep));
border-bottom-color: var(--mod);
}
.wk-prose table.is-zebra tbody tr:nth-child(2n) td {
background: #faf8f5;
}
@supports (color: color-mix(in lab, red, red)) {
.wk-prose table.is-zebra tbody tr:nth-child(2n) td {
background: color-mix(in srgb, var(--paper) 60%, var(--white));
}
}
.wk-tbl-cap {
color: var(--ink-3);
margin-top: 6px;
font-size: 12px;
}
.wk-tbl-cap:empty:before {
content: attr(data-placeholder);
color: var(--ink-4);
}
.req-star {
color: var(--status-risk);
}
.inp {
width: 100%;
font: inherit;
font-family: var(--font);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
color: var(--ink);
padding: 8px 11px;
font-size: 13px;
}
.inp:focus {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod-soft);
outline: none;
}
.inp.is-invalid {
border-color: var(--status-risk);
box-shadow: 0 0 0 3px var(--status-risk-soft);
}
textarea.inp {
resize: vertical;
}
.grid2 {
grid-template-columns: 1fr 1fr;
gap: 12px;
display: grid;
}
.overview {
grid-template-columns: 1fr 320px;
align-items: start;
gap: 20px;
display: grid;
}
.overview-main {
flex-direction: column;
gap: 22px;
min-width: 0;
display: flex;
}
.overview-rail {
flex-direction: column;
gap: 16px;
display: flex;
}
.overview-rail.is-sticky {
position: sticky;
top: 14px;
}
.ov-sec-head {
align-items: center;
gap: 10px;
margin-bottom: 11px;
display: flex;
}
.ov-sec-head .h {
color: var(--ink);
font-size: 14px;
font-weight: 600;
}
.ov-sec-head .c {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.ov-sec-head .more {
color: var(--mod-deep);
margin-left: auto;
font-size: 12px;
font-weight: 500;
text-decoration: none;
}
.ov-sec-head .more:hover {
text-decoration: underline;
}
.ov-row {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: inherit;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 13px;
padding: 11px 14px;
text-decoration: none;
display: grid;
}
.ov-row + .ov-row {
margin-top: 7px;
}
.ov-row:hover {
border-color: var(--ink-4);
}
.ov-row .pdot {
border-radius: 50%;
flex-shrink: 0;
width: 9px;
height: 9px;
}
.ov-row .nm {
color: var(--ink);
letter-spacing: -.005em;
font-size: 13.5px;
font-weight: 600;
}
.ov-row .rw {
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin-top: 6px;
display: flex;
}
.ov-row .m {
font-family: var(--mono);
color: var(--ink-4);
align-items: center;
gap: 4px;
font-size: 10px;
display: inline-flex;
}
.ov-row .m.is-due {
color: var(--status-risk-deep);
}
.ov-row .rt {
flex-shrink: 0;
align-items: center;
gap: 13px;
display: flex;
}
.ov-row.is-sub {
border-left: 2px solid var(--mod);
padding-left: 16px;
}
.ov-row.is-sub .nm {
font-weight: 500;
}
.ov-row .sub-arrow {
width: 18px;
color: var(--ink-4);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.ov-row .sub-arrow svg {
width: 13px;
height: 13px;
}
.ov-origin {
color: var(--ink-4);
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 5px;
font-size: 11.5px;
display: flex;
}
.ov-origin .p {
color: var(--ink-3);
}
.ov-origin b {
color: var(--ink-2);
font-weight: 600;
}
.ov-origin .sep {
color: var(--ink-4);
}
.ov-origin.is-tight {
flex-wrap: nowrap;
gap: 5px;
min-width: 0;
margin-top: 3px;
font-size: 11px;
}
.ov-origin.is-tight .p {
display: none;
}
.ov-origin.is-tight b {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.ov-origin.is-tight b:first-of-type {
flex: 0 auto;
}
.ov-origin.is-tight b:last-of-type:not(:first-of-type) {
flex: none;
max-width: 52%;
}
.ov-row:has(.ov-origin.is-tight) .rt {
align-self: flex-start;
align-items: flex-start;
padding-top: 1px;
}
.ov-origin.is-tight ~ .nm, .ov-row.is-sub .nm {
overflow-wrap: break-word;
}
.ov-links {
flex-direction: column;
gap: 2px;
display: flex;
}
.ov-link {
border-radius: var(--r-sm);
color: var(--ink-2);
align-items: center;
gap: 11px;
padding: 9px 10px;
text-decoration: none;
display: flex;
}
.ov-link:hover {
background: var(--paper);
}
.ov-link .ic {
border-radius: var(--r-sm);
background: var(--mod-soft);
width: 30px;
height: 30px;
color: var(--mod-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.ov-link .ic svg {
width: 15px;
height: 15px;
}
.ov-link .tx {
min-width: 0;
}
.ov-link .t {
color: var(--ink);
font-size: 13px;
font-weight: 500;
}
.ov-link .d {
color: var(--ink-4);
font-size: 11px;
}
.ov-link .ct {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 11px;
}
.avatar-sm {
width: 24px;
height: 24px;
color: var(--white);
background: var(--mod);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 600;
display: flex;
}
.avatar-stack {
align-items: center;
display: flex;
position: relative;
}
.avatar-stack .avatar-sm {
border: 2px solid var(--white);
margin-left: -7px;
}
.avatar-stack .avatar-sm:first-child {
margin-left: 0;
}
.avatar-stack .avatar-sm.is-more {
background: var(--ink-4);
font-size: 9px;
}
.avatar-stack-pop {
z-index: var(--z-picker);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
box-shadow: var(--shadow-pop);
min-width: 150px;
margin-top: 6px;
padding: 8px 10px;
display: none;
position: absolute;
top: 100%;
left: 0;
}
.avatar-stack:hover .avatar-stack-pop, .avatar-stack:focus-within .avatar-stack-pop {
display: block;
}
.avatar-stack-pop div {
color: var(--ink);
white-space: nowrap;
font-size: 12px;
line-height: 1.7;
}
.stat {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 14px 16px;
}
.stat-label {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 6px;
font-size: 9.5px;
}
.stat-val {
color: var(--ink);
align-items: baseline;
gap: 7px;
font-size: 24px;
font-weight: 600;
line-height: 1;
display: flex;
}
.genbar {
border: 1px solid #cec6e0;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 10px 14px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.genbar {
border: 1px solid color-mix(in srgb,var(--ai) 24%,var(--rule));
}
}
.genbar {
background: var(--ai-grad);
border-radius: var(--r-md);
margin-bottom: 16px;
}
.genbar .gi {
border-radius: var(--r-sm);
background: var(--ai-soft);
width: 26px;
height: 26px;
color: var(--ai-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.genbar .gt {
color: var(--ink-2);
font-size: 12.5px;
}
.genbar .gt b {
color: var(--ai-deep);
font-weight: 600;
}
.genbar .gm {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10.5px;
}
.genbar .ga {
gap: 8px;
margin-left: auto;
display: flex;
}
.sec-toolbar {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 11px 16px;
display: flex;
}
.sec-toolbar .gi {
color: var(--mod-deep);
flex-shrink: 0;
display: flex;
}
.sec-toolbar .gt {
color: var(--ink-2);
font-size: 12.5px;
}
.sec-toolbar .gt b {
color: var(--ink);
font-weight: 600;
}
.sec-toolbar .gm {
color: var(--ink-4);
font-size: 11px;
font-family: var(--mono);
}
.sec-toolbar .ga {
align-items: center;
gap: 8px;
margin-left: auto;
display: flex;
}
.sev-chip {
font-family: var(--mono);
white-space: nowrap;
border-radius: 99px;
align-items: center;
gap: 6px;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
display: inline-flex;
}
.sev-chip:before {
content: "";
background: currentColor;
border-radius: 50%;
width: 6px;
height: 6px;
}
.sev-1 {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.sev-2 {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.sev-3 {
background: #f6e5e0;
}
@supports (color: color-mix(in lab, red, red)) {
.sev-3 {
background: color-mix(in srgb, var(--status-risk) 16%, var(--white));
}
}
.sev-3 {
color: #c56b45;
}
@supports (color: color-mix(in lab, red, red)) {
.sev-3 {
color: color-mix(in srgb, var(--status-risk) 78%, var(--status-warn));
}
}
.sev-4 {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
}
.proc-map {
flex-direction: column;
gap: 14px;
display: flex;
}
.proc-band {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
overflow: hidden;
}
.proc-band-h {
background: var(--paper-2);
border-bottom: 1px solid var(--rule);
align-items: center;
gap: 10px;
padding: 11px 16px;
display: flex;
}
.proc-band-h .pi {
color: var(--mod-deep);
flex-shrink: 0;
display: flex;
}
.proc-band-h .pt {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.proc-band-h .pd {
color: var(--ink-4);
font-size: 11.5px;
}
.proc-band-h .pn {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 11px;
}
.proc-band-list {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
padding: 14px 16px;
display: grid;
}
.proc-band-list.is-empty {
color: var(--ink-4);
padding: 18px 16px;
font-size: 12.5px;
display: block;
}
.proc-card {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--paper);
cursor: pointer;
text-align: left;
font: inherit;
flex-direction: column;
gap: 10px;
padding: 13px 14px;
display: flex;
}
.proc-card:hover {
border-color: var(--mod);
background: var(--white);
box-shadow: var(--shadow-card);
}
.proc-card .pc-name {
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
line-height: 1.3;
}
.proc-card .pc-meta {
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.proc-card .pc-apps {
color: var(--ink-3);
align-items: center;
gap: 5px;
font-size: 11.5px;
display: flex;
}
.proc-card .pc-apps .ico {
color: var(--ink-4);
}
.codeblock {
font-family: var(--mono);
color: var(--ink-2);
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
white-space: pre;
padding: 12px 14px;
font-size: 11.5px;
line-height: 1.6;
overflow-x: auto;
}
.codeblock .k {
color: var(--mod-deep);
}
.codeblock .s {
color: var(--status-ok);
}
.codeblock .c {
color: var(--ink-4);
}
.codeblock.is-doc {
color: var(--ink);
border-radius: var(--r-md);
padding: 10px 14px;
font-size: 13px;
line-height: 1.55;
}
.cs-mode {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 99px;
flex-shrink: 0;
gap: 3px;
padding: 3px;
display: inline-flex;
}
.cs-mode button {
font-family: var(--font);
color: var(--ink-3);
cursor: pointer;
background: none;
border: none;
border-radius: 99px;
padding: 5px 12px;
font-size: 11.5px;
font-weight: 500;
}
.cs-mode button[aria-pressed="true"] {
background: var(--white);
color: var(--mod-deep);
box-shadow: var(--shadow-card);
font-weight: 600;
}
.cs-adv-toggle {
border: none;
border-top: 1px dashed var(--rule);
width: 100%;
color: var(--ink-3);
font: 500 12.5px var(--font);
cursor: pointer;
background: none;
grid-column: 1 / -1;
align-items: center;
gap: 7px;
margin: 4px 0 2px;
padding: 9px 2px;
display: flex;
}
.cs-adv-toggle:hover {
color: var(--mod-deep);
}
.cs-adv-toggle .car {
transition: transform var(--transition-overlay-in);
flex-shrink: 0;
display: inline-flex;
}
.cs-adv-toggle[aria-expanded="true"] .car {
transform: rotate(90deg);
}
.cs-adv-toggle .cnt {
font-family: var(--mono);
color: var(--ink-4);
background: var(--paper-2);
border-radius: 99px;
margin-left: 2px;
padding: 1px 7px;
font-size: 10.5px;
}
.cs-adv-body {
transition: grid-template-rows var(--transition-overlay-in);
grid-column: 1 / -1;
grid-template-rows: 0fr;
display: grid;
overflow: hidden;
}
.cs-adv-body.is-open {
grid-template-rows: 1fr;
}
.cs-adv-body > div {
min-height: 0;
overflow: hidden;
}
.cs-adv-note .co-act {
margin-top: 8px;
}
.ai-gated {
transition: opacity .15s;
position: relative;
}
[data-ai="off"] .ai-gated {
opacity: .5;
filter: grayscale(.55);
pointer-events: none;
}
[data-ai="off"] .ai-on-only {
display: none !important;
}
.ai-off-note {
color: var(--status-warn-deep);
background: var(--status-warn-soft);
border: 1px solid #efe5ce;
align-items: flex-start;
gap: 8px;
font-size: 11.5px;
line-height: 1.45;
display: none;
}
@supports (color: color-mix(in lab, red, red)) {
.ai-off-note {
border: 1px solid color-mix(in srgb,var(--status-warn) 30%,var(--white));
}
}
.ai-off-note {
border-radius: var(--r-sm);
margin-top: 8px;
padding: 8px 10px;
}
[data-ai="off"] .ai-off-note {
display: flex;
}
.ai-off-note b {
font-weight: 600;
}
.ai-mark {
font-family: var(--mono);
letter-spacing: .04em;
color: var(--ai-deep);
background: var(--ai-soft);
vertical-align: middle;
border-radius: 99px;
align-items: center;
gap: 4px;
padding: 2px 7px;
font-size: 9px;
font-weight: 600;
display: none;
}
[data-markers="on"] .ai-mark {
display: inline-flex;
}
.ai-mark:before {
content: "✦";
font-size: 9px;
}
.ai-pulse {
background: var(--ai);
border-radius: 50%;
flex-shrink: 0;
width: 9px;
height: 9px;
animation: 1.5s ease-in-out infinite ai-pulse-core;
display: inline-block;
position: relative;
}
.ai-pulse:after {
content: "";
background: var(--ai);
border-radius: 50%;
animation: 1.5s ease-out infinite ai-pulse;
position: absolute;
inset: 0;
}
@keyframes ai-pulse {
0% {
opacity: .75;
transform: scale(1);
}
70% {
opacity: 0;
transform: scale(3.4);
}
100% {
opacity: 0;
transform: scale(3.4);
}
}
@keyframes ai-pulse-core {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb,var(--ai) 55%,transparent);
transform: scale(1);
}
50% {
box-shadow: 0 0 6px 1px color-mix(in srgb,var(--ai) 60%,transparent);
transform: scale(1.3);
}
}
.devdot {
z-index: 9999;
background: var(--ink);
width: 34px;
height: 34px;
color: var(--white);
cursor: pointer;
box-shadow: var(--shadow-pop);
font-family: var(--mono);
border: none;
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 11px;
display: flex;
position: fixed;
bottom: 14px;
left: 14px;
}
.devdot:hover {
background: var(--ink-2);
}
.devpanel {
z-index: 9999;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
width: 288px;
box-shadow: var(--shadow-pop);
padding: 14px;
display: none;
position: fixed;
bottom: 56px;
left: 14px;
}
.devpanel.is-open {
display: block;
}
.devpanel-h {
align-items: center;
gap: 8px;
display: flex;
}
.devpanel-h .t {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.devpanel-h .b {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ai-deep);
background: var(--ai-soft);
border-radius: 99px;
padding: 2px 6px;
font-size: 8.5px;
}
.devpanel-sub {
color: var(--ink-4);
margin: 4px 0 8px;
font-size: 11px;
line-height: 1.45;
}
.devrow {
border-top: 1px solid var(--rule-soft);
align-items: center;
gap: 12px;
padding: 9px 0;
display: flex;
}
.devrow .rl {
color: var(--ink-2);
flex: 1;
font-size: 12.5px;
}
.devrow .rd {
color: var(--ink-4);
margin-top: 1px;
font-size: 10.5px;
}
.prov {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
border-radius: 99px;
align-items: center;
gap: 4px;
padding: 2px 7px;
font-size: 9px;
display: inline-flex;
}
.prov-inherited {
color: var(--ink-4);
background: var(--paper-2);
}
.prov-inherited:before {
content: "↳";
opacity: .7;
}
.prov-override {
color: var(--mod-deep);
background: var(--mod-soft);
}
.prov-override:before {
content: "◉";
}
.prov-own {
color: var(--ink-3);
background: var(--rule-soft);
}
.is-overridden {
box-shadow: inset 3px 0 0 var(--mod);
}
.is-inherited {
opacity: .82;
}
.prov-reset {
font-family: var(--mono);
color: var(--mod-deep);
cursor: pointer;
background: none;
border: none;
padding: 0 2px;
font-size: 10px;
}
.prov-reset:before {
content: "↺ ";
}
.prov-reset:hover {
text-decoration: underline;
}
.factrail {
flex-direction: column;
gap: 9px;
display: flex;
}
.factrail-head {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 10px;
}
.factrow {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
display: flex;
}
.factrow-ic {
width: 20px;
height: 20px;
color: var(--ink-3);
flex-shrink: 0;
margin-top: 1px;
}
.factrow-body {
flex: 1;
min-width: 0;
}
.factrow-label {
color: var(--ink-4);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 11px;
font-family: var(--mono);
}
.factrow-main {
color: var(--ink);
margin-top: 2px;
font-size: 15px;
font-weight: 600;
}
.factrow-main .qtybadge {
margin-right: 6px;
}
.factrow-sub {
color: var(--ink-3);
margin-top: 2px;
font-size: 12px;
}
.factrow-num {
background: var(--mod);
width: 22px;
height: 22px;
color: var(--white);
font-family: var(--mono);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 11px;
font-weight: 700;
display: flex;
}
.factrow-nums {
flex-shrink: 0;
gap: 4px;
display: flex;
}
.factrow.is-value {
border-color: var(--mod);
background: var(--mod-soft);
}
.factrow.is-value .factrow-main {
color: var(--mod-deep);
font-size: 17px;
}
.factrow.is-psa .factrow-ic {
color: var(--status-warn-deep);
}
.factrow.is-qs .factrow-ic {
color: var(--status-info);
}
.factrail-scroll {
flex-direction: column;
gap: 9px;
display: flex;
overflow-y: auto;
}
.factrail.is-band {
flex-direction: row;
overflow-x: auto;
}
.factrail.is-band .factrow {
flex-direction: column;
flex-shrink: 0;
min-width: 160px;
}
.blk-x {
border-radius: var(--r-sm);
width: 26px;
height: 26px;
color: var(--ink-4);
cursor: pointer;
background: none;
border: 1px solid #0000;
justify-content: center;
align-items: center;
display: inline-flex;
}
.blk-x:hover {
color: var(--status-risk);
background: var(--status-risk-soft);
}
.qtypips {
align-items: center;
gap: 4px;
display: inline-flex;
}
.qtypips i {
border: 1.5px solid var(--mod);
background: none;
border-radius: 50%;
width: 9px;
height: 9px;
display: block;
}
.qtypips i.is-done {
background: var(--mod);
}
.qtypips .qty-txt {
font-family: var(--mono);
color: var(--ink-4);
margin-left: 2px;
font-size: 10.5px;
}
.row-grip {
color: var(--ink-4);
cursor: grab;
opacity: .5;
touch-action: none;
flex-shrink: 0;
align-items: center;
transition: opacity .12s, color .12s;
display: flex;
}
.row-grip:hover {
opacity: 1;
color: var(--ink-2);
}
.row-grip:active {
cursor: grabbing;
}
.row-grip svg {
width: 14px;
height: 14px;
}
.bs-list {
flex-direction: column;
gap: 8px;
display: flex;
}
.bs-row .segctl {
flex-shrink: 0;
}
.fig-pin[data-src="betrieb"] {
background: var(--label-teal);
border-radius: var(--r-sm);
width: 24px;
height: 24px;
}
.fig-legend li[data-src="betrieb"] .fl-n {
background: var(--label-teal);
color: var(--white);
border-radius: var(--r-sm);
}
.fig-pin .fp-suffix, .fig-legend .fl-n .fp-suffix {
margin-left: 1px;
font-size: 8px;
}
.editbar {
color: var(--mod-deep);
background: var(--mod-soft);
border: 1px solid var(--mod);
align-items: center;
gap: 8px;
font-size: 12px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.editbar {
border: 1px solid color-mix(in srgb, var(--mod) 22%, white);
}
}
.editbar {
border-radius: var(--r-md);
margin-bottom: 12px;
padding: 8px 12px;
}
.editbar b {
font-weight: 600;
}
.editbar .acts {
gap: 8px;
margin-left: auto;
display: flex;
}
.role-row {
border-top: 1px solid var(--rule-soft);
flex-direction: column;
gap: 7px;
padding: 10px 0;
display: flex;
}
.role-row:first-of-type {
border-top: none;
padding-top: 0;
}
.role-k {
color: var(--ink-4);
font-size: 10.5px;
display: block;
}
.role-chip {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-wrap: wrap;
align-items: center;
gap: 7px 6px;
max-width: 100%;
padding: 4px 8px 4px 5px;
display: inline-flex;
}
.role-chip .rc-main {
flex-direction: column;
flex: 84px;
min-width: 84px;
display: flex;
}
.role-chip .rc-nm {
color: var(--ink-2);
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
font-size: 12px;
line-height: 1.25;
overflow: hidden;
}
.role-chip .prov {
flex-shrink: 0;
}
.role-chip > .prov {
flex-basis: 100%;
}
.role-chip .rc-sub {
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 8.5px;
line-height: 1.25;
}
.role-x {
cursor: pointer;
color: var(--ink-4);
background: none;
border: none;
align-items: center;
padding: 0;
display: inline-flex;
}
.role-x:hover {
color: var(--status-risk-deep);
}
.meta-badge {
white-space: nowrap;
font-family: var(--mono);
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 99px;
align-items: center;
padding: 1px 7px;
font-size: 10px;
display: inline-flex;
}
.meta-badge-accent {
color: var(--label-violet);
background: #edeaf4;
}
@supports (color: color-mix(in lab, red, red)) {
.meta-badge-accent {
background: color-mix(in srgb, var(--label-violet) 12%, white);
}
}
.meta-badge-accent {
border-color: #6b50a04d;
}
@supports (color: color-mix(in lab, red, red)) {
.meta-badge-accent {
border-color: color-mix(in srgb, var(--label-violet) 30%, transparent);
}
}
.src-badge {
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
border: 1px solid #0000;
border-radius: 99px;
align-items: center;
gap: 4px;
padding: 1px 7px 1px 5px;
font-size: 9px;
display: inline-flex;
}
.src-badge .ico {
width: 11px;
height: 11px;
}
.src-badge.src-cal {
color: var(--mod-deep);
background: var(--mod-soft);
border-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.src-badge.src-cal {
border-color: color-mix(in srgb,var(--mod) 26%,transparent);
}
}
.src-badge.src-poll {
color: var(--ink-3);
background: var(--paper-2);
border-color: var(--rule);
}
.src-badge.src-token {
color: var(--status-info);
background: #e9eff7;
}
@supports (color: color-mix(in lab, red, red)) {
.src-badge.src-token {
background: color-mix(in srgb,var(--status-info) 10%,white);
}
}
.src-badge.src-token {
border-color: #1e5cb047;
}
@supports (color: color-mix(in lab, red, red)) {
.src-badge.src-token {
border-color: color-mix(in srgb,var(--status-info) 28%,transparent);
}
}
.src-badge.src-info {
color: var(--ink-4);
background: var(--paper-2);
border-color: var(--rule-soft);
}
.row-manual {
background: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.row-manual {
background: color-mix(in srgb, var(--mod) 4%, var(--white));
}
}
.row-manual:hover td {
background: var(--mod) !important;
}
@supports (color: color-mix(in lab, red, red)) {
.row-manual:hover td {
background: color-mix(in srgb, var(--mod) 8%, var(--paper)) !important;
}
}
.breadcrumb {
align-items: center;
gap: 7px;
font-size: 13px;
display: flex;
}
.bc-seg {
color: var(--ink-3);
cursor: pointer;
border-radius: var(--r-sm);
white-space: nowrap;
background: none;
border: none;
padding: 3px 5px;
font-family: inherit;
text-decoration: none;
}
.bc-seg:hover {
background: var(--paper);
color: var(--ink-2);
}
.bc-seg.active {
color: var(--ink);
cursor: default;
font-weight: 600;
}
.bc-seg.active:hover {
background: none;
}
.bc-sep {
color: var(--rule);
font-size: 13px;
}
.bc-switch {
display: inline-flex;
position: relative;
}
.bc-switch > button {
font-family: var(--font);
color: var(--mod-deep);
background: var(--mod-soft);
border: 1px solid var(--mod);
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.bc-switch > button {
border: 1px solid color-mix(in srgb, var(--mod) 28%, transparent);
}
}
.bc-switch > button {
border-radius: var(--r-sm);
cursor: pointer;
padding: 4px 8px;
}
.bc-switch > button:hover {
border-color: var(--mod);
}
.bc-switch > button .car {
opacity: .7;
font-size: 9px;
}
.bc-opt {
text-align: left;
width: 100%;
font-family: var(--font);
color: var(--ink-2);
border-radius: var(--r-sm);
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 9px;
padding: 7px 8px;
font-size: 13px;
display: flex;
}
.bc-opt:hover {
background: var(--paper);
}
.bc-opt.is-current {
background: var(--mod-soft);
color: var(--mod-deep);
font-weight: 600;
}
.bc-opt .nm {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
overflow: hidden;
}
.bc-opt .dot {
border-radius: 50%;
flex-shrink: 0;
width: 7px;
height: 7px;
}
.ie-wrap {
display: inline-flex;
position: relative;
}
.ie-trigger {
font: inherit;
text-align: left;
border-radius: var(--r-sm);
cursor: pointer;
color: inherit;
background: none;
border: 1px solid #0000;
align-items: flex-start;
gap: 6px;
margin: -2px -6px;
padding: 2px 6px;
transition: background .12s, border-color .12s;
display: inline-flex;
}
.ie-trigger:hover {
background: var(--mod-soft);
border-color: var(--rule);
}
.ie-trigger.is-open {
background: var(--mod-soft);
border-color: var(--mod);
}
.ie-pen {
opacity: 0;
color: var(--mod);
flex-shrink: 0;
margin-top: 1px;
transition: opacity .12s;
}
.ie-trigger:hover .ie-pen, .ie-trigger.is-open .ie-pen {
opacity: 1;
}
.ie-pen .ico {
width: 13px;
height: 13px;
}
.ie-asbtn {
color: var(--mod-deep);
font-size: 11.5px;
font-weight: 500;
}
.ie-pop {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
min-width: 248px;
box-shadow: var(--shadow-pop);
z-index: var(--z-picker);
position: absolute;
top: calc(100% + 6px);
left: 0;
overflow: hidden;
}
.ie-pop.to-right {
left: auto;
right: 0;
}
.ie-pop.to-up {
top: auto;
bottom: calc(100% + 6px);
}
.ie-pop-h {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
padding: 11px 13px 0;
font-size: 9px;
}
.ie-pop-bd {
flex-direction: column;
gap: 9px;
padding: 10px 13px;
display: flex;
}
.ie-pop-ft {
border-top: 1px solid var(--rule-soft);
background: var(--paper);
justify-content: flex-end;
gap: 7px;
padding: 9px 13px;
display: flex;
}
.ie-opt {
font: inherit;
text-align: left;
border: 1px solid var(--rule);
border-radius: var(--r-sm);
cursor: pointer;
color: var(--ink);
background: none;
align-items: center;
padding: 7px 9px;
display: flex;
}
.ie-opt:hover {
background: var(--paper);
}
.ie-opt.is-sel {
border-color: var(--mod);
background: var(--mod-soft);
}
.t-undo {
font: inherit;
color: inherit;
opacity: .8;
border-radius: var(--r-sm);
cursor: pointer;
background: none;
border: 1px solid;
margin-left: 8px;
padding: 2px 9px;
font-size: 12px;
font-weight: 600;
}
.t-undo:hover {
opacity: 1;
}
.lm-screen {
z-index: var(--z-overlay);
background: var(--paper);
flex-direction: column;
display: flex;
position: fixed;
inset: 0;
}
.lm-top {
background: var(--white);
border-bottom: 1px solid var(--rule);
flex-shrink: 0;
align-items: center;
gap: 14px;
height: 52px;
padding: 0 20px;
display: flex;
}
.lm-top-ic {
background: var(--mod-soft);
width: 30px;
height: 30px;
color: var(--mod-deep);
border-radius: 8px;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.lm-top-tt {
font-size: 14.5px;
font-weight: 600;
}
.lm-top-sub {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 1px;
font-size: 10.5px;
}
.lm-top-prog {
align-items: center;
gap: 10px;
margin-left: auto;
display: flex;
}
.lm-prog-bar {
background: var(--rule-soft);
border-radius: 99px;
width: 130px;
height: 6px;
overflow: hidden;
}
.lm-prog-fill {
background: var(--mod);
border-radius: 99px;
height: 100%;
transition: width .25s;
}
.lm-x {
color: var(--ink-4);
cursor: pointer;
background: none;
border: none;
padding: 7px;
display: flex;
}
.lm-x:hover {
color: var(--ink-2);
}
.lm-body {
flex: 1;
min-height: 0;
display: flex;
}
.lm-rail {
border-right: 1px solid var(--rule);
background: var(--white);
flex-direction: column;
flex-shrink: 0;
width: 300px;
display: flex;
overflow-y: auto;
}
.lm-rail-h {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
padding: 14px 16px 8px;
font-size: 9px;
}
.lm-ritem {
border-bottom: 1px solid var(--rule-soft);
cursor: pointer;
align-items: flex-start;
gap: 9px;
padding: 10px 14px;
display: flex;
}
.lm-ritem:hover {
background: var(--paper);
}
.lm-ritem.is-cur {
background: var(--mod-soft);
border-left: 3px solid var(--mod);
padding-left: 11px;
}
.lm-grip {
color: var(--ink-4);
cursor: grab;
flex-shrink: 0;
margin-top: 2px;
}
.lm-rist {
border: 1.5px solid var(--rule);
width: 20px;
height: 20px;
color: var(--white);
background: var(--white);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
margin-top: 1px;
font-size: 10px;
display: flex;
}
.lm-rist.done {
background: var(--status-ok);
border-color: var(--status-ok);
}
.lm-rist.postponed {
background: var(--status-warn);
border-color: var(--status-warn);
}
.lm-rtxt {
flex: 1;
min-width: 0;
}
.lm-rtt {
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.4;
}
.lm-rmeta {
color: var(--ink-4);
align-items: center;
gap: 4px;
margin-top: 2px;
font-size: 10.5px;
display: flex;
}
.lm-rfoot {
border-top: 1px solid var(--rule);
margin-top: auto;
padding: 10px 14px;
}
.lm-fbtn {
cursor: pointer;
width: 100%;
font: inherit;
color: var(--ink-3);
background: none;
border: none;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 12.5px;
display: flex;
}
.lm-tasklist {
flex-direction: column;
gap: 6px;
margin-top: 8px;
display: flex;
}
.lm-task {
color: var(--ink-2);
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
align-items: center;
gap: 7px;
padding: 6px 8px;
font-size: 12px;
display: flex;
}
.lm-task .who {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 9.5px;
}
.lm-main {
flex: 1;
padding: 28px 36px;
overflow-y: auto;
}
.lm-main-in {
max-width: 740px;
margin: 0 auto;
}
.lm-tt {
margin-bottom: 6px;
font-size: 20px;
font-weight: 600;
}
.lm-desc {
color: var(--ink-3);
margin-bottom: 14px;
font-size: 13.5px;
line-height: 1.55;
}
.lm-sec {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin: 20px 0 8px;
font-size: 9.5px;
}
.lm-actions {
gap: 10px;
margin-top: 18px;
display: flex;
}
.lm-addtask {
align-items: center;
gap: 8px;
margin-top: 10px;
display: flex;
}
.lm-banner {
background: var(--mod-soft);
border: 1px solid var(--mod);
border-radius: var(--r-md);
color: var(--mod-deep);
align-items: center;
gap: 10px;
margin-bottom: 18px;
padding: 12px 14px;
font-size: 13px;
display: flex;
}
.lm-snote {
border-top: 1px solid var(--rule);
margin-top: 26px;
padding-top: 18px;
}
.rte {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
overflow: hidden;
}
.rte-bar {
border-bottom: 1px solid var(--rule);
background: var(--paper);
gap: 1px;
padding: 5px;
display: flex;
}
.rte-bar button {
border-radius: var(--r-sm);
cursor: pointer;
width: 28px;
height: 26px;
color: var(--ink-3);
background: none;
border: none;
justify-content: center;
align-items: center;
font-size: 13px;
display: flex;
}
.rte-bar button:hover {
background: var(--rule-soft);
color: var(--ink-2);
}
.rte-bar .rte-sep {
background: var(--rule);
width: 1px;
margin: 3px 2px;
}
.rte-ed {
min-height: 84px;
color: var(--ink);
outline: none;
padding: 10px 12px;
font-size: 13px;
line-height: 1.55;
}
.rte-ed:empty:before {
content: attr(data-placeholder);
color: var(--ink-4);
pointer-events: none;
}
.zravail-label {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 6px;
font-size: 9px;
}
.zravail {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
height: 50px;
position: relative;
overflow: hidden;
}
.zravail-tick {
border-left: 1px dashed var(--rule);
position: absolute;
top: 0;
bottom: 0;
}
.zravail-tick-l {
font-family: var(--mono);
color: var(--ink-4);
font-size: 8.5px;
position: absolute;
bottom: 2px;
transform: translateX(3px);
}
.zravail-busy {
background: repeating-linear-gradient(45deg,var(--rule-soft),var(--rule-soft) 4px,var(--white) 4px,var(--white) 8px);
border: 1px solid var(--rule);
height: 20px;
color: var(--ink-3);
white-space: nowrap;
border-radius: 4px;
align-items: center;
padding: 0 5px;
font-size: 9px;
display: flex;
position: absolute;
top: 6px;
overflow: hidden;
}
.zravail-sel {
background: var(--mod-soft);
border: 1.5px solid var(--mod);
border-radius: 4px;
height: 15px;
position: absolute;
top: 29px;
}
.zravail-sel.is-conflict {
background: var(--status-risk-soft);
border-color: var(--status-risk);
}
.zravail-legend {
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
display: flex;
}
.share-dlg {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
width: 480px;
max-width: 92vw;
max-height: 86vh;
box-shadow: var(--shadow-pop);
padding: 20px 22px;
overflow: auto;
}
.share-hd {
align-items: center;
gap: 9px;
margin-bottom: 4px;
display: flex;
}
.share-hd h3 {
color: var(--ink);
margin: 0;
font-size: 15px;
font-weight: 600;
}
.share-hd > .ico {
color: var(--mod, var(--brand-primary));
}
.share-sub {
color: var(--ink-3);
margin-bottom: 14px;
font-size: 12px;
}
.share-note {
border-radius: var(--r-sm);
align-items: flex-start;
gap: 8px;
margin-bottom: 16px;
padding: 8px 11px;
font-size: 12px;
line-height: 1.45;
display: flex;
}
.share-note .ico {
flex-shrink: 0;
margin-top: 1px;
}
.share-note.live {
background: var(--paper-2);
border: 1px solid var(--rule);
color: var(--ink-2);
}
.share-note.live .ico {
color: var(--ink-4);
}
.share-note.snap {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
border: 1px solid #efe5ce;
}
@supports (color: color-mix(in lab, red, red)) {
.share-note.snap {
border: 1px solid color-mix(in srgb,var(--status-warn) 30%,var(--white));
}
}
.share-acc {
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
display: flex;
}
.share-acc-row {
align-items: center;
gap: 9px;
display: flex;
}
.share-acc-row .who {
flex: 1;
min-width: 0;
}
.share-acc-row .nm {
color: var(--ink-2);
font-size: 12.5px;
}
.share-acc-row .rl {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .03em;
color: var(--ink-4);
font-size: 9px;
}
.share-link {
gap: 8px;
margin-bottom: 18px;
display: flex;
}
.share-ft {
justify-content: flex-end;
gap: 8px;
display: flex;
}
.codein {
font-family: var(--mono);
align-items: center;
gap: 7px;
display: inline-flex;
}
.codein-pre {
color: var(--ink-3);
letter-spacing: .08em;
font-size: 13px;
font-weight: 600;
}
.codein-sep {
color: var(--ink-4);
}
.codein-seg {
text-align: center;
text-transform: uppercase;
letter-spacing: .22em;
width: 74px;
font-family: var(--mono);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
color: var(--ink);
padding: 9px 6px;
font-size: 14px;
}
.codein-seg::placeholder {
letter-spacing: .22em;
color: var(--ink-4);
}
.codein-seg:focus {
border-color: var(--mod, var(--brand-primary));
box-shadow: 0 0 0 3px var(--mod-soft, var(--brand-primary-soft));
outline: none;
}
.pipeline {
grid-template-columns: repeat(var(--pl-cols, 3),1fr);
align-items: start;
gap: 16px;
display: grid;
}
.pl-col {
flex-direction: column;
min-width: 0;
display: flex;
}
.pl-head {
justify-content: space-between;
align-items: center;
padding: 0 4px 10px;
display: flex;
}
.pl-title {
color: var(--ink-2);
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.pl-dot {
background: var(--pl-tone, var(--status-muted));
border-radius: 50%;
flex-shrink: 0;
width: 8px;
height: 8px;
}
.pl-count {
font-family: var(--mono);
color: var(--ink-4);
font-size: 11px;
}
.pl-body {
flex-direction: column;
gap: 10px;
min-height: 60px;
display: flex;
}
.pl-empty {
color: var(--ink-4);
text-align: center;
border: 1px dashed var(--rule);
border-radius: var(--r-lg);
padding: 22px 0;
font-size: 12px;
}
.pl-eingang {
--pl-tone: var(--status-muted);
}
.pl-agenda {
--pl-tone: var(--status-info);
}
.pl-entschieden {
--pl-tone: var(--status-ok);
}
.src-chip {
background: var(--mod-soft);
color: var(--mod-deep);
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 2px 8px;
font-size: 10.5px;
font-weight: 600;
display: inline-flex;
}
.src-chip .dot {
background: var(--mod);
border-radius: 50%;
flex-shrink: 0;
width: 7px;
height: 7px;
}
.env-tint {
background: var(--env-soft);
transition: background .45s cubic-bezier(.4, 0, .2, 1);
}
.env-hazard {
position: relative;
}
.env-hazard:after {
content: "";
background: repeating-linear-gradient(-45deg,var(--env) 0 7px,transparent 7px 14px);
height: 3px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
[data-env="prod"] .env-hazard:after {
display: none;
}
.env-badge {
height: 26px;
font-family: var(--mono);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--white);
background: var(--env);
box-shadow: 0 1px 0 #ffffff59 inset, 0 2px 6px -1px var(--env);
border-radius: 99px;
align-items: center;
gap: 7px;
padding: 0 12px 0 10px;
font-size: 10.5px;
font-weight: 700;
display: inline-flex;
position: relative;
overflow: hidden;
}
@supports (color: color-mix(in lab, red, red)) {
.env-badge {
box-shadow: 0 1px 0 #ffffff59 inset, 0 2px 6px -1px color-mix(in srgb,var(--env) 60%,transparent);
}
}
[data-env="prod"] .env-badge {
display: none;
}
.env-badge .dot {
background: var(--white);
border-radius: 50%;
flex-shrink: 0;
width: 8px;
height: 8px;
position: relative;
}
.env-badge .dot:after {
content: "";
background: var(--white);
border-radius: 50%;
animation: 2s ease-out infinite env-pulse;
position: absolute;
inset: 0;
}
@keyframes env-pulse {
0% {
opacity: .7;
transform: scale(1);
}
70%, 100% {
opacity: 0;
transform: scale(2.6);
}
}
.env-banner {
background: var(--env-stage);
height: 30px;
color: var(--white);
justify-content: center;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 600;
transition: height .4s cubic-bezier(.4, 0, .2, 1);
display: flex;
position: relative;
overflow: hidden;
}
.env-banner.is-min {
cursor: pointer;
height: 6px;
}
.env-banner.is-min > * {
opacity: 0;
}
.env-banner .x {
width: 30px;
height: 30px;
color: var(--white);
cursor: pointer;
opacity: .85;
background: none;
border: none;
position: absolute;
top: 0;
right: 10px;
}
.env-banner .x:hover {
opacity: 1;
}
.env-sysbar {
height: 36px;
color: var(--white);
align-items: center;
gap: 10px;
padding: 0 16px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.env-sysbar.is-count {
background: var(--status-risk);
}
.env-sysbar.is-cooldown {
background: var(--status-muted);
}
.env-sysbar .cd {
font-family: var(--mono);
border-radius: var(--r-sm);
background: #fff3;
padding: 1px 7px;
font-weight: 700;
}
.env-sysbar .sp {
flex: 1;
}
.env-sysbar button {
color: var(--white);
border-radius: var(--r-sm);
cursor: pointer;
background: #ffffff24;
border: 1px solid #ffffff8c;
padding: 4px 11px;
font-size: 11px;
font-weight: 600;
}
.env-impbar {
background: var(--ai);
height: 32px;
color: var(--white);
align-items: center;
gap: 10px;
padding: 0 16px;
font-size: 12px;
display: flex;
}
.env-impbar .who {
font-weight: 600;
}
.env-impbar .r {
opacity: .85;
font-family: var(--mono);
font-size: 10px;
}
.env-impbar .sp {
flex: 1;
}
.env-impbar button {
color: var(--white);
border-radius: var(--r-sm);
cursor: pointer;
background: #ffffff1f;
border: 1px solid #ffffff80;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
}
.devpanel-tabs {
border-bottom: 1px solid var(--rule);
gap: 2px;
padding: 0 10px;
display: flex;
}
.devtab {
cursor: pointer;
color: var(--ink-3);
white-space: nowrap;
background: none;
border: none;
border-bottom: 2px solid #0000;
align-items: center;
gap: 6px;
padding: 11px;
font-size: 12px;
font-weight: 500;
display: flex;
}
.devtab:hover {
color: var(--ink-2);
}
.devtab.is-on {
color: var(--env-deep, var(--brand-primary-deep));
border-bottom-color: var(--env, var(--brand-primary));
font-weight: 600;
}
.devtab[hidden] {
display: none;
}
.devscope {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 99px;
padding: 1px 5px;
font-size: 7.5px;
}
.devscope.is-session {
color: var(--status-ok);
background: var(--status-ok-soft);
}
.devscope.is-admin {
color: var(--status-risk-deep);
background: var(--status-risk-soft);
}
.devpane[hidden] {
display: none;
}
.devpane-note {
color: var(--ink-4);
padding: 10px 0 2px;
font-size: 11px;
line-height: 1.45;
}
.devuser {
text-align: left;
border: 1px solid var(--rule);
background: var(--white);
border-radius: var(--r-md);
cursor: pointer;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 9px;
display: flex;
}
.devuser:hover, .devuser.is-active {
border-color: var(--ai);
background: var(--ai-soft);
}
.devuser.is-locked {
opacity: .5;
pointer-events: none;
}
.devuser .av {
width: 26px;
height: 26px;
color: var(--white);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
display: flex;
}
.devuser .nm {
color: var(--ink);
flex: 1;
font-size: 12px;
font-weight: 500;
}
.devuser .nm .sub {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 1px;
font-size: 9.5px;
font-weight: 400;
display: block;
}
.devuser .go {
color: var(--ai-deep);
font-size: 10.5px;
font-weight: 600;
}
.devgen-toggle {
border: 1px solid var(--ai);
background: var(--ai-soft);
width: 100%;
color: var(--ai-deep);
border-radius: var(--r-md);
cursor: pointer;
justify-content: center;
align-items: center;
gap: 6px;
margin-bottom: 9px;
padding: 8px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.devgen {
border: 1px dashed var(--rule);
border-radius: var(--r-md);
margin-bottom: 10px;
padding: 11px;
display: none;
}
.devgen.is-open {
display: block;
}
.devgen label {
color: var(--ink-4);
margin: 0 0 3px;
font-size: 10px;
display: block;
}
.devgen input, .devgen select {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
width: 100%;
color: var(--ink);
background: var(--white);
margin-bottom: 9px;
padding: 7px 9px;
font-family: inherit;
font-size: 12px;
}
.devgen .hint {
color: var(--ink-4);
margin-top: 2px;
font-size: 10px;
}
.wgrid {
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: dense;
align-items: stretch;
gap: 16px;
display: grid;
}
.widget.dragging {
opacity: .4;
}
.dash-toolbar {
align-items: center;
gap: 4px;
display: flex;
}
.dash-tab:hover {
background: var(--paper-2);
color: var(--ink);
}
.dash-tab.dragging {
opacity: .4;
}
.dash-tab.over {
box-shadow: inset 3px 0 0 var(--brand-primary);
}
.dash-tab-add {
border: 1px dashed var(--rule);
width: 28px;
height: 28px;
color: var(--ink-4);
cursor: pointer;
background: none;
border-radius: 8px;
justify-content: center;
align-items: center;
margin-left: 4px;
display: inline-flex;
}
.board-menu {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
min-width: 210px;
box-shadow: var(--shadow-pop);
z-index: var(--z-picker, 950);
padding: 6px;
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
}
.board-menu.is-open {
display: block;
}
.board-menu-h {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-4);
padding: 6px 8px;
font-size: 9.5px;
}
.board-menu-item {
text-align: left;
width: 100%;
color: var(--ink-2);
cursor: pointer;
font-size: 13px;
font-weight: 600;
font-family: var(--font);
background: none;
border: none;
border-radius: 6px;
align-items: center;
gap: 9px;
padding: 8px 10px;
display: flex;
}
.board-menu-item:hover {
background: var(--brand-primary-soft);
color: var(--brand-primary-deep);
}
.dash-icon-btn {
border-radius: var(--r-sm);
width: 30px;
height: 30px;
color: var(--ink-4);
cursor: pointer;
background: none;
border: 1px solid #0000;
justify-content: center;
align-items: center;
display: flex;
}
.dash-icon-btn.is-active {
background: var(--mod-soft);
color: var(--mod-deep);
border-color: var(--mod);
}
.dash-zones {
grid-template-columns: 3fr 1fr;
align-items: start;
gap: 24px;
display: grid;
}
.dash-zones.single {
grid-template-columns: 1fr;
}
.palette.is-open {
transform: none;
}
.pal-ico {
background: var(--mod-soft);
width: 32px;
height: 32px;
color: var(--mod-deep);
border-radius: 8px;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 14px;
display: flex;
}
.board-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
display: grid;
}
.board-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
cursor: pointer;
flex-direction: column;
transition: border-color .15s, box-shadow .15s;
display: flex;
overflow: hidden;
}
.board-card.is-featured {
grid-column: span 2;
}
.board-card.is-featured .bc-img {
aspect-ratio: 21 / 9;
}
.ql-trigger .chev {
color: var(--ink-4);
transition: transform .15s;
}
.ql-trigger.is-open .chev {
transform: rotate(180deg);
}
.ql-panel {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
width: 360px;
max-width: 88vw;
box-shadow: var(--shadow-pop);
z-index: var(--z-picker, 950);
padding: 16px 18px;
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
}
.ql-panel.is-open {
display: block;
}
.ql-group {
margin-bottom: 16px;
}
.ql-group:last-child {
margin-bottom: 0;
}
.ql-group-h {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-4);
margin-bottom: 10px;
font-size: 10px;
}
.ql-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
display: grid;
}
.bm-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
display: grid;
}
.bm-tile {
text-align: center;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
cursor: pointer;
color: inherit;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 10px;
text-decoration: none;
display: flex;
}
.bmp {
flex-direction: column;
gap: 10px;
display: flex;
}
.bmp-c {
color: var(--ink-4);
font-size: 10.5px;
font-family: var(--mono);
}
.wcfg-check {
color: var(--ink-2);
cursor: pointer;
align-items: center;
gap: 8px;
font-size: 12px;
display: flex;
}
.bmp-ic {
border-radius: var(--r-md);
background: var(--mod-soft);
width: 48px;
height: 40px;
color: var(--mod-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.wcfg-sub {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--ink-4);
margin: 12px 0 6px;
font-size: 9.5px;
}
.wcfg-customs {
flex-direction: column;
gap: 5px;
margin-bottom: 8px;
display: flex;
}
.wcfg-custom {
color: var(--ink-2);
background: var(--paper-2);
border-radius: 6px;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 5px 9px;
font-size: 12px;
display: flex;
}
.wcfg-cx:hover {
color: var(--status-risk);
}
.wcfg-add {
gap: 6px;
display: flex;
}
.mission-hd {
align-items: center;
gap: 12px;
display: flex;
position: relative;
}
.mission-av {
color: #fff;
background: radial-gradient(circle at 30% 28%, #7fb4ff, #2a63c8);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
display: flex;
box-shadow: 0 0 18px #5a9bff99;
}
.mission-eyebrow {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: #fff9;
font-size: 10px;
}
.mission-desc {
color: #ffffffd1;
margin-top: 9px;
font-size: 12.5px;
line-height: 1.5;
position: relative;
}
.mission-cta:hover {
background: var(--brand-primary);
border-color: var(--brand-primary);
}
.mission-chip .l {
color: #fff9;
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 2px;
font-size: 9px;
}
.mission-foot {
color: #ffffffbf;
border-top: 1px solid #ffffff1f;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
font-size: 11px;
display: flex;
position: relative;
}
.mission-rank {
align-items: center;
gap: 6px;
font-weight: 600;
display: inline-flex;
}
.mission-foot.is-agg {
justify-content: flex-start;
}
.mission-poll {
flex-direction: column;
gap: 7px;
margin-top: 10px;
display: flex;
position: relative;
}
.mission-poll-row {
color: #ffffffd1;
align-items: center;
gap: 8px;
font-size: 11px;
display: flex;
}
.mission-poll-row .lbl {
white-space: nowrap;
text-overflow: ellipsis;
flex-shrink: 0;
width: 72px;
overflow: hidden;
}
.mission-poll-row .trk {
background: #ffffff24;
border-radius: 99px;
flex: 1;
height: 6px;
overflow: hidden;
}
.mission-poll-row .trk i {
background: #ffffffa6;
border-radius: 99px;
height: 100%;
display: block;
}
.mission-poll-row .pct {
text-align: right;
width: 30px;
font-family: var(--mono);
color: #ffffff8c;
}
.wx-row {
align-items: center;
gap: 14px;
display: flex;
}
.wx-cond {
color: var(--ink-4);
margin-top: 2px;
font-size: 11.5px;
}
.wx-days {
border-top: 1px solid var(--rule-soft);
gap: 8px;
margin-top: 14px;
padding-top: 12px;
display: flex;
}
.wx-day .d {
color: var(--ink-4);
font-size: 10.5px;
font-family: var(--mono);
text-transform: uppercase;
}
.clk-loc {
color: var(--ink-4);
border-top: 1px solid var(--rule-soft);
margin-top: 10px;
padding-top: 10px;
font-size: 11px;
}
.hero-cta {
align-self: flex-start;
margin-top: 6px;
}
.hero-nav {
color: #fff;
cursor: pointer;
z-index: 2;
opacity: 0;
background: #00000059;
border: none;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
font-size: 18px;
line-height: 1;
transition: opacity .15s;
display: flex;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.hero-nav.prev {
left: 12px;
}
.hero-nav.next {
right: 12px;
}
.horn-av {
border-radius: var(--r-md);
background: var(--ai-soft);
border: 1px solid var(--ai-line);
width: 34px;
height: 34px;
color: var(--ai-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 15px;
display: flex;
}
.horn .t b {
color: var(--ai-deep);
}
.poll-opts {
flex-direction: column;
gap: 8px;
display: flex;
}
.poll-opt:hover {
border-color: var(--mod);
}
.poll-meta {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 10px;
font-size: 10.5px;
}
.cd-row {
gap: 10px;
display: flex;
}
.cd-num {
font-family: var(--mono);
color: var(--mod-deep);
font-size: 24px;
font-weight: 700;
line-height: 1;
}
.cd-lbl {
color: var(--ink-4);
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 4px;
font-size: 10px;
}
.cd-event {
color: var(--ink-3);
margin-top: 12px;
font-size: 12px;
}
.tb-item {
align-items: center;
gap: 10px;
display: flex;
}
.ev-row {
align-items: center;
gap: 12px;
display: flex;
}
.ev-body {
flex: 1;
min-width: 0;
}
.brief-av {
border-radius: var(--r-md);
background: var(--ai-soft);
border: 1px solid var(--ai-line);
width: 38px;
height: 38px;
color: var(--ai-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.brief-list {
flex-direction: column;
gap: 8px;
margin: 12px 0 0;
padding: 0;
list-style: none;
display: flex;
}
.brief-list li {
color: var(--ink-2);
padding-left: 14px;
font-size: 12.5px;
line-height: 1.45;
position: relative;
}
.brief-list li:before {
content: "";
background: var(--ai);
border-radius: 50%;
width: 5px;
height: 5px;
position: absolute;
top: 7px;
left: 0;
}
.kudo {
align-items: flex-start;
gap: 10px;
display: flex;
}
.mood-btn {
border: 1px solid var(--rule);
background: var(--white);
color: var(--ink-3);
cursor: pointer;
font-size: 12px;
font-weight: 600;
font-family: var(--font);
border-radius: 6px;
flex: 1;
padding: 6px 0;
}
.mood-btn:hover {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
}
.ad {
align-items: center;
gap: 10px;
display: flex;
}
.ad-price {
font-family: var(--mono);
color: var(--ink);
flex-shrink: 0;
font-size: 12px;
font-weight: 600;
}
.sf-row {
align-items: center;
gap: 10px;
display: flex;
}
.sf-b {
flex: 1;
min-width: 0;
}
.soon {
opacity: .5;
}
.soon, .soon * {
cursor: not-allowed;
pointer-events: none !important;
}
.soon-badge {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--paper);
border: 1px solid var(--rule);
vertical-align: middle;
border-radius: 99px;
margin-left: 6px;
padding: 1px 6px;
font-size: 8px;
font-weight: 700;
}
.w-setup-ic {
background: var(--white);
border: 1px solid var(--rule);
width: 24px;
height: 24px;
color: var(--ink-3);
border-radius: 7px;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.w-setup-tx .wh {
color: var(--ink-2);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 600;
overflow: hidden;
}
.w-setup-tx .wd {
display: none;
}
.w-setup.is-ai .w-setup-ic {
color: var(--ai);
border-color: #d3cef6;
}
@supports (color: color-mix(in lab, red, red)) {
.w-setup.is-ai .w-setup-ic {
border-color: color-mix(in srgb,var(--ai) 30%,var(--white));
}
}
.w-setup.is-ai .w-setup-ic {
background: #f3f2fd;
}
@supports (color: color-mix(in lab, red, red)) {
.w-setup.is-ai .w-setup-ic {
background: color-mix(in srgb,var(--ai) 8%,var(--white));
}
}
.req-badge.is-ai {
color: var(--ai-deep);
background: #f3f2fd;
}
@supports (color: color-mix(in lab, red, red)) {
.req-badge.is-ai {
background: color-mix(in srgb,var(--ai) 8%,var(--white));
}
}
.req-badge.is-ai {
border-color: #d9d4f7;
}
@supports (color: color-mix(in lab, red, red)) {
.req-badge.is-ai {
border-color: color-mix(in srgb,var(--ai) 26%,var(--white));
}
}
.studio-body {
flex: 1;
grid-template-columns: 236px 1fr 288px;
min-height: 0;
display: grid;
}
.studio-pal {
background: var(--white);
border-right: 1px solid var(--rule);
flex-direction: column;
display: flex;
overflow-y: auto;
}
.studio-pal-tabs {
border-bottom: 1px solid var(--rule);
flex-shrink: 0;
display: flex;
}
.studio-pal-tab {
font: inherit;
color: var(--ink-3);
cursor: pointer;
background: none;
border: none;
border-bottom: 2px solid #0000;
flex: 1;
padding: 10px 4px;
font-size: 11.5px;
font-weight: 500;
}
.studio-pal-tab:hover {
color: var(--ink);
}
.studio-pal-tab.is-on {
color: var(--mod-deep);
border-bottom-color: var(--mod);
font-weight: 600;
}
.studio-pal-body {
flex-direction: column;
gap: 7px;
padding: 12px;
display: flex;
overflow-y: auto;
}
.studio-pal-label {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
padding: 4px 2px;
font-size: 9px;
}
.dnd-item {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
color: var(--ink-2);
cursor: grab;
align-items: center;
gap: 9px;
padding: 9px 10px;
font-size: 12.5px;
display: flex;
}
.dnd-item:hover {
border-color: var(--mod);
background: var(--white);
}
.dnd-item:active {
cursor: grabbing;
}
.dnd-item .di-ic {
width: 18px;
height: 18px;
color: var(--mod-deep);
flex-shrink: 0;
}
.dnd-item .di-n {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 9.5px;
}
.studio-canvas-wrap {
background: #373533;
position: relative;
}
@supports (color: color-mix(in lab, red, red)) {
.studio-canvas-wrap {
background: color-mix(in srgb, var(--ink) 88%, var(--white));
}
}
.studio-canvas-wrap {
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
}
.studio-canvas {
background: var(--white);
box-shadow: var(--shadow-pop);
max-width: min(88%, 760px);
position: relative;
}
.studio-canvas img {
width: 100%;
height: auto;
display: block;
}
.studio-zoom {
background: var(--white);
border-radius: var(--r-sm);
box-shadow: var(--shadow-pop);
gap: 4px;
padding: 4px;
display: flex;
position: absolute;
bottom: 16px;
right: 16px;
}
.studio-zoom button {
width: 28px;
height: 28px;
color: var(--ink-2);
cursor: pointer;
background: none;
border: none;
border-radius: 6px;
font-size: 15px;
}
.studio-zoom button:hover {
background: var(--paper);
}
.studio-marker {
background: var(--mod);
width: 26px;
height: 26px;
color: var(--white);
font-family: var(--mono);
box-shadow: 0 0 0 2px var(--white), var(--shadow-card);
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 11px;
font-weight: 700;
display: flex;
position: absolute;
transform: translate(-50%, -50%);
}
.studio-marker[data-shape="rect"] {
border-radius: var(--r-sm);
width: 34px;
height: 24px;
}
.studio-marker[data-shape="circle-lg"] {
width: 30px;
height: 30px;
}
.studio-marker[data-shape="polygon"] {
border-radius: 30% 70% 65% 35% / 40% 45% 55% 60%;
}
.studio-marker.is-editable {
cursor: grab;
}
.studio-marker.is-editable:hover {
box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.studio-marker.is-editable:hover {
box-shadow: 0 0 0 2px var(--white), 0 0 0 5px color-mix(in srgb, var(--mod) 35%, transparent);
}
}
.studio-marker.is-sel {
box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--mod);
z-index: 2;
}
.studio-marker[data-src="werkzeug"] {
background: var(--label-slate);
}
.studio-marker.is-editable .m-del {
background: var(--status-risk);
width: 16px;
height: 16px;
color: var(--white);
cursor: pointer;
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 9px;
display: none;
position: absolute;
top: -7px;
right: -7px;
}
.studio-marker.is-editable:hover .m-del {
display: flex;
}
.studio-marker.is-tap {
cursor: pointer;
width: 32px;
height: 32px;
}
.studio-marker.is-tap.is-unread:before {
content: "";
border-radius: inherit;
border: 2px solid var(--mod);
animation: 1.8s ease-out infinite marker-pulse;
position: absolute;
inset: -6px;
}
@keyframes marker-pulse {
0% {
opacity: .9;
transform: scale(.85);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
.studio-props {
background: var(--white);
border-left: 1px solid var(--rule);
flex-direction: column;
gap: 14px;
padding: 16px;
display: flex;
overflow-y: auto;
}
.studio-props-head {
color: var(--ink);
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
display: flex;
}
.mk-swatches {
flex-wrap: wrap;
gap: 7px;
display: flex;
}
.mk-swatch {
border: 2px solid var(--white);
width: 26px;
height: 26px;
box-shadow: 0 0 0 1px var(--rule);
cursor: pointer;
border-radius: 50%;
padding: 0;
}
.mk-swatch[data-color="mod"] {
background: var(--mod);
}
.mk-swatch[data-color="teal"] {
background: var(--label-teal);
}
.mk-swatch[data-color="slate"] {
background: var(--label-slate);
}
.mk-swatch[data-color="coral"] {
background: var(--label-coral);
}
.mk-swatch[data-color="info"] {
background: var(--status-info);
}
.mk-swatch.is-on {
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink);
}
.mk-swatch.is-auto {
background: linear-gradient(45deg, var(--paper-2) 25%, transparent 25%, transparent 75%, var(--paper-2) 75%) 0 0/10px 10px, linear-gradient(45deg, var(--paper-2) 25%, var(--white) 25%, var(--white) 75%, var(--paper-2) 75%) 5px 5px/10px 10px, var(--white);
}
.mk-symgrid {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.mk-symbtn {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
cursor: pointer;
width: 34px;
height: 34px;
color: var(--ink-2);
justify-content: center;
align-items: center;
padding: 0;
display: flex;
}
.mk-symbtn .ico {
width: 18px;
height: 18px;
}
.shape-glyph {
background: currentColor;
flex: none;
display: inline-block;
}
.shape-glyph[data-shape="circle"] {
border-radius: 50%;
width: 11px;
height: 11px;
}
.shape-glyph[data-shape="circle-lg"] {
border-radius: 50%;
width: 15px;
height: 15px;
}
.shape-glyph[data-shape="rect"] {
border-radius: var(--r-sm);
width: 15px;
height: 11px;
}
.shape-glyph[data-shape="polygon"] {
border-radius: 30% 70% 65% 35% / 40% 45% 55% 60%;
width: 14px;
height: 14px;
}
.mk-symbtn.is-on {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
}
.mk-symbtn.is-none {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.fig-pin[data-shape="rect"] {
border-radius: var(--r-sm);
width: 24px;
height: 24px;
}
.fig-pin[data-shape="polygon"] {
border-radius: 30% 70% 65% 35% / 40% 45% 55% 60%;
}
.fig-pin[data-shape="circle-lg"] {
width: 30px;
height: 30px;
}
.pal-item.locked {
opacity: .75;
}
.pal-item.locked .pal-ico {
background: var(--paper);
color: var(--ink-4);
}
.pdoc {
background: var(--white);
color: var(--ink);
font-family: var(--font);
}
.pdoc-sheet {
flex-direction: column;
padding: 52px 54px 44px;
display: flex;
}
.pdoc-head {
border-bottom: 2px solid var(--ink);
justify-content: space-between;
align-items: flex-start;
padding-bottom: 12px;
display: flex;
}
.pdoc-kicker {
font-family: var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 10px;
}
.pdoc-prod {
letter-spacing: -.01em;
margin-top: 3px;
font-size: 23px;
font-weight: 800;
}
.pdoc-art {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 3px;
font-size: 11px;
}
.pdoc-head-r {
text-align: right;
}
.pdoc-logo {
align-items: center;
gap: 7px;
font-size: 14px;
display: inline-flex;
}
.pdoc-logo .pdoc-mark {
border-radius: var(--r-sm);
background: var(--mod);
width: 26px;
height: 26px;
color: var(--white);
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: 800;
display: flex;
}
.pdoc-logo span {
color: var(--ink-4);
font-weight: 400;
}
.pdoc-stepof {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 8px;
font-size: 11px;
}
.pdoc-step {
align-items: flex-start;
gap: 16px;
margin-top: 4px;
display: flex;
}
.pdoc-step-n {
background: var(--mod);
width: 40px;
height: 40px;
color: var(--white);
font-size: 19px;
font-weight: 800;
font-family: var(--mono);
border-radius: 50%;
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.pdoc-canvas {
border: 1.5px solid var(--rule);
border-radius: var(--r-lg);
background: var(--paper);
flex: 1;
position: relative;
overflow: hidden;
}
.pdoc-canvas img {
object-fit: contain;
width: 100%;
height: 100%;
display: block;
}
.pdoc-foot {
border-top: 1px solid var(--rule);
font-family: var(--mono);
color: var(--ink-4);
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 12px;
padding-top: 14px;
font-size: 9.5px;
display: flex;
}
.pdoc.is-reduced .facts, .pdoc.is-reduced .callout, .pdoc.is-reduced .dc-chg {
display: none;
}
.imark {
background: var(--white);
border: 2px solid var(--ink);
width: 26px;
height: 26px;
color: var(--ink);
font-family: var(--mono);
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 700;
display: flex;
position: absolute;
transform: translate(-50%, -50%);
}
.imark.is-mod {
background: var(--mod);
border-color: var(--white);
color: var(--white);
box-shadow: 0 0 0 1.5px var(--mod);
}
.imark.is-ok {
background: var(--status-ok);
border-color: var(--white);
color: var(--white);
box-shadow: 0 0 0 1.5px var(--status-ok);
}
.imark.is-risk {
background: var(--status-risk);
border-color: var(--white);
color: var(--white);
box-shadow: 0 0 0 1.5px var(--status-risk);
}
.bom {
gap: 10px;
display: flex;
}
.bom-item {
border: 1.5px solid var(--ink);
border-radius: var(--r-md);
text-align: center;
flex-direction: column;
flex: 1;
align-items: center;
gap: 5px;
padding: 10px 8px 8px;
display: flex;
}
.bom-thumb {
width: 100%;
height: 56px;
color: var(--ink);
justify-content: center;
align-items: center;
display: flex;
}
.bom-thumb svg, .bom-thumb .ico {
width: 40px;
max-width: 100%;
height: 40px;
max-height: 100%;
}
.bom-qty {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
}
.bom-nm {
color: var(--ink-3);
font-size: 9.5px;
line-height: 1.2;
}
.bom-pn {
font-family: var(--mono);
color: var(--ink-4);
font-size: 8.5px;
}
.bom-item.is-psa {
border-style: dashed;
border-color: var(--mod);
}
.bom-item.is-psa .bom-thumb, .bom-item.is-psa .bom-qty {
color: var(--mod-deep);
}
.facts {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.fbadge {
border: 1.5px solid var(--rule);
border-radius: var(--r-md);
flex-direction: column;
gap: 1px;
min-width: 96px;
padding: 7px 11px;
display: flex;
}
.fbadge .fl {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
align-items: center;
gap: 5px;
font-size: 8.5px;
display: flex;
}
.fbadge .fv {
font-size: 15px;
font-weight: 700;
}
.fbadge .fl .ico, .fbadge .fv .ico {
width: 12px;
height: 12px;
}
.fbadge.is-value {
border-color: var(--mod);
background: var(--mod-soft);
}
.fbadge.is-value .fv {
color: var(--mod-deep);
}
.fbadge.is-norm {
border-color: var(--status-info);
background: var(--status-info-soft);
}
.fbadge.is-norm .fv {
color: var(--status-info);
font-size: 12px;
}
.picto-row {
align-items: flex-start;
gap: 26px;
display: flex;
}
.picto {
text-align: center;
flex-direction: column;
align-items: center;
gap: 6px;
width: 80px;
display: flex;
}
.picto .ico {
width: 38px;
height: 38px;
color: var(--ink);
}
.picto .pl {
color: var(--ink-3);
font-size: 9.5px;
line-height: 1.25;
}
.picto .pv {
font-family: var(--mono);
color: var(--mod-deep);
font-size: 9px;
font-weight: 700;
}
.picto.is-no {
position: relative;
}
.picto.is-no:after {
content: "";
background: var(--status-risk);
transform-origin: 0;
width: 48px;
height: 2.5px;
position: absolute;
top: 16px;
left: 16px;
transform: rotate(-32deg);
}
.docctrl {
border: 1px solid var(--rule);
border-radius: var(--r-md);
display: flex;
overflow: hidden;
}
.dc-cell {
border-right: 1px solid var(--rule);
flex: 1;
padding: 7px 11px;
}
.dc-cell:last-child {
border-right: none;
}
.dc-l {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 8px;
}
.dc-v {
margin-top: 2px;
font-size: 11px;
font-weight: 600;
}
.dc-v span {
color: var(--ink-4);
font-weight: 400;
font-family: var(--mono);
font-size: 9.5px;
}
.dc-chg {
color: var(--ink-3);
gap: 6px;
margin-top: 6px;
font-size: 9.5px;
display: flex;
}
.dc-chg b {
color: var(--ink-3);
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
font-size: 8.5px;
}
.alertbar {
--cc: var(--status-warn);
--cc-deep: var(--status-warn-deep);
border-radius: var(--r-md);
background: var(--cc);
align-items: center;
gap: 12px;
padding: 12px 15px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.alertbar {
background: color-mix(in srgb, var(--cc) 12%, var(--white));
}
}
.alertbar {
border: 1px solid var(--cc);
}
@supports (color: color-mix(in lab, red, red)) {
.alertbar {
border: 1px solid color-mix(in srgb, var(--cc) 35%, var(--white));
}
}
.alertbar > .ico {
width: 19px;
height: 19px;
color: var(--cc-deep);
flex: none;
}
.alertbar .ab-tx {
color: var(--cc-deep);
min-width: 0;
font-size: 13px;
}
.alertbar .ab-tx b {
font-weight: 700;
}
.alertbar .ab-sp {
flex: 1;
}
.alertbar .ab-btn {
border-radius: var(--r-sm);
border: 1px solid var(--cc-deep);
background: var(--white);
height: 32px;
color: var(--cc-deep);
cursor: pointer;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
font-family: var(--font);
flex: none;
padding: 0 12px;
}
.alertbar .ab-btn:hover {
background: var(--cc);
}
@supports (color: color-mix(in lab, red, red)) {
.alertbar .ab-btn:hover {
background: color-mix(in srgb, var(--cc) 14%, var(--white));
}
}
.alertbar.is-warn {
--cc: var(--status-warn);
--cc-deep: var(--status-warn-deep);
}
.alertbar.is-risk {
--cc: var(--status-risk);
--cc-deep: var(--status-risk-deep);
}
.alertbar.is-info {
--cc: var(--status-info);
--cc-deep: var(--status-info);
}
.kpi-card.is-warn {
border-color: #e7d8b6;
}
@supports (color: color-mix(in lab, red, red)) {
.kpi-card.is-warn {
border-color: color-mix(in srgb, var(--status-warn) 45%, var(--white));
}
}
.kpi-card.is-warn {
background: var(--status-warn-soft);
}
.kpi-card.is-warn .kpi-value, .kpi-card.is-warn .kpi-label {
color: var(--status-warn-deep);
}
.kpi-card.is-risk {
border-color: #e4b5a8;
}
@supports (color: color-mix(in lab, red, red)) {
.kpi-card.is-risk {
border-color: color-mix(in srgb, var(--status-risk) 45%, var(--white));
}
}
.kpi-card.is-risk {
background: var(--status-risk-soft);
}
.kpi-card.is-risk .kpi-value, .kpi-card.is-risk .kpi-label {
color: var(--status-risk-deep);
}
.kpi-card.is-clickable {
cursor: pointer;
transition: border-color .12s;
}
.kpi-card.is-clickable:hover {
border-color: var(--mod);
}
.panel-objhead {
flex-wrap: wrap;
align-items: flex-start;
gap: 18px;
padding: 16px 18px;
display: flex;
}
.panel-objhead .oh-t {
color: var(--ink);
font-size: 15px;
font-weight: 700;
}
.panel-objhead .oh-s {
color: var(--ink-3);
margin-top: 3px;
font-size: 12px;
}
.headfacts {
gap: 26px;
margin-left: auto;
display: flex;
}
.hf-k {
font-family: var(--mono);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9px;
}
.hf-v {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--ink);
margin-top: 2px;
font-size: 16px;
font-weight: 600;
}
.hf-v.is-text {
font-family: var(--font);
font-size: 13px;
}
.hf-v.is-empty {
color: var(--ink-4);
font-weight: 500;
}
.listtools {
align-items: center;
gap: 10px;
margin-bottom: 14px;
display: flex;
}
.listtools .inp {
flex: 1;
max-width: 280px;
}
.listtools .lt-toggle {
color: var(--ink-3);
cursor: pointer;
align-items: center;
gap: 7px;
font-size: 12px;
display: flex;
}
.listtools .lt-end {
margin-left: auto;
}
.sidenav-badge {
font-variant-numeric: tabular-nums;
}
.rev-opt {
text-align: left;
width: 100%;
font-family: var(--font);
cursor: pointer;
border: 1.5px solid var(--rule);
border-radius: var(--r-lg);
background: var(--white);
gap: 12px;
padding: 14px;
display: flex;
}
.rev-opt + .rev-opt {
margin-top: 10px;
}
.rev-opt:hover {
border-color: var(--mod);
background: var(--mod-soft);
}
.rev-opt .ic {
border-radius: var(--r-md);
flex: none;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
display: flex;
}
.rev-opt .ic .ico, .rev-opt .ic svg {
width: 20px;
height: 20px;
}
.rev-opt .t {
color: var(--ink);
font-size: 14px;
font-weight: 700;
}
.rev-opt .s {
color: var(--ink-3);
margin-top: 3px;
font-size: 12px;
line-height: 1.45;
}
.rev-opt .rev-tag {
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
border-radius: 99px;
margin-top: 6px;
padding: 1px 7px;
font-size: 9px;
display: inline-block;
}
.rev-opt.keep .ic, .rev-opt.keep .rev-tag {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.rev-opt.new .ic, .rev-opt.new .rev-tag {
background: var(--mod-soft);
color: var(--mod-deep);
}
.hx-dialog.is-wide {
width: 520px;
}
.wv {
font-size: 12.5px;
}
.wv .d {
color: var(--ink-2);
}
.wv .c {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 1px;
font-size: 10.5px;
}
.wv.is-due {
color: var(--status-risk-deep);
}
.wv.is-due .d {
color: var(--status-risk-deep);
font-weight: 600;
}
.wv.is-due .c {
color: var(--status-risk);
}
.wv-btn {
border-radius: var(--r-sm);
cursor: pointer;
white-space: nowrap;
border: 1px solid var(--status-risk);
background: var(--white);
height: 26px;
color: var(--status-risk-deep);
font-size: 11px;
font-weight: 600;
font-family: var(--font);
margin-left: 8px;
padding: 0 9px;
}
.wv-btn:hover {
background: var(--status-risk-soft);
}
.tp {
white-space: nowrap;
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 7px;
font-size: 11px;
font-weight: 600;
display: inline-flex;
}
.tp .ico, .tp svg {
width: 13px;
height: 13px;
}
.tp .vn {
font-family: var(--mono);
opacity: .75;
margin-left: 1px;
font-size: 9px;
}
.tp.artikel {
color: var(--label-teal);
background: #e6f1f2;
}
@supports (color: color-mix(in lab, red, red)) {
.tp.artikel {
background: color-mix(in srgb, var(--label-teal) 12%, var(--white));
}
}
.tp.variantenartikel {
color: var(--label-green);
background: #e8f1ec;
}
@supports (color: color-mix(in lab, red, red)) {
.tp.variantenartikel {
background: color-mix(in srgb, var(--label-green) 12%, var(--white));
}
}
.tp.komponente {
color: var(--label-violet);
background: #edeaf4;
}
@supports (color: color-mix(in lab, red, red)) {
.tp.komponente {
background: color-mix(in srgb, var(--label-violet) 12%, var(--white));
}
}
.tp.bauteil {
color: var(--label-slate);
background: #eceef2;
}
@supports (color: color-mix(in lab, red, red)) {
.tp.bauteil {
background: color-mix(in srgb, var(--label-slate) 12%, var(--white));
}
}
.erp-tag {
font-family: var(--mono);
letter-spacing: .04em;
color: var(--ink-4);
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
padding: 1px 5px;
font-size: 9px;
font-weight: 700;
}
.erp-src {
color: var(--ink-3);
background: var(--white);
border: 1px solid var(--rule);
border-radius: 99px;
flex: none;
align-items: center;
gap: 7px;
padding: 6px 12px;
font-size: 11.5px;
display: inline-flex;
}
.erp-src .d {
background: var(--status-ok);
border-radius: 50%;
flex: none;
width: 7px;
height: 7px;
}
.desc-state {
align-items: center;
gap: 6px;
font-size: 12px;
display: inline-flex;
}
.desc-state .ico, .desc-state svg {
width: 14px;
height: 14px;
}
.desc-state.ok {
color: var(--status-ok);
}
.desc-state.no {
color: var(--ink-4);
}
.peek-wrap {
min-width: 0;
display: inline-flex;
position: relative;
}
.peek-tg {
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
background: none;
border: none;
align-items: center;
padding: 0;
display: inline-flex;
}
.peek-veil {
z-index: 999;
position: fixed;
inset: 0;
}
.peek {
z-index: 1000;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
width: 280px;
box-shadow: var(--shadow-pop);
cursor: default;
flex-direction: column;
gap: 8px;
padding: 12px 13px;
display: flex;
position: fixed;
}
.peek-h {
align-items: center;
gap: 7px;
display: flex;
}
.peek-h > .ico {
color: var(--mod, var(--brand-primary));
flex-shrink: 0;
}
.peek-t {
color: var(--ink);
flex: 1;
min-width: 0;
font-size: 12.5px;
font-weight: 600;
}
.peek-id {
font-family: var(--mono);
color: var(--ink-4);
flex-shrink: 0;
font-size: 9.5px;
}
.peek-row {
color: var(--ink-3);
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 11.5px;
display: flex;
}
.peek-v {
color: var(--ink-2);
align-items: center;
gap: 6px;
display: flex;
}
.peek-ft {
border-top: 1px solid var(--rule-soft);
flex-wrap: wrap;
gap: 8px;
margin-top: 3px;
padding-top: 9px;
display: flex;
}
.lnk-line {
pointer-events: none;
z-index: 1200;
position: fixed;
inset: 0;
}
.lnk-port {
background: var(--white);
border: 2px solid var(--mod, var(--brand-primary));
cursor: crosshair;
opacity: 0;
touch-action: none;
border-radius: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
position: absolute;
top: 50%;
right: -5px;
}
:hover > .lnk-port, .is-sel > .lnk-port {
opacity: 1;
}
.lnk-port.is-l {
left: -5px;
right: auto;
}
.lnk-port.is-m {
border-radius: 2px;
margin-left: -5px;
left: 50%;
right: auto;
}
.lnk-target {
box-shadow: 0 0 0 2px var(--mod, var(--brand-primary)) !important;
}
.lnk-pop {
z-index: 1201;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
box-shadow: var(--shadow-pop);
min-width: 240px;
padding: 5px;
position: fixed;
}
.lnk-pop .lp-h {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
padding: 4px 8px 5px;
font-size: 9px;
}
.lnk-opt {
border-radius: var(--r-sm);
cursor: pointer;
width: 100%;
font: inherit;
color: var(--ink-2);
text-align: left;
background: none;
border: none;
padding: 6px 8px;
font-size: 12.5px;
display: block;
}
.lnk-opt:hover {
background: var(--mod-soft);
}
.lnk-opt b {
color: var(--mod-deep);
font-weight: 600;
}
.lnk-opt.is-cancel {
color: var(--ink-4);
}
.seg-count {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.dhead {
align-items: flex-start;
gap: 18px;
display: flex;
}
.dhead-thumb {
border-radius: var(--r-lg);
border: 1px solid var(--rule);
flex: none;
width: 96px;
height: 96px;
overflow: hidden;
}
.dhead-thumb img {
object-fit: cover;
width: 100%;
height: 100%;
}
.dhead .ids {
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 6px;
display: flex;
}
.dhead .pn {
font-family: var(--mono);
color: var(--ink-4);
font-size: 12px;
}
.dhead .lead {
color: var(--ink-2);
max-width: 640px;
margin-top: 10px;
font-size: 13.5px;
line-height: 1.55;
}
.dhead-actions {
gap: 8px;
margin-left: auto;
display: flex;
}
.sec {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
padding: 20px 22px;
scroll-margin-top: 16px;
}
.sec + .sec {
margin-top: 18px;
}
.sec-title {
align-items: center;
gap: 9px;
margin-bottom: 4px;
font-size: 15px;
font-weight: 700;
display: flex;
}
.sec-hint {
color: var(--ink-4);
margin-bottom: 14px;
font-size: 12px;
line-height: 1.5;
}
.kv {
grid-template-columns: 1fr 1fr;
gap: 0 30px;
display: grid;
}
.kv .kv-row {
border-bottom: 1px solid var(--rule-soft);
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
display: flex;
}
.kv .kv-row .k {
color: var(--ink-4);
}
.kv .kv-row .v {
color: var(--ink);
text-align: right;
font-weight: 600;
}
.kv .kv-row .v .erp-tag {
vertical-align: middle;
margin-left: 6px;
font-weight: 700;
}
.media-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
display: grid;
}
.media-card {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--paper);
overflow: hidden;
}
.media-cap {
border-bottom: 1px solid var(--rule);
justify-content: space-between;
align-items: center;
padding: 8px 12px;
font-size: 12.5px;
font-weight: 600;
display: flex;
}
.media-cap .mt {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-4);
border: 1px solid var(--rule);
border-radius: 99px;
padding: 1px 7px;
font-size: 9px;
font-weight: 700;
}
.media-body {
background: var(--paper);
justify-content: center;
align-items: center;
height: 186px;
display: flex;
position: relative;
}
.media-body img {
object-fit: contain;
width: 100%;
height: 100%;
}
.media-body.dark {
background: #33312e;
}
@supports (color: color-mix(in lab, red, red)) {
.media-body.dark {
background: color-mix(in srgb, var(--ink) 90%, var(--white));
}
}
.media-ph {
color: var(--ink-4);
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 12px;
display: flex;
}
.media-ph .ico, .media-ph svg {
width: 34px;
height: 34px;
}
.media-body .play {
background: var(--white);
width: 52px;
height: 52px;
box-shadow: var(--shadow-card);
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
}
.media-body .play .ico, .media-body .play svg {
width: 22px;
height: 22px;
color: var(--mod-deep);
margin-left: 3px;
}
.media-body .rot {
font-family: var(--mono);
color: var(--white);
background: #1c1a178c;
font-size: 9px;
position: absolute;
bottom: 10px;
right: 10px;
}
@supports (color: color-mix(in lab, red, red)) {
.media-body .rot {
background: color-mix(in srgb, var(--ink) 55%, transparent);
}
}
.media-body .rot {
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 3px 8px;
display: flex;
}
.vg {
flex-direction: column;
gap: 9px;
display: flex;
}
.vg-row {
border: 1px solid var(--rule);
border-radius: var(--r-md);
align-items: center;
gap: 11px;
padding: 11px 13px;
display: flex;
}
.vg-ic {
border-radius: var(--r-sm);
background: var(--paper-2);
width: 34px;
height: 34px;
color: var(--ink-3);
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.vg-ic .ico, .vg-ic svg {
width: 18px;
height: 18px;
}
.vg-body {
flex: 1;
min-width: 0;
}
.vg-body .l {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9px;
}
.vg-body .m {
margin-top: 1px;
font-size: 13.5px;
font-weight: 600;
}
.vg-body .s {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 2px;
font-size: 10.5px;
}
.vg-val {
font-family: var(--mono);
color: var(--mod-deep);
font-size: 13px;
font-weight: 700;
}
.vg-add {
cursor: pointer;
width: 100%;
font-family: var(--font);
color: var(--ink-4);
border: 1px dashed var(--rule);
border-radius: var(--r-md);
background: none;
justify-content: center;
align-items: center;
gap: 7px;
padding: 11px;
font-size: 12.5px;
display: flex;
}
.vg-add:hover {
border-color: var(--mod);
color: var(--mod-deep);
}
.intern-tag {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--status-warn-deep);
background: var(--status-warn-soft);
border: 1px solid #efe5ce;
font-size: 8.5px;
}
@supports (color: color-mix(in lab, red, red)) {
.intern-tag {
border: 1px solid color-mix(in srgb, var(--status-warn) 30%, var(--white));
}
}
.intern-tag {
border-radius: 99px;
padding: 1px 7px;
}
.onote {
border-bottom: 1px solid var(--rule-soft);
gap: 11px;
padding: 11px 0;
display: flex;
}
.onote-av {
background: var(--ink-4);
width: 28px;
height: 28px;
color: var(--white);
border-radius: 50%;
flex: none;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
display: flex;
}
.onote-body .meta {
color: var(--ink-4);
font-size: 11px;
}
.onote-body .tx {
color: var(--ink-2);
margin-top: 2px;
font-size: 13px;
line-height: 1.45;
}
.use-grid {
flex-direction: column;
gap: 9px;
display: flex;
}
.use-row {
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: inherit;
align-items: center;
gap: 12px;
padding: 12px 14px;
text-decoration: none;
display: flex;
}
.use-row:hover {
border-color: var(--mod);
background: var(--mod-soft);
}
.use-ic {
border-radius: var(--r-sm);
width: 36px;
height: 36px;
color: var(--white);
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.use-ic .ico, .use-ic svg {
width: 19px;
height: 19px;
}
.use-body {
flex: 1;
min-width: 0;
}
.use-body .t {
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
}
.use-body .s {
color: var(--ink-4);
margin-top: 1px;
font-size: 11.5px;
}
.use-go {
font-family: var(--mono);
color: var(--mod-deep);
flex: none;
align-items: center;
gap: 5px;
font-size: 11px;
display: flex;
}
.use-go .ico, .use-go svg {
width: 14px;
height: 14px;
}
.name-cell {
align-items: center;
gap: 10px;
display: flex;
}
.name-cell .thumb {
border-radius: var(--r-sm);
background: var(--paper-2);
border: 1px solid var(--rule);
width: 38px;
height: 38px;
color: var(--ink-4);
flex: none;
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
}
.name-cell .thumb img {
object-fit: cover;
width: 100%;
height: 100%;
}
.name-cell .thumb .ico, .name-cell .thumb svg {
width: 19px;
height: 19px;
}
.name-cell .nm-main {
color: var(--ink);
font-weight: 600;
}
.name-cell .nm-sub {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 1px;
font-size: 11px;
}
.rel-path {
color: var(--ink-4);
align-items: center;
gap: 4px;
min-width: 0;
margin-top: 2px;
font-size: 11px;
display: flex;
}
.rel-path .rp-lbl {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
font-size: 9.5px;
}
.rel-path .rp-sep {
color: var(--rule-strong);
}
.rel-path .rp-node {
color: var(--ink-3);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.rel-path button.rp-node, .rel-path [role="button"].rp-node {
font: inherit;
color: var(--mod-deep);
cursor: pointer;
background: none;
border: none;
padding: 0;
}
.rel-path button.rp-node:hover, .rel-path [role="button"].rp-node:hover {
text-decoration: underline;
}
.m.rollup {
cursor: pointer;
color: var(--mod-deep);
}
.m.rollup:hover {
text-decoration: underline;
}
.subtree-chip {
color: var(--mod-deep);
background: var(--mod-soft);
border: 1px solid var(--mod);
align-items: center;
gap: 7px;
font-size: 11.5px;
display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
.subtree-chip {
border: 1px solid color-mix(in srgb, var(--mod) 30%, var(--white));
}
}
.subtree-chip {
border-radius: 99px;
padding: 3px 5px 3px 11px;
}
.subtree-chip button {
cursor: pointer;
color: inherit;
opacity: .65;
background: none;
border: none;
padding: 0 4px;
font-size: 13px;
line-height: 1;
}
.subtree-chip button:hover {
opacity: 1;
}
.used {
font-family: var(--mono);
color: var(--ink-3);
font-size: 11px;
}
.used b {
color: var(--mod-deep);
}
.grp-row td {
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.grp-row:hover td {
background: var(--paper-2);
}
.grp-cell {
cursor: pointer;
align-items: center;
gap: 10px;
display: flex;
}
.grp-tog {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
width: 20px;
height: 20px;
color: var(--ink-3);
flex: none;
justify-content: center;
align-items: center;
transition: transform .12s;
display: flex;
}
.grp-tog .ico, .grp-tog svg {
width: 12px;
height: 12px;
}
.grp-row.open .grp-tog {
transform: rotate(90deg);
}
.grp-name {
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-weight: 700;
overflow: hidden;
}
.grp-count {
font-family: var(--mono);
color: var(--ink-4);
background: var(--white);
border: 1px solid var(--rule);
white-space: nowrap;
border-radius: 99px;
flex: none;
padding: 1px 8px;
font-size: 10.5px;
}
.grp-agg {
font-family: var(--mono);
color: var(--ink-4);
font-size: 11px;
}
.grp-agg .is-due {
color: var(--status-risk-deep);
font-weight: 600;
}
.var-row td {
background: #faf9f6;
}
@supports (color: color-mix(in lab, red, red)) {
.var-row td {
background: color-mix(in srgb, var(--paper) 55%, var(--white));
}
}
.var-row .name-cell {
padding-left: 30px;
position: relative;
}
.var-row .name-cell:before {
content: "";
border-left: 1.5px solid var(--rule);
border-bottom: 1.5px solid var(--rule);
border-bottom-left-radius: 5px;
width: 11px;
position: absolute;
top: -13px;
bottom: 50%;
left: 14px;
}
.var-chip {
font-family: var(--mono);
letter-spacing: .03em;
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 99px;
margin-top: 2px;
padding: 1px 7px;
font-size: 9.5px;
display: inline-block;
}
.var-chip.all {
color: var(--ink-4);
background: var(--paper-2);
}
.icon-btn {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
width: 30px;
height: 30px;
color: var(--ink-3);
cursor: pointer;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
}
.icon-btn:hover {
background: var(--mod-soft);
color: var(--mod-deep);
border-color: var(--mod);
}
.autosave {
font-family: var(--mono);
color: var(--ink-4);
align-items: center;
gap: 6px;
font-size: 10.5px;
display: inline-flex;
}
.autosave .dot {
background: var(--status-ok);
border-radius: 50%;
flex: none;
width: 6px;
height: 6px;
}
.step-pill.is-on {
background: var(--mod-soft);
border-color: var(--mod);
color: var(--mod-deep);
font-weight: 600;
}
.blocklist {
border-radius: var(--r-md);
flex-direction: column;
gap: 7px;
padding: 2px;
transition: background .12s, box-shadow .12s;
display: flex;
}
.blocklist.drop-over {
background: var(--mod-soft);
box-shadow: 0 0 0 2px var(--mod) inset;
}
.block-row {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
color: var(--ink-2);
background: var(--white);
cursor: pointer;
align-items: center;
gap: 9px;
padding: 9px 10px;
font-size: 12.5px;
display: flex;
position: relative;
}
.block-row.on {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
}
.block-row .bi {
width: 18px;
height: 18px;
color: var(--mod-deep);
flex-shrink: 0;
}
.block-row .b-val {
font-family: var(--mono);
color: var(--mod-deep);
margin-left: auto;
font-size: 10.5px;
}
.block-row .b-del {
width: 20px;
height: 20px;
color: var(--ink-4);
cursor: pointer;
background: none;
border: none;
border-radius: 5px;
justify-content: center;
align-items: center;
margin-left: auto;
display: none;
}
.block-row:hover .b-val {
display: none;
}
.block-row:hover .b-del {
display: flex;
}
.block-row .b-del:hover {
color: var(--status-risk);
background: var(--paper);
}
.blocklist-hint {
color: var(--ink-4);
text-align: center;
border: 1px dashed var(--rule);
border-radius: var(--r-md);
padding: 10px;
font-size: 11px;
}
.block-edit {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-md);
flex-direction: column;
gap: 8px;
margin-top: 2px;
padding: 10px;
display: flex;
}
.block-edit .be-row {
align-items: center;
gap: 8px;
display: flex;
}
.block-edit label {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-4);
flex: 0 0 96px;
font-size: 9px;
}
.block-edit input {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
font-family: var(--font);
background: var(--white);
flex: 1;
padding: 6px 9px;
font-size: 12.5px;
}
.block-edit input:focus {
border-color: var(--mod);
outline: none;
}
.picklist {
flex-direction: column;
gap: 6px;
display: flex;
}
.pick-group-h {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--white);
z-index: 1;
padding: 12px 4px 4px;
font-size: 9.5px;
position: sticky;
top: 0;
}
.pick-group-h:first-child {
padding-top: 2px;
}
.pick-row {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
cursor: pointer;
text-align: left;
align-items: center;
gap: 11px;
width: 100%;
padding: 10px 12px;
font-family: inherit;
transition: border-color .12s, background .12s;
display: flex;
}
.pick-row:hover, .pick-row.on {
border-color: var(--mod);
background: var(--mod-soft);
}
.pick-row .pk-ic {
border-radius: var(--r-sm);
background: var(--mod-soft);
width: 34px;
height: 34px;
color: var(--mod-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.pick-row .pk-ic svg, .pick-row .pk-ic .ico {
width: 18px;
height: 18px;
}
.pick-row .pk-body {
flex: 1;
min-width: 0;
}
.pick-row .pk-t {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 600;
overflow: hidden;
}
.pick-row .pk-s {
color: var(--ink-3);
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 1px;
font-size: 11.5px;
overflow: hidden;
}
.pick-row .pk-meta {
font-family: var(--mono);
color: var(--ink-4);
flex-shrink: 0;
align-items: center;
gap: 8px;
margin-left: auto;
font-size: 10.5px;
display: flex;
}
.pick-row .hit {
background: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.pick-row .hit {
background: color-mix(in srgb, var(--mod) 22%, transparent);
}
}
.pick-row .hit {
color: var(--mod-deep);
border-radius: 3px;
padding: 0 1px;
font-weight: 600;
}
.emptyguide {
text-align: center;
flex-direction: column;
align-items: center;
padding: 52px 24px;
display: flex;
}
.emptyguide .eg-ic {
background: var(--mod-soft);
width: 56px;
height: 56px;
color: var(--mod-deep);
border-radius: 16px;
justify-content: center;
align-items: center;
margin-bottom: 16px;
display: flex;
}
.emptyguide .eg-ic svg, .emptyguide .eg-ic .ico {
width: 28px;
height: 28px;
}
.emptyguide h3 {
color: var(--ink);
margin: 0;
font-size: 19px;
font-weight: 700;
}
.emptyguide p {
color: var(--ink-3);
max-width: 440px;
margin: 8px 0 0;
font-size: 13px;
line-height: 1.55;
}
.choose {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
width: 100%;
max-width: 640px;
margin-top: 24px;
display: grid;
}
.choose-card {
text-align: left;
border: 1px solid var(--rule);
border-radius: var(--r-lg);
background: var(--white);
cursor: pointer;
flex-direction: column;
padding: 15px;
font-family: inherit;
transition: border-color .12s, box-shadow .12s;
display: flex;
}
.choose-card:hover {
border-color: var(--mod);
}
.choose-card.is-recommended {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.choose-card.is-recommended {
box-shadow: 0 0 0 3px color-mix(in srgb,var(--mod) 14%,transparent);
}
}
.choose-card .choose-ic {
border-radius: var(--r-md);
background: var(--paper-2);
width: 30px;
height: 30px;
color: var(--ink-2);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.choose-card .choose-ic svg, .choose-card .choose-ic .ico {
width: 17px;
height: 17px;
}
.choose-card.is-recommended .choose-ic {
background: var(--mod-soft);
color: var(--mod-deep);
}
.choose-card .choose-t {
color: var(--ink);
margin-top: 10px;
font-size: 14px;
font-weight: 700;
}
.choose-card .choose-d {
color: var(--ink-3);
margin-top: 4px;
font-size: 11.5px;
line-height: 1.45;
}
.choose-card .choose-rec {
font-family: var(--mono);
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 4px;
align-self: flex-start;
margin-top: 8px;
padding: 1px 6px;
font-size: 9px;
}
.choose-card.is-ai:hover {
border-color: var(--ai);
}
.choose-card.is-ai .choose-ic {
background: var(--ai-soft);
color: var(--ai-deep);
}
.choose-card.is-ai.is-recommended {
border-color: var(--ai);
box-shadow: 0 0 0 3px #6d5ae024;
}
@supports (color: color-mix(in lab, red, red)) {
.choose-card.is-ai.is-recommended {
box-shadow: 0 0 0 3px color-mix(in srgb,var(--ai) 14%,transparent);
}
}
.choose-card.is-ai .choose-rec {
color: var(--ai-deep);
background: var(--ai-soft);
}
.step-kicker {
font-family: var(--mono);
color: var(--ink-4);
letter-spacing: .05em;
text-transform: uppercase;
font-size: 10px;
}
.step-head {
align-items: center;
gap: 10px;
margin-bottom: 4px;
display: flex;
}
.step-name {
border: none;
border-bottom: 2px dashed var(--rule);
width: 100%;
font-size: 20px;
font-weight: 700;
font-family: var(--font);
color: var(--ink);
background: none;
padding: 2px 0;
}
.step-name:focus {
border-bottom-color: var(--mod);
border-bottom-style: solid;
outline: none;
}
.step-name::placeholder {
color: var(--ink-4);
font-style: italic;
font-weight: 400;
}
.opt-toggle {
color: var(--ink-4);
white-space: nowrap;
align-items: center;
gap: 7px;
margin-left: auto;
font-size: 11.5px;
display: inline-flex;
}
.recipe {
border: 1px solid var(--mod);
margin: 16px 0 18px;
}
@supports (color: color-mix(in lab, red, red)) {
.recipe {
border: 1px solid color-mix(in srgb,var(--mod) 24%,var(--white));
}
}
.recipe {
background: var(--mod-soft);
border-radius: var(--r-md);
padding: 12px 14px;
}
.recipe-h {
color: var(--mod-deep);
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
display: flex;
}
.recipe-h svg, .recipe-h .ico {
width: 15px;
height: 15px;
}
.recipe-h .sk {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 10px;
font-weight: 400;
}
.recipe-flow {
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 10px;
display: flex;
}
.rstep {
white-space: nowrap;
border: 1px solid;
border-radius: 99px;
align-items: center;
gap: 6px;
padding: 5px 10px;
font-size: 11.5px;
font-weight: 600;
display: inline-flex;
}
.rstep svg, .rstep .ico {
width: 13px;
height: 13px;
}
.rstep.done {
background: var(--status-ok-soft);
color: var(--status-ok);
border-color: #c1dcca;
}
@supports (color: color-mix(in lab, red, red)) {
.rstep.done {
border-color: color-mix(in srgb,var(--status-ok) 30%,var(--white));
}
}
.rstep.todo {
background: var(--white);
color: var(--ink-3);
border-color: var(--rule);
cursor: pointer;
border-style: dashed;
}
.rstep.todo:hover {
border-color: var(--mod);
color: var(--mod-deep);
}
.rarrow {
color: var(--ink-4);
font-size: 12px;
}
.bcard.is-optional {
border-style: dashed;
}
.bcard-h {
border-bottom: 1px solid var(--rule-soft);
align-items: center;
gap: 9px;
padding: 10px 13px;
display: flex;
}
.bic {
background: var(--paper-2);
width: 26px;
height: 26px;
color: var(--ink-2);
border-radius: 6px;
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.bic svg, .bic .ico {
width: 15px;
height: 15px;
}
.bic.safety, .bic.psa, .picker .pk-ic.safety, .picker .pk-ic.psa {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.bic.media, .picker .pk-ic.media {
background: var(--label-slate-soft);
color: var(--label-slate);
}
.bic.parts, .bic.betrieb, .picker .pk-ic.parts, .picker .pk-ic.betrieb {
background: var(--mod-soft);
color: var(--mod-deep);
}
.bic.instr, .picker .pk-ic.instr {
background: var(--paper-2);
color: var(--ink-2);
}
.bic.tools, .picker .pk-ic.tools {
background: var(--label-teal-soft);
color: var(--label-teal);
}
.bic.spec, .picker .pk-ic.spec {
background: var(--label-violet-soft);
color: var(--label-violet);
}
.bic.qs, .picker .pk-ic.qs {
background: var(--status-info-soft);
color: var(--status-info);
}
.bcard-meta {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 10px;
}
.bcard-x {
border-radius: var(--r-sm);
width: 26px;
height: 26px;
color: var(--ink-4);
cursor: pointer;
background: none;
border: 1px solid #0000;
justify-content: center;
align-items: center;
display: inline-flex;
}
.bcard-x:hover {
color: var(--status-risk);
background: var(--status-risk-soft);
}
.bcard-b {
color: var(--ink-3);
padding: 11px 13px;
font-size: 12.5px;
line-height: 1.5;
}
.add-block {
border: 1px dashed var(--rule);
border-radius: var(--r-md);
height: 42px;
color: var(--ink-4);
cursor: pointer;
background: none;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
display: flex;
}
.add-block:hover {
border-color: var(--mod);
color: var(--mod-deep);
}
.add-block svg, .add-block .ico {
width: 15px;
height: 15px;
}
.picker .pk-h {
border-bottom: 1px solid var(--rule);
padding: 14px 16px;
}
.picker .pk-h .pt {
color: var(--ink);
font-size: 15px;
font-weight: 700;
}
.picker .pk-h .ps {
color: var(--ink-3);
margin-top: 2px;
font-size: 12px;
}
.picker .pk-search {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
height: 34px;
color: var(--ink-4);
align-items: center;
gap: 8px;
margin: 12px 16px 4px;
padding: 0 11px;
font-size: 12.5px;
display: flex;
}
.picker .pk-search svg, .picker .pk-search .ico {
width: 15px;
height: 15px;
}
.picker .pk-search input {
color: var(--ink);
background: none;
border: none;
outline: none;
flex: 1;
font-family: inherit;
font-size: 12.5px;
}
.picker .pk-search input::placeholder {
color: var(--ink-4);
}
.picker .pk-group {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
padding: 12px 16px 4px;
font-size: 9.5px;
}
.picker .pk-group.rec {
color: var(--mod-deep);
}
.picker .pk-row:hover {
background: var(--mod-soft);
}
.picker .pk-ic {
background: var(--paper-2);
width: 30px;
height: 30px;
color: var(--ink-2);
border-radius: 7px;
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.picker .pk-ic svg, .picker .pk-ic .ico {
width: 16px;
height: 16px;
}
.picker .pk-row.rec .pk-ic {
background: var(--mod-soft);
color: var(--mod-deep);
}
.picker .pk-tx .pt2 {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.picker .pk-tx .pd2 {
color: var(--ink-3);
margin-top: 1px;
font-size: 11.5px;
}
.picker .pk-badge {
font-family: var(--mono);
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 99px;
flex: none;
margin-left: auto;
padding: 2px 8px;
font-size: 9px;
}
.prevcard {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
overflow: hidden;
}
.figview {
aspect-ratio: 4 / 3;
background: var(--paper-2);
width: 100%;
position: relative;
overflow: hidden;
}
.figview > img, .figview > image-slot, .figview .fv-img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
position: absolute;
inset: 0;
}
.figview .studio-marker, .figview .fig-pin {
pointer-events: none;
}
.studio-marker.is-preview {
width: 22px;
height: 22px;
font-size: 10px;
}
.studio-marker.is-preview[data-shape="rect"] {
width: 28px;
height: 20px;
}
.studio-marker.is-preview[data-shape="circle-lg"] {
width: 26px;
height: 26px;
}
.studio-marker.is-preview .m-sym, .studio-marker.is-preview .m-sym .ico {
width: 12px;
height: 12px;
}
.figview .fv-badge {
z-index: 3;
background: #1c1a17c7;
align-items: center;
gap: 6px;
display: inline-flex;
position: absolute;
top: 8px;
left: 8px;
}
@supports (color: color-mix(in lab, red, red)) {
.figview .fv-badge {
background: color-mix(in srgb,var(--ink) 78%,transparent);
}
}
.figview .fv-badge {
color: var(--white);
font-family: var(--mono);
border-radius: 99px;
padding: 3px 8px;
font-size: 9.5px;
}
.figview-empty {
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 9px;
padding: 16px;
display: flex;
position: absolute;
inset: 0;
}
.figview-empty .fe-ic {
background: var(--mod-soft);
width: 40px;
height: 40px;
color: var(--mod-deep);
border-radius: 12px;
justify-content: center;
align-items: center;
display: flex;
}
.figview-empty .fe-ic svg, .figview-empty .fe-ic .ico {
width: 22px;
height: 22px;
}
.figview-empty .fe-t {
color: var(--ink-3);
max-width: 200px;
font-size: 12px;
line-height: 1.4;
}
.figview-empty .fe-cta {
font-family: var(--font);
color: var(--mod-deep);
background: var(--mod-soft);
border: 1px solid var(--mod);
font-size: 11.5px;
font-weight: 600;
}
@supports (color: color-mix(in lab, red, red)) {
.figview-empty .fe-cta {
border: 1px solid color-mix(in srgb,var(--mod) 30%,var(--white));
}
}
.figview-empty .fe-cta {
border-radius: var(--r-sm);
cursor: pointer;
align-items: center;
gap: 6px;
padding: 5px 10px;
display: inline-flex;
}
.figview-empty .fe-cta svg, .figview-empty .fe-cta .ico {
width: 14px;
height: 14px;
}
.pc-body {
padding: 12px;
}
.pc-step {
font-family: var(--mono);
color: var(--ink-4);
font-size: 9px;
}
.pc-title {
color: var(--ink);
margin: 3px 0 10px;
font-size: 14px;
font-weight: 700;
}
.factrail.is-compact {
gap: 7px;
}
.factrail.is-compact .factrow {
padding: 7px 9px;
}
.factrow.is-open {
background: var(--paper);
border-style: dashed;
}
.factrow.is-open .factrow-main {
color: var(--ink-4);
font-weight: 400;
}
.fv-toggle {
z-index: 3;
background: #1c1a17b8;
border-radius: 99px;
gap: 2px;
padding: 2px;
display: inline-flex;
position: absolute;
top: 8px;
right: 8px;
}
@supports (color: color-mix(in lab, red, red)) {
.fv-toggle {
background: color-mix(in srgb,var(--ink) 72%,transparent);
}
}
.fv-toggle button {
color: #ffffffb8;
font-family: var(--mono);
letter-spacing: .02em;
cursor: pointer;
background: none;
border: none;
border-radius: 99px;
padding: 3px 9px;
font-size: 9px;
}
.fv-toggle button.is-on {
background: var(--white);
color: var(--ink);
}
.numstep {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
align-items: stretch;
width: max-content;
height: 34px;
display: inline-flex;
overflow: hidden;
}
.numstep button {
background: var(--paper-2);
width: 30px;
color: var(--ink-2);
cursor: pointer;
font-size: 16px;
line-height: 1;
font-family: var(--font);
border: none;
justify-content: center;
align-items: center;
display: flex;
}
.numstep button:hover {
background: var(--mod-soft);
color: var(--mod-deep);
}
.numstep button:disabled {
color: var(--ink-4);
cursor: not-allowed;
background: var(--paper);
}
.numstep input {
text-align: center;
width: 48px;
font-family: var(--mono);
color: var(--ink);
-moz-appearance: textfield;
background: none;
border: none;
outline: none;
font-size: 13px;
font-weight: 600;
}
.numstep input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.numstep input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.numstep .unit {
font-family: var(--mono);
color: var(--ink-4);
background: var(--paper);
border-left: 1px solid var(--rule);
white-space: nowrap;
align-items: center;
padding: 0 9px;
font-size: 11px;
display: flex;
}
.measrow {
flex-wrap: wrap;
align-items: flex-end;
gap: 8px;
display: flex;
}
.measrow .field {
flex-direction: column;
gap: 4px;
display: flex;
}
.measrow .tol-pm {
font-family: var(--mono);
color: var(--ink-4);
align-self: center;
padding-bottom: 8px;
font-size: 13px;
}
.measrow .select {
width: auto;
height: 34px;
padding-top: 0;
padding-bottom: 0;
}
.actmenu {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
min-width: 210px;
max-width: 320px;
box-shadow: var(--shadow-pop);
z-index: var(--z-picker);
flex-direction: column;
gap: 1px;
padding: 5px;
display: flex;
}
.actmenu button, .actmenu a {
text-align: left;
width: 100%;
font-family: var(--font);
color: var(--ink-2);
border-radius: var(--r-sm);
cursor: pointer;
background: none;
border: 0;
align-items: center;
gap: 9px;
padding: 7px 9px;
font-size: 13px;
text-decoration: none;
display: flex;
}
.actmenu button:hover, .actmenu a:hover {
background: var(--mod-soft);
color: var(--mod-deep);
}
.actmenu button:disabled {
color: var(--ink-4);
cursor: default;
background: none;
}
.actmenu .am-ic {
width: 16px;
height: 16px;
color: var(--ink-4);
flex: none;
}
.actmenu button:hover .am-ic, .actmenu a:hover .am-ic {
color: var(--mod-deep);
}
.actmenu .am-sep {
background: var(--rule);
height: 1px;
margin: 4px 2px;
}
.actmenu .am-lbl {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ink-4);
padding: 6px 9px 3px;
font-size: 10px;
}
.actmenu .is-danger {
color: var(--status-risk);
}
.actmenu .is-danger:hover {
background: var(--status-risk-soft);
color: var(--status-risk);
}
.actmenu .is-danger .am-ic {
color: var(--status-risk);
}
.alg-list {
flex-wrap: wrap;
gap: 7px;
display: flex;
}
.alg {
--al: var(--ink-3);
border-radius: var(--r-sm);
border: 1.5px solid var(--al);
align-items: center;
gap: 7px;
padding: 4px 10px;
display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
.alg {
border: 1.5px solid color-mix(in srgb, var(--al) 45%, var(--white));
}
}
.alg {
background: var(--al);
}
@supports (color: color-mix(in lab, red, red)) {
.alg {
background: color-mix(in srgb, var(--al) 7%, var(--white));
}
}
.alg {
color: var(--al);
font-size: var(--k-fs-meta, 13px);
white-space: normal;
text-align: left;
font-weight: 600;
}
.alg .code {
font-family: var(--mono);
letter-spacing: .02em;
font-weight: 700;
}
.alg.is-trace {
border-style: dashed;
}
.alg.is-trace .code:after {
content: "·";
color: var(--ink-4);
margin-left: 5px;
}
.alg.is-unknown {
--al: var(--status-warn-deep);
border-color: var(--status-warn);
background: var(--status-warn-soft);
}
.alg-veg {
--al: var(--mod-deep);
}
.personhover {
display: inline-flex;
position: relative;
}
.personhover-pop {
z-index: 200;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
width: max-content;
min-width: 170px;
max-width: 230px;
box-shadow: var(--shadow-pop);
pointer-events: none;
flex-direction: column;
padding: 10px 11px;
display: flex;
position: fixed;
}
.personhover-head {
align-items: center;
gap: 8px;
display: flex;
}
.personhover-id {
flex-direction: column;
min-width: 0;
display: flex;
}
.personhover-nm {
color: var(--ink);
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
display: flex;
}
.personhover-inact {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
border: 1px solid var(--rule);
border-radius: 99px;
padding: 0 5px;
font-size: 8.5px;
}
.personhover-role {
color: var(--ink-3);
margin-top: 1px;
font-size: 11px;
}
.personhover-row {
border-top: 1px solid var(--rule-soft);
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 8px;
padding-top: 8px;
display: flex;
}
.personhover-k {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9.5px;
}
.personhover-v {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--ink-2);
font-size: 11px;
}
.personhover-v.is-over {
color: var(--status-risk-deep);
font-weight: 600;
}
.sub-cmt {
align-items: flex-start;
gap: 8px;
padding: 5px 0;
display: flex;
}
.sub-cmt-b {
color: var(--ink-2);
min-width: 0;
font-size: 12px;
line-height: 1.45;
}
.sub-cmt-b .nm {
color: var(--ink-2);
font-weight: 600;
}
.sub-cmt.gone {
opacity: .5;
}
.sub-cmt.gone .tx {
text-decoration: line-through;
}
.sub-locked {
color: var(--ink-4);
padding: 3px 0;
font-size: 11px;
font-style: italic;
}
.sub-more {
cursor: pointer;
font-family: var(--mono);
color: var(--mod-deep);
text-align: left;
background: none;
border: none;
padding: 2px 0 4px;
font-size: 10px;
}
.panel-work {
border-radius: var(--r-lg);
border: 1px solid var(--rule-strong);
box-shadow: 0 1px 2px #1a1a1a0f;
}
.panel-work > .tbl-list thead th {
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.check-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 2px 14px;
display: grid;
}
.check-row {
border-radius: var(--r-sm);
cursor: pointer;
align-items: center;
gap: 9px;
min-width: 0;
padding: 7px 8px 7px 4px;
display: flex;
}
.check-box {
border: 1.5px solid var(--rule);
background: var(--white);
color: #0000;
border-radius: 5px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 17px;
height: 17px;
display: flex;
}
.check-box .ico {
stroke-width: 3px;
width: 12px;
height: 12px;
}
.check-lb {
color: var(--ink-2);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
line-height: 1.3;
overflow: hidden;
}
.check-row.is-on .check-box {
background: var(--mod);
border-color: var(--mod);
color: var(--white);
}
.check-row.is-disabled {
cursor: not-allowed;
}
.check-row.is-disabled .check-box {
background: var(--paper-2);
border-color: var(--rule);
}
.check-row.is-disabled .check-lb {
color: var(--ink-4);
}
.check-row:focus-visible {
outline: 2px solid var(--mod);
outline-offset: 1px;
}
.check-row input[type="checkbox"] {
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.check-row .ck-x {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 10px;
}
.check-hint {
color: var(--ink-4);
margin-top: 6px;
font-size: 11px;
line-height: 1.45;
}
.hubsec + .hubsec {
margin-top: 22px;
}
.hubsec-head {
align-items: center;
gap: 10px;
margin-bottom: 10px;
display: flex;
}
.hubsec-ic {
border-radius: var(--r-sm);
background: var(--mod-soft, var(--brand-primary-soft));
width: 26px;
height: 26px;
color: var(--mod-deep, var(--brand-primary-deep));
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.hubsec-ic .ico {
width: 15px;
height: 15px;
}
.hubsec-nm {
color: var(--ink);
letter-spacing: -.01em;
font-size: 15px;
font-weight: 600;
}
.hubsec-c {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10px;
}
.hubsec-rule {
background: var(--rule);
flex: 1;
height: 1px;
}
.hubsec-open {
color: var(--mod-deep, var(--brand-primary-deep));
white-space: nowrap;
font-size: 12px;
font-weight: 500;
text-decoration: none;
}
.hubsec-open:hover {
text-decoration: underline;
}
.hublist {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
overflow: hidden;
}
.hubrow {
color: inherit;
border-top: 1px solid var(--rule-soft);
align-items: center;
gap: 11px;
padding: 12px 14px;
text-decoration: none;
display: flex;
}
.hubrow:first-child {
border-top: none;
}
.hubrow:hover {
background: var(--paper);
text-decoration: none;
}
.hubrow-ic {
width: 18px;
height: 18px;
color: var(--ink-4);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.hubrow-ic .ico {
width: 15px;
height: 15px;
}
.hubrow-lb {
color: var(--ink);
font-size: 13.5px;
font-weight: 500;
}
.hubrow-sub {
color: var(--ink-4);
margin-left: 2px;
font-size: 11.5px;
}
.hubrow-sig {
align-items: center;
gap: 8px;
margin-left: auto;
display: flex;
}
.hubrow-cv {
width: 14px;
height: 14px;
color: var(--ink-4);
flex-shrink: 0;
}
.hubrow:hover .hubrow-ic, .hubrow:hover .hubrow-cv {
color: var(--mod-deep, var(--brand-primary-deep));
}
@media (max-width: 1080px) {
.fb-board {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.skel i {
animation: none;
}
.hx-drawer-backdrop, .hx-drawer {
transition: none;
}
.ai-skel i, .mc-ai.is-loading .mc-ai-t {
animation: none;
}
.cs-adv-toggle .car, .cs-adv-body {
transition: none;
}
.ai-pulse, .ai-pulse:after, .env-badge .dot:after, .studio-marker.is-tap.is-unread:before {
animation: none;
}
}
@media (prefers-reduced-motion: no-preference) {
.hx-dialog, .hx-pop, .hx-tip {
animation: hx-pop var(--transition-overlay-in);
}
.hx-toast {
animation: hx-rise var(--transition-drawer-in);
}
@keyframes hx-pop {
from {
opacity: 0;
transform: scale(.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes hx-rise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
@media (max-width: 768px) {
.hx-drawer, .hx-drawer.is-wide {
border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
width: 100%;
max-height: 92vh;
top: auto;
left: 0;
right: 0;
transform: translateY(100%);
}
.hx-drawer.is-open {
transform: none;
}
.hx-detail {
grid-template-columns: 1fr;
}
.hx-detail-meta {
order: -1;
}
}
@media (max-width: 720px) {
.detail-facts-grp + .detail-facts-grp {
border-left: none;
border-top: 1px solid var(--rule);
flex-basis: 100%;
padding-top: 11px;
padding-left: 0;
}
}
@media (max-width: 820px) {
.acc-layout {
grid-template-columns: 1fr;
}
.acc-vis {
position: static;
}
}
@media (max-width: 900px) {
.detail-layout {
flex-direction: column;
}
}
@media (max-width: 1024px) {
.overview {
grid-template-columns: 1fr;
}
.overview-rail.is-sticky {
position: static;
}
}
@media print {
.topbar, .uw-rail, .horn-subnav, .page-title, .dv-print-hide {
display: none !important;
}
body {
background: var(--white);
}
.dv {
box-shadow: none;
border: none;
max-width: none;
padding: 0;
}
}
.rdp-root {
--rdp-accent-color: blue;
--rdp-accent-background-color: #f0f0ff;
--rdp-day-height: 44px;
--rdp-day-width: 44px;
--rdp-day_button-border-radius: 100%;
--rdp-day_button-border: 2px solid transparent;
--rdp-day_button-height: 42px;
--rdp-day_button-width: 42px;
--rdp-selected-border: 2px solid var(--rdp-accent-color);
--rdp-disabled-opacity: .5;
--rdp-outside-opacity: .75;
--rdp-today-color: var(--rdp-accent-color);
--rdp-dropdown-gap: .5rem;
--rdp-months-gap: 2rem;
--rdp-nav_button-disabled-opacity: .5;
--rdp-nav_button-height: 2.25rem;
--rdp-nav_button-width: 2.25rem;
--rdp-nav-height: 2.75rem;
--rdp-range_middle-background-color: var(--rdp-accent-background-color);
--rdp-range_middle-color: inherit;
--rdp-range_start-color: white;
--rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction),
transparent 50%,
var(--rdp-range_middle-background-color) 50%);
--rdp-range_start-date-background-color: var(--rdp-accent-color);
--rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction),
var(--rdp-range_middle-background-color) 50%,
transparent 50%);
--rdp-range_end-color: white;
--rdp-range_end-date-background-color: var(--rdp-accent-color);
--rdp-week_number-border-radius: 100%;
--rdp-week_number-border: 2px solid transparent;
--rdp-week_number-height: var(--rdp-day-height);
--rdp-week_number-opacity: .75;
--rdp-week_number-width: var(--rdp-day-width);
--rdp-weeknumber-text-align: center;
--rdp-weekday-opacity: .75;
--rdp-weekday-padding: .5rem 0rem;
--rdp-weekday-text-align: center;
--rdp-gradient-direction: 90deg;
--rdp-animation_duration: .3s;
--rdp-animation_timing: cubic-bezier(.4, 0, .2, 1);
}
.rdp-root[dir="rtl"] {
--rdp-gradient-direction: -90deg;
}
.rdp-root[data-broadcast-calendar="true"] {
--rdp-outside-opacity: unset;
}
.rdp-root {
box-sizing: border-box;
position: relative;
}
.rdp-root * {
box-sizing: border-box;
}
.rdp-day {
width: var(--rdp-day-width);
height: var(--rdp-day-height);
text-align: center;
}
.rdp-day_button {
cursor: pointer;
font: inherit;
color: inherit;
width: var(--rdp-day_button-width);
height: var(--rdp-day_button-height);
border: var(--rdp-day_button-border);
border-radius: var(--rdp-day_button-border-radius);
background: none;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: flex;
}
.rdp-day_button:disabled {
cursor: revert;
}
.rdp-caption_label {
z-index: 1;
white-space: nowrap;
border: 0;
align-items: center;
display: inline-flex;
position: relative;
}
.rdp-dropdown:focus-visible ~ .rdp-caption_label {
outline: 5px auto highlight;
outline: 5px auto -webkit-focus-ring-color;
}
.rdp-button_next, .rdp-button_previous {
cursor: pointer;
font: inherit;
color: inherit;
appearance: none;
width: var(--rdp-nav_button-width);
height: var(--rdp-nav_button-height);
background: none;
border: none;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: inline-flex;
position: relative;
}
.rdp-button_next:disabled, .rdp-button_next[aria-disabled="true"], .rdp-button_previous:disabled, .rdp-button_previous[aria-disabled="true"] {
cursor: revert;
opacity: var(--rdp-nav_button-disabled-opacity);
}
.rdp-chevron {
fill: var(--rdp-accent-color);
display: inline-block;
}
.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
transform-origin: 50%;
transform: rotate(180deg);
}
.rdp-dropdowns {
align-items: center;
gap: var(--rdp-dropdown-gap);
display: inline-flex;
position: relative;
}
.rdp-dropdown {
z-index: 2;
opacity: 0;
appearance: none;
width: 100%;
cursor: inherit;
line-height: inherit;
border: none;
margin: 0;
padding: 0;
position: absolute;
inset-block: 0;
inset-inline-start: 0;
}
.rdp-dropdown_root {
align-items: center;
display: inline-flex;
position: relative;
}
.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
opacity: var(--rdp-disabled-opacity);
}
.rdp-month_caption {
height: var(--rdp-nav-height);
align-content: center;
font-size: large;
font-weight: bold;
display: flex;
}
.rdp-root[data-nav-layout="around"] .rdp-month, .rdp-root[data-nav-layout="after"] .rdp-month {
position: relative;
}
.rdp-root[data-nav-layout="around"] .rdp-month_caption {
justify-content: center;
margin-inline-start: var(--rdp-nav_button-width);
margin-inline-end: var(--rdp-nav_button-width);
position: relative;
}
.rdp-root[data-nav-layout="around"] .rdp-button_previous {
inset-inline-start: 0;
height: var(--rdp-nav-height);
display: inline-flex;
position: absolute;
top: 0;
}
.rdp-root[data-nav-layout="around"] .rdp-button_next {
inset-inline-end: 0;
height: var(--rdp-nav-height);
justify-content: center;
display: inline-flex;
position: absolute;
top: 0;
}
.rdp-months {
gap: var(--rdp-months-gap);
flex-wrap: wrap;
max-width: fit-content;
display: flex;
position: relative;
}
.rdp-month_grid {
border-collapse: collapse;
}
.rdp-nav {
height: var(--rdp-nav-height);
align-items: center;
display: flex;
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
}
.rdp-weekday {
opacity: var(--rdp-weekday-opacity);
padding: var(--rdp-weekday-padding);
text-align: var(--rdp-weekday-text-align);
text-transform: var(--rdp-weekday-text-transform);
font-size: smaller;
font-weight: 500;
}
.rdp-week_number {
opacity: var(--rdp-week_number-opacity);
height: var(--rdp-week_number-height);
width: var(--rdp-week_number-width);
border: var(--rdp-week_number-border);
border-radius: var(--rdp-week_number-border-radius);
text-align: var(--rdp-weeknumber-text-align);
font-size: small;
font-weight: 400;
}
.rdp-today:not(.rdp-outside) {
color: var(--rdp-today-color);
}
.rdp-selected {
font-size: large;
font-weight: bold;
}
.rdp-selected .rdp-day_button {
border: var(--rdp-selected-border);
}
.rdp-outside {
opacity: var(--rdp-outside-opacity);
}
.rdp-disabled:not(.rdp-selected) {
opacity: var(--rdp-disabled-opacity);
}
.rdp-hidden {
visibility: hidden;
color: var(--rdp-range_start-color);
}
.rdp-range_start {
background: var(--rdp-range_start-background);
}
.rdp-range_start .rdp-day_button {
background-color: var(--rdp-range_start-date-background-color);
color: var(--rdp-range_start-color);
}
.rdp-range_middle {
background-color: var(--rdp-range_middle-background-color);
}
.rdp-range_middle .rdp-day_button {
border: unset;
border-radius: unset;
color: var(--rdp-range_middle-color);
}
.rdp-range_end {
background: var(--rdp-range_end-background);
color: var(--rdp-range_end-color);
}
.rdp-range_end .rdp-day_button {
color: var(--rdp-range_start-color);
background-color: var(--rdp-range_end-date-background-color);
}
.rdp-range_start.rdp-range_end {
background: revert;
}
.rdp-focusable {
cursor: pointer;
}
@keyframes rdp-slide_in_left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes rdp-slide_in_right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes rdp-slide_out_left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes rdp-slide_out_right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.rdp-weeks_before_enter {
animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-weeks_before_exit {
animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-weeks_after_enter {
animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-weeks_after_exit {
animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
@keyframes rdp-fade_in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes rdp-fade_out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.rdp-caption_after_enter {
animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-caption_after_exit {
animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-caption_before_enter {
animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.rdp-caption_before_exit {
animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
}
.horn-dt-field, .horn-dt-datetime, .horn-dt-dtd, .horn-dt-range, .horn-dt-timerange, .horn-dt-duration {
font-family: var(--font-sans, system-ui, sans-serif);
font-size: 14px;
}
.horn-dt-datetime, .horn-dt-timerange {
align-items: center;
gap: 8px;
display: flex;
}
.horn-dt-dtd {
flex-direction: column;
gap: 8px;
display: flex;
}
.horn-dt-trigger, .horn-dt-time {
border: 1px solid var(--color-rule, #e6e3dc);
background: var(--color-white, #fff);
color: var(--color-ink, #1a1a1a);
cursor: pointer;
border-radius: 6px;
min-height: 36px;
padding: 6px 10px;
}
.horn-dt-popover {
display: inline-block;
position: relative;
}
.horn-dt-panel {
z-index: 50;
background: var(--color-white, #fff);
border: 1px solid var(--color-rule, #e6e3dc);
border-radius: 8px;
margin-top: 4px;
padding: 8px;
position: absolute;
box-shadow: 0 8px 24px #0000001f;
}
.horn-dt-duration {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.horn-dt-chip {
border: 1px solid var(--color-rule, #e6e3dc);
background: var(--color-white, #fff);
color: var(--color-ink-2, #3a3a3a);
cursor: pointer;
border-radius: 999px;
min-height: 32px;
padding: 4px 12px;
}
.horn-dt-chip--active {
border-color: var(--color-horn-blue, #327cd9);
background: var(--color-horn-blue-soft, #e6effa);
color: var(--color-horn-blue-deep, #1e5cb0);
font-weight: 500;
}
.horn-dt-duration-custom {
border: 1px solid var(--color-rule, #e6e3dc);
border-radius: 6px;
width: 72px;
min-height: 32px;
padding: 4px 8px;
}
.horn-dt-endline {
color: var(--color-ink-3, #6a6a6a);
font-size: 13px;
}
.horn-dt-sep {
color: var(--color-ink-3, #6a6a6a);
}
.horn-dt-range-times {
gap: 8px;
margin-top: 8px;
display: flex;
}
.horn-dt-rdp {
--rdp-accent-color: var(--color-horn-blue, #327cd9);
--rdp-accent-background-color: var(--color-horn-blue-soft, #e6effa);
--rdp-today-color: var(--color-horn-blue-deep, #1e5cb0);
}
@media (max-width: 640px) {
.horn-dt-panel {
border-radius: 12px 12px 0 0;
margin: 0;
padding: 16px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
[data-module="cmdb"] {
--mod: var(--mod-cmdb);
--mod-soft: var(--mod-cmdb-soft);
--mod-deep: var(--mod-cmdb-deep);
}
[data-module="regulierte-stoffe"] {
--mod: var(--mod-regulierte-stoffe);
--mod-soft: var(--mod-regulierte-stoffe-soft);
--mod-deep: var(--mod-regulierte-stoffe-deep);
}
[data-module="projekte"] {
--mod: var(--mod-projekte);
--mod-soft: var(--mod-projekte-soft);
--mod-deep: var(--mod-projekte-deep);
}
[data-module="compliance"] {
--mod: var(--mod-compliance);
--mod-soft: var(--mod-compliance-soft);
--mod-deep: var(--mod-compliance-deep);
}
[data-module="digital-puls"] {
--mod: var(--mod-digital-puls);
--mod-soft: var(--mod-digital-puls-soft);
--mod-deep: var(--mod-digital-puls-deep);
}
[data-module="fertigung"] {
--mod: var(--mod-fertigung);
--mod-soft: var(--mod-fertigung-soft);
--mod-deep: var(--mod-fertigung-deep);
}
[data-module="stammdaten"] {
--mod: var(--mod-stammdaten);
--mod-soft: var(--mod-stammdaten-soft);
--mod-deep: var(--mod-stammdaten-deep);
}
[data-module="intranet"] {
--mod: var(--mod-intranet);
--mod-soft: var(--mod-intranet-soft);
--mod-deep: var(--mod-intranet-deep);
}
[data-module="prozesse"] {
--mod: var(--mod-prozesse);
--mod-soft: var(--mod-prozesse-soft);
--mod-deep: var(--mod-prozesse-deep);
}
[data-module="kantine"] {
--mod: var(--mod-kantine);
--mod-soft: var(--mod-kantine-soft);
--mod-deep: var(--mod-kantine-deep);
}
[data-module="wiki"] {
--mod: var(--mod-wiki);
--mod-soft: var(--mod-wiki-soft);
--mod-deep: var(--mod-wiki-deep);
}
[data-module="wissen"] {
--mod: var(--mod-wissen);
--mod-soft: var(--mod-wissen-soft);
--mod-deep: var(--mod-wissen-deep);
}
[data-module="crm"] {
--mod: var(--mod-crm);
--mod-soft: var(--mod-crm-soft);
--mod-deep: var(--mod-crm-deep);
}
[data-module="erp"] {
--mod: var(--mod-erp);
--mod-soft: var(--mod-erp-soft);
--mod-deep: var(--mod-erp-deep);
}
[data-module="ideenpool"] {
--mod: var(--mod-ideenpool);
--mod-soft: var(--mod-ideenpool-soft);
--mod-deep: var(--mod-ideenpool-deep);
}
[data-module="chatbot"] {
--mod: var(--mod-chatbot);
--mod-soft: var(--mod-chatbot-soft);
--mod-deep: var(--mod-chatbot-deep);
}
[data-module="lernpfade"] {
--mod: var(--mod-lernpfade);
--mod-soft: var(--mod-lernpfade-soft);
--mod-deep: var(--mod-lernpfade-deep);
}
[data-module="glossar"] {
--mod: var(--mod-glossar);
--mod-soft: var(--mod-glossar-soft);
--mod-deep: var(--mod-glossar-deep);
}
[data-module="digital-puls"].dp-page, .platform-accent-fallback {
--mod: var(--brand-primary);
--mod-soft: var(--brand-primary-soft);
--mod-deep: var(--brand-primary-deep);
}
[data-env="dev"] {
--env: var(--env-dev);
--env-soft: var(--env-dev-soft);
--env-deep: var(--env-dev-deep);
}
[data-env="stage"] {
--env: var(--env-stage);
--env-soft: var(--env-stage-soft);
--env-deep: var(--env-stage-deep);
}
[data-env="prod"] {
--env: transparent;
--env-soft: var(--white);
--env-deep: var(--ink-3);
}
.devpanel .devuser .av {
background: var(--ai);
}
.dp-intro {
text-align: center;
max-width: 680px;
margin: 0 auto;
padding: 8px 0;
}
.dp-fun-headline {
letter-spacing: -.01em;
color: var(--ink-2);
text-wrap: pretty;
margin-bottom: 28px;
font-size: 19px;
font-weight: 700;
}
.dp-ai-orb {
background: radial-gradient(circle at 32% 28%, var(--ai-bright, var(--ai)), var(--ai));
border-radius: 50%;
place-items: center;
display: grid;
}
.dp-ai-orb svg {
width: 60%;
height: 60%;
}
@keyframes dp-orbpulse {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 45%, transparent);
}
50% {
box-shadow: 0 0 0 10px color-mix(in srgb, var(--ai) 0%, transparent);
}
}
.dp-orb-pulse {
animation: 2.2s ease-in-out infinite dp-orbpulse;
}
.dp-team-lineup {
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 16px;
margin: 0 auto 22px;
display: flex;
}
.dp-team-member {
flex-direction: column;
align-items: center;
gap: 9px;
display: flex;
}
.dp-tm-mark {
justify-content: center;
align-items: center;
height: 48px;
display: flex;
}
.dp-horn-mark {
align-items: center;
height: 48px;
padding: 0 8px;
display: flex;
}
.dp-hub-mark {
background: var(--white);
border: 1.5px solid var(--rule);
letter-spacing: -.01em;
height: 48px;
color: var(--ink);
border-radius: 14px;
align-items: center;
gap: 9px;
padding: 0 16px;
font-size: 18px;
font-weight: 700;
display: flex;
}
.dp-hub-mark .dp-h-box {
background: var(--brand-primary);
width: 28px;
height: 28px;
color: var(--white);
border-radius: 7px;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: 800;
display: inline-flex;
}
.dp-hub-mark > span:not(.dp-h-box) {
color: var(--ink-3);
margin-left: 3px;
font-weight: 400;
}
.dp-tm-mark.dp-ai-orb {
border-radius: 50%;
width: 48px;
height: 48px;
}
.dp-tm-role {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9.5px;
}
.dp-team-plus {
height: 48px;
color: var(--ink-4);
align-items: center;
font-size: 22px;
font-weight: 300;
display: flex;
}
.dp-team-caption {
text-align: center;
color: var(--ink-4);
margin-bottom: 8px;
font-size: 12.5px;
}
.dp-hornaut-card {
text-align: left;
border: 1px solid var(--rule);
border-radius: var(--r-lg);
background: var(--white);
margin: 0 0 22px;
padding: 16px 18px;
}
.dp-cs-tx {
color: var(--ink-2);
min-height: 1.5em;
font-size: 14px;
line-height: 1.7;
}
.dp-cs-typing-bubble {
background: var(--paper-2);
border-radius: 999px;
align-items: center;
gap: 4px;
padding: 11px 16px;
display: inline-flex;
}
.dp-cs-typing-bubble i {
background: var(--ink-4);
border-radius: 50%;
width: 6px;
height: 6px;
font-style: normal;
animation: 1.2s ease-in-out infinite dp-typedot;
display: inline-block;
}
.dp-cs-typing-bubble i:nth-child(2) {
animation-delay: .18s;
}
.dp-cs-typing-bubble i:nth-child(3) {
animation-delay: .36s;
}
@keyframes dp-typedot {
0%, 60%, 100% {
opacity: .35;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-2px);
}
}
.dp-type-caret {
background: var(--ai);
vertical-align: text-bottom;
width: 2px;
height: 1.05em;
margin-left: 1px;
animation: .9s step-end infinite dp-caretblink;
display: inline-block;
}
@keyframes dp-caretblink {
50% {
opacity: 0;
}
}
.dp-dup-note {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: var(--ink-3);
align-items: center;
gap: 9px;
margin-bottom: 14px;
padding: 9px 13px;
font-size: 12.5px;
display: flex;
}
.dp-dup-note b {
color: var(--ink-2);
}
.dp-dup-reset {
color: var(--ink-4);
cursor: pointer;
background: none;
border: 0;
margin-left: auto;
font-family: inherit;
font-size: 11.5px;
text-decoration: underline;
}
.dp-start-btn {
background: var(--mod);
color: var(--white);
border: 1.5px solid var(--mod);
border-radius: var(--r-sm);
cursor: pointer;
align-items: center;
gap: 8px;
padding: 12px 26px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
transition: background .15s, border-color .15s;
display: inline-flex;
}
.dp-start-btn:hover {
background: var(--mod-deep);
border-color: var(--mod-deep);
}
@media (max-width: 640px) {
.dp-idchoice {
grid-template-columns: 1fr;
}
.dp-team-lineup {
gap: 10px;
}
}
.dp-page {
background: var(--paper-2);
min-height: 100dvh;
color: var(--ink);
padding: 24px 0;
}
.dp-topbar {
background: var(--white);
border-bottom: 1px solid var(--rule);
align-items: center;
gap: 10px;
height: 44px;
padding: 0 24px;
display: flex;
}
.dp-tb-logo {
letter-spacing: -.01em;
color: var(--ink);
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
display: flex;
}
.dp-tb-logo span {
color: var(--ink-3);
font-weight: 400;
}
.dp-tb-logo .dp-tb-mark {
background: var(--brand-primary);
width: 22px;
height: 22px;
color: var(--white);
border-radius: 6px;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 800;
display: inline-flex;
}
.dp-tb-divider {
background: var(--rule);
width: 1px;
height: 20px;
margin: 0 2px;
}
.dp-breadcrumb {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
align-items: center;
gap: 6px;
font-size: 10px;
display: flex;
}
.dp-bc-active {
color: var(--mod);
}
.dp-tb-right {
align-items: center;
gap: 10px;
margin-left: auto;
display: flex;
}
.dp-tb-user {
text-align: right;
}
.dp-tb-user-nm {
color: var(--ink);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.dp-tb-user-ro {
color: var(--ink-4);
font-size: 10px;
font-family: var(--mono);
}
.dp-tb-av {
background: var(--color-horn-blue-soft);
width: 32px;
height: 32px;
color: var(--color-horn-blue-deep);
border-radius: 50%;
place-items: center;
font-size: 12px;
font-weight: 600;
display: grid;
}
.dp-tb-logout {
border-left: 1px solid var(--rule);
color: var(--ink-3);
align-items: center;
gap: 5px;
margin-left: 4px;
padding: 6px 10px 6px 12px;
font-size: 12px;
text-decoration: none;
display: flex;
}
.dp-tb-logout:hover {
color: var(--status-risk);
}
.dp-stage {
flex-direction: column;
flex: 1;
padding: 32px 24px 64px;
display: flex;
}
.dp-flow {
width: 100%;
max-width: 680px;
margin: 0 auto;
}
.dp-icon-mono {
filter: grayscale();
}
.dp-main {
grid-template-columns: 1fr 570px;
align-items: start;
gap: 20px;
display: grid;
}
.dp-main .dp-flow {
max-width: none;
}
.dp-rail {
border: 1px solid var(--rule);
border-radius: var(--r-lg);
background: var(--white);
flex-direction: column;
display: flex;
}
.dp-rail-sec {
flex-direction: column;
gap: 10px;
padding: 14px 16px;
display: flex;
}
.dp-rail-h {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 9px;
}
.dp-rail-id {
background: var(--ai-tint, var(--ai-soft));
border-radius: var(--r-md);
align-items: center;
gap: 10px;
margin-bottom: 8px;
padding: 8px 10px;
display: flex;
}
.dp-rail-av {
width: 32px;
height: 32px;
color: var(--white);
background: linear-gradient(135deg, #a78bfa, #7c5cff);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.dp-rail-nm {
color: var(--ink);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.dp-rail-ro {
color: var(--ink-3);
font-size: 10.5px;
line-height: 1.3;
}
.dp-rail-float {
box-shadow: var(--shadow-card);
position: sticky;
top: 24px;
}
.dp-chatlog {
scrollbar-width: auto;
flex-direction: column;
gap: 8px;
max-height: 280px;
display: flex;
overflow-y: auto;
}
.dp-chatlog::-webkit-scrollbar {
width: 9px;
}
.dp-cart-list::-webkit-scrollbar {
width: 9px;
}
.dp-chatlog::-webkit-scrollbar-thumb {
background: var(--rule);
border-radius: 99px;
}
.dp-cart-list::-webkit-scrollbar-thumb {
background: var(--rule);
border-radius: 99px;
}
.dp-chatlog::-webkit-scrollbar-thumb:hover {
background: var(--ink-4);
}
.dp-cart-list::-webkit-scrollbar-thumb:hover {
background: var(--ink-4);
}
.dp-chatlog-tall {
flex: 1;
max-height: 420px;
}
.dp-chatrow {
align-items: flex-start;
gap: 7px;
display: flex;
}
.dp-chatrow-user {
flex-direction: row-reverse;
}
.dp-chatrow-av {
background: linear-gradient(135deg, #a78bfa, #7c5cff);
border-radius: 50%;
flex-shrink: 0;
place-items: center;
width: 20px;
height: 20px;
margin-top: 1px;
display: grid;
}
.dp-chatrow-av svg {
width: 11px;
height: 11px;
}
.dp-chatbubble {
min-width: 0;
color: var(--ink-2);
background: var(--ai-tint, var(--ai-soft));
border: 1px solid #d5cee0;
flex: 1;
font-size: 12.5px;
line-height: 1.55;
}
@supports (color: color-mix(in lab, red, red)) {
.dp-chatbubble {
border: 1px solid color-mix(in srgb, var(--ai) 18%, var(--rule));
}
}
.dp-chatbubble {
border-radius: var(--r-md);
padding: 9px 11px;
}
.dp-chatbubble-user {
background: var(--mod-soft);
border-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.dp-chatbubble-user {
border-color: color-mix(in srgb, var(--mod) 25%, var(--rule));
}
}
.dp-chatbubble-user {
color: var(--ink);
flex: 0 auto;
}
.dp-chatbubble-error {
background: var(--status-risk-soft);
border-color: #e2c5b8;
}
@supports (color: color-mix(in lab, red, red)) {
.dp-chatbubble-error {
border-color: color-mix(in srgb, var(--status-risk) 25%, var(--rule));
}
}
.dp-chatbubble-error {
color: var(--status-risk-deep);
}
.dp-usage-badge {
font-size: 10px;
font-family: var(--font-mono, monospace);
color: var(--ink-3);
opacity: .75;
margin-top: 5px;
display: block;
}
.dp-chatlog .quick-replies, .dp-chatlog .chat-range {
margin-left: 27px;
}
.dp-hornaut-chat {
flex-direction: column;
display: flex;
}
.dp-hornaut-chat .dp-rail-sec {
flex-direction: column;
flex: 1;
display: flex;
}
.dp-chat-composer {
gap: 6px;
margin-top: 10px;
display: flex;
}
.dp-chat-composer-input {
font: inherit;
border: 1px solid var(--rule);
color: var(--ink);
border-radius: 999px;
flex: 1;
padding: 9px 14px;
font-size: 12.5px;
}
.dp-chat-composer-input:focus {
border-color: var(--ai);
box-shadow: 0 0 0 3px var(--ai-soft);
outline: none;
}
.dp-chat-composer-input:disabled {
opacity: .6;
}
.dp-chat-composer-send {
background: var(--mod);
width: 34px;
height: 34px;
color: var(--white);
cursor: pointer;
border: 0;
border-radius: 50%;
flex-shrink: 0;
place-items: center;
display: grid;
}
.dp-chat-composer-send:hover:not(:disabled) {
background: var(--mod-deep);
}
.dp-chat-composer-send:disabled {
opacity: .4;
cursor: not-allowed;
}
.dp-chat-mic {
border: 1px solid var(--rule);
background: var(--white);
width: 34px;
height: 34px;
color: var(--ink-3);
cursor: pointer;
border-radius: 50%;
flex-shrink: 0;
place-items: center;
display: grid;
}
.dp-chat-mic svg {
stroke: currentColor;
fill: none;
stroke-width: 2px;
width: 15px;
height: 15px;
}
.dp-chat-mic:hover {
border-color: var(--ai);
color: var(--ai);
}
.dp-chat-mic-active {
background: var(--status-risk);
border-color: var(--status-risk);
color: var(--white);
animation: 1.4s ease-in-out infinite dp-mic-pulse;
}
@keyframes dp-mic-pulse {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-risk) 45%, transparent);
}
50% {
box-shadow: 0 0 0 6px #0000;
}
}
.dp-rail-cart {
border-top: 1px solid var(--rule);
}
.dp-cart-list {
scrollbar-width: auto;
flex-direction: column;
gap: 4px;
max-height: 220px;
display: flex;
overflow-y: auto;
}
.dp-cart-item {
border-radius: var(--r-sm);
align-items: center;
gap: 8px;
padding: 6px 4px;
transition: background .12s;
display: flex;
}
.dp-cart-item:hover {
background: var(--paper-2);
}
.dp-cart-icon {
flex-shrink: 0;
font-size: 15px;
}
.dp-cart-name {
min-width: 0;
color: var(--ink-2);
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
font-size: 12px;
overflow: hidden;
}
.dp-cart-remove {
width: 20px;
height: 20px;
color: var(--ink-4);
cursor: pointer;
background: none;
border: 0;
border-radius: 50%;
flex-shrink: 0;
place-items: center;
display: grid;
}
.dp-cart-remove:hover {
background: var(--status-risk-soft);
color: var(--status-risk);
}
.dp-cart-remove svg {
stroke: currentColor;
fill: none;
stroke-width: 2.2px;
width: 12px;
height: 12px;
}
@media (max-width: 900px) {
.dp-main {
grid-template-columns: 1fr;
}
.dp-rail {
order: 2;
position: static;
}
}
.dp-promise {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 28px;
display: flex;
}
.dp-promise .dp-pp {
background: var(--white);
border: 1px solid var(--rule);
color: var(--ink-2);
border-radius: 999px;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 13px;
display: flex;
}
.dp-promise .dp-pp .ico {
color: var(--mod);
}
.dp-idchoice {
text-align: left;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 22px;
display: grid;
}
.dp-idcard {
border: 1.5px solid var(--rule);
border-radius: var(--r-lg, 10px);
background: var(--white);
cursor: pointer;
padding: 16px 16px 14px;
transition: border-color .15s, box-shadow .15s;
position: relative;
}
.dp-idcard:hover {
border-color: var(--mod);
}
.dp-idcard.sel {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod-soft);
}
.dp-idcard .dp-ic-h {
align-items: center;
gap: 9px;
margin-bottom: 7px;
display: flex;
}
.dp-idcard .dp-ic-h .ico {
color: var(--mod-deep);
}
.dp-idcard .dp-ic-h b {
font-size: 14px;
}
.dp-idcard .dp-ic-d {
color: var(--ink-3);
font-size: 12.5px;
line-height: 1.45;
}
.dp-ic-opts {
border-top: 1px solid var(--rule);
flex-direction: column;
gap: 7px;
margin-top: 10px;
padding-top: 10px;
display: flex;
}
.dp-ic-opt {
color: var(--ink-3);
cursor: pointer;
align-items: flex-start;
gap: 7px;
font-size: 12px;
line-height: 1.4;
display: flex;
}
.dp-ic-opt input {
accent-color: var(--mod);
flex-shrink: 0;
margin-top: 2px;
}
.dp-idcard .dp-check {
border: 1.5px solid var(--rule);
border-radius: 50%;
place-items: center;
width: 18px;
height: 18px;
display: grid;
position: absolute;
top: 13px;
right: 13px;
}
.dp-idcard.sel .dp-check {
background: var(--mod);
border-color: var(--mod);
}
.dp-idcard.sel .dp-check:after {
content: "";
border: solid var(--white);
border-width: 0 2px 2px 0;
width: 5px;
height: 9px;
transform: rotate(45deg)translateY(-1px);
}
.dp-dup-note {
border-radius: var(--r-md, 6px);
background: var(--paper-2);
border: 1px solid var(--rule);
color: var(--ink-3);
align-items: flex-start;
gap: 9px;
margin-bottom: 16px;
padding: 10px 14px;
font-size: 12.5px;
display: flex;
}
.dp-auth-err {
border-radius: var(--r-md, 6px);
background: var(--status-risk-soft, #fef0ef);
border: 1px solid #c45a3e4d;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 10px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.dp-auth-err {
border: 1px solid color-mix(in srgb,var(--status-risk) 30%,transparent);
}
}
.dp-auth-err {
color: var(--status-risk-deep, var(--status-risk));
font-size: 12px;
}
.dp-auth-name {
background: var(--mod-soft);
color: var(--mod-deep);
border-radius: 999px;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
display: inline-flex;
}
html, body {
background: var(--color-page-bg);
color: var(--color-ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
}
.horn-shell {
background: var(--color-paper);
max-width: 1320px;
box-shadow: var(--shadow-card);
flex-direction: column;
min-height: 100vh;
margin: 0 auto;
display: flex;
}
@media (min-width: 1600px) {
html:not(.hornautenbar-off) .horn-shell {
max-width: 1660px;
}
html:not(.hornautenbar-off) .uw-main {
grid-template-columns: 1fr 336px;
}
html:not(.hornautenbar-off) .uw-rail {
display: flex;
}
}
html.hornautenbar-on .horn-shell {
max-width: 1660px;
}
html.hornautenbar-on .uw-main {
grid-template-columns: 1fr 336px;
}
html.hornautenbar-on .uw-rail {
display: flex;
}
html.hornautenbar-route-hidden .uw-main {
grid-template-columns: 1fr !important;
}
html.hornautenbar-route-hidden .uw-rail {
display: none !important;
}
.uw-main {
flex: 1;
grid-template-columns: 1fr;
min-height: 0;
display: grid;
}
.cl-stage {
flex-direction: column;
min-width: 0;
display: flex;
}
.uw-rail {
border-left: 1px solid var(--color-rule);
scrollbar-width: thin;
scrollbar-color: #0000001f transparent;
background: #fff;
flex-direction: column;
display: none;
overflow-y: auto;
}
.uwr-sec {
border-bottom: 1px solid var(--color-rule);
flex-direction: column;
gap: 10px;
padding: 14px 16px;
display: flex;
}
.uwr-h {
font-family: var(--font-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-ink-4);
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 9px;
display: flex;
}
.uwr-more {
text-transform: none;
letter-spacing: 0;
color: var(--color-horn-blue);
font-size: 11px;
font-weight: 400;
text-decoration: none;
}
.uwr-more:hover {
text-decoration: underline;
}
.uwr-ada {
flex-direction: column;
gap: 10px;
display: flex;
}
.uwr-ada-id {
align-items: center;
gap: 10px;
display: flex;
}
.uwr-ada-av {
color: #fff;
background: linear-gradient(135deg, #a78bfa, #7c5cff);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
font-size: 14px;
display: flex;
}
.uwr-ada-nm {
color: var(--color-ink);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.uwr-ada-ro {
color: var(--color-ink-3);
font-size: 10.5px;
line-height: 1.3;
}
.uwr-ada-ask {
border: 1px solid var(--color-rule);
background: var(--color-paper-2);
color: var(--color-ink-4);
cursor: text;
border-radius: 0;
align-items: center;
gap: 8px;
padding: 8px 11px;
font-size: 12px;
text-decoration: none;
transition: border-color .12s;
display: flex;
}
.uwr-ada-ask:hover, .uwr-ada-ask:focus-within {
border-color: var(--color-ai, #6f42c1);
}
.uwr-ada-ask > span:first-child {
color: #7c5cff;
flex-shrink: 0;
font-size: 14px;
line-height: 1;
}
.uwr-recent {
flex-direction: column;
gap: 2px;
display: flex;
}
.uwr-recent-item {
color: var(--color-ink-2);
border-radius: 6px;
align-items: center;
gap: 9px;
padding: 5px 4px;
font-size: 12px;
line-height: 1.35;
text-decoration: none;
transition: background .1s;
display: flex;
}
.uwr-recent-item:hover {
background: var(--color-paper-2);
color: var(--color-ink);
}
.uwr-ri-icon {
border-radius: 5px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
display: flex;
}
.uwr-ri-icon--generic {
background: var(--color-paper-2);
}
.uwr-ri-label {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
html.sidebar-collapsed aside.app-sidebar {
border-right: 1px solid var(--color-rule);
width: 56px;
overflow: hidden;
}
html.sidebar-collapsed aside.app-sidebar nav, html.sidebar-collapsed aside.app-sidebar .app-sidebar-footer, html.sidebar-collapsed aside.app-sidebar .app-sidebar-brand-text {
display: none;
}
aside.app-sidebar {
transition: width .2s, transform .2s;
}
@media (max-width: 767px) {
aside.app-sidebar {
z-index: 40;
height: 100dvh;
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%);
box-shadow: 0 0 24px #0000002e;
width: min(85vw, 320px) !important;
}
html.sidebar-mobile-open aside.app-sidebar {
transform: translateX(0);
}
html.sidebar-collapsed aside.app-sidebar nav, html.sidebar-collapsed aside.app-sidebar .app-sidebar-footer, html.sidebar-collapsed aside.app-sidebar .app-sidebar-brand-text {
display: revert;
}
.sidebar-backdrop {
display: none;
}
html.sidebar-mobile-open .sidebar-backdrop {
display: block;
}
aside.app-sidebar [data-sidebar-resize-handle] {
display: none;
}
}
@media (min-width: 768px) {
.sidebar-backdrop {
display: none;
}
}
@keyframes action-card-pulse {
0% {
box-shadow: 0 0 0 0 var(--color-horn-blue);
}
40% {
box-shadow: 0 0 0 6px rgba(var(--color-horn-blue-rgb, 26, 92, 184), .15);
}
100% {
box-shadow: 0 0 0 0 var(--color-horn-blue);
}
}
.action-card-pulse {
animation: 1.5s ease-out action-card-pulse;
}
html.text-scale-small {
font-size: 14px;
}
html.text-scale-normal {
font-size: 16px;
}
html.text-scale-large {
font-size: 18px;
}
html.reduce-motion *, html.reduce-motion :before, html.reduce-motion :after {
scroll-behavior: auto !important;
transition-duration: .001ms !important;
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
}
@media (min-width: 768px) {
body[data-sidebar-collapsed="auto"] aside.app-sidebar {
transition: width .18s, box-shadow .18s;
overflow: hidden;
width: 56px !important;
}
body[data-sidebar-collapsed="auto"] aside.app-sidebar:hover {
z-index: 50;
box-shadow: 4px 0 24px #14120e1f;
width: 244px !important;
}
body[data-sidebar-collapsed="auto"] aside.app-sidebar > div {
overflow-x: hidden;
}
body[data-sidebar-collapsed="auto"] aside.app-sidebar [data-sidebar-resize] {
display: none;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 767px) {
.topbar-nav, .topbar-intent-bar, .topbar-assistant-btn, .admin-back-btn, .dev-banner-secondary {
display: none !important;
}
.dev-banner-branch {
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
max-width: calc(100vw - 100px);
overflow: hidden;
}
}
.picker {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
margin-top: 22px;
overflow: hidden;
}
.pk-head {
border-bottom: 1px solid var(--rule);
padding: 16px 20px 14px;
}
.pk-crumb {
font: 11px var(--mono);
color: var(--ink-4);
align-items: center;
gap: 7px;
display: flex;
}
.pk-crumb b {
color: var(--mod-deep);
}
.pk-search {
margin-top: 11px;
position: relative;
}
.pk-search svg {
width: 15px;
height: 15px;
color: var(--ink-4);
position: absolute;
top: 50%;
left: 11px;
transform: translateY(-50%);
}
.pk-search input {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
width: 100%;
font-size: 13px;
font-family: var(--font);
padding: 9px 11px 9px 34px;
}
.pk-search input:focus {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod-soft);
outline: none;
}
.pk-body {
grid-template-columns: 240px 1fr;
min-height: 360px;
display: grid;
}
.domains {
border-right: 1px solid var(--rule);
padding: 8px;
overflow-y: auto;
}
.domain {
border-radius: var(--r-sm);
cursor: pointer;
border: 1px solid #0000;
align-items: center;
gap: 10px;
padding: 9px 11px;
display: flex;
}
.domain:hover {
background: var(--paper);
}
.domain.on {
background: var(--mod-soft);
border-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.domain.on {
border-color: color-mix(in srgb,var(--mod) 30%, transparent);
}
}
.domain .dn {
color: var(--ink);
font-size: 13px;
font-weight: 500;
}
.domain .dc {
font: 10px var(--mono);
color: var(--ink-4);
margin-left: auto;
}
.domain.on .dn {
color: var(--mod-deep);
font-weight: 600;
}
.types {
padding: 16px 18px;
}
.types-h {
font: 10px var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-4);
align-items: center;
gap: 8px;
margin-bottom: 12px;
display: flex;
}
.type-grid {
grid-template-columns: repeat(3, 1fr);
gap: 9px;
display: grid;
}
.type {
border: 1px solid var(--rule);
border-radius: var(--r-md);
cursor: pointer;
background: var(--white);
text-align: left;
align-items: center;
gap: 9px;
padding: 11px 12px;
display: flex;
}
.type:hover {
border-color: var(--mod);
}
.type.sel {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod-soft);
}
.type .ti {
border-radius: var(--r-sm);
flex: none;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
display: flex;
}
.type .ti svg {
width: 16px;
height: 16px;
}
.type .tn {
color: var(--ink);
font-size: 12.5px;
font-weight: 500;
line-height: 1.2;
}
.type .tt {
font: 9px var(--mono);
color: var(--ink-4);
margin-top: 2px;
}
.type .flag {
font: 8.5px var(--mono);
text-transform: uppercase;
letter-spacing: .04em;
background: var(--status-warn-soft);
color: var(--status-warn-deep);
border-radius: 99px;
align-self: flex-start;
margin-left: auto;
padding: 1px 5px;
}
.note {
font: 11px var(--mono);
color: var(--ink-4);
align-items: center;
gap: 8px;
margin-top: 14px;
display: flex;
}
.btn-mod:hover {
background: var(--mod-deep);
border-color: var(--mod-deep);
}
.btn-ai {
border-color: #6d5ae059;
}
@supports (color: color-mix(in lab, red, red)) {
.btn-ai {
border-color: color-mix(in srgb,var(--ai) 35%,transparent);
}
}
.btn-ai {
background: var(--ai-soft);
color: var(--ai-deep);
}
.btn-ai.disabled {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
.page-h1 {
letter-spacing: -.02em;
align-items: center;
gap: 10px;
margin-bottom: 4px;
font-size: 24px;
font-weight: 600;
display: flex;
}
.page-sub {
color: var(--ink-3);
max-width: 720px;
margin-top: 4px;
margin-bottom: 20px;
font-size: 13px;
}
.page-subtitle {
color: var(--ink-3);
margin-bottom: 24px;
font-size: 13px;
}
.section-hd {
font-family: var(--mono);
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 14px;
font-size: 11px;
font-weight: 600;
}
.panel table {
border-collapse: collapse;
width: 100%;
}
.panel thead tr {
background: var(--paper);
}
.panel th {
text-align: left;
color: var(--ink-4);
border-bottom: 1px solid var(--rule);
font-size: 10px;
font-weight: 500;
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
padding: 8px 12px;
}
.panel td {
border-bottom: 1px solid var(--paper-2);
vertical-align: middle;
color: var(--ink-2);
padding: 10px 12px;
font-size: 13px;
}
.panel tr:last-child td {
border-bottom: none;
}
.panel tbody tr:hover td {
background: var(--paper);
}
.kpi-row {
gap: 12px;
margin-bottom: 28px;
display: grid;
}
.segctl button.on .seg-count, .segctl button.is-on .seg-count {
color: var(--mod-deep);
}
.back-link {
color: var(--ink-3);
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 5px;
margin-bottom: 16px;
padding: 0;
font-family: inherit;
font-size: 12px;
text-decoration: none;
display: inline-flex;
}
.detail-layout > .sidenav {
flex: 0 0 232px;
}
@media (max-width: 900px) {
.detail-layout > .sidenav {
flex: none;
position: static;
}
}
.fw-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
display: grid;
}
.fw-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
padding: 18px;
}
.fw-card:hover {
box-shadow: var(--shadow-card);
}
.fw-header {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
display: flex;
}
.fw-name {
color: var(--ink);
font-size: 15px;
font-weight: 600;
}
.fw-meta {
color: var(--ink-4);
font-size: 11px;
font-family: var(--mono);
margin-top: 2px;
}
.fw-badge {
font-family: var(--mono);
white-space: nowrap;
border-radius: 4px;
padding: 2px 7px;
font-size: 9.5px;
}
.fw-badge-security {
background: var(--label-azure-soft);
color: var(--label-azure);
}
.fw-badge-quality {
background: var(--label-green-soft);
color: var(--label-green);
}
.fw-actions {
border-top: 1px solid var(--rule);
gap: 8px;
margin-top: 14px;
padding-top: 14px;
display: flex;
}
.quick-grid {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 32px;
display: grid;
}
.quick-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
padding: 14px 16px;
text-decoration: none;
display: block;
}
.quick-card:hover {
box-shadow: var(--shadow-card);
}
.quick-icon {
border-radius: var(--r-md);
background: var(--mod-soft);
width: 32px;
height: 32px;
color: var(--mod-deep);
justify-content: center;
align-items: center;
margin-bottom: 10px;
display: flex;
}
.quick-icon.ai {
background: var(--ai-soft);
color: var(--ai-deep);
}
.quick-title {
color: var(--ink-2);
margin-bottom: 2px;
font-size: 13px;
font-weight: 500;
}
.quick-sub {
color: var(--ink-4);
font-size: 11px;
}
.quick-sub.ai {
color: var(--status-risk);
}
.cov-banner {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding: 12px 16px;
display: flex;
}
.cov-ico {
border-radius: var(--r-md);
background: var(--mod-soft);
width: 34px;
height: 34px;
color: var(--mod-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.cov-title {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.cov-sub {
color: var(--ink-3);
margin-top: 1px;
font-size: 12px;
}
.cov-txt {
flex: 1;
}
.cov-bar-wrap {
flex-shrink: 0;
width: 180px;
}
.cov-bar-seg {
background: var(--rule);
border-radius: 99px;
height: 6px;
display: flex;
overflow: hidden;
}
.cov-bar-seg .linked {
background: var(--status-ok);
}
.cov-bar-seg .free {
background: var(--status-warn);
}
.cov-legend {
font-family: var(--mono);
color: var(--ink-4);
gap: 12px;
margin-top: 5px;
font-size: 9.5px;
display: flex;
}
.cov-legend i {
vertical-align: middle;
border-radius: 2px;
width: 7px;
height: 7px;
margin-right: 3px;
display: inline-block;
}
.catpill {
color: var(--ink-3);
cursor: pointer;
border: 1px solid var(--rule);
background: var(--white);
white-space: nowrap;
font-size: 13px;
font-family: var(--font);
border-radius: 99px;
align-items: center;
gap: 6px;
padding: 6px 12px;
display: inline-flex;
}
.catpill.active {
color: var(--white);
background: var(--mod);
border-color: var(--mod);
cursor: default;
font-weight: 500;
}
.fw-switch-row {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 12px;
display: flex;
}
.fw-switch {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
gap: 2px;
padding: 3px;
display: inline-flex;
}
.fw-btn {
font-size: 12.5px;
font-family: var(--font);
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
background: none;
border: none;
border-radius: 5px;
align-items: center;
gap: 6px;
padding: 6px 13px;
display: inline-flex;
}
.fw-btn:hover {
color: var(--ink);
}
.fw-btn.active {
background: var(--white);
color: var(--mod-deep);
box-shadow: var(--shadow-card);
font-weight: 600;
}
.fw-btn .fwdot {
border-radius: 50%;
flex-shrink: 0;
width: 7px;
height: 7px;
}
.fw-view-note {
color: var(--ink-4);
font-size: 11.5px;
font-family: var(--mono);
}
.two-pane {
grid-template-columns: 1fr 400px;
align-items: start;
gap: 18px;
display: grid;
}
.list-title {
color: var(--ink);
margin-bottom: 10px;
font-size: 15px;
font-weight: 600;
}
.a-name {
color: var(--ink);
align-items: center;
gap: 8px;
font-weight: 600;
display: flex;
}
.a-ico {
border-radius: var(--r-sm);
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 26px;
height: 26px;
display: flex;
}
.a-ico.cmdb {
background: var(--status-info-soft);
color: var(--status-info);
}
.a-ico.free {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.src-badge {
font-family: var(--mono);
border-radius: 99px;
align-items: center;
gap: 4px;
padding: 2px 7px;
font-size: 9px;
font-weight: 600;
display: inline-flex;
}
.src-cmdb {
background: var(--status-info-soft);
color: var(--status-info);
}
.src-free {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.sub-cell {
color: var(--ink-4);
margin-top: 2px;
font-size: 11px;
}
.sb-group {
gap: 4px;
display: inline-flex;
}
.sb {
border-radius: var(--r-sm);
width: 23px;
height: 20px;
font-family: var(--mono);
border: 1px solid #0000;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
display: inline-flex;
}
.sb-n {
background: var(--status-muted-soft);
color: var(--status-muted);
border-color: #5f66704d;
}
@supports (color: color-mix(in lab, red, red)) {
.sb-n {
border-color: color-mix(in srgb,var(--status-muted) 30%,transparent);
}
}
.sb-h {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
border-color: #c9a85c61;
}
@supports (color: color-mix(in lab, red, red)) {
.sb-h {
border-color: color-mix(in srgb,var(--status-warn) 38%,transparent);
}
}
.sb-s {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
border-color: #c45a3e61;
}
@supports (color: color-mix(in lab, red, red)) {
.sb-s {
border-color: color-mix(in srgb,var(--status-risk) 38%,transparent);
}
}
.fchip-iso {
font-family: var(--mono);
background: var(--status-info-soft);
color: var(--status-info);
border-radius: 99px;
align-items: center;
gap: 4px;
margin-right: 4px;
padding: 2px 7px;
font-size: 9.5px;
font-weight: 600;
display: inline-flex;
}
.fchip-bsi {
font-family: var(--mono);
background: var(--status-warn-soft);
color: var(--status-warn-deep);
border-radius: 99px;
align-items: center;
gap: 4px;
margin-right: 4px;
padding: 2px 7px;
font-size: 9.5px;
font-weight: 600;
display: inline-flex;
}
.fchip-qm {
font-family: var(--mono);
background: var(--status-ok-soft);
color: var(--status-ok);
border-radius: 99px;
align-items: center;
gap: 4px;
margin-right: 4px;
padding: 2px 7px;
font-size: 9.5px;
font-weight: 600;
display: inline-flex;
}
.fchip-dot {
border-radius: 50%;
width: 6px;
height: 6px;
}
.fchip-iso .fchip-dot {
background: var(--status-info);
}
.fchip-bsi .fchip-dot {
background: var(--status-warn);
}
.fchip-qm .fchip-dot {
background: var(--status-ok);
}
.ctrl-chip {
font-family: var(--mono);
color: var(--status-info);
margin-right: 5px;
font-size: 10px;
}
.modelled-yes {
color: var(--status-ok);
align-items: center;
gap: 5px;
font-size: 12px;
display: inline-flex;
}
.modelled-no {
color: var(--ink-4);
align-items: center;
gap: 5px;
font-size: 12px;
display: inline-flex;
}
.assign-link {
color: var(--mod);
cursor: pointer;
align-items: center;
gap: 4px;
font-size: 12px;
text-decoration: none;
display: inline-flex;
}
.row-act {
color: var(--brand-primary);
cursor: pointer;
font-size: 12px;
text-decoration: none;
}
.create-panel {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
position: sticky;
top: 14px;
overflow: hidden;
}
.create-head {
border-bottom: 1px solid var(--rule);
padding: 13px 16px;
}
.create-title {
color: var(--ink);
font-size: 14px;
font-weight: 600;
}
.create-sub {
color: var(--ink-4);
margin-top: 2px;
font-size: 11.5px;
}
.mode-seg {
padding: 12px 16px 0;
display: flex;
}
.mode-btn {
border: 1px solid var(--rule);
background: var(--white);
cursor: pointer;
font-family: var(--font);
text-align: left;
flex-direction: column;
flex: 1;
align-items: flex-start;
gap: 3px;
padding: 10px 12px;
display: flex;
position: relative;
}
.mode-btn:first-child {
border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.mode-btn:last-child {
border-radius: 0 var(--r-sm) var(--r-sm) 0;
border-left: none;
}
.mode-btn .mb-t {
color: var(--ink-2);
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
display: flex;
}
.mode-btn .mb-s {
color: var(--ink-4);
font-size: 10.5px;
}
.mode-btn.active {
background: var(--mod-soft);
border-color: var(--mod);
}
.mode-btn.active .mb-t {
color: var(--mod-deep);
}
.mode-rec-flag {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
background: var(--mod);
color: var(--white);
border-radius: 99px;
padding: 1px 6px;
font-size: 8px;
font-weight: 700;
position: absolute;
top: -8px;
right: 8px;
}
.mode-btn-sm {
flex: 0 0 68px;
justify-content: center;
align-items: center;
padding: 10px 8px;
}
.mode-btn-sm .mb-t {
font-size: 11.5px;
}
.mode-btn-sm .mode-rec-flag {
padding: 1px 4px;
font-size: 7px;
left: 50%;
right: auto;
transform: translateX(-50%);
}
.create-body {
padding: 14px 16px 16px;
}
.search-box {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--paper);
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 8px 11px;
display: flex;
}
.search-box input {
color: var(--ink);
width: 100%;
font-size: 13px;
font-family: var(--font);
background: none;
border: none;
outline: none;
}
.filters {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.ci-results {
flex-direction: column;
gap: 6px;
max-height: 190px;
display: flex;
overflow-y: auto;
}
.ci-opt {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
cursor: pointer;
align-items: center;
gap: 10px;
padding: 9px 11px;
transition: border-color .12s, background .12s;
display: flex;
}
.ci-opt:hover, .ci-opt.sel {
border-color: var(--status-info);
background: var(--status-info-soft);
}
.ci-opt-ico {
border-radius: var(--r-sm);
background: var(--paper-2);
width: 28px;
height: 28px;
color: var(--ink-3);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.ci-opt-name {
color: var(--ink);
font-size: 13px;
font-weight: 500;
}
.ci-opt-meta {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10.5px;
}
.ci-opt-state {
font-family: var(--mono);
border-radius: 99px;
flex-shrink: 0;
padding: 2px 6px;
font-size: 9.5px;
}
.cis-free {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.cis-linked {
background: var(--paper-2);
color: var(--ink-4);
}
.enrich-block {
border-top: 1px solid var(--rule);
margin-top: 12px;
padding-top: 12px;
}
.pulled {
background: var(--status-info-soft);
border: 1px solid #1e5cb040;
}
@supports (color: color-mix(in lab, red, red)) {
.pulled {
border: 1px solid color-mix(in srgb,var(--status-info) 25%,transparent);
}
}
.pulled {
border-radius: var(--r-sm);
margin-bottom: 14px;
padding: 10px 12px;
}
.pulled-head {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--status-info);
align-items: center;
gap: 6px;
margin-bottom: 7px;
font-size: 9px;
display: flex;
}
.pulled-grid {
grid-template-columns: 1fr 1fr;
gap: 7px 14px;
display: grid;
}
.pulled-k {
color: var(--ink-4);
font-size: 10.5px;
font-family: var(--mono);
}
.pulled-v {
color: var(--ink-2);
font-size: 12px;
font-weight: 500;
}
.field-label .add {
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 99px;
padding: 1px 5px;
font-size: 8px;
}
.fw-assign {
flex-direction: column;
gap: 6px;
display: flex;
}
.fw-check {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
cursor: pointer;
align-items: flex-start;
gap: 8px;
padding: 9px 11px;
display: flex;
}
.fw-check.on {
border-color: var(--mod);
background: var(--mod-soft);
}
.fw-check .box {
border: 1.5px solid var(--ink-4);
border-radius: 4px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
margin-top: 1px;
display: flex;
}
.fw-check.on .box {
background: var(--mod);
border-color: var(--mod);
}
.fw-check-name {
color: var(--ink);
font-size: 12.5px;
font-weight: 500;
}
.fw-check-sub {
color: var(--ink-4);
font-size: 10.5px;
}
.sb-picker {
gap: 16px;
display: flex;
}
.sb-col {
flex-direction: column;
gap: 4px;
display: flex;
}
.sb-col-lbl {
font-family: var(--mono);
color: var(--ink-4);
font-size: 9.5px;
}
.sb-choices {
gap: 3px;
display: flex;
}
.sb-choice {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
width: 26px;
height: 24px;
font-family: var(--mono);
color: var(--ink-3);
cursor: pointer;
font-size: 11px;
font-weight: 700;
}
.sb-choice.n.on {
background: var(--status-muted-soft);
color: var(--status-muted);
border-color: #5f667066;
}
@supports (color: color-mix(in lab, red, red)) {
.sb-choice.n.on {
border-color: color-mix(in srgb,var(--status-muted) 40%,transparent);
}
}
.sb-choice.h.on {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
border-color: #c9a85c73;
}
@supports (color: color-mix(in lab, red, red)) {
.sb-choice.h.on {
border-color: color-mix(in srgb,var(--status-warn) 45%,transparent);
}
}
.sb-choice.s.on {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
border-color: #c45a3e73;
}
@supports (color: color-mix(in lab, red, red)) {
.sb-choice.s.on {
border-color: color-mix(in srgb,var(--status-risk) 45%,transparent);
}
}
.sel {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
width: 100%;
color: var(--ink);
font-size: 13px;
font-family: var(--font);
padding: 8px 10px;
}
.input, .select {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
width: 100%;
color: var(--ink);
font-size: 13px;
font-family: var(--font);
padding: 9px 11px;
}
.input:focus, .select:focus {
border-color: var(--mod, var(--brand-primary));
box-shadow: 0 0 0 3px var(--mod-soft, var(--brand-primary-soft));
outline: none;
}
.btn-link {
background: var(--mod);
width: 100%;
color: var(--white);
border-radius: var(--r-sm);
cursor: pointer;
font-size: 13px;
font-weight: 600;
font-family: var(--font);
border: none;
justify-content: center;
align-items: center;
gap: 7px;
padding: 10px;
display: flex;
}
.btn-link:hover {
background: var(--mod-deep);
}
.empty-hint {
text-align: center;
color: var(--ink-4);
padding: 18px 12px;
font-size: 12.5px;
}
.free-warn {
background: var(--status-warn-soft);
border: 1px solid #c9a85c4d;
gap: 9px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.free-warn {
border: 1px solid color-mix(in srgb,var(--status-warn) 30%,transparent);
}
}
.free-warn {
border-radius: var(--r-sm);
margin-bottom: 14px;
padding: 10px 12px;
}
.free-warn svg {
color: var(--status-warn);
flex-shrink: 0;
margin-top: 1px;
}
.free-warn-txt {
color: var(--status-warn-deep);
font-size: 11.5px;
line-height: 1.45;
}
.btn-free {
background: var(--white);
width: 100%;
color: var(--ink-2);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
cursor: pointer;
font-size: 13px;
font-weight: 500;
font-family: var(--font);
padding: 9px;
}
.btn-free:hover {
border-color: var(--ink-4);
}
.sa-backdrop {
opacity: 0;
pointer-events: none;
z-index: 900;
background: #1a1a1a2e;
transition: opacity .2s;
position: fixed;
inset: 0;
}
.sa-backdrop.show {
opacity: 1;
pointer-events: auto;
}
.sa-drawer {
background: var(--white);
border-left: 1px solid var(--rule);
z-index: 950;
flex-direction: column;
width: 440px;
max-width: 92vw;
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
display: flex;
position: fixed;
top: 0;
bottom: 0;
right: 0;
transform: translateX(100%);
box-shadow: 0 24px 60px #00000038;
}
.sa-drawer.show {
transform: translateX(0);
}
.sa-drawer-head {
border-bottom: 1px solid var(--rule);
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
display: flex;
}
.sa-drawer-ico {
border-radius: var(--r-md);
background: var(--mod-soft);
width: 34px;
height: 34px;
color: var(--mod-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.sa-drawer-titles {
flex: 1;
min-width: 0;
}
.sa-drawer-title {
color: var(--ink);
font-size: 15px;
font-weight: 600;
}
.sa-drawer-sub {
color: var(--ink-4);
margin-top: 1px;
font-size: 11.5px;
}
.sa-drawer-x {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
width: 28px;
height: 28px;
color: var(--ink-4);
cursor: pointer;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.sa-drawer-x:hover {
background: var(--paper);
}
.sa-drawer-body {
flex: 1;
padding: 18px 20px;
overflow-y: auto;
}
.sa-drawer-foot {
border-top: 1px solid var(--rule);
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
display: flex;
}
.asset-ref {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
align-items: center;
gap: 9px;
margin-bottom: 16px;
padding: 9px 12px;
display: flex;
}
.asset-ref-name {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.asset-ref-meta {
font-family: var(--mono);
color: var(--ink-4);
font-size: 10.5px;
}
.two {
grid-template-columns: 1fr 400px;
align-items: start;
gap: 18px;
display: grid;
}
.two > div:first-child {
min-width: 0;
}
.create {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
position: sticky;
top: 14px;
overflow: hidden;
}
.enrich {
display: none;
}
.enrich.show {
border-top: 1px solid var(--rule);
margin-top: 12px;
padding-top: 12px;
display: block;
}
.mode-pane {
display: none;
}
.mode-pane.show {
display: block;
}
.grp td {
font-size: 11px;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: .06em;
border-bottom: none;
padding: 7px 10px;
font-weight: 600;
}
.grp-warn td {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.grp-ok td {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.grp-n {
opacity: .8;
margin-left: 7px;
font-weight: 400;
}
.schip {
font-family: var(--mono);
border: 1px solid var(--rule);
background: var(--paper);
color: var(--ink-3);
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 2px 8px;
font-size: 11px;
display: inline-flex;
}
.schip.info {
background: var(--status-info-soft);
color: var(--status-info);
border-color: #1e5cb04d;
}
@supports (color: color-mix(in lab, red, red)) {
.schip.info {
border-color: color-mix(in srgb,var(--status-info) 30%,transparent);
}
}
.schip .dot {
background: currentColor;
border-radius: 50%;
flex-shrink: 0;
width: 6px;
height: 6px;
display: inline-block;
}
.sa-extra {
font-family: var(--mono);
color: var(--ink-4);
font-size: 11px;
}
tr.unassigned td {
opacity: .72;
}
.gm-dot {
border-radius: 50%;
flex-shrink: 0;
width: 8px;
height: 8px;
display: inline-block;
}
.gm-dot.ok {
background: var(--status-ok);
}
.gm-dot.warn {
background: var(--status-warn);
}
.gm-dot.muted {
background: var(--ink-4);
}
.gm-name {
cursor: default;
align-items: center;
gap: 6px;
display: inline-flex;
}
.gm-hover {
z-index: var(--z-overlay, 950);
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
width: 240px;
box-shadow: var(--shadow-pop);
padding: 10px 12px;
position: fixed;
}
.gm-hover-title {
color: var(--ink);
margin-bottom: 6px;
font-size: 12.5px;
font-weight: 600;
}
.gm-hover-row {
justify-content: space-between;
gap: 10px;
padding: 2px 0;
font-size: 11.5px;
display: flex;
}
.gm-hover-row span {
color: var(--ink-4);
}
.gm-hover-row b {
color: var(--ink-2);
text-align: right;
font-weight: 500;
}
.grp-expand {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
width: 20px;
height: 20px;
color: var(--ink-3);
cursor: pointer;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.grp-expand:hover {
border-color: var(--ink-4);
color: var(--ink);
}
.grp-member-row td {
background: var(--paper);
border-bottom: 1px solid var(--rule);
padding: 0;
}
.grp-member {
align-items: center;
gap: 14px;
padding: 8px 12px 8px 40px;
display: flex;
position: relative;
}
.grp-member-meta {
flex-wrap: wrap;
flex: 1;
gap: 16px;
display: flex;
}
.grp-member-field {
color: var(--ink-3);
font-size: 11.5px;
}
.grp-member-field i {
color: var(--ink-4);
margin-right: 5px;
font-style: normal;
}
.xlink {
color: var(--mod);
opacity: 0;
white-space: nowrap;
font-size: 11px;
text-decoration: none;
transition: opacity .12s;
}
.grp-member-row:hover .xlink {
opacity: 1;
}
.cis-group-warn {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
align-items: center;
gap: 3px;
display: inline-flex;
}
.fchip i {
border-radius: 50%;
flex-shrink: 0;
width: 6px;
height: 6px;
font-style: normal;
display: inline-block;
}
.fchip.iso {
background: var(--status-info-soft);
color: var(--status-info);
cursor: default;
border: none;
padding: 2px 7px;
font-size: 9.5px;
font-weight: 600;
}
.fchip.iso i {
background: var(--status-info);
}
.fchip.bsi {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
cursor: default;
border: none;
padding: 2px 7px;
font-size: 9.5px;
font-weight: 600;
}
.fchip.bsi i {
background: var(--status-warn);
}
.fchip.qm {
background: var(--status-ok-soft);
color: var(--status-ok);
cursor: default;
border: none;
padding: 2px 7px;
font-size: 9.5px;
font-weight: 600;
}
.fchip.qm i {
background: var(--status-ok);
}
.modelled {
align-items: center;
gap: 5px;
font-size: 12px;
display: inline-flex;
}
.modelled.yes {
color: var(--status-ok);
}
.modelled.no {
color: var(--ink-4);
}
.ctrl-multi {
flex-direction: column;
gap: 5px;
display: flex;
}
.ctrl-pick {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
color: var(--ink-2);
background: var(--white);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
align-items: flex-start;
gap: 8px;
padding: 7px 10px;
font-size: 12px;
display: flex;
}
.ctrl-pick.on {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
}
.ctrl-pick .box {
border: 1.5px solid var(--ink-4);
color: #0000;
border-radius: 3px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
margin-top: 1px;
display: flex;
}
.ctrl-pick.on .box {
background: var(--mod);
border-color: var(--mod);
color: var(--white);
}
.backdrop {
opacity: 0;
pointer-events: none;
z-index: 900;
background: #1a1a1a2e;
transition: opacity .2s;
position: fixed;
inset: 0;
}
.backdrop.show {
opacity: 1;
pointer-events: auto;
}
.drawer {
background: var(--white);
border-left: 1px solid var(--rule);
z-index: 950;
flex-direction: column;
width: 440px;
max-width: 92vw;
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
display: flex;
position: fixed;
top: 0;
bottom: 0;
right: 0;
transform: translateX(100%);
box-shadow: 0 24px 60px #00000038;
}
.drawer.show {
transform: translateX(0);
}
.drawer-head {
border-bottom: 1px solid var(--rule);
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
display: flex;
}
.drawer-ico {
border-radius: var(--r-md);
background: var(--mod-soft);
width: 34px;
height: 34px;
color: var(--mod-deep);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.drawer-titles {
flex: 1;
min-width: 0;
}
.drawer-title {
color: var(--ink);
font-size: 15px;
font-weight: 600;
}
.drawer-sub {
color: var(--ink-4);
margin-top: 1px;
font-size: 11.5px;
}
.drawer-x {
border-radius: var(--r-sm);
border: 1px solid var(--rule);
background: var(--white);
width: 28px;
height: 28px;
color: var(--ink-4);
cursor: pointer;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.drawer-x:hover {
background: var(--paper);
}
.drawer-body {
flex: 1;
padding: 18px 20px;
overflow-y: auto;
}
.drawer-foot {
border-top: 1px solid var(--rule);
justify-content: flex-end;
gap: 8px;
padding: 14px 20px;
display: flex;
}
.hx-toast .t-x {
opacity: .6;
cursor: pointer;
padding: 0 2px;
font-weight: 700;
}
.lock-banner {
border-radius: var(--r-md);
background: var(--insp-locked-soft);
border: 1px solid #7a1f1866;
align-items: center;
gap: 12px;
padding: 11px 15px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.lock-banner {
border: 1px solid color-mix(in srgb,var(--insp-locked) 40%,transparent);
}
}
.lock-banner {
margin-bottom: 16px;
}
.lock-banner .li {
border-radius: var(--r-sm);
background: var(--insp-locked);
color: #fff;
flex: none;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
display: flex;
}
.lock-banner .lt {
color: #5e1812;
font-size: 13px;
}
.lock-banner .lt b {
color: #7a1f18;
}
.lock-banner .btn {
margin-left: auto;
}
.filt {
flex-wrap: wrap;
gap: 7px;
margin-bottom: 16px;
display: flex;
}
.fchip {
font: 11px var(--mono);
border: 1px solid var(--rule);
background: var(--white);
color: var(--ink-3);
cursor: pointer;
border-radius: 99px;
align-items: center;
gap: 6px;
padding: 4px 10px;
display: inline-flex;
}
.fchip .sw {
border-radius: 50%;
width: 8px;
height: 8px;
}
.fchip.on {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
font-weight: 600;
}
.tl {
padding-left: 22px;
position: relative;
}
.tl:before {
content: "";
background: var(--rule);
border-radius: 2px;
width: 2px;
position: absolute;
top: 4px;
bottom: 4px;
left: 6px;
}
.insp-item {
padding: 0 0 18px 16px;
position: relative;
}
.insp-item:before {
content: "";
background: var(--d, var(--mod));
border: 2px solid var(--white);
width: 10px;
height: 10px;
box-shadow: 0 0 0 1px var(--rule);
border-radius: 50%;
position: absolute;
top: 4px;
left: -16px;
}
.insp-item.ok {
--d: var(--status-ok);
}
.insp-item.remarks {
--d: var(--status-warn);
}
.insp-item.failed {
--d: var(--status-risk);
}
.insp-item.locked {
--d: var(--insp-locked);
}
.insp-head {
flex-wrap: wrap;
align-items: center;
gap: 9px;
display: flex;
}
.tl-date {
font: 11px var(--mono);
color: var(--ink-4);
}
.tl-type {
font: 10px var(--mono);
border: 1px solid var(--it);
color: var(--it);
background: var(--it);
border-radius: 99px;
padding: 2px 8px;
}
@supports (color: color-mix(in lab, red, red)) {
.tl-type {
background: color-mix(in srgb,var(--it) 9%,var(--white));
}
}
.tl-res {
font-size: 12.5px;
font-weight: 500;
}
.insp-meta {
font: 11px var(--mono);
color: var(--ink-4);
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 4px;
display: flex;
}
.insp-meta a {
color: var(--mod-deep);
}
.actor {
align-items: center;
gap: 5px;
display: inline-flex;
}
.actor .k {
text-transform: uppercase;
letter-spacing: .04em;
background: var(--paper-2);
color: var(--ink-4);
border-radius: 3px;
padding: 1px 5px;
font-size: 9px;
}
.actor.system .k {
background: var(--ai-soft);
color: var(--ai-deep);
}
.actor.hornaut .k {
background: var(--status-info-soft);
color: var(--status-info);
}
.norm {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
align-items: center;
gap: 12px;
padding: 12px 14px;
display: flex;
}
.norm + .norm {
margin-top: 8px;
}
.norm .code {
font: 11px var(--mono);
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: var(--r-sm);
flex: none;
padding: 3px 9px;
font-weight: 700;
}
.norm .nt {
color: var(--ink);
font-size: 13px;
}
.norm .nf {
font: 10px var(--mono);
color: var(--ink-4);
margin-top: 2px;
}
.norm .lt {
font: 9px var(--mono);
text-transform: uppercase;
letter-spacing: .04em;
border-radius: 99px;
flex: none;
margin-left: auto;
padding: 2px 8px;
}
.lt.asset {
background: var(--status-info-soft);
color: var(--status-info);
}
.lt.evidence {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.lt.nc {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
}
.lt.infra {
background: var(--paper-2);
color: var(--ink-3);
}
.auto-badge {
font: 9.5px var(--mono);
color: var(--ai-deep);
background: var(--ai-soft);
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 2px 7px;
display: inline-flex;
}
.sidebar-badge.risk {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
}
:root {
--overlay-backdrop: #1a1a1a59;
--overlay-backdrop-strong: #1a1a1a59;
--overlay-backdrop-light: #1a1a1a2e;
--overlay-radius: 12px;
--overlay-shadow: 0 24px 60px #00000038;
--overlay-bg: var(--white);
--overlay-hairline: var(--rule);
--drawer-width: 480px;
--drawer-width-wide: 640px;
--drawer-width-detail: 760px;
--sheet-handle: 36px;
--sheet-radius: 16px;
--wizard-width: 760px;
--wizard-width-wide: 880px;
--wizard-max-height: 90vh;
--wizard-step-rail: 184px;
--z-backdrop: 900;
--z-overlay: 901;
--z-overlay-2: 920;
--z-picker: 950;
--z-dialog: 975;
--z-toast: 1000;
--transition-overlay-in: .2s cubic-bezier(.4,0,.2,1);
--transition-drawer-in: .28s cubic-bezier(.4,0,.2,1);
--transition-out: .18s ease-in;
--transition-backdrop: .2s ease;
--step-todo: var(--ink-4);
--step-rail: var(--rule);
--orb-size: 56px;
--orb-clear: 0px;
--favorite: #e6a200;
--hornaut-body: #2563eb;
--hornaut-body-deep: #1e40af;
--hornaut-tint: #eff6ff;
}
[data-area="admin"] {
--admin-surface: #2a2723;
--admin-surface-2: #26231f;
--admin-ink: #b9b2a6;
--admin-ink-2: #7a7468;
--admin-accent: #e7c98a;
--admin-accent-dim: #6a5a32;
--admin-accent-deep: #3a2f17;
--admin-contrast: #f3f1ea;
--admin-rule: #ece8e0;
}
[data-module] {
--step-done: var(--mod);
--step-current: var(--mod-deep);
--step-rail-done: var(--mod);
}
.cs-backdrop {
z-index: var(--z-backdrop);
background: var(--overlay-backdrop);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-backdrop);
position: fixed;
inset: 0;
}
.cs-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.cs-wizard {
z-index: var(--z-overlay);
pointer-events: none;
place-items: center;
padding: 24px;
display: grid;
position: fixed;
inset: 0;
}
.cs-wizard-card {
width: min(var(--wizard-width),100%);
max-height: var(--wizard-max-height);
background: var(--overlay-bg);
border-radius: var(--overlay-radius);
box-shadow: var(--overlay-shadow);
pointer-events: auto;
opacity: 0;
transition: opacity var(--transition-overlay-in), transform var(--transition-overlay-in);
flex-direction: column;
display: flex;
position: relative;
overflow: hidden;
transform: scale(.97)translateY(6px);
}
.cs-wizard.open .cs-wizard-card {
opacity: 1;
transform: none;
}
.cs-head {
border-bottom: 1px solid var(--overlay-hairline);
flex: none;
padding: 16px 20px 14px;
}
.cs-head-top {
justify-content: space-between;
align-items: flex-start;
gap: 16px;
display: flex;
}
.cs-crumb {
font: 11px/1.4 var(--mono);
color: var(--ink-4);
letter-spacing: .02em;
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.cs-crumb .mod-dot {
width: 8px;
height: 8px;
}
.cs-crumb .sep {
opacity: .5;
}
.cs-crumb b {
color: var(--mod-deep);
font-weight: 600;
}
.cs-title {
letter-spacing: -.01em;
margin-top: 7px;
font-size: 18px;
font-weight: 600;
}
.cs-x {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
width: 30px;
height: 30px;
color: var(--ink-3);
cursor: pointer;
flex: none;
justify-content: center;
align-items: center;
font-size: 15px;
line-height: 1;
display: flex;
}
.cs-x:hover {
border-color: var(--ink-4);
color: var(--ink);
}
.cs-steps {
align-items: center;
gap: 0;
margin-top: 16px;
display: flex;
}
.cs-step {
cursor: default;
flex: none;
align-items: center;
gap: 9px;
display: flex;
}
.cs-step .num {
width: 22px;
height: 22px;
font: 600 11px var(--mono);
background: var(--white);
color: var(--step-todo);
border: 1.5px solid var(--step-rail);
border-radius: 50%;
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.cs-step .lbl {
color: var(--ink-4);
white-space: nowrap;
font-size: 12px;
font-weight: 500;
}
.cs-step.done .num {
background: var(--step-done);
border-color: var(--step-done);
color: var(--white);
}
.cs-step.done .lbl {
color: var(--ink-2);
}
.cs-step.done {
cursor: pointer;
}
.cs-step.current .num {
border-color: var(--step-current);
color: var(--step-current);
box-shadow: 0 0 0 3px var(--mod-soft);
}
.cs-step.current .lbl {
color: var(--mod-deep);
font-weight: 600;
}
.cs-rail {
background: var(--step-rail);
border-radius: 2px;
flex: auto;
min-width: 14px;
height: 1.5px;
margin: 0 10px;
}
.cs-rail.done {
background: var(--step-rail-done);
}
.cs-body {
flex: auto;
padding: 22px 24px;
overflow-y: auto;
}
.cs-pane {
display: none;
}
.cs-pane.active {
animation: csFade var(--transition-overlay-in);
display: block;
}
@keyframes csFade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
.cs-section-label {
font: 10px var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 12px;
}
.cs-hint {
color: var(--ink-3);
margin-top: 4px;
font-size: 12px;
}
.cs-rel {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
align-items: center;
gap: 10px;
padding: 11px 13px;
display: flex;
}
.cs-rel + .cs-rel {
margin-top: 8px;
}
.cs-rel .rt {
font: 10px var(--mono);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-4);
flex: none;
width: 96px;
}
.cs-rel .rn {
color: var(--ink);
font-size: 13px;
font-weight: 500;
}
.cs-rel .rs {
font: 11px var(--mono);
color: var(--ink-4);
}
.cs-rel .rx {
color: var(--ink-4);
cursor: pointer;
background: none;
border: none;
margin-left: auto;
font-size: 14px;
}
.cs-rel .rx:hover {
color: var(--status-risk);
}
.cs-add {
border: 1.5px dashed var(--rule);
border-radius: var(--r-md);
background: var(--paper);
color: var(--mod-deep);
font: 500 12.5px var(--font);
cursor: pointer;
justify-content: center;
align-items: center;
gap: 7px;
width: 100%;
margin-top: 11px;
padding: 9px 13px;
display: inline-flex;
}
.cs-add:hover {
border-color: var(--mod);
background: var(--mod-soft);
}
.cs-fields {
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
display: grid;
}
.cs-field {
flex-direction: column;
gap: 6px;
display: flex;
}
.cs-field.col2 {
grid-column: 1 / -1;
}
.cs-label {
color: var(--ink-2);
font-size: 12px;
font-weight: 500;
}
.cs-label .req {
color: var(--status-risk);
margin-left: 2px;
}
.cs-label .opt {
color: var(--ink-4);
font-weight: 400;
font-family: var(--mono);
margin-left: 4px;
font-size: 10px;
}
.cs-crit-pick {
gap: 8px;
display: flex;
}
.cs-crit-opt {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
cursor: pointer;
background: var(--white);
color: var(--ink-3);
align-items: center;
gap: 7px;
padding: 7px 11px 7px 8px;
font-size: 12px;
display: flex;
}
.cs-crit-opt:hover {
border-color: var(--ink-4);
}
.cs-crit-opt.sel {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
font-weight: 600;
}
.cs-taginput {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 7px 9px;
display: flex;
}
.cs-taginput input {
font: 12px var(--mono);
min-width: 90px;
color: var(--ink);
background: none;
border: none;
outline: none;
flex: 90px;
}
.cs-pruef-box {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--paper);
grid-column: 1 / -1;
padding: 13px 14px;
}
.cs-pruef-grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-top: 11px;
display: grid;
}
.pruef {
font: 600 11px var(--mono);
border-radius: var(--r-sm);
border: 1px solid #0000;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
display: inline-flex;
}
.pruef svg {
width: 13px;
height: 13px;
}
.pruef-ok {
background: var(--status-ok-soft);
color: var(--status-ok);
border-color: #2f8a4d4d;
}
@supports (color: color-mix(in lab, red, red)) {
.pruef-ok {
border-color: color-mix(in srgb,var(--status-ok) 30%,transparent);
}
}
.pruef-due {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
border-color: #c9a85c61;
}
@supports (color: color-mix(in lab, red, red)) {
.pruef-due {
border-color: color-mix(in srgb,var(--status-warn) 38%,transparent);
}
}
.pruef-over {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
border-color: #c45a3e59;
}
@supports (color: color-mix(in lab, red, red)) {
.pruef-over {
border-color: color-mix(in srgb,var(--status-risk) 35%,transparent);
}
}
.pruef-na {
background: var(--paper-2);
color: var(--ink-4);
border-color: var(--rule);
}
.cs-summary {
border: 1px solid var(--rule);
border-radius: var(--r-md);
overflow: hidden;
}
.cs-srow {
border-bottom: 1px solid var(--rule-soft);
grid-template-columns: 140px 1fr;
align-items: center;
gap: 12px;
padding: 10px 14px;
display: grid;
}
.cs-srow:last-child {
border-bottom: none;
}
.cs-srow .k {
font: 10px var(--mono);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink-4);
}
.cs-srow .v {
color: var(--ink);
flex-wrap: wrap;
align-items: center;
gap: 7px;
font-size: 13px;
display: flex;
}
.cs-ai {
border: 1px solid var(--ai-soft);
background: #f6f3fd;
margin-top: 14px;
}
@supports (color: color-mix(in lab, red, red)) {
.cs-ai {
background: color-mix(in srgb, var(--ai-soft) 55%, var(--white));
}
}
.cs-ai {
border-radius: var(--r-md);
padding: 13px 15px;
}
.cs-ai-h {
font: 600 12px var(--font);
color: var(--ai-deep);
align-items: center;
gap: 8px;
display: flex;
}
.cs-ai-h .spark {
width: 16px;
height: 16px;
color: var(--ai);
}
.cs-ai-item {
color: var(--ink-2);
align-items: flex-start;
gap: 9px;
margin-top: 10px;
font-size: 12.5px;
display: flex;
}
.cs-ai-item .acc {
font: 600 12px var(--mono);
color: var(--ai-deep);
cursor: pointer;
white-space: nowrap;
border: 1px solid var(--ai-soft);
background: var(--white);
border-radius: 99px;
padding: 2px 8px;
}
.cs-ai-item .acc:hover {
background: var(--ai-soft);
}
.cs-foot {
border-top: 1px solid var(--overlay-hairline);
background: var(--white);
flex: none;
align-items: center;
gap: 10px;
padding: 13px 20px;
display: flex;
}
.cs-foot .grow {
flex: auto;
}
.cs-link {
color: var(--ink-4);
font: 12.5px var(--font);
cursor: pointer;
background: none;
border: none;
padding: 6px 4px;
}
.cs-link:hover {
color: var(--status-risk);
}
.cs-draft {
align-items: center;
gap: 6px;
display: inline-flex;
}
.cs-toast {
z-index: var(--z-toast);
background: var(--ink);
color: var(--white);
border-radius: var(--r-md);
box-shadow: var(--shadow-pop);
opacity: 0;
pointer-events: none;
align-items: center;
gap: 14px;
padding: 11px 14px 11px 16px;
font-size: 13px;
transition: opacity .2s, transform .2s;
display: flex;
position: fixed;
bottom: 26px;
left: 50%;
transform: translateX(-50%)translateY(20px);
}
.cs-toast.show {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%);
}
.cs-toast .undo {
color: #ffd;
cursor: pointer;
font-size: 13px;
font-weight: 600;
font-family: var(--font);
background: none;
border: none;
}
.cs-toast .undo:hover {
text-decoration: underline;
}
.cs-inline-picker {
background: var(--white);
z-index: 2;
transition: transform var(--transition-overlay-in);
flex-direction: column;
display: flex;
position: absolute;
inset: 0;
transform: translateX(100%);
}
.cs-inline-picker.open {
transform: none;
}
.cs-ip-head {
border-bottom: 1px solid var(--rule);
align-items: center;
gap: 10px;
padding: 14px 18px;
display: flex;
}
.cs-ip-head .b {
color: var(--mod-deep);
font: 13px var(--font);
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 6px;
display: flex;
}
.cs-ip-head .t {
font-size: 14px;
font-weight: 600;
}
.cs-ip-body {
flex: 1;
padding: 14px 18px;
overflow-y: auto;
}
.cs-ip-search {
margin-bottom: 12px;
}
.cs-ip-item {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
cursor: pointer;
background: var(--white);
align-items: center;
gap: 9px;
margin-bottom: 7px;
padding: 9px 11px;
display: flex;
}
.cs-ip-item:hover {
border-color: var(--mod);
background: var(--mod-soft);
}
.cs-ip-item .n {
color: var(--ink);
font-size: 13px;
font-weight: 500;
}
.cs-ip-item .m {
font: 11px var(--mono);
color: var(--ink-4);
margin-left: auto;
}
@media (max-width: 860px) {
.cs-wizard {
padding: 0;
}
.cs-wizard-card {
border-radius: 0;
width: 100%;
height: 100%;
max-height: 100%;
}
.cs-step .lbl {
display: none;
}
.cs-step.current .lbl {
display: inline;
}
.cs-fields {
grid-template-columns: 1fr;
}
.cs-foot .cs-link, .cs-foot .cs-draft, .cs-foot .grow {
display: none;
}
.cs-foot .btn {
flex: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.cs-backdrop, .cs-wizard-card, .cs-pane, .cs-toast, .cs-inline-picker {
transition: none !important;
animation: none !important;
}
.cs-wizard-card {
transform: none;
}
}
.dom-chips {
flex-wrap: wrap;
gap: 7px;
margin-bottom: 16px;
display: flex;
}
.dchip {
border: 1px solid var(--rule);
background: var(--white);
cursor: pointer;
font: 500 12.5px var(--font);
color: var(--ink-2);
white-space: nowrap;
border-radius: 99px;
align-items: center;
gap: 7px;
padding: 6px 11px;
display: inline-flex;
}
.dchip:hover {
border-color: var(--mod);
}
.dchip.on {
background: var(--mod-soft);
border-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.dchip.on {
border-color: color-mix(in srgb,var(--mod) 35%,transparent);
}
}
.dchip.on {
color: var(--mod-deep);
font-weight: 600;
}
.dchip .cnt {
font: 10px var(--mono);
color: var(--ink-4);
background: var(--paper-2);
border-radius: 99px;
padding: 1px 6px;
}
.dchip.on .cnt {
background: var(--white);
color: var(--mod-deep);
}
.dchip[hidden] {
display: none;
}
.type .tx {
min-width: 0;
}
.ico {
vertical-align: -.18em;
fill: none;
stroke: currentColor;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
width: 1.15em;
height: 1.15em;
display: inline-block;
}
@media (max-width: 860px) {
.type-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.type-grid {
grid-template-columns: 1fr;
}
}
:root {
--ok: var(--status-ok);
--ok-soft: var(--status-ok-soft);
--bad: var(--status-risk);
--bad-soft: var(--status-risk-soft);
--ai-line: #d6d1f6;
}
@supports (color: color-mix(in lab, red, red)) {
:root {
--ai-line: color-mix(in srgb, var(--ai) 28%, var(--white));
}
}
.page-sub {
color: var(--ink-3);
max-width: 720px;
margin-top: 4px;
font-size: 13px;
line-height: 1.5;
}
.chip-bad {
background: var(--bad-soft);
color: var(--status-risk-deep);
}
.chip-bad .dot {
background: var(--bad);
}
.kpi-value.bad {
color: var(--bad);
}
.seg {
border: 1px solid var(--rule);
border-radius: var(--r-sm);
display: inline-flex;
overflow: hidden;
}
.seg button {
background: var(--white);
border: none;
border-right: 1px solid var(--rule);
cursor: pointer;
color: var(--ink-3);
font-size: 12px;
font-family: var(--font);
padding: 7px 13px;
}
.seg button:last-child {
border-right: none;
}
.seg button.on {
background: var(--mod-soft);
color: var(--mod-deep);
font-weight: 600;
}
.field-hint {
color: var(--ink-4);
font-size: 11px;
font-weight: 400;
}
.textarea {
resize: vertical;
min-height: 70px;
line-height: 1.5;
}
.fb-decisions {
flex-direction: column;
gap: 7px;
margin-bottom: 14px;
padding: 0;
list-style: none;
display: flex;
}
.fb-meta {
flex-wrap: wrap;
align-items: center;
gap: 20px;
margin-bottom: 20px;
display: flex;
}
.fb-meta-item {
flex-direction: column;
gap: 2px;
display: flex;
}
.fb-meta-k {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 10px;
}
.fb-meta-v {
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
}
.fb-legend {
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-left: auto;
display: flex;
}
.fb-legend-label {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 10px;
}
.fb-legend-item {
color: var(--ink-2);
align-items: center;
gap: 6px;
font-size: 11.5px;
display: inline-flex;
}
.fb-legend-dot {
border-radius: 50%;
width: 8px;
height: 8px;
display: inline-block;
}
.fb-legend-dot.is-ok {
background: var(--status-ok);
}
.fb-legend-dot.is-warn {
background: var(--status-warn);
}
.fb-legend-dot.is-info {
background: var(--status-info);
}
.fb-grouphead {
margin-top: 30px;
margin-bottom: 4px;
font-size: 18px;
font-weight: 650;
}
.fb-grouphead .n {
font-family: var(--mono);
color: var(--ink-4);
font-size: 11px;
font-weight: 400;
}
.fb-hint {
color: var(--ink-3);
margin-bottom: 16px;
font-size: 13px;
}
[data-module] .note {
background: var(--mod-soft);
border: 1px solid var(--mod);
align-items: flex-start;
gap: 10px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
[data-module] .note {
border: 1px solid color-mix(in srgb, var(--mod) 28%, var(--white));
}
}
[data-module] .note {
border-radius: var(--r-md);
color: var(--mod-deep);
padding: 11px 14px;
font-size: 12.5px;
}
[data-module] .note.amber {
background: var(--status-warn-soft);
border-color: #ece1c6;
}
@supports (color: color-mix(in lab, red, red)) {
[data-module] .note.amber {
border-color: color-mix(in srgb, var(--status-warn) 35%, var(--white));
}
}
[data-module] .note.amber {
color: var(--status-warn-deep);
}
[data-module] .note .ic {
font-weight: 700;
}
.horn-av.lg {
border-radius: 11px;
width: 44px;
height: 44px;
}
.horn-card {
background: var(--ai-grad);
border: 1px solid var(--ai-line);
border-radius: var(--r-md);
padding: 16px 18px;
}
.horn-head {
align-items: center;
gap: 10px;
margin-bottom: 4px;
display: flex;
}
.horn-name {
color: var(--ai-deep);
font-size: 13px;
font-weight: 700;
}
.horn-name small {
color: var(--ai);
font-weight: 500;
font-family: var(--mono);
letter-spacing: .04em;
margin-left: 6px;
font-size: 10px;
}
.horn-badge {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ai-deep);
background: var(--ai-soft);
border: 1px solid var(--ai-line);
border-radius: 99px;
padding: 3px 8px;
font-size: 9.5px;
}
.hitl {
color: var(--ink-3);
align-items: center;
gap: 6px;
font-size: 11px;
display: inline-flex;
}
.horn-alert {
background: #f9f8fe;
grid-template-columns: 44px 1fr auto;
gap: 16px;
display: grid;
}
@supports (color: color-mix(in lab, red, red)) {
.horn-alert {
background: color-mix(in srgb, var(--ai) 4%, var(--white));
}
}
.horn-alert {
border: 1px solid var(--ai-line);
border-left: 4px solid var(--ai);
border-radius: var(--r-lg);
align-items: start;
margin-bottom: 22px;
padding: 18px 20px;
}
.horn-alert .ha-top {
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 6px;
display: flex;
}
.horn-alert .ha-time {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 10px;
}
.horn-alert .ha-title {
color: var(--ink);
letter-spacing: -.01em;
font-size: 16px;
font-weight: 600;
}
.horn-alert .ha-text {
color: var(--ink-2);
max-width: 760px;
margin-top: 5px;
font-size: 13px;
line-height: 1.5;
}
.horn-alert .ha-sources {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 9px;
font-size: 10.5px;
}
.horn-alert .ha-sources b {
color: var(--ai-deep);
font-weight: 600;
}
.horn-alert .ha-actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
min-width: 180px;
display: flex;
}
.feed-item {
border-bottom: 1px solid var(--rule-soft);
grid-template-columns: 34px 1fr;
gap: 11px;
padding: 12px 0;
display: grid;
}
.feed-item:last-child {
border-bottom: none;
}
.feed-item .fi-title {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.feed-item .fi-desc {
color: var(--ink-3);
margin-top: 2px;
font-size: 12px;
line-height: 1.45;
}
.feed-item .fi-meta {
font-family: var(--mono);
color: var(--ink-4);
margin-top: 5px;
font-size: 10px;
}
.frist-row {
border-bottom: 1px solid var(--rule-soft);
justify-content: space-between;
align-items: center;
padding: 10px 0;
font-size: 13px;
display: flex;
}
.frist-row:last-child {
border-bottom: none;
}
.frist-row .fl {
color: var(--ink-2);
}
.frist-row .fl small {
color: var(--ink-4);
font-size: 11px;
display: block;
}
.col-2 {
grid-template-columns: 1fr 1fr;
gap: 14px;
display: grid;
}
.flex-row {
gap: 10px;
display: flex;
}
[data-module="regulierte-stoffe"] .btn-primary {
background: var(--mod);
border-color: var(--mod);
color: var(--white);
}
[data-module="regulierte-stoffe"] .btn-primary:hover {
background: var(--mod-deep);
border-color: var(--mod-deep);
}
[data-module="regulierte-stoffe"] .field-label {
font-weight: 600;
}
@media print {
.rs-no-print {
display: none !important;
}
body {
background: #fff !important;
}
}
.hx-drawer-ft .grow, .grow {
flex: 1;
}
.optlist {
flex-direction: column;
gap: 8px;
display: flex;
}
.timeline .tl-comment {
--tc: var(--ink-4);
}
.fk-rsn {
font-family: var(--mono);
background: var(--paper-2);
color: var(--ink-3);
border-radius: 99px;
padding: 2px 7px;
font-size: 10px;
}
.fk-rsn.warn {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.fk-rsn.risk {
background: var(--status-risk-soft);
color: var(--status-risk-deep);
}
.card-tags {
flex-wrap: wrap;
gap: 5px;
margin-top: 9px;
display: flex;
}
.pbar {
background: var(--rule);
border-radius: 99px;
height: 3px;
margin-top: 9px;
overflow: hidden;
}
.pbar i {
background: var(--mod);
border-radius: 99px;
height: 100%;
display: block;
}
.card-appr {
color: var(--status-warn-deep);
align-items: center;
gap: 5px;
margin-top: 9px;
font-size: 11px;
display: flex;
}
.assign-suggest {
border: 1px solid var(--ai-soft, #6d5ae033);
flex-direction: column;
gap: 0;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.assign-suggest {
border: 1px solid var(--ai-soft, color-mix(in srgb,var(--ai, #7c3aed) 20%,transparent));
}
}
.assign-suggest {
border-radius: 8px;
font-size: 12px;
overflow: hidden;
}
.assign-suggest-head {
background: var(--ai-soft, #6d5ae01a);
align-items: center;
gap: 6px;
padding: 7px 10px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.assign-suggest-head {
background: var(--ai-soft, color-mix(in srgb,var(--ai, #7c3aed) 10%,transparent));
}
}
.assign-suggest-head {
border-bottom: 1px solid var(--ai-soft, #6d5ae033);
}
@supports (color: color-mix(in lab, red, red)) {
.assign-suggest-head {
border-bottom: 1px solid var(--ai-soft, color-mix(in srgb,var(--ai, #7c3aed) 20%,transparent));
}
}
.assign-suggest-badge {
letter-spacing: .04em;
background: var(--ai, #7c3aed);
color: var(--white, #fff);
font-size: 10px;
font-weight: 600;
font-family: var(--mono);
border-radius: 99px;
align-items: center;
gap: 3px;
padding: 2px 7px;
display: inline-flex;
}
.assign-suggest-body {
flex-direction: column;
gap: 0;
display: flex;
}
.assign-suggest-row {
border-bottom: 1px solid var(--rule, #00000012);
flex-direction: column;
gap: 5px;
padding: 9px 10px;
display: flex;
}
.assign-suggest-row:last-child {
border-bottom: none;
}
.assign-suggest-meta {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.assign-suggest-name {
color: var(--ink-2);
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
font-weight: 500;
overflow: hidden;
}
.assign-suggest-role {
font-size: 10px;
font-family: var(--mono);
color: var(--ink-4);
}
.assign-suggest-conf {
align-items: center;
gap: 5px;
display: flex;
}
.assign-suggest-bar {
background: var(--rule);
border-radius: 99px;
flex: 1;
height: 4px;
overflow: hidden;
}
.assign-suggest-bar-fill {
background: var(--ai, #7c3aed);
border-radius: 99px;
height: 100%;
transition: width .2s;
}
.assign-suggest-pct {
font-size: 10px;
font-family: var(--mono);
color: var(--ink-3);
text-align: right;
min-width: 2.5ch;
}
.assign-suggest-keywords {
flex-wrap: wrap;
gap: 4px;
display: flex;
}
.assign-suggest-capacity {
color: var(--ink-4);
font-size: 10px;
}
.assign-suggest-foot {
color: var(--ink-4);
padding: 6px 10px;
font-size: 10px;
font-style: italic;
line-height: 1.4;
}
.assign-suggest-empty {
color: var(--ink-4);
text-align: center;
padding: 10px;
font-size: 12px;
font-style: italic;
}
.floor-note {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: var(--ink-2);
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
padding: 12px 14px;
font-size: 12.5px;
line-height: 1.5;
display: flex;
}
.floor-note svg {
color: var(--ink-4);
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 1px;
}
.floor-note b {
color: var(--ink);
}
.subtask-disc {
cursor: pointer;
background: conic-gradient(var(--mod) calc(var(--p, 0) * 1%), var(--paper-2) 0);
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
display: flex;
position: relative;
}
.subtask-disc:after {
content: "";
background: var(--white);
border-radius: 50%;
width: 11px;
height: 11px;
}
.subtask-disc.is-done {
background: var(--mod);
}
.subtask-disc.is-done:after {
background: var(--mod-soft, var(--mod));
}
@supports (color: color-mix(in lab, red, red)) {
.subtask-disc.is-done:after {
background: var(--mod-soft, color-mix(in srgb,var(--mod) 20%,var(--white)));
}
}
.subtask-edit .range-ov {
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
inset: 0;
}
.bc-seg.root {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
font-size: 10px;
}
.dp-prog {
background: var(--rule);
border-radius: 3px;
height: 5px;
margin-bottom: 14px;
overflow: hidden;
}
.dp-seg-bar {
background: var(--mod);
border-radius: 3px;
height: 100%;
transition: width .4s;
}
.dp-counter {
color: var(--ink-3);
background: var(--mod-soft);
border-radius: 999px;
align-items: center;
gap: 9px;
margin-bottom: 26px;
padding: 7px 15px;
font-size: 13px;
display: inline-flex;
}
.dp-counter b {
color: var(--mod-deep);
font-variant-numeric: tabular-nums;
font-size: 15px;
}
.dp-counter .live {
background: var(--status-ok);
border-radius: 50%;
width: 7px;
height: 7px;
animation: 1.8s ease-out infinite blip;
}
.dp-flow-foot {
justify-content: space-between;
align-items: center;
margin-top: 16px;
display: flex;
}
.dp-flow-foot .dp-skip {
color: var(--ink-4);
cursor: pointer;
background: none;
border: 0;
font-family: inherit;
font-size: 13px;
}
.dp-flow-foot .dp-skip:hover {
color: var(--ink-2);
}
.dp-pickwrap {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
margin-top: 18px;
padding: 18px;
}
.dp-domtabs {
flex-wrap: wrap;
gap: 6px;
margin-bottom: 18px;
display: flex;
}
.dp-domtab {
font: inherit;
white-space: nowrap;
border: 1.5px solid var(--rule);
background: var(--white);
color: var(--ink-3);
cursor: pointer;
border-radius: 999px;
align-items: center;
gap: 7px;
padding: 8px 16px;
font-size: 12.5px;
font-weight: 600;
transition: all .15s;
display: flex;
}
.dp-domtab .n {
font-family: var(--mono);
background: var(--paper);
color: var(--ink-4);
border-radius: 999px;
padding: 1px 6px;
font-size: 10px;
}
.dp-domtab:hover {
border-color: var(--mod);
color: var(--mod-deep);
}
.dp-domtab.on {
background: var(--mod);
border-color: var(--mod);
color: #fff;
}
.dp-domtab.on .n {
color: #fff;
background: #ffffff40;
}
.dp-domtab.has .n {
background: var(--mod-soft);
color: var(--mod-deep);
}
.dp-domtab.on.has .n {
color: #fff;
background: #ffffff40;
}
.dp-tilegrid {
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 12px;
display: grid;
}
.dp-tile {
background: var(--white);
border: 1.5px solid var(--rule);
border-radius: var(--r-lg);
cursor: pointer;
text-align: center;
padding: 18px 14px 15px;
transition: transform .16s, border-color .16s, box-shadow .16s;
position: relative;
overflow: hidden;
}
.dp-tile:hover {
border-color: var(--mod);
box-shadow: var(--shadow-card);
transform: translateY(-3px);
}
.dp-tile .ti {
margin-bottom: 10px;
font-size: 30px;
line-height: 1;
transition: transform .25s;
display: inline-block;
}
.dp-tile:hover .ti {
transform: scale(1.12)rotate(-4deg);
}
.dp-tile .tn {
color: var(--ink-2);
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
}
.dp-tile .dp-tcheck {
border: 1.5px solid var(--rule);
background: var(--white);
border-radius: 50%;
place-items: center;
width: 22px;
height: 22px;
transition: all .15s;
display: grid;
position: absolute;
top: 9px;
right: 9px;
}
.dp-tile.sel {
border-color: var(--mod);
background: var(--mod-soft);
box-shadow: 0 0 0 3px var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.dp-tile.sel {
box-shadow: 0 0 0 3px color-mix(in srgb,var(--mod) 18%,transparent);
}
}
.dp-tile.sel .dp-tcheck {
background: var(--mod);
border-color: var(--mod);
}
.dp-tile.sel .dp-tcheck:after {
content: "";
border: 2px solid #fff;
border-width: 0 2px 2px 0;
width: 6px;
height: 10px;
transform: rotate(45deg)translateY(-1px);
}
.dp-tile.sel .tn {
color: var(--mod-deep);
font-weight: 700;
}
.dp-tile-custom {
cursor: default;
border-style: dashed;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
display: flex;
}
.dp-tile-custom:hover {
box-shadow: none;
transform: none;
}
.dp-tile-input {
width: 100%;
font: inherit;
text-align: center;
border: 1px solid var(--rule);
border-radius: var(--r-sm);
color: var(--ink);
padding: 7px 8px;
font-size: 12.5px;
}
.dp-tile-input:focus {
border-color: var(--ai);
box-shadow: 0 0 0 3px var(--ai-soft);
outline: none;
}
.dp-tile-addbtn {
font: inherit;
background: var(--ai);
color: var(--white);
border-radius: var(--r-sm);
cursor: pointer;
border: 0;
padding: 6px 12px;
font-size: 11.5px;
font-weight: 600;
}
.dp-tile-addbtn:hover {
background: var(--ai-deep);
}
.dp-tempo-track {
background: linear-gradient(90deg, var(--status-risk), #e8c14a 52%, var(--status-ok));
border-radius: 5px;
height: 8px;
position: relative;
}
.dp-tempo-input {
appearance: none;
cursor: pointer;
background: none;
width: 100%;
height: 34px;
margin-top: -21px;
display: block;
position: relative;
}
.dp-tempo-input::-webkit-slider-thumb {
-webkit-appearance: none;
background: var(--white);
border: 3px solid var(--mod);
width: 24px;
height: 24px;
box-shadow: var(--shadow-card);
cursor: grab;
border-radius: 50%;
}
.dp-tempo-input::-moz-range-thumb {
background: var(--white);
border: 3px solid var(--mod);
width: 24px;
height: 24px;
box-shadow: var(--shadow-card);
cursor: grab;
border-style: solid;
border-radius: 50%;
}
.dp-tempo-ends {
color: var(--ink-4);
justify-content: space-between;
align-items: center;
margin-top: 5px;
font-size: 11.5px;
display: flex;
}
.dp-tempo-current {
white-space: nowrap;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 700;
display: inline-flex;
}
.dp-tempo-sub {
color: var(--ink-3);
font-size: 11.5px;
font-weight: 400;
}
.dp-tempo-main {
position: relative;
}
.dp-tempo-track-emoji {
height: 10px;
}
.dp-tempo-input-emoji::-webkit-slider-thumb {
opacity: 0;
}
.dp-tempo-input-emoji::-moz-range-thumb {
opacity: 0;
}
.dp-tempo-main-emoji {
padding-top: 32px;
}
.dp-tempo-emoji-thumb {
background: var(--white);
border: 2.5px solid var(--mod);
pointer-events: none;
z-index: 2;
width: 54px;
height: 54px;
box-shadow: var(--shadow-card);
border-radius: 50%;
place-items: center;
font-size: 37px;
line-height: 1;
display: grid;
position: absolute;
top: 37px;
transform: translate(-50%, -50%);
}
.dp-tempo-emoji-pop {
animation: .35s cubic-bezier(.34, 1.56, .64, 1) dp-emoji-pop;
}
@keyframes dp-emoji-pop {
0% {
opacity: 0;
transform: translate(-50%, -50%)scale(.3)rotate(-12deg);
}
60% {
opacity: 1;
transform: translate(-50%, -50%)scale(1.25)rotate(4deg);
}
100% {
transform: translate(-50%, -50%)scale(1)rotate(0);
}
}
.dp-tempo-suggest-marker {
cursor: pointer;
background: radial-gradient(circle at 32% 28%, var(--ai-bright, var(--ai)), var(--ai));
border-radius: 50%;
place-items: center;
width: 16px;
height: 16px;
animation: 2.2s ease-in-out infinite dp-orbpulse;
display: grid;
position: absolute;
top: -22px;
transform: translateX(-50%);
}
.dp-tempo-suggest-marker svg {
stroke: #fff;
fill: none;
stroke-width: 2.6px;
stroke-linecap: round;
stroke-linejoin: round;
width: 9px;
height: 9px;
}
.dp-tempo-suggest-marker:after {
content: "";
background: var(--ai);
width: 1px;
height: 6px;
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
}
.dp-tempo-suggest-marker:hover {
filter: brightness(1.08);
}
.dp-tempo-suggest-chip {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
background: var(--ai-tint);
color: var(--ai-deep);
border: 1px solid #c6bde0;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 10.5px;
display: inline-flex;
}
@supports (color: color-mix(in lab, red, red)) {
.dp-tempo-suggest-chip {
border: 1px solid color-mix(in srgb, var(--ai) 30%, var(--rule));
}
}
.dp-tempo-suggest-chip {
cursor: pointer;
border-radius: 999px;
padding: 5px 12px;
}
.dp-tempo-suggest-chip:before {
content: "";
background: var(--ai);
border-radius: 50%;
flex-shrink: 0;
width: 5px;
height: 5px;
}
.dp-tempo-suggest-chip:hover {
filter: brightness(1.08);
}
.dp-suggest-all {
background: var(--ai-tint, var(--ai-soft));
border: 1px solid #d0c9e0;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.dp-suggest-all {
border: 1px solid color-mix(in srgb, var(--ai) 22%, var(--rule));
}
}
.dp-suggest-all {
border-radius: var(--r-md);
margin-top: 4px;
padding: 10px 14px;
}
.dp-suggest-all-label {
color: var(--ai-deep);
font-size: 12.5px;
font-weight: 600;
}
.dp-suggest-all-actions {
gap: 8px;
display: flex;
}
.dp-rc-meta {
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
display: flex;
}
.dp-rc-of {
font-family: var(--mono);
letter-spacing: .05em;
color: var(--ink-4);
font-size: 11px;
}
.dp-rc-of b {
color: var(--mod-deep);
}
.dp-rc-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.dp-rc-top {
border-bottom: 1px solid var(--rule);
align-items: center;
gap: 11px;
padding: 12px 20px;
display: flex;
}
.dp-rc-top .pico {
background: var(--mod-soft);
border-radius: 9px;
flex-shrink: 0;
place-items: center;
width: 34px;
height: 34px;
font-size: 17px;
display: grid;
}
.dp-rc-top h3 {
font-size: 15px;
}
.dp-rc-top .pdom {
color: var(--ink-4);
font-size: 12px;
}
.dp-rc-body {
flex-direction: column;
gap: 13px;
padding: 14px 20px;
display: flex;
}
.dp-rc-q .ql {
color: var(--ink);
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 13.5px;
font-weight: 600;
display: flex;
}
.dp-rc-q .ql .opt {
color: var(--ink-4);
font-size: 12px;
font-weight: 400;
}
.dp-mbchip {
font: inherit;
border: 1.5px solid var(--rule);
background: var(--white);
color: var(--ink-2);
border-radius: var(--r-md);
cursor: pointer;
align-items: center;
gap: 8px;
padding: 8px 13px;
font-size: 12.5px;
transition: all .13s;
display: inline-flex;
}
.dp-mbchip:hover {
border-color: var(--mod);
}
.dp-mbchip.sel {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
font-weight: 600;
}
.dp-mbchip.bad.sel {
border-color: var(--status-risk);
background: #faf0ee;
}
@supports (color: color-mix(in lab, red, red)) {
.dp-mbchip.bad.sel {
background: color-mix(in srgb,var(--status-risk) 9%,var(--white));
}
}
.dp-mbchip.bad.sel {
color: var(--status-risk);
}
.dp-freq-chips {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.dp-freq-chip {
font: inherit;
border: 1.5px solid var(--rule);
background: var(--white);
color: var(--ink-2);
border-radius: var(--r-md);
cursor: pointer;
padding: 8px 14px;
font-size: 12.5px;
transition: all .13s;
}
.dp-freq-chip:hover {
border-color: var(--mod);
}
.dp-freq-chip.sel {
border-color: var(--mod);
background: var(--mod-soft);
color: var(--mod-deep);
font-weight: 600;
}
.dp-emo {
gap: 10px;
display: flex;
}
.dp-emo button {
border-radius: var(--r-md);
border: 1.5px solid var(--rule);
background: var(--white);
cursor: pointer;
filter: grayscale(.4);
width: 54px;
height: 54px;
font-size: 26px;
line-height: 1;
transition: all .13s;
}
.dp-emo button:hover {
border-color: var(--mod);
filter: none;
}
.dp-emo button.sel {
border-color: var(--mod);
background: var(--mod-soft);
filter: none;
transform: scale(1.06);
}
.dp-rc-note {
resize: none;
width: 100%;
font: inherit;
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: var(--ink);
min-height: 44px;
padding: 9px 12px;
font-size: 13.5px;
}
.dp-rc-note:focus {
border-color: var(--mod);
box-shadow: 0 0 0 3px var(--mod-soft);
outline: none;
}
.dp-rc-note::placeholder {
color: var(--ink-4);
}
.dp-answer-summary {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: var(--ink-3);
margin-top: 4px;
padding: 12px 14px;
font-size: 12.5px;
line-height: 1.5;
}
.dp-answer-summary b {
color: var(--ink-2);
}
.dp-answer-summary .lbl {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 5px;
font-size: 9px;
display: block;
}
.dp-spiegel {
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.dp-done-mark {
background: radial-gradient(circle at 32% 28%, var(--ai-bright, var(--ai)), var(--ai));
border-radius: 50%;
place-items: center;
width: 60px;
height: 60px;
margin: 0 auto 18px;
display: grid;
}
.dp-done-mark svg {
stroke: #fff;
fill: none;
stroke-width: 2.4px;
stroke-linecap: round;
stroke-linejoin: round;
width: 30px;
height: 30px;
}
.dp-mirror {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
text-align: left;
margin: 22px 0;
padding: 20px 22px;
}
.dp-mirror .mh {
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
display: flex;
}
.dp-mirror .mh b {
font-size: 14px;
}
.dp-mirror .mh .tag-mod {
font-family: var(--mono);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--mod-deep);
background: var(--mod-soft);
border-radius: 999px;
padding: 3px 9px;
font-size: 10px;
}
.dp-mrow {
grid-template-columns: 160px 1fr 60px;
align-items: center;
gap: 12px;
padding: 7px 0;
display: grid;
}
.dp-mrow + .dp-mrow {
border-top: 1px solid var(--rule);
}
.dp-mrow .mn {
color: var(--ink-2);
font-size: 13px;
}
.dp-mrow .mbar {
background: var(--paper);
border-radius: 5px;
height: 9px;
overflow: hidden;
}
.dp-mrow .mfill {
border-radius: 5px;
height: 100%;
}
.dp-mrow .mv {
font-size: 12px;
font-family: var(--mono);
color: var(--ink-3);
text-align: right;
}
.dp-closer {
color: var(--ink-3);
text-wrap: pretty;
font-size: 13.5px;
}
.dp-confetti-piece {
pointer-events: none;
z-index: 50;
opacity: .9;
border-radius: 2px;
position: fixed;
top: -12px;
}
.dp-drei-wege-title {
color: var(--ink);
text-align: center;
margin-top: 28px;
margin-bottom: 8px;
font-size: 19px;
font-weight: 700;
}
.dp-drei-wege-sub {
color: var(--ink-3);
text-align: center;
max-width: 560px;
margin: 0 auto 6px;
font-size: 13px;
line-height: 1.5;
}
.dp-mirror .mh .tag-mod.ai {
background: var(--ai-soft);
color: var(--ai-deep);
}
.dp-mirror .mh .tag-mod.ok {
background: var(--status-ok-soft, var(--ai-soft));
color: var(--status-ok);
}
.dp-mirror .pain {
margin-bottom: 12px;
padding-top: 4px;
}
.dp-mirror .pain:last-child {
margin-bottom: 0;
}
.dp-mirror .pt {
align-items: center;
gap: 10px;
margin-bottom: 6px;
display: flex;
}
.dp-mirror .rank {
color: #fff;
border-radius: 50%;
flex-shrink: 0;
place-items: center;
width: 22px;
height: 22px;
font-size: 11px;
font-weight: 700;
display: grid;
}
.dp-mirror .rank.r1 {
background: var(--ai-deep);
}
.dp-mirror .rank.r2 {
background: var(--ai);
}
.dp-mirror .rank.r3 {
background: var(--mod);
}
.dp-mirror .rank.rok {
background: var(--status-ok);
}
.dp-mirror .rank.rneutral {
background: var(--ink-4);
}
.dp-mirror .pn {
color: var(--ink);
font-size: 13px;
font-weight: 600;
}
.dp-mirror .quote {
color: var(--ink-3);
border-left: 2px solid var(--rule);
margin-left: 32px;
padding-left: 14px;
font-size: 12.5px;
line-height: 1.5;
}
.dp-mirror .quote.q1 {
border-left-color: var(--ai-deep);
}
.dp-mirror .quote.q2 {
border-left-color: var(--ai);
}
.dp-mirror .quote.q3 {
border-left-color: var(--mod);
}
.dp-mirror .quote.qok {
border-left-color: var(--status-ok);
}
.dp-mirror .quote.qneutral {
border-left-color: var(--ink-4);
}
.dp-two-col {
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 22px 0;
display: grid;
}
.dp-two-col .dp-mirror {
margin: 0;
}
@media (max-width: 640px) {
.dp-two-col {
grid-template-columns: 1fr;
}
}
.dp-hornaut-closer {
text-align: left;
background: var(--ai-tint, var(--ai-soft));
border: 1px solid #d5cee0;
align-items: flex-start;
gap: 10px;
display: flex;
}
@supports (color: color-mix(in lab, red, red)) {
.dp-hornaut-closer {
border: 1px solid color-mix(in srgb, var(--ai) 18%, var(--rule));
}
}
.dp-hornaut-closer {
border-radius: var(--r-lg);
margin: 18px 0;
padding: 14px 16px;
}
.dp-hornaut-closer .dp-rail-av {
flex-shrink: 0;
}
.dp-hornaut-closer .tx {
color: var(--ink-2);
font-size: 13px;
line-height: 1.55;
}
.dp-hornaut-closer .tx b {
color: var(--ink);
}
@keyframes dp-confetti-fall {
to {
opacity: 0;
transform: translateY(110vh)rotate(540deg);
}
}
.ed {
flex-direction: column;
flex: 1;
min-height: 0;
display: flex;
}
.ed-head {
background: var(--white);
border-bottom: 1px solid var(--rule);
flex: none;
align-items: center;
gap: 12px;
padding: 13px 22px;
display: flex;
}
.ed-head > .ver, .ed-head > .btn-ghost, .ed-head > .btn {
flex: none;
}
.ed-crumb {
color: var(--ink-4);
font-size: 12px;
font-family: var(--mono);
align-items: center;
gap: 8px;
display: flex;
}
.ed-crumb a {
color: var(--ink-3);
}
.ed-crumb a:hover {
color: var(--mod-deep);
}
.ed-titlewrap {
flex: 1 1 0;
min-width: 0;
}
.ed-title {
color: var(--ink);
letter-spacing: -.01em;
border-radius: var(--r-sm);
font-size: 19px;
font-weight: 800;
font-family: var(--font);
text-overflow: ellipsis;
background: none;
border: 1px solid #0000;
width: 100%;
max-width: 420px;
margin-left: -7px;
padding: 2px 7px;
}
.ed-title:hover {
border-color: var(--rule);
}
.ed-title:focus {
border-color: var(--mod);
background: var(--white);
box-shadow: 0 0 0 3px var(--mod-soft);
outline: none;
}
.ed-meta {
align-items: center;
gap: 10px;
margin-top: 4px;
display: flex;
}
.ed-prod {
font-family: var(--mono);
color: var(--ink-4);
font-size: 11px;
}
.ed-spacer {
flex: 0 0 0;
}
.ed-body {
flex: 1;
grid-template-columns: 360px 1fr;
min-height: 0;
display: grid;
}
.ed-body.has-preview {
grid-template-columns: 360px 1fr 300px;
}
.ed-preview {
border-left: 1px solid var(--rule);
background: var(--white);
flex-direction: column;
gap: 12px;
min-height: 0;
padding: 16px;
display: flex;
overflow-y: auto;
}
.ed-preview-hd {
flex: none;
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
@media (max-width: 1180px) {
.ed-body.has-preview {
grid-template-columns: 360px 1fr;
}
.ed-preview {
display: none;
}
}
.btn-ghost {
border-radius: var(--r-md);
border: 1px solid var(--rule);
background: var(--white);
height: 36px;
color: var(--ink-2);
cursor: pointer;
font-size: 13px;
font-weight: 600;
font-family: var(--font);
align-items: center;
gap: 7px;
padding: 0 14px;
display: inline-flex;
}
.btn-ghost:hover {
background: var(--paper-2);
color: var(--ink);
}
.tree-pane {
border-right: 1px solid var(--rule);
background: var(--white);
flex-direction: column;
min-height: 0;
display: flex;
}
.tree-top {
border-bottom: 1px solid var(--rule-soft);
flex: none;
align-items: center;
gap: 8px;
padding: 12px 14px;
display: flex;
}
.tree-top .lbl {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
flex: 1;
font-size: 10px;
}
.tree-list {
flex: 1;
padding: 8px 8px 20px;
overflow-y: auto;
}
.tree-foot {
border-top: 1px solid var(--rule-soft);
flex: none;
gap: 8px;
padding: 10px 12px;
display: flex;
}
.tree-foot .btn-ghost {
flex: 1;
justify-content: center;
height: 34px;
}
.node {
border-radius: var(--r-md);
}
.node-row {
border-radius: var(--r-md);
cursor: pointer;
align-items: center;
gap: 8px;
padding: 7px 8px;
display: flex;
position: relative;
}
.node-row:hover {
background: var(--paper-2);
}
.node-row.sel {
background: var(--mod-soft);
box-shadow: inset 2px 0 0 var(--mod);
}
.node-caret {
width: 16px;
color: var(--ink-4);
flex: none;
transition: transform .15s;
display: inline-flex;
}
.node.collapsed > .node-row .node-caret {
transform: rotate(-90deg);
}
.node-caret.leaf {
visibility: hidden;
}
.node-num {
font-family: var(--mono);
color: var(--ink-4);
flex: none;
min-width: 26px;
font-size: 11px;
font-weight: 700;
}
.node-ttl {
color: var(--ink-2);
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.3;
overflow: hidden;
}
.node.group > .node-row .node-ttl {
color: var(--ink);
font-weight: 700;
}
.node-row.sel .node-ttl {
color: var(--ink);
}
.node-ttl.is-placeholder {
color: var(--ink-4);
font-style: italic;
}
.node-badges {
flex: none;
align-items: center;
gap: 4px;
display: flex;
}
.nb {
font-family: var(--mono);
letter-spacing: .02em;
border-radius: 99px;
padding: 1px 5px;
font-size: 9px;
font-weight: 700;
}
.nb-opt {
background: var(--paper-2);
color: var(--ink-3);
border: 1px solid var(--rule);
}
.nb-reuse {
background: var(--status-info-soft);
color: var(--status-info);
}
.nb-dev {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.node-icons {
flex: none;
align-items: center;
gap: 3px;
display: flex;
}
.ci {
color: var(--ink-4);
display: inline-flex;
}
.ci.qs {
color: var(--status-info);
}
.ci.warn {
color: var(--status-warn-deep);
}
.ci.spec {
color: var(--mod);
}
.node-children {
border-left: 1px dashed var(--rule);
margin-left: 14px;
padding-left: 8px;
}
.node.collapsed > .node-children {
display: none;
}
.node-actions {
flex: none;
align-items: center;
gap: 2px;
display: none;
}
.node-row:hover .node-actions, .node-row.sel .node-actions {
display: flex;
}
.na-btn {
width: 24px;
height: 24px;
color: var(--ink-4);
cursor: pointer;
background: none;
border: none;
border-radius: 5px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.na-btn:hover {
background: var(--white);
color: var(--mod-deep);
box-shadow: 0 0 0 1px var(--rule);
}
.na-btn.del:hover {
color: var(--status-risk);
}
.node-row:hover .node-icons {
display: none;
}
.insert-line {
opacity: 0;
align-items: center;
gap: 8px;
height: 0;
padding: 0 8px;
transition: height .12s, opacity .12s;
display: flex;
overflow: hidden;
}
.node-row:hover + .insert-line, .insert-line:hover {
opacity: 1;
height: 26px;
}
.insert-line button {
color: var(--mod-deep);
background: var(--mod-soft);
border: 1px dashed var(--mod);
cursor: pointer;
font-size: 11px;
font-family: var(--font);
border-radius: 99px;
padding: 2px 10px;
}
.node.dragging {
opacity: .4;
}
.node-row.drop-before {
box-shadow: inset 0 3px 0 var(--mod);
}
.node-row.drop-after {
box-shadow: inset 0 -3px 0 var(--mod);
}
.node-row.drop-into {
background: var(--mod-soft);
box-shadow: inset 0 0 0 2px var(--mod);
}
.bcard {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
margin-bottom: 16px;
overflow: hidden;
}
.bcard-t {
color: var(--ink);
flex: 1;
font-size: 13px;
font-weight: 600;
}
.picker {
border: 1px solid var(--rule);
border-radius: var(--r-lg);
background: var(--white);
max-width: 560px;
box-shadow: var(--shadow-pop);
margin-top: 0;
overflow: hidden;
}
.picker .pk-row {
cursor: pointer;
text-align: left;
background: none;
border: none;
align-items: center;
gap: 11px;
width: 100%;
padding: 9px 16px;
font-family: inherit;
display: flex;
}
.picker .pk-tx {
flex: 1;
min-width: 0;
}
.pc-media {
background: repeating-linear-gradient(-45deg,var(--paper-2) 0 8px,var(--paper) 8px 16px);
height: 120px;
color: var(--ink-4);
font-size: 10px;
font-family: var(--mono);
text-align: center;
justify-content: center;
align-items: center;
padding: 0 10px;
display: flex;
}
.btn-studio {
border-color: var(--mod);
}
@supports (color: color-mix(in lab, red, red)) {
.btn-studio {
border-color: color-mix(in srgb,var(--mod) 40%,var(--white));
}
}
.btn-studio {
color: var(--mod-deep);
background: var(--mod-soft);
}
.btn-studio:hover {
border-color: var(--mod);
background: var(--mod-soft);
}
.ver {
position: relative;
}
.ver-chip {
border: 1px solid var(--rule);
background: var(--white);
cursor: pointer;
border-radius: 99px;
align-items: center;
gap: 9px;
height: 34px;
padding: 0 8px 0 12px;
font-size: 12.5px;
display: inline-flex;
}
.ver-chip:hover {
background: var(--paper-2);
}
.ver-chip .rev {
font-family: var(--mono);
color: var(--ink-2);
font-weight: 700;
}
.ver-chip .st {
font-family: var(--mono);
border-radius: 99px;
align-items: center;
gap: 5px;
padding: 2px 9px;
font-size: 11px;
font-weight: 600;
display: inline-flex;
}
.ver-chip .st .d {
border-radius: 50%;
width: 6px;
height: 6px;
}
.st-draft {
background: var(--status-warn-soft);
color: var(--status-warn-deep);
}
.st-draft .d {
background: var(--status-warn);
}
.st-review {
background: var(--status-info-soft);
color: var(--status-info);
}
.st-review .d {
background: var(--status-info);
}
.st-approved {
background: var(--mod-soft);
color: var(--mod-deep);
}
.st-approved .d {
background: var(--mod);
}
.st-published {
background: var(--status-ok-soft);
color: var(--status-ok);
}
.st-published .d {
background: var(--status-ok);
}
.ver-pop {
z-index: 60;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
width: 320px;
box-shadow: var(--shadow-pop);
padding: 8px;
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
}
.ver-pop.is-open {
display: block;
}
.ver-pop h4 {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin: 6px 8px 8px;
font-size: 10px;
}
.ver-row {
border-radius: var(--r-md);
gap: 10px;
padding: 9px 8px;
display: flex;
}
.ver-row + .ver-row {
border-top: 1px solid var(--rule-soft);
}
.ver-row .vr-rev {
font-family: var(--mono);
color: var(--ink-2);
flex: none;
width: 34px;
font-size: 12px;
font-weight: 700;
}
.ver-row .vr-tx {
color: var(--ink-3);
font-size: 12px;
line-height: 1.4;
}
.ver-row .vr-tx b {
color: var(--ink);
}
.ver-row.cur {
background: var(--mod-soft);
}
.flag {
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-md);
color: var(--ink-2);
align-items: center;
gap: 9px;
padding: 9px 13px;
font-size: 12.5px;
display: flex;
}
.flag b {
color: var(--ink);
font-weight: 600;
}
.flag .sub {
color: var(--ink-4);
font-size: 11px;
display: block;
}
.lbl-sm {
color: var(--ink-3);
margin-bottom: 6px;
font-size: 11px;
display: block;
}
.part-row {
grid-template-columns: 22px 48px 116px 1fr 112px 30px;
align-items: center;
gap: 8px;
display: grid;
}
.part-wrap {
margin-bottom: 8px;
}
.part-props {
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 6px 0 2px 56px;
display: flex;
}
.part-props .pp-lbl {
font-family: var(--mono);
letter-spacing: .03em;
text-transform: uppercase;
color: var(--mod-deep);
align-items: center;
gap: 5px;
font-size: 9.5px;
display: inline-flex;
}
.part-props .pp-lbl svg {
color: var(--mod);
}
.part-props .pp {
flex: 1;
min-width: 120px;
padding: 6px 9px;
font-size: 12px;
}
.part-row .inp {
padding: 7px 9px;
}
.pp-review {
font-family: var(--mono);
color: var(--ink-4);
white-space: nowrap;
font-size: 9.5px;
}
.add-row {
color: var(--mod-deep);
cursor: pointer;
font-size: 12px;
font-family: var(--font);
background: none;
border: none;
align-items: center;
gap: 6px;
padding: 6px 0 0;
font-weight: 600;
display: inline-flex;
}
.add-row:hover {
text-decoration: underline;
}
.part-head {
font-family: var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-4);
grid-template-columns: 22px 48px 116px 1fr 112px 30px;
gap: 8px;
margin-bottom: 2px;
padding: 0 2px;
font-size: 9.5px;
display: grid;
}
.psa-grid {
flex-wrap: wrap;
gap: 7px;
display: flex;
}
.psa-chip {
border: 1px solid var(--rule);
background: var(--white);
color: var(--ink-3);
cursor: pointer;
font-size: 12.5px;
font-family: var(--font);
border-radius: 99px;
align-items: center;
gap: 6px;
padding: 7px 12px;
display: inline-flex;
}
.psa-chip svg {
opacity: 0;
}
.psa-chip.is-on {
background: var(--mod-soft);
border-color: var(--mod);
color: var(--mod-deep);
font-weight: 600;
}
.psa-chip.is-on svg {
opacity: 1;
}
.tool-chips {
flex-wrap: wrap;
gap: 7px;
display: flex;
}
.tool-chip {
background: var(--white);
border: 1px solid var(--rule);
color: var(--ink-2);
border-radius: 99px;
align-items: center;
gap: 7px;
padding: 6px 8px 6px 11px;
font-size: 12.5px;
display: inline-flex;
}
.tool-chip button {
color: var(--ink-4);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: inline-flex;
}
.tool-chip button:hover {
color: var(--status-risk);
}
.tool-add {
border: 1px dashed var(--rule);
color: var(--ink-3);
cursor: pointer;
font-size: 12.5px;
font-family: var(--font);
background: none;
border-radius: 99px;
padding: 6px 12px;
}
.tool-add:hover {
border-color: var(--mod);
color: var(--mod-deep);
}
.spec-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
display: grid;
}
.sev-seg {
margin-bottom: 12px;
}
.step-pane {
background: var(--paper);
min-height: 0;
overflow-y: auto;
}
.sp-inner {
max-width: 860px;
margin: 0 auto;
padding: 26px 32px 80px;
}
.sp-empty {
height: 100%;
color: var(--ink-4);
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
display: flex;
}
.sp-head {
align-items: flex-start;
gap: 14px;
margin-bottom: 6px;
display: flex;
}
.media-slot {
flex-direction: column;
display: flex;
}
.rte-fig {
margin: 10px 0;
}
.fig-stage {
border-radius: var(--r-md);
position: relative;
}
.fig-stage img {
object-fit: cover;
border-radius: var(--r-md);
border: 1px solid var(--rule);
width: 100%;
height: 220px;
display: block;
}
.fig-stage.is-empty {
border: 1.5px dashed var(--rule);
border-radius: var(--r-md);
background: var(--white);
min-height: 180px;
color: var(--ink-4);
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.fig-stage.is-empty:hover {
border-color: var(--mod);
color: var(--mod-deep);
background: var(--mod-soft);
}
.fig-stage.placing {
cursor: crosshair;
}
.fig-stage.placing:after {
content: "Klick auf das Bild setzt eine Markierung";
z-index: 5;
background: var(--mod);
position: absolute;
inset: 0;
}
@supports (color: color-mix(in lab, red, red)) {
.fig-stage.placing:after {
background: color-mix(in srgb,var(--mod) 12%, transparent);
}
}
.fig-stage.placing:after {
border: 2px dashed var(--mod);
border-radius: var(--r-md);
color: var(--mod-deep);
text-align: center;
pointer-events: none;
justify-content: center;
align-items: center;
padding: 20px;
font-size: 12px;
font-weight: 700;
display: flex;
}
.fig-addpin {
z-index: 6;
background: #1c1a17b8;
border-radius: 99px;
height: 27px;
padding: 0 11px;
position: absolute;
top: 8px;
right: 8px;
}
@supports (color: color-mix(in lab, red, red)) {
.fig-addpin {
background: color-mix(in srgb, var(--ink) 72%, transparent);
}
}
.fig-addpin {
color: var(--white);
cursor: pointer;
font-size: 11px;
font-weight: 600;
font-family: var(--font);
border: none;
align-items: center;
gap: 6px;
display: none;
}
.rte-fig:hover .fig-addpin {
display: inline-flex;
}
.fig-pins {
pointer-events: none;
position: absolute;
inset: 0;
}
.fig-pins .fig-pin {
pointer-events: auto;
}
.fig-pin {
background: var(--mod);
width: 23px;
height: 23px;
color: var(--white);
font-family: var(--mono);
cursor: pointer;
box-shadow: 0 0 0 3px var(--white), var(--shadow-card);
z-index: 4;
border: none;
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 11px;
font-weight: 700;
display: flex;
position: absolute;
transform: translate(-50%, -50%);
}
.fig-pin:hover {
background: var(--mod-deep);
}
.fig-legend {
flex-direction: column;
gap: 4px;
margin: 8px 0 0;
padding: 0;
list-style: none;
display: flex;
}
.fig-legend:empty:after {
content: "Noch keine Markierungen";
color: var(--ink-4);
font-size: 11px;
}
.fig-legend li {
color: var(--ink-2);
cursor: pointer;
align-items: flex-start;
gap: 9px;
font-size: 12px;
display: flex;
}
.fig-legend li:hover {
color: var(--mod-deep);
}
.fig-legend .fl-n {
background: var(--mod-soft);
width: 19px;
height: 19px;
color: var(--mod-deep);
font-family: var(--mono);
border-radius: 50%;
flex: none;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
display: flex;
}
.fl-t {
flex-direction: column;
gap: 2px;
min-width: 0;
display: flex;
}
.fig-legend .fl-v {
font-family: var(--mono);
color: var(--ink-4);
margin-left: auto;
font-size: 11px;
}
.fig-stage.drag-over {
cursor: copy;
}
.fig-stage.drag-over:after {
content: "Hier ablegen, um zu verknüpfen";
z-index: 5;
background: var(--mod);
position: absolute;
inset: 0;
}
@supports (color: color-mix(in lab, red, red)) {
.fig-stage.drag-over:after {
background: color-mix(in srgb, var(--mod) 14%, transparent);
}
}
.fig-stage.drag-over:after {
border: 2px dashed var(--mod);
border-radius: var(--r-md);
color: var(--mod-deep);
text-align: center;
pointer-events: none;
justify-content: center;
align-items: center;
padding: 8px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.fig-pin .m-sym {
width: 15px;
height: 15px;
display: block;
}
.fig-pin .m-sym .ico {
width: 15px;
height: 15px;
}
.media-slot .cap {
color: var(--ink-4);
margin-top: 6px;
font-size: 11px;
}
.media-slot .cap .inp {
text-align: center;
border-style: dashed;
font-size: 11px;
}
.fldpop {
z-index: 150;
background: var(--white);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
width: 280px;
box-shadow: var(--shadow-pop);
padding: 14px;
display: none;
position: absolute;
}
.fldpop.is-open {
display: block;
}
.fldpop.is-portal {
z-index: 200;
position: fixed;
}
.fldpop h5 {
font-family: var(--mono);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-4);
margin: 0 0 10px;
font-size: 10px;
}
.fldpop .fp-actions {
justify-content: flex-end;
gap: 8px;
margin-top: 14px;
display: flex;
}
.rte-wrap {
border: 1px solid var(--rule);
border-radius: var(--r-md);
background: var(--white);
overflow: hidden;
}
.rte-toolbar {
border-bottom: 1px solid var(--rule-soft);
background: var(--paper);
flex-wrap: wrap;
align-items: center;
gap: 2px;
padding: 6px;
display: flex;
}
.rte-btn {
border-radius: var(--r-sm);
min-width: 30px;
height: 30px;
color: var(--ink-2);
cursor: pointer;
font-size: 13px;
font-family: var(--font);
background: none;
border: 1px solid #0000;
justify-content: center;
align-items: center;
gap: 5px;
padding: 0 8px;
display: inline-flex;
}
.rte-btn:hover {
background: var(--white);
border-color: var(--rule);
color: var(--ink);
}
.rte-btn.accent {
color: var(--mod-deep);
}
.rte-btn.accent:hover {
background: var(--mod-soft);
border-color: var(--mod);
}
.rte-area {
min-height: 120px;
color: var(--ink);
outline: none;
padding: 14px 16px;
font-size: 14px;
line-height: 1.6;
}
.rte-area[data-ph]:empty:before {
content: attr(data-ph);
color: var(--ink-4);
}
.rte-area:focus {
box-shadow: inset 0 0 0 2px var(--mod-soft);
}
.rte-area h2 {
letter-spacing: -.01em;
margin: 12px 0 6px;
font-size: 18px;
font-weight: 700;
}
.rte-area h3 {
margin: 10px 0 5px;
font-size: 15px;
font-weight: 700;
}
.rte-area p {
margin: 0 0 8px;
}
.rte-area p:last-child {
margin-bottom: 0;
}
.rte-area ul, .rte-area ol {
margin: 0 0 8px;
padding-left: 22px;
}
.rte-area li {
margin-bottom: 3px;
}
.rte-area strong {
font-weight: 700;
}
.rte-field {
vertical-align: baseline;
align-items: center;
margin: 0 2px;
display: inline-flex;
}
.rte-field-btn {
border-radius: var(--r-sm);
background: var(--mod-soft);
border: 1px dashed var(--mod);
color: var(--mod-deep);
font-size: 12.5px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
align-items: center;
gap: 6px;
padding: 2px 9px;
display: inline-flex;
}
.rte-field[data-selected] .rte-field-btn {
box-shadow: inset 0 0 0 2px var(--mod-soft);
border-style: solid;
}
.rte-render {
color: var(--ink);
font-size: 14px;
line-height: 1.6;
}
.rte-render h2 {
letter-spacing: -.01em;
margin: 12px 0 6px;
font-size: 18px;
font-weight: 700;
}
.rte-render h3 {
margin: 10px 0 5px;
font-size: 15px;
font-weight: 700;
}
.rte-render p {
margin: 0 0 8px;
}
.rte-render p:last-child {
margin-bottom: 0;
}
.rte-render ul, .rte-render ol {
margin: 0 0 8px;
padding-left: 22px;
}
.rte-render li {
margin-bottom: 3px;
}
.rte-render strong {
font-weight: 700;
}
.rte-render .rte-field {
border-radius: var(--r-sm);
background: var(--mod-soft);
border: 1px dashed var(--mod);
color: var(--mod-deep);
align-items: center;
gap: 6px;
margin: 0 2px;
padding: 2px 9px;
font-size: 12.5px;
font-weight: 600;
display: inline-flex;
}
@media print {
body * {
visibility: hidden;
}
.pdoc, .pdoc * {
visibility: visible;
}
.pdoc {
width: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
.pdoc-sheet {
break-after: page;
}
.pdoc-sheet:last-child {
break-after: auto;
}
@page {
margin: 16mm 14mm;
}
}
.divider {
background: var(--rule);
flex-shrink: 0;
align-self: stretch;
width: 1px;
}
.surf-title {
color: var(--ink);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.surf-ctx {
color: var(--ink-3);
font-size: 11.5px;
line-height: 1.3;
}
.steplist {
align-items: center;
gap: 5px;
display: flex;
overflow-x: auto;
}
.step-pill {
font-family: var(--mono);
border: 1px solid var(--rule);
color: var(--ink-3);
background: var(--white);
cursor: pointer;
border-radius: 99px;
flex-shrink: 0;
padding: 5px 10px;
font-size: 11px;
}
.dnd-item .qtypips {
margin-left: auto;
}
.dnd-item.is-done {
opacity: .55;
cursor: default;
background: var(--paper);
}
.dnd-item.is-done:hover {
border-color: var(--rule);
background: var(--paper);
}
.dnd-item.is-done .di-ic {
color: var(--ink-4);
}
.studio-canvas.drag-over {
cursor: copy;
}
.studio-canvas.drag-over:after {
content: "Hier ablegen, um zu verknüpfen";
z-index: 5;
background: var(--mod);
position: absolute;
inset: 0;
}
@supports (color: color-mix(in lab, red, red)) {
.studio-canvas.drag-over:after {
background: color-mix(in srgb, var(--mod) 14%, transparent);
}
}
.studio-canvas.drag-over:after {
border: 2px dashed var(--mod);
border-radius: var(--r-md);
color: var(--mod-deep);
text-align: center;
pointer-events: none;
justify-content: center;
align-items: center;
padding: 8px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.studio-marker .m-sym {
width: 15px;
height: 15px;
display: block;
}
.studio-marker .m-sym .ico {
width: 15px;
height: 15px;
}
#attention-section:target > .ov-sec-head, #portfolio-section:target > .ov-sec-head {
background: var(--mod-soft);
border-radius: var(--r-md);
animation: 1.5s ease-out ov-sec-landing;
}
@keyframes ov-sec-landing {
from {
background: var(--mod-soft);
}
to {
background: none;
}
}
@media (prefers-reduced-motion: reduce) {
#attention-section:target > .ov-sec-head, #portfolio-section:target > .ov-sec-head {
background: none;
animation: none;
}
}
.wk-subtree {
border-left: 2px solid var(--rule);
margin: 14px 0;
padding-left: 14px;
}
.wk-subtree-head {
font-family: var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
outline: none;
margin-bottom: 6px;
font-size: 9.5px;
}
.wk-subtree.is-selected {
outline: 1px solid var(--mod);
outline-offset: 4px;
border-radius: var(--r-sm);
}
.wk-subtree .wk-node {
color: var(--mod);
}
.wk-subtree .emptyguide {
padding: 14px 12px;
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false
}
@property --tw-rotate-y {
syntax: "*";
inherits: false
}
@property --tw-rotate-z {
syntax: "*";
inherits: false
}
@property --tw-skew-x {
syntax: "*";
inherits: false
}
@property --tw-skew-y {
syntax: "*";
inherits: false
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-space-x-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-leading {
syntax: "*";
inherits: false
}
@property --tw-font-weight {
syntax: "*";
inherits: false
}
@property --tw-tracking {
syntax: "*";
inherits: false
}
@property --tw-ordinal {
syntax: "*";
inherits: false
}
@property --tw-slashed-zero {
syntax: "*";
inherits: false
}
@property --tw-numeric-figure {
syntax: "*";
inherits: false
}
@property --tw-numeric-spacing {
syntax: "*";
inherits: false
}
@property --tw-numeric-fraction {
syntax: "*";
inherits: false
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false
}
@property --tw-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false
}
@property --tw-inset-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false
}
@property --tw-ring-offset-width {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-blur {
syntax: "*";
inherits: false
}
@property --tw-brightness {
syntax: "*";
inherits: false
}
@property --tw-contrast {
syntax: "*";
inherits: false
}
@property --tw-grayscale {
syntax: "*";
inherits: false
}
@property --tw-hue-rotate {
syntax: "*";
inherits: false
}
@property --tw-invert {
syntax: "*";
inherits: false
}
@property --tw-opacity {
syntax: "*";
inherits: false
}
@property --tw-saturate {
syntax: "*";
inherits: false
}
@property --tw-sepia {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow-color {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-drop-shadow-size {
syntax: "*";
inherits: false
}
@property --tw-ease {
syntax: "*";
inherits: false
}
@keyframes pulse {
50% {
opacity: .5;
}
}
/* [project]/packages/editor/src/theme.css [app-client] (css) */
.horn-editor {
--horn-editor-bg: var(--color-paper, #f6f4ef);
--horn-editor-fg: var(--color-ink, #1a1a1a);
--horn-editor-muted: var(--color-ink-3, #6a6a6a);
--horn-editor-accent: var(--mod, var(--brand-primary));
--horn-editor-accent-deep: var(--mod-deep, var(--brand-primary-deep));
--horn-editor-accent-soft: var(--mod-soft, var(--brand-primary-soft));
--horn-editor-rule: var(--color-rule, #e6e3dc);
color: var(--horn-editor-fg);
border: 1px solid var(--horn-editor-rule);
font-family: var(--font-sans, system-ui, sans-serif);
background: #fff;
border-radius: 6px;
font-size: 14px;
line-height: 1.55;
}
.horn-editor .ProseMirror {
outline: none;
min-height: 8rem;
padding: 1rem 1.25rem;
}
.horn-editor .ProseMirror:focus {
outline: none;
}
.horn-editor .ProseMirror h1 {
margin: 1em 0 .4em;
font-size: 1.7em;
font-weight: 700;
line-height: 1.25;
}
.horn-editor .ProseMirror h2 {
margin: .9em 0 .35em;
font-size: 1.35em;
font-weight: 600;
line-height: 1.3;
}
.horn-editor .ProseMirror h3 {
margin: .8em 0 .3em;
font-size: 1.15em;
font-weight: 600;
line-height: 1.35;
}
.horn-editor .ProseMirror p {
margin: .5em 0;
}
.horn-editor .ProseMirror ul, .horn-editor .ProseMirror ol {
margin: .5em 0;
padding-left: 1.4em;
}
.horn-editor .ProseMirror ul {
list-style: outside;
}
.horn-editor .ProseMirror ol {
list-style: decimal;
}
.horn-editor .ProseMirror li {
margin: .15em 0;
}
.horn-editor .ProseMirror li > p {
margin: 0;
}
.horn-editor .ProseMirror blockquote {
border-left: 3px solid var(--horn-editor-rule);
color: var(--horn-editor-muted);
margin: .5em 0;
padding: .1em .8em;
}
.horn-editor .ProseMirror code {
background: var(--horn-editor-accent-soft);
color: var(--horn-editor-accent-deep);
font-family: var(--font-mono, ui-monospace, monospace);
border-radius: 3px;
padding: .1em .3em;
font-size: .9em;
}
.horn-editor .ProseMirror pre {
margin: .6em 0;
}
.horn-editor .ProseMirror pre code {
color: inherit;
background: none;
padding: 0;
}
.horn-editor .ProseMirror a {
color: var(--horn-editor-accent-deep);
text-decoration: underline;
}
.horn-editor .ProseMirror hr {
border: 0;
border-top: 1px solid var(--horn-editor-rule);
margin: 1em 0;
}
.horn-editor .ProseMirror strong {
font-weight: 600;
}
.horn-editor .ProseMirror em {
font-style: italic;
}
.horn-editor.wk-ed-body .ProseMirror h1 {
letter-spacing: -.02em;
margin: 34px 0 -2px;
font-size: 24px;
font-weight: 680;
line-height: 1.25;
}
.horn-editor.wk-ed-body .ProseMirror h2 {
letter-spacing: -.015em;
margin: 30px 0 -2px;
font-size: 19px;
font-weight: 660;
line-height: 1.3;
}
.horn-editor.wk-ed-body .ProseMirror h3 {
letter-spacing: unset;
margin: 24px 0 -4px;
font-size: 16px;
font-weight: 640;
line-height: 1.35;
}
.horn-editor.wk-ed-body .ProseMirror p {
font-size: unset;
font-weight: unset;
line-height: unset;
margin: unset;
letter-spacing: unset;
}
.horn-editor .horn-variable-chip {
background: var(--horn-editor-accent-soft);
color: var(--horn-editor-accent-deep);
white-space: nowrap;
cursor: default;
-webkit-user-select: none;
user-select: none;
border-radius: 999px;
margin: 0 .1em;
padding: 0 .4em;
font-size: .9em;
font-weight: 500;
display: inline-block;
}
.horn-editor .horn-variable-chip.ProseMirror-selectednode {
outline: 2px solid var(--horn-editor-accent);
}
.horn-editor .horn-locked-region {
background: var(--horn-editor-accent-soft);
border-left: 3px solid var(--horn-editor-accent);
opacity: .85;
border-radius: 0 4px 4px 0;
margin: .5rem 0;
padding: .5rem .75rem;
}
.horn-editor .horn-table {
border-collapse: collapse;
width: 100%;
margin: .75rem 0;
}
.horn-editor .horn-table td, .horn-editor .horn-table th {
border: 1px solid var(--horn-editor-rule);
vertical-align: top;
padding: .4em .7em;
}
.horn-editor .horn-table th {
background: var(--horn-editor-accent-soft);
text-align: left;
font-weight: 600;
}
.horn-editor-toolbar {
border-bottom: 1px solid var(--horn-editor-rule);
background: var(--horn-editor-bg);
border-radius: 6px 6px 0 0;
flex-wrap: wrap;
gap: .25rem;
padding: .4rem;
display: flex;
}
.horn-editor-toolbar button {
color: var(--horn-editor-fg);
cursor: pointer;
background: none;
border: 1px solid #0000;
border-radius: 4px;
padding: .25rem .5rem;
font-size: 13px;
}
.horn-editor-toolbar button:hover {
border-color: var(--horn-editor-rule);
background: #fff;
}
.wk-ed-body.horn-editor-toolbar {
top: var(--topbar-h);
z-index: 5;
position: sticky;
}
.horn-editor-toolbar .horn-variable-insert {
position: relative;
}
.horn-editor-toolbar .horn-variable-insert-menu {
z-index: 10;
border: 1px solid var(--horn-editor-rule);
background: #fff;
border-radius: 6px;
min-width: 220px;
max-height: 320px;
padding: .4rem;
position: absolute;
top: 100%;
left: 0;
overflow: auto;
box-shadow: 0 6px 18px #00000014;
}
.horn-editor-toolbar .horn-variable-insert-menu .group-label {
text-transform: uppercase;
color: var(--horn-editor-muted);
padding: .3rem .5rem .15rem;
font-size: 11px;
}
.horn-editor-toolbar .horn-variable-insert-menu .item {
cursor: pointer;
border-radius: 4px;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
padding: .3rem .5rem;
display: flex;
}
.horn-editor-toolbar .horn-variable-insert-menu .item:hover {
background: var(--horn-editor-accent-soft);
}
.horn-editor-toolbar .horn-variable-insert-menu .item .example {
color: var(--horn-editor-muted);
font-size: 11px;
font-family: var(--font-mono, ui-monospace, monospace);
}
/*# sourceMappingURL=_08_n8k1._.css.map*/