/**
 * Вкладка «Репасс»: аккаунты батлпасса, свёрнутые до трёх чисел.
 *
 * Свёрнутый вид — главный: одиннадцать аккаунтов по шестнадцать заданий
 * это две сотни строк, в которых ничего не найти. Поэтому шапка блока
 * кликабельна целиком и носит шеврон: без него не видно, что она вообще
 * разворачивается.
 */

.rp-acc {
  margin-bottom: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  box-shadow: var(--hairline);
  overflow: hidden;
  transition: border-color var(--dur);
}
.rp-acc:hover { border-color: var(--line-2); }
.rp-acc:has(.rp-tasks:not(.hidden)) { border-color: var(--accent-line); }

.rp-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur);
}
.rp-head:hover { background: rgba(168, 85, 247, .08); }
.rp-head::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237e75a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5 7 8.5 10 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease);
}
/* Развёрнутость живёт классом .hidden на списке заданий — шеврон читает её
   через :has, чтобы js/repass.js не пришлось учить ещё одному классу. */
.rp-acc:has(.rp-tasks:not(.hidden)) .rp-head::after { transform: rotate(180deg); }

.rp-name { font-size: 12.5px; font-weight: 650; }
.rp-level { font-size: 10.5px; color: var(--text-mute); }
.rp-pills { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; }

/* Полоса опыта до следующего уровня. */
.rp-exp {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .5);
  overflow: hidden;
}
.rp-exp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-hi));
  box-shadow: var(--glow);
  transition: width .3s var(--ease);
}

/* ── Задания ──────────────────────────────────────────────────────────── */

.rp-tasks {
  display: grid;
  gap: 1px;
  padding: var(--s1) var(--s2) var(--s2);
  border-top: 1px dashed var(--line);
}
.rp-task {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px var(--s2);
  border-radius: 5px;
  transition: background var(--dur);
}
.rp-task:hover { background: rgba(255, 255, 255, .04); }
/* Выполненное гасим: оно уже не требует внимания, но остаётся видимым —
   по нему проверяют, что проход вообще отработал. */
.rp-task.done { opacity: .42; }
.rp-task-name { flex: 1; min-width: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-task .muted { flex: none; font-size: 10px; }
.rp-task-prog { flex: none; min-width: 46px; text-align: right; font: 10.5px/1 var(--mono); color: var(--text-dim); }
.rp-task .pill { flex: none; min-width: 96px; justify-content: center; }

/* Кнопки прохода прижаты вправо — они относятся ко всему списку, а не к
   последнему заданию. */
.rp-tasks .row { justify-content: flex-end; margin: var(--s2) 0 0; }

@media (max-width: 760px) {
  .rp-head { flex-wrap: wrap; }
  .rp-pills { margin-left: 0; flex-basis: 100%; }
  .rp-task .pill { min-width: 0; }
}