/* Информер «?» и его всплывашка (scripts/info-tips.js) вне редактора:
   тарифы, главная, посадочные, окно «Не хватает монет». В редакторе те же
   правила для .info-tip-pop лежат в creator.css. Цвета — с запасными
   значениями: у посадочных свои переменные темы. */

.info-tip-pop {
  position: fixed;
  z-index: 1000;
  padding: 10px 12px;
  border: 1px solid var(--line-strong, rgba(78, 141, 255, 0.44));
  border-radius: 12px;
  background: var(--panel-strong, rgba(12, 19, 35, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: var(--ink, #f7fbff);
  font: 500 13px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  white-space: normal;
  animation: info-tip-in 140ms ease-out;
}

.info-tip-pop[hidden] {
  display: none;
}

html[data-theme="light"] .info-tip-pop {
  border-color: rgba(24, 116, 217, 0.3);
  background: #fffdfc;
  box-shadow: 0 16px 40px rgba(20, 32, 56, 0.16);
  color: #222326;
}

@keyframes info-tip-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* «?» рядом со строкой «+N страниц с редактируемым текстом». */
.pkg-info {
  display: inline-grid;
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 800 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  vertical-align: 1px;
  opacity: 0.75;
  cursor: help;
  transition: opacity 140ms ease;
}

.pkg-info:hover,
.pkg-info[aria-expanded="true"] {
  opacity: 1;
}

.pkg-info:focus-visible {
  outline: 2px solid #56a7ff;
  outline-offset: 2px;
}

/* Палец не попадёт в 16 px — невидимая зона нажатия больше самой кнопки. */
@media (pointer: coarse) {
  .pkg-info {
    position: relative;
  }

  .pkg-info::after {
    position: absolute;
    inset: -12px;
    content: "";
  }
}