/* ============================================================================
 * LYSS design kit · ornaments.css — цвета векторных элементов и метки
 * ----------------------------------------------------------------------------
 * Общий файл для виджета и кастомизатора: SVG из lyss/ornaments.js рисуются
 * классами ниже, цвет приходит переменными. Поэтому один и тот же торец или
 * рамка красится акцентом любого блока без перерисовки.
 *   --orn-a  основной цвет (обычно акцент блока)
 *   --orn-a2 светлее, --orn-a3 темнее (считает виджет)
 *   --orn-h  блик (обычно белый), --orn-s второй цвет (золото, зелень…)
 * Без color-mix и :has — работает в старом CEF у OBS.
 * ========================================================================== */

.orn { overflow: visible; }
.orn .a  { fill: var(--orn-a, #8fb8ff); }
.orn .a2 { fill: var(--orn-a2, #c7dbff); }
.orn .a3 { fill: var(--orn-a3, #5f7fc0); }
.orn .h  { fill: var(--orn-h, #ffffff); }
.orn .s  { fill: var(--orn-s, var(--orn-a3, #5f7fc0)); }
.orn .ib { fill: var(--icon-bg, rgba(255, 255, 255, .92)); }
.orn .la { fill: none; stroke: var(--orn-a, #8fb8ff); }
.orn .l2 { fill: none; stroke: var(--orn-a2, #c7dbff); }
.orn .l3 { fill: none; stroke: var(--orn-a3, #5f7fc0); }
.orn .lh { fill: none; stroke: var(--orn-h, #ffffff); }
.orn .ls { fill: none; stroke: var(--orn-s, var(--orn-a3, #5f7fc0)); }

/* ---- метка «торец + центр + торец» ----
   Фон метки целиком (градиент, цвет), форма — маской из трёх частей:
   торцы фиксированного размера по высоте метки, центр тянется под текст.
   --lab-l / --lab-r — маски торцов, --lab-k — ширина торца в долях высоты. */
.lab-caps {
  --lab-h: 2.05em;
  --lab-cap: calc(var(--lab-h) * var(--lab-k, .4));
  height: var(--lab-h) !important;
  line-height: var(--lab-h) !important;
  padding: 0 calc(var(--lab-cap) + .3em) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask:
    var(--lab-l) left center / var(--lab-cap) 100% no-repeat,
    linear-gradient(#000, #000) center / calc(100% - 2 * var(--lab-cap) + 2px) 100% no-repeat,
    var(--lab-r) right center / var(--lab-cap) 100% no-repeat;
          mask:
    var(--lab-l) left center / var(--lab-cap) 100% no-repeat,
    linear-gradient(#000, #000) center / calc(100% - 2 * var(--lab-cap) + 2px) 100% no-repeat,
    var(--lab-r) right center / var(--lab-cap) 100% no-repeat;
}