/* Розділ «Бектест»: сесії (btsess.js). Картки, сітка й поля — з
   accounts.css; тут лише своє. Слова й кнопки — токенами журналу, щоб
   жити в усіх десяти оформленнях. Вікно з кривою темне саме по собі: це
   не частина оформлення, а екран прогону, як він і виглядає. */

/* Картка з кривою стоїть над сіткою сесій і читається як головна дія
   розділу, а не як ще одна сесія: вікно з кривою на всю висоту, назва й
   одна яскрава кнопка. */
.rp-shell{margin-bottom:var(--stack)}
/* Три частини: вікно з кривою, назва з кнопками й підсумок. Підсумок
   забирає все, що лишилось: тулитись до правого краю, лишаючи посеред
   картки порожнечу, йому нема чого. */
.rp-hero{display:grid; grid-template-columns:minmax(200px,264px) auto minmax(320px,1fr);
  gap:0; align-items:stretch; padding:0; overflow:hidden; min-height:172px}

/* ---------------- вікно з кривою ---------------- */

/* Вікно живе своїм кольором, не акцентом оформлення: воно темне в усіх
   десяти темах, а на темному зелений неон і читається (власник дав саме
   такий референс). Синій акцент світлої теми тут виглядав би чужим. */
.rp-art{position:relative; overflow:hidden;
  --rp-ink:#2ee6a0;          /* сама лінія */
  --rp-bead:#8dfbcd;         /* кулька — той самий зелений, тільки світліший */
  background:
    radial-gradient(118% 84% at 70% 74%, rgba(46,230,160,.17) 0%, #040b0a 62%),
    #040b0a;
  /* Закруглене з усіх боків, а не лише з того, де його обрізала сама
     картка (прохання власника 15.10.2026): радіус той самий, що в
     .core, тож зліва край лишається таким, як був. Риски праворуч
     більше немає: край сам відділяє вікно від слів, а пряма лінія
     торчала б за закругленням. */
  border-radius:17px}
.rp-frame{position:absolute; inset:0; width:100%; height:100%; display:block}

.rp-frame .glow{stroke:var(--rp-ink); stroke-width:14; opacity:.26;
  filter:blur(9px); stroke-linecap:round}
.rp-frame .line{stroke:var(--rp-ink); stroke-width:2.2; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(46,230,160,.75));
  /* лінія з'являється малюванням: від початку картки до кінця */
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:rp-draw 1.4s cubic-bezier(.16,1,.3,1) forwards}
/* Рухається по лінії одна річ — куля: це місце, де прогін стоїть.
   Світляний відрізок, що бігав тут раніше, прибрано (прохання власника
   15.10.2026): два рухи по одній лінії сперечались, і помітніший
   виявився не той. */
.rp-frame .dot .halo{fill:var(--rp-bead); opacity:.16;
  animation:rp-pulse 3.2s ease-in-out infinite}
.rp-frame .dot .bead{filter:drop-shadow(0 0 12px rgba(141,251,205,.85))}
/* Куля котиться по кривій і одразу, без паузи на початку: лінія
   домальовується за нею сама, а чекати на картці нема чого.

   Шлях приходить у `style` з розмітки — там крива одна на весь малюнок.
   Рух робить motion path, а не SMIL: SMIL не заводиться, коли розмітку
   вставили через `innerHTML`, а розділ малюється саме так. */
.rp-frame .dot{offset-rotate:0deg; offset-distance:46%; opacity:0;
  animation:rp-show .35s ease-out forwards,
            rp-ride 13s cubic-bezier(.45,0,.55,1) infinite alternate}
/* Старий браузер без motion path поставив би кулю в куток — тоді просто
   садимо її на криву (точка 0,46 довжини, порахована, не на око). */
@supports not (offset-path: path("M0 0")){
  .rp-frame .dot{animation:rp-show .35s ease-out forwards;
    transform:translate(107.1px,105.9px)}
}

@keyframes rp-draw{to{stroke-dashoffset:0}}
@keyframes rp-show{to{opacity:1}}
/* Край-у-край і назад: `alternate` розвертає кулю сам, тож у кадрах
   лише два кінці. Під самим краєм не ходимо — там крива вже за вікном. */
@keyframes rp-ride{from{offset-distance:4%} to{offset-distance:96%}}
@keyframes rp-pulse{0%,100%{opacity:.12; r:16} 50%{opacity:.24; r:20}}

/* Рух — там, де його просили. Вимкнув анімації в системі — лишається та
   сама картинка, просто одразу цілою. */
@media (prefers-reduced-motion:reduce){
  .rp-frame .line{animation:none; stroke-dashoffset:0}
  /* Куля лишається там, де стояла б посеред шляху, — на кривій. */
  .rp-frame .dot{animation:none; opacity:1; offset-distance:46%}
  .rp-frame .halo{animation:none}
}

/* ---------------- слова й кнопка ---------------- */

.rp-txt{min-width:0; padding:26px 40px 26px 30px}
.rp-hero h2{margin:0; font-size:22px; font-weight:600; letter-spacing:-.01em}
/* Дві кнопки: почати — яскрава, продовжити недограний прогін — тиха
   поруч. Другої може й не бути, тому відступ тримає ряд, а не кнопка. */
.rp-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.rp-go{display:inline-flex; align-items:center; gap:8px}
.rp-go, .rp-on{min-height:40px; display:inline-flex; align-items:center}

/* ---------------- підсумок справа ---------------- */

/* Праворуч у картці порожньо, а підсумок усього бектесту людина інакше
   збирає очима по картках журналів. Чотири цифри: скільки журналів,
   скільки угод, вінрейт і підсумок у відсотках.

   Цифри стоять щільною групою, одна біля одної, й поділені тонкими
   рисками; від кнопок групу відсуває повітря, не межа. Розтягнуті на
   всю ширину, вони розпадались на чотири самотні числа. */
.rp-tiles{display:grid; grid-template-columns:repeat(3,max-content);
  justify-content:center; align-content:center; gap:0;
  padding:26px 34px 26px 56px}
/* Риски короткі — рівно на висоту цифр, бо плитки стоять по центру. */
.rp-tile{min-width:0; padding:0 27px}
.rp-tile + .rp-tile{border-left:1px solid var(--line-soft)}
.rp-tile .l{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  line-height:1.2; text-transform:uppercase; color:var(--faint);
  white-space:nowrap}
.rp-tile .v{margin-top:8px; font-size:22px; font-weight:600; line-height:1;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.rp-tile .v.up{color:var(--up)}
.rp-tile .v.down{color:var(--down)}

@media (max-width:1100px){
  /* Вузьке вікно: підсумок стає рядком під кнопками, а не третьою
     колонкою. Вікно з кривою тягнеться на обидва рядки, група цифр
     прилягає до лівого краю слів. */
  .rp-hero{grid-template-columns:minmax(180px,230px) 1fr}
  .rp-art{grid-row:1/3}
  .rp-txt{grid-column:2; grid-row:1; padding:26px 30px 4px}
  .rp-tiles{grid-column:2; grid-row:2; justify-content:start;
    align-content:start; padding:22px 30px 24px}
  .rp-tile:first-child{padding-left:0}
}

@media (max-width:620px){
  .rp-hero{grid-template-columns:1fr; min-height:0}
  .rp-art{grid-row:auto; height:124px}
  .rp-txt{grid-column:1; padding:20px 22px 4px}
  /* Три цифри лишаються рядком і на телефоні — вони короткі. Риски
     прибираємо: на вузькому екрані вони тиснуть цифри одна до одної. */
  .rp-tiles{grid-column:1; grid-row:auto; grid-template-columns:repeat(3,1fr);
    gap:0 14px; padding:18px 22px 20px}
  .rp-tile{padding:0}
  .rp-tile + .rp-tile{border-left:0}
  .rp-tile .v{font-size:19px}
  .rp-go{width:100%; justify-content:center}
}

/* ---------------- картка сесії ---------------- */

.bts-card{cursor:pointer; transition:box-shadow .16s}
.bts-card:hover{box-shadow:0 0 0 1px var(--line) inset}
.bts-go{font-weight:500; color:var(--accent)}
/* Прийшли з картки журналу — сесію видно одразу, без пошуку очима.
   Тихо: рамка акцентом, без заливки, бо картка й так натискається. */
.bts-seen{box-shadow:0 0 0 1px var(--accent) inset}
.bts-acts{display:flex; gap:10px; margin-left:auto}

/* Чи йде прогін. Пігулка, а не колір назви: назву читають, а стан
   ловлять оком. Завершена лишається тихою — її вже не продовжують. */
.bts-chip{flex:0 0 auto; align-self:flex-start; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line-soft); background:var(--panel-2); color:var(--faint);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap}
.bts-chip.on{border-color:transparent; background:var(--accent-soft); color:var(--accent)}
/* Друга пігулка — челендж. Фаза тиха, бо це просто місце в програмі;
   фанд і злив говорять кольором результату: саме їх шукають очима,
   пробігаючи список спроб. */
.bts-chip.ok{border-color:transparent; background:var(--up-soft); color:var(--up)}
.bts-chip.bad{border-color:transparent; background:var(--down-soft); color:var(--down)}

/* Пігулка стану стоїть праворуч, біля самого краю картки, а не
   приліплена до назви: назва коротка, і посеред рядка пігулка читалась
   як частина назви. Назва тягнеться й відсуває її (прохання власника
   20.10.2026). Значок стратегії, коли він є, лишається праворуч від
   пігулки — двоє йдуть однією групою. */
.bts-card .ac-name{flex:1 1 auto}
/* По висоті пігулка стоїть на рядку назви, а не посеред картки: назва й
   дата під нею — два рядки, і середина між ними ні на що не вказує. */
.bts-card .ac-top .bts-chip{align-self:flex-start; margin-top:1px}

/* Скільки проміжку історії пройдено. Смужка тонка й на всю ширину —
   вона про рух, а не про число; саме число стоїть поруч, бо на вузькій
   картці різниці між 70 і 80 відсотками оком не видно. */
.bts-prog{display:flex; align-items:center; gap:9px; margin-top:-4px}
.bts-prog b{flex:1 1 auto; position:relative; height:4px; border-radius:999px;
  background:var(--line-soft); overflow:hidden; display:block}
.bts-prog i{display:block; height:100%; border-radius:inherit; background:var(--accent)}
.bts-prog span{flex:0 0 auto; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint); white-space:nowrap}

/* Період сесії під назвою — єдиний підпис, і він не тихий: дата тут не
   виноска, а те, що відрізняє одну сесію від іншої (прохання власника
   20.10.2026). Інструмент і таймфрейм звідси прибрані — інструмент
   майже завжди стоїть у самій назві. */
.bts-when{color:var(--text); font-size:12.5px; font-variant-numeric:tabular-nums;
  letter-spacing:.01em}

/* Журнали сесії: куди пішли її угоди. Пігулкою зі значком — підключений
   журнал має читатись як звʼязок, а не як ще один сірий підпис унизу
   картки. Видалений лишається такою самою пігулкою, тільки тихою: вести
   нікуди, а знати, куди писала сесія, корисно. */
.bts-js{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line-soft)}
.bts-js.none{color:var(--faint)}
.bts-js .l{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.bts-j{display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border:1px solid transparent; border-radius:999px; background:var(--accent-soft);
  font:inherit; font-size:11.5px; font-weight:500; line-height:1.5;
  color:var(--accent); cursor:pointer; text-decoration:none;
  transition:border-color .16s}
.bts-j:hover{border-color:var(--accent)}
.bts-j .ic{flex:0 0 auto; opacity:.8}
.bts-j.gone{background:var(--panel-2); border-color:var(--line-soft);
  color:var(--faint); cursor:default}

/* ---------------- вікно «Новий прогін» ----------------

   Саме вікно — спільне з екраном прогону (replay-start.js), і майже
   все в ньому вже оформлене: поля, перемикачі, пігулки й сам діалог
   беруться з форми рахунку (accounts.css), тому в журналі воно
   виглядає журнальним, а не привезеним з іншого екрана.

   Тут лише те, чого у форми рахунку немає: вузька колонка валюти й
   розміри пташок — на екрані прогону їх задає replay.css, якого тут
   немає. Усе під `#runBox`, щоб нічого з цього не дісталось решти
   журналу. */

/* Валюта коротка — «USD» на півряда виглядає як помилка верстки. */
#runBox .ac-cur{grid-template-columns:minmax(0,1fr) 92px}
/* Пташки в розмітці вікна без розмірів: тут їх задає оформлення. */
#runBox .ac-date svg, #runBox .rs-sym svg,
#runBox .ac-combo-x svg{width:18px; height:18px}

/* Поки їде довідник інструментів, кнопка мовчить — але видно, що її
   натиснули. */
.rp-go.wait{opacity:.6; pointer-events:none}

@media (max-width:520px){
  #runBox .ac-cur{grid-template-columns:minmax(0,1fr)}
}

/* Сесія рядком (.lv-row у accounts.css): пігулка стану стоїть у лінію з
   назвою, а не підпирає її зверху, як на картці. */
.lv-row .bts-chip{align-self:center}

/* Сесії й перемотка поки лише власникам журналу: пункт меню й усе з
   класом bt-plus-only решта не бачить (клас bt-plus ставить app.js). */
:root:not(.bt-plus) .bt-plus-only{display:none !important}