/* Signatum — справочные подсказки по кнопке «Показать подсказки на странице».
   Отдельно от онбординга (ob-). Префикс sh-. Цвет — спокойный синий «справка»:
   не путается ни с чёрными подсказками онбординга, ни с оранжевыми лимитами. */

:root {
  --sh-bg: #eaf1ff;
  --sh-text: #1d3266;
  --sh-border: #b9cdf7;
  --sh-accent: #3866d6;
  --sh-shadow: 0 6px 18px rgba(29, 50, 102, .14);
  --sh-z: 880; /* ниже онбординга (900) и попапов редактора */
}

[data-theme="dark"] {
  --sh-bg: #16223d;
  --sh-text: #d6e2ff;
  --sh-border: #2e4a86;
  --sh-accent: #7ea3ff;
  --sh-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.sh-tip {
  position: fixed;
  z-index: var(--sh-z);
  max-width: 240px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--sh-bg);
  color: var(--sh-text);
  border: 1px solid var(--sh-border);
  box-shadow: var(--sh-shadow);
  font: 500 12.5px/1.45 Inter, "Helvetica Neue", Arial, sans-serif;
  pointer-events: none;           /* не мешает кликать по интерфейсу */
  animation: sh-in .15s ease-out;
}

/* стрелка */
.sh-tip::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--sh-bg);
  border: 1px solid var(--sh-border);
  transform: rotate(45deg);
}
.sh-tip[data-side="bottom"]::after { top: -6px;    left: var(--sh-arrow, 20px); border-right: 0; border-bottom: 0; }
.sh-tip[data-side="top"]::after    { bottom: -6px; left: var(--sh-arrow, 20px); border-left: 0;  border-top: 0; }
.sh-tip[data-side="left"]::after   { right: -6px;  top: var(--sh-arrow, 14px);  border-left: 0;  border-bottom: 0; }
.sh-tip[data-side="right"]::after  { left: -6px;   top: var(--sh-arrow, 14px);  border-right: 0; border-top: 0; }

/* подсвеченный элемент */
.sh-target {
  outline: 2px dashed var(--sh-accent) !important;
  outline-offset: 3px !important;
}

@keyframes sh-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 768px) {
  .sh-tip { max-width: calc(100vw - 32px); }
}

@media print { .sh-tip { display: none !important; } .sh-target { outline: none !important; } }
