/* op-help — всплывающее пояснение оператору к кнопкам-операциям.
   Единый источник стиля (в темах не дублируем). Цвета — из переменных активной темы.
   Конвенция разметки:
     <span class="op-help" tabindex="0">
       <i class="op-help__icon">?</i>
       <span class="op-help__box" role="tooltip">
         <b class="op-help__title">…</b>
         <span class="op-help__row"><span class="op-help__k">Действие:</span> …</span>
         <span class="op-help__row"><span class="op-help__k op-help__k--ok">Не опасно:</span> …</span>
         <span class="op-help__row"><span class="op-help__k op-help__k--warn">Внимание:</span> …</span>
         <span class="op-help__row"><span class="op-help__k">Проверка результата:</span> …</span>
       </span>
     </span>
   Показ по наведению/фокусу, без JS. */
.op-help { position: relative; display: inline-flex; align-items: center; margin-left: .45rem; cursor: help; }
.op-help__icon { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--text-secondary);
  color: var(--surface); font-size: .68rem; font-style: normal; font-weight: 700; }
.op-help__box {
  position: absolute; bottom: 140%; right: 0; z-index: 1080; width: 300px; padding: 0;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  font-size: .78rem; line-height: 1.45; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.op-help:hover .op-help__box, .op-help:focus-within .op-help__box { opacity: 1; visibility: visible; transform: translateY(0); }
.op-help__title { display: block; padding: .5rem .8rem; background: var(--primary-color, var(--brand)); color: #fff; font-weight: 700; font-size: .8rem; }
.op-help__row { display: block; padding: .32rem .8rem; }
.op-help__row:not(:last-child) { border-bottom: 1px solid var(--border-color); }
.op-help__k { display: block; font-weight: 600; margin-bottom: .1rem; }
.op-help__k--ok { color: var(--success); }
.op-help__k--warn { color: var(--warning); }