/**
 * «Репасс» вживую (js/repass-live.js): ход прогона и проверки.
 *
 * В строке аккаунта — полоса шагов и подпись, что делается сейчас; в списке
 * заданий — карточка, которая выполняется, и итог каждой. Движение только
 * там, где идёт работа: строка в очереди просто приглушена, а не мигает.
 */

/* ── Полоса хода в строке ─────────────────────────────────────────────── */

.rp-live {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 var(--s4);
  transition: grid-template-rows .25s var(--ease), padding .25s var(--ease);
}
.rp-live > * { overflow: hidden; min-height: 0; }
.rp-live.on {
  grid-template-rows: auto auto;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s3);
}

/* Шаги прохода: пройденные — галочкой, текущий — пульсирующей точкой. */
.rp-steps {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp-steps li {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  color: var(--text-mute);
  font-size: 11px;
  overflow: hidden;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.rp-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-steps li i {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: normal 700 8px/1 var(--sans);
}
.rp-steps li.done { color: var(--ok); background: var(--ok-dim); }
.rp-steps li.done i { border-color: var(--ok); background: var(--ok); color: #062b1f; }
.rp-steps li.done i::before { content: "✓"; }
.rp-steps li.now { color: #fff; background: linear-gradient(90deg, rgba(168, 85, 247, .35), rgba(168, 85, 247, .12)); }
.rp-steps li.now i { border-color: var(--accent-hi); border-right-color: transparent; animation: dd-rot .7s linear infinite; }
/* Текущий шаг — с бегущим бликом: видно, что процесс не завис. */
.rp-steps li.now::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: dd-scan 1.2s linear infinite;
}
.rp-steps li.fail { color: var(--err); background: var(--err-dim); }
.rp-steps li.fail i::before { content: "✕"; }
.rp-steps li.skip { opacity: .4; }

.rp-live-t { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.rp-live-t b { color: var(--text); font-weight: 640; }
.rp-live-t.now { color: var(--accent-hi); }
.rp-live-t.ok { color: var(--ok); }
.rp-live-t.ok b { color: var(--ok); }
.rp-live-t.bad { color: var(--err); }
.rp-live-t.wait { color: var(--text-mute); animation: step-pulse 1.4s ease-in-out infinite; }

/* ── Состояние строки ─────────────────────────────────────────────────── */

.rp-acc.lv-queued { opacity: .7; }
.rp-acc.lv-run, .rp-acc.lv-check {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line), var(--glow);
}
.rp-acc.lv-check .rp-head { position: relative; overflow: hidden; }
.rp-acc.lv-check .rp-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(199, 155, 255, .1) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: dd-scan 1.1s linear infinite;
  pointer-events: none;
}
.rp-acc.lv-done { animation: dd-flash 1.2s var(--ease); }
.rp-acc.lv-fail { border-color: var(--err-line); }

/* Кольцо и числа после проверки, если что-то изменилось, вспыхивают. */
.rp-acc.rp-updated .rp-ring, .rp-acc.rp-updated .rp-nums { animation: rp-bump .6s var(--ease); }
@keyframes rp-bump {
  40% { transform: scale(1.08); filter: brightness(1.4); }
}

/* Кнопка в работе — как у ДоДепа. */
.rp-btns .btn.is-running, [data-rp-all].is-running {
  border-color: var(--accent-line);
  color: var(--accent-hi);
  box-shadow: var(--glow);
}

/* ── Карточки заданий ─────────────────────────────────────────────────── */

.rp-card { position: relative; overflow: hidden; }

/* Выполняется прямо сейчас: акцентная рамка, блик и метка. */
.rp-card.is-running {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line), var(--glow);
}
.rp-card.is-running::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(199, 155, 255, .14) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: dd-scan 1.1s linear infinite;
  pointer-events: none;
}
.rp-card.is-ok { animation: dd-flash 1.2s var(--ease); border-color: var(--ok); }
.rp-card.is-fail { border-color: var(--err-line); animation: dd-shake .35s var(--ease); }

/* Изменилось при последней проверке — подсвечено несколько секунд. */
.rp-card.is-updated { animation: rp-upd 2.4s var(--ease); }
@keyframes rp-upd {
  0%, 30% { box-shadow: 0 0 0 1px var(--ok), 0 0 18px rgba(52, 211, 153, .4); border-color: var(--ok); opacity: 1; }
}

.rp-card-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-dim);
  color: var(--accent-hi);
  font-size: 10px;
  font-weight: 650;
  animation: dd-note-in .2s var(--ease);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-card-live.ok { background: var(--ok-dim); color: var(--ok); }
.rp-card-live.bad { background: var(--err-dim); color: var(--err); }
.rp-card-live .dd-spin { width: 9px; height: 9px; }

@media (max-width: 760px) {
  .rp-steps li span { display: none; }
  .rp-steps li { justify-content: center; }
  .rp-steps li.now span { display: inline; }
}

/* ── Обложка сезона (js/repass-season.js) ─────────────────────────────── */
/* Обложка — готовая картинка 3:1 (2400×800) с названием и датами внутри:
   показываем целиком и без затемнения. Высота ограничена 210–300 пикселями —
   на широком мониторе она иначе вырастала до полэкрана, а колонка данных
   рядом растягивалась пустотой. Колонка плотная: крупно «сколько осталось»,
   лента дней сезона, и что сгорит, если не забрать. */

.rp-season {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  margin-bottom: var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--solid-1);
  box-shadow: var(--shadow-2), var(--hairline);
  overflow: hidden;
}
.rp-season-art { display: block; line-height: 0; background: var(--bg-3); }
.rp-season-art img {
  display: block;
  height: clamp(210px, 17vw, 300px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.rp-season-info {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
  min-width: 0;
  padding: var(--s4) var(--s5);
  border-left: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(168, 85, 247, .16), transparent 60%),
    var(--solid-1);
}
/* На сверхшироком мониторе колонка шире полутора тысяч пикселей — лента
   на всю эту ширину читалась бы как линейка. Содержимое держим компактным. */
.rp-season-info > * { width: 100%; max-width: 720px; }
.rp-season-body { min-width: 0; display: grid; gap: 3px; }
.rp-season-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.rp-season-tag i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); }
.rp-season-tag i.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim); animation: conn-pulse 2.6s var(--ease) infinite; }
.rp-season-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.rp-season-desc { margin: 0; font-size: 11.5px; color: var(--text-dim); }

/* Число и лента — столбиком в узкой колонке, рядом в широкой. */
.rp-season-main { display: grid; gap: var(--s3); }
@container (min-width: 520px) {
  .rp-season-main { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s5); }
}

.rp-season-left { display: grid; gap: 2px; }
.rp-season-left b {
  font-size: 34px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff, var(--accent-hi));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rp-season-left span { font-size: 11px; color: var(--text-mute); }

/* Лента дней: клетка на день. Прошедшие залиты, сегодня пульсирует. */
.rp-season-prog { display: grid; gap: 6px; min-width: 0; }
.rp-season-days { display: flex; gap: 3px; }
.rp-season-days i {
  flex: 1;
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  transition: background var(--dur);
}
.rp-season-days i.past { background: linear-gradient(180deg, var(--accent), var(--accent-2)); opacity: .8; }
.rp-season-days i.today {
  background: var(--accent-hi);
  box-shadow: 0 0 0 2px var(--accent-dim), var(--glow);
  animation: rp-today 1.8s ease-in-out infinite;
}
@keyframes rp-today { 50% { opacity: .55; } }
.rp-season-meta { display: flex; justify-content: space-between; gap: var(--s2); font-size: 10.5px; color: var(--text-mute); }
.rp-season-meta span:nth-child(2) { color: var(--text-dim); font-weight: 600; }

/* Что сгорит вместе с сезоном — тихо, пока сезону далеко до конца. */
.rp-season-burn {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 6px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .25);
  font-size: 11.5px;
  color: var(--text-dim);
}
.rp-season-burn b { font-size: 15px; color: var(--accent-hi); }

/* Последние два дня — жёлтым: незабранное сгорит вместе с сезоном. */
.rp-season.soon { border-color: var(--warn-line); }
.rp-season.soon .rp-season-left b { background: linear-gradient(180deg, #fff3c4, var(--warn)); -webkit-background-clip: text; background-clip: text; }
.rp-season.soon .rp-season-days i.past { background: linear-gradient(180deg, var(--warn), #b45309); }
.rp-season.soon .rp-season-days i.today { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-dim); }
.rp-season.soon .rp-season-burn { border-color: var(--warn-line); background: var(--warn-dim); color: var(--warn); }
.rp-season.soon .rp-season-burn b { color: var(--warn); }
.rp-season.over { opacity: .75; }

/* Узкое окно: картинка во всю ширину, колонка под ней. */
@media (max-width: 1100px) {
  .rp-season { grid-template-columns: minmax(0, 1fr); }
  .rp-season-art img { width: 100%; height: auto; }
  .rp-season-info { border-left: 0; border-top: 1px solid var(--line); padding: var(--s3) var(--s4); }
}