/**
 * Article Read Progress Bar (ARPB) — стили
 * Все классы с префиксом .arpb- чтобы не конфликтовать с сайтом.
 * Настройка: переопределяйте CSS-переменные (--arpb-*) в своей таблице стилей.
 */

/* ----- Переменные для настройки (можно переопределить на сайте) ----- */
[data-arpb] {
  /* Полоса прогресса */
  --arpb-bar-height: 4px;
  --arpb-bar-bg: rgba(0, 0, 0, 0.08);
  --arpb-bar-fill: #2563eb;
  --arpb-bar-radius: 0;

  /* Блок статистики */
  --arpb-stats-bg: rgba(15, 23, 42, 0.92);
  --arpb-stats-color: #e2e8f0;
  --arpb-stats-font-size: 12px;
  --arpb-stats-padding: 6px 12px;
  --arpb-stats-gap: 12px;
  --arpb-stats-border-radius: 0 0 8px 8px;
  --arpb-stats-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --arpb-stats-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Акцент для “до конца” */
  --arpb-remaining-color: #94a3b8;
}

/* ----- Контейнер (фиксированный вверху) ----- */
.arpb-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  box-sizing: border-box;
  z-index: inherit;
  transition: transform 0.2s ease-out;
}

.arpb-wrap.arpb-bottom {
  top: auto;
  bottom: 0;
}

.arpb-wrap.arpb-hidden {
  transform: translateY(-100%);
}

.arpb-wrap.arpb-bottom.arpb-hidden {
  transform: translateY(100%);
}

/* ----- Трек и полоса прогресса ----- */
.arpb-track {
  width: 100%;
  height: var(--arpb-bar-height);
  background: var(--arpb-bar-bg);
  border-radius: var(--arpb-bar-radius);
  overflow: hidden;
  box-sizing: border-box;
}

.arpb-bar {
  height: 100%;
  width: 0;
  max-width: 100%;
  background: var(--arpb-bar-fill);
  border-radius: var(--arpb-bar-radius);
  box-sizing: border-box;
}

/* ----- Блок статистики ----- */
.arpb-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--arpb-stats-gap);
  padding: var(--arpb-stats-padding);
  background: var(--arpb-stats-bg);
  color: var(--arpb-stats-color);
  font-size: var(--arpb-stats-font-size);
  font-family: var(--arpb-stats-font-family);
  box-shadow: var(--arpb-stats-shadow);
  border-radius: var(--arpb-stats-border-radius);
  box-sizing: border-box;
  pointer-events: auto;
}

.arpb-wrap.arpb-bottom .arpb-stats {
  border-radius: 8px 8px 0 0;
}

.arpb-stat {
  white-space: nowrap;
}

.arpb-percent {
  font-weight: 700;
  min-width: 2.5em;
}

.arpb-total-time::before {
  content: "⏱ ";
  opacity: 0.9;
}

.arpb-remaining {
  color: var(--arpb-remaining-color);
}

.arpb-remaining-percent {
  color: var(--arpb-remaining-color);
  font-weight: 500;
}

.arpb-word-count {
  opacity: 0.85;
}

/* Скрытие левой части (время/слова) на узких экранах по желанию — через медиа-запрос у себя */
@media (max-width: 480px) {
  [data-arpb] .arpb-stats {
    --arpb-stats-gap: 8px;
    --arpb-stats-padding: 6px 8px;
    --arpb-stats-font-size: 11px;
  }
}