/* Панель формул, символів і диктування (vvid.js) */

.vv-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }

.vv-kn,
#jc .bbcode .vv-kn {
    display: inline-flex !important; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px; margin: 0;
    border: 1px solid #c9d3d6; border-radius: 4px; background: #fff; color: #333;
    font: 13px/1 Arial, sans-serif; cursor: pointer; white-space: nowrap;
}
#jc .bbcode .vv-kn { float: left; margin: 6px 4px; }
.vv-kn:hover, #jc .bbcode .vv-kn:hover { border-color: #59a8a5; color: #2c7f7b; }
.vv-kn.vv-akt, #jc .bbcode .vv-kn.vv-akt { background: #59a8a5; border-color: #59a8a5; color: #fff; }
.vv-kn .vv-ik { font: italic 15px/1 Georgia, 'Times New Roman', serif; }
.vv-kn svg { flex: none; }

.vv-mik.vv-slukhaie, #jc .bbcode .vv-mik.vv-slukhaie {
    background: #d9534f; border-color: #d9534f; color: #fff;
    animation: vv-puls 1.2s ease-in-out infinite;
}
@keyframes vv-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(217, 83, 79, 0); }
}
@media (prefers-reduced-motion: reduce) { .vv-mik.vv-slukhaie { animation: none; } }

.vv-panel {
    box-sizing: border-box; width: 100%; max-width: 600px;
    padding: 6px 8px 8px; border: 1px solid #e1e1e1; border-bottom: 0; background: #fafafa;
}
.error-popup .vv-panel { max-width: none; border-bottom: 1px solid #e1e1e1; margin-bottom: 6px; }
.vv-pidpys { margin: 6px 0 3px; font: 12px/1.3 Arial, sans-serif; color: #777; }
.vv-riad { display: flex; flex-wrap: wrap; gap: 4px; }

/* вкладки груп символів */
.vv-vkladky { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.vv-vkl {
    height: 26px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none;
    color: #666; font: 13px/1 Arial, sans-serif; cursor: pointer;
}
.vv-vkl.vv-akt { color: #2c7f7b; border-bottom-color: #59a8a5; font-weight: bold; }

.vv-s {
    min-width: 36px; height: 36px; padding: 0 6px;
    border: 1px solid #d5d9db; border-radius: 4px; background: #fff; color: #222;
    font: 17px/1 'Cambria Math', Cambria, 'Times New Roman', serif; cursor: pointer;
}
.vv-s:hover { border-color: #59a8a5; background: #eef7f6; }
.vv-f { min-width: 50px; font-style: italic; display: inline-flex; align-items: center; justify-content: center; }
.vv-f sup, .vv-f sub { font-size: 11px; }
.vv-f sup { align-self: flex-start; margin-top: 5px; }
.vv-f sub { align-self: flex-end; margin-bottom: 5px; }
.vv-pryamo { font-style: normal; }
.vv-vel { font-size: 24px; }
.vv-frac { display: inline-flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 1.05; }
.vv-frac v-s:first-child { border-bottom: 1px solid currentColor; padding: 0 3px; }
.vv-sys { font-size: 24px; font-style: normal; }
.vv-sys2 { display: inline-block; font-size: 10px; line-height: 1.1; text-align: left; }
.vv-pokaznyk { margin-right: -2px; }

/* Корінь: «галочка» (SVG на всю висоту) + риска над вмістом, що з неї виходить */
.vv-kor { position: relative; display: inline-flex; align-items: stretch; line-height: 1.15; }
.vv-kor-zn { position: absolute; left: 0; top: 0; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; }
.vv-kor-pid { display: inline-flex; align-items: center; padding: 1px 2px 0; border-top: 1px solid currentColor; }

/* Стрілка вектора: лінія з вістрям, на всю ширину букви чи клітинки під нею */
.vv-strilka { position: relative; display: block; height: 7px; color: inherit; }
.vv-strilka::before { content: ''; position: absolute; left: 0; right: 1px; top: 3px; border-top: 1.3px solid currentColor; }
.vv-strilka::after {
    content: ''; position: absolute; right: 0; top: 1px; width: 4px; height: 4px;
    border-top: 1.3px solid currentColor; border-right: 1.3px solid currentColor; transform: rotate(45deg);
}
.vv-vec { display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1; padding: 0 2px; }

/* значок матриці на кнопці */
.vv-mm { display: inline-grid; gap: 2px; padding: 1px 4px; border-left: 1.3px solid currentColor; border-right: 1.3px solid currentColor; border-radius: 7px / 50%; }
.vv-mm i { width: 5px; height: 5px; border: 1px solid currentColor; box-sizing: border-box; }
.vv-mm2 { grid-template-columns: repeat(2, auto); }
.vv-mm3 { grid-template-columns: repeat(3, auto); }
.vv-mm3 i { width: 4px; height: 4px; }

/* ---------- конструктор формули ---------- */
.vv-bud { margin-top: 8px; padding: 4px 10px 10px; border: 1px solid #59a8a5; border-radius: 4px; background: #fff; }
.vv-bud-f { display: flex; align-items: center; min-height: 70px; padding: 8px 0; color: #222; overflow-x: auto; }
.vv-bud-pereg { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 10px; padding: 8px; overflow-y: hidden;
    border: 1px dashed #c9d3d6; border-radius: 4px; background: #fafafa; overflow-x: auto; }
.vv-bud-pereg .vv-pidpys { margin: 0; flex: none; }
.vv-bud-pereg-tilo { font-size: 18px; color: #222; }
.vv-bud-kn { display: flex; flex-wrap: wrap; gap: 8px; }
.vv-bud-kn .vv-kn { height: 34px; padding: 0 16px; font-size: 14px; }

.vv-slot { display: inline-flex; align-items: center; gap: 2px; }
.vv-root { flex-wrap: wrap; row-gap: 10px; }
.vv-str { display: inline-flex; align-items: center; gap: 2px; }

/* Клітинки. Усе з !important: форма коментаря (#comments-form input[type=text])
   і попап (.contact-form input[type=text]) мають власні правила для полів, частину
   з яких теж оголошено !important і з id у селекторі — тому :not(#vv): він нічого
   не відсіює, лише додає нашим правилам ваги id. Ширину непорожньої клітинки ставить скрипт. */
.vv-bud:not(#vv) input.vv-b {
    box-sizing: border-box !important; flex: none !important;
    width: 2.4em !important; min-width: 0 !important; max-width: 14em !important; height: 38px !important;
    margin: 0 !important; padding: 0 4px !important; text-align: center !important;
    border: 2px dashed #59a8a5 !important; border-radius: 4px !important;
    background: #f3faf9 !important; color: #222 !important; box-shadow: none !important; transition: none !important;
    font: 16px/1 'Cambria Math', Cambria, 'Times New Roman', serif !important;
}
.vv-bud:not(#vv) input.vv-b:focus { outline: 0 !important; border-style: solid !important; background: #fff !important; }
.vv-bud:not(#vv) input.vv-b.vv-b-pomylka { border-color: #d9534f !important; background: #fdf1f0 !important; }
.vv-bud:not(#vv) .vv-slot-mal > input.vv-b { width: 2em !important; height: 30px !important; }
/* порожня клітинка поруч із формулою — вузька «щілина»: туди можна дописати */
.vv-bud:not(#vv) input.vv-b.vv-b-vuzka { width: 12px !important; padding: 0 !important; border: 1px dotted #b7c7c6 !important; background: transparent !important; }
.vv-bud:not(#vv) input.vv-b.vv-b-vuzka:focus { width: 1.6em !important; border: 2px solid #59a8a5 !important; background: #fff !important; }
.vv-bud:not(#vv) .vv-b-syst > .vv-slot > input.vv-b:only-child { width: 9em !important; max-width: 50vw !important; text-align: left !important; }

.vv-b-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.vv-b-frac > i { align-self: stretch; height: 2px; background: currentColor; }
.vv-b-vhoru { align-self: flex-start; }
.vv-b-vnyz { align-self: flex-end; position: relative; top: 9px; }
/* показник степеня й індекс — помітно вище чи нижче рядка */
.vv-str > .vv-b-vhoru:only-child { position: relative; top: -13px; }
.vv-str > .vv-b-vnyz:only-child { top: 13px; }
.vv-b-zn { font: 34px/1 'Cambria Math', Cambria, 'Times New Roman', serif; }
.vv-b-tekst { font: 18px/1 'Cambria Math', Cambria, 'Times New Roman', serif; padding: 0 2px; }
.vv-bud-f .vv-kor-pid { padding: 5px 3px 1px; }
.vv-b-vec { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; }
.vv-b-vec > .vv-strilka { height: 9px; }
.vv-b-vec > .vv-strilka::before { top: 4px; border-top-width: 2px; }
.vv-b-vec > .vv-strilka::after { top: 1px; width: 6px; height: 6px; border-width: 2px; }
.vv-b-duzhka { font-size: 76px; font-weight: 100; margin-top: -8px; }
.vv-b-stovp { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.vv-b-syst { align-items: flex-start; gap: 6px; }
.vv-b-riad { display: inline-flex; align-items: center; gap: 2px; }
.vv-b-int { font-size: 56px; margin-right: -4px; }
.vv-b-mezhi { gap: 10px; align-self: stretch; justify-content: space-between; }
.vv-b-d { padding-left: 6px; font-style: italic; }
.vv-b-suma { font-size: 40px; }
.vv-b-matr { display: inline-grid; gap: 5px; padding: 4px 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 16px / 50%; }
.vv-b-matr2 { grid-template-columns: repeat(2, auto); }
.vv-b-matr3 { grid-template-columns: repeat(3, auto); }
.vv-b-matr > .vv-slot { justify-content: center; }

.vv-stan { min-height: 0; margin: 4px 0 0; font: 13px/1.4 Arial, sans-serif; color: #666; }
.vv-stan:empty { display: none; }
.vv-stan-slukhaie { color: #b52b27; font-style: italic; }
.vv-stan-pomylka { color: #b52b27; }

.vv-pereg {
    box-sizing: border-box; width: 100%; max-width: 600px; margin: 6px 0 0;
    padding: 4px 8px 8px; border: 1px dashed #c9d3d6; background: #fff;
}
.error-popup .vv-pereg { max-width: none; }
.vv-pereg-tilo { font-size: 15px; line-height: 1.5; color: #222; overflow-x: auto; word-wrap: break-word; }

/* Темна тема сайту (html.temna): кольори з його ж змінних */
html.temna .vv-panel, html.temna .vv-bud-pereg { background: var(--t-plashka); border-color: var(--t-ramka); }
html.temna .vv-bud, html.temna .vv-pereg { background: var(--t-tlo); }
html.temna .vv-bud-f, html.temna .vv-bud-pereg-tilo, html.temna .vv-pereg-tilo { color: var(--t-tekst); }
html.temna .vv-s, html.temna .vv-kn, html.temna #jc .bbcode .vv-kn { background: var(--t-tlo); border-color: var(--t-ramka); color: var(--t-tekst); }
html.temna .vv-kn.vv-akt, html.temna #jc .bbcode .vv-kn.vv-akt { background: #59a8a5; border-color: #59a8a5; color: #fff; }
html.temna .vv-vkl { color: var(--t-tekst); }
html.temna .vv-bud:not(#vv) input.vv-b { background: var(--t-plashka) !important; color: var(--t-tekst) !important; }
html.temna .vv-bud:not(#vv) input.vv-b.vv-b-vuzka { background: transparent !important; }

/* Відповідь JComments після «Надіслати», повторена під кнопкою (див. vvid.js) */
.vv-spovishchennia {
    box-sizing: border-box; max-width: 600px; margin: 10px 0 0; padding: 10px 14px;
    border: 1px solid #9fd3b3; border-radius: 5px; background: #e3f4ea; color: #1e5e36;
    font: 15px/1.4 Arial, sans-serif; clear: both;
}
.vv-spovishchennia-pomylka { border-color: #f1b0aa; background: #fdecea; color: #8a1f17; }
html.temna .vv-spovishchennia { border-color: #2f6b47; background: #173624; color: #bfe8cf; }
html.temna .vv-spovishchennia-pomylka { border-color: #7a2e28; background: #3a1916; color: #f3c1bc; }